From b8aae5f702cf496d36a4f6c61e9cf3e2f130c85f Mon Sep 17 00:00:00 2001
From: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
Date: Tue, 6 Jun 2023 22:55:15 -0300
Subject: [PATCH] starting migration modals to shadcn

---
 src/frontend/package-lock.json                | 335 ++++++++++++
 src/frontend/package.json                     |  18 +-
 .../components/codeAreaComponent/index.tsx    |   5 +
 .../components/dropdownComponent/index.tsx    |  38 +-
 .../src/components/floatComponent/index.tsx   |   4 +-
 .../src/components/inputComponent/index.tsx   | 107 ++--
 .../components/inputFileComponent/index.tsx   |   4 +
 .../src/components/intComponent/index.tsx     |   7 +-
 .../src/components/promptComponent/index.tsx  |  13 +-
 src/frontend/src/components/ui/button.tsx     |  55 ++
 src/frontend/src/components/ui/dialog.tsx     | 128 +++++
 src/frontend/src/components/ui/textarea.tsx   |  24 +
 src/frontend/src/contexts/tabsContext.tsx     |   2 +-
 .../src/modals/EditNodeModal/index.tsx        | 515 ++++++++----------
 .../src/modals/genericModal/index.tsx         | 224 ++++----
 src/frontend/src/types/components/index.ts    |   5 +
 src/frontend/tailwind.config.js               |  75 +++
 17 files changed, 1086 insertions(+), 473 deletions(-)
 create mode 100644 src/frontend/src/components/ui/button.tsx
 create mode 100644 src/frontend/src/components/ui/dialog.tsx
 create mode 100644 src/frontend/src/components/ui/textarea.tsx

diff --git a/src/frontend/package-lock.json b/src/frontend/package-lock.json
index 7aeb68e45..3608ccca3 100644
--- a/src/frontend/package-lock.json
+++ b/src/frontend/package-lock.json
@@ -13,7 +13,9 @@
                 "@headlessui/react": "^1.7.10",
                 "@heroicons/react": "^2.0.15",
                 "@mui/material": "^5.11.9",
+                "@radix-ui/react-dialog": "^1.0.4",
                 "@radix-ui/react-label": "^2.0.2",
+                "@radix-ui/react-slot": "^1.0.2",
                 "@radix-ui/react-switch": "^1.0.3",
                 "@tabler/icons-react": "^2.18.0",
                 "@tailwindcss/forms": "^0.5.3",
@@ -1327,6 +1329,129 @@
                 }
             }
         },
