diff --git a/src/frontend/src/components/codeAreaComponent/index.tsx b/src/frontend/src/components/codeAreaComponent/index.tsx
index 966d8f26d..edd24c333 100644
--- a/src/frontend/src/components/codeAreaComponent/index.tsx
+++ b/src/frontend/src/components/codeAreaComponent/index.tsx
@@ -1,5 +1,4 @@
-import { useContext, useEffect, useState } from "react";
-import { PopUpContext } from "../../contexts/popUpContext";
+import { useEffect, useState } from "react";
 import CodeAreaModal from "../../modals/codeAreaModal";
 import { TextAreaComponentType } from "../../types/components";
 
@@ -16,7 +15,6 @@ export default function CodeAreaComponent({
   const [myValue, setMyValue] = useState(
     typeof value == "string" ? value : JSON.stringify(value)
   );
-  const { openPopUp } = useContext(PopUpContext);
   useEffect(() => {
     if (disabled) {
       setMyValue("");
@@ -30,45 +28,26 @@ export default function CodeAreaComponent({
 
   return (
     <div className={disabled ? "pointer-events-none w-full " : " 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);
-                }}
-              />
-            );
-          }}
-          className={
-            editNode
-              ? "input-edit-node input-dialog"
-              : (disabled ? " input-disable input-ring " : "") +
-                " input-primary text-muted-foreground "
-          }
-        >
-          {myValue !== "" ? myValue : "Type something..."}
-        </span>
-        <button
-          onClick={() => {
-            openPopUp(
-              <CodeAreaModal
-                setNodeClass={setNodeClass}
-                value={myValue}
-                nodeClass={nodeClass}
-                setValue={(t: string) => {
-                  setMyValue(t);
-                  onChange(t);
-                }}
-              />
-            );
-          }}
-        >
+      <CodeAreaModal
+        value={myValue}
+        nodeClass={nodeClass}
+        setNodeClass={setNodeClass}
+        setValue={(t: string) => {
+          setMyValue(t);
+          onChange(t);
+        }}
+      >
+        <div className="flex w-full items-center">
+          <span
+            className={
+              editNode
+                ? "input-edit-node input-dialog"
+                : (disabled ? " input-disable input-ring " : "") +
+                  " input-primary text-muted-foreground "
+            }
+          >
+            {myValue !== "" ? myValue : "Type something..."}
+          </span>
           {!editNode && (
             <ExternalLink
               strokeWidth={1.5}
@@ -78,8 +57,8 @@ export default function CodeAreaComponent({
               }
             />
           )}
-        </button>
-      </div>
+        </div>
+      </CodeAreaModal>
     </div>
   );
 }
diff --git a/src/frontend/src/components/promptComponent/index.tsx b/src/frontend/src/components/promptComponent/index.tsx
index 22384c299..82635fb5f 100644
--- a/src/frontend/src/components/promptComponent/index.tsx
+++ b/src/frontend/src/components/promptComponent/index.tsx
@@ -59,52 +59,29 @@ export default function PromptAreaComponent({
 
   return (
     <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 text-ring " : "") +
-                " input-primary text-muted-foreground "
-          }
-        >
-          {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}
-              />
-            );
-          }}
-        >
+      <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="flex w-full items-center">
+          <span
+            className={
+              editNode
+                ? "input-edit-node input-dialog"
+                : (disabled ? " input-disable text-ring " : "") +
+                  " input-primary text-muted-foreground "
+            }
+          >
+            {myValue !== "" ? myValue : "Type your prompt here"}
+          </span>
           {!editNode && (
             <ExternalLink
               strokeWidth={1.5}
@@ -114,8 +91,8 @@ export default function PromptAreaComponent({
               }
             />
           )}
-        </button>
-      </div>
+        </div>
+      </GenericModal>
     </div>
   );
 }
diff --git a/src/frontend/src/components/textAreaComponent/index.tsx b/src/frontend/src/components/textAreaComponent/index.tsx
index 8083b4eb7..72dc6982e 100644
--- a/src/frontend/src/components/textAreaComponent/index.tsx
+++ b/src/frontend/src/components/textAreaComponent/index.tsx
@@ -40,9 +40,10 @@ export default function TextAreaComponent({
             setDisableCopyPaste(false);
           }}
           className={
-            editNode
+            (editNode
               ? " input-edit-node "
-              : " input-primary " + (disabled ? " input-disable" : "")
+              : " input-primary " + (disabled ? " input-disable" : "")) +
+            " w-full"
           }
           placeholder={"Type something..."}
           onChange={(e) => {
@@ -50,33 +51,28 @@ export default function TextAreaComponent({
             onChange(e.target.value);
           }}
         />
-
-        <button
-          onClick={() => {
-            openPopUp(
-              <GenericModal
-                type={TypeModal.TEXT}
-                buttonText="Finishing Editing"
-                modalTitle="Edit Text"
-                value={myValue}
-                setValue={(t: string) => {
-                  setMyValue(t);
-                  onChange(t);
-                }}
+        <div>
+          <GenericModal
+            type={TypeModal.TEXT}
+            buttonText="Finishing Editing"
+            modalTitle="Edit Text"
+            value={myValue}
+            setValue={(t: string) => {
+              setMyValue(t);
+              onChange(t);
+            }}
+          >
+            {!editNode && (
+              <ExternalLink
+                strokeWidth={1.5}
+                className={
+                  "icons-parameters-comp" +
+                  (disabled ? " text-ring" : " hover:text-accent-foreground")
+                }
               />
-            );
-          }}
-        >
-          {!editNode && (
-            <ExternalLink
-              strokeWidth={1.5}
-              className={
-                "icons-parameters-comp" +
-                (disabled ? " text-ring" : " hover:text-accent-foreground")
-              }
-            />
-          )}
-        </button>
+            )}
+          </GenericModal>
+        </div>
       </div>
     </div>
   );
diff --git a/src/frontend/src/modals/baseModal/index.tsx b/src/frontend/src/modals/baseModal/index.tsx
index f603dceae..9c4ce35be 100644
--- a/src/frontend/src/modals/baseModal/index.tsx
+++ b/src/frontend/src/modals/baseModal/index.tsx
@@ -1,4 +1,4 @@
-import { ReactNode, useContext } from "react";
+import { ReactNode } from "react";
 
 import React from "react";
 import {
@@ -9,15 +9,18 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "../../components/ui/dialog";
-import { PopUpContext } from "../../contexts/popUpContext";
 
 type ContentProps = { children: ReactNode };
 type HeaderProps = { children: ReactNode; description: string };
 type FooterProps = { children: ReactNode };
+type TriggerProps = { children: ReactNode };
 
 const Content: React.FC<ContentProps> = ({ children }) => {
   return <div className="h-full w-full">{children}</div>;
 };
+const Trigger: React.FC<ContentProps> = ({ children }) => {
+  return <>{children}</>;
+};
 
 const Header: React.FC<{ children: ReactNode; description: string }> = ({
   children,
@@ -38,10 +41,11 @@ interface BaseModalProps {
   children: [
     React.ReactElement<ContentProps>,
     React.ReactElement<HeaderProps>,
+    React.ReactElement<TriggerProps>,
     React.ReactElement<FooterProps>?
   ];
-  open: boolean;
-  setOpen: (open: boolean) => void;
+  open?: boolean;
+  setOpen?: (open: boolean) => void;
   size?: "smaller" | "small" | "medium" | "large" | "large-h-full";
 }
 function BaseModal({
@@ -50,20 +54,12 @@ function BaseModal({
   children,
   size = "large",
 }: BaseModalProps) {
-  const { closePopUp, setCloseEdit } = useContext(PopUpContext);
-
-  function setModalOpen(x: boolean) {
-    setOpen(x);
-    if (x === false) {
-      setTimeout(() => {
-        setCloseEdit("editcode");
-        closePopUp();
-      }, 300);
-    }
-  }
   const headerChild = React.Children.toArray(children).find(
     (child) => (child as React.ReactElement).type === Header
   );
+  const triggerChild = React.Children.toArray(children).find(
+    (child) => (child as React.ReactElement).type === Trigger
+  );
   const ContentChild = React.Children.toArray(children).find(
     (child) => (child as React.ReactElement).type === Content
   );
@@ -102,8 +98,8 @@ function BaseModal({
 
   //UPDATE COLORS AND STYLE CLASSSES
   return (
-    <Dialog open={true} onOpenChange={setModalOpen}>
-      <DialogTrigger className="hidden"></DialogTrigger>
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger className="w-full">{triggerChild}</DialogTrigger>
       <DialogContent className={minWidth}>
         {headerChild}
         <div className={`mt-2 flex ${height} w-full `}>{ContentChild}</div>
@@ -116,5 +112,6 @@ function BaseModal({
 
 BaseModal.Content = Content;
 BaseModal.Header = Header;
+BaseModal.Trigger = Trigger;
 BaseModal.Footer = Footer;
 export default BaseModal;
diff --git a/src/frontend/src/modals/codeAreaModal/index.tsx b/src/frontend/src/modals/codeAreaModal/index.tsx
index cc0495977..44208ebd4 100644
--- a/src/frontend/src/modals/codeAreaModal/index.tsx
+++ b/src/frontend/src/modals/codeAreaModal/index.tsx
@@ -5,13 +5,12 @@ import "ace-builds/src-noconflict/mode-python";
 import "ace-builds/src-noconflict/theme-github";
 import "ace-builds/src-noconflict/theme-twilight";
 import { TerminalSquare } from "lucide-react";
-import { useContext, useState } from "react";
+import { ReactNode, useContext, useState } from "react";
 import AceEditor from "react-ace";
 import { Button } from "../../components/ui/button";
 import { CODE_PROMPT_DIALOG_SUBTITLE } from "../../constants";
 import { alertContext } from "../../contexts/alertContext";
 import { darkContext } from "../../contexts/darkContext";
-import { PopUpContext } from "../../contexts/popUpContext";
 import { postValidateCode } from "../../controllers/API";
 import { APIClassType } from "../../types/api";
 import BaseModal from "../baseModal";
@@ -21,24 +20,18 @@ export default function CodeAreaModal({
   setValue,
   nodeClass,
   setNodeClass,
+  children,
 }: {
   setValue: (value: string) => void;
   value: string;
   nodeClass: APIClassType;
+  children: ReactNode;
   setNodeClass: (Class: APIClassType) => void;
 }) {
   const [code, setCode] = useState(value);
   const { dark } = useContext(darkContext);
-  const { closePopUp, setCloseEdit } = useContext(PopUpContext);
   const { setErrorData, setSuccessData } = useContext(alertContext);
 
-  function setModalOpen(x: boolean) {
-    if (x === false) {
-      setCloseEdit("codearea");
-      closePopUp();
-    }
-  }
-
   function handleClick() {
     postValidateCode(code)
       .then((apiReturn) => {
@@ -50,7 +43,7 @@ export default function CodeAreaModal({
               title: "Code is ready to run",
             });
             setValue(code);
-            setModalOpen(false);
+            setOpen(false);
           } else {
             if (funcErrors.length !== 0) {
               setErrorData({
@@ -78,8 +71,11 @@ export default function CodeAreaModal({
       });
   }
 
+  const [open, setOpen] = useState(false);
+
   return (
-    <BaseModal open={true} setOpen={setModalOpen}>
+    <BaseModal open={open} setOpen={setOpen}>
+      <BaseModal.Trigger>{children}</BaseModal.Trigger>
       <BaseModal.Header description={CODE_PROMPT_DIALOG_SUBTITLE}>
         <DialogTitle className="flex items-center">
           <span className="pr-2">Edit Code</span>
diff --git a/src/frontend/src/modals/formModal/index.tsx b/src/frontend/src/modals/formModal/index.tsx
index 12f7683b3..3f2b21551 100644
--- a/src/frontend/src/modals/formModal/index.tsx
+++ b/src/frontend/src/modals/formModal/index.tsx
@@ -36,7 +36,7 @@ export default function FormModal({
   setOpen,
 }: {
   open: boolean;
-  setOpen: Function;
+  setOpen: (open: boolean) => void;
   flow: FlowType;
 }) {
   const { tabsState, setTabsState } = useContext(TabsContext);
@@ -389,8 +389,8 @@ export default function FormModal({
     }
   }
   return (
-    <Dialog open={open} onOpenChange={setModalOpen}>
-      <DialogTrigger className="hidden"></DialogTrigger>
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger hidden></DialogTrigger>
       {tabsState[flow.id].formKeysData && (
         <DialogContent className="min-w-[80vw]">
           <DialogHeader>
diff --git a/src/frontend/src/modals/genericModal/index.tsx b/src/frontend/src/modals/genericModal/index.tsx
index b9cdfddc8..ebe63cf3e 100644
--- a/src/frontend/src/modals/genericModal/index.tsx
+++ b/src/frontend/src/modals/genericModal/index.tsx
@@ -1,15 +1,17 @@
 import { FileText, Variable } from "lucide-react";
-import { useContext, useEffect, useRef, useState } from "react";
+import { ReactNode, useContext, useEffect, useRef, useState } from "react";
 import SanitizedHTMLWrapper from "../../components/SanitizedHTMLWrapper";
 import ShadTooltip from "../../components/ShadTooltipComponent";
 import { Badge } from "../../components/ui/badge";
 import { Button } from "../../components/ui/button";
 import { DialogTitle } from "../../components/ui/dialog";
 import { Textarea } from "../../components/ui/textarea";
-import { MAX_WORDS_HIGHLIGHT, PROMPT_DIALOG_SUBTITLE, TEXT_DIALOG_SUBTITLE } from "../../constants";
+import {
+  MAX_WORDS_HIGHLIGHT,
+  PROMPT_DIALOG_SUBTITLE,
+  TEXT_DIALOG_SUBTITLE,
+} from "../../constants";
 import { alertContext } from "../../contexts/alertContext";
-import { darkContext } from "../../contexts/darkContext";
-import { PopUpContext } from "../../contexts/popUpContext";
 import { postValidatePrompt } from "../../controllers/API";
 import { APIClassType } from "../../types/api";
 import {
@@ -31,6 +33,7 @@ export default function GenericModal({
   type,
   nodeClass,
   setNodeClass,
+  children,
 }: {
   field_name?: string;
   setValue: (value: string) => void;
@@ -38,6 +41,7 @@ export default function GenericModal({
   buttonText: string;
   modalTitle: string;
   type: number;
+  children: ReactNode;
   nodeClass?: APIClassType;
   setNodeClass?: (Class: APIClassType) => void;
 }) {
@@ -47,17 +51,9 @@ export default function GenericModal({
   const [inputValue, setInputValue] = useState(value);
   const [isEdit, setIsEdit] = useState(true);
   const [wordsHighlight, setWordsHighlight] = useState([]);
-  const { dark } = useContext(darkContext);
   const { setErrorData, setSuccessData, setNoticeData } =
     useContext(alertContext);
-  const { closePopUp, setCloseEdit } = useContext(PopUpContext);
   const ref = useRef();
-  function setModalOpen(x: boolean) {
-    if (x === false) {
-      setCloseEdit("generic");
-      closePopUp();
-    }
-  }
   const divRef = useRef(null);
   const divRefPrompt = useRef(null);
 
@@ -120,15 +116,16 @@ export default function GenericModal({
     );
   };
 
-  function getClassByNumberLength(){
+  function getClassByNumberLength() {
     let sumOfCaracteres: number = 0;
-    wordsHighlight.forEach(element => {
-      sumOfCaracteres = sumOfCaracteres + element.replace(/[{}]/g, "").length
+    wordsHighlight.forEach((element) => {
+      sumOfCaracteres = sumOfCaracteres + element.replace(/[{}]/g, "").length;
     });
-    return sumOfCaracteres > MAX_WORDS_HIGHLIGHT ? "code-highlight" : "code-nohighlight"
+    return sumOfCaracteres > MAX_WORDS_HIGHLIGHT
+      ? "code-highlight"
+      : "code-nohighlight";
   }
 
-
   function validatePrompt(closeModal: boolean) {
     postValidatePrompt(field_name, inputValue, nodeClass)
       .then((apiReturn) => {
@@ -165,8 +162,11 @@ export default function GenericModal({
       });
   }
 
+  const [modalOpen, setModalOpen] = useState(false);
+
   return (
-    <BaseModal open={true} setOpen={setModalOpen}>
+    <BaseModal open={modalOpen} setOpen={setModalOpen}>
+      <BaseModal.Trigger>{children}</BaseModal.Trigger>
       <BaseModal.Header
         description={(() => {
           switch (myModalTitle) {
@@ -234,7 +234,10 @@ export default function GenericModal({
             <div className="mb-auto flex-1">
               {type === TypeModal.PROMPT && (
                 <div className=" mr-2">
-                  <div ref={divRef} className="max-h-20 overflow-y-auto custom-scroll">
+                  <div
+                    ref={divRef}
+                    className="max-h-20 overflow-y-auto custom-scroll"
+                  >
                     <div className="flex flex-wrap items-center">
                       <Variable className=" -ml-px mr-1 flex h-4 w-4 text-primary"></Variable>
                       <span className="text-md font-semibold text-primary">