diff --git a/src/frontend/src/components/codeAreaComponent/index.tsx b/src/frontend/src/components/codeAreaComponent/index.tsx
index 00578a25a..e0a46f88c 100644
--- a/src/frontend/src/components/codeAreaComponent/index.tsx
+++ b/src/frontend/src/components/codeAreaComponent/index.tsx
@@ -30,57 +30,63 @@ export default function CodeAreaComponent({
   }, [value]);
 
   return (
-    <div
-      className={
-        disabled ? "pointer-events-none w-full cursor-not-allowed" : "w-full"
-      }
-    >
-      <div className="flex w-full items-center">
-        <span
-          onClick={() => {
-            openPopUp(
-              <CodeAreaModal
-                value={myValue}
-                nodeClass={nodeClass}
-                setNodeClass={setNodeClass}
-                setValue={(t: string) => {
-                  setMyValue(t);
-                  onChange(t);
-                }}
+    <div className={disabled ? "cursor-not-allowed" : ""}>
+      <div
+        className={
+          (editNode ? "w-full items-center" : "flex w-full items-center") +
+          (disabled ? " pointer-events-none" : "")
+        }
+      >
+        <div className="flex w-full items-center">
+          <span
+            onClick={() => {
+              openPopUp(
+                <CodeAreaModal
+                  value={myValue}
+                  nodeClass={nodeClass}
+                  setNodeClass={setNodeClass}
+                  setValue={(t: string) => {
+                    setMyValue(t);
+                    onChange(t);
+                  }}
+                />
+              );
+            }}
+            className={
+              editNode
+                ? "input-edit-node input-dialog "
+                : "input-dialog input-primary " +
+                  (disabled ? "input-disable" : "")
+            }
+          >
+            {myValue !== "" ? myValue : "Type something..."}
+          </span>
+          <button
+            onClick={() => {
+              openPopUp(
+                <CodeAreaModal
+                  setNodeClass={setNodeClass}
+                  value={myValue}
+                  nodeClass={nodeClass}
+                  setValue={(t: string) => {
+                    setMyValue(t);
+                    onChange(t);
+                  }}
+                />
+              );
+            }}
+          >
+            {!editNode && (
+              <ExternalLink
+                strokeWidth={1.5}
+                className={
+                  "ml-3 h-6 w-6" +
+                  (disabled ? " text-ring" : " hover:text-accent-foreground")
+                }
               />
-            );
-          }}
-          className={
-            editNode
-              ? "input-edit-node input-dialog "
-              : "input-dialog input-primary " +
-                (disabled ? "input-disable" : "")
-          }
-        >
-          {myValue !== "" ? myValue : "Type something..."}
-        </span>
-        <button
-          onClick={() => {
-            openPopUp(
-              <CodeAreaModal
-                setNodeClass={setNodeClass}
-                value={myValue}
-                nodeClass={nodeClass}
-                setValue={(t: string) => {
-                  setMyValue(t);
-                  onChange(t);
-                }}
-              />
-            );
-          }}
-        >
-          {!editNode && (
-            <ExternalLink
-              strokeWidth={1.5}
-              className="ml-3 h-6 w-6  hover:text-accent-foreground"
-            />
-          )}
-        </button>
+            )}
+          </button>
+        </div>
       </div>
     </div>
   );
