From ff254029bf9fdebce08ed43ff1d169b08f0149de Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Sun, 2 Jul 2023 10:29:24 -0300
Subject: [PATCH] style: apply tailwind formatting

---
 src/frontend/src/App.tsx                      | 24 ++++++--
 .../components/parameterComponent/index.tsx   | 12 ++--
 .../src/CustomNodes/GenericNode/index.tsx     | 20 +++----
 .../components/singleAlertComponent/index.tsx | 12 ++--
 .../src/alerts/alertDropDown/index.tsx        | 10 ++--
 src/frontend/src/alerts/error/index.tsx       |  2 +-
 src/frontend/src/alerts/notice/index.tsx      |  4 +-
 src/frontend/src/alerts/success/index.tsx     |  2 +-
 .../components/CrashErrorComponent/index.tsx  | 12 ++--
 .../EditFlowSettingsComponent/index.tsx       |  4 +-
 .../ExtraSidebarComponent/index.tsx           | 16 ++---
 .../ReactTooltipComponent/index.tsx           |  2 +-
 .../src/components/cardComponent/index.tsx    | 10 ++--
 .../chatComponent/buildTrigger/index.tsx      |  6 +-
 .../chatComponent/chatMessage/index.tsx       | 12 ++--
 .../chatComponent/chatTrigger/index.tsx       |  6 +-
 .../components/codeAreaComponent/index.tsx    | 10 ++--
 .../components/dropdownComponent/index.tsx    | 12 ++--
 .../src/components/floatComponent/index.tsx   |  4 +-
 .../components/menuBar/index.tsx              | 18 +++---
 .../src/components/headerComponent/index.tsx  | 30 +++++-----
 .../src/components/inputComponent/index.tsx   | 16 ++---
 .../components/inputFileComponent/index.tsx   | 12 ++--
 .../components/inputListComponent/index.tsx   | 10 ++--
 .../src/components/intComponent/index.tsx     |  6 +-
 .../src/components/loadingComponent/index.tsx |  6 +-
 .../src/components/promptComponent/index.tsx  | 10 ++--
 .../components/textAreaComponent/index.tsx    | 10 ++--
 .../src/components/toggleComponent/index.tsx  |  8 +--
 src/frontend/src/components/ui/card.tsx       |  2 +-
 .../src/components/ui/dropdown-menu.tsx       |  2 +-
 .../src/components/ui/rename-label.tsx        |  4 +-
 src/frontend/src/components/ui/tabs.tsx       |  2 +-
 src/frontend/src/contexts/tabsContext.tsx     |  8 ++-
 src/frontend/src/modals/ApiModal/index.tsx    | 26 ++++-----
 .../src/modals/EditNodeModal/index.tsx        | 18 +++---
 .../NodeModal/components/ModalField/index.tsx |  2 +-
 src/frontend/src/modals/NodeModal/index.tsx   | 20 +++----
 .../src/modals/chatModal/chatInput/index.tsx  |  4 +-
 .../chatModal/chatMessage/codeBlock/index.tsx |  4 +-
 .../modals/chatModal/chatMessage/index.tsx    | 32 +++++-----
 .../modals/chatModal/fileComponent/index.tsx  | 20 +++----
 src/frontend/src/modals/chatModal/index.tsx   | 58 ++++++++++---------
 .../src/modals/codeAreaModal/index.tsx        |  8 +--
 src/frontend/src/modals/exportModal/index.tsx | 20 +++++--
 .../src/modals/flowSettingsModal/index.tsx    |  4 +-
 .../src/modals/genericModal/index.tsx         |  4 +-
 .../modals/importModal/buttonBox/index.tsx    | 10 ++--
 src/frontend/src/modals/importModal/index.tsx | 20 +++----
 src/frontend/src/modals/promptModal/index.tsx | 14 ++---
 .../src/modals/textAreaModal/index.tsx        | 14 ++---
 .../src/pages/CommunityPage/index.tsx         | 14 ++---
 .../components/DisclosureComponent/index.tsx  |  2 +-
 .../components/PageComponent/index.tsx        | 12 ++--
 .../extraSidebarComponent/index.tsx           | 36 ++++++------
 .../components/nodeToolbarComponent/index.tsx | 18 +++---
 src/frontend/src/pages/FlowPage/index.tsx     |  2 +-
 src/frontend/src/pages/MainPage/index.tsx     | 18 +++---
 src/frontend/src/types/tabs/index.ts          |  6 +-
 59 files changed, 371 insertions(+), 339 deletions(-)

