diff --git a/src/frontend/src/customNodes/hooks/use-icons-status.tsx b/src/frontend/src/customNodes/hooks/use-icons-status.tsx
new file mode 100644
index 000000000..ec378fac2
--- /dev/null
+++ b/src/frontend/src/customNodes/hooks/use-icons-status.tsx
@@ -0,0 +1,54 @@
+import IconComponent from "../../components/genericIconComponent";
+import Checkmark from "../../components/ui/checkmark";
+import Loading from "../../components/ui/loading";
+import Xmark from "../../components/ui/xmark";
+import { BuildStatus } from "../../constants/enums";
+import { VertexBuildTypeAPI } from "../../types/api";
+
+const useIconStatus = (
+  buildStatus: BuildStatus | undefined,
+  validationStatus: VertexBuildTypeAPI | null,
+) => {
+  const renderIconStatus = () => {
+    if (buildStatus === BuildStatus.BUILDING) {
+      return <Loading className="text-medium-indigo" />;
+    } else {
+      return (
+        <>
+          <IconComponent
+            name="Play"
+            className="absolute ml-0.5 h-5 fill-current stroke-2 text-medium-indigo opacity-0 transition-all group-hover:opacity-100"
+          />
+          {validationStatus && validationStatus.valid ? (
+            <Checkmark
+              className="absolute ml-0.5 h-5 stroke-2 text-status-green opacity-100 transition-all group-hover:opacity-0"
+              isVisible={true}
+            />
+          ) : validationStatus &&
+            !validationStatus.valid &&
+            buildStatus === BuildStatus.INACTIVE ? (
+            <IconComponent
+              name="Play"
+              className="absolute ml-0.5 h-5 fill-current stroke-2 text-status-green opacity-30 transition-all group-hover:opacity-0"
+            />
+          ) : buildStatus === BuildStatus.ERROR ||
+            (validationStatus && !validationStatus.valid) ? (
+            <Xmark
+              isVisible={true}
+              className="absolute ml-0.5 h-5 fill-current stroke-2 text-status-red opacity-100 transition-all group-hover:opacity-0"
+            />
+          ) : (
+            <IconComponent
+              name="Play"
+              className="absolute ml-0.5 h-5 fill-current stroke-2 text-muted-foreground opacity-100 transition-all group-hover:opacity-0"
+            />
+          )}
+        </>
+      );
+    }
+  };
+
+  return renderIconStatus();
+};
+
+export default useIconStatus;
diff --git a/src/frontend/src/customNodes/hooks/use-update-node-code.tsx b/src/frontend/src/customNodes/hooks/use-update-node-code.tsx
new file mode 100644
index 000000000..28220d141
--- /dev/null
+++ b/src/frontend/src/customNodes/hooks/use-update-node-code.tsx
@@ -0,0 +1,38 @@
+import { cloneDeep } from "lodash"; // or any other deep cloning library you prefer
+import { useCallback } from "react";
+import { APIClassType } from "../../types/api";
+
+const useUpdateNodeCode = (
+  dataId: string,
+  dataNode: APIClassType, // Define YourNodeType according to your data structure
+  setNode: (id: string, callback: (oldNode) => any) => void,
+  setIsOutdated: (value: boolean) => void,
+  updateNodeInternals: (id: string) => void,
+) => {
+  const updateNodeCode = useCallback(
+    (newNodeClass: APIClassType, code: string, name: string) => {
+      setNode(dataId, (oldNode) => {
+        let newNode = cloneDeep(oldNode);
+
+        newNode.data = {
+          ...newNode.data,
+          node: newNodeClass,
+          description: newNodeClass.description ?? dataNode.description,
+          display_name: newNodeClass.display_name ?? dataNode.display_name,
+        };
+
+        newNode.data.node.template[name].value = code;
+        setIsOutdated(false);
+
+        return newNode;
+      });
+
+      updateNodeInternals(dataId);
+    },
+    [dataId, dataNode, setNode, setIsOutdated, updateNodeInternals],
+  );
+
+  return updateNodeCode;
+};
+
+export default useUpdateNodeCode;
diff --git a/src/frontend/src/customNodes/hooks/use-update-validation-status.tsx b/src/frontend/src/customNodes/hooks/use-update-validation-status.tsx
new file mode 100644
index 000000000..2a7153dfb
--- /dev/null
+++ b/src/frontend/src/customNodes/hooks/use-update-validation-status.tsx
@@ -0,0 +1,18 @@
+import { useEffect } from "react";
+
+const useUpdateValidationStatus = (dataId, flowPool, setValidationStatus) => {
+  useEffect(() => {
+    const relevantData =
+      flowPool[dataId] && flowPool[dataId]?.length > 0
+        ? flowPool[dataId][flowPool[dataId].length - 1]
+        : null;
+    if (relevantData) {
+      // Extract validation information from relevantData and update the validationStatus state
+      setValidationStatus(relevantData);
+    } else {
+      setValidationStatus(null);
+    }
+  }, [flowPool[dataId], dataId, setValidationStatus]);
+};
+
+export default useUpdateValidationStatus;
diff --git a/src/frontend/src/customNodes/hooks/use-validation-status-string.tsx b/src/frontend/src/customNodes/hooks/use-validation-status-string.tsx
new file mode 100644
index 000000000..9447bb643
--- /dev/null
+++ b/src/frontend/src/customNodes/hooks/use-validation-status-string.tsx
@@ -0,0 +1,22 @@
+import { useEffect } from "react";
+
+const useValidationStatusString = (validationStatus, setValidationString) => {
+  useEffect(() => {
+    if (validationStatus?.data.logs) {
+      // if it is not a string turn it into a string
+      let newValidationString = "";
+      if (Array.isArray(validationStatus.data.logs)) {
+        newValidationString = validationStatus.data.logs
+          .map((log) => log.message)
+          .join("\n");
+      }
+      if (typeof newValidationString !== "string") {
+        newValidationString = JSON.stringify(validationStatus.data.logs);
+      }
+
+      setValidationString(newValidationString);
+    }
+  }, [validationStatus, validationStatus?.data.logs, setValidationString]);
+};
+
+export default useValidationStatusString;