diff --git a/src/frontend/src/CustomNodes/hooks/use-icons-status.tsx b/src/frontend/src/CustomNodes/hooks/use-icons-status.tsx
index ec378fac2..55936c6c9 100644
--- a/src/frontend/src/CustomNodes/hooks/use-icons-status.tsx
+++ b/src/frontend/src/CustomNodes/hooks/use-icons-status.tsx
@@ -4,11 +4,21 @@ import Loading from "../../components/ui/loading";
 import Xmark from "../../components/ui/xmark";
 import { BuildStatus } from "../../constants/enums";
 import { VertexBuildTypeAPI } from "../../types/api";
+import { cn } from "../../utils/utils";
 
 const useIconStatus = (
   buildStatus: BuildStatus | undefined,
   validationStatus: VertexBuildTypeAPI | null,
 ) => {
+  const conditionSuccess = validationStatus && validationStatus.valid;
+  const conditionInactive =
+    validationStatus &&
+    !validationStatus.valid &&
+    buildStatus === BuildStatus.INACTIVE;
+  const conditionError =
+    buildStatus === BuildStatus.ERROR ||
+    (validationStatus && !validationStatus.valid);
+
   const renderIconStatus = () => {
     if (buildStatus === BuildStatus.BUILDING) {
       return <Loading className="text-medium-indigo" />;
@@ -17,31 +27,30 @@ const useIconStatus = (
         <>
           <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"
+            className={cn(
+              !conditionSuccess && !conditionInactive && !conditionError
+                ? "opacity-100"
+                : "opacity-0",
+              "absolute ml-0.5 h-5 fill-current stroke-2 text-muted-foreground transition-all group-hover:text-medium-indigo group-hover/node:opacity-100",
+            )}
           />
-          {validationStatus && validationStatus.valid ? (
+          {conditionSuccess ? (
             <Checkmark
-              className="absolute ml-0.5 h-5 stroke-2 text-status-green opacity-100 transition-all group-hover:opacity-0"
+              className="absolute ml-0.5 h-5 stroke-2 text-status-green opacity-100 transition-all group-hover/node:opacity-0"
               isVisible={true}
             />
-          ) : validationStatus &&
-            !validationStatus.valid &&
-            buildStatus === BuildStatus.INACTIVE ? (
+          ) : conditionInactive ? (
             <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"
+              className="absolute ml-0.5 h-5 fill-current stroke-2 text-status-gray opacity-30 transition-all group-hover/node:opacity-0"
             />
-          ) : buildStatus === BuildStatus.ERROR ||
-            (validationStatus && !validationStatus.valid) ? (
+          ) : conditionError ? (
             <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"
+              className="absolute ml-0.5 h-5 fill-current stroke-2 text-status-red opacity-100 transition-all group-hover/node: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"
-            />
+            <></>
           )}
         </>
       );