+        "node_modules/@radix-ui/react-dialog": {
+            "version": "1.0.4",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.0.4.tgz",
+            "integrity": "sha512-hJtRy/jPULGQZceSAP2Re6/4NpKo8im6V8P2hUqZsdFiSL8l35kYsw3qbRI6Ay5mQd2+wlLqje770eq+RJ3yZg==",
+            "dependencies": {
+                "@babel/runtime": "^7.13.10",
+                "@radix-ui/primitive": "1.0.1",
+                "@radix-ui/react-compose-refs": "1.0.1",
+                "@radix-ui/react-context": "1.0.1",
+                "@radix-ui/react-dismissable-layer": "1.0.4",
+                "@radix-ui/react-focus-guards": "1.0.1",
+                "@radix-ui/react-focus-scope": "1.0.3",
+                "@radix-ui/react-id": "1.0.1",
+                "@radix-ui/react-portal": "1.0.3",
+                "@radix-ui/react-presence": "1.0.1",
+                "@radix-ui/react-primitive": "1.0.3",
+                "@radix-ui/react-slot": "1.0.2",
+                "@radix-ui/react-use-controllable-state": "1.0.1",
+                "aria-hidden": "^1.1.1",
+                "react-remove-scroll": "2.5.5"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "@types/react-dom": "*",
+                "react": "^16.8 || ^17.0 || ^18.0",
+                "react-dom": "^16.8 || ^17.0 || ^18.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "@types/react-dom": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-dismissable-layer": {
+            "version": "1.0.4",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.4.tgz",
+            "integrity": "sha512-7UpBa/RKMoHJYjie1gkF1DlK8l1fdU/VKDpoS3rCCo8YBJR294GwcEHyxHw72yvphJ7ld0AXEcSLAzY2F/WyCg==",
+            "dependencies": {
+                "@babel/runtime": "^7.13.10",
+                "@radix-ui/primitive": "1.0.1",
+                "@radix-ui/react-compose-refs": "1.0.1",
+                "@radix-ui/react-primitive": "1.0.3",
+                "@radix-ui/react-use-callback-ref": "1.0.1",
+                "@radix-ui/react-use-escape-keydown": "1.0.3"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "@types/react-dom": "*",
+                "react": "^16.8 || ^17.0 || ^18.0",
+                "react-dom": "^16.8 || ^17.0 || ^18.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "@types/react-dom": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-focus-guards": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.0.1.tgz",
+            "integrity": "sha512-Rect2dWbQ8waGzhMavsIbmSVCgYxkXLxxR3ZvCX79JOglzdEy4JXMb98lq4hPxUbLr77nP0UOGf4rcMU+s1pUA==",
+            "dependencies": {
+                "@babel/runtime": "^7.13.10"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-focus-scope": {
+            "version": "1.0.3",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.0.3.tgz",
+            "integrity": "sha512-upXdPfqI4islj2CslyfUBNlaJCPybbqRHAi1KER7Isel9Q2AtSJ0zRBZv8mWQiFXD2nyAJ4BhC3yXgZ6kMBSrQ==",
+            "dependencies": {
+                "@babel/runtime": "^7.13.10",
+                "@radix-ui/react-compose-refs": "1.0.1",
+                "@radix-ui/react-primitive": "1.0.3",
+                "@radix-ui/react-use-callback-ref": "1.0.1"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "@types/react-dom": "*",
+                "react": "^16.8 || ^17.0 || ^18.0",
+                "react-dom": "^16.8 || ^17.0 || ^18.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "@types/react-dom": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-id": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.0.1.tgz",
+            "integrity": "sha512-tI7sT/kqYp8p96yGWY1OAnLHrqDgzHefRBKQ2YAkBS5ja7QLcZ9Z/uY7bEjPUatf8RomoXM8/1sMj1IJaE5UzQ==",
+            "dependencies": {
+                "@babel/runtime": "^7.13.10",
+                "@radix-ui/react-use-layout-effect": "1.0.1"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/@radix-ui/react-label": {
             "version": "2.0.2",
             "resolved": "https://registry.npmjs.org/@radix-ui/react-label/-/react-label-2.0.2.tgz",
@@ -1350,6 +1475,53 @@
                 }
             }
         },
+        "node_modules/@radix-ui/react-portal": {
+            "version": "1.0.3",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.0.3.tgz",
+            "integrity": "sha512-xLYZeHrWoPmA5mEKEfZZevoVRK/Q43GfzRXkWV6qawIWWK8t6ifIiLQdd7rmQ4Vk1bmI21XhqF9BN3jWf+phpA==",
+            "dependencies": {
+                "@babel/runtime": "^7.13.10",
+                "@radix-ui/react-primitive": "1.0.3"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "@types/react-dom": "*",
+                "react": "^16.8 || ^17.0 || ^18.0",
+                "react-dom": "^16.8 || ^17.0 || ^18.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "@types/react-dom": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-presence": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.0.1.tgz",
+            "integrity": "sha512-UXLW4UAbIY5ZjcvzjfRFo5gxva8QirC9hF7wRE4U5gz+TP0DbRk+//qyuAQ1McDxBt1xNMBTaciFGvEmJvAZCg==",
+            "dependencies": {
+                "@babel/runtime": "^7.13.10",
+                "@radix-ui/react-compose-refs": "1.0.1",
+                "@radix-ui/react-use-layout-effect": "1.0.1"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "@types/react-dom": "*",
+                "react": "^16.8 || ^17.0 || ^18.0",
+                "react-dom": "^16.8 || ^17.0 || ^18.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "@types/react-dom": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/@radix-ui/react-primitive": {
             "version": "1.0.3",
             "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.3.tgz",
@@ -1455,6 +1627,24 @@
                 }
             }
         },
+        "node_modules/@radix-ui/react-use-escape-keydown": {
+            "version": "1.0.3",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.0.3.tgz",
+            "integrity": "sha512-vyL82j40hcFicA+M4Ex7hVkB9vHgSse1ZWomAqV2Je3RleKGO5iM8KMOEtfoSB0PnIelMd2lATjTGMYqN5ylTg==",
+            "dependencies": {
+                "@babel/runtime": "^7.13.10",
+                "@radix-ui/react-use-callback-ref": "1.0.1"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/@radix-ui/react-use-layout-effect": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.1.tgz",
@@ -2858,6 +3048,17 @@
             "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
             "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
         },
+        "node_modules/aria-hidden": {
+            "version": "1.2.3",
+            "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.3.tgz",
+            "integrity": "sha512-xcLxITLe2HYa1cnYnwCjkOO1PqUHQpozB8x9AR0OgWN2woOBi5kSDVxKfd0b7sb1hw5qFeJhXm9H1nu3xSfLeQ==",
+            "dependencies": {
+                "tslib": "^2.0.0"
+            },
+            "engines": {
+                "node": ">=10"
+            }
+        },
         "node_modules/aria-query": {
             "version": "5.1.3",
             "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.1.3.tgz",
@@ -3645,6 +3846,11 @@
                 "node": ">=6"
             }
         },
+        "node_modules/detect-node-es": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
+            "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ=="
+        },
         "node_modules/didyoumean": {
             "version": "1.2.2",
             "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@@ -4156,6 +4362,14 @@
                 "url": "https://github.com/sponsors/ljharb"
             }
         },
+        "node_modules/get-nonce": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/get-nonce/-/get-nonce-1.0.1.tgz",
+            "integrity": "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==",
+            "engines": {
+                "node": ">=6"
+            }
+        },
         "node_modules/get-stream": {
             "version": "6.0.1",
             "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
@@ -4550,6 +4764,14 @@
                 "node": ">= 0.4"
             }
         },
+        "node_modules/invariant": {
+            "version": "2.2.4",
+            "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+            "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+            "dependencies": {
+                "loose-envify": "^1.0.0"
+            }
+        },
         "node_modules/is-alphabetical": {
             "version": "1.0.4",
             "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-1.0.4.tgz",
@@ -6977,6 +7199,51 @@
             "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
             "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
         },
+        "node_modules/react-remove-scroll": {
+            "version": "2.5.5",
+            "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.5.tgz",
+            "integrity": "sha512-ImKhrzJJsyXJfBZ4bzu8Bwpka14c/fQt0k+cyFp/PBhTfyDnU5hjOtM4AG/0AMyy8oKzOTR0lDgJIM7pYXI0kw==",
+            "dependencies": {
+                "react-remove-scroll-bar": "^2.3.3",
+                "react-style-singleton": "^2.2.1",
+                "tslib": "^2.1.0",
+                "use-callback-ref": "^1.3.0",
+                "use-sidecar": "^1.1.2"
+            },
+            "engines": {
+                "node": ">=10"
+            },
+            "peerDependencies": {
+                "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+                "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/react-remove-scroll-bar": {
+            "version": "2.3.4",
+            "resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.4.tgz",
+            "integrity": "sha512-63C4YQBUt0m6ALadE9XV56hV8BgJWDmmTPY758iIJjfQKt2nYwoUrPk0LXRXcB/yIj82T1/Ixfdpdk68LwIB0A==",
+            "dependencies": {
+                "react-style-singleton": "^2.2.1",
+                "tslib": "^2.0.0"
+            },
+            "engines": {
+                "node": ">=10"
+            },
+            "peerDependencies": {
+                "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+                "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/react-router": {
             "version": "6.8.1",
             "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.8.1.tgz",
@@ -7007,6 +7274,28 @@
                 "react-dom": ">=16.8"
             }
         },
+        "node_modules/react-style-singleton": {
+            "version": "2.2.1",
+            "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz",
+            "integrity": "sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==",
+            "dependencies": {
+                "get-nonce": "^1.0.0",
+                "invariant": "^2.2.4",
+                "tslib": "^2.0.0"
+            },
+            "engines": {
+                "node": ">=10"
+            },
+            "peerDependencies": {
+                "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+                "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/react-syntax-highlighter": {
             "version": "15.5.0",
             "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-15.5.0.tgz",
@@ -8221,6 +8510,11 @@
             "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
             "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA=="
         },
+        "node_modules/tslib": {
+            "version": "2.5.3",
+            "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.3.tgz",
+            "integrity": "sha512-mSxlJJwl3BMEQCUNnxXBU9jP4JBktcEGhURcPR6VQVlnP0FdDEsIaz0C35dXNGLyRfrATNofF0F5p2KPxQgB+w=="
+        },
         "node_modules/typescript": {
             "version": "5.0.4",
             "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.0.4.tgz",
@@ -8415,6 +8709,47 @@
                 "requires-port": "^1.0.0"
             }
         },
+        "node_modules/use-callback-ref": {
+            "version": "1.3.0",
+            "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.0.tgz",
+            "integrity": "sha512-3FT9PRuRdbB9HfXhEq35u4oZkvpJ5kuYbpqhCfmiZyReuRgpnhDlbr2ZEnnuS0RrJAPn6l23xjFg9kpDM+Ms7w==",
+            "dependencies": {
+                "tslib": "^2.0.0"
+            },
+            "engines": {
+                "node": ">=10"
+            },
+            "peerDependencies": {
+                "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+                "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/use-sidecar": {
+            "version": "1.1.2",
+            "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.2.tgz",
+            "integrity": "sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==",
+            "dependencies": {
+                "detect-node-es": "^1.1.0",
+                "tslib": "^2.0.0"
+            },
+            "engines": {
+                "node": ">=10"
+            },
+            "peerDependencies": {
+                "@types/react": "^16.9.0 || ^17.0.0 || ^18.0.0",
+                "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/use-sync-external-store": {
             "version": "1.2.0",
             "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
diff --git a/src/frontend/package.json b/src/frontend/package.json
index e5065e8ec..2b330e2e7 100644
--- a/src/frontend/package.json
+++ b/src/frontend/package.json
@@ -8,16 +8,22 @@
         "@headlessui/react": "^1.7.10",
         "@heroicons/react": "^2.0.15",
         "@mui/material": "^5.11.9",
+        "@radix-ui/react-dialog": "^1.0.4",
         "@radix-ui/react-label": "^2.0.2",
+        "@radix-ui/react-slot": "^1.0.2",
         "@radix-ui/react-switch": "^1.0.3",
         "@tabler/icons-react": "^2.18.0",
         "@tailwindcss/forms": "^0.5.3",
         "@tailwindcss/line-clamp": "^0.4.4",
         "ace-builds": "^1.16.0",
+        "add": "^2.0.6",
         "ansi-to-html": "^0.7.2",
         "axios": "^1.3.2",
         "base64-js": "^1.5.1",
+        "class-variance-authority": "^0.6.0",
+        "clsx": "^1.2.1",
         "lodash": "^4.17.21",
+        "lucide-react": "^0.233.0",
         "react": "^18.2.0",
         "react-ace": "^10.1.0",
         "react-cookie": "^4.1.1",
@@ -34,18 +40,14 @@
         "rehype-mathjax": "^4.0.2",
         "remark-gfm": "^3.0.1",
         "remark-math": "^5.1.1",
-        "uuid": "^9.0.0",
-        "vite-plugin-svgr": "^3.2.0",
-        "web-vitals": "^2.1.4",
-        "add": "^2.0.6",
-        "class-variance-authority": "^0.6.0",
-        "clsx": "^1.2.1",
-        "lucide-react": "^0.233.0",
         "shadcn-ui": "^0.1.3",
         "switch": "^0.0.0",
         "table": "^6.8.1",
         "tailwind-merge": "^1.13.0",
-        "tailwindcss-animate": "^1.0.5"
+        "tailwindcss-animate": "^1.0.5",
+        "uuid": "^9.0.0",
+        "vite-plugin-svgr": "^3.2.0",
+        "web-vitals": "^2.1.4"
     },
     "scripts": {
         "dev:docker": "vite --host 0.0.0.0",
diff --git a/src/frontend/src/components/codeAreaComponent/index.tsx b/src/frontend/src/components/codeAreaComponent/index.tsx
index 9bf256594..83f1afccc 100644
--- a/src/frontend/src/components/codeAreaComponent/index.tsx
+++ b/src/frontend/src/components/codeAreaComponent/index.tsx
@@ -9,6 +9,7 @@ export default function CodeAreaComponent({
   value,
   onChange,
   disabled,
+  editNode = false,
 }: TextAreaComponentType) {
   const [myValue, setMyValue] = useState(value);
   const { openPopUp } = useContext(PopUpContext);
@@ -38,6 +39,7 @@ export default function CodeAreaComponent({
             );
           }}
           className={
+            editNode ? "placeholder:text-center text-gray-500 border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200" :
             "truncate block w-full text-gray-500 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
             (disabled ? " bg-gray-200" : "")
           }
@@ -57,7 +59,10 @@ export default function CodeAreaComponent({
             );
           }}
         >
+          {
+            !editNode && 
           <ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-blue-600 dark:text-gray-300" />
+          }
         </button>
       </div>
     </div>
diff --git a/src/frontend/src/components/dropdownComponent/index.tsx b/src/frontend/src/components/dropdownComponent/index.tsx
index eebbe1554..423198045 100644
--- a/src/frontend/src/components/dropdownComponent/index.tsx
+++ b/src/frontend/src/components/dropdownComponent/index.tsx
@@ -8,10 +8,12 @@ export default function Dropdown({
   value,
   options,
   onSelect,
+  editNode = false
 }: DropDownComponentType) {
   let [internalValue, setInternalValue] = useState(
     value === "" || !value ? "Choose an option" : value
   );
+  
   return (
     <>
       <Listbox
@@ -23,10 +25,20 @@ export default function Dropdown({
       >
         {({ open }) => (
           <>
-            <div className="relative mt-1 w-full">
-              <Listbox.Button className="relative w-full cursor-default rounded-md border border-gray-300 bg-white dark:bg-gray-900 py-2 pl-3 pr-10 text-left shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm">
+            <div className={
+              editNode ? "relative mt-0 w-full" :
+              "relative mt-1 w-full"
+              }>
+              <Listbox.Button 
+              className=
+              {editNode ? 
+                "pr-9 arrow-hide placeholder:text-center border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200" : 
+                "relative w-full cursor-default rounded-md border border-gray-300 bg-white dark:bg-gray-900 py-2 pl-3 pr-10 text-left shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm"}
+              >
                 <span className="block truncate w-full">{internalValue}</span>
-                <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
+                <span className={
+                  editNode ? "hidden" :
+                  "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2"}>
                   <ChevronUpDownIcon
                     className="h-5 w-5 text-gray-400"
                     aria-hidden="true"
@@ -41,16 +53,27 @@ export default function Dropdown({
                 leaveFrom="opacity-100"
                 leaveTo="opacity-0"
               >
-                <Listbox.Options className="absolute z-10 mt-1 max-h-60 w-full dark:bg-gray-800 overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
+                <Listbox.Options 
+                className={
+                  editNode ? "arrow-hide" :
+                  "absolute z-50 mt-1 max-h-60 w-full dark:bg-gray-800 overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
+                }>
+                  
                   {options.map((option, id) => (
                     <Listbox.Option
                       key={id}
                       className={({ active }) =>
                         classNames(
-                          active
+                          active && !editNode
                             ? "text-white bg-indigo-600 dark:bg-indigo-500"
                             : "text-gray-900",
-                          "relative cursor-default select-none py-2 pl-3 pr-9 dark:text-gray-300 dark:bg-gray-800"
+                            active && editNode
+                            ? "text-white bg-gray-400 dark:bg-gray-500"
+                            : "",
+                            editNode ?  
+                            "relative cursor-default select-none py-0.5 pl-3 pr-12 dark:text-gray-300 dark:bg-gray-800"
+                            : "relative cursor-default select-none py-2 pl-3 pr-9 dark:text-gray-300 dark:bg-gray-800",
+                          
                         )
                       }
                       value={option}
@@ -69,7 +92,8 @@ export default function Dropdown({
                           {selected ? (
                             <span
                               className={classNames(
-                                active ? "text-white" : "text-indigo-600",
+                                editNode ? "text-gray-600" : "text-indigo-600",
+                                active ? "text-white" : "",
                                 "absolute inset-y-0 right-0 flex items-center pr-4"
                               )}
                             >
diff --git a/src/frontend/src/components/floatComponent/index.tsx b/src/frontend/src/components/floatComponent/index.tsx
index 1fe3e3f76..086bed3f8 100644
--- a/src/frontend/src/components/floatComponent/index.tsx
+++ b/src/frontend/src/components/floatComponent/index.tsx
@@ -7,6 +7,7 @@ export default function FloatComponent({
   onChange,
   disableCopyPaste = false,
   disabled,
+  editNode = false
 }: FloatComponentType) {
   const [myValue, setMyValue] = useState(value ?? "");
   const { setDisableCopyPaste } = useContext(TabsContext);
@@ -33,10 +34,11 @@ export default function FloatComponent({
         type="number"
         value={myValue}
         className={
+          editNode ? "arrow-hide placeholder:text-center border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200" :
           "block w-full form-input dark:bg-gray-900 arrow-hide dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
           (disabled ? " bg-gray-200 dark:bg-gray-700" : "")
         }
-        placeholder="Type a number from zero to one"
+        placeholder={editNode ? "Number 0 to 1" : "Type a number from zero to one"}
         onChange={(e) => {
           setMyValue(e.target.value);
           onChange(e.target.value);
diff --git a/src/frontend/src/components/inputComponent/index.tsx b/src/frontend/src/components/inputComponent/index.tsx
index 69b442b3c..8f843e8c6 100644
--- a/src/frontend/src/components/inputComponent/index.tsx
+++ b/src/frontend/src/components/inputComponent/index.tsx
@@ -9,6 +9,7 @@ export default function InputComponent({
   disableCopyPaste = false,
   disabled,
   password,
+  editNode = false
 }: InputComponentType) {
   const [myValue, setMyValue] = useState(value ?? "");
   const [pwdVisible, setPwdVisible] = useState(false);
@@ -19,6 +20,7 @@ export default function InputComponent({
       onChange("");
     }
   }, [disabled, onChange]);
+
   return (
     <div
       className={
@@ -36,60 +38,71 @@ export default function InputComponent({
           if (disableCopyPaste) setDisableCopyPaste(false);
         }}
         className={classNames(
-          "block w-full pr-12 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm",
+          "block w-full pr-12 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm  sm:text-sm",
           disabled ? " bg-gray-200 dark:bg-gray-700" : "",
-          password && !pwdVisible && myValue !== "" ? "password" : ""
+          password && !pwdVisible && myValue !== "" ? "password" : "",
+          editNode ? "placeholder:text-center border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200" : "focus:border-indigo-500 focus:ring-indigo-500",
+          password && editNode ? "pr-8" : "pr-3",
         )}
-        placeholder="Type something..."
+        placeholder={password && editNode ? "Key" : "Type something..."}
         onChange={(e) => {
           setMyValue(e.target.value);
           onChange(e.target.value);
         }}
       />
-      <button
-        className="absolute inset-y-0 right-0 items-center px-4 text-gray-600"
-        onClick={() => {
-          setPwdVisible(!pwdVisible);
-        }}
-      >
-        {password &&
-          (pwdVisible ? (
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              fill="none"
-              viewBox="0 0 24 24"
-              strokeWidth={1.5}
-              stroke="currentColor"
-              className="w-5 h-5"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88"
-              />
-            </svg>
-          ) : (
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              fill="none"
-              viewBox="0 0 24 24"
-              strokeWidth={1.5}
-              stroke="currentColor"
-              className="w-5 h-5"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"
-              />
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
-              />
-            </svg>
-          ))}
-      </button>
+      {
+        password && (
+          <button
+          className={
+            classNames(
+              editNode ? "absolute inset-y-0 right-0 pr-2 items-center text-gray-600" : "absolute inset-y-0 right-0 items-center px-4 text-gray-600",
+            )
+          }
+          onClick={() => {
+            setPwdVisible(!pwdVisible);
+          }}
+        >
+          {password &&
+            (pwdVisible ? (
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                strokeWidth={1.5}
+                stroke="currentColor"
+                className="w-5 h-5"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88"
+                />
+              </svg>
+            ) : (
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                strokeWidth={1.5}
+                stroke="currentColor"
+                className="w-5 h-5"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"
+                />
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+                />
+              </svg>
+            ))}
+        </button>
+        )
+      }
+
     </div>
   );
 }
diff --git a/src/frontend/src/components/inputFileComponent/index.tsx b/src/frontend/src/components/inputFileComponent/index.tsx
index 8b998c731..8d01145d6 100644
--- a/src/frontend/src/components/inputFileComponent/index.tsx
+++ b/src/frontend/src/components/inputFileComponent/index.tsx
@@ -10,6 +10,7 @@ export default function InputFileComponent({
   suffixes,
   fileTypes,
   onFileChange,
+  editNode = false
 }: FileComponentType) {
   const [myValue, setMyValue] = useState(value);
   const { setErrorData } = useContext(alertContext);
@@ -71,6 +72,7 @@ export default function InputFileComponent({
         <span
           onClick={handleButtonClick}
           className={
+            editNode ? "placeholder:text-center text-gray-500 border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200" :
             "truncate block w-full text-gray-500 dark:text-gray-300 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
             (disabled ? " bg-gray-200" : "")
           }
@@ -78,7 +80,9 @@ export default function InputFileComponent({
           {myValue !== "" ? myValue : "No file"}
         </span>
         <button onClick={handleButtonClick}>
+          {!editNode && 
           <DocumentMagnifyingGlassIcon className="w-8 h-8  hover:text-blue-600" />
+          }
         </button>
       </div>
     </div>
diff --git a/src/frontend/src/components/intComponent/index.tsx b/src/frontend/src/components/intComponent/index.tsx
index 5ca68c5ce..80f627fcd 100644
--- a/src/frontend/src/components/intComponent/index.tsx
+++ b/src/frontend/src/components/intComponent/index.tsx
@@ -1,16 +1,20 @@
 import { useContext, useEffect, useState } from "react";
 import { FloatComponentType } from "../../types/components";
 import { TabsContext } from "../../contexts/tabsContext";
+import { classNames } from "../../utils";
 
 export default function IntComponent({
   value,
   onChange,
   disableCopyPaste = false,
   disabled,
+  editNode = false
 }: FloatComponentType) {
   const [myValue, setMyValue] = useState(value ?? "");
   const { setDisableCopyPaste } = useContext(TabsContext);
 
+  console.log(editNode);
+  
   useEffect(() => {
     if (disabled) {
       setMyValue("");
@@ -53,10 +57,11 @@ export default function IntComponent({
         type="number"
         value={myValue}
         className={
+          editNode ? "arrow-hide placeholder:text-center border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200" :
           "block w-full form-input dark:bg-gray-900 arrow-hide dark:border-gray-600 dark:text-gray-300 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
           (disabled ? " bg-gray-200 dark:bg-gray-700" : "")
         }
-        placeholder="Type a integer number"
+        placeholder={editNode ? "Integer number" : "Type a integer number"}
         onChange={(e) => {
           setMyValue(e.target.value);
           onChange(e.target.value);
diff --git a/src/frontend/src/components/promptComponent/index.tsx b/src/frontend/src/components/promptComponent/index.tsx
index f31c37f51..e7f88d1ba 100644
--- a/src/frontend/src/components/promptComponent/index.tsx
+++ b/src/frontend/src/components/promptComponent/index.tsx
@@ -11,6 +11,7 @@ export default function PromptAreaComponent({
   value,
   onChange,
   disabled,
+  editNode = false
 }: TextAreaComponentType) {
   const [myValue, setMyValue] = useState(value);
   const { openPopUp } = useContext(PopUpContext);
@@ -21,6 +22,9 @@ export default function PromptAreaComponent({
     }
   }, [disabled, onChange]);
   return (
+
+    
+
     <div
       className={
         disabled ? "pointer-events-none cursor-not-allowed w-full" : " w-full"
@@ -43,11 +47,12 @@ export default function PromptAreaComponent({
             );
           }}
           className={
+            editNode ? "h-7 truncate placeholder:text-center text-gray-500 border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200" :
             "truncate block w-full text-gray-500 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
             (disabled ? " bg-gray-200" : "")
           }
         >
-          {myValue !== "" ? myValue : "Text empty"}
+          {myValue !== "" ? myValue : "-"}
         </span>
         <button
           onClick={() => {
@@ -65,7 +70,11 @@ export default function PromptAreaComponent({
             );
           }}
         >
-          <ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-blue-600 dark:text-gray-300" />
+          {
+            !editNode &&
+            <ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-blue-600 dark:text-gray-300" />
+          }
+          
         </button>
       </div>
     </div>
diff --git a/src/frontend/src/components/ui/button.tsx b/src/frontend/src/components/ui/button.tsx
new file mode 100644
index 000000000..40e315375
--- /dev/null
+++ b/src/frontend/src/components/ui/button.tsx
@@ -0,0 +1,55 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "../../utils"
+
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline:
+          "border border-input hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "underline-offset-4 hover:underline text-primary",
+      },
+      size: {
+        default: "h-10 py-2 px-4",
+        sm: "h-9 px-3 rounded-md",
+        lg: "h-11 px-8 rounded-md",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }
diff --git a/src/frontend/src/components/ui/dialog.tsx b/src/frontend/src/components/ui/dialog.tsx
new file mode 100644
index 000000000..fc4e2e506
--- /dev/null
+++ b/src/frontend/src/components/ui/dialog.tsx
@@ -0,0 +1,128 @@
+"use client"
+
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { X } from "lucide-react"
+import { cn } from "../../utils"
+
+
+const Dialog = DialogPrimitive.Root
+
+const DialogTrigger = DialogPrimitive.Trigger
+
+const DialogPortal = ({
+  className,
+  children,
+  ...props
+}: DialogPrimitive.DialogPortalProps) => (
+  <DialogPrimitive.Portal className={cn(className)} {...props}>
+    <div className="fixed inset-0 z-50 flex items-start justify-center sm:items-center">
+      {children}
+    </div>
+  </DialogPrimitive.Portal>
+)
+DialogPortal.displayName = DialogPrimitive.Portal.displayName
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm transition-all duration-100 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=open]:fade-in",
+      className
+    )}
+    {...props}
+  />
+))
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed z-50 grid w-full gap-4 rounded-b-lg border bg-background p-6 shadow-lg animate-in data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10 sm:max-w-lg sm:rounded-lg sm:zoom-in-90 data-[state=open]:sm:slide-in-from-bottom-0",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+))
+DialogContent.displayName = DialogPrimitive.Content.displayName
+
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-1.5 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+DialogHeader.displayName = "DialogHeader"
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+DialogFooter.displayName = "DialogFooter"
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+DialogTitle.displayName = DialogPrimitive.Title.displayName
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+DialogDescription.displayName = DialogPrimitive.Description.displayName
+
+export {
+  Dialog,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+}
diff --git a/src/frontend/src/components/ui/textarea.tsx b/src/frontend/src/components/ui/textarea.tsx
new file mode 100644
index 000000000..f008db2bc
--- /dev/null
+++ b/src/frontend/src/components/ui/textarea.tsx
@@ -0,0 +1,24 @@
+import * as React from "react"
+import { cn } from "../../utils"
+
+
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          "flex min-h-[80px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Textarea.displayName = "Textarea"
+
+export { Textarea }
diff --git a/src/frontend/src/contexts/tabsContext.tsx b/src/frontend/src/contexts/tabsContext.tsx
index 6f26ee697..b9f774d65 100644
--- a/src/frontend/src/contexts/tabsContext.tsx
+++ b/src/frontend/src/contexts/tabsContext.tsx
@@ -159,7 +159,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
     // simulate a click on the link element to trigger the download
     link.click();
     setNoticeData({
-      title: "Warning: Critical data,JSON file may including API keys.",
+      title: "Warning: Critical data, JSON file may include API keys.",
     });
   }
 
diff --git a/src/frontend/src/modals/EditNodeModal/index.tsx b/src/frontend/src/modals/EditNodeModal/index.tsx
index 3bfdf9e75..38dbd7baf 100644
--- a/src/frontend/src/modals/EditNodeModal/index.tsx
+++ b/src/frontend/src/modals/EditNodeModal/index.tsx
@@ -1,4 +1,3 @@
-import { Dialog, Transition } from "@headlessui/react";
 import {
   ChevronDoubleLeftIcon,
   ChevronDoubleRightIcon,
@@ -33,7 +32,16 @@ import InputFileComponent from "../../components/inputFileComponent";
 import PromptAreaComponent from "../../components/promptComponent";
 import CodeAreaComponent from "../../components/codeAreaComponent";
 import { TabsContext } from "../../contexts/tabsContext";
-
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "../../components/ui/dialog";
+import { Button } from "../../components/ui/button";
 
 
 export default function EditNodeModal({ data }: { data: NodeDataType }) {
@@ -68,9 +76,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
   function setModalOpen(x: boolean) {
     setOpen(x);
     if (x === false) {
-      setTimeout(() => {
         closePopUp();
-      }, 300);
     }
   }
 
@@ -88,282 +94,235 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
   
 
   return (
-    <Transition.Root show={open} appear={true} as={Fragment}>
-      <Dialog
-        as="div"
-        className="relative z-10"
-        onClose={setModalOpen}
-        initialFocus={ref}
-      >
-        <Transition.Child
-          as={Fragment}
-          enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="fixed inset-0 bg-gray-500 dark:bg-gray-600 dark:bg-opacity-75 bg-opacity-75 transition-opacity" />
-        </Transition.Child>
+    <Dialog open={true} onOpenChange={setModalOpen}>
+    <DialogTrigger>
+    </DialogTrigger>
+    <DialogContent className="lg:max-w-[700px]">
+      <DialogHeader>
+        <DialogTitle className="flex items-center">
+          <span className="pr-2">
+          Edit Node
 
-        <div className="fixed inset-0 z-10 overflow-y-auto">
-          <div className="flex h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
-            <Transition.Child
-              as={Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              enterTo="opacity-100 translate-y-0 sm:scale-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            >
-              <Dialog.Panel className="relative flex flex-col justify-between transform overflow-hidden rounded-lg bg-white dark:bg-gray-800 text-left shadow-xl transition-all sm:my-8 w-[700px]">
-                <div className=" z-50 absolute top-0 right-0 hidden pt-4 pr-4 sm:block">
-                  <button
-                    type="button"
-                    className="rounded-md text-gray-400 hover:text-gray-500"
-                    onClick={() => {
-                      setModalOpen(false);
-                    }}
-                  >
-                    <span className="sr-only">Close</span>
-                    <XMarkIcon className="h-6 w-6" aria-hidden="true" />
-                  </button>
-                </div>
-                <div className="h-full w-full flex flex-col justify-center items-center">
-                  <div className="flex w-full pb-4 z-10 justify-center shadow-sm">
-                    <div className="mx-auto mt-4 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-blue-100 dark:bg-gray-900 sm:mx-0 sm:h-10 sm:w-10">
-                      <PencilSquareIcon
-                        className="h-6 w-6 text-blue-600"
-                        aria-hidden="true"
-                      />
-                    </div>
-                    <div className="mt-4 text-center sm:ml-4 sm:text-left">
-                      <Dialog.Title
-                        as="h3"
-                        className="text-lg font-medium dark:text-white leading-10 text-gray-900"
-                      >
-                        Edit Node
-                      </Dialog.Title>
-                    </div>
-                  </div>
-                  <div className="h-full w-full bg-gray-200 dark:bg-gray-900 p-4 pt-0 gap-4 justify-center items-center">
-                  <div className="py-3 flex items-center">
-                    <VariableIcon  className="w-5 h-5 pe-1 text-orange-500 stroke-2">&nbsp;</VariableIcon>
-                  <span className="text-sm font-semibold text-gray-800">Variables</span>
-
-                  </div>
-
-                    <div className="flex w-full h-fit max-h-[415px]">
-
-                      <div
-                        className={classNames(
-                          "w-full rounded-lg bg-white dark:bg-gray-800 shadow",
-                          nodeLength > limitScrollFieldsModal
-                          ? "overflow-scroll overflow-x-hidden custom-scroll"
-                          : "overflow-hidden"
-                        )}
-                      >
-                        {
-                         nodeLength > 0 &&
-                          <div className="flex flex-col gap-5 h-fit">
-                          <Table>
-                            <TableHeader className="border-gray-200 text-gray-500 text-xs font-medium">
-                              <TableRow>
-                                <TableHead className="h-7 text-center">
-                                  PARAM
-                                </TableHead>
-                                <TableHead className="p-0 h-7 text-center">VALUE</TableHead>
-                                <TableHead className="text-center h-7">SHOW</TableHead>
-                              </TableRow>
-                            </TableHeader>
-                            <TableBody className="p-0">
-                            { Object.keys(data.node.template).filter(
-                                  (t) =>
-                                    t.charAt(0) !== "_" &&
-                                    data.node.template[t].show &&
-                                    (data.node.template[t].type === "str" ||
-                                      data.node.template[t].type === "bool" ||
-                                      data.node.template[t].type === "float" ||
-                                      data.node.template[t].type === "code" ||
-                                      data.node.template[t].type === "prompt" ||
-                                      data.node.template[t].type === "file" ||
-                                      data.node.template[t].type === "Any" ||
-                                      data.node.template[t].type === "int")
-                                )
-                                .map((n, i) => (
-                                <TableRow key={i} className="h-8">
-                                  <TableCell className="p-0 text-center text-gray-900 text-xs">
-                                  {data.node.template[n].name
-                                        ? data.node.template[n].name
-                                        : data.node.template[n].display_name}
-                                  </TableCell>
-                                  <TableCell className="p-0 text-center text-gray-900 text-xs w-[300px]">
-
-      {data.node.template[n].type === "str" && !data.node.template[n].options ? (
-        <div className="w-1/2">
-          {data.node.template[n].list ? (
-            <InputListComponent
-              disabled={false}
-              value={
-                !data.node.template[n].value ||
-                data.node.template[n].value === ""
-                  ? [""]
-                  : data.node.template[n].value
-              }
-              onChange={(t: string[]) => {
-                data.node.template[n].value = t;
-                save();
-              }}
+          </span>
+            <PencilSquareIcon
+            className="h-6 w-6 text-gray-800 pl-1 dark:text-white"
+            aria-hidden="true"
             />
-          ) : data.node.template[n].multiline ? (
-            <TextAreaComponent
-              disabled={false}
-              value={data.node.template[n].value ?? ""}
-              onChange={(t: string) => {
-                data.node.template[n].value = t;
-                save();
-              }}
-            />
-          ) : (
-            <InputComponent
-              disabled={false}
-              password={data.node.template[n].password ?? false}
-              value={data.node.template[n].value ?? ""}
-              onChange={(t) => {
-                data.node.template[n].value = t;
-                save();
-              }}
-            />
-          )}
-        </div>
-      ) : data.node.template[n].type === "bool" ? (
-        <div className="ml-auto">
-          {" "}
-          <ToggleComponent
-            disabled={false}
-            enabled={enabled}
-            setEnabled={(t) => {
-              data.node.template[n].value = t;
-              setEnabled(t);
-              save();
-            }}
-          />
-        </div>
-      ) : data.node.template[n].type === "float" ? (
-        <div className="w-1/2">
-          <FloatComponent
-            disabled={false}
-            value={data.node.template[n].value ?? ""}
-            onChange={(t) => {
-              data.node.template[n].value = t;
-              save();
-            }}
-          />
-        </div>
-      ) : data.node.template[n].type === "str" && data.node.template[n].options ? (
-        <div className="w-1/2">
-          <Dropdown
-            options={data.node.template[n].options}
-            onSelect={(newValue) => (data.node.template[n].value = newValue)}
-            value={data.node.template[n].value ?? "Choose an option"}
-          ></Dropdown>
-        </div>
-      ) : data.node.template[n].type === "int" ? (
-        <div className="w-1/2">
-          <IntComponent
-            disabled={false}
-            value={data.node.template[n].value ?? ""}
-            onChange={(t) => {
-              data.node.template[n].value = t;
-              save();
-            }}
-          />
-        </div>
-      ) : data.node.template[n].type === "file" ? (
-        <div className="w-1/2">
-          <InputFileComponent
-            disabled={false}
-            value={data.node.template[n].value ?? ""}
-            onChange={(t: string) => {
-              data.node.template[n].value = t;
-            }}
-            fileTypes={data.node.template[n].fileTypes}
-            suffixes={data.node.template[n].suffixes}
-            onFileChange={(t: string) => {
-              data.node.template[n].content = t;
-              save();
-            }}
-          ></InputFileComponent>
-        </div>
-      ) : data.node.template[n].type === "prompt" ? (
-        <div className="w-1/2">
-          <PromptAreaComponent
-            disabled={false}
-            value={data.node.template[n].value ?? ""}
-            onChange={(t: string) => {
-              data.node.template[n].value = t;
-              save();
-            }}
-          />
-        </div>
-      ) : data.node.template[n].type === "code" ? (
-        <div className="w-1/2">
-          <CodeAreaComponent
-            disabled={false}
-            value={data.node.template[n].value ?? ""}
-            onChange={(t: string) => {
-              data.node.template[n].value = t;
-              save();
-            }}
-          />
-        </div>
-      ) : (
-        <div className="hidden"></div>
-      )}
-
-
-{/* 
-                                  {data.node.template[n].value
-                                        ? data.node.template[n].value
-                                        : "-"} */}
-
-                                  </TableCell>
-                                  <TableCell className="p-0 text-right">
-
-                                  <div className="items-center text-center">
-                                  <ToggleShadComponent 
-                                  enabled={!data.node.template[n].advanced}
-                                  setEnabled={(e) => changeAdvanced(data.node.template[n])}
-                                  disabled={false} />
-                                </div>
-                                  </TableCell>
-                                </TableRow>
-                              ))}
-                            </TableBody>
-                          </Table>
-                        </div>}
-                      </div>
-                    </div>
-                  </div>
-                  <div className="bg-gray-200 dark:bg-gray-900 w-full pb-3 flex flex-row-reverse px-4">
-                    <button
-                      type="button"
-                      className="inline-flex w-full justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm"
-                      onClick={() => {
-                        setModalOpen(false);
-                      }}
-                    >
-                      Done
-                    </button>
-                  </div>
-                </div>
-              </Dialog.Panel>
-            </Transition.Child>
+          
+          </DialogTitle>
+        <DialogDescription>
+          Make configurations changes to your nodes. Click save when you're done.
+          <div className="flex pt-3">
+          <VariableIcon  className="w-5 h-5 pe-1 text-gray-700 stroke-2">&nbsp;</VariableIcon>
+                  <span className="text-sm font-semibold text-gray-800">Parameters</span>
           </div>
-        </div>
-      </Dialog>
-    </Transition.Root>
+
+        </DialogDescription>
+      </DialogHeader>
+
+      <div className="flex w-full h-fit max-h-[415px]">
+
+<div
+  className={classNames(
+    "w-full rounded-lg bg-white dark:bg-gray-800 shadow",
+    nodeLength > limitScrollFieldsModal
+    ? "overflow-scroll overflow-x-hidden custom-scroll"
+    : "overflow-hidden"
+  )}
+>
+  {
+   nodeLength > 0 &&
+    <div className="flex flex-col gap-5 h-fit">
+    <Table className="table-fixed">
+      <TableHeader className="border-gray-200 text-gray-500 text-xs font-medium">
+        <TableRow>
+          <TableHead className="h-7 text-center">
+            PARAM
+          </TableHead>
+          <TableHead className="p-0 h-7 text-center">VALUE</TableHead>
+          <TableHead className="text-center h-7">SHOW</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody className="p-0">
+      { Object.keys(data.node.template).filter(
+            (t) =>
+              t.charAt(0) !== "_" &&
+              data.node.template[t].show &&
+              (data.node.template[t].type === "str" ||
+                data.node.template[t].type === "bool" ||
+                data.node.template[t].type === "float" ||
+                data.node.template[t].type === "code" ||
+                data.node.template[t].type === "prompt" ||
+                data.node.template[t].type === "file" ||
+                data.node.template[t].type === "Any" ||
+                data.node.template[t].type === "int")
+          )
+          .map((n, i) => (
+          <TableRow key={i} className="h-8">
+            <TableCell className="p-0 text-center text-gray-900 text-xs">
+            {data.node.template[n].name
+                  ? data.node.template[n].name
+                  : data.node.template[n].display_name}
+            </TableCell>
+            <TableCell className="p-0 text-center text-gray-900 text-xs w-[300px]">
+
+{data.node.template[n].type === "str" && !data.node.template[n].options ? (
+<div className="mx-auto">
+{data.node.template[n].list ? (
+<InputListComponent
+disabled={false}
+value={
+!data.node.template[n].value ||
+data.node.template[n].value === ""
+? [""]
+: data.node.template[n].value
+}
+onChange={(t: string[]) => {
+data.node.template[n].value = t;
+save();
+}}
+/>
+) : data.node.template[n].multiline ? (
+<TextAreaComponent
+disabled={false}
+value={data.node.template[n].value ?? ""}
+onChange={(t: string) => {
+data.node.template[n].value = t;
+save();
+}}
+/>
+) : (
+<InputComponent
+editNode={true}
+disabled={false}
+password={data.node.template[n].password ?? false}
+value={data.node.template[n].value ?? ""}
+onChange={(t) => {
+data.node.template[n].value = t;
+save();
+}}
+/>
+)}
+</div>
+) : data.node.template[n].type === "bool" ? (
+<div className="ml-auto">
+{" "}
+<ToggleShadComponent 
+enabled={data.node.template[n].value}
+setEnabled={(e) => {
+data.node.template[n].value = e;
+setEnabled(e);
+save();
+}}
+disabled={false} />
+</div>
+) : data.node.template[n].type === "float" ? (
+<div className="mx-auto">
+<FloatComponent
+disabled={false}
+editNode={true}
+value={data.node.template[n].value ?? ""}
+onChange={(t) => {
+data.node.template[n].value = t;
+save();
+}}
+/>
+</div>
+) : data.node.template[n].type === "str" && data.node.template[n].options ? (
+<div className="mx-auto">
+<Dropdown
+editNode={true}
+options={data.node.template[n].options}
+onSelect={(newValue) => (data.node.template[n].value = newValue)}
+value={data.node.template[n].value ?? "Choose an option"}
+></Dropdown>
+</div>
+) : data.node.template[n].type === "int" ? (
+<div className="mx-auto">
+<IntComponent
+disabled={false}
+editNode={true}
+value={data.node.template[n].value ?? ""}
+onChange={(t) => {
+data.node.template[n].value = t;
+save();
+}}
+/>
+</div>
+) : data.node.template[n].type === "file" ? (
+<div className="mx-auto">
+<InputFileComponent
+editNode={true}
+disabled={false}
+value={data.node.template[n].value ?? ""}
+onChange={(t: string) => {
+data.node.template[n].value = t;
+}}
+fileTypes={data.node.template[n].fileTypes}
+suffixes={data.node.template[n].suffixes}
+onFileChange={(t: string) => {
+data.node.template[n].content = t;
+save();
+}}
+></InputFileComponent>
+</div>
+) : data.node.template[n].type === "prompt" ? (
+<div className="mx-auto">
+<PromptAreaComponent
+editNode={true}
+disabled={false}
+value={data.node.template[n].value ?? ""}
+onChange={(t: string) => {
+data.node.template[n].value = t;
+save();
+}}
+/>
+</div>
+) : data.node.template[n].type === "code" ? (
+<div className="mx-auto">
+<CodeAreaComponent
+disabled={false}
+editNode={true}
+value={data.node.template[n].value ?? ""}
+onChange={(t: string) => {
+data.node.template[n].value = t;
+save();
+}}
+/>
+</div>
+)
+: data.node.template[n].type === "Any" ? "-" : (
+<div className="hidden"></div>
+) }
+
+
+            </TableCell>
+            <TableCell className="p-0 text-right">
+
+            <div className="items-center text-center">
+            <ToggleShadComponent 
+            enabled={!data.node.template[n].advanced}
+            setEnabled={(e) => changeAdvanced(data.node.template[n])}
+            disabled={false} />
+          </div>
+            </TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  </div>}
+</div>
+</div>
+
+      <DialogFooter>
+      <Button
+      className="mt-3" 
+      onClick={() => {
+        setModalOpen(false);
+      }}
+      type="submit">Save changes</Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
   );
 }
diff --git a/src/frontend/src/modals/genericModal/index.tsx b/src/frontend/src/modals/genericModal/index.tsx
index af01fc1f3..86af41e15 100644
--- a/src/frontend/src/modals/genericModal/index.tsx
+++ b/src/frontend/src/modals/genericModal/index.tsx
@@ -1,4 +1,3 @@
-import { Dialog, Transition } from "@headlessui/react";
 import { XMarkIcon, DocumentTextIcon } from "@heroicons/react/24/outline";
 import { Fragment, useContext, useRef, useState } from "react";
 import { PopUpContext } from "../../contexts/popUpContext";
@@ -6,6 +5,18 @@ import { darkContext } from "../../contexts/darkContext";
 import { checkPrompt } from "../../controllers/API";
 import { alertContext } from "../../contexts/alertContext";
 import { TypeModal } from "../../utils";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "../../components/ui/dialog";
+import { Button } from "../../components/ui/button";
+import { Textarea } from "../../components/ui/textarea";
+
 export default function PromptAreaModal({
   value,
   setValue,
@@ -31,145 +42,102 @@ export default function PromptAreaModal({
   function setModalOpen(x: boolean) {
     setOpen(x);
     if (x === false) {
-      setTimeout(() => {
         closePopUp();
-      }, 300);
     }
   }
 
   return (
-    <Transition.Root show={open} appear={true} as={Fragment}>
-      <Dialog
-        as="div"
-        className="relative z-10"
-        onClose={setModalOpen}
-        initialFocus={ref}
-      >
-        <Transition.Child
-          as={Fragment}
-          enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="fixed inset-0 bg-gray-500 dark:bg-gray-600 dark:bg-opacity-75 bg-opacity-75 transition-opacity" />
-        </Transition.Child>
 
-        <div className="fixed inset-0 z-10 overflow-y-auto">
-          <div className="flex h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
-            <Transition.Child
-              as={Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              enterTo="opacity-100 translate-y-0 sm:scale-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            >
-              <Dialog.Panel className="relative flex flex-col justify-between transform h-[600px] overflow-hidden rounded-lg bg-white dark:bg-gray-800 text-left shadow-xl transition-all sm:my-8 w-[700px]">
-                <div className=" z-50 absolute top-0 right-0 hidden pt-4 pr-4 sm:block">
-                  <button
-                    type="button"
-                    className="rounded-md text-gray-400 hover:text-gray-500"
-                    onClick={() => {
-                      setModalOpen(false);
-                    }}
-                  >
-                    <span className="sr-only">Close</span>
-                    <XMarkIcon className="h-6 w-6" aria-hidden="true" />
-                  </button>
-                </div>
-                <div className="h-full w-full flex flex-col justify-center items-center">
-                  <div className="flex w-full pb-4 z-10 justify-center shadow-sm">
-                    <div className="mx-auto mt-4 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-blue-100 dark:bg-gray-900 sm:mx-0 sm:h-10 sm:w-10">
-                      <DocumentTextIcon
-                        className="h-6 w-6 text-blue-600"
-                        aria-hidden="true"
-                      />
-                    </div>
-                    <div className="mt-4 text-center sm:ml-4 sm:text-left">
-                      <Dialog.Title
-                        as="h3"
-                        className="text-lg font-medium dark:text-white leading-10 text-gray-900"
-                      >
-                        {myModalTitle}
-                      </Dialog.Title>
-                    </div>
-                  </div>
-                  <div className="h-full w-full bg-gray-200 overflow-auto dark:bg-gray-900 p-4 gap-4 flex flex-row justify-center items-center">
-                    <div className="flex h-full w-full">
-                      <div className="overflow-hidden px-4 py-5 sm:p-6 w-full h-full rounded-lg bg-white dark:bg-gray-800 shadow">
-                        <textarea
+    
+    <Dialog open={true} onOpenChange={setModalOpen}>
+    <DialogTrigger>
+    </DialogTrigger>
+    <DialogContent className="lg:max-w-[700px]">
+      <DialogHeader>
+        <DialogTitle className="flex items-center">
+          <span className="pr-2">
+          {myModalTitle}
+          </span>
+            <DocumentTextIcon
+            className="h-6 w-6 text-gray-800 pl-1 dark:text-white"
+            aria-hidden="true"
+            />
+          
+          </DialogTitle>
+        <DialogDescription>
+          Make configurations changes to your nodes. Click save when you're done.
+
+        </DialogDescription>
+      </DialogHeader>
+
+
+                    <div className="flex h-full w-full mt-2">
+                      <Textarea 
                           ref={ref}
-                          className="form-input h-full w-full rounded-lg border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-white"
+                          className="form-input h-[300px] w-full rounded-lg border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-white"
                           value={myValue}
                           onChange={(e) => {
                             setMyValue(e.target.value);
                             setValue(e.target.value);
                           }}
-                        />
-                      </div>
-                    </div>
-                  </div>
-                  <div className="bg-gray-200 dark:bg-gray-900 w-full pb-3 flex flex-row-reverse px-4">
-                    <button
-                      type="button"
-                      className="inline-flex w-full justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm"
-                      onClick={() => {
-                        switch (myModalType) {
-                          case 1:
-                            setModalOpen(false);
-                            break;
-                          case 2:
-                            checkPrompt(myValue)
-                              .then((apiReturn) => {
-                                if (apiReturn.data) {
-                                  let inputVariables =
-                                    apiReturn.data.input_variables;
-                                  if (inputVariables.length === 0) {
-                                    setErrorData({
-                                      title:
-                                        "The template you are attempting to use does not contain any variables for data entry.",
-                                    });
-                                  } else {
-                                    setSuccessData({
-                                      title: "Prompt is ready",
-                                    });
-                                    setModalOpen(false);
-                                    setValue(myValue);
-                                  }
-                                } else {
-                                  setErrorData({
-                                    title:
-                                      "Something went wrong, please try again",
-                                  });
-                                }
-                              })
-                              .catch((error) => {
-                                return setErrorData({
-                                  title:
-                                    "There is something wrong with this prompt, please review it",
-                                  list: [error.response.data.detail],
-                                });
-                              });
-                            break;
+                      placeholder="Type message here." />
+
+                    </div>
+
+
+   
+      <DialogFooter>
+      <Button
+      className="mt-3" 
+      onClick={() => {
+        switch (myModalType) {
+          case 1:
+            setModalOpen(false);
+            break;
+          case 2:
+            checkPrompt(myValue)
+              .then((apiReturn) => {
+                if (apiReturn.data) {
+                  let inputVariables =
+                    apiReturn.data.input_variables;
+                  if (inputVariables.length === 0) {
+                    setErrorData({
+                      title:
+                        "The template you are attempting to use does not contain any variables for data entry.",
+                    });
+                  } else {
+                    setSuccessData({
+                      title: "Prompt is ready",
+                    });
+                    setModalOpen(false);
+                    setValue(myValue);
+                  }
+                } else {
+                  setErrorData({
+                    title:
+                      "Something went wrong, please try again",
+                  });
+                }
+              })
+              .catch((error) => {
+                return setErrorData({
+                  title:
+                    "There is something wrong with this prompt, please review it",
+                  list: [error.response.data.detail],
+                });
+              });
+            break;
+
+          default:
+            break;
+        }
+      }}
+      type="submit">{myButtonText}</Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+
+
 
-                          default:
-                            break;
-                        }
-                      }}
-                    >
-                      {myButtonText}
-                    </button>
-                  </div>
-                </div>
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </div>
-      </Dialog>
-    </Transition.Root>
   );
 }
diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts
index e7559023a..c0bb0344f 100644
--- a/src/frontend/src/types/components/index.ts
+++ b/src/frontend/src/types/components/index.ts
@@ -11,6 +11,7 @@ export type InputComponentType = {
   onChange: (value: string) => void;
   password: boolean;
   disableCopyPaste?: boolean;
+  editNode?: boolean;
 };
 export type ToggleComponentType = {
   enabled: boolean;
@@ -21,6 +22,7 @@ export type DropDownComponentType = {
   value: string;
   options: string[];
   onSelect: (value: string) => void;
+  editNode?: boolean;
 };
 export type ParameterComponentType = {
   data: NodeDataType;
@@ -43,6 +45,7 @@ export type TextAreaComponentType = {
   disabled: boolean;
   onChange: (value: string[] | string) => void;
   value: string;
+  editNode?: boolean;
 };
 
 export type FileComponentType = {
@@ -52,6 +55,7 @@ export type FileComponentType = {
   suffixes: Array<string>;
   fileTypes: Array<string>;
   onFileChange: (value: string) => void;
+  editNode?: boolean;
 };
 
 export type DisclosureComponentType = {
@@ -71,6 +75,7 @@ export type FloatComponentType = {
   disabled?: boolean;
   disableCopyPaste?: boolean;
   onChange: (value: string) => void;
+  editNode?: boolean;
 };
 
 export type TooltipComponentType = {
diff --git a/src/frontend/tailwind.config.js b/src/frontend/tailwind.config.js
index 5644a21bc..041546c5d 100644
--- a/src/frontend/tailwind.config.js
+++ b/src/frontend/tailwind.config.js
@@ -2,6 +2,81 @@
 const { fontFamily } = require("tailwindcss/defaultTheme")
 
 import plugin from "tailwindcss/plugin";
+
+module.exports = {
+  darkMode: ["class"],
+  content: ["app/**/*.{ts,tsx}", "components/**/*.{ts,tsx}"],
+  theme: {
+    container: {
+      center: true,
+      padding: "2rem",
+      screens: {
+        "2xl": "1400px",
+      },
+    },
+    extend: {
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+      },
+      borderRadius: {
+        lg: `var(--radius)`,
+        md: `calc(var(--radius) - 2px)`,
+        sm: "calc(var(--radius) - 4px)",
+      },
+      fontFamily: {
+        sans: ["var(--font-sans)", ...fontFamily.sans],
+      },
+      keyframes: {
+        "accordion-down": {
+          from: { height: 0 },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: 0 },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+      },
+    },
+  },
+  plugins: [require("tailwindcss-animate")],
+}
+
 module.exports = {
   content: ["./index.html", "./src/**/*.{js,ts,tsx,jsx}"],
   darkMode: "class",