diff --git a/src/frontend/src/components/promptComponent/index.tsx b/src/frontend/src/components/promptComponent/index.tsx
index 18bf9cc01..8bac5fe7e 100644
--- a/src/frontend/src/components/promptComponent/index.tsx
+++ b/src/frontend/src/components/promptComponent/index.tsx
@@ -47,65 +47,66 @@ export default function PromptAreaComponent({
   }, [reactFlowInstance, field_name]);
 
   return (
-    <div
-      className={
-        disabled ? "pointer-events-none w-full cursor-not-allowed" : " w-full"
-      }
-    >
-      <div className="flex w-full items-center">
-        <span
-          onClick={() => {
-            openPopUp(
-              <GenericModal
-                type={TypeModal.PROMPT}
-                value={myValue}
-                buttonText="Check & Save"
-                modalTitle="Edit Prompt"
-                setValue={(t: string) => {
-                  setMyValue(t);
-                  onChange(t);
-                }}
-                nodeClass={nodeClass}
-                setNodeClass={setNodeClass}
+    <div className={disabled ? "cursor-not-allowed" : ""}>
+      <div className={disabled ? "pointer-events-none w-full " : " w-full"}>
+        <div className="flex w-full items-center">
+          <span
+            onClick={() => {
+              openPopUp(
+                <GenericModal
+                  type={TypeModal.PROMPT}
+                  value={myValue}
+                  buttonText="Check & Save"
+                  modalTitle="Edit Prompt"
+                  setValue={(t: string) => {
+                    setMyValue(t);
+                    onChange(t);
+                  }}
+                  nodeClass={nodeClass}
+                  setNodeClass={setNodeClass}
+                />
+              );
+            }}
+            className={
+              editNode
+                ? " input-edit-node " + " input-dialog "
+                : (disabled ? " input-disable " : "") +
+                  " input-primary " +
+                  " input-dialog "
+            }
+          >
+            {myValue !== "" ? myValue : "Type your prompt here"}
+          </span>
+          <button
+            onClick={() => {
+              openPopUp(
+                <GenericModal
+                  field_name={field_name}
+                  type={TypeModal.PROMPT}
+                  value={myValue}
+                  buttonText="Check & Save"
+                  modalTitle="Edit Prompt"
+                  setValue={(t: string) => {
+                    setMyValue(t);
+                    onChange(t);
+                  }}
+                  nodeClass={nodeClass}
+                  setNodeClass={setNodeClass}
+                />
+              );
+            }}
+          >
+            {!editNode && (
+              <ExternalLink
+                strokeWidth={1.5}
+                className={
+                  "ml-3 h-6 w-6" +
+                  (disabled ? " text-ring" : " hover:text-accent-foreground")
+                }
               />
-            );
-          }}
-          className={
-            editNode
-              ? " input-edit-node " + " input-dialog "
-              : (disabled ? " input-disable " : "") +
-                " input-primary " +
-                " input-dialog "
-          }
-        >
-          {myValue !== "" ? myValue : "Type your prompt here"}
-        </span>
-        <button
-          onClick={() => {
-            openPopUp(
-              <GenericModal
-                field_name={field_name}
-                type={TypeModal.PROMPT}
-                value={myValue}
-                buttonText="Check & Save"
-                modalTitle="Edit Prompt"
-                setValue={(t: string) => {
-                  setMyValue(t);
-                  onChange(t);
-                }}
-                nodeClass={nodeClass}
-                setNodeClass={setNodeClass}
-              />
-            );
-          }}
-        >
-          {!editNode && (
-            <ExternalLink
-              strokeWidth={1.5}
-              className="ml-3 h-6 w-6 hover:text-accent-foreground"
-            />
-          )}
-        </button>
+            )}
+          </button>
+        </div>
       </div>
     </div>
   );
diff --git a/src/frontend/src/components/textAreaComponent/index.tsx b/src/frontend/src/components/textAreaComponent/index.tsx
index b175da5de..c62af4b30 100644
--- a/src/frontend/src/components/textAreaComponent/index.tsx
+++ b/src/frontend/src/components/textAreaComponent/index.tsx
@@ -27,10 +27,11 @@ export default function TextAreaComponent({
   }, [closePopUp]);
 
   return (
-    <div className={disabled ? "pointer-events-none cursor-not-allowed" : ""}>
+    <div className={disabled ? "cursor-not-allowed" : ""}>
       <div
         className={
-          editNode ? "w-full items-center" : "flex w-full items-center"
+          (editNode ? "w-full items-center" : "flex w-full items-center") +
+          (disabled ? " pointer-events-none" : "")
         }
       >
         <span
@@ -57,6 +58,7 @@ export default function TextAreaComponent({
         >
           {myValue !== "" ? myValue : "Type something..."}
         </span>
+
         <button
           onClick={() => {
             openPopUp(
@@ -76,7 +78,10 @@ export default function TextAreaComponent({
           {!editNode && (
             <ExternalLink
               strokeWidth={1.5}
-              className="ml-3 h-6 w-6 hover:text-accent-foreground"
+              className={
+                "ml-3 h-6 w-6" +
+                (disabled ? " text-ring" : " hover:text-accent-foreground")
+              }
             />
           )}
         </button>