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