diff --git a/src/frontend/src/components/AccordionComponent/index.tsx b/src/frontend/src/components/AccordionComponent/index.tsx
index 9a3c4a212..3d9aac314 100644
--- a/src/frontend/src/components/AccordionComponent/index.tsx
+++ b/src/frontend/src/components/AccordionComponent/index.tsx
@@ -50,9 +50,7 @@ export default function AccordionComponent({
             {trigger}
           </AccordionTrigger>
           <AccordionContent>
-            <div className="AccordionContent flex flex-col">
-              {children}
-            </div>
+            <div className="AccordionContent flex flex-col">{children}</div>
           </AccordionContent>
         </AccordionItem>
       </Accordion>
diff --git a/src/frontend/src/components/CrashErrorComponent/index.tsx b/src/frontend/src/components/CrashErrorComponent/index.tsx
index 0cf376195..57dc83d83 100644
--- a/src/frontend/src/components/CrashErrorComponent/index.tsx
+++ b/src/frontend/src/components/CrashErrorComponent/index.tsx
@@ -26,7 +26,7 @@ export default function CrashErrorComponent({
             <CardContent className="grid">
               <div>
                 <p>
-                Please report errors with detailed tracebacks on the{" "}
+                  Please report errors with detailed tracebacks on the{" "}
                   <a
                     href="https://github.com/logspace-ai/langflow/issues"
                     target="_blank"
@@ -37,7 +37,7 @@ export default function CrashErrorComponent({
                   </a>{" "}
                   page.
                   <br></br>
-                   Thank you!
+                  Thank you!
                 </p>
               </div>
             </CardContent>
diff --git a/src/frontend/src/components/NewFlowCardComponent/index.tsx b/src/frontend/src/components/NewFlowCardComponent/index.tsx
index 131fb3543..1fe5b4b46 100644
--- a/src/frontend/src/components/NewFlowCardComponent/index.tsx
+++ b/src/frontend/src/components/NewFlowCardComponent/index.tsx
@@ -1,54 +1,33 @@
-import { useEffect, useState } from "react";
-import { getComponent, postLikeComponent } from "../../controllers/API";
-import DeleteConfirmationModal from "../../modals/DeleteConfirmationModal";
-import useAlertStore from "../../stores/alertStore";
-import useFlowsManagerStore from "../../stores/flowsManagerStore";
-import { useStoreStore } from "../../stores/storeStore";
-import { storeComponent } from "../../types/store";
-import cloneFLowWithParent from "../../utils/storeUtils";
-import { cn } from "../../utils/utils";
-import ShadTooltip from "../ShadTooltipComponent";
-import IconComponent from "../genericIconComponent";
-import { Badge } from "../ui/badge";
-import { Button } from "../ui/button";
-import {
-    Card,
-    CardContent,
-    CardDescription,
-    CardFooter,
-    CardHeader,
-    CardTitle,
-} from "../ui/card";
-import { FlowType } from "../../types/flow";
 import { useNavigate } from "react-router-dom";
+import useFlowsManagerStore from "../../stores/flowsManagerStore";
+import { cn } from "../../utils/utils";
+import IconComponent from "../genericIconComponent";
+import { Card, CardContent } from "../ui/card";
 
-export default function NewFlowCardComponent({
-}: {
-    }) {
-    const addFlow = useFlowsManagerStore((state) => state.addFlow);
-    const navigate = useNavigate();
+export default function NewFlowCardComponent({}: {}) {
+  const addFlow = useFlowsManagerStore((state) => state.addFlow);
+  const navigate = useNavigate();
 
-    return (
-        <Card
-
-            className={cn(
-                "group relative h-48 w-2/6 flex flex-col justify-between overflow-hidden transition-all hover:shadow-md",
-            )}
+  return (
+    <Card
+      className={cn(
+        "group relative flex h-48 w-2/6 flex-col justify-between overflow-hidden transition-all hover:shadow-md"
+      )}
+    >
+      <CardContent className="flex h-full w-full items-center justify-center align-middle">
+        <button
+          onClick={() => {
+            addFlow(true).then((id) => {
+              navigate("/flow/" + id);
+            });
+          }}
         >
-                <CardContent className="w-full h-full flex align-middle items-center justify-center">
-            <button onClick={() => {
-              addFlow(true).then((id) => {
-                navigate("/flow/" + id);
-              });
-            }}>
-                    <IconComponent
-                        className={cn(
-                            "h-12 w-12 text-muted-foreground",
-                        )}
-                        name="PlusCircle"
-                    />
-            </button>
-                </CardContent>
-        </Card>
-    );
+          <IconComponent
+            className={cn("h-12 w-12 text-muted-foreground")}
+            name="PlusCircle"
+          />
+        </button>
+      </CardContent>
+    </Card>
+  );
 }
diff --git a/src/frontend/src/components/codeTabsComponent/index.tsx b/src/frontend/src/components/codeTabsComponent/index.tsx
index 8ddb09552..a83a36fc2 100644
--- a/src/frontend/src/components/codeTabsComponent/index.tsx
+++ b/src/frontend/src/components/codeTabsComponent/index.tsx
@@ -126,7 +126,7 @@ export default function CodeTabsComponent({
     <Tabs
       value={activeTab}
       className={
-        "api-modal-tabs m-0 inset-0 " +
+        "api-modal-tabs inset-0 m-0 " +
         (isMessage ? "dark " : "") +
         (dark && isMessage ? "bg-background" : "")
       }
@@ -195,7 +195,7 @@ export default function CodeTabsComponent({
               <SyntaxHighlighter
                 language={tab.language}
                 style={oneDark}
-                className="mt-0 h-full overflow-auto custom-scroll rounded-sm text-left" 
+                className="mt-0 h-full overflow-auto rounded-sm text-left custom-scroll"
               >
                 {tab.code}
               </SyntaxHighlighter>
diff --git a/src/frontend/src/components/exampleComponent/index.tsx b/src/frontend/src/components/exampleComponent/index.tsx
index fa021b299..87f69a52b 100644
--- a/src/frontend/src/components/exampleComponent/index.tsx
+++ b/src/frontend/src/components/exampleComponent/index.tsx
@@ -1,96 +1,88 @@
-import { useEffect, useState } from "react";
-import { getComponent, postLikeComponent } from "../../controllers/API";
-import DeleteConfirmationModal from "../../modals/DeleteConfirmationModal";
-import useAlertStore from "../../stores/alertStore";
+import { useNavigate } from "react-router-dom";
 import useFlowsManagerStore from "../../stores/flowsManagerStore";
-import { useStoreStore } from "../../stores/storeStore";
-import { storeComponent } from "../../types/store";
-import cloneFLowWithParent from "../../utils/storeUtils";
+import { FlowType } from "../../types/flow";
+import { updateIds } from "../../utils/reactflowUtils";
 import { cn } from "../../utils/utils";
 import ShadTooltip from "../ShadTooltipComponent";
 import IconComponent from "../genericIconComponent";
-import { Badge } from "../ui/badge";
 import { Button } from "../ui/button";
 import {
-    Card,
-    CardDescription,
-    CardFooter,
-    CardHeader,
-    CardTitle,
+  Card,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
 } from "../ui/card";
-import { FlowType } from "../../types/flow";
-import { updateIds } from "../../utils/reactflowUtils";
-import { useNavigate } from "react-router-dom";
 
 export default function CollectionCardComponent({
-    flow,
+  flow,
 }: {
-    flow: FlowType;
-    authorized?: boolean;
+  flow: FlowType;
+  authorized?: boolean;
 }) {
-    const addFlow = useFlowsManagerStore((state) => state.addFlow);
-    const navigate = useNavigate();
+  const addFlow = useFlowsManagerStore((state) => state.addFlow);
+  const navigate = useNavigate();
 
-    return (
-        <Card
-            className={cn(
-                "group relative h-48 w-2/6 flex flex-col justify-between overflow-hidden transition-all hover:shadow-md",
-            )}
-        >
-            <div>
-                <CardHeader>
-                    <div>
-                        <CardTitle className="flex w-full items-center justify-between gap-3 text-xl">
-                            {flow.icon && (
-                                <div className="flex-shrink-0 h-7 w-7">
-                                    {flow.icon}
-                                </div>
-                            
-                            )}
-                            {!flow.icon && <IconComponent
-                                className={cn(
-                                    "flex-shrink-0 h-7 w-7 text-flow-icon",
-                                )}
-                                name="Group"
-                            />}
-                            <ShadTooltip content={flow.name}>
-                                <div className="w-full truncate">{flow.name}</div>
-                            </ShadTooltip>
-                        </CardTitle>
-                    </div>
-                    <CardDescription className="pb-2 pt-2">
-                        <ShadTooltip side="bottom" styleClasses="z-50" content={flow.description}>
-                            <div className="truncate-doubleline">{flow.description}</div>
-                        </ShadTooltip>
-                    </CardDescription>
-                </CardHeader>
-            </div>
+  return (
+    <Card
+      className={cn(
+        "group relative flex h-48 w-2/6 flex-col justify-between overflow-hidden transition-all hover:shadow-md"
+      )}
+    >
+      <div>
+        <CardHeader>
+          <div>
+            <CardTitle className="flex w-full items-center justify-between gap-3 text-xl">
+              {flow.icon && (
+                <div className="h-7 w-7 flex-shrink-0">{flow.icon}</div>
+              )}
+              {!flow.icon && (
+                <IconComponent
+                  className={cn("h-7 w-7 flex-shrink-0 text-flow-icon")}
+                  name="Group"
+                />
+              )}
+              <ShadTooltip content={flow.name}>
+                <div className="w-full truncate">{flow.name}</div>
+              </ShadTooltip>
+            </CardTitle>
+          </div>
+          <CardDescription className="pb-2 pt-2">
+            <ShadTooltip
+              side="bottom"
+              styleClasses="z-50"
+              content={flow.description}
+            >
+              <div className="truncate-doubleline">{flow.description}</div>
+            </ShadTooltip>
+          </CardDescription>
+        </CardHeader>
+      </div>
 
-            <CardFooter>
-                <div className="flex w-full items-center justify-between gap-2">
-                    <div className="flex w-full justify-end flex-wrap gap-2">
-                        <Button
-                            onClick={() => {
-                                updateIds(flow.data!)
-                                addFlow(true, flow).then((id) => {
-
-                                    navigate("/flow/" + id);
-                                });
-                            }}
-                            tabIndex={-1}
-                            variant="outline"
-                            size="sm"
-                            className="whitespace-nowrap "
-                        >
-                            <IconComponent
-                                name="ExternalLink"
-                                className="main-page-nav-button select-none"
-                            />
-                            Select Flow
-                        </Button>
-                    </div>
-                </div>
-            </CardFooter>
-        </Card>
-    );
+      <CardFooter>
+        <div className="flex w-full items-center justify-between gap-2">
+          <div className="flex w-full flex-wrap justify-end gap-2">
+            <Button
+              onClick={() => {
+                updateIds(flow.data!);
+                addFlow(true, flow).then((id) => {
+                  navigate("/flow/" + id);
+                });
+              }}
+              tabIndex={-1}
+              variant="outline"
+              size="sm"
+              className="whitespace-nowrap "
+            >
+              <IconComponent
+                name="ExternalLink"
+                className="main-page-nav-button select-none"
+              />
+              Select Flow
+            </Button>
+          </div>
+        </div>
+      </CardFooter>
+    </Card>
+  );
 }
diff --git a/src/frontend/src/components/newChatView/chatMessage/index.tsx b/src/frontend/src/components/newChatView/chatMessage/index.tsx
index 075d5e418..760a9d140 100644
--- a/src/frontend/src/components/newChatView/chatMessage/index.tsx
+++ b/src/frontend/src/components/newChatView/chatMessage/index.tsx
@@ -134,7 +134,7 @@ export default function ChatMessage({
           )}
         </div>
         {!chat.isSend ? (
-          <div className="form-modal-chat-text-position flex-grow min-w-96">
+          <div className="form-modal-chat-text-position min-w-96 flex-grow">
             <div className="form-modal-chat-text">
               {hidden && chat.thought && chat.thought !== "" && (
                 <div
@@ -155,9 +155,9 @@ export default function ChatMessage({
                 />
               )}
               {chat.thought && chat.thought !== "" && !hidden && <br></br>}
-              <div className="w-full flex flex-col">
-                <div className="w-full flex flex-col dark:text-white">
-                  <div className="w-full flex flex-col">
+              <div className="flex w-full flex-col">
+                <div className="flex w-full flex-col dark:text-white">
+                  <div className="flex w-full flex-col">
                     {useMemo(
                       () =>
                         chatMessage === "" && lockChat ? (
@@ -169,7 +169,7 @@ export default function ChatMessage({
                           <Markdown
                             remarkPlugins={[remarkGfm, remarkMath]}
                             rehypePlugins={[rehypeMathjax]}
-                            className="markdown flex flex-col prose text-primary word-break-break-word
+                            className="markdown prose flex flex-col text-primary word-break-break-word
 dark:prose-invert"
                             components={{
                               pre({ node, ...props }) {
diff --git a/src/frontend/src/components/ui/dialog.tsx b/src/frontend/src/components/ui/dialog.tsx
index 31a18855f..e6c99a9b7 100644
--- a/src/frontend/src/components/ui/dialog.tsx
+++ b/src/frontend/src/components/ui/dialog.tsx
@@ -43,7 +43,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "flex flex-col fixed left-[50%] top-[50%] z-50 w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full",
+        "fixed left-[50%] top-[50%] z-50 flex w-full max-w-lg translate-x-[-50%] translate-y-[-50%] flex-col gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full",
         className
       )}
       {...props}
diff --git a/src/frontend/src/constants/alerts_constants.tsx b/src/frontend/src/constants/alerts_constants.tsx
index 205933b4b..0710e3d00 100644
--- a/src/frontend/src/constants/alerts_constants.tsx
+++ b/src/frontend/src/constants/alerts_constants.tsx
@@ -58,4 +58,3 @@ export const FLOW_BUILD_SUCCESS_ALERT = `Flow built successfully`;
 export const SAVE_SUCCESS_ALERT = "Changes saved successfully!";
 
 // Generic Node
-
diff --git a/src/frontend/src/modals/DeleteConfirmationModal/index.tsx b/src/frontend/src/modals/DeleteConfirmationModal/index.tsx
index a1f757985..b2087f40d 100644
--- a/src/frontend/src/modals/DeleteConfirmationModal/index.tsx
+++ b/src/frontend/src/modals/DeleteConfirmationModal/index.tsx
@@ -35,8 +35,7 @@ export default function DeleteConfirmationModal({
           </DialogTitle>
         </DialogHeader>
         <span>
-        Confirm deletion of {description ?? "component"}?
-          <br></br>
+          Confirm deletion of {description ?? "component"}?<br></br>
           Note: This action is irreversible.
         </span>
         <DialogFooter>
diff --git a/src/frontend/src/modals/EditNodeModal/index.tsx b/src/frontend/src/modals/EditNodeModal/index.tsx
index e789e1ab8..619a6f7e2 100644
--- a/src/frontend/src/modals/EditNodeModal/index.tsx
+++ b/src/frontend/src/modals/EditNodeModal/index.tsx
@@ -165,8 +165,19 @@ const EditNodeModal = forwardRef(
                                 )
                             ) ?? false;
                           return (
-                            <TableRow key={index} className={"h-10 " + ((templateParam==="code" && myData.node?.template[templateParam].type==="code") || (templateParam.includes("code") && myData.node?.template[templateParam].proxy) ? " hidden " : "")
-                          }>
+                            <TableRow
+                              key={index}
+                              className={
+                                "h-10 " +
+                                ((templateParam === "code" &&
+                                  myData.node?.template[templateParam].type ===
+                                    "code") ||
+                                (templateParam.includes("code") &&
+                                  myData.node?.template[templateParam].proxy)
+                                  ? " hidden "
+                                  : "")
+                              }
+                            >
                               <TableCell className="truncate p-0 text-center text-sm text-foreground sm:px-3">
                                 <ShadTooltip
                                   content={
diff --git a/src/frontend/src/modals/codeAreaModal/index.tsx b/src/frontend/src/modals/codeAreaModal/index.tsx
index 47f91d4b2..2417724b4 100644
--- a/src/frontend/src/modals/codeAreaModal/index.tsx
+++ b/src/frontend/src/modals/codeAreaModal/index.tsx
@@ -24,9 +24,9 @@ import { postCustomComponent, postValidateCode } from "../../controllers/API";
 import useAlertStore from "../../stores/alertStore";
 import { useDarkStore } from "../../stores/darkStore";
 import useFlowStore from "../../stores/flowStore";
+import { CodeErrorDataTypeAPI } from "../../types/api";
 import { codeAreaModalPropsType } from "../../types/components";
 import BaseModal from "../baseModal";
-import { CodeErrorDataTypeAPI } from "../../types/api";
 
 export default function CodeAreaModal({
   value,
diff --git a/src/frontend/src/modals/shareModal/index.tsx b/src/frontend/src/modals/shareModal/index.tsx
index 7b7667b17..d5ba63c8c 100644
--- a/src/frontend/src/modals/shareModal/index.tsx
+++ b/src/frontend/src/modals/shareModal/index.tsx
@@ -179,7 +179,7 @@ export default function ShareModal({
             </span>
             <br></br>
             <span className=" text-xs text-destructive ">
-            Note: This action is irreversible.
+              Note: This action is irreversible.
             </span>
           </ConfirmationModal.Content>
         </ConfirmationModal>
@@ -204,7 +204,9 @@ export default function ShareModal({
           {children ? children : <></>}
         </BaseModal.Trigger>
         <BaseModal.Header
-          description={`Publish ${is_component ? "your component" : "workflow"} to the Langflow Store.`}
+          description={`Publish ${
+            is_component ? "your component" : "workflow"
+          } to the Langflow Store.`}
         >
           <span className="pr-2">Share</span>
           <IconComponent
@@ -239,7 +241,8 @@ export default function ShareModal({
             </label>
           </div>
           <span className=" text-xs text-destructive ">
-            <b>Attention:</b> API keys in specified fields are automatically removed upon sharing.
+            <b>Attention:</b> API keys in specified fields are automatically
+            removed upon sharing.
           </span>
         </BaseModal.Content>
 
diff --git a/src/frontend/src/pages/MainPage/components/components/index.tsx b/src/frontend/src/pages/MainPage/components/components/index.tsx
index 234852388..65189fa8a 100644
--- a/src/frontend/src/pages/MainPage/components/components/index.tsx
+++ b/src/frontend/src/pages/MainPage/components/components/index.tsx
@@ -14,7 +14,6 @@ import {
 import useAlertStore from "../../../../stores/alertStore";
 import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
 import { FlowType } from "../../../../types/flow";
-import { STARTER_FOLDER_NAME } from "../../../../constants/constants";
 
 export default function ComponentsComponent({
   is_component = true,
diff --git a/src/frontend/src/pages/MainPage/index.tsx b/src/frontend/src/pages/MainPage/index.tsx
index 2574f03af..c6e233521 100644
--- a/src/frontend/src/pages/MainPage/index.tsx
+++ b/src/frontend/src/pages/MainPage/index.tsx
@@ -2,6 +2,8 @@ import { Group, ToyBrick } from "lucide-react";
 import { useEffect, useState } from "react";
 import { Outlet, useLocation, useNavigate } from "react-router-dom";
 import DropdownButton from "../../components/DropdownButtonComponent";
+import NewFlowCardComponent from "../../components/NewFlowCardComponent";
+import ExampleCardComponent from "../../components/exampleComponent";
 import IconComponent from "../../components/genericIconComponent";
 import PageLayout from "../../components/pageLayout";
 import SidebarNav from "../../components/sidebarComponent";
@@ -11,12 +13,10 @@ import {
   MY_COLLECTION_DESC,
   USER_PROJECTS_HEADER,
 } from "../../constants/constants";
+import BaseModal from "../../modals/baseModal";
 import useAlertStore from "../../stores/alertStore";
 import useFlowsManagerStore from "../../stores/flowsManagerStore";
 import { downloadFlows } from "../../utils/reactflowUtils";
-import BaseModal from "../../modals/baseModal";
-import ExampleCardComponent from "../../components/exampleComponent";
-import NewFlowCardComponent from "../../components/NewFlowCardComponent";
 export default function HomePage(): JSX.Element {
   const addFlow = useFlowsManagerStore((state) => state.addFlow);
   const uploadFlow = useFlowsManagerStore((state) => state.uploadFlow);
@@ -41,8 +41,9 @@ export default function HomePage(): JSX.Element {
         })
           .then((id) => {
             setSuccessData({
-              title: `${is_component ? "Component" : "Flow"
-                } uploaded successfully`,
+              title: `${
+                is_component ? "Component" : "Flow"
+              } uploaded successfully`,
             });
             if (!is_component) navigate("/flow/" + id);
           })
@@ -117,24 +118,25 @@ export default function HomePage(): JSX.Element {
         </div>
       </div>
       <BaseModal open={openModal} setOpen={setOpenModal}>
-        <BaseModal.Header description={"Select a template or start from scratch"}>
+        <BaseModal.Header
+          description={"Select a template or start from scratch"}
+        >
           <span className="pr-2" data-testid="modal-title">
             Create a New Flow
           </span>
           <IconComponent
             name="Group"
-            className="h-6 w-6 text-primary stroke-2 "
+            className="h-6 w-6 stroke-2 text-primary "
             aria-hidden="true"
           />
         </BaseModal.Header>
         <BaseModal.Content>
-          <div className="flex flex-wrap w-full h-full p-4 gap-3 overflow-auto custom-scroll">
+          <div className="flex h-full w-full flex-wrap gap-3 overflow-auto p-4 custom-scroll">
             {examples.map((example, idx) => {
-              return( 
-              <ExampleCardComponent key={idx} flow={example} />)
+              return <ExampleCardComponent key={idx} flow={example} />;
             })}
-            <NewFlowCardComponent/>
-            </div>
+            <NewFlowCardComponent />
+          </div>
         </BaseModal.Content>
       </BaseModal>
     </PageLayout>
diff --git a/src/frontend/src/stores/flowsManagerStore.ts b/src/frontend/src/stores/flowsManagerStore.ts
index d993f40b0..2c9fca428 100644
--- a/src/frontend/src/stores/flowsManagerStore.ts
+++ b/src/frontend/src/stores/flowsManagerStore.ts
@@ -2,6 +2,7 @@ import { AxiosError } from "axios";
 import { cloneDeep } from "lodash";
 import { Edge, Node, Viewport, XYPosition } from "reactflow";
 import { create } from "zustand";
+import { STARTER_FOLDER_NAME } from "../constants/constants";
 import {
   deleteFlowFromDatabase,
   readFlowsFromDatabase,
@@ -25,7 +26,6 @@ import useAlertStore from "./alertStore";
 import { useDarkStore } from "./darkStore";
 import useFlowStore from "./flowStore";
 import { useTypesStore } from "./typesStore";
-import { STARTER_FOLDER_NAME } from "../constants/constants";
 
 let saveTimeoutId: NodeJS.Timeout | null = null;
 
@@ -38,7 +38,7 @@ const past = {};
 const future = {};
 
 const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
-  examples:[],
+  examples: [],
   setExamples: (examples: FlowType[]) => {
     set({ examples });
   },
@@ -67,8 +67,16 @@ const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
         .then((dbData) => {
           if (dbData) {
             const { data, flows } = processFlows(dbData, false);
-            get().setExamples(flows.filter(f=>(f.folder===STARTER_FOLDER_NAME && !f.user_id)));
-            get().setFlows(flows.filter(f=>!(f.folder===STARTER_FOLDER_NAME && !f.user_id)));
+            get().setExamples(
+              flows.filter(
+                (f) => f.folder === STARTER_FOLDER_NAME && !f.user_id
+              )
+            );
+            get().setFlows(
+              flows.filter(
+                (f) => !(f.folder === STARTER_FOLDER_NAME && !f.user_id)
+              )
+            );
             useTypesStore.setState((state) => ({
               data: { ...state.data, ["saved_components"]: data },
             }));
diff --git a/src/frontend/src/types/flow/index.ts b/src/frontend/src/types/flow/index.ts
index 6c7c941ad..8b259186a 100644
--- a/src/frontend/src/types/flow/index.ts
+++ b/src/frontend/src/types/flow/index.ts
@@ -15,8 +15,8 @@ export type FlowType = {
   parent?: string;
   folder?: string;
   user_id?: string;
-  icon?:string;
-  icon_bg_color?:string;
+  icon?: string;
+  icon_bg_color?: string;
 };
 
 export type NodeType = {