diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx
index 85e7810a1..71c10c539 100644
--- a/src/frontend/src/CustomNodes/GenericNode/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx
@@ -1,4 +1,12 @@
-import { BugAntIcon, Cog6ToothIcon, ExclamationCircleIcon, InformationCircleIcon, TrashIcon } from "@heroicons/react/24/outline";
+import {
+  BugAntIcon,
+  CheckCircleIcon,
+  Cog6ToothIcon,
+  EllipsisHorizontalCircleIcon,
+  ExclamationCircleIcon,
+  InformationCircleIcon,
+  TrashIcon,
+} from "@heroicons/react/24/outline";
 import { classNames, nodeColors, nodeIcons, toNormalCase } from "../../utils";
 import ParameterComponent from "./components/parameterComponent";
 import { typesContext } from "../../contexts/typesContext";
@@ -12,11 +20,11 @@ import { TabsContext } from "../../contexts/tabsContext";
 import { debounce } from "../../utils";
 import Tooltip from "../../components/TooltipComponent";
 export default function GenericNode({
-	data,
-	selected,
+  data,
+  selected,
 }: {
-	data: NodeDataType;
-	selected: boolean;
+  data: NodeDataType;
+  selected: boolean;
 }) {
   const { setErrorData } = useContext(alertContext);
   const showError = useRef(true);
@@ -30,32 +38,28 @@ export default function GenericNode({
   const { reactFlowInstance } = useContext(typesContext);
   const [params, setParams] = useState([]);
 
-	useEffect(() => {
-		if (reactFlowInstance) {
-			setParams(Object.values(reactFlowInstance.toObject()));
-		}
-	}, [save]);
+  useEffect(() => {
+    if (reactFlowInstance) {
+      setParams(Object.values(reactFlowInstance.toObject()));
+    }
+  }, [save]);
 
-	const validateNode = useCallback(
-		debounce(async () => {
-			try {
-				const response = await fetch(`/validate/node/${data.id}`, {
-					method: "POST",
-					headers: {
-						"Content-Type": "application/json",
-					},
-					body: JSON.stringify(reactFlowInstance.toObject()),
-				});
+  const validateNode = useCallback(
+    debounce(async () => {
+      try {
+        const response = await fetch(`/validate/node/${data.id}`, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify(reactFlowInstance.toObject()),
+        });
 
         if (response.status === 200) {
           let jsonResponse = await response.json();
           let jsonResponseParsed = await JSON.parse(jsonResponse);
           console.log(jsonResponseParsed);
-          if(jsonResponseParsed.valid){
-            setValidationStatus(jsonResponseParsed.params);
-          } else {
-            setValidationStatus("error");
-          }
+          setValidationStatus(jsonResponseParsed);
         }
       } catch (error) {
         // console.error("Error validating node:", error);
@@ -70,31 +74,22 @@ export default function GenericNode({
     }
   }, [params, validateNode]);
 
-  useEffect(() => {
-    if (validationStatus !== "error") {
-      setIsValid(true);
-    } else {
-      setIsValid(false);
+  if (!Icon) {
+    if (showError.current) {
+      setErrorData({
+        title: data.type
+          ? `The ${data.type} node could not be rendered, please review your json file`
+          : "There was a node that can't be rendered, please review your json file",
+      });
+      showError.current = false;
     }
-  }, [validationStatus]);
-
-	if (!Icon) {
-		if (showError.current) {
-			setErrorData({
-				title: data.type
-					? `The ${data.type} node could not be rendered, please review your json file`
-					: "There was a node that can't be rendered, please review your json file",
-			});
-			showError.current = false;
-		}
-		deleteNode(data.id);
-		return;
-	}
+    deleteNode(data.id);
+    return;
+  }
 
   return (
     <div
       className={classNames(
-        isValid ? "animate-pulse-green" : "border-red-outline",
         selected ? "border border-blue-500" : "border dark:border-gray-700",
         "prompt-node relative bg-white dark:bg-gray-900 w-96 rounded-lg flex flex-col justify-center"
       )}
@@ -108,15 +103,46 @@ export default function GenericNode({
             }}
           />
           <div className="ml-2 truncate">{data.type}</div>
-          {validationStatus && validationStatus !== "error" ? 
-          <Tooltip title={
-              <div className="max-h-96 overflow-auto">
-                {validationStatus}
-              </div>}>
-            <ExclamationCircleIcon className="w-5 hover:text-gray-500 hover:dark:text-gray-300" /> 
-          </Tooltip>
-          : <></>
-}
+          <div>
+            <Tooltip
+              title={
+                !validationStatus ? (
+                  "Validating..."
+                ) : (
+                  <div className="max-h-96 overflow-auto">
+                    {validationStatus.params}
+                  </div>
+                )
+              }
+            >
+              <div className="relative w-5 h-5">
+                <CheckCircleIcon
+                  className={classNames(
+                    validationStatus && validationStatus.valid
+                      ? "text-green-500 opacity-100"
+                      : "text-green-500 opacity-0 animate-spin",
+                    "absolute w-5 hover:text-gray-500 hover:dark:text-gray-300 transition-all ease-in-out duration-200"
+                  )}
+                />
+                <ExclamationCircleIcon
+                  className={classNames(
+                    validationStatus && !validationStatus.valid
+                      ? "text-red-500 opacity-100"
+                      : "text-red-500 opacity-0 animate-spin",
+                    "w-5 absolute hover:text-gray-500 hover:dark:text-gray-600 transition-all ease-in-out duration-200"
+                  )}
+                />
+                <EllipsisHorizontalCircleIcon
+                  className={classNames(
+                    !validationStatus
+                      ? "text-yellow-500 opacity-100"
+                      : "text-yellow-500 opacity-0 animate-spin",
+                    "w-5 absolute hover:text-gray-500 hover:dark:text-gray-600 transition-all ease-in-out duration-300"
+                  )}
+                />
+              </div>
+            </Tooltip>
+          </div>
         </div>
         <div className="flex gap-3">
           <button
@@ -162,12 +188,12 @@ export default function GenericNode({
           {data.node.description}
         </div>
 
-				<>
-					{Object.keys(data.node.template)
-						.filter((t) => t.charAt(0) !== "_")
-						.map((t: string, idx) => (
-							<div key={idx}>
-								{/* {idx === 0 ? (
+        <>
+          {Object.keys(data.node.template)
+            .filter((t) => t.charAt(0) !== "_")
+            .map((t: string, idx) => (
+              <div key={idx}>
+                {/* {idx === 0 ? (
 									<div
 										className={classNames(
 											"px-5 py-2 mt-2 dark:text-white text-center",
@@ -186,59 +212,59 @@ export default function GenericNode({
 								) : (
 									<></>
 								)} */}
-								{data.node.template[t].show &&
-								!data.node.template[t].advanced ? (
-									<ParameterComponent
-										data={data}
-										color={
-											nodeColors[types[data.node.template[t].type]] ??
-											nodeColors.unknown
-										}
-										title={
-											data.node.template[t].display_name
-												? data.node.template[t].display_name
-												: data.node.template[t].name
-												? toNormalCase(data.node.template[t].name)
-												: toNormalCase(t)
-										}
-										name={t}
-										tooltipTitle={
-											"Type: " +
-											data.node.template[t].type +
-											(data.node.template[t].list ? " list" : "")
-										}
-										required={data.node.template[t].required}
-										id={data.node.template[t].type + "|" + t + "|" + data.id}
-										left={true}
-										type={data.node.template[t].type}
-									/>
-								) : (
-									<></>
-								)}
-							</div>
-						))}
-					<div
-						className={classNames(
-							Object.keys(data.node.template).length < 1 ? "hidden" : "",
-							"w-full flex justify-center"
-						)}
-					>
-						{" "}
-					</div>
-					{/* <div className="px-5 py-2 mt-2 dark:text-white text-center">
+                {data.node.template[t].show &&
+                !data.node.template[t].advanced ? (
+                  <ParameterComponent
+                    data={data}
+                    color={
+                      nodeColors[types[data.node.template[t].type]] ??
+                      nodeColors.unknown
+                    }
+                    title={
+                      data.node.template[t].display_name
+                        ? data.node.template[t].display_name
+                        : data.node.template[t].name
+                        ? toNormalCase(data.node.template[t].name)
+                        : toNormalCase(t)
+                    }
+                    name={t}
+                    tooltipTitle={
+                      "Type: " +
+                      data.node.template[t].type +
+                      (data.node.template[t].list ? " list" : "")
+                    }
+                    required={data.node.template[t].required}
+                    id={data.node.template[t].type + "|" + t + "|" + data.id}
+                    left={true}
+                    type={data.node.template[t].type}
+                  />
+                ) : (
+                  <></>
+                )}
+              </div>
+            ))}
+          <div
+            className={classNames(
+              Object.keys(data.node.template).length < 1 ? "hidden" : "",
+              "w-full flex justify-center"
+            )}
+          >
+            {" "}
+          </div>
+          {/* <div className="px-5 py-2 mt-2 dark:text-white text-center">
 						Output
 					</div> */}
-					<ParameterComponent
-						data={data}
-						color={nodeColors[types[data.type]] ?? nodeColors.unknown}
-						title={data.type}
-						tooltipTitle={`Type: ${data.node.base_classes.join(" | ")}`}
-						id={[data.type, data.id, ...data.node.base_classes].join("|")}
-						type={data.node.base_classes.join("|")}
-						left={false}
-					/>
-				</>
-			</div>
-		</div>
-	);
+          <ParameterComponent
+            data={data}
+            color={nodeColors[types[data.type]] ?? nodeColors.unknown}
+            title={data.type}
+            tooltipTitle={`Type: ${data.node.base_classes.join(" | ")}`}
+            id={[data.type, data.id, ...data.node.base_classes].join("|")}
+            type={data.node.base_classes.join("|")}
+            left={false}
+          />
+        </>
+      </div>
+    </div>
+  );
 }