diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
index 04936f3de..d24f95d10 100644
--- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
@@ -17,6 +17,7 @@ import {
 } from "../../../../utils/styleUtils";
 import { classNames, removeCountFromString } from "../../../../utils/utils";
 import DisclosureComponent from "../DisclosureComponent";
+import SidebarDraggableComponent from "./sideBarDraggableComponent";
 
 export default function ExtraSidebar(): JSX.Element {
   const { data, templates, getFilterEdge, setFilterEdge } =
@@ -242,45 +243,23 @@ export default function ExtraSidebar(): JSX.Element {
                         side="right"
                         key={index}
                       >
-                        <div key={SBItemName} data-tooltip-id={SBItemName}>
-                          <div
-                            draggable={!data[SBSectionName][SBItemName].error}
-                            className={
-                              "side-bar-components-border bg-background" +
-                              (data[SBSectionName][SBItemName].error
-                                ? " cursor-not-allowed select-none"
-                                : "")
-                            }
-                            style={{
-                              borderLeftColor:
-                                nodeColors[SBSectionName] ?? nodeColors.unknown,
-                            }}
-                            onDragStart={(event) =>
-                              onDragStart(event, {
-                                //split type to remove type in nodes saved with same name removing it's
-                                type: removeCountFromString(SBItemName),
-                                node: data[SBSectionName][SBItemName],
-                              })
-                            }
-                            onDragEnd={() => {
-                              document.body.removeChild(
-                                document.getElementsByClassName(
-                                  "cursor-grabbing"
-                                )[0]
-                              );
-                            }}
-                          >
-                            <div className="side-bar-components-div-form">
-                              <span className="side-bar-components-text">
-                                {data[SBSectionName][SBItemName].display_name}
-                              </span>
-                              <IconComponent
-                                name="Menu"
-                                className="side-bar-components-icon "
-                              />
-                            </div>
-                          </div>
-                        </div>
+                        <SidebarDraggableComponent
+                          key={SBItemName}
+                          onDragStart={(event) =>
+                            onDragStart(event, {
+                              //split type to remove type in nodes saved with same name removing it's
+                              type: removeCountFromString(SBItemName),
+                              node: data[SBSectionName][SBItemName],
+                            })
+                          }
+                          color={nodeColors[SBSectionName]}
+                          itemName={SBItemName}
+                          //convert error to boolean
+                          error={!!data[SBSectionName][SBItemName].error}
+                          display_name={
+                            data[SBSectionName][SBItemName].display_name
+                          }
+                        />
                       </ShadTooltip>
                     ))}
                 </div>
diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sideBarDraggableComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sideBarDraggableComponent/index.tsx
new file mode 100644
index 000000000..7d9351af4
--- /dev/null
+++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sideBarDraggableComponent/index.tsx
@@ -0,0 +1,42 @@
+import { DragEventHandler } from "react";
+import IconComponent from "../../../../../components/genericIconComponent";
+
+export default function SidebarDraggableComponent({
+  display_name,
+  itemName,
+  error,
+  color,
+  onDragStart,
+}: {
+  display_name: string;
+  itemName: string;
+  error: boolean;
+  color: string;
+  onDragStart: DragEventHandler<HTMLDivElement>;
+}) {
+  return (
+    <div key={itemName} data-tooltip-id={itemName}>
+      <div
+        draggable={!error}
+        className={
+          "side-bar-components-border bg-background" +
+          (error ? " cursor-not-allowed select-none" : "")
+        }
+        style={{
+          borderLeftColor: color,
+        }}
+        onDragStart={onDragStart}
+        onDragEnd={() => {
+          document.body.removeChild(
+            document.getElementsByClassName("cursor-grabbing")[0]
+          );
+        }}
+      >
+        <div className="side-bar-components-div-form">
+          <span className="side-bar-components-text">{display_name}</span>
+          <IconComponent name="Menu" className="side-bar-components-icon " />
+        </div>
+      </div>
+    </div>
+  );
+}