diff --git a/src/frontend/src/App.tsx b/src/frontend/src/App.tsx
index 3ef728925..f4df0f00b 100644
--- a/src/frontend/src/App.tsx
+++ b/src/frontend/src/App.tsx
@@ -51,7 +51,11 @@ export default function App() {
   useEffect(() => {
     // If there is an error alert open with data, add it to the alertsList
     if (errorOpen && errorData) {
-      if(alertsList.length > 0 && JSON.stringify(alertsList[alertsList.length - 1].data)===JSON.stringify(errorData)){
+      if (
+        alertsList.length > 0 &&
+        JSON.stringify(alertsList[alertsList.length - 1].data) ===
+          JSON.stringify(errorData)
+      ) {
         return;
       }
       setErrorOpen(false);
@@ -65,7 +69,11 @@ export default function App() {
     }
     // If there is a notice alert open with data, add it to the alertsList
     else if (noticeOpen && noticeData) {
-      if(alertsList.length > 0 && JSON.stringify(alertsList[alertsList.length - 1].data)===JSON.stringify(noticeData)){
+      if (
+        alertsList.length > 0 &&
+        JSON.stringify(alertsList[alertsList.length - 1].data) ===
+          JSON.stringify(noticeData)
+      ) {
         return;
       }
       setNoticeOpen(false);
@@ -79,7 +87,11 @@ export default function App() {
     }
     // If there is a success alert open with data, add it to the alertsList
     else if (successOpen && successData) {
-      if(alertsList.length > 0 && JSON.stringify(alertsList[alertsList.length - 1].data)===JSON.stringify(successData)){
+      if (
+        alertsList.length > 0 &&
+        JSON.stringify(alertsList[alertsList.length - 1].data) ===
+          JSON.stringify(successData)
+      ) {
         return;
       }
       setSuccessOpen(false);
@@ -112,7 +124,7 @@ export default function App() {
 
   return (
     //need parent component with width and height
-    <div className="h-full flex flex-col">
+    <div className="flex h-full flex-col">
       <ErrorBoundary
         onReset={() => {
           window.localStorage.removeItem("tabsData");
@@ -127,7 +139,7 @@ export default function App() {
       </ErrorBoundary>
       <div></div>
       <div
-        className="flex flex-col-reverse fixed bottom-5 left-5"
+        className="fixed bottom-5 left-5 flex flex-col-reverse"
         style={{ zIndex: 999 }}
       >
         {alertsList.map((alert) => (
@@ -161,4 +173,4 @@ export default function App() {
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
index f002492a6..f9c432fc1 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
@@ -101,7 +101,7 @@ export default function ParameterComponent({
       <span
         key={getRandomKeyByssmm()}
         className={classNames(
-          i > 0 ? "items-center flex mt-3" : "items-center flex"
+          i > 0 ? "mt-3 flex items-center" : "flex items-center"
         )}
       >
         <div
@@ -138,12 +138,12 @@ export default function ParameterComponent({
   return (
     <div
       ref={ref}
-      className="w-full flex flex-wrap justify-between items-center bg-muted mt-1 px-5 py-2"
+      className="mt-1 flex w-full flex-wrap items-center justify-between bg-muted px-5 py-2"
     >
       <>
         <div
           className={
-            "text-sm truncate w-full" +
+            "w-full truncate text-sm" +
             (left ? "" : " text-end") +
             (info !== "" ? " flex items-center" : "")
           }
@@ -153,7 +153,7 @@ export default function ParameterComponent({
           <div className="">
             {info !== "" && (
               <ShadTooltip content={infoHtml.current}>
-                <Info className="ml-2 relative bottom-0.5 w-3 h-3" />
+                <Info className="relative bottom-0.5 ml-2 h-3 w-3" />
               </ShadTooltip>
             )}
           </div>
@@ -182,7 +182,7 @@ export default function ParameterComponent({
               }
               className={classNames(
                 left ? "-ml-0.5 " : "-mr-0.5 ",
-                "w-3 h-3 rounded-full border-2 bg-background"
+                "h-3 w-3 rounded-full border-2 bg-background"
               )}
               style={{
                 borderColor: color,
@@ -247,7 +247,7 @@ export default function ParameterComponent({
         ) : left === true &&
           type === "str" &&
           data.node.template[name].options ? (
-          <div className="w-full mt-2">
+          <div className="mt-2 w-full">
             <Dropdown
               options={data.node.template[name].options}
               onSelect={handleOnNewValue}
diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx
index d8676b86c..f3e715558 100644
--- a/src/frontend/src/CustomNodes/GenericNode/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx
@@ -130,29 +130,29 @@ export default function GenericNode({
                   )
                 }
               >
-                <div className="w-5 h-5 relative top-[3px]">
+                <div className="relative top-[3px] h-5 w-5">
                   <div
                     className={classNames(
                       validationStatus && validationStatus.valid
-                        ? "w-4 h-4 rounded-full bg-status-green opacity-100"
-                        : "w-4 h-4 rounded-full bg-ring opacity-0 hidden animate-spin",
-                      "absolute w-4 hover:text-ring hover: transition-all ease-in-out duration-200"
+                        ? "h-4 w-4 rounded-full bg-status-green opacity-100"
+                        : "hidden h-4 w-4 animate-spin rounded-full bg-ring opacity-0",
+                      "hover: absolute w-4 transition-all duration-200 ease-in-out hover:text-ring"
                     )}
                   ></div>
                   <div
                     className={classNames(
                       validationStatus && !validationStatus.valid
-                        ? "w-4 h-4 rounded-full  bg-status-red opacity-100"
-                        : "w-4 h-4 rounded-full bg-ring opacity-0 hidden animate-spin",
-                      "absolute w-4 hover:text-ring hover: transition-all ease-in-out duration-200"
+                        ? "h-4 w-4 rounded-full  bg-status-red opacity-100"
+                        : "hidden h-4 w-4 animate-spin rounded-full bg-ring opacity-0",
+                      "hover: absolute w-4 transition-all duration-200 ease-in-out hover:text-ring"
                     )}
                   ></div>
                   <div
                     className={classNames(
                       !validationStatus || isBuilding
-                        ? "w-4 h-4 rounded-full  bg-status-yellow opacity-100"
-                        : "w-4 h-4 rounded-full bg-ring opacity-0 hidden animate-spin",
-                      "absolute w-4 hover:text-ring transition-all ease-in-out duration-200"
+                        ? "h-4 w-4 rounded-full  bg-status-yellow opacity-100"
+                        : "hidden h-4 w-4 animate-spin rounded-full bg-ring opacity-0",
+                      "absolute w-4 transition-all duration-200 ease-in-out hover:text-ring"
                     )}
                   ></div>
                 </div>
diff --git a/src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx b/src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx
index 5827ccc2f..5a16390bb 100644
--- a/src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx
+++ b/src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx
@@ -25,14 +25,14 @@ export default function SingleAlert({
     >
       {type === "error" ? (
         <div
-          className="flex bg-error-background rounded-md p-3 mb-2 mx-2"
+          className="mx-2 mb-2 flex rounded-md bg-error-background p-3"
           key={dropItem.id}
         >
           <div className="flex-shrink-0">
             <XCircle className="h-5 w-5 text-status-red" aria-hidden="true" />
           </div>
           <div className="ml-3">
-            <h3 className="text-sm break-words font-medium text-error-foreground">
+            <h3 className="break-words text-sm font-medium text-error-foreground">
               {dropItem.title}
             </h3>
             {dropItem.list ? (
@@ -72,17 +72,17 @@ export default function SingleAlert({
         </div>
       ) : type === "notice" ? (
         <div
-          className="flex rounded-md bg-info-background p-3 mb-2 mx-2"
+          className="mx-2 mb-2 flex rounded-md bg-info-background p-3"
           key={dropItem.id}
         >
           <div className="flex-shrink-0">
             <Info className="h-5 w-5 text-status-blue " aria-hidden="true" />
           </div>
           <div className="ml-3 flex-1 md:flex md:justify-between">
-            <p className="text-sm text-info-foreground font-medium">
+            <p className="text-sm font-medium text-info-foreground">
               {dropItem.title}
             </p>
-            <p className="mt-3 text-sm md:mt-0 md:ml-6">
+            <p className="mt-3 text-sm md:ml-6 md:mt-0">
               {dropItem.link ? (
                 <Link
                   to={dropItem.link}
@@ -118,7 +118,7 @@ export default function SingleAlert({
         </div>
       ) : (
         <div
-          className="flex bg-success-background p-3 mb-2 mx-2 rounded-md"
+          className="mx-2 mb-2 flex rounded-md bg-success-background p-3"
           key={dropItem.id}
         >
           <div className="flex-shrink-0">
diff --git a/src/frontend/src/alerts/alertDropDown/index.tsx b/src/frontend/src/alerts/alertDropDown/index.tsx
index fe6845ff9..ef703f624 100644
--- a/src/frontend/src/alerts/alertDropDown/index.tsx
+++ b/src/frontend/src/alerts/alertDropDown/index.tsx
@@ -24,9 +24,9 @@ export default function AlertDropdown({}: AlertDropdownType) {
   return (
     <div
       ref={componentRef}
-      className="z-10 py-3 pb-4 px-2 rounded-md bg-background ring-1 ring-black ring-opacity-5 shadow-lg focus:outline-none overflow-hidden w-[400px] h-[500px] flex flex-col"
+      className="z-10 flex h-[500px] w-[400px] flex-col overflow-hidden rounded-md bg-background px-2 py-3 pb-4 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
     >
-      <div className="flex pl-3 flex-row justify-between text-md font-medium text-foreground">
+      <div className="text-md flex flex-row justify-between pl-3 font-medium text-foreground">
         Notifications
         <div className="flex gap-3 pr-3 ">
           <button
@@ -36,7 +36,7 @@ export default function AlertDropdown({}: AlertDropdownType) {
               setTimeout(clearNotificationList, 100);
             }}
           >
-            <Trash2 className="w-[1.1rem] h-[1.1rem]" />
+            <Trash2 className="h-[1.1rem] w-[1.1rem]" />
           </button>
           <button
             className="text-foreground hover:text-status-red"
@@ -46,7 +46,7 @@ export default function AlertDropdown({}: AlertDropdownType) {
           </button>
         </div>
       </div>
-      <div className="mt-3 flex flex-col overflow-y-scroll w-full h-full scrollbar-hide text-high-foreground">
+      <div className="text-high-foreground mt-3 flex h-full w-full flex-col overflow-y-scroll scrollbar-hide">
         {notificationList.length !== 0 ? (
           notificationList.map((alertItem, index) => (
             <SingleAlert
@@ -56,7 +56,7 @@ export default function AlertDropdown({}: AlertDropdownType) {
             />
           ))
         ) : (
-          <div className="h-full w-full pb-16 text-ring flex justify-center items-center">
+          <div className="flex h-full w-full items-center justify-center pb-16 text-ring">
             No new notifications
           </div>
         )}
diff --git a/src/frontend/src/alerts/error/index.tsx b/src/frontend/src/alerts/error/index.tsx
index 872fa69bd..31980dc6b 100644
--- a/src/frontend/src/alerts/error/index.tsx
+++ b/src/frontend/src/alerts/error/index.tsx
@@ -39,7 +39,7 @@ export default function ErrorAlert({
             removeAlert(id);
           }, 500);
         }}
-        className="rounded-md w-96 mt-6 shadow-xl bg-error-background  p-4 cursor-pointer"
+        className="mt-6 w-96 cursor-pointer rounded-md bg-error-background  p-4 shadow-xl"
       >
         <div className="flex">
           <div className="flex-shrink-0">
diff --git a/src/frontend/src/alerts/notice/index.tsx b/src/frontend/src/alerts/notice/index.tsx
index 4d0747919..9af51a531 100644
--- a/src/frontend/src/alerts/notice/index.tsx
+++ b/src/frontend/src/alerts/notice/index.tsx
@@ -36,7 +36,7 @@ export default function NoticeAlert({
           setShow(false);
           removeAlert(id);
         }}
-        className="rounded-md w-96 mt-6 shadow-xl bg-info-background p-4"
+        className="mt-6 w-96 rounded-md bg-info-background p-4 shadow-xl"
       >
         <div className="flex">
           <div className="flex-shrink-0">
@@ -44,7 +44,7 @@ export default function NoticeAlert({
           </div>
           <div className="ml-3 flex-1 md:flex md:justify-between">
             <p className="text-sm text-info-foreground">{title}</p>
-            <p className="mt-3 text-sm md:mt-0 md:ml-6">
+            <p className="mt-3 text-sm md:ml-6 md:mt-0">
               {link !== "" ? (
                 <Link
                   to={link}
diff --git a/src/frontend/src/alerts/success/index.tsx b/src/frontend/src/alerts/success/index.tsx
index 56ef8a2ad..88fc79962 100644
--- a/src/frontend/src/alerts/success/index.tsx
+++ b/src/frontend/src/alerts/success/index.tsx
@@ -34,7 +34,7 @@ export default function SuccessAlert({
           setShow(false);
           removeAlert(id);
         }}
-        className="rounded-md w-96 mt-6 shadow-xl bg-success-background p-4"
+        className="mt-6 w-96 rounded-md bg-success-background p-4 shadow-xl"
       >
         <div className="flex">
           <div className="flex-shrink-0">
diff --git a/src/frontend/src/components/CrashErrorComponent/index.tsx b/src/frontend/src/components/CrashErrorComponent/index.tsx
index 8bd32af92..fd7d22c36 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-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">
+    <div className="fixed left-0 top-0 z-50 flex h-full w-full items-center justify-center bg-foreground bg-opacity-50">
+      <div className="flex h-1/3 min-h-fit max-w-4xl flex-col justify-evenly rounded-lg bg-background p-8 text-start shadow-lg">
+        <h1 className="mb-4 text-3xl text-status-red">
           Oops! An unknown error has occurred.
         </h1>
-        <p className="text-foreground mb-4 text-xl">
+        <p className="mb-4 text-xl text-foreground">
           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-primary hover:bg-ring text-background font-bold py-2 px-4 rounded mr-4"
+            className="mr-4 rounded bg-primary px-4 py-2 font-bold text-background hover:bg-ring"
           >
             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-status-red hover:bg-error-foreground text-background font-bold py-2 px-4 rounded"
+            className="rounded bg-status-red px-4 py-2 font-bold text-background hover:bg-error-foreground"
           >
             Create Issue
           </a>
diff --git a/src/frontend/src/components/EditFlowSettingsComponent/index.tsx b/src/frontend/src/components/EditFlowSettingsComponent/index.tsx
index 7aa225056..7ce5f4f26 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-status-red animate-pulse ml-10">
+            <span className="ml-10 animate-pulse text-status-red">
               Character limit reached
             </span>
           )}
@@ -71,7 +71,7 @@ export const EditFlowSettings: React.FC<InputProps> = ({
           onChange={handleDescriptionChange}
           value={description ?? ""}
           placeholder="Flow description"
-          className="max-h-[100px] mt-2 font-normal"
+          className="mt-2 max-h-[100px] font-normal"
           rows={3}
         />
       </Label>
diff --git a/src/frontend/src/components/ExtraSidebarComponent/index.tsx b/src/frontend/src/components/ExtraSidebarComponent/index.tsx
index 913b6b8eb..6bc95cde7 100644
--- a/src/frontend/src/components/ExtraSidebarComponent/index.tsx
+++ b/src/frontend/src/components/ExtraSidebarComponent/index.tsx
@@ -18,10 +18,10 @@ export default function ExtraSidebar() {
       <aside
         className={` ${
           isStackedOpen ? "w-52" : "w-0 "
-        } flex-shrink-0 flex overflow-hidden flex-col border-r  transition-all duration-500`}
+        } flex flex-shrink-0 flex-col overflow-hidden border-r  transition-all duration-500`}
       >
-        <div className="w-52 border  overflow-y-auto scrollbar-hide h-full flex flex-col items-start bg-background">
-          <div className="flex flex-grow flex-col w-full">
+        <div className="flex h-full  w-52 flex-col items-start overflow-y-auto border bg-background scrollbar-hide">
+          <div className="flex w-full flex-grow flex-col">
             {extraNavigation.options ? (
               <div className="p-4">
                 <nav className="flex-1 space-y-1">
@@ -34,7 +34,7 @@ export default function ExtraSidebar() {
                             item.href.split("/")[2] === current[4]
                               ? "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"
+                            "group flex w-full items-center rounded-md py-2 pl-2 text-sm font-medium"
                           )}
                         >
                           <item.icon
@@ -42,7 +42,7 @@ export default function ExtraSidebar() {
                               item.href.split("/")[2] === current[4]
                                 ? "text-ring"
                                 : "text-ring group-hover:text-ring",
-                              "mr-3 flex-shrink-0 h-6 w-6"
+                              "mr-3 h-6 w-6 flex-shrink-0"
                             )}
                           />
                           {item.name}
@@ -61,7 +61,7 @@ export default function ExtraSidebar() {
                                 item.href.split("/")[2] === current[4]
                                   ? "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"
+                                "group flex w-full items-center rounded-md py-2 pl-2 pr-1 text-left text-sm font-medium focus:outline-none focus:ring-1 focus:ring-ring"
                               )}
                             >
                               <item.icon
@@ -71,8 +71,8 @@ export default function ExtraSidebar() {
                               <span className="flex-1">{item.name}</span>
                               <svg
                                 className={classNames(
-                                  open ? "text-ring rotate-90" : "text-ring",
-                                  "ml-3 h-5 w-5 flex-shrink-0 transition-rotate duration-150 ease-in-out group-hover:text-ring"
+                                  open ? "rotate-90 text-ring" : "text-ring",
+                                  "transition-rotate ml-3 h-5 w-5 flex-shrink-0 duration-150 ease-in-out group-hover:text-ring"
                                 )}
                                 viewBox="0 0 20 20"
                                 aria-hidden="true"
diff --git a/src/frontend/src/components/ReactTooltipComponent/index.tsx b/src/frontend/src/components/ReactTooltipComponent/index.tsx
index 3686badd3..f49e252a6 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-foreground !shadow-md !opacity-100 z-[9999]",
+          "z-[9999] !bg-white !text-xs !font-normal !text-foreground !opacity-100 !shadow-md",
           className
         )}
         place={position}
diff --git a/src/frontend/src/components/cardComponent/index.tsx b/src/frontend/src/components/cardComponent/index.tsx
index aec9ccb3b..307568413 100644
--- a/src/frontend/src/components/cardComponent/index.tsx
+++ b/src/frontend/src/components/cardComponent/index.tsx
@@ -31,20 +31,20 @@ export const CardComponent = ({
         <CardTitle className="flex w-full items-center gap-4">
           <span
             className={
-              "rounded-full w-7 h-7 flex items-center justify-center text-2xl " +
+              "flex h-7 w-7 items-center justify-center rounded-full text-2xl " +
               gradients[parseInt(flow.id.slice(0, 12), 16) % gradients.length]
             }
           ></span>
-          <span className="flex-1 w-full inline-block truncate-doubleline break-words">
+          <span className="inline-block w-full flex-1 break-words truncate-doubleline">
             {flow.name}
           </span>
           {onDelete && (
             <button className="flex self-start" onClick={onDelete}>
-              <Trash2 className="w-4 h-4 text-primary opacity-0 group-hover:opacity-100 transition-all" />
+              <Trash2 className="h-4 w-4 text-primary opacity-0 transition-all group-hover:opacity-100" />
             </button>
           )}
         </CardTitle>
-        <CardDescription className="pt-2 pb-2">
+        <CardDescription className="pb-2 pt-2">
           <div className="truncate-doubleline">
             {flow.description}
             {/* {flow.description} */}
@@ -53,7 +53,7 @@ export const CardComponent = ({
       </CardHeader>
 
       <CardFooter>
-        <div className="flex gap-2 w-full justify-between items-end">
+        <div className="flex w-full items-end justify-between gap-2">
           <div className="flex flex-wrap gap-2">
             {/* <Badge variant="secondary">Agent</Badge>
             <Badge variant="secondary">
diff --git a/src/frontend/src/components/chatComponent/buildTrigger/index.tsx b/src/frontend/src/components/chatComponent/buildTrigger/index.tsx
index d8e1c7b2c..15c885cbc 100644
--- a/src/frontend/src/components/chatComponent/buildTrigger/index.tsx
+++ b/src/frontend/src/components/chatComponent/buildTrigger/index.tsx
@@ -158,7 +158,7 @@ export default function BuildTrigger({
     >
       <div className={`fixed right-4` + (isBuilt ? " bottom-20" : " bottom-4")}>
         <div
-          className={`${eventClick} flex justify-center align-center py-1 px-3 w-12 h-12 rounded-full shadow-md shadow-round-btn-shadow hover:shadow-round-btn-shadow bg-border cursor-pointer`}
+          className={`${eventClick} align-center shadow-round-btn-shadow hover:shadow-round-btn-shadow flex h-12 w-12 cursor-pointer justify-center rounded-full bg-border px-3 py-1 shadow-md`}
           onClick={() => {
             handleBuild(flow);
           }}
@@ -166,7 +166,7 @@ export default function BuildTrigger({
           onMouseLeave={handleMouseLeave}
         >
           <button>
-            <div className="flex gap-3 items-center">
+            <div className="flex items-center gap-3">
               {isBuilding && progress < 1 ? (
                 // Render your loading animation here when isBuilding is true
                 <RadialProgressComponent
@@ -177,7 +177,7 @@ export default function BuildTrigger({
               ) : isBuilding ? (
                 <Loading strokeWidth={1.5} className="stroke-build-trigger" />
               ) : (
-                <Zap className="sh-6 w-6 fill-build-trigger stroke-1 stroke-build-trigger" />
+                <Zap className="sh-6 w-6 fill-build-trigger stroke-build-trigger stroke-1" />
               )}
             </div>
           </button>
diff --git a/src/frontend/src/components/chatComponent/chatMessage/index.tsx b/src/frontend/src/components/chatComponent/chatMessage/index.tsx
index 51840cf0c..53445e13f 100644
--- a/src/frontend/src/components/chatComponent/chatMessage/index.tsx
+++ b/src/frontend/src/components/chatComponent/chatMessage/index.tsx
@@ -13,14 +13,14 @@ 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-background rounded-xl overflow-hidden w-fit max-w-[280px] text-sm font-normal rounded-tl-none"
+            className=" relative inline-block w-fit max-w-[280px] overflow-hidden rounded-xl rounded-tl-none text-start text-sm font-normal text-background"
           >
             {hidden && chat.thought && chat.thought !== "" && (
               <div
                 onClick={() => setHidden((prev) => !prev)}
-                className="absolute top-2 right-2 cursor-pointer"
+                className="absolute right-2 top-2 cursor-pointer"
               >
-                <MessageCircle className="w-5 h-5 animate-bounce" />
+                <MessageCircle className="h-5 w-5 animate-bounce" />
               </div>
             )}
 
@@ -28,7 +28,7 @@ export default function ChatMessage({ chat }: { chat: ChatMessageType }) {
               <div
                 onClick={() => setHidden((prev) => !prev)}
                 style={{ backgroundColor: nodeColors["thought"] }}
-                className="text-start inline-block w-full pb-3 pt-3 px-5 cursor-pointer"
+                className="inline-block w-full cursor-pointer px-5 pb-3 pt-3 text-start"
                 dangerouslySetInnerHTML={{
                   __html: DOMPurify.sanitize(convert.toHtml(chat.thought)),
                 }}
@@ -36,7 +36,7 @@ export default function ChatMessage({ chat }: { chat: ChatMessageType }) {
             )}
             {chat.thought && chat.thought !== "" && !hidden && <br></br>}
             <div
-              className="w-full rounded-b-md px-4 pb-3 pt-3 pr-8"
+              className="w-full rounded-b-md px-4 pb-3 pr-8 pt-3"
               style={{ backgroundColor: nodeColors["chat"] }}
             >
               {chat.message}
@@ -45,7 +45,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 bg-input font-normal rounded-tr-none">
+          <div className="inline-block w-fit max-w-[280px] overflow-hidden rounded-xl rounded-tr-none bg-input p-3 px-5 text-start text-sm font-normal text-black">
             {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 1461250d2..67ec52b99 100644
--- a/src/frontend/src/components/chatComponent/chatTrigger/index.tsx
+++ b/src/frontend/src/components/chatComponent/chatTrigger/index.tsx
@@ -32,14 +32,14 @@ export default function ChatTrigger({ open, setOpen, isBuilt }) {
     >
       <div className="absolute bottom-4 right-3">
         <div
-          className="flex justify-center align-center py-1 px-3 w-12 h-12 rounded-full shadow-md shadow-round-btn-shadow hover:shadow-round-btn-shadow
-          bg-border cursor-pointer"
+          className="align-center shadow-round-btn-shadow hover:shadow-round-btn-shadow flex h-12 w-12 cursor-pointer justify-center rounded-full bg-border px-3
+          py-1 shadow-md"
           onClick={handleClick}
         >
           <button>
             <div className="flex gap-3">
               <MessagesSquare
-                className="pth-6 w-6 fill-chat-trigger stroke-1 stroke-chat-trigger"
+                className="pth-6 w-6 fill-chat-trigger stroke-chat-trigger stroke-1"
                 style={{ color: "white" }}
                 strokeWidth={1.5}
               />
diff --git a/src/frontend/src/components/codeAreaComponent/index.tsx b/src/frontend/src/components/codeAreaComponent/index.tsx
index bca0745ce..0365dc66e 100644
--- a/src/frontend/src/components/codeAreaComponent/index.tsx
+++ b/src/frontend/src/components/codeAreaComponent/index.tsx
@@ -30,10 +30,10 @@ export default function CodeAreaComponent({
   return (
     <div
       className={
-        disabled ? "pointer-events-none cursor-not-allowed w-full" : "w-full"
+        disabled ? "pointer-events-none w-full cursor-not-allowed" : "w-full"
       }
     >
-      <div className="w-full flex items-center">
+      <div className="flex w-full items-center">
         <span
           onClick={() => {
             openPopUp(
@@ -48,9 +48,9 @@ export default function CodeAreaComponent({
           }}
           className={
             editNode
-              ? "truncate cursor-pointer placeholder:text-center text-ring block w-full pt-0.5 pb-0.5 form-input rounded-md border-ring border shadow-sm text-sm bg-transparent sm:text-sm" +
+              ? "form-input block w-full cursor-pointer truncate rounded-md border border-ring bg-transparent pb-0.5 pt-0.5 text-sm text-ring shadow-sm placeholder:text-center sm:text-sm" +
                 INPUT_STYLE
-              : "truncate block w-full text-ring px-3 py-2 rounded-md border border-ring shadow-sm sm:text-sm placeholder:text-muted-foreground" +
+              : "block w-full truncate rounded-md border border-ring px-3 py-2 text-ring shadow-sm placeholder:text-muted-foreground sm:text-sm" +
                 INPUT_STYLE +
                 (disabled ? " bg-input" : "")
           }
@@ -71,7 +71,7 @@ export default function CodeAreaComponent({
           }}
         >
           {!editNode && (
-            <ExternalLink className="w-6 h-6 hover:text-ring  ml-3" />
+            <ExternalLink className="ml-3 h-6 w-6  hover:text-ring" />
           )}
         </button>
       </div>
diff --git a/src/frontend/src/components/dropdownComponent/index.tsx b/src/frontend/src/components/dropdownComponent/index.tsx
index 9e0a53df4..4e8c06781 100644
--- a/src/frontend/src/components/dropdownComponent/index.tsx
+++ b/src/frontend/src/components/dropdownComponent/index.tsx
@@ -40,13 +40,13 @@ export default function Dropdown({
               <Listbox.Button
                 className={
                   editNode
-                    ? "relative pr-8 placeholder:text-center block w-full pt-0.5 pb-0.5 form-input rounded-md shadow-sm sm:text-sm border" +
+                    ? "form-input relative block w-full rounded-md border pb-0.5 pr-8 pt-0.5 shadow-sm placeholder:text-center sm:text-sm" +
                       INPUT_STYLE
-                    : "placeholder:text-muted-foreground w-full py-2 pl-3 pr-10 text-left focus-visible:outline-none rounded-md shadow-sm sm:text-sm border" +
+                    : "w-full rounded-md border py-2 pl-3 pr-10 text-left shadow-sm placeholder:text-muted-foreground focus-visible:outline-none sm:text-sm" +
                       INPUT_STYLE
                 }
               >
-                <span className="block bg-background truncate w-full">
+                <span className="block w-full truncate bg-background">
                   {internalValue}
                 </span>
                 <span
@@ -71,9 +71,9 @@ export default function Dropdown({
                 <Listbox.Options
                   className={classNames(
                     editNode
-                      ? "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 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 ",
-                    apiModal ? "w-[250px] mb-2" : "absolute"
+                      ? "z-10 mt-1 max-h-60 w-[215px] 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"
+                      : "nowheel overflow-y z-10 mt-1 max-h-60 w-full 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 ",
+                    apiModal ? "mb-2 w-[250px]" : "absolute"
                   )}
                 >
                   {options.map((option, id) => (
diff --git a/src/frontend/src/components/floatComponent/index.tsx b/src/frontend/src/components/floatComponent/index.tsx
index 638ccfd2a..4b80a365f 100644
--- a/src/frontend/src/components/floatComponent/index.tsx
+++ b/src/frontend/src/components/floatComponent/index.tsx
@@ -58,9 +58,9 @@ export default function FloatComponent({
         value={myValue}
         className={
           editNode
-            ? "focus:placeholder-transparent text-center placeholder:text-center border block w-full pt-0.5 pb-0.5 form-input rounded-md border-border shadow-sm sm:text-sm placeholder:text-muted-foreground" +
+            ? "form-input block w-full rounded-md border border-border pb-0.5 pt-0.5 text-center shadow-sm placeholder:text-center placeholder:text-muted-foreground focus:placeholder-transparent sm:text-sm" +
               INPUT_STYLE
-            : "focus:placeholder-transparent block w-full form-input placeholder:text-muted-foreground bg-background rounded-md border-border shadow-sm ring-offset-input sm:text-sm" +
+            : "form-input block w-full rounded-md border-border bg-background shadow-sm ring-offset-input placeholder:text-muted-foreground focus:placeholder-transparent sm:text-sm" +
               INPUT_STYLE +
               (disabled ? " bg-input" : "")
         }
diff --git a/src/frontend/src/components/headerComponent/components/menuBar/index.tsx b/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
index d2b45c643..4109e318f 100644
--- a/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
+++ b/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
@@ -47,20 +47,20 @@ export const MenuBar = ({ flows, tabId }) => {
   let current_flow = flows.find((flow) => flow.id === tabId);
 
   return (
-    <div className="flex gap-2 items-center">
+    <div className="flex items-center gap-2">
       <Link to="/">
         <ChevronLeft className="w-4" />
       </Link>
-      <div className="flex items-center font-medium text-sm rounded-md py-1 px-1.5 gap-0.5">
+      <div className="flex items-center gap-0.5 rounded-md px-1.5 py-1 text-sm font-medium">
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
             <Button
-              className="gap-2 flex items-center max-w-[200px]"
+              className="flex max-w-[200px] items-center gap-2"
               variant="primary"
               size="sm"
             >
-              <div className="truncate flex-1">{current_flow.name}</div>
-              <ChevronDown className="w-4 h-4" />
+              <div className="flex-1 truncate">{current_flow.name}</div>
+              <ChevronDown className="h-4 w-4" />
             </Button>
           </DropdownMenuTrigger>
           <DropdownMenuContent className="w-44">
@@ -71,7 +71,7 @@ export const MenuBar = ({ flows, tabId }) => {
               }}
               className="cursor-pointer"
             >
-              <Plus className="w-4 h-4 mr-2" />
+              <Plus className="mr-2 h-4 w-4" />
               New
             </DropdownMenuItem>
             <DropdownMenuItem
@@ -80,7 +80,7 @@ export const MenuBar = ({ flows, tabId }) => {
               }}
               className="cursor-pointer"
             >
-              <Settings2 className="w-4 h-4 mr-2 " />
+              <Settings2 className="mr-2 h-4 w-4 " />
               Settings
             </DropdownMenuItem>
             <DropdownMenuItem
@@ -89,7 +89,7 @@ export const MenuBar = ({ flows, tabId }) => {
               }}
               className="cursor-pointer"
             >
-              <Undo className="w-4 h-4 mr-2 " />
+              <Undo className="mr-2 h-4 w-4 " />
               Undo
             </DropdownMenuItem>
             <DropdownMenuItem
@@ -98,7 +98,7 @@ export const MenuBar = ({ flows, tabId }) => {
               }}
               className="cursor-pointer"
             >
-              <Redo className="w-4 h-4 mr-2 " />
+              <Redo className="mr-2 h-4 w-4 " />
               Redo
             </DropdownMenuItem>
             <DropdownMenuSeparator />
diff --git a/src/frontend/src/components/headerComponent/index.tsx b/src/frontend/src/components/headerComponent/index.tsx
index add19c0bf..9ce87a43c 100644
--- a/src/frontend/src/components/headerComponent/index.tsx
+++ b/src/frontend/src/components/headerComponent/index.tsx
@@ -36,23 +36,23 @@ export default function Header() {
     fetchStars();
   }, []);
   return (
-    <div className="w-full h-12 flex justify-between items-center border-b bg-muted">
-      <div className="flex gap-2 justify-start items-center w-96">
+    <div className="flex h-12 w-full items-center justify-between border-b bg-muted">
+      <div className="flex w-96 items-center justify-start gap-2">
         <Link to="/">
-          <span className="text-2xl ml-4">⛓️</span>
+          <span className="ml-4 text-2xl">⛓️</span>
         </Link>
         {flows.findIndex((f) => tabId === f.id) !== -1 && tabId !== "" && (
           <MenuBar flows={flows} tabId={tabId} />
         )}
       </div>
-      <div className="flex gap-2 items-center">
+      <div className="flex items-center gap-2">
         <Link to="/">
           <Button
             className="gap-2"
             variant={location.pathname === "/" ? "primary" : "secondary"}
             size="sm"
           >
-            <Home className="w-4 h-4" />
+            <Home className="h-4 w-4" />
             <div className="flex-1">{USER_PROJECTS_HEADER}</div>
           </Button>
         </Link>
@@ -64,22 +64,22 @@ export default function Header() {
             }
             size="sm"
           >
-            <Users2 className="w-4 h-4" />
+            <Users2 className="h-4 w-4" />
             <div className="flex-1">Community Examples</div>
           </Button>
         </Link>
       </div>
-      <div className="flex justify-end px-2 w-96">
-        <div className="ml-auto mr-2 flex gap-5 items-center">
+      <div className="flex w-96 justify-end px-2">
+        <div className="ml-auto mr-2 flex items-center gap-5">
           <a
             href="https://github.com/logspace-ai/langflow"
             target="_blank"
             rel="noreferrer"
-            className="inline-flex shadow-sm items-center justify-center text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background text-muted-foreground  border border-input hover:bg-accent hover:text-accent-foreground h-9 px-3 pr-0 rounded-md"
+            className="inline-flex h-9 items-center justify-center rounded-md border border-input px-3 pr-0 text-sm font-medium text-muted-foreground shadow-sm ring-offset-background transition-colors  hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
           >
-            <FaGithub className="h-5 w-5 mr-2" />
+            <FaGithub className="mr-2 h-5 w-5" />
             Star
-            <div className="ml-2 flex text-sm bg-background rounded-md rounded-l-none border px-2 h-9 -mr-px items-center justify-center">
+            <div className="-mr-px ml-2 flex h-9 items-center justify-center rounded-md rounded-l-none border bg-background px-2 text-sm">
               {stars}
             </div>
           </a>
@@ -114,7 +114,7 @@ export default function Header() {
             )}
           </button>
           <button
-            className="text-muted-foreground hover:text-ring relative"
+            className="relative text-muted-foreground hover:text-ring"
             onClick={(event: React.MouseEvent<HTMLElement>) => {
               setNotificationCenter(false);
               const { top, left } = (
@@ -123,18 +123,18 @@ export default function Header() {
               openPopUp(
                 <>
                   <div
-                    className="z-10 absolute"
+                    className="absolute z-10"
                     style={{ top: top + 34, left: left - AlertWidth }}
                   >
                     <AlertDropdown />
                   </div>
-                  <div className="h-screen w-screen fixed top-0 left-0"></div>
+                  <div className="fixed left-0 top-0 h-screen w-screen"></div>
                 </>
               );
             }}
           >
             {notificationCenter && (
-              <div className="absolute w-1.5 h-1.5 rounded-full bg-destructive right-[3px]"></div>
+              <div className="absolute right-[3px] h-1.5 w-1.5 rounded-full bg-destructive"></div>
             )}
             <Bell className="h-5 w-5" aria-hidden="true" />
           </button>
diff --git a/src/frontend/src/components/inputComponent/index.tsx b/src/frontend/src/components/inputComponent/index.tsx
index f89448c3a..125f260ac 100644
--- a/src/frontend/src/components/inputComponent/index.tsx
+++ b/src/frontend/src/components/inputComponent/index.tsx
@@ -33,7 +33,7 @@ export default function InputComponent({
     <div
       className={
         disabled
-          ? "relative pointer-events-none cursor-not-allowed"
+          ? "pointer-events-none relative cursor-not-allowed"
           : "relative"
       }
     >
@@ -46,11 +46,11 @@ export default function InputComponent({
           if (disableCopyPaste) setDisableCopyPaste(false);
         }}
         className={classNames(
-          "block w-full pr-12 form-input rounded-md bg-background border-ring shadow-sm sm:text-sm focus:placeholder-transparent placeholder:text-muted-foreground",
+          "form-input block w-full rounded-md border-ring bg-background pr-12 shadow-sm placeholder:text-muted-foreground focus:placeholder-transparent sm:text-sm",
           disabled ? " bg-input" : "",
           password && !pwdVisible && myValue !== "" ? "password" : "",
           editNode
-            ? "border block w-full pt-0.5 pb-0.5 form-input rounded-md border-ring shadow-sm sm:text-sm text-center" +
+            ? "form-input block w-full rounded-md border border-ring pb-0.5 pt-0.5 text-center shadow-sm sm:text-sm" +
                 INPUT_STYLE
             : "ring-offset-input" + INPUT_STYLE,
           password && editNode ? "pr-8" : "pr-3"
@@ -65,7 +65,7 @@ export default function InputComponent({
         <button
           className={classNames(
             editNode
-              ? "absolute inset-y-0 right-0 pr-2 items-center text-muted-foreground"
+              ? "absolute inset-y-0 right-0 items-center pr-2 text-muted-foreground"
               : "absolute inset-y-0 right-0 items-center px-4 text-muted-foreground"
           )}
           onClick={() => {
@@ -82,8 +82,8 @@ export default function InputComponent({
                 stroke="currentColor"
                 className={classNames(
                   editNode
-                    ? "w-5 h-5 absolute bottom-0.5 right-2"
-                    : "w-5 h-5 absolute bottom-2 right-3"
+                    ? "absolute bottom-0.5 right-2 h-5 w-5"
+                    : "absolute bottom-2 right-3 h-5 w-5"
                 )}
               >
                 <path
@@ -101,8 +101,8 @@ export default function InputComponent({
                 stroke="currentColor"
                 className={classNames(
                   editNode
-                    ? "w-5 h-5 absolute bottom-0.5 right-2"
-                    : "w-5 h-5 absolute bottom-2 right-3"
+                    ? "absolute bottom-0.5 right-2 h-5 w-5"
+                    : "absolute bottom-2 right-3 h-5 w-5"
                 )}
               >
                 <path
diff --git a/src/frontend/src/components/inputFileComponent/index.tsx b/src/frontend/src/components/inputFileComponent/index.tsx
index d59184d25..9c0cf045a 100644
--- a/src/frontend/src/components/inputFileComponent/index.tsx
+++ b/src/frontend/src/components/inputFileComponent/index.tsx
@@ -95,17 +95,17 @@ export default function InputFileComponent({
   return (
     <div
       className={
-        disabled ? "pointer-events-none cursor-not-allowed w-full" : "w-full"
+        disabled ? "pointer-events-none w-full cursor-not-allowed" : "w-full"
       }
     >
-      <div className="w-full flex items-center">
+      <div className="flex w-full items-center">
         <span
           onClick={handleButtonClick}
           className={
             editNode
-              ? "truncate placeholder:text-center text-ring block w-full pt-0.5 pb-0.5 form-input   rounded-md border-ring shadow-sm sm:text-sm border" +
+              ? "form-input block w-full truncate rounded-md border border-ring pb-0.5   pt-0.5 text-ring shadow-sm placeholder:text-center sm:text-sm" +
                 INPUT_STYLE
-              : "truncate block w-full text-ring  px-3 py-2 rounded-md border border-ring shadow-sm sm:text-sm" +
+              : "block w-full truncate rounded-md  border border-ring px-3 py-2 text-ring shadow-sm sm:text-sm" +
                 INPUT_STYLE +
                 (disabled ? " bg-input" : "")
           }
@@ -114,10 +114,10 @@ export default function InputFileComponent({
         </span>
         <button onClick={handleButtonClick}>
           {!editNode && !loading && (
-            <FileSearch2 className="w-6 h-6 hover:text-ring ml-3" />
+            <FileSearch2 className="ml-3 h-6 w-6 hover:text-ring" />
           )}
           {!editNode && loading && (
-            <span className="loading loading-spinner loading-sm pl-3 h-8 pointer-events-none"></span>
+            <span className="loading loading-spinner loading-sm pointer-events-none h-8 pl-3"></span>
           )}
         </button>
       </div>
diff --git a/src/frontend/src/components/inputListComponent/index.tsx b/src/frontend/src/components/inputListComponent/index.tsx
index 210a844c9..db8731f35 100644
--- a/src/frontend/src/components/inputListComponent/index.tsx
+++ b/src/frontend/src/components/inputListComponent/index.tsx
@@ -36,15 +36,15 @@ export default function InputListComponent({
       }
     >
       {inputList.map((i, idx) => (
-        <div key={idx} className="w-full flex gap-3">
+        <div key={idx} className="flex w-full gap-3">
           <input
             type="text"
             value={i}
             className={
               editNode
-                ? "border-[1px]  truncate cursor-pointer text-center placeholder:text-center text-ring block w-full pt-0.5 pb-0.5 form-input rounded-md border-ring shadow-sm sm:text-sm" +
+                ? "form-input  block w-full cursor-pointer truncate rounded-md border-[1px] border-ring pb-0.5 pt-0.5 text-center text-ring shadow-sm placeholder:text-center sm:text-sm" +
                   INPUT_STYLE
-                : "block w-full form-input bg-background rounded-md border-ring shadow-sm focus:border-ring focus:ring-ring sm:text-sm" +
+                : "form-input block w-full rounded-md border-ring bg-background shadow-sm focus:border-ring focus:ring-ring sm:text-sm" +
                   (disabled ? " bg-input" : "") +
                   "focus:placeholder-transparent"
             }
@@ -70,7 +70,7 @@ export default function InputListComponent({
                 onChange(inputList);
               }}
             >
-              <Plus className={"w-4 h-4 hover:text-ring"} />
+              <Plus className={"h-4 w-4 hover:text-ring"} />
             </button>
           ) : (
             <button
@@ -84,7 +84,7 @@ export default function InputListComponent({
                 onChange(inputList);
               }}
             >
-              <X className="w-4 h-4 hover:text-status-red" />
+              <X className="h-4 w-4 hover:text-status-red" />
             </button>
           )}
         </div>
diff --git a/src/frontend/src/components/intComponent/index.tsx b/src/frontend/src/components/intComponent/index.tsx
index 7bd049c43..4d1a7a079 100644
--- a/src/frontend/src/components/intComponent/index.tsx
+++ b/src/frontend/src/components/intComponent/index.tsx
@@ -32,7 +32,7 @@ export default function IntComponent({
     <div
       className={
         "w-full " +
-        (disabled ? "pointer-events-none cursor-not-allowed w-full" : "w-full")
+        (disabled ? "pointer-events-none w-full cursor-not-allowed" : "w-full")
       }
     >
       <input
@@ -72,9 +72,9 @@ export default function IntComponent({
         value={myValue}
         className={
           editNode
-            ? "focus:placeholder-transparent text-center placeholder:text-center border block w-full pt-0.5 pb-0.5 form-input rounded-md shadow-sm sm:text-sm placeholder:text-muted-foreground" +
+            ? "form-input block w-full rounded-md border pb-0.5 pt-0.5 text-center shadow-sm placeholder:text-center placeholder:text-muted-foreground focus:placeholder-transparent sm:text-sm" +
               INPUT_STYLE
-            : "focus:placeholder-transparent block w-full form-input bg-background rounded-md shadow-sm ring-offset-background sm:text-sm placeholder:text-muted-foreground" +
+            : "form-input block w-full rounded-md bg-background shadow-sm ring-offset-background placeholder:text-muted-foreground focus:placeholder-transparent sm:text-sm" +
               INPUT_STYLE +
               (disabled ? " bg-input" : "")
         }
diff --git a/src/frontend/src/components/loadingComponent/index.tsx b/src/frontend/src/components/loadingComponent/index.tsx
index e23cfa042..31e78d474 100644
--- a/src/frontend/src/components/loadingComponent/index.tsx
+++ b/src/frontend/src/components/loadingComponent/index.tsx
@@ -4,10 +4,10 @@ type LoadingComponentProps = {
 
 export default function LoadingComponent({ remSize }: LoadingComponentProps) {
   return (
-    <div role="status" className="w-min m-auto">
+    <div role="status" className="m-auto w-min">
       <svg
         aria-hidden="true"
-        className={`w-${remSize} h-${remSize} mr-2 text-muted animate-spin  fill-almost-medium-blue`}
+        className={`w-${remSize} h-${remSize} mr-2 animate-spin fill-almost-medium-blue  text-muted`}
         viewBox="0 0 100 101"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
@@ -22,7 +22,7 @@ export default function LoadingComponent({ remSize }: LoadingComponentProps) {
         />
       </svg>
       <br></br>
-      <span className="animate-pulse text-almost-medium-blue text-lg">
+      <span className="animate-pulse text-lg text-almost-medium-blue">
         Loading...
       </span>
     </div>
diff --git a/src/frontend/src/components/promptComponent/index.tsx b/src/frontend/src/components/promptComponent/index.tsx
index dd45da5b7..370d3ca05 100644
--- a/src/frontend/src/components/promptComponent/index.tsx
+++ b/src/frontend/src/components/promptComponent/index.tsx
@@ -28,10 +28,10 @@ export default function PromptAreaComponent({
   return (
     <div
       className={
-        disabled ? "pointer-events-none cursor-not-allowed w-full" : " w-full"
+        disabled ? "pointer-events-none w-full cursor-not-allowed" : " w-full"
       }
     >
-      <div className="w-full flex items-center">
+      <div className="flex w-full items-center">
         <span
           onClick={() => {
             openPopUp(
@@ -49,9 +49,9 @@ export default function PromptAreaComponent({
           }}
           className={
             editNode
-              ? "cursor-pointer truncate placeholder:text-center text-ring border block w-full pt-0.5 pb-0.5 form-input   rounded-md border-ring shadow-sm sm:text-sm" +
+              ? "form-input block w-full cursor-pointer truncate rounded-md border border-ring pb-0.5 pt-0.5   text-ring shadow-sm placeholder:text-center sm:text-sm" +
                 INPUT_STYLE
-              : "truncate block w-full text-ring px-3 py-2 rounded-md border border-ring shadow-sm sm:text-sm" +
+              : "block w-full truncate rounded-md border border-ring px-3 py-2 text-ring shadow-sm sm:text-sm" +
                 (disabled ? " bg-input" : "")
           }
         >
@@ -73,7 +73,7 @@ export default function PromptAreaComponent({
             );
           }}
         >
-          {!editNode && <ExternalLink className="w-6 h-6 hover:text-ring " />}
+          {!editNode && <ExternalLink className="h-6 w-6 hover:text-ring " />}
         </button>
       </div>
     </div>
diff --git a/src/frontend/src/components/textAreaComponent/index.tsx b/src/frontend/src/components/textAreaComponent/index.tsx
index d6e1b1d74..d84e73a01 100644
--- a/src/frontend/src/components/textAreaComponent/index.tsx
+++ b/src/frontend/src/components/textAreaComponent/index.tsx
@@ -31,8 +31,8 @@ export default function TextAreaComponent({
       <div
         className={
           editNode
-            ? "w-full flex items-center"
-            : "w-full flex items-center gap-3"
+            ? "flex w-full items-center"
+            : "flex w-full items-center gap-3"
         }
       >
         <span
@@ -52,9 +52,9 @@ export default function TextAreaComponent({
           }}
           className={
             editNode
-              ? "truncate cursor-pointer placeholder:text-center text-ring border block w-full pt-0.5 pb-0.5 form-input   rounded-md border-ring bg-transparent shadow-sm sm:text-sm" +
+              ? "form-input block w-full cursor-pointer truncate rounded-md border border-ring bg-transparent pb-0.5   pt-0.5 text-ring shadow-sm placeholder:text-center sm:text-sm" +
                 INPUT_STYLE
-              : "truncate block w-full text-ring px-3 py-2 rounded-md border border-ring shadow-sm sm:text-sm" +
+              : "block w-full truncate rounded-md border border-ring px-3 py-2 text-ring shadow-sm sm:text-sm" +
                 (disabled ? " bg-input" : "")
           }
         >
@@ -76,7 +76,7 @@ export default function TextAreaComponent({
             );
           }}
         >
-          {!editNode && <ExternalLink className="w-6 h-6 hover:text-ring " />}
+          {!editNode && <ExternalLink className="h-6 w-6 hover:text-ring " />}
         </button>
       </div>
     </div>
diff --git a/src/frontend/src/components/toggleComponent/index.tsx b/src/frontend/src/components/toggleComponent/index.tsx
index 90ae3ae72..760d8957b 100644
--- a/src/frontend/src/components/toggleComponent/index.tsx
+++ b/src/frontend/src/components/toggleComponent/index.tsx
@@ -36,8 +36,8 @@ export default function ToggleComponent({
           <span
             className={classNames(
               enabled
-                ? "opacity-0 ease-out duration-100"
-                : "opacity-100 ease-in duration-200",
+                ? "opacity-0 duration-100 ease-out"
+                : "opacity-100 duration-200 ease-in",
               "absolute inset-0 flex h-full w-full items-center justify-center transition-opacity"
             )}
             aria-hidden="true"
@@ -45,8 +45,8 @@ export default function ToggleComponent({
           <span
             className={classNames(
               enabled
-                ? "opacity-100 ease-in duration-200"
-                : "opacity-0 ease-out duration-100",
+                ? "opacity-100 duration-200 ease-in"
+                : "opacity-0 duration-100 ease-out",
               "absolute inset-0 flex h-full w-full items-center justify-center transition-opacity"
             )}
             aria-hidden="true"
diff --git a/src/frontend/src/components/ui/card.tsx b/src/frontend/src/components/ui/card.tsx
index 84fba4ede..0c5863871 100644
--- a/src/frontend/src/components/ui/card.tsx
+++ b/src/frontend/src/components/ui/card.tsx
@@ -8,7 +8,7 @@ const Card = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      "rounded-lg flex flex-col justify-between border bg-card text-card-foreground shadow-sm hover:shadow-lg transition-all",
+      "flex flex-col justify-between rounded-lg border bg-card text-card-foreground shadow-sm transition-all hover:shadow-lg",
       className
     )}
     {...props}
diff --git a/src/frontend/src/components/ui/dropdown-menu.tsx b/src/frontend/src/components/ui/dropdown-menu.tsx
index d13ee400e..ee62abc4a 100644
--- a/src/frontend/src/components/ui/dropdown-menu.tsx
+++ b/src/frontend/src/components/ui/dropdown-menu.tsx
@@ -146,7 +146,7 @@ const DropdownMenuLabel = React.forwardRef<
   <DropdownMenuPrimitive.Label
     ref={ref}
     className={cn(
-      "px-2 pl-2 py-1.5 text-sm font-semibold",
+      "px-2 py-1.5 pl-2 text-sm font-semibold",
       inset && "pl-8",
       className
     )}
diff --git a/src/frontend/src/components/ui/rename-label.tsx b/src/frontend/src/components/ui/rename-label.tsx
index dc10fd466..e703020f5 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-ring rounded-md",
+            "rounded-md bg-transparent px-2 outline-ring hover:outline focus:border-none focus:outline active:outline",
             props.className
           )}
           onBlur={() => {
@@ -74,7 +74,7 @@ export default function RenameLabel(props) {
       ) : (
         <div className="flex items-center gap-2">
           <span
-            className={cn("px-2 text-left truncate", props.className)}
+            className={cn("truncate px-2 text-left", props.className)}
             onDoubleClick={() => {
               setIsRename(true);
               setMyValue(props.value);
diff --git a/src/frontend/src/components/ui/tabs.tsx b/src/frontend/src/components/ui/tabs.tsx
index f58a5b68f..39864abed 100644
--- a/src/frontend/src/components/ui/tabs.tsx
+++ b/src/frontend/src/components/ui/tabs.tsx
@@ -28,7 +28,7 @@ const TabsTrigger = React.forwardRef<
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm data-[state=inactive]:hover:bg-secondary/80 data-[state=active]:border data-[state=inactive]:border data-[state=inactive]:border-muted",
+      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:border data-[state=inactive]:border data-[state=inactive]:border-muted data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm data-[state=inactive]:hover:bg-secondary/80",
       className
     )}
     {...props}
diff --git a/src/frontend/src/contexts/tabsContext.tsx b/src/frontend/src/contexts/tabsContext.tsx
index a1ad15335..3455283d6 100644
--- a/src/frontend/src/contexts/tabsContext.tsx
+++ b/src/frontend/src/contexts/tabsContext.tsx
@@ -275,10 +275,14 @@ export function TabsProvider({ children }: { children: ReactNode }) {
   /**
    * Downloads the current flow as a JSON file
    */
-  function downloadFlow(flow: FlowType,flowName:string,flowDescription?:string) {
+  function downloadFlow(
+    flow: FlowType,
+    flowName: string,
+    flowDescription?: string
+  ) {
     // create a data URI with the current flow data
     const jsonString = `data:text/json;chatset=utf-8,${encodeURIComponent(
-      JSON.stringify({...flow, name:flowName, description:flowDescription})
+      JSON.stringify({ ...flow, name: flowName, description: flowDescription })
     )}`;
 
     // create a link element and set its properties
diff --git a/src/frontend/src/modals/ApiModal/index.tsx b/src/frontend/src/modals/ApiModal/index.tsx
index c9f8906f9..664e99e05 100644
--- a/src/frontend/src/modals/ApiModal/index.tsx
+++ b/src/frontend/src/modals/ApiModal/index.tsx
@@ -262,18 +262,18 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
   return (
     <Dialog open={true} onOpenChange={setModalOpen}>
       <DialogTrigger></DialogTrigger>
-      <DialogContent className="lg:max-w-[850px] sm:max-w-[700px] h-[580px]">
+      <DialogContent className="h-[580px] sm:max-w-[700px] lg:max-w-[850px]">
         <DialogHeader>
           <DialogTitle className="flex items-center">
             <span className="pr-2">Code</span>
-            <Code2 className="h-6 w-6 text-primary pl-1 " aria-hidden="true" />
+            <Code2 className="h-6 w-6 pl-1 text-primary " aria-hidden="true" />
           </DialogTitle>
           <DialogDescription>{EXPORT_CODE_DIALOG}</DialogDescription>
         </DialogHeader>
 
         <Tabs
           value={activeTab}
-          className="w-full h-full overflow-hidden text-center bg-muted rounded-md border"
+          className="h-full w-full overflow-hidden rounded-md border bg-muted text-center"
           onValueChange={(value) => {
             setActiveTab(value);
             if (value === "3") {
@@ -291,7 +291,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
             </TabsList>
             <div className="float-right">
               <button
-                className="flex gap-1.5 items-center rounded bg-none p-1 text-xs text-ring "
+                className="flex items-center gap-1.5 rounded bg-none p-1 text-xs text-ring "
                 onClick={copyToClipboard}
               >
                 {isCopied ? <Check size={18} /> : <Clipboard size={15} />}
@@ -303,7 +303,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
           {tabs.map((tab, index) => (
             <TabsContent
               value={index.toString()}
-              className="overflow-hidden w-full h-full px-4 pb-4 -mt-1"
+              className="-mt-1 h-full w-full overflow-hidden px-4 pb-4"
               key={index} // Remember to add a unique key prop
             >
               {index < 3 ? (
@@ -316,10 +316,10 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
                 </SyntaxHighlighter>
               ) : index === 3 ? (
                 <>
-                  <div className="flex w-full h-[400px] mt-2">
+                  <div className="mt-2 flex h-[400px] w-full">
                     <div
                       className={classNames(
-                        "w-full rounded-lg  bg-muted border-[1px] border-gray-200",
+                        "w-full rounded-lg  border-[1px] border-gray-200 bg-muted",
                         1 == 1
                           ? "overflow-scroll overflow-x-hidden custom-scroll"
                           : "overflow-hidden"
@@ -332,14 +332,14 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
                               trigger={t["data"]["id"]}
                               open={openAccordion}
                             >
-                              <div className="flex flex-col gap-5 h-fit">
+                              <div className="flex h-fit flex-col gap-5">
                                 <Table className="table-fixed bg-muted outline-1">
-                                  <TableHeader className="border-gray-200 text-gray-500 text-xs font-medium h-10">
+                                  <TableHeader className="h-10 border-gray-200 text-xs font-medium text-gray-500">
                                     <TableRow className="dark:border-b-muted">
                                       <TableHead className="h-7 text-center">
                                         PARAM
                                       </TableHead>
-                                      <TableHead className="p-0 h-7 text-center">
+                                      <TableHead className="h-7 p-0 text-center">
                                         VALUE
                                       </TableHead>
                                     </TableRow>
@@ -373,11 +373,11 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
                                             key={i}
                                             className="h-10 dark:border-b-muted"
                                           >
-                                            <TableCell className="p-0 text-center text-gray-900 text-sm">
+                                            <TableCell className="p-0 text-center text-sm text-gray-900">
                                               {n}
                                             </TableCell>
-                                            <TableCell className="p-0 text-center text-gray-900 text-xs dark:text-gray-300">
-                                              <div className="w-[250px] m-auto">
+                                            <TableCell className="p-0 text-center text-xs text-gray-900 dark:text-gray-300">
+                                              <div className="m-auto w-[250px]">
                                                 {t.data.node.template[n]
                                                   .type === "str" &&
                                                 !t.data.node.template[n]
diff --git a/src/frontend/src/modals/EditNodeModal/index.tsx b/src/frontend/src/modals/EditNodeModal/index.tsx
index 997316dc4..2cada903b 100644
--- a/src/frontend/src/modals/EditNodeModal/index.tsx
+++ b/src/frontend/src/modals/EditNodeModal/index.tsx
@@ -90,7 +90,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
           <DialogDescription>
             {data.node?.description}
             <div className="flex pt-4">
-              <Variable className="w-5 h-5 pe-1 text-muted-foreground stroke-2 "></Variable>
+              <Variable className="h-5 w-5 stroke-2 pe-1 text-muted-foreground "></Variable>
               <span className="text-sm font-semibold text-primary ">
                 Parameters
               </span>
@@ -98,25 +98,25 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
           </DialogDescription>
         </DialogHeader>
 
-        <div className="flex w-full max-h-[350px] h-fit">
+        <div className="flex h-fit max-h-[350px] w-full">
           <div
             className={classNames(
-              "w-full rounded-lg bg-background border-[1px] border-input",
+              "w-full rounded-lg border-[1px] border-input bg-background",
               nodeLength > limitScrollFieldsModal
                 ? "overflow-scroll overflow-x-hidden custom-scroll"
                 : "overflow-hidden"
             )}
           >
             {nodeLength > 0 && (
-              <div className="flex flex-col gap-5 h-fit">
+              <div className="flex h-fit flex-col gap-5">
                 <Table className="table-fixed bg-muted outline-1">
-                  <TableHeader className="border-input text-ring text-xs font-medium h-10">
+                  <TableHeader className="h-10 border-input text-xs font-medium text-ring">
                     <TableRow className="">
                       <TableHead className="h-7 text-center">PARAM</TableHead>
-                      <TableHead className="p-0 h-7 text-center">
+                      <TableHead className="h-7 p-0 text-center">
                         VALUE
                       </TableHead>
-                      <TableHead className="text-center h-7">SHOW</TableHead>
+                      <TableHead className="h-7 text-center">SHOW</TableHead>
                     </TableRow>
                   </TableHeader>
                   <TableBody className="p-0">
@@ -135,12 +135,12 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
                       )
                       .map((n, i) => (
                         <TableRow key={i} className="h-10 ">
-                          <TableCell className="p-0 text-center text-foreground  text-sm">
+                          <TableCell className="p-0 text-center text-sm  text-foreground">
                             {data.node.template[n].name
                               ? data.node.template[n].name
                               : data.node.template[n].display_name}
                           </TableCell>
-                          <TableCell className="p-0 text-center text-foreground text-xs w-[300px] ">
+                          <TableCell className="w-[300px] p-0 text-center text-xs text-foreground ">
                             {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 eac75a858..e8690fe4b 100644
--- a/src/frontend/src/modals/NodeModal/components/ModalField/index.tsx
+++ b/src/frontend/src/modals/NodeModal/components/ModalField/index.tsx
@@ -36,7 +36,7 @@ export default function ModalField({
   return (
     <div
       className={classNames(
-        "flex flex-row w-full items-center justify-between",
+        "flex w-full flex-row items-center justify-between",
         display ? "" : "hidden",
         Object.keys(data.node.template).filter(
           (t) =>
diff --git a/src/frontend/src/modals/NodeModal/index.tsx b/src/frontend/src/modals/NodeModal/index.tsx
index f79015370..364712078 100644
--- a/src/frontend/src/modals/NodeModal/index.tsx
+++ b/src/frontend/src/modals/NodeModal/index.tsx
@@ -59,8 +59,8 @@ export default function NodeModal({ data }: { data: NodeDataType }) {
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative flex flex-col justify-between transform h-[600px] overflow-hidden rounded-lg bg-background 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">
+              <Dialog.Panel className="relative flex h-[600px] w-[700px] transform flex-col justify-between overflow-hidden rounded-lg bg-background text-left shadow-xl transition-all sm:my-8">
+                <div className=" absolute right-0 top-0 z-50 hidden pr-4 pt-4 sm:block">
                   <button
                     type="button"
                     className="rounded-md text-ring hover:text-ring"
@@ -72,11 +72,11 @@ export default function NodeModal({ data }: { data: NodeDataType }) {
                     <X className="h-6 w-6" aria-hidden="true" />
                   </button>
                 </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="flex h-full w-full flex-col items-center justify-center">
+                  <div className="z-10 flex w-full justify-center pb-4 shadow-sm">
                     <Icon
                       strokeWidth={1.5}
-                      className="w-10 mt-4 h-10 p-1 rounded"
+                      className="mt-4 h-10 w-10 rounded p-1"
                       style={{
                         color:
                           nodeColors[types[data.type]] ?? nodeColors.unknown,
@@ -91,11 +91,11 @@ export default function NodeModal({ data }: { data: NodeDataType }) {
                       </Dialog.Title>
                     </div>
                   </div>
-                  <div className="h-full w-full bg-input p-4 gap-4 flex flex-row justify-center items-center">
-                    <div className="flex w-full h-[445px]">
+                  <div className="flex h-full w-full flex-row items-center justify-center gap-4 bg-input p-4">
+                    <div className="flex h-[445px] w-full">
                       <div
                         className={classNames(
-                          "px-4 sm:p-4 w-full rounded-lg bg-background shadow",
+                          "w-full rounded-lg bg-background px-4 shadow sm:p-4",
                           Object.keys(data.node.template).filter(
                             (t) =>
                               t.charAt(0) !== "_" &&
@@ -106,7 +106,7 @@ export default function NodeModal({ data }: { data: NodeDataType }) {
                             : "overflow-hidden"
                         )}
                       >
-                        <div className="flex flex-col h-full gap-5">
+                        <div className="flex h-full flex-col gap-5">
                           {Object.keys(data.node.template)
                             .filter(
                               (t) =>
@@ -144,7 +144,7 @@ export default function NodeModal({ data }: { data: NodeDataType }) {
                       </div>
                     </div>
                   </div>
-                  <div className="bg-input w-full pb-3 flex flex-row-reverse px-4">
+                  <div className="flex w-full flex-row-reverse bg-input px-4 pb-3">
                     <button
                       type="button"
                       className="inline-flex w-full justify-center rounded-md border border-transparent bg-status-red px-4 py-2 text-base font-medium text-background shadow-sm hover:bg-ring focus:outline-none focus:ring-1 focus:ring-ring focus:ring-offset-1 sm:ml-3 sm:w-auto sm:text-sm"
diff --git a/src/frontend/src/modals/chatModal/chatInput/index.tsx b/src/frontend/src/modals/chatModal/chatInput/index.tsx
index dfde0e1ac..6dbf48fdd 100644
--- a/src/frontend/src/modals/chatModal/chatInput/index.tsx
+++ b/src/frontend/src/modals/chatModal/chatInput/index.tsx
@@ -53,7 +53,7 @@ export default function ChatInput({
           lockChat
             ? " bg-input text-foreground "
             : "  bg-background text-foreground ",
-          "form-input block w-full custom-scroll rounded-md border-ring  pr-10 sm:text-sm" +
+          "form-input block w-full rounded-md border-ring pr-10  custom-scroll sm:text-sm" +
             INPUT_STYLE
         )}
         placeholder={"Send a message..."}
@@ -62,7 +62,7 @@ export default function ChatInput({
         <button disabled={lockChat} onClick={() => sendMessage()}>
           {lockChat ? (
             <Lock
-              className="h-5 w-5 text-ring   animate-pulse"
+              className="h-5 w-5 animate-pulse   text-ring"
               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 9799d8ba0..09cdda29b 100644
--- a/src/frontend/src/modals/chatModal/chatMessage/codeBlock/index.tsx
+++ b/src/frontend/src/modals/chatModal/chatMessage/codeBlock/index.tsx
@@ -48,12 +48,12 @@ 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">
+      <div className="flex items-center justify-between px-4 py-1.5">
         <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-background"
+            className="flex items-center gap-1.5 rounded bg-none p-1 text-xs text-background"
             onClick={copyToClipboard}
           >
             {isCopied ? <IconCheck size={18} /> : <IconClipboard size={18} />}
diff --git a/src/frontend/src/modals/chatModal/chatMessage/index.tsx b/src/frontend/src/modals/chatModal/chatMessage/index.tsx
index a7e83565e..b67556d04 100644
--- a/src/frontend/src/modals/chatModal/chatMessage/index.tsx
+++ b/src/frontend/src/modals/chatModal/chatMessage/index.tsx
@@ -31,58 +31,58 @@ export default function ChatMessage({
   return (
     <div
       className={classNames(
-        "w-full py-2 pl-2 flex",
+        "flex w-full py-2 pl-2",
         chat.isSend ? "bg-background " : "bg-input"
       )}
     >
       <div
         className={classNames(
-          "rounded-full overflow-hidden w-8 h-8 flex items-center my-3 justify-center"
+          "my-3 flex h-8 w-8 items-center justify-center overflow-hidden rounded-full"
         )}
       >
         {!chat.isSend && (
-          <div className="relative w-8 h-8">
+          <div className="relative h-8 w-8">
             <img
               className={
-                "absolute transition-opacity duration-500 scale-150 " +
+                "absolute scale-150 transition-opacity duration-500 " +
                 (lockChat ? "opacity-100" : "opacity-0")
               }
               src={lastMessage ? AiIcon : AiIconStill}
             />
             <img
               className={
-                "absolute transition-opacity duration-500 scale-150 " +
+                "absolute scale-150 transition-opacity duration-500 " +
                 (lockChat ? "opacity-0" : "opacity-100")
               }
               src={AiIconStill}
             />
           </div>
         )}
-        {chat.isSend && <User2 className="w-6 h-6 -mb-1 text-primary " />}
+        {chat.isSend && <User2 className="-mb-1 h-6 w-6 text-primary " />}
       </div>
       {!chat.isSend ? (
-        <div className="w-full text-start flex items-center">
-          <div className="w-full relative text-start inline-block text-muted-foreground  text-sm font-normal">
+        <div className="flex w-full items-center text-start">
+          <div className="relative inline-block w-full text-start text-sm  font-normal text-muted-foreground">
             {hidden && chat.thought && chat.thought !== "" && (
               <div
                 onClick={() => setHidden((prev) => !prev)}
-                className="absolute -top-1 -left-2 cursor-pointer"
+                className="absolute -left-2 -top-1 cursor-pointer"
               >
-                <MessageCircle className="w-5 h-5 animate-bounce " />
+                <MessageCircle className="h-5 w-5 animate-bounce " />
               </div>
             )}
             {chat.thought && chat.thought !== "" && !hidden && (
               <div
                 onClick={() => setHidden((prev) => !prev)}
-                className=" text-start inline-block rounded-md text-muted-foreground  h-full border border-ring
-								bg-muted w-[95%] pb-3 pt-3 px-2 ml-3 cursor-pointer scrollbar-hide overflow-scroll"
+                className=" ml-3 inline-block h-full w-[95%]  cursor-pointer overflow-scroll rounded-md
+								border border-ring bg-muted px-2 pb-3 pt-3 text-start text-muted-foreground scrollbar-hide"
                 dangerouslySetInnerHTML={{
                   __html: DOMPurify.sanitize(convert.toHtml(chat.thought)),
                 }}
               ></div>
             )}
             {chat.thought && chat.thought !== "" && !hidden && <br></br>}
-            <div className="w-full px-4 pb-3 pt-3 pr-8">
+            <div className="w-full px-4 pb-3 pr-8 pt-3">
               <div className="w-full">
                 <div className="w-full">
                   <ReactMarkdown
@@ -94,7 +94,7 @@ export default function ChatMessage({
                         if (children.length) {
                           if (children[0] == "▍") {
                             return (
-                              <span className="animate-pulse cursor-default mt-1">
+                              <span className="mt-1 animate-pulse cursor-default">
                                 ▍
                               </span>
                             );
@@ -146,8 +146,8 @@ export default function ChatMessage({
           </div>
         </div>
       ) : (
-        <div className="w-full flex items-center">
-          <div className="text-start inline-block px-3 text-muted-foreground ">
+        <div className="flex w-full items-center">
+          <div className="inline-block px-3 text-start text-muted-foreground ">
             {message.split("\n").map((line, index) => (
               <span key={index} className="text-muted-foreground ">
                 {line}
diff --git a/src/frontend/src/modals/chatModal/fileComponent/index.tsx b/src/frontend/src/modals/chatModal/fileComponent/index.tsx
index 383807c06..61449330a 100644
--- a/src/frontend/src/modals/chatModal/fileComponent/index.tsx
+++ b/src/frontend/src/modals/chatModal/fileComponent/index.tsx
@@ -26,21 +26,21 @@ export default function FileCard({ fileName, content, fileType }) {
   if (fileType === "image") {
     return (
       <div
-        className="relative w-1/4 h-1/4"
+        className="relative h-1/4 w-1/4"
         onMouseEnter={handleMouseEnter}
         onMouseLeave={handleMouseLeave}
       >
         <img
           src={`data:image/png;base64,${content}`}
           alt="generated image"
-          className="rounded-lg  w-full h-full"
+          className="h-full  w-full rounded-lg"
         />
         {isHovered && (
           <div
-            className={`absolute top-0 right-0 bg-muted text-foreground rounded-bl-lg px-1 text-sm font-bold `}
+            className={`absolute right-0 top-0 rounded-bl-lg bg-muted px-1 text-sm font-bold text-foreground `}
           >
-            <button className="text-ring py-1 px-2 " onClick={handleDownload}>
-              <DownloadCloud className="hover:scale-110 w-5 h-5 text-current" />
+            <button className="px-2 py-1 text-ring " onClick={handleDownload}>
+              <DownloadCloud className="h-5 w-5 text-current hover:scale-110" />
             </button>
           </div>
         )}
@@ -51,25 +51,25 @@ export default function FileCard({ fileName, content, fileType }) {
   return (
     <button
       onClick={handleDownload}
-      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"
+      className="flex w-1/2 items-center justify-between rounded border border-ring bg-muted px-2 py-2 text-foreground shadow hover:drop-shadow-lg"
     >
-      <div className="flex gap-2 text-current items-center w-full mr-2">
+      <div className="mr-2 flex w-full items-center gap-2 text-current">
         {" "}
         {fileType === "image" ? (
           <img
             src={`data:image/png;base64,${content}`}
             alt=""
-            className="w-8 h-8"
+            className="h-8 w-8"
           />
         ) : (
-          <File className="w-8 h-8" />
+          <File className="h-8 w-8" />
         )}
         <div className="flex flex-col items-start">
           {" "}
           <div className="truncate text-sm text-current">{fileName}</div>
           <div className="truncate text-xs  text-ring">{fileType}</div>
         </div>
-        <DownloadCloud className="w-6 h-6 text-current ml-auto" />
+        <DownloadCloud className="ml-auto h-6 w-6 text-current" />
       </div>
     </button>
   );
diff --git a/src/frontend/src/modals/chatModal/index.tsx b/src/frontend/src/modals/chatModal/index.tsx
index 8fbbadca5..010660adc 100644
--- a/src/frontend/src/modals/chatModal/index.tsx
+++ b/src/frontend/src/modals/chatModal/index.tsx
@@ -205,25 +205,27 @@ export default function ChatModal({
         handleOnClose(event);
       };
       newWs.onerror = (ev) => {
-        getHealth().then((res) => {
-          if (res.status === 200) {
-            connectWS();
-          }
-        }).catch((err) => {
-          setErrorData({
-            // message when the backend failed
-            title: "The backend is not responding. Please try again later.",
-            // possible solution list
-            list: [
-              "Check your internet connection.",
-              "Check if the backend is running."
-            ],
+        getHealth()
+          .then((res) => {
+            if (res.status === 200) {
+              connectWS();
+            }
+          })
+          .catch((err) => {
+            setErrorData({
+              // message when the backend failed
+              title: "The backend is not responding. Please try again later.",
+              // possible solution list
+              list: [
+                "Check your internet connection.",
+                "Check if the backend is running.",
+              ],
+            });
           });
-        })
       };
       ws.current = newWs;
     } catch (error) {
-        connectWS();
+      connectWS();
       console.log(error);
     }
   }
@@ -331,7 +333,7 @@ export default function ChatModal({
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-black backdrop-blur-sm   bg-opacity-80 transition-opacity" />
+          <div className="fixed inset-0 bg-black bg-opacity-80   backdrop-blur-sm transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-10 overflow-y-auto">
@@ -345,24 +347,24 @@ export default function ChatModal({
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className=" drop-shadow-2xl relative flex flex-col justify-between transform h-[95%] overflow-hidden rounded-lg bg-background text-left shadow-xl transition-all w-[690px]">
+              <Dialog.Panel className=" relative flex h-[95%] w-[690px] transform flex-col justify-between overflow-hidden rounded-lg bg-background text-left shadow-xl drop-shadow-2xl transition-all">
                 <div className="relative w-full p-4">
                   <button
                     onClick={() => clearChat()}
-                    className="absolute top-2 right-10 hover:text-status-red text-muted-foreground z-30"
+                    className="absolute right-10 top-2 z-30 text-muted-foreground hover:text-status-red"
                   >
-                    <Eraser className="w-4 h-4" />
+                    <Eraser className="h-4 w-4" />
                   </button>
                   <button
                     onClick={() => setModalOpen(false)}
-                    className="absolute top-1.5 right-2 hover:text-status-red text-muted-foreground z-30"
+                    className="absolute right-2 top-1.5 z-30 text-muted-foreground hover:text-status-red"
                   >
-                    <X className="w-5 h-5" />
+                    <X className="h-5 w-5" />
                   </button>
                 </div>
                 <div
                   ref={messagesRef}
-                  className="w-full h-full bg-background border-t  flex-col flex items-center overflow-scroll scrollbar-hide"
+                  className="flex h-full w-full flex-col  items-center overflow-scroll border-t bg-background scrollbar-hide"
                 >
                   {chatHistory.length > 0 ? (
                     chatHistory.map((c, i) => (
@@ -374,19 +376,19 @@ export default function ChatModal({
                       />
                     ))
                   ) : (
-                    <div className="flex flex-col h-full text-center justify-center w-full items-center align-middle">
+                    <div className="flex h-full w-full flex-col items-center justify-center text-center align-middle">
                       <span>
                         👋{" "}
-                        <span className="text-muted-foreground  text-lg">
+                        <span className="text-lg  text-muted-foreground">
                           LangFlow Chat
                         </span>
                       </span>
                       <br />
-                      <div className="bg-muted rounded-md w-2/4 px-6 py-8 border border-input">
+                      <div className="w-2/4 rounded-md border border-input bg-muted px-6 py-8">
                         <span className="text-base text-ring">
                           Start a conversation and click the agent’s thoughts{" "}
                           <span>
-                            <MessagesSquare className="w-5 h-5 inline animate-bounce mx-1 " />
+                            <MessagesSquare className="mx-1 inline h-5 w-5 animate-bounce " />
                           </span>{" "}
                           to inspect the chaining process.
                         </span>
@@ -395,8 +397,8 @@ export default function ChatModal({
                   )}
                   <div ref={ref}></div>
                 </div>
-                <div className="w-full bg-background border-t  flex-col flex items-center justify-between p-3">
-                  <div className="relative w-full  mt-1 rounded-md shadow-sm">
+                <div className="flex w-full flex-col  items-center justify-between border-t bg-background p-3">
+                  <div className="relative mt-1  w-full rounded-md shadow-sm">
                     <ChatInput
                       chatValue={chatValue}
                       lockChat={lockChat}
diff --git a/src/frontend/src/modals/codeAreaModal/index.tsx b/src/frontend/src/modals/codeAreaModal/index.tsx
index af5cab561..2121da963 100644
--- a/src/frontend/src/modals/codeAreaModal/index.tsx
+++ b/src/frontend/src/modals/codeAreaModal/index.tsx
@@ -48,19 +48,19 @@ export default function CodeAreaModal({
   return (
     <Dialog open={true} onOpenChange={setModalOpen}>
       <DialogTrigger></DialogTrigger>
-      <DialogContent className="lg:max-w-[700px] h-[500px]">
+      <DialogContent className="h-[500px] lg:max-w-[700px]">
         <DialogHeader>
           <DialogTitle className="flex items-center">
             <span className="pr-2">Edit Code</span>
             <TerminalSquare
-              className="h-6 w-6 text-primary pl-1 "
+              className="h-6 w-6 pl-1 text-primary "
               aria-hidden="true"
             />
           </DialogTitle>
           <DialogDescription>{CODE_PROMPT_DIALOG_SUBTITLE}</DialogDescription>
         </DialogHeader>
 
-        <div className="flex h-full w-full mt-2">
+        <div className="mt-2 flex h-full w-full">
           <AceEditor
             value={code}
             mode="python"
@@ -74,7 +74,7 @@ export default function CodeAreaModal({
             onChange={(value) => {
               setCode(value);
             }}
-            className="w-full rounded-lg h-[300px] custom-scroll border-[1px] border-ring "
+            className="h-[300px] w-full rounded-lg border-[1px] border-ring custom-scroll "
           />
         </div>
 
diff --git a/src/frontend/src/modals/exportModal/index.tsx b/src/frontend/src/modals/exportModal/index.tsx
index 638807350..ab65129ec 100644
--- a/src/frontend/src/modals/exportModal/index.tsx
+++ b/src/frontend/src/modals/exportModal/index.tsx
@@ -23,7 +23,8 @@ export default function ExportModal() {
   const { closePopUp } = useContext(PopUpContext);
   const ref = useRef();
   const { setErrorData } = useContext(alertContext);
-  const { flows, tabId, updateFlow, downloadFlow,saveFlow } = useContext(TabsContext);
+  const { flows, tabId, updateFlow, downloadFlow, saveFlow } =
+    useContext(TabsContext);
   const [isMaxLength, setIsMaxLength] = useState(false);
   function setModalOpen(x: boolean) {
     setOpen(x);
@@ -41,12 +42,12 @@ export default function ExportModal() {
   return (
     <Dialog open={true} onOpenChange={setModalOpen}>
       <DialogTrigger asChild></DialogTrigger>
-      <DialogContent className="lg:max-w-[600px] h-[420px] ">
+      <DialogContent className="h-[420px] lg:max-w-[600px] ">
         <DialogHeader>
           <DialogTitle className="flex items-center">
             <span className="pr-2">Export</span>
             <Download
-              className="h-6 w-6 text-foreground pl-1"
+              className="h-6 w-6 pl-1 text-foreground"
               aria-hidden="true"
             />
           </DialogTitle>
@@ -80,9 +81,18 @@ export default function ExportModal() {
         <DialogFooter>
           <Button
             onClick={() => {
-              if (checked) downloadFlow(flows.find((f) => f.id === tabId),name,description);
+              if (checked)
+                downloadFlow(
+                  flows.find((f) => f.id === tabId),
+                  name,
+                  description
+                );
               else
-                downloadFlow(removeApiKeys(flows.find((f) => f.id === tabId)),name,description);
+                downloadFlow(
+                  removeApiKeys(flows.find((f) => f.id === tabId)),
+                  name,
+                  description
+                );
 
               closePopUp();
             }}
diff --git a/src/frontend/src/modals/flowSettingsModal/index.tsx b/src/frontend/src/modals/flowSettingsModal/index.tsx
index a7136edba..ce9e474b8 100644
--- a/src/frontend/src/modals/flowSettingsModal/index.tsx
+++ b/src/frontend/src/modals/flowSettingsModal/index.tsx
@@ -48,11 +48,11 @@ export default function FlowSettingsModal() {
   return (
     <Dialog open={true} onOpenChange={setModalOpen}>
       <DialogTrigger asChild></DialogTrigger>
-      <DialogContent className="lg:max-w-[600px] h-[390px]">
+      <DialogContent className="h-[390px] lg:max-w-[600px]">
         <DialogHeader>
           <DialogTitle className="flex items-center">
             <span className="pr-2">Settings </span>
-            <Settings2 className="w-4 h-4 mr-2 " />
+            <Settings2 className="mr-2 h-4 w-4 " />
           </DialogTitle>
           <DialogDescription>{SETTINGS_DIALOG_SUBTITLE}</DialogDescription>
         </DialogHeader>
diff --git a/src/frontend/src/modals/genericModal/index.tsx b/src/frontend/src/modals/genericModal/index.tsx
index 02823f9da..fa4b20408 100644
--- a/src/frontend/src/modals/genericModal/index.tsx
+++ b/src/frontend/src/modals/genericModal/index.tsx
@@ -56,7 +56,7 @@ export default function GenericModal({
           <DialogTitle className="flex items-center">
             <span className="pr-2">{myModalTitle}</span>
             <FileText
-              className="h-6 w-6 text-primary pl-1 "
+              className="h-6 w-6 pl-1 text-primary "
               aria-hidden="true"
             />
           </DialogTitle>
@@ -76,7 +76,7 @@ export default function GenericModal({
           </DialogDescription>
         </DialogHeader>
 
-        <div className="flex h-full w-full mt-2">
+        <div className="mt-2 flex h-full w-full">
           <Textarea
             ref={ref}
             className="form-input h-[300px] w-full rounded-lg border-ring focus-visible:ring-1"
diff --git a/src/frontend/src/modals/importModal/buttonBox/index.tsx b/src/frontend/src/modals/importModal/buttonBox/index.tsx
index fdc37d03b..d6286b6e8 100644
--- a/src/frontend/src/modals/importModal/buttonBox/index.tsx
+++ b/src/frontend/src/modals/importModal/buttonBox/index.tsx
@@ -77,7 +77,7 @@ export default function ButtonBox({
     <button disabled={deactivate} onClick={onClick}>
       <div
         className={classNames(
-          "flex flex-col justify-center items-center rounded-lg text-center shadow border border-ring hover:shadow-lg transform hover:scale-105",
+          "flex transform flex-col items-center justify-center rounded-lg border border-ring text-center shadow hover:scale-105 hover:shadow-lg",
           bgColor,
           height,
           width,
@@ -85,18 +85,18 @@ export default function ButtonBox({
         )}
       >
         <div
-          className={`flex items-center justify-center ${bigCircle} bg-background/30 rounded-full mb-1`}
+          className={`flex items-center justify-center ${bigCircle} mb-1 rounded-full bg-background/30`}
         >
           <div
-            className={`flex items-center justify-center ${smallCircle} bg-background rounded-full`}
+            className={`flex items-center justify-center ${smallCircle} rounded-full bg-background`}
           >
             <div className={textColor}>{icon}</div>
           </div>
         </div>
-        <div className="w-full mt-auto mb-auto">
+        <div className="mb-auto mt-auto w-full">
           <h3
             className={classNames(
-              "w-full font-semibold break-words text-background truncate-multiline",
+              "w-full break-words font-semibold text-background truncate-multiline",
               titleFontSize,
               marginTop
             )}
diff --git a/src/frontend/src/modals/importModal/index.tsx b/src/frontend/src/modals/importModal/index.tsx
index b4dc4a6ca..31a344808 100644
--- a/src/frontend/src/modals/importModal/index.tsx
+++ b/src/frontend/src/modals/importModal/index.tsx
@@ -68,15 +68,15 @@ export default function ImportModal() {
       <DialogContent
         className={classNames(
           showExamples
-            ? "lg:max-w-[650px] h-[600px]"
-            : "lg:max-w-[650px] h-[450px]"
+            ? "h-[600px] lg:max-w-[650px]"
+            : "h-[450px] lg:max-w-[650px]"
         )}
       >
         <DialogHeader>
           <DialogTitle className="flex items-center">
             {showExamples && (
               <>
-                <div className="z-50 absolute top-2 left-0 hidden pt-4 pl-4 sm:block">
+                <div className="absolute left-0 top-2 z-50 hidden pl-4 pt-4 sm:block">
                   <button
                     type="button"
                     className="rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
@@ -85,7 +85,7 @@ export default function ImportModal() {
                     }}
                   >
                     <ArrowLeftIcon
-                      className="h-5 w-5 text-foreground ml-1"
+                      className="ml-1 h-5 w-5 text-foreground"
                       aria-hidden="true"
                     />
                   </button>
@@ -97,7 +97,7 @@ export default function ImportModal() {
               {showExamples ? "Select an example" : "Import"}
             </span>
             <ArrowUpTrayIcon
-              className="h-5 w-5 text-foreground ml-1"
+              className="ml-1 h-5 w-5 text-foreground"
               aria-hidden="true"
             />
           </DialogTitle>
@@ -108,12 +108,12 @@ export default function ImportModal() {
           className={classNames(
             "h-full w-full overflow-y-auto scrollbar-hide",
             showExamples && !loadingExamples
-              ? "flex flex-row start justify-center items-start flex-wrap overflow-auto mx-auto"
-              : "flex flex-row justify-center items-center"
+              ? "start mx-auto flex flex-row flex-wrap items-start justify-center overflow-auto"
+              : "flex flex-row items-center justify-center"
           )}
         >
           {!showExamples && (
-            <div className="flex h-full w-full justify-evenly items-center">
+            <div className="flex h-full w-full items-center justify-evenly">
               <ButtonBox
                 size="big"
                 bgColor="bg-medium-emerald "
@@ -145,7 +145,7 @@ export default function ImportModal() {
             </div>
           )}
           {showExamples && loadingExamples && (
-            <div className="flex align-middle justify-center items-center">
+            <div className="flex items-center justify-center align-middle">
               <LoadingComponent remSize={30} />
             </div>
           )}
@@ -175,7 +175,7 @@ export default function ImportModal() {
         </div>
 
         <DialogFooter>
-          <div className="w-full flex items-center justify-center mt-2">
+          <div className="mt-2 flex w-full items-center justify-center">
             <a
               href="https://github.com/logspace-ai/langflow_examples"
               target="_blank"
diff --git a/src/frontend/src/modals/promptModal/index.tsx b/src/frontend/src/modals/promptModal/index.tsx
index 0bdcf2504..203e4bbfd 100644
--- a/src/frontend/src/modals/promptModal/index.tsx
+++ b/src/frontend/src/modals/promptModal/index.tsx
@@ -58,8 +58,8 @@ export default function PromptAreaModal({
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative flex flex-col justify-between transform h-[600px] overflow-hidden rounded-lg bg-background 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">
+              <Dialog.Panel className="relative flex h-[600px] w-[700px] transform flex-col justify-between overflow-hidden rounded-lg bg-background text-left shadow-xl transition-all sm:my-8">
+                <div className=" absolute right-0 top-0 z-50 hidden pr-4 pt-4 sm:block">
                   <button
                     type="button"
                     className="rounded-md text-ring hover:text-ring"
@@ -71,8 +71,8 @@ export default function PromptAreaModal({
                     <XMarkIcon className="h-6 w-6" aria-hidden="true" />
                   </button>
                 </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="flex h-full w-full flex-col items-center justify-center">
+                  <div className="z-10 flex w-full justify-center pb-4 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 sm:mx-0 sm:h-10 sm:w-10">
                       <DocumentTextIcon
                         className="h-6 w-6 text-almost-medium-blue"
@@ -88,9 +88,9 @@ export default function PromptAreaModal({
                       </Dialog.Title>
                     </div>
                   </div>
-                  <div className="h-full w-full bg-accent overflow-auto p-4 gap-4 flex flex-row justify-center items-center">
+                  <div className="flex h-full w-full flex-row items-center justify-center gap-4 overflow-auto bg-accent p-4">
                     <div className="flex h-full w-full">
-                      <div className="overflow-hidden px-4 py-5 sm:p-6 w-full h-full rounded-lg bg-background shadow">
+                      <div className="h-full w-full overflow-hidden rounded-lg bg-background px-4 py-5 shadow sm:p-6">
                         <textarea
                           ref={ref}
                           className="form-input h-full w-full rounded-lg border-ring"
@@ -103,7 +103,7 @@ export default function PromptAreaModal({
                       </div>
                     </div>
                   </div>
-                  <div className="bg-input w-full pb-3 flex flex-row-reverse px-4">
+                  <div className="flex w-full flex-row-reverse bg-input px-4 pb-3">
                     <button
                       type="button"
                       className="inline-flex w-full justify-center rounded-md border border-transparent px-4 py-2 text-base font-medium text-background shadow-sm hover:bg-ring focus:outline-none focus:ring-1 focus:ring-ring focus:ring-offset-1 sm:ml-3 sm:w-auto sm:text-sm"
diff --git a/src/frontend/src/modals/textAreaModal/index.tsx b/src/frontend/src/modals/textAreaModal/index.tsx
index 2ac88f7c7..b7528651d 100644
--- a/src/frontend/src/modals/textAreaModal/index.tsx
+++ b/src/frontend/src/modals/textAreaModal/index.tsx
@@ -57,8 +57,8 @@ export default function TextAreaModal({
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative flex flex-col justify-between transform h-[600px] overflow-hidden rounded-lg bg-background 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">
+              <Dialog.Panel className="relative flex h-[600px] w-[700px] transform flex-col justify-between overflow-hidden rounded-lg bg-background text-left shadow-xl transition-all sm:my-8">
+                <div className=" absolute right-0 top-0 z-50 hidden pr-4 pt-4 sm:block">
                   <button
                     type="button"
                     className="rounded-md text-ring hover:text-ring"
@@ -70,8 +70,8 @@ export default function TextAreaModal({
                     <XMarkIcon className="h-6 w-6" aria-hidden="true" />
                   </button>
                 </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="flex h-full w-full flex-col items-center justify-center">
+                  <div className="z-10 flex w-full justify-center pb-4 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 sm:mx-0 sm:h-10 sm:w-10">
                       <ClipboardDocumentListIcon
                         className="h-6 w-6 text-almost-medium-blue"
@@ -87,9 +87,9 @@ export default function TextAreaModal({
                       </Dialog.Title>
                     </div>
                   </div>
-                  <div className="h-full w-full bg-input p-4 gap-4 flex flex-row justify-center items-center">
+                  <div className="flex h-full w-full flex-row items-center justify-center gap-4 bg-input p-4">
                     <div className="flex h-full w-full">
-                      <div className="overflow-hidden px-4 py-5 sm:p-6 w-full rounded-lg bg-background shadow">
+                      <div className="w-full overflow-hidden rounded-lg bg-background px-4 py-5 shadow sm:p-6">
                         <textarea
                           ref={ref}
                           className="form-input h-full w-full rounded-lg border-ring"
@@ -102,7 +102,7 @@ export default function TextAreaModal({
                       </div>
                     </div>
                   </div>
-                  <div className="bg-input w-full pb-3 flex flex-row-reverse px-4">
+                  <div className="flex w-full flex-row-reverse bg-input px-4 pb-3">
                     <button
                       type="button"
                       className="inline-flex w-full justify-center rounded-md border border-transparent px-4 py-2 text-base font-medium text-background shadow-sm hover:bg-ring focus:outline-none focus:ring-1 focus:ring-ring focus:ring-offset-1 sm:ml-3 sm:w-auto sm:text-sm"
diff --git a/src/frontend/src/pages/CommunityPage/index.tsx b/src/frontend/src/pages/CommunityPage/index.tsx
index d0bdc3536..175198c79 100644
--- a/src/frontend/src/pages/CommunityPage/index.tsx
+++ b/src/frontend/src/pages/CommunityPage/index.tsx
@@ -37,9 +37,9 @@ export default function CommunityPage() {
     handleExamples();
   }, []);
   return (
-    <div className="w-full h-full flex overflow-auto flex-col bg-muted px-16">
-      <div className="w-full flex justify-between py-12 pb-2 px-6">
-        <span className="text-2xl flex items-center justify-center gap-2 font-semibold">
+    <div className="flex h-full w-full flex-col overflow-auto bg-muted px-16">
+      <div className="flex w-full justify-between px-6 py-12 pb-2">
+        <span className="flex items-center justify-center gap-2 text-2xl font-semibold">
           <Users2 className="w-6" />
           Community Examples
         </span>
@@ -50,18 +50,18 @@ export default function CommunityPage() {
             rel="noreferrer"
           >
             <Button variant="primary">
-              <GithubIcon className="w-4 mr-2" />
+              <GithubIcon className="mr-2 w-4" />
               Add Your Example
             </Button>
           </a>
         </div>
       </div>
-      <span className="flex pb-8 px-6 w-[70%] text-muted-foreground">
+      <span className="flex w-[70%] px-6 pb-8 text-muted-foreground">
         Discover and learn from shared examples by the LangFlow community. We
         welcome new example contributions that can help our community explore
         new and powerful features.
       </span>
-      <div className="w-full p-4 grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+      <div className="grid w-full gap-4 p-4 md:grid-cols-2 lg:grid-cols-4">
         {!loadingExamples &&
           examples.map((flow, idx) => (
             <CardComponent
@@ -79,7 +79,7 @@ export default function CommunityPage() {
                     });
                   }}
                 >
-                  <GitFork className="w-4 mr-2" />
+                  <GitFork className="mr-2 w-4" />
                   Fork Example
                 </Button>
               }
diff --git a/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx
index 737461c9a..60e086715 100644
--- a/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx
@@ -12,7 +12,7 @@ export default function DisclosureComponent({
       {({ open }) => (
         <>
           <div>
-            <Disclosure.Button className="select-none bg-muted w-full flex justify-between items-center -mt-px px-3 py-2 border-y border-y-input">
+            <Disclosure.Button className="-mt-px flex w-full select-none items-center justify-between border-y border-y-input bg-muted px-3 py-2">
               <div className="flex gap-4">
                 <Icon strokeWidth={1.5} size={22} className="text-primary " />
                 <span className="flex items-center text-sm text-primary">
diff --git a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
index feafafad8..74201cfd9 100644
--- a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
@@ -348,13 +348,13 @@ export default function Page({ flow }: { flow: FlowType }) {
     <div className="flex h-full overflow-hidden">
       <ExtraSidebar />
       {/* Main area */}
-      <main className="flex-1 flex">
+      <main className="flex flex-1">
         {/* Primary column */}
-        <div className="w-full h-full">
-          <div className="w-full h-full" ref={reactFlowWrapper}>
+        <div className="h-full w-full">
+          <div className="h-full w-full" ref={reactFlowWrapper}>
             {Object.keys(templates).length > 0 &&
             Object.keys(types).length > 0 ? (
-              <div className="w-full h-full">
+              <div className="h-full w-full">
                 <ReactFlow
                   nodes={nodes}
                   onMove={() => {
@@ -403,8 +403,8 @@ export default function Page({ flow }: { flow: FlowType }) {
                 >
                   <Background className="" />
                   <Controls
-                    className="text-primary stroke-foreground [&>button]:border-b-border hover:[&>button]:bg-border
-                   fill-foreground bg-muted"
+                    className="bg-muted fill-foreground stroke-foreground text-primary
+                   [&>button]:border-b-border hover:[&>button]:bg-border"
                   ></Controls>
                 </ReactFlow>
                 <Chat flow={flow} reactFlowInstance={reactFlowInstance} />
diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
index 8924665fa..66867a0d1 100644
--- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
@@ -60,48 +60,48 @@ export default function ExtraSidebar() {
   }
 
   return (
-    <div className="w-52 flex flex-col overflow-hidden scrollbar-hide h-full border-r">
-      <div className="mt-2 mb-2 w-full flex gap-2 justify-between px-2 items-center">
+    <div className="flex h-full w-52 flex-col overflow-hidden border-r scrollbar-hide">
+      <div className="mb-2 mt-2 flex w-full items-center justify-between gap-2 px-2">
         <ShadTooltip content="Import" side="top">
           <button
-            className="text-foreground w-full justify-center shadow-sm transition-all duration-500 ease-in-out   relative inline-flex items-center rounded-md bg-background px-2 py-2 ring-1 ring-inset ring-input hover:bg-muted"
+            className="relative inline-flex w-full items-center justify-center rounded-md bg-background   px-2 py-2 text-foreground shadow-sm ring-1 ring-inset ring-input transition-all duration-500 ease-in-out hover:bg-muted"
             onClick={() => {
               // openPopUp(<ImportModal />);
               uploadFlow();
             }}
           >
-            <FileUp strokeWidth={1.5} className="w-5 h-5 "></FileUp>
+            <FileUp strokeWidth={1.5} className="h-5 w-5 "></FileUp>
           </button>
         </ShadTooltip>
 
         <ShadTooltip content="Export" side="top">
           <button
             className={classNames(
-              "text-foreground w-full justify-center shadow-sm transition-all duration-500 ease-in-out   relative inline-flex items-center bg-background px-2 py-2  ring-1 ring-inset ring-input hover:bg-muted rounded-md"
+              "relative inline-flex w-full items-center justify-center rounded-md bg-background   px-2 py-2 text-foreground shadow-sm ring-1 ring-inset  ring-input transition-all duration-500 ease-in-out hover:bg-muted"
             )}
             onClick={(event) => {
               openPopUp(<ExportModal />);
             }}
           >
-            <FileDown strokeWidth={1.5} className="w-5 h-5  "></FileDown>
+            <FileDown strokeWidth={1.5} className="h-5 w-5  "></FileDown>
           </button>
         </ShadTooltip>
         <ShadTooltip content="Code" side="top">
           <button
             className={classNames(
-              "text-foreground w-full justify-center shadow-sm transition-all duration-500 ease-in-out   relative inline-flex items-center bg-background px-2 py-2  ring-1 ring-inset ring-input hover:bg-muted rounded-md"
+              "relative inline-flex w-full items-center justify-center rounded-md bg-background   px-2 py-2 text-foreground shadow-sm ring-1 ring-inset  ring-input transition-all duration-500 ease-in-out hover:bg-muted"
             )}
             onClick={(event) => {
               openPopUp(<ApiModal flow={flows.find((f) => f.id === tabId)} />);
             }}
           >
-            <Code2 strokeWidth={1.5} className="w-5 h-5  "></Code2>
+            <Code2 strokeWidth={1.5} className="h-5 w-5  "></Code2>
           </button>
         </ShadTooltip>
 
         <ShadTooltip content="Save" side="top">
           <button
-            className="text-foreground w-full justify-center transition-all shadow-sm duration-500 ease-in-out   relative inline-flex items-center bg-background px-2 py-2  ring-1 ring-inset ring-input hover:bg-muted rounded-md"
+            className="relative inline-flex w-full items-center justify-center rounded-md bg-background   px-2 py-2 text-foreground shadow-sm ring-1 ring-inset  ring-input transition-all duration-500 ease-in-out hover:bg-muted"
             onClick={(event) => {
               saveFlow(flows.find((f) => f.id === tabId));
               setSuccessData({ title: "Changes saved successfully" });
@@ -111,14 +111,14 @@ export default function ExtraSidebar() {
             <Save
               strokeWidth={1.5}
               className={
-                "w-5 h-5" + (isPending ? " " : " text-muted-foreground")
+                "h-5 w-5" + (isPending ? " " : " text-muted-foreground")
               }
             ></Save>
           </button>
         </ShadTooltip>
       </div>
       <Separator />
-      <div className="relative mt-2 flex items-center mb-2 mx-auto">
+      <div className="relative mx-auto mb-2 mt-2 flex items-center">
         <input
           type="text"
           name="search"
@@ -126,14 +126,14 @@ export default function ExtraSidebar() {
           placeholder="Search"
           className={
             INPUT_STYLE +
-            "w-full border 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 rounded-md border 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);
             setSearch(e.target.value);
           }}
         />
-        <div className="absolute inset-y-0 right-0 flex py-1.5 pr-3 items-center">
+        <div className="absolute inset-y-0 right-0 flex items-center py-1.5 pr-3">
           {/* ! replace hash color here */}
           <Search size={20} strokeWidth={1.5} className="text-primary" />
         </div>
@@ -152,7 +152,7 @@ export default function ExtraSidebar() {
                   Icon: nodeIconsLucide[d] ?? nodeIconsLucide.unknown,
                 }}
               >
-                <div className="p-2 flex flex-col gap-2">
+                <div className="flex flex-col gap-2 p-2">
                   {Object.keys(dataFilter[d])
                     .sort()
                     .map((t: string, k) => (
@@ -164,7 +164,7 @@ export default function ExtraSidebar() {
                         <div key={k} data-tooltip-id={t}>
                           <div
                             draggable
-                            className={"cursor-grab border-l-8 rounded-l-md"}
+                            className={"cursor-grab rounded-l-md border-l-8"}
                             style={{
                               borderLeftColor:
                                 nodeColors[d] ?? nodeColors.unknown,
@@ -183,11 +183,11 @@ export default function ExtraSidebar() {
                               );
                             }}
                           >
-                            <div className="flex w-full justify-between text-sm px-3 py-1 bg-background items-center border-dashed border-ring  border-l-0 rounded-md rounded-l-none border">
-                              <span className="text-foreground  w-full pr-1 truncate text-xs">
+                            <div className="flex w-full items-center justify-between rounded-md rounded-l-none border border-l-0 border-dashed border-ring  bg-background px-3 py-1 text-sm">
+                              <span className="w-full  truncate pr-1 text-xs text-foreground">
                                 {data[d][t].display_name}
                               </span>
-                              <Menu className="w-4 h-6  text-ring " />
+                              <Menu className="h-6 w-4  text-ring " />
                             </div>
                           </div>
                         </div>
diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
index b7c057b70..fd4125e38 100644
--- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
@@ -28,23 +28,23 @@ const NodeToolbarComponent = (props) => {
   const reactFlowInstance = useReactFlow();
   return (
     <>
-      <div className="h-10 w-26">
+      <div className="w-26 h-10">
         <span className="isolate inline-flex rounded-md shadow-sm">
           <ShadTooltip content="Delete" side="top">
             <button
-              className="text-foreground transition-all duration-500 ease-in-out  shadow-md relative inline-flex items-center rounded-l-md bg-background px-2 py-2 ring-1 ring-inset ring-ring hover:bg-muted focus:z-10"
+              className="relative inline-flex items-center rounded-l-md  bg-background px-2 py-2 text-foreground shadow-md ring-1 ring-inset ring-ring transition-all duration-500 ease-in-out hover:bg-muted focus:z-10"
               onClick={() => {
                 props.deleteNode(props.data.id);
               }}
             >
-              <Trash2 className="w-4 h-4"></Trash2>
+              <Trash2 className="h-4 w-4"></Trash2>
             </button>
           </ShadTooltip>
 
           <ShadTooltip content="Duplicate" side="top">
             <button
               className={classNames(
-                "text-foreground transition-all duration-500 ease-in-out shadow-md relative -ml-px inline-flex items-center bg-background px-2 py-2  ring-1 ring-inset ring-ring hover:bg-muted focus:z-10"
+                "relative -ml-px inline-flex items-center bg-background px-2 py-2 text-foreground shadow-md ring-1 ring-inset ring-ring  transition-all duration-500 ease-in-out hover:bg-muted focus:z-10"
               )}
               onClick={(event) => {
                 event.preventDefault();
@@ -63,7 +63,7 @@ const NodeToolbarComponent = (props) => {
                 );
               }}
             >
-              <Copy className="w-4 h-4"></Copy>
+              <Copy className="h-4 w-4"></Copy>
             </button>
           </ShadTooltip>
 
@@ -77,7 +77,7 @@ const NodeToolbarComponent = (props) => {
           >
             <a
               className={classNames(
-                "text-foreground transition-all duration-500 ease-in-out shadow-md relative -ml-px inline-flex items-center bg-background px-2 py-2  ring-1 ring-inset ring-ring hover:bg-muted focus:z-10" +
+                "relative -ml-px inline-flex items-center bg-background px-2 py-2 text-foreground shadow-md ring-1 ring-inset ring-ring  transition-all duration-500 ease-in-out hover:bg-muted focus:z-10" +
                   (props.data.node.documentation === ""
                     ? " text-muted-foreground"
                     : " text-foreground")
@@ -92,14 +92,14 @@ const NodeToolbarComponent = (props) => {
                 }
               }}
             >
-              <FileText className="w-4 h-4 "></FileText>
+              <FileText className="h-4 w-4 "></FileText>
             </a>
           </ShadTooltip>
 
           <ShadTooltip content="Edit" side="top">
             <button
               className={classNames(
-                "text-foreground transition-all duration-500 ease-in-out shadow-md relative -ml-px inline-flex items-center bg-background px-2 py-2  ring-1 ring-inset ring-ring hover:bg-muted focus:z-10 rounded-r-md" +
+                "relative -ml-px inline-flex items-center rounded-r-md bg-background px-2 py-2 text-foreground shadow-md ring-1 ring-inset  ring-ring transition-all duration-500 ease-in-out hover:bg-muted focus:z-10" +
                   (nodeLength == 0
                     ? " text-muted-foreground"
                     : " text-foreground")
@@ -112,7 +112,7 @@ const NodeToolbarComponent = (props) => {
                 props.openPopUp(<EditNodeModal data={props.data} />);
               }}
             >
-              <Settings2 className="w-4 h-4 "></Settings2>
+              <Settings2 className="h-4 w-4 "></Settings2>
             </button>
           </ShadTooltip>
 
diff --git a/src/frontend/src/pages/FlowPage/index.tsx b/src/frontend/src/pages/FlowPage/index.tsx
index c2a7d53bb..27846f794 100644
--- a/src/frontend/src/pages/FlowPage/index.tsx
+++ b/src/frontend/src/pages/FlowPage/index.tsx
@@ -29,7 +29,7 @@ export default function FlowPage() {
       <a
         target={"_blank"}
         href="https://logspace.ai/"
-        className="absolute left-7 bottom-2 flex h-6 cursor-pointer flex-col items-center justify-start overflow-hidden rounded-lg bg-foreground px-2 text-center font-sans text-xs tracking-wide text-secondary transition-all duration-500 ease-in-out hover:h-12"
+        className="absolute bottom-2 left-7 flex h-6 cursor-pointer flex-col items-center justify-start overflow-hidden rounded-lg bg-foreground px-2 text-center font-sans text-xs tracking-wide text-secondary transition-all duration-500 ease-in-out hover:h-12"
       >
         {version && <div className="mt-1">⛓️ LangFlow v{version}</div>}
         <div className={version ? "mt-2" : "mt-1"}>Created by Logspace</div>
diff --git a/src/frontend/src/pages/MainPage/index.tsx b/src/frontend/src/pages/MainPage/index.tsx
index f6e93c9f5..657ae8bd8 100644
--- a/src/frontend/src/pages/MainPage/index.tsx
+++ b/src/frontend/src/pages/MainPage/index.tsx
@@ -14,9 +14,9 @@ export default function HomePage() {
   }, []);
   const navigate = useNavigate();
   return (
-    <div className="w-full h-full flex overflow-auto flex-col bg-muted px-16">
-      <div className="w-full flex justify-between py-12 pb-2 px-6">
-        <span className="text-2xl flex items-center justify-center gap-2 font-semibold">
+    <div className="flex h-full w-full flex-col overflow-auto bg-muted px-16">
+      <div className="flex w-full justify-between px-6 py-12 pb-2">
+        <span className="flex items-center justify-center gap-2 text-2xl font-semibold">
           <Home className="w-6" />
           {USER_PROJECTS_HEADER}
         </span>
@@ -27,7 +27,7 @@ export default function HomePage() {
               downloadFlows();
             }}
           >
-            <Download className="w-4 mr-2" />
+            <Download className="mr-2 w-4" />
             Download Collection
           </Button>
           <Button
@@ -36,7 +36,7 @@ export default function HomePage() {
               uploadFlows();
             }}
           >
-            <Upload className="w-4 mr-2" />
+            <Upload className="mr-2 w-4" />
             Upload Collection
           </Button>
           <Button
@@ -47,15 +47,15 @@ export default function HomePage() {
               });
             }}
           >
-            <Plus className="w-4 mr-2" />
+            <Plus className="mr-2 w-4" />
             New Project
           </Button>
         </div>
       </div>
-      <span className="flex pb-14 px-6 text-muted-foreground w-[60%]">
+      <span className="flex w-[60%] px-6 pb-14 text-muted-foreground">
         Manage your personal projects. Download or upload your collection.
       </span>
-      <div className="w-full p-4 grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+      <div className="grid w-full gap-4 p-4 md:grid-cols-2 lg:grid-cols-4">
         {flows.map((flow, idx) => (
           <CardComponent
             key={idx}
@@ -68,7 +68,7 @@ export default function HomePage() {
                   size="sm"
                   className="whitespace-nowrap "
                 >
-                  <ExternalLink className="w-4 mr-2" />
+                  <ExternalLink className="mr-2 w-4" />
                   Edit Flow
                 </Button>
               </Link>
diff --git a/src/frontend/src/types/tabs/index.ts b/src/frontend/src/types/tabs/index.ts
index 29a85cf5c..aa0069049 100644
--- a/src/frontend/src/types/tabs/index.ts
+++ b/src/frontend/src/types/tabs/index.ts
@@ -11,7 +11,11 @@ export type TabsContextType = {
   addFlow: (flowData?: FlowType, newProject?: boolean) => Promise<String>;
   updateFlow: (newFlow: FlowType) => void;
   incrementNodeId: () => string;
-  downloadFlow: (flow: FlowType,flowName:string,flowDescription?:string) => void;
+  downloadFlow: (
+    flow: FlowType,
+    flowName: string,
+    flowDescription?: string
+  ) => void;
   downloadFlows: () => void;
   uploadFlows: () => void;
   uploadFlow: (newFlow?: boolean) => void;