diff --git a/src/backend/langflow/graph/edge/base.py b/src/backend/langflow/graph/edge/base.py
index b7a71ffa1..88a177e40 100644
--- a/src/backend/langflow/graph/edge/base.py
+++ b/src/backend/langflow/graph/edge/base.py
@@ -27,11 +27,7 @@ class Edge:
         # Get what type of input the target node is expecting
 
         self.matched_type = next(
-            (
-                output
-                for output in self.source_types
-                if output in self.target_reqs
-            ),
+            (output for output in self.source_types if output in self.target_reqs),
             None,
         )
         no_matched_type = self.matched_type is None
diff --git a/src/frontend/src/App.tsx b/src/frontend/src/App.tsx
index 259c40fad..bf1fb7038 100644
--- a/src/frontend/src/App.tsx
+++ b/src/frontend/src/App.tsx
@@ -103,7 +103,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");
@@ -118,7 +118,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) => (
diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
index 7e5b8e315..3dc17f3e2 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
@@ -86,7 +86,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
@@ -123,10 +123,10 @@ 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 " + (left ? "" : "text-end")}>
+        <div className={"w-full truncate text-sm " + (left ? "" : "text-end")}>
           {title}
           <span className="text-destructive">{required ? " *" : ""}</span>
         </div>
@@ -155,7 +155,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,
@@ -220,7 +220,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 ba6f4ce2e..a65bc23af 100644
--- a/src/frontend/src/CustomNodes/GenericNode/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx
@@ -140,29 +140,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-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 && !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 68b04d4e8..f18e2b298 100644
--- a/src/frontend/src/components/chatComponent/chatMessage/index.tsx
+++ b/src/frontend/src/components/chatComponent/chatMessage/index.tsx
@@ -13,21 +13,21 @@ 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>
             )}
             {chat.thought && chat.thought !== "" && !hidden && (
               <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: convert.toHtml(chat.thought),
                 }}
@@ -35,7 +35,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}
@@ -44,7 +44,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 0f7c3351d..d9bd56ca1 100644
--- a/src/frontend/src/components/codeAreaComponent/index.tsx
+++ b/src/frontend/src/components/codeAreaComponent/index.tsx
@@ -3,7 +3,12 @@ import { PopUpContext } from "../../contexts/popUpContext";
 import CodeAreaModal from "../../modals/codeAreaModal";
 import TextAreaModal from "../../modals/textAreaModal";
 import { TextAreaComponentType } from "../../types/components";
