diff --git a/src/frontend/src/App.tsx b/src/frontend/src/App.tsx
index a30f50426..1c8274e63 100644
--- a/src/frontend/src/App.tsx
+++ b/src/frontend/src/App.tsx
@@ -3,6 +3,7 @@ import { ErrorBoundary } from "react-error-boundary";
 import { useNavigate } from "react-router-dom";
 import "reactflow/dist/style.css";
 import "./App.css";
+import AlertDisplayArea from "./alerts/displayArea";
 import ErrorAlert from "./alerts/error";
 import NoticeAlert from "./alerts/notice";
 import SuccessAlert from "./alerts/success";
@@ -25,14 +26,12 @@ import useFlowsManagerStore from "./stores/flowsManagerStore";
 import { useFolderStore } from "./stores/foldersStore";
 import { useGlobalVariablesStore } from "./stores/globalVariablesStore/globalVariables";
 import { useStoreStore } from "./stores/storeStore";
-import AlertDisplayArea from "./alerts/displayArea";
 export default function App() {
   useTrackLastVisitedPath();
 
   const [fetchError, setFetchError] = useState(false);
   const isLoading = useFlowsManagerStore((state) => state.isLoading);
 
-
   const { isAuthenticated, login, setUserData, setAutoLogin, getUser } =
     useContext(AuthContext);
   const setLoading = useAlertStore((state) => state.setLoading);
@@ -200,7 +199,7 @@ export default function App() {
       </ErrorBoundary>
       <div></div>
       <div className="app-div">
-        <AlertDisplayArea/>
+        <AlertDisplayArea />
       </div>
     </div>
   );
diff --git a/src/frontend/src/alerts/displayArea/index.tsx b/src/frontend/src/alerts/displayArea/index.tsx
index 9f39ee6dd..1d59d9a24 100644
--- a/src/frontend/src/alerts/displayArea/index.tsx
+++ b/src/frontend/src/alerts/displayArea/index.tsx
@@ -3,51 +3,49 @@ import ErrorAlert from "../error";
 import NoticeAlert from "../notice";
 import SuccessAlert from "../success";
 
-export default function AlertDisplayArea(){
+export default function AlertDisplayArea() {
+  const removeFromTempNotificationList = useAlertStore(
+    (state) => state.removeFromTempNotificationList,
+  );
+  const tempNotificationList = useAlertStore(
+    (state) => state.tempNotificationList,
+  );
+  const removeAlert = (id: string) => {
+    removeFromTempNotificationList(id);
+  };
 
-    const removeFromTempNotificationList = useAlertStore(
-        (state) => state.removeFromTempNotificationList,
-      );
-      const tempNotificationList = useAlertStore(
-        (state) => state.tempNotificationList,
-      );
-      const removeAlert = (id: string) => {
-        removeFromTempNotificationList(id);
-      };
-
-
-    return (
-        <div className="flex flex-col-reverse" style={{ zIndex: 999 }}>
-        {tempNotificationList.map((alert) => (
-          <div key={alert.id}>
-            {alert.type === "error" ? (
-              <ErrorAlert
+  return (
+    <div className="flex flex-col-reverse" style={{ zIndex: 999 }}>
+      {tempNotificationList.map((alert) => (
+        <div key={alert.id}>
+          {alert.type === "error" ? (
+            <ErrorAlert
+              key={alert.id}
+              title={alert.title}
+              list={alert.list}
+              id={alert.id}
+              removeAlert={removeAlert}
+            />
+          ) : alert.type === "notice" ? (
+            <NoticeAlert
+              key={alert.id}
+              title={alert.title}
+              link={alert.link}
+              id={alert.id}
+              removeAlert={removeAlert}
+            />
+          ) : (
+            alert.type === "success" && (
+              <SuccessAlert
                 key={alert.id}
                 title={alert.title}
-                list={alert.list}
                 id={alert.id}
                 removeAlert={removeAlert}
               />
-            ) : alert.type === "notice" ? (
-              <NoticeAlert
-                key={alert.id}
-                title={alert.title}
-                link={alert.link}
-                id={alert.id}
-                removeAlert={removeAlert}
-              />
-            ) : (
-              alert.type === "success" && (
-                <SuccessAlert
-                  key={alert.id}
-                  title={alert.title}
-                  id={alert.id}
-                  removeAlert={removeAlert}
-                />
-              )
-            )}
-          </div>
-        ))}
-      </div>
-    )
-}
\ No newline at end of file
+            )
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/src/frontend/src/components/stringReaderComponent/index.tsx b/src/frontend/src/components/stringReaderComponent/index.tsx
index 3045db34f..dfcb15b54 100644
--- a/src/frontend/src/components/stringReaderComponent/index.tsx
+++ b/src/frontend/src/components/stringReaderComponent/index.tsx
@@ -4,7 +4,7 @@ import TextModal from "../../modals/textModal";
 export default function StringReader({
   string,
   setValue,
-  editable=false,
+  editable = false,
 }: {
   string: string;
   setValue: (value: string) => void;
diff --git a/src/frontend/src/components/tableComponent/components/tableAutoCellRender/index.tsx b/src/frontend/src/components/tableComponent/components/tableAutoCellRender/index.tsx
index 82d5d67cd..a4bad2c4c 100644
--- a/src/frontend/src/components/tableComponent/components/tableAutoCellRender/index.tsx
+++ b/src/frontend/src/components/tableComponent/components/tableAutoCellRender/index.tsx
@@ -51,7 +51,13 @@ export default function TableAutoCellRender({
             </Badge>
           );
         } else {
-          return <StringReader editable={!!colDef?.onCellValueChanged} setValue={setValue!} string={value} />;
+          return (
+            <StringReader
+              editable={!!colDef?.onCellValueChanged}
+              setValue={setValue!}
+              string={value}
+            />
+          );
         }
       case "number":
         return <NumberReader number={value} />;
diff --git a/src/frontend/src/components/tableComponent/index.tsx b/src/frontend/src/components/tableComponent/index.tsx
index 7eb52dd77..a75238258 100644
--- a/src/frontend/src/components/tableComponent/index.tsx
+++ b/src/frontend/src/components/tableComponent/index.tsx
@@ -3,6 +3,7 @@ import "ag-grid-community/styles/ag-theme-quartz.css"; // Optional Theme applied
 import { AgGridReact, AgGridReactProps } from "ag-grid-react";
 import cloneDeep from "lodash";
 import { ElementRef, forwardRef, useRef, useState } from "react";
+import { boolean } from "zod";
 import {
   DEFAULT_TABLE_ALERT_MSG,
   DEFAULT_TABLE_ALERT_TITLE,
@@ -14,14 +15,20 @@ import ForwardedIconComponent from "../genericIconComponent";
 import { Alert, AlertDescription, AlertTitle } from "../ui/alert";
 import TableOptions from "./components/TableOptions";
 import resetGrid from "./utils/reset-grid-columns";
-import { boolean } from "zod";
 
 interface TableComponentProps extends AgGridReactProps {
   columnDefs: NonNullable<AgGridReactProps["columnDefs"]>;
   rowData: NonNullable<AgGridReactProps["rowData"]>;
   alertTitle?: string;
   alertDescription?: string;
-  editable?: boolean | string[] | {field: string, onUpdate: (value:any)=>void,editableCell:boolean}[];
+  editable?:
+    | boolean
+    | string[]
+    | {
+        field: string;
+        onUpdate: (value: any) => void;
+        editableCell: boolean;
+      }[];
   pagination?: boolean;
   onDelete?: () => void;
   onDuplicate?: () => void;
@@ -53,7 +60,8 @@ const TableComponent = forwardRef<
       }
       if (
         (typeof props.editable === "boolean" && props.editable) ||
-        (Array.isArray(props.editable) && props.editable.every(field=>typeof field ==="string") &&
+        (Array.isArray(props.editable) &&
+          props.editable.every((field) => typeof field === "string") &&
           (props.editable as Array<string>).includes(newCol.headerName ?? ""))
       ) {
         newCol = {
@@ -61,14 +69,23 @@ const TableComponent = forwardRef<
           editable: true,
         };
       }
-      if(Array.isArray(props.editable) && props.editable.every(field=>typeof field ==="object")){
-        const field = (props.editable as Array<{field:string, onUpdate:(value:any)=>void,editableCell:boolean}>).find(field=>field.field===newCol.headerName);
-        if(field){
+      if (
+        Array.isArray(props.editable) &&
+        props.editable.every((field) => typeof field === "object")
+      ) {
+        const field = (
+          props.editable as Array<{
+            field: string;
+            onUpdate: (value: any) => void;
+            editableCell: boolean;
+          }>
+        ).find((field) => field.field === newCol.headerName);
+        if (field) {
           newCol = {
             ...newCol,
             editable: field.editableCell,
-            onCellValueChanged: (e)=>field.onUpdate(e)
-          }
+            onCellValueChanged: (e) => field.onUpdate(e),
+          };
         }
       }
       return newCol;
diff --git a/src/frontend/src/modals/IOModal/components/SessionView/index.tsx b/src/frontend/src/modals/IOModal/components/SessionView/index.tsx
index 1f3ab7adb..2ea6ef606 100644
--- a/src/frontend/src/modals/IOModal/components/SessionView/index.tsx
+++ b/src/frontend/src/modals/IOModal/components/SessionView/index.tsx
@@ -1,4 +1,9 @@
-import { CellEditRequestEvent, NewValueParams, SelectionChangedEvent } from "ag-grid-community";
+import {
+  CellEditRequestEvent,
+  NewValueParams,
+  SelectionChangedEvent,
+} from "ag-grid-community";
+import cloneDeep from "lodash/cloneDeep";
 import { useState } from "react";
 import TableComponent from "../../../../components/tableComponent";
 import useRemoveMessages from "../../../../pages/SettingsPage/pages/messagesPage/hooks/use-remove-messages";
@@ -6,7 +11,6 @@ import useUpdateMessage from "../../../../pages/SettingsPage/pages/messagesPage/
 import useAlertStore from "../../../../stores/alertStore";
 import { useMessagesStore } from "../../../../stores/messagesStore";
 import { messagesSorter } from "../../../../utils/utils";
-import cloneDeep from "lodash/cloneDeep";
 
 export default function SessionView({ rows }: { rows: Array<any> }) {
   const columns = useMessagesStore((state) => state.columns);
@@ -43,7 +47,9 @@ export default function SessionView({ rows }: { rows: Array<any> }) {
       key={"sessionView"}
       onDelete={handleRemoveMessages}
       readOnlyEdit
-      editable={[{field:"text",onUpdate:handleUpdateMessage, editableCell:false}]}
+      editable={[
+        { field: "text", onUpdate: handleUpdateMessage, editableCell: false },
+      ]}
       overlayNoRowsTemplate="No data available"
       onSelectionChanged={(event: SelectionChangedEvent) => {
         setSelectedRows(event.api.getSelectedRows().map((row) => row.index));
diff --git a/src/frontend/src/modals/textModal/components/textEditorArea/index.tsx b/src/frontend/src/modals/textModal/components/textEditorArea/index.tsx
index ab0a4b155..64e5b7030 100644
--- a/src/frontend/src/modals/textModal/components/textEditorArea/index.tsx
+++ b/src/frontend/src/modals/textModal/components/textEditorArea/index.tsx
@@ -1,19 +1,31 @@
 import { Textarea } from "../../../../components/ui/textarea";
 
-const TextEditorArea = ({ left, value, onChange,readonly }: { left: boolean | undefined, value: any, onChange?: (string) => void; readonly:boolean}) => {
-    if (typeof value === "object" && Object.keys(value).includes("text")) {
-        value = value.text;
-    }
-    return (
-        <Textarea
-            readOnly={readonly}
-            className={`w-full custom-scroll ${left ? "min-h-32" : "h-full"}`}
-            placeholder={"Empty"}
-            // update to real value on flowPool
-            value={value}
-            onChange={(e) => { if (onChange) onChange(e.target.value) }}
-        />
-    );
+const TextEditorArea = ({
+  left,
+  value,
+  onChange,
+  readonly,
+}: {
+  left: boolean | undefined;
+  value: any;
+  onChange?: (string) => void;
+  readonly: boolean;
+}) => {
+  if (typeof value === "object" && Object.keys(value).includes("text")) {
+    value = value.text;
+  }
+  return (
+    <Textarea
+      readOnly={readonly}
+      className={`w-full custom-scroll ${left ? "min-h-32" : "h-full"}`}
+      placeholder={"Empty"}
+      // update to real value on flowPool
+      value={value}
+      onChange={(e) => {
+        if (onChange) onChange(e.target.value);
+      }}
+    />
+  );
 };
 
 export default TextEditorArea;
diff --git a/src/frontend/src/modals/textModal/index.tsx b/src/frontend/src/modals/textModal/index.tsx
index 686d4ac66..715747072 100644
--- a/src/frontend/src/modals/textModal/index.tsx
+++ b/src/frontend/src/modals/textModal/index.tsx
@@ -24,7 +24,7 @@ export default function TextModal({
   children,
   value,
   setValue,
-  editable = false
+  editable = false,
 }: {
   children: JSX.Element;
   value: string;
@@ -48,18 +48,28 @@ export default function TextModal({
       <BaseModal.Content>
         <div className="flex h-full w-full flex-col transition-all">
           <div className="h-[370px]">
-            <TextEditorArea readonly={!editable} onChange={(text) => setInternalValue(text)} value={internalValue} left={false} />
+            <TextEditorArea
+              readonly={!editable}
+              onChange={(text) => setInternalValue(text)}
+              value={internalValue}
+              left={false}
+            />
           </div>
         </div>
       </BaseModal.Content>
       <BaseModal.Footer>
         <div className="flex w-full justify-end gap-2 pt-2">
-          {editable && <Button className="flex gap-2 px-3" onClick={() => {
-            setValue(internalValue);
-            setOpen(false);
-          }}>
-            Save
-          </Button>}
+          {editable && (
+            <Button
+              className="flex gap-2 px-3"
+              onClick={() => {
+                setValue(internalValue);
+                setOpen(false);
+              }}
+            >
+              Save
+            </Button>
+          )}
           <Button className="flex gap-2 px-3" onClick={() => setOpen(false)}>
             Close
           </Button>
diff --git a/src/frontend/src/pages/SettingsPage/pages/messagesPage/index.tsx b/src/frontend/src/pages/SettingsPage/pages/messagesPage/index.tsx
index 59cd1472e..70037ee7c 100644
--- a/src/frontend/src/pages/SettingsPage/pages/messagesPage/index.tsx
+++ b/src/frontend/src/pages/SettingsPage/pages/messagesPage/index.tsx
@@ -57,7 +57,13 @@ export default function MessagesPage() {
           onCellEditRequest={(event) => {
             handleUpdateMessage(event);
           }}
-          editable={[{field:"text",onUpdate:handleUpdateMessage, editableCell:false}]}
+          editable={[
+            {
+              field: "text",
+              onUpdate: handleUpdateMessage,
+              editableCell: false,
+            },
+          ]}
           overlayNoRowsTemplate="No data available"
           onSelectionChanged={(event: SelectionChangedEvent) => {
             setSelectedRows(
diff --git a/src/frontend/src/shared/components/textOutputView/index.tsx b/src/frontend/src/shared/components/textOutputView/index.tsx
index c43e8048b..57ad7feb0 100644
--- a/src/frontend/src/shared/components/textOutputView/index.tsx
+++ b/src/frontend/src/shared/components/textOutputView/index.tsx
@@ -1,6 +1,12 @@
 import { Textarea } from "../../../components/ui/textarea";
 
-const TextOutputView = ({ left, value }:{left:boolean|undefined,value:any}) => {
+const TextOutputView = ({
+  left,
+  value,
+}: {
+  left: boolean | undefined;
+  value: any;
+}) => {
   if (typeof value === "object" && Object.keys(value).includes("text")) {
     value = value.text;
   }