diff --git a/src/frontend/src/CustomNodes/NoteNode/NoteToolbarComponent/index.tsx b/src/frontend/src/CustomNodes/NoteNode/NoteToolbarComponent/index.tsx
index 160da7b58b1b..c1bb0746bea7 100644
--- a/src/frontend/src/CustomNodes/NoteNode/NoteToolbarComponent/index.tsx
+++ b/src/frontend/src/CustomNodes/NoteNode/NoteToolbarComponent/index.tsx
@@ -1,18 +1,11 @@
 import ShadTooltip from "@/components/common/shadTooltipComponent";
-import { Button } from "@/components/ui/button";
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
 } from "@/components/ui/popover";
-import {
-  Select,
-  SelectContentWithoutPortal,
-  SelectItem,
-  SelectTrigger,
-} from "@/components/ui/select-custom";
+import { Select, SelectTrigger } from "@/components/ui/select-custom";
 import { COLOR_OPTIONS } from "@/constants/constants";
-import ToolbarSelectItem from "@/pages/FlowPage/components/nodeToolbarComponent/toolbarSelectItem";
 import useAlertStore from "@/stores/alertStore";
 import useFlowStore from "@/stores/flowStore";
 import useFlowsManagerStore from "@/stores/flowsManagerStore";
@@ -20,9 +13,12 @@ import { useShortcutsStore } from "@/stores/shortcuts";
 import { noteDataType } from "@/types/flow";
 import { classNames, cn, openInNewTab } from "@/utils/utils";
 import { cloneDeep } from "lodash";
+import { memo, useCallback, useMemo } from "react";
 import IconComponent from "../../../components/common/genericIconComponent";
+import { ColorPickerButtons } from "../components/color-picker-buttons";
+import { SelectItems } from "../components/select-items";
 
