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)",