From 6aa7702cbca600fa284df4503e1ebcd81aed5b01 Mon Sep 17 00:00:00 2001
From: Igor Carvalho <igorsilvabhz6@gmail.com>
Date: Fri, 16 Jun 2023 01:01:13 -0300
Subject: [PATCH 01/26] Add new random gradient colors

---
 src/frontend/src/utils.ts | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/frontend/src/utils.ts b/src/frontend/src/utils.ts
index 8859b3050..fc5d0f320 100644
--- a/src/frontend/src/utils.ts
+++ b/src/frontend/src/utils.ts
@@ -213,7 +213,23 @@ export const gradients = [
   "bg-gradient-to-br from-green-500 to-green-700",
   "bg-gradient-to-br from-rose-400 via-fuchsia-500 to-indigo-500",
   "bg-gradient-to-br from-sky-400 to-blue-500",
-
+  "bg-gradient-to-br from-green-200 via-green-400 to-green-500",
+  "bg-gradient-to-br from-red-400 via-gray-300 to-blue-500",
+  "bg-gradient-to-br from-gray-900 to-gray-600 bg-gradient-to-r",
+  "bg-gradient-to-br from-rose-500 via-red-400 to-red-500",
+  "bg-gradient-to-br from-fuchsia-600 to-pink-600",
+  "bg-gradient-to-br from-emerald-500 to-lime-600",
+  "bg-gradient-to-br from-rose-500 to-indigo-700",
+  "bg-gradient-to-br bg-gradient-to-tr from-violet-500 to-orange-300",
+  "bg-gradient-to-br from-gray-900 via-purple-900 to-violet-600",
+  "bg-gradient-to-br from-yellow-200 via-red-500 to-fuchsia-500",
+  "bg-gradient-to-br from-sky-400 to-indigo-900",
+  "bg-gradient-to-br from-amber-200 via-violet-600 to-sky-900",
+  "bg-gradient-to-br from-amber-700 via-orange-300 to-rose-800",
+  "bg-gradient-to-br from-gray-300 via-fuchsia-600 to-orange-600",
+  "bg-gradient-to-br from-fuchsia-500 via-red-600 to-orange-400",
+  "bg-gradient-to-br from-sky-400 via-rose-400 to-lime-400",
+  "bg-gradient-to-br from-lime-600 via-yellow-300 to-red-600",
 ];
 
 export const bgColors = {

From af14c843d3309d2177fec2e04aa958923ea934a6 Mon Sep 17 00:00:00 2001
From: Igor Carvalho <igorsilvabhz6@gmail.com>
Date: Fri, 16 Jun 2023 13:46:25 -0300
Subject: [PATCH 02/26] Add MainPage style constants

---
 src/frontend/src/constants.tsx                | 22 ++++++++++++
 .../components/nodeToolbarComponent/index.tsx |  4 +--
 src/frontend/src/pages/MainPage/index.tsx     | 34 ++++++++++---------
 3 files changed, 42 insertions(+), 18 deletions(-)

diff --git a/src/frontend/src/constants.tsx b/src/frontend/src/constants.tsx
index e32336578..64a64b7d6 100644
--- a/src/frontend/src/constants.tsx
+++ b/src/frontend/src/constants.tsx
@@ -148,3 +148,25 @@ export const EXPORT_CODE_DIALOG =
  */
 export const INPUT_STYLE =
   " focus:ring-1 focus:ring-offset-1 focus:ring-ring focus:outline-none ";
+
+
+/**
+ * The base text for subtitle of code dialog
+ * @constant
+ */
+export const COLUMN_DIV_STYLE =
+  " w-full h-full flex overflow-auto flex-col bg-muted px-16 ";
+
+/**
+ * The base text for subtitle of code dialog
+ * @constant
+ */
+export const NAV_DISPLAY_STYLE =
+  " w-full flex justify-between py-12 pb-2 px-6 ";
+
+/**
+ * The base text for subtitle of code dialog
+ * @constant
+ */
+export const BUTTON_DIV_STYLE =
+  " flex gap-2 ";
diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
index 70d1268f0..a5827b932 100644
--- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
@@ -82,7 +82,7 @@ const NodeToolbarComponent = (props) => {
             </ShadTooltip>
           )}
 
-          {/*
+          
           <Menu as="div" className="relative inline-block text-left z-100">
             <button className="hover:dark:hover:bg-[#242f47] text-gray-700 transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2 ring-1 ring-inset ring-gray-300 hover:bg-muted focus:z-10 rounded-r-md">
               <div>
@@ -173,7 +173,7 @@ const NodeToolbarComponent = (props) => {
                 </Menu.Items>
               </Transition>
             </button>
-          </Menu> */}
+          </Menu>
         </span>
       </div>
     </>
diff --git a/src/frontend/src/pages/MainPage/index.tsx b/src/frontend/src/pages/MainPage/index.tsx
index 0657000c1..e6bfaa58d 100644
--- a/src/frontend/src/pages/MainPage/index.tsx
+++ b/src/frontend/src/pages/MainPage/index.tsx
@@ -1,24 +1,26 @@
 import { useContext, useEffect } from "react";
-import { Download, Upload, Plus, Home, ExternalLink } from "lucide-react";
-import { TabsContext } from "../../contexts/tabsContext";
-import { Button } from "../../components/ui/button";
-import { Link, useNavigate } from "react-router-dom";
-import { CardComponent } from "../../components/cardComponent";
-export default function HomePage() {
-  const { flows, setTabId, downloadFlows, uploadFlows, addFlow, removeFlow } =
+import { COLUMN_DIV_STYLE, NAV_DISPLAY_STYLE } from "../../constants";
+
+  import { Download, Upload, Plus, Home, ExternalLink } from "lucide-react";
+  import { TabsContext } from "../../contexts/tabsContext";
+  import { Button } from "../../components/ui/button";
+  import { Link, useNavigate } from "react-router-dom";
+  import { CardComponent } from "../../components/cardComponent";
+  export default function HomePage() {
+    const { flows, setTabId, downloadFlows, uploadFlows, addFlow, removeFlow } =
     useContext(TabsContext);
-  useEffect(() => {
-    setTabId("");
-  }, []);
-  const navigate = useNavigate();
+    useEffect(() => {
+      setTabId("");
+    }, []);
+    const navigate = useNavigate();
   return (
-    <div className="w-full h-full flex overflow-auto flex-col bg-muted px-16">
-      <div className="w-full flex justify-between py-12 pb-2 px-6">
-        <span className="text-2xl flex items-center justify-center gap-2 font-semibold">
-          <Home className="w-6" />
+    <div className={`${ COLUMN_DIV_STYLE }`} >
+      <div className={`${ NAV_DISPLAY_STYLE }`}>
+        <span className=" text-2xl flex items-center justify-center gap-2 font-semibold ">
+          <Home className=" w-6 " />
           My Projects
         </span>
-        <div className="flex gap-2">
+        <div className="hi flex gap-2">
           <Button
             variant="primary"
             onClick={() => {

From 1c55a722fe5240e22740bf2df3dd97731ef3054c Mon Sep 17 00:00:00 2001
From: Igor Carvalho <igorsilvabhz6@gmail.com>
Date: Sat, 17 Jun 2023 12:05:58 -0300
Subject: [PATCH 03/26] feat: Add buildTrigger ShadTooltip

---
 .../chatComponent/buildTrigger/index.tsx      | 41 +++++++++++--------
 .../extraSidebarComponent/index.tsx           |  4 +-
 src/frontend/src/pages/MainPage/index.tsx     |  4 +-
 3 files changed, 28 insertions(+), 21 deletions(-)

diff --git a/src/frontend/src/components/chatComponent/buildTrigger/index.tsx b/src/frontend/src/components/chatComponent/buildTrigger/index.tsx
index 79e7ee247..a2fd118e5 100644
--- a/src/frontend/src/components/chatComponent/buildTrigger/index.tsx
+++ b/src/frontend/src/components/chatComponent/buildTrigger/index.tsx
@@ -8,6 +8,7 @@ import { useSSE } from "../../../contexts/SSEContext";
 import { typesContext } from "../../../contexts/typesContext";
 import { alertContext } from "../../../contexts/alertContext";
 import { postBuildInit } from "../../../controllers/API";
+import ShadTooltip from "../../ShadTooltipComponent";
 
 export default function BuildTrigger({
   open,
@@ -135,24 +136,30 @@ export default function BuildTrigger({
       leaveTo="translate-y-96"
     >
       <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]
-           bg-[#E2E7EE] dark:border-gray-600 cursor-pointer"
-          onClick={() => {
-            handleBuild(flow);
-          }}
+        <ShadTooltip
+          delayDuration={500}
+          content="Build Flow"
+          side="left"
         >
-          <button>
-            <div className="flex gap-3 items-center">
-              {isBuilding ? (
-                // Render your loading animation here when isBuilding is true
-                <Loading strokeWidth={1.5} style={{ color: "white" }} />
-              ) : (
-                <Zap className="sh-6 w-6 fill-[#dc735b] stroke-1 stroke-[#dc735b]"/>
-              )}
-            </div>
-          </button>
-        </div>
+          <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]
+            bg-[#E2E7EE] dark:border-gray-600 cursor-pointer"
+            onClick={() => {
+              handleBuild(flow);
+            }}
+          >
+            <button>
+              <div className="flex gap-3 items-center">
+                {isBuilding ? (
+                  // Render your loading animation here when isBuilding is true
+                  <Loading strokeWidth={1.5} style={{ color: "#dc735b" }} />
+                ) : (
+                  <Zap className="sh-6 w-6 fill-[#dc735b] stroke-1 stroke-[#dc735b]"/>
+                )}
+              </div>
+            </button>
+          </div>
+        </ShadTooltip>
       </div>
     </Transition>
   );
diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
index 7bec0517c..f8a5dc106 100644
--- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
@@ -158,13 +158,13 @@ export default function ExtraSidebar() {
                     .map((t: string, k) => (
                       <ShadTooltip
                         content={t}
-                        delayDuration={1500}
+                        delayDuration={500}
                         side="right"
                       >
                         <div key={k} data-tooltip-id={t}>
                           <div
                             draggable
-                            className={" cursor-grab border-l-8 rounded-l-md"}
+                            className={"cursor-grab border-l-8 rounded-l-md"}
                             style={{
                               borderLeftColor:
                                 nodeColors[d] ?? nodeColors.unknown,
diff --git a/src/frontend/src/pages/MainPage/index.tsx b/src/frontend/src/pages/MainPage/index.tsx
index e6bfaa58d..d9575cd6c 100644
--- a/src/frontend/src/pages/MainPage/index.tsx
+++ b/src/frontend/src/pages/MainPage/index.tsx
@@ -1,5 +1,5 @@
 import { useContext, useEffect } from "react";
-import { COLUMN_DIV_STYLE, NAV_DISPLAY_STYLE } from "../../constants";
+import { COLUMN_DIV_STYLE, NAV_DISPLAY_STYLE, BUTTON_DIV_STYLE } from "../../constants";
 
   import { Download, Upload, Plus, Home, ExternalLink } from "lucide-react";
   import { TabsContext } from "../../contexts/tabsContext";
@@ -20,7 +20,7 @@ import { COLUMN_DIV_STYLE, NAV_DISPLAY_STYLE } from "../../constants";
           <Home className=" w-6 " />
           My Projects
         </span>
-        <div className="hi flex gap-2">
+        <div className={`${ BUTTON_DIV_STYLE }`}>
           <Button
             variant="primary"
             onClick={() => {

From f7101f412370ff571773f1de0ddff0c3ab4297e9 Mon Sep 17 00:00:00 2001
From: Igor Carvalho <igorsilvabhz6@gmail.com>
Date: Sun, 18 Jun 2023 11:15:46 -0300
Subject: [PATCH 04/26] feat[components/chatTrigger/index.tsx]: Add Chat
 Interface shadTooltip

---
 .../chatComponent/chatTrigger/index.tsx       | 33 +++++++++++--------
 1 file changed, 20 insertions(+), 13 deletions(-)

diff --git a/src/frontend/src/components/chatComponent/chatTrigger/index.tsx b/src/frontend/src/components/chatComponent/chatTrigger/index.tsx
index 6d379fcac..1b7cb2f12 100644
--- a/src/frontend/src/components/chatComponent/chatTrigger/index.tsx
+++ b/src/frontend/src/components/chatComponent/chatTrigger/index.tsx
@@ -2,6 +2,7 @@ import { Transition } from "@headlessui/react";
 import { MessagesSquare } from "lucide-react";
 import { alertContext } from "../../../contexts/alertContext";
 import { useContext } from "react";
+import ShadTooltip from "../../ShadTooltipComponent";
 
 export default function ChatTrigger({ open, setOpen, isBuilt }) {
   const { setErrorData } = useContext(alertContext);
@@ -29,20 +30,26 @@ export default function ChatTrigger({ open, setOpen, isBuilt }) {
       leaveTo="translate-y-96"
     >
       <div className="absolute bottom-4 right-3">
-        <div
-          className="border flex justify-center items-center py-1 px-3 w-12 h-12 rounded-full bg-blue-500 dark:border-gray-600 cursor-pointer"
-          onClick={handleClick}
+        <ShadTooltip
+          delayDuration={500}
+          content="Chat Interface"
+          side="left"
         >
-          <button>
-            <div className="flex gap-3">
-              <MessagesSquare
-                className="h-6 w-6  text-blue-100 fill-blue-100"
-                style={{ color: "white" }}
-                strokeWidth={1.5}
-              />
-            </div>
-          </button>
-        </div>
+          <div
+            className="border flex justify-center items-center py-1 px-3 w-12 h-12 rounded-full bg-blue-500 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"
+                  style={{ color: "white" }}
+                  strokeWidth={1.5}
+                />
+              </div>
+            </button>
+          </div>
+        </ShadTooltip>
       </div>
     </Transition>
   );

From 662564653effbd3ebcedf905e3dcc27abfc5676b Mon Sep 17 00:00:00 2001
From: Igor Carvalho <igorsilvabhz6@gmail.com>
Date: Mon, 19 Jun 2023 19:29:18 -0300
Subject: [PATCH 05/26] feat[tailwind.config.js]: Add new colors variables and
 remove hex colors from the code

---
 .../chatComponent/buildTrigger/index.tsx          |  8 ++++----
 src/frontend/src/index.css                        | 14 ++++++++++++++
 .../components/extraSidebarComponent/index.tsx    |  8 ++++----
 .../components/nodeToolbarComponent/index.tsx     | 15 ++++++++-------
 src/frontend/tailwind.config.js                   |  7 +++++++
 5 files changed, 37 insertions(+), 15 deletions(-)

diff --git a/src/frontend/src/components/chatComponent/buildTrigger/index.tsx b/src/frontend/src/components/chatComponent/buildTrigger/index.tsx
index a2fd118e5..8b11ffdcb 100644
--- a/src/frontend/src/components/chatComponent/buildTrigger/index.tsx
+++ b/src/frontend/src/components/chatComponent/buildTrigger/index.tsx
@@ -142,8 +142,8 @@ export default function BuildTrigger({
           side="left"
         >
           <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]
-            bg-[#E2E7EE] dark:border-gray-600 cursor-pointer"
+            className="flex justify-center align-center py-1 px-3 w-12 h-12 rounded-full shadow-md hover:shadow-sm shadow-btn-shadow hover:shadow-btn-shadow
+            bg-buildBackground dark:border-gray-600 cursor-pointer"
             onClick={() => {
               handleBuild(flow);
             }}
@@ -152,9 +152,9 @@ export default function BuildTrigger({
               <div className="flex gap-3 items-center">
                 {isBuilding ? (
                   // Render your loading animation here when isBuilding is true
-                  <Loading strokeWidth={1.5} style={{ color: "#dc735b" }} />
+                  <Loading strokeWidth={1.5} className="text-build" />
                 ) : (
-                  <Zap className="sh-6 w-6 fill-[#dc735b] stroke-1 stroke-[#dc735b]"/>
+                  <Zap className="sh-6 w-6 fill-build stroke-1 stroke-build"/>
                 )}
               </div>
             </button>
diff --git a/src/frontend/src/index.css b/src/frontend/src/index.css
index 30eea80ba..58506ee7e 100644
--- a/src/frontend/src/index.css
+++ b/src/frontend/src/index.css
@@ -34,6 +34,14 @@
 	  --ring: 215 20.2% 65.1%; /* hsl(215 20% 65%) */
 
     --radius: 0.5rem;
+
+    --build: 11, 65% 61%; /* hsl(11, 65%, 61%) */
+
+    --build-background: #E2E7EE; /* hsl(215, 26%, 91%) */
+
+    --round-btn-shadow: #00000063;
+
+    --hover-btn-background: #242f47;
   }
 
 	.dark {
@@ -67,6 +75,8 @@
 	  --ring: 216 34% 17%; /* hsl(216 34% 17%) */
 
     --radius: 0.5rem;
+
+    --build-trigger: 11, 65% 61%; /* hsl(11, 65%, 61%) */
   }
 }
 
@@ -91,6 +101,10 @@
   --destructive-foreground: 210 40% 98%; /* hsl(210 40% 98%) */
   --ring: 215 20.2% 65.1%; /* hsl(215 20% 65%) */
   --radius: 0.5rem;
+  --build-trigger: 	#dc735b; /* hsl(11, 65%, 61%) */
+  --build-background: #E2E7EE; /*	hsl(215, 26%, 91%) */
+  --round-btn-shadow: #00000063;
+  --hover-btn-background: #242f47;
 }
 
 .dark {
diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
index f8a5dc106..bce0c6919 100644
--- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
@@ -66,7 +66,7 @@ export default function ExtraSidebar() {
       <div className="mt-2 mb-2 w-full flex gap-2 justify-between px-2 items-center">
         <ShadTooltip delayDuration={1000} content="Import" side="top">
           <button
-            className="hover:dark:hover:bg-[#242f47] text-gray-700 w-full justify-center shadow-sm transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300  relative inline-flex items-center rounded-md bg-white px-2 py-2 ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
+            className="hover:dark:hover:bg-btn-hover-bg text-gray-700 w-full justify-center shadow-sm transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300  relative inline-flex items-center rounded-md bg-white px-2 py-2 ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
             onClick={() => {
               // openPopUp(<ImportModal />);
               uploadFlow();
@@ -79,7 +79,7 @@ export default function ExtraSidebar() {
         <ShadTooltip delayDuration={1000} content="Export" side="top">
           <button
             className={classNames(
-              "hover:dark:hover:bg-[#242f47] text-gray-700 w-full justify-center shadow-sm transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300  relative inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-gray-300 hover:bg-gray-50 rounded-md"
+              "hover:dark:hover:bg-btn-hover-bg text-gray-700 w-full justify-center shadow-sm transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300  relative inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-gray-300 hover:bg-gray-50 rounded-md"
             )}
             onClick={(event) => {
               openPopUp(<ExportModal />);
@@ -91,7 +91,7 @@ export default function ExtraSidebar() {
         <ShadTooltip delayDuration={1000} content="Code" side="top">
           <button
             className={classNames(
-              "hover:dark:hover:bg-[#242f47] text-gray-700 w-full justify-center shadow-sm transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300  relative inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-gray-300 hover:bg-gray-50 rounded-md"
+              "hover:dark:hover:bg-btn-hover-bg text-gray-700 w-full justify-center shadow-sm transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300  relative inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-gray-300 hover:bg-gray-50 rounded-md"
             )}
             onClick={(event) => {
               openPopUp(<ApiModal flow={flows.find((f) => f.id === tabId)} />);
@@ -103,7 +103,7 @@ export default function ExtraSidebar() {
 
         <ShadTooltip delayDuration={1000} content="Save" side="top">
           <button
-            className="hover:dark:hover:bg-[#242f47] text-gray-700 w-full justify-center transition-all shadow-sm duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300  relative inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-gray-300 hover:bg-gray-50 rounded-md"
+            className="hover:dark:hover:bg-btn-hover-bg text-gray-700 w-full justify-center transition-all shadow-sm duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300  relative inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-gray-300 hover:bg-gray-50 rounded-md"
             onClick={(event) => {
               saveFlow(flows.find((f) => f.id === tabId));
               setSuccessData({ title: "Changes saved successfully" });
diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
index a5827b932..f5636fc12 100644
--- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
@@ -1,10 +1,11 @@
 import { useContext, useState } from "react";
-import { Settings2, Copy, Trash2 } from "lucide-react";
+import { Settings2, Copy, Trash2, Menu } from "lucide-react";
 import { classNames } from "../../../../utils";
 import { TabsContext } from "../../../../contexts/tabsContext";
 import { useReactFlow } from "reactflow";
 import EditNodeModal from "../../../../modals/EditNodeModal";
 import ShadTooltip from "../../../../components/ShadTooltipComponent";
+import { EllipsisVerticalIcon } from "@heroicons/react/24/outline";
 
 const NodeToolbarComponent = (props) => {
   const [nodeLength, setNodeLength] = useState(
@@ -31,7 +32,7 @@ const NodeToolbarComponent = (props) => {
         <span className="isolate inline-flex rounded-md shadow-sm">
           <ShadTooltip delayDuration={1000} content="Delete" side="top">
             <button
-              className="hover:dark:hover:bg-[#242f47] text-gray-700 transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 shadow-md relative inline-flex items-center rounded-l-md bg-white px-2 py-2 ring-1 ring-inset ring-gray-300 hover:bg-muted focus:z-10"
+              className="hover:dark:hover:bg-btn-hover-bg text-gray-700 transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 shadow-md relative inline-flex items-center rounded-l-md bg-white px-2 py-2 ring-1 ring-inset ring-gray-300 hover:bg-muted focus:z-10"
               onClick={() => {
                 props.deleteNode(props.data.id);
               }}
@@ -44,8 +45,8 @@ const NodeToolbarComponent = (props) => {
             <button
               className={classNames(
                 nodeLength > 0
-                  ? "hover:dark:hover:bg-[#242f47] text-gray-700 transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-gray-300 hover:bg-muted focus:z-10"
-                  : "hover:dark:hover:bg-[#242f47] text-gray-700 transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-gray-300 hover:bg-muted focus:z-10 rounded-r-md"
+                  ? "hover:dark:hover:bg-btn-hover-bg text-gray-700 transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-gray-300 hover:bg-muted focus:z-10"
+                  : "hover:dark:hover:bg-btn-hover-bg text-gray-700 transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-gray-300 hover:bg-muted focus:z-10 rounded-r-md"
               )}
               onClick={(event) => {
                 event.preventDefault();
@@ -71,7 +72,7 @@ const NodeToolbarComponent = (props) => {
           {nodeLength > 0 && (
             <ShadTooltip delayDuration={1000} content="Edit" side="top">
               <button
-                className="hover:dark:hover:bg-[#242f47] text-gray-700 transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-gray-300 hover:bg-muted focus:z-10 rounded-r-md"
+                className="hover:dark:hover:bg-btn-hover-bg text-gray-700 transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-gray-300 hover:bg-muted focus:z-10 rounded-r-md"
                 onClick={(event) => {
                   event.preventDefault();
                   props.openPopUp(<EditNodeModal data={props.data} />);
@@ -83,7 +84,7 @@ const NodeToolbarComponent = (props) => {
           )}
 
           
-          <Menu as="div" className="relative inline-block text-left z-100">
+          {/* <Menu as="div" className="relative inline-block text-left z-100">
             <button className="hover:dark:hover:bg-[#242f47] text-gray-700 transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2 ring-1 ring-inset ring-gray-300 hover:bg-muted focus:z-10 rounded-r-md">
               <div>
                 <Menu.Button className="flex items-center">
@@ -173,7 +174,7 @@ const NodeToolbarComponent = (props) => {
                 </Menu.Items>
               </Transition>
             </button>
-          </Menu>
+          </Menu> */}
         </span>
       </div>
     </>
diff --git a/src/frontend/tailwind.config.js b/src/frontend/tailwind.config.js
index 4c871cfa3..55feba232 100644
--- a/src/frontend/tailwind.config.js
+++ b/src/frontend/tailwind.config.js
@@ -16,6 +16,9 @@ module.exports = {
     },
     extend: {
       colors: {
+        'btn-shadow': "var(--round-btn-shadow)",
+        buildBackground: "var(--build-background)",
+        build: "var(--build-trigger)",
         border: "hsl(var(--border))",
         input: "hsl(var(--input))",
         ring: "hsl(var(--ring))",
@@ -91,6 +94,10 @@ module.exports = {
     },
     extend: {
       colors: {
+        'btn-hover-bg': "var(--hover-btn-background)",
+        'btn-shadow': "var(--round-btn-shadow)",
+        buildBackground: "var(--build-background)",
+        build: "var(--build-trigger)",
         border: "hsl(var(--border))",
         input: "hsl(var(--input))",
         ring: "hsl(var(--ring))",

From 3ac3bfbf1fb1c1b301f8a6cfd57ffb700db5cc35 Mon Sep 17 00:00:00 2001
From: Igor Carvalho <igorsilvabhz6@gmail.com>
Date: Mon, 19 Jun 2023 19:33:09 -0300
Subject: [PATCH 06/26] ~

---
 src/frontend/src/index.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/frontend/src/index.css b/src/frontend/src/index.css
index 58506ee7e..331dabefa 100644
--- a/src/frontend/src/index.css
+++ b/src/frontend/src/index.css
@@ -105,6 +105,7 @@
   --build-background: #E2E7EE; /*	hsl(215, 26%, 91%) */
   --round-btn-shadow: #00000063;
   --hover-btn-background: #242f47;
+
 }
 
 .dark {

From 838e5b2af7d90bc82e9890bc02605713e5919a0d Mon Sep 17 00:00:00 2001
From: Igor Carvalho <igorsilvabhz6@gmail.com>
Date: Tue, 20 Jun 2023 19:21:00 -0300
Subject: [PATCH 07/26] feat[tailwind colors]: Change all tailwind default
 colors to variables colors

---
 .../components/parameterComponent/index.tsx   |  6 +-
 .../src/CustomNodes/GenericNode/index.tsx     | 28 +++---
 .../src/alerts/alertDropDown/index.tsx        | 12 +--
 src/frontend/src/alerts/error/index.tsx       |  8 +-
 src/frontend/src/alerts/notice/index.tsx      |  8 +-
 src/frontend/src/alerts/success/index.tsx     |  6 +-
 .../components/CrashErrorComponent/index.tsx  | 10 +--
 .../EditFlowSettingsComponent/index.tsx       |  2 +-
 .../ExtraSidebarComponent/index.tsx           | 30 +++----
 .../ReactTooltipComponent/index.tsx           |  2 +-
 .../chatComponent/buildTrigger/index.tsx      |  2 +-
 .../chatComponent/chatMessage/index.tsx       |  2 +-
 .../chatComponent/chatTrigger/index.tsx       |  4 +-
 .../components/codeAreaComponent/index.tsx    |  8 +-
 .../components/dropdownComponent/index.tsx    | 12 +--
 .../src/components/floatComponent/index.tsx   |  6 +-
 .../components/menuBar/index.tsx              |  6 +-
 .../src/components/headerComponent/index.tsx  |  4 +-
 .../src/components/inputComponent/index.tsx   | 12 +--
 .../components/inputFileComponent/index.tsx   |  6 +-
 .../components/inputListComponent/index.tsx   |  8 +-
 .../src/components/intComponent/index.tsx     |  6 +-
 .../src/components/loadingComponent/index.tsx |  4 +-
 .../src/components/promptComponent/index.tsx  |  8 +-
 .../components/textAreaComponent/index.tsx    |  8 +-
 .../src/components/toggleComponent/index.tsx  |  6 +-
 .../src/components/ui/rename-label.tsx        |  2 +-
 src/frontend/src/index.css                    | 86 ++++++++++++++++++-
 src/frontend/src/modals/ApiModal/index.tsx    |  4 +-
 .../src/modals/EditNodeModal/index.tsx        | 12 +--
 .../NodeModal/components/ModalField/index.tsx |  4 +-
 src/frontend/src/modals/NodeModal/index.tsx   | 16 ++--
 .../src/modals/chatModal/chatInput/index.tsx  | 10 +--
 .../modals/chatModal/chatMessage/index.tsx    | 18 ++--
 .../modals/chatModal/fileComponent/index.tsx  |  8 +-
 src/frontend/src/modals/chatModal/index.tsx   | 18 ++--
 .../src/modals/codeAreaModal/index.tsx        |  4 +-
 src/frontend/src/modals/exportModal/index.tsx |  2 +-
 .../src/modals/flowSettingsModal/index.tsx    |  2 +-
 .../src/modals/genericModal/index.tsx         |  4 +-
 .../modals/importModal/buttonBox/index.tsx    |  2 +-
 src/frontend/src/modals/importModal/index.tsx | 20 ++---
 src/frontend/src/modals/promptModal/index.tsx | 22 ++---
 .../src/modals/textAreaModal/index.tsx        | 22 ++---
 .../ConnectionLineComponent/index.tsx         |  4 +-
 .../components/DisclosureComponent/index.tsx  |  8 +-
 .../components/PageComponent/index.tsx        |  8 +-
 .../extraSidebarComponent/index.tsx           | 20 ++---
 .../components/nodeToolbarComponent/index.tsx | 14 +--
 src/frontend/tailwind.config.js               | 74 ++++++++++++++++
 50 files changed, 378 insertions(+), 220 deletions(-)

diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
index 65f946ba2..e2c651519 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
@@ -121,12 +121,12 @@ export default function ParameterComponent({
   return (
     <div
       ref={ref}
-      className="w-full flex flex-wrap justify-between items-center bg-muted dark:bg-gray-800 dark:text-white mt-1 px-5 py-2"
+      className="w-full flex flex-wrap justify-between items-center bg-muted dark:bg-dark-gray dark:text-white mt-1 px-5 py-2"
     >
       <>
         <div className={"text-sm truncate w-full " + (left ? "" : "text-end")}>
           {title}
-          <span className="text-red-600">{required ? " *" : ""}</span>
+          <span className="text-almost-medium-red">{required ? " *" : ""}</span>
         </div>
         {left &&
         (type === "str" ||
@@ -153,7 +153,7 @@ export default function ParameterComponent({
               }
               className={classNames(
                 left ? "-ml-0.5 " : "-mr-0.5 ",
-                "w-3 h-3 rounded-full border-2 bg-white dark:bg-gray-800"
+                "w-3 h-3 rounded-full border-2 bg-white dark:bg-dark-gray"
               )}
               style={{
                 borderColor: color,
diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx
index fdf830408..378a02344 100644
--- a/src/frontend/src/CustomNodes/GenericNode/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx
@@ -75,11 +75,11 @@ export default function GenericNode({
 
       <div
         className={classNames(
-          selected ? "border border-ring" : "border dark:border-gray-700",
-          "prompt-node relative flex w-96 flex-col justify-center rounded-lg bg-white dark:bg-gray-900"
+          selected ? "border border-ring" : "border dark:border-almost-dark-gray",
+          "prompt-node relative flex w-96 flex-col justify-center rounded-lg bg-white dark:bg-high-dark-gray"
         )}
       >
-        <div className="flex w-full items-center justify-between gap-8 rounded-t-lg border-b bg-muted p-4 dark:border-b-gray-700 dark:bg-gray-800 dark:text-white ">
+        <div className="flex w-full items-center justify-between gap-8 rounded-t-lg border-b bg-muted p-4 dark:border-b-almost-dark-gray dark:bg-dark-gray dark:text-white ">
           <div className="flex w-full items-center gap-2 truncate text-lg">
             <Icon
               className="h-10 w-10 rounded p-1"
@@ -89,7 +89,7 @@ export default function GenericNode({
             />
             <div className="ml-2 truncate">
               <ShadTooltip delayDuration={1500} content={data.type}>
-                <div className="ml-2 truncate text-gray-800">{data.type}</div>
+                <div className="ml-2 truncate text-dark-gray">{data.type}</div>
               </ShadTooltip>
             </div>
           </div>
@@ -122,25 +122,25 @@ export default function GenericNode({
                   <div
                     className={classNames(
                       validationStatus && validationStatus.valid
-                        ? "w-4 h-4 rounded-full bg-green-500 opacity-100"
-                        : "w-4 h-4 rounded-full bg-gray-500 opacity-0 hidden animate-spin",
-                      "absolute w-4 hover:text-gray-500 hover:dark:text-gray-300 transition-all ease-in-out duration-200"
+                        ? "w-4 h-4 rounded-full bg-almost-medium-green opacity-100"
+                        : "w-4 h-4 rounded-full bg-medium-gray opacity-0 hidden animate-spin",
+                      "absolute w-4 hover:text-medium-gray hover:dark:text-medium-low-gray transition-all ease-in-out duration-200"
                     )}
                   ></div>
                   <div
                     className={classNames(
                       validationStatus && !validationStatus.valid
-                        ? "w-4 h-4 rounded-full  bg-red-500 opacity-100"
-                        : "w-4 h-4 rounded-full bg-gray-500 opacity-0 hidden animate-spin",
-                      "absolute w-4 hover:text-gray-500 hover:dark:text-gray-300 transition-all ease-in-out duration-200"
+                        ? "w-4 h-4 rounded-full  bg-medium-red opacity-100"
+                        : "w-4 h-4 rounded-full bg-medium-gray opacity-0 hidden animate-spin",
+                      "absolute w-4 hover:text-medium-gray hover:dark:text-medium-low-gray transition-all ease-in-out duration-200"
                     )}
                   ></div>
                   <div
                     className={classNames(
                       !validationStatus
-                        ? "w-4 h-4 rounded-full  bg-yellow-500 opacity-100"
-                        : "w-4 h-4 rounded-full bg-gray-500 opacity-0 hidden animate-spin",
-                      "absolute w-4 hover:text-gray-500 hover:dark:text-gray-300 transition-all ease-in-out duration-200"
+                        ? "w-4 h-4 rounded-full  bg-medium-yellow opacity-100"
+                        : "w-4 h-4 rounded-full bg-medium-gray opacity-0 hidden animate-spin",
+                      "absolute w-4 hover:text-medium-gray hover:dark:text-medium-low-gray transition-all ease-in-out duration-200"
                     )}
                   ></div>
                 </div>
@@ -149,7 +149,7 @@ export default function GenericNode({
           </div>
         </div>
 
-        <div className="h-full w-full py-5 text-gray-800">
+        <div className="h-full w-full py-5 text-dark-gray">
           <div className="w-full px-5 pb-3 text-sm text-muted-foreground">
             {data.node.description}
           </div>
diff --git a/src/frontend/src/alerts/alertDropDown/index.tsx b/src/frontend/src/alerts/alertDropDown/index.tsx
index edd3bb23f..7ba779c02 100644
--- a/src/frontend/src/alerts/alertDropDown/index.tsx
+++ b/src/frontend/src/alerts/alertDropDown/index.tsx
@@ -24,13 +24,13 @@ export default function AlertDropdown({}: AlertDropdownType) {
   return (
     <div
       ref={componentRef}
-      className="z-10 py-3 pb-4 px-2 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"
+      className="z-10 py-3 pb-4 px-2 rounded-md bg-white dark:bg-dark-gray 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">
+      <div className="flex pl-3 flex-row justify-between text-md font-medium text-dark-gray dark:text-light-gray">
         Notifications
         <div className="flex gap-3 pr-3 ">
           <button
-            className="text-gray-800 hover:text-red-500 dark:text-gray-200 dark:hover:text-red-500"
+            className="text-dark-gray hover:text-medium-red dark:text-light-gray dark:hover:text-medium-red"
             onClick={() => {
               closePopUp();
               setTimeout(clearNotificationList, 100);
@@ -39,14 +39,14 @@ export default function AlertDropdown({}: AlertDropdownType) {
             <TrashIcon className="w-[1.1rem] h-[1.1rem]" />
           </button>
           <button
-            className="text-gray-800 hover:text-red-500 dark:text-gray-200 dark:hover:text-red-500"
+            className="text-dark-gray hover:text-medium-red dark:text-light-gray dark:hover:text-medium-red"
             onClick={closePopUp}
           >
             <XMarkIcon className="h-5 w-5" />
           </button>
         </div>
       </div>
-      <div className="mt-3 flex flex-col overflow-y-scroll w-full h-full scrollbar-hide text-gray-900 dark:text-gray-300">
+      <div className="mt-3 flex flex-col overflow-y-scroll w-full h-full scrollbar-hide text-high-dark-gray dark:text-medium-low-gray">
         {notificationList.length !== 0 ? (
           notificationList.map((alertItem, index) => (
             <SingleAlert
@@ -56,7 +56,7 @@ export default function AlertDropdown({}: AlertDropdownType) {
             />
           ))
         ) : (
-          <div className="h-full w-full pb-16 text-gray-500 dark:text-gray-500 flex justify-center items-center">
+          <div className="h-full w-full pb-16 text-medium-gray dark:text-medium-gray flex justify-center items-center">
             No new notifications
           </div>
         )}
diff --git a/src/frontend/src/alerts/error/index.tsx b/src/frontend/src/alerts/error/index.tsx
index bcabe764f..01c8fbb7e 100644
--- a/src/frontend/src/alerts/error/index.tsx
+++ b/src/frontend/src/alerts/error/index.tsx
@@ -39,21 +39,21 @@ export default function ErrorAlert({
             removeAlert(id);
           }, 500);
         }}
-        className="rounded-md w-96 mt-6 shadow-xl bg-red-50 dark:bg-red-900 p-4 cursor-pointer"
+        className="rounded-md w-96 mt-6 shadow-xl bg-light-red dark:bg-dark-red p-4 cursor-pointer"
       >
         <div className="flex">
           <div className="flex-shrink-0">
             <XCircleIcon
-              className="h-5 w-5 text-red-400 dark:text-red-50"
+              className="h-5 w-5 text-light-red dark:text-light-red"
               aria-hidden="true"
             />
           </div>
           <div className="ml-3">
-            <h3 className="text-sm font-medium text-red-800 dark:text-white/80">
+            <h3 className="text-sm font-medium text-almost-dark-red dark:text-white/80">
               {title}
             </h3>
             {list.length !== 0 ? (
-              <div className="mt-2 text-sm text-red-700 dark:text-red-50">
+              <div className="mt-2 text-sm text-medium-dark-red dark:text-light-red">
                 <ul className="list-disc space-y-1 pl-5">
                   {list.map((item, index) => (
                     <li key={index}>{item}</li>
diff --git a/src/frontend/src/alerts/notice/index.tsx b/src/frontend/src/alerts/notice/index.tsx
index 81dce8ca0..004d63bc7 100644
--- a/src/frontend/src/alerts/notice/index.tsx
+++ b/src/frontend/src/alerts/notice/index.tsx
@@ -36,22 +36,22 @@ export default function NoticeAlert({
           setShow(false);
           removeAlert(id);
         }}
-        className="rounded-md w-96 mt-6 shadow-xl bg-blue-50 dark:bg-blue-900 p-4"
+        className="rounded-md w-96 mt-6 shadow-xl bg-light-blue dark:bg-dark-blue p-4"
       >
         <div className="flex">
           <div className="flex-shrink-0">
             <InformationCircleIcon
-              className="h-5 w-5 text-blue-400 dark:text-blue-50"
+              className="h-5 w-5 text-medium-blue dark:text-light-blue"
               aria-hidden="true"
             />
           </div>
           <div className="ml-3 flex-1 md:flex md:justify-between">
-            <p className="text-sm text-blue-700 dark:text-white/80">{title}</p>
+            <p className="text-sm text-medium-dark-blue dark:text-white/80">{title}</p>
             <p className="mt-3 text-sm md:mt-0 md:ml-6">
               {link !== "" ? (
                 <Link
                   to={link}
-                  className="whitespace-nowrap font-medium text-blue-700 dark:text-blue-50 hover:dark:text-blue-10 hover:text-ring"
+                  className="whitespace-nowrap font-medium text-medium-dark-blue dark:text-light-blue hover:dark:text-blue-10 hover:text-ring"
                 >
                   Details
                 </Link>
diff --git a/src/frontend/src/alerts/success/index.tsx b/src/frontend/src/alerts/success/index.tsx
index d915adfcd..391a5831f 100644
--- a/src/frontend/src/alerts/success/index.tsx
+++ b/src/frontend/src/alerts/success/index.tsx
@@ -34,17 +34,17 @@ export default function SuccessAlert({
           setShow(false);
           removeAlert(id);
         }}
-        className="rounded-md w-96 mt-6 shadow-xl bg-green-50 dark:bg-green-900 p-4"
+        className="rounded-md w-96 mt-6 shadow-xl bg-light-green dark:bg-dark-green p-4"
       >
         <div className="flex">
           <div className="flex-shrink-0">
             <CheckCircleIcon
-              className="h-5 w-5 text-green-400 dark:text-green-50"
+              className="h-5 w-5 text-medium-green dark:text-light-green"
               aria-hidden="true"
             />
           </div>
           <div className="ml-3">
-            <p className="text-sm font-medium text-green-800 dark:text-white/80">
+            <p className="text-sm font-medium text-medium-dark-green dark:text-white/80">
               {title}
             </p>
           </div>
diff --git a/src/frontend/src/components/CrashErrorComponent/index.tsx b/src/frontend/src/components/CrashErrorComponent/index.tsx
index adc8909a8..c498e590a 100644
--- a/src/frontend/src/components/CrashErrorComponent/index.tsx
+++ b/src/frontend/src/components/CrashErrorComponent/index.tsx
@@ -1,11 +1,11 @@
 export default function CrashErrorComponent({ error, resetErrorBoundary }) {
   return (
-    <div className="fixed top-0 left-0 w-full h-full flex items-center justify-center bg-gray-800 bg-opacity-50 z-50">
+    <div className="fixed top-0 left-0 w-full h-full flex items-center justify-center bg-dark-gray bg-opacity-50 z-50">
       <div className="bg-white max-w-4xl h-1/3 min-h-fit rounded-lg shadow-lg p-8 text-start flex flex-col justify-evenly">
-        <h1 className="text-red-500 text-3xl mb-4">
+        <h1 className="text-medium-red text-3xl mb-4">
           Oops! An unknown error has occurred.
         </h1>
-        <p className="text-gray-700 mb-4 text-xl">
+        <p className="text-almost-dark-gray mb-4 text-xl">
           Please click the 'Reset Application' button to restore the
           application's state. If the error persists, please create an issue on
           our GitHub page. We apologize for any inconvenience this may have
@@ -14,7 +14,7 @@ export default function CrashErrorComponent({ error, resetErrorBoundary }) {
         <div className="flex justify-center">
           <button
             onClick={resetErrorBoundary}
-            className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mr-4"
+            className="bg-almost-dark-blue hover:bg-medium-dark-blue text-white font-bold py-2 px-4 rounded mr-4"
           >
             Reset Application
           </button>
@@ -22,7 +22,7 @@ export default function CrashErrorComponent({ error, resetErrorBoundary }) {
             href="https://github.com/logspace-ai/langflow/issues/new"
             target="_blank"
             rel="noopener noreferrer"
-            className="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded"
+            className="bg-medium-red hover:bg-medium-dark-red text-white font-bold py-2 px-4 rounded"
           >
             Create Issue
           </a>
diff --git a/src/frontend/src/components/EditFlowSettingsComponent/index.tsx b/src/frontend/src/components/EditFlowSettingsComponent/index.tsx
index 90e8f90a6..c24546af4 100644
--- a/src/frontend/src/components/EditFlowSettingsComponent/index.tsx
+++ b/src/frontend/src/components/EditFlowSettingsComponent/index.tsx
@@ -47,7 +47,7 @@ export const EditFlowSettings: React.FC<InputProps> = ({
         <div className="flex justify-between">
           <span className="font-medium">Name</span>{" "}
           {isMaxLength && (
-            <span className="text-red-500 animate-pulse ml-10">
+            <span className="text-medium-red animate-pulse ml-10">
               Character limit reached
             </span>
           )}
diff --git a/src/frontend/src/components/ExtraSidebarComponent/index.tsx b/src/frontend/src/components/ExtraSidebarComponent/index.tsx
index e03db68c8..abf04c273 100644
--- a/src/frontend/src/components/ExtraSidebarComponent/index.tsx
+++ b/src/frontend/src/components/ExtraSidebarComponent/index.tsx
@@ -19,9 +19,9 @@ export default function ExtraSidebar() {
       <aside
         className={` ${
           isStackedOpen ? "w-52" : "w-0 "
-        } flex-shrink-0 flex overflow-hidden flex-col border-r dark:border-r-gray-700 transition-all duration-500`}
+        } flex-shrink-0 flex overflow-hidden flex-col border-r dark:border-r-almost-dark-gray transition-all duration-500`}
       >
-        <div className="w-52 dark:bg-gray-800 border dark:border-gray-700  overflow-y-auto scrollbar-hide h-full flex flex-col items-start bg-white">
+        <div className="w-52 dark:bg-dark-gray border dark:border-almost-dark-gray  overflow-y-auto scrollbar-hide h-full flex flex-col items-start bg-white">
           <div className="flex flex-grow flex-col w-full">
             {extraNavigation.options ? (
               <div className="p-4">
@@ -33,16 +33,16 @@ export default function ExtraSidebar() {
                           to={item.href}
                           className={classNames(
                             item.href.split("/")[2] === current[4]
-                              ? "bg-muted text-gray-900"
-                              : "bg-white text-gray-600 hover:bg-muted hover:text-gray-900",
+                              ? "bg-muted text-high-dark-gray"
+                              : "bg-white text-medium-dark-gray hover:bg-muted hover:text-high-dark-gray",
                             "group w-full flex items-center pl-2 py-2 text-sm font-medium rounded-md"
                           )}
                         >
                           <item.icon
                             className={classNames(
                               item.href.split("/")[2] === current[4]
-                                ? "text-gray-500"
-                                : "text-gray-400 group-hover:text-gray-500",
+                                ? "text-medium-gray"
+                                : "text-almost-medium-gray group-hover:text-medium-gray",
                               "mr-3 flex-shrink-0 h-6 w-6"
                             )}
                           />
@@ -60,22 +60,22 @@ export default function ExtraSidebar() {
                             <Disclosure.Button
                               className={classNames(
                                 item.href.split("/")[2] === current[4]
-                                  ? "bg-muted text-gray-900"
-                                  : "bg-white text-gray-600 hover:bg-muted hover:text-gray-900",
-                                "group w-full flex items-center pl-2 pr-1 py-2 text-left text-sm font-medium rounded-md focus:outline-none focus:ring-1 focus:ring-indigo-500"
+                                  ? "bg-muted text-high-dark-gray"
+                                  : "bg-white text-medium-dark-gray hover:bg-muted hover:text-high-dark-gray",
+                                "group w-full flex items-center pl-2 pr-1 py-2 text-left text-sm font-medium rounded-md focus:outline-none focus:ring-1 focus:ring-medium-indigo"
                               )}
                             >
                               <item.icon
-                                className="mr-3 h-6 w-6 flex-shrink-0 text-gray-400 group-hover:text-gray-500"
+                                className="mr-3 h-6 w-6 flex-shrink-0 text-almost-medium-gray group-hover:text-medium-gray"
                                 aria-hidden="true"
                               />
                               <span className="flex-1">{item.name}</span>
                               <svg
                                 className={classNames(
                                   open
-                                    ? "text-gray-400 rotate-90"
-                                    : "text-gray-300",
-                                  "ml-3 h-5 w-5 flex-shrink-0 transition-rotate duration-150 ease-in-out group-hover:text-gray-400"
+                                    ? "text-almost-medium-gray rotate-90"
+                                    : "text-medium-low-gray",
+                                  "ml-3 h-5 w-5 flex-shrink-0 transition-rotate duration-150 ease-in-out group-hover:text-almost-medium-gray"
                                 )}
                                 viewBox="0 0 20 20"
                                 aria-hidden="true"
@@ -93,8 +93,8 @@ export default function ExtraSidebar() {
                                   to={subItem.href}
                                   className={classNames(
                                     subItem.href.split("/")[3] === current[5]
-                                      ? "bg-muted text-gray-900"
-                                      : "bg-white text-gray-600 hover:bg-muted hover:text-gray-900",
+                                      ? "bg-muted text-high-dark-gray"
+                                      : "bg-white text-medium-dark-gray hover:bg-muted hover:text-high-dark-gray",
                                     "group flex w-full items-center rounded-md py-2 pl-11 pr-2 text-sm font-medium"
                                   )}
                                 >
diff --git a/src/frontend/src/components/ReactTooltipComponent/index.tsx b/src/frontend/src/components/ReactTooltipComponent/index.tsx
index cb2a54f7c..2ecfd1af9 100644
--- a/src/frontend/src/components/ReactTooltipComponent/index.tsx
+++ b/src/frontend/src/components/ReactTooltipComponent/index.tsx
@@ -37,7 +37,7 @@ const TooltipReact: FC<TooltipProps> = ({
         id={selector}
         content={content}
         className={classNames(
-          "!bg-white !text-xs !font-normal !text-gray-700 !shadow-md !opacity-100 z-[9999]",
+          "!bg-white !text-xs !font-normal !text-almost-dark-gray !shadow-md !opacity-100 z-[9999]",
           className
         )}
         place={position}
diff --git a/src/frontend/src/components/chatComponent/buildTrigger/index.tsx b/src/frontend/src/components/chatComponent/buildTrigger/index.tsx
index 8b11ffdcb..4ea9cb162 100644
--- a/src/frontend/src/components/chatComponent/buildTrigger/index.tsx
+++ b/src/frontend/src/components/chatComponent/buildTrigger/index.tsx
@@ -143,7 +143,7 @@ export default function BuildTrigger({
         >
           <div
             className="flex justify-center align-center py-1 px-3 w-12 h-12 rounded-full shadow-md hover:shadow-sm shadow-btn-shadow hover:shadow-btn-shadow
-            bg-buildBackground dark:border-gray-600 cursor-pointer"
+            bg-buildBackground dark:border-medium-dark-gray cursor-pointer"
             onClick={() => {
               handleBuild(flow);
             }}
diff --git a/src/frontend/src/components/chatComponent/chatMessage/index.tsx b/src/frontend/src/components/chatComponent/chatMessage/index.tsx
index 8ca2e56e3..6bca7e58e 100644
--- a/src/frontend/src/components/chatComponent/chatMessage/index.tsx
+++ b/src/frontend/src/components/chatComponent/chatMessage/index.tsx
@@ -48,7 +48,7 @@ export default function ChatMessage({ chat }: { chat: ChatMessageType }) {
         </div>
       ) : (
         <div className="w-full text-end">
-          <div className="text-start inline-block rounded-xl p-3 overflow-hidden w-fit max-w-[280px] px-5 text-sm text-black dark:text-white dark:bg-gray-700 bg-gray-200 font-normal rounded-tr-none">
+          <div className="text-start inline-block rounded-xl p-3 overflow-hidden w-fit max-w-[280px] px-5 text-sm text-black dark:text-white dark:bg-almost-dark-gray bg-light-gray font-normal rounded-tr-none">
             {chat.message}
           </div>
         </div>
diff --git a/src/frontend/src/components/chatComponent/chatTrigger/index.tsx b/src/frontend/src/components/chatComponent/chatTrigger/index.tsx
index 1b7cb2f12..3e2b7bc73 100644
--- a/src/frontend/src/components/chatComponent/chatTrigger/index.tsx
+++ b/src/frontend/src/components/chatComponent/chatTrigger/index.tsx
@@ -36,13 +36,13 @@ export default function ChatTrigger({ open, setOpen, isBuilt }) {
           side="left"
         >
           <div
-            className="border flex justify-center items-center py-1 px-3 w-12 h-12 rounded-full bg-blue-500 dark:border-gray-600 cursor-pointer"
+            className="border flex justify-center items-center py-1 px-3 w-12 h-12 rounded-full bg-almost-dark-blue dark:border-medium-dark-gray cursor-pointer"
             onClick={handleClick}
           >
             <button>
               <div className="flex gap-3">
                 <MessagesSquare
-                  className="h-6 w-6  text-blue-100 fill-blue-100"
+                  className="h-6 w-6  text-medium-light-blue fill-medium-light-blue"
                   style={{ color: "white" }}
                   strokeWidth={1.5}
                 />
diff --git a/src/frontend/src/components/codeAreaComponent/index.tsx b/src/frontend/src/components/codeAreaComponent/index.tsx
index 399ab40b2..f23a2bd9d 100644
--- a/src/frontend/src/components/codeAreaComponent/index.tsx
+++ b/src/frontend/src/components/codeAreaComponent/index.tsx
@@ -46,11 +46,11 @@ export default function CodeAreaComponent({
           }}
           className={
             editNode
-              ? "truncate cursor-pointer placeholder:text-center text-gray-500 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 border-1 shadow-sm sm:text-sm" +
+              ? "truncate cursor-pointer placeholder:text-center text-medium-gray block w-full pt-0.5 pb-0.5 form-input dark:bg-high-dark-gray dark:medium-low-gray dark:border-medium-dark-gray rounded-md border-medium-low-gray border-1 shadow-sm sm:text-sm" +
                 INPUT_STYLE
-              : "truncate block w-full text-gray-500 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm sm:text-sm" +
+              : "truncate block w-full text-medium-gray px-3 py-2 rounded-md border border-medium-low-gray dark:border-almost-dark-gray shadow-sm sm:text-sm" +
                 INPUT_STYLE +
-                (disabled ? " bg-gray-200" : "")
+                (disabled ? " bg-light-gray" : "")
           }
         >
           {myValue !== "" ? myValue : "Type something..."}
@@ -69,7 +69,7 @@ export default function CodeAreaComponent({
           }}
         >
           {!editNode && (
-            <ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-ring dark:text-gray-300 ml-3" />
+            <ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-ring dark:text-medium-low-gray ml-3" />
           )}
         </button>
       </div>
diff --git a/src/frontend/src/components/dropdownComponent/index.tsx b/src/frontend/src/components/dropdownComponent/index.tsx
index 0f4942198..aa7645e96 100644
--- a/src/frontend/src/components/dropdownComponent/index.tsx
+++ b/src/frontend/src/components/dropdownComponent/index.tsx
@@ -31,9 +31,9 @@ export default function Dropdown({
               <Listbox.Button
                 className={
                   editNode
-                    ? "relative pr-8 placeholder:text-center block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md shadow-sm sm:text-sm border-gray-300 border-1" +
+                    ? "relative pr-8 placeholder:text-center block w-full pt-0.5 pb-0.5 form-input dark:bg-high-dark-gray dark:text-medium-low-gray dark:border-medium-dark-gray rounded-md shadow-sm sm:text-sm border-medium-low-gray border-1" +
                       INPUT_STYLE
-                    : "ring-1 ring-slate-300 dark:ring-slate-600 w-full py-2 pl-3 pr-10 text-left dark:focus:ring-offset-2 dark:focus:ring-offset-gray-900 dark:focus:ring-1 dark:focus:ring-gray-600 dark:focus-visible:ring-gray-900 dark:focus-visible:ring-offset-2 focus-visible:outline-none dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm" +
+                    : "ring-1 ring-light-slate dark:ring-medium-slate w-full py-2 pl-3 pr-10 text-left dark:focus:ring-offset-2 dark:focus:ring-offset-high-dark-gray dark:focus:ring-1 dark:focus:ring-medium-dark-gray dark:focus-visible:ring-high-dark-gray dark:focus-visible:ring-offset-2 focus-visible:outline-none dark:bg-high-dark-gray dark:text-medium-low-gray dark:border-medium-dark-gray rounded-md border-medium-low-gray shadow-sm sm:text-sm" +
                       INPUT_STYLE
                 }
               >
@@ -44,7 +44,7 @@ export default function Dropdown({
                   }
                 >
                   <ChevronUpDownIcon
-                    className="h-5 w-5 text-gray-400"
+                    className="h-5 w-5 text-almost-medium-gray"
                     aria-hidden="true"
                   />
                 </span>
@@ -70,11 +70,11 @@ export default function Dropdown({
                       className={({ active }) =>
                         classNames(
                           active
-                            ? " bg-accent dark:bg-white dark:text-gray-500"
+                            ? " bg-accent dark:bg-white dark:text-medium-gray"
                             : "",
                           editNode
-                            ? "relative cursor-default select-none py-0.5 pl-3 pr-12 dark:text-gray-300 dark:bg-gray-800"
-                            : "relative cursor-default select-none py-2 pl-3 pr-9 dark:text-gray-300 dark:bg-gray-800"
+                            ? "relative cursor-default select-none py-0.5 pl-3 pr-12 dark:text-medium-low-gray dark:bg-dark-gray"
+                            : "relative cursor-default select-none py-2 pl-3 pr-9 dark:text-medium-low-gray dark:bg-dark-gray"
                         )
                       }
                       value={option}
diff --git a/src/frontend/src/components/floatComponent/index.tsx b/src/frontend/src/components/floatComponent/index.tsx
index 2fc80962b..286662351 100644
--- a/src/frontend/src/components/floatComponent/index.tsx
+++ b/src/frontend/src/components/floatComponent/index.tsx
@@ -56,11 +56,11 @@ export default function FloatComponent({
         value={myValue}
         className={
           editNode
-            ? "focus:placeholder-transparent text-center placeholder:text-center border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm" +
+            ? "focus:placeholder-transparent text-center placeholder:text-center border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-high-dark-gray dark:text-medium-low-gray dark:border-medium-dark-gray rounded-md border-medium-low-gray shadow-sm sm:text-sm" +
               INPUT_STYLE
-            : "focus:placeholder-transparent block w-full form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm ring-offset-gray-200 sm:text-sm" +
+            : "focus:placeholder-transparent block w-full form-input dark:bg-high-dark-gray dark:text-medium-low-gray dark:border-medium-dark-gray rounded-md border-medium-low-gray shadow-sm ring-offset-light-gray sm:text-sm" +
               INPUT_STYLE +
-              (disabled ? " bg-gray-200 dark:bg-gray-700" : "")
+              (disabled ? " bg-light-gray dark:bg-almost-dark-gray" : "")
         }
         placeholder={
           editNode ? "Number 0 to 1" : "Type a number from zero to one"
diff --git a/src/frontend/src/components/headerComponent/components/menuBar/index.tsx b/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
index 1b2728d51..edf19283d 100644
--- a/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
+++ b/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
@@ -70,7 +70,7 @@ export const MenuBar = ({ flows, tabId }) => {
                 openPopUp(<FlowSettingsModal />);
               }}
             >
-              <Settings2 className="w-4 h-4 mr-2 dark:text-gray-300" />
+              <Settings2 className="w-4 h-4 mr-2 dark:text-medium-low-gray" />
               Settings
             </DropdownMenuItem>
             <DropdownMenuItem
@@ -78,7 +78,7 @@ export const MenuBar = ({ flows, tabId }) => {
                 undo();
               }}
             >
-              <Undo className="w-4 h-4 mr-2 dark:text-gray-300" />
+              <Undo className="w-4 h-4 mr-2 dark:text-medium-low-gray" />
               Undo
             </DropdownMenuItem>
             <DropdownMenuItem
@@ -86,7 +86,7 @@ export const MenuBar = ({ flows, tabId }) => {
                 redo();
               }}
             >
-              <Redo className="w-4 h-4 mr-2 dark:text-gray-300" />
+              <Redo className="w-4 h-4 mr-2 dark:text-medium-low-gray" />
               Redo
             </DropdownMenuItem>
             <DropdownMenuSeparator />
diff --git a/src/frontend/src/components/headerComponent/index.tsx b/src/frontend/src/components/headerComponent/index.tsx
index d59078836..3d955a0e4 100644
--- a/src/frontend/src/components/headerComponent/index.tsx
+++ b/src/frontend/src/components/headerComponent/index.tsx
@@ -60,7 +60,7 @@ export default function Header() {
           <Button
             asChild
             variant="outline"
-            className="text-gray-600 dark:text-gray-300 "
+            className="text-medium-dark-gray dark:text-medium-low-gray "
           >
             <a
               href="https://github.com/logspace-ai/langflow"
@@ -85,7 +85,7 @@ export default function Header() {
             )}
           </button> */}
           <button
-            className="text-gray-600 hover:text-gray-500 dark:text-gray-300 dark:hover:text-gray-200 relative"
+            className="text-medium-dark-gray hover:text-medium-gray dark:text-medium-low-gray dark:hover:text-light-gray relative"
             onClick={(event: React.MouseEvent<HTMLElement>) => {
               setNotificationCenter(false);
               const { top, left } = (
diff --git a/src/frontend/src/components/inputComponent/index.tsx b/src/frontend/src/components/inputComponent/index.tsx
index 98e643871..5e449d7e5 100644
--- a/src/frontend/src/components/inputComponent/index.tsx
+++ b/src/frontend/src/components/inputComponent/index.tsx
@@ -46,13 +46,13 @@ export default function InputComponent({
           if (disableCopyPaste) setDisableCopyPaste(false);
         }}
         className={classNames(
-          "block w-full pr-12 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:placeholder-transparent",
-          disabled ? " bg-gray-200 dark:bg-gray-700" : "",
+          "block w-full pr-12 form-input dark:bg-high-dark-gray dark:text-medium-low-gray dark:border-medium-dark-gray rounded-md border-medium-low-gray shadow-sm sm:text-sm focus:placeholder-transparent",
+          disabled ? " bg-light-gray dark:bg-almost-dark-gray" : "",
           password && !pwdVisible && myValue !== "" ? "password" : "",
           editNode
-            ? "border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm text-center" +
+            ? "border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-high-dark-gray dark:text-medium-low-gray dark:border-medium-dark-gray rounded-md border-medium-low-gray shadow-sm sm:text-sm text-center" +
                 INPUT_STYLE
-            : "ring-offset-gray-200" + INPUT_STYLE,
+            : "ring-offset-light-gray" + INPUT_STYLE,
           password && editNode ? "pr-8" : "pr-3"
         )}
         placeholder={password && editNode ? "Key" : "Type something..."}
@@ -65,8 +65,8 @@ export default function InputComponent({
         <button
           className={classNames(
             editNode
-              ? "absolute inset-y-0 right-0 pr-2 items-center text-gray-600"
-              : "absolute inset-y-0 right-0 items-center px-4 text-gray-600"
+              ? "absolute inset-y-0 right-0 pr-2 items-center text-medium-dark-gray"
+              : "absolute inset-y-0 right-0 items-center px-4 text-medium-dark-gray"
           )}
           onClick={() => {
             setPwdVisible(!pwdVisible);
diff --git a/src/frontend/src/components/inputFileComponent/index.tsx b/src/frontend/src/components/inputFileComponent/index.tsx
index 9f801138f..6fb2874bc 100644
--- a/src/frontend/src/components/inputFileComponent/index.tsx
+++ b/src/frontend/src/components/inputFileComponent/index.tsx
@@ -78,11 +78,11 @@ export default function InputFileComponent({
           onClick={handleButtonClick}
           className={
             editNode
-              ? "truncate placeholder:text-center text-gray-500 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm border-1" +
+              ? "truncate placeholder:text-center text-medium-gray block w-full pt-0.5 pb-0.5 form-input dark:bg-high-dark-gray dark:text-medium-low-gray dark:border-medium-dark-gray rounded-md border-medium-low-gray shadow-sm sm:text-sm border-1" +
                 INPUT_STYLE
-              : "truncate block w-full text-gray-500 dark:text-gray-300 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm sm:text-sm" +
+              : "truncate block w-full text-medium-gray dark:text-medium-low-gray px-3 py-2 rounded-md border border-medium-low-gray dark:border-almost-dark-gray shadow-sm sm:text-sm" +
                 INPUT_STYLE +
-                (disabled ? " bg-gray-200" : "")
+                (disabled ? " bg-light-gray" : "")
           }
         >
           {myValue !== "" ? myValue : "No file"}
diff --git a/src/frontend/src/components/inputListComponent/index.tsx b/src/frontend/src/components/inputListComponent/index.tsx
index 4bb82147f..2fbf98891 100644
--- a/src/frontend/src/components/inputListComponent/index.tsx
+++ b/src/frontend/src/components/inputListComponent/index.tsx
@@ -32,10 +32,10 @@ export default function InputListComponent({
             value={i}
             className={
               editNode
-                ? "border-[1px]  truncate cursor-pointer text-center placeholder:text-center text-gray-500 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm" +
+                ? "border-[1px]  truncate cursor-pointer text-center placeholder:text-center text-medium-gray block w-full pt-0.5 pb-0.5 form-input dark:bg-high-dark-gray dark:text-medium-low-gray dark:border-medium-dark-gray rounded-md border-medium-low-gray shadow-sm sm:text-sm" +
                   INPUT_STYLE
-                : "block w-full form-input rounded-md border-gray-300 shadow-sm focus:border-gray-500 focus:ring-gray-500 sm:text-sm" +
-                  (disabled ? " bg-gray-200" : "") +
+                : "block w-full form-input rounded-md border-medium-low-gray shadow-sm focus:border-medium-gray focus:ring-medium-gray sm:text-sm" +
+                  (disabled ? " bg-light-gray" : "") +
                   "focus:placeholder-transparent"
             }
             placeholder="Type something..."
@@ -72,7 +72,7 @@ export default function InputListComponent({
                 onChange(inputList);
               }}
             >
-              <XMarkIcon className="w-4 h-4 hover:text-red-600" />
+              <XMarkIcon className="w-4 h-4 hover:text-almost-medium-red" />
             </button>
           )}
         </div>
diff --git a/src/frontend/src/components/intComponent/index.tsx b/src/frontend/src/components/intComponent/index.tsx
index 1c1bc9872..d6a88044d 100644
--- a/src/frontend/src/components/intComponent/index.tsx
+++ b/src/frontend/src/components/intComponent/index.tsx
@@ -70,11 +70,11 @@ export default function IntComponent({
         value={myValue}
         className={
           editNode
-            ? "focus:placeholder-transparent text-center placeholder:text-center border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm" +
+            ? "focus:placeholder-transparent text-center placeholder:text-center border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-high-dark-gray dark:text-medium-low-gray dark:border-medium-dark-gray rounded-md border-medium-low-gray shadow-sm sm:text-sm" +
               INPUT_STYLE
-            : "focus:placeholder-transparent block w-full form-input dark:bg-gray-900 dark:border-gray-600 dark:text-gray-300 rounded-md border-gray-300 shadow-sm ring-offset-background sm:text-sm" +
+            : "focus:placeholder-transparent block w-full form-input dark:bg-high-dark-gray dark:border-medium-dark-gray dark:text-medium-low-gray rounded-md border-medium-low-gray shadow-sm ring-offset-background sm:text-sm" +
               INPUT_STYLE +
-              (disabled ? " bg-gray-200 dark:bg-gray-700" : "")
+              (disabled ? " bg-light-gray dark:bg-almost-dark-gray" : "")
         }
         placeholder={editNode ? "Integer number" : "Type a integer number"}
         onChange={(e) => {
diff --git a/src/frontend/src/components/loadingComponent/index.tsx b/src/frontend/src/components/loadingComponent/index.tsx
index 640482950..3639c8fb2 100644
--- a/src/frontend/src/components/loadingComponent/index.tsx
+++ b/src/frontend/src/components/loadingComponent/index.tsx
@@ -7,7 +7,7 @@ export default function LoadingComponent({ remSize }: LoadingComponentProps) {
     <div role="status" className="w-min m-auto">
       <svg
         aria-hidden="true"
-        className={`w-${remSize} h-${remSize} mr-2 text-muted animate-spin dark:text-gray-600 fill-blue-600`}
+        className={`w-${remSize} h-${remSize} mr-2 text-muted animate-spin dark:text-medium-dark-gray fill-almost-medium-blue`}
         viewBox="0 0 100 101"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
@@ -22,7 +22,7 @@ export default function LoadingComponent({ remSize }: LoadingComponentProps) {
         />
       </svg>
       <br></br>
-      <span className="animate-pulse text-blue-600 text-lg">Loading...</span>
+      <span className="animate-pulse text-almost-medium-blue text-lg">Loading...</span>
     </div>
   );
 }
diff --git a/src/frontend/src/components/promptComponent/index.tsx b/src/frontend/src/components/promptComponent/index.tsx
index 7713da8e6..ae8b826ac 100644
--- a/src/frontend/src/components/promptComponent/index.tsx
+++ b/src/frontend/src/components/promptComponent/index.tsx
@@ -49,10 +49,10 @@ export default function PromptAreaComponent({
           }}
           className={
             editNode
-              ? "cursor-pointer truncate placeholder:text-center text-gray-500 border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm" +
+              ? "cursor-pointer truncate placeholder:text-center text-medium-gray border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-high-dark-gray dark:text-medium-low-gray dark:border-medium-dark-gray rounded-md border-medium-low-gray shadow-sm sm:text-sm" +
                 INPUT_STYLE
-              : "truncate block w-full text-gray-500 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm sm:text-sm" +
-                (disabled ? " bg-gray-200" : "")
+              : "truncate block w-full text-medium-gray px-3 py-2 rounded-md border border-medium-low-gray dark:border-almost-dark-gray shadow-sm sm:text-sm" +
+                (disabled ? " bg-light-gray" : "")
           }
         >
           {myValue !== "" ? myValue : "Type your prompt here"}
@@ -74,7 +74,7 @@ export default function PromptAreaComponent({
           }}
         >
           {!editNode && (
-            <ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-ring dark:text-gray-300" />
+            <ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-ring dark:text-medium-low-gray" />
           )}
         </button>
       </div>
diff --git a/src/frontend/src/components/textAreaComponent/index.tsx b/src/frontend/src/components/textAreaComponent/index.tsx
index 4c0412994..ea2247bd2 100644
--- a/src/frontend/src/components/textAreaComponent/index.tsx
+++ b/src/frontend/src/components/textAreaComponent/index.tsx
@@ -51,10 +51,10 @@ export default function TextAreaComponent({
           }}
           className={
             editNode
-              ? "truncate cursor-pointer placeholder:text-center text-gray-500 border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm" +
+              ? "truncate cursor-pointer placeholder:text-center text-medium-gray border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-high-dark-gray dark:text-medium-low-gray dark:border-medium-dark-gray rounded-md border-medium-low-gray shadow-sm sm:text-sm" +
                 INPUT_STYLE
-              : "truncate block w-full text-gray-500 dark:text-muted px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm sm:text-sm" +
-                (disabled ? " bg-gray-200" : "")
+              : "truncate block w-full text-medium-gray dark:text-muted px-3 py-2 rounded-md border border-medium-low-gray dark:border-almost-dark-gray shadow-sm sm:text-sm" +
+                (disabled ? " bg-light-gray" : "")
           }
         >
           {myValue !== "" ? myValue : "Type something..."}
@@ -76,7 +76,7 @@ export default function TextAreaComponent({
           }}
         >
           {!editNode && (
-            <ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-ring dark:text-gray-300" />
+            <ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-ring dark:text-medium-low-gray" />
           )}
         </button>
       </div>
diff --git a/src/frontend/src/components/toggleComponent/index.tsx b/src/frontend/src/components/toggleComponent/index.tsx
index 9481f6760..497cf70f0 100644
--- a/src/frontend/src/components/toggleComponent/index.tsx
+++ b/src/frontend/src/components/toggleComponent/index.tsx
@@ -21,7 +21,7 @@ export default function ToggleComponent({
           setEnabled(x);
         }}
         className={classNames(
-          enabled ? "bg-primary" : "bg-gray-200",
+          enabled ? "bg-primary" : "bg-light-gray",
           "relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-1 focus:ring-primary focus:ring-offset-1"
         )}
       >
@@ -31,8 +31,8 @@ export default function ToggleComponent({
             enabled ? "translate-x-5" : "translate-x-0",
             "pointer-events-none relative inline-block h-5 w-5 transform rounded-full  shadow ring-0 transition duration-200 ease-in-out",
             disabled
-              ? "bg-gray-200 dark:bg-gray-600"
-              : "bg-white dark:bg-gray-800"
+              ? "bg-light-gray dark:bg-medium-dark-gray"
+              : "bg-white dark:bg-dark-gray"
           )}
         >
           <span
diff --git a/src/frontend/src/components/ui/rename-label.tsx b/src/frontend/src/components/ui/rename-label.tsx
index 1ee79808b..ea4bd4788 100644
--- a/src/frontend/src/components/ui/rename-label.tsx
+++ b/src/frontend/src/components/ui/rename-label.tsx
@@ -57,7 +57,7 @@ export default function RenameLabel(props) {
           ref={inputRef}
           onInput={resizeInput}
           className={cn(
-            "px-2 bg-transparent focus:border-none active:outline hover:outline focus:outline outline-gray-300 rounded-md",
+            "px-2 bg-transparent focus:border-none active:outline hover:outline focus:outline outline-medium-low-gray rounded-md",
             props.className
           )}
           onBlur={() => {
diff --git a/src/frontend/src/index.css b/src/frontend/src/index.css
index 331dabefa..ad0b775a9 100644
--- a/src/frontend/src/index.css
+++ b/src/frontend/src/index.css
@@ -42,6 +42,53 @@
     --round-btn-shadow: #00000063;
 
     --hover-btn-background: #242f47;
+
+    --light-gray: #e5e7eb; /* tailwind gray 200 */
+    --medium-low-gray: #d1d5db; /* tailwind gray 300 */
+    --almost-medium-gray: #9ca3af; /* tailwind gray 400 */
+    --medium-gray: #6b7280; /* tailwind gray 500 */
+    --medium-dark-gray: #4b5563; /* tailwind gray 600 */
+    --almost-dark-gray: #374151; /* tailwind gray 700 */
+    --dark-gray: #1f2937; /* tailwind gray 800 */
+    --high-dark-gray: #111827; /* tailwind gray 900 */
+    --high-light-gray: #f9fafb; /* tailwind gray 50 */
+
+    --medium-red: #ef4444; /* tailwind red 500 */
+    --almost-medium-red: #dc2626; /* tailwind red 600 */
+    --light-red: #fef2f2; /* tailwind red 50 */
+    --dark-red: #7f1d1d; /* tailwind red 900 */
+    --medium-light-red: #f87171; /* tailwind red 400 */
+    --almost-dark-red: #991b1b; /* tailwind red 800 */
+    --medium-dark-red: #b91c1c; /* tailwind red 700 */
+
+    --light-blue: #eff6ff; /* tailwind blue 50 */
+    --almost-light-blue: #dbeafe;  /* tailwind blue 100 */
+    --dark-blue: #1e3a8a; /* tailwind blue 900 */
+    --medium-blue: #60a5fa; /* tailwind blue 400 */
+    --medium-dark-blue: #1d4ed8; /* tailwind blue 700 */
+    --almost-dark-blue: #3b82f6; /* tailwind blue 500 */
+    --medium-light-blue: #dbeafe; /* tailwind blue 100 */
+    --almost-medium-blue: #2563eb; /* tailwind blue 600 */
+
+    --light-green: #f0fdf4; /* tailwind green 50 */
+    --dark-green: #14532d; /* tailwind green 900 */
+    --medium-green: #4ade80; /* tailwind green 400 */
+    --medium-dark-green: #166534; /* tailwind green 800 */
+    --almost-medium-green: #22c55e; /* tailwind green 500 */
+
+    --light-slate: #cbd5e1; /* tailwind slate 300 */
+    --medium-slate: #475569; /* tailwind slate 600 */
+    --high-light-slate: #e2e8f0; /* tailwind slate 200 */
+
+    --medium-indigo: #6366f1; /* tailwind indigo 500 */
+    --medium-high-indigo: #4f46e5; /* tailwind indigo 600 */
+    --high-indigo: #4338ca; /* tailwind indigo 700 */
+
+    --medium-yellow: #eab308; /* tailwind yellow 500 */
+
+    --medium-emerald: #10b981; /* tailwind emerald 500 */
+
+    --white: #ffffff; /* tailwind white */
   }
 
 	.dark {
@@ -105,7 +152,44 @@
   --build-background: #E2E7EE; /*	hsl(215, 26%, 91%) */
   --round-btn-shadow: #00000063;
   --hover-btn-background: #242f47;
-
+  --dark-gray: #1f2937; /* tailwind gray 800 */
+  --light-gray: #e5e7eb; /* tailwind gray 200 */
+  --high-dark-gray: #111827; /* tailwind gray 900 */
+  --medium-gray: #6b7280; /* tailwind gray 500 */
+  --medium-low-gray: #d1d5db /* tailwind gray 300 */
+  --medium-dark-gray: #4b5563; /* tailwind gray 600 */
+  --almost-dark-gray: #374151; /* tailwind gray 700 */
+  --almost-medium-gray: #9ca3af; /* tailwind gray 400 */
+  --medium-red: #ef4444; /* tailwind red 500 */
+  --light-red: #fef2f2; /* tailwind red 50 */
+  --dark-red: #7f1d1d; /* tailwind red 900 */
+  --medium-light-red: #f87171; /* tailwind red 400 */
+  --almost-dark-red: #991b1b; /* tailwind red 800 */
+  --medium-dark-red: #b91c1c; /* tailwind red 700 */
+  --almost-medium-red: #dc2626; /* tailwind red 600 */
+  --light-blue: #eff6ff; /* tailwind blue 50 */
+  --dark-blue: #1e3a8a; /* tailwind blue 900 */
+  --medium-blue: #60a5fa; /* tailwind blue 400 */
+  --medium-dark-blue: #1d4ed8; /* tailwind blue 700 */
+  --almost-dark-blue: #3b82f6; /* tailwind blue 500 */
+  --medium-light-blue: #dbeafe; /* tailwind blue 100 */
+  --almost-medium-blue: #2563eb; /* tailwind blue 600 */
+  --almost-light-blue: #dbeafe;  /* tailwind blue 100 */
+  --light-green: #f0fdf4; /* tailwind green 50 */
+  --dark-green: #14532d; /* tailwind green 900 */
+  --medium-green: #4ade80; /* tailwind green 400 */
+  --medium-dark-green: #166534; /* tailwind green 800 */
+  --almost-medium-green: #22c55e; /* tailwind green 500 */
+  --light-slate: #cbd5e1; /* tailwind slate 300 */
+  --medium-slate: #475569; /* tailwind slate 600 */
+  --high-light-slate: #e2e8f0; /* tailwind slate 200 */
+  --medium-indigo: #6366f1; /* tailwind indigo 500 */
+  --medium-yellow: #eab308; /* tailwind yellow 500 */
+  --medium-emerald: #10b981; /* tailwind emerald 500 */
+  --medium-high-indigo: #4f46e5; /* tailwind indigo 600 */
+  --high-indigo: #4338ca; /* tailwind indigo 700 */
+  --high-light-gray: #f9fafb; /* tailwind gray 50 */
+  --white: #ffffff; /* tailwind white */
 }
 
 .dark {
diff --git a/src/frontend/src/modals/ApiModal/index.tsx b/src/frontend/src/modals/ApiModal/index.tsx
index c3b821ac9..03d22ef84 100644
--- a/src/frontend/src/modals/ApiModal/index.tsx
+++ b/src/frontend/src/modals/ApiModal/index.tsx
@@ -89,7 +89,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
           <DialogTitle className="flex items-center">
             <span className="pr-2">Code</span>
             <CodeBracketSquareIcon
-              className="h-6 w-6 text-gray-800 pl-1 dark:text-white"
+              className="h-6 w-6 text-dark-gray pl-1 dark:text-white"
               aria-hidden="true"
             />
           </DialogTitle>
@@ -109,7 +109,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
             </TabsList>
             <div className="float-right">
               <button
-                className="flex gap-1.5 items-center rounded bg-none p-1 text-xs text-gray-500 dark:text-gray-300"
+                className="flex gap-1.5 items-center rounded bg-none p-1 text-xs text-medium-gray dark:text-medium-low-gray"
                 onClick={copyToClipboard}
               >
                 {isCopied ? <Check size={18} /> : <Clipboard size={15} />}
diff --git a/src/frontend/src/modals/EditNodeModal/index.tsx b/src/frontend/src/modals/EditNodeModal/index.tsx
index 1a270f46e..1e2765b39 100644
--- a/src/frontend/src/modals/EditNodeModal/index.tsx
+++ b/src/frontend/src/modals/EditNodeModal/index.tsx
@@ -90,10 +90,10 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
           <DialogDescription>
             {data.node?.description}
             <div className="flex pt-4">
-              <VariableIcon className="w-5 h-5 pe-1 text-gray-700 stroke-2 dark:text-slate-200">
+              <VariableIcon className="w-5 h-5 pe-1 text-almost-dark-gray stroke-2 dark:text-high-light-slate">
                 &nbsp;
               </VariableIcon>
-              <span className="text-sm font-semibold text-gray-800 dark:text-white">
+              <span className="text-sm font-semibold text-dark-gray dark:text-white">
                 Parameters
               </span>
             </div>
@@ -103,7 +103,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
         <div className="flex w-full max-h-[350px] h-fit">
           <div
             className={classNames(
-              "w-full rounded-lg bg-white dark:bg-gray-800 border-[1px] border-gray-200",
+              "w-full rounded-lg bg-white dark:bg-dark-gray border-[1px] border-light-gray",
               nodeLength > limitScrollFieldsModal
                 ? "overflow-scroll overflow-x-hidden custom-scroll"
                 : "overflow-hidden"
@@ -112,7 +112,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
             {nodeLength > 0 && (
               <div className="flex flex-col gap-5 h-fit">
                 <Table className="table-fixed bg-muted outline-1">
-                  <TableHeader className="border-gray-200 text-gray-500 text-xs font-medium h-10">
+                  <TableHeader className="border-light-gray text-medium-gray text-xs font-medium h-10">
                     <TableRow className="dark:border-b-muted">
                       <TableHead className="h-7 text-center">PARAM</TableHead>
                       <TableHead className="p-0 h-7 text-center">
@@ -137,12 +137,12 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
                       )
                       .map((n, i) => (
                         <TableRow key={i} className="h-10 dark:border-b-muted">
-                          <TableCell className="p-0 text-center text-gray-900 dark:text-gray-300 text-sm">
+                          <TableCell className="p-0 text-center text-high-dark-gray dark:text-medium-low-gray text-sm">
                             {data.node.template[n].name
                               ? data.node.template[n].name
                               : data.node.template[n].display_name}
                           </TableCell>
-                          <TableCell className="p-0 text-center text-gray-900 text-xs w-[300px] dark:text-gray-300">
+                          <TableCell className="p-0 text-center text-high-dark-gray text-xs w-[300px] dark:text-medium-low-gray">
                             {data.node.template[n].type === "str" &&
                             !data.node.template[n].options ? (
                               <div className="mx-auto">
diff --git a/src/frontend/src/modals/NodeModal/components/ModalField/index.tsx b/src/frontend/src/modals/NodeModal/components/ModalField/index.tsx
index f5f0fb668..19ff5cfdb 100644
--- a/src/frontend/src/modals/NodeModal/components/ModalField/index.tsx
+++ b/src/frontend/src/modals/NodeModal/components/ModalField/index.tsx
@@ -52,8 +52,8 @@ export default function ModalField({
     >
       {display && (
         <div>
-          <span className="mx-2 dark:text-gray-300">{title}</span>
-          <span className="text-red-600">{required ? " *" : ""}</span>
+          <span className="mx-2 dark:text-medium-low-gray">{title}</span>
+          <span className="text-almost-medium-red">{required ? " *" : ""}</span>
         </div>
       )}
 
diff --git a/src/frontend/src/modals/NodeModal/index.tsx b/src/frontend/src/modals/NodeModal/index.tsx
index 6ceba62bf..5d6d08040 100644
--- a/src/frontend/src/modals/NodeModal/index.tsx
+++ b/src/frontend/src/modals/NodeModal/index.tsx
@@ -45,7 +45,7 @@ export default function NodeModal({ data }: { data: NodeDataType }) {
           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-medium-gray dark:bg-medium-dark-gray dark:bg-opacity-75 bg-opacity-75 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-10 overflow-y-auto">
@@ -59,11 +59,11 @@ export default function NodeModal({ data }: { data: NodeDataType }) {
               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]">
+              <Dialog.Panel className="relative flex flex-col justify-between transform h-[600px] overflow-hidden rounded-lg bg-white dark:bg-dark-gray text-left shadow-xl transition-all sm:my-8 w-[700px]">
                 <div className=" z-50 absolute top-0 right-0 hidden pt-4 pr-4 sm:block">
                   <button
                     type="button"
-                    className="rounded-md text-gray-400 hover:text-gray-500"
+                    className="rounded-md text-almost-medium-gray hover:text-medium-gray"
                     onClick={() => {
                       setModalOpen(false);
                     }}
@@ -84,17 +84,17 @@ export default function NodeModal({ data }: { data: NodeDataType }) {
                     <div className="mt-4 text-center sm:ml-4 sm:text-left">
                       <Dialog.Title
                         as="h3"
-                        className="text-lg font-medium dark:text-white leading-10 text-gray-900"
+                        className="text-lg font-medium dark:text-white leading-10 text-high-dark-gray"
                       >
                         {data.type}
                       </Dialog.Title>
                     </div>
                   </div>
-                  <div className="h-full w-full bg-gray-200 dark:bg-gray-900 p-4 gap-4 flex flex-row justify-center items-center">
+                  <div className="h-full w-full bg-light-gray dark:bg-high-dark-gray p-4 gap-4 flex flex-row justify-center items-center">
                     <div className="flex w-full h-[445px]">
                       <div
                         className={classNames(
-                          "px-4 sm:p-4 w-full rounded-lg bg-white dark:bg-gray-800 shadow",
+                          "px-4 sm:p-4 w-full rounded-lg bg-white dark:bg-dark-gray shadow",
                           Object.keys(data.node.template).filter(
                             (t) =>
                               t.charAt(0) !== "_" &&
@@ -143,10 +143,10 @@ export default function NodeModal({ data }: { data: NodeDataType }) {
                       </div>
                     </div>
                   </div>
-                  <div className="bg-gray-200 dark:bg-gray-900 w-full pb-3 flex flex-row-reverse px-4">
+                  <div className="bg-light-gray dark:bg-high-dark-gray w-full pb-3 flex flex-row-reverse px-4">
                     <button
                       type="button"
-                      className="inline-flex w-full justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:ring-offset-1 sm:ml-3 sm:w-auto sm:text-sm"
+                      className="inline-flex w-full justify-center rounded-md border border-transparent bg-medium-high-indigo px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-high-indigo focus:outline-none focus:ring-1 focus:ring-medium-indigo focus:ring-offset-1 sm:ml-3 sm:w-auto sm:text-sm"
                       onClick={() => {
                         setModalOpen(false);
                       }}
diff --git a/src/frontend/src/modals/chatModal/chatInput/index.tsx b/src/frontend/src/modals/chatModal/chatInput/index.tsx
index 03be27cdb..c5e9606f7 100644
--- a/src/frontend/src/modals/chatModal/chatInput/index.tsx
+++ b/src/frontend/src/modals/chatModal/chatInput/index.tsx
@@ -44,9 +44,9 @@ export default function ChatInput({
         }}
         className={classNames(
           lockChat
-            ? " bg-input text-black dark:bg-gray-700 dark:text-gray-300"
-            : "  bg-white-200 text-black dark:bg-gray-900 dark:text-gray-300",
-          "form-input block w-full custom-scroll rounded-md border-gray-300 dark:border-gray-600 pr-10 sm:text-sm" +
+            ? " bg-input text-black dark:bg-almost-dark-gray dark:text-medium-low-gray"
+            : "  bg-white-200 text-black dark:bg-high-dark-gray dark:text-medium-low-gray",
+          "form-input block w-full custom-scroll rounded-md border-medium-low-gray dark:border-medium-dark-gray pr-10 sm:text-sm" +
             INPUT_STYLE
         )}
         placeholder={"Send a message..."}
@@ -55,12 +55,12 @@ export default function ChatInput({
         <button disabled={lockChat} onClick={() => sendMessage()}>
           {lockChat ? (
             <LockClosedIcon
-              className="h-5 w-5 text-gray-500  dark:hover:text-gray-300 animate-pulse"
+              className="h-5 w-5 text-medium-gray  dark:hover:text-medium-low-gray animate-pulse"
               aria-hidden="true"
             />
           ) : (
             <PaperAirplaneIcon
-              className="h-5 w-5 text-gray-500 hover:text-gray-600 dark:hover:text-gray-300"
+              className="h-5 w-5 text-medium-gray hover:text-medium-dark-gray dark:hover:text-medium-low-gray"
               aria-hidden="true"
             />
           )}
diff --git a/src/frontend/src/modals/chatModal/chatMessage/index.tsx b/src/frontend/src/modals/chatModal/chatMessage/index.tsx
index 318edc376..269c6b206 100644
--- a/src/frontend/src/modals/chatModal/chatMessage/index.tsx
+++ b/src/frontend/src/modals/chatModal/chatMessage/index.tsx
@@ -34,8 +34,8 @@ export default function ChatMessage({
       className={classNames(
         "w-full py-2 pl-2 flex",
         chat.isSend
-          ? "bg-background dark:bg-gray-900 "
-          : "bg-input  dark:bg-gray-800"
+          ? "bg-background dark:bg-high-dark-gray "
+          : "bg-input  dark:bg-dark-gray"
       )}
     >
       <div
@@ -62,12 +62,12 @@ export default function ChatMessage({
           </div>
         )}
         {chat.isSend && (
-          <UserIcon className="w-6 h-6 -mb-1 text-gray-800 dark:text-gray-200" />
+          <UserIcon className="w-6 h-6 -mb-1 text-dark-gray dark:text-light-gray" />
         )}
       </div>
       {!chat.isSend ? (
         <div className="w-full text-start flex items-center">
-          <div className="w-full relative text-start inline-block text-gray-600 dark:text-gray-300 text-sm font-normal">
+          <div className="w-full relative text-start inline-block text-medium-dark-gray dark:text-medium-low-gray text-sm font-normal">
             {hidden && chat.thought && chat.thought !== "" && (
               <div
                 onClick={() => setHidden((prev) => !prev)}
@@ -79,8 +79,8 @@ export default function ChatMessage({
             {chat.thought && chat.thought !== "" && !hidden && (
               <div
                 onClick={() => setHidden((prev) => !prev)}
-                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-muted dark:bg-gray-800 w-[95%] pb-3 pt-3 px-2 ml-3 cursor-pointer scrollbar-hide overflow-scroll"
+                className=" text-start inline-block rounded-md text-medium-dark-gray dark:text-light-gray h-full border border-medium-low-gray dark:border-medium-gray
+								bg-muted dark:bg-dark-gray w-[95%] pb-3 pt-3 px-2 ml-3 cursor-pointer scrollbar-hide overflow-scroll"
                 dangerouslySetInnerHTML={{
                   __html: convert.toHtml(chat.thought),
                 }}
@@ -93,7 +93,7 @@ export default function ChatMessage({
                   <ReactMarkdown
                     remarkPlugins={[remarkGfm, remarkMath]}
                     rehypePlugins={[rehypeMathjax]}
-                    className="markdown prose dark:prose-invert text-gray-600 dark:text-gray-200"
+                    className="markdown prose dark:prose-invert text-medium-dark-gray dark:text-light-gray"
                     components={{
                       code({ node, inline, className, children, ...props }) {
                         if (children.length) {
@@ -152,9 +152,9 @@ export default function ChatMessage({
         </div>
       ) : (
         <div className="w-full flex items-center">
-          <div className="text-start inline-block px-3 text-sm text-gray-600 dark:text-white">
+          <div className="text-start inline-block px-3 text-sm text-medium-dark-gray dark:text-white">
             <span
-              className="text-gray-600 dark:text-gray-200"
+              className="text-medium-dark-gray dark:text-light-gray"
               dangerouslySetInnerHTML={{
                 __html: message.replace(/\n/g, "<br>"),
               }}
diff --git a/src/frontend/src/modals/chatModal/fileComponent/index.tsx b/src/frontend/src/modals/chatModal/fileComponent/index.tsx
index 2b5d97ae9..d59e3419c 100644
--- a/src/frontend/src/modals/chatModal/fileComponent/index.tsx
+++ b/src/frontend/src/modals/chatModal/fileComponent/index.tsx
@@ -37,10 +37,10 @@ export default function FileCard({ fileName, content, fileType }) {
         />
         {isHovered && (
           <div
-            className={`absolute top-0 right-0 bg-muted text-gray-700 rounded-bl-lg px-1 text-sm font-bold dark:bg-gray-700 dark:text-gray-300`}
+            className={`absolute top-0 right-0 bg-muted text-almost-dark-gray rounded-bl-lg px-1 text-sm font-bold dark:bg-almost-dark-gray dark:text-medium-low-gray`}
           >
             <button
-              className="text-gray-500 py-1 px-2 dark:bg-gray-700 dark:text-gray-300"
+              className="text-medium-gray py-1 px-2 dark:bg-almost-dark-gray dark:text-medium-low-gray"
               onClick={handleDownload}
             >
               <CloudArrowDownIcon className="hover:scale-110 w-5 h-5 text-current"></CloudArrowDownIcon>
@@ -54,7 +54,7 @@ export default function FileCard({ fileName, content, fileType }) {
   return (
     <button
       onClick={handleDownload}
-      className="bg-muted shadow rounded w-1/2 text-gray-700 hover:drop-shadow-lg px-2 py-2 flex justify-between items-center border border-gray-300"
+      className="bg-muted shadow rounded w-1/2 text-almost-dark-gray hover:drop-shadow-lg px-2 py-2 flex justify-between items-center border border-medium-low-gray"
     >
       <div className="flex gap-2 text-current items-center w-full mr-2">
         {" "}
@@ -70,7 +70,7 @@ export default function FileCard({ fileName, content, fileType }) {
         <div className="flex flex-col items-start">
           {" "}
           <div className="truncate text-sm text-current">{fileName}</div>
-          <div className="truncate text-xs  text-gray-500">{fileType}</div>
+          <div className="truncate text-xs  text-medium-gray">{fileType}</div>
         </div>
         <CloudArrowDownIcon className="w-6 h-6 text-current ml-auto" />
       </div>
diff --git a/src/frontend/src/modals/chatModal/index.tsx b/src/frontend/src/modals/chatModal/index.tsx
index 7c4a9e5db..85deb685a 100644
--- a/src/frontend/src/modals/chatModal/index.tsx
+++ b/src/frontend/src/modals/chatModal/index.tsx
@@ -332,7 +332,7 @@ export default function ChatModal({
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-black backdrop-blur-sm dark:bg-gray-600 dark:bg-opacity-80 bg-opacity-80 transition-opacity" />
+          <div className="fixed inset-0 bg-black backdrop-blur-sm dark:bg-medium-dark-gray dark:bg-opacity-80 bg-opacity-80 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-10 overflow-y-auto">
@@ -346,24 +346,24 @@ export default function ChatModal({
               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-[95%] overflow-hidden rounded-lg bg-white dark:bg-gray-800 text-left shadow-xl transition-all w-[690px]">
+              <Dialog.Panel className=" drop-shadow-2xl relative flex flex-col justify-between transform h-[95%] overflow-hidden rounded-lg bg-white dark:bg-dark-gray text-left shadow-xl transition-all w-[690px]">
                 <div className="relative w-full p-4">
                   <button
                     onClick={() => clearChat()}
-                    className="absolute top-2 right-10 hover:text-red-500 text-gray-600 dark:text-gray-300 dark:hover:text-red-500 z-30"
+                    className="absolute top-2 right-10 hover:text-medium-red text-medium-dark-gray dark:text-medium-low-gray dark:hover:text-medium-red 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"
+                    className="absolute top-1.5 right-2 hover:text-medium-red text-medium-dark-gray dark:text-medium-low-gray dark:hover:text-medium-red z-30"
                   >
                     <HiX className="w-5 h-5" />
                   </button>
                 </div>
                 <div
                   ref={messagesRef}
-                  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"
+                  className="w-full h-full bg-white dark:bg-dark-gray border-t dark:border-t-medium-dark-gray flex-col flex items-center overflow-scroll scrollbar-hide"
                 >
                   {chatHistory.length > 0 ? (
                     chatHistory.map((c, i) => (
@@ -378,13 +378,13 @@ export default function ChatModal({
                     <div className="flex flex-col h-full text-center justify-center w-full items-center align-middle">
                       <span>
                         👋{" "}
-                        <span className="text-gray-600 dark:text-gray-300 text-lg">
+                        <span className="text-medium-dark-gray dark:text-medium-low-gray text-lg">
                           LangFlow Chat
                         </span>
                       </span>
                       <br />
-                      <div className="bg-muted dark:bg-gray-900 rounded-md w-2/4 px-6 py-8 border border-gray-200 dark:border-gray-700">
-                        <span className="text-base text-gray-500">
+                      <div className="bg-muted dark:bg-high-dark-gray rounded-md w-2/4 px-6 py-8 border border-light-gray dark:border-almost-dark-gray">
+                        <span className="text-base text-medium-gray">
                           Start a conversation and click the agent’s thoughts{" "}
                           <span>
                             <ChatBubbleOvalLeftEllipsisIcon className="w-6 h-6 inline animate-bounce " />
@@ -396,7 +396,7 @@ export default function ChatModal({
                   )}
                   <div ref={ref}></div>
                 </div>
-                <div className="w-full bg-white dark:bg-gray-800 border-t dark:border-t-gray-600 flex-col flex items-center justify-between p-3">
+                <div className="w-full bg-white dark:bg-dark-gray border-t dark:border-t-medium-dark-gray flex-col flex items-center justify-between p-3">
                   <div className="relative w-full  mt-1 rounded-md shadow-sm">
                     <ChatInput
                       chatValue={chatValue}
diff --git a/src/frontend/src/modals/codeAreaModal/index.tsx b/src/frontend/src/modals/codeAreaModal/index.tsx
index 9f8815f4b..59df6a45f 100644
--- a/src/frontend/src/modals/codeAreaModal/index.tsx
+++ b/src/frontend/src/modals/codeAreaModal/index.tsx
@@ -52,7 +52,7 @@ export default function CodeAreaModal({
           <DialogTitle className="flex items-center">
             <span className="pr-2">Edit Code</span>
             <CommandLineIcon
-              className="h-6 w-6 text-gray-800 pl-1 dark:text-white"
+              className="h-6 w-6 text-dark-gray pl-1 dark:text-white"
               aria-hidden="true"
             />
           </DialogTitle>
@@ -73,7 +73,7 @@ export default function CodeAreaModal({
             onChange={(value) => {
               setCode(value);
             }}
-            className="w-full rounded-lg h-[300px] custom-scroll border-[1px] border-gray-300 dark:border-gray-600"
+            className="w-full rounded-lg h-[300px] custom-scroll border-[1px] border-medium-low-gray dark:border-medium-dark-gray"
           />
         </div>
 
diff --git a/src/frontend/src/modals/exportModal/index.tsx b/src/frontend/src/modals/exportModal/index.tsx
index 199c74256..9e03d1662 100644
--- a/src/frontend/src/modals/exportModal/index.tsx
+++ b/src/frontend/src/modals/exportModal/index.tsx
@@ -47,7 +47,7 @@ export default function ExportModal() {
           <DialogTitle className="flex items-center">
             <span className="pr-2">Export</span>
             <Download
-              className="h-6 w-6 text-gray-800 pl-1 dark:text-white"
+              className="h-6 w-6 text-dark-gray pl-1 dark:text-white"
               aria-hidden="true"
             />
           </DialogTitle>
diff --git a/src/frontend/src/modals/flowSettingsModal/index.tsx b/src/frontend/src/modals/flowSettingsModal/index.tsx
index 365911e12..a60d72416 100644
--- a/src/frontend/src/modals/flowSettingsModal/index.tsx
+++ b/src/frontend/src/modals/flowSettingsModal/index.tsx
@@ -51,7 +51,7 @@ export default function FlowSettingsModal() {
         <DialogHeader>
           <DialogTitle className="flex items-center">
             <span className="pr-2">Settings </span>
-            <Settings2 className="w-4 h-4 mr-2 dark:text-gray-300" />
+            <Settings2 className="w-4 h-4 mr-2 dark:text-medium-low-gray" />
           </DialogTitle>
           <DialogDescription>{SETTINGS_DIALOG_SUBTITLE}</DialogDescription>
         </DialogHeader>
diff --git a/src/frontend/src/modals/genericModal/index.tsx b/src/frontend/src/modals/genericModal/index.tsx
index d241e7c04..6ae4114b6 100644
--- a/src/frontend/src/modals/genericModal/index.tsx
+++ b/src/frontend/src/modals/genericModal/index.tsx
@@ -55,7 +55,7 @@ export default function GenericModal({
           <DialogTitle className="flex items-center">
             <span className="pr-2">{myModalTitle}</span>
             <DocumentTextIcon
-              className="h-6 w-6 text-gray-800 pl-1 dark:text-white"
+              className="h-6 w-6 text-dark-gray pl-1 dark:text-white"
               aria-hidden="true"
             />
           </DialogTitle>
@@ -78,7 +78,7 @@ export default function GenericModal({
         <div className="flex h-full w-full mt-2">
           <Textarea
             ref={ref}
-            className="form-input h-[300px] w-full rounded-lg border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-white focus-visible:ring-1"
+            className="form-input h-[300px] w-full rounded-lg border-medium-low-gray dark:border-almost-dark-gray dark:bg-high-dark-gray dark:text-white focus-visible:ring-1"
             value={myValue}
             onChange={(e) => {
               setMyValue(e.target.value);
diff --git a/src/frontend/src/modals/importModal/buttonBox/index.tsx b/src/frontend/src/modals/importModal/buttonBox/index.tsx
index 2c408a120..a36197f6f 100644
--- a/src/frontend/src/modals/importModal/buttonBox/index.tsx
+++ b/src/frontend/src/modals/importModal/buttonBox/index.tsx
@@ -79,7 +79,7 @@ export default function ButtonBox({
     <button disabled={deactivate} onClick={onClick}>
       <div
         className={classNames(
-          "flex flex-col justify-center items-center rounded-lg text-center shadow border border-gray-300 dark:border-gray-800 hover:shadow-lg transform hover:scale-105",
+          "flex flex-col justify-center items-center rounded-lg text-center shadow border border-medium-low-gray dark:border-dark-gray hover:shadow-lg transform hover:scale-105",
           bgColor,
           height,
           width,
diff --git a/src/frontend/src/modals/importModal/index.tsx b/src/frontend/src/modals/importModal/index.tsx
index 00f17c959..01b55116b 100644
--- a/src/frontend/src/modals/importModal/index.tsx
+++ b/src/frontend/src/modals/importModal/index.tsx
@@ -85,7 +85,7 @@ export default function ImportModal() {
                     }}
                   >
                     <ArrowLeftIcon
-                      className="h-5 w-5 text-gray-800 ml-1 dark:text-white"
+                      className="h-5 w-5 text-dark-gray ml-1 dark:text-white"
                       aria-hidden="true"
                     />
                   </button>
@@ -97,7 +97,7 @@ export default function ImportModal() {
               {showExamples ? "Select an example" : "Import"}
             </span>
             <ArrowUpTrayIcon
-              className="h-5 w-5 text-gray-800 ml-1 dark:text-white"
+              className="h-5 w-5 text-dark-gray ml-1 dark:text-white"
               aria-hidden="true"
             />
           </DialogTitle>
@@ -106,7 +106,7 @@ export default function ImportModal() {
 
         <div
           className={classNames(
-            "h-full w-full dark:bg-gray-900 overflow-y-auto scrollbar-hide",
+            "h-full w-full dark:bg-high-dark-gray overflow-y-auto scrollbar-hide",
             showExamples && !loadingExamples
               ? "flex flex-row start justify-center items-start flex-wrap overflow-auto mx-auto"
               : "flex flex-row justify-center items-center"
@@ -116,7 +116,7 @@ export default function ImportModal() {
             <div className="flex h-full w-full justify-evenly items-center">
               <ButtonBox
                 size="big"
-                bgColor="bg-emerald-500 dark:bg-emerald-500/75"
+                bgColor="bg-medium-emerald dark:bg-medium-emerald/75"
                 description="Prebuilt Examples"
                 icon={
                   <DocumentDuplicateIcon className="h-10 w-10 flex-shrink-0" />
@@ -125,12 +125,12 @@ export default function ImportModal() {
                   setShowExamples(true);
                   handleExamples();
                 }}
-                textColor="text-emerald-500 dark:text-emerald-500/75"
+                textColor="text-medium-emerald dark:text-medium-emerald/75"
                 title="Examples"
               ></ButtonBox>
               <ButtonBox
                 size="big"
-                bgColor="bg-blue-500 dark:bg-blue-500/75"
+                bgColor="bg-almost-dark-blue dark:bg-almost-dark-blue/75"
                 description="Import from Local"
                 icon={
                   <ComputerDesktopIcon className="h-10 w-10 flex-shrink-0" />
@@ -139,7 +139,7 @@ export default function ImportModal() {
                   uploadFlow();
                   setModalOpen(false);
                 }}
-                textColor="text-blue-500 dark:text-blue-500/75"
+                textColor="text-almost-dark-blue dark:text-almost-dark-blue/75"
                 title="Local File"
               ></ButtonBox>
             </div>
@@ -157,7 +157,7 @@ export default function ImportModal() {
                   {" "}
                   <ButtonBox
                     size="small"
-                    bgColor="bg-emerald-500 dark:bg-emerald-500/75"
+                    bgColor="bg-medium-emerald dark:bg-medium-emerald/75"
                     description={example.description ?? "Prebuilt Examples"}
                     icon={
                       <DocumentDuplicateIcon className="h-6 w-6 flex-shrink-0" />
@@ -166,7 +166,7 @@ export default function ImportModal() {
                       addFlow(example, false);
                       setModalOpen(false);
                     }}
-                    textColor="text-emerald-500 dark:text-emerald-500/75"
+                    textColor="text-medium-emerald dark:text-medium-emerald/75"
                     title={example.name}
                   ></ButtonBox>
                 </div>
@@ -179,7 +179,7 @@ export default function ImportModal() {
             <a
               href="https://github.com/logspace-ai/langflow_examples"
               target="_blank"
-              className="flex items-center justify-center text-gray-600 dark:text-gray-300"
+              className="flex items-center justify-center text-medium-dark-gray dark:text-medium-low-gray"
               rel="noreferrer"
             >
               <svg
diff --git a/src/frontend/src/modals/promptModal/index.tsx b/src/frontend/src/modals/promptModal/index.tsx
index 8a3ce4185..b7a3b8b0a 100644
--- a/src/frontend/src/modals/promptModal/index.tsx
+++ b/src/frontend/src/modals/promptModal/index.tsx
@@ -43,7 +43,7 @@ export default function PromptAreaModal({
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-ring dark:bg-gray-600 dark:bg-opacity-75 bg-opacity-75 transition-opacity" />
+          <div className="fixed inset-0 bg-ring dark:bg-medium-dark-gray dark:bg-opacity-75 bg-opacity-75 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-10 overflow-y-auto">
@@ -57,11 +57,11 @@ export default function PromptAreaModal({
               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]">
+              <Dialog.Panel className="relative flex flex-col justify-between transform h-[600px] overflow-hidden rounded-lg bg-white dark:bg-dark-gray text-left shadow-xl transition-all sm:my-8 w-[700px]">
                 <div className=" z-50 absolute top-0 right-0 hidden pt-4 pr-4 sm:block">
                   <button
                     type="button"
-                    className="rounded-md text-gray-400 hover:text-gray-500"
+                    className="rounded-md text-almost-medium-gray hover:text-medium-gray"
                     onClick={() => {
                       setModalOpen(false);
                     }}
@@ -72,27 +72,27 @@ export default function PromptAreaModal({
                 </div>
                 <div className="h-full w-full flex flex-col justify-center items-center">
                   <div className="flex w-full pb-4 z-10 justify-center shadow-sm">
-                    <div className="mx-auto mt-4 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-blue-100 dark:bg-gray-900 sm:mx-0 sm:h-10 sm:w-10">
+                    <div className="mx-auto mt-4 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-almost-light-blue dark:bg-high-dark-gray sm:mx-0 sm:h-10 sm:w-10">
                       <DocumentTextIcon
-                        className="h-6 w-6 text-blue-600"
+                        className="h-6 w-6 text-almost-medium-blue"
                         aria-hidden="true"
                       />
                     </div>
                     <div className="mt-4 text-center sm:ml-4 sm:text-left">
                       <Dialog.Title
                         as="h3"
-                        className="text-lg font-medium dark:text-white leading-10 text-gray-900"
+                        className="text-lg font-medium dark:text-white leading-10 text-high-dark-gray"
                       >
                         Edit Prompt
                       </Dialog.Title>
                     </div>
                   </div>
-                  <div className="h-full w-full bg-accent overflow-auto dark:bg-gray-900 p-4 gap-4 flex flex-row justify-center items-center">
+                  <div className="h-full w-full bg-accent overflow-auto dark:bg-high-dark-gray p-4 gap-4 flex flex-row justify-center items-center">
                     <div className="flex h-full w-full">
-                      <div className="overflow-hidden px-4 py-5 sm:p-6 w-full h-full rounded-lg bg-white dark:bg-gray-800 shadow">
+                      <div className="overflow-hidden px-4 py-5 sm:p-6 w-full h-full rounded-lg bg-white dark:bg-dark-gray shadow">
                         <textarea
                           ref={ref}
-                          className="form-input h-full w-full rounded-lg border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-white"
+                          className="form-input h-full w-full rounded-lg border-medium-low-gray dark:border-almost-dark-gray dark:bg-high-dark-gray dark:text-white"
                           value={myValue}
                           onChange={(e) => {
                             setMyValue(e.target.value);
@@ -102,10 +102,10 @@ export default function PromptAreaModal({
                       </div>
                     </div>
                   </div>
-                  <div className="bg-gray-200 dark:bg-gray-900 w-full pb-3 flex flex-row-reverse px-4">
+                  <div className="bg-light-gray dark:bg-high-dark-gray w-full pb-3 flex flex-row-reverse px-4">
                     <button
                       type="button"
-                      className="inline-flex w-full justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-ring focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:ring-offset-1 sm:ml-3 sm:w-auto sm:text-sm"
+                      className="inline-flex w-full justify-center rounded-md border border-transparent bg-medium-high-indigo px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-ring focus:outline-none focus:ring-1 focus:ring-medium-indigo focus:ring-offset-1 sm:ml-3 sm:w-auto sm:text-sm"
                       onClick={() => {
                         checkPrompt(myValue)
                           .then((apiReturn) => {
diff --git a/src/frontend/src/modals/textAreaModal/index.tsx b/src/frontend/src/modals/textAreaModal/index.tsx
index a72f74643..3ce2787e0 100644
--- a/src/frontend/src/modals/textAreaModal/index.tsx
+++ b/src/frontend/src/modals/textAreaModal/index.tsx
@@ -42,7 +42,7 @@ export default function TextAreaModal({
           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-medium-gray dark:bg-medium-dark-gray dark:bg-opacity-75 bg-opacity-75 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-10 overflow-y-auto">
@@ -56,11 +56,11 @@ export default function TextAreaModal({
               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]">
+              <Dialog.Panel className="relative flex flex-col justify-between transform h-[600px] overflow-hidden rounded-lg bg-white dark:bg-dark-gray text-left shadow-xl transition-all sm:my-8 w-[700px]">
                 <div className=" z-50 absolute top-0 right-0 hidden pt-4 pr-4 sm:block">
                   <button
                     type="button"
-                    className="rounded-md text-gray-400 hover:text-gray-500"
+                    className="rounded-md text-almost-medium-gray hover:text-medium-gray"
                     onClick={() => {
                       setModalOpen(false);
                     }}
@@ -71,27 +71,27 @@ export default function TextAreaModal({
                 </div>
                 <div className="h-full w-full flex flex-col justify-center items-center">
                   <div className="flex w-full pb-4 z-10 justify-center shadow-sm">
-                    <div className="mx-auto mt-4 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-blue-100 dark:bg-gray-900 sm:mx-0 sm:h-10 sm:w-10">
+                    <div className="mx-auto mt-4 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-almost-light-blue dark:bg-high-dark-gray sm:mx-0 sm:h-10 sm:w-10">
                       <ClipboardDocumentListIcon
-                        className="h-6 w-6 text-blue-600"
+                        className="h-6 w-6 text-almost-medium-blue"
                         aria-hidden="true"
                       />
                     </div>
                     <div className="mt-4 text-center sm:ml-4 sm:text-left">
                       <Dialog.Title
                         as="h3"
-                        className="text-lg font-medium dark:text-white leading-10 text-gray-900"
+                        className="text-lg font-medium dark:text-white leading-10 text-high-dark-gray"
                       >
                         Edit text
                       </Dialog.Title>
                     </div>
                   </div>
-                  <div className="h-full w-full bg-gray-200 dark:bg-gray-900 p-4 gap-4 flex flex-row justify-center items-center">
+                  <div className="h-full w-full bg-light-gray dark:bg-high-dark-gray p-4 gap-4 flex flex-row justify-center items-center">
                     <div className="flex h-full w-full">
-                      <div className="overflow-hidden px-4 py-5 sm:p-6 w-full rounded-lg bg-white dark:bg-gray-800 shadow">
+                      <div className="overflow-hidden px-4 py-5 sm:p-6 w-full rounded-lg bg-white dark:bg-dark-gray shadow">
                         <textarea
                           ref={ref}
-                          className="form-input h-full w-full rounded-lg border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-white"
+                          className="form-input h-full w-full rounded-lg border-medium-low-gray dark:border-almost-dark-gray dark:bg-high-dark-gray dark:text-white"
                           value={myValue}
                           onChange={(e) => {
                             setMyValue(e.target.value);
@@ -101,10 +101,10 @@ export default function TextAreaModal({
                       </div>
                     </div>
                   </div>
-                  <div className="bg-gray-200 dark:bg-gray-900 w-full pb-3 flex flex-row-reverse px-4">
+                  <div className="bg-light-gray dark:bg-high-dark-gray w-full pb-3 flex flex-row-reverse px-4">
                     <button
                       type="button"
-                      className="inline-flex w-full justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:ring-offset-1 sm:ml-3 sm:w-auto sm:text-sm"
+                      className="inline-flex w-full justify-center rounded-md border border-transparent bg-medium-high-indigo px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-high-indigo focus:outline-none focus:ring-1 focus:ring-medium-indigo focus:ring-offset-1 sm:ml-3 sm:w-auto sm:text-sm"
                       onClick={() => {
                         setModalOpen(false);
                       }}
diff --git a/src/frontend/src/pages/FlowPage/components/ConnectionLineComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/ConnectionLineComponent/index.tsx
index db356d854..c646c6834 100644
--- a/src/frontend/src/pages/FlowPage/components/ConnectionLineComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/ConnectionLineComponent/index.tsx
@@ -13,7 +13,7 @@ const ConnectionLineComponent = ({
         fill="none"
         stroke="#222"
         strokeWidth={1.5}
-        className="animated dark:stroke-gray-400"
+        className="animated dark:stroke-almost-medium-gray"
         d={`M${fromX},${fromY} C ${fromX} ${toY} ${fromX} ${toY} ${toX},${toY}`}
         style={connectionLineStyle}
       />
@@ -23,7 +23,7 @@ const ConnectionLineComponent = ({
         fill="#fff"
         r={3}
         stroke="#222"
-        className="dark:stroke-gray-400 dark:fill-gray-800"
+        className="dark:stroke-almost-medium-gray dark:fill-dark-gray"
         strokeWidth={1.5}
       />
     </g>
diff --git a/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx
index 7b80e1cff..9cbd1aa96 100644
--- a/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx
@@ -12,10 +12,10 @@ export default function DisclosureComponent({
       {({ open }) => (
         <>
           <div>
-            <Disclosure.Button className="select-none bg-muted dark:bg-gray-700/60 dark:border-y-gray-600 w-full flex justify-between items-center -mt-px px-3 py-2 border-y border-y-gray-200">
+            <Disclosure.Button className="select-none bg-muted dark:bg-almost-dark-gray/60 dark:border-y-medium-dark-gray w-full flex justify-between items-center -mt-px px-3 py-2 border-y border-y-light-gray">
               <div className="flex gap-4">
-                <Icon className="w-6 text-gray-800 dark:text-white/80" />
-                <span className="flex items-center text-sm text-gray-800 dark:text-white/80 font-medium">
+                <Icon className="w-6 text-dark-gray dark:text-white/80" />
+                <span className="flex items-center text-sm text-dark-gray dark:text-white/80 font-medium">
                   {title}
                 </span>
               </div>
@@ -29,7 +29,7 @@ export default function DisclosureComponent({
                   <ChevronRightIcon
                     className={`${
                       open || openDisc ? "rotate-90 transform" : ""
-                    } h-4 w-4 text-gray-800 dark:text-white`}
+                    } h-4 w-4 text-dark-gray dark:text-white`}
                   />
                 </div>
               </div>
diff --git a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
index b62cca5af..034575e11 100644
--- a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
@@ -185,8 +185,8 @@ export default function Page({ flow }: { flow: FlowType }) {
             style: { stroke: "inherit" },
             className:
               params.targetHandle.split("|")[0] === "Text"
-                ? "stroke-gray-800 dark:stroke-gray-300"
-                : "stroke-gray-900 dark:stroke-gray-200",
+                ? "stroke-dark-gray dark:stroke-medium-low-gray"
+                : "stroke-high-dark-gray dark:stroke-light-gray",
             animated: params.targetHandle.split("|")[0] === "Text",
           },
           eds
@@ -397,8 +397,8 @@ export default function Page({ flow }: { flow: FlowType }) {
                   selectNodesOnDrag={false}
                   className="theme-attribution"
                 >
-                  <Background className="dark:bg-gray-900" />
-                  <Controls className="[&>button]:text-black  [&>button]:dark:bg-gray-800 hover:[&>button]:dark:bg-gray-700 [&>button]:dark:text-gray-400 [&>button]:dark:fill-gray-400 [&>button]:dark:border-gray-600"></Controls>
+                  <Background className="dark:bg-high-dark-gray" />
+                  <Controls className="[&>button]:text-black  [&>button]:dark:bg-dark-gray hover:[&>button]:dark:bg-almost-dark-gray [&>button]:dark:text-almost-medium-gray [&>button]:dark:fill-almost-medium-gray [&>button]:dark:border-medium-dark-gray"></Controls>
                 </ReactFlow>
                 <Chat flow={flow} reactFlowInstance={reactFlowInstance} />
               </div>
diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
index bce0c6919..a431b1c9c 100644
--- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
@@ -66,44 +66,44 @@ export default function ExtraSidebar() {
       <div className="mt-2 mb-2 w-full flex gap-2 justify-between px-2 items-center">
         <ShadTooltip delayDuration={1000} content="Import" side="top">
           <button
-            className="hover:dark:hover:bg-btn-hover-bg text-gray-700 w-full justify-center shadow-sm transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300  relative inline-flex items-center rounded-md bg-white px-2 py-2 ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
+            className="hover:dark:hover:bg-btn-hover-bg text-almost-dark-gray w-full justify-center shadow-sm transition-all duration-500 ease-in-out dark:bg-dark-gray dark:text-medium-low-gray  relative inline-flex items-center rounded-md bg-white px-2 py-2 ring-1 ring-inset ring-medium-low-gray hover:bg-high-light-gray"
             onClick={() => {
               // openPopUp(<ImportModal />);
               uploadFlow();
             }}
           >
-            <FileUp className="w-5 h-5 dark:text-gray-300"></FileUp>
+            <FileUp className="w-5 h-5 dark:text-medium-low-gray"></FileUp>
           </button>
         </ShadTooltip>
 
         <ShadTooltip delayDuration={1000} content="Export" side="top">
           <button
             className={classNames(
-              "hover:dark:hover:bg-btn-hover-bg text-gray-700 w-full justify-center shadow-sm transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300  relative inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-gray-300 hover:bg-gray-50 rounded-md"
+              "hover:dark:hover:bg-btn-hover-bg text-almost-dark-gray w-full justify-center shadow-sm transition-all duration-500 ease-in-out dark:bg-dark-gray dark:text-medium-low-gray  relative inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-medium-low-gray hover:bg-high-light-gray rounded-md"
             )}
             onClick={(event) => {
               openPopUp(<ExportModal />);
             }}
           >
-            <FileDown className="w-5 h-5  dark:text-gray-300"></FileDown>
+            <FileDown className="w-5 h-5  dark:text-medium-low-gray"></FileDown>
           </button>
         </ShadTooltip>
         <ShadTooltip delayDuration={1000} content="Code" side="top">
           <button
             className={classNames(
-              "hover:dark:hover:bg-btn-hover-bg text-gray-700 w-full justify-center shadow-sm transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300  relative inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-gray-300 hover:bg-gray-50 rounded-md"
+              "hover:dark:hover:bg-btn-hover-bg text-almost-dark-gray w-full justify-center shadow-sm transition-all duration-500 ease-in-out dark:bg-dark-gray dark:text-medium-low-gray  relative inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-medium-low-gray hover:bg-high-light-gray rounded-md"
             )}
             onClick={(event) => {
               openPopUp(<ApiModal flow={flows.find((f) => f.id === tabId)} />);
             }}
           >
-            <Code2 className="w-5 h-5  dark:text-gray-300"></Code2>
+            <Code2 className="w-5 h-5  dark:text-medium-low-gray"></Code2>
           </button>
         </ShadTooltip>
 
         <ShadTooltip delayDuration={1000} content="Save" side="top">
           <button
-            className="hover:dark:hover:bg-btn-hover-bg text-gray-700 w-full justify-center transition-all shadow-sm duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300  relative inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-gray-300 hover:bg-gray-50 rounded-md"
+            className="hover:dark:hover:bg-btn-hover-bg text-almost-dark-gray w-full justify-center transition-all shadow-sm duration-500 ease-in-out dark:bg-dark-gray dark:text-medium-low-gray  relative inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-medium-low-gray hover:bg-gray-50 rounded-md"
             onClick={(event) => {
               saveFlow(flows.find((f) => f.id === tabId));
               setSuccessData({ title: "Changes saved successfully" });
@@ -127,7 +127,7 @@ export default function ExtraSidebar() {
           placeholder="Search Nodes"
           className={
             INPUT_STYLE +
-            "w-full border-1 dark:border-slate-600 dark:border-0.5 dark:ring-0 focus-visible:dark:ring-0 focus-visible:dark:ring-offset-1 rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
+            "w-full border-1 dark:border-medium-slate dark:border-0.5 dark:ring-0 focus-visible:dark:ring-0 focus-visible:dark:ring-offset-1 rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
           }
           onChange={(e) => {
             handleSearchInput(e.target.value);
@@ -183,11 +183,11 @@ export default function ExtraSidebar() {
                               );
                             }}
                           >
-                            <div className="flex w-full justify-between text-sm px-3 py-1 bg-white dark:bg-gray-800 items-center border-dashed border-gray-400 dark:border-gray-600 border-l-0 rounded-md rounded-l-none border">
+                            <div className="flex w-full justify-between text-sm px-3 py-1 bg-white dark:bg-dark-gray items-center border-dashed border-almost-medium-gray dark:border-medium-dark-gray border-l-0 rounded-md rounded-l-none border">
                               <span className="text-black dark:text-white w-full pr-1 truncate text-xs">
                                 {t}
                               </span>
-                              <Bars2Icon className="w-4 h-6  text-gray-400 dark:text-gray-600" />
+                              <Bars2Icon className="w-4 h-6  text-almost-medium-gray dark:text-medium-dark-gray" />
                             </div>
                           </div>
                         </div>
diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
index f5636fc12..8cdf6c529 100644
--- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
@@ -32,12 +32,12 @@ const NodeToolbarComponent = (props) => {
         <span className="isolate inline-flex rounded-md shadow-sm">
           <ShadTooltip delayDuration={1000} content="Delete" side="top">
             <button
-              className="hover:dark:hover:bg-btn-hover-bg text-gray-700 transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 shadow-md relative inline-flex items-center rounded-l-md bg-white px-2 py-2 ring-1 ring-inset ring-gray-300 hover:bg-muted focus:z-10"
+              className="hover:dark:hover:bg-btn-hover-bg text-almost-dark-gray transition-all duration-500 ease-in-out dark:bg-dark-gray dark:text-medium-low-gray shadow-md relative inline-flex items-center rounded-l-md bg-white px-2 py-2 ring-1 ring-inset ring-medium-low-gray hover:bg-muted focus:z-10"
               onClick={() => {
                 props.deleteNode(props.data.id);
               }}
             >
-              <Trash2 className="w-4 h-4 dark:text-gray-300"></Trash2>
+              <Trash2 className="w-4 h-4 dark:text-medium-low-gray"></Trash2>
             </button>
           </ShadTooltip>
 
@@ -45,8 +45,8 @@ const NodeToolbarComponent = (props) => {
             <button
               className={classNames(
                 nodeLength > 0
-                  ? "hover:dark:hover:bg-btn-hover-bg text-gray-700 transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-gray-300 hover:bg-muted focus:z-10"
-                  : "hover:dark:hover:bg-btn-hover-bg text-gray-700 transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-gray-300 hover:bg-muted focus:z-10 rounded-r-md"
+                  ? "hover:dark:hover:bg-btn-hover-bg text-almost-dark-gray transition-all duration-500 ease-in-out dark:bg-dark-gray dark:text-medium-low-gray shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-medium-low-gray hover:bg-muted focus:z-10"
+                  : "hover:dark:hover:bg-btn-hover-bg text-almost-dark-gray transition-all duration-500 ease-in-out dark:bg-dark-gray dark:text-medium-low-gray shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-medium-low-gray hover:bg-muted focus:z-10 rounded-r-md"
               )}
               onClick={(event) => {
                 event.preventDefault();
@@ -65,20 +65,20 @@ const NodeToolbarComponent = (props) => {
                 );
               }}
             >
-              <Copy className="w-4 h-4 dark:text-gray-300"></Copy>
+              <Copy className="w-4 h-4 dark:text-medium-low-gray"></Copy>
             </button>
           </ShadTooltip>
 
           {nodeLength > 0 && (
             <ShadTooltip delayDuration={1000} content="Edit" side="top">
               <button
-                className="hover:dark:hover:bg-btn-hover-bg text-gray-700 transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-gray-300 hover:bg-muted focus:z-10 rounded-r-md"
+                className="hover:dark:hover:bg-btn-hover-bg text-almost-dark-gray transition-all duration-500 ease-in-out dark:bg-dark-gray dark:text-medium-low-gray shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-medium-low-gray hover:bg-muted focus:z-10 rounded-r-md"
                 onClick={(event) => {
                   event.preventDefault();
                   props.openPopUp(<EditNodeModal data={props.data} />);
                 }}
               >
-                <Settings2 className="w-4 h-4 dark:text-gray-300"></Settings2>
+                <Settings2 className="w-4 h-4 dark:text-medium-low-gray"></Settings2>
               </button>
             </ShadTooltip>
           )}
diff --git a/src/frontend/tailwind.config.js b/src/frontend/tailwind.config.js
index 55feba232..4443f6299 100644
--- a/src/frontend/tailwind.config.js
+++ b/src/frontend/tailwind.config.js
@@ -16,6 +16,42 @@ module.exports = {
     },
     extend: {
       colors: {
+        white: "var(--white)",
+        'high-light-gray': "var(--high-light-gray)",
+        'almost-light-blue': "var(--almost-light-blue)",
+        'high-indigo': "var(--high-indigo)",
+        'medium-high-indigo': "var(--medium-high-indigo)",
+        'medium-emerald': "var(--medium-emerald)",
+        'high-light-slate': "var(--high-light-slate)",
+        'medium-yellow': "var(--medium-yellow)",
+        'almost-medium-green': "var(--almost-medium-green)",
+        'almost-medium-blue': "var(--almost-medium-blue)",
+        'medium-indigo': "var(--medium-indigo)",
+        'medium-slate': "var(--medium-slate)",
+        'light-slate': "var(--light-slate)",
+        'light-green': "var(--light-green)",
+        'dark-green': "var(--dark-green)",
+        'medium-green': "var(--medium-green)",
+        'medium-dark-green': "var(--medium-dark-green)",
+        'light-blue': "var(--light-blue)",
+        'dark-blue': "var(--dark-blue)",
+        'medium-blue': "var(--medium-blue)",
+        'medium-dark-blue': "var(--medium-dark-blue)",
+        'almost-medium-red': "var(--almost-medium-red)",
+        'medium-dark-red': "var(--medium-dark-red)",
+        'almost-dark-red': "var(--almost-dark-red)",
+        'medium-light-red': "var(--medium-light-red)",
+        'dark-red': "var(--dark-red)",
+        'light-red': "var(--light-red)",
+        'medium-red': "var(--medium-red)",
+        'almost-medium-gray': "var(--almost-medium-gray)",
+        'almost-dark-gray': "var(--almost-dark-gray)",
+        'medium-dark-gray': "var(--medium-dark-gray)",
+        'medium-low-gray': "var(--medium-low-gray)",
+        'medium-gray': "var(--medium-gray)",
+        'high-dark-gray': "var(--high-dark-gray)",
+        'light-gray': "var(--light-gray)",
+        'dark-gray': "var(--dark-gray)",
         'btn-shadow': "var(--round-btn-shadow)",
         buildBackground: "var(--build-background)",
         build: "var(--build-trigger)",
@@ -94,6 +130,44 @@ module.exports = {
     },
     extend: {
       colors: {
+        white: "var(--white)",
+        'high-light-gray': "var(--high-light-gray)",
+        'almost-light-blue': "var(--almost-light-blue)",
+        'high-indigo': "var(--high-indigo)",
+        'medium-high-indigo': "var(--medium-high-indigo)",
+        'medium-emerald': "var(--medium-emerald)",
+        'high-light-slate': "var(--high-light-slate)",
+        'medium-yellow': "var(--medium-yellow)",
+        'almost-medium-green': "var(--almost-medium-green)",
+        'almost-medium-blue': "var(--almost-medium-blue)",
+        'medium-indigo': "var(--medium-indigo)",
+        'medium-slate': "var(--medium-slate)",
+        'light-slate': "var(--light-slate)",
+        'light-green': "var(--light-green)",
+        'dark-green': "var(--dark-green)",
+        'medium-green': "var(--medium-green)",
+        'medium-dark-green': "var(--medium-dark-green)",
+        'medium-light-blue': "var(--medium-light-blue)",
+        'almost-dark-blue': "var(--almost-dark-blue)",
+        'light-blue': "var(--light-blue)",
+        'dark-blue': "var(--dark-blue)",
+        'medium-blue': "var(--medium-blue)",
+        'medium-dark-blue': "var(--medium-dark-blue)",
+        'almost-medium-red': "var(--almost-medium-red)",
+        'medium-dark-red': "var(--medium-dark-red)",
+        'almost-dark-red': "var(--almost-dark-red)",
+        'medium-light-red': "var(--medium-light-red)",
+        'dark-red': "var(--dark-red)",
+        'light-red': "var(--light-red)",
+        'medium-red': "var(--medium-red)",
+        'almost-medium-gray': "var(--almost-medium-gray)",
+        'almost-dark-gray': "var(--almost-dark-gray)",
+        'medium-dark-gray': "var(--medium-dark-gray)",
+        'medium-low-gray': "var(--medium-low-gray)",
+        'medium-gray': "var(--medium-gray)",
+        'high-dark-gray': "var(--high-dark-gray)",
+        'light-gray': "var(--light-gray)",
+        'dark-gray': "var(--dark-gray)",
         'btn-hover-bg': "var(--hover-btn-background)",
         'btn-shadow': "var(--round-btn-shadow)",
         buildBackground: "var(--build-background)",

From 5bdca44953daf400456a2d4dfc156a8045991a00 Mon Sep 17 00:00:00 2001
From: Igor Carvalho <igorsilvabhz6@gmail.com>
Date: Wed, 21 Jun 2023 18:06:43 -0300
Subject: [PATCH 08/26] 
 Fix[FlowPage/components/extraSideBarComponent/index.tsx]: Fix buttons and
 inputs ring color

---
 src/frontend/src/index.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/frontend/src/index.css b/src/frontend/src/index.css
index ad0b775a9..891ea1767 100644
--- a/src/frontend/src/index.css
+++ b/src/frontend/src/index.css
@@ -156,7 +156,7 @@
   --light-gray: #e5e7eb; /* tailwind gray 200 */
   --high-dark-gray: #111827; /* tailwind gray 900 */
   --medium-gray: #6b7280; /* tailwind gray 500 */
-  --medium-low-gray: #d1d5db /* tailwind gray 300 */
+  --medium-low-gray: #d1d5db; /* tailwind gray 300 */
   --medium-dark-gray: #4b5563; /* tailwind gray 600 */
   --almost-dark-gray: #374151; /* tailwind gray 700 */
   --almost-medium-gray: #9ca3af; /* tailwind gray 400 */

From f765a52164506b4118a6a42d212b2007dfe50abc Mon Sep 17 00:00:00 2001
From: Igor Carvalho <igorsilvabhz6@gmail.com>
Date: Fri, 23 Jun 2023 18:59:32 -0300
Subject: [PATCH 09/26] feat[Remove all redundant colors]: Change redundant
 colors and add new color variants

---
 .../components/parameterComponent/index.tsx   |   6 +-
 .../src/CustomNodes/GenericNode/index.tsx     |  32 ++--
 .../components/singleAlertComponent/index.tsx |   6 +-
 .../src/alerts/alertDropDown/index.tsx        |  12 +-
 src/frontend/src/alerts/error/index.tsx       |   8 +-
 src/frontend/src/alerts/notice/index.tsx      |   4 +-
 src/frontend/src/alerts/success/index.tsx     |   6 +-
 .../components/CrashErrorComponent/index.tsx  |  12 +-
 .../EditFlowSettingsComponent/index.tsx       |   2 +-
 .../ExtraSidebarComponent/index.tsx           |  30 ++--
 .../ReactTooltipComponent/index.tsx           |   2 +-
 .../chatComponent/buildTrigger/index.tsx      |   2 +-
 .../chatComponent/chatMessage/index.tsx       |   4 +-
 .../chatComponent/chatTrigger/index.tsx       |   2 +-
 .../components/codeAreaComponent/index.tsx    |   6 +-
 .../components/dropdownComponent/index.tsx    |  20 +--
 .../src/components/floatComponent/index.tsx   |   6 +-
 .../src/components/headerComponent/index.tsx  |   4 +-
 .../src/components/inputComponent/index.tsx   |  12 +-
 .../components/inputFileComponent/index.tsx   |   6 +-
 .../components/inputListComponent/index.tsx   |   8 +-
 .../src/components/intComponent/index.tsx     |   6 +-
 .../src/components/loadingComponent/index.tsx |   2 +-
 .../src/components/promptComponent/index.tsx  |   6 +-
 .../components/textAreaComponent/index.tsx    |   6 +-
 .../src/components/toggleComponent/index.tsx  |   6 +-
 .../src/components/ui/rename-label.tsx        |   2 +-
 src/frontend/src/index.css                    | 164 +++++++-----------
 src/frontend/src/modals/ApiModal/index.tsx    |   4 +-
 .../src/modals/EditNodeModal/index.tsx        |  12 +-
 .../NodeModal/components/ModalField/index.tsx |   2 +-
 src/frontend/src/modals/NodeModal/index.tsx   |  16 +-
 .../src/modals/chatModal/chatInput/index.tsx  |  10 +-
 .../chatModal/chatMessage/codeBlock/index.tsx |   6 +-
 .../modals/chatModal/chatMessage/index.tsx    |  22 +--
 .../modals/chatModal/fileComponent/index.tsx  |   8 +-
 src/frontend/src/modals/chatModal/index.tsx   |  18 +-
 .../src/modals/codeAreaModal/index.tsx        |   4 +-
 src/frontend/src/modals/exportModal/index.tsx |   2 +-
 .../src/modals/genericModal/index.tsx         |   4 +-
 .../modals/importModal/buttonBox/index.tsx    |   8 +-
 src/frontend/src/modals/importModal/index.tsx |   8 +-
 src/frontend/src/modals/promptModal/index.tsx |  20 +--
 .../src/modals/textAreaModal/index.tsx        |  20 +--
 .../ConnectionLineComponent/index.tsx         |   2 +-
 .../components/DisclosureComponent/index.tsx  |   8 +-
 .../components/PageComponent/index.tsx        |   8 +-
 .../extraSidebarComponent/index.tsx           |  18 +-
 .../components/nodeToolbarComponent/index.tsx |  12 +-
 src/frontend/tailwind.config.js               |  32 ++--
 50 files changed, 294 insertions(+), 332 deletions(-)

diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
index e2c651519..126e81c30 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
@@ -121,12 +121,12 @@ export default function ParameterComponent({
   return (
     <div
       ref={ref}
-      className="w-full flex flex-wrap justify-between items-center bg-muted dark:bg-dark-gray dark:text-white mt-1 px-5 py-2"
+      className="w-full flex flex-wrap justify-between items-center bg-muted dark:bg-foreground dark:text-background mt-1 px-5 py-2"
     >
       <>
         <div className={"text-sm truncate w-full " + (left ? "" : "text-end")}>
           {title}
-          <span className="text-almost-medium-red">{required ? " *" : ""}</span>
+          <span className="text-destructive">{required ? " *" : ""}</span>
         </div>
         {left &&
         (type === "str" ||
@@ -153,7 +153,7 @@ export default function ParameterComponent({
               }
               className={classNames(
                 left ? "-ml-0.5 " : "-mr-0.5 ",
-                "w-3 h-3 rounded-full border-2 bg-white dark:bg-dark-gray"
+                "w-3 h-3 rounded-full border-2 bg-background dark:bg-foreground"
               )}
               style={{
                 borderColor: color,
diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx
index 378a02344..1c08f101b 100644
--- a/src/frontend/src/CustomNodes/GenericNode/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx
@@ -75,11 +75,11 @@ export default function GenericNode({
 
       <div
         className={classNames(
-          selected ? "border border-ring" : "border dark:border-almost-dark-gray",
-          "prompt-node relative flex w-96 flex-col justify-center rounded-lg bg-white dark:bg-high-dark-gray"
+          selected ? "border border-ring" : "border dark:border-foreground",
+          "prompt-node relative flex w-96 flex-col justify-center rounded-lg bg-background dark:bg-foreground"
         )}
       >
-        <div className="flex w-full items-center justify-between gap-8 rounded-t-lg border-b bg-muted p-4 dark:border-b-almost-dark-gray dark:bg-dark-gray dark:text-white ">
+        <div className="flex w-full items-center justify-between gap-8 rounded-t-lg border-b bg-muted p-4 dark:border-b-foreground dark:bg-foreground dark:text-background ">
           <div className="flex w-full items-center gap-2 truncate text-lg">
             <Icon
               className="h-10 w-10 rounded p-1"
@@ -89,7 +89,7 @@ export default function GenericNode({
             />
             <div className="ml-2 truncate">
               <ShadTooltip delayDuration={1500} content={data.type}>
-                <div className="ml-2 truncate text-dark-gray">{data.type}</div>
+                <div className="ml-2 truncate text-foreground">{data.type}</div>
               </ShadTooltip>
             </div>
           </div>
@@ -122,25 +122,25 @@ export default function GenericNode({
                   <div
                     className={classNames(
                       validationStatus && validationStatus.valid
-                        ? "w-4 h-4 rounded-full bg-almost-medium-green opacity-100"
-                        : "w-4 h-4 rounded-full bg-medium-gray opacity-0 hidden animate-spin",
-                      "absolute w-4 hover:text-medium-gray hover:dark:text-medium-low-gray transition-all ease-in-out duration-200"
+                        ? "w-4 h-4 rounded-full bg-red-600 opacity-100"
+                        : "w-4 h-4 rounded-full bg-ring opacity-0 hidden animate-spin",
+                      "absolute w-4 hover:text-ring hover:dark:text-medium-low-gray transition-all ease-in-out duration-200"
                     )}
                   ></div>
                   <div
                     className={classNames(
                       validationStatus && !validationStatus.valid
-                        ? "w-4 h-4 rounded-full  bg-medium-red opacity-100"
-                        : "w-4 h-4 rounded-full bg-medium-gray opacity-0 hidden animate-spin",
-                      "absolute w-4 hover:text-medium-gray hover:dark:text-medium-low-gray transition-all ease-in-out duration-200"
+                        ? "w-4 h-4 rounded-full  bg-status-red opacity-100"
+                        : "w-4 h-4 rounded-full bg-ring opacity-0 hidden animate-spin",
+                      "absolute w-4 hover:text-ring hover:dark:text-medium-low-gray transition-all ease-in-out duration-200"
                     )}
                   ></div>
                   <div
                     className={classNames(
                       !validationStatus
-                        ? "w-4 h-4 rounded-full  bg-medium-yellow opacity-100"
-                        : "w-4 h-4 rounded-full bg-medium-gray opacity-0 hidden animate-spin",
-                      "absolute w-4 hover:text-medium-gray hover:dark:text-medium-low-gray transition-all ease-in-out duration-200"
+                        ? "w-4 h-4 rounded-full  bg-status-yellow opacity-100"
+                        : "w-4 h-4 rounded-full bg-ring opacity-0 hidden animate-spin",
+                      "absolute w-4 hover:text-ring hover:dark:text-medium-low-gray transition-all ease-in-out duration-200"
                     )}
                   ></div>
                 </div>
@@ -149,7 +149,7 @@ export default function GenericNode({
           </div>
         </div>
 
-        <div className="h-full w-full py-5 text-dark-gray">
+        <div className="h-full w-full py-5 text-foreground">
           <div className="w-full px-5 pb-3 text-sm text-muted-foreground">
             {data.node.description}
           </div>
@@ -162,7 +162,7 @@ export default function GenericNode({
                   {/* {idx === 0 ? (
                                 <div
                                     className={classNames(
-                                        "px-5 py-2 mt-2 dark:text-white text-center",
+                                        "px-5 py-2 mt-2 dark:text-background text-center",
                                         Object.keys(data.node.template).filter(
                                             (key) =>
                                                 !key.startsWith("_") &&
@@ -213,7 +213,7 @@ export default function GenericNode({
             >
               {" "}
             </div>
-            {/* <div className="px-5 py-2 mt-2 dark:text-white text-center">
+            {/* <div className="px-5 py-2 mt-2 dark:text-background text-center">
                   Output
               </div> */}
             <ParameterComponent
diff --git a/src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx b/src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx
index ad505e23e..72fc3f8ee 100644
--- a/src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx
+++ b/src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx
@@ -40,7 +40,7 @@ export default function SingleAlert({
             />
           </div>
           <div className="ml-3">
-            <h3 className="text-sm break-words font-medium text-red-800 dark:text-white/80">
+            <h3 className="text-sm break-words font-medium text-red-800 dark:text-background/80">
               {dropItem.title}
             </h3>
             {dropItem.list ? (
@@ -87,7 +87,7 @@ export default function SingleAlert({
             />
           </div>
           <div className="ml-3 flex-1 md:flex md:justify-between">
-            <p className="text-sm text-blue-700 dark:text-white/80">
+            <p className="text-sm text-blue-700 dark:text-background/80">
               {dropItem.title}
             </p>
             <p className="mt-3 text-sm md:mt-0 md:ml-6">
@@ -133,7 +133,7 @@ export default function SingleAlert({
             />
           </div>
           <div className="ml-3">
-            <p className="text-sm font-medium text-green-800 dark:bg-white/80">
+            <p className="text-sm font-medium text-green-800 dark:bg-background/80">
               {dropItem.title}
             </p>
           </div>
diff --git a/src/frontend/src/alerts/alertDropDown/index.tsx b/src/frontend/src/alerts/alertDropDown/index.tsx
index 7ba779c02..d695c7f71 100644
--- a/src/frontend/src/alerts/alertDropDown/index.tsx
+++ b/src/frontend/src/alerts/alertDropDown/index.tsx
@@ -24,13 +24,13 @@ export default function AlertDropdown({}: AlertDropdownType) {
   return (
     <div
       ref={componentRef}
-      className="z-10 py-3 pb-4 px-2 rounded-md bg-white dark:bg-dark-gray ring-1 ring-black ring-opacity-5 shadow-lg focus:outline-none overflow-hidden w-[400px] h-[500px] flex flex-col"
+      className="z-10 py-3 pb-4 px-2 rounded-md bg-background dark:bg-foreground 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-dark-gray dark:text-light-gray">
+      <div className="flex pl-3 flex-row justify-between text-md font-medium text-foreground dark:text-light-gray">
         Notifications
         <div className="flex gap-3 pr-3 ">
           <button
-            className="text-dark-gray hover:text-medium-red dark:text-light-gray dark:hover:text-medium-red"
+            className="text-foreground hover:text-status-red dark:text-light-gray dark:hover:text-status-red"
             onClick={() => {
               closePopUp();
               setTimeout(clearNotificationList, 100);
@@ -39,14 +39,14 @@ export default function AlertDropdown({}: AlertDropdownType) {
             <TrashIcon className="w-[1.1rem] h-[1.1rem]" />
           </button>
           <button
-            className="text-dark-gray hover:text-medium-red dark:text-light-gray dark:hover:text-medium-red"
+            className="text-foreground hover:text-status-red dark:text-light-gray dark:hover:text-status-red"
             onClick={closePopUp}
           >
             <XMarkIcon className="h-5 w-5" />
           </button>
         </div>
       </div>
-      <div className="mt-3 flex flex-col overflow-y-scroll w-full h-full scrollbar-hide text-high-dark-gray dark:text-medium-low-gray">
+      <div className="mt-3 flex flex-col overflow-y-scroll w-full h-full scrollbar-hide text-high-foreground dark:text-medium-low-gray">
         {notificationList.length !== 0 ? (
           notificationList.map((alertItem, index) => (
             <SingleAlert
@@ -56,7 +56,7 @@ export default function AlertDropdown({}: AlertDropdownType) {
             />
           ))
         ) : (
-          <div className="h-full w-full pb-16 text-medium-gray dark:text-medium-gray flex justify-center items-center">
+          <div className="h-full w-full pb-16 text-ring dark:text-ring flex justify-center items-center">
             No new notifications
           </div>
         )}
diff --git a/src/frontend/src/alerts/error/index.tsx b/src/frontend/src/alerts/error/index.tsx
index 01c8fbb7e..8908fa37f 100644
--- a/src/frontend/src/alerts/error/index.tsx
+++ b/src/frontend/src/alerts/error/index.tsx
@@ -39,21 +39,21 @@ export default function ErrorAlert({
             removeAlert(id);
           }, 500);
         }}
-        className="rounded-md w-96 mt-6 shadow-xl bg-light-red dark:bg-dark-red p-4 cursor-pointer"
+        className="rounded-md w-96 mt-6 shadow-xl bg-error-background  p-4 cursor-pointer"
       >
         <div className="flex">
           <div className="flex-shrink-0">
             <XCircleIcon
-              className="h-5 w-5 text-light-red dark:text-light-red"
+              className="h-5 w-5 text-error-background dark:text-error-background"
               aria-hidden="true"
             />
           </div>
           <div className="ml-3">
-            <h3 className="text-sm font-medium text-almost-dark-red dark:text-white/80">
+            <h3 className="text-sm font-medium text-error-foreground dark:text-background/80">
               {title}
             </h3>
             {list.length !== 0 ? (
-              <div className="mt-2 text-sm text-medium-dark-red dark:text-light-red">
+              <div className="mt-2 text-sm text-error-foreground dark:text-error-background">
                 <ul className="list-disc space-y-1 pl-5">
                   {list.map((item, index) => (
                     <li key={index}>{item}</li>
diff --git a/src/frontend/src/alerts/notice/index.tsx b/src/frontend/src/alerts/notice/index.tsx
index 004d63bc7..c6a9fe912 100644
--- a/src/frontend/src/alerts/notice/index.tsx
+++ b/src/frontend/src/alerts/notice/index.tsx
@@ -46,12 +46,12 @@ export default function NoticeAlert({
             />
           </div>
           <div className="ml-3 flex-1 md:flex md:justify-between">
-            <p className="text-sm text-medium-dark-blue dark:text-white/80">{title}</p>
+            <p className="text-sm text-ring dark:text-background/80">{title}</p>
             <p className="mt-3 text-sm md:mt-0 md:ml-6">
               {link !== "" ? (
                 <Link
                   to={link}
-                  className="whitespace-nowrap font-medium text-medium-dark-blue dark:text-light-blue hover:dark:text-blue-10 hover:text-ring"
+                  className="whitespace-nowrap font-medium text-ring dark:text-light-blue hover:dark:text-blue-10 hover:text-ring"
                 >
                   Details
                 </Link>
diff --git a/src/frontend/src/alerts/success/index.tsx b/src/frontend/src/alerts/success/index.tsx
index 391a5831f..f62d9e3a9 100644
--- a/src/frontend/src/alerts/success/index.tsx
+++ b/src/frontend/src/alerts/success/index.tsx
@@ -34,17 +34,17 @@ export default function SuccessAlert({
           setShow(false);
           removeAlert(id);
         }}
-        className="rounded-md w-96 mt-6 shadow-xl bg-light-green dark:bg-dark-green p-4"
+        className="rounded-md w-96 mt-6 shadow-xl bg-success-background dark:bg-success-foreground p-4"
       >
         <div className="flex">
           <div className="flex-shrink-0">
             <CheckCircleIcon
-              className="h-5 w-5 text-medium-green dark:text-light-green"
+              className="h-5 w-5 text-status-green dark:text-success-background"
               aria-hidden="true"
             />
           </div>
           <div className="ml-3">
-            <p className="text-sm font-medium text-medium-dark-green dark:text-white/80">
+            <p className="text-sm font-medium text-success-foreground dark:text-background/80">
               {title}
             </p>
           </div>
diff --git a/src/frontend/src/components/CrashErrorComponent/index.tsx b/src/frontend/src/components/CrashErrorComponent/index.tsx
index c498e590a..760a1745a 100644
--- a/src/frontend/src/components/CrashErrorComponent/index.tsx
+++ b/src/frontend/src/components/CrashErrorComponent/index.tsx
@@ -1,11 +1,11 @@
 export default function CrashErrorComponent({ error, resetErrorBoundary }) {
   return (
-    <div className="fixed top-0 left-0 w-full h-full flex items-center justify-center bg-dark-gray bg-opacity-50 z-50">
-      <div className="bg-white max-w-4xl h-1/3 min-h-fit rounded-lg shadow-lg p-8 text-start flex flex-col justify-evenly">
-        <h1 className="text-medium-red text-3xl mb-4">
+    <div className="fixed top-0 left-0 w-full h-full flex items-center justify-center bg-foreground bg-opacity-50 z-50">
+      <div className="bg-background max-w-4xl h-1/3 min-h-fit rounded-lg shadow-lg p-8 text-start flex flex-col justify-evenly">
+        <h1 className="text-status-red text-3xl mb-4">
           Oops! An unknown error has occurred.
         </h1>
-        <p className="text-almost-dark-gray mb-4 text-xl">
+        <p className="text-foreground mb-4 text-xl">
           Please click the 'Reset Application' button to restore the
           application's state. If the error persists, please create an issue on
           our GitHub page. We apologize for any inconvenience this may have
@@ -14,7 +14,7 @@ export default function CrashErrorComponent({ error, resetErrorBoundary }) {
         <div className="flex justify-center">
           <button
             onClick={resetErrorBoundary}
-            className="bg-almost-dark-blue hover:bg-medium-dark-blue text-white font-bold py-2 px-4 rounded mr-4"
+            className="bg-almost-dark-blue hover:bg-ring text-background font-bold py-2 px-4 rounded mr-4"
           >
             Reset Application
           </button>
@@ -22,7 +22,7 @@ export default function CrashErrorComponent({ error, resetErrorBoundary }) {
             href="https://github.com/logspace-ai/langflow/issues/new"
             target="_blank"
             rel="noopener noreferrer"
-            className="bg-medium-red hover:bg-medium-dark-red text-white font-bold py-2 px-4 rounded"
+            className="bg-status-red hover:bg-error-foreground text-background font-bold py-2 px-4 rounded"
           >
             Create Issue
           </a>
diff --git a/src/frontend/src/components/EditFlowSettingsComponent/index.tsx b/src/frontend/src/components/EditFlowSettingsComponent/index.tsx
index c24546af4..7aa225056 100644
--- a/src/frontend/src/components/EditFlowSettingsComponent/index.tsx
+++ b/src/frontend/src/components/EditFlowSettingsComponent/index.tsx
@@ -47,7 +47,7 @@ export const EditFlowSettings: React.FC<InputProps> = ({
         <div className="flex justify-between">
           <span className="font-medium">Name</span>{" "}
           {isMaxLength && (
-            <span className="text-medium-red animate-pulse ml-10">
+            <span className="text-status-red animate-pulse ml-10">
               Character limit reached
             </span>
           )}
diff --git a/src/frontend/src/components/ExtraSidebarComponent/index.tsx b/src/frontend/src/components/ExtraSidebarComponent/index.tsx
index abf04c273..aa1b47c77 100644
--- a/src/frontend/src/components/ExtraSidebarComponent/index.tsx
+++ b/src/frontend/src/components/ExtraSidebarComponent/index.tsx
@@ -19,9 +19,9 @@ export default function ExtraSidebar() {
       <aside
         className={` ${
           isStackedOpen ? "w-52" : "w-0 "
-        } flex-shrink-0 flex overflow-hidden flex-col border-r dark:border-r-almost-dark-gray transition-all duration-500`}
+        } flex-shrink-0 flex overflow-hidden flex-col border-r dark:border-r-foreground transition-all duration-500`}
       >
-        <div className="w-52 dark:bg-dark-gray border dark:border-almost-dark-gray  overflow-y-auto scrollbar-hide h-full flex flex-col items-start bg-white">
+        <div className="w-52 dark:bg-foreground border dark:border-foreground  overflow-y-auto scrollbar-hide h-full flex flex-col items-start bg-background">
           <div className="flex flex-grow flex-col w-full">
             {extraNavigation.options ? (
               <div className="p-4">
@@ -33,16 +33,16 @@ export default function ExtraSidebar() {
                           to={item.href}
                           className={classNames(
                             item.href.split("/")[2] === current[4]
-                              ? "bg-muted text-high-dark-gray"
-                              : "bg-white text-medium-dark-gray hover:bg-muted hover:text-high-dark-gray",
+                              ? "bg-muted text-foreground"
+                              : "bg-background text-muted-foreground hover:bg-muted hover:text-foreground",
                             "group w-full flex items-center pl-2 py-2 text-sm font-medium rounded-md"
                           )}
                         >
                           <item.icon
                             className={classNames(
                               item.href.split("/")[2] === current[4]
-                                ? "text-medium-gray"
-                                : "text-almost-medium-gray group-hover:text-medium-gray",
+                                ? "text-ring"
+                                : "text-ring group-hover:text-ring",
                               "mr-3 flex-shrink-0 h-6 w-6"
                             )}
                           />
@@ -60,22 +60,22 @@ export default function ExtraSidebar() {
                             <Disclosure.Button
                               className={classNames(
                                 item.href.split("/")[2] === current[4]
-                                  ? "bg-muted text-high-dark-gray"
-                                  : "bg-white text-medium-dark-gray hover:bg-muted hover:text-high-dark-gray",
-                                "group w-full flex items-center pl-2 pr-1 py-2 text-left text-sm font-medium rounded-md focus:outline-none focus:ring-1 focus:ring-medium-indigo"
+                                  ? "bg-muted text-foreground"
+                                  : "bg-background text-muted-foreground hover:bg-muted hover:text-foreground",
+                                "group w-full flex items-center pl-2 pr-1 py-2 text-left text-sm font-medium rounded-md focus:outline-none focus:ring-1 focus:ring-ring"
                               )}
                             >
                               <item.icon
-                                className="mr-3 h-6 w-6 flex-shrink-0 text-almost-medium-gray group-hover:text-medium-gray"
+                                className="mr-3 h-6 w-6 flex-shrink-0 text-ring group-hover:text-ring"
                                 aria-hidden="true"
                               />
                               <span className="flex-1">{item.name}</span>
                               <svg
                                 className={classNames(
                                   open
-                                    ? "text-almost-medium-gray rotate-90"
-                                    : "text-medium-low-gray",
-                                  "ml-3 h-5 w-5 flex-shrink-0 transition-rotate duration-150 ease-in-out group-hover:text-almost-medium-gray"
+                                    ? "text-ring rotate-90"
+                                    : "text-ring",
+                                  "ml-3 h-5 w-5 flex-shrink-0 transition-rotate duration-150 ease-in-out group-hover:text-ring"
                                 )}
                                 viewBox="0 0 20 20"
                                 aria-hidden="true"
@@ -93,8 +93,8 @@ export default function ExtraSidebar() {
                                   to={subItem.href}
                                   className={classNames(
                                     subItem.href.split("/")[3] === current[5]
-                                      ? "bg-muted text-high-dark-gray"
-                                      : "bg-white text-medium-dark-gray hover:bg-muted hover:text-high-dark-gray",
+                                      ? "bg-muted text-foreground"
+                                      : "bg-background text-muted-foreground hover:bg-muted hover:text-foreground",
                                     "group flex w-full items-center rounded-md py-2 pl-11 pr-2 text-sm font-medium"
                                   )}
                                 >
diff --git a/src/frontend/src/components/ReactTooltipComponent/index.tsx b/src/frontend/src/components/ReactTooltipComponent/index.tsx
index 2ecfd1af9..3686badd3 100644
--- a/src/frontend/src/components/ReactTooltipComponent/index.tsx
+++ b/src/frontend/src/components/ReactTooltipComponent/index.tsx
@@ -37,7 +37,7 @@ const TooltipReact: FC<TooltipProps> = ({
         id={selector}
         content={content}
         className={classNames(
-          "!bg-white !text-xs !font-normal !text-almost-dark-gray !shadow-md !opacity-100 z-[9999]",
+          "!bg-white !text-xs !font-normal !text-foreground !shadow-md !opacity-100 z-[9999]",
           className
         )}
         place={position}
diff --git a/src/frontend/src/components/chatComponent/buildTrigger/index.tsx b/src/frontend/src/components/chatComponent/buildTrigger/index.tsx
index 4ea9cb162..f092074c2 100644
--- a/src/frontend/src/components/chatComponent/buildTrigger/index.tsx
+++ b/src/frontend/src/components/chatComponent/buildTrigger/index.tsx
@@ -143,7 +143,7 @@ export default function BuildTrigger({
         >
           <div
             className="flex justify-center align-center py-1 px-3 w-12 h-12 rounded-full shadow-md hover:shadow-sm shadow-btn-shadow hover:shadow-btn-shadow
-            bg-buildBackground dark:border-medium-dark-gray cursor-pointer"
+            bg-buildBackground dark:border-muted-foreground cursor-pointer"
             onClick={() => {
               handleBuild(flow);
             }}
diff --git a/src/frontend/src/components/chatComponent/chatMessage/index.tsx b/src/frontend/src/components/chatComponent/chatMessage/index.tsx
index 6bca7e58e..f0120da19 100644
--- a/src/frontend/src/components/chatComponent/chatMessage/index.tsx
+++ b/src/frontend/src/components/chatComponent/chatMessage/index.tsx
@@ -17,7 +17,7 @@ export default function ChatMessage({ chat }: { chat: ChatMessageType }) {
         <div className="w-full text-start">
           <div
             style={{ backgroundColor: nodeColors["chat"] }}
-            className=" relative text-start inline-block text-white rounded-xl overflow-hidden w-fit max-w-[280px] text-sm font-normal rounded-tl-none"
+            className=" relative text-start inline-block text-background rounded-xl overflow-hidden w-fit max-w-[280px] text-sm font-normal rounded-tl-none"
           >
             {hidden && chat.thought && chat.thought !== "" && (
               <div
@@ -48,7 +48,7 @@ export default function ChatMessage({ chat }: { chat: ChatMessageType }) {
         </div>
       ) : (
         <div className="w-full text-end">
-          <div className="text-start inline-block rounded-xl p-3 overflow-hidden w-fit max-w-[280px] px-5 text-sm text-black dark:text-white dark:bg-almost-dark-gray bg-light-gray font-normal rounded-tr-none">
+          <div className="text-start inline-block rounded-xl p-3 overflow-hidden w-fit max-w-[280px] px-5 text-sm text-black dark:text-background dark:bg-foreground bg-input font-normal rounded-tr-none">
             {chat.message}
           </div>
         </div>
diff --git a/src/frontend/src/components/chatComponent/chatTrigger/index.tsx b/src/frontend/src/components/chatComponent/chatTrigger/index.tsx
index 3e2b7bc73..d05e08769 100644
--- a/src/frontend/src/components/chatComponent/chatTrigger/index.tsx
+++ b/src/frontend/src/components/chatComponent/chatTrigger/index.tsx
@@ -36,7 +36,7 @@ export default function ChatTrigger({ open, setOpen, isBuilt }) {
           side="left"
         >
           <div
-            className="border flex justify-center items-center py-1 px-3 w-12 h-12 rounded-full bg-almost-dark-blue dark:border-medium-dark-gray cursor-pointer"
+            className="border flex justify-center items-center py-1 px-3 w-12 h-12 rounded-full bg-almost-dark-blue dark:border-muted-foreground cursor-pointer"
             onClick={handleClick}
           >
             <button>
diff --git a/src/frontend/src/components/codeAreaComponent/index.tsx b/src/frontend/src/components/codeAreaComponent/index.tsx
index f23a2bd9d..6b12731db 100644
--- a/src/frontend/src/components/codeAreaComponent/index.tsx
+++ b/src/frontend/src/components/codeAreaComponent/index.tsx
@@ -46,11 +46,11 @@ export default function CodeAreaComponent({
           }}
           className={
             editNode
-              ? "truncate cursor-pointer placeholder:text-center text-medium-gray block w-full pt-0.5 pb-0.5 form-input dark:bg-high-dark-gray dark:medium-low-gray dark:border-medium-dark-gray rounded-md border-medium-low-gray border-1 shadow-sm sm:text-sm" +
+              ? "truncate cursor-pointer placeholder:text-center text-ring block w-full pt-0.5 pb-0.5 form-input dark:bg-foreground dark:medium-low-gray dark:border-muted-foreground rounded-md border-ring border-1 shadow-sm sm:text-sm" +
                 INPUT_STYLE
-              : "truncate block w-full text-medium-gray px-3 py-2 rounded-md border border-medium-low-gray dark:border-almost-dark-gray shadow-sm sm:text-sm" +
+              : "truncate block w-full text-ring px-3 py-2 rounded-md border border-ring dark:border-foreground shadow-sm sm:text-sm" +
                 INPUT_STYLE +
-                (disabled ? " bg-light-gray" : "")
+                (disabled ? " bg-input" : "")
           }
         >
           {myValue !== "" ? myValue : "Type something..."}
diff --git a/src/frontend/src/components/dropdownComponent/index.tsx b/src/frontend/src/components/dropdownComponent/index.tsx
index aa7645e96..e422ba861 100644
--- a/src/frontend/src/components/dropdownComponent/index.tsx
+++ b/src/frontend/src/components/dropdownComponent/index.tsx
@@ -31,9 +31,9 @@ export default function Dropdown({
               <Listbox.Button
                 className={
                   editNode
-                    ? "relative pr-8 placeholder:text-center block w-full pt-0.5 pb-0.5 form-input dark:bg-high-dark-gray dark:text-medium-low-gray dark:border-medium-dark-gray rounded-md shadow-sm sm:text-sm border-medium-low-gray border-1" +
+                    ? "relative pr-8 placeholder:text-center block w-full pt-0.5 pb-0.5 form-input dark:bg-foreground dark:text-medium-low-gray dark:border-muted-foreground rounded-md shadow-sm sm:text-sm border-ring border-1" +
                       INPUT_STYLE
-                    : "ring-1 ring-light-slate dark:ring-medium-slate w-full py-2 pl-3 pr-10 text-left dark:focus:ring-offset-2 dark:focus:ring-offset-high-dark-gray dark:focus:ring-1 dark:focus:ring-medium-dark-gray dark:focus-visible:ring-high-dark-gray dark:focus-visible:ring-offset-2 focus-visible:outline-none dark:bg-high-dark-gray dark:text-medium-low-gray dark:border-medium-dark-gray rounded-md border-medium-low-gray shadow-sm sm:text-sm" +
+                      : "ring-1 ring-ring w-full py-2 pl-3 pr-10 text-left dark:focus:ring-offset-2 dark:focus:ring-offset-foreground dark:focus:ring-1 dark:focus:ring-muted-foreground dark:focus-visible:ring-foreground dark:focus-visible:ring-offset-2 focus-visible:outline-none dark:bg-foreground dark:text-medium-low-gray dark:border-muted-foreground rounded-md border-ring shadow-sm sm:text-sm" +
                       INPUT_STYLE
                 }
               >
@@ -44,7 +44,7 @@ export default function Dropdown({
                   }
                 >
                   <ChevronUpDownIcon
-                    className="h-5 w-5 text-almost-medium-gray"
+                    className="h-5 w-5 text-ring"
                     aria-hidden="true"
                   />
                 </span>
@@ -60,8 +60,8 @@ export default function Dropdown({
                 <Listbox.Options
                   className={
                     editNode
-                      ? "absolute z-10 mt-1 max-h-60 overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm w-[215px]"
-                      : "nowheel absolute z-10 mt-1 max-h-60 w-full overflow-auto overflow-y rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm "
+                      ? "absolute z-10 mt-1 max-h-60 overflow-auto rounded-md bg-background py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm w-[215px]"
+                      : "nowheel absolute z-10 mt-1 max-h-60 w-full overflow-auto overflow-y rounded-md bg-background py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm "
                   }
                 >
                   {options.map((option, id) => (
@@ -70,11 +70,11 @@ export default function Dropdown({
                       className={({ active }) =>
                         classNames(
                           active
-                            ? " bg-accent dark:bg-white dark:text-medium-gray"
+                            ? " bg-accent dark:bg-background dark:text-ring"
                             : "",
                           editNode
-                            ? "relative cursor-default select-none py-0.5 pl-3 pr-12 dark:text-medium-low-gray dark:bg-dark-gray"
-                            : "relative cursor-default select-none py-2 pl-3 pr-9 dark:text-medium-low-gray dark:bg-dark-gray"
+                            ? "relative cursor-default select-none py-0.5 pl-3 pr-12 dark:text-medium-low-gray dark:bg-foreground"
+                            : "relative cursor-default select-none py-2 pl-3 pr-9 dark:text-medium-low-gray dark:bg-foreground"
                         )
                       }
                       value={option}
@@ -93,7 +93,7 @@ export default function Dropdown({
                           {selected ? (
                             <span
                               className={classNames(
-                                active ? "text-white dark:text-black" : "",
+                                active ? "text-background dark:text-black" : "",
                                 "absolute inset-y-0 right-0 flex items-center pr-4"
                               )}
                             >
@@ -101,7 +101,7 @@ export default function Dropdown({
                                 className={
                                   active
                                     ? "h-5 w-5 dark:text-black text-black"
-                                    : "h-5 w-5 dark:text-white text-black"
+                                    : "h-5 w-5 dark:text-background text-black"
                                 }
                                 aria-hidden="true"
                               />
diff --git a/src/frontend/src/components/floatComponent/index.tsx b/src/frontend/src/components/floatComponent/index.tsx
index 286662351..bf723f2d2 100644
--- a/src/frontend/src/components/floatComponent/index.tsx
+++ b/src/frontend/src/components/floatComponent/index.tsx
@@ -56,11 +56,11 @@ export default function FloatComponent({
         value={myValue}
         className={
           editNode
-            ? "focus:placeholder-transparent text-center placeholder:text-center border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-high-dark-gray dark:text-medium-low-gray dark:border-medium-dark-gray rounded-md border-medium-low-gray shadow-sm sm:text-sm" +
+            ? "focus:placeholder-transparent text-center placeholder:text-center border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-foreground dark:text-medium-low-gray dark:border-muted-foreground rounded-md border-ring shadow-sm sm:text-sm" +
               INPUT_STYLE
-            : "focus:placeholder-transparent block w-full form-input dark:bg-high-dark-gray dark:text-medium-low-gray dark:border-medium-dark-gray rounded-md border-medium-low-gray shadow-sm ring-offset-light-gray sm:text-sm" +
+            : "focus:placeholder-transparent block w-full form-input dark:bg-foreground dark:text-medium-low-gray dark:border-muted-foreground rounded-md border-ring shadow-sm ring-offset-input sm:text-sm" +
               INPUT_STYLE +
-              (disabled ? " bg-light-gray dark:bg-almost-dark-gray" : "")
+              (disabled ? " bg-input dark:bg-foreground" : "")
         }
         placeholder={
           editNode ? "Number 0 to 1" : "Type a number from zero to one"
diff --git a/src/frontend/src/components/headerComponent/index.tsx b/src/frontend/src/components/headerComponent/index.tsx
index 3d955a0e4..3b0700a21 100644
--- a/src/frontend/src/components/headerComponent/index.tsx
+++ b/src/frontend/src/components/headerComponent/index.tsx
@@ -60,7 +60,7 @@ export default function Header() {
           <Button
             asChild
             variant="outline"
-            className="text-medium-dark-gray dark:text-medium-low-gray "
+            className="text-muted-foreground dark:text-medium-low-gray "
           >
             <a
               href="https://github.com/logspace-ai/langflow"
@@ -85,7 +85,7 @@ export default function Header() {
             )}
           </button> */}
           <button
-            className="text-medium-dark-gray hover:text-medium-gray dark:text-medium-low-gray dark:hover:text-light-gray relative"
+            className="text-muted-foreground hover:text-ring dark:text-medium-low-gray dark:hover:text-light-gray relative"
             onClick={(event: React.MouseEvent<HTMLElement>) => {
               setNotificationCenter(false);
               const { top, left } = (
diff --git a/src/frontend/src/components/inputComponent/index.tsx b/src/frontend/src/components/inputComponent/index.tsx
index 5e449d7e5..d9209479e 100644
--- a/src/frontend/src/components/inputComponent/index.tsx
+++ b/src/frontend/src/components/inputComponent/index.tsx
@@ -46,13 +46,13 @@ export default function InputComponent({
           if (disableCopyPaste) setDisableCopyPaste(false);
         }}
         className={classNames(
-          "block w-full pr-12 form-input dark:bg-high-dark-gray dark:text-medium-low-gray dark:border-medium-dark-gray rounded-md border-medium-low-gray shadow-sm sm:text-sm focus:placeholder-transparent",
-          disabled ? " bg-light-gray dark:bg-almost-dark-gray" : "",
+          "block w-full pr-12 form-input dark:bg-foreground dark:text-medium-low-gray dark:border-muted-foreground rounded-md border-ring shadow-sm sm:text-sm focus:placeholder-transparent",
+          disabled ? " bg-input dark:bg-foreground" : "",
           password && !pwdVisible && myValue !== "" ? "password" : "",
           editNode
-            ? "border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-high-dark-gray dark:text-medium-low-gray dark:border-medium-dark-gray rounded-md border-medium-low-gray shadow-sm sm:text-sm text-center" +
+            ? "border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-foreground dark:text-medium-low-gray dark:border-muted-foreground rounded-md border-ring shadow-sm sm:text-sm text-center" +
                 INPUT_STYLE
-            : "ring-offset-light-gray" + INPUT_STYLE,
+            : "ring-offset-input" + INPUT_STYLE,
           password && editNode ? "pr-8" : "pr-3"
         )}
         placeholder={password && editNode ? "Key" : "Type something..."}
@@ -65,8 +65,8 @@ export default function InputComponent({
         <button
           className={classNames(
             editNode
-              ? "absolute inset-y-0 right-0 pr-2 items-center text-medium-dark-gray"
-              : "absolute inset-y-0 right-0 items-center px-4 text-medium-dark-gray"
+              ? "absolute inset-y-0 right-0 pr-2 items-center text-muted-foreground"
+              : "absolute inset-y-0 right-0 items-center px-4 text-muted-foreground"
           )}
           onClick={() => {
             setPwdVisible(!pwdVisible);
diff --git a/src/frontend/src/components/inputFileComponent/index.tsx b/src/frontend/src/components/inputFileComponent/index.tsx
index 6fb2874bc..6c797ea52 100644
--- a/src/frontend/src/components/inputFileComponent/index.tsx
+++ b/src/frontend/src/components/inputFileComponent/index.tsx
@@ -78,11 +78,11 @@ export default function InputFileComponent({
           onClick={handleButtonClick}
           className={
             editNode
-              ? "truncate placeholder:text-center text-medium-gray block w-full pt-0.5 pb-0.5 form-input dark:bg-high-dark-gray dark:text-medium-low-gray dark:border-medium-dark-gray rounded-md border-medium-low-gray shadow-sm sm:text-sm border-1" +
+              ? "truncate placeholder:text-center text-ring block w-full pt-0.5 pb-0.5 form-input dark:bg-foreground dark:text-medium-low-gray dark:border-muted-foreground rounded-md border-ring shadow-sm sm:text-sm border-1" +
                 INPUT_STYLE
-              : "truncate block w-full text-medium-gray dark:text-medium-low-gray px-3 py-2 rounded-md border border-medium-low-gray dark:border-almost-dark-gray shadow-sm sm:text-sm" +
+              : "truncate block w-full text-ring dark:text-medium-low-gray px-3 py-2 rounded-md border border-ring dark:border-foreground shadow-sm sm:text-sm" +
                 INPUT_STYLE +
-                (disabled ? " bg-light-gray" : "")
+                (disabled ? " bg-input" : "")
           }
         >
           {myValue !== "" ? myValue : "No file"}
diff --git a/src/frontend/src/components/inputListComponent/index.tsx b/src/frontend/src/components/inputListComponent/index.tsx
index 2fbf98891..366461b07 100644
--- a/src/frontend/src/components/inputListComponent/index.tsx
+++ b/src/frontend/src/components/inputListComponent/index.tsx
@@ -32,10 +32,10 @@ export default function InputListComponent({
             value={i}
             className={
               editNode
-                ? "border-[1px]  truncate cursor-pointer text-center placeholder:text-center text-medium-gray block w-full pt-0.5 pb-0.5 form-input dark:bg-high-dark-gray dark:text-medium-low-gray dark:border-medium-dark-gray rounded-md border-medium-low-gray shadow-sm sm:text-sm" +
+                ? "border-[1px]  truncate cursor-pointer text-center placeholder:text-center text-ring block w-full pt-0.5 pb-0.5 form-input dark:bg-foreground dark:text-medium-low-gray dark:border-muted-foreground rounded-md border-ring shadow-sm sm:text-sm" +
                   INPUT_STYLE
-                : "block w-full form-input rounded-md border-medium-low-gray shadow-sm focus:border-medium-gray focus:ring-medium-gray sm:text-sm" +
-                  (disabled ? " bg-light-gray" : "") +
+                : "block w-full form-input rounded-md border-ring shadow-sm focus:border-ring focus:ring-ring sm:text-sm" +
+                  (disabled ? " bg-input" : "") +
                   "focus:placeholder-transparent"
             }
             placeholder="Type something..."
@@ -72,7 +72,7 @@ export default function InputListComponent({
                 onChange(inputList);
               }}
             >
-              <XMarkIcon className="w-4 h-4 hover:text-almost-medium-red" />
+              <XMarkIcon className="w-4 h-4 hover:text-destructive" />
             </button>
           )}
         </div>
diff --git a/src/frontend/src/components/intComponent/index.tsx b/src/frontend/src/components/intComponent/index.tsx
index d6a88044d..82f8c7f19 100644
--- a/src/frontend/src/components/intComponent/index.tsx
+++ b/src/frontend/src/components/intComponent/index.tsx
@@ -70,11 +70,11 @@ export default function IntComponent({
         value={myValue}
         className={
           editNode
-            ? "focus:placeholder-transparent text-center placeholder:text-center border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-high-dark-gray dark:text-medium-low-gray dark:border-medium-dark-gray rounded-md border-medium-low-gray shadow-sm sm:text-sm" +
+            ? "focus:placeholder-transparent text-center placeholder:text-center border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-foreground dark:text-medium-low-gray dark:border-muted-foreground rounded-md border-ring shadow-sm sm:text-sm" +
               INPUT_STYLE
-            : "focus:placeholder-transparent block w-full form-input dark:bg-high-dark-gray dark:border-medium-dark-gray dark:text-medium-low-gray rounded-md border-medium-low-gray shadow-sm ring-offset-background sm:text-sm" +
+            : "focus:placeholder-transparent block w-full form-input dark:bg-foreground dark:border-muted-foreground dark:text-medium-low-gray rounded-md border-ring shadow-sm ring-offset-background sm:text-sm" +
               INPUT_STYLE +
-              (disabled ? " bg-light-gray dark:bg-almost-dark-gray" : "")
+              (disabled ? " bg-input dark:bg-foreground" : "")
         }
         placeholder={editNode ? "Integer number" : "Type a integer number"}
         onChange={(e) => {
diff --git a/src/frontend/src/components/loadingComponent/index.tsx b/src/frontend/src/components/loadingComponent/index.tsx
index 3639c8fb2..75da40b0c 100644
--- a/src/frontend/src/components/loadingComponent/index.tsx
+++ b/src/frontend/src/components/loadingComponent/index.tsx
@@ -7,7 +7,7 @@ export default function LoadingComponent({ remSize }: LoadingComponentProps) {
     <div role="status" className="w-min m-auto">
       <svg
         aria-hidden="true"
-        className={`w-${remSize} h-${remSize} mr-2 text-muted animate-spin dark:text-medium-dark-gray fill-almost-medium-blue`}
+        className={`w-${remSize} h-${remSize} mr-2 text-muted animate-spin dark:text-muted-foreground fill-almost-medium-blue`}
         viewBox="0 0 100 101"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
diff --git a/src/frontend/src/components/promptComponent/index.tsx b/src/frontend/src/components/promptComponent/index.tsx
index ae8b826ac..e2daec330 100644
--- a/src/frontend/src/components/promptComponent/index.tsx
+++ b/src/frontend/src/components/promptComponent/index.tsx
@@ -49,10 +49,10 @@ export default function PromptAreaComponent({
           }}
           className={
             editNode
-              ? "cursor-pointer truncate placeholder:text-center text-medium-gray border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-high-dark-gray dark:text-medium-low-gray dark:border-medium-dark-gray rounded-md border-medium-low-gray shadow-sm sm:text-sm" +
+              ? "cursor-pointer truncate placeholder:text-center text-ring border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-foreground dark:text-medium-low-gray dark:border-muted-foreground rounded-md border-ring shadow-sm sm:text-sm" +
                 INPUT_STYLE
-              : "truncate block w-full text-medium-gray px-3 py-2 rounded-md border border-medium-low-gray dark:border-almost-dark-gray shadow-sm sm:text-sm" +
-                (disabled ? " bg-light-gray" : "")
+              : "truncate block w-full text-ring px-3 py-2 rounded-md border border-ring dark:border-foreground shadow-sm sm:text-sm" +
+                (disabled ? " bg-input" : "")
           }
         >
           {myValue !== "" ? myValue : "Type your prompt here"}
diff --git a/src/frontend/src/components/textAreaComponent/index.tsx b/src/frontend/src/components/textAreaComponent/index.tsx
index ea2247bd2..959348877 100644
--- a/src/frontend/src/components/textAreaComponent/index.tsx
+++ b/src/frontend/src/components/textAreaComponent/index.tsx
@@ -51,10 +51,10 @@ export default function TextAreaComponent({
           }}
           className={
             editNode
-              ? "truncate cursor-pointer placeholder:text-center text-medium-gray border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-high-dark-gray dark:text-medium-low-gray dark:border-medium-dark-gray rounded-md border-medium-low-gray shadow-sm sm:text-sm" +
+              ? "truncate cursor-pointer placeholder:text-center text-ring border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-foreground dark:text-medium-low-gray dark:border-muted-foreground rounded-md border-ring shadow-sm sm:text-sm" +
                 INPUT_STYLE
-              : "truncate block w-full text-medium-gray dark:text-muted px-3 py-2 rounded-md border border-medium-low-gray dark:border-almost-dark-gray shadow-sm sm:text-sm" +
-                (disabled ? " bg-light-gray" : "")
+              : "truncate block w-full text-ring dark:text-muted px-3 py-2 rounded-md border border-ring dark:border-foreground shadow-sm sm:text-sm" +
+                (disabled ? " bg-input" : "")
           }
         >
           {myValue !== "" ? myValue : "Type something..."}
diff --git a/src/frontend/src/components/toggleComponent/index.tsx b/src/frontend/src/components/toggleComponent/index.tsx
index 497cf70f0..fd47e8c1e 100644
--- a/src/frontend/src/components/toggleComponent/index.tsx
+++ b/src/frontend/src/components/toggleComponent/index.tsx
@@ -21,7 +21,7 @@ export default function ToggleComponent({
           setEnabled(x);
         }}
         className={classNames(
-          enabled ? "bg-primary" : "bg-light-gray",
+          enabled ? "bg-primary" : "bg-input",
           "relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-1 focus:ring-primary focus:ring-offset-1"
         )}
       >
@@ -31,8 +31,8 @@ export default function ToggleComponent({
             enabled ? "translate-x-5" : "translate-x-0",
             "pointer-events-none relative inline-block h-5 w-5 transform rounded-full  shadow ring-0 transition duration-200 ease-in-out",
             disabled
-              ? "bg-light-gray dark:bg-medium-dark-gray"
-              : "bg-white dark:bg-dark-gray"
+              ? "bg-input dark:bg-muted-foreground"
+              : "bg-background dark:bg-foreground"
           )}
         >
           <span
diff --git a/src/frontend/src/components/ui/rename-label.tsx b/src/frontend/src/components/ui/rename-label.tsx
index ea4bd4788..dc10fd466 100644
--- a/src/frontend/src/components/ui/rename-label.tsx
+++ b/src/frontend/src/components/ui/rename-label.tsx
@@ -57,7 +57,7 @@ export default function RenameLabel(props) {
           ref={inputRef}
           onInput={resizeInput}
           className={cn(
-            "px-2 bg-transparent focus:border-none active:outline hover:outline focus:outline outline-medium-low-gray rounded-md",
+            "px-2 bg-transparent focus:border-none active:outline hover:outline focus:outline outline-ring rounded-md",
             props.className
           )}
           onBlur={() => {
diff --git a/src/frontend/src/index.css b/src/frontend/src/index.css
index 891ea1767..a68cf5024 100644
--- a/src/frontend/src/index.css
+++ b/src/frontend/src/index.css
@@ -3,92 +3,72 @@
 @tailwind utilities;
 
 @layer base {
-	:root {
+  :root {
 	  --background: 0 0% 100%; /* hsl(0 0% 100%) */
 	  --foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
-
+    
 	  --muted: 210 40% 96.1%; /* hsl(210 40% 96%) */
 	  --muted-foreground: 215.4 16.3% 46.9%; /* hsl(215 16% 46%) */
-
+    
 	  --popover: 0 0% 100%; /* hsl(0 0% 100%) */
 	  --popover-foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
 
 	  --card: 0 0% 100%; /* hsl(0 0% 100%) */
 	  --card-foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
-
+    
 	  --border: 214.3 31.8% 91.4%; /* hsl(214 32% 91%) */
 	  --input: 214.3 31.8% 91.4%; /* hsl(214 32% 91%) */
-
+    
 	  --primary: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
 	  --primary-foreground: 210 40% 98%; /* hsl(210 40% 98%) */
-
+    
 	  --secondary: 210 40% 96.1%; /* hsl(210 40% 96%) */
 	  --secondary-foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
-
+    
 	  --accent: 210 40% 96.1%; /* hsl(210 40% 96%) */
 	  --accent-foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
-
+    
 	  --destructive: 0 100% 50%; /* hsl(0 100% 50%) */
 	  --destructive-foreground: 210 40% 98%; /* hsl(210 40% 98%) */
-
+    
+    
 	  --ring: 215 20.2% 65.1%; /* hsl(215 20% 65%) */
-
+    
     --radius: 0.5rem;
-
-    --build: 11, 65% 61%; /* hsl(11, 65%, 61%) */
-
+    
+    
     --build-background: #E2E7EE; /* hsl(215, 26%, 91%) */
-
+    
     --round-btn-shadow: #00000063;
-
+    
     --hover-btn-background: #242f47;
+    
+    --build-trigger: 	#dc735b; /* hsl(11, 65%, 61%) */
+    --chat-trigger: #dbeafe; /* tailwind blue 100 USED IN CHAT BACKGROUND */
 
-    --light-gray: #e5e7eb; /* tailwind gray 200 */
-    --medium-low-gray: #d1d5db; /* tailwind gray 300 */
-    --almost-medium-gray: #9ca3af; /* tailwind gray 400 */
-    --medium-gray: #6b7280; /* tailwind gray 500 */
-    --medium-dark-gray: #4b5563; /* tailwind gray 600 */
-    --almost-dark-gray: #374151; /* tailwind gray 700 */
-    --dark-gray: #1f2937; /* tailwind gray 800 */
-    --high-dark-gray: #111827; /* tailwind gray 900 */
-    --high-light-gray: #f9fafb; /* tailwind gray 50 */
+    --error-background: #fef2f2; /* tailwind red 50 USED IN START ERROR MESSAGE BG light-red */
+    --error-foreground: #991b1b; /* tailwind red 800 USED IN START ERROR MESSAGE TEXT almost-dark-red */
 
-    --medium-red: #ef4444; /* tailwind red 500 */
-    --almost-medium-red: #dc2626; /* tailwind red 600 */
-    --light-red: #fef2f2; /* tailwind red 50 */
-    --dark-red: #7f1d1d; /* tailwind red 900 */
-    --medium-light-red: #f87171; /* tailwind red 400 */
-    --almost-dark-red: #991b1b; /* tailwind red 800 */
-    --medium-dark-red: #b91c1c; /* tailwind red 700 */
+    --status-red: #ef4444; /* tailwind red 500 medium-red*/
+    --status-yellow: #eab308; /* tailwind yellow 500 medium-yellow*/
+    --status-green: #4ade80; /* tailwind green 400 medium-green*/
 
-    --light-blue: #eff6ff; /* tailwind blue 50 */
-    --almost-light-blue: #dbeafe;  /* tailwind blue 100 */
-    --dark-blue: #1e3a8a; /* tailwind blue 900 */
-    --medium-blue: #60a5fa; /* tailwind blue 400 */
-    --medium-dark-blue: #1d4ed8; /* tailwind blue 700 */
-    --almost-dark-blue: #3b82f6; /* tailwind blue 500 */
-    --medium-light-blue: #dbeafe; /* tailwind blue 100 */
-    --almost-medium-blue: #2563eb; /* tailwind blue 600 */
+    --success-background: #f0fdf4; /* tailwind green 50 USED IN SUCCESS MSG light-green*/ 
+    --success-foreground: #14532d; /* tailwind green 900 USED IN SUCCESS MSG dark-green */
 
-    --light-green: #f0fdf4; /* tailwind green 50 */
-    --dark-green: #14532d; /* tailwind green 900 */
-    --medium-green: #4ade80; /* tailwind green 400 */
-    --medium-dark-green: #166534; /* tailwind green 800 */
-    --almost-medium-green: #22c55e; /* tailwind green 500 */
-
-    --light-slate: #cbd5e1; /* tailwind slate 300 */
-    --medium-slate: #475569; /* tailwind slate 600 */
-    --high-light-slate: #e2e8f0; /* tailwind slate 200 */
-
-    --medium-indigo: #6366f1; /* tailwind indigo 500 */
-    --medium-high-indigo: #4f46e5; /* tailwind indigo 600 */
-    --high-indigo: #4338ca; /* tailwind indigo 700 */
-
-    --medium-yellow: #eab308; /* tailwind yellow 500 */
-
-    --medium-emerald: #10b981; /* tailwind emerald 500 */
-
-    --white: #ffffff; /* tailwind white */
+    /* --high-indigo: #4338ca;  tailwind indigo 700 
+  --medium-indigo: #6366f1;  tailwind indigo 500 
+  --medium-dark-blue:#1d4ed8;  tailwind blue 700 Change in component (--ring)
+  --medium-high-indigo: #4f46e5;  tailwind indigo 600 
+  --medium-emerald: #10b981;  tailwind emerald 500 Unused
+  --medium-dark-green: #166534;  tailwind green 800 Unused
+  --almost-medium-green: #22c55e;  tailwind green 500 Unused
+  --light-slate: #cbd5e1;  tailwind slate 300 UNUSED
+  --light-blue: #eff6ff;  tailwind blue 50
+  --dark-blue: #1e3a8a;  tailwind blue 900
+  --medium-blue: #60a5fa;  tailwind blue 400
+  --almost-dark-blue:#3b82f6;  tailwind blue 500
+  --almost-light-blue: #dbeafe;   tailwind blue 100 */
   }
 
 	.dark {
@@ -146,50 +126,38 @@
   --accent-foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
   --destructive: 0 100% 50%; /* hsl(0 100% 50%) */
   --destructive-foreground: 210 40% 98%; /* hsl(210 40% 98%) */
-  --ring: 215 20.2% 65.1%; /* hsl(215 20% 65%) */
   --radius: 0.5rem;
-  --build-trigger: 	#dc735b; /* hsl(11, 65%, 61%) */
+  --ring: 215 20.2% 65.1%; /* hsl(215 20% 65%) */
   --build-background: #E2E7EE; /*	hsl(215, 26%, 91%) */
   --round-btn-shadow: #00000063;
   --hover-btn-background: #242f47;
-  --dark-gray: #1f2937; /* tailwind gray 800 */
-  --light-gray: #e5e7eb; /* tailwind gray 200 */
-  --high-dark-gray: #111827; /* tailwind gray 900 */
-  --medium-gray: #6b7280; /* tailwind gray 500 */
-  --medium-low-gray: #d1d5db; /* tailwind gray 300 */
-  --medium-dark-gray: #4b5563; /* tailwind gray 600 */
-  --almost-dark-gray: #374151; /* tailwind gray 700 */
-  --almost-medium-gray: #9ca3af; /* tailwind gray 400 */
-  --medium-red: #ef4444; /* tailwind red 500 */
-  --light-red: #fef2f2; /* tailwind red 50 */
-  --dark-red: #7f1d1d; /* tailwind red 900 */
-  --medium-light-red: #f87171; /* tailwind red 400 */
-  --almost-dark-red: #991b1b; /* tailwind red 800 */
-  --medium-dark-red: #b91c1c; /* tailwind red 700 */
-  --almost-medium-red: #dc2626; /* tailwind red 600 */
-  --light-blue: #eff6ff; /* tailwind blue 50 */
-  --dark-blue: #1e3a8a; /* tailwind blue 900 */
-  --medium-blue: #60a5fa; /* tailwind blue 400 */
-  --medium-dark-blue: #1d4ed8; /* tailwind blue 700 */
-  --almost-dark-blue: #3b82f6; /* tailwind blue 500 */
-  --medium-light-blue: #dbeafe; /* tailwind blue 100 */
-  --almost-medium-blue: #2563eb; /* tailwind blue 600 */
-  --almost-light-blue: #dbeafe;  /* tailwind blue 100 */
-  --light-green: #f0fdf4; /* tailwind green 50 */
-  --dark-green: #14532d; /* tailwind green 900 */
-  --medium-green: #4ade80; /* tailwind green 400 */
-  --medium-dark-green: #166534; /* tailwind green 800 */
-  --almost-medium-green: #22c55e; /* tailwind green 500 */
-  --light-slate: #cbd5e1; /* tailwind slate 300 */
-  --medium-slate: #475569; /* tailwind slate 600 */
-  --high-light-slate: #e2e8f0; /* tailwind slate 200 */
-  --medium-indigo: #6366f1; /* tailwind indigo 500 */
-  --medium-yellow: #eab308; /* tailwind yellow 500 */
-  --medium-emerald: #10b981; /* tailwind emerald 500 */
-  --medium-high-indigo: #4f46e5; /* tailwind indigo 600 */
-  --high-indigo: #4338ca; /* tailwind indigo 700 */
-  --high-light-gray: #f9fafb; /* tailwind gray 50 */
-  --white: #ffffff; /* tailwind white */
+
+  --build-trigger: 	#dc735b; /* hsl(11, 65%, 61%) */
+  --chat-trigger: #dbeafe; /* tailwind blue 100 USED IN CHAT BACKGROUND */
+
+  --error-background: #fef2f2; /* tailwind red 50 USED IN START ERROR MESSAGE BG light-red */
+  --error-foreground: #991b1b; /* tailwind red 800 USED IN START ERROR MESSAGE TEXT almost-dark-red */
+
+  --status-red: #ef4444; /* tailwind red 500 medium-red*/
+  --status-yellow: #eab308; /* tailwind yellow 500 medium-yellow*/
+  --status-green: #4ade80; /* tailwind green 400 medium-green*/
+
+  --success-background: #f0fdf4; /* tailwind green 50 USED IN SUCCESS MSG light-green*/ 
+  --success-foreground: #14532d; /* tailwind green 900 USED IN SUCCESS MSG dark-green */
+
+  /* --high-indigo: #4338ca;  tailwind indigo 700 
+  --medium-indigo: #6366f1;  tailwind indigo 500 
+  --medium-dark-blue:#1d4ed8;  tailwind blue 700 Change in component (--ring)
+  --medium-high-indigo: #4f46e5;  tailwind indigo 600 
+  --medium-emerald: #10b981;  tailwind emerald 500 Unused
+  --medium-dark-green: #166534;  tailwind green 800 Unused
+  --almost-medium-green: #22c55e;  tailwind green 500 Unused
+  --light-slate: #cbd5e1;  tailwind slate 300 UNUSED
+  --light-blue: #eff6ff;  tailwind blue 50
+  --dark-blue: #1e3a8a;  tailwind blue 900
+  --medium-blue: #60a5fa;  tailwind blue 400
+  --almost-dark-blue:#3b82f6;  tailwind blue 500
+  --almost-light-blue: #dbeafe;   tailwind blue 100 */
 }
 
 .dark {
diff --git a/src/frontend/src/modals/ApiModal/index.tsx b/src/frontend/src/modals/ApiModal/index.tsx
index 03d22ef84..09a92b7b1 100644
--- a/src/frontend/src/modals/ApiModal/index.tsx
+++ b/src/frontend/src/modals/ApiModal/index.tsx
@@ -89,7 +89,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
           <DialogTitle className="flex items-center">
             <span className="pr-2">Code</span>
             <CodeBracketSquareIcon
-              className="h-6 w-6 text-dark-gray pl-1 dark:text-white"
+              className="h-6 w-6 text-foreground pl-1 dark:text-background"
               aria-hidden="true"
             />
           </DialogTitle>
@@ -109,7 +109,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
             </TabsList>
             <div className="float-right">
               <button
-                className="flex gap-1.5 items-center rounded bg-none p-1 text-xs text-medium-gray dark:text-medium-low-gray"
+                className="flex gap-1.5 items-center rounded bg-none p-1 text-xs text-ring dark:text-medium-low-gray"
                 onClick={copyToClipboard}
               >
                 {isCopied ? <Check size={18} /> : <Clipboard size={15} />}
diff --git a/src/frontend/src/modals/EditNodeModal/index.tsx b/src/frontend/src/modals/EditNodeModal/index.tsx
index 1e2765b39..3c429ff02 100644
--- a/src/frontend/src/modals/EditNodeModal/index.tsx
+++ b/src/frontend/src/modals/EditNodeModal/index.tsx
@@ -90,10 +90,10 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
           <DialogDescription>
             {data.node?.description}
             <div className="flex pt-4">
-              <VariableIcon className="w-5 h-5 pe-1 text-almost-dark-gray stroke-2 dark:text-high-light-slate">
+              <VariableIcon className="w-5 h-5 pe-1 text-foreground stroke-2">
                 &nbsp;
               </VariableIcon>
-              <span className="text-sm font-semibold text-dark-gray dark:text-white">
+              <span className="text-sm font-semibold text-foreground dark:text-background">
                 Parameters
               </span>
             </div>
@@ -103,7 +103,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
         <div className="flex w-full max-h-[350px] h-fit">
           <div
             className={classNames(
-              "w-full rounded-lg bg-white dark:bg-dark-gray border-[1px] border-light-gray",
+              "w-full rounded-lg bg-background dark:bg-foreground border-[1px] border-input",
               nodeLength > limitScrollFieldsModal
                 ? "overflow-scroll overflow-x-hidden custom-scroll"
                 : "overflow-hidden"
@@ -112,7 +112,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
             {nodeLength > 0 && (
               <div className="flex flex-col gap-5 h-fit">
                 <Table className="table-fixed bg-muted outline-1">
-                  <TableHeader className="border-light-gray text-medium-gray text-xs font-medium h-10">
+                  <TableHeader className="border-input text-ring text-xs font-medium h-10">
                     <TableRow className="dark:border-b-muted">
                       <TableHead className="h-7 text-center">PARAM</TableHead>
                       <TableHead className="p-0 h-7 text-center">
@@ -137,12 +137,12 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
                       )
                       .map((n, i) => (
                         <TableRow key={i} className="h-10 dark:border-b-muted">
-                          <TableCell className="p-0 text-center text-high-dark-gray dark:text-medium-low-gray text-sm">
+                          <TableCell className="p-0 text-center text-foreground dark:text-medium-low-gray text-sm">
                             {data.node.template[n].name
                               ? data.node.template[n].name
                               : data.node.template[n].display_name}
                           </TableCell>
-                          <TableCell className="p-0 text-center text-high-dark-gray text-xs w-[300px] dark:text-medium-low-gray">
+                          <TableCell className="p-0 text-center text-foreground text-xs w-[300px] dark:text-medium-low-gray">
                             {data.node.template[n].type === "str" &&
                             !data.node.template[n].options ? (
                               <div className="mx-auto">
diff --git a/src/frontend/src/modals/NodeModal/components/ModalField/index.tsx b/src/frontend/src/modals/NodeModal/components/ModalField/index.tsx
index 19ff5cfdb..bc1838478 100644
--- a/src/frontend/src/modals/NodeModal/components/ModalField/index.tsx
+++ b/src/frontend/src/modals/NodeModal/components/ModalField/index.tsx
@@ -53,7 +53,7 @@ export default function ModalField({
       {display && (
         <div>
           <span className="mx-2 dark:text-medium-low-gray">{title}</span>
-          <span className="text-almost-medium-red">{required ? " *" : ""}</span>
+          <span className="text-destructive">{required ? " *" : ""}</span>
         </div>
       )}
 
diff --git a/src/frontend/src/modals/NodeModal/index.tsx b/src/frontend/src/modals/NodeModal/index.tsx
index 5d6d08040..9bc14a716 100644
--- a/src/frontend/src/modals/NodeModal/index.tsx
+++ b/src/frontend/src/modals/NodeModal/index.tsx
@@ -45,7 +45,7 @@ export default function NodeModal({ data }: { data: NodeDataType }) {
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-medium-gray dark:bg-medium-dark-gray dark:bg-opacity-75 bg-opacity-75 transition-opacity" />
+          <div className="fixed inset-0 bg-ring dark:bg-muted-foreground dark:bg-opacity-75 bg-opacity-75 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-10 overflow-y-auto">
@@ -59,11 +59,11 @@ export default function NodeModal({ data }: { data: NodeDataType }) {
               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-dark-gray text-left shadow-xl transition-all sm:my-8 w-[700px]">
+              <Dialog.Panel className="relative flex flex-col justify-between transform h-[600px] overflow-hidden rounded-lg bg-background dark:bg-foreground text-left shadow-xl transition-all sm:my-8 w-[700px]">
                 <div className=" z-50 absolute top-0 right-0 hidden pt-4 pr-4 sm:block">
                   <button
                     type="button"
-                    className="rounded-md text-almost-medium-gray hover:text-medium-gray"
+                    className="rounded-md text-ring hover:text-ring"
                     onClick={() => {
                       setModalOpen(false);
                     }}
@@ -84,17 +84,17 @@ export default function NodeModal({ data }: { data: NodeDataType }) {
                     <div className="mt-4 text-center sm:ml-4 sm:text-left">
                       <Dialog.Title
                         as="h3"
-                        className="text-lg font-medium dark:text-white leading-10 text-high-dark-gray"
+                        className="text-lg font-medium dark:text-background leading-10 text-foreground"
                       >
                         {data.type}
                       </Dialog.Title>
                     </div>
                   </div>
-                  <div className="h-full w-full bg-light-gray dark:bg-high-dark-gray p-4 gap-4 flex flex-row justify-center items-center">
+                  <div className="h-full w-full bg-input dark:bg-foreground p-4 gap-4 flex flex-row justify-center items-center">
                     <div className="flex w-full h-[445px]">
                       <div
                         className={classNames(
-                          "px-4 sm:p-4 w-full rounded-lg bg-white dark:bg-dark-gray shadow",
+                          "px-4 sm:p-4 w-full rounded-lg bg-background dark:bg-foreground shadow",
                           Object.keys(data.node.template).filter(
                             (t) =>
                               t.charAt(0) !== "_" &&
@@ -143,10 +143,10 @@ export default function NodeModal({ data }: { data: NodeDataType }) {
                       </div>
                     </div>
                   </div>
-                  <div className="bg-light-gray dark:bg-high-dark-gray w-full pb-3 flex flex-row-reverse px-4">
+                  <div className="bg-input dark:bg-foreground w-full pb-3 flex flex-row-reverse px-4">
                     <button
                       type="button"
-                      className="inline-flex w-full justify-center rounded-md border border-transparent bg-medium-high-indigo px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-high-indigo focus:outline-none focus:ring-1 focus:ring-medium-indigo focus:ring-offset-1 sm:ml-3 sm:w-auto sm:text-sm"
+                      className="inline-flex w-full justify-center rounded-md border border-transparent bg-red-500 px-4 py-2 text-base font-medium text-background shadow-sm hover:bg-ring focus:outline-none focus:ring-1 focus:ring-ring focus:ring-offset-1 sm:ml-3 sm:w-auto sm:text-sm"
                       onClick={() => {
                         setModalOpen(false);
                       }}
diff --git a/src/frontend/src/modals/chatModal/chatInput/index.tsx b/src/frontend/src/modals/chatModal/chatInput/index.tsx
index c5e9606f7..bdf963821 100644
--- a/src/frontend/src/modals/chatModal/chatInput/index.tsx
+++ b/src/frontend/src/modals/chatModal/chatInput/index.tsx
@@ -44,9 +44,9 @@ export default function ChatInput({
         }}
         className={classNames(
           lockChat
-            ? " bg-input text-black dark:bg-almost-dark-gray dark:text-medium-low-gray"
-            : "  bg-white-200 text-black dark:bg-high-dark-gray dark:text-medium-low-gray",
-          "form-input block w-full custom-scroll rounded-md border-medium-low-gray dark:border-medium-dark-gray pr-10 sm:text-sm" +
+            ? " bg-input text-black dark:bg-foreground dark:text-medium-low-gray"
+            : "  bg-background-200 text-black dark:bg-foreground dark:text-medium-low-gray",
+          "form-input block w-full custom-scroll rounded-md border-ring dark:border-muted-foreground pr-10 sm:text-sm" +
             INPUT_STYLE
         )}
         placeholder={"Send a message..."}
@@ -55,12 +55,12 @@ export default function ChatInput({
         <button disabled={lockChat} onClick={() => sendMessage()}>
           {lockChat ? (
             <LockClosedIcon
-              className="h-5 w-5 text-medium-gray  dark:hover:text-medium-low-gray animate-pulse"
+              className="h-5 w-5 text-ring  dark:hover:text-medium-low-gray animate-pulse"
               aria-hidden="true"
             />
           ) : (
             <PaperAirplaneIcon
-              className="h-5 w-5 text-medium-gray hover:text-medium-dark-gray dark:hover:text-medium-low-gray"
+              className="h-5 w-5 text-ring hover:text-muted-foreground dark:hover:text-medium-low-gray"
               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 851f5118a..9799d8ba0 100644
--- a/src/frontend/src/modals/chatModal/chatMessage/codeBlock/index.tsx
+++ b/src/frontend/src/modals/chatModal/chatMessage/codeBlock/index.tsx
@@ -49,18 +49,18 @@ export const CodeBlock: FC<Props> = memo(({ language, value }) => {
   return (
     <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>
+        <span className="text-xs lowercase text-background">{language}</span>
 
         <div className="flex items-center">
           <button
-            className="flex gap-1.5 items-center rounded bg-none p-1 text-xs text-white"
+            className="flex gap-1.5 items-center rounded bg-none p-1 text-xs text-background"
             onClick={copyToClipboard}
           >
             {isCopied ? <IconCheck size={18} /> : <IconClipboard size={18} />}
             {isCopied ? "Copied!" : "Copy code"}
           </button>
           <button
-            className="flex items-center rounded bg-none p-1 text-xs text-white"
+            className="flex items-center rounded bg-none p-1 text-xs text-background"
             onClick={downloadAsFile}
           >
             <IconDownload size={18} />
diff --git a/src/frontend/src/modals/chatModal/chatMessage/index.tsx b/src/frontend/src/modals/chatModal/chatMessage/index.tsx
index 269c6b206..f07f6514b 100644
--- a/src/frontend/src/modals/chatModal/chatMessage/index.tsx
+++ b/src/frontend/src/modals/chatModal/chatMessage/index.tsx
@@ -34,8 +34,8 @@ export default function ChatMessage({
       className={classNames(
         "w-full py-2 pl-2 flex",
         chat.isSend
-          ? "bg-background dark:bg-high-dark-gray "
-          : "bg-input  dark:bg-dark-gray"
+          ? "bg-background dark:bg-foreground "
+          : "bg-input  dark:bg-foreground"
       )}
     >
       <div
@@ -62,25 +62,25 @@ export default function ChatMessage({
           </div>
         )}
         {chat.isSend && (
-          <UserIcon className="w-6 h-6 -mb-1 text-dark-gray dark:text-light-gray" />
+          <UserIcon className="w-6 h-6 -mb-1 text-foreground dark:text-light-gray" />
         )}
       </div>
       {!chat.isSend ? (
         <div className="w-full text-start flex items-center">
-          <div className="w-full relative text-start inline-block text-medium-dark-gray dark:text-medium-low-gray text-sm font-normal">
+          <div className="w-full relative text-start inline-block text-muted-foreground dark:text-medium-low-gray 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 dark:text-white" />
+                <ChatBubbleOvalLeftEllipsisIcon className="w-5 h-5 animate-bounce dark:text-background" />
               </div>
             )}
             {chat.thought && chat.thought !== "" && !hidden && (
               <div
                 onClick={() => setHidden((prev) => !prev)}
-                className=" text-start inline-block rounded-md text-medium-dark-gray dark:text-light-gray h-full border border-medium-low-gray dark:border-medium-gray
-								bg-muted dark:bg-dark-gray w-[95%] pb-3 pt-3 px-2 ml-3 cursor-pointer scrollbar-hide overflow-scroll"
+                className=" text-start inline-block rounded-md text-muted-foreground dark:text-light-gray h-full border border-ring dark:border-ring
+								bg-muted dark:bg-foreground w-[95%] pb-3 pt-3 px-2 ml-3 cursor-pointer scrollbar-hide overflow-scroll"
                 dangerouslySetInnerHTML={{
                   __html: convert.toHtml(chat.thought),
                 }}
@@ -88,12 +88,12 @@ export default function ChatMessage({
             )}
             {chat.thought && chat.thought !== "" && !hidden && <br></br>}
             <div className="w-full px-4 pb-3 pt-3 pr-8">
-              <div className="dark:text-white w-full">
+              <div className="dark:text-background w-full">
                 <div className="w-full">
                   <ReactMarkdown
                     remarkPlugins={[remarkGfm, remarkMath]}
                     rehypePlugins={[rehypeMathjax]}
-                    className="markdown prose dark:prose-invert text-medium-dark-gray dark:text-light-gray"
+                    className="markdown prose dark:prose-invert text-muted-foreground dark:text-light-gray"
                     components={{
                       code({ node, inline, className, children, ...props }) {
                         if (children.length) {
@@ -152,9 +152,9 @@ export default function ChatMessage({
         </div>
       ) : (
         <div className="w-full flex items-center">
-          <div className="text-start inline-block px-3 text-sm text-medium-dark-gray dark:text-white">
+          <div className="text-start inline-block px-3 text-sm text-muted-foreground dark:text-background">
             <span
-              className="text-medium-dark-gray dark:text-light-gray"
+              className="text-muted-foreground dark:text-light-gray"
               dangerouslySetInnerHTML={{
                 __html: message.replace(/\n/g, "<br>"),
               }}
diff --git a/src/frontend/src/modals/chatModal/fileComponent/index.tsx b/src/frontend/src/modals/chatModal/fileComponent/index.tsx
index d59e3419c..9ca9ffdca 100644
--- a/src/frontend/src/modals/chatModal/fileComponent/index.tsx
+++ b/src/frontend/src/modals/chatModal/fileComponent/index.tsx
@@ -37,10 +37,10 @@ export default function FileCard({ fileName, content, fileType }) {
         />
         {isHovered && (
           <div
-            className={`absolute top-0 right-0 bg-muted text-almost-dark-gray rounded-bl-lg px-1 text-sm font-bold dark:bg-almost-dark-gray dark:text-medium-low-gray`}
+            className={`absolute top-0 right-0 bg-muted text-foreground rounded-bl-lg px-1 text-sm font-bold dark:bg-foreground dark:text-medium-low-gray`}
           >
             <button
-              className="text-medium-gray py-1 px-2 dark:bg-almost-dark-gray dark:text-medium-low-gray"
+              className="text-ring py-1 px-2 dark:bg-foreground dark:text-medium-low-gray"
               onClick={handleDownload}
             >
               <CloudArrowDownIcon className="hover:scale-110 w-5 h-5 text-current"></CloudArrowDownIcon>
@@ -54,7 +54,7 @@ export default function FileCard({ fileName, content, fileType }) {
   return (
     <button
       onClick={handleDownload}
-      className="bg-muted shadow rounded w-1/2 text-almost-dark-gray hover:drop-shadow-lg px-2 py-2 flex justify-between items-center border border-medium-low-gray"
+      className="bg-muted shadow rounded w-1/2 text-foreground hover:drop-shadow-lg px-2 py-2 flex justify-between items-center border border-ring"
     >
       <div className="flex gap-2 text-current items-center w-full mr-2">
         {" "}
@@ -70,7 +70,7 @@ export default function FileCard({ fileName, content, fileType }) {
         <div className="flex flex-col items-start">
           {" "}
           <div className="truncate text-sm text-current">{fileName}</div>
-          <div className="truncate text-xs  text-medium-gray">{fileType}</div>
+          <div className="truncate text-xs  text-ring">{fileType}</div>
         </div>
         <CloudArrowDownIcon className="w-6 h-6 text-current ml-auto" />
       </div>
diff --git a/src/frontend/src/modals/chatModal/index.tsx b/src/frontend/src/modals/chatModal/index.tsx
index 85deb685a..ed1f7deb5 100644
--- a/src/frontend/src/modals/chatModal/index.tsx
+++ b/src/frontend/src/modals/chatModal/index.tsx
@@ -332,7 +332,7 @@ export default function ChatModal({
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-black backdrop-blur-sm dark:bg-medium-dark-gray dark:bg-opacity-80 bg-opacity-80 transition-opacity" />
+          <div className="fixed inset-0 bg-black backdrop-blur-sm dark:bg-muted-foreground dark:bg-opacity-80 bg-opacity-80 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-10 overflow-y-auto">
@@ -346,24 +346,24 @@ export default function ChatModal({
               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-[95%] overflow-hidden rounded-lg bg-white dark:bg-dark-gray text-left shadow-xl transition-all w-[690px]">
+              <Dialog.Panel className=" drop-shadow-2xl relative flex flex-col justify-between transform h-[95%] overflow-hidden rounded-lg bg-background dark:bg-foreground text-left shadow-xl transition-all w-[690px]">
                 <div className="relative w-full p-4">
                   <button
                     onClick={() => clearChat()}
-                    className="absolute top-2 right-10 hover:text-medium-red text-medium-dark-gray dark:text-medium-low-gray dark:hover:text-medium-red z-30"
+                    className="absolute top-2 right-10 hover:text-status-red text-muted-foreground dark:text-medium-low-gray dark:hover:text-status-red z-30"
                   >
                     <FaEraser className="w-4 h-4" />
                   </button>
                   <button
                     onClick={() => setModalOpen(false)}
-                    className="absolute top-1.5 right-2 hover:text-medium-red text-medium-dark-gray dark:text-medium-low-gray dark:hover:text-medium-red z-30"
+                    className="absolute top-1.5 right-2 hover:text-status-red text-muted-foreground dark:text-medium-low-gray dark:hover:text-status-red z-30"
                   >
                     <HiX className="w-5 h-5" />
                   </button>
                 </div>
                 <div
                   ref={messagesRef}
-                  className="w-full h-full bg-white dark:bg-dark-gray border-t dark:border-t-medium-dark-gray flex-col flex items-center overflow-scroll scrollbar-hide"
+                  className="w-full h-full bg-background dark:bg-foreground border-t dark:border-t-muted-foreground flex-col flex items-center overflow-scroll scrollbar-hide"
                 >
                   {chatHistory.length > 0 ? (
                     chatHistory.map((c, i) => (
@@ -378,13 +378,13 @@ export default function ChatModal({
                     <div className="flex flex-col h-full text-center justify-center w-full items-center align-middle">
                       <span>
                         👋{" "}
-                        <span className="text-medium-dark-gray dark:text-medium-low-gray text-lg">
+                        <span className="text-muted-foreground dark:text-medium-low-gray text-lg">
                           LangFlow Chat
                         </span>
                       </span>
                       <br />
-                      <div className="bg-muted dark:bg-high-dark-gray rounded-md w-2/4 px-6 py-8 border border-light-gray dark:border-almost-dark-gray">
-                        <span className="text-base text-medium-gray">
+                      <div className="bg-muted dark:bg-foreground rounded-md w-2/4 px-6 py-8 border border-input dark:border-foreground">
+                        <span className="text-base text-ring">
                           Start a conversation and click the agent’s thoughts{" "}
                           <span>
                             <ChatBubbleOvalLeftEllipsisIcon className="w-6 h-6 inline animate-bounce " />
@@ -396,7 +396,7 @@ export default function ChatModal({
                   )}
                   <div ref={ref}></div>
                 </div>
-                <div className="w-full bg-white dark:bg-dark-gray border-t dark:border-t-medium-dark-gray flex-col flex items-center justify-between p-3">
+                <div className="w-full bg-background dark:bg-foreground border-t dark:border-t-muted-foreground flex-col flex items-center justify-between p-3">
                   <div className="relative w-full  mt-1 rounded-md shadow-sm">
                     <ChatInput
                       chatValue={chatValue}
diff --git a/src/frontend/src/modals/codeAreaModal/index.tsx b/src/frontend/src/modals/codeAreaModal/index.tsx
index 59df6a45f..5636abfb1 100644
--- a/src/frontend/src/modals/codeAreaModal/index.tsx
+++ b/src/frontend/src/modals/codeAreaModal/index.tsx
@@ -52,7 +52,7 @@ export default function CodeAreaModal({
           <DialogTitle className="flex items-center">
             <span className="pr-2">Edit Code</span>
             <CommandLineIcon
-              className="h-6 w-6 text-dark-gray pl-1 dark:text-white"
+              className="h-6 w-6 text-foreground pl-1 dark:text-background"
               aria-hidden="true"
             />
           </DialogTitle>
@@ -73,7 +73,7 @@ export default function CodeAreaModal({
             onChange={(value) => {
               setCode(value);
             }}
-            className="w-full rounded-lg h-[300px] custom-scroll border-[1px] border-medium-low-gray dark:border-medium-dark-gray"
+            className="w-full rounded-lg h-[300px] custom-scroll border-[1px] border-ring dark:border-muted-foreground"
           />
         </div>
 
diff --git a/src/frontend/src/modals/exportModal/index.tsx b/src/frontend/src/modals/exportModal/index.tsx
index 9e03d1662..33757a97b 100644
--- a/src/frontend/src/modals/exportModal/index.tsx
+++ b/src/frontend/src/modals/exportModal/index.tsx
@@ -47,7 +47,7 @@ export default function ExportModal() {
           <DialogTitle className="flex items-center">
             <span className="pr-2">Export</span>
             <Download
-              className="h-6 w-6 text-dark-gray pl-1 dark:text-white"
+              className="h-6 w-6 text-foreground pl-1 dark:text-background"
               aria-hidden="true"
             />
           </DialogTitle>
diff --git a/src/frontend/src/modals/genericModal/index.tsx b/src/frontend/src/modals/genericModal/index.tsx
index 6ae4114b6..c4eb028ce 100644
--- a/src/frontend/src/modals/genericModal/index.tsx
+++ b/src/frontend/src/modals/genericModal/index.tsx
@@ -55,7 +55,7 @@ export default function GenericModal({
           <DialogTitle className="flex items-center">
             <span className="pr-2">{myModalTitle}</span>
             <DocumentTextIcon
-              className="h-6 w-6 text-dark-gray pl-1 dark:text-white"
+              className="h-6 w-6 text-foreground pl-1 dark:text-background"
               aria-hidden="true"
             />
           </DialogTitle>
@@ -78,7 +78,7 @@ export default function GenericModal({
         <div className="flex h-full w-full mt-2">
           <Textarea
             ref={ref}
-            className="form-input h-[300px] w-full rounded-lg border-medium-low-gray dark:border-almost-dark-gray dark:bg-high-dark-gray dark:text-white focus-visible:ring-1"
+            className="form-input h-[300px] w-full rounded-lg border-ring dark:border-foreground dark:bg-foreground dark:text-background focus-visible:ring-1"
             value={myValue}
             onChange={(e) => {
               setMyValue(e.target.value);
diff --git a/src/frontend/src/modals/importModal/buttonBox/index.tsx b/src/frontend/src/modals/importModal/buttonBox/index.tsx
index a36197f6f..328f50c09 100644
--- a/src/frontend/src/modals/importModal/buttonBox/index.tsx
+++ b/src/frontend/src/modals/importModal/buttonBox/index.tsx
@@ -79,7 +79,7 @@ export default function ButtonBox({
     <button disabled={deactivate} onClick={onClick}>
       <div
         className={classNames(
-          "flex flex-col justify-center items-center rounded-lg text-center shadow border border-medium-low-gray dark:border-dark-gray hover:shadow-lg transform hover:scale-105",
+          "flex flex-col justify-center items-center rounded-lg text-center shadow border border-ring dark:border-foreground hover:shadow-lg transform hover:scale-105",
           bgColor,
           height,
           width,
@@ -87,10 +87,10 @@ export default function ButtonBox({
         )}
       >
         <div
-          className={`flex items-center justify-center ${bigCircle} bg-white/30 dark:bg-white/30 rounded-full mb-1`}
+          className={`flex items-center justify-center ${bigCircle} bg-background/30 dark:bg-background/30 rounded-full mb-1`}
         >
           <div
-            className={`flex items-center justify-center ${smallCircle} bg-white dark:bg-white/80 rounded-full`}
+            className={`flex items-center justify-center ${smallCircle} bg-background dark:bg-background/80 rounded-full`}
           >
             <div className={textColor}>{icon}</div>
           </div>
@@ -98,7 +98,7 @@ export default function ButtonBox({
         <div className="w-full mt-auto mb-auto">
           <h3
             className={classNames(
-              "w-full font-semibold break-words text-white dark:text-white/80 truncate-multiline",
+              "w-full font-semibold break-words text-background dark:text-background/80 truncate-multiline",
               titleFontSize,
               marginTop
             )}
diff --git a/src/frontend/src/modals/importModal/index.tsx b/src/frontend/src/modals/importModal/index.tsx
index 01b55116b..0228c3ece 100644
--- a/src/frontend/src/modals/importModal/index.tsx
+++ b/src/frontend/src/modals/importModal/index.tsx
@@ -85,7 +85,7 @@ export default function ImportModal() {
                     }}
                   >
                     <ArrowLeftIcon
-                      className="h-5 w-5 text-dark-gray ml-1 dark:text-white"
+                      className="h-5 w-5 text-foreground ml-1 dark:text-background"
                       aria-hidden="true"
                     />
                   </button>
@@ -97,7 +97,7 @@ export default function ImportModal() {
               {showExamples ? "Select an example" : "Import"}
             </span>
             <ArrowUpTrayIcon
-              className="h-5 w-5 text-dark-gray ml-1 dark:text-white"
+              className="h-5 w-5 text-foreground ml-1 dark:text-background"
               aria-hidden="true"
             />
           </DialogTitle>
@@ -106,7 +106,7 @@ export default function ImportModal() {
 
         <div
           className={classNames(
-            "h-full w-full dark:bg-high-dark-gray overflow-y-auto scrollbar-hide",
+            "h-full w-full dark:bg-foreground overflow-y-auto scrollbar-hide",
             showExamples && !loadingExamples
               ? "flex flex-row start justify-center items-start flex-wrap overflow-auto mx-auto"
               : "flex flex-row justify-center items-center"
@@ -179,7 +179,7 @@ export default function ImportModal() {
             <a
               href="https://github.com/logspace-ai/langflow_examples"
               target="_blank"
-              className="flex items-center justify-center text-medium-dark-gray dark:text-medium-low-gray"
+              className="flex items-center justify-center text-muted-foreground dark:text-medium-low-gray"
               rel="noreferrer"
             >
               <svg
diff --git a/src/frontend/src/modals/promptModal/index.tsx b/src/frontend/src/modals/promptModal/index.tsx
index b7a3b8b0a..2fac7b373 100644
--- a/src/frontend/src/modals/promptModal/index.tsx
+++ b/src/frontend/src/modals/promptModal/index.tsx
@@ -43,7 +43,7 @@ export default function PromptAreaModal({
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-ring dark:bg-medium-dark-gray dark:bg-opacity-75 bg-opacity-75 transition-opacity" />
+          <div className="fixed inset-0 bg-ring dark:bg-muted-foreground dark:bg-opacity-75 bg-opacity-75 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-10 overflow-y-auto">
@@ -57,11 +57,11 @@ export default function PromptAreaModal({
               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-dark-gray text-left shadow-xl transition-all sm:my-8 w-[700px]">
+              <Dialog.Panel className="relative flex flex-col justify-between transform h-[600px] overflow-hidden rounded-lg bg-background dark:bg-foreground text-left shadow-xl transition-all sm:my-8 w-[700px]">
                 <div className=" z-50 absolute top-0 right-0 hidden pt-4 pr-4 sm:block">
                   <button
                     type="button"
-                    className="rounded-md text-almost-medium-gray hover:text-medium-gray"
+                    className="rounded-md text-ring hover:text-ring"
                     onClick={() => {
                       setModalOpen(false);
                     }}
@@ -72,7 +72,7 @@ export default function PromptAreaModal({
                 </div>
                 <div className="h-full w-full flex flex-col justify-center items-center">
                   <div className="flex w-full pb-4 z-10 justify-center shadow-sm">
-                    <div className="mx-auto mt-4 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-almost-light-blue dark:bg-high-dark-gray sm:mx-0 sm:h-10 sm:w-10">
+                    <div className="mx-auto mt-4 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-almost-light-blue dark:bg-foreground sm:mx-0 sm:h-10 sm:w-10">
                       <DocumentTextIcon
                         className="h-6 w-6 text-almost-medium-blue"
                         aria-hidden="true"
@@ -81,18 +81,18 @@ export default function PromptAreaModal({
                     <div className="mt-4 text-center sm:ml-4 sm:text-left">
                       <Dialog.Title
                         as="h3"
-                        className="text-lg font-medium dark:text-white leading-10 text-high-dark-gray"
+                        className="text-lg font-medium dark:text-background leading-10 text-foreground"
                       >
                         Edit Prompt
                       </Dialog.Title>
                     </div>
                   </div>
-                  <div className="h-full w-full bg-accent overflow-auto dark:bg-high-dark-gray p-4 gap-4 flex flex-row justify-center items-center">
+                  <div className="h-full w-full bg-accent overflow-auto dark:bg-foreground p-4 gap-4 flex flex-row justify-center items-center">
                     <div className="flex h-full w-full">
-                      <div className="overflow-hidden px-4 py-5 sm:p-6 w-full h-full rounded-lg bg-white dark:bg-dark-gray shadow">
+                      <div className="overflow-hidden px-4 py-5 sm:p-6 w-full h-full rounded-lg bg-background dark:bg-foreground shadow">
                         <textarea
                           ref={ref}
-                          className="form-input h-full w-full rounded-lg border-medium-low-gray dark:border-almost-dark-gray dark:bg-high-dark-gray dark:text-white"
+                          className="form-input h-full w-full rounded-lg border-ring dark:border-foreground dark:bg-foreground dark:text-background"
                           value={myValue}
                           onChange={(e) => {
                             setMyValue(e.target.value);
@@ -102,10 +102,10 @@ export default function PromptAreaModal({
                       </div>
                     </div>
                   </div>
-                  <div className="bg-light-gray dark:bg-high-dark-gray w-full pb-3 flex flex-row-reverse px-4">
+                  <div className="bg-input dark:bg-foreground w-full pb-3 flex flex-row-reverse px-4">
                     <button
                       type="button"
-                      className="inline-flex w-full justify-center rounded-md border border-transparent bg-medium-high-indigo px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-ring focus:outline-none focus:ring-1 focus:ring-medium-indigo focus:ring-offset-1 sm:ml-3 sm:w-auto sm:text-sm"
+                      className="inline-flex w-full justify-center rounded-md border border-transparent px-4 py-2 text-base font-medium text-background shadow-sm hover:bg-ring focus:outline-none focus:ring-1 focus:ring-ring focus:ring-offset-1 sm:ml-3 sm:w-auto sm:text-sm"
                       onClick={() => {
                         checkPrompt(myValue)
                           .then((apiReturn) => {
diff --git a/src/frontend/src/modals/textAreaModal/index.tsx b/src/frontend/src/modals/textAreaModal/index.tsx
index 3ce2787e0..adda0acf0 100644
--- a/src/frontend/src/modals/textAreaModal/index.tsx
+++ b/src/frontend/src/modals/textAreaModal/index.tsx
@@ -42,7 +42,7 @@ export default function TextAreaModal({
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-medium-gray dark:bg-medium-dark-gray dark:bg-opacity-75 bg-opacity-75 transition-opacity" />
+          <div className="fixed inset-0 bg-ring dark:bg-muted-foreground dark:bg-opacity-75 bg-opacity-75 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-10 overflow-y-auto">
@@ -56,11 +56,11 @@ export default function TextAreaModal({
               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-dark-gray text-left shadow-xl transition-all sm:my-8 w-[700px]">
+              <Dialog.Panel className="relative flex flex-col justify-between transform h-[600px] overflow-hidden rounded-lg bg-background dark:bg-foreground text-left shadow-xl transition-all sm:my-8 w-[700px]">
                 <div className=" z-50 absolute top-0 right-0 hidden pt-4 pr-4 sm:block">
                   <button
                     type="button"
-                    className="rounded-md text-almost-medium-gray hover:text-medium-gray"
+                    className="rounded-md text-ring hover:text-ring"
                     onClick={() => {
                       setModalOpen(false);
                     }}
@@ -71,7 +71,7 @@ export default function TextAreaModal({
                 </div>
                 <div className="h-full w-full flex flex-col justify-center items-center">
                   <div className="flex w-full pb-4 z-10 justify-center shadow-sm">
-                    <div className="mx-auto mt-4 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-almost-light-blue dark:bg-high-dark-gray sm:mx-0 sm:h-10 sm:w-10">
+                    <div className="mx-auto mt-4 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-almost-light-blue dark:bg-foreground sm:mx-0 sm:h-10 sm:w-10">
                       <ClipboardDocumentListIcon
                         className="h-6 w-6 text-almost-medium-blue"
                         aria-hidden="true"
@@ -80,18 +80,18 @@ export default function TextAreaModal({
                     <div className="mt-4 text-center sm:ml-4 sm:text-left">
                       <Dialog.Title
                         as="h3"
-                        className="text-lg font-medium dark:text-white leading-10 text-high-dark-gray"
+                        className="text-lg font-medium dark:text-background leading-10 text-foreground"
                       >
                         Edit text
                       </Dialog.Title>
                     </div>
                   </div>
-                  <div className="h-full w-full bg-light-gray dark:bg-high-dark-gray p-4 gap-4 flex flex-row justify-center items-center">
+                  <div className="h-full w-full bg-input dark:bg-foreground p-4 gap-4 flex flex-row justify-center items-center">
                     <div className="flex h-full w-full">
-                      <div className="overflow-hidden px-4 py-5 sm:p-6 w-full rounded-lg bg-white dark:bg-dark-gray shadow">
+                      <div className="overflow-hidden px-4 py-5 sm:p-6 w-full rounded-lg bg-background dark:bg-foreground shadow">
                         <textarea
                           ref={ref}
-                          className="form-input h-full w-full rounded-lg border-medium-low-gray dark:border-almost-dark-gray dark:bg-high-dark-gray dark:text-white"
+                          className="form-input h-full w-full rounded-lg border-ring dark:border-foreground dark:bg-foreground dark:text-background"
                           value={myValue}
                           onChange={(e) => {
                             setMyValue(e.target.value);
@@ -101,10 +101,10 @@ export default function TextAreaModal({
                       </div>
                     </div>
                   </div>
-                  <div className="bg-light-gray dark:bg-high-dark-gray w-full pb-3 flex flex-row-reverse px-4">
+                  <div className="bg-input dark:bg-foreground w-full pb-3 flex flex-row-reverse px-4">
                     <button
                       type="button"
-                      className="inline-flex w-full justify-center rounded-md border border-transparent bg-medium-high-indigo px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-high-indigo focus:outline-none focus:ring-1 focus:ring-medium-indigo focus:ring-offset-1 sm:ml-3 sm:w-auto sm:text-sm"
+                      className="inline-flex w-full justify-center rounded-md border border-transparent px-4 py-2 text-base font-medium text-background shadow-sm hover:bg-ring focus:outline-none focus:ring-1 focus:ring-ring focus:ring-offset-1 sm:ml-3 sm:w-auto sm:text-sm"
                       onClick={() => {
                         setModalOpen(false);
                       }}
diff --git a/src/frontend/src/pages/FlowPage/components/ConnectionLineComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/ConnectionLineComponent/index.tsx
index c646c6834..a005f008f 100644
--- a/src/frontend/src/pages/FlowPage/components/ConnectionLineComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/ConnectionLineComponent/index.tsx
@@ -23,7 +23,7 @@ const ConnectionLineComponent = ({
         fill="#fff"
         r={3}
         stroke="#222"
-        className="dark:stroke-almost-medium-gray dark:fill-dark-gray"
+        className="dark:stroke-almost-medium-gray dark:fill-foreground"
         strokeWidth={1.5}
       />
     </g>
diff --git a/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx
index 9cbd1aa96..89c9f5d73 100644
--- a/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx
@@ -12,10 +12,10 @@ export default function DisclosureComponent({
       {({ open }) => (
         <>
           <div>
-            <Disclosure.Button className="select-none bg-muted dark:bg-almost-dark-gray/60 dark:border-y-medium-dark-gray w-full flex justify-between items-center -mt-px px-3 py-2 border-y border-y-light-gray">
+            <Disclosure.Button className="select-none bg-muted dark:bg-foreground/60 dark:border-y-muted-foreground w-full flex justify-between items-center -mt-px px-3 py-2 border-y border-y-input">
               <div className="flex gap-4">
-                <Icon className="w-6 text-dark-gray dark:text-white/80" />
-                <span className="flex items-center text-sm text-dark-gray dark:text-white/80 font-medium">
+                <Icon className="w-6 text-foreground dark:text-background/80" />
+                <span className="flex items-center text-sm text-foreground dark:text-background/80 font-medium">
                   {title}
                 </span>
               </div>
@@ -29,7 +29,7 @@ export default function DisclosureComponent({
                   <ChevronRightIcon
                     className={`${
                       open || openDisc ? "rotate-90 transform" : ""
-                    } h-4 w-4 text-dark-gray dark:text-white`}
+                    } h-4 w-4 text-foreground dark:text-background`}
                   />
                 </div>
               </div>
diff --git a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
index 034575e11..39a704126 100644
--- a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
@@ -185,8 +185,8 @@ export default function Page({ flow }: { flow: FlowType }) {
             style: { stroke: "inherit" },
             className:
               params.targetHandle.split("|")[0] === "Text"
-                ? "stroke-dark-gray dark:stroke-medium-low-gray"
-                : "stroke-high-dark-gray dark:stroke-light-gray",
+                ? "stroke-foreground dark:stroke-medium-low-gray"
+                : "stroke-foreground dark:stroke-light-gray",
             animated: params.targetHandle.split("|")[0] === "Text",
           },
           eds
@@ -397,8 +397,8 @@ export default function Page({ flow }: { flow: FlowType }) {
                   selectNodesOnDrag={false}
                   className="theme-attribution"
                 >
-                  <Background className="dark:bg-high-dark-gray" />
-                  <Controls className="[&>button]:text-black  [&>button]:dark:bg-dark-gray hover:[&>button]:dark:bg-almost-dark-gray [&>button]:dark:text-almost-medium-gray [&>button]:dark:fill-almost-medium-gray [&>button]:dark:border-medium-dark-gray"></Controls>
+                  <Background className="dark:bg-foreground" />
+                  <Controls className="[&>button]:text-black  [&>button]:dark:bg-foreground hover:[&>button]:dark:bg-foreground [&>button]:dark:text-almost-medium-gray [&>button]:dark:fill-almost-medium-gray [&>button]:dark:border-muted-foreground"></Controls>
                 </ReactFlow>
                 <Chat flow={flow} reactFlowInstance={reactFlowInstance} />
               </div>
diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
index a431b1c9c..17633eb4d 100644
--- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
@@ -66,7 +66,7 @@ export default function ExtraSidebar() {
       <div className="mt-2 mb-2 w-full flex gap-2 justify-between px-2 items-center">
         <ShadTooltip delayDuration={1000} content="Import" side="top">
           <button
-            className="hover:dark:hover:bg-btn-hover-bg text-almost-dark-gray w-full justify-center shadow-sm transition-all duration-500 ease-in-out dark:bg-dark-gray dark:text-medium-low-gray  relative inline-flex items-center rounded-md bg-white px-2 py-2 ring-1 ring-inset ring-medium-low-gray hover:bg-high-light-gray"
+            className="hover:dark:hover:bg-btn-hover-bg text-foreground w-full justify-center shadow-sm transition-all duration-500 ease-in-out dark:bg-foreground dark:text-medium-low-gray  relative inline-flex items-center rounded-md bg-background px-2 py-2 ring-1 ring-inset ring-input hover:bg-high-input"
             onClick={() => {
               // openPopUp(<ImportModal />);
               uploadFlow();
@@ -79,7 +79,7 @@ export default function ExtraSidebar() {
         <ShadTooltip delayDuration={1000} content="Export" side="top">
           <button
             className={classNames(
-              "hover:dark:hover:bg-btn-hover-bg text-almost-dark-gray w-full justify-center shadow-sm transition-all duration-500 ease-in-out dark:bg-dark-gray dark:text-medium-low-gray  relative inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-medium-low-gray hover:bg-high-light-gray rounded-md"
+              "hover:dark:hover:bg-btn-hover-bg text-foreground w-full justify-center shadow-sm transition-all duration-500 ease-in-out dark:bg-foreground dark:text-medium-low-gray  relative inline-flex items-center bg-background px-2 py-2  ring-1 ring-inset ring-input hover:bg-high-input rounded-md"
             )}
             onClick={(event) => {
               openPopUp(<ExportModal />);
@@ -91,7 +91,7 @@ export default function ExtraSidebar() {
         <ShadTooltip delayDuration={1000} content="Code" side="top">
           <button
             className={classNames(
-              "hover:dark:hover:bg-btn-hover-bg text-almost-dark-gray w-full justify-center shadow-sm transition-all duration-500 ease-in-out dark:bg-dark-gray dark:text-medium-low-gray  relative inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-medium-low-gray hover:bg-high-light-gray rounded-md"
+              "hover:dark:hover:bg-btn-hover-bg text-foreground w-full justify-center shadow-sm transition-all duration-500 ease-in-out dark:bg-foreground dark:text-medium-low-gray  relative inline-flex items-center bg-background px-2 py-2  ring-1 ring-inset ring-input hover:bg-high-input rounded-md"
             )}
             onClick={(event) => {
               openPopUp(<ApiModal flow={flows.find((f) => f.id === tabId)} />);
@@ -103,7 +103,7 @@ export default function ExtraSidebar() {
 
         <ShadTooltip delayDuration={1000} content="Save" side="top">
           <button
-            className="hover:dark:hover:bg-btn-hover-bg text-almost-dark-gray w-full justify-center transition-all shadow-sm duration-500 ease-in-out dark:bg-dark-gray dark:text-medium-low-gray  relative inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-medium-low-gray hover:bg-gray-50 rounded-md"
+            className="hover:dark:hover:bg-btn-hover-bg text-foreground w-full justify-center transition-all shadow-sm duration-500 ease-in-out dark:bg-foreground dark:text-medium-low-gray  relative inline-flex items-center bg-background px-2 py-2  ring-1 ring-inset ring-input hover:bg-gray-50 rounded-md"
             onClick={(event) => {
               saveFlow(flows.find((f) => f.id === tabId));
               setSuccessData({ title: "Changes saved successfully" });
@@ -127,7 +127,7 @@ export default function ExtraSidebar() {
           placeholder="Search Nodes"
           className={
             INPUT_STYLE +
-            "w-full border-1 dark:border-medium-slate dark:border-0.5 dark:ring-0 focus-visible:dark:ring-0 focus-visible:dark:ring-offset-1 rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
+            "w-full border-1 dark:border-0.5 dark:ring-0 focus-visible:dark:ring-0 focus-visible:dark:ring-offset-1 rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
           }
           onChange={(e) => {
             handleSearchInput(e.target.value);
@@ -135,7 +135,7 @@ export default function ExtraSidebar() {
           }}
         />
         <div className="absolute inset-y-0 right-0 flex py-1.5 pr-3 items-center">
-          <MagnifyingGlassIcon className="h-5 w-5 dark:text-white"></MagnifyingGlassIcon>
+          <MagnifyingGlassIcon className="h-5 w-5 dark:text-background"></MagnifyingGlassIcon>
         </div>
       </div>
 
@@ -183,11 +183,11 @@ export default function ExtraSidebar() {
                               );
                             }}
                           >
-                            <div className="flex w-full justify-between text-sm px-3 py-1 bg-white dark:bg-dark-gray items-center border-dashed border-almost-medium-gray dark:border-medium-dark-gray border-l-0 rounded-md rounded-l-none border">
-                              <span className="text-black dark:text-white w-full pr-1 truncate text-xs">
+                            <div className="flex w-full justify-between text-sm px-3 py-1 bg-background dark:bg-foreground items-center border-dashed border-ring dark:border-muted-foreground border-l-0 rounded-md rounded-l-none border">
+                              <span className="text-black dark:text-background w-full pr-1 truncate text-xs">
                                 {t}
                               </span>
-                              <Bars2Icon className="w-4 h-6  text-almost-medium-gray dark:text-medium-dark-gray" />
+                              <Bars2Icon className="w-4 h-6  text-ring dark:text-muted-foreground" />
                             </div>
                           </div>
                         </div>
diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
index 8cdf6c529..d1a48a282 100644
--- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
@@ -32,7 +32,7 @@ const NodeToolbarComponent = (props) => {
         <span className="isolate inline-flex rounded-md shadow-sm">
           <ShadTooltip delayDuration={1000} content="Delete" side="top">
             <button
-              className="hover:dark:hover:bg-btn-hover-bg text-almost-dark-gray transition-all duration-500 ease-in-out dark:bg-dark-gray dark:text-medium-low-gray shadow-md relative inline-flex items-center rounded-l-md bg-white px-2 py-2 ring-1 ring-inset ring-medium-low-gray hover:bg-muted focus:z-10"
+              className="hover:dark:hover:bg-btn-hover-bg text-foreground transition-all duration-500 ease-in-out dark:bg-foreground dark:text-medium-low-gray shadow-md relative inline-flex items-center rounded-l-md bg-background px-2 py-2 ring-1 ring-inset ring-ring hover:bg-muted focus:z-10"
               onClick={() => {
                 props.deleteNode(props.data.id);
               }}
@@ -45,8 +45,8 @@ const NodeToolbarComponent = (props) => {
             <button
               className={classNames(
                 nodeLength > 0
-                  ? "hover:dark:hover:bg-btn-hover-bg text-almost-dark-gray transition-all duration-500 ease-in-out dark:bg-dark-gray dark:text-medium-low-gray shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-medium-low-gray hover:bg-muted focus:z-10"
-                  : "hover:dark:hover:bg-btn-hover-bg text-almost-dark-gray transition-all duration-500 ease-in-out dark:bg-dark-gray dark:text-medium-low-gray shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-medium-low-gray hover:bg-muted focus:z-10 rounded-r-md"
+                  ? "hover:dark:hover:bg-btn-hover-bg text-foreground transition-all duration-500 ease-in-out dark:bg-foreground dark:text-medium-low-gray shadow-md relative -ml-px inline-flex items-center bg-background px-2 py-2  ring-1 ring-inset ring-ring hover:bg-muted focus:z-10"
+                  : "hover:dark:hover:bg-btn-hover-bg text-foreground transition-all duration-500 ease-in-out dark:bg-foreground dark:text-medium-low-gray shadow-md relative -ml-px inline-flex items-center bg-background px-2 py-2  ring-1 ring-inset ring-ring hover:bg-muted focus:z-10 rounded-r-md"
               )}
               onClick={(event) => {
                 event.preventDefault();
@@ -72,7 +72,7 @@ const NodeToolbarComponent = (props) => {
           {nodeLength > 0 && (
             <ShadTooltip delayDuration={1000} content="Edit" side="top">
               <button
-                className="hover:dark:hover:bg-btn-hover-bg text-almost-dark-gray transition-all duration-500 ease-in-out dark:bg-dark-gray dark:text-medium-low-gray shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-medium-low-gray hover:bg-muted focus:z-10 rounded-r-md"
+                className="hover:dark:hover:bg-btn-hover-bg text-foreground transition-all duration-500 ease-in-out dark:bg-foreground dark:text-medium-low-gray shadow-md relative -ml-px inline-flex items-center bg-background px-2 py-2  ring-1 ring-inset ring-ring hover:bg-muted focus:z-10 rounded-r-md"
                 onClick={(event) => {
                   event.preventDefault();
                   props.openPopUp(<EditNodeModal data={props.data} />);
@@ -85,7 +85,7 @@ const NodeToolbarComponent = (props) => {
 
           
           {/* <Menu as="div" className="relative inline-block text-left z-100">
-            <button className="hover:dark:hover:bg-[#242f47] text-gray-700 transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2 ring-1 ring-inset ring-gray-300 hover:bg-muted focus:z-10 rounded-r-md">
+            <button className="hover:dark:hover:bg-[#242f47] text-gray-700 transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 shadow-md relative -ml-px inline-flex items-center bg-background px-2 py-2 ring-1 ring-inset ring-gray-300 hover:bg-muted focus:z-10 rounded-r-md">
               <div>
                 <Menu.Button className="flex items-center">
                   <EllipsisVerticalIcon
@@ -104,7 +104,7 @@ const NodeToolbarComponent = (props) => {
                 leaveFrom="transform opacity-100 scale-100"
                 leaveTo="transform opacity-0 scale-95"
               >
-                <Menu.Items className="absolute z-40 mt-2 w-56 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none top-[28px]">
+                <Menu.Items className="absolute z-40 mt-2 w-56 origin-top-right rounded-md bg-background shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none top-[28px]">
                   <div className="py-1">
                     <Menu.Item>
                       {({ active }) => (
diff --git a/src/frontend/tailwind.config.js b/src/frontend/tailwind.config.js
index 4443f6299..5fd13fbd0 100644
--- a/src/frontend/tailwind.config.js
+++ b/src/frontend/tailwind.config.js
@@ -22,16 +22,14 @@ module.exports = {
         'high-indigo': "var(--high-indigo)",
         'medium-high-indigo': "var(--medium-high-indigo)",
         'medium-emerald': "var(--medium-emerald)",
-        'high-light-slate': "var(--high-light-slate)",
-        'medium-yellow': "var(--medium-yellow)",
+        'status-yellow': "var(--status-yellow)",
         'almost-medium-green': "var(--almost-medium-green)",
         'almost-medium-blue': "var(--almost-medium-blue)",
         'medium-indigo': "var(--medium-indigo)",
-        'medium-slate': "var(--medium-slate)",
         'light-slate': "var(--light-slate)",
-        'light-green': "var(--light-green)",
-        'dark-green': "var(--dark-green)",
-        'medium-green': "var(--medium-green)",
+        'success-background': "var(--success-background)",
+        'success-foreground': "var(--success-foreground)",
+        'status-green': "var(--status-green)",
         'medium-dark-green': "var(--medium-dark-green)",
         'light-blue': "var(--light-blue)",
         'dark-blue': "var(--dark-blue)",
@@ -39,11 +37,10 @@ module.exports = {
         'medium-dark-blue': "var(--medium-dark-blue)",
         'almost-medium-red': "var(--almost-medium-red)",
         'medium-dark-red': "var(--medium-dark-red)",
-        'almost-dark-red': "var(--almost-dark-red)",
-        'medium-light-red': "var(--medium-light-red)",
+        'error-foreground': "var(--error-foreground)",
         'dark-red': "var(--dark-red)",
-        'light-red': "var(--light-red)",
-        'medium-red': "var(--medium-red)",
+        'error-background': "var(--error-background)",
+        'status-red': "var(--status-red)",
         'almost-medium-gray': "var(--almost-medium-gray)",
         'almost-dark-gray': "var(--almost-dark-gray)",
         'medium-dark-gray': "var(--medium-dark-gray)",
@@ -136,16 +133,14 @@ module.exports = {
         'high-indigo': "var(--high-indigo)",
         'medium-high-indigo': "var(--medium-high-indigo)",
         'medium-emerald': "var(--medium-emerald)",
-        'high-light-slate': "var(--high-light-slate)",
-        'medium-yellow': "var(--medium-yellow)",
+        'status-yellow': "var(--status-yellow)",
         'almost-medium-green': "var(--almost-medium-green)",
         'almost-medium-blue': "var(--almost-medium-blue)",
         'medium-indigo': "var(--medium-indigo)",
-        'medium-slate': "var(--medium-slate)",
         'light-slate': "var(--light-slate)",
-        'light-green': "var(--light-green)",
+        'success-background': "var(--success-background)",
         'dark-green': "var(--dark-green)",
-        'medium-green': "var(--medium-green)",
+        'status-green': "var(--status-green)",
         'medium-dark-green': "var(--medium-dark-green)",
         'medium-light-blue': "var(--medium-light-blue)",
         'almost-dark-blue': "var(--almost-dark-blue)",
@@ -155,11 +150,10 @@ module.exports = {
         'medium-dark-blue': "var(--medium-dark-blue)",
         'almost-medium-red': "var(--almost-medium-red)",
         'medium-dark-red': "var(--medium-dark-red)",
-        'almost-dark-red': "var(--almost-dark-red)",
-        'medium-light-red': "var(--medium-light-red)",
+        'error-foreground': "var(--error-foreground)",
         'dark-red': "var(--dark-red)",
-        'light-red': "var(--light-red)",
-        'medium-red': "var(--medium-red)",
+        'error-background': "var(--error-background)",
+        'status-red': "var(--status-red)",
         'almost-medium-gray': "var(--almost-medium-gray)",
         'almost-dark-gray': "var(--almost-dark-gray)",
         'medium-dark-gray': "var(--medium-dark-gray)",

From fa5b80399df3aef784cb3099fa670bb23269f76c Mon Sep 17 00:00:00 2001
From: Igor Carvalho <igorsilvabhz6@gmail.com>
Date: Fri, 23 Jun 2023 19:08:08 -0300
Subject: [PATCH 10/26] 
 fix[FlowPage/components/extraSideBarComponent/index.tsx]: extra side bar
 component button hover background

---
 src/frontend/src/index.css                                | 8 ++++----
 .../FlowPage/components/extraSidebarComponent/index.tsx   | 8 ++++----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/frontend/src/index.css b/src/frontend/src/index.css
index a68cf5024..6673823ca 100644
--- a/src/frontend/src/index.css
+++ b/src/frontend/src/index.css
@@ -144,10 +144,10 @@
 
   --success-background: #f0fdf4; /* tailwind green 50 USED IN SUCCESS MSG light-green*/ 
   --success-foreground: #14532d; /* tailwind green 900 USED IN SUCCESS MSG dark-green */
-
-  /* --high-indigo: #4338ca;  tailwind indigo 700 
-  --medium-indigo: #6366f1;  tailwind indigo 500 
-  --medium-dark-blue:#1d4ed8;  tailwind blue 700 Change in component (--ring)
+  --high-indigo: #4338ca;  /*tailwind indigo 700*/ 
+  --medium-indigo: #6366f1;  /* tailwind indigo 500 */
+  --medium-dark-blue:#1d4ed8; /* tailwind blue 700 Change in component (--ring)*/
+  /*
   --medium-high-indigo: #4f46e5;  tailwind indigo 600 
   --medium-emerald: #10b981;  tailwind emerald 500 Unused
   --medium-dark-green: #166534;  tailwind green 800 Unused
diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
index 17633eb4d..c93006896 100644
--- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
@@ -66,7 +66,7 @@ export default function ExtraSidebar() {
       <div className="mt-2 mb-2 w-full flex gap-2 justify-between px-2 items-center">
         <ShadTooltip delayDuration={1000} content="Import" side="top">
           <button
-            className="hover:dark:hover:bg-btn-hover-bg text-foreground w-full justify-center shadow-sm transition-all duration-500 ease-in-out dark:bg-foreground dark:text-medium-low-gray  relative inline-flex items-center rounded-md bg-background px-2 py-2 ring-1 ring-inset ring-input hover:bg-high-input"
+            className="hover:dark:hover:bg-btn-hover-bg text-foreground w-full justify-center shadow-sm transition-all duration-500 ease-in-out dark:bg-foreground dark:text-medium-low-gray  relative inline-flex items-center rounded-md bg-background px-2 py-2 ring-1 ring-inset ring-input hover:bg-muted"
             onClick={() => {
               // openPopUp(<ImportModal />);
               uploadFlow();
@@ -79,7 +79,7 @@ export default function ExtraSidebar() {
         <ShadTooltip delayDuration={1000} content="Export" side="top">
           <button
             className={classNames(
-              "hover:dark:hover:bg-btn-hover-bg text-foreground w-full justify-center shadow-sm transition-all duration-500 ease-in-out dark:bg-foreground dark:text-medium-low-gray  relative inline-flex items-center bg-background px-2 py-2  ring-1 ring-inset ring-input hover:bg-high-input rounded-md"
+              "hover:dark:hover:bg-btn-hover-bg text-foreground w-full justify-center shadow-sm transition-all duration-500 ease-in-out dark:bg-foreground dark:text-medium-low-gray  relative inline-flex items-center bg-background px-2 py-2  ring-1 ring-inset ring-input hover:bg-muted rounded-md"
             )}
             onClick={(event) => {
               openPopUp(<ExportModal />);
@@ -91,7 +91,7 @@ export default function ExtraSidebar() {
         <ShadTooltip delayDuration={1000} content="Code" side="top">
           <button
             className={classNames(
-              "hover:dark:hover:bg-btn-hover-bg text-foreground w-full justify-center shadow-sm transition-all duration-500 ease-in-out dark:bg-foreground dark:text-medium-low-gray  relative inline-flex items-center bg-background px-2 py-2  ring-1 ring-inset ring-input hover:bg-high-input rounded-md"
+              "hover:dark:hover:bg-btn-hover-bg text-foreground w-full justify-center shadow-sm transition-all duration-500 ease-in-out dark:bg-foreground dark:text-medium-low-gray  relative inline-flex items-center bg-background px-2 py-2  ring-1 ring-inset ring-input hover:bg-muted rounded-md"
             )}
             onClick={(event) => {
               openPopUp(<ApiModal flow={flows.find((f) => f.id === tabId)} />);
@@ -103,7 +103,7 @@ export default function ExtraSidebar() {
 
         <ShadTooltip delayDuration={1000} content="Save" side="top">
           <button
-            className="hover:dark:hover:bg-btn-hover-bg text-foreground w-full justify-center transition-all shadow-sm duration-500 ease-in-out dark:bg-foreground dark:text-medium-low-gray  relative inline-flex items-center bg-background px-2 py-2  ring-1 ring-inset ring-input hover:bg-gray-50 rounded-md"
+            className="hover:dark:hover:bg-btn-hover-bg text-foreground w-full justify-center transition-all shadow-sm duration-500 ease-in-out dark:bg-foreground dark:text-medium-low-gray  relative inline-flex items-center bg-background px-2 py-2  ring-1 ring-inset ring-input hover:bg-muted rounded-md"
             onClick={(event) => {
               saveFlow(flows.find((f) => f.id === tabId));
               setSuccessData({ title: "Changes saved successfully" });

From 361e981d0d8d258f374f011e0d569dcff4e0fb82 Mon Sep 17 00:00:00 2001
From: Rodrigo Nader <rodrigosilvanader@gmail.com>
Date: Mon, 26 Jun 2023 01:42:25 -0300
Subject: [PATCH 11/26] Refactor component styles for better visual consistency

This commit refactors the styling of some components to improve their visual consistency with the rest of the application. Specifically, it removes unnecessary background and text color properties and adjusts classes for spacing and layout. These changes will enhance the user experience and create a more polished look and feel.
---
 .../components/parameterComponent/index.tsx   |   4 +-
 .../src/CustomNodes/GenericNode/index.tsx     |  16 +-
 .../components/singleAlertComponent/index.tsx |  28 +--
 .../src/alerts/alertDropDown/index.tsx        |  12 +-
 src/frontend/src/alerts/error/index.tsx       |   6 +-
 src/frontend/src/alerts/notice/index.tsx      |   8 +-
 src/frontend/src/alerts/success/index.tsx     |   6 +-
 .../ExtraSidebarComponent/index.tsx           |   4 +-
 .../chatComponent/buildTrigger/index.tsx      |   2 +-
 .../chatComponent/chatMessage/index.tsx       |   2 +-
 .../chatComponent/chatTrigger/index.tsx       |   2 +-
 .../components/codeAreaComponent/index.tsx    |   6 +-
 .../components/dropdownComponent/index.tsx    |  18 +-
 .../src/components/floatComponent/index.tsx   |   6 +-
 .../components/menuBar/index.tsx              |   6 +-
 .../src/components/headerComponent/index.tsx  |  10 +-
 .../src/components/inputComponent/index.tsx   |   6 +-
 .../components/inputFileComponent/index.tsx   |   4 +-
 .../components/inputListComponent/index.tsx   |   4 +-
 .../src/components/intComponent/index.tsx     |   8 +-
 .../src/components/loadingComponent/index.tsx |   2 +-
 .../src/components/promptComponent/index.tsx  |   6 +-
 .../components/textAreaComponent/index.tsx    |   6 +-
 .../src/components/toggleComponent/index.tsx  |   4 +-
 .../src/components/ui/SwitchStyles.css        |   8 +
 src/frontend/src/components/ui/switch.tsx     |   6 +-
 src/frontend/src/constants.tsx                |   2 +-
 src/frontend/src/contexts/tabsContext.tsx     |   8 +-
 src/frontend/src/index.1.css                  | 225 ++++++++++++++++++
 src/frontend/src/index.css                    |  93 ++++----
 src/frontend/src/modals/ApiModal/index.tsx    |   4 +-
 .../src/modals/EditNodeModal/index.tsx        |  12 +-
 .../NodeModal/components/ModalField/index.tsx |   2 +-
 src/frontend/src/modals/NodeModal/index.tsx   |  12 +-
 .../src/modals/chatModal/chatInput/index.tsx  |  10 +-
 .../modals/chatModal/chatMessage/index.tsx    |  22 +-
 .../modals/chatModal/fileComponent/index.tsx  |   4 +-
 src/frontend/src/modals/chatModal/index.tsx   |  16 +-
 .../src/modals/codeAreaModal/index.tsx        |   4 +-
 src/frontend/src/modals/exportModal/index.tsx |   2 +-
 .../src/modals/flowSettingsModal/index.tsx    |   2 +-
 .../src/modals/genericModal/index.tsx         |   4 +-
 .../modals/importModal/buttonBox/index.tsx    |   8 +-
 src/frontend/src/modals/importModal/index.tsx |  20 +-
 src/frontend/src/modals/promptModal/index.tsx |  16 +-
 .../src/modals/textAreaModal/index.tsx        |  16 +-
 .../ConnectionLineComponent/index.tsx         |   4 +-
 .../components/DisclosureComponent/index.tsx  |   8 +-
 .../components/PageComponent/index.tsx        |   8 +-
 .../extraSidebarComponent/index.tsx           |  24 +-
 .../components/nodeToolbarComponent/index.tsx |  18 +-
 51 files changed, 480 insertions(+), 254 deletions(-)
 create mode 100644 src/frontend/src/components/ui/SwitchStyles.css
 create mode 100644 src/frontend/src/index.1.css

diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
index 126e81c30..bc8adb15e 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
@@ -121,7 +121,7 @@ export default function ParameterComponent({
   return (
     <div
       ref={ref}
-      className="w-full flex flex-wrap justify-between items-center bg-muted dark:bg-foreground dark:text-background mt-1 px-5 py-2"
+      className="w-full flex flex-wrap justify-between items-center bg-muted mt-1 px-5 py-2"
     >
       <>
         <div className={"text-sm truncate w-full " + (left ? "" : "text-end")}>
@@ -153,7 +153,7 @@ export default function ParameterComponent({
               }
               className={classNames(
                 left ? "-ml-0.5 " : "-mr-0.5 ",
-                "w-3 h-3 rounded-full border-2 bg-background dark:bg-foreground"
+                "w-3 h-3 rounded-full border-2 bg-background"
               )}
               style={{
                 borderColor: color,
diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx
index 1c08f101b..7ec67dd93 100644
--- a/src/frontend/src/CustomNodes/GenericNode/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx
@@ -75,11 +75,11 @@ export default function GenericNode({
 
       <div
         className={classNames(
-          selected ? "border border-ring" : "border dark:border-foreground",
-          "prompt-node relative flex w-96 flex-col justify-center rounded-lg bg-background dark:bg-foreground"
+          selected ? "border border-ring" : "border",
+          "prompt-node relative flex w-96 flex-col justify-center rounded-lg bg-background"
         )}
       >
-        <div className="flex w-full items-center justify-between gap-8 rounded-t-lg border-b bg-muted p-4 dark:border-b-foreground dark:bg-foreground dark:text-background ">
+        <div className="flex w-full items-center justify-between gap-8 rounded-t-lg border-b bg-muted p-4  ">
           <div className="flex w-full items-center gap-2 truncate text-lg">
             <Icon
               className="h-10 w-10 rounded p-1"
@@ -124,7 +124,7 @@ export default function GenericNode({
                       validationStatus && validationStatus.valid
                         ? "w-4 h-4 rounded-full bg-red-600 opacity-100"
                         : "w-4 h-4 rounded-full bg-ring opacity-0 hidden animate-spin",
-                      "absolute w-4 hover:text-ring hover:dark:text-medium-low-gray transition-all ease-in-out duration-200"
+                      "absolute w-4 hover:text-ring hover: transition-all ease-in-out duration-200"
                     )}
                   ></div>
                   <div
@@ -132,7 +132,7 @@ export default function GenericNode({
                       validationStatus && !validationStatus.valid
                         ? "w-4 h-4 rounded-full  bg-status-red opacity-100"
                         : "w-4 h-4 rounded-full bg-ring opacity-0 hidden animate-spin",
-                      "absolute w-4 hover:text-ring hover:dark:text-medium-low-gray transition-all ease-in-out duration-200"
+                      "absolute w-4 hover:text-ring hover: transition-all ease-in-out duration-200"
                     )}
                   ></div>
                   <div
@@ -140,7 +140,7 @@ export default function GenericNode({
                       !validationStatus
                         ? "w-4 h-4 rounded-full  bg-status-yellow opacity-100"
                         : "w-4 h-4 rounded-full bg-ring opacity-0 hidden animate-spin",
-                      "absolute w-4 hover:text-ring hover:dark:text-medium-low-gray transition-all ease-in-out duration-200"
+                      "absolute w-4 hover:text-ring hover: transition-all ease-in-out duration-200"
                     )}
                   ></div>
                 </div>
@@ -162,7 +162,7 @@ export default function GenericNode({
                   {/* {idx === 0 ? (
                                 <div
                                     className={classNames(
-                                        "px-5 py-2 mt-2 dark:text-background text-center",
+                                        "px-5 py-2 mt-2 text-center",
                                         Object.keys(data.node.template).filter(
                                             (key) =>
                                                 !key.startsWith("_") &&
@@ -213,7 +213,7 @@ export default function GenericNode({
             >
               {" "}
             </div>
-            {/* <div className="px-5 py-2 mt-2 dark:text-background text-center">
+            {/* <div className="px-5 py-2 mt-2 text-center">
                   Output
               </div> */}
             <ParameterComponent
diff --git a/src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx b/src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx
index 72fc3f8ee..d3524c287 100644
--- a/src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx
+++ b/src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx
@@ -30,21 +30,21 @@ export default function SingleAlert({
     >
       {type === "error" ? (
         <div
-          className="flex bg-red-50 dark:bg-red-900 rounded-md p-3 mb-2 mx-2"
+          className="flex bg-error-background rounded-md p-3 mb-2 mx-2"
           key={dropItem.id}
         >
           <div className="flex-shrink-0">
             <XCircleIcon
-              className="h-5 w-5 text-red-400 dark:text-red-50"
+              className="h-5 w-5 text-red-400"
               aria-hidden="true"
             />
           </div>
           <div className="ml-3">
-            <h3 className="text-sm break-words font-medium text-red-800 dark:text-background/80">
+            <h3 className="text-sm break-words font-medium text-red-800">
               {dropItem.title}
             </h3>
             {dropItem.list ? (
-              <div className="mt-2 text-sm text-red-700 dark:text-red-50">
+              <div className="mt-2 text-sm text-red-700">
                 <ul className="list-disc space-y-1 pl-5">
                   {dropItem.list.map((item, idx) => (
                     <li className="break-words" key={idx}>
@@ -67,7 +67,7 @@ export default function SingleAlert({
                     removeAlert(dropItem.id);
                   }, 500);
                 }}
-                className="inline-flex rounded-md bg-red-50 dark:bg-transparent p-1.5 text-red-500 dark:text-red-50"
+                className="inline-flex rounded-md bg-red-50 p-1.5 text-red-500"
               >
                 <span className="sr-only">Dismiss</span>
                 <XMarkIcon className="h-5 w-5" aria-hidden="true" />
@@ -77,24 +77,24 @@ export default function SingleAlert({
         </div>
       ) : type === "notice" ? (
         <div
-          className="flex rounded-md bg-blue-50 dark:bg-blue-900 p-3 mb-2 mx-2"
+          className="flex rounded-md bg-blue-50 p-3 mb-2 mx-2"
           key={dropItem.id}
         >
           <div className="flex-shrink-0">
             <InformationCircleIcon
-              className="h-5 w-5 text-blue-400 dark:text-blue-50"
+              className="h-5 w-5 text-blue-400 "
               aria-hidden="true"
             />
           </div>
           <div className="ml-3 flex-1 md:flex md:justify-between">
-            <p className="text-sm text-blue-700 dark:text-background/80">
+            <p className="text-sm text-blue-700">
               {dropItem.title}
             </p>
             <p className="mt-3 text-sm md:mt-0 md:ml-6">
               {dropItem.link ? (
                 <Link
                   to={dropItem.link}
-                  className="whitespace-nowrap font-medium text-blue-700 dark:text-blue-50 dark:hover:text-blue-100 hover:text-ring"
+                  className="whitespace-nowrap font-medium text-blue-700 hover:text-ring"
                 >
                   Details
                 </Link>
@@ -113,7 +113,7 @@ export default function SingleAlert({
                     removeAlert(dropItem.id);
                   }, 500);
                 }}
-                className="inline-flex rounded-md bg-blue-50 dark:bg-transparent p-1.5 text-blue-500 dark:text-blue-50"
+                className="inline-flex rounded-md bg-blue-50 p-1.5 text-blue-500 "
               >
                 <span className="sr-only">Dismiss</span>
                 <XMarkIcon className="h-5 w-5" aria-hidden="true" />
@@ -123,17 +123,17 @@ export default function SingleAlert({
         </div>
       ) : (
         <div
-          className="flex bg-green-50 dark:bg-green-900 p-3 mb-2 mx-2 rounded-md"
+          className="flex bg-green-50  p-3 mb-2 mx-2 rounded-md"
           key={dropItem.id}
         >
           <div className="flex-shrink-0">
             <CheckCircleIcon
-              className="h-5 w-5 text-green-400 dark:text-green-50"
+              className="h-5 w-5 text-green-400 "
               aria-hidden="true"
             />
           </div>
           <div className="ml-3">
-            <p className="text-sm font-medium text-green-800 dark:bg-background/80">
+            <p className="text-sm font-medium text-green-800">
               {dropItem.title}
             </p>
           </div>
@@ -147,7 +147,7 @@ export default function SingleAlert({
                     removeAlert(dropItem.id);
                   }, 500);
                 }}
-                className="inline-flex rounded-md bg-green-50 dark:bg-transparent p-1.5 text-green-500 dark:text-green-50"
+                className="inline-flex rounded-md bg-green-50 p-1.5 text-green-500 "
               >
                 <span className="sr-only">Dismiss</span>
                 <XMarkIcon className="h-5 w-5" aria-hidden="true" />
diff --git a/src/frontend/src/alerts/alertDropDown/index.tsx b/src/frontend/src/alerts/alertDropDown/index.tsx
index d695c7f71..e3a07b532 100644
--- a/src/frontend/src/alerts/alertDropDown/index.tsx
+++ b/src/frontend/src/alerts/alertDropDown/index.tsx
@@ -24,13 +24,13 @@ export default function AlertDropdown({}: AlertDropdownType) {
   return (
     <div
       ref={componentRef}
-      className="z-10 py-3 pb-4 px-2 rounded-md bg-background dark:bg-foreground ring-1 ring-black ring-opacity-5 shadow-lg focus:outline-none overflow-hidden w-[400px] h-[500px] flex flex-col"
+      className="z-10 py-3 pb-4 px-2 rounded-md bg-background 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-foreground dark:text-light-gray">
+      <div className="flex pl-3 flex-row justify-between text-md font-medium text-foreground">
         Notifications
         <div className="flex gap-3 pr-3 ">
           <button
-            className="text-foreground hover:text-status-red dark:text-light-gray dark:hover:text-status-red"
+            className="text-foreground hover:text-status-red"
             onClick={() => {
               closePopUp();
               setTimeout(clearNotificationList, 100);
@@ -39,14 +39,14 @@ export default function AlertDropdown({}: AlertDropdownType) {
             <TrashIcon className="w-[1.1rem] h-[1.1rem]" />
           </button>
           <button
-            className="text-foreground hover:text-status-red dark:text-light-gray dark:hover:text-status-red"
+            className="text-foreground hover:text-status-red"
             onClick={closePopUp}
           >
             <XMarkIcon className="h-5 w-5" />
           </button>
         </div>
       </div>
-      <div className="mt-3 flex flex-col overflow-y-scroll w-full h-full scrollbar-hide text-high-foreground dark:text-medium-low-gray">
+      <div className="mt-3 flex flex-col overflow-y-scroll w-full h-full scrollbar-hide text-high-foreground">
         {notificationList.length !== 0 ? (
           notificationList.map((alertItem, index) => (
             <SingleAlert
@@ -56,7 +56,7 @@ export default function AlertDropdown({}: AlertDropdownType) {
             />
           ))
         ) : (
-          <div className="h-full w-full pb-16 text-ring dark:text-ring flex justify-center items-center">
+          <div className="h-full w-full pb-16 text-ring flex justify-center items-center">
             No new notifications
           </div>
         )}
diff --git a/src/frontend/src/alerts/error/index.tsx b/src/frontend/src/alerts/error/index.tsx
index 8908fa37f..3da6e9b2a 100644
--- a/src/frontend/src/alerts/error/index.tsx
+++ b/src/frontend/src/alerts/error/index.tsx
@@ -44,16 +44,16 @@ export default function ErrorAlert({
         <div className="flex">
           <div className="flex-shrink-0">
             <XCircleIcon
-              className="h-5 w-5 text-error-background dark:text-error-background"
+              className="h-5 w-5 text-error-background"
               aria-hidden="true"
             />
           </div>
           <div className="ml-3">
-            <h3 className="text-sm font-medium text-error-foreground dark:text-background/80">
+            <h3 className="text-sm font-medium text-error-foreground">
               {title}
             </h3>
             {list.length !== 0 ? (
-              <div className="mt-2 text-sm text-error-foreground dark:text-error-background">
+              <div className="mt-2 text-sm text-error-foreground">
                 <ul className="list-disc space-y-1 pl-5">
                   {list.map((item, index) => (
                     <li key={index}>{item}</li>
diff --git a/src/frontend/src/alerts/notice/index.tsx b/src/frontend/src/alerts/notice/index.tsx
index c6a9fe912..04309b13b 100644
--- a/src/frontend/src/alerts/notice/index.tsx
+++ b/src/frontend/src/alerts/notice/index.tsx
@@ -36,22 +36,22 @@ export default function NoticeAlert({
           setShow(false);
           removeAlert(id);
         }}
-        className="rounded-md w-96 mt-6 shadow-xl bg-light-blue dark:bg-dark-blue p-4"
+        className="rounded-md w-96 mt-6 shadow-xl bg-light-blue p-4"
       >
         <div className="flex">
           <div className="flex-shrink-0">
             <InformationCircleIcon
-              className="h-5 w-5 text-medium-blue dark:text-light-blue"
+              className="h-5 w-5 text-medium-blue"
               aria-hidden="true"
             />
           </div>
           <div className="ml-3 flex-1 md:flex md:justify-between">
-            <p className="text-sm text-ring dark:text-background/80">{title}</p>
+            <p className="text-sm text-ring">{title}</p>
             <p className="mt-3 text-sm md:mt-0 md:ml-6">
               {link !== "" ? (
                 <Link
                   to={link}
-                  className="whitespace-nowrap font-medium text-ring dark:text-light-blue hover:dark:text-blue-10 hover:text-ring"
+                  className="whitespace-nowrap font-medium text-ring hover:text-ring"
                 >
                   Details
                 </Link>
diff --git a/src/frontend/src/alerts/success/index.tsx b/src/frontend/src/alerts/success/index.tsx
index f62d9e3a9..1628cf8e1 100644
--- a/src/frontend/src/alerts/success/index.tsx
+++ b/src/frontend/src/alerts/success/index.tsx
@@ -34,17 +34,17 @@ export default function SuccessAlert({
           setShow(false);
           removeAlert(id);
         }}
-        className="rounded-md w-96 mt-6 shadow-xl bg-success-background dark:bg-success-foreground p-4"
+        className="rounded-md w-96 mt-6 shadow-xl bg-success-background p-4"
       >
         <div className="flex">
           <div className="flex-shrink-0">
             <CheckCircleIcon
-              className="h-5 w-5 text-status-green dark:text-success-background"
+              className="h-5 w-5 text-status-green"
               aria-hidden="true"
             />
           </div>
           <div className="ml-3">
-            <p className="text-sm font-medium text-success-foreground dark:text-background/80">
+            <p className="text-sm font-medium text-success-foreground">
               {title}
             </p>
           </div>
diff --git a/src/frontend/src/components/ExtraSidebarComponent/index.tsx b/src/frontend/src/components/ExtraSidebarComponent/index.tsx
index aa1b47c77..a27581d11 100644
--- a/src/frontend/src/components/ExtraSidebarComponent/index.tsx
+++ b/src/frontend/src/components/ExtraSidebarComponent/index.tsx
@@ -19,9 +19,9 @@ export default function ExtraSidebar() {
       <aside
         className={` ${
           isStackedOpen ? "w-52" : "w-0 "
-        } flex-shrink-0 flex overflow-hidden flex-col border-r dark:border-r-foreground transition-all duration-500`}
+        } flex-shrink-0 flex overflow-hidden flex-col border-r  transition-all duration-500`}
       >
-        <div className="w-52 dark:bg-foreground border dark:border-foreground  overflow-y-auto scrollbar-hide h-full flex flex-col items-start bg-background">
+        <div className="w-52 border  overflow-y-auto scrollbar-hide h-full flex flex-col items-start bg-background">
           <div className="flex flex-grow flex-col w-full">
             {extraNavigation.options ? (
               <div className="p-4">
diff --git a/src/frontend/src/components/chatComponent/buildTrigger/index.tsx b/src/frontend/src/components/chatComponent/buildTrigger/index.tsx
index f092074c2..f6ee28a0a 100644
--- a/src/frontend/src/components/chatComponent/buildTrigger/index.tsx
+++ b/src/frontend/src/components/chatComponent/buildTrigger/index.tsx
@@ -143,7 +143,7 @@ export default function BuildTrigger({
         >
           <div
             className="flex justify-center align-center py-1 px-3 w-12 h-12 rounded-full shadow-md hover:shadow-sm shadow-btn-shadow hover:shadow-btn-shadow
-            bg-buildBackground dark:border-muted-foreground cursor-pointer"
+            bg-buildBackground cursor-pointer"
             onClick={() => {
               handleBuild(flow);
             }}
diff --git a/src/frontend/src/components/chatComponent/chatMessage/index.tsx b/src/frontend/src/components/chatComponent/chatMessage/index.tsx
index f0120da19..10e7778ee 100644
--- a/src/frontend/src/components/chatComponent/chatMessage/index.tsx
+++ b/src/frontend/src/components/chatComponent/chatMessage/index.tsx
@@ -48,7 +48,7 @@ export default function ChatMessage({ chat }: { chat: ChatMessageType }) {
         </div>
       ) : (
         <div className="w-full text-end">
-          <div className="text-start inline-block rounded-xl p-3 overflow-hidden w-fit max-w-[280px] px-5 text-sm text-black dark:text-background dark:bg-foreground bg-input font-normal rounded-tr-none">
+          <div className="text-start inline-block rounded-xl p-3 overflow-hidden w-fit max-w-[280px] px-5 text-sm text-black bg-input font-normal rounded-tr-none">
             {chat.message}
           </div>
         </div>
diff --git a/src/frontend/src/components/chatComponent/chatTrigger/index.tsx b/src/frontend/src/components/chatComponent/chatTrigger/index.tsx
index d05e08769..2297cd2f7 100644
--- a/src/frontend/src/components/chatComponent/chatTrigger/index.tsx
+++ b/src/frontend/src/components/chatComponent/chatTrigger/index.tsx
@@ -36,7 +36,7 @@ export default function ChatTrigger({ open, setOpen, isBuilt }) {
           side="left"
         >
           <div
-            className="border flex justify-center items-center py-1 px-3 w-12 h-12 rounded-full bg-almost-dark-blue dark:border-muted-foreground cursor-pointer"
+            className="border flex justify-center items-center py-1 px-3 w-12 h-12 rounded-full bg-almost-dark-blue cursor-pointer"
             onClick={handleClick}
           >
             <button>
diff --git a/src/frontend/src/components/codeAreaComponent/index.tsx b/src/frontend/src/components/codeAreaComponent/index.tsx
index 6b12731db..00763508a 100644
--- a/src/frontend/src/components/codeAreaComponent/index.tsx
+++ b/src/frontend/src/components/codeAreaComponent/index.tsx
@@ -46,9 +46,9 @@ export default function CodeAreaComponent({
           }}
           className={
             editNode
-              ? "truncate cursor-pointer placeholder:text-center text-ring block w-full pt-0.5 pb-0.5 form-input dark:bg-foreground dark:medium-low-gray dark:border-muted-foreground rounded-md border-ring border-1 shadow-sm sm:text-sm" +
+              ? "truncate cursor-pointer placeholder:text-center text-ring block w-full pt-0.5 pb-0.5 form-input rounded-md border-ring border-1 shadow-sm bg-transparent sm:text-sm" +
                 INPUT_STYLE
-              : "truncate block w-full text-ring px-3 py-2 rounded-md border border-ring dark:border-foreground shadow-sm sm:text-sm" +
+              : "truncate block w-full text-ring px-3 py-2 rounded-md border border-ring shadow-sm sm:text-sm placeholder:text-muted-foreground" +
                 INPUT_STYLE +
                 (disabled ? " bg-input" : "")
           }
@@ -69,7 +69,7 @@ export default function CodeAreaComponent({
           }}
         >
           {!editNode && (
-            <ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-ring dark:text-medium-low-gray ml-3" />
+            <ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-ring" />
           )}
         </button>
       </div>
diff --git a/src/frontend/src/components/dropdownComponent/index.tsx b/src/frontend/src/components/dropdownComponent/index.tsx
index e422ba861..6871253f4 100644
--- a/src/frontend/src/components/dropdownComponent/index.tsx
+++ b/src/frontend/src/components/dropdownComponent/index.tsx
@@ -31,13 +31,13 @@ export default function Dropdown({
               <Listbox.Button
                 className={
                   editNode
-                    ? "relative pr-8 placeholder:text-center block w-full pt-0.5 pb-0.5 form-input dark:bg-foreground dark:text-medium-low-gray dark:border-muted-foreground rounded-md shadow-sm sm:text-sm border-ring border-1" +
+                    ? "relative pr-8 placeholder:text-center block w-full pt-0.5 pb-0.5 form-input rounded-md shadow-sm sm:text-sm border-ring border-1 bg-transparent" +
                       INPUT_STYLE
-                      : "ring-1 ring-ring w-full py-2 pl-3 pr-10 text-left dark:focus:ring-offset-2 dark:focus:ring-offset-foreground dark:focus:ring-1 dark:focus:ring-muted-foreground dark:focus-visible:ring-foreground dark:focus-visible:ring-offset-2 focus-visible:outline-none dark:bg-foreground dark:text-medium-low-gray dark:border-muted-foreground rounded-md border-ring shadow-sm sm:text-sm" +
+                      : "ring-1 ring-ring placeholder:text-muted-foreground w-full py-2 pl-3 pr-10 text-left focus-visible:outline-none rounded-md border-ring shadow-sm sm:text-sm" +
                       INPUT_STYLE
                 }
               >
-                <span className="block truncate w-full">{internalValue}</span>
+                <span className="block bg-background truncate w-full">{internalValue}</span>
                 <span
                   className={
                     "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2"
@@ -70,11 +70,11 @@ export default function Dropdown({
                       className={({ active }) =>
                         classNames(
                           active
-                            ? " bg-accent dark:bg-background dark:text-ring"
+                            ? " bg-accent"
                             : "",
                           editNode
-                            ? "relative cursor-default select-none py-0.5 pl-3 pr-12 dark:text-medium-low-gray dark:bg-foreground"
-                            : "relative cursor-default select-none py-2 pl-3 pr-9 dark:text-medium-low-gray dark:bg-foreground"
+                            ? "relative cursor-default select-none py-0.5 pl-3 pr-12"
+                            : "relative cursor-default select-none py-2 pl-3 pr-9"
                         )
                       }
                       value={option}
@@ -93,15 +93,15 @@ export default function Dropdown({
                           {selected ? (
                             <span
                               className={classNames(
-                                active ? "text-background dark:text-black" : "",
+                                active ? "text-background " : "",
                                 "absolute inset-y-0 right-0 flex items-center pr-4"
                               )}
                             >
                               <CheckIcon
                                 className={
                                   active
-                                    ? "h-5 w-5 dark:text-black text-black"
-                                    : "h-5 w-5 dark:text-background text-black"
+                                    ? "h-5 w-5 text-black"
+                                    : "h-5 w-5 text-black"
                                 }
                                 aria-hidden="true"
                               />
diff --git a/src/frontend/src/components/floatComponent/index.tsx b/src/frontend/src/components/floatComponent/index.tsx
index bf723f2d2..65b5166f2 100644
--- a/src/frontend/src/components/floatComponent/index.tsx
+++ b/src/frontend/src/components/floatComponent/index.tsx
@@ -56,11 +56,11 @@ export default function FloatComponent({
         value={myValue}
         className={
           editNode
-            ? "focus:placeholder-transparent text-center placeholder:text-center border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-foreground dark:text-medium-low-gray dark:border-muted-foreground rounded-md border-ring shadow-sm sm:text-sm" +
+            ? "focus:placeholder-transparent text-center placeholder:text-center border-1 block w-full pt-0.5 pb-0.5 form-input rounded-md border-ring shadow-sm sm:text-sm bg-transparent placeholder:text-muted-foreground" +
               INPUT_STYLE
-            : "focus:placeholder-transparent block w-full form-input dark:bg-foreground dark:text-medium-low-gray dark:border-muted-foreground rounded-md border-ring shadow-sm ring-offset-input sm:text-sm" +
+            : "focus:placeholder-transparent block w-full form-input placeholder:text-muted-foreground bg-background rounded-md border-ring shadow-sm ring-offset-input sm:text-sm" +
               INPUT_STYLE +
-              (disabled ? " bg-input dark:bg-foreground" : "")
+              (disabled ? " bg-input" : "")
         }
         placeholder={
           editNode ? "Number 0 to 1" : "Type a number from zero to one"
diff --git a/src/frontend/src/components/headerComponent/components/menuBar/index.tsx b/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
index edf19283d..86da64fc6 100644
--- a/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
+++ b/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
@@ -70,7 +70,7 @@ export const MenuBar = ({ flows, tabId }) => {
                 openPopUp(<FlowSettingsModal />);
               }}
             >
-              <Settings2 className="w-4 h-4 mr-2 dark:text-medium-low-gray" />
+              <Settings2 className="w-4 h-4 mr-2 " />
               Settings
             </DropdownMenuItem>
             <DropdownMenuItem
@@ -78,7 +78,7 @@ export const MenuBar = ({ flows, tabId }) => {
                 undo();
               }}
             >
-              <Undo className="w-4 h-4 mr-2 dark:text-medium-low-gray" />
+              <Undo className="w-4 h-4 mr-2 " />
               Undo
             </DropdownMenuItem>
             <DropdownMenuItem
@@ -86,7 +86,7 @@ export const MenuBar = ({ flows, tabId }) => {
                 redo();
               }}
             >
-              <Redo className="w-4 h-4 mr-2 dark:text-medium-low-gray" />
+              <Redo className="w-4 h-4 mr-2 " />
               Redo
             </DropdownMenuItem>
             <DropdownMenuSeparator />
diff --git a/src/frontend/src/components/headerComponent/index.tsx b/src/frontend/src/components/headerComponent/index.tsx
index 3b0700a21..88f45c6eb 100644
--- a/src/frontend/src/components/headerComponent/index.tsx
+++ b/src/frontend/src/components/headerComponent/index.tsx
@@ -60,7 +60,7 @@ export default function Header() {
           <Button
             asChild
             variant="outline"
-            className="text-muted-foreground dark:text-medium-low-gray "
+            className="text-muted-foreground  "
           >
             <a
               href="https://github.com/logspace-ai/langflow"
@@ -72,8 +72,8 @@ export default function Header() {
               Join The Community
             </a>
           </Button>
-          {/* <button
-            className="text-gray-600 hover:text-gray-500 dark:text-gray-300 dark:hover:text-gray-200"
+          <button
+            className="text-gray-600 hover:text-gray-500"
             onClick={() => {
               setDark(!dark);
             }}
@@ -83,9 +83,9 @@ export default function Header() {
             ) : (
               <MoonIcon className="h-5 w-5" />
             )}
-          </button> */}
+          </button>
           <button
-            className="text-muted-foreground hover:text-ring dark:text-medium-low-gray dark:hover:text-light-gray relative"
+            className="text-muted-foreground hover:text-ring relative"
             onClick={(event: React.MouseEvent<HTMLElement>) => {
               setNotificationCenter(false);
               const { top, left } = (
diff --git a/src/frontend/src/components/inputComponent/index.tsx b/src/frontend/src/components/inputComponent/index.tsx
index d9209479e..daef2687b 100644
--- a/src/frontend/src/components/inputComponent/index.tsx
+++ b/src/frontend/src/components/inputComponent/index.tsx
@@ -46,11 +46,11 @@ export default function InputComponent({
           if (disableCopyPaste) setDisableCopyPaste(false);
         }}
         className={classNames(
-          "block w-full pr-12 form-input dark:bg-foreground dark:text-medium-low-gray dark:border-muted-foreground rounded-md border-ring shadow-sm sm:text-sm focus:placeholder-transparent",
-          disabled ? " bg-input dark:bg-foreground" : "",
+          "block w-full pr-12 form-input rounded-md bg-background border-ring shadow-sm sm:text-sm focus:placeholder-transparent placeholder:text-muted-foreground",
+          disabled ? " bg-input" : "",
           password && !pwdVisible && myValue !== "" ? "password" : "",
           editNode
-            ? "border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-foreground dark:text-medium-low-gray dark:border-muted-foreground rounded-md border-ring shadow-sm sm:text-sm text-center" +
+            ? "border-1 block w-full pt-0.5 pb-0.5 form-input rounded-md border-ring shadow-sm sm:text-sm text-center" +
                 INPUT_STYLE
             : "ring-offset-input" + INPUT_STYLE,
           password && editNode ? "pr-8" : "pr-3"
diff --git a/src/frontend/src/components/inputFileComponent/index.tsx b/src/frontend/src/components/inputFileComponent/index.tsx
index 6c797ea52..57daca8cc 100644
--- a/src/frontend/src/components/inputFileComponent/index.tsx
+++ b/src/frontend/src/components/inputFileComponent/index.tsx
@@ -78,9 +78,9 @@ export default function InputFileComponent({
           onClick={handleButtonClick}
           className={
             editNode
-              ? "truncate placeholder:text-center text-ring block w-full pt-0.5 pb-0.5 form-input dark:bg-foreground dark:text-medium-low-gray dark:border-muted-foreground rounded-md border-ring shadow-sm sm:text-sm border-1" +
+              ? "truncate placeholder:text-center text-ring block w-full pt-0.5 pb-0.5 form-input   rounded-md border-ring shadow-sm sm:text-sm border-1" +
                 INPUT_STYLE
-              : "truncate block w-full text-ring dark:text-medium-low-gray px-3 py-2 rounded-md border border-ring dark:border-foreground shadow-sm sm:text-sm" +
+              : "truncate block w-full text-ring  px-3 py-2 rounded-md border border-ring shadow-sm sm:text-sm" +
                 INPUT_STYLE +
                 (disabled ? " bg-input" : "")
           }
diff --git a/src/frontend/src/components/inputListComponent/index.tsx b/src/frontend/src/components/inputListComponent/index.tsx
index 366461b07..c0cb5c023 100644
--- a/src/frontend/src/components/inputListComponent/index.tsx
+++ b/src/frontend/src/components/inputListComponent/index.tsx
@@ -32,9 +32,9 @@ export default function InputListComponent({
             value={i}
             className={
               editNode
-                ? "border-[1px]  truncate cursor-pointer text-center placeholder:text-center text-ring block w-full pt-0.5 pb-0.5 form-input dark:bg-foreground dark:text-medium-low-gray dark:border-muted-foreground rounded-md border-ring shadow-sm sm:text-sm" +
+                ? "border-[1px]  truncate cursor-pointer text-center placeholder:text-center text-ring block w-full pt-0.5 pb-0.5 form-input rounded-md border-ring shadow-sm sm:text-sm" +
                   INPUT_STYLE
-                : "block w-full form-input rounded-md border-ring shadow-sm focus:border-ring focus:ring-ring sm:text-sm" +
+                : "block w-full form-input bg-background rounded-md border-ring shadow-sm focus:border-ring focus:ring-ring sm:text-sm" +
                   (disabled ? " bg-input" : "") +
                   "focus:placeholder-transparent"
             }
diff --git a/src/frontend/src/components/intComponent/index.tsx b/src/frontend/src/components/intComponent/index.tsx
index 82f8c7f19..ba743a0d4 100644
--- a/src/frontend/src/components/intComponent/index.tsx
+++ b/src/frontend/src/components/intComponent/index.tsx
@@ -70,13 +70,13 @@ export default function IntComponent({
         value={myValue}
         className={
           editNode
-            ? "focus:placeholder-transparent text-center placeholder:text-center border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-foreground dark:text-medium-low-gray dark:border-muted-foreground rounded-md border-ring shadow-sm sm:text-sm" +
+            ? "focus:placeholder-transparent text-center placeholder:text-center border-1 block w-full pt-0.5 pb-0.5 form-input rounded-md border-ring shadow-sm sm:text-sm bg-transparent placeholder:text-muted-foreground" +
               INPUT_STYLE
-            : "focus:placeholder-transparent block w-full form-input dark:bg-foreground dark:border-muted-foreground dark:text-medium-low-gray rounded-md border-ring shadow-sm ring-offset-background sm:text-sm" +
+            : "focus:placeholder-transparent block w-full form-input bg-background rounded-md border-ring shadow-sm ring-offset-background sm:text-sm placeholder:text-muted-foreground" +
               INPUT_STYLE +
-              (disabled ? " bg-input dark:bg-foreground" : "")
+              (disabled ? " bg-input" : "")
         }
-        placeholder={editNode ? "Integer number" : "Type a integer number"}
+        placeholder={editNode ? "Integer number" : "Type an integer number"}
         onChange={(e) => {
           setMyValue(e.target.value);
           onChange(e.target.value);
diff --git a/src/frontend/src/components/loadingComponent/index.tsx b/src/frontend/src/components/loadingComponent/index.tsx
index 75da40b0c..74fb1bf1e 100644
--- a/src/frontend/src/components/loadingComponent/index.tsx
+++ b/src/frontend/src/components/loadingComponent/index.tsx
@@ -7,7 +7,7 @@ export default function LoadingComponent({ remSize }: LoadingComponentProps) {
     <div role="status" className="w-min m-auto">
       <svg
         aria-hidden="true"
-        className={`w-${remSize} h-${remSize} mr-2 text-muted animate-spin dark:text-muted-foreground fill-almost-medium-blue`}
+        className={`w-${remSize} h-${remSize} mr-2 text-muted animate-spin  fill-almost-medium-blue`}
         viewBox="0 0 100 101"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
diff --git a/src/frontend/src/components/promptComponent/index.tsx b/src/frontend/src/components/promptComponent/index.tsx
index e2daec330..8bea98ca3 100644
--- a/src/frontend/src/components/promptComponent/index.tsx
+++ b/src/frontend/src/components/promptComponent/index.tsx
@@ -49,9 +49,9 @@ export default function PromptAreaComponent({
           }}
           className={
             editNode
-              ? "cursor-pointer truncate placeholder:text-center text-ring border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-foreground dark:text-medium-low-gray dark:border-muted-foreground rounded-md border-ring shadow-sm sm:text-sm" +
+              ? "cursor-pointer truncate placeholder:text-center text-ring border-1 block w-full pt-0.5 pb-0.5 form-input   rounded-md border-ring shadow-sm sm:text-sm" +
                 INPUT_STYLE
-              : "truncate block w-full text-ring px-3 py-2 rounded-md border border-ring dark:border-foreground shadow-sm sm:text-sm" +
+              : "truncate block w-full text-ring px-3 py-2 rounded-md border border-ring shadow-sm sm:text-sm" +
                 (disabled ? " bg-input" : "")
           }
         >
@@ -74,7 +74,7 @@ export default function PromptAreaComponent({
           }}
         >
           {!editNode && (
-            <ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-ring dark:text-medium-low-gray" />
+            <ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-ring " />
           )}
         </button>
       </div>
diff --git a/src/frontend/src/components/textAreaComponent/index.tsx b/src/frontend/src/components/textAreaComponent/index.tsx
index 959348877..e203237d8 100644
--- a/src/frontend/src/components/textAreaComponent/index.tsx
+++ b/src/frontend/src/components/textAreaComponent/index.tsx
@@ -51,9 +51,9 @@ export default function TextAreaComponent({
           }}
           className={
             editNode
-              ? "truncate cursor-pointer placeholder:text-center text-ring border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-foreground dark:text-medium-low-gray dark:border-muted-foreground rounded-md border-ring shadow-sm sm:text-sm" +
+              ? "truncate cursor-pointer placeholder:text-center text-ring border-1 block w-full pt-0.5 pb-0.5 form-input   rounded-md border-ring bg-transparent shadow-sm sm:text-sm" +
                 INPUT_STYLE
-              : "truncate block w-full text-ring dark:text-muted px-3 py-2 rounded-md border border-ring dark:border-foreground shadow-sm sm:text-sm" +
+              : "truncate block w-full text-ring px-3 py-2 rounded-md border border-ring shadow-sm sm:text-sm" +
                 (disabled ? " bg-input" : "")
           }
         >
@@ -76,7 +76,7 @@ export default function TextAreaComponent({
           }}
         >
           {!editNode && (
-            <ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-ring dark:text-medium-low-gray" />
+            <ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-ring " />
           )}
         </button>
       </div>
diff --git a/src/frontend/src/components/toggleComponent/index.tsx b/src/frontend/src/components/toggleComponent/index.tsx
index fd47e8c1e..20705107f 100644
--- a/src/frontend/src/components/toggleComponent/index.tsx
+++ b/src/frontend/src/components/toggleComponent/index.tsx
@@ -31,8 +31,8 @@ export default function ToggleComponent({
             enabled ? "translate-x-5" : "translate-x-0",
             "pointer-events-none relative inline-block h-5 w-5 transform rounded-full  shadow ring-0 transition duration-200 ease-in-out",
             disabled
-              ? "bg-input dark:bg-muted-foreground"
-              : "bg-background dark:bg-foreground"
+              ? "bg-input "
+              : "bg-background"
           )}
         >
           <span
diff --git a/src/frontend/src/components/ui/SwitchStyles.css b/src/frontend/src/components/ui/SwitchStyles.css
new file mode 100644
index 000000000..d54dac065
--- /dev/null
+++ b/src/frontend/src/components/ui/SwitchStyles.css
@@ -0,0 +1,8 @@
+.SwitchRoot[data-state='checked'] {
+    background-color: blue !important;
+  }
+  
+  .SwitchRoot[data-state='unchecked'] {
+    background-color: red !important;
+  }
+  
\ No newline at end of file
diff --git a/src/frontend/src/components/ui/switch.tsx b/src/frontend/src/components/ui/switch.tsx
index 122057cfb..0bdc32b45 100644
--- a/src/frontend/src/components/ui/switch.tsx
+++ b/src/frontend/src/components/ui/switch.tsx
@@ -4,13 +4,15 @@ import * as React from "react";
 import * as SwitchPrimitives from "@radix-ui/react-switch";
 import { cn } from "../../utils";
 
+import "./SwitchStyles.css"; // Import the new stylesheet
+
 const Switch = React.forwardRef<
   React.ElementRef<typeof SwitchPrimitives.Root>,
   React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
 >(({ className, ...props }, ref) => (
   <SwitchPrimitives.Root
     className={cn(
-      "peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      "SwitchRoot peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50",
       className
     )}
     {...props}
@@ -25,4 +27,4 @@ const Switch = React.forwardRef<
 ));
 Switch.displayName = SwitchPrimitives.Root.displayName;
 
-export { Switch };
+export { Switch };
\ No newline at end of file
diff --git a/src/frontend/src/constants.tsx b/src/frontend/src/constants.tsx
index 64a64b7d6..aafd4d212 100644
--- a/src/frontend/src/constants.tsx
+++ b/src/frontend/src/constants.tsx
@@ -147,7 +147,7 @@ export const EXPORT_CODE_DIALOG =
  * @constant
  */
 export const INPUT_STYLE =
-  " focus:ring-1 focus:ring-offset-1 focus:ring-ring focus:outline-none ";
+  " focus:ring-1 focus:ring-offset-1 focus:ring-offset-muted-foreground focus:ring-ring focus:outline-none";
 
 
 /**
diff --git a/src/frontend/src/contexts/tabsContext.tsx b/src/frontend/src/contexts/tabsContext.tsx
index 09eefd69c..5f2b29578 100644
--- a/src/frontend/src/contexts/tabsContext.tsx
+++ b/src/frontend/src/contexts/tabsContext.tsx
@@ -436,8 +436,8 @@ export function TabsProvider({ children }: { children: ReactNode }) {
           style: { stroke: "inherit" },
           className:
             targetHandle.split("|")[0] === "Text"
-              ? "stroke-gray-800 dark:stroke-gray-300"
-              : "stroke-gray-900 dark:stroke-gray-200",
+              ? "stroke-gray-800 "
+              : "stroke-gray-900 ",
           animated: targetHandle.split("|")[0] === "Text",
           selected: false,
         },
@@ -501,8 +501,8 @@ export function TabsProvider({ children }: { children: ReactNode }) {
       edge.style = { stroke: "inherit" };
       edge.className =
         edge.targetHandle.split("|")[0] === "Text"
-          ? "stroke-gray-800 dark:stroke-gray-300"
-          : "stroke-gray-900 dark:stroke-gray-200";
+          ? "stroke-gray-800 "
+          : "stroke-gray-900 ";
       edge.animated = edge.targetHandle.split("|")[0] === "Text";
     });
   };
diff --git a/src/frontend/src/index.1.css b/src/frontend/src/index.1.css
new file mode 100644
index 000000000..3a95ed6eb
--- /dev/null
+++ b/src/frontend/src/index.1.css
@@ -0,0 +1,225 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+	  --background: 0 0% 100%; /* hsl(0 0% 100%) */
+	  --foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
+    
+	  --muted: 210 40% 96.1%; /* hsl(210 40% 96%) */
+	  --muted-foreground: 215.4 16.3% 46.9%; /* hsl(215 16% 46%) */
+    
+	  --popover: 0 0% 100%; /* hsl(0 0% 100%) */
+	  --popover-foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
+
+	  --card: 0 0% 100%; /* hsl(0 0% 100%) */
+	  --card-foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
+    
+	  --border: 214.3 31.8% 91.4%; /* hsl(214 32% 91%) */
+	  --input: 214.3 31.8% 91.4%; /* hsl(214 32% 91%) */
+    
+	  --primary: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
+	  --primary-foreground: 210 40% 98%; /* hsl(210 40% 98%) */
+    
+	  --secondary: 210 40% 96.1%; /* hsl(210 40% 96%) */
+	  --secondary-foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
+    
+	  --accent: 210 40% 96.1%; /* hsl(210 40% 96%) */
+	  --accent-foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
+    
+	  --destructive: 0 100% 50%; /* hsl(0 100% 50%) */
+	  --destructive-foreground: 210 40% 98%; /* hsl(210 40% 98%) */
+    
+    
+	  --ring: 215 20.2% 65.1%; /* hsl(215 20% 65%) */
+    
+    --radius: 0.5rem;
+    
+    
+    --build-background: #E2E7EE; /* hsl(215, 26%, 91%) */
+    
+    --round-btn-shadow: #00000063;
+    
+    --hover-btn-background: #242f47;
+    
+    --build-trigger: 	#dc735b; /* hsl(11, 65%, 61%) */
+    --chat-trigger: #dbeafe; /* tailwind blue 100 USED IN CHAT BACKGROUND */
+
+    --error-background: #fef2f2; /* tailwind red 50 USED IN START ERROR MESSAGE BG light-red */
+    --error-foreground: #991b1b; /* tailwind red 800 USED IN START ERROR MESSAGE TEXT almost-dark-red */
+
+    --status-red: #ef4444; /* tailwind red 500 medium-red*/
+    --status-yellow: #eab308; /* tailwind yellow 500 medium-yellow*/
+    --status-green: #4ade80; /* tailwind green 400 medium-green*/
+
+    --success-background: #f0fdf4; /* tailwind green 50 USED IN SUCCESS MSG light-green*/ 
+    --success-foreground: #14532d; /* tailwind green 900 USED IN SUCCESS MSG dark-green */
+
+    /* --high-indigo: #4338ca;  tailwind indigo 700 
+  --medium-indigo: #6366f1;  tailwind indigo 500 
+  --medium-dark-blue:#1d4ed8;  tailwind blue 700 Change in component (--ring)
+  --medium-high-indigo: #4f46e5;  tailwind indigo 600 
+  --medium-emerald: #10b981;  tailwind emerald 500 Unused
+  --medium-dark-green: #166534;  tailwind green 800 Unused
+  --almost-medium-green: #22c55e;  tailwind green 500 Unused
+  --light-slate: #cbd5e1;  tailwind slate 300 UNUSED
+  --light-blue: #eff6ff;  tailwind blue 50
+  --dark-blue: #1e3a8a;  tailwind blue 900
+  --medium-blue: #60a5fa;  tailwind blue 400
+  --almost-dark-blue:#3b82f6;  tailwind blue 500
+  --almost-light-blue: #dbeafe;   tailwind blue 100 */
+  }
+
+	.dark {
+	  --background: 224 71% 4%; /* hsl(224 71% 4%) */
+	  --foreground: 213 31% 91%; /* hsl(213 31% 91%) */
+
+	  --muted: 223 47% 11%; /* hsl(223 47% 11%) */
+	  --muted-foreground: 215.4 16.3% 56.9%; /* hsl(215 16% 56%) */
+
+	  --popover: 224 71% 4%; /* hsl(224 71% 4%) */
+	  --popover-foreground: 215 20.2% 65.1%; /* hsl(215 20% 65%) */
+
+	  --card: 224 71% 4%; /* hsl(224 71% 4%) */
+	  --card-foreground: 213 31% 91%; /* hsl(213 31% 91%) */
+
+	  --border: 216 34% 17%; /* hsl(216 34% 17%) */
+	  --input: 216 34% 17%; /* hsl(216 34% 17%) */
+
+	  --primary: 210 40% 98%; /* hsl(210 40% 98%) */
+	  --primary-foreground: 222.2 47.4% 1.2%; /* hsl(222 47% 1%) */
+
+	  --secondary: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
+	  --secondary-foreground: 210 40% 98%; /* hsl(210 40% 98%) */
+
+	  --accent: 216 34% 17%; /* hsl(216 34% 17%) */
+	  --accent-foreground: 210 40% 98%; /* hsl(210 40% 98%) */
+
+	  --destructive: 0 63% 31%; /* hsl(0 63% 31%) */
+	  --destructive-foreground: 210 40% 98%; /* hsl(210 40% 98%) */
+
+	  --ring: 216 34% 17%; /* hsl(216 34% 17%) */
+
+    --radius: 0.5rem;
+
+    --build-trigger: 11, 65% 61%; /* hsl(11, 65%, 61%) */
+  }
+}
+
+:root {
+  --background: 0 0% 100%; /* hsl(0 0% 100%) */
+  --foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
+  --muted: 210 40% 98%; /* hsl(210 40% 98%) */
+  --muted-foreground: 215.4 16.3% 46.9%; /* hsl(215 16% 46%) */
+  --popover: 0 0% 100%; /* hsl(0 0% 100%) */
+  --popover-foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
+  --card: 0 0% 100%; /* hsl(0 0% 100%) */
+  --card-foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
+  --border: 214.3 21.8% 91.4%; /* hsl(214 32% 91%) */
+  --input: 214.3 21.8% 91.4%; /* hsl(214 32% 91%) */
+  --primary: 222.2 27.0% 11.2%; /* hsl(222 27% 18%) */
+  --primary-foreground: 210 40% 98%; /* hsl(210 40% 98%) */
+  --secondary: 210 40% 96.1%; /* hsl(210 40% 96%) */
+  --secondary-foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
+  --accent: 210 30% 96.1%; /* hsl(210 30% 96%) */
+  --accent-foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
+  --destructive: 0 100% 50%; /* hsl(0 100% 50%) */
+  --destructive-foreground: 210 40% 98%; /* hsl(210 40% 98%) */
+  --radius: 0.5rem;
+  --ring: 215 20.2% 65.1%; /* hsl(215 20% 65%) */
+
+  --round-btn-shadow: #00000063;
+  --hover-btn-background: #242f47;
+
+  --build-background: #E2E7EE;
+  --build-trigger: 	#dc735b; /* hsl(11, 65%, 61%) */
+  --chat-trigger: #dbeafe; /* tailwind blue 100 USED IN CHAT BACKGROUND */
+
+  --error-background: #fef2f2; /* tailwind red 50 USED IN START ERROR MESSAGE BG light-red */
+  --error-foreground: #991b1b; /* tailwind red 800 USED IN START ERROR MESSAGE TEXT almost-dark-red */
+
+  --status-red: #ef4444; /* tailwind red 500 medium-red*/
+  --status-yellow: #eab308; /* tailwind yellow 500 medium-yellow*/
+  --status-green: #4ade80; /* tailwind green 400 medium-green*/
+
+  --success-background: #f0fdf4; /* tailwind green 50 USED IN SUCCESS MSG light-green*/ 
+  --success-foreground: #14532d; /* tailwind green 900 USED IN SUCCESS MSG dark-green */
+  --high-indigo: #4338ca;  /*tailwind indigo 700*/ 
+  --medium-indigo: #6366f1;  /* tailwind indigo 500 */
+  --medium-dark-blue:#1d4ed8; /* tailwind blue 700 Change in component (--ring)*/
+}
+
+.dark {
+  --background: 224 71% 4%; /* hsl(224 71% 4%) */
+  --foreground: 213 31% 0%; /* hsl(213 31% 91%) */
+  --muted: 223 47% 11%; /* hsl(223 47% 11%) */
+  --muted-foreground: 215.4 16.3% 56.9%; /* hsl(215 16% 56%) */
+  --popover: 224 71% 4%; /* hsl(224 71% 4%) */
+  --popover-foreground: 215 20.2% 65.1%; /* hsl(215 20% 65%) */
+  --card: 224 71% 4%; /* hsl(224 71% 4%) */
+  --card-foreground: 213 31% 91%; /* hsl(213 31% 91%) */
+  --border: 216 34% 0%; /* hsl(216 34% 17%) */
+  --input: 216 34% 17%; /* hsl(216 34% 17%) */
+  --primary: 210 40% 98%; /* hsl(210 40% 98%) */
+  --primary-foreground: 222.2 47.4% 1.2%; /* hsl(222 47% 1%) */
+  --secondary: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
+  --secondary-foreground: 210 40% 98%; /* hsl(210 40% 98%) */
+  --accent: 216 34% 17%; /* hsl(216 34% 17%) */
+  --accent-foreground: 210 40% 98%; /* hsl(210 40% 98%) */
+  --destructive: 0 63% 31%; /* hsl(0 63% 31%) */
+  --destructive-foreground: 210 40% 98%; /* hsl(210 40% 98%) */
+  --ring: 216 34% 0%; /* hsl(216 34% 17%) */
+  --radius: 0.5rem;
+
+  --round-btn-shadow: #00000063;
+  --hover-btn-background: #242f47;
+
+  --build-background: #E2E7EE;
+  --build-trigger: 	#dc735b; /* hsl(11, 65%, 61%) */
+  --chat-trigger: #dbeafe; /* tailwind blue 100 USED IN CHAT BACKGROUND */
+
+  --error-background: #fef2f2; /* tailwind red 50 USED IN START ERROR MESSAGE BG light-red */
+  --error-foreground: #991b1b; /* tailwind red 800 USED IN START ERROR MESSAGE TEXT almost-dark-red */
+
+  --status-red: #ef4444; /* tailwind red 500 medium-red*/
+  --status-yellow: #eab308; /* tailwind yellow 500 medium-yellow*/
+  --status-green: #4ade80; /* tailwind green 400 medium-green*/
+
+  --success-background: #f0fdf4; /* tailwind green 50 USED IN SUCCESS MSG light-green*/ 
+  --success-foreground: #14532d; /* tailwind green 900 USED IN SUCCESS MSG dark-green */
+  --high-indigo: #4338ca;  /*tailwind indigo 700*/ 
+  --medium-indigo: #6366f1;  /* tailwind indigo 500 */
+  --medium-dark-blue:#1d4ed8; /* tailwind blue 700 Change in component (--ring)*/
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+    font-feature-settings: "rlig" 1, "calt" 1;
+  }
+}
+
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+    monospace;
+}
+
+/* The style below sets the cursor property of the element with the class .react-flow__pane to the default cursor.
+The cursor: default; property value restores the browser's default cursor style for the targeted element. By applying this style, the element will no longer have a custom cursor appearance such as "grab" or any other custom cursor defined elsewhere in the application. Instead, it will revert to the default cursor style determined by the browser, typically an arrow-shaped cursor. */
+.react-flow__pane {
+  cursor: default;
+}
\ No newline at end of file
diff --git a/src/frontend/src/index.css b/src/frontend/src/index.css
index 6673823ca..8cdcfae10 100644
--- a/src/frontend/src/index.css
+++ b/src/frontend/src/index.css
@@ -128,10 +128,11 @@
   --destructive-foreground: 210 40% 98%; /* hsl(210 40% 98%) */
   --radius: 0.5rem;
   --ring: 215 20.2% 65.1%; /* hsl(215 20% 65%) */
-  --build-background: #E2E7EE; /*	hsl(215, 26%, 91%) */
+
   --round-btn-shadow: #00000063;
   --hover-btn-background: #242f47;
 
+  --build-background: #E2E7EE;
   --build-trigger: 	#dc735b; /* hsl(11, 65%, 61%) */
   --chat-trigger: #dbeafe; /* tailwind blue 100 USED IN CHAT BACKGROUND */
 
@@ -147,59 +148,49 @@
   --high-indigo: #4338ca;  /*tailwind indigo 700*/ 
   --medium-indigo: #6366f1;  /* tailwind indigo 500 */
   --medium-dark-blue:#1d4ed8; /* tailwind blue 700 Change in component (--ring)*/
-  /*
-  --medium-high-indigo: #4f46e5;  tailwind indigo 600 
-  --medium-emerald: #10b981;  tailwind emerald 500 Unused
-  --medium-dark-green: #166534;  tailwind green 800 Unused
-  --almost-medium-green: #22c55e;  tailwind green 500 Unused
-  --light-slate: #cbd5e1;  tailwind slate 300 UNUSED
-  --light-blue: #eff6ff;  tailwind blue 50
-  --dark-blue: #1e3a8a;  tailwind blue 900
-  --medium-blue: #60a5fa;  tailwind blue 400
-  --almost-dark-blue:#3b82f6;  tailwind blue 500
-  --almost-light-blue: #dbeafe;   tailwind blue 100 */
 }
 
 .dark {
-  -background: 224 71% 4%;
-  /* hsl(224 71% 4%) */
-  -foreground: 213 31% 91%;
-  /* hsl(213 31% 91%) */
-  -muted: 223 47% 11%;
-  /* hsl(223 47% 11%) */
-  -muted-foreground: 215.4 16.3% 56.9%;
-  /* hsl(215 16% 56%) */
-  -popover: 224 71% 4%;
-  /* hsl(224 71% 4%) */
-  -popover-foreground: 215 20.2% 65.1%;
-  /* hsl(215 20% 65%) */
-  -card: 224 71% 4%;
-  /* hsl(224 71% 4%) */
-  -card-foreground: 213 31% 91%;
-  /* hsl(213 31% 91%) */
-  -border: 216 34% 17%;
-  /* hsl(216 34% 17%) */
-  -input: 216 34% 17%;
-  /* hsl(216 34% 17%) */
-  -primary: 210 40% 98%;
-  /* hsl(210 40% 98%) */
-  -primary-foreground: 222.2 47.4% 1.2%;
-  /* hsl(222 47% 1%) */
-  -secondary: 222.2 47.4% 11.2%;
-  /* hsl(222 47% 11%) */
-  -secondary-foreground: 210 40% 98%;
-  /* hsl(210 40% 98%) */
-  -accent: 216 34% 17%;
-  /* hsl(216 34% 17%) */
-  -accent-foreground: 210 40% 98%;
-  /* hsl(210 40% 98%) */
-  -destructive: 0 63% 31%;
-  /* hsl(0 63% 31%) */
-  -destructive-foreground: 210 40% 98%;
-  /* hsl(210 40% 98%) */
-  -ring: 216 34% 17%;
-  /* hsl(216 34% 17%) */
-  -radius: 0.5rem;
+  --background: 224 71% 0%; /* hsl(224 71% 4%) */
+  --foreground: 213 31% 0%; /* hsl(213 31% 91%) */
+  --muted: 223 47% 0%; /* hsl(223 47% 11%) */
+  --muted-foreground: 215.4 16.3% 0%; /* hsl(215 16% 56%) */
+  --popover: 224 71% 0%; /* hsl(224 71% 4%) */
+  --popover-foreground: 215 20.2% 0%; /* hsl(215 20% 65%) */
+  --card: 224 71% 0%; /* hsl(224 71% 4%) */
+  --card-foreground: 213 31% 0%; /* hsl(213 31% 91%) */
+  --border: 216 34% 0%; /* hsl(216 34% 17%) */
+  --input: 216 34% 0%; /* hsl(216 34% 17%) */
+  --primary: 210 40% 0%; /* hsl(210 40% 98%) */
+  --primary-foreground: 222.2 47.4% 0%; /* hsl(222 47% 1%) */
+  --secondary: 222.2 47.4% 0%; /* hsl(222 47% 11%) */
+  --secondary-foreground: 210 40% 0%; /* hsl(210 40% 98%) */
+  --accent: 216 34% 0%; /* hsl(216 34% 17%) */
+  --accent-foreground: 210 40% 0%; /* hsl(210 40% 98%) */
+  --destructive: 0 63% 0%; /* hsl(0 63% 31%) */
+  --destructive-foreground: 210 40% 0%; /* hsl(210 40% 98%) */
+  --ring: 216 34% 0%; /* hsl(216 34% 17%) */
+  --radius: 0.5rem;
+
+  --round-btn-shadow: #000000;
+  --hover-btn-background: #000000;
+
+  --build-background: #000000;
+  --build-trigger: 	#000000; /* hsl(11, 65%, 61%) */
+  --chat-trigger: #000000; /* tailwind blue 100 USED IN CHAT BACKGROUND */
+
+  --error-background: #000000; /* tailwind red 50 USED IN START ERROR MESSAGE BG light-red */
+  --error-foreground: #000000; /* tailwind red 800 USED IN START ERROR MESSAGE TEXT almost-dark-red */
+
+  --status-red: #000000; /* tailwind red 500 medium-red*/
+  --status-yellow: #000000; /* tailwind yellow 500 medium-yellow*/
+  --status-green: #000000; /* tailwind green 400 medium-green*/
+
+  --success-background: #000000; /* tailwind green 50 USED IN SUCCESS MSG light-green*/ 
+  --success-foreground: #000000; /* tailwind green 900 USED IN SUCCESS MSG dark-green */
+  --high-indigo: #000000;  /*tailwind indigo 700*/ 
+  --medium-indigo: #000000;  /* tailwind indigo 500 */
+  --medium-dark-blue:#000000; /* tailwind blue 700 Change in component (--ring)*/
 }
 
 @layer base {
diff --git a/src/frontend/src/modals/ApiModal/index.tsx b/src/frontend/src/modals/ApiModal/index.tsx
index 09a92b7b1..b8ccb9767 100644
--- a/src/frontend/src/modals/ApiModal/index.tsx
+++ b/src/frontend/src/modals/ApiModal/index.tsx
@@ -89,7 +89,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
           <DialogTitle className="flex items-center">
             <span className="pr-2">Code</span>
             <CodeBracketSquareIcon
-              className="h-6 w-6 text-foreground pl-1 dark:text-background"
+              className="h-6 w-6 text-foreground pl-1"
               aria-hidden="true"
             />
           </DialogTitle>
@@ -109,7 +109,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
             </TabsList>
             <div className="float-right">
               <button
-                className="flex gap-1.5 items-center rounded bg-none p-1 text-xs text-ring dark:text-medium-low-gray"
+                className="flex gap-1.5 items-center rounded bg-none p-1 text-xs text-ring "
                 onClick={copyToClipboard}
               >
                 {isCopied ? <Check size={18} /> : <Clipboard size={15} />}
diff --git a/src/frontend/src/modals/EditNodeModal/index.tsx b/src/frontend/src/modals/EditNodeModal/index.tsx
index 3c429ff02..b2a41964f 100644
--- a/src/frontend/src/modals/EditNodeModal/index.tsx
+++ b/src/frontend/src/modals/EditNodeModal/index.tsx
@@ -93,7 +93,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
               <VariableIcon className="w-5 h-5 pe-1 text-foreground stroke-2">
                 &nbsp;
               </VariableIcon>
-              <span className="text-sm font-semibold text-foreground dark:text-background">
+              <span className="text-sm font-semibold text-foreground">
                 Parameters
               </span>
             </div>
@@ -103,7 +103,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
         <div className="flex w-full max-h-[350px] h-fit">
           <div
             className={classNames(
-              "w-full rounded-lg bg-background dark:bg-foreground border-[1px] border-input",
+              "w-full rounded-lg bg-background border-[1px] border-input",
               nodeLength > limitScrollFieldsModal
                 ? "overflow-scroll overflow-x-hidden custom-scroll"
                 : "overflow-hidden"
@@ -113,7 +113,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
               <div className="flex flex-col gap-5 h-fit">
                 <Table className="table-fixed bg-muted outline-1">
                   <TableHeader className="border-input text-ring text-xs font-medium h-10">
-                    <TableRow className="dark:border-b-muted">
+                    <TableRow className="">
                       <TableHead className="h-7 text-center">PARAM</TableHead>
                       <TableHead className="p-0 h-7 text-center">
                         VALUE
@@ -136,13 +136,13 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
                             data.node.template[t].type === "int")
                       )
                       .map((n, i) => (
-                        <TableRow key={i} className="h-10 dark:border-b-muted">
-                          <TableCell className="p-0 text-center text-foreground dark:text-medium-low-gray text-sm">
+                        <TableRow key={i} className="h-10 ">
+                          <TableCell className="p-0 text-center text-foreground  text-sm">
                             {data.node.template[n].name
                               ? data.node.template[n].name
                               : data.node.template[n].display_name}
                           </TableCell>
-                          <TableCell className="p-0 text-center text-foreground text-xs w-[300px] dark:text-medium-low-gray">
+                          <TableCell className="p-0 text-center text-foreground text-xs w-[300px] ">
                             {data.node.template[n].type === "str" &&
                             !data.node.template[n].options ? (
                               <div className="mx-auto">
diff --git a/src/frontend/src/modals/NodeModal/components/ModalField/index.tsx b/src/frontend/src/modals/NodeModal/components/ModalField/index.tsx
index bc1838478..38f33b34d 100644
--- a/src/frontend/src/modals/NodeModal/components/ModalField/index.tsx
+++ b/src/frontend/src/modals/NodeModal/components/ModalField/index.tsx
@@ -52,7 +52,7 @@ export default function ModalField({
     >
       {display && (
         <div>
-          <span className="mx-2 dark:text-medium-low-gray">{title}</span>
+          <span className="mx-2">{title}</span>
           <span className="text-destructive">{required ? " *" : ""}</span>
         </div>
       )}
diff --git a/src/frontend/src/modals/NodeModal/index.tsx b/src/frontend/src/modals/NodeModal/index.tsx
index 9bc14a716..833969db3 100644
--- a/src/frontend/src/modals/NodeModal/index.tsx
+++ b/src/frontend/src/modals/NodeModal/index.tsx
@@ -45,7 +45,7 @@ export default function NodeModal({ data }: { data: NodeDataType }) {
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-ring dark:bg-muted-foreground dark:bg-opacity-75 bg-opacity-75 transition-opacity" />
+          <div className="fixed inset-0 bg-ring   bg-opacity-75 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-10 overflow-y-auto">
@@ -59,7 +59,7 @@ export default function NodeModal({ data }: { data: NodeDataType }) {
               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-background dark:bg-foreground text-left shadow-xl transition-all sm:my-8 w-[700px]">
+              <Dialog.Panel className="relative flex flex-col justify-between transform h-[600px] overflow-hidden rounded-lg bg-background text-left shadow-xl transition-all sm:my-8 w-[700px]">
                 <div className=" z-50 absolute top-0 right-0 hidden pt-4 pr-4 sm:block">
                   <button
                     type="button"
@@ -84,17 +84,17 @@ export default function NodeModal({ data }: { data: NodeDataType }) {
                     <div className="mt-4 text-center sm:ml-4 sm:text-left">
                       <Dialog.Title
                         as="h3"
-                        className="text-lg font-medium dark:text-background leading-10 text-foreground"
+                        className="text-lg font-medium leading-10 text-foreground"
                       >
                         {data.type}
                       </Dialog.Title>
                     </div>
                   </div>
-                  <div className="h-full w-full bg-input dark:bg-foreground p-4 gap-4 flex flex-row justify-center items-center">
+                  <div className="h-full w-full bg-input p-4 gap-4 flex flex-row justify-center items-center">
                     <div className="flex w-full h-[445px]">
                       <div
                         className={classNames(
-                          "px-4 sm:p-4 w-full rounded-lg bg-background dark:bg-foreground shadow",
+                          "px-4 sm:p-4 w-full rounded-lg bg-background shadow",
                           Object.keys(data.node.template).filter(
                             (t) =>
                               t.charAt(0) !== "_" &&
@@ -143,7 +143,7 @@ export default function NodeModal({ data }: { data: NodeDataType }) {
                       </div>
                     </div>
                   </div>
-                  <div className="bg-input dark:bg-foreground w-full pb-3 flex flex-row-reverse px-4">
+                  <div className="bg-input w-full pb-3 flex flex-row-reverse px-4">
                     <button
                       type="button"
                       className="inline-flex w-full justify-center rounded-md border border-transparent bg-red-500 px-4 py-2 text-base font-medium text-background shadow-sm hover:bg-ring focus:outline-none focus:ring-1 focus:ring-ring focus:ring-offset-1 sm:ml-3 sm:w-auto sm:text-sm"
diff --git a/src/frontend/src/modals/chatModal/chatInput/index.tsx b/src/frontend/src/modals/chatModal/chatInput/index.tsx
index bdf963821..2046e7cda 100644
--- a/src/frontend/src/modals/chatModal/chatInput/index.tsx
+++ b/src/frontend/src/modals/chatModal/chatInput/index.tsx
@@ -44,9 +44,9 @@ export default function ChatInput({
         }}
         className={classNames(
           lockChat
-            ? " bg-input text-black dark:bg-foreground dark:text-medium-low-gray"
-            : "  bg-background-200 text-black dark:bg-foreground dark:text-medium-low-gray",
-          "form-input block w-full custom-scroll rounded-md border-ring dark:border-muted-foreground pr-10 sm:text-sm" +
+            ? " bg-input text-black "
+            : "  bg-background-200 text-black ",
+          "form-input block w-full custom-scroll rounded-md border-ring  pr-10 sm:text-sm" +
             INPUT_STYLE
         )}
         placeholder={"Send a message..."}
@@ -55,12 +55,12 @@ export default function ChatInput({
         <button disabled={lockChat} onClick={() => sendMessage()}>
           {lockChat ? (
             <LockClosedIcon
-              className="h-5 w-5 text-ring  dark:hover:text-medium-low-gray animate-pulse"
+              className="h-5 w-5 text-ring animate-pulse"
               aria-hidden="true"
             />
           ) : (
             <PaperAirplaneIcon
-              className="h-5 w-5 text-ring hover:text-muted-foreground dark:hover:text-medium-low-gray"
+              className="h-5 w-5 text-ring hover:text-muted-foreground"
               aria-hidden="true"
             />
           )}
diff --git a/src/frontend/src/modals/chatModal/chatMessage/index.tsx b/src/frontend/src/modals/chatModal/chatMessage/index.tsx
index f07f6514b..c8b5cfe59 100644
--- a/src/frontend/src/modals/chatModal/chatMessage/index.tsx
+++ b/src/frontend/src/modals/chatModal/chatMessage/index.tsx
@@ -34,8 +34,8 @@ export default function ChatMessage({
       className={classNames(
         "w-full py-2 pl-2 flex",
         chat.isSend
-          ? "bg-background dark:bg-foreground "
-          : "bg-input  dark:bg-foreground"
+          ? "bg-background "
+          : "bg-input"
       )}
     >
       <div
@@ -62,25 +62,25 @@ export default function ChatMessage({
           </div>
         )}
         {chat.isSend && (
-          <UserIcon className="w-6 h-6 -mb-1 text-foreground dark:text-light-gray" />
+          <UserIcon className="w-6 h-6 -mb-1 text-foreground " />
         )}
       </div>
       {!chat.isSend ? (
         <div className="w-full text-start flex items-center">
-          <div className="w-full relative text-start inline-block text-muted-foreground dark:text-medium-low-gray text-sm font-normal">
+          <div className="w-full relative text-start inline-block text-muted-foreground  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 dark:text-background" />
+                <ChatBubbleOvalLeftEllipsisIcon className="w-5 h-5 animate-bounce" />
               </div>
             )}
             {chat.thought && chat.thought !== "" && !hidden && (
               <div
                 onClick={() => setHidden((prev) => !prev)}
-                className=" text-start inline-block rounded-md text-muted-foreground dark:text-light-gray h-full border border-ring dark:border-ring
-								bg-muted dark:bg-foreground w-[95%] pb-3 pt-3 px-2 ml-3 cursor-pointer scrollbar-hide overflow-scroll"
+                className=" text-start inline-block rounded-md text-muted-foreground  h-full border border-ring
+								bg-muted w-[95%] pb-3 pt-3 px-2 ml-3 cursor-pointer scrollbar-hide overflow-scroll"
                 dangerouslySetInnerHTML={{
                   __html: convert.toHtml(chat.thought),
                 }}
@@ -88,12 +88,12 @@ export default function ChatMessage({
             )}
             {chat.thought && chat.thought !== "" && !hidden && <br></br>}
             <div className="w-full px-4 pb-3 pt-3 pr-8">
-              <div className="dark:text-background w-full">
+              <div className="w-full">
                 <div className="w-full">
                   <ReactMarkdown
                     remarkPlugins={[remarkGfm, remarkMath]}
                     rehypePlugins={[rehypeMathjax]}
-                    className="markdown prose dark:prose-invert text-muted-foreground dark:text-light-gray"
+                    className="markdown prose text-muted-foreground "
                     components={{
                       code({ node, inline, className, children, ...props }) {
                         if (children.length) {
@@ -152,9 +152,9 @@ export default function ChatMessage({
         </div>
       ) : (
         <div className="w-full flex items-center">
-          <div className="text-start inline-block px-3 text-sm text-muted-foreground dark:text-background">
+          <div className="text-start inline-block px-3 text-sm text-muted-foreground">
             <span
-              className="text-muted-foreground dark:text-light-gray"
+              className="text-muted-foreground "
               dangerouslySetInnerHTML={{
                 __html: message.replace(/\n/g, "<br>"),
               }}
diff --git a/src/frontend/src/modals/chatModal/fileComponent/index.tsx b/src/frontend/src/modals/chatModal/fileComponent/index.tsx
index 9ca9ffdca..b7f6de447 100644
--- a/src/frontend/src/modals/chatModal/fileComponent/index.tsx
+++ b/src/frontend/src/modals/chatModal/fileComponent/index.tsx
@@ -37,10 +37,10 @@ export default function FileCard({ fileName, content, fileType }) {
         />
         {isHovered && (
           <div
-            className={`absolute top-0 right-0 bg-muted text-foreground rounded-bl-lg px-1 text-sm font-bold dark:bg-foreground dark:text-medium-low-gray`}
+            className={`absolute top-0 right-0 bg-muted text-foreground rounded-bl-lg px-1 text-sm font-bold `}
           >
             <button
-              className="text-ring py-1 px-2 dark:bg-foreground dark:text-medium-low-gray"
+              className="text-ring py-1 px-2 "
               onClick={handleDownload}
             >
               <CloudArrowDownIcon className="hover:scale-110 w-5 h-5 text-current"></CloudArrowDownIcon>
diff --git a/src/frontend/src/modals/chatModal/index.tsx b/src/frontend/src/modals/chatModal/index.tsx
index ed1f7deb5..53843496c 100644
--- a/src/frontend/src/modals/chatModal/index.tsx
+++ b/src/frontend/src/modals/chatModal/index.tsx
@@ -332,7 +332,7 @@ export default function ChatModal({
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-black backdrop-blur-sm dark:bg-muted-foreground dark:bg-opacity-80 bg-opacity-80 transition-opacity" />
+          <div className="fixed inset-0 bg-black backdrop-blur-sm   bg-opacity-80 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-10 overflow-y-auto">
@@ -346,24 +346,24 @@ export default function ChatModal({
               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-[95%] overflow-hidden rounded-lg bg-background dark:bg-foreground text-left shadow-xl transition-all w-[690px]">
+              <Dialog.Panel className=" drop-shadow-2xl relative flex flex-col justify-between transform h-[95%] overflow-hidden rounded-lg bg-background text-left shadow-xl transition-all w-[690px]">
                 <div className="relative w-full p-4">
                   <button
                     onClick={() => clearChat()}
-                    className="absolute top-2 right-10 hover:text-status-red text-muted-foreground dark:text-medium-low-gray dark:hover:text-status-red z-30"
+                    className="absolute top-2 right-10 hover:text-status-red text-muted-foreground z-30"
                   >
                     <FaEraser className="w-4 h-4" />
                   </button>
                   <button
                     onClick={() => setModalOpen(false)}
-                    className="absolute top-1.5 right-2 hover:text-status-red text-muted-foreground dark:text-medium-low-gray dark:hover:text-status-red z-30"
+                    className="absolute top-1.5 right-2 hover:text-status-red text-muted-foreground z-30"
                   >
                     <HiX className="w-5 h-5" />
                   </button>
                 </div>
                 <div
                   ref={messagesRef}
-                  className="w-full h-full bg-background dark:bg-foreground border-t dark:border-t-muted-foreground flex-col flex items-center overflow-scroll scrollbar-hide"
+                  className="w-full h-full bg-background border-t  flex-col flex items-center overflow-scroll scrollbar-hide"
                 >
                   {chatHistory.length > 0 ? (
                     chatHistory.map((c, i) => (
@@ -378,12 +378,12 @@ export default function ChatModal({
                     <div className="flex flex-col h-full text-center justify-center w-full items-center align-middle">
                       <span>
                         👋{" "}
-                        <span className="text-muted-foreground dark:text-medium-low-gray text-lg">
+                        <span className="text-muted-foreground  text-lg">
                           LangFlow Chat
                         </span>
                       </span>
                       <br />
-                      <div className="bg-muted dark:bg-foreground rounded-md w-2/4 px-6 py-8 border border-input dark:border-foreground">
+                      <div className="bg-muted rounded-md w-2/4 px-6 py-8 border border-input">
                         <span className="text-base text-ring">
                           Start a conversation and click the agent’s thoughts{" "}
                           <span>
@@ -396,7 +396,7 @@ export default function ChatModal({
                   )}
                   <div ref={ref}></div>
                 </div>
-                <div className="w-full bg-background dark:bg-foreground border-t dark:border-t-muted-foreground flex-col flex items-center justify-between p-3">
+                <div className="w-full bg-background border-t  flex-col flex items-center justify-between p-3">
                   <div className="relative w-full  mt-1 rounded-md shadow-sm">
                     <ChatInput
                       chatValue={chatValue}
diff --git a/src/frontend/src/modals/codeAreaModal/index.tsx b/src/frontend/src/modals/codeAreaModal/index.tsx
index 5636abfb1..00c392705 100644
--- a/src/frontend/src/modals/codeAreaModal/index.tsx
+++ b/src/frontend/src/modals/codeAreaModal/index.tsx
@@ -52,7 +52,7 @@ export default function CodeAreaModal({
           <DialogTitle className="flex items-center">
             <span className="pr-2">Edit Code</span>
             <CommandLineIcon
-              className="h-6 w-6 text-foreground pl-1 dark:text-background"
+              className="h-6 w-6 text-foreground pl-1"
               aria-hidden="true"
             />
           </DialogTitle>
@@ -73,7 +73,7 @@ export default function CodeAreaModal({
             onChange={(value) => {
               setCode(value);
             }}
-            className="w-full rounded-lg h-[300px] custom-scroll border-[1px] border-ring dark:border-muted-foreground"
+            className="w-full rounded-lg h-[300px] custom-scroll border-[1px] border-ring "
           />
         </div>
 
diff --git a/src/frontend/src/modals/exportModal/index.tsx b/src/frontend/src/modals/exportModal/index.tsx
index 33757a97b..a45ebc28d 100644
--- a/src/frontend/src/modals/exportModal/index.tsx
+++ b/src/frontend/src/modals/exportModal/index.tsx
@@ -47,7 +47,7 @@ export default function ExportModal() {
           <DialogTitle className="flex items-center">
             <span className="pr-2">Export</span>
             <Download
-              className="h-6 w-6 text-foreground pl-1 dark:text-background"
+              className="h-6 w-6 text-foreground pl-1"
               aria-hidden="true"
             />
           </DialogTitle>
diff --git a/src/frontend/src/modals/flowSettingsModal/index.tsx b/src/frontend/src/modals/flowSettingsModal/index.tsx
index a60d72416..ee20a239c 100644
--- a/src/frontend/src/modals/flowSettingsModal/index.tsx
+++ b/src/frontend/src/modals/flowSettingsModal/index.tsx
@@ -51,7 +51,7 @@ export default function FlowSettingsModal() {
         <DialogHeader>
           <DialogTitle className="flex items-center">
             <span className="pr-2">Settings </span>
-            <Settings2 className="w-4 h-4 mr-2 dark:text-medium-low-gray" />
+            <Settings2 className="w-4 h-4 mr-2 " />
           </DialogTitle>
           <DialogDescription>{SETTINGS_DIALOG_SUBTITLE}</DialogDescription>
         </DialogHeader>
diff --git a/src/frontend/src/modals/genericModal/index.tsx b/src/frontend/src/modals/genericModal/index.tsx
index c4eb028ce..150fbaf0e 100644
--- a/src/frontend/src/modals/genericModal/index.tsx
+++ b/src/frontend/src/modals/genericModal/index.tsx
@@ -55,7 +55,7 @@ export default function GenericModal({
           <DialogTitle className="flex items-center">
             <span className="pr-2">{myModalTitle}</span>
             <DocumentTextIcon
-              className="h-6 w-6 text-foreground pl-1 dark:text-background"
+              className="h-6 w-6 text-foreground pl-1"
               aria-hidden="true"
             />
           </DialogTitle>
@@ -78,7 +78,7 @@ export default function GenericModal({
         <div className="flex h-full w-full mt-2">
           <Textarea
             ref={ref}
-            className="form-input h-[300px] w-full rounded-lg border-ring dark:border-foreground dark:bg-foreground dark:text-background focus-visible:ring-1"
+            className="form-input h-[300px] w-full rounded-lg border-ring focus-visible:ring-1"
             value={myValue}
             onChange={(e) => {
               setMyValue(e.target.value);
diff --git a/src/frontend/src/modals/importModal/buttonBox/index.tsx b/src/frontend/src/modals/importModal/buttonBox/index.tsx
index 328f50c09..59d8f525f 100644
--- a/src/frontend/src/modals/importModal/buttonBox/index.tsx
+++ b/src/frontend/src/modals/importModal/buttonBox/index.tsx
@@ -79,7 +79,7 @@ export default function ButtonBox({
     <button disabled={deactivate} onClick={onClick}>
       <div
         className={classNames(
-          "flex flex-col justify-center items-center rounded-lg text-center shadow border border-ring dark:border-foreground hover:shadow-lg transform hover:scale-105",
+          "flex flex-col justify-center items-center rounded-lg text-center shadow border border-ring hover:shadow-lg transform hover:scale-105",
           bgColor,
           height,
           width,
@@ -87,10 +87,10 @@ export default function ButtonBox({
         )}
       >
         <div
-          className={`flex items-center justify-center ${bigCircle} bg-background/30 dark:bg-background/30 rounded-full mb-1`}
+          className={`flex items-center justify-center ${bigCircle} bg-background/30 rounded-full mb-1`}
         >
           <div
-            className={`flex items-center justify-center ${smallCircle} bg-background dark:bg-background/80 rounded-full`}
+            className={`flex items-center justify-center ${smallCircle} bg-background rounded-full`}
           >
             <div className={textColor}>{icon}</div>
           </div>
@@ -98,7 +98,7 @@ export default function ButtonBox({
         <div className="w-full mt-auto mb-auto">
           <h3
             className={classNames(
-              "w-full font-semibold break-words text-background dark:text-background/80 truncate-multiline",
+              "w-full font-semibold break-words text-background truncate-multiline",
               titleFontSize,
               marginTop
             )}
diff --git a/src/frontend/src/modals/importModal/index.tsx b/src/frontend/src/modals/importModal/index.tsx
index 0228c3ece..b4dc4a6ca 100644
--- a/src/frontend/src/modals/importModal/index.tsx
+++ b/src/frontend/src/modals/importModal/index.tsx
@@ -85,7 +85,7 @@ export default function ImportModal() {
                     }}
                   >
                     <ArrowLeftIcon
-                      className="h-5 w-5 text-foreground ml-1 dark:text-background"
+                      className="h-5 w-5 text-foreground ml-1"
                       aria-hidden="true"
                     />
                   </button>
@@ -97,7 +97,7 @@ export default function ImportModal() {
               {showExamples ? "Select an example" : "Import"}
             </span>
             <ArrowUpTrayIcon
-              className="h-5 w-5 text-foreground ml-1 dark:text-background"
+              className="h-5 w-5 text-foreground ml-1"
               aria-hidden="true"
             />
           </DialogTitle>
@@ -106,7 +106,7 @@ export default function ImportModal() {
 
         <div
           className={classNames(
-            "h-full w-full dark:bg-foreground overflow-y-auto scrollbar-hide",
+            "h-full w-full overflow-y-auto scrollbar-hide",
             showExamples && !loadingExamples
               ? "flex flex-row start justify-center items-start flex-wrap overflow-auto mx-auto"
               : "flex flex-row justify-center items-center"
@@ -116,7 +116,7 @@ export default function ImportModal() {
             <div className="flex h-full w-full justify-evenly items-center">
               <ButtonBox
                 size="big"
-                bgColor="bg-medium-emerald dark:bg-medium-emerald/75"
+                bgColor="bg-medium-emerald "
                 description="Prebuilt Examples"
                 icon={
                   <DocumentDuplicateIcon className="h-10 w-10 flex-shrink-0" />
@@ -125,12 +125,12 @@ export default function ImportModal() {
                   setShowExamples(true);
                   handleExamples();
                 }}
-                textColor="text-medium-emerald dark:text-medium-emerald/75"
+                textColor="text-medium-emerald "
                 title="Examples"
               ></ButtonBox>
               <ButtonBox
                 size="big"
-                bgColor="bg-almost-dark-blue dark:bg-almost-dark-blue/75"
+                bgColor="bg-almost-dark-blue "
                 description="Import from Local"
                 icon={
                   <ComputerDesktopIcon className="h-10 w-10 flex-shrink-0" />
@@ -139,7 +139,7 @@ export default function ImportModal() {
                   uploadFlow();
                   setModalOpen(false);
                 }}
-                textColor="text-almost-dark-blue dark:text-almost-dark-blue/75"
+                textColor="text-almost-dark-blue "
                 title="Local File"
               ></ButtonBox>
             </div>
@@ -157,7 +157,7 @@ export default function ImportModal() {
                   {" "}
                   <ButtonBox
                     size="small"
-                    bgColor="bg-medium-emerald dark:bg-medium-emerald/75"
+                    bgColor="bg-medium-emerald "
                     description={example.description ?? "Prebuilt Examples"}
                     icon={
                       <DocumentDuplicateIcon className="h-6 w-6 flex-shrink-0" />
@@ -166,7 +166,7 @@ export default function ImportModal() {
                       addFlow(example, false);
                       setModalOpen(false);
                     }}
-                    textColor="text-medium-emerald dark:text-medium-emerald/75"
+                    textColor="text-medium-emerald "
                     title={example.name}
                   ></ButtonBox>
                 </div>
@@ -179,7 +179,7 @@ export default function ImportModal() {
             <a
               href="https://github.com/logspace-ai/langflow_examples"
               target="_blank"
-              className="flex items-center justify-center text-muted-foreground dark:text-medium-low-gray"
+              className="flex items-center justify-center text-muted-foreground "
               rel="noreferrer"
             >
               <svg
diff --git a/src/frontend/src/modals/promptModal/index.tsx b/src/frontend/src/modals/promptModal/index.tsx
index 2fac7b373..a0697eeea 100644
--- a/src/frontend/src/modals/promptModal/index.tsx
+++ b/src/frontend/src/modals/promptModal/index.tsx
@@ -43,7 +43,7 @@ export default function PromptAreaModal({
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-ring dark:bg-muted-foreground dark:bg-opacity-75 bg-opacity-75 transition-opacity" />
+          <div className="fixed inset-0 bg-ring   bg-opacity-75 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-10 overflow-y-auto">
@@ -57,7 +57,7 @@ export default function PromptAreaModal({
               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-background dark:bg-foreground text-left shadow-xl transition-all sm:my-8 w-[700px]">
+              <Dialog.Panel className="relative flex flex-col justify-between transform h-[600px] overflow-hidden rounded-lg bg-background text-left shadow-xl transition-all sm:my-8 w-[700px]">
                 <div className=" z-50 absolute top-0 right-0 hidden pt-4 pr-4 sm:block">
                   <button
                     type="button"
@@ -72,7 +72,7 @@ export default function PromptAreaModal({
                 </div>
                 <div className="h-full w-full flex flex-col justify-center items-center">
                   <div className="flex w-full pb-4 z-10 justify-center shadow-sm">
-                    <div className="mx-auto mt-4 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-almost-light-blue dark:bg-foreground sm:mx-0 sm:h-10 sm:w-10">
+                    <div className="mx-auto mt-4 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-almost-light-blue sm:mx-0 sm:h-10 sm:w-10">
                       <DocumentTextIcon
                         className="h-6 w-6 text-almost-medium-blue"
                         aria-hidden="true"
@@ -81,18 +81,18 @@ export default function PromptAreaModal({
                     <div className="mt-4 text-center sm:ml-4 sm:text-left">
                       <Dialog.Title
                         as="h3"
-                        className="text-lg font-medium dark:text-background leading-10 text-foreground"
+                        className="text-lg font-medium leading-10 text-foreground"
                       >
                         Edit Prompt
                       </Dialog.Title>
                     </div>
                   </div>
-                  <div className="h-full w-full bg-accent overflow-auto dark:bg-foreground p-4 gap-4 flex flex-row justify-center items-center">
+                  <div className="h-full w-full bg-accent overflow-auto p-4 gap-4 flex flex-row justify-center items-center">
                     <div className="flex h-full w-full">
-                      <div className="overflow-hidden px-4 py-5 sm:p-6 w-full h-full rounded-lg bg-background dark:bg-foreground shadow">
+                      <div className="overflow-hidden px-4 py-5 sm:p-6 w-full h-full rounded-lg bg-background shadow">
                         <textarea
                           ref={ref}
-                          className="form-input h-full w-full rounded-lg border-ring dark:border-foreground dark:bg-foreground dark:text-background"
+                          className="form-input h-full w-full rounded-lg border-ring"
                           value={myValue}
                           onChange={(e) => {
                             setMyValue(e.target.value);
@@ -102,7 +102,7 @@ export default function PromptAreaModal({
                       </div>
                     </div>
                   </div>
-                  <div className="bg-input dark:bg-foreground w-full pb-3 flex flex-row-reverse px-4">
+                  <div className="bg-input w-full pb-3 flex flex-row-reverse px-4">
                     <button
                       type="button"
                       className="inline-flex w-full justify-center rounded-md border border-transparent px-4 py-2 text-base font-medium text-background shadow-sm hover:bg-ring focus:outline-none focus:ring-1 focus:ring-ring focus:ring-offset-1 sm:ml-3 sm:w-auto sm:text-sm"
diff --git a/src/frontend/src/modals/textAreaModal/index.tsx b/src/frontend/src/modals/textAreaModal/index.tsx
index adda0acf0..69f3d98b3 100644
--- a/src/frontend/src/modals/textAreaModal/index.tsx
+++ b/src/frontend/src/modals/textAreaModal/index.tsx
@@ -42,7 +42,7 @@ export default function TextAreaModal({
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-ring dark:bg-muted-foreground dark:bg-opacity-75 bg-opacity-75 transition-opacity" />
+          <div className="fixed inset-0 bg-ring   bg-opacity-75 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-10 overflow-y-auto">
@@ -56,7 +56,7 @@ export default function TextAreaModal({
               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-background dark:bg-foreground text-left shadow-xl transition-all sm:my-8 w-[700px]">
+              <Dialog.Panel className="relative flex flex-col justify-between transform h-[600px] overflow-hidden rounded-lg bg-background text-left shadow-xl transition-all sm:my-8 w-[700px]">
                 <div className=" z-50 absolute top-0 right-0 hidden pt-4 pr-4 sm:block">
                   <button
                     type="button"
@@ -71,7 +71,7 @@ export default function TextAreaModal({
                 </div>
                 <div className="h-full w-full flex flex-col justify-center items-center">
                   <div className="flex w-full pb-4 z-10 justify-center shadow-sm">
-                    <div className="mx-auto mt-4 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-almost-light-blue dark:bg-foreground sm:mx-0 sm:h-10 sm:w-10">
+                    <div className="mx-auto mt-4 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-almost-light-blue sm:mx-0 sm:h-10 sm:w-10">
                       <ClipboardDocumentListIcon
                         className="h-6 w-6 text-almost-medium-blue"
                         aria-hidden="true"
@@ -80,18 +80,18 @@ export default function TextAreaModal({
                     <div className="mt-4 text-center sm:ml-4 sm:text-left">
                       <Dialog.Title
                         as="h3"
-                        className="text-lg font-medium dark:text-background leading-10 text-foreground"
+                        className="text-lg font-medium leading-10 text-foreground"
                       >
                         Edit text
                       </Dialog.Title>
                     </div>
                   </div>
-                  <div className="h-full w-full bg-input dark:bg-foreground p-4 gap-4 flex flex-row justify-center items-center">
+                  <div className="h-full w-full bg-input p-4 gap-4 flex flex-row justify-center items-center">
                     <div className="flex h-full w-full">
-                      <div className="overflow-hidden px-4 py-5 sm:p-6 w-full rounded-lg bg-background dark:bg-foreground shadow">
+                      <div className="overflow-hidden px-4 py-5 sm:p-6 w-full rounded-lg bg-background shadow">
                         <textarea
                           ref={ref}
-                          className="form-input h-full w-full rounded-lg border-ring dark:border-foreground dark:bg-foreground dark:text-background"
+                          className="form-input h-full w-full rounded-lg border-ring"
                           value={myValue}
                           onChange={(e) => {
                             setMyValue(e.target.value);
@@ -101,7 +101,7 @@ export default function TextAreaModal({
                       </div>
                     </div>
                   </div>
-                  <div className="bg-input dark:bg-foreground w-full pb-3 flex flex-row-reverse px-4">
+                  <div className="bg-input w-full pb-3 flex flex-row-reverse px-4">
                     <button
                       type="button"
                       className="inline-flex w-full justify-center rounded-md border border-transparent px-4 py-2 text-base font-medium text-background shadow-sm hover:bg-ring focus:outline-none focus:ring-1 focus:ring-ring focus:ring-offset-1 sm:ml-3 sm:w-auto sm:text-sm"
diff --git a/src/frontend/src/pages/FlowPage/components/ConnectionLineComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/ConnectionLineComponent/index.tsx
index a005f008f..de1191d07 100644
--- a/src/frontend/src/pages/FlowPage/components/ConnectionLineComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/ConnectionLineComponent/index.tsx
@@ -13,7 +13,7 @@ const ConnectionLineComponent = ({
         fill="none"
         stroke="#222"
         strokeWidth={1.5}
-        className="animated dark:stroke-almost-medium-gray"
+        className="animated "
         d={`M${fromX},${fromY} C ${fromX} ${toY} ${fromX} ${toY} ${toX},${toY}`}
         style={connectionLineStyle}
       />
@@ -23,7 +23,7 @@ const ConnectionLineComponent = ({
         fill="#fff"
         r={3}
         stroke="#222"
-        className="dark:stroke-almost-medium-gray dark:fill-foreground"
+        className=""
         strokeWidth={1.5}
       />
     </g>
diff --git a/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx
index 89c9f5d73..eb7db0e24 100644
--- a/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx
@@ -12,10 +12,10 @@ export default function DisclosureComponent({
       {({ open }) => (
         <>
           <div>
-            <Disclosure.Button className="select-none bg-muted dark:bg-foreground/60 dark:border-y-muted-foreground w-full flex justify-between items-center -mt-px px-3 py-2 border-y border-y-input">
+            <Disclosure.Button className="select-none bg-muted w-full flex justify-between items-center -mt-px px-3 py-2 border-y border-y-input">
               <div className="flex gap-4">
-                <Icon className="w-6 text-foreground dark:text-background/80" />
-                <span className="flex items-center text-sm text-foreground dark:text-background/80 font-medium">
+                <Icon className="w-6 text-foreground" />
+                <span className="flex items-center text-sm text-foreground font-medium">
                   {title}
                 </span>
               </div>
@@ -29,7 +29,7 @@ export default function DisclosureComponent({
                   <ChevronRightIcon
                     className={`${
                       open || openDisc ? "rotate-90 transform" : ""
-                    } h-4 w-4 text-foreground dark:text-background`}
+                    } h-4 w-4 text-foreground`}
                   />
                 </div>
               </div>
diff --git a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
index 39a704126..e5cb3738e 100644
--- a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
@@ -185,8 +185,8 @@ export default function Page({ flow }: { flow: FlowType }) {
             style: { stroke: "inherit" },
             className:
               params.targetHandle.split("|")[0] === "Text"
-                ? "stroke-foreground dark:stroke-medium-low-gray"
-                : "stroke-foreground dark:stroke-light-gray",
+                ? "stroke-foreground "
+                : "stroke-foreground ",
             animated: params.targetHandle.split("|")[0] === "Text",
           },
           eds
@@ -397,8 +397,8 @@ export default function Page({ flow }: { flow: FlowType }) {
                   selectNodesOnDrag={false}
                   className="theme-attribution"
                 >
-                  <Background className="dark:bg-foreground" />
-                  <Controls className="[&>button]:text-black  [&>button]:dark:bg-foreground hover:[&>button]:dark:bg-foreground [&>button]:dark:text-almost-medium-gray [&>button]:dark:fill-almost-medium-gray [&>button]:dark:border-muted-foreground"></Controls>
+                  <Background className="" />
+                  <Controls className="[&>button]:text-black"></Controls>
                 </ReactFlow>
                 <Chat flow={flow} reactFlowInstance={reactFlowInstance} />
               </div>
diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
index c93006896..0839b88a4 100644
--- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
@@ -66,44 +66,44 @@ export default function ExtraSidebar() {
       <div className="mt-2 mb-2 w-full flex gap-2 justify-between px-2 items-center">
         <ShadTooltip delayDuration={1000} content="Import" side="top">
           <button
-            className="hover:dark:hover:bg-btn-hover-bg text-foreground w-full justify-center shadow-sm transition-all duration-500 ease-in-out dark:bg-foreground dark:text-medium-low-gray  relative inline-flex items-center rounded-md bg-background px-2 py-2 ring-1 ring-inset ring-input hover:bg-muted"
+            className="text-foreground w-full justify-center shadow-sm transition-all duration-500 ease-in-out   relative inline-flex items-center rounded-md bg-background px-2 py-2 ring-1 ring-inset ring-input hover:bg-muted"
             onClick={() => {
               // openPopUp(<ImportModal />);
               uploadFlow();
             }}
           >
-            <FileUp className="w-5 h-5 dark:text-medium-low-gray"></FileUp>
+            <FileUp className="w-5 h-5 "></FileUp>
           </button>
         </ShadTooltip>
 
         <ShadTooltip delayDuration={1000} content="Export" side="top">
           <button
             className={classNames(
-              "hover:dark:hover:bg-btn-hover-bg text-foreground w-full justify-center shadow-sm transition-all duration-500 ease-in-out dark:bg-foreground dark:text-medium-low-gray  relative inline-flex items-center bg-background px-2 py-2  ring-1 ring-inset ring-input hover:bg-muted rounded-md"
+              "text-foreground w-full justify-center shadow-sm transition-all duration-500 ease-in-out   relative inline-flex items-center bg-background px-2 py-2  ring-1 ring-inset ring-input hover:bg-muted rounded-md"
             )}
             onClick={(event) => {
               openPopUp(<ExportModal />);
             }}
           >
-            <FileDown className="w-5 h-5  dark:text-medium-low-gray"></FileDown>
+            <FileDown className="w-5 h-5  "></FileDown>
           </button>
         </ShadTooltip>
         <ShadTooltip delayDuration={1000} content="Code" side="top">
           <button
             className={classNames(
-              "hover:dark:hover:bg-btn-hover-bg text-foreground w-full justify-center shadow-sm transition-all duration-500 ease-in-out dark:bg-foreground dark:text-medium-low-gray  relative inline-flex items-center bg-background px-2 py-2  ring-1 ring-inset ring-input hover:bg-muted rounded-md"
+              "text-foreground w-full justify-center shadow-sm transition-all duration-500 ease-in-out   relative inline-flex items-center bg-background px-2 py-2  ring-1 ring-inset ring-input hover:bg-muted rounded-md"
             )}
             onClick={(event) => {
               openPopUp(<ApiModal flow={flows.find((f) => f.id === tabId)} />);
             }}
           >
-            <Code2 className="w-5 h-5  dark:text-medium-low-gray"></Code2>
+            <Code2 className="w-5 h-5  "></Code2>
           </button>
         </ShadTooltip>
 
         <ShadTooltip delayDuration={1000} content="Save" side="top">
           <button
-            className="hover:dark:hover:bg-btn-hover-bg text-foreground w-full justify-center transition-all shadow-sm duration-500 ease-in-out dark:bg-foreground dark:text-medium-low-gray  relative inline-flex items-center bg-background px-2 py-2  ring-1 ring-inset ring-input hover:bg-muted rounded-md"
+            className="text-foreground w-full justify-center transition-all shadow-sm duration-500 ease-in-out   relative inline-flex items-center bg-background px-2 py-2  ring-1 ring-inset ring-input hover:bg-muted rounded-md"
             onClick={(event) => {
               saveFlow(flows.find((f) => f.id === tabId));
               setSuccessData({ title: "Changes saved successfully" });
@@ -127,7 +127,7 @@ export default function ExtraSidebar() {
           placeholder="Search Nodes"
           className={
             INPUT_STYLE +
-            "w-full border-1 dark:border-0.5 dark:ring-0 focus-visible:dark:ring-0 focus-visible:dark:ring-offset-1 rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
+            "w-full border-1 rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
           }
           onChange={(e) => {
             handleSearchInput(e.target.value);
@@ -135,7 +135,7 @@ export default function ExtraSidebar() {
           }}
         />
         <div className="absolute inset-y-0 right-0 flex py-1.5 pr-3 items-center">
-          <MagnifyingGlassIcon className="h-5 w-5 dark:text-background"></MagnifyingGlassIcon>
+          <MagnifyingGlassIcon className="h-5 w-5"></MagnifyingGlassIcon>
         </div>
       </div>
 
@@ -183,11 +183,11 @@ export default function ExtraSidebar() {
                               );
                             }}
                           >
-                            <div className="flex w-full justify-between text-sm px-3 py-1 bg-background dark:bg-foreground items-center border-dashed border-ring dark:border-muted-foreground border-l-0 rounded-md rounded-l-none border">
-                              <span className="text-black dark:text-background w-full pr-1 truncate text-xs">
+                            <div className="flex w-full justify-between text-sm px-3 py-1 bg-background items-center border-dashed border-ring  border-l-0 rounded-md rounded-l-none border">
+                              <span className="text-black w-full pr-1 truncate text-xs">
                                 {t}
                               </span>
-                              <Bars2Icon className="w-4 h-6  text-ring dark:text-muted-foreground" />
+                              <Bars2Icon className="w-4 h-6  text-ring " />
                             </div>
                           </div>
                         </div>
diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
index d1a48a282..04fb91959 100644
--- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
@@ -32,12 +32,12 @@ const NodeToolbarComponent = (props) => {
         <span className="isolate inline-flex rounded-md shadow-sm">
           <ShadTooltip delayDuration={1000} content="Delete" side="top">
             <button
-              className="hover:dark:hover:bg-btn-hover-bg text-foreground transition-all duration-500 ease-in-out dark:bg-foreground dark:text-medium-low-gray shadow-md relative inline-flex items-center rounded-l-md bg-background px-2 py-2 ring-1 ring-inset ring-ring hover:bg-muted focus:z-10"
+              className="text-foreground transition-all duration-500 ease-in-out  shadow-md relative inline-flex items-center rounded-l-md bg-background px-2 py-2 ring-1 ring-inset ring-ring hover:bg-muted focus:z-10"
               onClick={() => {
                 props.deleteNode(props.data.id);
               }}
             >
-              <Trash2 className="w-4 h-4 dark:text-medium-low-gray"></Trash2>
+              <Trash2 className="w-4 h-4 "></Trash2>
             </button>
           </ShadTooltip>
 
@@ -45,8 +45,8 @@ const NodeToolbarComponent = (props) => {
             <button
               className={classNames(
                 nodeLength > 0
-                  ? "hover:dark:hover:bg-btn-hover-bg text-foreground transition-all duration-500 ease-in-out dark:bg-foreground dark:text-medium-low-gray shadow-md relative -ml-px inline-flex items-center bg-background px-2 py-2  ring-1 ring-inset ring-ring hover:bg-muted focus:z-10"
-                  : "hover:dark:hover:bg-btn-hover-bg text-foreground transition-all duration-500 ease-in-out dark:bg-foreground dark:text-medium-low-gray shadow-md relative -ml-px inline-flex items-center bg-background px-2 py-2  ring-1 ring-inset ring-ring hover:bg-muted focus:z-10 rounded-r-md"
+                  ? "text-foreground transition-all duration-500 ease-in-out  shadow-md relative -ml-px inline-flex items-center bg-background px-2 py-2  ring-1 ring-inset ring-ring hover:bg-muted focus:z-10"
+                  : "text-foreground transition-all duration-500 ease-in-out  shadow-md relative -ml-px inline-flex items-center bg-background px-2 py-2  ring-1 ring-inset ring-ring hover:bg-muted focus:z-10 rounded-r-md"
               )}
               onClick={(event) => {
                 event.preventDefault();
@@ -65,31 +65,31 @@ const NodeToolbarComponent = (props) => {
                 );
               }}
             >
-              <Copy className="w-4 h-4 dark:text-medium-low-gray"></Copy>
+              <Copy className="w-4 h-4 "></Copy>
             </button>
           </ShadTooltip>
 
           {nodeLength > 0 && (
             <ShadTooltip delayDuration={1000} content="Edit" side="top">
               <button
-                className="hover:dark:hover:bg-btn-hover-bg text-foreground transition-all duration-500 ease-in-out dark:bg-foreground dark:text-medium-low-gray shadow-md relative -ml-px inline-flex items-center bg-background px-2 py-2  ring-1 ring-inset ring-ring hover:bg-muted focus:z-10 rounded-r-md"
+                className="text-foreground transition-all duration-500 ease-in-out  shadow-md relative -ml-px inline-flex items-center bg-background px-2 py-2  ring-1 ring-inset ring-ring hover:bg-muted focus:z-10 rounded-r-md"
                 onClick={(event) => {
                   event.preventDefault();
                   props.openPopUp(<EditNodeModal data={props.data} />);
                 }}
               >
-                <Settings2 className="w-4 h-4 dark:text-medium-low-gray"></Settings2>
+                <Settings2 className="w-4 h-4 "></Settings2>
               </button>
             </ShadTooltip>
           )}
 
           
           {/* <Menu as="div" className="relative inline-block text-left z-100">
-            <button className="hover:dark:hover:bg-[#242f47] text-gray-700 transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 shadow-md relative -ml-px inline-flex items-center bg-background px-2 py-2 ring-1 ring-inset ring-gray-300 hover:bg-muted focus:z-10 rounded-r-md">
+            <button className="text-gray-700 transition-all duration-500 ease-in-out   shadow-md relative -ml-px inline-flex items-center bg-background px-2 py-2 ring-1 ring-inset ring-gray-300 hover:bg-muted focus:z-10 rounded-r-md">
               <div>
                 <Menu.Button className="flex items-center">
                   <EllipsisVerticalIcon
-                    className="w-5 h-5 dark:text-gray-300"
+                    className="w-5 h-5 "
                     aria-hidden="true"
                   />
                 </Menu.Button>

From 17380fa2fb5387f38b2bf6bce086275703bfcf82 Mon Sep 17 00:00:00 2001
From: Rodrigo Nader <rodrigosilvanader@gmail.com>
Date: Wed, 28 Jun 2023 01:11:24 -0300
Subject: [PATCH 12/26] feat: Upgrade toggle shad component and switch UI
 styles

- Improved the scaling effect for the toggle shad component.
- Removed unused switch styles CSS file.
- Updated the switch UI component to have improved color styles for checked and unchecked states.
---
 src/frontend/src/components/toggleShadComponent/index.tsx | 2 +-
 src/frontend/src/components/ui/SwitchStyles.css           | 8 --------
 src/frontend/src/components/ui/switch.tsx                 | 2 +-
 3 files changed, 2 insertions(+), 10 deletions(-)
 delete mode 100644 src/frontend/src/components/ui/SwitchStyles.css

diff --git a/src/frontend/src/components/toggleShadComponent/index.tsx b/src/frontend/src/components/toggleShadComponent/index.tsx
index 290a46cb4..0e18b375b 100644
--- a/src/frontend/src/components/toggleShadComponent/index.tsx
+++ b/src/frontend/src/components/toggleShadComponent/index.tsx
@@ -37,7 +37,7 @@ export default function ToggleShadComponent({
         style={{
           transform: `scaleX(${scaleX}) scaleY(${scaleY})`,
         }}
-        className="data-[state=unchecked]:bg-slate-500"
+        className=""
         checked={enabled}
         onCheckedChange={(x: boolean) => {
           setEnabled(x);
diff --git a/src/frontend/src/components/ui/SwitchStyles.css b/src/frontend/src/components/ui/SwitchStyles.css
deleted file mode 100644
index d54dac065..000000000
--- a/src/frontend/src/components/ui/SwitchStyles.css
+++ /dev/null
@@ -1,8 +0,0 @@
-.SwitchRoot[data-state='checked'] {
-    background-color: blue !important;
-  }
-  
-  .SwitchRoot[data-state='unchecked'] {
-    background-color: red !important;
-  }
-  
\ No newline at end of file
diff --git a/src/frontend/src/components/ui/switch.tsx b/src/frontend/src/components/ui/switch.tsx
index 0bdc32b45..6ecf52307 100644
--- a/src/frontend/src/components/ui/switch.tsx
+++ b/src/frontend/src/components/ui/switch.tsx
@@ -12,7 +12,7 @@ const Switch = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SwitchPrimitives.Root
     className={cn(
-      "SwitchRoot peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50",
+      "peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-ring",
       className
     )}
     {...props}

From 15e1efc0a126629e0dc9766f11f0757beae08dc0 Mon Sep 17 00:00:00 2001
From: Rodrigo Nader <rodrigosilvanader@gmail.com>
Date: Wed, 28 Jun 2023 11:35:26 -0300
Subject: [PATCH 13/26] feat: Add new stylesheet for Switch component

Imported a new stylesheet for the Switch component to enhance its visual appearance.
---
 src/frontend/src/components/ui/switch.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/frontend/src/components/ui/switch.tsx b/src/frontend/src/components/ui/switch.tsx
index 6ecf52307..c9b41cb90 100644
--- a/src/frontend/src/components/ui/switch.tsx
+++ b/src/frontend/src/components/ui/switch.tsx
@@ -4,8 +4,6 @@ import * as React from "react";
 import * as SwitchPrimitives from "@radix-ui/react-switch";
 import { cn } from "../../utils";
 
-import "./SwitchStyles.css"; // Import the new stylesheet
-
 const Switch = React.forwardRef<
   React.ElementRef<typeof SwitchPrimitives.Root>,
   React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>

From b14d6d4238f22eace94a61b5e6013ce70d2a08ec Mon Sep 17 00:00:00 2001
From: Rodrigo Nader <rodrigosilvanader@gmail.com>
Date: Wed, 28 Jun 2023 12:51:05 -0300
Subject: [PATCH 14/26] Refactor crash error component, header component, and
 main page component

- Refactored crash error component to update the background color of the reset button.
- Removed commented code in the header component.
- Imported BUTTON_DIV_STYLE constant in the main page component.
---
 src/frontend/src/components/CrashErrorComponent/index.tsx | 2 +-
 src/frontend/src/components/headerComponent/index.tsx     | 3 ++-
 src/frontend/src/pages/MainPage/index.tsx                 | 1 +
 3 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/frontend/src/components/CrashErrorComponent/index.tsx b/src/frontend/src/components/CrashErrorComponent/index.tsx
index 760a1745a..8bd32af92 100644
--- a/src/frontend/src/components/CrashErrorComponent/index.tsx
+++ b/src/frontend/src/components/CrashErrorComponent/index.tsx
@@ -14,7 +14,7 @@ export default function CrashErrorComponent({ error, resetErrorBoundary }) {
         <div className="flex justify-center">
           <button
             onClick={resetErrorBoundary}
-            className="bg-almost-dark-blue hover:bg-ring text-background font-bold py-2 px-4 rounded mr-4"
+            className="bg-primary hover:bg-ring text-background font-bold py-2 px-4 rounded mr-4"
           >
             Reset Application
           </button>
diff --git a/src/frontend/src/components/headerComponent/index.tsx b/src/frontend/src/components/headerComponent/index.tsx
index 0714424e6..323619f9a 100644
--- a/src/frontend/src/components/headerComponent/index.tsx
+++ b/src/frontend/src/components/headerComponent/index.tsx
@@ -99,7 +99,8 @@ export default function Header() {
           >
             <FaDiscord className="h-5 w-5" />
           </a>
-          {/* <Separator orientation="vertical" />
+
+          <Separator orientation="vertical" />
           <button
             className="text-gray-600 hover:text-gray-500 dark:text-gray-300 dark:hover:text-gray-200"
             onClick={() => {
diff --git a/src/frontend/src/pages/MainPage/index.tsx b/src/frontend/src/pages/MainPage/index.tsx
index 168e43456..ccc062317 100644
--- a/src/frontend/src/pages/MainPage/index.tsx
+++ b/src/frontend/src/pages/MainPage/index.tsx
@@ -5,6 +5,7 @@ import { Button } from "../../components/ui/button";
 import { Link, useNavigate } from "react-router-dom";
 import { CardComponent } from "../../components/cardComponent";
 import { USER_PROJECTS_HEADER } from "../../constants";
+import { BUTTON_DIV_STYLE } from "../../constants";
 export default function HomePage() {
   const { flows, setTabId, downloadFlows, uploadFlows, addFlow, removeFlow } =
     useContext(TabsContext);

From 4e9565e468a5238029b49355072a5098a848f2ed Mon Sep 17 00:00:00 2001
From: Rodrigo Nader <rodrigosilvanader@gmail.com>
Date: Wed, 28 Jun 2023 12:54:54 -0300
Subject: [PATCH 15/26] feat: Update styling for various components

- Updated hover and transition effects for several components
- Removed unnecessary CSS classes and styles
- Adjusted colors and text styles for better visual consistency
---
 src/frontend/src/CustomNodes/GenericNode/index.tsx          | 2 +-
 .../alertDropDown/components/singleAlertComponent/index.tsx | 6 +++---
 src/frontend/src/alerts/error/index.tsx                     | 2 +-
 src/frontend/src/alerts/notice/index.tsx                    | 2 +-
 src/frontend/src/alerts/success/index.tsx                   | 2 +-
 .../src/components/chatComponent/buildTrigger/index.tsx     | 2 +-
 .../src/components/chatComponent/chatTrigger/index.tsx      | 2 +-
 src/frontend/src/components/codeAreaComponent/index.tsx     | 2 +-
 src/frontend/src/components/headerComponent/index.tsx       | 4 ++--
 src/frontend/src/components/promptComponent/index.tsx       | 2 +-
 src/frontend/src/components/textAreaComponent/index.tsx     | 2 +-
 src/frontend/src/modals/ApiModal/index.tsx                  | 2 +-
 src/frontend/src/modals/EditNodeModal/index.tsx             | 4 ++--
 src/frontend/src/modals/chatModal/chatInput/index.tsx       | 4 ++--
 src/frontend/src/modals/chatModal/chatMessage/index.tsx     | 6 +++---
 src/frontend/src/modals/codeAreaModal/index.tsx             | 2 +-
 src/frontend/src/modals/genericModal/index.tsx              | 2 +-
 .../pages/FlowPage/components/DisclosureComponent/index.tsx | 4 ++--
 .../FlowPage/components/extraSidebarComponent/index.tsx     | 6 +++---
 19 files changed, 29 insertions(+), 29 deletions(-)

diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx
index e18d9a70d..d66fc70e6 100644
--- a/src/frontend/src/CustomNodes/GenericNode/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx
@@ -161,7 +161,7 @@ export default function GenericNode({
                       !validationStatus || isBuilding
                         ? "w-4 h-4 rounded-full  bg-yellow-500 opacity-100"
                         : "w-4 h-4 rounded-full bg-gray-500 opacity-0 hidden animate-spin",
-                      "absolute w-4 hover:text-gray-500 hover:dark:text-gray-300 transition-all ease-in-out duration-200"
+                      "absolute w-4 hover:text-gray-500 transition-all ease-in-out duration-200"
                     )}
                   ></div>
                 </div>
diff --git a/src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx b/src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx
index 66be6f596..97b5f5529 100644
--- a/src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx
+++ b/src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx
@@ -30,7 +30,7 @@ export default function SingleAlert({
         >
           <div className="flex-shrink-0">
             <XCircle
-              className="h-5 w-5 text-red-400 dark:text-red-50"
+              className="h-5 w-5 text-red-400"
               aria-hidden="true"
             />
           </div>
@@ -77,7 +77,7 @@ export default function SingleAlert({
         >
           <div className="flex-shrink-0">
             <Info
-              className="h-5 w-5 text-blue-400 dark:text-blue-50"
+              className="h-5 w-5 text-blue-400 "
               aria-hidden="true"
             />
           </div>
@@ -123,7 +123,7 @@ export default function SingleAlert({
         >
           <div className="flex-shrink-0">
             <CheckCircle2
-              className="h-5 w-5 text-green-400 dark:text-green-50"
+              className="h-5 w-5 text-green-400 "
               aria-hidden="true"
             />
           </div>
diff --git a/src/frontend/src/alerts/error/index.tsx b/src/frontend/src/alerts/error/index.tsx
index 4bce1e1d8..69fb34ef4 100644
--- a/src/frontend/src/alerts/error/index.tsx
+++ b/src/frontend/src/alerts/error/index.tsx
@@ -44,7 +44,7 @@ export default function ErrorAlert({
         <div className="flex">
           <div className="flex-shrink-0">
             <XCircle
-              className="h-5 w-5 text-red-400 dark:text-red-50"
+              className="h-5 w-5 text-red-400"
               aria-hidden="true"
             />
           </div>
diff --git a/src/frontend/src/alerts/notice/index.tsx b/src/frontend/src/alerts/notice/index.tsx
index 7d36e1e7e..78095018e 100644
--- a/src/frontend/src/alerts/notice/index.tsx
+++ b/src/frontend/src/alerts/notice/index.tsx
@@ -41,7 +41,7 @@ export default function NoticeAlert({
         <div className="flex">
           <div className="flex-shrink-0">
             <Info
-              className="h-5 w-5 text-blue-400 dark:text-blue-50"
+              className="h-5 w-5 text-blue-400 "
               aria-hidden="true"
             />
           </div>
diff --git a/src/frontend/src/alerts/success/index.tsx b/src/frontend/src/alerts/success/index.tsx
index 7ff2d4c44..3589f944d 100644
--- a/src/frontend/src/alerts/success/index.tsx
+++ b/src/frontend/src/alerts/success/index.tsx
@@ -39,7 +39,7 @@ export default function SuccessAlert({
         <div className="flex">
           <div className="flex-shrink-0">
             <CheckCircle2
-              className="h-5 w-5 text-green-400 dark:text-green-50"
+              className="h-5 w-5 text-green-400 "
               aria-hidden="true"
             />
           </div>
diff --git a/src/frontend/src/components/chatComponent/buildTrigger/index.tsx b/src/frontend/src/components/chatComponent/buildTrigger/index.tsx
index 2e37a32dc..1b8e7a201 100644
--- a/src/frontend/src/components/chatComponent/buildTrigger/index.tsx
+++ b/src/frontend/src/components/chatComponent/buildTrigger/index.tsx
@@ -158,7 +158,7 @@ export default function BuildTrigger({
     >
       <div className={`fixed right-4` + (isBuilt ? " bottom-20" : " bottom-4")}>
         <div
-          className={`${eventClick} 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`}
+          className={`${eventClick} flex justify-center align-center py-1 px-3 w-12 h-12 rounded-full shadow-md shadow-[#0000002a] hover:shadow-[#00000032] bg-[#E2E7EE]  cursor-pointer`}
           onClick={() => {
             handleBuild(flow);
           }}
diff --git a/src/frontend/src/components/chatComponent/chatTrigger/index.tsx b/src/frontend/src/components/chatComponent/chatTrigger/index.tsx
index de7d753bd..5deb6fdfe 100644
--- a/src/frontend/src/components/chatComponent/chatTrigger/index.tsx
+++ b/src/frontend/src/components/chatComponent/chatTrigger/index.tsx
@@ -33,7 +33,7 @@ export default function ChatTrigger({ open, setOpen, isBuilt }) {
       <div className="absolute bottom-4 right-3">
         <div
           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"
+          bg-[#E2E7EE]  cursor-pointer"
           onClick={handleClick}
         >
           <button>
diff --git a/src/frontend/src/components/codeAreaComponent/index.tsx b/src/frontend/src/components/codeAreaComponent/index.tsx
index cfc601722..d634373fc 100644
--- a/src/frontend/src/components/codeAreaComponent/index.tsx
+++ b/src/frontend/src/components/codeAreaComponent/index.tsx
@@ -69,7 +69,7 @@ export default function CodeAreaComponent({
           }}
         >
           {!editNode && (
-            <ExternalLink className="w-6 h-6 hover:text-ring dark:text-gray-300 ml-3" />
+            <ExternalLink className="w-6 h-6 hover:text-ring  ml-3" />
           )}
         </button>
       </div>
diff --git a/src/frontend/src/components/headerComponent/index.tsx b/src/frontend/src/components/headerComponent/index.tsx
index 323619f9a..0266ff381 100644
--- a/src/frontend/src/components/headerComponent/index.tsx
+++ b/src/frontend/src/components/headerComponent/index.tsx
@@ -75,7 +75,7 @@ export default function Header() {
             href="https://github.com/logspace-ai/langflow"
             target="_blank"
             rel="noreferrer"
-            className="inline-flex shadow-sm items-center justify-center text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background text-gray-600 dark:text-gray-300 border border-input hover:bg-accent hover:text-accent-foreground h-9 px-3 pr-0 rounded-md"
+            className="inline-flex shadow-sm items-center justify-center text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background text-gray-600  border border-input hover:bg-accent hover:text-accent-foreground h-9 px-3 pr-0 rounded-md"
           >
             <FaGithub className="h-5 w-5 mr-2" />
             Star
@@ -102,7 +102,7 @@ export default function Header() {
 
           <Separator orientation="vertical" />
           <button
-            className="text-gray-600 hover:text-gray-500 dark:text-gray-300 dark:hover:text-gray-200"
+            className="text-gray-600 hover:text-gray-500 "
             onClick={() => {
               setDark(!dark);
             }}
diff --git a/src/frontend/src/components/promptComponent/index.tsx b/src/frontend/src/components/promptComponent/index.tsx
index 9693fbe3f..573e26e65 100644
--- a/src/frontend/src/components/promptComponent/index.tsx
+++ b/src/frontend/src/components/promptComponent/index.tsx
@@ -74,7 +74,7 @@ export default function PromptAreaComponent({
           }}
         >
           {!editNode && (
-            <ExternalLink className="w-6 h-6 hover:text-ring dark:text-gray-300" />
+            <ExternalLink className="w-6 h-6 hover:text-ring " />
           )}
         </button>
       </div>
diff --git a/src/frontend/src/components/textAreaComponent/index.tsx b/src/frontend/src/components/textAreaComponent/index.tsx
index 99b02c5e9..3f1fd497b 100644
--- a/src/frontend/src/components/textAreaComponent/index.tsx
+++ b/src/frontend/src/components/textAreaComponent/index.tsx
@@ -77,7 +77,7 @@ export default function TextAreaComponent({
           }}
         >
           {!editNode && (
-            <ExternalLink className="w-6 h-6 hover:text-ring dark:text-gray-300" />
+            <ExternalLink className="w-6 h-6 hover:text-ring " />
           )}
         </button>
       </div>
diff --git a/src/frontend/src/modals/ApiModal/index.tsx b/src/frontend/src/modals/ApiModal/index.tsx
index a3cd1880b..f72dd2d77 100644
--- a/src/frontend/src/modals/ApiModal/index.tsx
+++ b/src/frontend/src/modals/ApiModal/index.tsx
@@ -88,7 +88,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
           <DialogTitle className="flex items-center">
             <span className="pr-2">Code</span>
             <Code2
-              className="h-6 w-6 text-gray-800 pl-1 dark:text-white"
+              className="h-6 w-6 text-gray-800 pl-1 "
               aria-hidden="true"
             />
           </DialogTitle>
diff --git a/src/frontend/src/modals/EditNodeModal/index.tsx b/src/frontend/src/modals/EditNodeModal/index.tsx
index 699b5f3a4..c7bd3f577 100644
--- a/src/frontend/src/modals/EditNodeModal/index.tsx
+++ b/src/frontend/src/modals/EditNodeModal/index.tsx
@@ -90,8 +90,8 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
           <DialogDescription>
             {data.node?.description}
             <div className="flex pt-4">
-              <Variable className="w-5 h-5 pe-1 text-gray-700 stroke-2 dark:text-slate-200"></Variable>
-              <span className="text-sm font-semibold text-gray-800 dark:text-white">
+              <Variable className="w-5 h-5 pe-1 text-gray-700 stroke-2 "></Variable>
+              <span className="text-sm font-semibold text-gray-800 ">
                 Parameters
               </span>
             </div>
diff --git a/src/frontend/src/modals/chatModal/chatInput/index.tsx b/src/frontend/src/modals/chatModal/chatInput/index.tsx
index 3cba5a485..5517cc92a 100644
--- a/src/frontend/src/modals/chatModal/chatInput/index.tsx
+++ b/src/frontend/src/modals/chatModal/chatInput/index.tsx
@@ -62,12 +62,12 @@ export default function ChatInput({
         <button disabled={lockChat} onClick={() => sendMessage()}>
           {lockChat ? (
             <Lock
-              className="h-5 w-5 text-gray-500  dark:hover:text-gray-300 animate-pulse"
+              className="h-5 w-5 text-gray-500   animate-pulse"
               aria-hidden="true"
             />
           ) : (
             <Send
-              className="h-5 w-5 text-gray-500 hover:text-gray-600 dark:hover:text-gray-300"
+              className="h-5 w-5 text-gray-500 hover:text-gray-600 "
               aria-hidden="true"
             />
           )}
diff --git a/src/frontend/src/modals/chatModal/chatMessage/index.tsx b/src/frontend/src/modals/chatModal/chatMessage/index.tsx
index 9bc580d8f..6fda80f36 100644
--- a/src/frontend/src/modals/chatModal/chatMessage/index.tsx
+++ b/src/frontend/src/modals/chatModal/chatMessage/index.tsx
@@ -61,7 +61,7 @@ export default function ChatMessage({
           </div>
         )}
         {chat.isSend && (
-          <User2 className="w-6 h-6 -mb-1 text-gray-800 dark:text-gray-200" />
+          <User2 className="w-6 h-6 -mb-1 text-gray-800 " />
         )}
       </div>
       {!chat.isSend ? (
@@ -72,7 +72,7 @@ export default function ChatMessage({
                 onClick={() => setHidden((prev) => !prev)}
                 className="absolute -top-1 -left-2 cursor-pointer"
               >
-                <MessageCircle className="w-5 h-5 animate-bounce dark:text-white" />
+                <MessageCircle className="w-5 h-5 animate-bounce " />
               </div>
             )}
             {chat.thought && chat.thought !== "" && !hidden && (
@@ -151,7 +151,7 @@ export default function ChatMessage({
         </div>
       ) : (
         <div className="w-full flex items-center">
-          <div className="text-start inline-block px-3 text-gray-600 dark:text-white">
+          <div className="text-start inline-block px-3 text-gray-600 ">
             <span
               className="text-muted-foreground "
               dangerouslySetInnerHTML={{
diff --git a/src/frontend/src/modals/codeAreaModal/index.tsx b/src/frontend/src/modals/codeAreaModal/index.tsx
index 2a1503463..177fc6692 100644
--- a/src/frontend/src/modals/codeAreaModal/index.tsx
+++ b/src/frontend/src/modals/codeAreaModal/index.tsx
@@ -52,7 +52,7 @@ export default function CodeAreaModal({
           <DialogTitle className="flex items-center">
             <span className="pr-2">Edit Code</span>
             <TerminalSquare
-              className="h-6 w-6 text-gray-800 pl-1 dark:text-white"
+              className="h-6 w-6 text-gray-800 pl-1 "
               aria-hidden="true"
             />
           </DialogTitle>
diff --git a/src/frontend/src/modals/genericModal/index.tsx b/src/frontend/src/modals/genericModal/index.tsx
index 5cf42d519..3117c3a34 100644
--- a/src/frontend/src/modals/genericModal/index.tsx
+++ b/src/frontend/src/modals/genericModal/index.tsx
@@ -55,7 +55,7 @@ export default function GenericModal({
           <DialogTitle className="flex items-center">
             <span className="pr-2">{myModalTitle}</span>
             <FileText
-              className="h-6 w-6 text-gray-800 pl-1 dark:text-white"
+              className="h-6 w-6 text-gray-800 pl-1 "
               aria-hidden="true"
             />
           </DialogTitle>
diff --git a/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx
index b53b3ea04..6a2395b59 100644
--- a/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx
@@ -14,8 +14,8 @@ export default function DisclosureComponent({
           <div>
             <Disclosure.Button className="select-none bg-muted w-full flex justify-between items-center -mt-px px-3 py-2 border-y border-y-input">
               <div className="flex gap-4">
-                <Icon size={22} className="text-gray-800 dark:text-white/80" />
-                <span className="flex items-center text-sm text-gray-800 dark:text-white/80 font-medium">
+                <Icon size={22} className="text-gray-800 " />
+                <span className="flex items-center text-sm text-gray-800  font-medium">
                   {title}
                 </span>
               </div>
diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
index 8225a63d7..9986c2f6a 100644
--- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
@@ -182,11 +182,11 @@ export default function ExtraSidebar() {
                               );
                             }}
                           >
-                            <div className="flex w-full justify-between text-sm px-3 py-1 bg-white dark:bg-gray-800 items-center border-dashed border-gray-400 dark:border-gray-600 border-l-0 rounded-md rounded-l-none border">
-                              <span className="text-black dark:text-white w-full pr-1 truncate text-xs">
+                            <div className="flex w-full justify-between text-sm px-3 py-1 bg-white items-center border-dashed border-gray-400  border-l-0 rounded-md rounded-l-none border">
+                              <span className="text-black  w-full pr-1 truncate text-xs">
                                 {data[d][t].display_name}
                               </span>
-                              <Menu className="w-4 h-6  text-gray-400 dark:text-gray-600" />
+                              <Menu className="w-4 h-6  text-gray-400 " />
                             </div>
                           </div>
                         </div>

From 05d2e82f2db81675aa3f49b58c310e5cfd7642f1 Mon Sep 17 00:00:00 2001
From: Rodrigo Nader <rodrigosilvanader@gmail.com>
Date: Thu, 29 Jun 2023 00:50:58 -0300
Subject: [PATCH 16/26] feat: Update class names and colors in various
 components

- Update class names and colors in parameterComponent, GenericNode, alertDropDown, error, notice, success, buildTrigger, dropdownComponent, headerComponent, and inputListComponent to improve consistency and visual appeal.
---
 .../components/parameterComponent/index.tsx   |   2 +-
 .../src/CustomNodes/GenericNode/index.tsx     |  10 +-
 .../components/singleAlertComponent/index.tsx |  22 ++--
 src/frontend/src/alerts/error/index.tsx       |   2 +-
 src/frontend/src/alerts/notice/index.tsx      |   2 +-
 src/frontend/src/alerts/success/index.tsx     |   2 +-
 .../chatComponent/buildTrigger/index.tsx      |   4 +-
 .../components/dropdownComponent/index.tsx    |   2 +-
 .../src/components/headerComponent/index.tsx  |   4 +-
 .../components/inputListComponent/index.tsx   |   2 +-
 src/frontend/src/index.css                    | 108 +-----------------
 src/frontend/src/modals/ApiModal/index.tsx    |   2 +-
 .../src/modals/EditNodeModal/index.tsx        |   4 +-
 src/frontend/src/modals/NodeModal/index.tsx   |   2 +-
 .../src/modals/chatModal/chatInput/index.tsx  |   8 +-
 .../modals/chatModal/chatMessage/index.tsx    |   4 +-
 .../src/modals/codeAreaModal/index.tsx        |   2 +-
 .../src/modals/genericModal/index.tsx         |   2 +-
 .../components/DisclosureComponent/index.tsx  |   4 +-
 .../extraSidebarComponent/index.tsx           |   6 +-
 src/frontend/tailwind.config.js               |  16 +--
 21 files changed, 54 insertions(+), 156 deletions(-)

diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
index d2b75d7e6..37a1b09a2 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
@@ -97,7 +97,7 @@ export default function ParameterComponent({
         >
           {React.createElement(nodeIconsLucide[item.family])}
         </div>
-        <span className="ps-2 text-gray-950">
+        <span className="ps-2 text-foreground">
           {nodeNames[item.family] ?? ""}{" "}
           <span className={classNames(left ? "hidden" : "")}>
             {" "}
diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx
index d66fc70e6..d15aae152 100644
--- a/src/frontend/src/CustomNodes/GenericNode/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx
@@ -108,7 +108,7 @@ export default function GenericNode({
                 delayDuration={1500}
                 content={data.node.display_name}
               >
-                <div className="ml-2 truncate text-gray-800">
+                <div className="ml-2 truncate text-primary">
                   {data.node.display_name}
                 </div>
               </ShadTooltip>
@@ -143,7 +143,7 @@ export default function GenericNode({
                   <div
                     className={classNames(
                       validationStatus && validationStatus.valid
-                        ? "w-4 h-4 rounded-full bg-red-600 opacity-100"
+                        ? "w-4 h-4 rounded-full bg-status-red opacity-100"
                         : "w-4 h-4 rounded-full bg-ring opacity-0 hidden animate-spin",
                       "absolute w-4 hover:text-ring hover: transition-all ease-in-out duration-200"
                     )}
@@ -159,9 +159,9 @@ export default function GenericNode({
                   <div
                     className={classNames(
                       !validationStatus || isBuilding
-                        ? "w-4 h-4 rounded-full  bg-yellow-500 opacity-100"
-                        : "w-4 h-4 rounded-full bg-gray-500 opacity-0 hidden animate-spin",
-                      "absolute w-4 hover:text-gray-500 transition-all ease-in-out duration-200"
+                        ? "w-4 h-4 rounded-full  bg-status-yellow opacity-100"
+                        : "w-4 h-4 rounded-full bg-ring opacity-0 hidden animate-spin",
+                      "absolute w-4 hover:text-ring transition-all ease-in-out duration-200"
                     )}
                   ></div>
                 </div>
diff --git a/src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx b/src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx
index 97b5f5529..78e28f6d6 100644
--- a/src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx
+++ b/src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx
@@ -30,16 +30,16 @@ export default function SingleAlert({
         >
           <div className="flex-shrink-0">
             <XCircle
-              className="h-5 w-5 text-red-400"
+              className="h-5 w-5 text-status-red"
               aria-hidden="true"
             />
           </div>
           <div className="ml-3">
-            <h3 className="text-sm break-words font-medium text-red-800">
+            <h3 className="text-sm break-words font-medium text-error-foreground">
               {dropItem.title}
             </h3>
             {dropItem.list ? (
-              <div className="mt-2 text-sm text-red-700">
+              <div className="mt-2 text-sm text-error-foreground">
                 <ul className="list-disc space-y-1 pl-5">
                   {dropItem.list.map((item, idx) => (
                     <li className="break-words" key={idx}>
@@ -62,7 +62,7 @@ export default function SingleAlert({
                     removeAlert(dropItem.id);
                   }, 500);
                 }}
-                className="inline-flex rounded-md bg-red-50 p-1.5 text-red-500"
+                className="inline-flex rounded-md bg-red-50 p-1.5 text-status-red"
               >
                 <span className="sr-only">Dismiss</span>
                 <X className="h-5 w-5" aria-hidden="true" />
@@ -77,19 +77,19 @@ export default function SingleAlert({
         >
           <div className="flex-shrink-0">
             <Info
-              className="h-5 w-5 text-blue-400 "
+              className="h-5 w-5 text-medium-dark-blue"
               aria-hidden="true"
             />
           </div>
           <div className="ml-3 flex-1 md:flex md:justify-between">
-            <p className="text-sm text-blue-700">
+            <p className="text-sm text-medium-dark-blue">
               {dropItem.title}
             </p>
             <p className="mt-3 text-sm md:mt-0 md:ml-6">
               {dropItem.link ? (
                 <Link
                   to={dropItem.link}
-                  className="whitespace-nowrap font-medium text-blue-700 hover:text-ring"
+                  className="whitespace-nowrap font-medium text-medium-dark-blue hover:text-ring"
                 >
                   Details
                 </Link>
@@ -108,7 +108,7 @@ export default function SingleAlert({
                     removeAlert(dropItem.id);
                   }, 500);
                 }}
-                className="inline-flex rounded-md bg-blue-50 p-1.5 text-blue-500 "
+                className="inline-flex rounded-md bg-blue-50 p-1.5 text-medium-dark-blue "
               >
                 <span className="sr-only">Dismiss</span>
                 <X className="h-5 w-5" aria-hidden="true" />
@@ -123,12 +123,12 @@ export default function SingleAlert({
         >
           <div className="flex-shrink-0">
             <CheckCircle2
-              className="h-5 w-5 text-green-400 "
+              className="h-5 w-5 text-status-green"
               aria-hidden="true"
             />
           </div>
           <div className="ml-3">
-            <p className="text-sm font-medium text-green-800">
+            <p className="text-sm font-medium text-success-foreground">
               {dropItem.title}
             </p>
           </div>
@@ -142,7 +142,7 @@ export default function SingleAlert({
                     removeAlert(dropItem.id);
                   }, 500);
                 }}
-                className="inline-flex rounded-md bg-green-50 p-1.5 text-green-500 "
+                className="inline-flex rounded-md bg-success-background p-1.5 text-status-green"
               >
                 <span className="sr-only">Dismiss</span>
                 <X className="h-5 w-5" aria-hidden="true" />
diff --git a/src/frontend/src/alerts/error/index.tsx b/src/frontend/src/alerts/error/index.tsx
index 69fb34ef4..111bb7cfd 100644
--- a/src/frontend/src/alerts/error/index.tsx
+++ b/src/frontend/src/alerts/error/index.tsx
@@ -44,7 +44,7 @@ export default function ErrorAlert({
         <div className="flex">
           <div className="flex-shrink-0">
             <XCircle
-              className="h-5 w-5 text-red-400"
+              className="h-5 w-5 text-status-red"
               aria-hidden="true"
             />
           </div>
diff --git a/src/frontend/src/alerts/notice/index.tsx b/src/frontend/src/alerts/notice/index.tsx
index 78095018e..c5a917aae 100644
--- a/src/frontend/src/alerts/notice/index.tsx
+++ b/src/frontend/src/alerts/notice/index.tsx
@@ -41,7 +41,7 @@ export default function NoticeAlert({
         <div className="flex">
           <div className="flex-shrink-0">
             <Info
-              className="h-5 w-5 text-blue-400 "
+              className="h-5 w-5 text-medium-dark-blue "
               aria-hidden="true"
             />
           </div>
diff --git a/src/frontend/src/alerts/success/index.tsx b/src/frontend/src/alerts/success/index.tsx
index 3589f944d..56ef8a2ad 100644
--- a/src/frontend/src/alerts/success/index.tsx
+++ b/src/frontend/src/alerts/success/index.tsx
@@ -39,7 +39,7 @@ export default function SuccessAlert({
         <div className="flex">
           <div className="flex-shrink-0">
             <CheckCircle2
-              className="h-5 w-5 text-green-400 "
+              className="h-5 w-5 text-status-green"
               aria-hidden="true"
             />
           </div>
diff --git a/src/frontend/src/components/chatComponent/buildTrigger/index.tsx b/src/frontend/src/components/chatComponent/buildTrigger/index.tsx
index 1b8e7a201..dda2e31e1 100644
--- a/src/frontend/src/components/chatComponent/buildTrigger/index.tsx
+++ b/src/frontend/src/components/chatComponent/buildTrigger/index.tsx
@@ -174,9 +174,9 @@ export default function BuildTrigger({
                   value={progress}
                 ></RadialProgressComponent>
               ) : isBuilding ? (
-                <Loading strokeWidth={1.5} style={{ color: "#fb923c" }} />
+                <Loading strokeWidth={1.5} className="stroke-build-trigger"/>
               ) : (
-                <Zap className="sh-6 w-6 fill-orange-400 stroke-1 stroke-orange-400" />
+                <Zap className="sh-6 w-6 fill-build-trigger stroke-1 stroke-build-trigger" />
               )}
             </div>
           </button>
diff --git a/src/frontend/src/components/dropdownComponent/index.tsx b/src/frontend/src/components/dropdownComponent/index.tsx
index 7b2a03fd6..e34ef05fd 100644
--- a/src/frontend/src/components/dropdownComponent/index.tsx
+++ b/src/frontend/src/components/dropdownComponent/index.tsx
@@ -47,7 +47,7 @@ export default function Dropdown({
                   }
                 >
                   <ChevronsUpDown
-                    className="h-5 w-5 text-gray-400"
+                    className="h-5 w-5 text-border"
                     aria-hidden="true"
                   />
                 </span>
diff --git a/src/frontend/src/components/headerComponent/index.tsx b/src/frontend/src/components/headerComponent/index.tsx
index 0266ff381..add19c0bf 100644
--- a/src/frontend/src/components/headerComponent/index.tsx
+++ b/src/frontend/src/components/headerComponent/index.tsx
@@ -75,7 +75,7 @@ export default function Header() {
             href="https://github.com/logspace-ai/langflow"
             target="_blank"
             rel="noreferrer"
-            className="inline-flex shadow-sm items-center justify-center text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background text-gray-600  border border-input hover:bg-accent hover:text-accent-foreground h-9 px-3 pr-0 rounded-md"
+            className="inline-flex shadow-sm items-center justify-center text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background text-muted-foreground  border border-input hover:bg-accent hover:text-accent-foreground h-9 px-3 pr-0 rounded-md"
           >
             <FaGithub className="h-5 w-5 mr-2" />
             Star
@@ -102,7 +102,7 @@ export default function Header() {
 
           <Separator orientation="vertical" />
           <button
-            className="text-gray-600 hover:text-gray-500 "
+            className="text-muted-foreground hover:text-ring "
             onClick={() => {
               setDark(!dark);
             }}
diff --git a/src/frontend/src/components/inputListComponent/index.tsx b/src/frontend/src/components/inputListComponent/index.tsx
index 062155af7..d81da6183 100644
--- a/src/frontend/src/components/inputListComponent/index.tsx
+++ b/src/frontend/src/components/inputListComponent/index.tsx
@@ -73,7 +73,7 @@ export default function InputListComponent({
                 onChange(inputList);
               }}
             >
-              <X className="w-4 h-4 hover:text-red-600" />
+              <X className="w-4 h-4 hover:text-status-red" />
             </button>
           )}
         </div>
diff --git a/src/frontend/src/index.css b/src/frontend/src/index.css
index 329539241..959b137d0 100644
--- a/src/frontend/src/index.css
+++ b/src/frontend/src/index.css
@@ -3,109 +3,6 @@
 @tailwind utilities;
 
 @layer base {
-  :root {
-	  --background: 0 0% 100%; /* hsl(0 0% 100%) */
-	  --foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
-    
-	  --muted: 210 40% 96.1%; /* hsl(210 40% 96%) */
-	  --muted-foreground: 215.4 16.3% 46.9%; /* hsl(215 16% 46%) */
-    
-	  --popover: 0 0% 100%; /* hsl(0 0% 100%) */
-	  --popover-foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
-
-	  --card: 0 0% 100%; /* hsl(0 0% 100%) */
-	  --card-foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
-    
-	  --border: 214.3 31.8% 91.4%; /* hsl(214 32% 91%) */
-	  --input: 214.3 31.8% 91.4%; /* hsl(214 32% 91%) */
-    
-	  --primary: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
-	  --primary-foreground: 210 40% 98%; /* hsl(210 40% 98%) */
-    
-	  --secondary: 210 40% 96.1%; /* hsl(210 40% 96%) */
-	  --secondary-foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
-    
-	  --accent: 210 40% 96.1%; /* hsl(210 40% 96%) */
-	  --accent-foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
-    
-	  --destructive: 0 100% 50%; /* hsl(0 100% 50%) */
-	  --destructive-foreground: 210 40% 98%; /* hsl(210 40% 98%) */
-    
-    
-	  --ring: 215 20.2% 65.1%; /* hsl(215 20% 65%) */
-    
-    --radius: 0.5rem;
-    
-    
-    --build-background: #E2E7EE; /* hsl(215, 26%, 91%) */
-    
-    --round-btn-shadow: #00000063;
-    
-    --hover-btn-background: #242f47;
-    
-    --build-trigger: 	#dc735b; /* hsl(11, 65%, 61%) */
-    --chat-trigger: #dbeafe; /* tailwind blue 100 USED IN CHAT BACKGROUND */
-
-    --error-background: #fef2f2; /* tailwind red 50 USED IN START ERROR MESSAGE BG light-red */
-    --error-foreground: #991b1b; /* tailwind red 800 USED IN START ERROR MESSAGE TEXT almost-dark-red */
-
-    --status-red: #ef4444; /* tailwind red 500 medium-red*/
-    --status-yellow: #eab308; /* tailwind yellow 500 medium-yellow*/
-    --status-green: #4ade80; /* tailwind green 400 medium-green*/
-
-    --success-background: #f0fdf4; /* tailwind green 50 USED IN SUCCESS MSG light-green*/ 
-    --success-foreground: #14532d; /* tailwind green 900 USED IN SUCCESS MSG dark-green */
-
-    /* --high-indigo: #4338ca;  tailwind indigo 700 
-  --medium-indigo: #6366f1;  tailwind indigo 500 
-  --medium-dark-blue:#1d4ed8;  tailwind blue 700 Change in component (--ring)
-  --medium-high-indigo: #4f46e5;  tailwind indigo 600 
-  --medium-emerald: #10b981;  tailwind emerald 500 Unused
-  --medium-dark-green: #166534;  tailwind green 800 Unused
-  --almost-medium-green: #22c55e;  tailwind green 500 Unused
-  --light-slate: #cbd5e1;  tailwind slate 300 UNUSED
-  --light-blue: #eff6ff;  tailwind blue 50
-  --dark-blue: #1e3a8a;  tailwind blue 900
-  --medium-blue: #60a5fa;  tailwind blue 400
-  --almost-dark-blue:#3b82f6;  tailwind blue 500
-  --almost-light-blue: #dbeafe;   tailwind blue 100 */
-  }
-
-  .dark {
-    --background: 224 71% 4%; /* hsl(224 71% 4%) */
-    --foreground: 213 31% 91%; /* hsl(213 31% 91%) */
-
-    --muted: 223 47% 11%; /* hsl(223 47% 11%) */
-    --muted-foreground: 215.4 16.3% 56.9%; /* hsl(215 16% 56%) */
-
-    --popover: 224 71% 4%; /* hsl(224 71% 4%) */
-    --popover-foreground: 215 20.2% 65.1%; /* hsl(215 20% 65%) */
-
-    --card: 224 71% 4%; /* hsl(224 71% 4%) */
-    --card-foreground: 213 31% 91%; /* hsl(213 31% 91%) */
-
-    --border: 216 34% 17%; /* hsl(216 34% 17%) */
-    --input: 216 34% 17%; /* hsl(216 34% 17%) */
-
-    --primary: 210 40% 98%; /* hsl(210 40% 98%) */
-    --primary-foreground: 222.2 47.4% 1.2%; /* hsl(222 47% 1%) */
-
-    --secondary: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
-    --secondary-foreground: 210 40% 98%; /* hsl(210 40% 98%) */
-
-    --accent: 216 34% 17%; /* hsl(216 34% 17%) */
-    --accent-foreground: 210 40% 98%; /* hsl(210 40% 98%) */
-
-    --destructive: 0 63% 31%; /* hsl(0 63% 31%) */
-    --destructive-foreground: 210 40% 98%; /* hsl(210 40% 98%) */
-
-    --ring: 216 34% 17%; /* hsl(216 34% 17%) */
-
-    --radius: 0.5rem;
-
-    --build-trigger: 11, 65% 61%; /* hsl(11, 65%, 61%) */
-  }
-}
 
 :root {
   --background: 0 0% 100%; /* hsl(0 0% 100%) */
@@ -145,6 +42,7 @@
 
   --success-background: #f0fdf4; /* tailwind green 50 USED IN SUCCESS MSG light-green*/ 
   --success-foreground: #14532d; /* tailwind green 900 USED IN SUCCESS MSG dark-green */
+
   --high-indigo: #4338ca;  /*tailwind indigo 700*/ 
   --medium-indigo: #6366f1;  /* tailwind indigo 500 */
   --medium-dark-blue:#1d4ed8; /* tailwind blue 700 Change in component (--ring)*/
@@ -191,7 +89,7 @@
   --high-indigo: #000000;  /*tailwind indigo 700*/ 
   --medium-indigo: #000000;  /* tailwind indigo 500 */
   --medium-dark-blue:#000000; /* tailwind blue 700 Change in component (--ring)*/
-}
+}}
 
 @layer base {
   * {
@@ -222,4 +120,4 @@ code {
 The cursor: default; property value restores the browser's default cursor style for the targeted element. By applying this style, the element will no longer have a custom cursor appearance such as "grab" or any other custom cursor defined elsewhere in the application. Instead, it will revert to the default cursor style determined by the browser, typically an arrow-shaped cursor. */
 .react-flow__pane {
   cursor: default;
-}
+}
\ No newline at end of file
diff --git a/src/frontend/src/modals/ApiModal/index.tsx b/src/frontend/src/modals/ApiModal/index.tsx
index f72dd2d77..f9949f091 100644
--- a/src/frontend/src/modals/ApiModal/index.tsx
+++ b/src/frontend/src/modals/ApiModal/index.tsx
@@ -88,7 +88,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
           <DialogTitle className="flex items-center">
             <span className="pr-2">Code</span>
             <Code2
-              className="h-6 w-6 text-gray-800 pl-1 "
+              className="h-6 w-6 text-primary pl-1 "
               aria-hidden="true"
             />
           </DialogTitle>
diff --git a/src/frontend/src/modals/EditNodeModal/index.tsx b/src/frontend/src/modals/EditNodeModal/index.tsx
index c7bd3f577..d1041429a 100644
--- a/src/frontend/src/modals/EditNodeModal/index.tsx
+++ b/src/frontend/src/modals/EditNodeModal/index.tsx
@@ -90,8 +90,8 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
           <DialogDescription>
             {data.node?.description}
             <div className="flex pt-4">
-              <Variable className="w-5 h-5 pe-1 text-gray-700 stroke-2 "></Variable>
-              <span className="text-sm font-semibold text-gray-800 ">
+              <Variable className="w-5 h-5 pe-1 text-muted-foreground stroke-2 "></Variable>
+              <span className="text-sm font-semibold text-primary ">
                 Parameters
               </span>
             </div>
diff --git a/src/frontend/src/modals/NodeModal/index.tsx b/src/frontend/src/modals/NodeModal/index.tsx
index 3af0e66dd..1ae11d08e 100644
--- a/src/frontend/src/modals/NodeModal/index.tsx
+++ b/src/frontend/src/modals/NodeModal/index.tsx
@@ -147,7 +147,7 @@ export default function NodeModal({ data }: { data: NodeDataType }) {
                   <div className="bg-input w-full pb-3 flex flex-row-reverse px-4">
                     <button
                       type="button"
-                      className="inline-flex w-full justify-center rounded-md border border-transparent bg-red-500 px-4 py-2 text-base font-medium text-background shadow-sm hover:bg-ring focus:outline-none focus:ring-1 focus:ring-ring focus:ring-offset-1 sm:ml-3 sm:w-auto sm:text-sm"
+                      className="inline-flex w-full justify-center rounded-md border border-transparent bg-status-red px-4 py-2 text-base font-medium text-background shadow-sm hover:bg-ring focus:outline-none focus:ring-1 focus:ring-ring focus:ring-offset-1 sm:ml-3 sm:w-auto sm:text-sm"
                       onClick={() => {
                         setModalOpen(false);
                       }}
diff --git a/src/frontend/src/modals/chatModal/chatInput/index.tsx b/src/frontend/src/modals/chatModal/chatInput/index.tsx
index 5517cc92a..dfde0e1ac 100644
--- a/src/frontend/src/modals/chatModal/chatInput/index.tsx
+++ b/src/frontend/src/modals/chatModal/chatInput/index.tsx
@@ -51,8 +51,8 @@ export default function ChatInput({
         }}
         className={classNames(
           lockChat
-            ? " bg-input text-black "
-            : "  bg-background-200 text-black ",
+            ? " bg-input text-foreground "
+            : "  bg-background text-foreground ",
           "form-input block w-full custom-scroll rounded-md border-ring  pr-10 sm:text-sm" +
             INPUT_STYLE
         )}
@@ -62,12 +62,12 @@ export default function ChatInput({
         <button disabled={lockChat} onClick={() => sendMessage()}>
           {lockChat ? (
             <Lock
-              className="h-5 w-5 text-gray-500   animate-pulse"
+              className="h-5 w-5 text-ring   animate-pulse"
               aria-hidden="true"
             />
           ) : (
             <Send
-              className="h-5 w-5 text-gray-500 hover:text-gray-600 "
+              className="h-5 w-5 text-ring hover:text-muted-foreground "
               aria-hidden="true"
             />
           )}
diff --git a/src/frontend/src/modals/chatModal/chatMessage/index.tsx b/src/frontend/src/modals/chatModal/chatMessage/index.tsx
index 6fda80f36..50e30bd1c 100644
--- a/src/frontend/src/modals/chatModal/chatMessage/index.tsx
+++ b/src/frontend/src/modals/chatModal/chatMessage/index.tsx
@@ -61,7 +61,7 @@ export default function ChatMessage({
           </div>
         )}
         {chat.isSend && (
-          <User2 className="w-6 h-6 -mb-1 text-gray-800 " />
+          <User2 className="w-6 h-6 -mb-1 text-primary " />
         )}
       </div>
       {!chat.isSend ? (
@@ -151,7 +151,7 @@ export default function ChatMessage({
         </div>
       ) : (
         <div className="w-full flex items-center">
-          <div className="text-start inline-block px-3 text-gray-600 ">
+          <div className="text-start inline-block px-3 text-muted-foreground ">
             <span
               className="text-muted-foreground "
               dangerouslySetInnerHTML={{
diff --git a/src/frontend/src/modals/codeAreaModal/index.tsx b/src/frontend/src/modals/codeAreaModal/index.tsx
index 177fc6692..da7eeb2d0 100644
--- a/src/frontend/src/modals/codeAreaModal/index.tsx
+++ b/src/frontend/src/modals/codeAreaModal/index.tsx
@@ -52,7 +52,7 @@ export default function CodeAreaModal({
           <DialogTitle className="flex items-center">
             <span className="pr-2">Edit Code</span>
             <TerminalSquare
-              className="h-6 w-6 text-gray-800 pl-1 "
+              className="h-6 w-6 text-primary pl-1 "
               aria-hidden="true"
             />
           </DialogTitle>
diff --git a/src/frontend/src/modals/genericModal/index.tsx b/src/frontend/src/modals/genericModal/index.tsx
index 3117c3a34..c15b33f53 100644
--- a/src/frontend/src/modals/genericModal/index.tsx
+++ b/src/frontend/src/modals/genericModal/index.tsx
@@ -55,7 +55,7 @@ export default function GenericModal({
           <DialogTitle className="flex items-center">
             <span className="pr-2">{myModalTitle}</span>
             <FileText
-              className="h-6 w-6 text-gray-800 pl-1 "
+              className="h-6 w-6 text-primary pl-1 "
               aria-hidden="true"
             />
           </DialogTitle>
diff --git a/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx
index 6a2395b59..364ed52d9 100644
--- a/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx
@@ -14,8 +14,8 @@ export default function DisclosureComponent({
           <div>
             <Disclosure.Button className="select-none bg-muted w-full flex justify-between items-center -mt-px px-3 py-2 border-y border-y-input">
               <div className="flex gap-4">
-                <Icon size={22} className="text-gray-800 " />
-                <span className="flex items-center text-sm text-gray-800  font-medium">
+                <Icon size={22} className="text-primary " />
+                <span className="flex items-center text-sm text-primary  font-medium">
                   {title}
                 </span>
               </div>
diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
index 9986c2f6a..3ec4474bd 100644
--- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
@@ -182,11 +182,11 @@ export default function ExtraSidebar() {
                               );
                             }}
                           >
-                            <div className="flex w-full justify-between text-sm px-3 py-1 bg-white items-center border-dashed border-gray-400  border-l-0 rounded-md rounded-l-none border">
-                              <span className="text-black  w-full pr-1 truncate text-xs">
+                            <div className="flex w-full justify-between text-sm px-3 py-1 bg-white items-center border-dashed border-ring  border-l-0 rounded-md rounded-l-none border">
+                              <span className="text-foreground  w-full pr-1 truncate text-xs">
                                 {data[d][t].display_name}
                               </span>
-                              <Menu className="w-4 h-6  text-gray-400 " />
+                              <Menu className="w-4 h-6  text-ring " />
                             </div>
                           </div>
                         </div>
diff --git a/src/frontend/tailwind.config.js b/src/frontend/tailwind.config.js
index 922eb9a20..4273588d8 100644
--- a/src/frontend/tailwind.config.js
+++ b/src/frontend/tailwind.config.js
@@ -164,14 +164,14 @@ module.exports = {
         'dark-gray': "var(--dark-gray)",
         'btn-hover-bg': "var(--hover-btn-background)",
         'btn-shadow': "var(--round-btn-shadow)",
-        buildBackground: "var(--build-background)",
-        build: "var(--build-trigger)",
-        border: "hsl(var(--border))",
-        input: "hsl(var(--input))",
-        ring: "hsl(var(--ring))",
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
-        primary: {
+        'build-background': "var(--build-background)",
+        'build-trigger': "var(--build-trigger)",
+        'border': "hsl(var(--border))",
+        'input': "hsl(var(--input))",
+        'ring': "hsl(var(--ring))",
+        'background': "hsl(var(--background))",
+        'foreground': "hsl(var(--foreground))",
+        'primary': {
           DEFAULT: "hsl(var(--primary))",
           foreground: "hsl(var(--primary-foreground))",
         },

From b9e9f3ba4cfc1e2c26b906d58f82d511f6fe2c22 Mon Sep 17 00:00:00 2001
From: Rodrigo Nader <rodrigosilvanader@gmail.com>
Date: Thu, 29 Jun 2023 02:39:35 -0300
Subject: [PATCH 17/26] refactor(frontend): Adjust styling in chatComponent,
 buildTrigger, dropdownComponent, and other components

- Adjusted styling in chatComponent, buildTrigger, dropdownComponent, and other components to improve visual consistency and enhance user experience.
- Updated button styles, background colors, and text colors to create a more cohesive design across the application.
- Fixed incorrect color values and replaced them with appropriate color variables from the tailwind configuration.
- Removed redundant styles and optimized the code for better maintainability.
---
 .../chatComponent/buildTrigger/index.tsx      |   5 +-
 .../chatComponent/chatTrigger/index.tsx       |   6 +-
 .../components/dropdownComponent/index.tsx    |   6 +-
 src/frontend/src/index.css                    | 105 +++++-----
 .../ConnectionLineComponent/index.tsx         |   1 +
 .../extraSidebarComponent/index.tsx           |   3 +-
 .../components/nodeToolbarComponent/index.tsx |   6 +-
 src/frontend/tailwind.config.js               | 191 ++++--------------
 8 files changed, 106 insertions(+), 217 deletions(-)

diff --git a/src/frontend/src/components/chatComponent/buildTrigger/index.tsx b/src/frontend/src/components/chatComponent/buildTrigger/index.tsx
index dda2e31e1..19cbde95d 100644
--- a/src/frontend/src/components/chatComponent/buildTrigger/index.tsx
+++ b/src/frontend/src/components/chatComponent/buildTrigger/index.tsx
@@ -158,7 +158,7 @@ export default function BuildTrigger({
     >
       <div className={`fixed right-4` + (isBuilt ? " bottom-20" : " bottom-4")}>
         <div
-          className={`${eventClick} flex justify-center align-center py-1 px-3 w-12 h-12 rounded-full shadow-md shadow-[#0000002a] hover:shadow-[#00000032] bg-[#E2E7EE]  cursor-pointer`}
+          className={`${eventClick} flex justify-center align-center py-1 px-3 w-12 h-12 rounded-full shadow-md shadow-round-btn-shadow hover:shadow-round-btn-shadow bg-border cursor-pointer`}
           onClick={() => {
             handleBuild(flow);
           }}
@@ -170,7 +170,8 @@ export default function BuildTrigger({
               {isBuilding && progress < 1 ? (
                 // Render your loading animation here when isBuilding is true
                 <RadialProgressComponent
-                  color={"text-orange-400"}
+                // ! confirm below works
+                  color={"text-build-trigger"}
                   value={progress}
                 ></RadialProgressComponent>
               ) : isBuilding ? (
diff --git a/src/frontend/src/components/chatComponent/chatTrigger/index.tsx b/src/frontend/src/components/chatComponent/chatTrigger/index.tsx
index 5deb6fdfe..1461250d2 100644
--- a/src/frontend/src/components/chatComponent/chatTrigger/index.tsx
+++ b/src/frontend/src/components/chatComponent/chatTrigger/index.tsx
@@ -32,14 +32,14 @@ export default function ChatTrigger({ open, setOpen, isBuilt }) {
     >
       <div className="absolute bottom-4 right-3">
         <div
-          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]  cursor-pointer"
+          className="flex justify-center align-center py-1 px-3 w-12 h-12 rounded-full shadow-md shadow-round-btn-shadow hover:shadow-round-btn-shadow
+          bg-border cursor-pointer"
           onClick={handleClick}
         >
           <button>
             <div className="flex gap-3">
               <MessagesSquare
-                className="pth-6 w-6 fill-[#5c8be1] stroke-1 stroke-[#5c8be1]"
+                className="pth-6 w-6 fill-chat-trigger stroke-1 stroke-chat-trigger"
                 style={{ color: "white" }}
                 strokeWidth={1.5}
               />
diff --git a/src/frontend/src/components/dropdownComponent/index.tsx b/src/frontend/src/components/dropdownComponent/index.tsx
index e34ef05fd..78b570754 100644
--- a/src/frontend/src/components/dropdownComponent/index.tsx
+++ b/src/frontend/src/components/dropdownComponent/index.tsx
@@ -34,9 +34,9 @@ export default function Dropdown({
               <Listbox.Button
                 className={
                   editNode
-                    ? "relative pr-8 placeholder:text-center block w-full pt-0.5 pb-0.5 form-input rounded-md shadow-sm sm:text-sm border-ring border-1 bg-transparent" +
+                    ? "relative pr-8 placeholder:text-center block w-full pt-0.5 pb-0.5 form-input rounded-md shadow-sm sm:text-sm border-ring border-1" +
                       INPUT_STYLE
-                      : "ring-1 ring-ring placeholder:text-muted-foreground w-full py-2 pl-3 pr-10 text-left focus-visible:outline-none rounded-md border-ring shadow-sm sm:text-sm" +
+                      : "ring-1 ring-ring placeholder:text-muted-foreground w-full py-2 pl-3 pr-10 text-left focus-visible:outline-none rounded-md border-ring shadow-sm sm:text-sm bg-background" +
                       INPUT_STYLE
                 }
               >
@@ -47,7 +47,7 @@ export default function Dropdown({
                   }
                 >
                   <ChevronsUpDown
-                    className="h-5 w-5 text-border"
+                    className="h-5 w-5 text-muted-foreground"
                     aria-hidden="true"
                   />
                 </span>
diff --git a/src/frontend/src/index.css b/src/frontend/src/index.css
index 959b137d0..bce434de6 100644
--- a/src/frontend/src/index.css
+++ b/src/frontend/src/index.css
@@ -2,6 +2,9 @@
 @tailwind components;
 @tailwind utilities;
 
+
+/* ! Confirm that all colors here are found in tailwind config */
+
 @layer base {
 
 :root {
@@ -27,68 +30,74 @@
   --ring: 215 20.2% 65.1%; /* hsl(215 20% 65%) */
 
   --round-btn-shadow: #00000063;
-  --hover-btn-background: #242f47;
 
-  --build-background: #E2E7EE;
-  --build-trigger: 	#dc735b; /* hsl(11, 65%, 61%) */
-  --chat-trigger: #dbeafe; /* tailwind blue 100 USED IN CHAT BACKGROUND */
+  --build-trigger: 	#dc735b;
+  --chat-trigger: #5c8be1;
 
-  --error-background: #fef2f2; /* tailwind red 50 USED IN START ERROR MESSAGE BG light-red */
-  --error-foreground: #991b1b; /* tailwind red 800 USED IN START ERROR MESSAGE TEXT almost-dark-red */
+  --error-background: #fef2f2;
+  --error-foreground: #991b1b;
 
-  --status-red: #ef4444; /* tailwind red 500 medium-red*/
-  --status-yellow: #eab308; /* tailwind yellow 500 medium-yellow*/
-  --status-green: #4ade80; /* tailwind green 400 medium-green*/
+  --status-red: #ef4444;
+  --status-yellow: #eab308;
+  --status-green: #4ade80;
 
-  --success-background: #f0fdf4; /* tailwind green 50 USED IN SUCCESS MSG light-green*/ 
-  --success-foreground: #14532d; /* tailwind green 900 USED IN SUCCESS MSG dark-green */
+  --success-background: #f0fdf4;
+  --success-foreground: #14532d;
 
-  --high-indigo: #4338ca;  /*tailwind indigo 700*/ 
-  --medium-indigo: #6366f1;  /* tailwind indigo 500 */
-  --medium-dark-blue:#1d4ed8; /* tailwind blue 700 Change in component (--ring)*/
+  --high-indigo: #4338ca;
+  --medium-indigo: #6366f1;
+  --medium-dark-blue:#1d4ed8;
 }
 
 .dark {
-  --background: 224 71% 0%; /* hsl(224 71% 4%) */
-  --foreground: 213 31% 0%; /* hsl(213 31% 91%) */
-  --muted: 223 47% 0%; /* hsl(223 47% 11%) */
-  --muted-foreground: 215.4 16.3% 0%; /* hsl(215 16% 56%) */
-  --popover: 224 71% 0%; /* hsl(224 71% 4%) */
-  --popover-foreground: 215 20.2% 0%; /* hsl(215 20% 65%) */
-  --card: 224 71% 0%; /* hsl(224 71% 4%) */
-  --card-foreground: 213 31% 0%; /* hsl(213 31% 91%) */
-  --border: 216 34% 0%; /* hsl(216 34% 17%) */
-  --input: 216 34% 0%; /* hsl(216 34% 17%) */
-  --primary: 210 40% 0%; /* hsl(210 40% 98%) */
-  --primary-foreground: 222.2 47.4% 0%; /* hsl(222 47% 1%) */
-  --secondary: 222.2 47.4% 0%; /* hsl(222 47% 11%) */
-  --secondary-foreground: 210 40% 0%; /* hsl(210 40% 98%) */
-  --accent: 216 34% 0%; /* hsl(216 34% 17%) */
-  --accent-foreground: 210 40% 0%; /* hsl(210 40% 98%) */
-  --destructive: 0 63% 0%; /* hsl(0 63% 31%) */
-  --destructive-foreground: 210 40% 0%; /* hsl(210 40% 98%) */
-  --ring: 216 34% 0%; /* hsl(216 34% 17%) */
+  --background: 224 71% 4%; /* hsl(224 71% 4%) */
+  --foreground: 213 31% 85%; /* hsl(213 31% 91%) */
+
+  --muted: 223 40% 11%; /* hsl(223 47% 11%) */
+  --muted-foreground: 215.4 16.3% 56.9%; /* hsl(215 16% 56%) */
+
+  --popover: 224 71% 4%; /* hsl(224 71% 4%) */
+  --popover-foreground: 215 20.2% 65.1%; /* hsl(215 20% 65%) */
+
+  --card: 224 71% 7%; /* hsl(224 71% 4%) */
+  --card-foreground: 213 31% 80%; /* hsl(213 31% 91%) */
+
+  --border: 216 24% 17%; /* hsl(216 34% 17%) */
+  --input: 216 24% 17%; /* hsl(216 34% 17%) */
+
+  --primary: 210 40% 80%; /* hsl(210 40% 98%) */
+  --primary-foreground: 222.2 47.4% 1.2%; /* hsl(222 47% 1%) */
+
+  --secondary: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
+  --secondary-foreground: 210 40% 98%; /* hsl(210 40% 98%) */
+
+  --accent: 216 24% 17%; /* hsl(216 34% 17%) */
+  --accent-foreground: 210 30% 98%; /* hsl(210 40% 98%) */
+
+  --destructive: 0 63% 31%; /* hsl(0 63% 31%) */
+  --destructive-foreground: 210 40% 98%; /* hsl(210 40% 98%) */
+
+  --ring: 216 24% 30%; /* hsl(216 24% 30%) */
+
   --radius: 0.5rem;
 
-  --round-btn-shadow: #000000;
-  --hover-btn-background: #000000;
+  --round-btn-shadow: #00000063;
 
-  --build-background: #000000;
-  --build-trigger: 	#000000; /* hsl(11, 65%, 61%) */
-  --chat-trigger: #000000; /* tailwind blue 100 USED IN CHAT BACKGROUND */
+  --build-trigger: 	#dc735b;
+  --chat-trigger: #5c8be1;
 
-  --error-background: #000000; /* tailwind red 50 USED IN START ERROR MESSAGE BG light-red */
-  --error-foreground: #000000; /* tailwind red 800 USED IN START ERROR MESSAGE TEXT almost-dark-red */
+  --error-foreground: #c2b7b7;
+  --error-background: #671212;
 
-  --status-red: #000000; /* tailwind red 500 medium-red*/
-  --status-yellow: #000000; /* tailwind yellow 500 medium-yellow*/
-  --status-green: #000000; /* tailwind green 400 medium-green*/
+  --status-red: #ef4444;
+  --status-yellow: #eab308;
+  --status-green: #4ade80;
 
-  --success-background: #000000; /* tailwind green 50 USED IN SUCCESS MSG light-green*/ 
-  --success-foreground: #000000; /* tailwind green 900 USED IN SUCCESS MSG dark-green */
-  --high-indigo: #000000;  /*tailwind indigo 700*/ 
-  --medium-indigo: #000000;  /* tailwind indigo 500 */
-  --medium-dark-blue:#000000; /* tailwind blue 700 Change in component (--ring)*/
+  --success-background: #f0fdf4;
+  --success-foreground: #14532d;
+  --high-indigo: #4338ca;
+  --medium-indigo: #6366f1;
+  --medium-dark-blue:#1d4ed8;
 }}
 
 @layer base {
diff --git a/src/frontend/src/pages/FlowPage/components/ConnectionLineComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/ConnectionLineComponent/index.tsx
index de1191d07..bc78bc5bd 100644
--- a/src/frontend/src/pages/FlowPage/components/ConnectionLineComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/ConnectionLineComponent/index.tsx
@@ -11,6 +11,7 @@ const ConnectionLineComponent = ({
     <g>
       <path
         fill="none"
+        // ! Replace hash # colors here
         stroke="#222"
         strokeWidth={1.5}
         className="animated "
diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
index 3ec4474bd..772054b94 100644
--- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
@@ -133,7 +133,8 @@ export default function ExtraSidebar() {
           }}
         />
         <div className="absolute inset-y-0 right-0 flex py-1.5 pr-3 items-center">
-          <Search size={20} color="#000000" />
+        {/* ! replace hash color here */}
+          <Search size={20} className="text-primary" />
         </div>
       </div>
 
diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
index 04fb91959..6237b9483 100644
--- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
@@ -45,8 +45,8 @@ const NodeToolbarComponent = (props) => {
             <button
               className={classNames(
                 nodeLength > 0
-                  ? "text-foreground transition-all duration-500 ease-in-out  shadow-md relative -ml-px inline-flex items-center bg-background px-2 py-2  ring-1 ring-inset ring-ring hover:bg-muted focus:z-10"
-                  : "text-foreground transition-all duration-500 ease-in-out  shadow-md relative -ml-px inline-flex items-center bg-background px-2 py-2  ring-1 ring-inset ring-ring hover:bg-muted focus:z-10 rounded-r-md"
+                  ? "text-foreground transition-all duration-500 ease-in-out shadow-md relative -ml-px inline-flex items-center bg-background px-2 py-2  ring-1 ring-inset ring-ring hover:bg-muted focus:z-10"
+                  : "text-foreground transition-all duration-500 ease-in-out shadow-md relative -ml-px inline-flex items-center bg-background px-2 py-2  ring-1 ring-inset ring-ring hover:bg-muted focus:z-10 rounded-r-md"
               )}
               onClick={(event) => {
                 event.preventDefault();
@@ -72,7 +72,7 @@ const NodeToolbarComponent = (props) => {
           {nodeLength > 0 && (
             <ShadTooltip delayDuration={1000} content="Edit" side="top">
               <button
-                className="text-foreground transition-all duration-500 ease-in-out  shadow-md relative -ml-px inline-flex items-center bg-background px-2 py-2  ring-1 ring-inset ring-ring hover:bg-muted focus:z-10 rounded-r-md"
+                className="text-foreground transition-all duration-500 ease-in-out shadow-md relative -ml-px inline-flex items-center bg-background px-2 py-2 ring-1 ring-inset ring-ring hover:bg-muted focus:z-10 rounded-r-md"
                 onClick={(event) => {
                   event.preventDefault();
                   props.openPopUp(<EditNodeModal data={props.data} />);
diff --git a/src/frontend/tailwind.config.js b/src/frontend/tailwind.config.js
index 4273588d8..e60b7e594 100644
--- a/src/frontend/tailwind.config.js
+++ b/src/frontend/tailwind.config.js
@@ -3,9 +3,11 @@ const { fontFamily } = require("tailwindcss/defaultTheme");
 
 import plugin from "tailwindcss/plugin";
 
+// ! Check if removing the other module.exports made sense
 module.exports = {
   darkMode: ["class"],
-  content: ["app/**/*.{ts,tsx}", "components/**/*.{ts,tsx}"],
+  content: ["app/**/*.{ts,tsx}", "components/**/*.{ts,tsx}", "./index.html", "./src/**/*.{js,ts,tsx,jsx}"],
+  important: true,
   theme: {
     container: {
       center: true,
@@ -16,42 +18,44 @@ module.exports = {
     },
     extend: {
       colors: {
-        white: "var(--white)",
-        'high-light-gray': "var(--high-light-gray)",
+
+        'almost-dark-gray': "var(--almost-dark-gray)",
         'almost-light-blue': "var(--almost-light-blue)",
-        'high-indigo': "var(--high-indigo)",
-        'medium-high-indigo': "var(--medium-high-indigo)",
-        'medium-emerald': "var(--medium-emerald)",
-        'status-yellow': "var(--status-yellow)",
-        'almost-medium-green': "var(--almost-medium-green)",
         'almost-medium-blue': "var(--almost-medium-blue)",
-        'medium-indigo': "var(--medium-indigo)",
-        'light-slate': "var(--light-slate)",
-        'success-background': "var(--success-background)",
-        'success-foreground': "var(--success-foreground)",
-        'status-green': "var(--status-green)",
-        'medium-dark-green': "var(--medium-dark-green)",
-        'light-blue': "var(--light-blue)",
-        'dark-blue': "var(--dark-blue)",
-        'medium-blue': "var(--medium-blue)",
-        'medium-dark-blue': "var(--medium-dark-blue)",
+        'almost-medium-gray': "var(--almost-medium-gray)",
+        'almost-medium-green': "var(--almost-medium-green)",
         'almost-medium-red': "var(--almost-medium-red)",
-        'medium-dark-red': "var(--medium-dark-red)",
-        'error-foreground': "var(--error-foreground)",
+        'btn-shadow': "var(--round-btn-shadow)",
+        'build-trigger': "var(--build-trigger)",
+        'chat-trigger': "var(--chat-trigger)",
+        'dark-blue': "var(--dark-blue)",
+        'dark-gray': "var(--dark-gray)",
         'dark-red': "var(--dark-red)",
         'error-background': "var(--error-background)",
-        'status-red': "var(--status-red)",
-        'almost-medium-gray': "var(--almost-medium-gray)",
-        'almost-dark-gray': "var(--almost-dark-gray)",
-        'medium-dark-gray': "var(--medium-dark-gray)",
-        'medium-low-gray': "var(--medium-low-gray)",
-        'medium-gray': "var(--medium-gray)",
+        'error-foreground': "var(--error-foreground)",
         'high-dark-gray': "var(--high-dark-gray)",
+        'high-indigo': "var(--high-indigo)",
+        'high-light-gray': "var(--high-light-gray)",
+        'light-blue': "var(--light-blue)",
         'light-gray': "var(--light-gray)",
-        'dark-gray': "var(--dark-gray)",
-        'btn-shadow': "var(--round-btn-shadow)",
-        buildBackground: "var(--build-background)",
-        build: "var(--build-trigger)",
+        'light-slate': "var(--light-slate)",
+        'medium-blue': "var(--medium-blue)",
+        'medium-dark-blue': "var(--medium-dark-blue)",
+        'medium-dark-gray': "var(--medium-dark-gray)",
+        'medium-dark-green': "var(--medium-dark-green)",
+        'medium-dark-red': "var(--medium-dark-red)",
+        'medium-emerald': "var(--medium-emerald)",
+        'medium-gray': "var(--medium-gray)",
+        'medium-high-indigo': "var(--medium-high-indigo)",
+        'medium-indigo': "var(--medium-indigo)",
+        'medium-low-gray': "var(--medium-low-gray)",
+        'status-green': "var(--status-green)",
+        'status-red': "var(--status-red)",
+        'status-yellow': "var(--status-yellow)",
+        'success-background': "var(--success-background)",
+        'success-foreground': "var(--success-foreground)",
+
+        white: "var(--white)",
         border: "hsl(var(--border))",
         input: "hsl(var(--input))",
         ring: "hsl(var(--ring))",
@@ -110,134 +114,7 @@ module.exports = {
       },
     },
   },
-  plugins: [require("tailwindcss-animate")],
-};
 
-module.exports = {
-  content: ["./index.html", "./src/**/*.{js,ts,tsx,jsx}"],
-  darkMode: "class",
-  important: true,
-  theme: {
-    container: {
-      center: true,
-      padding: "2rem",
-      screens: {
-        "2xl": "1400px",
-      },
-    },
-    extend: {
-      colors: {
-        white: "var(--white)",
-        'high-light-gray': "var(--high-light-gray)",
-        'almost-light-blue': "var(--almost-light-blue)",
-        'high-indigo': "var(--high-indigo)",
-        'medium-high-indigo': "var(--medium-high-indigo)",
-        'medium-emerald': "var(--medium-emerald)",
-        'status-yellow': "var(--status-yellow)",
-        'almost-medium-green': "var(--almost-medium-green)",
-        'almost-medium-blue': "var(--almost-medium-blue)",
-        'medium-indigo': "var(--medium-indigo)",
-        'light-slate': "var(--light-slate)",
-        'success-background': "var(--success-background)",
-        'dark-green': "var(--dark-green)",
-        'status-green': "var(--status-green)",
-        'medium-dark-green': "var(--medium-dark-green)",
-        'medium-light-blue': "var(--medium-light-blue)",
-        'almost-dark-blue': "var(--almost-dark-blue)",
-        'light-blue': "var(--light-blue)",
-        'dark-blue': "var(--dark-blue)",
-        'medium-blue': "var(--medium-blue)",
-        'medium-dark-blue': "var(--medium-dark-blue)",
-        'almost-medium-red': "var(--almost-medium-red)",
-        'medium-dark-red': "var(--medium-dark-red)",
-        'error-foreground': "var(--error-foreground)",
-        'dark-red': "var(--dark-red)",
-        'error-background': "var(--error-background)",
-        'status-red': "var(--status-red)",
-        'almost-medium-gray': "var(--almost-medium-gray)",
-        'almost-dark-gray': "var(--almost-dark-gray)",
-        'medium-dark-gray': "var(--medium-dark-gray)",
-        'medium-low-gray': "var(--medium-low-gray)",
-        'medium-gray': "var(--medium-gray)",
-        'high-dark-gray': "var(--high-dark-gray)",
-        'light-gray': "var(--light-gray)",
-        'dark-gray': "var(--dark-gray)",
-        'btn-hover-bg': "var(--hover-btn-background)",
-        'btn-shadow': "var(--round-btn-shadow)",
-        'build-background': "var(--build-background)",
-        'build-trigger': "var(--build-trigger)",
-        'border': "hsl(var(--border))",
-        'input': "hsl(var(--input))",
-        'ring': "hsl(var(--ring))",
-        'background': "hsl(var(--background))",
-        'foreground': "hsl(var(--foreground))",
-        'primary': {
-          DEFAULT: "hsl(var(--primary))",
-          foreground: "hsl(var(--primary-foreground))",
-        },
-        secondary: {
-          DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))",
-        },
-        destructive: {
-          DEFAULT: "hsl(var(--destructive))",
-          foreground: "hsl(var(--destructive-foreground))",
-        },
-        muted: {
-          DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--muted-foreground))",
-        },
-        accent: {
-          DEFAULT: "hsl(var(--accent))",
-          foreground: "hsl(var(--accent-foreground))",
-        },
-        popover: {
-          DEFAULT: "hsl(var(--popover))",
-          foreground: "hsl(var(--popover-foreground))",
-        },
-        card: {
-          DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--card-foreground))",
-        },
-      },
-      borderRadius: {
-        lg: `var(--radius)`,
-        md: `calc(var(--radius) - 2px)`,
-        sm: "calc(var(--radius) - 4px)",
-      },
-      fontFamily: {
-        sans: ["var(--font-sans)", ...fontFamily.sans],
-      },
-      keyframes: {
-        "accordion-down": {
-          from: { height: 0 },
-          to: { height: "var(--radix-accordion-content-height)" },
-        },
-        "accordion-up": {
-          from: { height: "var(--radix-accordion-content-height)" },
-          to: { height: 0 },
-        },
-        pulseGreen: {
-          "0%": { boxShadow: "0 0 0 0 rgba(72, 187, 120, 0.7)" },
-          "100%": { boxShadow: "0 0 0 10px rgba(72, 187, 120, 0)" },
-        },
-      },
-      animation: {
-        "accordion-down": "accordion-down 0.2s ease-out",
-        "accordion-up": "accordion-up 0.2s ease-out",
-        "pulse-green": "pulseGreen 1s linear",
-        "spin-once": "spin 1s linear 0.7",
-      },
-      borderColor: {
-        "red-outline": "rgba(255, 0, 0, 0.8)",
-        "green-outline": "rgba(72, 187, 120, 0.7)",
-      },
-      boxShadow: {
-        "red-outline": "0 0 5px rgba(255, 0, 0, 0.5)",
-        "green-outline": "0 0 5px rgba(72, 187, 120, 0.7)",
-      },
-    },
-  },
   plugins: [
     require("tailwindcss-animate"),
     require("@tailwindcss/forms")({

From 9bf5adcd7a9aa5d70de9562eaee02a5f89bef80c Mon Sep 17 00:00:00 2001
From: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
Date: Thu, 29 Jun 2023 15:24:01 -0300
Subject: [PATCH 18/26] =?UTF-8?q?=F0=9F=94=A7=20chore(extraSidebarComponen?=
 =?UTF-8?q?t/index.tsx):=20center=20align=20the=20input=20field=20in=20the?=
 =?UTF-8?q?=20extra=20sidebar=20component=20for=20better=20visual=20consis?=
 =?UTF-8?q?tency?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pages/FlowPage/components/extraSidebarComponent/index.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
index 772054b94..bfb237c50 100644
--- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
@@ -117,7 +117,7 @@ export default function ExtraSidebar() {
         </ShadTooltip>
       </div>
       <Separator />
-      <div className="relative mt-2 flex items-center mb-2 mx-2">
+      <div className="relative mt-2 flex items-center mb-2 mx-auto">
         <input
           type="text"
           name="search"

From 5522b51d6bf9a4305f64128d9ac473b987c0bb3b Mon Sep 17 00:00:00 2001
From: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
Date: Thu, 29 Jun 2023 16:41:41 -0300
Subject: [PATCH 19/26] =?UTF-8?q?=F0=9F=90=9B=20fix(parameterComponent):?=
 =?UTF-8?q?=20add=20margin-top=20to=20the=20container=20divs=20to=20improv?=
 =?UTF-8?q?e=20spacing=20between=20elements?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/parameterComponent/index.tsx            | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
index 37a1b09a2..a9ebd4ff7 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
@@ -220,7 +220,7 @@ export default function ParameterComponent({
         ) : left === true &&
           type === "str" &&
           data.node.template[name].options ? (
-          <div className="w-full">
+          <div className="w-full mt-2">
             <Dropdown
               options={data.node.template[name].options}
               onSelect={handleOnNewValue}
@@ -228,12 +228,16 @@ export default function ParameterComponent({
             ></Dropdown>
           </div>
         ) : left === true && type === "code" ? (
+          <div className="mt-2 w-full">
           <CodeAreaComponent
             disabled={disabled}
             value={data.node.template[name].value ?? ""}
             onChange={handleOnNewValue}
           />
+          </div>
+
         ) : left === true && type === "file" ? (
+          <div className="mt-2 w-full">
           <InputFileComponent
             disabled={disabled}
             value={data.node.template[name].value ?? ""}
@@ -245,6 +249,7 @@ export default function ParameterComponent({
               save();
             }}
           ></InputFileComponent>
+          </div>
         ) : left === true && type === "int" ? (
           <div className="mt-2 w-full">
             <IntComponent
@@ -255,11 +260,14 @@ export default function ParameterComponent({
             />
           </div>
         ) : left === true && type === "prompt" ? (
+          <div className="mt-2 w-full">
           <PromptAreaComponent
             disabled={disabled}
             value={data.node.template[name].value ?? ""}
             onChange={handleOnNewValue}
           />
+          </div>
+
         ) : (
           <></>
         )}

From a41c8552a8dfb32ba74f32c3282ab771c65500b4 Mon Sep 17 00:00:00 2001
From: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
Date: Thu, 29 Jun 2023 16:42:38 -0300
Subject: [PATCH 20/26] =?UTF-8?q?=F0=9F=8E=A8=20style(parameterComponent):?=
 =?UTF-8?q?=20add=20full=20width=20to=20the=20div=20container=20for=20bett?=
 =?UTF-8?q?er=20layout=20consistency?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../GenericNode/components/parameterComponent/index.tsx         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
index a9ebd4ff7..f29e3ffc5 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
@@ -197,7 +197,7 @@ export default function ParameterComponent({
             )}
           </div>
         ) : left === true && type === "bool" ? (
-          <div className="mt-2">
+          <div className="mt-2 w-full">
             <ToggleShadComponent
               disabled={disabled}
               enabled={enabled}

From c0dbafe49ff9103c8e0b49a7289a8d6b680fcf7e Mon Sep 17 00:00:00 2001
From: Rodrigo Nader <rodrigosilvanader@gmail.com>
Date: Thu, 29 Jun 2023 16:49:24 -0300
Subject: [PATCH 21/26] refactor(components): Update CSS classes in
 codeAreaComponent, floatComponent, intComponent, and dialog

- Update CSS classes in codeAreaComponent, floatComponent, intComponent, and dialog components to improve styling and maintain consistency.
- Replace specific color values with Tailwind CSS utility classes.
- Refactor input styles and focus styles for better user experience.
- Remove unused CSS classes from index.css.
---
 src/frontend/src/components/codeAreaComponent/index.tsx | 2 +-
 src/frontend/src/components/floatComponent/index.tsx    | 2 +-
 src/frontend/src/components/intComponent/index.tsx      | 2 +-
 src/frontend/src/components/ui/dialog.tsx               | 2 +-
 src/frontend/src/constants.tsx                          | 3 ++-
 src/frontend/src/index.css                              | 2 +-
 6 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/frontend/src/components/codeAreaComponent/index.tsx b/src/frontend/src/components/codeAreaComponent/index.tsx
index d634373fc..1c998a20d 100644
--- a/src/frontend/src/components/codeAreaComponent/index.tsx
+++ b/src/frontend/src/components/codeAreaComponent/index.tsx
@@ -46,7 +46,7 @@ export default function CodeAreaComponent({
           }}
           className={
             editNode
-              ? "truncate cursor-pointer placeholder:text-center text-ring block w-full pt-0.5 pb-0.5 form-input rounded-md border-ring border-1 shadow-sm bg-transparent sm:text-sm" +
+              ? "truncate cursor-pointer placeholder:text-center text-ring block w-full pt-0.5 pb-0.5 form-input rounded-md border-ring border-1 shadow-sm text-sm bg-transparent sm:text-sm" +
                 INPUT_STYLE
               : "truncate block w-full text-ring px-3 py-2 rounded-md border border-ring shadow-sm sm:text-sm placeholder:text-muted-foreground" +
                 INPUT_STYLE +
diff --git a/src/frontend/src/components/floatComponent/index.tsx b/src/frontend/src/components/floatComponent/index.tsx
index 65b5166f2..343c83d89 100644
--- a/src/frontend/src/components/floatComponent/index.tsx
+++ b/src/frontend/src/components/floatComponent/index.tsx
@@ -56,7 +56,7 @@ export default function FloatComponent({
         value={myValue}
         className={
           editNode
-            ? "focus:placeholder-transparent text-center placeholder:text-center border-1 block w-full pt-0.5 pb-0.5 form-input rounded-md border-ring shadow-sm sm:text-sm bg-transparent placeholder:text-muted-foreground" +
+            ? "focus:placeholder-transparent text-center placeholder:text-center border-1 block w-full pt-0.5 pb-0.5 form-input rounded-md border-ring shadow-sm sm:text-sm placeholder:text-muted-foreground" +
               INPUT_STYLE
             : "focus:placeholder-transparent block w-full form-input placeholder:text-muted-foreground bg-background rounded-md border-ring shadow-sm ring-offset-input sm:text-sm" +
               INPUT_STYLE +
diff --git a/src/frontend/src/components/intComponent/index.tsx b/src/frontend/src/components/intComponent/index.tsx
index ba743a0d4..462fa0466 100644
--- a/src/frontend/src/components/intComponent/index.tsx
+++ b/src/frontend/src/components/intComponent/index.tsx
@@ -70,7 +70,7 @@ export default function IntComponent({
         value={myValue}
         className={
           editNode
-            ? "focus:placeholder-transparent text-center placeholder:text-center border-1 block w-full pt-0.5 pb-0.5 form-input rounded-md border-ring shadow-sm sm:text-sm bg-transparent placeholder:text-muted-foreground" +
+            ? "focus:placeholder-transparent text-center placeholder:text-center border-1 block w-full pt-0.5 pb-0.5 form-input rounded-md border-ring shadow-sm sm:text-sm placeholder:text-muted-foreground" +
               INPUT_STYLE
             : "focus:placeholder-transparent block w-full form-input bg-background rounded-md border-ring shadow-sm ring-offset-background sm:text-sm placeholder:text-muted-foreground" +
               INPUT_STYLE +
diff --git a/src/frontend/src/components/ui/dialog.tsx b/src/frontend/src/components/ui/dialog.tsx
index 050db3aaa..305155412 100644
--- a/src/frontend/src/components/ui/dialog.tsx
+++ b/src/frontend/src/components/ui/dialog.tsx
@@ -27,7 +27,7 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      "fixed inset-0 z-50 bg-primary/80 backdrop-blur-sm transition-all duration-100 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=open]:fade-in",
+      "fixed inset-0 z-50 bg-secondary/80 backdrop-blur-sm transition-all duration-100 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=open]:fade-in",
       className
     )}
     {...props}
diff --git a/src/frontend/src/constants.tsx b/src/frontend/src/constants.tsx
index 013fb053d..cab9dfe45 100644
--- a/src/frontend/src/constants.tsx
+++ b/src/frontend/src/constants.tsx
@@ -148,7 +148,8 @@ export const EXPORT_CODE_DIALOG =
  * @constant
  */
 export const INPUT_STYLE =
-  " focus:ring-1 focus:ring-offset-1 focus:ring-offset-muted-foreground focus:ring-ring focus:outline-none";
+  "focus:tw-ring-none focus:ring-ring bg-background focus:outline-none";
+
 
 
 /**
diff --git a/src/frontend/src/index.css b/src/frontend/src/index.css
index bce434de6..dccb1a243 100644
--- a/src/frontend/src/index.css
+++ b/src/frontend/src/index.css
@@ -3,7 +3,7 @@
 @tailwind utilities;
 
 
-/* ! Confirm that all colors here are found in tailwind config */
+/* TODO: Confirm that all colors here are found in tailwind config */
 
 @layer base {
 

From 27b17a13c2ad87935af08e22d29ba1fa9b28ee96 Mon Sep 17 00:00:00 2001
From: Rodrigo Nader <rodrigosilvanader@gmail.com>
Date: Thu, 29 Jun 2023 18:39:00 -0300
Subject: [PATCH 22/26] Refactor styles and class names in multiple components,
 update color variables, and adjust button and control styles.

- Simplify class names in the SingleAlert component and update color variables.
- Update class names and color variables in the Dialog component.
- Update color variables in the constants file.
- Update color variables and class names in the index.css file.
- Update class names and color variables in the PageComponent file.
- Add a color variable for shared blur styles.
- Update Tailwind CSS configuration to include new color variables.

Note: These changes improve code readability and maintain color consistency throughout the application.
---
 .../components/singleAlertComponent/index.tsx | 22 ++++++------
 src/frontend/src/components/ui/dialog.tsx     |  2 +-
 src/frontend/src/constants.tsx                |  2 +-
 src/frontend/src/index.css                    | 36 +++++++++++++------
 .../components/PageComponent/index.tsx        |  3 +-
 src/frontend/tailwind.config.js               |  3 ++
 6 files changed, 43 insertions(+), 25 deletions(-)

diff --git a/src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx b/src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx
index 78e28f6d6..fa8bbd6fb 100644
--- a/src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx
+++ b/src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx
@@ -62,34 +62,34 @@ export default function SingleAlert({
                     removeAlert(dropItem.id);
                   }, 500);
                 }}
-                className="inline-flex rounded-md bg-red-50 p-1.5 text-status-red"
+                className="inline-flex rounded-md p-1.5 text-status-red"
               >
                 <span className="sr-only">Dismiss</span>
-                <X className="h-5 w-5" aria-hidden="true" />
+                <X className="h-4 w-4 text-error-foreground" aria-hidden="true" />
               </button>
             </div>
           </div>
         </div>
       ) : type === "notice" ? (
         <div
-          className="flex rounded-md bg-blue-50 p-3 mb-2 mx-2"
+          className="flex rounded-md bg-info-background p-3 mb-2 mx-2"
           key={dropItem.id}
         >
           <div className="flex-shrink-0">
             <Info
-              className="h-5 w-5 text-medium-dark-blue"
+              className="h-5 w-5 text-info-background"
               aria-hidden="true"
             />
           </div>
           <div className="ml-3 flex-1 md:flex md:justify-between">
-            <p className="text-sm text-medium-dark-blue">
+            <p className="text-sm text-info-background">
               {dropItem.title}
             </p>
             <p className="mt-3 text-sm md:mt-0 md:ml-6">
               {dropItem.link ? (
                 <Link
                   to={dropItem.link}
-                  className="whitespace-nowrap font-medium text-medium-dark-blue hover:text-ring"
+                  className="whitespace-nowrap font-medium text-info-background hover:text-ring"
                 >
                   Details
                 </Link>
@@ -108,17 +108,17 @@ export default function SingleAlert({
                     removeAlert(dropItem.id);
                   }, 500);
                 }}
-                className="inline-flex rounded-md bg-blue-50 p-1.5 text-medium-dark-blue "
+                className="inline-flex rounded-md p-1.5 text-info-foreground"
               >
                 <span className="sr-only">Dismiss</span>
-                <X className="h-5 w-5" aria-hidden="true" />
+                <X className="h-4 w-4 text-info-foreground" aria-hidden="true" />
               </button>
             </div>
           </div>
         </div>
       ) : (
         <div
-          className="flex bg-green-50  p-3 mb-2 mx-2 rounded-md"
+          className="flex bg-success-background p-3 mb-2 mx-2 rounded-md"
           key={dropItem.id}
         >
           <div className="flex-shrink-0">
@@ -142,10 +142,10 @@ export default function SingleAlert({
                     removeAlert(dropItem.id);
                   }, 500);
                 }}
-                className="inline-flex rounded-md bg-success-background p-1.5 text-status-green"
+                className="inline-flex rounded-md p-1.5 text-status-green"
               >
                 <span className="sr-only">Dismiss</span>
-                <X className="h-5 w-5" aria-hidden="true" />
+                <X className="h-4 w-4 text-success-foreground" aria-hidden="true" />
               </button>
             </div>
           </div>
diff --git a/src/frontend/src/components/ui/dialog.tsx b/src/frontend/src/components/ui/dialog.tsx
index 305155412..4df519490 100644
--- a/src/frontend/src/components/ui/dialog.tsx
+++ b/src/frontend/src/components/ui/dialog.tsx
@@ -27,7 +27,7 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      "fixed inset-0 z-50 bg-secondary/80 backdrop-blur-sm transition-all duration-100 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=open]:fade-in",
+      "fixed inset-0 z-50 bg-blur-shared backdrop-blur-sm transition-all duration-100 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=open]:fade-in",
       className
     )}
     {...props}
diff --git a/src/frontend/src/constants.tsx b/src/frontend/src/constants.tsx
index cab9dfe45..9d4184da6 100644
--- a/src/frontend/src/constants.tsx
+++ b/src/frontend/src/constants.tsx
@@ -148,7 +148,7 @@ export const EXPORT_CODE_DIALOG =
  * @constant
  */
 export const INPUT_STYLE =
-  "focus:tw-ring-none focus:ring-ring bg-background focus:outline-none";
+  "focus:tw-ring-none focus-visible:outline-none  focus:ring-ring bg-background focus:outline-none";
 
 
 
diff --git a/src/frontend/src/index.css b/src/frontend/src/index.css
index dccb1a243..a60f957df 100644
--- a/src/frontend/src/index.css
+++ b/src/frontend/src/index.css
@@ -34,39 +34,45 @@
   --build-trigger: 	#dc735b;
   --chat-trigger: #5c8be1;
 
-  --error-background: #fef2f2;
-  --error-foreground: #991b1b;
-
   --status-red: #ef4444;
   --status-yellow: #eab308;
   --status-green: #4ade80;
 
+  --error-background: #fef2f2;
+  --error-foreground: #991b1b;
+
   --success-background: #f0fdf4;
   --success-foreground: #14532d;
 
+  --info-background: #f0f4fd;
+  --info-foreground: #141653;
+
   --high-indigo: #4338ca;
   --medium-indigo: #6366f1;
   --medium-dark-blue:#1d4ed8;
+
+  /* Colors that are shared in dark and light mode */
+  --blur-shared: #151923de;
 }
 
 .dark {
-  --background: 224 71% 4%; /* hsl(224 71% 4%) */
+  --background: 224 35% 7.5%; /* hsl(224 40% 10%) */
   --foreground: 213 31% 85%; /* hsl(213 31% 91%) */
 
-  --muted: 223 40% 11%; /* hsl(223 47% 11%) */
+  --muted: 223 27% 11%; /* hsl(223 27% 11%) */
   --muted-foreground: 215.4 16.3% 56.9%; /* hsl(215 16% 56%) */
 
   --popover: 224 71% 4%; /* hsl(224 71% 4%) */
   --popover-foreground: 215 20.2% 65.1%; /* hsl(215 20% 65%) */
 
-  --card: 224 71% 7%; /* hsl(224 71% 4%) */
+  --card: 224 25% 15.5%; /* hsl(224 71% 4%) */
   --card-foreground: 213 31% 80%; /* hsl(213 31% 91%) */
 
   --border: 216 24% 17%; /* hsl(216 34% 17%) */
   --input: 216 24% 17%; /* hsl(216 34% 17%) */
 
-  --primary: 210 40% 80%; /* hsl(210 40% 98%) */
-  --primary-foreground: 222.2 47.4% 1.2%; /* hsl(222 47% 1%) */
+  --primary: 210 20% 80%; /* hsl(210 40% 98%) */
+  --primary-foreground: 222.2 27.4% 1.2%; /* hsl(222 47% 1%) */
 
   --secondary: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
   --secondary-foreground: 210 40% 98%; /* hsl(210 40% 98%) */
@@ -86,18 +92,26 @@
   --build-trigger: 	#dc735b;
   --chat-trigger: #5c8be1;
 
-  --error-foreground: #c2b7b7;
-  --error-background: #671212;
-
   --status-red: #ef4444;
   --status-yellow: #eab308;
   --status-green: #4ade80;
 
   --success-background: #f0fdf4;
   --success-foreground: #14532d;
+
+  --error-foreground: #c2b7b7;
+  --error-background: #3e1818;
+
+  --info-foreground: #b7b8c2;
+  --info-background: #18243e;
+
+
   --high-indigo: #4338ca;
   --medium-indigo: #6366f1;
   --medium-dark-blue:#1d4ed8;
+
+  /* Colors that are shared in dark and light mode */
+  --blur-shared: #151923d2;
 }}
 
 @layer base {
diff --git a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
index ae9fba948..3c9381a9e 100644
--- a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
@@ -402,7 +402,8 @@ export default function Page({ flow }: { flow: FlowType }) {
                   maxZoom={8}
                 >
                   <Background className="" />
-                  <Controls className="[&>button]:text-black"></Controls>
+                  <Controls className="text-primary stroke-foreground [&>button]:border-b-border hover:[&>button]:bg-border
+                   fill-foreground bg-muted"></Controls>
                 </ReactFlow>
                 <Chat flow={flow} reactFlowInstance={reactFlowInstance} />
               </div>
diff --git a/src/frontend/tailwind.config.js b/src/frontend/tailwind.config.js
index e60b7e594..53fb08fd8 100644
--- a/src/frontend/tailwind.config.js
+++ b/src/frontend/tailwind.config.js
@@ -28,6 +28,7 @@ module.exports = {
         'btn-shadow': "var(--round-btn-shadow)",
         'build-trigger': "var(--build-trigger)",
         'chat-trigger': "var(--chat-trigger)",
+        'blur-shared': "var(--blur-shared)",
         'dark-blue': "var(--dark-blue)",
         'dark-gray': "var(--dark-gray)",
         'dark-red': "var(--dark-red)",
@@ -36,6 +37,8 @@ module.exports = {
         'high-dark-gray': "var(--high-dark-gray)",
         'high-indigo': "var(--high-indigo)",
         'high-light-gray': "var(--high-light-gray)",
+        'info-background': "var(--info-background)",
+        'info-foreground': "var(--info-foreground)",
         'light-blue': "var(--light-blue)",
         'light-gray': "var(--light-gray)",
         'light-slate': "var(--light-slate)",

From 9098d8cd29fad66f88c48e0455d6ab24aab3b582 Mon Sep 17 00:00:00 2001
From: Rodrigo Nader <rodrigosilvanader@gmail.com>
Date: Thu, 29 Jun 2023 18:43:05 -0300
Subject: [PATCH 23/26] remove index1

---
 src/frontend/src/index.1.css | 225 -----------------------------------
 1 file changed, 225 deletions(-)
 delete mode 100644 src/frontend/src/index.1.css

diff --git a/src/frontend/src/index.1.css b/src/frontend/src/index.1.css
deleted file mode 100644
index 3a95ed6eb..000000000
--- a/src/frontend/src/index.1.css
+++ /dev/null
@@ -1,225 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-  :root {
-	  --background: 0 0% 100%; /* hsl(0 0% 100%) */
-	  --foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
-    
-	  --muted: 210 40% 96.1%; /* hsl(210 40% 96%) */
-	  --muted-foreground: 215.4 16.3% 46.9%; /* hsl(215 16% 46%) */
-    
-	  --popover: 0 0% 100%; /* hsl(0 0% 100%) */
-	  --popover-foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
-
-	  --card: 0 0% 100%; /* hsl(0 0% 100%) */
-	  --card-foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
-    
-	  --border: 214.3 31.8% 91.4%; /* hsl(214 32% 91%) */
-	  --input: 214.3 31.8% 91.4%; /* hsl(214 32% 91%) */
-    
-	  --primary: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
-	  --primary-foreground: 210 40% 98%; /* hsl(210 40% 98%) */
-    
-	  --secondary: 210 40% 96.1%; /* hsl(210 40% 96%) */
-	  --secondary-foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
-    
-	  --accent: 210 40% 96.1%; /* hsl(210 40% 96%) */
-	  --accent-foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
-    
-	  --destructive: 0 100% 50%; /* hsl(0 100% 50%) */
-	  --destructive-foreground: 210 40% 98%; /* hsl(210 40% 98%) */
-    
-    
-	  --ring: 215 20.2% 65.1%; /* hsl(215 20% 65%) */
-    
-    --radius: 0.5rem;
-    
-    
-    --build-background: #E2E7EE; /* hsl(215, 26%, 91%) */
-    
-    --round-btn-shadow: #00000063;
-    
-    --hover-btn-background: #242f47;
-    
-    --build-trigger: 	#dc735b; /* hsl(11, 65%, 61%) */
-    --chat-trigger: #dbeafe; /* tailwind blue 100 USED IN CHAT BACKGROUND */
-
-    --error-background: #fef2f2; /* tailwind red 50 USED IN START ERROR MESSAGE BG light-red */
-    --error-foreground: #991b1b; /* tailwind red 800 USED IN START ERROR MESSAGE TEXT almost-dark-red */
-
-    --status-red: #ef4444; /* tailwind red 500 medium-red*/
-    --status-yellow: #eab308; /* tailwind yellow 500 medium-yellow*/
-    --status-green: #4ade80; /* tailwind green 400 medium-green*/
-
-    --success-background: #f0fdf4; /* tailwind green 50 USED IN SUCCESS MSG light-green*/ 
-    --success-foreground: #14532d; /* tailwind green 900 USED IN SUCCESS MSG dark-green */
-
-    /* --high-indigo: #4338ca;  tailwind indigo 700 
-  --medium-indigo: #6366f1;  tailwind indigo 500 
-  --medium-dark-blue:#1d4ed8;  tailwind blue 700 Change in component (--ring)
-  --medium-high-indigo: #4f46e5;  tailwind indigo 600 
-  --medium-emerald: #10b981;  tailwind emerald 500 Unused
-  --medium-dark-green: #166534;  tailwind green 800 Unused
-  --almost-medium-green: #22c55e;  tailwind green 500 Unused
-  --light-slate: #cbd5e1;  tailwind slate 300 UNUSED
-  --light-blue: #eff6ff;  tailwind blue 50
-  --dark-blue: #1e3a8a;  tailwind blue 900
-  --medium-blue: #60a5fa;  tailwind blue 400
-  --almost-dark-blue:#3b82f6;  tailwind blue 500
-  --almost-light-blue: #dbeafe;   tailwind blue 100 */
-  }
-
-	.dark {
-	  --background: 224 71% 4%; /* hsl(224 71% 4%) */
-	  --foreground: 213 31% 91%; /* hsl(213 31% 91%) */
-
-	  --muted: 223 47% 11%; /* hsl(223 47% 11%) */
-	  --muted-foreground: 215.4 16.3% 56.9%; /* hsl(215 16% 56%) */
-
-	  --popover: 224 71% 4%; /* hsl(224 71% 4%) */
-	  --popover-foreground: 215 20.2% 65.1%; /* hsl(215 20% 65%) */
-
-	  --card: 224 71% 4%; /* hsl(224 71% 4%) */
-	  --card-foreground: 213 31% 91%; /* hsl(213 31% 91%) */
-
-	  --border: 216 34% 17%; /* hsl(216 34% 17%) */
-	  --input: 216 34% 17%; /* hsl(216 34% 17%) */
-
-	  --primary: 210 40% 98%; /* hsl(210 40% 98%) */
-	  --primary-foreground: 222.2 47.4% 1.2%; /* hsl(222 47% 1%) */
-
-	  --secondary: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
-	  --secondary-foreground: 210 40% 98%; /* hsl(210 40% 98%) */
-
-	  --accent: 216 34% 17%; /* hsl(216 34% 17%) */
-	  --accent-foreground: 210 40% 98%; /* hsl(210 40% 98%) */
-
-	  --destructive: 0 63% 31%; /* hsl(0 63% 31%) */
-	  --destructive-foreground: 210 40% 98%; /* hsl(210 40% 98%) */
-
-	  --ring: 216 34% 17%; /* hsl(216 34% 17%) */
-
-    --radius: 0.5rem;
-
-    --build-trigger: 11, 65% 61%; /* hsl(11, 65%, 61%) */
-  }
-}
-
-:root {
-  --background: 0 0% 100%; /* hsl(0 0% 100%) */
-  --foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
-  --muted: 210 40% 98%; /* hsl(210 40% 98%) */
-  --muted-foreground: 215.4 16.3% 46.9%; /* hsl(215 16% 46%) */
-  --popover: 0 0% 100%; /* hsl(0 0% 100%) */
-  --popover-foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
-  --card: 0 0% 100%; /* hsl(0 0% 100%) */
-  --card-foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
-  --border: 214.3 21.8% 91.4%; /* hsl(214 32% 91%) */
-  --input: 214.3 21.8% 91.4%; /* hsl(214 32% 91%) */
-  --primary: 222.2 27.0% 11.2%; /* hsl(222 27% 18%) */
-  --primary-foreground: 210 40% 98%; /* hsl(210 40% 98%) */
-  --secondary: 210 40% 96.1%; /* hsl(210 40% 96%) */
-  --secondary-foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
-  --accent: 210 30% 96.1%; /* hsl(210 30% 96%) */
-  --accent-foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
-  --destructive: 0 100% 50%; /* hsl(0 100% 50%) */
-  --destructive-foreground: 210 40% 98%; /* hsl(210 40% 98%) */
-  --radius: 0.5rem;
-  --ring: 215 20.2% 65.1%; /* hsl(215 20% 65%) */
-
-  --round-btn-shadow: #00000063;
-  --hover-btn-background: #242f47;
-
-  --build-background: #E2E7EE;
-  --build-trigger: 	#dc735b; /* hsl(11, 65%, 61%) */
-  --chat-trigger: #dbeafe; /* tailwind blue 100 USED IN CHAT BACKGROUND */
-
-  --error-background: #fef2f2; /* tailwind red 50 USED IN START ERROR MESSAGE BG light-red */
-  --error-foreground: #991b1b; /* tailwind red 800 USED IN START ERROR MESSAGE TEXT almost-dark-red */
-
-  --status-red: #ef4444; /* tailwind red 500 medium-red*/
-  --status-yellow: #eab308; /* tailwind yellow 500 medium-yellow*/
-  --status-green: #4ade80; /* tailwind green 400 medium-green*/
-
-  --success-background: #f0fdf4; /* tailwind green 50 USED IN SUCCESS MSG light-green*/ 
-  --success-foreground: #14532d; /* tailwind green 900 USED IN SUCCESS MSG dark-green */
-  --high-indigo: #4338ca;  /*tailwind indigo 700*/ 
-  --medium-indigo: #6366f1;  /* tailwind indigo 500 */
-  --medium-dark-blue:#1d4ed8; /* tailwind blue 700 Change in component (--ring)*/
-}
-
-.dark {
-  --background: 224 71% 4%; /* hsl(224 71% 4%) */
-  --foreground: 213 31% 0%; /* hsl(213 31% 91%) */
-  --muted: 223 47% 11%; /* hsl(223 47% 11%) */
-  --muted-foreground: 215.4 16.3% 56.9%; /* hsl(215 16% 56%) */
-  --popover: 224 71% 4%; /* hsl(224 71% 4%) */
-  --popover-foreground: 215 20.2% 65.1%; /* hsl(215 20% 65%) */
-  --card: 224 71% 4%; /* hsl(224 71% 4%) */
-  --card-foreground: 213 31% 91%; /* hsl(213 31% 91%) */
-  --border: 216 34% 0%; /* hsl(216 34% 17%) */
-  --input: 216 34% 17%; /* hsl(216 34% 17%) */
-  --primary: 210 40% 98%; /* hsl(210 40% 98%) */
-  --primary-foreground: 222.2 47.4% 1.2%; /* hsl(222 47% 1%) */
-  --secondary: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
-  --secondary-foreground: 210 40% 98%; /* hsl(210 40% 98%) */
-  --accent: 216 34% 17%; /* hsl(216 34% 17%) */
-  --accent-foreground: 210 40% 98%; /* hsl(210 40% 98%) */
-  --destructive: 0 63% 31%; /* hsl(0 63% 31%) */
-  --destructive-foreground: 210 40% 98%; /* hsl(210 40% 98%) */
-  --ring: 216 34% 0%; /* hsl(216 34% 17%) */
-  --radius: 0.5rem;
-
-  --round-btn-shadow: #00000063;
-  --hover-btn-background: #242f47;
-
-  --build-background: #E2E7EE;
-  --build-trigger: 	#dc735b; /* hsl(11, 65%, 61%) */
-  --chat-trigger: #dbeafe; /* tailwind blue 100 USED IN CHAT BACKGROUND */
-
-  --error-background: #fef2f2; /* tailwind red 50 USED IN START ERROR MESSAGE BG light-red */
-  --error-foreground: #991b1b; /* tailwind red 800 USED IN START ERROR MESSAGE TEXT almost-dark-red */
-
-  --status-red: #ef4444; /* tailwind red 500 medium-red*/
-  --status-yellow: #eab308; /* tailwind yellow 500 medium-yellow*/
-  --status-green: #4ade80; /* tailwind green 400 medium-green*/
-
-  --success-background: #f0fdf4; /* tailwind green 50 USED IN SUCCESS MSG light-green*/ 
-  --success-foreground: #14532d; /* tailwind green 900 USED IN SUCCESS MSG dark-green */
-  --high-indigo: #4338ca;  /*tailwind indigo 700*/ 
-  --medium-indigo: #6366f1;  /* tailwind indigo 500 */
-  --medium-dark-blue:#1d4ed8; /* tailwind blue 700 Change in component (--ring)*/
-}
-
-@layer base {
-  * {
-    @apply border-border;
-  }
-
-  body {
-    @apply bg-background text-foreground;
-    font-feature-settings: "rlig" 1, "calt" 1;
-  }
-}
-
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
-    monospace;
-}
-
-/* The style below sets the cursor property of the element with the class .react-flow__pane to the default cursor.
-The cursor: default; property value restores the browser's default cursor style for the targeted element. By applying this style, the element will no longer have a custom cursor appearance such as "grab" or any other custom cursor defined elsewhere in the application. Instead, it will revert to the default cursor style determined by the browser, typically an arrow-shaped cursor. */
-.react-flow__pane {
-  cursor: default;
-}
\ No newline at end of file

From a8d7edff7a2de3b6552d5578a26e47956a61659d Mon Sep 17 00:00:00 2001
From: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
Date: Thu, 29 Jun 2023 19:45:22 -0300
Subject: [PATCH 24/26] =?UTF-8?q?=F0=9F=94=A7=20fix(frontend):=20update=20?=
 =?UTF-8?q?class=20names=20and=20colors=20in=20singleAlertComponent=20and?=
 =?UTF-8?q?=20NoticeAlert=20components=20to=20match=20the=20new=20design?=
 =?UTF-8?q?=20=F0=9F=94=A7=20fix(frontend):=20update=20class=20names=20and?=
 =?UTF-8?q?=20colors=20in=20index.css=20to=20match=20the=20new=20design=20?=
 =?UTF-8?q?=F0=9F=94=A7=20fix(frontend):=20update=20tailwind.config.js=20t?=
 =?UTF-8?q?o=20use=20the=20new=20color=20variable=20name=20'status-blue'?=
 =?UTF-8?q?=20instead=20of=20'medium-dark-blue'?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/singleAlertComponent/index.tsx |  6 +--
 src/frontend/src/alerts/notice/index.tsx      |  8 ++--
 src/frontend/src/index.css                    | 42 +++++++++----------
 src/frontend/tailwind.config.js               |  2 +-
 4 files changed, 27 insertions(+), 31 deletions(-)

diff --git a/src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx b/src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx
index fa8bbd6fb..fb25eec61 100644
--- a/src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx
+++ b/src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx
@@ -77,19 +77,19 @@ export default function SingleAlert({
         >
           <div className="flex-shrink-0">
             <Info
-              className="h-5 w-5 text-info-background"
+              className="h-5 w-5 text-status-blue "
               aria-hidden="true"
             />
           </div>
           <div className="ml-3 flex-1 md:flex md:justify-between">
-            <p className="text-sm text-info-background">
+            <p className="text-sm text-info-foreground font-medium">
               {dropItem.title}
             </p>
             <p className="mt-3 text-sm md:mt-0 md:ml-6">
               {dropItem.link ? (
                 <Link
                   to={dropItem.link}
-                  className="whitespace-nowrap font-medium text-info-background hover:text-ring"
+                  className="whitespace-nowrap font-medium text-info-foreground hover:text-ring"
                 >
                   Details
                 </Link>
diff --git a/src/frontend/src/alerts/notice/index.tsx b/src/frontend/src/alerts/notice/index.tsx
index c5a917aae..0fa3dc382 100644
--- a/src/frontend/src/alerts/notice/index.tsx
+++ b/src/frontend/src/alerts/notice/index.tsx
@@ -36,22 +36,22 @@ export default function NoticeAlert({
           setShow(false);
           removeAlert(id);
         }}
-        className="rounded-md w-96 mt-6 shadow-xl bg-light-blue p-4"
+        className="rounded-md w-96 mt-6 shadow-xl bg-info-background p-4"
       >
         <div className="flex">
           <div className="flex-shrink-0">
             <Info
-              className="h-5 w-5 text-medium-dark-blue "
+              className="h-5 w-5 text-status-blue "
               aria-hidden="true"
             />
           </div>
           <div className="ml-3 flex-1 md:flex md:justify-between">
-            <p className="text-sm text-ring">{title}</p>
+            <p className="text-sm text-info-foreground">{title}</p>
             <p className="mt-3 text-sm md:mt-0 md:ml-6">
               {link !== "" ? (
                 <Link
                   to={link}
-                  className="whitespace-nowrap font-medium text-ring hover:text-ring"
+                  className="whitespace-nowrap font-medium text-info-foreground hover:text-ring"
                 >
                   Details
                 </Link>
diff --git a/src/frontend/src/index.css b/src/frontend/src/index.css
index a60f957df..7ad4d7821 100644
--- a/src/frontend/src/index.css
+++ b/src/frontend/src/index.css
@@ -31,13 +31,6 @@
 
   --round-btn-shadow: #00000063;
 
-  --build-trigger: 	#dc735b;
-  --chat-trigger: #5c8be1;
-
-  --status-red: #ef4444;
-  --status-yellow: #eab308;
-  --status-green: #4ade80;
-
   --error-background: #fef2f2;
   --error-foreground: #991b1b;
 
@@ -49,10 +42,15 @@
 
   --high-indigo: #4338ca;
   --medium-indigo: #6366f1;
-  --medium-dark-blue:#1d4ed8;
 
   /* Colors that are shared in dark and light mode */
   --blur-shared: #151923de;
+  --build-trigger: 	#dc735b;
+  --chat-trigger: #5c8be1;
+  --status-red: #ef4444;
+  --status-yellow: #eab308;
+  --status-green: #4ade80;
+  --status-blue:#2563eb;
 }
 
 .dark {
@@ -88,30 +86,28 @@
   --radius: 0.5rem;
 
   --round-btn-shadow: #00000063;
+  
+  --success-background: #022c22;
+  --success-foreground: #ecfdf5;
 
-  --build-trigger: 	#dc735b;
-  --chat-trigger: #5c8be1;
+  --error-foreground: #fef2f2;
+  --error-background: #450a0a;
 
-  --status-red: #ef4444;
-  --status-yellow: #eab308;
-  --status-green: #4ade80;
-
-  --success-background: #f0fdf4;
-  --success-foreground: #14532d;
-
-  --error-foreground: #c2b7b7;
-  --error-background: #3e1818;
-
-  --info-foreground: #b7b8c2;
-  --info-background: #18243e;
+  --info-foreground: #eff6ff;
+  --info-background: #172554;
 
 
   --high-indigo: #4338ca;
   --medium-indigo: #6366f1;
-  --medium-dark-blue:#1d4ed8;
 
   /* Colors that are shared in dark and light mode */
   --blur-shared: #151923d2;
+  --build-trigger: 	#dc735b;
+  --chat-trigger: #5c8be1;
+  --status-red: #ef4444;
+  --status-yellow: #eab308;
+  --status-green: #4ade80;
+  --status-blue: #2563eb;
 }}
 
 @layer base {
diff --git a/src/frontend/tailwind.config.js b/src/frontend/tailwind.config.js
index 53fb08fd8..2607ef120 100644
--- a/src/frontend/tailwind.config.js
+++ b/src/frontend/tailwind.config.js
@@ -43,7 +43,7 @@ module.exports = {
         'light-gray': "var(--light-gray)",
         'light-slate': "var(--light-slate)",
         'medium-blue': "var(--medium-blue)",
-        'medium-dark-blue': "var(--medium-dark-blue)",
+        'status-blue': "var(--status-blue)",
         'medium-dark-gray': "var(--medium-dark-gray)",
         'medium-dark-green': "var(--medium-dark-green)",
         'medium-dark-red': "var(--medium-dark-red)",

From 40395401485dcf974866177350c4251a140812f5 Mon Sep 17 00:00:00 2001
From: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
Date: Thu, 29 Jun 2023 19:51:28 -0300
Subject: [PATCH 25/26] =?UTF-8?q?=F0=9F=90=9B=20fix(GenericNode):=20add=20?=
 =?UTF-8?q?strokeWidth=20property=20to=20Icon=20component=20to=20fix=20sty?=
 =?UTF-8?q?ling=20issue=20=F0=9F=90=9B=20fix(NodeModal):=20add=20strokeWid?=
 =?UTF-8?q?th=20property=20to=20Icon=20component=20to=20fix=20styling=20is?=
 =?UTF-8?q?sue=20=F0=9F=90=9B=20fix(DisclosureComponent):=20add=20strokeWi?=
 =?UTF-8?q?dth=20property=20to=20Icon=20component=20to=20fix=20styling=20i?=
 =?UTF-8?q?ssue=20=F0=9F=90=9B=20fix(extraSidebarComponent):=20add=20strok?=
 =?UTF-8?q?eWidth=20property=20to=20Icon=20components=20to=20fix=20styling?=
 =?UTF-8?q?=20issue?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/frontend/src/CustomNodes/GenericNode/index.tsx       | 1 +
 src/frontend/src/modals/NodeModal/index.tsx              | 1 +
 .../FlowPage/components/DisclosureComponent/index.tsx    | 4 ++--
 .../FlowPage/components/extraSidebarComponent/index.tsx  | 9 +++++----
 4 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx
index d15aae152..ba6f4ce2e 100644
--- a/src/frontend/src/CustomNodes/GenericNode/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx
@@ -98,6 +98,7 @@ export default function GenericNode({
         <div className="flex w-full items-center justify-between gap-8 rounded-t-lg border-b bg-muted p-4  ">
           <div className="flex w-full items-center gap-2 truncate text-lg">
             <Icon
+              strokeWidth={1.5}
               className="h-10 w-10 rounded p-1"
               style={{
                 color: nodeColors[types[data.type]] ?? nodeColors.unknown,
diff --git a/src/frontend/src/modals/NodeModal/index.tsx b/src/frontend/src/modals/NodeModal/index.tsx
index 1ae11d08e..6444aaa14 100644
--- a/src/frontend/src/modals/NodeModal/index.tsx
+++ b/src/frontend/src/modals/NodeModal/index.tsx
@@ -76,6 +76,7 @@ export default function NodeModal({ data }: { data: NodeDataType }) {
                 <div className="h-full w-full flex flex-col justify-center items-center">
                   <div className="flex w-full pb-4 z-10 justify-center shadow-sm">
                     <Icon
+                    strokeWidth={1.5}
                       className="w-10 mt-4 h-10 p-1 rounded"
                       style={{
                         color:
diff --git a/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx
index 364ed52d9..737461c9a 100644
--- a/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx
@@ -14,8 +14,8 @@ export default function DisclosureComponent({
           <div>
             <Disclosure.Button className="select-none bg-muted w-full flex justify-between items-center -mt-px px-3 py-2 border-y border-y-input">
               <div className="flex gap-4">
-                <Icon size={22} className="text-primary " />
-                <span className="flex items-center text-sm text-primary  font-medium">
+                <Icon strokeWidth={1.5} size={22} className="text-primary " />
+                <span className="flex items-center text-sm text-primary">
                   {title}
                 </span>
               </div>
diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
index bfb237c50..49ea590d9 100644
--- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
@@ -70,7 +70,7 @@ export default function ExtraSidebar() {
               uploadFlow();
             }}
           >
-            <FileUp className="w-5 h-5 "></FileUp>
+            <FileUp strokeWidth={1.5} className="w-5 h-5 "></FileUp>
           </button>
         </ShadTooltip>
 
@@ -83,7 +83,7 @@ export default function ExtraSidebar() {
               openPopUp(<ExportModal />);
             }}
           >
-            <FileDown className="w-5 h-5  "></FileDown>
+            <FileDown strokeWidth={1.5} className="w-5 h-5  "></FileDown>
           </button>
         </ShadTooltip>
         <ShadTooltip delayDuration={1000} content="Code" side="top">
@@ -95,7 +95,7 @@ export default function ExtraSidebar() {
               openPopUp(<ApiModal flow={flows.find((f) => f.id === tabId)} />);
             }}
           >
-            <Code2 className="w-5 h-5  "></Code2>
+            <Code2 strokeWidth={1.5} className="w-5 h-5  "></Code2>
           </button>
         </ShadTooltip>
 
@@ -109,6 +109,7 @@ export default function ExtraSidebar() {
             disabled={!isPending}
           >
             <Save
+            strokeWidth={1.5}
               className={
                 "w-5 h-5" + (isPending ? " " : " text-muted-foreground")
               }
@@ -134,7 +135,7 @@ export default function ExtraSidebar() {
         />
         <div className="absolute inset-y-0 right-0 flex py-1.5 pr-3 items-center">
         {/* ! replace hash color here */}
-          <Search size={20} className="text-primary" />
+          <Search size={20} strokeWidth={1.5} className="text-primary" />
         </div>
       </div>
 

From e95dd524a8ec7d149da812cc0b8f0a473cddad30 Mon Sep 17 00:00:00 2001
From: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
Date: Thu, 29 Jun 2023 19:58:34 -0300
Subject: [PATCH 26/26] formatting branch

---
 .../components/parameterComponent/index.tsx   | 44 +++++-----
 .../components/singleAlertComponent/index.tsx | 25 +++---
 src/frontend/src/alerts/error/index.tsx       |  5 +-
 src/frontend/src/alerts/notice/index.tsx      |  5 +-
 .../ExtraSidebarComponent/index.tsx           |  4 +-
 .../chatComponent/buildTrigger/index.tsx      |  4 +-
 .../components/dropdownComponent/index.tsx    | 10 +--
 .../src/components/loadingComponent/index.tsx |  4 +-
 .../src/components/promptComponent/index.tsx  |  4 +-
 .../components/textAreaComponent/index.tsx    |  4 +-
 .../src/components/toggleComponent/index.tsx  |  4 +-
 src/frontend/src/components/ui/switch.tsx     |  2 +-
 src/frontend/src/constants.tsx                |  7 +-
 src/frontend/src/contexts/tabsContext.tsx     | 26 +++---
 src/frontend/src/modals/ApiModal/index.tsx    |  9 +-
 .../src/modals/EditNodeModal/index.tsx        |  2 +-
 src/frontend/src/modals/NodeModal/index.tsx   |  2 +-
 .../modals/chatModal/chatMessage/index.tsx    |  8 +-
 .../modals/chatModal/fileComponent/index.tsx  |  5 +-
 .../components/PageComponent/index.tsx        |  6 +-
 .../extraSidebarComponent/index.tsx           |  4 +-
 .../components/nodeToolbarComponent/index.tsx |  1 -
 src/frontend/src/pages/MainPage/index.tsx     | 10 +--
 src/frontend/tailwind.config.js               | 84 ++++++++++---------
 24 files changed, 134 insertions(+), 145 deletions(-)

diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
index f29e3ffc5..7e5b8e315 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
@@ -229,26 +229,25 @@ export default function ParameterComponent({
           </div>
         ) : left === true && type === "code" ? (
           <div className="mt-2 w-full">
-          <CodeAreaComponent
-            disabled={disabled}
-            value={data.node.template[name].value ?? ""}
-            onChange={handleOnNewValue}
-          />
+            <CodeAreaComponent
+              disabled={disabled}
+              value={data.node.template[name].value ?? ""}
+              onChange={handleOnNewValue}
+            />
           </div>
-
         ) : left === true && type === "file" ? (
           <div className="mt-2 w-full">
-          <InputFileComponent
-            disabled={disabled}
-            value={data.node.template[name].value ?? ""}
-            onChange={handleOnNewValue}
-            fileTypes={data.node.template[name].fileTypes}
-            suffixes={data.node.template[name].suffixes}
-            onFileChange={(t: string) => {
-              data.node.template[name].file_path = t;
-              save();
-            }}
-          ></InputFileComponent>
+            <InputFileComponent
+              disabled={disabled}
+              value={data.node.template[name].value ?? ""}
+              onChange={handleOnNewValue}
+              fileTypes={data.node.template[name].fileTypes}
+              suffixes={data.node.template[name].suffixes}
+              onFileChange={(t: string) => {
+                data.node.template[name].file_path = t;
+                save();
+              }}
+            ></InputFileComponent>
           </div>
         ) : left === true && type === "int" ? (
           <div className="mt-2 w-full">
@@ -261,13 +260,12 @@ export default function ParameterComponent({
           </div>
         ) : left === true && type === "prompt" ? (
           <div className="mt-2 w-full">
-          <PromptAreaComponent
-            disabled={disabled}
-            value={data.node.template[name].value ?? ""}
-            onChange={handleOnNewValue}
-          />
+            <PromptAreaComponent
+              disabled={disabled}
+              value={data.node.template[name].value ?? ""}
+              onChange={handleOnNewValue}
+            />
           </div>
-
         ) : (
           <></>
         )}
diff --git a/src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx b/src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx
index fb25eec61..5827ccc2f 100644
--- a/src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx
+++ b/src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx
@@ -29,10 +29,7 @@ export default function SingleAlert({
           key={dropItem.id}
         >
           <div className="flex-shrink-0">
-            <XCircle
-              className="h-5 w-5 text-status-red"
-              aria-hidden="true"
-            />
+            <XCircle className="h-5 w-5 text-status-red" aria-hidden="true" />
           </div>
           <div className="ml-3">
             <h3 className="text-sm break-words font-medium text-error-foreground">
@@ -65,7 +62,10 @@ export default function SingleAlert({
                 className="inline-flex rounded-md p-1.5 text-status-red"
               >
                 <span className="sr-only">Dismiss</span>
-                <X className="h-4 w-4 text-error-foreground" aria-hidden="true" />
+                <X
+                  className="h-4 w-4 text-error-foreground"
+                  aria-hidden="true"
+                />
               </button>
             </div>
           </div>
@@ -76,10 +76,7 @@ export default function SingleAlert({
           key={dropItem.id}
         >
           <div className="flex-shrink-0">
-            <Info
-              className="h-5 w-5 text-status-blue "
-              aria-hidden="true"
-            />
+            <Info className="h-5 w-5 text-status-blue " aria-hidden="true" />
           </div>
           <div className="ml-3 flex-1 md:flex md:justify-between">
             <p className="text-sm text-info-foreground font-medium">
@@ -111,7 +108,10 @@ export default function SingleAlert({
                 className="inline-flex rounded-md p-1.5 text-info-foreground"
               >
                 <span className="sr-only">Dismiss</span>
-                <X className="h-4 w-4 text-info-foreground" aria-hidden="true" />
+                <X
+                  className="h-4 w-4 text-info-foreground"
+                  aria-hidden="true"
+                />
               </button>
             </div>
           </div>
@@ -145,7 +145,10 @@ export default function SingleAlert({
                 className="inline-flex rounded-md p-1.5 text-status-green"
               >
                 <span className="sr-only">Dismiss</span>
-                <X className="h-4 w-4 text-success-foreground" aria-hidden="true" />
+                <X
+                  className="h-4 w-4 text-success-foreground"
+                  aria-hidden="true"
+                />
               </button>
             </div>
           </div>
diff --git a/src/frontend/src/alerts/error/index.tsx b/src/frontend/src/alerts/error/index.tsx
index 111bb7cfd..872fa69bd 100644
--- a/src/frontend/src/alerts/error/index.tsx
+++ b/src/frontend/src/alerts/error/index.tsx
@@ -43,10 +43,7 @@ export default function ErrorAlert({
       >
         <div className="flex">
           <div className="flex-shrink-0">
-            <XCircle
-              className="h-5 w-5 text-status-red"
-              aria-hidden="true"
-            />
+            <XCircle className="h-5 w-5 text-status-red" aria-hidden="true" />
           </div>
           <div className="ml-3">
             <h3 className="text-sm font-medium text-error-foreground">
diff --git a/src/frontend/src/alerts/notice/index.tsx b/src/frontend/src/alerts/notice/index.tsx
index 0fa3dc382..4d0747919 100644
--- a/src/frontend/src/alerts/notice/index.tsx
+++ b/src/frontend/src/alerts/notice/index.tsx
@@ -40,10 +40,7 @@ export default function NoticeAlert({
       >
         <div className="flex">
           <div className="flex-shrink-0">
-            <Info
-              className="h-5 w-5 text-status-blue "
-              aria-hidden="true"
-            />
+            <Info className="h-5 w-5 text-status-blue " aria-hidden="true" />
           </div>
           <div className="ml-3 flex-1 md:flex md:justify-between">
             <p className="text-sm text-info-foreground">{title}</p>
diff --git a/src/frontend/src/components/ExtraSidebarComponent/index.tsx b/src/frontend/src/components/ExtraSidebarComponent/index.tsx
index b1b5f0baf..913b6b8eb 100644
--- a/src/frontend/src/components/ExtraSidebarComponent/index.tsx
+++ b/src/frontend/src/components/ExtraSidebarComponent/index.tsx
@@ -71,9 +71,7 @@ export default function ExtraSidebar() {
                               <span className="flex-1">{item.name}</span>
                               <svg
                                 className={classNames(
-                                  open
-                                    ? "text-ring rotate-90"
-                                    : "text-ring",
+                                  open ? "text-ring rotate-90" : "text-ring",
                                   "ml-3 h-5 w-5 flex-shrink-0 transition-rotate duration-150 ease-in-out group-hover:text-ring"
                                 )}
                                 viewBox="0 0 20 20"
diff --git a/src/frontend/src/components/chatComponent/buildTrigger/index.tsx b/src/frontend/src/components/chatComponent/buildTrigger/index.tsx
index 19cbde95d..d8e1c7b2c 100644
--- a/src/frontend/src/components/chatComponent/buildTrigger/index.tsx
+++ b/src/frontend/src/components/chatComponent/buildTrigger/index.tsx
@@ -170,12 +170,12 @@ export default function BuildTrigger({
               {isBuilding && progress < 1 ? (
                 // Render your loading animation here when isBuilding is true
                 <RadialProgressComponent
-                // ! confirm below works
+                  // ! confirm below works
                   color={"text-build-trigger"}
                   value={progress}
                 ></RadialProgressComponent>
               ) : isBuilding ? (
-                <Loading strokeWidth={1.5} className="stroke-build-trigger"/>
+                <Loading strokeWidth={1.5} className="stroke-build-trigger" />
               ) : (
                 <Zap className="sh-6 w-6 fill-build-trigger stroke-1 stroke-build-trigger" />
               )}
diff --git a/src/frontend/src/components/dropdownComponent/index.tsx b/src/frontend/src/components/dropdownComponent/index.tsx
index 78b570754..1539d6a02 100644
--- a/src/frontend/src/components/dropdownComponent/index.tsx
+++ b/src/frontend/src/components/dropdownComponent/index.tsx
@@ -36,11 +36,13 @@ export default function Dropdown({
                   editNode
                     ? "relative pr-8 placeholder:text-center block w-full pt-0.5 pb-0.5 form-input rounded-md shadow-sm sm:text-sm border-ring border-1" +
                       INPUT_STYLE
-                      : "ring-1 ring-ring placeholder:text-muted-foreground w-full py-2 pl-3 pr-10 text-left focus-visible:outline-none rounded-md border-ring shadow-sm sm:text-sm bg-background" +
+                    : "ring-1 ring-ring placeholder:text-muted-foreground w-full py-2 pl-3 pr-10 text-left focus-visible:outline-none rounded-md border-ring shadow-sm sm:text-sm bg-background" +
                       INPUT_STYLE
                 }
               >
-                <span className="block bg-background truncate w-full">{internalValue}</span>
+                <span className="block bg-background truncate w-full">
+                  {internalValue}
+                </span>
                 <span
                   className={
                     "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2"
@@ -72,9 +74,7 @@ export default function Dropdown({
                       key={id}
                       className={({ active }) =>
                         classNames(
-                          active
-                            ? " bg-accent"
-                            : "",
+                          active ? " bg-accent" : "",
                           editNode
                             ? "relative cursor-default select-none py-0.5 pl-3 pr-12"
                             : "relative cursor-default select-none py-2 pl-3 pr-9"
diff --git a/src/frontend/src/components/loadingComponent/index.tsx b/src/frontend/src/components/loadingComponent/index.tsx
index 74fb1bf1e..e23cfa042 100644
--- a/src/frontend/src/components/loadingComponent/index.tsx
+++ b/src/frontend/src/components/loadingComponent/index.tsx
@@ -22,7 +22,9 @@ export default function LoadingComponent({ remSize }: LoadingComponentProps) {
         />
       </svg>
       <br></br>
-      <span className="animate-pulse text-almost-medium-blue text-lg">Loading...</span>
+      <span className="animate-pulse text-almost-medium-blue text-lg">
+        Loading...
+      </span>
     </div>
   );
 }
diff --git a/src/frontend/src/components/promptComponent/index.tsx b/src/frontend/src/components/promptComponent/index.tsx
index 573e26e65..96dd72054 100644
--- a/src/frontend/src/components/promptComponent/index.tsx
+++ b/src/frontend/src/components/promptComponent/index.tsx
@@ -73,9 +73,7 @@ export default function PromptAreaComponent({
             );
           }}
         >
-          {!editNode && (
-            <ExternalLink className="w-6 h-6 hover:text-ring " />
-          )}
+          {!editNode && <ExternalLink className="w-6 h-6 hover:text-ring " />}
         </button>
       </div>
     </div>
diff --git a/src/frontend/src/components/textAreaComponent/index.tsx b/src/frontend/src/components/textAreaComponent/index.tsx
index 3f1fd497b..9f934ce2c 100644
--- a/src/frontend/src/components/textAreaComponent/index.tsx
+++ b/src/frontend/src/components/textAreaComponent/index.tsx
@@ -76,9 +76,7 @@ export default function TextAreaComponent({
             );
           }}
         >
-          {!editNode && (
-            <ExternalLink className="w-6 h-6 hover:text-ring " />
-          )}
+          {!editNode && <ExternalLink className="w-6 h-6 hover:text-ring " />}
         </button>
       </div>
     </div>
diff --git a/src/frontend/src/components/toggleComponent/index.tsx b/src/frontend/src/components/toggleComponent/index.tsx
index 20705107f..90ae3ae72 100644
--- a/src/frontend/src/components/toggleComponent/index.tsx
+++ b/src/frontend/src/components/toggleComponent/index.tsx
@@ -30,9 +30,7 @@ export default function ToggleComponent({
           className={classNames(
             enabled ? "translate-x-5" : "translate-x-0",
             "pointer-events-none relative inline-block h-5 w-5 transform rounded-full  shadow ring-0 transition duration-200 ease-in-out",
-            disabled
-              ? "bg-input "
-              : "bg-background"
+            disabled ? "bg-input " : "bg-background"
           )}
         >
           <span
diff --git a/src/frontend/src/components/ui/switch.tsx b/src/frontend/src/components/ui/switch.tsx
index c9b41cb90..794667c52 100644
--- a/src/frontend/src/components/ui/switch.tsx
+++ b/src/frontend/src/components/ui/switch.tsx
@@ -25,4 +25,4 @@ const Switch = React.forwardRef<
 ));
 Switch.displayName = SwitchPrimitives.Root.displayName;
 
-export { Switch };
\ No newline at end of file
+export { Switch };
diff --git a/src/frontend/src/constants.tsx b/src/frontend/src/constants.tsx
index 9d4184da6..e37ee4199 100644
--- a/src/frontend/src/constants.tsx
+++ b/src/frontend/src/constants.tsx
@@ -150,8 +150,6 @@ export const EXPORT_CODE_DIALOG =
 export const INPUT_STYLE =
   "focus:tw-ring-none focus-visible:outline-none  focus:ring-ring bg-background focus:outline-none";
 
-
-
 /**
  * The base text for subtitle of code dialog
  * @constant
@@ -170,9 +168,8 @@ export const NAV_DISPLAY_STYLE =
  * The base text for subtitle of code dialog
  * @constant
  */
-export const BUTTON_DIV_STYLE =
-  " flex gap-2 ";
-  " focus:ring-1 focus:ring-offset-1 focus:ring-ring focus:outline-none ";
+export const BUTTON_DIV_STYLE = " flex gap-2 ";
+(" focus:ring-1 focus:ring-offset-1 focus:ring-ring focus:outline-none ");
 
 /**
  * Default description for the flow
diff --git a/src/frontend/src/contexts/tabsContext.tsx b/src/frontend/src/contexts/tabsContext.tsx
index 543a0424a..cf4303a4d 100644
--- a/src/frontend/src/contexts/tabsContext.tsx
+++ b/src/frontend/src/contexts/tabsContext.tsx
@@ -192,26 +192,28 @@ export function TabsProvider({ children }: { children: ReactNode }) {
   }
 
   function processFlowEdges(flow) {
-    if(!flow.data || !flow.data.edges) return;
+    if (!flow.data || !flow.data.edges) return;
     flow.data.edges.forEach((edge) => {
       edge.className = "";
       edge.style = { stroke: "#555555" };
     });
   }
-  function updateDisplay_name(node:NodeType,template:APIClassType) {
-    node.data.node.display_name = template["display_name"]?template["display_name"]:node.data.type;
+  function updateDisplay_name(node: NodeType, template: APIClassType) {
+    node.data.node.display_name = template["display_name"]
+      ? template["display_name"]
+      : node.data.type;
   }
 
   function processFlowNodes(flow) {
-    if(!flow.data || !flow.data.nodes) return;
-    flow.data.nodes.forEach((node:NodeType) => {
+    if (!flow.data || !flow.data.nodes) return;
+    flow.data.nodes.forEach((node: NodeType) => {
       const template = templates[node.data.type];
       if (!template) {
         setErrorData({ title: `Unknown node type: ${node.data.type}` });
         return;
       }
       if (Object.keys(template["template"]).length > 0) {
-        updateDisplay_name(node,template);
+        updateDisplay_name(node, template);
         updateNodeBaseClasses(node, template);
         updateNodeEdges(flow, node, template);
         updateNodeDescription(node, template);
@@ -220,11 +222,15 @@ export function TabsProvider({ children }: { children: ReactNode }) {
     });
   }
 
-  function updateNodeBaseClasses(node:NodeType,template:APIClassType) {
+  function updateNodeBaseClasses(node: NodeType, template: APIClassType) {
     node.data.node.base_classes = template["base_classes"];
   }
 
-  function updateNodeEdges(flow:FlowType, node:NodeType,template:APIClassType) {
+  function updateNodeEdges(
+    flow: FlowType,
+    node: NodeType,
+    template: APIClassType
+  ) {
     flow.data.edges.forEach((edge) => {
       if (edge.source === node.id) {
         edge.sourceHandle = edge.sourceHandle
@@ -236,11 +242,11 @@ export function TabsProvider({ children }: { children: ReactNode }) {
     });
   }
 
-  function updateNodeDescription(node:NodeType,template:APIClassType) {
+  function updateNodeDescription(node: NodeType, template: APIClassType) {
     node.data.node.description = template["description"];
   }
 
-  function updateNodeTemplate(node:NodeType,template:APIClassType) {
+  function updateNodeTemplate(node: NodeType, template: APIClassType) {
     node.data.node.template = updateTemplate(
       template["template"] as unknown as APITemplateType,
       node.data.node.template as APITemplateType
diff --git a/src/frontend/src/modals/ApiModal/index.tsx b/src/frontend/src/modals/ApiModal/index.tsx
index f9949f091..c6bd94762 100644
--- a/src/frontend/src/modals/ApiModal/index.tsx
+++ b/src/frontend/src/modals/ApiModal/index.tsx
@@ -87,10 +87,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
         <DialogHeader>
           <DialogTitle className="flex items-center">
             <span className="pr-2">Code</span>
-            <Code2
-              className="h-6 w-6 text-primary pl-1 "
-              aria-hidden="true"
-            />
+            <Code2 className="h-6 w-6 text-primary pl-1 " aria-hidden="true" />
           </DialogTitle>
           <DialogDescription>{EXPORT_CODE_DIALOG}</DialogDescription>
         </DialogHeader>
@@ -103,7 +100,9 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
           <div className="flex items-center justify-between px-2">
             <TabsList>
               {tabs.map((tab, index) => (
-                <TabsTrigger key={index} value={index.toString()}>{tab.name}</TabsTrigger>
+                <TabsTrigger key={index} value={index.toString()}>
+                  {tab.name}
+                </TabsTrigger>
               ))}
             </TabsList>
             <div className="float-right">
diff --git a/src/frontend/src/modals/EditNodeModal/index.tsx b/src/frontend/src/modals/EditNodeModal/index.tsx
index d1041429a..997316dc4 100644
--- a/src/frontend/src/modals/EditNodeModal/index.tsx
+++ b/src/frontend/src/modals/EditNodeModal/index.tsx
@@ -79,7 +79,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
   }
 
   return (
-    <Dialog open={true} onOpenChange={setModalOpen} >
+    <Dialog open={true} onOpenChange={setModalOpen}>
       <DialogTrigger asChild></DialogTrigger>
       <DialogContent className="lg:max-w-[700px] ">
         <DialogHeader>
diff --git a/src/frontend/src/modals/NodeModal/index.tsx b/src/frontend/src/modals/NodeModal/index.tsx
index 6444aaa14..9090afe6c 100644
--- a/src/frontend/src/modals/NodeModal/index.tsx
+++ b/src/frontend/src/modals/NodeModal/index.tsx
@@ -76,7 +76,7 @@ export default function NodeModal({ data }: { data: NodeDataType }) {
                 <div className="h-full w-full flex flex-col justify-center items-center">
                   <div className="flex w-full pb-4 z-10 justify-center shadow-sm">
                     <Icon
-                    strokeWidth={1.5}
+                      strokeWidth={1.5}
                       className="w-10 mt-4 h-10 p-1 rounded"
                       style={{
                         color:
diff --git a/src/frontend/src/modals/chatModal/chatMessage/index.tsx b/src/frontend/src/modals/chatModal/chatMessage/index.tsx
index 50e30bd1c..0e501a5df 100644
--- a/src/frontend/src/modals/chatModal/chatMessage/index.tsx
+++ b/src/frontend/src/modals/chatModal/chatMessage/index.tsx
@@ -32,9 +32,7 @@ export default function ChatMessage({
     <div
       className={classNames(
         "w-full py-2 pl-2 flex",
-        chat.isSend
-          ? "bg-background "
-          : "bg-input"
+        chat.isSend ? "bg-background " : "bg-input"
       )}
     >
       <div
@@ -60,9 +58,7 @@ export default function ChatMessage({
             />
           </div>
         )}
-        {chat.isSend && (
-          <User2 className="w-6 h-6 -mb-1 text-primary " />
-        )}
+        {chat.isSend && <User2 className="w-6 h-6 -mb-1 text-primary " />}
       </div>
       {!chat.isSend ? (
         <div className="w-full text-start flex items-center">
diff --git a/src/frontend/src/modals/chatModal/fileComponent/index.tsx b/src/frontend/src/modals/chatModal/fileComponent/index.tsx
index 50d2c5547..383807c06 100644
--- a/src/frontend/src/modals/chatModal/fileComponent/index.tsx
+++ b/src/frontend/src/modals/chatModal/fileComponent/index.tsx
@@ -39,10 +39,7 @@ export default function FileCard({ fileName, content, fileType }) {
           <div
             className={`absolute top-0 right-0 bg-muted text-foreground rounded-bl-lg px-1 text-sm font-bold `}
           >
-            <button
-              className="text-ring py-1 px-2 "
-              onClick={handleDownload}
-            >
+            <button className="text-ring py-1 px-2 " onClick={handleDownload}>
               <DownloadCloud className="hover:scale-110 w-5 h-5 text-current" />
             </button>
           </div>
diff --git a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
index 3c9381a9e..feafafad8 100644
--- a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
@@ -402,8 +402,10 @@ export default function Page({ flow }: { flow: FlowType }) {
                   maxZoom={8}
                 >
                   <Background className="" />
-                  <Controls className="text-primary stroke-foreground [&>button]:border-b-border hover:[&>button]:bg-border
-                   fill-foreground bg-muted"></Controls>
+                  <Controls
+                    className="text-primary stroke-foreground [&>button]:border-b-border hover:[&>button]:bg-border
+                   fill-foreground bg-muted"
+                  ></Controls>
                 </ReactFlow>
                 <Chat flow={flow} reactFlowInstance={reactFlowInstance} />
               </div>
diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
index 49ea590d9..1b76be337 100644
--- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
@@ -109,7 +109,7 @@ export default function ExtraSidebar() {
             disabled={!isPending}
           >
             <Save
-            strokeWidth={1.5}
+              strokeWidth={1.5}
               className={
                 "w-5 h-5" + (isPending ? " " : " text-muted-foreground")
               }
@@ -134,7 +134,7 @@ export default function ExtraSidebar() {
           }}
         />
         <div className="absolute inset-y-0 right-0 flex py-1.5 pr-3 items-center">
-        {/* ! replace hash color here */}
+          {/* ! replace hash color here */}
           <Search size={20} strokeWidth={1.5} className="text-primary" />
         </div>
       </div>
diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
index 6237b9483..6d21dc18e 100644
--- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
@@ -83,7 +83,6 @@ const NodeToolbarComponent = (props) => {
             </ShadTooltip>
           )}
 
-          
           {/* <Menu as="div" className="relative inline-block text-left z-100">
             <button className="text-gray-700 transition-all duration-500 ease-in-out   shadow-md relative -ml-px inline-flex items-center bg-background px-2 py-2 ring-1 ring-inset ring-gray-300 hover:bg-muted focus:z-10 rounded-r-md">
               <div>
diff --git a/src/frontend/src/pages/MainPage/index.tsx b/src/frontend/src/pages/MainPage/index.tsx
index ccc062317..f6e93c9f5 100644
--- a/src/frontend/src/pages/MainPage/index.tsx
+++ b/src/frontend/src/pages/MainPage/index.tsx
@@ -9,10 +9,10 @@ import { BUTTON_DIV_STYLE } from "../../constants";
 export default function HomePage() {
   const { flows, setTabId, downloadFlows, uploadFlows, addFlow, removeFlow } =
     useContext(TabsContext);
-    useEffect(() => {
-      setTabId("");
-    }, []);
-    const navigate = useNavigate();
+  useEffect(() => {
+    setTabId("");
+  }, []);
+  const navigate = useNavigate();
   return (
     <div className="w-full h-full flex overflow-auto flex-col bg-muted px-16">
       <div className="w-full flex justify-between py-12 pb-2 px-6">
@@ -20,7 +20,7 @@ export default function HomePage() {
           <Home className="w-6" />
           {USER_PROJECTS_HEADER}
         </span>
-        <div className={`${ BUTTON_DIV_STYLE }`}>
+        <div className={`${BUTTON_DIV_STYLE}`}>
           <Button
             variant="primary"
             onClick={() => {
diff --git a/src/frontend/tailwind.config.js b/src/frontend/tailwind.config.js
index 2607ef120..9f5abdeac 100644
--- a/src/frontend/tailwind.config.js
+++ b/src/frontend/tailwind.config.js
@@ -6,7 +6,12 @@ import plugin from "tailwindcss/plugin";
 // ! Check if removing the other module.exports made sense
 module.exports = {
   darkMode: ["class"],
-  content: ["app/**/*.{ts,tsx}", "components/**/*.{ts,tsx}", "./index.html", "./src/**/*.{js,ts,tsx,jsx}"],
+  content: [
+    "app/**/*.{ts,tsx}",
+    "components/**/*.{ts,tsx}",
+    "./index.html",
+    "./src/**/*.{js,ts,tsx,jsx}",
+  ],
   important: true,
   theme: {
     container: {
@@ -18,45 +23,44 @@ module.exports = {
     },
     extend: {
       colors: {
-
-        'almost-dark-gray': "var(--almost-dark-gray)",
-        'almost-light-blue': "var(--almost-light-blue)",
-        'almost-medium-blue': "var(--almost-medium-blue)",
-        'almost-medium-gray': "var(--almost-medium-gray)",
-        'almost-medium-green': "var(--almost-medium-green)",
-        'almost-medium-red': "var(--almost-medium-red)",
-        'btn-shadow': "var(--round-btn-shadow)",
-        'build-trigger': "var(--build-trigger)",
-        'chat-trigger': "var(--chat-trigger)",
-        'blur-shared': "var(--blur-shared)",
-        'dark-blue': "var(--dark-blue)",
-        'dark-gray': "var(--dark-gray)",
-        'dark-red': "var(--dark-red)",
-        'error-background': "var(--error-background)",
-        'error-foreground': "var(--error-foreground)",
-        'high-dark-gray': "var(--high-dark-gray)",
-        'high-indigo': "var(--high-indigo)",
-        'high-light-gray': "var(--high-light-gray)",
-        'info-background': "var(--info-background)",
-        'info-foreground': "var(--info-foreground)",
-        'light-blue': "var(--light-blue)",
-        'light-gray': "var(--light-gray)",
-        'light-slate': "var(--light-slate)",
-        'medium-blue': "var(--medium-blue)",
-        'status-blue': "var(--status-blue)",
-        'medium-dark-gray': "var(--medium-dark-gray)",
-        'medium-dark-green': "var(--medium-dark-green)",
-        'medium-dark-red': "var(--medium-dark-red)",
-        'medium-emerald': "var(--medium-emerald)",
-        'medium-gray': "var(--medium-gray)",
-        'medium-high-indigo': "var(--medium-high-indigo)",
-        'medium-indigo': "var(--medium-indigo)",
-        'medium-low-gray': "var(--medium-low-gray)",
-        'status-green': "var(--status-green)",
-        'status-red': "var(--status-red)",
-        'status-yellow': "var(--status-yellow)",
-        'success-background': "var(--success-background)",
-        'success-foreground': "var(--success-foreground)",
+        "almost-dark-gray": "var(--almost-dark-gray)",
+        "almost-light-blue": "var(--almost-light-blue)",
+        "almost-medium-blue": "var(--almost-medium-blue)",
+        "almost-medium-gray": "var(--almost-medium-gray)",
+        "almost-medium-green": "var(--almost-medium-green)",
+        "almost-medium-red": "var(--almost-medium-red)",
+        "btn-shadow": "var(--round-btn-shadow)",
+        "build-trigger": "var(--build-trigger)",
+        "chat-trigger": "var(--chat-trigger)",
+        "blur-shared": "var(--blur-shared)",
+        "dark-blue": "var(--dark-blue)",
+        "dark-gray": "var(--dark-gray)",
+        "dark-red": "var(--dark-red)",
+        "error-background": "var(--error-background)",
+        "error-foreground": "var(--error-foreground)",
+        "high-dark-gray": "var(--high-dark-gray)",
+        "high-indigo": "var(--high-indigo)",
+        "high-light-gray": "var(--high-light-gray)",
+        "info-background": "var(--info-background)",
+        "info-foreground": "var(--info-foreground)",
+        "light-blue": "var(--light-blue)",
+        "light-gray": "var(--light-gray)",
+        "light-slate": "var(--light-slate)",
+        "medium-blue": "var(--medium-blue)",
+        "status-blue": "var(--status-blue)",
+        "medium-dark-gray": "var(--medium-dark-gray)",
+        "medium-dark-green": "var(--medium-dark-green)",
+        "medium-dark-red": "var(--medium-dark-red)",
+        "medium-emerald": "var(--medium-emerald)",
+        "medium-gray": "var(--medium-gray)",
+        "medium-high-indigo": "var(--medium-high-indigo)",
+        "medium-indigo": "var(--medium-indigo)",
+        "medium-low-gray": "var(--medium-low-gray)",
+        "status-green": "var(--status-green)",
+        "status-red": "var(--status-red)",
+        "status-yellow": "var(--status-yellow)",
+        "success-background": "var(--success-background)",
+        "success-foreground": "var(--success-foreground)",
 
         white: "var(--white)",
         border: "hsl(var(--border))",