-export default function NoteToolbarComponent({
+const NoteToolbarComponent = memo(function NoteToolbarComponent({
   data,
   bgColor,
 }: {
@@ -30,191 +26,142 @@ export default function NoteToolbarComponent({
   bgColor: string;
 }) {
   const setNoticeData = useAlertStore((state) => state.setNoticeData);
-  const nodes = useFlowStore((state) => state.nodes);
-  const setLastCopiedSelection = useFlowStore(
-    (state) => state.setLastCopiedSelection,
-  );
-  const paste = useFlowStore((state) => state.paste);
-  const shortcuts = useShortcutsStore((state) => state.shortcuts);
+
+  // Combine multiple store selectors into one to reduce re-renders
+  const { nodes, setLastCopiedSelection, paste, setNode, deleteNode } =
+    useFlowStore(
+      useCallback(
+        (state) => ({
+          nodes: state.nodes,
+          setLastCopiedSelection: state.setLastCopiedSelection,
+          paste: state.paste,
+          setNode: state.setNode,
+          deleteNode: state.deleteNode,
+        }),
+        [],
+      ),
+    );
+
   const takeSnapshot = useFlowsManagerStore((state) => state.takeSnapshot);
-  const deleteNode = useFlowStore((state) => state.deleteNode);
-  const setNode = useFlowStore((state) => state.setNode);
+  const shortcuts = useShortcutsStore((state) => state.shortcuts);
 
-  function openDocs() {
+  const openDocs = useCallback(() => {
     if (data.node?.documentation) {
       return openInNewTab(data.node?.documentation);
     }
     setNoticeData({
       title: `${data.id} docs is not available at the moment.`,
     });
-  }
+  }, [data.node?.documentation, data.id, setNoticeData]);
+
+  const handleSelectChange = useCallback(
+    (event: string) => {
+      switch (event) {
+        case "documentation":
+          openDocs();
+          break;
+        case "delete":
+          takeSnapshot();
+          deleteNode(data.id);
+          break;
+        case "copy":
+          const node = nodes.filter((node) => node.id === data.id);
+          setLastCopiedSelection({ nodes: cloneDeep(node), edges: [] });
+          break;
+        case "duplicate":
+          const targetNode = nodes.find((node) => node.id === data.id);
+          if (targetNode) {
+            paste(
+              {
+                nodes: [targetNode],
+                edges: [],
+              },
+              {
+                x: 50,
+                y: 10,
+                paneX: targetNode.position.x,
+                paneY: targetNode.position.y,
+              },
+            );
+          }
+          break;
+      }
+    },
+    [
+      openDocs,
+      takeSnapshot,
+      deleteNode,
+      data.id,
+      nodes,
+      setLastCopiedSelection,
+      paste,
+    ],
+  );
+
+  // Memoize the color picker background style
+  const colorPickerStyle = useMemo(
+    () => ({
+      backgroundColor: COLOR_OPTIONS[bgColor] ?? "#00000000",
+    }),
+    [bgColor],
+  );
 
-  const handleSelectChange = (event) => {
-    switch (event) {
-      case "documentation":
-        openDocs();
-        break;
-      case "delete":
-        takeSnapshot();
-        deleteNode(data.id);
-        break;
-      case "copy":
-        const node = nodes.filter((node) => node.id === data.id);
-        setLastCopiedSelection({ nodes: cloneDeep(node), edges: [] });
-        break;
-      case "duplicate":
-        paste(
-          {
-            nodes: [nodes.find((node) => node.id === data.id)!],
-            edges: [],
-          },
-          {
-            x: 50,
-            y: 10,
-            paneX: nodes.find((node) => node.id === data.id)?.position.x,
-            paneY: nodes.find((node) => node.id === data.id)?.position.y,
-          },
-        );
-        break;
-    }
-  };
-  // the deafult value is allways the first one if none is provided
   return (
-    <>
-      <div className="w-26 noflow nowheel nopan nodelete nodrag h-10">
-        <span className="isolate inline-flex rounded-md shadow-sm">
-          <Popover>
-            <ShadTooltip content="Pick Color">
-              <PopoverTrigger>
-                <div>
+    <div className="w-26 noflow nowheel nopan nodelete nodrag h-10">
+      <span className="isolate inline-flex rounded-md shadow-sm">
+        <Popover>
+          <ShadTooltip content="Pick Color">
+            <PopoverTrigger>
+              <div>
+                <div
+                  data-testid="color_picker"
+                  className="relative inline-flex items-center rounded-l-md bg-background px-2 py-2 text-foreground shadow-md transition-all duration-500 ease-in-out hover:bg-muted focus:z-10"
+                >
                   <div
-                    data-testid="color_picker"
-                    className="relative inline-flex items-center rounded-l-md bg-background px-2 py-2 text-foreground shadow-md transition-all duration-500 ease-in-out hover:bg-muted focus:z-10"
-                  >
-                    <div
-                      style={{
-                        backgroundColor: COLOR_OPTIONS[bgColor] ?? "#00000000",
-                      }}
-                      className={cn(
-                        "h-4 w-4 rounded-full",
-                        COLOR_OPTIONS[bgColor] === null && "border",
-                      )}
-                    ></div>
-                  </div>
-                </div>
-              </PopoverTrigger>
-            </ShadTooltip>
-            <PopoverContent side="top" className="w-fit px-2 py-2">
-              <div className="flew-row flex gap-3">
-                {Object.entries(COLOR_OPTIONS).map(([color, code]) => {
-                  return (
-                    <Button
-                      data-testid={`color_picker_button_${color}`}
-                      unstyled
-                      key={color}
-                      onClick={() => {
-                        setNode(data.id, (old) => ({
-                          ...old,
-                          data: {
-                            ...old.data,
-                            node: {
-                              ...old.data.node,
-                              template: {
-                                ...old.data.node?.template,
-                                backgroundColor: color,
-                              },
-                            },
-                          },
-                        }));
-                      }}
-                    >
-                      <div
-                        className={cn(
-                          "h-4 w-4 rounded-full hover:border hover:border-ring",
-                          bgColor === color ? "border-2 border-blue-500" : "",
-                          code === null && "border",
-                        )}
-                        style={{
-                          backgroundColor: code ?? "#00000000",
-                        }}
-                      ></div>
-                    </Button>
-                  );
-                })}
-              </div>
-            </PopoverContent>
-          </Popover>
-          <Select onValueChange={handleSelectChange} value="">
-            <SelectTrigger>
-              <ShadTooltip content="Show More" side="top">
-                <div>
-                  <div
-                    data-testid="more-options-modal"
-                    className={classNames(
-                      "relative -ml-px inline-flex h-8 w-[2rem] items-center rounded-r-md bg-background text-foreground shadow-md transition-all duration-500 ease-in-out hover:bg-muted focus:z-10",
+                    style={colorPickerStyle}
+                    className={cn(
+                      "h-4 w-4 rounded-full",
+                      COLOR_OPTIONS[bgColor] === null && "border",
                     )}
-                  >
-                    <IconComponent
-                      name="MoreHorizontal"
-                      className="relative left-2 h-4 w-4"
-                    />
-                  </div>
+                  />
                 </div>
-              </ShadTooltip>
-            </SelectTrigger>
-            <SelectContentWithoutPortal>
-              <SelectItem value={"duplicate"}>
-                <ToolbarSelectItem
-                  shortcut={
-                    shortcuts.find((obj) => obj.name === "Duplicate")?.shortcut!
-                  }
-                  value={"Duplicate"}
-                  icon={"Copy"}
-                  dataTestId="copy-button-modal"
-                />
-              </SelectItem>
-              <SelectItem value={"copy"}>
-                <ToolbarSelectItem
-                  shortcut={
-                    shortcuts.find((obj) => obj.name === "Copy")?.shortcut!
-                  }
-                  value={"Copy"}
-                  icon={"Clipboard"}
-                  dataTestId="copy-button-modal"
-                />
-              </SelectItem>
-              <SelectItem
-                value={"documentation"}
-                disabled={data.node?.documentation === ""}
-              >
-                <ToolbarSelectItem
-                  shortcut={
-                    shortcuts.find((obj) => obj.name === "Docs")?.shortcut!
-                  }
-                  value={"Docs"}
-                  icon={"FileText"}
-                  dataTestId="docs-button-modal"
-                />
-              </SelectItem>
-              <SelectItem value={"delete"} className="focus:bg-red-400/[.20]">
-                <div className="font-red flex text-status-red">
+              </div>
+            </PopoverTrigger>
+          </ShadTooltip>
+          <PopoverContent side="top" className="w-fit px-2 py-2">
+            <ColorPickerButtons
+              bgColor={bgColor}
+              data={data}
+              setNode={setNode}
+            />
+          </PopoverContent>
+        </Popover>
+
+        <Select onValueChange={handleSelectChange} value="">
+          <SelectTrigger>
+            <ShadTooltip content="Show More" side="top">
+              <div>
+                <div
+                  data-testid="more-options-modal"
+                  className={classNames(
+                    "relative -ml-px inline-flex h-8 w-[2rem] items-center rounded-r-md bg-background text-foreground shadow-md transition-all duration-500 ease-in-out hover:bg-muted focus:z-10",
+                  )}
+                >
                   <IconComponent
-                    name="Trash2"
-                    className="relative top-0.5 mr-2 h-4 w-4"
-                  />{" "}
-                  <span className="">Delete</span>{" "}
-                  <span className="absolute right-2 top-2 flex items-center justify-center rounded-sm px-1 py-[0.2]">
-                    <IconComponent
-                      name="Delete"
-                      className="h-4 w-4 stroke-2 text-red-400"
-                    ></IconComponent>
-                  </span>
+                    name="MoreHorizontal"
+                    className="relative left-2 h-4 w-4"
+                  />
                 </div>
-              </SelectItem>
-            </SelectContentWithoutPortal>
-          </Select>
-        </span>
-      </div>
-    </>
+              </div>
+            </ShadTooltip>
+          </SelectTrigger>
+          <SelectItems shortcuts={shortcuts} data={data} />
+        </Select>
+      </span>
+    </div>
   );
-}
+});
+
+NoteToolbarComponent.displayName = "NoteToolbarComponent";
+
+export default NoteToolbarComponent;
diff --git a/src/frontend/src/CustomNodes/NoteNode/components/color-picker-buttons.tsx b/src/frontend/src/CustomNodes/NoteNode/components/color-picker-buttons.tsx
new file mode 100644
index 000000000000..5d9ede5808f6
--- /dev/null
+++ b/src/frontend/src/CustomNodes/NoteNode/components/color-picker-buttons.tsx
@@ -0,0 +1,56 @@
+import { Button } from "@/components/ui/button";
+import { COLOR_OPTIONS } from "@/constants/constants";
+import { noteDataType } from "@/types/flow";
+import { cn } from "@/utils/utils";
+
+import { memo } from "react";
+
+export const ColorPickerButtons = memo(
+  ({
+    bgColor,
+    data,
+    setNode,
+  }: {
+    bgColor: string;
+    data: noteDataType;
+    setNode: (id: string, updater: any) => void;
+  }) => (
+    <div className="flew-row flex gap-3">
+      {Object.entries(COLOR_OPTIONS).map(([color, code]) => (
+        <Button
+          data-testid={`color_picker_button_${color}`}
+          unstyled
+          key={color}
+          onClick={() => {
+            setNode(data.id, (old) => ({
+              ...old,
+              data: {
+                ...old.data,
+                node: {
+                  ...old.data.node,
+                  template: {
+                    ...old.data.node?.template,
+                    backgroundColor: color,
+                  },
+                },
+              },
+            }));
+          }}
+        >
+          <div
+            className={cn(
+              "h-4 w-4 rounded-full hover:border hover:border-ring",
+              bgColor === color ? "border-2 border-blue-500" : "",
+              code === null && "border",
+            )}
+            style={{
+              backgroundColor: code ?? "#00000000",
+            }}
+          />
+        </Button>
+      ))}
+    </div>
+  ),
+);
+
+ColorPickerButtons.displayName = "ColorPickerButtons";
diff --git a/src/frontend/src/CustomNodes/NoteNode/components/select-items.tsx b/src/frontend/src/CustomNodes/NoteNode/components/select-items.tsx
new file mode 100644
index 000000000000..041c3691a7e2
--- /dev/null
+++ b/src/frontend/src/CustomNodes/NoteNode/components/select-items.tsx
@@ -0,0 +1,60 @@
+import { ForwardedIconComponent } from "@/components/common/genericIconComponent";
+import { SelectItem } from "@/components/ui/select";
+import { SelectContentWithoutPortal } from "@/components/ui/select-custom";
+import ToolbarSelectItem from "@/pages/FlowPage/components/nodeToolbarComponent/toolbarSelectItem";
+import { noteDataType } from "@/types/flow";
+
+import { memo } from "react";
+
+export const SelectItems = memo(
+  ({ shortcuts, data }: { shortcuts: any[]; data: noteDataType }) => (
+    <SelectContentWithoutPortal>
+      <SelectItem value="duplicate">
+        <ToolbarSelectItem
+          shortcut={
+            shortcuts.find((obj) => obj.name === "Duplicate")?.shortcut!
+          }
+          value="Duplicate"
+          icon="Copy"
+          dataTestId="copy-button-modal"
+        />
+      </SelectItem>
+      <SelectItem value="copy">
+        <ToolbarSelectItem
+          shortcut={shortcuts.find((obj) => obj.name === "Copy")?.shortcut!}
+          value="Copy"
+          icon="Clipboard"
+          dataTestId="copy-button-modal"
+        />
+      </SelectItem>
+      <SelectItem
+        value="documentation"
+        disabled={data.node?.documentation === ""}
+      >
+        <ToolbarSelectItem
+          shortcut={shortcuts.find((obj) => obj.name === "Docs")?.shortcut!}
+          value="Docs"
+          icon="FileText"
+          dataTestId="docs-button-modal"
+        />
+      </SelectItem>
+      <SelectItem value="delete" className="focus:bg-red-400/[.20]">
+        <div className="font-red flex text-status-red">
+          <ForwardedIconComponent
+            name="Trash2"
+            className="relative top-0.5 mr-2 h-4 w-4"
+          />
+          <span>Delete</span>
+          <span className="absolute right-2 top-2 flex items-center justify-center rounded-sm px-1 py-[0.2]">
+            <ForwardedIconComponent
+              name="Delete"
+              className="h-4 w-4 stroke-2 text-red-400"
+            />
+          </span>
+        </div>
+      </SelectItem>
+    </SelectContentWithoutPortal>
+  ),
+);
+
+SelectItems.displayName = "SelectItems";
diff --git a/src/frontend/src/components/common/shadTooltipComponent/index.tsx b/src/frontend/src/components/common/shadTooltipComponent/index.tsx
index e790d816af21..3ed2c74f53ec 100644
--- a/src/frontend/src/components/common/shadTooltipComponent/index.tsx
+++ b/src/frontend/src/components/common/shadTooltipComponent/index.tsx
@@ -1,54 +1,97 @@
-import React, { forwardRef } from "react";
+import React, { forwardRef, memo, useMemo } from "react";
 import { ShadToolTipType } from "../../../types/components";
 import { cn } from "../../../utils/utils";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../../ui/tooltip";
 
-const ShadTooltip = forwardRef<HTMLDivElement, ShadToolTipType>(
-  (
+// Extract static styles
+const BASE_TOOLTIP_CLASSES =
+  "z-[99] max-w-96 bg-tooltip text-[12px] text-tooltip-foreground";
+
+// Memoize the tooltip content component
+const MemoizedTooltipContent = memo(
+  forwardRef<
+    HTMLDivElement,
     {
-      content,
-      side,
-      asChild = true,
-      children,
-      styleClasses,
-      delayDuration = 500,
-      open,
-      align,
-      setOpen,
-      avoidCollisions = false,
-    },
-    ref,
-  ) => {
-    if (!content) {
-      return <>{children}</>;
+      className?: string;
+      side?: ShadToolTipType["side"];
+      avoidCollisions?: boolean;
+      align?: ShadToolTipType["align"];
+      children: React.ReactNode;
     }
+  >((props, ref) => (
+    <TooltipContent
+      ref={ref}
+      className={props.className}
+      side={props.side}
+      avoidCollisions={props.avoidCollisions}
+      align={props.align}
+      sticky="always"
+    >
+      {props.children}
+    </TooltipContent>
+  )),
+);
+
+MemoizedTooltipContent.displayName = "MemoizedTooltipContent";
+
+// Memoize the main tooltip component
+const ShadTooltip = memo(
+  forwardRef<HTMLDivElement, ShadToolTipType>(
+    (
+      {
+        content,
+        side,
+        asChild = true,
+        children,
+        styleClasses,
+        delayDuration = 500,
+        open,
+        align,
+        setOpen,
+        avoidCollisions = false,
+      },
+      ref,
+    ) => {
+      // Early return if no content
+      if (!content) {
+        return children;
+      }
 
-    return (
-      <Tooltip
-        defaultOpen={!children}
-        open={open}
-        onOpenChange={setOpen}
-        delayDuration={delayDuration}
-      >
-        <TooltipTrigger asChild={asChild}>{children}</TooltipTrigger>
-        <TooltipContent
-          ref={ref}
-          className={cn(
-            "z-[99] max-w-96 bg-tooltip text-[12px] text-tooltip-foreground",
-            styleClasses,
-          )}
-          side={side}
-          avoidCollisions={avoidCollisions}
-          align={align}
-          sticky="always"
-        >
-          {content}
-        </TooltipContent>
-      </Tooltip>
-    );
-  },
+      // Memoize className concatenation
+      const tooltipClassName = useMemo(
+        () => cn(BASE_TOOLTIP_CLASSES, styleClasses),
+        [styleClasses],
+      );
+
+      // Memoize tooltip props
+      const tooltipProps = useMemo(
+        () => ({
+          defaultOpen: !children,
+          open,
+          onOpenChange: setOpen,
+          delayDuration,
+        }),
+        [children, open, setOpen, delayDuration],
+      );
+
+      return (
+        <Tooltip {...tooltipProps}>
+          <TooltipTrigger asChild={asChild}>{children}</TooltipTrigger>
+          <MemoizedTooltipContent
+            ref={ref}
+            className={tooltipClassName}
+            side={side}
+            avoidCollisions={avoidCollisions}
+            align={align}
+          >
+            {content}
+          </MemoizedTooltipContent>
+        </Tooltip>
+      );
+    },
+  ),
 );
 
+// Add display name for dev tools
 ShadTooltip.displayName = "ShadTooltip";
-
 export default ShadTooltip;
diff --git a/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/categoryDisclouse/index.tsx b/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/categoryDisclouse/index.tsx
new file mode 100644
index 000000000000..bdb1cf317bf3
--- /dev/null
+++ b/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/categoryDisclouse/index.tsx
@@ -0,0 +1,97 @@
+import { ForwardedIconComponent } from "@/components/common/genericIconComponent";
+import {
+  Disclosure,
+  DisclosureContent,
+  DisclosureTrigger,
+} from "@/components/ui/disclosure";
+import { SidebarMenuButton, SidebarMenuItem } from "@/components/ui/sidebar";
+import { APIClassType } from "@/types/api";
+import { memo, useCallback } from "react";
+import SidebarItemsList from "../sidebarItemsList";
+
+export const CategoryDisclosure = memo(function CategoryDisclosure({
+  item,
+  openCategories,
+  setOpenCategories,
+  dataFilter,
+  nodeColors,
+  chatInputAdded,
+  onDragStart,
+  sensitiveSort,
+}: {
+  item: any;
+  openCategories: string[];
+  setOpenCategories;
+  dataFilter: any;
+  nodeColors: any;
+  chatInputAdded: boolean;
+  onDragStart: (
+    event: React.DragEvent<any>,
+    data: { type: string; node?: APIClassType },
+  ) => void;
+  sensitiveSort: (a: any, b: any) => number;
+}) {
+  const handleKeyDownInput = useCallback(
+    (e: React.KeyboardEvent<HTMLDivElement>) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        setOpenCategories((prev) =>
+          prev.includes(item.name)
+            ? prev.filter((cat) => cat !== item.name)
+            : [...prev, item.name],
+        );
+      }
+    },
+    [item.name, setOpenCategories],
+  );
+
+  return (
+    <Disclosure
+      open={openCategories.includes(item.name)}
+      onOpenChange={(isOpen) => {
+        setOpenCategories((prev) =>
+          isOpen
+            ? [...prev, item.name]
+            : prev.filter((cat) => cat !== item.name),
+        );
+      }}
+    >
+      <SidebarMenuItem>
+        <DisclosureTrigger className="group/collapsible">
+          <SidebarMenuButton asChild>
+            <div
+              data-testid={`disclosure-${item.display_name.toLocaleLowerCase()}`}
+              tabIndex={0}
+              onKeyDown={handleKeyDownInput}
+              className="flex cursor-pointer items-center gap-2"
+            >
+              <ForwardedIconComponent
+                name={item.icon}
+                className="h-4 w-4 group-aria-expanded/collapsible:text-accent-pink-foreground"
+              />
+              <span className="flex-1 group-aria-expanded/collapsible:font-semibold">
+                {item.display_name}
+              </span>
+              <ForwardedIconComponent
+                name="ChevronRight"
+                className="-mr-1 h-4 w-4 text-muted-foreground transition-all group-aria-expanded/collapsible:rotate-90"
+              />
+            </div>
+          </SidebarMenuButton>
+        </DisclosureTrigger>
+        <DisclosureContent>
+          <SidebarItemsList
+            item={item}
+            dataFilter={dataFilter}
+            nodeColors={nodeColors}
+            chatInputAdded={chatInputAdded}
+            onDragStart={onDragStart}
+            sensitiveSort={sensitiveSort}
+          />
+        </DisclosureContent>
+      </SidebarMenuItem>
+    </Disclosure>
+  );
+});
+
+CategoryDisclosure.displayName = "CategoryDisclosure";
diff --git a/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/categoryGroup/index.tsx b/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/categoryGroup/index.tsx
new file mode 100644
index 000000000000..3756e37bf87c
--- /dev/null
+++ b/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/categoryGroup/index.tsx
@@ -0,0 +1,57 @@
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarMenu,
+} from "@/components/ui/sidebar";
+import { memo } from "react";
+import { CategoryGroupProps } from "../../types";
+import { CategoryDisclosure } from "../categoryDisclouse";
+
+export const CategoryGroup = memo(function CategoryGroup({
+  dataFilter,
+  sortedCategories,
+  CATEGORIES,
+  openCategories,
+  setOpenCategories,
+  search,
+  nodeColors,
+  chatInputAdded,
+  onDragStart,
+  sensitiveSort,
+}: CategoryGroupProps) {
+  return (
+    <SidebarGroup className="p-3">
+      <SidebarGroupContent>
+        <SidebarMenu>
+          {CATEGORIES.toSorted(
+            (a, b) =>
+              (search !== "" ? sortedCategories : CATEGORIES).findIndex(
+                (value) => value === a.name,
+              ) -
+              (search !== "" ? sortedCategories : CATEGORIES).findIndex(
+                (value) => value === b.name,
+              ),
+          ).map(
+            (item) =>
+              dataFilter[item.name] &&
+              Object.keys(dataFilter[item.name]).length > 0 && (
+                <CategoryDisclosure
+                  key={item.name}
+                  item={item}
+                  openCategories={openCategories}
+                  setOpenCategories={setOpenCategories}
+                  dataFilter={dataFilter}
+                  nodeColors={nodeColors}
+                  chatInputAdded={chatInputAdded}
+                  onDragStart={onDragStart}
+                  sensitiveSort={sensitiveSort}
+                />
+              ),
+          )}
+        </SidebarMenu>
+      </SidebarGroupContent>
+    </SidebarGroup>
+  );
+});
+
+CategoryGroup.displayName = "CategoryGroup";
diff --git a/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/searchInput/index.tsx b/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/searchInput/index.tsx
new file mode 100644
index 000000000000..b657205aca8b
--- /dev/null
+++ b/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/searchInput/index.tsx
@@ -0,0 +1,50 @@
+import { ForwardedIconComponent } from "@/components/common/genericIconComponent";
+import { Input } from "@/components/ui/input";
+import { memo } from "react";
+import ShortcutDisplay from "../../../nodeToolbarComponent/shortcutDisplay";
+
+export const SearchInput = memo(function SearchInput({
+  searchInputRef,
+  isInputFocused,
+  search,
+  handleInputFocus,
+  handleInputBlur,
+  handleInputChange,
+}: {
+  searchInputRef: React.RefObject<HTMLInputElement>;
+  isInputFocused: boolean;
+  search: string;
+  handleInputFocus: (event: React.FocusEvent<HTMLInputElement>) => void;
+  handleInputBlur: (event: React.FocusEvent<HTMLInputElement>) => void;
+  handleInputChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+}) {
+  return (
+    <div className="relative w-full flex-1">
+      <ForwardedIconComponent
+        name="Search"
+        className="absolute inset-y-0 left-2 top-1/2 h-4 w-4 -translate-y-1/2 text-primary"
+      />
+      <Input
+        ref={searchInputRef}
+        type="search"
+        data-testid="sidebar-search-input"
+        className="w-full rounded-lg bg-background pl-8 text-sm"
+        placeholder=""
+        onFocus={handleInputFocus}
+        onBlur={handleInputBlur}
+        onChange={handleInputChange}
+        value={search}
+      />
+      {!isInputFocused && search === "" && (
+        <div className="pointer-events-none absolute inset-y-0 left-8 top-1/2 flex w-4/5 -translate-y-1/2 items-center justify-between gap-2 text-sm text-muted-foreground">
+          Search{" "}
+          <span>
+            <ShortcutDisplay sidebar shortcut="/" />
+          </span>
+        </div>
+      )}
+    </div>
+  );
+});
+
+SearchInput.displayName = "SearchInput";
diff --git a/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/sidebarHeader/index.tsx b/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/sidebarHeader/index.tsx
new file mode 100644
index 000000000000..448085d89722
--- /dev/null
+++ b/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/sidebarHeader/index.tsx
@@ -0,0 +1,92 @@
+import {
+  Disclosure,
+  DisclosureContent,
+  DisclosureTrigger,
+} from "@/components/ui/disclosure";
+
+import { ForwardedIconComponent } from "@/components/common/genericIconComponent";
+import ShadTooltip from "@/components/common/shadTooltipComponent";
+import { Button } from "@/components/ui/button";
+import { SidebarHeader, SidebarTrigger } from "@/components/ui/sidebar";
+import { memo } from "react";
+import { SidebarFilterComponent } from "../../../extraSidebarComponent/sidebarFilterComponent";
+import { SidebarHeaderComponentProps } from "../../types";
+import FeatureToggles from "../featureTogglesComponent";
+import { SearchInput } from "../searchInput";
+
+export const SidebarHeaderComponent = memo(function SidebarHeaderComponent({
+  showConfig,
+  setShowConfig,
+  showBeta,
+  setShowBeta,
+  showLegacy,
+  setShowLegacy,
+  searchInputRef,
+  isInputFocused,
+  search,
+  handleInputFocus,
+  handleInputBlur,
+  handleInputChange,
+  filterType,
+  setFilterEdge,
+  setFilterData,
+  data,
+}: SidebarHeaderComponentProps) {
+  return (
+    <SidebarHeader className="flex w-full flex-col gap-4 p-4 pb-1">
+      <Disclosure open={showConfig} onOpenChange={setShowConfig}>
+        <div className="flex w-full items-center gap-2">
+          <SidebarTrigger className="text-muted-foreground">
+            <ForwardedIconComponent name="PanelLeftClose" />
+          </SidebarTrigger>
+          <h3 className="flex-1 text-sm font-semibold">Components</h3>
+          <DisclosureTrigger>
+            <div>
+              <ShadTooltip content="Component settings" styleClasses="z-50">
+                <Button
+                  variant={showConfig ? "ghostActive" : "ghost"}
+                  size="iconMd"
+                  data-testid="sidebar-options-trigger"
+                >
+                  <ForwardedIconComponent
+                    name="SlidersHorizontal"
+                    className="h-4 w-4"
+                  />
+                </Button>
+              </ShadTooltip>
+            </div>
+          </DisclosureTrigger>
+        </div>
+        <DisclosureContent>
+          <FeatureToggles
+            showBeta={showBeta}
+            setShowBeta={setShowBeta}
+            showLegacy={showLegacy}
+            setShowLegacy={setShowLegacy}
+          />
+        </DisclosureContent>
+      </Disclosure>
+      <SearchInput
+        searchInputRef={searchInputRef}
+        isInputFocused={isInputFocused}
+        search={search}
+        handleInputFocus={handleInputFocus}
+        handleInputBlur={handleInputBlur}
+        handleInputChange={handleInputChange}
+      />
+      {filterType && (
+        <SidebarFilterComponent
+          isInput={!!filterType.source}
+          type={filterType.type}
+          color={filterType.color}
+          resetFilters={() => {
+            setFilterEdge([]);
+            setFilterData(data);
+          }}
+        />
+      )}
+    </SidebarHeader>
+  );
+});
+
+SidebarHeaderComponent.displayName = "SidebarHeaderComponent";
diff --git a/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/index.tsx
index 93ab28e15435..cf2fe3bda15d 100644
--- a/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/index.tsx
@@ -1,16 +1,13 @@
 import Fuse from "fuse.js";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useHotkeys } from "react-hotkeys-hook"; // Import useHotkeys
 
 import ForwardedIconComponent from "@/components/common/genericIconComponent";
-import ShadTooltip from "@/components/common/shadTooltipComponent";
-import { Button } from "@/components/ui/button";
 import {
   Disclosure,
   DisclosureContent,
   DisclosureTrigger,
 } from "@/components/ui/disclosure";
-import { Input } from "@/components/ui/input";
 import {
   Sidebar,
   SidebarContent,
@@ -18,12 +15,9 @@ import {
   SidebarGroup,
   SidebarGroupContent,
   SidebarGroupLabel,
-  SidebarHeader,
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
-  SidebarMenuSkeleton,
-  SidebarTrigger,
   useSidebar,
 } from "@/components/ui/sidebar";
 import { useAddComponent } from "@/hooks/useAddComponent";
@@ -39,12 +33,11 @@ import useAlertStore from "../../../../stores/alertStore";
 import useFlowStore from "../../../../stores/flowStore";
 import { useTypesStore } from "../../../../stores/typesStore";
 import { APIClassType } from "../../../../types/api";
-import { SidebarFilterComponent } from "../extraSidebarComponent/sidebarFilterComponent";
 import sensitiveSort from "../extraSidebarComponent/utils/sensitive-sort";
-import ShortcutDisplay from "../nodeToolbarComponent/shortcutDisplay";
+import { CategoryGroup } from "./components/categoryGroup";
 import NoResultsMessage from "./components/emptySearchComponent";
-import FeatureToggles from "./components/featureTogglesComponent";
 import SidebarMenuButtons from "./components/sidebarFooterButtons";
+import { SidebarHeaderComponent } from "./components/sidebarHeader";
 import SidebarItemsList from "./components/sidebarItemsList";
 import { applyBetaFilter } from "./helpers/apply-beta-filter";
 import { applyEdgeFilter } from "./helpers/apply-edge-filter";
@@ -58,15 +51,103 @@ const CATEGORIES = SIDEBAR_CATEGORIES;
 const BUNDLES = SIDEBAR_BUNDLES;
 
 export function FlowSidebarComponent() {
-  const [isInputFocused, setIsInputFocused] = useState(false);
-  const searchInputRef = useRef<HTMLInputElement | null>(null);
+  const { data, templates } = useTypesStore(
+    useCallback(
+      (state) => ({
+        data: state.data,
+        templates: state.templates,
+      }),
+      [],
+    ),
+  );
+
+  const { getFilterEdge, setFilterEdge, filterType, nodes } = useFlowStore(
+    useCallback(
+      (state) => ({
+        getFilterEdge: state.getFilterEdge,
+        setFilterEdge: state.setFilterEdge,
+        filterType: state.filterType,
+        nodes: state.nodes,
+      }),
+      [],
+    ),
+  );
 
-  const data = useTypesStore((state) => state.data);
-  const templates = useTypesStore((state) => state.templates);
-  const getFilterEdge = useFlowStore((state) => state.getFilterEdge);
-  const setFilterEdge = useFlowStore((state) => state.setFilterEdge);
   const hasStore = useStoreStore((state) => state.hasStore);
-  const filterType = useFlowStore((state) => state.filterType);
+
+  // Memoized values
+  const chatInputAdded = useMemo(() => checkChatInput(nodes), [nodes]);
+
+  const customComponent = useMemo(() => {
+    return data?.["custom_component"]?.["CustomComponent"] ?? null;
+  }, [data]);
+
+  const getFilteredData = useCallback(
+    (searchTerm: string, sourceData: any, fuseInstance: Fuse<any> | null) => {
+      if (!searchTerm) return sourceData;
+
+      let filteredData = cloneDeep(sourceData);
+      // ... rest of your filtering logic
+      return filteredData;
+    },
+    [],
+  );
+
+  // Effect optimizations
+  useEffect(() => {
+    if (filterType) {
+      setOpen(true);
+    }
+  }, [filterType]);
+
+  useEffect(() => {
+    const fuseOptions = {
+      keys: ["display_name", "description", "type", "category"],
+      threshold: 0.2,
+      includeScore: true,
+    };
+
+    const fuseData = Object.entries(data).flatMap(([category, items]) =>
+      Object.entries(items).map(([key, value]) => ({
+        ...value,
+        category,
+        key,
+      })),
+    );
+
+    setFuse(new Fuse(fuseData, fuseOptions));
+  }, [data]);
+
+  // Event handlers
+  const handleKeyDown = useCallback((event: KeyboardEvent) => {
+    if (event.key === "/") {
+      event.preventDefault();
+      searchInputRef.current?.focus();
+      setOpen(true);
+    }
+  }, []);
+
+  const handleKeyDownInput = (
+    e: React.KeyboardEvent<HTMLDivElement>,
+    name: string,
+  ) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      setOpenCategories((prev) =>
+        prev.includes(name)
+          ? prev.filter((cat) => cat !== name)
+          : [...prev, name],
+      );
+    }
+  };
+
+  useEffect(() => {
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [handleKeyDown]);
+
+  const [isInputFocused, setIsInputFocused] = useState(false);
+  const searchInputRef = useRef<HTMLInputElement | null>(null);
 
   const setErrorData = useAlertStore((state) => state.setErrorData);
   const [dataFilter, setFilterData] = useState(data);
@@ -231,10 +312,14 @@ export function FlowSidebarComponent() {
     }
   };
 
-  function handleSearchInput(e: string) {
-    setSearch(e);
-    filterComponents();
-  }
+  const handleSearchInput = useCallback(
+    (value: string) => {
+      setSearch(value);
+      const filtered = getFilteredData(value, data, fuse);
+      setFilterData(filtered);
+    },
+    [data, fuse],
+  );
 
   function onDragStart(
     event: React.DragEvent<any>,
@@ -252,24 +337,6 @@ export function FlowSidebarComponent() {
     event.dataTransfer.setData("genericNode", JSON.stringify(data));
   }
 
-  const customComponent = useMemo(() => {
-    return data?.["custom_component"]?.["CustomComponent"] ?? null;
-  }, [data]);
-
-  const handleKeyDown = (
-    e: React.KeyboardEvent<HTMLDivElement>,
-    name: string,
-  ) => {
-    if (e.key === "Enter" || e.key === " ") {
-      e.preventDefault();
-      setOpenCategories((prev) =>
-        prev.includes(name)
-          ? prev.filter((cat) => cat !== name)
-          : [...prev, name],
-      );
-    }
-  };
-
   const hasBundleItems = BUNDLES.some(
     (item) =>
       dataFilter[item.name] && Object.keys(dataFilter[item.name]).length > 0,
@@ -286,9 +353,6 @@ export function FlowSidebarComponent() {
     setOpenCategories([]);
   }
 
-  const nodes = useFlowStore((state) => state.nodes);
-  const chatInputAdded = checkChatInput(nodes);
-
   const handleInputFocus = useCallback(
     (event: React.FocusEvent<HTMLInputElement>) => {
       setIsInputFocused(true);
@@ -316,156 +380,40 @@ export function FlowSidebarComponent() {
       data-testid="shad-sidebar"
       className="noflow"
     >
-      <SidebarHeader className="flex w-full flex-col gap-4 p-4 pb-1">
-        <Disclosure open={showConfig} onOpenChange={setShowConfig}>
-          <div className="flex w-full items-center gap-2">
-            <SidebarTrigger className="text-muted-foreground">
-              <ForwardedIconComponent name="PanelLeftClose" />
-            </SidebarTrigger>
-            <h3 className="flex-1 text-sm font-semibold">Components</h3>
-            <DisclosureTrigger>
-              <div>
-                <ShadTooltip content="Component settings" styleClasses="z-50">
-                  <Button
-                    variant={showConfig ? "ghostActive" : "ghost"}
-                    size="iconMd"
-                    data-testid="sidebar-options-trigger"
-                  >
-                    <ForwardedIconComponent
-                      name="SlidersHorizontal"
-                      className="h-4 w-4"
-                    />
-                  </Button>
-                </ShadTooltip>
-              </div>
-            </DisclosureTrigger>
-          </div>
-          <DisclosureContent>
-            <FeatureToggles
-              showBeta={showBeta}
-              setShowBeta={setShowBeta}
-              showLegacy={showLegacy}
-              setShowLegacy={setShowLegacy}
-            />
-          </DisclosureContent>
-        </Disclosure>
-        <div className="relative w-full flex-1">
-          <ForwardedIconComponent
-            name="Search"
-            className="absolute inset-y-0 left-2 top-1/2 h-4 w-4 -translate-y-1/2 text-primary"
-          />
-          <Input
-            ref={searchInputRef}
-            type="search"
-            data-testid="sidebar-search-input"
-            className="w-full rounded-lg bg-background pl-8 text-sm"
-            placeholder=""
-            onFocus={handleInputFocus}
-            onBlur={handleInputBlur}
-            onChange={handleInputChange}
-            value={search}
-          />
-          {!isInputFocused && search === "" && (
-            <div className="pointer-events-none absolute inset-y-0 left-8 top-1/2 flex w-4/5 -translate-y-1/2 items-center justify-between gap-2 text-sm text-muted-foreground">
-              Search{" "}
-              <span>
-                <ShortcutDisplay sidebar shortcut="/" />
-              </span>
-            </div>
-          )}
-        </div>
-        {filterType && (
-          <SidebarFilterComponent
-            isInput={!!filterType.source}
-            type={filterType.type}
-            color={filterType.color}
-            resetFilters={() => {
-              setFilterEdge([]);
-              setFilterData(data);
-            }}
-          />
-        )}
-      </SidebarHeader>
+      <SidebarHeaderComponent
+        showConfig={showConfig}
+        setShowConfig={setShowConfig}
+        showBeta={showBeta}
+        setShowBeta={setShowBeta}
+        showLegacy={showLegacy}
+        setShowLegacy={setShowLegacy}
+        searchInputRef={searchInputRef}
+        isInputFocused={isInputFocused}
+        search={search}
+        handleInputFocus={handleInputFocus}
+        handleInputBlur={handleInputBlur}
+        handleInputChange={handleInputChange}
+        filterType={filterType}
+        setFilterEdge={setFilterEdge}
+        setFilterData={setFilterData}
+        data={data}
+      />
       <SidebarContent>
         {hasResults ? (
           <>
             {hasCategoryItems && (
-              <SidebarGroup className="p-3">
-                <SidebarGroupContent>
-                  <SidebarMenu>
-                    {!data
-                      ? Array.from({ length: 5 }).map((_, index) => (
-                          <SidebarMenuItem key={index}>
-                            <SidebarMenuSkeleton />
-                          </SidebarMenuItem>
-                        ))
-                      : CATEGORIES.toSorted(
-                          (a, b) =>
-                            (search !== ""
-                              ? sortedCategories
-                              : CATEGORIES
-                            ).findIndex((value) => value === a.name) -
-                            (search !== ""
-                              ? sortedCategories
-                              : CATEGORIES
-                            ).findIndex((value) => value === b.name),
-                        ).map(
-                          (item) =>
-                            dataFilter[item.name] &&
-                            Object.keys(dataFilter[item.name]).length > 0 && (
-                              <Disclosure
-                                key={item.name}
-                                open={openCategories.includes(item.name)}
-                                onOpenChange={(isOpen) => {
-                                  setOpenCategories((prev) =>
-                                    isOpen
-                                      ? [...prev, item.name]
-                                      : prev.filter((cat) => cat !== item.name),
-                                  );
-                                }}
-                              >
-                                <SidebarMenuItem>
-                                  <DisclosureTrigger className="group/collapsible">
-                                    <SidebarMenuButton asChild>
-                                      <div
-                                        data-testid={`disclosure-${item.display_name.toLocaleLowerCase()}`}
-                                        tabIndex={0}
-                                        onKeyDown={(e) =>
-                                          handleKeyDown(e, item.name)
-                                        }
-                                        className="flex cursor-pointer items-center gap-2"
-                                      >
-                                        <ForwardedIconComponent
-                                          name={item.icon}
-                                          className="h-4 w-4 group-aria-expanded/collapsible:text-accent-pink-foreground"
-                                        />
-                                        <span className="flex-1 group-aria-expanded/collapsible:font-semibold">
-                                          {item.display_name}
-                                        </span>
-                                        <ForwardedIconComponent
-                                          name="ChevronRight"
-                                          className="-mr-1 h-4 w-4 text-muted-foreground transition-all group-aria-expanded/collapsible:rotate-90"
-                                        />
-                                      </div>
-                                    </SidebarMenuButton>
-                                  </DisclosureTrigger>
-                                  <DisclosureContent>
-                                    <SidebarItemsList
-                                      item={item}
-                                      dataFilter={dataFilter}
-                                      nodeColors={nodeColors}
-                                      chatInputAdded={chatInputAdded}
-                                      onDragStart={onDragStart}
-                                      sensitiveSort={sensitiveSort}
-                                    />
-                                  </DisclosureContent>
-                                </SidebarMenuItem>
-                              </Disclosure>
-                            ),
-                        )}
-                  </SidebarMenu>
-                </SidebarGroupContent>
-              </SidebarGroup>
+              <CategoryGroup
+                dataFilter={dataFilter}
+                sortedCategories={sortedCategories}
+                CATEGORIES={CATEGORIES}
+                openCategories={openCategories}
+                setOpenCategories={setOpenCategories}
+                search={search}
+                nodeColors={nodeColors}
+                chatInputAdded={chatInputAdded}
+                onDragStart={onDragStart}
+                sensitiveSort={sensitiveSort}
+              />
             )}
             {hasBundleItems && (
               <SidebarGroup className="p-3">
@@ -501,7 +449,7 @@ export function FlowSidebarComponent() {
                                   <div
                                     tabIndex={0}
                                     onKeyDown={(e) =>
-                                      handleKeyDown(e, item.name)
+                                      handleKeyDownInput(e, item.name)
                                     }
                                     className="flex cursor-pointer items-center gap-2"
                                     data-testid={`disclosure-bundles-${item.display_name.toLocaleLowerCase()}`}
@@ -553,3 +501,7 @@ export function FlowSidebarComponent() {
     </Sidebar>
   );
 }
+
+FlowSidebarComponent.displayName = "FlowSidebarComponent";
+
+export default memo(FlowSidebarComponent);
diff --git a/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/types/index.ts b/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/types/index.ts
new file mode 100644
index 000000000000..8214933bcaf5
--- /dev/null
+++ b/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/types/index.ts
@@ -0,0 +1,52 @@
+import { APIClassType, APIDataType } from "@/types/api";
+import { Dispatch, SetStateAction } from "react";
+
+export interface CategoryGroupProps {
+  dataFilter: APIDataType;
+  sortedCategories: string[];
+  CATEGORIES: {
+    display_name: string;
+    name: string;
+    icon: string;
+  }[];
+  openCategories: string[];
+  setOpenCategories: (categories: string[]) => void;
+  search: string;
+  nodeColors: {
+    [key: string]: string;
+  };
+  chatInputAdded: boolean;
+  onDragStart: (
+    event: React.DragEvent<any>,
+    data: { type: string; node?: APIClassType },
+  ) => void;
+  sensitiveSort: (a: string, b: string) => number;
+}
+
+export interface SidebarHeaderComponentProps {
+  showConfig: boolean;
+  setShowConfig: (show: boolean) => void;
+  showBeta: boolean;
+  setShowBeta: (show: boolean) => void;
+  showLegacy: boolean;
+  setShowLegacy: (show: boolean) => void;
+  searchInputRef: React.RefObject<HTMLInputElement>;
+  isInputFocused: boolean;
+  search: string;
+  handleInputFocus: (event: React.FocusEvent<HTMLInputElement>) => void;
+  handleInputBlur: (event: React.FocusEvent<HTMLInputElement>) => void;
+  handleInputChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  filterType:
+    | {
+        source: string | undefined;
+        sourceHandle: string | undefined;
+        target: string | undefined;
+        targetHandle: string | undefined;
+        type: string;
+        color: string;
+      }
+    | undefined;
+  setFilterEdge: (edge: any[]) => void;
+  setFilterData: Dispatch<SetStateAction<APIDataType>>;
+  data: APIDataType;
+}
diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/components/toolbar-button.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/components/toolbar-button.tsx
new file mode 100644
index 000000000000..01a41e4af528
--- /dev/null
+++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/components/toolbar-button.tsx
@@ -0,0 +1,35 @@
+import { Button } from "@/components/ui/button";
+import { memo } from "react";
+
+import { ForwardedIconComponent } from "@/components/common/genericIconComponent";
+import ShadTooltip from "@/components/common/shadTooltipComponent";
+import { cn } from "@/utils/utils";
+import ShortcutDisplay from "../shortcutDisplay";
+
+export const ToolbarButton = memo(
+  ({
+    onClick,
+    icon,
+    label,
+    shortcut,
+    className,
+  }: {
+    onClick: () => void;
+    icon: string;
+    label?: string;
+    shortcut?: any;
+    className?: string;
+  }) => (
+    <ShadTooltip content={<ShortcutDisplay {...shortcut} />} side="top">
+      <Button
+        className={cn("node-toolbar-buttons", className)}
+        variant="ghost"
+        onClick={onClick}
+        size="node-toolbar"
+      >
+        <ForwardedIconComponent name={icon} className="h-4 w-4" />
+        {label && <span className="text-[13px] font-medium">{label}</span>}
+      </Button>
+    </ShadTooltip>
+  ),
+);
diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/components/toolbar-modals.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/components/toolbar-modals.tsx
new file mode 100644
index 000000000000..47b8bf24ade8
--- /dev/null
+++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/components/toolbar-modals.tsx
@@ -0,0 +1,146 @@
+import CodeAreaModal from "@/modals/codeAreaModal";
+import ConfirmationModal from "@/modals/confirmationModal";
+import EditNodeModal from "@/modals/editNodeModal";
+import ShareModal from "@/modals/shareModal";
+import { APIClassType } from "@/types/api";
+import { FlowType } from "@/types/flow";
+import React, { memo } from "react";
+
+interface ToolbarModalsProps {
+  // Modal visibility states
+  showModalAdvanced: boolean;
+  showconfirmShare: boolean;
+  showOverrideModal: boolean;
+  openModal: boolean;
+  hasCode: boolean;
+
+  // Setters for modal states
+  setShowModalAdvanced: (value: boolean) => void;
+  setShowconfirmShare: (value: boolean) => void;
+  setShowOverrideModal: (value: boolean) => void;
+  setOpenModal: (value: boolean) => void;
+
+  // Data and handlers
+  data: any;
+  flowComponent: FlowType;
+  handleOnNewValue: (value: string | string[]) => void;
+  handleNodeClass: (apiClassType: APIClassType, type: string) => void;
+  setToolMode: (value: boolean) => void;
+  setSuccessData: (data: { title: string }) => void;
+  addFlow: (params: { flow: FlowType; override: boolean }) => void;
+  name?: string;
+}
+
+const ToolbarModals = memo(
+  ({
+    showModalAdvanced,
+    showconfirmShare,
+    showOverrideModal,
+    openModal,
+    hasCode,
+    setShowModalAdvanced,
+    setShowconfirmShare,
+    setShowOverrideModal,
+    setOpenModal,
+    data,
+    flowComponent,
+    handleOnNewValue,
+    handleNodeClass,
+    setToolMode,
+    setSuccessData,
+    addFlow,
+    name = "code",
+  }: ToolbarModalsProps) => {
+    // Handlers for confirmation modal
+    const handleConfirm = () => {
+      addFlow({
+        flow: flowComponent,
+        override: true,
+      });
+      setSuccessData({ title: `${data.id} successfully overridden!` });
+      setShowOverrideModal(false);
+    };
+
+    const handleClose = () => {
+      setShowOverrideModal(false);
+    };
+
+    const handleCancel = () => {
+      addFlow({
+        flow: flowComponent,
+        override: true,
+      });
+      setSuccessData({ title: "New component successfully saved!" });
+      setShowOverrideModal(false);
+    };
+
+    return (
+      <>
+        {showModalAdvanced && (
+          <EditNodeModal
+            data={data}
+            open={showModalAdvanced}
+            setOpen={setShowModalAdvanced}
+          />
+        )}
+
+        {showconfirmShare && (
+          <ShareModal
+            open={showconfirmShare}
+            setOpen={setShowconfirmShare}
+            is_component={true}
+            component={flowComponent}
+          />
+        )}
+
+        {showOverrideModal && (
+          <ConfirmationModal
+            open={showOverrideModal}
+            title="Replace"
+            onConfirm={handleConfirm}
+            onClose={handleClose}
+            onCancel={handleCancel}
+            cancelText="Create New"
+            confirmationText="Replace"
+            size="x-small"
+            icon="SaveAll"
+            index={6}
+          >
+            <ConfirmationModal.Content>
+              <span>
+                It seems {data.node?.display_name} already exists. Do you want
+                to replace it with the current or create a new one?
+              </span>
+            </ConfirmationModal.Content>
+          </ConfirmationModal>
+        )}
+
+        {hasCode && (
+          <div className="hidden">
+            {openModal && (
+              <CodeAreaModal
+                setValue={handleOnNewValue}
+                open={openModal}
+                setOpen={setOpenModal}
+                dynamic={true}
+                setNodeClass={(apiClassType, type) => {
+                  handleNodeClass(apiClassType, type);
+                  setToolMode(false);
+                }}
+                nodeClass={data.node}
+                value={data.node?.template[name]?.value ?? ""}
+                componentId={data.id}
+              >
+                <></>
+              </CodeAreaModal>
+            )}
+          </div>
+        )}
+      </>
+    );
+  },
+);
+
+ToolbarModals.displayName = "ToolbarModals";
+
+export default ToolbarModals;
diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
index e698e9fde1c6..71523851dab8 100644
--- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
@@ -3,7 +3,6 @@ import { mutateTemplate } from "@/CustomNodes/helpers/mutate-template";
 import useHandleOnNewValue from "@/CustomNodes/hooks/use-handle-new-value";
 import useHandleNodeClass from "@/CustomNodes/hooks/use-handle-node-class";
 import ShadTooltip from "@/components/common/shadTooltipComponent";
-import ToggleShadComponent from "@/components/core/parameterRenderComponent/components/toggleShadComponent";
 import { Button } from "@/components/ui/button";
 import { usePatchUpdateFlow } from "@/controllers/API/queries/flows/use-patch-update-flow";
 import { usePostTemplateValue } from "@/controllers/API/queries/nodes/use-post-template-value";
@@ -12,7 +11,7 @@ import useAddFlow from "@/hooks/flows/use-add-flow";
 import CodeAreaModal from "@/modals/codeAreaModal";
 import { APIClassType } from "@/types/api";
 import _, { cloneDeep } from "lodash";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useUpdateNodeInternals } from "reactflow";
 import IconComponent from "../../../../components/common/genericIconComponent";
 import {
@@ -40,796 +39,730 @@ import {
   updateFlowPosition,
 } from "../../../../utils/reactflowUtils";
 import { cn, getNodeLength, openInNewTab } from "../../../../utils/utils";
+import { ToolbarButton } from "./components/toolbar-button";
+import ToolbarModals from "./components/toolbar-modals";
 import useShortcuts from "./hooks/use-shortcuts";
-import ShortcutDisplay from "./shortcutDisplay";
 import ToolbarSelectItem from "./toolbarSelectItem";
 
-export default function NodeToolbarComponent({
-  data,
-  deleteNode,
-  setShowNode,
-  numberOfOutputHandles,
-  showNode,
-  name = "code",
-  onCloseAdvancedModal,
-  updateNode,
-  isOutdated,
-  setOpenShowMoreOptions,
-}: nodeToolbarPropsType): JSX.Element {
-  const version = useDarkStore((state) => state.version);
-  const [showModalAdvanced, setShowModalAdvanced] = useState(false);
-  const [showconfirmShare, setShowconfirmShare] = useState(false);
-  const [showOverrideModal, setShowOverrideModal] = useState(false);
-  const [flowComponent, setFlowComponent] = useState<FlowType>(
-    createFlowComponent(cloneDeep(data), version),
-  );
-  const nodeLength = getNodeLength(data);
-  const updateFreezeStatus = useFlowStore((state) => state.updateFreezeStatus);
-  const hasStore = useStoreStore((state) => state.hasStore);
-  const hasApiKey = useStoreStore((state) => state.hasApiKey);
-  const validApiKey = useStoreStore((state) => state.validApiKey);
-  const shortcuts = useShortcutsStore((state) => state.shortcuts);
-  const currentFlowId = useFlowsManagerStore((state) => state.currentFlowId);
-  const [openModal, setOpenModal] = useState(false);
-  const isGroup = data.node?.flow ? true : false;
-  const frozen = data.node?.frozen ?? false;
-  const currentFlow = useFlowStore((state) => state.currentFlow);
-
-  const addFlow = useAddFlow();
-
-  const { mutate: patchUpdateFlow } = usePatchUpdateFlow();
-
-  const isMinimal = countHandlesFn(data) <= 1 && numberOfOutputHandles <= 1;
-  function activateToolMode() {
-    const newValue = !toolMode;
-    setToolMode(newValue);
-
-    updateToolMode(data.id, newValue);
-    data.node!.tool_mode = newValue;
-
-    mutateTemplate(
-      newValue,
-      data.node!,
-      handleNodeClass,
-      postToolModeValue,
-      setErrorData,
-      "tool_mode",
-      () => {
-        const node = currentFlow?.data?.nodes.find(
-          (node) => node.id === data.id,
-        );
-        const index = currentFlow?.data?.nodes.indexOf(node!)!;
-        currentFlow!.data!.nodes[index]!.data.node.tool_mode = newValue;
-
-        patchUpdateFlow({
-          id: currentFlow?.id!,
-          name: currentFlow?.name!,
-          data: currentFlow?.data!,
-          description: currentFlow?.description!,
-          folder_id: currentFlow?.folder_id!,
-          endpoint_name: currentFlow?.endpoint_name!,
-        });
-      },
+const NodeToolbarComponent = memo(
+  ({
+    data,
+    deleteNode,
+    setShowNode,
+    numberOfOutputHandles,
+    showNode,
+    name = "code",
+    onCloseAdvancedModal,
+    updateNode,
+    isOutdated,
+    setOpenShowMoreOptions,
+  }: nodeToolbarPropsType): JSX.Element => {
+    const version = useDarkStore((state) => state.version);
+    const [showModalAdvanced, setShowModalAdvanced] = useState(false);
+    const [showconfirmShare, setShowconfirmShare] = useState(false);
+    const [showOverrideModal, setShowOverrideModal] = useState(false);
+    const [flowComponent, setFlowComponent] = useState<FlowType>(
+      createFlowComponent(cloneDeep(data), version),
+    );
+    const updateFreezeStatus = useFlowStore(
+      (state) => state.updateFreezeStatus,
+    );
+    const { hasStore, hasApiKey, validApiKey } = useStoreStore((state) => ({
+      hasStore: state.hasStore,
+      hasApiKey: state.hasApiKey,
+      validApiKey: state.validApiKey,
+    }));
+    const shortcuts = useShortcutsStore((state) => state.shortcuts);
+    const currentFlowId = useFlowsManagerStore((state) => state.currentFlowId);
+    const [openModal, setOpenModal] = useState(false);
+    const frozen = data.node?.frozen ?? false;
+    const currentFlow = useFlowStore((state) => state.currentFlow);
+
+    const nodeLength = useMemo(() => getNodeLength(data), [data]);
+    const hasCode = useMemo(
+      () => Object.keys(data.node!.template).includes("code"),
+      [data.node],
+    );
+    // Check if any of the data.node.template fields have tool_mode as True
+    // if so we can show the tool mode button
+    const hasToolMode = useMemo(
+      () => checkHasToolMode(data.node?.template ?? {}),
+      [data.node?.template],
+    );
+    const isGroup = useMemo(
+      () => (data.node?.flow ? true : false),
+      [data.node],
     );
 
-    updateNodeInternals(data.id);
-  }
-  function minimize() {
-    if (isMinimal || !showNode) {
-      setShowNode((data.showNode ?? true) ? false : true);
-      updateNodeInternals(data.id);
-      return;
-    }
-    setNoticeData({
-      title:
-        "Minimization are only available for components with one handle or fewer.",
-    });
-    return;
-  }
+    const addFlow = useAddFlow();
 
-  function handleungroup() {
-    if (isGroup) {
-      takeSnapshot();
-      expandGroupNode(
-        data.id,
-        updateFlowPosition(getNodePosition(data.id), data.node?.flow!),
-        data.node!.template,
-        nodes,
-        edges,
-        setNodes,
-        setEdges,
-        data.node?.outputs,
-      );
-    }
-  }
+    const { mutate: patchUpdateFlow } = usePatchUpdateFlow();
 
-  function shareComponent() {
-    if (hasApiKey || hasStore) {
-      setShowconfirmShare((state) => !state);
-    }
-  }
+    const isMinimal = useMemo(
+      () => countHandlesFn(data) <= 1 && numberOfOutputHandles <= 1,
+      [data, numberOfOutputHandles],
+    );
 
-  function handleCodeModal() {
-    if (!hasCode)
-      setNoticeData({ title: `You can not access ${data.id} code` });
-    setOpenModal((state) => !state);
-  }
+    const [toolMode, setToolMode] = useState(() => {
+      // Check if tool mode is explicitly set on the node
+      const hasToolModeProperty = data.node?.tool_mode;
+      if (hasToolModeProperty) {
+        return hasToolModeProperty;
+      }
 
-  function saveComponent() {
-    if (isSaved) {
-      setShowOverrideModal((state) => !state);
-      return;
-    }
-    addFlow({
-      flow: flowComponent,
-      override: false,
-    });
-    setSuccessData({ title: `${data.id} saved successfully` });
-    return;
-  }
-  // Check if any of the data.node.template fields have tool_mode as True
-  // if so we can show the tool mode button
-  const hasToolMode = checkHasToolMode(data.node?.template ?? {});
-
-  function openDocs() {
-    if (data.node?.documentation) {
-      return openInNewTab(data.node?.documentation);
-    }
-    setNoticeData({
-      title: `${data.id} docs is not available at the moment.`,
-    });
-  }
-
-  const freezeFunction = () => {
-    setNode(data.id, (old) => ({
-      ...old,
-      data: {
-        ...old.data,
-        node: {
-          ...old.data.node,
-          frozen: old.data?.node?.frozen ? false : true,
-        },
-      },
-    }));
-  };
-
-  useShortcuts({
-    showOverrideModal,
-    showModalAdvanced,
-    openModal,
-    showconfirmShare,
-    FreezeAllVertices: () => {
-      FreezeAllVertices({ flowId: currentFlowId, stopNodeId: data.id });
-    },
-    Freeze: freezeFunction,
-    downloadFunction: () => downloadNode(flowComponent!),
-    displayDocs: openDocs,
-    saveComponent,
-    showAdvance: () => setShowModalAdvanced((state) => !state),
-    handleCodeModal,
-    shareComponent,
-    ungroup: handleungroup,
-    minimizeFunction: minimize,
-    activateToolMode: activateToolMode,
-    hasToolMode,
-  });
-
-  const paste = useFlowStore((state) => state.paste);
-  const nodes = useFlowStore((state) => state.nodes);
-  const edges = useFlowStore((state) => state.edges);
-  const setNodes = useFlowStore((state) => state.setNodes);
-  const setEdges = useFlowStore((state) => state.setEdges);
-  const getNodePosition = useFlowStore((state) => state.getNodePosition);
-  const flows = useFlowsManagerStore((state) => state.flows);
-  const takeSnapshot = useFlowsManagerStore((state) => state.takeSnapshot);
-  const { mutate: FreezeAllVertices } = usePostRetrieveVertexOrder({
-    onSuccess: ({ vertices_to_run }) => {
-      updateFreezeStatus(vertices_to_run, !data.node?.frozen);
-      vertices_to_run.forEach((vertex) => {
-        updateNodeInternals(vertex);
-      });
-    },
-  });
-  const updateToolMode = useFlowStore((state) => state.updateToolMode);
+      // Otherwise check if node has component_as_tool output
+      const hasComponentAsTool = data.node?.outputs?.some(
+        (output) => output.name === "component_as_tool",
+      );
 
-  useEffect(() => {
-    if (!showModalAdvanced) {
-      onCloseAdvancedModal!(false);
-    }
-  }, [showModalAdvanced]);
-  const updateNodeInternals = useUpdateNodeInternals();
+      return hasComponentAsTool ?? false;
+    });
 
-  const setLastCopiedSelection = useFlowStore(
-    (state) => state.setLastCopiedSelection,
-  );
+    const handleActivateToolMode = useCallback(() => {
+      const newValue = !toolMode;
+      updateToolMode(data.id, newValue);
+      data.node!.tool_mode = newValue;
+
+      mutateTemplate(
+        newValue,
+        data.node!,
+        handleNodeClass,
+        postToolModeValue,
+        setErrorData,
+        "tool_mode",
+        () => {
+          const node = currentFlow?.data?.nodes.find((n) => n.id === data.id);
+          const index = currentFlow?.data?.nodes.indexOf(node!)!;
+          currentFlow!.data!.nodes[index]!.data.node.tool_mode = newValue;
+
+          patchUpdateFlow({
+            id: currentFlow?.id!,
+            name: currentFlow?.name!,
+            data: currentFlow?.data!,
+            description: currentFlow?.description!,
+            folder_id: currentFlow?.folder_id!,
+            endpoint_name: currentFlow?.endpoint_name!,
+          });
+        },
+      );
 
-  const setSuccessData = useAlertStore((state) => state.setSuccessData);
-  const setNoticeData = useAlertStore((state) => state.setNoticeData);
-  const setErrorData = useAlertStore((state) => state.setErrorData);
+      updateNodeInternals(data.id);
+    }, [toolMode, data, currentFlow]);
+
+    const handleMinimize = useCallback(() => {
+      if (isMinimal || !showNode) {
+        setShowNode(!showNode);
+        updateNodeInternals(data.id);
+        return;
+      }
+      setNoticeData({
+        title:
+          "Minimization only available for components with one handle or fewer.",
+      });
+    }, [isMinimal, showNode, data.id]);
 
-  useEffect(() => {
-    setFlowComponent(createFlowComponent(cloneDeep(data), version));
-  }, [
-    data,
-    data.node,
-    data.node?.display_name,
-    data.node?.description,
-    data.node?.template,
-    showModalAdvanced,
-    showconfirmShare,
-  ]);
-
-  const [selectedValue, setSelectedValue] = useState(null);
-
-  const handleSelectChange = (event) => {
-    setSelectedValue(event);
-
-    switch (event) {
-      case "save":
-        saveComponent();
-        break;
-      case "freeze":
-        freezeFunction();
-        break;
-      case "freezeAll":
-        FreezeAllVertices({ flowId: currentFlowId, stopNodeId: data.id });
-        break;
-      case "code":
-        setOpenModal(!openModal);
-        break;
-      case "advanced":
-        setShowModalAdvanced(true);
-        break;
-      case "show":
+    function handleungroup() {
+      if (isGroup) {
         takeSnapshot();
-        minimize();
-        break;
-      case "Share":
-        shareComponent();
-        break;
-      case "Download":
-        downloadNode(flowComponent!);
-        break;
-      case "SaveAll":
-        addFlow({
-          flow: flowComponent,
-          override: false,
-        });
-        break;
-      case "documentation":
-        openDocs();
-        break;
-      case "disabled":
-        break;
-      case "ungroup":
-        handleungroup();
-        break;
-      case "override":
-        setShowOverrideModal(true);
-        break;
-      case "delete":
-        deleteNode(data.id);
-        break;
-      case "update":
-        updateNode();
-        break;
-      case "copy":
-        const node = nodes.filter((node) => node.id === data.id);
-        setLastCopiedSelection({ nodes: _.cloneDeep(node), edges: [] });
-        break;
-      case "duplicate":
-        paste(
-          {
-            nodes: [nodes.find((node) => node.id === data.id)!],
-            edges: [],
-          },
-          {
-            x: 50,
-            y: 10,
-            paneX: nodes.find((node) => node.id === data.id)?.position.x,
-            paneY: nodes.find((node) => node.id === data.id)?.position.y,
-          },
+        expandGroupNode(
+          data.id,
+          updateFlowPosition(getNodePosition(data.id), data.node?.flow!),
+          data.node!.template,
+          nodes,
+          edges,
+          setNodes,
+          setEdges,
+          data.node?.outputs,
         );
-        break;
-      case "toolMode":
-        activateToolMode();
-        break;
+      }
     }
 
-    setSelectedValue(null);
-  };
+    function shareComponent() {
+      if (hasApiKey || hasStore) {
+        setShowconfirmShare((state) => !state);
+      }
+    }
 
-  const isSaved = flows?.some((flow) =>
-    Object.values(flow).includes(data.node?.display_name!),
-  );
+    function handleCodeModal() {
+      if (!hasCode)
+        setNoticeData({ title: `You can not access ${data.id} code` });
+      setOpenModal((state) => !state);
+    }
 
-  const setNode = useFlowStore((state) => state.setNode);
+    function saveComponent() {
+      if (isSaved) {
+        setShowOverrideModal((state) => !state);
+        return;
+      }
+      addFlow({
+        flow: flowComponent,
+        override: false,
+      });
+      setSuccessData({ title: `${data.id} saved successfully` });
+      return;
+    }
 
-  const { handleOnNewValue: handleOnNewValueHook } = useHandleOnNewValue({
-    node: data.node!,
-    nodeId: data.id,
-    name,
-  });
+    function openDocs() {
+      if (data.node?.documentation) {
+        return openInNewTab(data.node?.documentation);
+      }
+      setNoticeData({
+        title: `${data.id} docs is not available at the moment.`,
+      });
+    }
 
-  const handleOnNewValue = (value: string | string[]) => {
-    handleOnNewValueHook({ value });
-  };
+    const freezeFunction = () => {
+      setNode(data.id, (old) => ({
+        ...old,
+        data: {
+          ...old.data,
+          node: {
+            ...old.data.node,
+            frozen: old.data?.node?.frozen ? false : true,
+          },
+        },
+      }));
+    };
+
+    useShortcuts({
+      showOverrideModal,
+      showModalAdvanced,
+      openModal,
+      showconfirmShare,
+      FreezeAllVertices: () => {
+        FreezeAllVertices({ flowId: currentFlowId, stopNodeId: data.id });
+      },
+      Freeze: freezeFunction,
+      downloadFunction: () => downloadNode(flowComponent!),
+      displayDocs: openDocs,
+      saveComponent,
+      showAdvance: () => setShowModalAdvanced((state) => !state),
+      handleCodeModal,
+      shareComponent,
+      ungroup: handleungroup,
+      minimizeFunction: handleMinimize,
+      activateToolMode: handleActivateToolMode,
+      hasToolMode,
+    });
 
-  const { handleNodeClass: handleNodeClassHook } = useHandleNodeClass(data.id);
+    const paste = useFlowStore((state) => state.paste);
+    const nodes = useFlowStore((state) => state.nodes);
+    const edges = useFlowStore((state) => state.edges);
+    const setNodes = useFlowStore((state) => state.setNodes);
+    const setEdges = useFlowStore((state) => state.setEdges);
+    const getNodePosition = useFlowStore((state) => state.getNodePosition);
+    const flows = useFlowsManagerStore((state) => state.flows);
+    const takeSnapshot = useFlowsManagerStore((state) => state.takeSnapshot);
+    const { mutate: FreezeAllVertices } = usePostRetrieveVertexOrder({
+      onSuccess: ({ vertices_to_run }) => {
+        updateFreezeStatus(vertices_to_run, !data.node?.frozen);
+        vertices_to_run.forEach((vertex) => {
+          updateNodeInternals(vertex);
+        });
+      },
+    });
+    const updateToolMode = useFlowStore((state) => state.updateToolMode);
 
-  const handleNodeClass = (newNodeClass: APIClassType, type: string) => {
-    handleNodeClassHook(newNodeClass, type);
-  };
+    useEffect(() => {
+      if (!showModalAdvanced) {
+        onCloseAdvancedModal!(false);
+      }
+    }, [showModalAdvanced]);
+    const updateNodeInternals = useUpdateNodeInternals();
 
-  const hasCode = Object.keys(data.node!.template).includes("code");
+    const setLastCopiedSelection = useFlowStore(
+      (state) => state.setLastCopiedSelection,
+    );
 
-  const selectTriggerRef = useRef(null);
+    const setSuccessData = useAlertStore((state) => state.setSuccessData);
+    const setNoticeData = useAlertStore((state) => state.setNoticeData);
+    const setErrorData = useAlertStore((state) => state.setErrorData);
+
+    useEffect(() => {
+      setFlowComponent(createFlowComponent(cloneDeep(data), version));
+    }, [
+      data,
+      data.node,
+      data.node?.display_name,
+      data.node?.description,
+      data.node?.template,
+      showModalAdvanced,
+      showconfirmShare,
+    ]);
+
+    const [selectedValue, setSelectedValue] = useState(null);
+
+    const handleSelectChange = useCallback((event) => {
+      setSelectedValue(event);
+
+      switch (event) {
+        case "save":
+          saveComponent();
+          break;
+        case "freeze":
+          freezeFunction();
+          break;
+        case "freezeAll":
+          FreezeAllVertices({ flowId: currentFlowId, stopNodeId: data.id });
+          break;
+        case "code":
+          setOpenModal(!openModal);
+          break;
+        case "advanced":
+          setShowModalAdvanced(true);
+          break;
+        case "show":
+          takeSnapshot();
+          handleMinimize();
+          break;
+        case "Share":
+          shareComponent();
+          break;
+        case "Download":
+          downloadNode(flowComponent!);
+          break;
+        case "SaveAll":
+          addFlow({
+            flow: flowComponent,
+            override: false,
+          });
+          break;
+        case "documentation":
+          openDocs();
+          break;
+        case "disabled":
+          break;
+        case "ungroup":
+          handleungroup();
+          break;
+        case "override":
+          setShowOverrideModal(true);
+          break;
+        case "delete":
+          deleteNode(data.id);
+          break;
+        case "update":
+          updateNode();
+          break;
+        case "copy":
+          const node = nodes.filter((node) => node.id === data.id);
+          setLastCopiedSelection({ nodes: _.cloneDeep(node), edges: [] });
+          break;
+        case "duplicate":
+          paste(
+            {
+              nodes: [nodes.find((node) => node.id === data.id)!],
+              edges: [],
+            },
+            {
+              x: 50,
+              y: 10,
+              paneX: nodes.find((node) => node.id === data.id)?.position.x,
+              paneY: nodes.find((node) => node.id === data.id)?.position.y,
+            },
+          );
+          break;
+        case "toolMode":
+          handleActivateToolMode();
+          break;
+      }
+
+      setSelectedValue(null);
+    }, []);
+
+    const isSaved = flows?.some((flow) =>
+      Object.values(flow).includes(data.node?.display_name!),
+    );
 
-  const handleButtonClick = () => {
-    (selectTriggerRef.current! as HTMLElement)?.click();
-  };
+    const setNode = useFlowStore((state) => state.setNode);
 
-  const handleOpenChange = (open: boolean) => {
-    setOpenShowMoreOptions && setOpenShowMoreOptions(open);
-  };
+    const { handleOnNewValue: handleOnNewValueHook } = useHandleOnNewValue({
+      node: data.node!,
+      nodeId: data.id,
+      name,
+    });
 
-  const [toolMode, setToolMode] = useState(() => {
-    // Check if tool mode is explicitly set on the node
-    const hasToolModeProperty = data.node?.tool_mode;
-    if (hasToolModeProperty) {
-      return hasToolModeProperty;
-    }
+    const handleOnNewValue = (value: string | string[]) => {
+      handleOnNewValueHook({ value });
+    };
 
-    // Otherwise check if node has component_as_tool output
-    const hasComponentAsTool = data.node?.outputs?.some(
-      (output) => output.name === "component_as_tool",
+    const { handleNodeClass: handleNodeClassHook } = useHandleNodeClass(
+      data.id,
     );
 
-    return hasComponentAsTool ?? false;
-  });
+    const handleNodeClass = (newNodeClass: APIClassType, type: string) => {
+      handleNodeClassHook(newNodeClass, type);
+    };
 
-  const postToolModeValue = usePostTemplateValue({
-    node: data.node!,
-    nodeId: data.id,
-    parameterId: "tool_mode",
-    tool_mode: data.node!.tool_mode ?? false,
-  });
+    const selectTriggerRef = useRef(null);
 
-  const handleConfirm = useCallback(() => {
-    addFlow({
-      flow: flowComponent,
-      override: true,
-    });
-    setSuccessData({ title: `${data.id} successfully overridden!` });
-    setShowOverrideModal(false);
-  }, [flowComponent, setSuccessData, setShowOverrideModal]);
-
-  const handleClose = useCallback(() => {
-    setShowOverrideModal(false);
-  }, []);
-
-  const handleCancel = useCallback(() => {
-    addFlow({
-      flow: flowComponent,
-      override: true,
+    const handleButtonClick = () => {
+      (selectTriggerRef.current! as HTMLElement)?.click();
+    };
+
+    const handleOpenChange = (open: boolean) => {
+      setOpenShowMoreOptions && setOpenShowMoreOptions(open);
+    };
+
+    const postToolModeValue = usePostTemplateValue({
+      node: data.node!,
+      nodeId: data.id,
+      parameterId: "tool_mode",
+      tool_mode: data.node!.tool_mode ?? false,
     });
-    setSuccessData({ title: "New component successfully saved!" });
-    setShowOverrideModal(false);
-  }, [flowComponent, setSuccessData, setShowOverrideModal]);
-
-  return (
-    <>
-      <div className="noflow nopan nodelete nodrag">
-        <div className="toolbar-wrapper">
-          {hasCode && (
-            <ShadTooltip
-              content={
-                <ShortcutDisplay
-                  {...shortcuts.find(
-                    ({ name }) => name.split(" ")[0].toLowerCase() === "code",
-                  )!}
-                />
-              }
-              side="top"
-            >
-              <Button
-                className="node-toolbar-buttons"
-                variant="ghost"
-                onClick={() => {
-                  setOpenModal(!openModal);
-                }}
-                data-testid="code-button-modal"
-                size="node-toolbar"
-              >
-                <IconComponent name="Code" className="h-4 w-4" />
 
-                <span className="text-[13px] font-medium">Code</span>
-              </Button>
-            </ShadTooltip>
-          )}
+    const handleConfirm = useCallback(() => {
+      addFlow({
+        flow: flowComponent,
+        override: true,
+      });
+      setSuccessData({ title: `${data.id} successfully overridden!` });
+      setShowOverrideModal(false);
+    }, [flowComponent, data.id]);
+
+    const handleClose = useCallback(() => {
+      setShowOverrideModal(false);
+    }, []);
+
+    const handleCancel = useCallback(() => {
+      addFlow({
+        flow: flowComponent,
+        override: true,
+      });
+      setSuccessData({ title: "New component successfully saved!" });
+      setShowOverrideModal(false);
+    }, [flowComponent, setSuccessData, setShowOverrideModal]);
 
+    const renderToolbarButtons = useMemo(
+      () => (
+        <>
+          {hasCode && (
+            <ToolbarButton
+              icon="Code"
+              label="Code"
+              onClick={() => setOpenModal(true)}
+              shortcut={shortcuts.find((s) =>
+                s.name.toLowerCase().startsWith("code"),
+              )}
+            />
+          )}
           {nodeLength > 0 && (
-            <ShadTooltip
-              content={
-                <ShortcutDisplay
-                  {...shortcuts.find(
-                    ({ name }) =>
-                      name.split(" ")[0].toLowerCase() === "advanced",
-                  )!}
-                />
-              }
-              side="top"
-            >
-              <Button
-                className="node-toolbar-buttons"
-                variant="ghost"
-                onClick={() => {
-                  setShowModalAdvanced(true);
-                }}
-                data-testid="edit-button-modal"
-                size="node-toolbar"
-              >
-                <IconComponent name="SlidersHorizontal" className="h-4 w-4" />
-                <span className="text-[13px] font-medium">Controls</span>
-              </Button>
-            </ShadTooltip>
+            <ToolbarButton
+              icon="SlidersHorizontal"
+              label="Controls"
+              onClick={() => setShowModalAdvanced(true)}
+              shortcut={shortcuts.find((s) =>
+                s.name.toLowerCase().startsWith("advanced"),
+              )}
+            />
           )}
           {!hasToolMode && (
-            <ShadTooltip
-              content={
-                <ShortcutDisplay
-                  {...shortcuts.find(
-                    ({ name }) => name.toLowerCase() === "freeze path",
-                  )!}
-                />
-              }
-              side="top"
-            >
-              <Button
-                className={cn(
-                  "node-toolbar-buttons",
-                  frozen && "text-blue-500",
-                )}
-                variant="ghost"
-                onClick={(event) => {
-                  event.preventDefault();
-                  takeSnapshot();
-                  FreezeAllVertices({
-                    flowId: currentFlowId,
-                    stopNodeId: data.id,
-                  });
-                }}
-                size="node-toolbar"
-              >
-                <IconComponent
-                  name="FreezeAll"
-                  className={cn(
-                    "h-4 w-4 transition-all",
-                    frozen ? "animate-wiggle text-ice" : "",
-                  )}
-                />
-                <span className="text-[13px] font-medium">Freeze Path</span>
-              </Button>
-            </ShadTooltip>
+            <ToolbarButton
+              icon="FreezeAll"
+              label="Freeze Path"
+              onClick={() => {
+                takeSnapshot();
+                FreezeAllVertices({
+                  flowId: currentFlowId,
+                  stopNodeId: data.id,
+                });
+              }}
+              shortcut={shortcuts.find((s) =>
+                s.name.toLowerCase().startsWith("freeze path"),
+              )}
+              className={cn("node-toolbar-buttons", frozen && "text-blue-500")}
+            />
           )}
           {hasToolMode && (
-            <ShadTooltip
-              content={
-                <ShortcutDisplay
-                  {...shortcuts.find(
-                    ({ name }) => name.toLowerCase() === "tool mode",
-                  )!}
-                />
-              }
-              side="top"
-            >
-              <Button
-                className={cn(
-                  "node-toolbar-buttons h-[2rem]",
-                  toolMode && "text-primary",
-                )}
-                variant="ghost"
-                onClick={(event) => {
-                  event.preventDefault();
-                  takeSnapshot();
-                  handleSelectChange("toolMode");
-                }}
-                size="node-toolbar"
-              >
-                <IconComponent
-                  name="Hammer"
-                  className={cn(
-                    "h-4 w-4 transition-all",
-                    toolMode ? "text-primary" : "",
-                  )}
-                />
-                <span className="text-[13px] font-medium">Tool Mode</span>
-                <ToggleShadComponent
-                  value={toolMode}
-                  editNode={false}
-                  handleOnNewValue={() => {}}
-                  disabled={false}
-                  size="medium"
-                  showToogle={false}
-                  id="tool-mode-toggle"
-                />
-              </Button>
-            </ShadTooltip>
+            <ToolbarButton
+              icon="Hammer"
+              label="Tool Mode"
+              onClick={() => {
+                takeSnapshot();
+                handleSelectChange("toolMode");
+              }}
+              shortcut={shortcuts.find((s) =>
+                s.name.toLowerCase().startsWith("tool mode"),
+              )}
+              className={cn(
+                "node-toolbar-buttons h-[2rem]",
+                toolMode && "text-primary",
+              )}
+            />
           )}
+        </>
+      ),
+      [
+        hasCode,
+        nodeLength,
+        hasToolMode,
+        toolMode,
+        data.id,
+        takeSnapshot,
+        FreezeAllVertices,
+        currentFlowId,
+        shortcuts,
+        frozen,
+        handleSelectChange,
+      ],
+    );
 
-          <Select
-            onValueChange={handleSelectChange}
-            value={selectedValue!}
-            onOpenChange={handleOpenChange}
-          >
-            <SelectTrigger className="w-62">
-              <ShadTooltip content="Show More" side="top">
-                <div data-testid="more-options-modal">
-                  <Button
-                    className="node-toolbar-buttons h-[2rem] w-[2rem]"
-                    variant="ghost"
-                    onClick={handleButtonClick}
-                    size="node-toolbar"
-                    asChild
-                  >
-                    <IconComponent name="MoreHorizontal" className="h-4 w-4" />
-                  </Button>
-                </div>
-              </ShadTooltip>
-            </SelectTrigger>
-            <SelectContentWithoutPortal
-              className={"relative top-1 w-56 bg-background"}
+    return (
+      <>
+        <div className="noflow nopan nodelete nodrag">
+          <div className="toolbar-wrapper">
+            {renderToolbarButtons}
+            <Select
+              onValueChange={handleSelectChange}
+              value={selectedValue!}
+              onOpenChange={handleOpenChange}
             >
-              {hasCode && (
-                <SelectItem value={"code"}>
+              <SelectTrigger className="w-62">
+                <ShadTooltip content="Show More" side="top">
+                  <div data-testid="more-options-modal">
+                    <Button
+                      className="node-toolbar-buttons h-[2rem] w-[2rem]"
+                      variant="ghost"
+                      onClick={handleButtonClick}
+                      size="node-toolbar"
+                      asChild
+                    >
+                      <IconComponent
+                        name="MoreHorizontal"
+                        className="h-4 w-4"
+                      />
+                    </Button>
+                  </div>
+                </ShadTooltip>
+              </SelectTrigger>
+              <SelectContentWithoutPortal
+                className={"relative top-1 w-56 bg-background"}
+              >
+                {hasCode && (
+                  <SelectItem value={"code"}>
+                    <ToolbarSelectItem
+                      shortcut={
+                        shortcuts.find((obj) => obj.name === "Code")?.shortcut!
+                      }
+                      value={"Code"}
+                      icon={"Code"}
+                      dataTestId="code-button-modal"
+                    />
+                  </SelectItem>
+                )}
+                {nodeLength > 0 && (
+                  <SelectItem
+                    value={nodeLength === 0 ? "disabled" : "advanced"}
+                  >
+                    <ToolbarSelectItem
+                      shortcut={
+                        shortcuts.find(
+                          (obj) => obj.name === "Advanced Settings",
+                        )?.shortcut!
+                      }
+                      value={"Controls"}
+                      icon={"SlidersHorizontal"}
+                      dataTestId="advanced-button-modal"
+                    />
+                  </SelectItem>
+                )}
+                <SelectItem value={"save"}>
                   <ToolbarSelectItem
                     shortcut={
-                      shortcuts.find((obj) => obj.name === "Code")?.shortcut!
+                      shortcuts.find((obj) => obj.name === "Save Component")
+                        ?.shortcut!
                     }
-                    value={"Code"}
-                    icon={"Code"}
-                    dataTestId="code-button-modal"
+                    value={"Save"}
+                    icon={"SaveAll"}
+                    dataTestId="save-button-modal"
                   />
                 </SelectItem>
-              )}
-              {nodeLength > 0 && (
-                <SelectItem value={nodeLength === 0 ? "disabled" : "advanced"}>
+                <SelectItem value={"duplicate"}>
                   <ToolbarSelectItem
                     shortcut={
-                      shortcuts.find((obj) => obj.name === "Advanced Settings")
+                      shortcuts.find((obj) => obj.name === "Duplicate")
                         ?.shortcut!
                     }
-                    value={"Controls"}
-                    icon={"SlidersHorizontal"}
-                    dataTestId="advanced-button-modal"
+                    value={"Duplicate"}
+                    icon={"Copy"}
+                    dataTestId="copy-button-modal"
                   />
                 </SelectItem>
-              )}
-              <SelectItem value={"save"}>
-                <ToolbarSelectItem
-                  shortcut={
-                    shortcuts.find((obj) => obj.name === "Save Component")
-                      ?.shortcut!
-                  }
-                  value={"Save"}
-                  icon={"SaveAll"}
-                  dataTestId="save-button-modal"
-                />
-              </SelectItem>
-              <SelectItem value={"duplicate"}>
-                <ToolbarSelectItem
-                  shortcut={
-                    shortcuts.find((obj) => obj.name === "Duplicate")?.shortcut!
-                  }
-                  value={"Duplicate"}
-                  icon={"Copy"}
-                  dataTestId="copy-button-modal"
-                />
-              </SelectItem>
-              <SelectItem value={"copy"}>
-                <ToolbarSelectItem
-                  shortcut={
-                    shortcuts.find((obj) => obj.name === "Copy")?.shortcut!
-                  }
-                  value={"Copy"}
-                  icon={"Clipboard"}
-                  dataTestId="copy-button-modal"
-                />
-              </SelectItem>
-              {isOutdated && (
-                <SelectItem value={"update"}>
+                <SelectItem value={"copy"}>
                   <ToolbarSelectItem
                     shortcut={
-                      shortcuts.find((obj) => obj.name === "Update")?.shortcut!
+                      shortcuts.find((obj) => obj.name === "Copy")?.shortcut!
                     }
-                    value={"Restore"}
-                    icon={"RefreshCcwDot"}
-                    dataTestId="update-button-modal"
+                    value={"Copy"}
+                    icon={"Clipboard"}
+                    dataTestId="copy-button-modal"
                   />
                 </SelectItem>
-              )}
-              {hasStore && (
+                {isOutdated && (
+                  <SelectItem value={"update"}>
+                    <ToolbarSelectItem
+                      shortcut={
+                        shortcuts.find((obj) => obj.name === "Update")
+                          ?.shortcut!
+                      }
+                      value={"Restore"}
+                      icon={"RefreshCcwDot"}
+                      dataTestId="update-button-modal"
+                    />
+                  </SelectItem>
+                )}
+                {hasStore && (
+                  <SelectItem
+                    value={"Share"}
+                    disabled={!hasApiKey || !validApiKey}
+                  >
+                    <ToolbarSelectItem
+                      shortcut={
+                        shortcuts.find((obj) => obj.name === "Component Share")
+                          ?.shortcut!
+                      }
+                      value={"Share"}
+                      icon={"Share3"}
+                      dataTestId="share-button-modal"
+                    />
+                  </SelectItem>
+                )}
+
                 <SelectItem
-                  value={"Share"}
-                  disabled={!hasApiKey || !validApiKey}
+                  value={"documentation"}
+                  disabled={data.node?.documentation === ""}
                 >
                   <ToolbarSelectItem
                     shortcut={
-                      shortcuts.find((obj) => obj.name === "Component Share")
-                        ?.shortcut!
+                      shortcuts.find((obj) => obj.name === "Docs")?.shortcut!
                     }
-                    value={"Share"}
-                    icon={"Share3"}
-                    dataTestId="share-button-modal"
+                    value={"Docs"}
+                    icon={"FileText"}
+                    dataTestId="docs-button-modal"
                   />
                 </SelectItem>
-              )}
-
-              <SelectItem
-                value={"documentation"}
-                disabled={data.node?.documentation === ""}
-              >
-                <ToolbarSelectItem
-                  shortcut={
-                    shortcuts.find((obj) => obj.name === "Docs")?.shortcut!
-                  }
-                  value={"Docs"}
-                  icon={"FileText"}
-                  dataTestId="docs-button-modal"
-                />
-              </SelectItem>
-              {(isMinimal || !showNode) && (
-                <SelectItem
-                  value={"show"}
-                  data-testid={`${showNode ? "minimize" : "expand"}-button-modal`}
-                >
+                {(isMinimal || !showNode) && (
+                  <SelectItem
+                    value={"show"}
+                    data-testid={`${showNode ? "minimize" : "expand"}-button-modal`}
+                  >
+                    <ToolbarSelectItem
+                      shortcut={
+                        shortcuts.find((obj) => obj.name === "Minimize")
+                          ?.shortcut!
+                      }
+                      value={showNode ? "Minimize" : "Expand"}
+                      icon={showNode ? "Minimize2" : "Maximize2"}
+                      dataTestId="minimize-button-modal"
+                    />
+                  </SelectItem>
+                )}
+                {isGroup && (
+                  <SelectItem value="ungroup">
+                    <ToolbarSelectItem
+                      shortcut={
+                        shortcuts.find((obj) => obj.name === "Group")?.shortcut!
+                      }
+                      value={"Ungroup"}
+                      icon={"Ungroup"}
+                      dataTestId="group-button-modal"
+                    />
+                  </SelectItem>
+                )}
+                <SelectItem value="freeze">
                   <ToolbarSelectItem
                     shortcut={
-                      shortcuts.find((obj) => obj.name === "Minimize")
-                        ?.shortcut!
+                      shortcuts.find((obj) => obj.name === "Freeze")?.shortcut!
                     }
-                    value={showNode ? "Minimize" : "Expand"}
-                    icon={showNode ? "Minimize2" : "Maximize2"}
-                    dataTestId="minimize-button-modal"
+                    value={"Freeze"}
+                    icon={"Snowflake"}
+                    dataTestId="freeze-button"
+                    style={`${frozen ? " text-ice" : ""} transition-all`}
                   />
                 </SelectItem>
-              )}
-              {isGroup && (
-                <SelectItem value="ungroup">
+                <SelectItem value="freezeAll">
                   <ToolbarSelectItem
                     shortcut={
-                      shortcuts.find((obj) => obj.name === "Group")?.shortcut!
+                      shortcuts.find((obj) => obj.name === "Freeze Path")
+                        ?.shortcut!
                     }
-                    value={"Ungroup"}
-                    icon={"Ungroup"}
-                    dataTestId="group-button-modal"
+                    value={"Freeze Path"}
+                    icon={"FreezeAll"}
+                    dataTestId="freeze-path-button"
+                    style={`${frozen ? " text-ice" : ""} transition-all`}
                   />
                 </SelectItem>
-              )}
-              <SelectItem value="freeze">
-                <ToolbarSelectItem
-                  shortcut={
-                    shortcuts.find((obj) => obj.name === "Freeze")?.shortcut!
-                  }
-                  value={"Freeze"}
-                  icon={"Snowflake"}
-                  dataTestId="freeze-button"
-                  style={`${frozen ? " text-ice" : ""} transition-all`}
-                />
-              </SelectItem>
-              <SelectItem value="freezeAll">
-                <ToolbarSelectItem
-                  shortcut={
-                    shortcuts.find((obj) => obj.name === "Freeze Path")
-                      ?.shortcut!
-                  }
-                  value={"Freeze Path"}
-                  icon={"FreezeAll"}
-                  dataTestId="freeze-path-button"
-                  style={`${frozen ? " text-ice" : ""} transition-all`}
-                />
-              </SelectItem>
-              <SelectItem value="Download">
-                <ToolbarSelectItem
-                  shortcut={
-                    shortcuts.find((obj) => obj.name === "Download")?.shortcut!
-                  }
-                  value={"Download"}
-                  icon={"Download"}
-                  dataTestId="download-button-modal"
-                />
-              </SelectItem>
-              <SelectItem value={"delete"} className="focus:bg-red-400/[.20]">
-                <div className="font-red flex text-status-red">
-                  <IconComponent
-                    name="Trash2"
-                    className="relative top-0.5 mr-2 h-4 w-4"
-                  />{" "}
-                  <span className="">Delete</span>{" "}
-                  <span
-                    className={`absolute right-2 top-2 flex items-center justify-center rounded-sm px-1 py-[0.2]`}
-                  >
-                    <IconComponent
-                      name="Delete"
-                      className="h-4 w-4 stroke-2 text-red-400"
-                    ></IconComponent>
-                  </span>
-                </div>
-              </SelectItem>
-              {hasToolMode && (
-                <SelectItem value="toolMode">
+                <SelectItem value="Download">
                   <ToolbarSelectItem
                     shortcut={
-                      shortcuts.find((obj) => obj.name === "Tool Mode")
+                      shortcuts.find((obj) => obj.name === "Download")
                         ?.shortcut!
                     }
-                    value={"Tool Mode"}
-                    icon={"Hammer"}
-                    dataTestId="tool-mode-button"
-                    style={`${toolMode ? "text-primary" : ""} transition-all`}
+                    value={"Download"}
+                    icon={"Download"}
+                    dataTestId="download-button-modal"
                   />
                 </SelectItem>
-              )}
-            </SelectContentWithoutPortal>
-          </Select>
-        </div>
+                <SelectItem value={"delete"} className="focus:bg-red-400/[.20]">
+                  <div className="font-red flex text-status-red">
+                    <IconComponent
+                      name="Trash2"
+                      className="relative top-0.5 mr-2 h-4 w-4"
+                    />{" "}
+                    <span className="">Delete</span>{" "}
+                    <span
+                      className={`absolute right-2 top-2 flex items-center justify-center rounded-sm px-1 py-[0.2]`}
+                    >
+                      <IconComponent
+                        name="Delete"
+                        className="h-4 w-4 stroke-2 text-red-400"
+                      ></IconComponent>
+                    </span>
+                  </div>
+                </SelectItem>
+                {hasToolMode && (
+                  <SelectItem value="toolMode">
+                    <ToolbarSelectItem
+                      shortcut={
+                        shortcuts.find((obj) => obj.name === "Tool Mode")
+                          ?.shortcut!
+                      }
+                      value={"Tool Mode"}
+                      icon={"Hammer"}
+                      dataTestId="tool-mode-button"
+                      style={`${toolMode ? "text-primary" : ""} transition-all`}
+                    />
+                  </SelectItem>
+                )}
+              </SelectContentWithoutPortal>
+            </Select>
+          </div>
 
-        <ConfirmationModal
-          open={showOverrideModal}
-          title="Replace"
-          onConfirm={handleConfirm}
-          onClose={handleClose}
-          onCancel={handleCancel}
-          cancelText="Create New"
-          confirmationText="Replace"
-          size={"x-small"}
-          icon={"SaveAll"}
-          index={6}
-        >
-          <ConfirmationModal.Content>
-            <span>
-              It seems {data.node?.display_name} already exists. Do you want to
-              replace it with the current or create a new one?
-            </span>
-          </ConfirmationModal.Content>
-        </ConfirmationModal>
-        {showModalAdvanced && (
-          <EditNodeModal
+          <ToolbarModals
+            showModalAdvanced={showModalAdvanced}
+            showconfirmShare={showconfirmShare}
+            showOverrideModal={showOverrideModal}
+            openModal={openModal}
+            hasCode={hasCode}
+            setShowModalAdvanced={setShowModalAdvanced}
+            setShowconfirmShare={setShowconfirmShare}
+            setShowOverrideModal={setShowOverrideModal}
+            setOpenModal={setOpenModal}
             data={data}
-            open={showModalAdvanced}
-            setOpen={setShowModalAdvanced}
+            flowComponent={flowComponent}
+            handleOnNewValue={handleOnNewValue}
+            handleNodeClass={handleNodeClass}
+            setToolMode={setToolMode}
+            setSuccessData={setSuccessData}
+            addFlow={addFlow}
+            name={name}
           />
-        )}
-        {showconfirmShare && (
-          <ShareModal
-            open={showconfirmShare}
-            setOpen={setShowconfirmShare}
-            is_component={true}
-            component={flowComponent!}
-          />
-        )}
-        {hasCode && (
-          <div className="hidden">
-            {openModal && (
-              <CodeAreaModal
-                setValue={handleOnNewValue}
-                open={openModal}
-                setOpen={setOpenModal}
-                dynamic={true}
-                setNodeClass={(apiClassType, type) => {
-                  handleNodeClass(apiClassType, type);
-                  setToolMode(false);
-                }}
-                nodeClass={data.node}
-                value={data.node?.template[name].value ?? ""}
-                componentId={data.id}
-              >
-                <></>
-              </CodeAreaModal>
-            )}
-          </div>
-        )}
-      </div>
-    </>
-  );
-}
+        </div>
+      </>
+    );
+  },
+);
+
+NodeToolbarComponent.displayName = "NodeToolbarComponent";
+
+export default NodeToolbarComponent;