-import { INPUT_DIALOG, INPUT_DISABLE, INPUT_EDIT_NODE, INPUT_STYLE } from "../../constants";
+import {
+  INPUT_DIALOG,
+  INPUT_DISABLE,
+  INPUT_EDIT_NODE,
+  INPUT_STYLE,
+} from "../../constants";
 import { ExternalLink } from "lucide-react";
 
 export default function CodeAreaComponent({
@@ -28,10 +33,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(
@@ -46,11 +51,8 @@ export default function CodeAreaComponent({
           }}
           className={
             editNode
-              ? INPUT_EDIT_NODE +
-                 INPUT_DIALOG
-              : 
-                INPUT_STYLE + INPUT_DIALOG +
-                (disabled ? INPUT_DISABLE : "")
+              ? INPUT_EDIT_NODE + INPUT_DIALOG
+              : INPUT_STYLE + INPUT_DIALOG + (disabled ? INPUT_DISABLE : "")
           }
         >
           {myValue !== "" ? myValue : "Type something..."}
@@ -69,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 30efb021e..9b42df9dd 100644
--- a/src/frontend/src/components/dropdownComponent/index.tsx
+++ b/src/frontend/src/components/dropdownComponent/index.tsx
@@ -34,13 +34,11 @@ export default function Dropdown({
               <Listbox.Button
                 className={
                   editNode
-                    ? "relative pr-8 border-1" + INPUT_EDIT_NODE
-                      
-                    : "py-2 pl-3 pr-10 text-left" +
-                      INPUT_STYLE
+                    ? "border-1 relative pr-8" + INPUT_EDIT_NODE
+                    : "py-2 pl-3 pr-10 text-left" + INPUT_STYLE
                 }
               >
-                <span className="block bg-background truncate w-full">
+                <span className="block w-full truncate bg-background">
                   {internalValue}
                 </span>
                 <span
@@ -65,8 +63,8 @@ export default function Dropdown({
                 <Listbox.Options
                   className={
                     editNode
-                      ? "absolute z-10 mt-1 max-h-60 overflow-auto rounded-md bg-background py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm w-[215px]"
-                      : "nowheel absolute z-10 mt-1 max-h-60 w-full overflow-auto overflow-y rounded-md bg-background py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm "
+                      ? "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 absolute 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 "
                   }
                 >
                   {options.map((option, id) => (
diff --git a/src/frontend/src/components/floatComponent/index.tsx b/src/frontend/src/components/floatComponent/index.tsx
index ba82a5a97..28e37c786 100644
--- a/src/frontend/src/components/floatComponent/index.tsx
+++ b/src/frontend/src/components/floatComponent/index.tsx
@@ -57,8 +57,7 @@ export default function FloatComponent({
         className={
           editNode
             ? INPUT_EDIT_NODE
-            : INPUT_STYLE +
-              (disabled ? INPUT_DISABLE : "")
+            : INPUT_STYLE + (disabled ? INPUT_DISABLE : "")
         }
         placeholder={
           editNode ? "Number 0 to 1" : "Type a number from zero to one"
diff --git a/src/frontend/src/components/headerComponent/components/menuBar/index.tsx b/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
index 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 aee7af369..b8db68274 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"
       }
     >
@@ -49,9 +49,7 @@ export default function InputComponent({
           " pr-12 ",
           disabled ? INPUT_DISABLE : "",
           password && !pwdVisible && myValue !== "" ? "password" : "",
-          editNode
-            ? INPUT_EDIT_NODE
-            : INPUT_STYLE,
+          editNode ? INPUT_EDIT_NODE : INPUT_STYLE,
           password && editNode ? "pr-8" : "pr-3"
         )}
         placeholder={password && editNode ? "Key" : "Type something..."}
@@ -64,7 +62,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={() => {
@@ -81,8 +79,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
@@ -100,8 +98,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 bef265b24..b921dc316 100644
--- a/src/frontend/src/components/inputFileComponent/index.tsx
+++ b/src/frontend/src/components/inputFileComponent/index.tsx
@@ -95,29 +95,26 @@ 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 gap-2">
+      <div className="flex w-full items-center gap-2">
         <span
           onClick={handleButtonClick}
           className={
             editNode
-              ? INPUT_EDIT_NODE +
-                INPUT_STYLE
-              : 
-                INPUT_STYLE +
-                (disabled ? INPUT_DISABLE : "")
+              ? INPUT_EDIT_NODE + INPUT_STYLE
+              : INPUT_STYLE + (disabled ? INPUT_DISABLE : "")
           }
         >
           {myValue !== "" ? myValue : "No file"}
         </span>
         <button onClick={handleButtonClick}>
           {!editNode && !loading && (
-            <FileSearch2 className="w-6 h-6 hover:text-ring" />
+            <FileSearch2 className="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 814e59d78..4f89871dd 100644
--- a/src/frontend/src/components/inputListComponent/index.tsx
+++ b/src/frontend/src/components/inputListComponent/index.tsx
@@ -28,14 +28,15 @@ export default function InputListComponent({
     >
       {inputList.map((i, idx) => {
         return (
-          <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
-                ? INPUT_EDIT_NODE
-                : INPUT_STYLE +
-                (disabled ? INPUT_DISABLE : "")}
+              className={
+                editNode
+                  ? INPUT_EDIT_NODE
+                  : INPUT_STYLE + (disabled ? INPUT_DISABLE : "")
+              }
               placeholder="Type something..."
               onChange={(e) => {
                 setInputList((old) => {
@@ -44,7 +45,8 @@ export default function InputListComponent({
                   return newInputList;
                 });
                 onChange(inputList);
-              } } />
+              }}
+            />
             {idx === inputList.length - 1 ? (
               <button
                 onClick={() => {
@@ -54,9 +56,9 @@ export default function InputListComponent({
                     return newInputList;
                   });
                   onChange(inputList);
-                } }
+                }}
               >
-                <Plus className={"w-4 h-4 hover:text-ring"} />
+                <Plus className={"h-4 w-4 hover:text-ring"} />
               </button>
             ) : (
               <button
@@ -67,9 +69,9 @@ export default function InputListComponent({
                     return newInputList;
                   });
                   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 ee9304c0e..36c12e37a 100644
--- a/src/frontend/src/components/intComponent/index.tsx
+++ b/src/frontend/src/components/intComponent/index.tsx
@@ -30,7 +30,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
@@ -71,9 +71,7 @@ export default function IntComponent({
         className={
           editNode
             ? INPUT_EDIT_NODE
-            : 
-              INPUT_STYLE +
-              (disabled ? INPUT_DISABLE : "")
+            : INPUT_STYLE + (disabled ? INPUT_DISABLE : "")
         }
         placeholder={editNode ? "Integer number" : "Type an integer number"}
         onChange={(e) => {
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 a54da7872..79f98bd81 100644
--- a/src/frontend/src/components/promptComponent/index.tsx
+++ b/src/frontend/src/components/promptComponent/index.tsx
@@ -3,7 +3,12 @@ import { PopUpContext } from "../../contexts/popUpContext";
 import { TextAreaComponentType } from "../../types/components";
 import GenericModal from "../../modals/genericModal";
 import { TypeModal } from "../../utils";
-import { INPUT_DIALOG, INPUT_DISABLE, INPUT_EDIT_NODE, INPUT_STYLE } from "../../constants";
+import {
+  INPUT_DIALOG,
+  INPUT_DISABLE,
+  INPUT_EDIT_NODE,
+  INPUT_STYLE,
+} from "../../constants";
 import { ExternalLink } from "lucide-react";
 
 export default function PromptAreaComponent({
@@ -28,10 +33,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 gap-3">
+      <div className="flex w-full items-center gap-3">
         <span
           onClick={() => {
             openPopUp(
@@ -50,8 +55,7 @@ export default function PromptAreaComponent({
           className={
             editNode
               ? INPUT_EDIT_NODE + INPUT_DIALOG
-              : 
-                (disabled ? INPUT_DISABLE : "") + INPUT_STYLE + INPUT_DIALOG
+              : (disabled ? INPUT_DISABLE : "") + INPUT_STYLE + INPUT_DIALOG
           }
         >
           {myValue !== "" ? myValue : "Type your prompt here"}
@@ -72,7 +76,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 ca47f5cc4..6c127005e 100644
--- a/src/frontend/src/components/textAreaComponent/index.tsx
+++ b/src/frontend/src/components/textAreaComponent/index.tsx
@@ -3,7 +3,12 @@ import { PopUpContext } from "../../contexts/popUpContext";
 import { TextAreaComponentType } from "../../types/components";
 import GenericModal from "../../modals/genericModal";
 import { TypeModal } from "../../utils";
-import { INPUT_DIALOG, INPUT_DISABLE, INPUT_EDIT_NODE, INPUT_STYLE } from "../../constants";
+import {
+  INPUT_DIALOG,
+  INPUT_DISABLE,
+  INPUT_EDIT_NODE,
+  INPUT_STYLE,
+} from "../../constants";
 import { ExternalLink } from "lucide-react";
 
 export default function TextAreaComponent({
@@ -31,8 +36,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
@@ -53,8 +58,7 @@ export default function TextAreaComponent({
           className={
             editNode
               ? INPUT_EDIT_NODE + INPUT_DIALOG
-              : INPUT_DIALOG + "px-3 py-2" +
-                (disabled ? INPUT_DISABLE : "")
+              : INPUT_DIALOG + "px-3 py-2" + (disabled ? INPUT_DISABLE : "")
           }
         >
           {myValue !== "" ? myValue : "Type something..."}
@@ -75,7 +79,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/constants.tsx b/src/frontend/src/constants.tsx
index a0d0f64cb..813f1a258 100644
--- a/src/frontend/src/constants.tsx
+++ b/src/frontend/src/constants.tsx
@@ -154,7 +154,7 @@ export const INPUT_DIALOG = " text-ring cursor-pointer bg-transparent";
  * @constant
  */
 export const INPUT_STYLE =
-  " px-3 bg-background focus:tw-ring-none focus-visible:outline-none focus:ring-ring focus:outline-none rounded-md block w-full truncate form-input border-ring shadow-sm sm:text-sm focus:placeholder-transparent placeholder:text-muted-foreground ";
+  " bg-background block border-ring focus:outline-none focus:placeholder-transparent focus:ring-ring focus:tw-ring-none focus:visible:outline-none form-input px-3 placeholder:text-muted-foreground rounded-md shadow-sm sm:text-sm truncate w-full ";
 
 /**
  * The base input on edit node
diff --git a/src/frontend/src/modals/ApiModal/index.tsx b/src/frontend/src/modals/ApiModal/index.tsx
index c6bd94762..931c94b54 100644
--- a/src/frontend/src/modals/ApiModal/index.tsx
+++ b/src/frontend/src/modals/ApiModal/index.tsx
@@ -83,18 +83,18 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
   return (
     <Dialog open={true} onOpenChange={setModalOpen}>
       <DialogTrigger></DialogTrigger>
-      <DialogContent className="lg:max-w-[800px] sm:max-w-[600px] h-[580px]">
+      <DialogContent className="h-[580px] sm:max-w-[600px] lg:max-w-[800px]">
         <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
           defaultValue={"0"}
-          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)}
         >
           <div className="flex items-center justify-between px-2">
@@ -107,7 +107,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} />}
@@ -119,7 +119,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"
             >
               <SyntaxHighlighter
                 className="h-[400px] w-full overflow-auto"
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 9090afe6c..fd260295c 100644
--- a/src/frontend/src/modals/NodeModal/index.tsx
+++ b/src/frontend/src/modals/NodeModal/index.tsx
@@ -60,8 +60,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"
@@ -73,11 +73,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,
@@ -92,11 +92,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) !== "_" &&
@@ -107,7 +107,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) =>
@@ -145,7 +145,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 0e501a5df..0550e80ff 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: 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 ">
             <span
               className="text-muted-foreground "
               dangerouslySetInnerHTML={{
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 4a817bf70..dd82890fd 100644
--- a/src/frontend/src/modals/chatModal/index.tsx
+++ b/src/frontend/src/modals/chatModal/index.tsx
@@ -330,7 +330,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">
@@ -344,24 +344,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) => (
@@ -373,19 +373,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>
@@ -394,8 +394,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 da7eeb2d0..f5ef7cb08 100644
--- a/src/frontend/src/modals/codeAreaModal/index.tsx
+++ b/src/frontend/src/modals/codeAreaModal/index.tsx
@@ -47,19 +47,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"
@@ -73,7 +73,7 @@ export default function CodeAreaModal({
             onChange={(value) => {
               setCode(value);
             }}
-            className="w-full rounded-lg h-[300px] custom-scroll border-[1px] border-ring "
+            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 236c27366..ec0906ee6 100644
--- a/src/frontend/src/modals/exportModal/index.tsx
+++ b/src/frontend/src/modals/exportModal/index.tsx
@@ -41,12 +41,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>
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 c15b33f53..20cf45653 100644
--- a/src/frontend/src/modals/genericModal/index.tsx
+++ b/src/frontend/src/modals/genericModal/index.tsx
@@ -55,7 +55,7 @@ export default function GenericModal({
           <DialogTitle className="flex items-center">
             <span className="pr-2">{myModalTitle}</span>
             <FileText
-              className="h-6 w-6 text-primary pl-1 "
+              className="h-6 w-6 pl-1 text-primary "
               aria-hidden="true"
             />
           </DialogTitle>
@@ -75,7 +75,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 a0697eeea..22703f610 100644
--- a/src/frontend/src/modals/promptModal/index.tsx
+++ b/src/frontend/src/modals/promptModal/index.tsx
@@ -57,8 +57,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"
@@ -70,8 +70,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"
@@ -87,9 +87,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"
@@ -102,7 +102,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 69f3d98b3..71c5a68b7 100644
--- a/src/frontend/src/modals/textAreaModal/index.tsx
+++ b/src/frontend/src/modals/textAreaModal/index.tsx
@@ -56,8 +56,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"
@@ -69,8 +69,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"
@@ -86,9 +86,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"
@@ -101,7 +101,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 b2f256afa..2f3e41b74 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 delayDuration={1000} 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 delayDuration={1000} 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 delayDuration={1000} 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 delayDuration={1000} 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,28 +111,26 @@ 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"
           id="search"
           placeholder="Search"
-          className={
-            INPUT_SEARCH
-          }
+          className={INPUT_SEARCH}
           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>
@@ -151,7 +149,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 +162,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 +181,11 @@ export default function ExtraSidebar() {
                               );
                             }}
                           >
-                            <div className="flex w-full justify-between text-sm px-3 py-1 bg-white items-center border-dashed border-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-white 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 6d21dc18e..de429c93b 100644
--- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
@@ -28,16 +28,16 @@ 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 delayDuration={1000} 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>
 
@@ -45,8 +45,8 @@ const NodeToolbarComponent = (props) => {
             <button
               className={classNames(
                 nodeLength > 0
-                  ? "text-foreground transition-all duration-500 ease-in-out shadow-md relative -ml-px inline-flex items-center bg-background px-2 py-2  ring-1 ring-inset ring-ring hover:bg-muted focus:z-10"
-                  : "text-foreground transition-all duration-500 ease-in-out shadow-md relative -ml-px inline-flex items-center bg-background px-2 py-2  ring-1 ring-inset ring-ring hover:bg-muted focus:z-10 rounded-r-md"
+                  ? "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"
+                  : "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"
               )}
               onClick={(event) => {
                 event.preventDefault();
@@ -65,20 +65,20 @@ const NodeToolbarComponent = (props) => {
                 );
               }}
             >
-              <Copy className="w-4 h-4 "></Copy>
+              <Copy className="h-4 w-4 "></Copy>
             </button>
           </ShadTooltip>
 
           {nodeLength > 0 && (
             <ShadTooltip delayDuration={1000} content="Edit" side="top">
               <button
-                className="text-foreground transition-all duration-500 ease-in-out shadow-md relative -ml-px inline-flex items-center bg-background px-2 py-2 ring-1 ring-inset ring-ring hover:bg-muted focus:z-10 rounded-r-md"
+                className="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"
                 onClick={(event) => {
                   event.preventDefault();
                   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>