diff --git a/README.PT.md b/README.PT.md
index 6a12e8eef..8d3197dd7 100644
--- a/README.PT.md
+++ b/README.PT.md
@@ -36,7 +36,6 @@
 
 # 📝 Conteúdo
 
-- [](#)
 - [📝 Conteúdo](#-conteúdo)
 - [📦 Introdução](#-introdução)
 - [🎨 Criar Fluxos](#-criar-fluxos)
diff --git a/README.md b/README.md
index 940855bb1..68c8fde29 100644
--- a/README.md
+++ b/README.md
@@ -27,6 +27,7 @@
 
 <div align="center">
   <a href="./README.md"><img alt="README in English" src="https://img.shields.io/badge/English-d9d9d9"></a>
+  <a href="./README.PT.md"><img alt="README in Portuguese" src="https://img.shields.io/badge/Portuguese-d9d9d9"></a>
   <a href="./README.zh_CN.md"><img alt="README in Simplified Chinese" src="https://img.shields.io/badge/简体中文-d9d9d9"></a>
 </div>
 
diff --git a/poetry.lock b/poetry.lock
index 58c4e5e1c..be54505c1 100644
--- a/poetry.lock
+++ b/poetry.lock
@@ -4058,19 +4058,19 @@ text-helpers = ["chardet (>=5.1.0,<6.0.0)"]
 
 [[package]]
 name = "langchain-anthropic"
-version = "0.1.15"
+version = "0.1.13"
 description = "An integration package connecting AnthropicMessages and LangChain"
 optional = false
 python-versions = "<4.0,>=3.8.1"
 files = [
-    {file = "langchain_anthropic-0.1.15-py3-none-any.whl", hash = "sha256:7cceea526f473e4d514f39295dc128eec57da628a4bbb54850d11dda7aa959fc"},
-    {file = "langchain_anthropic-0.1.15.tar.gz", hash = "sha256:c5c3c6eaccb11ed99a63886e50873ac21eaf8e9441e0f75c7ae7cd8cdef65155"},
+    {file = "langchain_anthropic-0.1.13-py3-none-any.whl", hash = "sha256:121f6f480da7685c239573d98322adb94fe486d40651ac341637f65da36881de"},
+    {file = "langchain_anthropic-0.1.13.tar.gz", hash = "sha256:32e7ac51e1874c47e1a20493e75f5bfc88b0ffeaf5f1aed6091547e1ae44bb85"},
 ]
 
 [package.dependencies]
-anthropic = ">=0.28.0,<1"
+anthropic = ">=0.26.0,<1"
 defusedxml = ">=0.7.1,<0.8.0"
-langchain-core = ">=0.2.2rc1,<0.3"
+langchain-core = ">=0.1.43,<0.3"
 
 [[package]]
 name = "langchain-astradb"
@@ -6844,7 +6844,7 @@ files = [
 ]
 
 [package.dependencies]
-pydantic = ">=2.7.0"
+pydantic = ">=2.3.0"
 python-dotenv = ">=0.21.0"
 
 [package.extras]
@@ -9013,13 +9013,13 @@ types-pyOpenSSL = "*"
 
 [[package]]
 name = "types-requests"
-version = "2.32.0.20240602"
+version = "2.32.0.20240523"
 description = "Typing stubs for requests"
 optional = false
 python-versions = ">=3.8"
 files = [
-    {file = "types-requests-2.32.0.20240602.tar.gz", hash = "sha256:3f98d7bbd0dd94ebd10ff43a7fbe20c3b8528acace6d8efafef0b6a184793f06"},
-    {file = "types_requests-2.32.0.20240602-py3-none-any.whl", hash = "sha256:ed3946063ea9fbc6b5fc0c44fa279188bae42d582cb63760be6cb4b9d06c3de8"},
+    {file = "types-requests-2.32.0.20240523.tar.gz", hash = "sha256:26b8a6de32d9f561192b9942b41c0ab2d8010df5677ca8aa146289d11d505f57"},
+    {file = "types_requests-2.32.0.20240523-py3-none-any.whl", hash = "sha256:f19ed0e2daa74302069bbbbf9e82902854ffa780bc790742a810a9aaa52f65ec"},
 ]
 
 [package.dependencies]
@@ -9038,13 +9038,13 @@ files = [
 
 [[package]]
 name = "typing-extensions"
-version = "4.12.1"
+version = "4.12.0"
 description = "Backported and Experimental Type Hints for Python 3.8+"
 optional = false
 python-versions = ">=3.8"
 files = [
-    {file = "typing_extensions-4.12.1-py3-none-any.whl", hash = "sha256:6024b58b69089e5a89c347397254e35f1bf02a907728ec7fee9bf0fe837d203a"},
-    {file = "typing_extensions-4.12.1.tar.gz", hash = "sha256:915f5e35ff76f56588223f15fdd5938f9a1cf9195c0de25130c627e4d597f6d1"},
+    {file = "typing_extensions-4.12.0-py3-none-any.whl", hash = "sha256:b349c66bea9016ac22978d800cfff206d5f9816951f12a7d0ec5578b0a819594"},
+    {file = "typing_extensions-4.12.0.tar.gz", hash = "sha256:8cbcdc8606ebcb0d95453ad7dc5065e6237b6aa230a31e81d0f440c30fed5fd8"},
 ]
 
 [[package]]
@@ -9230,13 +9230,13 @@ files = [
 
 [[package]]
 name = "uvicorn"
-version = "0.30.1"
+version = "0.29.0"
 description = "The lightning-fast ASGI server."
 optional = false
 python-versions = ">=3.8"
 files = [
-    {file = "uvicorn-0.30.1-py3-none-any.whl", hash = "sha256:cd17daa7f3b9d7a24de3617820e634d0933b69eed8e33a516071174427238c81"},
-    {file = "uvicorn-0.30.1.tar.gz", hash = "sha256:d46cd8e0fd80240baffbcd9ec1012a712938754afcf81bce56c024c1656aece8"},
+    {file = "uvicorn-0.29.0-py3-none-any.whl", hash = "sha256:2c2aac7ff4f4365c206fd773a39bf4ebd1047c238f8b8268ad996829323473de"},
+    {file = "uvicorn-0.29.0.tar.gz", hash = "sha256:6a69214c0b6a087462412670b3ef21224fa48cae0e452b5883e8e8bdfdd11dd0"},
 ]
 
 [package.dependencies]
@@ -9300,13 +9300,13 @@ test = ["Cython (>=0.29.36,<0.30.0)", "aiohttp (==3.9.0b0)", "aiohttp (>=3.8.1)"
 
 [[package]]
 name = "validators"
-version = "0.28.3"
+version = "0.28.1"
 description = "Python Data Validation for Humans™"
 optional = false
 python-versions = ">=3.8"
 files = [
-    {file = "validators-0.28.3-py3-none-any.whl", hash = "sha256:53cafa854f13850156259d9cc479b864ee901f6a96e6b109e6fc33f98f37d99f"},
-    {file = "validators-0.28.3.tar.gz", hash = "sha256:c6c79840bcde9ba77b19f6218f7738188115e27830cbaff43264bc4ed24c429d"},
+    {file = "validators-0.28.1-py3-none-any.whl", hash = "sha256:890c98789ad884037f059af6ea915ec2d667129d509180c2c590b8009a4c4219"},
+    {file = "validators-0.28.1.tar.gz", hash = "sha256:5ac88e7916c3405f0ce38ac2ac82a477fcf4d90dbbeddd04c8193171fc17f7dc"},
 ]
 
 [[package]]
@@ -9454,13 +9454,13 @@ files = [
 
 [[package]]
 name = "weaviate-client"
-version = "4.6.4"
+version = "4.6.3"
 description = "A python native Weaviate client"
 optional = false
 python-versions = ">=3.8"
 files = [
-    {file = "weaviate_client-4.6.4-py3-none-any.whl", hash = "sha256:19b76fb923a5f0b6fcb7471ef3cd990d2791ede71731e53429e1066a9dbf2af2"},
-    {file = "weaviate_client-4.6.4.tar.gz", hash = "sha256:5378db8a33bf1d48adff3f9efa572d9fb04eaeb36444817cab56f1ba3c595500"},
+    {file = "weaviate_client-4.6.3-py3-none-any.whl", hash = "sha256:b2921f9aea84a4eccb1c75d55dd2857a87241e5536540fb96ffdf4737ed4fe8a"},
+    {file = "weaviate_client-4.6.3.tar.gz", hash = "sha256:a6e638f746f91c310fe6680cffa77949718f17d8b40b966f7037028cacfd94e0"},
 ]
 
 [package.dependencies]
@@ -9471,7 +9471,7 @@ grpcio-tools = ">=1.57.0,<2.0.0"
 httpx = ">=0.25.0,<=0.27.0"
 pydantic = ">=2.5.0,<3.0.0"
 requests = ">=2.30.0,<3.0.0"
-validators = "0.28.3"
+validators = "0.28.1"
 
 [[package]]
 name = "websocket-client"
diff --git a/scripts/factory_restart_space.py b/scripts/factory_restart_space.py
index 8a52dc42a..07a25d0de 100644
--- a/scripts/factory_restart_space.py
+++ b/scripts/factory_restart_space.py
@@ -18,7 +18,7 @@ if not space:
     print("Please provide a space to restart.")
     exit()
 
-if not parsed_args.api_token:
+if not parsed_args.token:
     print("Please provide an API token.")
     exit()
 
diff --git a/src/backend/base/langflow/api/v1/login.py b/src/backend/base/langflow/api/v1/login.py
index cde6bd28b..2637cc865 100644
--- a/src/backend/base/langflow/api/v1/login.py
+++ b/src/backend/base/langflow/api/v1/login.py
@@ -71,9 +71,7 @@ async def login_to_get_access_token(
 
 @router.get("/auto_login")
 async def auto_login(
-    response: Response,
-    db: Session = Depends(get_session),
-    settings_service=Depends(get_settings_service)
+    response: Response, db: Session = Depends(get_session), settings_service=Depends(get_settings_service)
 ):
     auth_settings = settings_service.auth_settings
     if settings_service.auth_settings.AUTO_LOGIN:
diff --git a/src/backend/base/langflow/api/v1/monitor.py b/src/backend/base/langflow/api/v1/monitor.py
index e419ed5bf..ffd01b470 100644
--- a/src/backend/base/langflow/api/v1/monitor.py
+++ b/src/backend/base/langflow/api/v1/monitor.py
@@ -1,5 +1,4 @@
 from typing import List, Optional
-from uuid import UUID
 from fastapi import APIRouter, Depends, HTTPException, Query
 
 from langflow.services.deps import get_monitor_service
diff --git a/src/backend/base/langflow/base/curl/parse.py b/src/backend/base/langflow/base/curl/parse.py
index c86638306..892abdde2 100644
--- a/src/backend/base/langflow/base/curl/parse.py
+++ b/src/backend/base/langflow/base/curl/parse.py
@@ -15,10 +15,25 @@ import shlex
 from collections import OrderedDict, namedtuple
 from http.cookies import SimpleCookie
 
-from uncurl.api import parser  # type: ignore
-
-parser.add_argument("-x", "--proxy", default={})
-parser.add_argument("-U", "--proxy-user", default="")
+ParsedArgs = namedtuple(
+    "ParsedContext",
+    [
+        "command",
+        "url",
+        "data",
+        "data_binary",
+        "method",
+        "headers",
+        "compressed",
+        "insecure",
+        "user",
+        "include",
+        "silent",
+        "proxy",
+        "proxy_user",
+        "cookies",
+    ],
+)
 
 ParsedContext = namedtuple("ParsedContext", ["method", "url", "data", "headers", "cookies", "verify", "auth", "proxy"])
 
@@ -27,24 +42,89 @@ def normalize_newlines(multiline_text):
     return multiline_text.replace(" \\\n", " ")
 
 
+def parse_curl_command(curl_command):
+    tokens = shlex.split(normalize_newlines(curl_command))
+    tokens = [token for token in tokens if token and token != " "]
+    if "curl" not in tokens[0]:
+        raise ValueError("Invalid curl command")
+    args_template = {
+        "command": None,
+        "url": None,
+        "data": None,
+        "data_binary": None,
+        "method": "get",
+        "headers": [],
+        "compressed": False,
+        "insecure": False,
+        "user": (),
+        "include": False,
+        "silent": False,
+        "proxy": None,
+        "proxy_user": None,
+        "cookies": {},
+    }
+    args = args_template.copy()
+
+    i = 0
+    while i < len(tokens):
+        token = tokens[i]
+        if token == "-X":
+            i += 1
+            args["method"] = tokens[i].lower()
+        elif token in ("-d", "--data"):
+            i += 1
+            args["data"] = tokens[i]
+            args["method"] = "post"
+        elif token in ("-b", "--data-binary", "--data-raw"):
+            i += 1
+            args["data_binary"] = tokens[i]
+            args["method"] = "post"
+        elif token in ("-H", "--header"):
+            i += 1
+            args["headers"].append(tokens[i])
+        elif token == "--compressed":
+            args["compressed"] = True
+        elif token in ("-k", "--insecure"):
+            args["insecure"] = True
+        elif token in ("-u", "--user"):
+            i += 1
+            args["user"] = tuple(tokens[i].split(":"))
+        elif token in ("-I", "--include"):
+            args["include"] = True
+        elif token in ("-s", "--silent"):
+            args["silent"] = True
+        elif token in ("-x", "--proxy"):
+            i += 1
+            args["proxy"] = tokens[i]
+        elif token in ("-U", "--proxy-user"):
+            i += 1
+            args["proxy_user"] = tokens[i]
+        elif not token.startswith("-"):
+            if args["command"] is None:
+                args["command"] = token
+            else:
+                args["url"] = token
+        i += 1
+
+    return ParsedArgs(**args)
+
+
 def parse_context(curl_command):
     method = "get"
 
-    tokens = shlex.split(normalize_newlines(curl_command))
-    tokens = [token for token in tokens if token and token != " "]
-    parsed_args = parser.parse_args(tokens)
+    parsed_args: ParsedArgs = parse_curl_command(curl_command)
 
     post_data = parsed_args.data or parsed_args.data_binary
     if post_data:
         method = "post"
 
-    if parsed_args.X:
-        method = parsed_args.X.lower()
+    if parsed_args.method:
+        method = parsed_args.method.lower()
 
     cookie_dict = OrderedDict()
     quoted_headers = OrderedDict()
 
-    for curl_header in parsed_args.header:
+    for curl_header in parsed_args.headers:
         if curl_header.startswith(":"):
             occurrence = [m.start() for m in re.finditer(":", curl_header)]
             header_key, header_value = curl_header[: occurrence[1]], curl_header[occurrence[1] + 1 :]
diff --git a/src/backend/base/langflow/base/data/utils.py b/src/backend/base/langflow/base/data/utils.py
index 07704f0be..1b0532d09 100644
--- a/src/backend/base/langflow/base/data/utils.py
+++ b/src/backend/base/langflow/base/data/utils.py
@@ -99,7 +99,7 @@ def read_text_file(file_path: str) -> str:
     with open(file_path, "rb") as f:
         raw_data = f.read()
         result = chardet.detect(raw_data)
-        encoding = result['encoding']
+        encoding = result["encoding"]
 
     with open(file_path, "r", encoding=encoding) as f:
         return f.read()
diff --git a/src/backend/base/langflow/helpers/flow.py b/src/backend/base/langflow/helpers/flow.py
index 9a8a7c3b5..7eb901274 100644
--- a/src/backend/base/langflow/helpers/flow.py
+++ b/src/backend/base/langflow/helpers/flow.py
@@ -90,7 +90,9 @@ async def run_flow(
 
     fallback_to_env_vars = get_settings_service().settings.fallback_to_env_var
 
-    return await graph.arun(inputs_list, inputs_components=inputs_components, types=types, fallback_to_env_vars=fallback_to_env_vars)
+    return await graph.arun(
+        inputs_list, inputs_components=inputs_components, types=types, fallback_to_env_vars=fallback_to_env_vars
+    )
 
 
 def generate_function_for_flow(
diff --git a/src/backend/base/langflow/initial_setup/setup.py b/src/backend/base/langflow/initial_setup/setup.py
index 27574950c..83408d8b9 100644
--- a/src/backend/base/langflow/initial_setup/setup.py
+++ b/src/backend/base/langflow/initial_setup/setup.py
@@ -20,7 +20,7 @@ from langflow.services.database.models.user.crud import get_user_by_username
 from langflow.services.deps import get_settings_service, session_scope
 
 from langflow.services.database.models.folder.utils import create_default_folder_if_it_doesnt_exist
-from langflow.services.deps import get_settings_service, session_scope, get_variable_service
+from langflow.services.deps import get_variable_service
 
 
 STARTER_FOLDER_NAME = "Starter Projects"
@@ -221,6 +221,7 @@ def _is_valid_uuid(val):
         return False
     return str(uuid_obj) == val
 
+
 def load_flows_from_directory():
     settings_service = get_settings_service()
     flows_path = settings_service.settings.load_flows_path
@@ -262,6 +263,7 @@ def load_flows_from_directory():
                     session.add(flow)
                 session.commit()
 
+
 def find_existing_flow(session, flow_id, flow_endpoint_name):
     if flow_endpoint_name:
         stmt = select(Flow).where(Flow.endpoint_name == flow_endpoint_name)
@@ -271,6 +273,8 @@ def find_existing_flow(session, flow_id, flow_endpoint_name):
     if existing := session.exec(stmt).first():
         return existing
     return None
+
+
 def create_or_update_starter_projects():
     components_paths = get_settings_service().settings.components_path
     try:
diff --git a/src/backend/base/langflow/processing/process.py b/src/backend/base/langflow/processing/process.py
index aeff0f1a4..1b54d3f08 100644
--- a/src/backend/base/langflow/processing/process.py
+++ b/src/backend/base/langflow/processing/process.py
@@ -59,7 +59,7 @@ async def run_graph_internal(
         outputs or [],
         stream=stream,
         session_id=session_id_str or "",
-        fallback_to_env_vars=fallback_to_env_vars
+        fallback_to_env_vars=fallback_to_env_vars,
     )
     if session_id_str and session_service:
         await session_service.update_session(session_id_str, (graph, artifacts))
diff --git a/src/backend/base/langflow/services/auth/utils.py b/src/backend/base/langflow/services/auth/utils.py
index 0e0aead88..f62d3ce4f 100644
--- a/src/backend/base/langflow/services/auth/utils.py
+++ b/src/backend/base/langflow/services/auth/utils.py
@@ -215,10 +215,7 @@ def create_user_longterm_token(db: Session = Depends(get_session)) -> tuple[UUID
     username = settings_service.auth_settings.SUPERUSER
     super_user = get_user_by_username(db, username)
     if not super_user:
-        raise HTTPException(
-            status_code=status.HTTP_400_BAD_REQUEST,
-            detail="Super user hasn't been created"
-        )
+        raise HTTPException(status_code=status.HTTP_400_BAD_REQUEST, detail="Super user hasn't been created")
     access_token_expires_longterm = timedelta(days=365)
     access_token = create_token(
         data={"sub": str(super_user.id)},
diff --git a/src/backend/base/langflow/services/database/models/api_key/model.py b/src/backend/base/langflow/services/database/models/api_key/model.py
index cb216d9ae..157b08b32 100644
--- a/src/backend/base/langflow/services/database/models/api_key/model.py
+++ b/src/backend/base/langflow/services/database/models/api_key/model.py
@@ -55,6 +55,7 @@ class ApiKeyRead(ApiKeyBase):
     id: UUID
     api_key: str = Field(schema_extra={"validate_default": True})
     user_id: UUID = Field()
+    created_at: datetime = Field()
 
     @field_validator("api_key")
     @classmethod
diff --git a/src/backend/base/langflow/services/settings/service.py b/src/backend/base/langflow/services/settings/service.py
index 95088e829..3ecdb683d 100644
--- a/src/backend/base/langflow/services/settings/service.py
+++ b/src/backend/base/langflow/services/settings/service.py
@@ -1,5 +1,4 @@
 import os
-from typing import Optional
 
 import yaml
 from loguru import logger
@@ -8,6 +7,7 @@ from langflow.services.base import Service
 from langflow.services.settings.auth import AuthSettings
 from langflow.services.settings.base import Settings
 
+
 class SettingsService(Service):
     name = "settings_service"
 
diff --git a/src/frontend/package-lock.json b/src/frontend/package-lock.json
index 1d3f2e149..0a8adbf66 100644
--- a/src/frontend/package-lock.json
+++ b/src/frontend/package-lock.json
@@ -44,6 +44,7 @@
         "debounce-promise": "^3.1.2",
         "dompurify": "^3.0.5",
         "dotenv": "^16.4.5",
+        "emoji-regex": "^10.3.0",
         "esbuild": "^0.17.19",
         "file-saver": "^2.0.5",
         "framer-motion": "^11.0.6",
@@ -5997,9 +5998,9 @@
       "integrity": "sha512-NPtACGFe7vunRYzvYqVRhQvsDrTevxpgDKxG/Vcbe0BTNOY+5+/2mOXSw2ls7ToNbE5Bf/+uQbjTxcmwMozpCw=="
     },
     "node_modules/emoji-regex": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+      "version": "10.3.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.3.0.tgz",
+      "integrity": "sha512-QpLs9D9v9kArv4lfDEgg1X/gN5XLnf/A6l9cs8SPZLRZR3ZkY9+kwIQTxm+fsSej5UMYGE8fdoaZVIBlqG0XTw=="
     },
     "node_modules/end-of-stream": {
       "version": "1.4.4",
@@ -12205,6 +12206,16 @@
         "node": ">=8"
       }
     },
+    "node_modules/string-width-cjs/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+    },
+    "node_modules/string-width/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+    },
     "node_modules/strip-ansi": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
diff --git a/src/frontend/package.json b/src/frontend/package.json
index 7a56d080e..a33d73e08 100644
--- a/src/frontend/package.json
+++ b/src/frontend/package.json
@@ -39,6 +39,7 @@
     "debounce-promise": "^3.1.2",
     "dompurify": "^3.0.5",
     "dotenv": "^16.4.5",
+    "emoji-regex": "^10.3.0",
     "esbuild": "^0.17.19",
     "file-saver": "^2.0.5",
     "framer-motion": "^11.0.6",
diff --git a/src/frontend/src/App.css b/src/frontend/src/App.css
index a4ff01961..809959757 100644
--- a/src/frontend/src/App.css
+++ b/src/frontend/src/App.css
@@ -164,3 +164,13 @@ body {
 .ag-body-vertical-scroll-viewport::-webkit-scrollbar-thumb:hover {
   background-color: #bbb;
 }
+
+/* This CSS is to not apply the border for the column having 'no-border' class */
+.no-border.ag-cell:focus {
+  border: none !important;
+  outline: none;
+}
+.no-border.ag-cell {
+  border: none !important;
+  outline: none;
+}
diff --git a/src/frontend/src/App.tsx b/src/frontend/src/App.tsx
index b9e02a27d..36f2ad9f9 100644
--- a/src/frontend/src/App.tsx
+++ b/src/frontend/src/App.tsx
@@ -1,4 +1,3 @@
-import axios from "axios";
 import { useContext, useEffect, useState } from "react";
 import { ErrorBoundary } from "react-error-boundary";
 import { useNavigate } from "react-router-dom";
@@ -30,10 +29,10 @@ export default function App() {
   useTrackLastVisitedPath();
 
   const removeFromTempNotificationList = useAlertStore(
-    (state) => state.removeFromTempNotificationList,
+    (state) => state.removeFromTempNotificationList
   );
   const tempNotificationList = useAlertStore(
-    (state) => state.tempNotificationList,
+    (state) => state.tempNotificationList
   );
   const [fetchError, setFetchError] = useState(false);
   const isLoading = useFlowsManagerStore((state) => state.isLoading);
@@ -51,7 +50,7 @@ export default function App() {
   const refreshVersion = useDarkStore((state) => state.refreshVersion);
   const refreshStars = useDarkStore((state) => state.refreshStars);
   const setGlobalVariables = useGlobalVariablesStore(
-    (state) => state.setGlobalVariables,
+    (state) => state.setGlobalVariables
   );
   const checkHasStore = useStoreStore((state) => state.checkHasStore);
   const navigate = useNavigate();
diff --git a/src/frontend/src/alerts/alertDropDown/index.tsx b/src/frontend/src/alerts/alertDropDown/index.tsx
index 05f42922d..6eff32fe2 100644
--- a/src/frontend/src/alerts/alertDropDown/index.tsx
+++ b/src/frontend/src/alerts/alertDropDown/index.tsx
@@ -16,13 +16,13 @@ export default function AlertDropdown({
 }: AlertDropdownType): JSX.Element {
   const notificationList = useAlertStore((state) => state.notificationList);
   const clearNotificationList = useAlertStore(
-    (state) => state.clearNotificationList,
+    (state) => state.clearNotificationList
   );
   const removeFromNotificationList = useAlertStore(
-    (state) => state.removeFromNotificationList,
+    (state) => state.removeFromNotificationList
   );
   const setNotificationCenter = useAlertStore(
-    (state) => state.setNotificationCenter,
+    (state) => state.setNotificationCenter
   );
 
   const [open, setOpen] = useState(false);
diff --git a/src/frontend/src/components/ImageViewer/index.tsx b/src/frontend/src/components/ImageViewer/index.tsx
index 8433962a7..dc7f41ad7 100644
--- a/src/frontend/src/components/ImageViewer/index.tsx
+++ b/src/frontend/src/components/ImageViewer/index.tsx
@@ -31,14 +31,14 @@ export default function ImageViewer({ image }) {
         const fullPageButton = document.getElementById("full-page-button");
 
         zoomInButton!.addEventListener("click", () =>
-          viewer.viewport.zoomBy(1.2),
+          viewer.viewport.zoomBy(1.2)
         );
         zoomOutButton!.addEventListener("click", () =>
-          viewer.viewport.zoomBy(0.8),
+          viewer.viewport.zoomBy(0.8)
         );
         homeButton!.addEventListener("click", () => viewer.viewport.goHome());
         fullPageButton!.addEventListener("click", () =>
-          viewer.setFullScreen(true),
+          viewer.setFullScreen(true)
         );
 
         // Optionally, you can set additional viewer options here
@@ -47,16 +47,16 @@ export default function ImageViewer({ image }) {
         return () => {
           viewer.destroy();
           zoomInButton!.removeEventListener("click", () =>
-            viewer.viewport.zoomBy(1.2),
+            viewer.viewport.zoomBy(1.2)
           );
           zoomOutButton!.removeEventListener("click", () =>
-            viewer.viewport.zoomBy(0.8),
+            viewer.viewport.zoomBy(0.8)
           );
           homeButton!.removeEventListener("click", () =>
-            viewer.viewport.goHome(),
+            viewer.viewport.goHome()
           );
           fullPageButton!.removeEventListener("click", () =>
-            viewer.setFullScreen(true),
+            viewer.setFullScreen(true)
           );
         };
       }
diff --git a/src/frontend/src/components/accordionComponent/index.tsx b/src/frontend/src/components/accordionComponent/index.tsx
index 7c5562e7f..43a0aef79 100644
--- a/src/frontend/src/components/accordionComponent/index.tsx
+++ b/src/frontend/src/components/accordionComponent/index.tsx
@@ -7,7 +7,6 @@ import {
 } from "../../components/ui/accordion";
 import { AccordionComponentType } from "../../types/components";
 import { cn } from "../../utils/utils";
-import ShadTooltip from "../shadTooltipComponent";
 
 export default function AccordionComponent({
   trigger,
@@ -18,7 +17,7 @@ export default function AccordionComponent({
   sideBar,
 }: AccordionComponentType): JSX.Element {
   const [value, setValue] = useState(
-    open.length === 0 ? "" : getOpenAccordion(),
+    open.length === 0 ? "" : getOpenAccordion()
   );
 
   function getOpenAccordion(): string {
@@ -53,7 +52,7 @@ export default function AccordionComponent({
             disabled={disabled}
             className={cn(
               sideBar ? "w-full bg-muted px-[0.75rem] py-[0.5rem]" : "ml-3",
-              disabled ? "cursor-not-allowed" : "cursor-pointer",
+              disabled ? "cursor-not-allowed" : "cursor-pointer"
             )}
           >
             {trigger}
diff --git a/src/frontend/src/components/cardComponent/index.tsx b/src/frontend/src/components/cardComponent/index.tsx
index 09b8ff833..a5d671aa0 100644
--- a/src/frontend/src/components/cardComponent/index.tsx
+++ b/src/frontend/src/components/cardComponent/index.tsx
@@ -27,8 +27,8 @@ import {
 import { Checkbox } from "../ui/checkbox";
 import { FormControl, FormField } from "../ui/form";
 import Loading from "../ui/loading";
-import { convertTestName } from "./utils/convert-test-name";
 import DragCardComponent from "./components/dragCardComponent";
+import { convertTestName } from "./utils/convert-test-name";
 
 export default function CollectionCardComponent({
   data,
@@ -60,11 +60,11 @@ export default function CollectionCardComponent({
   const [loading, setLoading] = useState(false);
   const [loadingLike, setLoadingLike] = useState(false);
   const [liked_by_user, setLiked_by_user] = useState(
-    data?.liked_by_user ?? false,
+    data?.liked_by_user ?? false
   );
   const [likes_count, setLikes_count] = useState(data?.liked_by_count ?? 0);
   const [downloads_count, setDownloads_count] = useState(
-    data?.downloads_count ?? 0,
+    data?.downloads_count ?? 0
   );
   const currentFlow = useFlowsManagerStore((state) => state.currentFlow);
   const setCurrentFlow = useFlowsManagerStore((state) => state.setCurrentFlow);
@@ -75,12 +75,12 @@ export default function CollectionCardComponent({
   const [openPlayground, setOpenPlayground] = useState(false);
   const [openDelete, setOpenDelete] = useState(false);
   const setCurrentFlowId = useFlowsManagerStore(
-    (state) => state.setCurrentFlowId,
+    (state) => state.setCurrentFlowId
   );
   const [loadingPlayground, setLoadingPlayground] = useState(false);
 
   const selectedFlowsComponentsCards = useFlowsManagerStore(
-    (state) => state.selectedFlowsComponentsCards,
+    (state) => state.selectedFlowsComponentsCards
   );
 
   const name = data.is_component ? "Component" : "Flow";
@@ -220,7 +220,7 @@ export default function CollectionCardComponent({
           "group relative flex min-h-[11rem] flex-col justify-between overflow-hidden transition-all hover:bg-muted/50 hover:shadow-md hover:dark:bg-[#ffffff10]",
           disabled ? "pointer-events-none opacity-50" : "",
           onClick ? "cursor-pointer" : "",
-          isSelectedCard ? "border border-selected" : "",
+          isSelectedCard ? "border border-selected" : ""
         )}
         onClick={onClick}
       >
@@ -233,7 +233,7 @@ export default function CollectionCardComponent({
                     "visible flex-shrink-0",
                     data.is_component
                       ? "mx-0.5 h-6 w-6 text-component-icon"
-                      : "h-7 w-7 flex-shrink-0 text-flow-icon",
+                      : "h-7 w-7 flex-shrink-0 text-flow-icon"
                   )}
                   name={data.is_component ? "ToyBrick" : "Group"}
                 />
@@ -428,7 +428,7 @@ export default function CollectionCardComponent({
                             name="Trash2"
                             className={cn(
                               "h-5 w-5",
-                              !authorized ? " text-ring" : "",
+                              !authorized ? " text-ring" : ""
                             )}
                           />
                         </Button>
@@ -463,7 +463,7 @@ export default function CollectionCardComponent({
                             liked_by_user
                               ? "fill-destructive stroke-destructive"
                               : "",
-                            !authorized ? " text-ring" : "",
+                            !authorized ? " text-ring" : ""
                           )}
                         />
                       </Button>
@@ -501,7 +501,7 @@ export default function CollectionCardComponent({
                         }
                         className={cn(
                           loading ? "h-5 w-5 animate-spin" : "h-5 w-5",
-                          !authorized ? " text-ring" : "",
+                          !authorized ? " text-ring" : ""
                         )}
                       />
                     </Button>
diff --git a/src/frontend/src/components/cardsWrapComponent/index.tsx b/src/frontend/src/components/cardsWrapComponent/index.tsx
index c7ca01588..0de3f1a2f 100644
--- a/src/frontend/src/components/cardsWrapComponent/index.tsx
+++ b/src/frontend/src/components/cardsWrapComponent/index.tsx
@@ -65,7 +65,7 @@ export default function CardsWrapComponent({
         "h-full w-full",
         isDragging
           ? "mb-36 flex flex-col items-center justify-center gap-4 text-2xl font-light"
-          : "",
+          : ""
       )}
     >
       {isDragging ? (
diff --git a/src/frontend/src/components/chatComponent/index.tsx b/src/frontend/src/components/chatComponent/index.tsx
index 81dade485..1fa82e9dd 100644
--- a/src/frontend/src/components/chatComponent/index.tsx
+++ b/src/frontend/src/components/chatComponent/index.tsx
@@ -50,7 +50,7 @@ export default function FlowToolbar(): JSX.Element {
             "relative inline-flex h-full w-full items-center justify-center gap-[4px] bg-muted px-5 py-3 text-sm font-semibold text-foreground transition-all duration-150 ease-in-out hover:bg-background hover:bg-hover ",
             !hasApiKey || !validApiKey || !hasStore
               ? " button-disable text-muted-foreground  "
-              : "",
+              : ""
           )}
         >
           <ForwardedIconComponent
@@ -59,14 +59,14 @@ export default function FlowToolbar(): JSX.Element {
               "-m-0.5 -ml-1 h-6 w-6",
               !hasApiKey || !validApiKey || !hasStore
                 ? "extra-side-bar-save-disable"
-                : "",
+                : ""
             )}
           />
           Share
         </button>
       </ShareModal>
     ),
-    [hasApiKey, validApiKey, currentFlow, hasStore],
+    [hasApiKey, validApiKey, currentFlow, hasStore]
   );
 
   return (
@@ -118,7 +118,7 @@ export default function FlowToolbar(): JSX.Element {
                 <ApiModal flow={currentFlow}>
                   <div
                     className={classNames(
-                      "relative inline-flex w-full items-center justify-center gap-1 px-5 py-3 text-sm font-semibold text-foreground transition-all duration-150 ease-in-out hover:bg-hover",
+                      "relative inline-flex w-full items-center justify-center gap-1 px-5 py-3 text-sm font-semibold text-foreground transition-all duration-150 ease-in-out hover:bg-hover"
                     )}
                   >
                     <ForwardedIconComponent
diff --git a/src/frontend/src/components/codeTabsComponent/index.tsx b/src/frontend/src/components/codeTabsComponent/index.tsx
index 0a0b691c8..9f1fc99b6 100644
--- a/src/frontend/src/components/codeTabsComponent/index.tsx
+++ b/src/frontend/src/components/codeTabsComponent/index.tsx
@@ -236,7 +236,7 @@ export default function CodeTabsComponent({
               <div className="api-modal-according-display">
                 <div
                   className={classNames(
-                    "h-[70vh] w-full overflow-y-auto overflow-x-hidden rounded-lg bg-muted custom-scroll",
+                    "h-[70vh] w-full overflow-y-auto overflow-x-hidden rounded-lg bg-muted custom-scroll"
                   )}
                 >
                   {data?.map((node: any, i) => (
@@ -275,8 +275,8 @@ export default function CodeTabsComponent({
                                         .show &&
                                       LANGFLOW_SUPPORTED_TYPES.has(
                                         node.data.node.template[templateField]
-                                          .type,
-                                      ),
+                                          .type
+                                      )
                                   )
                                   .map((templateField, indx) => {
                                     return (
@@ -334,7 +334,7 @@ export default function CodeTabsComponent({
                                                       target,
                                                       node.data.node.template[
                                                         templateField
-                                                      ],
+                                                      ]
                                                     );
                                                   }}
                                                 />
@@ -380,7 +380,7 @@ export default function CodeTabsComponent({
                                                         target,
                                                         node.data.node.template[
                                                           templateField
-                                                        ],
+                                                        ]
                                                       );
                                                     }}
                                                   />
@@ -433,7 +433,7 @@ export default function CodeTabsComponent({
                                                       target,
                                                       node.data.node.template[
                                                         templateField
-                                                      ],
+                                                      ]
                                                     );
                                                   }}
                                                 />
@@ -470,7 +470,7 @@ export default function CodeTabsComponent({
                                                       e,
                                                       node.data.node.template[
                                                         templateField
-                                                      ],
+                                                      ]
                                                     );
                                                   }}
                                                   size="small"
@@ -501,7 +501,7 @@ export default function CodeTabsComponent({
                                                     ].fileTypes
                                                   }
                                                   onFileChange={(
-                                                    value: any,
+                                                    value: any
                                                   ) => {
                                                     node.data.node.template[
                                                       templateField
@@ -554,7 +554,7 @@ export default function CodeTabsComponent({
                                                       target,
                                                       node.data.node.template[
                                                         templateField
-                                                      ],
+                                                      ]
                                                     );
                                                   }}
                                                 />
@@ -594,7 +594,7 @@ export default function CodeTabsComponent({
                                                       target,
                                                       node.data.node.template[
                                                         templateField
-                                                      ],
+                                                      ]
                                                     );
                                                   }}
                                                   value={
@@ -656,7 +656,7 @@ export default function CodeTabsComponent({
                                                       target,
                                                       node.data.node.template[
                                                         templateField
-                                                      ],
+                                                      ]
                                                     );
                                                   }}
                                                 />
@@ -702,7 +702,7 @@ export default function CodeTabsComponent({
                                                       target,
                                                       node.data.node.template[
                                                         templateField
-                                                      ],
+                                                      ]
                                                     );
                                                   }}
                                                 />
@@ -748,7 +748,7 @@ export default function CodeTabsComponent({
                                                       target,
                                                       node.data.node.template[
                                                         templateField
-                                                      ],
+                                                      ]
                                                     );
                                                   }}
                                                 />
@@ -780,8 +780,8 @@ export default function CodeTabsComponent({
                                                           ].value,
                                                           type(
                                                             node,
-                                                            templateField,
-                                                          ),
+                                                            templateField
+                                                          )
                                                         )
                                                   }
                                                   duplicateKey={
@@ -790,15 +790,15 @@ export default function CodeTabsComponent({
                                                   onChange={(target) => {
                                                     const valueToNumbers =
                                                       convertValuesToNumbers(
-                                                        target,
+                                                        target
                                                       );
                                                     node.data.node!.template[
                                                       templateField
                                                     ].value = valueToNumbers;
                                                     setErrorDuplicateKey(
                                                       hasDuplicateKeys(
-                                                        valueToNumbers,
-                                                      ),
+                                                        valueToNumbers
+                                                      )
                                                     );
                                                     setData((old) => {
                                                       let newInputList =
@@ -815,7 +815,7 @@ export default function CodeTabsComponent({
                                                       target,
                                                       node.data.node.template[
                                                         templateField
-                                                      ],
+                                                      ]
                                                     );
                                                   }}
                                                   isList={
@@ -863,7 +863,7 @@ export default function CodeTabsComponent({
                                                       target,
                                                       node.data.node.template[
                                                         templateField
-                                                      ],
+                                                      ]
                                                     );
                                                   }}
                                                 />
diff --git a/src/frontend/src/components/csvOutputComponent/index.tsx b/src/frontend/src/components/csvOutputComponent/index.tsx
index a98d9c028..a25cfb679 100644
--- a/src/frontend/src/components/csvOutputComponent/index.tsx
+++ b/src/frontend/src/components/csvOutputComponent/index.tsx
@@ -67,7 +67,7 @@ function CsvOutputComponent({
     if (file) {
       const { rowData: data, colDefs: columns } = convertCSVToData(
         file,
-        separator,
+        separator
       );
       setRowData(data);
       setColDefs(columns);
diff --git a/src/frontend/src/components/dictComponent/index.tsx b/src/frontend/src/components/dictComponent/index.tsx
index 39850e6e3..5161135ed 100644
--- a/src/frontend/src/components/dictComponent/index.tsx
+++ b/src/frontend/src/components/dictComponent/index.tsx
@@ -29,7 +29,7 @@ export default function DictComponent({
     <div
       className={classNames(
         value.length > 1 && editNode ? "my-1" : "",
-        "flex flex-col gap-3",
+        "flex flex-col gap-3"
       )}
     >
       {
diff --git a/src/frontend/src/components/dropdownComponent/index.tsx b/src/frontend/src/components/dropdownComponent/index.tsx
index bff138681..0fd981603 100644
--- a/src/frontend/src/components/dropdownComponent/index.tsx
+++ b/src/frontend/src/components/dropdownComponent/index.tsx
@@ -33,9 +33,8 @@ export default function Dropdown({
 
   const refButton = useRef<HTMLButtonElement>(null);
 
-  const PopoverContentDropdown = children
-    ? PopoverContent
-    : PopoverContentWithoutPortal;
+  const PopoverContentDropdown =
+    children || editNode ? PopoverContent : PopoverContentWithoutPortal;
 
   return (
     <>
diff --git a/src/frontend/src/components/editFlowSettingsComponent/index.tsx b/src/frontend/src/components/editFlowSettingsComponent/index.tsx
index 26bc138e3..3dd813965 100644
--- a/src/frontend/src/components/editFlowSettingsComponent/index.tsx
+++ b/src/frontend/src/components/editFlowSettingsComponent/index.tsx
@@ -99,7 +99,7 @@ export const EditFlowSettings: React.FC<InputProps> = ({
           <span
             className={cn(
               "font-normal text-muted-foreground word-break-break-word",
-              description === "" ? "font-light italic" : "",
+              description === "" ? "font-light italic" : ""
             )}
           >
             {description === "" ? "No description" : description}
diff --git a/src/frontend/src/components/headerComponent/components/menuBar/index.tsx b/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
index 35542ca2a..78a21113a 100644
--- a/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
+++ b/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
@@ -113,7 +113,7 @@ export const MenuBar = ({}: {}): JSX.Element => {
                       title: UPLOAD_ERROR_ALERT,
                       list: [error],
                     });
-                  },
+                  }
                 );
               }}
             >
@@ -195,7 +195,7 @@ export const MenuBar = ({}: {}): JSX.Element => {
               name={isBuilding || saveLoading ? "Loader2" : "CheckCircle2"}
               className={cn(
                 "h-4 w-4",
-                isBuilding || saveLoading ? "animate-spin" : "animate-wiggle",
+                isBuilding || saveLoading ? "animate-spin" : "animate-wiggle"
               )}
             />
             {printByBuildStatus()}
diff --git a/src/frontend/src/components/headerComponent/index.tsx b/src/frontend/src/components/headerComponent/index.tsx
index 209445b17..50a0c8cf8 100644
--- a/src/frontend/src/components/headerComponent/index.tsx
+++ b/src/frontend/src/components/headerComponent/index.tsx
@@ -181,18 +181,6 @@ export default function Header(): JSX.Element {
               />
             </div>
           </AlertDropdown>
-          {autoLogin && (
-            <button
-              onClick={() => {
-                navigate("/account/api-keys");
-              }}
-            >
-              <IconComponent
-                name="Key"
-                className="side-bar-button-size text-muted-foreground hover:text-accent-foreground"
-              />
-            </button>
-          )}
 
           <>
             <Separator orientation="vertical" />
diff --git a/src/frontend/src/components/inputComponent/components/popover/index.tsx b/src/frontend/src/components/inputComponent/components/popover/index.tsx
index 78fc5bd3d..06be89d91 100644
--- a/src/frontend/src/components/inputComponent/components/popover/index.tsx
+++ b/src/frontend/src/components/inputComponent/components/popover/index.tsx
@@ -10,7 +10,11 @@ import {
   CommandList,
 } from "../../../ui/command";
 import { Input } from "../../../ui/input";
-import { Popover, PopoverContentWithoutPortal } from "../../../ui/popover";
+import {
+  Popover,
+  PopoverContent,
+  PopoverContentWithoutPortal,
+} from "../../../ui/popover";
 const CustomInputPopover = ({
   id,
   refInput,
@@ -39,6 +43,9 @@ const CustomInputPopover = ({
   showOptions,
 }) => {
   const setErrorData = useAlertStore.getState().setErrorData;
+  const PopoverContentInput = editNode
+    ? PopoverContent
+    : PopoverContentWithoutPortal;
 
   const handleInputChange = (e) => {
     if (password) {
@@ -68,9 +75,9 @@ const CustomInputPopover = ({
             (selectedOption !== "" || !onChange) && setSelectedOption
               ? selectedOption
               : (selectedOptions?.length !== 0 || !onChange) &&
-                  setSelectedOptions
-                ? selectedOptions?.join(", ")
-                : value
+                setSelectedOptions
+              ? selectedOptions?.join(", ")
+              : value
           }
           autoFocus={autoFocus}
           disabled={disabled}
@@ -96,7 +103,7 @@ const CustomInputPopover = ({
               (password && !(setSelectedOption || setSelectedOptions))
               ? "pr-8"
               : "",
-            className!,
+            className!
           )}
           placeholder={password && editNode ? "Key" : placeholder}
           onChange={handleInputChange}
@@ -107,7 +114,7 @@ const CustomInputPopover = ({
           data-testid={editNode ? id + "-edit" : id}
         />
       </PopoverAnchor>
-      <PopoverContentWithoutPortal
+      <PopoverContentInput
         className="nocopy nowheel nopan nodelete nodrag noundo p-0"
         style={{ minWidth: refInput?.current?.clientWidth ?? "200px" }}
         side="bottom"
@@ -134,15 +141,15 @@ const CustomInputPopover = ({
                   onSelect={(currentValue) => {
                     setSelectedOption &&
                       setSelectedOption(
-                        currentValue === selectedOption ? "" : currentValue,
+                        currentValue === selectedOption ? "" : currentValue
                       );
                     setSelectedOptions &&
                       setSelectedOptions(
                         selectedOptions?.includes(currentValue)
                           ? selectedOptions.filter(
-                              (item) => item !== currentValue,
+                              (item) => item !== currentValue
                             )
-                          : [...selectedOptions, currentValue],
+                          : [...selectedOptions, currentValue]
                       );
                     !setSelectedOptions && setShowOptions(false);
                   }}
@@ -155,7 +162,7 @@ const CustomInputPopover = ({
                           selectedOption === option ||
                             selectedOptions?.includes(option)
                             ? "opacity-100"
-                            : "opacity-0",
+                            : "opacity-0"
                         )}
                       >
                         <div className="absolute opacity-100 transition-all group-hover:opacity-0">
@@ -184,7 +191,7 @@ const CustomInputPopover = ({
             </CommandGroup>
           </CommandList>
         </Command>
-      </PopoverContentWithoutPortal>
+      </PopoverContentInput>
     </Popover>
   );
 };
diff --git a/src/frontend/src/components/inputComponent/components/popoverObject/index.tsx b/src/frontend/src/components/inputComponent/components/popoverObject/index.tsx
index 7b30ac897..d43022845 100644
--- a/src/frontend/src/components/inputComponent/components/popoverObject/index.tsx
+++ b/src/frontend/src/components/inputComponent/components/popoverObject/index.tsx
@@ -9,7 +9,11 @@ import {
   CommandList,
 } from "../../../ui/command";
 import { Input } from "../../../ui/input";
-import { Popover, PopoverContentWithoutPortal } from "../../../ui/popover";
+import {
+  Popover,
+  PopoverContent,
+  PopoverContentWithoutPortal,
+} from "../../../ui/popover";
 const CustomInputPopoverObject = ({
   id,
   refInput,
@@ -23,6 +27,7 @@ const CustomInputPopoverObject = ({
   disabled,
   setShowOptions,
   required,
+  editNode,
   className,
   placeholder,
   onChange,
@@ -34,6 +39,10 @@ const CustomInputPopoverObject = ({
   handleKeyDown,
   showOptions,
 }) => {
+  const PopoverContentInput = editNode
+    ? PopoverContent
+    : PopoverContentWithoutPortal;
+
   const handleInputChange = (e) => {
     onChange && onChange(e.target.value);
   };
@@ -51,14 +60,14 @@ const CustomInputPopoverObject = ({
               ? options.find((option) => option.id === selectedOption)?.name ||
                 ""
               : (selectedOptions?.length !== 0 || !onChange) &&
-                  setSelectedOptions
-                ? selectedOptions
-                    .map(
-                      (optionId) =>
-                        options.find((option) => option.id === optionId)?.name,
-                    )
-                    .join(", ")
-                : value
+                setSelectedOptions
+              ? selectedOptions
+                  .map(
+                    (optionId) =>
+                      options.find((option) => option.id === optionId)?.name
+                  )
+                  .join(", ")
+              : value
           }
           autoFocus={autoFocus}
           disabled={disabled}
@@ -79,7 +88,7 @@ const CustomInputPopoverObject = ({
           data-testid={id}
         />
       </PopoverAnchor>
-      <PopoverContentWithoutPortal
+      <PopoverContentInput
         className="nocopy nowheel nopan nodelete nodrag noundo p-0"
         style={{ minWidth: refInput?.current?.clientWidth ?? "200px" }}
         side="bottom"
@@ -106,15 +115,15 @@ const CustomInputPopoverObject = ({
                   onSelect={(currentValue) => {
                     setSelectedOption &&
                       setSelectedOption(
-                        currentValue === selectedOption ? "" : currentValue,
+                        currentValue === selectedOption ? "" : currentValue
                       );
                     setSelectedOptions &&
                       setSelectedOptions(
                         selectedOptions?.includes(currentValue)
                           ? selectedOptions.filter(
-                              (item) => item !== currentValue,
+                              (item) => item !== currentValue
                             )
-                          : [...selectedOptions, currentValue],
+                          : [...selectedOptions, currentValue]
                       );
                     !setSelectedOptions && setShowOptions(false);
                   }}
@@ -127,7 +136,7 @@ const CustomInputPopoverObject = ({
                           selectedOption === option.id ||
                             selectedOptions?.includes(option.id)
                             ? "opacity-100"
-                            : "opacity-0",
+                            : "opacity-0"
                         )}
                       >
                         <div className="absolute opacity-100 transition-all group-hover:opacity-0">
@@ -159,7 +168,7 @@ const CustomInputPopoverObject = ({
             </CommandGroup>
           </CommandList>
         </Command>
-      </PopoverContentWithoutPortal>
+      </PopoverContentInput>
     </Popover>
   );
 };
diff --git a/src/frontend/src/components/inputComponent/index.tsx b/src/frontend/src/components/inputComponent/index.tsx
index 8fb749279..b361f48ab 100644
--- a/src/frontend/src/components/inputComponent/index.tsx
+++ b/src/frontend/src/components/inputComponent/index.tsx
@@ -71,7 +71,7 @@ export default function InputComponent({
               editNode ? " input-edit-node " : "",
               password && editNode ? "pr-8" : "",
               password && !editNode ? "pr-10" : "",
-              className!,
+              className!
             )}
             placeholder={password && editNode ? "Key" : placeholder}
             onChange={(e) => {
@@ -108,6 +108,7 @@ export default function InputComponent({
               setSelectedOptions={setSelectedOptions}
               options={objectOptions}
               value={value}
+              editNode={editNode}
               autoFocus={autoFocus}
               disabled={disabled}
               setShowOptions={setShowOptions}
@@ -153,7 +154,7 @@ export default function InputComponent({
         <span
           className={cn(
             password && selectedOption === "" ? "right-8" : "right-0",
-            "absolute inset-y-0 flex items-center pr-2.5",
+            "absolute inset-y-0 flex items-center pr-2.5"
           )}
         >
           <button
@@ -166,7 +167,7 @@ export default function InputComponent({
               selectedOption !== ""
                 ? "text-medium-indigo"
                 : "text-muted-foreground",
-              "hover:text-accent-foreground",
+              "hover:text-accent-foreground"
             )}
           >
             <ForwardedIconComponent
@@ -186,7 +187,7 @@ export default function InputComponent({
             "mb-px",
             editNode
               ? "input-component-true-button"
-              : "input-component-false-button",
+              : "input-component-false-button"
           )}
           onClick={(event) => {
             event.preventDefault();
@@ -203,7 +204,7 @@ export default function InputComponent({
               className={classNames(
                 editNode
                   ? "input-component-true-svg"
-                  : "input-component-false-svg",
+                  : "input-component-false-svg"
               )}
             >
               <path
@@ -222,7 +223,7 @@ export default function InputComponent({
               className={classNames(
                 editNode
                   ? "input-component-true-svg"
-                  : "input-component-false-svg",
+                  : "input-component-false-svg"
               )}
             >
               <path
diff --git a/src/frontend/src/components/inputFileComponent/index.tsx b/src/frontend/src/components/inputFileComponent/index.tsx
index bcea7fb79..99e1e6b60 100644
--- a/src/frontend/src/components/inputFileComponent/index.tsx
+++ b/src/frontend/src/components/inputFileComponent/index.tsx
@@ -1,7 +1,6 @@
 import { useEffect, useState } from "react";
 import {
   CONSOLE_ERROR_MSG,
-  CONSOLE_SUCCESS_MSG,
   INVALID_FILE_ALERT,
 } from "../../constants/alerts_constants";
 import { uploadFile } from "../../controllers/API";
diff --git a/src/frontend/src/components/inputGlobalComponent/index.tsx b/src/frontend/src/components/inputGlobalComponent/index.tsx
index 318c57518..21c93e6bf 100644
--- a/src/frontend/src/components/inputGlobalComponent/index.tsx
+++ b/src/frontend/src/components/inputGlobalComponent/index.tsx
@@ -32,11 +32,11 @@ export default function InputGlobalComponent({
   const setErrorData = useAlertStore((state) => state.setErrorData);
 
   useEffect(() => {
-    if (data.node?.template[name])
+    if (data)
       if (
         globalVariablesEntries &&
-        !globalVariablesEntries.includes(data.node?.template[name].value) &&
-        data.node?.template[name].load_from_db
+        !globalVariablesEntries.includes(data.value) &&
+        data.load_from_db
       ) {
         setTimeout(() => {
           onChange("", true);
@@ -46,17 +46,11 @@ export default function InputGlobalComponent({
   }, [globalVariablesEntries]);
 
   useEffect(() => {
-    if (
-      !data.node?.template[name].value &&
-      data.node?.template[name].display_name
-    ) {
-      if (
-        unavaliableFields[data.node?.template[name].display_name!] &&
-        !disabled
-      ) {
+    if (!data.value && data.display_name) {
+      if (unavaliableFields[data.display_name!] && !disabled) {
         setTimeout(() => {
           setDb(true);
-          onChange(unavaliableFields[data.node?.template[name].display_name!]);
+          onChange(unavaliableFields[data.display_name!]);
         }, 100);
       }
     }
@@ -68,10 +62,7 @@ export default function InputGlobalComponent({
       await deleteGlobalVariable(id)
         .then(() => {
           removeGlobalVariable(key);
-          if (
-            data?.node?.template[name].value === key &&
-            data?.node?.template[name].load_from_db
-          ) {
+          if (data?.value === key && data?.load_from_db) {
             onChange("");
             setDb(false);
           }
@@ -94,8 +85,8 @@ export default function InputGlobalComponent({
       id={"input-" + name}
       editNode={editNode}
       disabled={disabled}
-      password={data.node?.template[name].password ?? false}
-      value={data.node?.template[name].value ?? ""}
+      password={data.password ?? false}
+      value={data.value ?? ""}
       options={globalVariablesEntries}
       optionsPlaceholder={"Global Variables"}
       optionsIcon="Globe"
@@ -138,10 +129,10 @@ export default function InputGlobalComponent({
         </DeleteConfirmationModal>
       )}
       selectedOption={
-        data?.node?.template[name].load_from_db &&
+        data?.load_from_db &&
         globalVariablesEntries &&
-        globalVariablesEntries.includes(data?.node?.template[name].value ?? "")
-          ? data?.node?.template[name].value
+        globalVariablesEntries.includes(data?.value ?? "")
+          ? data?.value
           : ""
       }
       setSelectedOption={(value) => {
diff --git a/src/frontend/src/components/shadTooltipComponent/index.tsx b/src/frontend/src/components/shadTooltipComponent/index.tsx
index 6bfad61ee..51254cf68 100644
--- a/src/frontend/src/components/shadTooltipComponent/index.tsx
+++ b/src/frontend/src/components/shadTooltipComponent/index.tsx
@@ -11,7 +11,7 @@ export default function ShadTooltip({
   delayDuration = 500,
 }: ShadToolTipType): JSX.Element {
   return (
-    <Tooltip delayDuration={delayDuration}>
+    <Tooltip defaultOpen={!children} delayDuration={delayDuration}>
       <TooltipTrigger asChild={asChild}>{children}</TooltipTrigger>
       <TooltipContent
         className={cn(styleClasses, "max-w-96")}
diff --git a/src/frontend/src/components/sidebarComponent/components/sideBarButtons/index.tsx b/src/frontend/src/components/sidebarComponent/components/sideBarButtons/index.tsx
index 10f3cd54d..8e14f8fc1 100644
--- a/src/frontend/src/components/sidebarComponent/components/sideBarButtons/index.tsx
+++ b/src/frontend/src/components/sidebarComponent/components/sideBarButtons/index.tsx
@@ -1,7 +1,6 @@
 import { Link } from "react-router-dom";
 import { cn } from "../../../../utils/utils";
 import { buttonVariants } from "../../../ui/button";
-import ForwardedIconComponent from "../../../genericIconComponent";
 
 type SideBarButtonsComponentProps = {
   items: {
@@ -28,7 +27,7 @@ const SideBarButtonsComponent = ({
               pathname === item.href
                 ? "border border-border bg-muted hover:bg-muted"
                 : "border border-transparent hover:border-border hover:bg-transparent",
-              "flex w-full shrink-0 justify-start gap-4",
+              "flex w-full shrink-0 justify-start gap-4"
             )}
           >
             {item.icon}
diff --git a/src/frontend/src/components/sidebarComponent/hooks/use-on-file-drop.tsx b/src/frontend/src/components/sidebarComponent/hooks/use-on-file-drop.tsx
index 141dcb110..f10733468 100644
--- a/src/frontend/src/components/sidebarComponent/hooks/use-on-file-drop.tsx
+++ b/src/frontend/src/components/sidebarComponent/hooks/use-on-file-drop.tsx
@@ -12,7 +12,7 @@ import { addVersionToDuplicates } from "../../../utils/reactflowUtils";
 const useFileDrop = (folderId, folderChangeCallback) => {
   const setFolderDragging = useFolderStore((state) => state.setFolderDragging);
   const setFolderIdDragging = useFolderStore(
-    (state) => state.setFolderIdDragging,
+    (state) => state.setFolderIdDragging
   );
 
   const setErrorData = useAlertStore((state) => state.setErrorData);
@@ -45,7 +45,7 @@ const useFileDrop = (folderId, folderChangeCallback) => {
       | React.DragEvent<HTMLDivElement>
       | React.DragEvent<HTMLButtonElement>
       | React.DragEvent<HTMLAnchorElement>,
-    folderId: string,
+    folderId: string
   ) => {
     e.preventDefault();
 
@@ -60,7 +60,7 @@ const useFileDrop = (folderId, folderChangeCallback) => {
       | React.DragEvent<HTMLDivElement>
       | React.DragEvent<HTMLButtonElement>
       | React.DragEvent<HTMLAnchorElement>,
-    folderId: string,
+    folderId: string
   ) => {
     if (e.dataTransfer.types.some((types) => types === "Files")) {
       setFolderDragging(true);
@@ -73,7 +73,7 @@ const useFileDrop = (folderId, folderChangeCallback) => {
     e:
       | React.DragEvent<HTMLDivElement>
       | React.DragEvent<HTMLButtonElement>
-      | React.DragEvent<HTMLAnchorElement>,
+      | React.DragEvent<HTMLAnchorElement>
   ) => {
     e.preventDefault();
     if (e.target === e.currentTarget) {
@@ -87,7 +87,7 @@ const useFileDrop = (folderId, folderChangeCallback) => {
       | React.DragEvent<HTMLDivElement>
       | React.DragEvent<HTMLButtonElement>
       | React.DragEvent<HTMLAnchorElement>,
-    folderId: string,
+    folderId: string
   ) => {
     if (e?.dataTransfer?.getData("flow")) {
       const data = JSON.parse(e?.dataTransfer?.getData("flow"));
diff --git a/src/frontend/src/components/sidebarComponent/index.tsx b/src/frontend/src/components/sidebarComponent/index.tsx
index b4fbf11b3..a40a2a88f 100644
--- a/src/frontend/src/components/sidebarComponent/index.tsx
+++ b/src/frontend/src/components/sidebarComponent/index.tsx
@@ -5,9 +5,6 @@ import { cn } from "../../utils/utils";
 import HorizontalScrollFadeComponent from "../horizontalScrollFadeComponent";
 import SideBarButtonsComponent from "./components/sideBarButtons";
 import SideBarFoldersButtonsComponent from "./components/sideBarFolderButtons";
-import { addFolder } from "../../pages/MainPage/services";
-import { useNavigate } from "react-router-dom";
-import useFlowStore from "../../stores/flowStore";
 
 type SidebarNavProps = {
   items: {
diff --git a/src/frontend/src/components/tableComponent/components/ResetColumns/index.tsx b/src/frontend/src/components/tableComponent/components/ResetColumns/index.tsx
index 27794be1b..5bd4c15aa 100644
--- a/src/frontend/src/components/tableComponent/components/ResetColumns/index.tsx
+++ b/src/frontend/src/components/tableComponent/components/ResetColumns/index.tsx
@@ -1,6 +1,4 @@
 import { cn } from "../../../../utils/utils";
-import ShadTooltip from "../../../shadTooltipComponent";
-import { Toggle } from "../../../ui/toggle";
 
 export default function ResetColumns({
   resetGrid,
@@ -8,15 +6,6 @@ export default function ResetColumns({
   resetGrid: () => void;
 }): JSX.Element {
   return (
-    /*<div className="absolute left-2 bottom-1 cursor-pointer">
-          <div
-            className="flex h-10 items-center justify-center px-2 pl-3 rounded-md border border-ring/60 text-sm text-[#bccadc] ring-offset-background placeholder:text-muted-foreground hover:bg-muted focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
-            onClick={() => setShow(!show)}
-          >
-            <ForwardedIconComponent name="Settings"></ForwardedIconComponent>
-            <ForwardedIconComponent name={show ? "ChevronLeft" : "ChevronRight"} className="transition-all"></ForwardedIconComponent>
-          </div>
-        </div>*/
     <div className={cn("absolute bottom-4 left-6")}>
       <span
         className="cursor-pointer underline"
diff --git a/src/frontend/src/components/tableAutoCellRender/index.tsx b/src/frontend/src/components/tableComponent/components/tableAutoCellRender/index.tsx
similarity index 78%
rename from src/frontend/src/components/tableAutoCellRender/index.tsx
rename to src/frontend/src/components/tableComponent/components/tableAutoCellRender/index.tsx
index b11cc14ad..7ff5a01cb 100644
--- a/src/frontend/src/components/tableAutoCellRender/index.tsx
+++ b/src/frontend/src/components/tableComponent/components/tableAutoCellRender/index.tsx
@@ -1,11 +1,11 @@
 import { CustomCellRendererProps } from "ag-grid-react";
-import { cn, isTimeStampString } from "../../utils/utils";
-import ArrayReader from "../arrayReaderComponent";
-import DateReader from "../dateReaderComponent";
-import NumberReader from "../numberReader";
-import ObjectRender from "../objectRender";
-import StringReader from "../stringReaderComponent";
-import { Badge } from "../ui/badge";
+import { cn, isTimeStampString } from "../../../../utils/utils";
+import ArrayReader from "../../../arrayReaderComponent";
+import DateReader from "../../../dateReaderComponent";
+import NumberReader from "../../../numberReader";
+import ObjectRender from "../../../objectRender";
+import StringReader from "../../../stringReaderComponent";
+import { Badge } from "../../../ui/badge";
 
 export default function TableAutoCellRender({
   value,
@@ -43,7 +43,6 @@ export default function TableAutoCellRender({
         } else {
           return <StringReader string={value} />;
         }
-        break;
       case "number":
         return <NumberReader number={value} />;
       default:
diff --git a/src/frontend/src/components/tableComponent/components/tableNodeCellRender/index.tsx b/src/frontend/src/components/tableComponent/components/tableNodeCellRender/index.tsx
new file mode 100644
index 000000000..37e19339b
--- /dev/null
+++ b/src/frontend/src/components/tableComponent/components/tableNodeCellRender/index.tsx
@@ -0,0 +1,266 @@
+import { CustomCellRendererProps } from "ag-grid-react";
+import { cloneDeep } from "lodash";
+import { useState } from "react";
+import CodeAreaComponent from "../../../codeAreaComponent";
+import DictComponent from "../../../dictComponent";
+import Dropdown from "../../../dropdownComponent";
+import FloatComponent from "../../../floatComponent";
+import InputFileComponent from "../../../inputFileComponent";
+import InputGlobalComponent from "../../../inputGlobalComponent";
+import InputListComponent from "../../../inputListComponent";
+import IntComponent from "../../../intComponent";
+import KeypairListComponent from "../../../keypairListComponent";
+import PromptAreaComponent from "../../../promptComponent";
+import TextAreaComponent from "../../../textAreaComponent";
+import ToggleShadComponent from "../../../toggleShadComponent";
+import useFlowStore from "../../../../stores/flowStore";
+import {
+  convertObjToArray,
+  convertValuesToNumbers,
+  hasDuplicateKeys,
+  scapedJSONStringfy,
+} from "../../../../utils/reactflowUtils";
+import { classNames } from "../../../../utils/utils";
+
+export default function TableNodeCellRender({
+  node: { data },
+  value: {
+    value,
+    nodeClass,
+    handleOnNewValue: handleOnNewValueNode,
+    handleOnChangeDb,
+  },
+}: CustomCellRendererProps) {
+  const handleOnNewValue = (newValue: any, name: string) => {
+    handleOnNewValueNode(newValue, name);
+    setTemplateData((old) => {
+      let newData = cloneDeep(old);
+      newData.value = newValue;
+      return newData;
+    });
+    setTemplateValue(newValue);
+  };
+
+  const [templateValue, setTemplateValue] = useState(value);
+  const [templateData, setTemplateData] = useState(data);
+
+  const [errorDuplicateKey, setErrorDuplicateKey] = useState(false);
+  const edges = useFlowStore((state) => state.edges);
+
+  const id = {
+    inputTypes: templateData.input_types,
+    type: templateData.type,
+    id: nodeClass.id,
+    fieldName: templateData.key,
+  };
+  const disabled =
+    edges.some(
+      (edge) =>
+        edge.targetHandle ===
+        scapedJSONStringfy(
+          templateData.proxy
+            ? {
+                ...id,
+                proxy: templateData.proxy,
+              }
+            : id,
+        ),
+    ) ?? false;
+  function getCellType() {
+    switch (templateData.type) {
+      case "str":
+        if (!templateData.options) {
+          return templateData?.list ? (
+            <InputListComponent
+              componentName={templateData.key ?? undefined}
+              editNode={true}
+              disabled={disabled}
+              value={
+                !templateValue || templateValue === "" ? [""] : templateValue
+              }
+              onChange={(value: string[]) => {
+                handleOnNewValue(value, templateData.key);
+              }}
+            />
+          ) : templateData.multiline ? (
+            <TextAreaComponent
+              id={"textarea-edit-" + templateData.name}
+              data-testid={"textarea-edit-" + templateData.name}
+              disabled={disabled}
+              editNode={true}
+              value={templateValue ?? ""}
+              onChange={(value: string | string[]) => {
+                handleOnNewValue(value, templateData.key);
+              }}
+            />
+          ) : (
+            <InputGlobalComponent
+              disabled={disabled}
+              editNode={true}
+              onChange={(value) => handleOnNewValue(value, templateData.key)}
+              setDb={(value) => {
+                handleOnChangeDb(value, templateData.key);
+              }}
+              name={templateData.key}
+              data={templateData}
+            />
+          );
+        } else {
+          return (
+            <Dropdown
+              editNode={true}
+              options={templateData.options}
+              onSelect={(value) => handleOnNewValue(value, templateData.key)}
+              value={templateValue ?? "Choose an option"}
+              id={"dropdown-edit-" + templateData.name}
+            />
+          );
+        }
+
+      case "NestedDict":
+        return (
+          <DictComponent
+            disabled={disabled}
+            editNode={true}
+            value={templateValue.toString() === "{}" ? {} : templateValue}
+            onChange={(newValue) => {
+              handleOnNewValue(newValue, templateData.key);
+            }}
+            id="editnode-div-dict-input"
+          />
+        );
+
+      case "dict":
+        return (
+          <div
+            className={classNames(
+              "max-h-48 w-full overflow-auto custom-scroll",
+              templateValue?.length > 1 ? "my-3" : "",
+            )}
+          >
+            <KeypairListComponent
+              disabled={disabled}
+              editNode={true}
+              value={
+                templateValue?.length === 0 || !templateValue
+                  ? [{ "": "" }]
+                  : convertObjToArray(templateValue, templateData.type)
+              }
+              duplicateKey={errorDuplicateKey}
+              onChange={(newValue) => {
+                const valueToNumbers = convertValuesToNumbers(newValue);
+                setErrorDuplicateKey(hasDuplicateKeys(valueToNumbers));
+                handleOnNewValue(valueToNumbers, templateData.key);
+              }}
+              isList={templateData.list ?? false}
+            />
+          </div>
+        );
+
+      case "bool":
+        return (
+          <ToggleShadComponent
+            id={"toggle-edit-" + templateData.name}
+            disabled={disabled}
+            enabled={templateValue}
+            setEnabled={(isEnabled) => {
+              handleOnNewValue(isEnabled, templateData.key);
+            }}
+            size="small"
+            editNode={true}
+          />
+        );
+
+      case "float":
+        return (
+          <FloatComponent
+            disabled={disabled}
+            editNode={true}
+            rangeSpec={templateData.rangeSpec}
+            value={templateValue ?? ""}
+            onChange={(value) => {
+              handleOnNewValue(value, templateData.key);
+            }}
+          />
+        );
+      case "int":
+        return (
+          <IntComponent
+            rangeSpec={templateData.rangeSpec}
+            id={"edit-int-input-" + templateData.name}
+            disabled={disabled}
+            editNode={true}
+            value={templateValue ?? ""}
+            onChange={(value) => {
+              handleOnNewValue(value, templateData.key);
+            }}
+          />
+        );
+
+      case "file":
+        return (
+          <InputFileComponent
+            editNode={true}
+            disabled={disabled}
+            value={templateValue ?? ""}
+            onChange={(value: string | string[]) => {
+              handleOnNewValue(value, templateData.key);
+            }}
+            fileTypes={templateData.fileTypes}
+            onFileChange={(filePath: string) => {
+              templateData.file_path = filePath;
+            }}
+          />
+        );
+
+      case "prompt":
+        return (
+          <PromptAreaComponent
+            readonly={nodeClass.flow ? true : false}
+            field_name={templateData.key}
+            editNode={true}
+            disabled={disabled}
+            nodeClass={nodeClass}
+            setNodeClass={(value) => {
+              nodeClass = value;
+            }}
+            value={templateValue ?? ""}
+            onChange={(value: string | string[]) => {
+              handleOnNewValue(value, templateData.key);
+            }}
+            id={"prompt-area-edit-" + templateData.name}
+            data-testid={"modal-prompt-input-" + templateData.name}
+          />
+        );
+
+      case "code":
+        return (
+          <CodeAreaComponent
+            readonly={nodeClass.flow && templateData.dynamic ? true : false}
+            dynamic={templateData.dynamic ?? false}
+            setNodeClass={(value) => {
+              nodeClass = value;
+            }}
+            nodeClass={nodeClass}
+            disabled={disabled}
+            editNode={true}
+            value={templateValue ?? ""}
+            onChange={(value: string | string[]) => {
+              handleOnNewValue(value, templateData.key);
+            }}
+            id={"code-area-edit" + templateData.name}
+          />
+        );
+      case "Any":
+        return <>-</>;
+      default:
+        return String(templateValue);
+    }
+  }
+
+  return (
+    <div className="group flex h-full w-[300px] items-center justify-center py-2.5">
+      {getCellType()}
+    </div>
+  );
+}
diff --git a/src/frontend/src/components/tableComponent/components/tableToggleCellRender/index.tsx b/src/frontend/src/components/tableComponent/components/tableToggleCellRender/index.tsx
new file mode 100644
index 000000000..5fcf1b875
--- /dev/null
+++ b/src/frontend/src/components/tableComponent/components/tableToggleCellRender/index.tsx
@@ -0,0 +1,24 @@
+import { CustomCellRendererProps } from "ag-grid-react";
+import { useState } from "react";
+import ToggleShadComponent from "../../../toggleShadComponent";
+
+export default function TableToggleCellRender({
+  value: { name, enabled, setEnabled },
+}: CustomCellRendererProps) {
+  const [value, setValue] = useState(enabled);
+
+  return (
+    <div className="flex h-full items-center">
+      <ToggleShadComponent
+        id={"show" + name}
+        enabled={value}
+        setEnabled={(e) => {
+          setValue(e);
+          setEnabled(e);
+        }}
+        size="small"
+        editNode={true}
+      />
+    </div>
+  );
+}
diff --git a/src/frontend/src/components/tableComponent/components/tableTooltipRender/index.tsx b/src/frontend/src/components/tableComponent/components/tableTooltipRender/index.tsx
new file mode 100644
index 000000000..d1644d623
--- /dev/null
+++ b/src/frontend/src/components/tableComponent/components/tableTooltipRender/index.tsx
@@ -0,0 +1,9 @@
+import { CustomTooltipProps } from "ag-grid-react";
+
+export default function TableTooltipRender({ value }: CustomTooltipProps) {
+  return (
+    <div className="z-45 overflow-y-auto rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-50 data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1">
+      {value}
+    </div>
+  );
+}
diff --git a/src/frontend/src/components/tableComponent/index.tsx b/src/frontend/src/components/tableComponent/index.tsx
index 466194173..17301e721 100644
--- a/src/frontend/src/components/tableComponent/index.tsx
+++ b/src/frontend/src/components/tableComponent/index.tsx
@@ -1,7 +1,7 @@
 import "ag-grid-community/styles/ag-grid.css"; // Mandatory CSS required by the grid
 import "ag-grid-community/styles/ag-theme-quartz.css"; // Optional Theme applied to the grid
 import { AgGridReact, AgGridReactProps } from "ag-grid-react";
-import { ElementRef, forwardRef, useEffect, useRef } from "react";
+import { ElementRef, forwardRef, useRef } from "react";
 import {
   DEFAULT_TABLE_ALERT_MSG,
   DEFAULT_TABLE_ALERT_TITLE,
@@ -11,10 +11,8 @@ import "../../style/ag-theme-shadcn.css"; // Custom CSS applied to the grid
 import { cn, toTitleCase } from "../../utils/utils";
 import ForwardedIconComponent from "../genericIconComponent";
 import { Alert, AlertDescription, AlertTitle } from "../ui/alert";
-import { Toggle } from "../ui/toggle";
-import ShadTooltip from "../shadTooltipComponent";
-import resetGrid from "./utils/reset-grid-columns";
 import ResetColumns from "./components/ResetColumns";
+import resetGrid from "./utils/reset-grid-columns";
 
 interface TableComponentProps extends AgGridReactProps {
   columnDefs: NonNullable<AgGridReactProps["columnDefs"]>;
@@ -34,7 +32,7 @@ const TableComponent = forwardRef<
       alertDescription = DEFAULT_TABLE_ALERT_MSG,
       ...props
     },
-    ref,
+    ref
   ) => {
     let colDef = props.columnDefs.map((col, index) => {
       let newCol = {
@@ -91,7 +89,7 @@ const TableComponent = forwardRef<
 
     const onColumnMoved = (params) => {
       const updatedColumnDefs = makeLastColumnNonResizable(
-        params.columnApi.getAllGridColumns().map((col) => col.getColDef()),
+        params.columnApi.getAllGridColumns().map((col) => col.getColDef())
       );
       params.api.setColumnDefs(updatedColumnDefs);
       if (props.onColumnMoved) props.onColumnMoved(params);
@@ -116,7 +114,7 @@ const TableComponent = forwardRef<
         className={cn(
           dark ? "ag-theme-quartz-dark" : "ag-theme-quartz",
           "ag-theme-shadcn flex h-full flex-col",
-          "relative",
+          "relative"
         )} // applying the grid theme
       >
         <AgGridReact
@@ -126,9 +124,11 @@ const TableComponent = forwardRef<
             minWidth: 100,
             autoHeight: true,
           }}
-          tooltipInteraction={true}
           columnDefs={colDef}
           ref={realRef}
+          getRowId={(params) => {
+            return params.data.id;
+          }}
           pagination={true}
           onGridReady={onGridReady}
           onColumnMoved={onColumnMoved}
@@ -136,7 +136,7 @@ const TableComponent = forwardRef<
         <ResetColumns resetGrid={() => resetGrid(realRef, initialColumnDefs)} />
       </div>
     );
-  },
+  }
 );
 
 export default TableComponent;
diff --git a/src/frontend/src/components/toggleShadComponent/index.tsx b/src/frontend/src/components/toggleShadComponent/index.tsx
index ef1dc0d33..e76518f03 100644
--- a/src/frontend/src/components/toggleShadComponent/index.tsx
+++ b/src/frontend/src/components/toggleShadComponent/index.tsx
@@ -29,20 +29,18 @@ export default function ToggleShadComponent({
   }
 
   return (
-    <div className={disabled ? "pointer-events-none cursor-not-allowed " : ""}>
-      <Switch
-        id={id}
-        data-testid={id}
-        style={{
-          transform: `scaleX(${scaleX}) scaleY(${scaleY})`,
-        }}
-        disabled={disabled}
-        className=""
-        checked={enabled}
-        onCheckedChange={(isEnabled: boolean) => {
-          setEnabled(isEnabled);
-        }}
-      ></Switch>
-    </div>
+    <Switch
+      id={id}
+      data-testid={id}
+      style={{
+        transform: `scaleX(${scaleX}) scaleY(${scaleY})`,
+      }}
+      disabled={disabled}
+      className=""
+      checked={enabled}
+      onCheckedChange={(isEnabled: boolean) => {
+        setEnabled(isEnabled);
+      }}
+    ></Switch>
   );
 }
diff --git a/src/frontend/src/components/ui/accordion.tsx b/src/frontend/src/components/ui/accordion.tsx
index 39578095b..403b07996 100644
--- a/src/frontend/src/components/ui/accordion.tsx
+++ b/src/frontend/src/components/ui/accordion.tsx
@@ -34,7 +34,7 @@ const AccordionTrigger = React.forwardRef<
       <div
         className={cn(
           "flex flex-1 cursor-pointer items-center justify-between py-4 text-sm font-medium transition-all [&[data-state=open]>svg]:rotate-180",
-          className,
+          className
         )}
       >
         {children}
@@ -46,7 +46,7 @@ const AccordionTrigger = React.forwardRef<
           <ChevronDownIcon
             className={cn(
               "h-4 w-4 font-bold transition-transform duration-200",
-              disabled ? "text-muted-foreground" : "text-primary",
+              disabled ? "text-muted-foreground" : "text-primary"
             )}
           />
         </ShadTooltip>
@@ -64,7 +64,7 @@ const AccordionContent = React.forwardRef<
     ref={ref}
     className={cn(
       "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm",
-      className,
+      className
     )}
     {...props}
   >
diff --git a/src/frontend/src/components/ui/button.tsx b/src/frontend/src/components/ui/button.tsx
index cbcadf2c3..150172a14 100644
--- a/src/frontend/src/components/ui/button.tsx
+++ b/src/frontend/src/components/ui/button.tsx
@@ -35,7 +35,7 @@ const buttonVariants = cva(
       variant: "default",
       size: "default",
     },
-  },
+  }
 );
 
 export interface ButtonProps
@@ -59,12 +59,13 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       variant,
       size,
       loading,
+      type,
       disabled,
       asChild = false,
       children,
       ...props
     },
-    ref,
+    ref
   ) => {
     const Comp = asChild ? Slot : "button";
     let newChildren = children;
@@ -76,6 +77,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         <Comp
           className={cn(buttonVariants({ variant, size, className }))}
           disabled={loading || disabled}
+          {...(asChild ? {} : { type: type || "button" })}
           ref={ref}
           {...props}
         >
@@ -95,7 +97,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         </Comp>
       </>
     );
-  },
+  }
 );
 Button.displayName = "Button";
 
diff --git a/src/frontend/src/components/ui/card.tsx b/src/frontend/src/components/ui/card.tsx
index a558fb645..d986c5530 100644
--- a/src/frontend/src/components/ui/card.tsx
+++ b/src/frontend/src/components/ui/card.tsx
@@ -9,7 +9,7 @@ const Card = React.forwardRef<
     ref={ref}
     className={cn(
       "flex flex-col justify-between rounded-lg border bg-muted text-card-foreground shadow-sm transition-all",
-      className,
+      className
     )}
     {...props}
   />
@@ -36,7 +36,7 @@ const CardTitle = React.forwardRef<
     ref={ref}
     className={cn(
       "text-base font-semibold leading-tight tracking-tight",
-      className,
+      className
     )}
     {...props}
   />
diff --git a/src/frontend/src/components/ui/refreshButton.tsx b/src/frontend/src/components/ui/refreshButton.tsx
index b039772d8..a1bdc18e6 100644
--- a/src/frontend/src/components/ui/refreshButton.tsx
+++ b/src/frontend/src/components/ui/refreshButton.tsx
@@ -31,11 +31,7 @@ function RefreshButton({
 
   // icon class name should take into account the disabled state and the loading state
   const disabledIconTextClass = disabled ? "text-muted-foreground" : "";
-  const iconClassName = cn(
-    "h-4 w-4",
-    isLoading ? "animate-spin" : "animate-wiggle",
-    disabledIconTextClass
-  );
+  const iconClassName = cn("h-4 w-4 animate-wiggle", disabledIconTextClass);
 
   return (
     <Button
@@ -44,10 +40,11 @@ function RefreshButton({
       className={classNames}
       onClick={handleClick}
       id={id}
+      loading={isLoading}
     >
       {button_text && <span className="mr-1">{button_text}</span>}
       <IconComponent
-        name={isLoading ? "Loader2" : "RefreshCcw"}
+        name={"RefreshCcw"}
         className={iconClassName}
         id={id + "-icon"}
       />
diff --git a/src/frontend/src/components/ui/toggle.tsx b/src/frontend/src/components/ui/toggle.tsx
index 251103615..08ebb1380 100644
--- a/src/frontend/src/components/ui/toggle.tsx
+++ b/src/frontend/src/components/ui/toggle.tsx
@@ -1,8 +1,8 @@
 "use client";
 
-import * as React from "react";
 import * as TogglePrimitive from "@radix-ui/react-toggle";
 import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
 
 import { cn } from "../../utils/utils";
 
@@ -25,7 +25,7 @@ const toggleVariants = cva(
       variant: "default",
       size: "default",
     },
-  },
+  }
 );
 
 const Toggle = React.forwardRef<
diff --git a/src/frontend/src/components/ui/tooltip.tsx b/src/frontend/src/components/ui/tooltip.tsx
index 3ee8b9c7a..7f81bc3bd 100644
--- a/src/frontend/src/components/ui/tooltip.tsx
+++ b/src/frontend/src/components/ui/tooltip.tsx
@@ -20,7 +20,7 @@ const TooltipContent = React.forwardRef<
       sideOffset={sideOffset}
       className={cn(
         "z-45 overflow-y-auto rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-50 data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1",
-        className,
+        className
       )}
       {...props}
     />
@@ -37,7 +37,7 @@ const TooltipContentWithoutPortal = React.forwardRef<
     sideOffset={sideOffset}
     className={cn(
       "z-45 overflow-y-auto rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-50 data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1",
-      className,
+      className
     )}
     {...props}
   />
diff --git a/src/frontend/src/constants/alerts_constants.tsx b/src/frontend/src/constants/alerts_constants.tsx
index c3e3ba946..ebc7543d5 100644
--- a/src/frontend/src/constants/alerts_constants.tsx
+++ b/src/frontend/src/constants/alerts_constants.tsx
@@ -23,6 +23,7 @@ export const USER_EDIT_ERROR_ALERT = "Error on edit user";
 export const USER_ADD_ERROR_ALERT = "Error when adding new user";
 export const SIGNIN_ERROR_ALERT = "Error signing in";
 export const DEL_KEY_ERROR_ALERT = "Error on delete key";
+export const DEL_KEY_ERROR_ALERT_PLURAL = "Error on delete keys";
 export const UPLOAD_ERROR_ALERT = "Error uploading file";
 export const WRONG_FILE_ERROR_ALERT = "Invalid file type";
 export const UPLOAD_ALERT_LIST = "Please upload a JSON file";
@@ -54,6 +55,7 @@ export const USER_DEL_SUCCESS_ALERT = "Success! User deleted!";
 export const USER_EDIT_SUCCESS_ALERT = "Success! User edited!";
 export const USER_ADD_SUCCESS_ALERT = "Success! New user added!";
 export const DEL_KEY_SUCCESS_ALERT = "Success! Key deleted!";
+export const DEL_KEY_SUCCESS_ALERT_PLURAL = "Success! Keys deleted!";
 export const FLOW_BUILD_SUCCESS_ALERT = `Flow built successfully`;
 export const SAVE_SUCCESS_ALERT = "Changes saved successfully!";
 
diff --git a/src/frontend/src/constants/constants.ts b/src/frontend/src/constants/constants.ts
index 6f974beca..d9ce00554 100644
--- a/src/frontend/src/constants/constants.ts
+++ b/src/frontend/src/constants/constants.ts
@@ -613,11 +613,8 @@ export const FETCH_ERROR_DESCRIPION =
 
 export const SIGN_UP_SUCCESS = "Account created! Await admin activation. ";
 
-export const API_PAGE_PARAGRAPH_1 =
-  "Your secret API keys are listed below. Please note that we do not display your secret API keys again after you generate them.";
-
-export const API_PAGE_PARAGRAPH_2 =
-  "Do not share your API key with others, or expose it in the browser or other client-side code.";
+export const API_PAGE_PARAGRAPH =
+  "Your secret API keys are listed below. Do not share your API key with others, or expose it in the browser or other client-side code.";
 
 export const API_PAGE_USER_KEYS =
   "This user does not have any keys assigned at the moment.";
diff --git a/src/frontend/src/controllers/API/helpers/check-duplicate-requests.ts b/src/frontend/src/controllers/API/helpers/check-duplicate-requests.ts
index 79a47c7a7..6486de541 100644
--- a/src/frontend/src/controllers/API/helpers/check-duplicate-requests.ts
+++ b/src/frontend/src/controllers/API/helpers/check-duplicate-requests.ts
@@ -8,7 +8,7 @@ export function checkDuplicateRequestAndStoreRequest(config) {
   const currentTime = Date.now();
 
   const isContained = AUTHORIZED_DUPLICATE_REQUESTS.some((request) =>
-    config?.url!.includes(request),
+    config?.url!.includes(request)
   );
 
   if (
diff --git a/src/frontend/src/controllers/API/index.ts b/src/frontend/src/controllers/API/index.ts
index 3948b3923..0594567d6 100644
--- a/src/frontend/src/controllers/API/index.ts
+++ b/src/frontend/src/controllers/API/index.ts
@@ -17,6 +17,7 @@ import {
 } from "../../types/api/index";
 import { UserInputType } from "../../types/components";
 import { FlowStyleType, FlowType } from "../../types/flow";
+import { Message } from "../../types/messages";
 import { StoreComponentResponse } from "../../types/store";
 import { FlowPoolType } from "../../types/zustand/flow";
 import { extractColumnsFromRows } from "../../utils/utils";
@@ -28,7 +29,6 @@ import {
   UploadFileTypeAPI,
   errorsTypeAPI,
 } from "./../../types/api/index";
-import { Message } from "../../types/messages";
 
 /**
  * Fetches all objects from the API endpoint.
@@ -62,7 +62,7 @@ export async function sendAll(data: sendAllProps) {
 }
 
 export async function postValidateCode(
-  code: string,
+  code: string
 ): Promise<AxiosResponse<errorsTypeAPI>> {
   return await api.post(`${BASE_URL_API}validate/code`, { code });
 }
@@ -77,7 +77,7 @@ export async function postValidateCode(
 export async function postValidatePrompt(
   name: string,
   template: string,
-  frontend_node: APIClassType,
+  frontend_node: APIClassType
 ): Promise<AxiosResponse<PromptTypeAPI>> {
   return api.post(`${BASE_URL_API}validate/prompt`, {
     name,
@@ -150,7 +150,7 @@ export async function saveFlowToDatabase(newFlow: {
  * @throws Will throw an error if the update fails.
  */
 export async function updateFlowInDatabase(
-  updatedFlow: FlowType,
+  updatedFlow: FlowType
 ): Promise<FlowType> {
   try {
     const response = await api.patch(`${BASE_URL_API}flows/${updatedFlow.id}`, {
@@ -328,7 +328,7 @@ export async function getHealth() {
  *
  */
 export async function getBuildStatus(
-  flowId: string,
+  flowId: string
 ): Promise<AxiosResponse<BuildStatusTypeAPI>> {
   return await api.get(`${BASE_URL_API}build/${flowId}/status`);
 }
@@ -341,7 +341,7 @@ export async function getBuildStatus(
  *
  */
 export async function postBuildInit(
-  flow: FlowType,
+  flow: FlowType
 ): Promise<AxiosResponse<InitTypeAPI>> {
   return await api.post(`${BASE_URL_API}build/init/${flow.id}`, flow);
 }
@@ -357,7 +357,7 @@ export async function postBuildInit(
  */
 export async function uploadFile(
   file: File,
-  id: string,
+  id: string
 ): Promise<AxiosResponse<UploadFileTypeAPI>> {
   const formData = new FormData();
   formData.append("file", file);
@@ -366,7 +366,7 @@ export async function uploadFile(
 
 export async function postCustomComponent(
   code: string,
-  apiClass: APIClassType,
+  apiClass: APIClassType
 ): Promise<AxiosResponse<APIClassType>> {
   // let template = apiClass.template;
   return await api.post(`${BASE_URL_API}custom_component`, {
@@ -379,7 +379,7 @@ export async function postCustomComponentUpdate(
   code: string,
   template: APITemplateType,
   field: string,
-  field_value: any,
+  field_value: any
 ): Promise<AxiosResponse<APIClassType>> {
   return await api.post(`${BASE_URL_API}custom_component/update`, {
     code,
@@ -401,7 +401,7 @@ export async function onLogin(user: LoginType) {
         headers: {
           "Content-Type": "application/x-www-form-urlencoded",
         },
-      },
+      }
     );
 
     if (response.status === 200) {
@@ -463,11 +463,11 @@ export async function addUser(user: UserInputType): Promise<Array<Users>> {
 
 export async function getUsersPage(
   skip: number,
-  limit: number,
+  limit: number
 ): Promise<Array<Users>> {
   try {
     const res = await api.get(
-      `${BASE_URL_API}users/?skip=${skip}&limit=${limit}`,
+      `${BASE_URL_API}users/?skip=${skip}&limit=${limit}`
     );
     if (res.status === 200) {
       return res.data;
@@ -504,7 +504,7 @@ export async function resetPassword(user_id: string, user: resetPasswordType) {
   try {
     const res = await api.patch(
       `${BASE_URL_API}users/${user_id}/reset-password`,
-      user,
+      user
     );
     if (res.status === 200) {
       return res.data;
@@ -578,7 +578,7 @@ export async function saveFlowStore(
     last_tested_version?: string;
   },
   tags: string[],
-  publicFlow = false,
+  publicFlow = false
 ): Promise<FlowType> {
   try {
     const response = await api.post(`${BASE_URL_API}store/components/`, {
@@ -707,7 +707,7 @@ export async function postStoreComponents(component: Component) {
 export async function getComponent(component_id: string) {
   try {
     const res = await api.get(
-      `${BASE_URL_API}store/components/${component_id}`,
+      `${BASE_URL_API}store/components/${component_id}`
     );
     if (res.status === 200) {
       return res.data;
@@ -722,7 +722,7 @@ export async function searchComponent(
   page?: number | null,
   limit?: number | null,
   status?: string | null,
-  tags?: string[],
+  tags?: string[]
 ): Promise<StoreComponentResponse | undefined> {
   try {
     let url = `${BASE_URL_API}store/components/`;
@@ -834,7 +834,7 @@ export async function updateFlowStore(
   },
   tags: string[],
   publicFlow = false,
-  id: string,
+  id: string
 ): Promise<FlowType> {
   try {
     const response = await api.patch(`${BASE_URL_API}store/components/${id}`, {
@@ -918,7 +918,7 @@ export async function deleteGlobalVariable(id: string) {
 export async function updateGlobalVariable(
   name: string,
   value: string,
-  id: string,
+  id: string
 ) {
   try {
     const response = api.patch(`${BASE_URL_API}variables/${id}`, {
@@ -937,7 +937,7 @@ export async function getVerticesOrder(
   startNodeId?: string | null,
   stopNodeId?: string | null,
   nodes?: Node[],
-  Edges?: Edge[],
+  Edges?: Edge[]
 ): Promise<AxiosResponse<VerticesOrderTypeAPI>> {
   // nodeId is optional and is a query parameter
   // if nodeId is not provided, the API will return all vertices
@@ -957,7 +957,7 @@ export async function getVerticesOrder(
   return await api.post(
     `${BASE_URL_API}build/${flowId}/vertices`,
     data,
-    config,
+    config
   );
 }
 
@@ -965,7 +965,7 @@ export async function postBuildVertex(
   flowId: string,
   vertexId: string,
   input_value: string,
-  files?: string[],
+  files?: string[]
 ): Promise<AxiosResponse<VertexBuildTypeAPI>> {
   // input_value is optional and is a query parameter
   const data = input_value
@@ -976,7 +976,7 @@ export async function postBuildVertex(
   }
   return await api.post(
     `${BASE_URL_API}build/${flowId}/vertices/${vertexId}`,
-    data,
+    data
   );
 }
 
@@ -1000,7 +1000,7 @@ export async function getFlowPool({
 }
 
 export async function deleteFlowPool(
-  flowId: string,
+  flowId: string
 ): Promise<AxiosResponse<any>> {
   const config = {};
   config["params"] = { flow_id: flowId };
@@ -1014,7 +1014,7 @@ export async function deleteFlowPool(
  * @returns A promise that resolves to an array of AxiosResponse objects representing the delete responses.
  */
 export async function multipleDeleteFlowsComponents(
-  flowIds: string[],
+  flowIds: string[]
 ): Promise<AxiosResponse<any>[]> {
   const batches: string[][] = [];
 
@@ -1037,7 +1037,7 @@ export async function multipleDeleteFlowsComponents(
 
   // Execute all delete requests
   const responses: Promise<AxiosResponse<any>>[] = batches.map((batch) =>
-    deleteBatch(batch),
+    deleteBatch(batch)
   );
 
   // Return the responses after all requests are completed
@@ -1047,7 +1047,7 @@ export async function multipleDeleteFlowsComponents(
 export async function getTransactionTable(
   id: string,
   mode: "intersection" | "union",
-  params = {},
+  params = {}
 ): Promise<{ rows: Array<object>; columns: Array<ColDef | ColGroupDef> }> {
   const config = {};
   config["params"] = { flow_id: id };
@@ -1063,7 +1063,7 @@ export async function getMessagesTable(
   mode: "intersection" | "union",
   id?: string,
   excludedFields?: string[],
-  params = {},
+  params = {}
 ): Promise<{ rows: Array<Message>; columns: Array<ColDef | ColGroupDef> }> {
   const config = {};
   if (id) {
diff --git a/src/frontend/src/customNodes/genericNode/components/parameterComponent/index.tsx b/src/frontend/src/customNodes/genericNode/components/parameterComponent/index.tsx
index 6a07670df..f618e449c 100644
--- a/src/frontend/src/customNodes/genericNode/components/parameterComponent/index.tsx
+++ b/src/frontend/src/customNodes/genericNode/components/parameterComponent/index.tsx
@@ -98,7 +98,7 @@ export default function ParameterComponent({
     debouncedHandleUpdateValues,
     setNode,
     renderTooltips,
-    setIsLoading,
+    setIsLoading
   );
 
   const { handleNodeClass: handleNodeClassHook } = useHandleNodeClass(
@@ -107,7 +107,7 @@ export default function ParameterComponent({
     takeSnapshot,
     setNode,
     updateNodeInternals,
-    renderTooltips,
+    renderTooltips
   );
 
   const { handleRefreshButtonPress: handleRefreshButtonPressHook } =
@@ -116,7 +116,7 @@ export default function ParameterComponent({
   let disabled =
     edges.some(
       (edge) =>
-        edge.targetHandle === scapedJSONStringfy(proxy ? { ...id, proxy } : id),
+        edge.targetHandle === scapedJSONStringfy(proxy ? { ...id, proxy } : id)
     ) ?? false;
 
   const handleRefreshButtonPress = async (name, data) => {
@@ -129,12 +129,12 @@ export default function ParameterComponent({
     handleUpdateValues,
     setNode,
     renderTooltips,
-    setIsLoading,
+    setIsLoading
   );
 
   const handleOnNewValue = async (
     newValue: string | string[] | boolean | Object[],
-    skipSnapshot: boolean | undefined = false,
+    skipSnapshot: boolean | undefined = false
   ): Promise<void> => {
     handleOnNewValueHook(newValue, skipSnapshot);
   };
@@ -216,7 +216,7 @@ export default function ParameterComponent({
               className={classNames(
                 left ? "my-12 -ml-0.5 " : " my-12 -mr-0.5 ",
                 "h-3 w-3 rounded-full border-2 bg-background",
-                !showNode ? "mt-0" : "",
+                !showNode ? "mt-0" : ""
               )}
               style={{
                 borderColor: color ?? nodeColors.unknown,
@@ -334,7 +334,7 @@ export default function ParameterComponent({
                   }
                   className={classNames(
                     left ? "-ml-0.5" : "-mr-0.5",
-                    "h-3 w-3 rounded-full border-2 bg-background",
+                    "h-3 w-3 rounded-full border-2 bg-background"
                   )}
                   style={{ borderColor: color ?? nodeColors.unknown }}
                   onClick={() => setFilterEdge(groupedEdge.current)}
@@ -430,7 +430,7 @@ export default function ParameterComponent({
                       });
                     }}
                     name={name}
-                    data={data}
+                    data={data.node?.template[name]}
                   />
                 </div>
                 {data.node?.template[name]?.refresh_button && (
@@ -486,8 +486,8 @@ export default function ParameterComponent({
               data.node?.template[name]?.real_time_refresh)
           }
         >
-          <div className="mt-2 flex w-full items-center">
-            <div className="w-5/6 flex-grow">
+          <div className="mt-2 flex w-full items-center gap-2">
+            <div className="flex-1">
               <Dropdown
                 disabled={disabled}
                 isLoading={isLoading}
@@ -505,7 +505,6 @@ export default function ParameterComponent({
                   name={name}
                   data={data}
                   button_text={data.node?.template[name]?.refresh_button_text}
-                  className="extra-side-bar-buttons ml-2 mt-1"
                   handleUpdateValues={handleRefreshButtonPress}
                   id={"refresh-button-" + name}
                 />
diff --git a/src/frontend/src/customNodes/genericNode/index.tsx b/src/frontend/src/customNodes/genericNode/index.tsx
index 15ce6e184..f3129ef40 100644
--- a/src/frontend/src/customNodes/genericNode/index.tsx
+++ b/src/frontend/src/customNodes/genericNode/index.tsx
@@ -54,10 +54,10 @@ export default function GenericNode({
   const setErrorData = useAlertStore((state) => state.setErrorData);
   const isDark = useDarkStore((state) => state.dark);
   const buildStatus = useFlowStore(
-    (state) => state.flowBuildStatus[data.id]?.status,
+    (state) => state.flowBuildStatus[data.id]?.status
   );
   const lastRunTime = useFlowStore(
-    (state) => state.flowBuildStatus[data.id]?.timestamp,
+    (state) => state.flowBuildStatus[data.id]?.timestamp
   );
   const takeSnapshot = useFlowsManagerStore((state) => state.takeSnapshot);
 
@@ -65,7 +65,7 @@ export default function GenericNode({
   const [nodeName, setNodeName] = useState(data.node!.display_name);
   const [inputDescription, setInputDescription] = useState(false);
   const [nodeDescription, setNodeDescription] = useState(
-    data.node?.description!,
+    data.node?.description!
   );
   const [isOutdated, setIsOutdated] = useState(false);
   const [validationStatus, setValidationStatus] =
@@ -83,7 +83,7 @@ export default function GenericNode({
     data.node!,
     setNode,
     setIsOutdated,
-    updateNodeInternals,
+    updateNodeInternals
   );
 
   const name = nodeIconsLucide[data.type] ? data.type : types[data.type];
@@ -114,12 +114,12 @@ export default function GenericNode({
     selected: boolean,
     showNode: boolean,
     buildStatus: BuildStatus | undefined,
-    validationStatus: VertexBuildTypeAPI | null,
+    validationStatus: validationStatusType | null
   ) => {
     const specificClassFromBuildStatus = getSpecificClassFromBuildStatus(
       buildStatus,
       validationStatus,
-      isDark,
+      isDark
     );
 
     const baseBorderClass = getBaseBorderClass(selected);
@@ -128,7 +128,7 @@ export default function GenericNode({
       baseBorderClass,
       nodeSizeClass,
       "generic-node-div",
-      specificClassFromBuildStatus,
+      specificClassFromBuildStatus
     );
     return names;
   };
@@ -170,7 +170,7 @@ export default function GenericNode({
     showNode,
     isEmoji,
     nodeIconFragment,
-    checkNodeIconFragment,
+    checkNodeIconFragment
   );
 
   function countHandles(): void {
@@ -247,7 +247,7 @@ export default function GenericNode({
           selected,
           showNode,
           buildStatus,
-          validationStatus,
+          validationStatus
         )}
       >
         {data.node?.beta && showNode && (
@@ -378,7 +378,7 @@ export default function GenericNode({
                             }
                             title={getFieldTitle(
                               data.node?.template!,
-                              templateField,
+                              templateField
                             )}
                             info={data.node?.template[templateField].info}
                             name={templateField}
@@ -406,7 +406,7 @@ export default function GenericNode({
                             proxy={data.node?.template[templateField].proxy}
                             showNode={showNode}
                           />
-                        ),
+                        )
                     )}
                   <ParameterComponent
                     key={scapedJSONStringfy({
@@ -552,7 +552,7 @@ export default function GenericNode({
                       !data.node?.description) &&
                       nameEditable
                       ? "font-light italic"
-                      : "",
+                      : ""
                   )}
                   onClick={(e) => {
                     setInputDescription(true);
@@ -614,13 +614,13 @@ export default function GenericNode({
                         }
                         title={getFieldTitle(
                           data.node?.template!,
-                          templateField,
+                          templateField
                         )}
                         info={data.node?.template[templateField].info}
                         name={templateField}
                         tooltipTitle={
                           data.node?.template[templateField].input_types?.join(
-                            "\n",
+                            "\n"
                           ) ?? data.node?.template[templateField].type
                         }
                         required={data.node!.template[templateField].required}
@@ -647,7 +647,7 @@ export default function GenericNode({
               <div
                 className={classNames(
                   Object.keys(data.node!.template).length < 1 ? "hidden" : "",
-                  "flex-max-width justify-center",
+                  "flex-max-width justify-center"
                 )}
               >
                 {" "}
diff --git a/src/frontend/src/customNodes/utils/get-field-title.tsx b/src/frontend/src/customNodes/utils/get-field-title.tsx
index e448c4f01..a00829a90 100644
--- a/src/frontend/src/customNodes/utils/get-field-title.tsx
+++ b/src/frontend/src/customNodes/utils/get-field-title.tsx
@@ -2,7 +2,7 @@ import { APITemplateType } from "../../types/api";
 
 export default function getFieldTitle(
   template: APITemplateType,
-  templateField: string,
+  templateField: string
 ): string {
   return template[templateField].display_name
     ? template[templateField].display_name!
diff --git a/src/frontend/src/icons/Streamlit/SvgStreamlit.jsx b/src/frontend/src/icons/Streamlit/SvgStreamlit.jsx
new file mode 100644
index 000000000..0db3372c6
--- /dev/null
+++ b/src/frontend/src/icons/Streamlit/SvgStreamlit.jsx
@@ -0,0 +1,25 @@
+export default function SvgStreamlit(props) {
+  return (
+    <svg
+      width="301"
+      height="165"
+      viewBox="0 0 301 165"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M150.731 101.547L98.1387 73.7471L6.84674 25.4969C6.7634 25.4136 6.59674 25.4136 6.51341 25.4136C3.18007 23.8303 -0.236608 27.1636 1.0134 30.497L47.5302 149.139L47.5385 149.164C47.5885 149.281 47.6302 149.397 47.6802 149.514C49.5885 153.939 53.7552 156.672 58.2886 157.747C58.6719 157.831 58.9461 157.906 59.4064 157.998C59.8645 158.1 60.5052 158.239 61.0552 158.281C61.1469 158.289 61.2302 158.289 61.3219 158.297H61.3886C61.4552 158.306 61.5219 158.306 61.5886 158.314H61.6802C61.7386 158.322 61.8052 158.322 61.8636 158.322H61.9719C62.0386 158.331 62.1052 158.331 62.1719 158.331V158.331C121.084 164.754 180.519 164.754 239.431 158.331V158.331C240.139 158.331 240.831 158.297 241.497 158.231C241.714 158.206 241.922 158.181 242.131 158.156C242.156 158.147 242.189 158.147 242.214 158.139C242.356 158.122 242.497 158.097 242.639 158.072C242.847 158.047 243.056 158.006 243.264 157.964C243.681 157.872 243.87 157.806 244.436 157.611C245.001 157.417 245.94 157.077 246.527 156.794C247.115 156.511 247.522 156.239 248.014 155.931C248.622 155.547 249.201 155.155 249.788 154.715C250.041 154.521 250.214 154.397 250.397 154.222L250.297 154.164L150.731 101.547Z"
+        fill="#FF4B4B"
+      />
+      <path
+        d="M294.766 25.4981H294.683L203.357 73.7483L254.124 149.357L300.524 30.4981V30.3315C301.691 26.8314 298.108 23.6648 294.766 25.4981"
+        fill="#7D353B"
+      />
+      <path
+        d="M155.598 2.55572C153.264 -0.852624 148.181 -0.852624 145.931 2.55572L98.1389 73.7477L150.731 101.548L250.398 154.222C251.024 153.609 251.526 153.012 252.056 152.381C252.806 151.456 253.506 150.465 254.123 149.356L203.356 73.7477L155.598 2.55572Z"
+        fill="#BD4043"
+      />
+    </svg>
+  );
+}
diff --git a/src/frontend/src/icons/Streamlit/index.tsx b/src/frontend/src/icons/Streamlit/index.tsx
new file mode 100644
index 000000000..6b3391021
--- /dev/null
+++ b/src/frontend/src/icons/Streamlit/index.tsx
@@ -0,0 +1,8 @@
+import React, { forwardRef } from "react";
+import SvgStreamlit from "./SvgStreamlit";
+
+export const Streamlit = forwardRef<SVGSVGElement, React.PropsWithChildren<{}>>(
+  (props, ref) => {
+    return <SvgStreamlit className="icon" ref={ref} {...props} />;
+  }
+);
diff --git a/src/frontend/src/modals/BundleModal/hooks/submit-folder.tsx b/src/frontend/src/modals/BundleModal/hooks/submit-folder.tsx
index cb12ca7cb..1347a323b 100644
--- a/src/frontend/src/modals/BundleModal/hooks/submit-folder.tsx
+++ b/src/frontend/src/modals/BundleModal/hooks/submit-folder.tsx
@@ -27,7 +27,7 @@ const useFolderSubmit = (setOpen, folderToEdit) => {
             getFoldersApi(true);
             setOpen(false);
           }
-        },
+        }
       );
     } else {
       addFolder(data).then(
@@ -42,7 +42,7 @@ const useFolderSubmit = (setOpen, folderToEdit) => {
           setErrorData({
             title: `Error creating folder.`,
           });
-        },
+        }
       );
     }
   };
diff --git a/src/frontend/src/modals/IOModal/components/chatView/chatMessage/index.tsx b/src/frontend/src/modals/IOModal/components/chatView/chatMessage/index.tsx
index 3f516945c..06d1d6779 100644
--- a/src/frontend/src/modals/IOModal/components/chatView/chatMessage/index.tsx
+++ b/src/frontend/src/modals/IOModal/components/chatView/chatMessage/index.tsx
@@ -114,19 +114,19 @@ export default function ChatMessage({
       <div
         className={classNames(
           "form-modal-chat-position",
-          chat.isSend ? "" : " ",
+          chat.isSend ? "" : " "
         )}
       >
         <div
           className={classNames(
-            "mr-3 mt-1 flex w-24 flex-col items-center gap-1 overflow-hidden px-3 pb-3",
+            "mr-3 mt-1 flex w-24 flex-col items-center gap-1 overflow-hidden px-3 pb-3"
           )}
         >
           <div className="flex flex-col items-center gap-1">
             <div
               className={cn(
                 "relative flex h-8 w-8 items-center justify-center overflow-hidden rounded-md p-5 text-2xl",
-                !chat.isSend ? "bg-chat-bot-icon" : "bg-chat-user-icon",
+                !chat.isSend ? "bg-chat-bot-icon" : "bg-chat-user-icon"
               )}
             >
               <img
@@ -210,12 +210,12 @@ dark:prose-invert"
 
                                   children[0] = (children[0] as string).replace(
                                     "`▍`",
-                                    "▍",
+                                    "▍"
                                   );
                                 }
 
                                 const match = /language-(\w+)/.exec(
-                                  className || "",
+                                  className || ""
                                 );
 
                                 return !inline ? (
@@ -230,12 +230,12 @@ dark:prose-invert"
                                         language: (match && match[1]) || "",
                                         code: String(children).replace(
                                           /\n$/,
-                                          "",
+                                          ""
                                         ),
                                       },
                                     ]}
                                     activeTab={"0"}
-                                    setActiveTab={() => { }}
+                                    setActiveTab={() => {}}
                                   />
                                 ) : (
                                   <code className={className} {...props}>
@@ -248,7 +248,7 @@ dark:prose-invert"
                             {chatMessage}
                           </Markdown>
                         ),
-                      [chat.message, chatMessage],
+                      [chat.message, chatMessage]
                     )}
                   </div>
                 </div>
@@ -277,33 +277,33 @@ dark:prose-invert"
                 <span className="prose text-primary word-break-break-word dark:prose-invert">
                   {promptOpen
                     ? template?.split("\n")?.map((line, index) => {
-                      const regex = /{([^}]+)}/g;
-                      let match;
-                      let parts: Array<JSX.Element | string> = [];
-                      let lastIndex = 0;
-                      while ((match = regex.exec(line)) !== null) {
-                        // Push text up to the match
-                        if (match.index !== lastIndex) {
-                          parts.push(line.substring(lastIndex, match.index));
-                        }
-                        // Push div with matched text
-                        if (chat.message[match[1]]) {
-                          parts.push(
-                            <span className="chat-message-highlight">
-                              {chat.message[match[1]]}
-                            </span>
-                          );
-                        }
+                        const regex = /{([^}]+)}/g;
+                        let match;
+                        let parts: Array<JSX.Element | string> = [];
+                        let lastIndex = 0;
+                        while ((match = regex.exec(line)) !== null) {
+                          // Push text up to the match
+                          if (match.index !== lastIndex) {
+                            parts.push(line.substring(lastIndex, match.index));
+                          }
+                          // Push div with matched text
+                          if (chat.message[match[1]]) {
+                            parts.push(
+                              <span className="chat-message-highlight">
+                                {chat.message[match[1]]}
+                              </span>
+                            );
+                          }
 
-                        // Update last index
-                        lastIndex = regex.lastIndex;
-                      }
-                      // Push text after the last match
-                      if (lastIndex !== line.length) {
-                        parts.push(line.substring(lastIndex));
-                      }
-                      return <p>{parts}</p>;
-                    })
+                          // Update last index
+                          lastIndex = regex.lastIndex;
+                        }
+                        // Push text after the last match
+                        if (lastIndex !== line.length) {
+                          parts.push(line.substring(lastIndex));
+                        }
+                        return <p>{parts}</p>;
+                      })
                     : chatMessage}
                 </span>
               </>
diff --git a/src/frontend/src/modals/IOModal/components/chatView/index.tsx b/src/frontend/src/modals/IOModal/components/chatView/index.tsx
index bb54ac304..b49d16fff 100644
--- a/src/frontend/src/modals/IOModal/components/chatView/index.tsx
+++ b/src/frontend/src/modals/IOModal/components/chatView/index.tsx
@@ -1,11 +1,6 @@
 import { useEffect, useRef, useState } from "react";
 import IconComponent from "../../../../components/genericIconComponent";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-} from "../../../../components/ui/select";
+import { Button } from "../../../../components/ui/button";
 import {
   CHAT_FIRST_INITIAL_TEXT,
   CHAT_SECOND_INITIAL_TEXT,
@@ -67,7 +62,7 @@ export default function ChatView({
       .sort((a, b) => Date.parse(a.timestamp) - Date.parse(b.timestamp))
       //
       .filter(
-        (output) => output.data.messages && output.data.messages.length > 0,
+        (output) => output.data.messages && output.data.messages.length > 0
       )
       .map((output, index) => {
         try {
@@ -136,7 +131,7 @@ export default function ChatView({
   function updateChat(
     chat: ChatMessageType,
     message: string,
-    stream_url?: string,
+    stream_url?: string
   ) {
     // if (message === "") return;
     chat.message = message;
@@ -164,19 +159,21 @@ export default function ChatView({
     <div className="eraser-column-arrangement">
       <div className="eraser-size">
         <div className="eraser-position">
-          <button
+          <Button
             className="flex gap-1"
+            size="none"
+            variant="none"
             onClick={() => handleSelectChange("builds")}
           >
             <IconComponent
               name="Eraser"
               className={classNames(
                 "h-5 w-5 transition-all duration-100",
-                lockChat ? "animate-pulse text-primary" : "text-primary",
+                lockChat ? "animate-pulse text-primary" : "text-primary"
               )}
               aria-hidden="true"
             />
-          </button>
+          </Button>
           {/* <Select
             onValueChange={handleSelectChange}
             value=""
diff --git a/src/frontend/src/modals/IOModal/index.tsx b/src/frontend/src/modals/IOModal/index.tsx
index 0e53dbf85..186230cd2 100644
--- a/src/frontend/src/modals/IOModal/index.tsx
+++ b/src/frontend/src/modals/IOModal/index.tsx
@@ -34,25 +34,25 @@ export default function IOModal({
 }: IOModalPropsType): JSX.Element {
   const allNodes = useFlowStore((state) => state.nodes);
   const inputs = useFlowStore((state) => state.inputs).filter(
-    (input) => input.type !== "ChatInput",
+    (input) => input.type !== "ChatInput"
   );
   const chatInput = useFlowStore((state) => state.inputs).find(
-    (input) => input.type === "ChatInput",
+    (input) => input.type === "ChatInput"
   );
   const outputs = useFlowStore((state) => state.outputs).filter(
-    (output) => output.type !== "ChatOutput",
+    (output) => output.type !== "ChatOutput"
   );
   const chatOutput = useFlowStore((state) => state.outputs).find(
-    (output) => output.type === "ChatOutput",
+    (output) => output.type === "ChatOutput"
   );
   const nodes = useFlowStore((state) => state.nodes).filter(
     (node) =>
       inputs.some((input) => input.id === node.id) ||
-      outputs.some((output) => output.id === node.id),
+      outputs.some((output) => output.id === node.id)
   );
   const haveChat = chatInput || chatOutput;
   const [selectedTab, setSelectedTab] = useState(
-    inputs.length > 0 ? 1 : outputs.length > 0 ? 2 : 0,
+    inputs.length > 0 ? 1 : outputs.length > 0 ? 2 : 0
   );
 
   function startView() {
@@ -161,7 +161,7 @@ export default function IOModal({
             {selectedTab !== 0 && (
               <div
                 className={cn(
-                  "mr-6 flex h-full w-2/6 flex-shrink-0 flex-col justify-start transition-all duration-300",
+                  "mr-6 flex h-full w-2/6 flex-shrink-0 flex-col justify-start transition-all duration-300"
                 )}
               >
                 <Tabs
@@ -197,11 +197,11 @@ export default function IOModal({
                     </div>
                     {nodes
                       .filter((node) =>
-                        inputs.some((input) => input.id === node.id),
+                        inputs.some((input) => input.id === node.id)
                       )
                       .map((node, index) => {
                         const input = inputs.find(
-                          (input) => input.id === node.id,
+                          (input) => input.id === node.id
                         )!;
                         return (
                           <div
@@ -265,11 +265,11 @@ export default function IOModal({
                     </div>
                     {nodes
                       .filter((node) =>
-                        outputs.some((output) => output.id === node.id),
+                        outputs.some((output) => output.id === node.id)
                       )
                       .map((node, index) => {
                         const output = outputs.find(
-                          (output) => output.id === node.id,
+                          (output) => output.id === node.id
                         )!;
                         return (
                           <div
@@ -336,7 +336,7 @@ export default function IOModal({
                 <div
                   className={cn(
                     "flex h-full w-full flex-col items-start gap-4 pt-4",
-                    !selectedViewField ? "hidden" : "",
+                    !selectedViewField ? "hidden" : ""
                   )}
                 >
                   <div className="font-xl flex items-center justify-center gap-3 font-semibold">
@@ -355,7 +355,7 @@ export default function IOModal({
                   </div>
                   <div className="h-full w-full">
                     {inputs.some(
-                      (input) => input.id === selectedViewField.id,
+                      (input) => input.id === selectedViewField.id
                     ) ? (
                       <IOFieldView
                         type={InputOutput.INPUT}
@@ -377,7 +377,7 @@ export default function IOModal({
               <div
                 className={cn(
                   "flex h-full w-full",
-                  selectedViewField ? "hidden" : "",
+                  selectedViewField ? "hidden" : ""
                 )}
               >
                 {haveChat ? (
@@ -409,7 +409,7 @@ export default function IOModal({
                   "h-4 w-4",
                   isBuilding
                     ? "animate-spin"
-                    : "fill-current text-medium-indigo",
+                    : "fill-current text-medium-indigo"
                 )}
               />
             ),
diff --git a/src/frontend/src/modals/apiModal/utils/check-can-build-tweak-object.ts b/src/frontend/src/modals/apiModal/utils/check-can-build-tweak-object.ts
index 5a859cae8..592a812c4 100644
--- a/src/frontend/src/modals/apiModal/utils/check-can-build-tweak-object.ts
+++ b/src/frontend/src/modals/apiModal/utils/check-can-build-tweak-object.ts
@@ -6,7 +6,7 @@ export const checkCanBuildTweakObject = (element, templateField) => {
     templateField.charAt(0) !== "_" &&
     element.data.node.template[templateField].show &&
     LANGFLOW_SUPPORTED_TYPES.has(
-      element.data.node.template[templateField].type,
+      element.data.node.template[templateField].type
     ) &&
     templateField !== "code"
   );
diff --git a/src/frontend/src/modals/apiModal/utils/get-changes-types.ts b/src/frontend/src/modals/apiModal/utils/get-changes-types.ts
index e8e912ff3..7e295e358 100644
--- a/src/frontend/src/modals/apiModal/utils/get-changes-types.ts
+++ b/src/frontend/src/modals/apiModal/utils/get-changes-types.ts
@@ -3,7 +3,7 @@ import { convertArrayToObj } from "../../../utils/reactflowUtils";
 
 export const getChangesType = (
   changes: string | string[] | boolean | number | Object[] | Object,
-  template: TemplateVariableType,
+  template: TemplateVariableType
 ) => {
   if (typeof changes === "string" && template.type === "float") {
     changes = parseFloat(changes);
diff --git a/src/frontend/src/modals/apiModal/utils/get-curl-code.tsx b/src/frontend/src/modals/apiModal/utils/get-curl-code.tsx
index c17118d1a..40257d73d 100644
--- a/src/frontend/src/modals/apiModal/utils/get-curl-code.tsx
+++ b/src/frontend/src/modals/apiModal/utils/get-curl-code.tsx
@@ -8,14 +8,14 @@ export function getCurlRunCode(
   flowId: string,
   isAuth: boolean,
   tweaksBuildedObject,
-  endpointName?: string,
+  endpointName?: string
 ): string {
   const tweaksObject = tweaksBuildedObject[0];
   // show the endpoint name in the curl command if it exists
   return `curl -X POST \\
     "${window.location.protocol}//${window.location.host}/api/v1/run/${
-      endpointName || flowId
-    }?stream=false" \\
+    endpointName || flowId
+  }?stream=false" \\
     -H 'Content-Type: application/json'\\${
       !isAuth ? `\n  -H 'x-api-key: <your api key>'\\` : ""
     }
diff --git a/src/frontend/src/modals/apiModal/utils/get-nodes-with-default-value.ts b/src/frontend/src/modals/apiModal/utils/get-nodes-with-default-value.ts
index fb30a57a1..ea5887fda 100644
--- a/src/frontend/src/modals/apiModal/utils/get-nodes-with-default-value.ts
+++ b/src/frontend/src/modals/apiModal/utils/get-nodes-with-default-value.ts
@@ -13,8 +13,8 @@ export const getNodesWithDefaultValue = (flow) => {
           templateField.charAt(0) !== "_" &&
           node.data.node.template[templateField].show &&
           LANGFLOW_SUPPORTED_TYPES.has(
-            node.data.node.template[templateField].type,
-          ),
+            node.data.node.template[templateField].type
+          )
       )
       .map((n, i) => {
         arrNodesWithValues.push(node["id"]);
diff --git a/src/frontend/src/modals/apiModal/utils/get-python-code.tsx b/src/frontend/src/modals/apiModal/utils/get-python-code.tsx
index ff571b492..9fd8048f2 100644
--- a/src/frontend/src/modals/apiModal/utils/get-python-code.tsx
+++ b/src/frontend/src/modals/apiModal/utils/get-python-code.tsx
@@ -6,7 +6,7 @@
  */
 export default function getPythonCode(
   flowName: string,
-  tweaksBuildedObject,
+  tweaksBuildedObject
 ): string {
   const tweaksObject = tweaksBuildedObject[0];
 
diff --git a/src/frontend/src/modals/apiModal/utils/get-value.ts b/src/frontend/src/modals/apiModal/utils/get-value.ts
index df8e5bdde..8db7666bf 100644
--- a/src/frontend/src/modals/apiModal/utils/get-value.ts
+++ b/src/frontend/src/modals/apiModal/utils/get-value.ts
@@ -5,7 +5,7 @@ export const getValue = (
   value: string,
   node: NodeType,
   template: TemplateVariableType,
-  tweak: Object[],
+  tweak: Object[]
 ) => {
   let returnValue = value ?? "";
 
diff --git a/src/frontend/src/modals/apiModal/utils/get-widget-code.tsx b/src/frontend/src/modals/apiModal/utils/get-widget-code.tsx
index 0d3d02f91..a05dc192a 100644
--- a/src/frontend/src/modals/apiModal/utils/get-widget-code.tsx
+++ b/src/frontend/src/modals/apiModal/utils/get-widget-code.tsx
@@ -6,7 +6,7 @@
 export default function getWidgetCode(
   flowId: string,
   flowName: string,
-  isAuth: boolean,
+  isAuth: boolean
 ): string {
   return `<script src="https://cdn.jsdelivr.net/gh/langflow-ai/langflow-embedded-chat@1.0_alpha/dist/build/static/js/bundle.min.js"></script>
 
diff --git a/src/frontend/src/modals/apiModal/utils/tabs-array.tsx b/src/frontend/src/modals/apiModal/utils/tabs-array.tsx
index deed73332..adc15f932 100644
--- a/src/frontend/src/modals/apiModal/utils/tabs-array.tsx
+++ b/src/frontend/src/modals/apiModal/utils/tabs-array.tsx
@@ -1,7 +1,7 @@
 export function createTabsArray(
   codes,
   includeWebhookCurl = false,
-  includeTweaks = false,
+  includeTweaks = false
 ) {
   const tabs = [
     {
diff --git a/src/frontend/src/modals/apiModal/views/index.tsx b/src/frontend/src/modals/apiModal/views/index.tsx
index d8930dc82..5cd2e4e0a 100644
--- a/src/frontend/src/modals/apiModal/views/index.tsx
+++ b/src/frontend/src/modals/apiModal/views/index.tsx
@@ -35,7 +35,7 @@ const ApiModal = forwardRef(
       flow: FlowType;
       children: ReactNode;
     },
-    ref,
+    ref
   ) => {
     const tweak = useTweaksStore((state) => state.tweak);
     const addTweaks = useTweaksStore((state) => state.setTweak);
@@ -50,22 +50,21 @@ const ApiModal = forwardRef(
       flow?.id,
       autoLogin,
       tweak,
-      flow?.endpoint_name,
+      flow?.endpoint_name
     );
     const curl_run_code = getCurlRunCode(
       flow?.id,
       autoLogin,
       tweak,
-      flow?.endpoint_name,
+      flow?.endpoint_name
     );
     const curl_webhook_code = getCurlWebhookCode(
       flow?.id,
       autoLogin,
-      flow?.endpoint_name,
+      flow?.endpoint_name
     );
     const pythonCode = getPythonCode(flow?.name, tweak);
     const widgetCode = getWidgetCode(flow?.id, flow?.name, autoLogin);
-
     const includeWebhook = flow.webhook;
     const tweaksCode = buildTweaks(flow);
     const codesArray = [
@@ -77,7 +76,7 @@ const ApiModal = forwardRef(
       pythonCode,
     ];
     const [tabs, setTabs] = useState(
-      createTabsArray(codesArray, includeWebhook),
+      createTabsArray(codesArray, includeWebhook)
     );
 
     const canShowTweaks =
@@ -126,7 +125,7 @@ const ApiModal = forwardRef(
               buildTweakObject(
                 nodeId,
                 element.data.node.template[templateField].value,
-                element.data.node.template[templateField],
+                element.data.node.template[templateField]
               );
             }
           });
@@ -143,7 +142,7 @@ const ApiModal = forwardRef(
     async function buildTweakObject(
       tw: string,
       changes: string | string[] | boolean | number | Object[] | Object,
-      template: TemplateVariableType,
+      template: TemplateVariableType
     ) {
       changes = getChangesType(changes, template);
 
@@ -185,7 +184,7 @@ const ApiModal = forwardRef(
         flow?.id,
         autoLogin,
         cloneTweak,
-        flow?.endpoint_name,
+        flow?.endpoint_name
       );
       const pythonCode = getPythonCode(flow?.name, cloneTweak);
       const widgetCode = getWidgetCode(flow?.id, flow?.name, autoLogin);
@@ -229,7 +228,7 @@ const ApiModal = forwardRef(
         </BaseModal.Content>
       </BaseModal>
     );
-  },
+  }
 );
 
 export default ApiModal;
diff --git a/src/frontend/src/modals/baseModal/helpers/switch-case-size.ts b/src/frontend/src/modals/baseModal/helpers/switch-case-size.ts
index 35004c2ec..a0c5f0362 100644
--- a/src/frontend/src/modals/baseModal/helpers/switch-case-size.ts
+++ b/src/frontend/src/modals/baseModal/helpers/switch-case-size.ts
@@ -4,7 +4,7 @@ export const switchCaseModalSize = (size: string) => {
   switch (size) {
     case "x-small":
       minWidth = "min-w-[20vw]";
-      height = "h-full";
+      height = "";
       break;
     case "smaller":
       minWidth = "min-w-[40vw]";
@@ -12,7 +12,7 @@ export const switchCaseModalSize = (size: string) => {
       break;
     case "smaller-h-full":
       minWidth = "min-w-[40vw]";
-      height = "h-full";
+      height = "";
       break;
     case "small":
       minWidth = "min-w-[40vw]";
@@ -20,16 +20,19 @@ export const switchCaseModalSize = (size: string) => {
       break;
     case "small-h-full":
       minWidth = "min-w-[40vw]";
-      height = "h-full";
+      height = "";
       break;
     case "medium":
       minWidth = "min-w-[60vw]";
       height = "h-[60vh]";
       break;
+    case "medium-tall":
+      minWidth = "min-w-[60vw]";
+      height = "h-[90vh]";
+      break;
     case "medium-h-full":
       minWidth = "min-w-[60vw]";
-      height = "h-full";
-
+      height = "";
       break;
     case "large":
       minWidth = "min-w-[85vw]";
@@ -56,11 +59,11 @@ export const switchCaseModalSize = (size: string) => {
 
     case "large-h-full":
       minWidth = "min-w-[80vw]";
-      height = "h-full";
+      height = "";
       break;
     default:
       minWidth = "min-w-[80vw]";
-      height = "h-[80vh]";
+      height = "h-[90vh]";
       break;
   }
   return { minWidth, height };
diff --git a/src/frontend/src/modals/baseModal/index.tsx b/src/frontend/src/modals/baseModal/index.tsx
index 3ea403560..79d0a60fd 100644
--- a/src/frontend/src/modals/baseModal/index.tsx
+++ b/src/frontend/src/modals/baseModal/index.tsx
@@ -20,6 +20,7 @@ import { Button } from "../../components/ui/button";
 import { modalHeaderType } from "../../types/components";
 import { cn } from "../../utils/utils";
 import { switchCaseModalSize } from "./helpers/switch-case-size";
+import * as Form from "@radix-ui/react-form";
 
 type ContentProps = { children: ReactNode };
 type HeaderProps = { children: ReactNode; description: string };
@@ -52,10 +53,10 @@ const Trigger: React.FC<TriggerProps> = ({
   );
 };
 
-const Header: React.FC<{ children: ReactNode; description: string | null }> = ({
-  children,
-  description,
-}: modalHeaderType): JSX.Element => {
+const Header: React.FC<{
+  children: ReactNode;
+  description: string | JSX.Element | null;
+}> = ({ children, description }: modalHeaderType): JSX.Element => {
   return (
     <DialogHeader>
       <DialogTitle className="flex items-center">{children}</DialogTitle>
@@ -102,7 +103,7 @@ interface BaseModalProps {
     React.ReactElement<ContentProps>,
     React.ReactElement<HeaderProps>,
     React.ReactElement<TriggerProps>?,
-    React.ReactElement<FooterProps>?,
+    React.ReactElement<FooterProps>?
   ];
   open?: boolean;
   setOpen?: (open: boolean) => void;
@@ -111,6 +112,7 @@ interface BaseModalProps {
     | "smaller"
     | "small"
     | "medium"
+    | "medium-tall"
     | "large"
     | "three-cards"
     | "large-thin"
@@ -137,16 +139,16 @@ function BaseModal({
   onSubmit,
 }: BaseModalProps) {
   const headerChild = React.Children.toArray(children).find(
-    (child) => (child as React.ReactElement).type === Header,
+    (child) => (child as React.ReactElement).type === Header
   );
   const triggerChild = React.Children.toArray(children).find(
-    (child) => (child as React.ReactElement).type === Trigger,
+    (child) => (child as React.ReactElement).type === Trigger
   );
   const ContentChild = React.Children.toArray(children).find(
-    (child) => (child as React.ReactElement).type === Content,
+    (child) => (child as React.ReactElement).type === Content
   );
   const ContentFooter = React.Children.toArray(children).find(
-    (child) => (child as React.ReactElement).type === Footer,
+    (child) => (child as React.ReactElement).type === Footer
   );
 
   let { minWidth, height } = switchCaseModalSize(size);
@@ -180,31 +182,33 @@ function BaseModal({
       ) : (
         <Dialog open={open} onOpenChange={setOpen}>
           {triggerChild}
-          <DialogContent className={cn(minWidth, "duration-300")}>
+          <DialogContent
+            className={cn(minWidth, height, "flex flex-col duration-300")}
+          >
             <div className="truncate-doubleline word-break-break-word">
               {headerChild}
             </div>
             {onSubmit ? (
-              <form
+              <Form.Root
                 onSubmit={(event) => {
                   event.preventDefault();
                   onSubmit();
                 }}
-                className="flex flex-col gap-6"
+                className="flex flex-1 flex-col gap-6"
               >
                 <div
-                  className={`flex flex-col ${height} w-full transition-all duration-300`}
+                  className={`flex w-full flex-1 flex-col transition-all duration-300`}
                 >
                   {ContentChild}
                 </div>
                 {ContentFooter && (
                   <div className="flex flex-row-reverse">{ContentFooter}</div>
                 )}
-              </form>
+              </Form.Root>
             ) : (
               <>
                 <div
-                  className={`flex flex-col ${height} w-full transition-all duration-300`}
+                  className={`flex w-full flex-1 flex-col transition-all duration-300`}
                 >
                   {ContentChild}
                 </div>
diff --git a/src/frontend/src/modals/editNodeModal/hooks/use-column-defs.tsx b/src/frontend/src/modals/editNodeModal/hooks/use-column-defs.tsx
new file mode 100644
index 000000000..2cf57921b
--- /dev/null
+++ b/src/frontend/src/modals/editNodeModal/hooks/use-column-defs.tsx
@@ -0,0 +1,91 @@
+import { ColDef, ValueGetterParams } from "ag-grid-community";
+import { useMemo } from "react";
+import TableAutoCellRender from "../../../components/tableComponent/components/tableAutoCellRender";
+import TableNodeCellRender from "../../../components/tableComponent/components/tableNodeCellRender";
+import TableToggleCellRender from "../../../components/tableComponent/components/tableToggleCellRender";
+import TableTooltipRender from "../../../components/tableComponent/components/tableTooltipRender";
+
+const useColumnDefs = (
+  myData: any,
+  handleOnNewValue: (newValue: any, name: string) => void,
+  changeAdvanced: (n: string) => void,
+  open: boolean,
+) => {
+  const columnDefs: ColDef[] = useMemo(
+    () => [
+      {
+        headerName: "Name",
+        field: "display_name",
+        valueGetter: (params) => {
+          const templateParam = params.data;
+          return (
+            (templateParam.display_name
+              ? templateParam.display_name
+              : templateParam.name) ?? params.data.key
+          );
+        },
+        tooltipField: "display_name",
+        tooltipComponent: TableTooltipRender,
+        wrapText: true,
+        autoHeight: true,
+        flex: 1,
+        resizable: false,
+        cellClass: "no-border",
+      },
+      {
+        headerName: "Description",
+        field: "info",
+        tooltipField: "info",
+        tooltipComponent: TableTooltipRender,
+        wrapText: true,
+        autoHeight: true,
+        flex: 2,
+        resizable: false,
+        cellClass: "no-border",
+      },
+      {
+        headerName: "Value",
+        field: "value",
+        cellRenderer: TableNodeCellRender,
+        valueGetter: (params: ValueGetterParams) => {
+          return {
+            value: params.data.value,
+            nodeClass: myData.node,
+            handleOnNewValue: handleOnNewValue,
+            handleOnChangeDb: (value, key) => {
+              myData.node!.template[key].load_from_db = value;
+            },
+          };
+        },
+        minWidth: 330,
+        autoHeight: true,
+        flex: 1,
+        resizable: false,
+        cellClass: "no-border",
+      },
+      {
+        headerName: "Show",
+        field: "advanced",
+        cellRenderer: TableToggleCellRender,
+        valueGetter: (params: ValueGetterParams) => {
+          return {
+            name: params.data.name,
+            enabled: !params.data.advanced,
+            setEnabled: () => {
+              changeAdvanced(params.data.key);
+            },
+          };
+        },
+        editable: false,
+        maxWidth: 80,
+        resizable: false,
+        cellClass: "no-border",
+      },
+    ],
+    [open, myData],
+  );
+
+  return columnDefs;
+};
+
+export default useColumnDefs;
diff --git a/src/frontend/src/modals/editNodeModal/hooks/use-row-data.tsx b/src/frontend/src/modals/editNodeModal/hooks/use-row-data.tsx
new file mode 100644
index 000000000..cafd25c6d
--- /dev/null
+++ b/src/frontend/src/modals/editNodeModal/hooks/use-row-data.tsx
@@ -0,0 +1,37 @@
+import { useMemo } from "react";
+import { LANGFLOW_SUPPORTED_TYPES } from "../../../constants/constants";
+import { TemplateVariableType } from "../../../types/api";
+
+const useRowData = (myData, open) => {
+  const rowData = useMemo(() => {
+    return Object.keys(myData.node!.template)
+      .filter((key: string) => {
+        const templateParam = myData.node!.template[
+          key
+        ] as TemplateVariableType;
+        return (
+          key.charAt(0) !== "_" &&
+          templateParam.show &&
+          LANGFLOW_SUPPORTED_TYPES.has(templateParam.type) &&
+          !(
+            (key === "code" && templateParam.type === "code") ||
+            (key.includes("code") && templateParam.proxy)
+          )
+        );
+      })
+      .map((key: string) => {
+        const templateParam = myData.node!.template[
+          key
+        ] as TemplateVariableType;
+        return {
+          ...templateParam,
+          key: key,
+          id: key,
+        };
+      });
+  }, [open, myData]);
+
+  return rowData;
+};
+
+export default useRowData;
diff --git a/src/frontend/src/modals/editNodeModal/index.tsx b/src/frontend/src/modals/editNodeModal/index.tsx
index 252237ef8..2627d8eca 100644
--- a/src/frontend/src/modals/editNodeModal/index.tsx
+++ b/src/frontend/src/modals/editNodeModal/index.tsx
@@ -1,43 +1,13 @@
-import { cloneDeep } from "lodash";
-import { forwardRef, useEffect, useState } from "react";
-import CodeAreaComponent from "../../components/codeAreaComponent";
-import DictComponent from "../../components/dictComponent";
-import Dropdown from "../../components/dropdownComponent";
-import FloatComponent from "../../components/floatComponent";
+import { ColDef, GridApi } from "ag-grid-community";
+import { forwardRef, useEffect, useRef, useState } from "react";
 import IconComponent from "../../components/genericIconComponent";
-import InputFileComponent from "../../components/inputFileComponent";
-import InputGlobalComponent from "../../components/inputGlobalComponent";
-import InputListComponent from "../../components/inputListComponent";
-import IntComponent from "../../components/intComponent";
-import KeypairListComponent from "../../components/keypairListComponent";
-import PromptAreaComponent from "../../components/promptComponent";
-import ShadTooltip from "../../components/shadTooltipComponent";
-import TextAreaComponent from "../../components/textAreaComponent";
-import ToggleShadComponent from "../../components/toggleShadComponent";
+import TableComponent from "../../components/tableComponent";
 import { Badge } from "../../components/ui/badge";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "../../components/ui/table";
-import {
-  LANGFLOW_SUPPORTED_TYPES,
-  limitScrollFieldsModal,
-} from "../../constants/constants";
-import { Case } from "../../shared/components/caseComponent";
 import useFlowStore from "../../stores/flowStore";
 import { NodeDataType } from "../../types/flow";
-import {
-  convertObjToArray,
-  convertValuesToNumbers,
-  hasDuplicateKeys,
-  scapedJSONStringfy,
-} from "../../utils/reactflowUtils";
-import { classNames } from "../../utils/utils";
 import BaseModal from "../baseModal";
+import useColumnDefs from "./hooks/use-column-defs";
+import useRowData from "./hooks/use-row-data";
 
 const EditNodeModal = forwardRef(
   (
@@ -52,61 +22,51 @@ const EditNodeModal = forwardRef(
       setOpen: (open: boolean) => void;
       data: NodeDataType;
     },
-    ref,
+    ref
   ) => {
-    const nodes = useFlowStore((state) => state.nodes);
+    const myData = useRef(data);
 
-    const dataFromStore = nodes.find((node) => node.id === node.id)?.data;
-
-    const [myData, setMyData] = useState(dataFromStore ?? data);
-
-    const edges = useFlowStore((state) => state.edges);
     const setNode = useFlowStore((state) => state.setNode);
 
     function changeAdvanced(n) {
-      setMyData((old) => {
-        let newData = cloneDeep(old);
-        newData.node!.template[n].advanced =
-          !newData.node!.template[n].advanced;
-        return newData;
-      });
+      myData.current.node!.template[n].advanced =
+        !myData.current.node!.template[n]?.advanced;
     }
 
     const handleOnNewValue = (newValue: any, name) => {
-      setMyData((old) => {
-        let newData = cloneDeep(old);
-        newData.node!.template[name].value = newValue;
-        return newData;
-      });
+      myData.current.node!.template[name].value = newValue;
     };
 
+    const rowData = useRowData(data, open);
+
+    const columnDefs: ColDef[] = useColumnDefs(
+      data,
+      handleOnNewValue,
+      changeAdvanced,
+      open
+    );
+
+    const [gridApi, setGridApi] = useState<GridApi | null>(null);
+
     useEffect(() => {
-      if (open) {
-        setMyData(data); // reset data to what it is on node when opening modal
+      if (gridApi && open) {
+        myData.current = data;
+        gridApi.refreshCells();
       }
-    }, [open]);
-
-    const [errorDuplicateKey, setErrorDuplicateKey] = useState(false);
-
-    const type = (templateParam) => {
-      return myData.node?.template[templateParam].type;
-    };
+    }, [gridApi, open]);
 
     return (
       <BaseModal
         key={data.id}
-        size="large-h-full"
+        size="medium-tall"
         open={open}
         setOpen={setOpen}
-        onChangeOpenModal={(open) => {
-          setMyData(data);
-        }}
         onSubmit={() => {
           setNode(data.id, (old) => ({
             ...old,
             data: {
               ...old.data,
-              node: myData.node,
+              node: myData.current.node,
             },
           }));
           setOpen(false);
@@ -115,526 +75,30 @@ const EditNodeModal = forwardRef(
         <BaseModal.Trigger>
           <></>
         </BaseModal.Trigger>
-        <BaseModal.Header description={myData.node?.description!}>
-          <span className="pr-2">{myData.type}</span>
-          <Badge variant="secondary">ID: {myData.id}</Badge>
+        <BaseModal.Header description={data.node?.description!}>
+          <span className="pr-2">{data.type}</span>
+          <Badge variant="secondary">ID: {data.id}</Badge>
         </BaseModal.Header>
         <BaseModal.Content>
-          <div className="flex pb-2">
-            <IconComponent
-              name="Variable"
-              className="edit-node-modal-variable "
-            />
-            <span className="edit-node-modal-span">Parameters</span>
-          </div>
+          <div className="flex h-full flex-col">
+            <div className="flex pb-2">
+              <IconComponent
+                name="Variable"
+                className="edit-node-modal-variable "
+              />
+              <span className="edit-node-modal-span">Parameters</span>
+            </div>
 
-          <div className="edit-node-modal-arrangement">
-            <div
-              className={classNames(
-                "edit-node-modal-box",
-                nodeLength > limitScrollFieldsModal
-                  ? "overflow-scroll overflow-x-hidden custom-scroll"
-                  : "",
-              )}
-            >
+            <div className="h-full">
               {nodeLength > 0 && (
-                <div className="edit-node-modal-table">
-                  <Table className="table-fixed bg-muted outline-1">
-                    <TableHeader className="edit-node-modal-table-header">
-                      <TableRow className="">
-                        <TableHead className="h-7 text-center">PARAM</TableHead>
-                        <TableHead className="h-7 text-center">DESC</TableHead>
-                        <TableHead className="h-7 p-0 text-center">
-                          VALUE
-                        </TableHead>
-                        <TableHead className="h-7 text-center">SHOW</TableHead>
-                      </TableRow>
-                    </TableHeader>
-                    <TableBody className="p-0">
-                      {Object.keys(myData.node!.template)
-                        .filter(
-                          (templateParam) =>
-                            templateParam.charAt(0) !== "_" &&
-                            myData.node?.template[templateParam].show &&
-                            LANGFLOW_SUPPORTED_TYPES.has(
-                              myData.node!.template[templateParam].type,
-                            ),
-                        )
-                        .map((templateParam, index) => {
-                          let id = {
-                            inputTypes:
-                              myData.node!.template[templateParam].input_types,
-                            type: myData.node!.template[templateParam].type,
-                            id: myData.id,
-                            fieldName: templateParam,
-                          };
-                          let disabled =
-                            edges.some(
-                              (edge) =>
-                                edge.targetHandle ===
-                                scapedJSONStringfy(
-                                  myData.node!.template[templateParam].proxy
-                                    ? {
-                                        ...id,
-                                        proxy:
-                                          myData.node?.template[templateParam]
-                                            .proxy,
-                                      }
-                                    : id,
-                                ),
-                            ) ?? false;
-                          return (
-                            <TableRow
-                              key={index}
-                              className={
-                                "h-10 " +
-                                ((templateParam === "code" &&
-                                  type(templateParam) === "code") ||
-                                (templateParam.includes("code") &&
-                                  myData.node?.template[templateParam].proxy)
-                                  ? " hidden "
-                                  : "")
-                              }
-                            >
-                              <TableCell className="truncate p-0 text-center text-sm text-foreground sm:px-3">
-                                <ShadTooltip
-                                  styleClasses="z-50"
-                                  content={
-                                    myData.node?.template[templateParam].proxy
-                                      ? myData.node?.template[templateParam]
-                                          .proxy?.id
-                                      : myData.node?.template[templateParam]
-                                            .display_name
-                                        ? myData.node!.template[templateParam]
-                                            .display_name
-                                        : myData.node?.template[templateParam]
-                                            .name
-                                  }
-                                >
-                                  <span>
-                                    {myData.node?.template[templateParam]
-                                      .display_name
-                                      ? myData.node!.template[templateParam]
-                                          .display_name
-                                      : myData.node?.template[templateParam]
-                                          .name}
-                                  </span>
-                                </ShadTooltip>
-                              </TableCell>
-                              <TableCell className="truncate p-0 text-center text-sm text-foreground sm:px-3">
-                                <ShadTooltip
-                                  styleClasses="z-50"
-                                  content={
-                                    data.node?.template[templateParam]?.info ??
-                                    null
-                                  }
-                                >
-                                  <span>
-                                    {data.node?.template[templateParam]?.info ??
-                                      ""}
-                                  </span>
-                                </ShadTooltip>
-                              </TableCell>
-                              <TableCell className="w-[300px] p-0 text-center text-xs text-foreground ">
-                                <Case
-                                  condition={
-                                    type(templateParam) === "str" &&
-                                    !myData.node!.template[templateParam]
-                                      .options
-                                  }
-                                >
-                                  <div className="mx-auto">
-                                    {myData.node!.template[templateParam]
-                                      ?.list ? (
-                                      <InputListComponent
-                                        componentName={templateParam}
-                                        editNode={true}
-                                        disabled={disabled}
-                                        value={
-                                          !myData.node!.template[templateParam]
-                                            .value ||
-                                          myData.node!.template[templateParam]
-                                            .value === ""
-                                            ? [""]
-                                            : myData.node!.template[
-                                                templateParam
-                                              ].value
-                                        }
-                                        onChange={(value: string[]) => {
-                                          handleOnNewValue(
-                                            value,
-                                            templateParam,
-                                          );
-                                        }}
-                                      />
-                                    ) : myData.node!.template[templateParam]
-                                        .multiline ? (
-                                      <TextAreaComponent
-                                        id={
-                                          "textarea-edit-" +
-                                          myData.node!.template[templateParam]
-                                            .name
-                                        }
-                                        data-testid={
-                                          "textarea-edit-" +
-                                          myData.node!.template[templateParam]
-                                            .name
-                                        }
-                                        disabled={disabled}
-                                        editNode={true}
-                                        value={
-                                          myData.node!.template[templateParam]
-                                            .value ?? ""
-                                        }
-                                        onChange={(
-                                          value: string | string[],
-                                        ) => {
-                                          handleOnNewValue(
-                                            value,
-                                            templateParam,
-                                          );
-                                        }}
-                                      />
-                                    ) : (
-                                      <InputGlobalComponent
-                                        disabled={disabled}
-                                        editNode={true}
-                                        onChange={(value) =>
-                                          handleOnNewValue(value, templateParam)
-                                        }
-                                        setDb={(value) => {
-                                          setMyData((oldData) => {
-                                            let newData = cloneDeep(oldData);
-                                            newData.node!.template[
-                                              templateParam
-                                            ].load_from_db = value;
-                                            return newData;
-                                          });
-                                        }}
-                                        name={templateParam}
-                                        data={myData}
-                                      />
-                                    )}
-                                  </div>
-                                </Case>
-
-                                <Case
-                                  condition={
-                                    type(templateParam) === "NestedDict"
-                                  }
-                                >
-                                  <div className="  w-full">
-                                    <DictComponent
-                                      disabled={disabled}
-                                      editNode={true}
-                                      value={
-                                        myData.node!.template[
-                                          templateParam
-                                        ]?.value?.toString() === "{}"
-                                          ? {}
-                                          : myData.node!.template[templateParam]
-                                              .value
-                                      }
-                                      onChange={(newValue) => {
-                                        myData.node!.template[
-                                          templateParam
-                                        ].value = newValue;
-                                        handleOnNewValue(
-                                          newValue,
-                                          templateParam,
-                                        );
-                                      }}
-                                      id="editnode-div-dict-input"
-                                    />
-                                  </div>
-                                </Case>
-
-                                <Case
-                                  condition={type(templateParam) === "dict"}
-                                >
-                                  <div
-                                    className={classNames(
-                                      "max-h-48 w-full overflow-auto custom-scroll",
-                                      myData.node!.template[templateParam].value
-                                        ?.length > 1
-                                        ? "my-3"
-                                        : "",
-                                    )}
-                                  >
-                                    <KeypairListComponent
-                                      disabled={disabled}
-                                      editNode={true}
-                                      value={
-                                        myData.node!.template[templateParam]
-                                          .value?.length === 0 ||
-                                        !myData.node!.template[templateParam]
-                                          .value
-                                          ? [{ "": "" }]
-                                          : convertObjToArray(
-                                              myData.node!.template[
-                                                templateParam
-                                              ].value,
-                                              type(templateParam)!,
-                                            )
-                                      }
-                                      duplicateKey={errorDuplicateKey}
-                                      onChange={(newValue) => {
-                                        const valueToNumbers =
-                                          convertValuesToNumbers(newValue);
-                                        myData.node!.template[
-                                          templateParam
-                                        ].value = valueToNumbers;
-                                        setErrorDuplicateKey(
-                                          hasDuplicateKeys(valueToNumbers),
-                                        );
-                                        handleOnNewValue(
-                                          valueToNumbers,
-                                          templateParam,
-                                        );
-                                      }}
-                                      isList={
-                                        data.node?.template[templateParam]
-                                          ?.list ?? false
-                                      }
-                                    />
-                                  </div>
-                                </Case>
-
-                                <Case
-                                  condition={type(templateParam) === "bool"}
-                                >
-                                  <div className="ml-auto">
-                                    {" "}
-                                    <ToggleShadComponent
-                                      id={
-                                        "toggle-edit-" +
-                                        myData.node!.template[templateParam]
-                                          .name
-                                      }
-                                      disabled={disabled}
-                                      enabled={
-                                        myData.node!.template[templateParam]
-                                          .value
-                                      }
-                                      setEnabled={(isEnabled) => {
-                                        handleOnNewValue(
-                                          isEnabled,
-                                          templateParam,
-                                        );
-                                      }}
-                                      size="small"
-                                      editNode={true}
-                                    />
-                                  </div>
-                                </Case>
-
-                                <Case
-                                  condition={type(templateParam) === "float"}
-                                >
-                                  <div className="mx-auto">
-                                    <FloatComponent
-                                      disabled={disabled}
-                                      editNode={true}
-                                      rangeSpec={
-                                        myData.node!.template[templateParam]
-                                          .rangeSpec
-                                      }
-                                      value={
-                                        myData.node!.template[templateParam]
-                                          .value ?? ""
-                                      }
-                                      onChange={(value) => {
-                                        handleOnNewValue(value, templateParam);
-                                      }}
-                                    />
-                                  </div>
-                                </Case>
-
-                                <Case
-                                  condition={
-                                    type(templateParam) === "str" &&
-                                    myData.node!.template[templateParam].options
-                                  }
-                                >
-                                  <div className="mx-auto">
-                                    <Dropdown
-                                      editNode={true}
-                                      options={
-                                        myData.node!.template[templateParam]
-                                          .options
-                                      }
-                                      onSelect={(value) =>
-                                        handleOnNewValue(value, templateParam)
-                                      }
-                                      value={
-                                        myData.node!.template[templateParam]
-                                          .value ?? "Choose an option"
-                                      }
-                                      id={
-                                        "dropdown-edit-" +
-                                        myData.node!.template[templateParam]
-                                          .name
-                                      }
-                                    ></Dropdown>
-                                  </div>
-                                </Case>
-
-                                <Case condition={type(templateParam) === "int"}>
-                                  <div className="mx-auto">
-                                    <IntComponent
-                                      rangeSpec={
-                                        data.node?.template[templateParam]
-                                          ?.rangeSpec
-                                      }
-                                      id={
-                                        "edit-int-input-" +
-                                        myData.node!.template[templateParam]
-                                          .name
-                                      }
-                                      disabled={disabled}
-                                      editNode={true}
-                                      value={
-                                        myData.node!.template[templateParam]
-                                          .value ?? ""
-                                      }
-                                      onChange={(value) => {
-                                        handleOnNewValue(value, templateParam);
-                                      }}
-                                    />
-                                  </div>
-                                </Case>
-
-                                <Case
-                                  condition={type(templateParam) === "file"}
-                                >
-                                  <div className="mx-auto">
-                                    <InputFileComponent
-                                      editNode={true}
-                                      disabled={disabled}
-                                      value={
-                                        myData.node!.template[templateParam]
-                                          .value ?? ""
-                                      }
-                                      onChange={(value: string | string[]) => {
-                                        handleOnNewValue(value, templateParam);
-                                      }}
-                                      fileTypes={
-                                        myData.node!.template[templateParam]
-                                          .fileTypes
-                                      }
-                                      onFileChange={(filePath: string) => {
-                                        data.node!.template[
-                                          templateParam
-                                        ].file_path = filePath;
-                                      }}
-                                    ></InputFileComponent>
-                                  </div>
-                                </Case>
-
-                                <Case
-                                  condition={type(templateParam) === "prompt"}
-                                >
-                                  <div className="mx-auto">
-                                    <PromptAreaComponent
-                                      readonly={
-                                        myData.node?.flow ? true : false
-                                      }
-                                      field_name={templateParam}
-                                      editNode={true}
-                                      disabled={disabled}
-                                      nodeClass={myData.node}
-                                      setNodeClass={(nodeClass) => {
-                                        myData.node = nodeClass;
-                                      }}
-                                      value={
-                                        myData.node!.template[templateParam]
-                                          .value ?? ""
-                                      }
-                                      onChange={(value: string | string[]) => {
-                                        handleOnNewValue(value, templateParam);
-                                      }}
-                                      id={
-                                        "prompt-area-edit-" +
-                                        myData.node!.template[templateParam]
-                                          .name
-                                      }
-                                      data-testid={
-                                        "modal-prompt-input-" +
-                                        myData.node!.template[templateParam]
-                                          .name
-                                      }
-                                    />
-                                  </div>
-                                </Case>
-
-                                <Case
-                                  condition={type(templateParam) === "code"}
-                                >
-                                  <div className="mx-auto">
-                                    <CodeAreaComponent
-                                      readonly={
-                                        myData.node?.flow &&
-                                        myData.node!.template[templateParam]
-                                          .dynamic
-                                          ? true
-                                          : false
-                                      }
-                                      dynamic={
-                                        data.node!.template[templateParam]
-                                          ?.dynamic ?? false
-                                      }
-                                      setNodeClass={(nodeClass) => {
-                                        data.node = nodeClass;
-                                      }}
-                                      nodeClass={data.node}
-                                      disabled={disabled}
-                                      editNode={true}
-                                      value={
-                                        myData.node!.template[templateParam]
-                                          .value ?? ""
-                                      }
-                                      onChange={(value: string | string[]) => {
-                                        handleOnNewValue(value, templateParam);
-                                      }}
-                                      id={
-                                        "code-area-edit" +
-                                        myData.node!.template[templateParam]
-                                          .name
-                                      }
-                                    />
-                                  </div>
-                                </Case>
-
-                                <Case condition={type(templateParam) === "Any"}>
-                                  <>-</>
-                                </Case>
-                              </TableCell>
-                              <TableCell className="p-0 text-right">
-                                <div className="items-center text-center">
-                                  <ToggleShadComponent
-                                    id={
-                                      "show" +
-                                      myData.node?.template[templateParam].name
-                                    }
-                                    enabled={
-                                      !myData.node?.template[templateParam]
-                                        .advanced
-                                    }
-                                    setEnabled={(e) => {
-                                      changeAdvanced(templateParam);
-                                    }}
-                                    disabled={disabled}
-                                    size="small"
-                                    editNode={true}
-                                  />
-                                </div>
-                              </TableCell>
-                            </TableRow>
-                          );
-                        })}
-                    </TableBody>
-                  </Table>
-                </div>
+                <TableComponent
+                  onGridReady={(params) => {
+                    setGridApi(params.api);
+                  }}
+                  tooltipShowDelay={0.5}
+                  columnDefs={columnDefs}
+                  rowData={rowData}
+                />
               )}
             </div>
           </div>
@@ -643,7 +107,7 @@ const EditNodeModal = forwardRef(
         <BaseModal.Footer submit={{ label: "Save Changes" }} />
       </BaseModal>
     );
-  },
+  }
 );
 
 export default EditNodeModal;
diff --git a/src/frontend/src/modals/exportModal/index.tsx b/src/frontend/src/modals/exportModal/index.tsx
index 8ebc3f863..a04891821 100644
--- a/src/frontend/src/modals/exportModal/index.tsx
+++ b/src/frontend/src/modals/exportModal/index.tsx
@@ -45,7 +45,7 @@ const ExportModal = forwardRef(
                 is_component: false,
               },
               name!,
-              description,
+              description
             );
             setNoticeData({
               title: API_WARNING_NOTICE_ALERT,
@@ -61,7 +61,7 @@ const ExportModal = forwardRef(
                 is_component: false,
               }),
               name!,
-              description,
+              description
             );
           setOpen(false);
         }}
@@ -102,6 +102,6 @@ const ExportModal = forwardRef(
         <BaseModal.Footer submit={{ label: "Download Flow" }} />
       </BaseModal>
     );
-  },
+  }
 );
 export default ExportModal;
diff --git a/src/frontend/src/modals/flowLogsModal/index.tsx b/src/frontend/src/modals/flowLogsModal/index.tsx
index 6928b6021..d395d0d7b 100644
--- a/src/frontend/src/modals/flowLogsModal/index.tsx
+++ b/src/frontend/src/modals/flowLogsModal/index.tsx
@@ -1,5 +1,4 @@
 import { ColDef, ColGroupDef } from "ag-grid-community";
-import { AxiosError } from "axios";
 import { useEffect, useRef, useState } from "react";
 import IconComponent from "../../components/genericIconComponent";
 import TableComponent from "../../components/tableComponent";
@@ -9,7 +8,7 @@ import useAlertStore from "../../stores/alertStore";
 import useFlowStore from "../../stores/flowStore";
 import useFlowsManagerStore from "../../stores/flowsManagerStore";
 import { FlowSettingsPropsType } from "../../types/components";
-import { FlowType, NodeDataType } from "../../types/flow";
+import { NodeDataType } from "../../types/flow";
 import BaseModal from "../baseModal";
 
 export default function FlowLogsModal({
@@ -38,7 +37,7 @@ export default function FlowLogsModal({
           const { columns, rows } = data;
           setColumns(columns.map((col) => ({ ...col, editable: true })));
           setRows(rows);
-        },
+        }
       );
     }
 
@@ -48,7 +47,7 @@ export default function FlowLogsModal({
         .some((template) => template["stream"] && template["stream"].value);
       console.log(
         haStream,
-        nodes.map((nodes) => (nodes.data as NodeDataType).node!.template),
+        nodes.map((nodes) => (nodes.data as NodeDataType).node!.template)
       );
       if (haStream) {
         setNoticeData({
diff --git a/src/frontend/src/modals/foldersModal/component/index.tsx b/src/frontend/src/modals/foldersModal/component/index.tsx
index 5093adf8e..a2ca33085 100644
--- a/src/frontend/src/modals/foldersModal/component/index.tsx
+++ b/src/frontend/src/modals/foldersModal/component/index.tsx
@@ -1,5 +1,4 @@
 import { useEffect, useState } from "react";
-import InputComponent from "../../../components/inputComponent";
 import {
   FormControl,
   FormField,
diff --git a/src/frontend/src/modals/foldersModal/hooks/submit-folder.tsx b/src/frontend/src/modals/foldersModal/hooks/submit-folder.tsx
index 71a8ac944..c35d7c450 100644
--- a/src/frontend/src/modals/foldersModal/hooks/submit-folder.tsx
+++ b/src/frontend/src/modals/foldersModal/hooks/submit-folder.tsx
@@ -33,7 +33,7 @@ const useFolderSubmit = (setOpen, folderToEdit) => {
             getFoldersApi(true);
             setOpen(false);
           }
-        },
+        }
       );
     } else {
       addFolder(data).then(
@@ -49,7 +49,7 @@ const useFolderSubmit = (setOpen, folderToEdit) => {
           setErrorData({
             title: `Error creating folder.`,
           });
-        },
+        }
       );
     }
   };
diff --git a/src/frontend/src/modals/newFlowModal/index.tsx b/src/frontend/src/modals/newFlowModal/index.tsx
index f9d1f98b2..7e64ed5dc 100644
--- a/src/frontend/src/modals/newFlowModal/index.tsx
+++ b/src/frontend/src/modals/newFlowModal/index.tsx
@@ -32,7 +32,7 @@ export default function NewFlowModal({
               key={0}
               flow={
                 examples.find(
-                  (e) => e.name == "Basic Prompting (Hello, World)",
+                  (e) => e.name == "Basic Prompting (Hello, World)"
                 )!
               }
             />
diff --git a/src/frontend/src/modals/secretKeyModal/index.tsx b/src/frontend/src/modals/secretKeyModal/index.tsx
index 879280dd5..f700501d1 100644
--- a/src/frontend/src/modals/secretKeyModal/index.tsx
+++ b/src/frontend/src/modals/secretKeyModal/index.tsx
@@ -11,15 +11,10 @@ import { nodeIconsLucide } from "../../utils/styleUtils";
 import BaseModal from "../baseModal";
 
 export default function SecretKeyModal({
-  title,
-  cancelText,
-  confirmationText,
   children,
-  icon,
   data,
   onCloseModal,
 }: ApiKeyType) {
-  const Icon: any = nodeIconsLucide[icon];
   const [open, setOpen] = useState(false);
   const [apiKeyName, setApiKeyName] = useState(data?.apikeyname ?? "");
   const [apiKeyValue, setApiKeyValue] = useState("");
@@ -66,118 +61,91 @@ export default function SecretKeyModal({
       .catch((err) => {});
   }
 
+  function handleSubmitForm() {
+    if (!renderKey) {
+      setRenderKey(true);
+      handleAddNewKey();
+    } else {
+      setOpen(false);
+    }
+  }
+
   return (
-    <BaseModal size="small-h-full" open={open} setOpen={setOpen}>
+    <BaseModal
+      onSubmit={handleSubmitForm}
+      size="small-h-full"
+      open={open}
+      setOpen={setOpen}
+    >
       <BaseModal.Trigger>{children}</BaseModal.Trigger>
-      <BaseModal.Header description={""}>
-        <span className="pr-2">{title}</span>
-        <Icon
-          name="icon"
-          className="h-6 w-6 pl-1 text-foreground"
-          aria-hidden="true"
-        />
-      </BaseModal.Header>
-      <BaseModal.Content>
-        {renderKey === true && (
-          <>
-            <span className="text-xs">
+      <BaseModal.Header
+        description={
+          renderKey ? (
+            <>
+              {" "}
               Please save this secret key somewhere safe and accessible. For
               security reasons,{" "}
               <strong>you won't be able to view it again</strong> through your
               account. If you lose this secret key, you'll need to generate a
               new one.
-            </span>
-            <div className="flex pt-3">
+            </>
+          ) : (
+            <>Create a secret API Key to use Langflow API.</>
+          )
+        }
+      >
+        <span className="pr-2">Create API Key</span>
+        <IconComponent
+          name="Key"
+          className="h-6 w-6 pl-1 text-foreground"
+          aria-hidden="true"
+        />
+      </BaseModal.Header>
+      <BaseModal.Content>
+        {renderKey ? (
+          <>
+            <div className="flex items-center gap-3">
               <div className="w-full">
                 <Input ref={inputRef} readOnly={true} value={apiKeyValue} />
               </div>
 
-              <div>
-                <Button
-                  className="ml-3"
-                  onClick={() => {
-                    handleCopyClick();
-                  }}
-                >
-                  {textCopied ? (
-                    <IconComponent name="Copy" className="h-4 w-4" />
-                  ) : (
-                    <IconComponent name="Check" className="h-4 w-4" />
-                  )}
-                </Button>
-              </div>
+              <Button
+                onClick={() => {
+                  handleCopyClick();
+                }}
+                variant="none"
+                size="none"
+              >
+                {textCopied ? (
+                  <IconComponent name="Copy" className="h-4 w-4" />
+                ) : (
+                  <IconComponent name="Check" className="h-4 w-4" />
+                )}
+              </Button>
             </div>
           </>
-        )}
-
-        <Form.Root
-          onSubmit={(event) => {
-            setRenderKey(true);
-            handleAddNewKey();
-            event.preventDefault();
-          }}
-        >
-          {renderKey === false && (
-            <div className="grid gap-5">
-              <Form.Field name="username">
-                <div
-                  style={{
-                    display: "flex",
-                    alignItems: "baseline",
-                    justifyContent: "space-between",
+        ) : (
+          <Form.Field name="apikey">
+            <div className="flex items-center justify-between gap-2">
+              <Form.Control asChild>
+                <Input
+                  //fake api key
+                  id="primary-input"
+                  value={apiKeyName}
+                  ref={inputRef}
+                  onChange={({ target: { value } }) => {
+                    setApiKeyName(value);
                   }}
-                >
-                  <Form.Label className="data-[invalid]:label-invalid">
-                    Name (optional){" "}
-                  </Form.Label>
-                </div>
-                <Form.Control asChild>
-                  <input
-                    onChange={({ target: { value } }) => {
-                      setApiKeyName(value);
-                    }}
-                    value={apiKeyName}
-                    className="primary-input"
-                    placeholder="My key name"
-                  />
-                </Form.Control>
-              </Form.Field>
+                  placeholder="Insert a name for your API Key"
+                />
+              </Form.Control>
             </div>
-          )}
-          {renderKey === false && (
-            <div className="float-right">
-              <Button
-                type="button"
-                className="mr-3"
-                variant="outline"
-                onClick={() => {
-                  setOpen(false);
-                }}
-              >
-                {cancelText}
-              </Button>
-
-              <Form.Submit asChild>
-                <Button className="mt-8">{confirmationText}</Button>
-              </Form.Submit>
-            </div>
-          )}
-
-          {renderKey === true && (
-            <div className="float-right">
-              <Button
-                onClick={() => {
-                  setOpen(false);
-                  setRenderKey(false);
-                }}
-                className="mt-8"
-              >
-                Done
-              </Button>
-            </div>
-          )}
-        </Form.Root>
+          </Form.Field>
+        )}
       </BaseModal.Content>
+      <BaseModal.Footer
+        submit={{ label: renderKey ? "Done" : "Create Secret Key" }}
+      />
     </BaseModal>
   );
 }
diff --git a/src/frontend/src/modals/shareModal/index.tsx b/src/frontend/src/modals/shareModal/index.tsx
index bde63de7e..9d14129a5 100644
--- a/src/frontend/src/modals/shareModal/index.tsx
+++ b/src/frontend/src/modals/shareModal/index.tsx
@@ -128,14 +128,14 @@ export default function ShareModal({
             title: "Error sharing " + is_component ? "component" : "flow",
             list: [err["response"]["data"]["detail"]],
           });
-        },
+        }
       );
     else
       updateFlowStore(
         flow!,
         getTagsIds(selectedTags, tags),
         sharePublic,
-        unavaliableNames.find((e) => e.name === name)!.id,
+        unavaliableNames.find((e) => e.name === name)!.id
       ).then(successShare, (err) => {
         setErrorData({
           title: "Error sharing " + is_component ? "component" : "flow",
@@ -203,7 +203,7 @@ export default function ShareModal({
         setOpen={setOpen ?? internalSetOpen}
         onSubmit={() => {
           const isNameAvailable = !unavaliableNames.some(
-            (element) => element.name === name,
+            (element) => element.name === name
           );
 
           if (isNameAvailable) {
diff --git a/src/frontend/src/modals/shareModal/utils/get-tags-ids.tsx b/src/frontend/src/modals/shareModal/utils/get-tags-ids.tsx
index 364d310a5..1eb1c650e 100644
--- a/src/frontend/src/modals/shareModal/utils/get-tags-ids.tsx
+++ b/src/frontend/src/modals/shareModal/utils/get-tags-ids.tsx
@@ -1,6 +1,6 @@
 export default function getTagsIds(
   tags: string[],
-  tagListId: { name: string; id: string }[],
+  tagListId: { name: string; id: string }[]
 ) {
   return tags
     .map((tag) => tagListId.find((tagObj) => tagObj.name === tag))!
diff --git a/src/frontend/src/pages/ApiKeysPage/index.tsx b/src/frontend/src/pages/ApiKeysPage/index.tsx
deleted file mode 100644
index 49f38715e..000000000
--- a/src/frontend/src/pages/ApiKeysPage/index.tsx
+++ /dev/null
@@ -1,291 +0,0 @@
-import { useContext, useEffect, useRef, useState } from "react";
-import IconComponent from "../../components/genericIconComponent";
-import ShadTooltip from "../../components/shadTooltipComponent";
-import { Button } from "../../components/ui/button";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "../../components/ui/table";
-import { AuthContext } from "../../contexts/authContext";
-import { deleteApiKey, getApiKey } from "../../controllers/API";
-import ConfirmationModal from "../../modals/confirmationModal";
-import SecretKeyModal from "../../modals/secretKeyModal";
-
-import moment from "moment";
-import Header from "../../components/headerComponent";
-import {
-  DEL_KEY_ERROR_ALERT,
-  DEL_KEY_SUCCESS_ALERT,
-} from "../../constants/alerts_constants";
-import {
-  API_PAGE_PARAGRAPH_1,
-  API_PAGE_PARAGRAPH_2,
-  API_PAGE_USER_KEYS,
-  LAST_USED_SPAN_1,
-  LAST_USED_SPAN_2,
-} from "../../constants/constants";
-import useAlertStore from "../../stores/alertStore";
-import { ApiKey } from "../../types/components";
-
-export default function ApiKeysPage() {
-  const [loadingKeys, setLoadingKeys] = useState(true);
-  const setSuccessData = useAlertStore((state) => state.setSuccessData);
-  const setErrorData = useAlertStore((state) => state.setErrorData);
-  const { userData } = useContext(AuthContext);
-  const [userId, setUserId] = useState("");
-  const keysList = useRef([]);
-
-  useEffect(() => {
-    getKeys();
-  }, [userData]);
-
-  function getKeys() {
-    setLoadingKeys(true);
-    if (userData) {
-      getApiKey()
-        .then((keys: [ApiKey]) => {
-          keysList.current = keys["api_keys"];
-          setUserId(keys["user_id"]);
-          setLoadingKeys(false);
-        })
-        .catch((error) => {
-          setLoadingKeys(false);
-        });
-    }
-  }
-
-  function resetFilter() {
-    getKeys();
-  }
-
-  function handleDeleteKey(keys) {
-    deleteApiKey(keys)
-      .then((res) => {
-        resetFilter();
-        setSuccessData({
-          title: DEL_KEY_SUCCESS_ALERT,
-        });
-      })
-      .catch((error) => {
-        setErrorData({
-          title: DEL_KEY_ERROR_ALERT,
-          list: [error["response"]["data"]["detail"]],
-        });
-      });
-  }
-
-  function lastUsedMessage() {
-    return (
-      <div className="text-xs">
-        <span>
-          {LAST_USED_SPAN_1}
-          <br></br> {LAST_USED_SPAN_2}
-        </span>
-      </div>
-    );
-  }
-
-  return (
-    <>
-      <Header></Header>
-      {userData && (
-        <div className="main-page-panel">
-          <div className="m-auto flex h-full flex-row justify-center">
-            <div className="basis-5/6">
-              <div className="m-auto flex h-full flex-col space-y-8 p-8 ">
-                <div className="flex items-center justify-between space-y-2">
-                  <div>
-                    <h2 className="text-2xl font-bold tracking-tight">
-                      API keys
-                    </h2>
-                    <p className="text-muted-foreground">
-                      {API_PAGE_PARAGRAPH_1}
-                      <br />
-                      {API_PAGE_PARAGRAPH_2}
-                    </p>
-                  </div>
-                  <div className="flex items-center space-x-2"></div>
-                </div>
-
-                {keysList.current &&
-                  keysList.current.length === 0 &&
-                  !loadingKeys && (
-                    <>
-                      <div className="flex items-center justify-between">
-                        <h2>{API_PAGE_USER_KEYS}</h2>
-                      </div>
-                    </>
-                  )}
-                <>
-                  {loadingKeys && (
-                    <div>
-                      <strong>Loading...</strong>
-                    </div>
-                  )}
-                  <div
-                    className={
-                      "max-h-[15rem] overflow-scroll overflow-x-hidden rounded-md border-2 bg-muted custom-scroll" +
-                      (loadingKeys ? " border-0" : "")
-                    }
-                  >
-                    {keysList.current &&
-                      keysList.current.length > 0 &&
-                      !loadingKeys && (
-                        <Table className={"table-fixed bg-muted outline-1"}>
-                          <TableHeader
-                            className={
-                              loadingKeys
-                                ? "hidden"
-                                : "table-fixed bg-muted outline-1"
-                            }
-                          >
-                            <TableRow>
-                              <TableHead className="h-10">Name</TableHead>
-                              <TableHead className="h-10">Key</TableHead>
-                              <TableHead className="h-10">Created</TableHead>
-                              <TableHead className="flex h-10 items-center">
-                                Last Used
-                                <ShadTooltip
-                                  side="top"
-                                  content={lastUsedMessage()}
-                                >
-                                  <div>
-                                    <IconComponent
-                                      name="Info"
-                                      className="ml-1 h-3 w-3"
-                                    />
-                                  </div>
-                                </ShadTooltip>
-                              </TableHead>
-                              <TableHead className="h-10">Total Uses</TableHead>
-                              <TableHead className="h-10 w-[100px]  text-right"></TableHead>
-                            </TableRow>
-                          </TableHeader>
-                          {!loadingKeys && (
-                            <TableBody>
-                              {keysList.current.map(
-                                (api_keys: ApiKey, index: number) => (
-                                  <TableRow key={index}>
-                                    <TableCell className="truncate py-2">
-                                      <ShadTooltip content={api_keys.name}>
-                                        <span className="cursor-default">
-                                          {api_keys.name ? api_keys.name : "-"}
-                                        </span>
-                                      </ShadTooltip>
-                                    </TableCell>
-                                    <TableCell className="truncate py-2">
-                                      <span className="cursor-default">
-                                        {api_keys.api_key}
-                                      </span>
-                                    </TableCell>
-                                    <TableCell className="truncate py-2 ">
-                                      <ShadTooltip
-                                        side="top"
-                                        content={moment(
-                                          api_keys.created_at
-                                        ).format("YYYY-MM-DD HH:mm")}
-                                      >
-                                        <div>
-                                          {moment(api_keys.created_at).format(
-                                            "YYYY-MM-DD HH:mm"
-                                          )}
-                                        </div>
-                                      </ShadTooltip>
-                                    </TableCell>
-                                    <TableCell className="truncate py-2">
-                                      <ShadTooltip
-                                        side="top"
-                                        content={
-                                          moment(api_keys.last_used_at).format(
-                                            "YYYY-MM-DD HH:mm"
-                                          ) === "Invalid date"
-                                            ? "Never"
-                                            : moment(
-                                                api_keys.last_used_at
-                                              ).format("YYYY-MM-DD HH:mm")
-                                        }
-                                      >
-                                        <div>
-                                          {moment(api_keys.last_used_at).format(
-                                            "YYYY-MM-DD HH:mm"
-                                          ) === "Invalid date"
-                                            ? "Never"
-                                            : moment(
-                                                api_keys.last_used_at
-                                              ).format("YYYY-MM-DD HH:mm")}
-                                        </div>
-                                      </ShadTooltip>
-                                    </TableCell>
-                                    <TableCell className="truncate py-2">
-                                      {api_keys.total_uses}
-                                    </TableCell>
-                                    <TableCell className="flex w-[100px] py-2 text-right">
-                                      <div className="flex">
-                                        <ConfirmationModal
-                                          title="Delete"
-                                          titleHeader="Delete User"
-                                          modalContentTitle="Attention!"
-                                          cancelText="Cancel"
-                                          confirmationText="Delete"
-                                          icon={"UserMinus2"}
-                                          data={api_keys.id}
-                                          index={index}
-                                          onConfirm={(index, keys) => {
-                                            handleDeleteKey(keys);
-                                          }}
-                                        >
-                                          <ConfirmationModal.Content>
-                                            <span>
-                                              Are you sure you want to delete
-                                              this key? This action cannot be
-                                              undone.
-                                            </span>
-                                          </ConfirmationModal.Content>
-                                          <ConfirmationModal.Trigger>
-                                            <IconComponent
-                                              name="Trash2"
-                                              className="ml-2 h-4 w-4 cursor-pointer"
-                                            />
-                                          </ConfirmationModal.Trigger>
-                                        </ConfirmationModal>
-                                      </div>
-                                    </TableCell>
-                                  </TableRow>
-                                )
-                              )}
-                            </TableBody>
-                          )}
-                        </Table>
-                      )}
-                  </div>
-
-                  <div className="flex items-center justify-between">
-                    <div>
-                      <SecretKeyModal
-                        title="Create new secret key"
-                        cancelText="Cancel"
-                        confirmationText="Create secret key"
-                        icon={"Key"}
-                        data={userId}
-                        onCloseModal={getKeys}
-                      >
-                        <Button>
-                          <IconComponent name="Plus" className="mr-1 h-5 w-5" />
-                          Create new secret key
-                        </Button>
-                      </SecretKeyModal>
-                    </div>
-                  </div>
-                </>
-              </div>
-            </div>
-          </div>
-        </div>
-      )}
-    </>
-  );
-}
diff --git a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
index c902ec2d5..c84c6e405 100644
--- a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
@@ -36,8 +36,8 @@ import {
 } from "../../../../utils/reactflowUtils";
 import ConnectionLineComponent from "../ConnectionLineComponent";
 import SelectionMenu from "../SelectionMenuComponent";
-import isWrappedWithClass from "./utils/is-wrapped-with-class";
 import getRandomName from "./utils/get-random-name";
+import isWrappedWithClass from "./utils/is-wrapped-with-class";
 
 const nodeTypes = {
   genericNode: GenericNode,
@@ -52,19 +52,19 @@ export default function Page({
 }): JSX.Element {
   const uploadFlow = useFlowsManagerStore((state) => state.uploadFlow);
   const autoSaveCurrentFlow = useFlowsManagerStore(
-    (state) => state.autoSaveCurrentFlow,
+    (state) => state.autoSaveCurrentFlow
   );
   const types = useTypesStore((state) => state.types);
   const templates = useTypesStore((state) => state.templates);
   const setFilterEdge = useFlowStore((state) => state.setFilterEdge);
   const reactFlowWrapper = useRef<HTMLDivElement>(null);
   const [showCanvas, setSHowCanvas] = useState(
-    Object.keys(templates).length > 0 && Object.keys(types).length > 0,
+    Object.keys(templates).length > 0 && Object.keys(types).length > 0
   );
 
   const reactFlowInstance = useFlowStore((state) => state.reactFlowInstance);
   const setReactFlowInstance = useFlowStore(
-    (state) => state.setReactFlowInstance,
+    (state) => state.setReactFlowInstance
   );
   const nodes = useFlowStore((state) => state.nodes);
   const edges = useFlowStore((state) => state.edges);
@@ -81,10 +81,10 @@ export default function Page({
   const paste = useFlowStore((state) => state.paste);
   const resetFlow = useFlowStore((state) => state.resetFlow);
   const lastCopiedSelection = useFlowStore(
-    (state) => state.lastCopiedSelection,
+    (state) => state.lastCopiedSelection
   );
   const setLastCopiedSelection = useFlowStore(
-    (state) => state.setLastCopiedSelection,
+    (state) => state.setLastCopiedSelection
   );
   const onConnect = useFlowStore((state) => state.onConnect);
   const currentFlowId = useFlowsManagerStore((state) => state.currentFlowId);
@@ -107,7 +107,7 @@ export default function Page({
         clonedSelection!,
         clonedNodes,
         clonedEdges,
-        getRandomName(),
+        getRandomName()
       );
       const newGroupNode = generateNodeFromFlow(newFlow, getNodeId);
       const newEdges = reconnectEdges(newGroupNode, removedEdges);
@@ -115,8 +115,8 @@ export default function Page({
         ...clonedNodes.filter(
           (oldNodes) =>
             !clonedSelection?.nodes.some(
-              (selectionNode) => selectionNode.id === oldNodes.id,
-            ),
+              (selectionNode) => selectionNode.id === oldNodes.id
+            )
         ),
         newGroupNode,
       ]);
@@ -126,8 +126,8 @@ export default function Page({
             !clonedSelection!.nodes.some(
               (selectionNode) =>
                 selectionNode.id === oldEdge.target ||
-                selectionNode.id === oldEdge.source,
-            ),
+                selectionNode.id === oldEdge.source
+            )
         ),
         ...newEdges,
       ]);
@@ -180,7 +180,7 @@ export default function Page({
           {
             x: position.current.x,
             y: position.current.y,
-          },
+          }
         );
       }
       if (!isWrappedWithClass(event, "noundo")) {
@@ -276,7 +276,7 @@ export default function Page({
 
   useEffect(() => {
     setSHowCanvas(
-      Object.keys(templates).length > 0 && Object.keys(types).length > 0,
+      Object.keys(templates).length > 0 && Object.keys(types).length > 0
     );
   }, [templates, types]);
 
@@ -285,7 +285,7 @@ export default function Page({
       takeSnapshot();
       onConnect(params);
     },
-    [takeSnapshot, onConnect],
+    [takeSnapshot, onConnect]
   );
 
   const onNodeDragStart: NodeDragHandler = useCallback(() => {
@@ -326,7 +326,7 @@ export default function Page({
 
         // Extract the data from the drag event and parse it as a JSON object
         const data: { type: string; node?: APIClassType } = JSON.parse(
-          event.dataTransfer.getData("nodedata"),
+          event.dataTransfer.getData("nodedata")
         );
 
         const newId = getNodeId(data.type);
@@ -342,7 +342,7 @@ export default function Page({
         };
         paste(
           { nodes: [newNode], edges: [] },
-          { x: event.clientX, y: event.clientY },
+          { x: event.clientX, y: event.clientY }
         );
       } else if (event.dataTransfer.types.some((types) => types === "Files")) {
         takeSnapshot();
@@ -371,7 +371,7 @@ export default function Page({
       }
     },
     // Specify dependencies for useCallback
-    [getNodeId, setNodes, takeSnapshot, paste],
+    [getNodeId, setNodes, takeSnapshot, paste]
   );
 
   const onEdgeUpdateStart = useCallback(() => {
@@ -387,7 +387,7 @@ export default function Page({
         setEdges((els) => updateEdge(oldEdge, newConnection, els));
       }
     },
-    [setEdges],
+    [setEdges]
   );
 
   const onEdgeUpdateEnd = useCallback((_, edge: Edge): void => {
@@ -420,7 +420,7 @@ export default function Page({
     (flow: OnSelectionChangeParams): void => {
       setLastSelection(flow);
     },
-    [],
+    []
   );
 
   const onPaneClick = useCallback((flow) => {
diff --git a/src/frontend/src/pages/FlowPage/components/PageComponent/utils/get-random-name.tsx b/src/frontend/src/pages/FlowPage/components/PageComponent/utils/get-random-name.tsx
index d3bcf4d55..a58b83ec3 100644
--- a/src/frontend/src/pages/FlowPage/components/PageComponent/utils/get-random-name.tsx
+++ b/src/frontend/src/pages/FlowPage/components/PageComponent/utils/get-random-name.tsx
@@ -5,7 +5,7 @@ import { toTitleCase } from "../../../../../utils/utils";
 export default function getRandomName(
   retry: number = 0,
   noSpace: boolean = false,
-  maxRetries: number = 3,
+  maxRetries: number = 3
 ): string {
   const left: string[] = ADJECTIVES;
   const right: string[] = NOUNS;
diff --git a/src/frontend/src/pages/FlowPage/components/SelectionMenuComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/SelectionMenuComponent/index.tsx
index a6d83153c..d850ce1e2 100644
--- a/src/frontend/src/pages/FlowPage/components/SelectionMenuComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/SelectionMenuComponent/index.tsx
@@ -13,7 +13,7 @@ export default function SelectionMenu({
   const [disable, setDisable] = useState<boolean>(
     lastSelection && edges.length > 0
       ? validateSelection(lastSelection!, edges).length > 0
-      : false,
+      : false
   );
   const [isOpen, setIsOpen] = useState(false);
   const [isTransitioning, setIsTransitioning] = useState(false);
diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
index 696f9898a..d193d2e6b 100644
--- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
@@ -41,7 +41,7 @@ export default function ExtraSidebar(): JSX.Element {
   const [search, setSearch] = useState("");
   function onDragStart(
     event: React.DragEvent<any>,
-    data: { type: string; node?: APIClassType },
+    data: { type: string; node?: APIClassType }
   ): void {
     //start drag event
     var crt = event.currentTarget.cloneNode(true);
@@ -67,7 +67,7 @@ export default function ExtraSidebar(): JSX.Element {
         let keys = Object.keys(data[d]).filter(
           (nd) =>
             nd.toLowerCase().includes(e.toLowerCase()) ||
-            data[d][nd].display_name?.toLowerCase().includes(e.toLowerCase()),
+            data[d][nd].display_name?.toLowerCase().includes(e.toLowerCase())
         );
         keys.forEach((element) => {
           ret[d][element] = data[d][element];
@@ -134,7 +134,7 @@ export default function ExtraSidebar(): JSX.Element {
 
             if (filtered.some((x) => x !== "")) {
               let keys = Object.keys(dataClone[d]).filter((nd) =>
-                filtered.includes(nd),
+                filtered.includes(nd)
               );
               Object.keys(dataClone[d]).forEach((element) => {
                 if (!keys.includes(element)) {
@@ -171,7 +171,7 @@ export default function ExtraSidebar(): JSX.Element {
 
             if (filtered.some((x) => x !== "")) {
               let keys = Object.keys(dataClone[d]).filter((nd) =>
-                filtered.includes(nd),
+                filtered.includes(nd)
               );
               Object.keys(dataClone[d]).forEach((element) => {
                 if (!keys.includes(element)) {
@@ -200,7 +200,7 @@ export default function ExtraSidebar(): JSX.Element {
             "extra-side-bar-buttons gap-[4px] text-sm font-semibold",
             !hasApiKey || !validApiKey || !hasStore
               ? "button-disable  cursor-default text-muted-foreground"
-              : "",
+              : ""
           )}
         >
           <IconComponent
@@ -209,14 +209,14 @@ export default function ExtraSidebar(): JSX.Element {
               "-m-0.5 -ml-1 h-6 w-6",
               !hasApiKey || !validApiKey || !hasStore
                 ? "extra-side-bar-save-disable"
-                : "",
+                : ""
             )}
           />
           Share
         </button>
       </ShareModal>
     ),
-    [hasApiKey, validApiKey, currentFlow, hasStore],
+    [hasApiKey, validApiKey, currentFlow, hasStore]
   );
 
   const ExportMemo = useMemo(
@@ -227,7 +227,7 @@ export default function ExtraSidebar(): JSX.Element {
         </button>
       </ExportModal>
     ),
-    [],
+    []
   );
 
   const getIcon = useMemo(() => {
@@ -311,8 +311,8 @@ export default function ExtraSidebar(): JSX.Element {
                       .sort((a, b) =>
                         sensitiveSort(
                           dataFilter[SBSectionName][a].display_name,
-                          dataFilter[SBSectionName][b].display_name,
-                        ),
+                          dataFilter[SBSectionName][b].display_name
+                        )
                       )
                       .map((SBItemName: string, index) => (
                         <ShadTooltip
@@ -356,7 +356,7 @@ export default function ExtraSidebar(): JSX.Element {
               </>
             ) : (
               <div key={index}></div>
-            ),
+            )
           )}{" "}
         <ParentDisclosureComponent
           openDisc={false}
@@ -393,8 +393,8 @@ export default function ExtraSidebar(): JSX.Element {
                         .sort((a, b) =>
                           sensitiveSort(
                             dataFilter[SBSectionName][a].display_name,
-                            dataFilter[SBSectionName][b].display_name,
-                          ),
+                            dataFilter[SBSectionName][b].display_name
+                          )
                         )
                         .map((SBItemName: string, index) => (
                           <ShadTooltip
@@ -468,7 +468,7 @@ export default function ExtraSidebar(): JSX.Element {
                 </>
               ) : (
                 <div key={index}></div>
-              ),
+              )
             )}
         </ParentDisclosureComponent>
       </div>
diff --git a/src/frontend/src/pages/FlowPage/index.tsx b/src/frontend/src/pages/FlowPage/index.tsx
index 49fdb1eca..e5a67bd35 100644
--- a/src/frontend/src/pages/FlowPage/index.tsx
+++ b/src/frontend/src/pages/FlowPage/index.tsx
@@ -10,7 +10,7 @@ import ExtraSidebar from "./components/extraSidebarComponent";
 
 export default function FlowPage({ view }: { view?: boolean }): JSX.Element {
   const setCurrentFlowId = useFlowsManagerStore(
-    (state) => state.setCurrentFlowId,
+    (state) => state.setCurrentFlowId
   );
   const version = useDarkStore((state) => state.version);
   const setOnFlowPage = useFlowStore((state) => state.setOnFlowPage);
diff --git a/src/frontend/src/pages/MainPage/components/componentsComponent/index.tsx b/src/frontend/src/pages/MainPage/components/componentsComponent/index.tsx
index 3577c74c8..f7d52c611 100644
--- a/src/frontend/src/pages/MainPage/components/componentsComponent/index.tsx
+++ b/src/frontend/src/pages/MainPage/components/componentsComponent/index.tsx
@@ -31,22 +31,22 @@ export default function ComponentsComponent({
   const allFlows = useFlowsManagerStore((state) => state.allFlows);
 
   const flowsFromFolder = useFolderStore(
-    (state) => state.selectedFolder?.flows,
+    (state) => state.selectedFolder?.flows
   );
 
   const setSuccessData = useAlertStore((state) => state.setSuccessData);
   const setErrorData = useAlertStore((state) => state.setErrorData);
   const [openDelete, setOpenDelete] = useState(false);
   const searchFlowsComponents = useFlowsManagerStore(
-    (state) => state.searchFlowsComponents,
+    (state) => state.searchFlowsComponents
   );
 
   const setSelectedFlowsComponentsCards = useFlowsManagerStore(
-    (state) => state.setSelectedFlowsComponentsCards,
+    (state) => state.setSelectedFlowsComponentsCards
   );
 
   const selectedFlowsComponentsCards = useFlowsManagerStore(
-    (state) => state.selectedFlowsComponentsCards,
+    (state) => state.selectedFlowsComponentsCards
   );
 
   const [handleFileDrop] = useFileDrop(uploadFlow, type)!;
@@ -82,7 +82,7 @@ export default function ComponentsComponent({
         f.name.toLowerCase().includes(searchFlowsComponents.toLowerCase()) ||
         f.description
           .toLowerCase()
-          .includes(searchFlowsComponents.toLowerCase()),
+          .includes(searchFlowsComponents.toLowerCase())
     );
 
     if (searchFlowsComponents === "") {
@@ -137,9 +137,9 @@ export default function ComponentsComponent({
       selectedFlowsComponentsCards.map((selectedFlow) =>
         addFlow(
           true,
-          allFlows.find((flow) => flow.id === selectedFlow),
-        ),
-      ),
+          allFlows.find((flow) => flow.id === selectedFlow)
+        )
+      )
     ).then(() => {
       resetFilter();
       getFoldersApi(true);
@@ -180,7 +180,7 @@ export default function ComponentsComponent({
           return true;
         }
         return false;
-      },
+      }
     );
 
     setSelectedFlowsComponentsCards(selectedFlows);
@@ -215,7 +215,7 @@ export default function ComponentsComponent({
     if (type === "all") return allFlows?.length;
 
     return allFlows?.filter(
-      (f) => (f.is_component ?? false) === (type === "component"),
+      (f) => (f.is_component ?? false) === (type === "component")
     )?.length;
   };
 
diff --git a/src/frontend/src/pages/MainPage/components/emptyComponent/index.tsx b/src/frontend/src/pages/MainPage/components/emptyComponent/index.tsx
index fdcc7291a..1a4a16eb1 100644
--- a/src/frontend/src/pages/MainPage/components/emptyComponent/index.tsx
+++ b/src/frontend/src/pages/MainPage/components/emptyComponent/index.tsx
@@ -1,7 +1,7 @@
-import { useNavigate } from "react-router-dom";
-import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
-import NewFlowModal from "../../../../modals/newFlowModal";
 import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import NewFlowModal from "../../../../modals/newFlowModal";
+import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
 
 type EmptyComponentProps = {};
 
diff --git a/src/frontend/src/pages/MainPage/components/headerComponent/index.tsx b/src/frontend/src/pages/MainPage/components/headerComponent/index.tsx
index 212816ea4..2d2e43a2a 100644
--- a/src/frontend/src/pages/MainPage/components/headerComponent/index.tsx
+++ b/src/frontend/src/pages/MainPage/components/headerComponent/index.tsx
@@ -1,17 +1,8 @@
 import { useState } from "react";
 import IconComponent from "../../../../components/genericIconComponent";
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "../../../../components/ui/select";
-import { Checkbox } from "../../../../components/ui/checkbox";
-import { Button } from "../../../../components/ui/button";
-import { cn } from "../../../../utils/utils";
 import ShadTooltip from "../../../../components/shadTooltipComponent";
+import { Checkbox } from "../../../../components/ui/checkbox";
+import { cn } from "../../../../utils/utils";
 
 type HeaderComponentProps = {
   handleSelectAll: (select) => void;
@@ -91,7 +82,7 @@ const HeaderComponent = ({
                   name="Trash2"
                   className={cn(
                     "h-5 w-5 text-primary transition-all",
-                    disableFunctions ? "" : "hover:text-destructive",
+                    disableFunctions ? "" : "hover:text-destructive"
                   )}
                 />
               </button>
diff --git a/src/frontend/src/pages/MainPage/components/myCollectionComponent/components/headerTabsSearchComponent/index.tsx b/src/frontend/src/pages/MainPage/components/myCollectionComponent/components/headerTabsSearchComponent/index.tsx
index 8dca45f3c..17916f05b 100644
--- a/src/frontend/src/pages/MainPage/components/myCollectionComponent/components/headerTabsSearchComponent/index.tsx
+++ b/src/frontend/src/pages/MainPage/components/myCollectionComponent/components/headerTabsSearchComponent/index.tsx
@@ -1,13 +1,11 @@
 import { useState } from "react";
+import { useLocation } from "react-router-dom";
+import useAlertStore from "../../../../../../stores/alertStore";
 import useFlowsManagerStore from "../../../../../../stores/flowsManagerStore";
+import { useFolderStore } from "../../../../../../stores/foldersStore";
+import { handleDownloadFolderFn } from "../../../../utils/handle-download-folder";
 import InputSearchComponent from "../inputSearchComponent";
 import TabsSearchComponent from "../tabsComponent";
-import { Button } from "../../../../../../components/ui/button";
-import ForwardedIconComponent from "../../../../../../components/genericIconComponent";
-import useAlertStore from "../../../../../../stores/alertStore";
-import { handleDownloadFolderFn } from "../../../../utils/handle-download-folder";
-import { useFolderStore } from "../../../../../../stores/foldersStore";
-import { useLocation } from "react-router-dom";
 
 type HeaderTabsSearchComponentProps = {};
 
@@ -22,7 +20,7 @@ const HeaderTabsSearchComponent = ({}: HeaderTabsSearchComponentProps) => {
   const [inputValue, setInputValue] = useState("");
 
   const setSearchFlowsComponents = useFlowsManagerStore(
-    (state) => state.setSearchFlowsComponents,
+    (state) => state.setSearchFlowsComponents
   );
 
   const handleDownloadFolder = () => {
diff --git a/src/frontend/src/pages/MainPage/components/myCollectionComponent/components/inputSearchComponent/index.tsx b/src/frontend/src/pages/MainPage/components/myCollectionComponent/components/inputSearchComponent/index.tsx
index 77d7775fd..8619cb2d5 100644
--- a/src/frontend/src/pages/MainPage/components/myCollectionComponent/components/inputSearchComponent/index.tsx
+++ b/src/frontend/src/pages/MainPage/components/myCollectionComponent/components/inputSearchComponent/index.tsx
@@ -1,7 +1,7 @@
 import { ChangeEvent, KeyboardEvent } from "react";
+import ForwardedIconComponent from "../../../../../../components/genericIconComponent";
 import { Input } from "../../../../../../components/ui/input";
 import useFlowsManagerStore from "../../../../../../stores/flowsManagerStore";
-import ForwardedIconComponent from "../../../../../../components/genericIconComponent";
 
 type InputSearchComponentProps = {
   loading: boolean;
@@ -23,7 +23,7 @@ const InputSearchComponent = ({
   const pagePath = window.location.pathname;
   const allFlows = useFlowsManagerStore((state) => state.allFlows);
   const searchFlowsComponents = useFlowsManagerStore(
-    (state) => state.searchFlowsComponents,
+    (state) => state.searchFlowsComponents
   );
 
   const disableInputSearch =
diff --git a/src/frontend/src/pages/MainPage/pages/mainPage/index.tsx b/src/frontend/src/pages/MainPage/pages/mainPage/index.tsx
index e9dc14137..1511e113f 100644
--- a/src/frontend/src/pages/MainPage/pages/mainPage/index.tsx
+++ b/src/frontend/src/pages/MainPage/pages/mainPage/index.tsx
@@ -16,7 +16,7 @@ import useDropdownOptions from "../../hooks/use-dropdown-options";
 export default function HomePage(): JSX.Element {
   const uploadFlow = useFlowsManagerStore((state) => state.uploadFlow);
   const setCurrentFlowId = useFlowsManagerStore(
-    (state) => state.setCurrentFlowId,
+    (state) => state.setCurrentFlowId
   );
 
   const location = useLocation();
diff --git a/src/frontend/src/pages/MainPage/utils/handle-download-folder.ts b/src/frontend/src/pages/MainPage/utils/handle-download-folder.ts
index 6817622d0..d6a8e957c 100644
--- a/src/frontend/src/pages/MainPage/utils/handle-download-folder.ts
+++ b/src/frontend/src/pages/MainPage/utils/handle-download-folder.ts
@@ -11,7 +11,7 @@ export function handleDownloadFolderFn(folderId: string) {
     data.folder_description = folder?.description || "";
 
     const jsonString = `data:text/json;chatset=utf-8,${encodeURIComponent(
-      JSON.stringify(data),
+      JSON.stringify(data)
     )}`;
 
     const link = document.createElement("a");
diff --git a/src/frontend/src/pages/SettingsPage/index.tsx b/src/frontend/src/pages/SettingsPage/index.tsx
index 4d501ab03..d956f20f4 100644
--- a/src/frontend/src/pages/SettingsPage/index.tsx
+++ b/src/frontend/src/pages/SettingsPage/index.tsx
@@ -8,7 +8,7 @@ import useFlowsManagerStore from "../../stores/flowsManagerStore";
 export default function SettingsPage(): JSX.Element {
   const pathname = location.pathname;
   const setCurrentFlowId = useFlowsManagerStore(
-    (state) => state.setCurrentFlowId,
+    (state) => state.setCurrentFlowId
   );
   useEffect(() => {
     setCurrentFlowId("");
@@ -25,7 +25,6 @@ export default function SettingsPage(): JSX.Element {
         />
       ),
     },
-
     {
       title: "Global Variables",
       href: "/settings/global-variables",
@@ -36,6 +35,16 @@ export default function SettingsPage(): JSX.Element {
         />
       ),
     },
+    {
+      title: "API Keys",
+      href: "/settings/api-keys",
+      icon: (
+        <ForwardedIconComponent
+          name="Key"
+          className="w-4 flex-shrink-0 justify-start stroke-[1.5]"
+        />
+      ),
+    },
     {
       title: "Shortcuts",
       href: "/settings/shortcuts",
diff --git a/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/components/ApiKeyHeader/index.tsx b/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/components/ApiKeyHeader/index.tsx
new file mode 100644
index 000000000..cdd7c7c27
--- /dev/null
+++ b/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/components/ApiKeyHeader/index.tsx
@@ -0,0 +1,58 @@
+import ForwardedIconComponent from "../../../../../../components/genericIconComponent";
+import { Button } from "../../../../../../components/ui/button";
+import { API_PAGE_PARAGRAPH } from "../../../../../../constants/constants";
+import SecretKeyModal from "../../../../../../modals/secretKeyModal";
+import { cn } from "../../../../../../utils/utils";
+
+type ApiKeyHeaderComponentProps = {
+  selectedRows: string[];
+  handleDeleteKey: () => void;
+  fetchApiKeys: () => void;
+  userId: string;
+};
+const ApiKeyHeaderComponent = ({
+  selectedRows,
+  handleDeleteKey,
+  fetchApiKeys,
+  userId,
+}: ApiKeyHeaderComponentProps) => {
+  return (
+    <>
+      <div className="flex w-full items-center justify-between gap-4 space-y-0.5">
+        <div className="flex w-full flex-col">
+          <h2 className="flex items-center text-lg font-semibold tracking-tight">
+            API Keys
+            <ForwardedIconComponent
+              name="Key"
+              className="ml-2 h-5 w-5 text-primary"
+            />
+          </h2>
+          <p className="text-sm text-muted-foreground">{API_PAGE_PARAGRAPH}</p>
+        </div>
+        <div className="flex flex-shrink-0 items-center gap-2">
+          <Button
+            data-testid="api-key-button-store"
+            variant="primary"
+            className="group px-2"
+            disabled={selectedRows.length === 0}
+            onClick={handleDeleteKey}
+          >
+            <ForwardedIconComponent
+              name="Trash2"
+              className={cn(
+                "h-5 w-5 text-destructive group-disabled:text-primary",
+              )}
+            />
+          </Button>
+          <SecretKeyModal data={userId} onCloseModal={fetchApiKeys}>
+            <Button data-testid="api-key-button-store" variant="primary">
+              <ForwardedIconComponent name="Plus" className="mr-2 w-4" />
+              Add New
+            </Button>
+          </SecretKeyModal>
+        </div>
+      </div>
+    </>
+  );
+};
+export default ApiKeyHeaderComponent;
diff --git a/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/helpers/column-defs.ts b/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/helpers/column-defs.ts
new file mode 100644
index 000000000..9ea7af469
--- /dev/null
+++ b/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/helpers/column-defs.ts
@@ -0,0 +1,40 @@
+import TableAutoCellRender from "../../../../../components/tableComponent/components/tableAutoCellRender";
+
+export const getColumnDefs = () => {
+  return [
+    {
+      headerCheckboxSelection: true,
+      checkboxSelection: true,
+      showDisabledCheckboxes: true,
+      headerName: "Name",
+      field: "name",
+      cellRenderer: TableAutoCellRender,
+      flex: 2,
+    },
+    {
+      headerName: "Key",
+      field: "api_key",
+      cellRenderer: TableAutoCellRender,
+      flex: 1,
+    },
+    {
+      headerName: "Created",
+      field: "created_at",
+      cellRenderer: TableAutoCellRender,
+      flex: 1,
+    },
+    {
+      headerName: "Last Used",
+      field: "last_used_at",
+      cellRenderer: TableAutoCellRender,
+      flex: 1,
+    },
+    {
+      headerName: "Total Uses",
+      field: "total_uses",
+      cellRenderer: TableAutoCellRender,
+      flex: 1,
+      resizable: false,
+    },
+  ];
+};
diff --git a/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/hooks/use-api-keys.tsx b/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/hooks/use-api-keys.tsx
new file mode 100644
index 000000000..8af9b4a0b
--- /dev/null
+++ b/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/hooks/use-api-keys.tsx
@@ -0,0 +1,26 @@
+import { getApiKey } from "../../../../../controllers/API";
+
+const useApiKeys = (userData, setLoadingKeys, keysList, setUserId) => {
+  const fetchApiKeys = () => {
+    setLoadingKeys(true);
+    getApiKey()
+      .then((keys) => {
+        keysList.current = keys["api_keys"].map((apikey) => ({
+          ...apikey,
+          name: apikey.name && apikey.name !== "" ? apikey.name : "Untitled",
+          last_used_at: apikey.last_used_at ?? "Never",
+        }));
+        setUserId(keys["user_id"]);
+        setLoadingKeys(false);
+      })
+      .catch((error) => {
+        setLoadingKeys(false);
+      });
+  };
+
+  return {
+    fetchApiKeys,
+  };
+};
+
+export default useApiKeys;
diff --git a/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/hooks/use-handle-delete-key.tsx b/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/hooks/use-handle-delete-key.tsx
new file mode 100644
index 000000000..74d5dae99
--- /dev/null
+++ b/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/hooks/use-handle-delete-key.tsx
@@ -0,0 +1,42 @@
+import {
+  DEL_KEY_ERROR_ALERT,
+  DEL_KEY_ERROR_ALERT_PLURAL,
+  DEL_KEY_SUCCESS_ALERT,
+  DEL_KEY_SUCCESS_ALERT_PLURAL,
+} from "../../../../../constants/alerts_constants";
+import { deleteApiKey } from "../../../../../controllers/API";
+
+const useDeleteApiKeys = (
+  selectedRows,
+  resetFilter,
+  setSuccessData,
+  setErrorData,
+) => {
+  const handleDeleteKey = () => {
+    Promise.all(selectedRows.map((selectedRow) => deleteApiKey(selectedRow)))
+      .then(() => {
+        resetFilter();
+        setSuccessData({
+          title:
+            selectedRows.length === 1
+              ? DEL_KEY_SUCCESS_ALERT
+              : DEL_KEY_SUCCESS_ALERT_PLURAL,
+        });
+      })
+      .catch((error) => {
+        setErrorData({
+          title:
+            selectedRows.length === 1
+              ? DEL_KEY_ERROR_ALERT
+              : DEL_KEY_ERROR_ALERT_PLURAL,
+          list: [error?.response?.data?.detail],
+        });
+      });
+  };
+
+  return {
+    handleDeleteKey,
+  };
+};
+
+export default useDeleteApiKeys;
diff --git a/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/index.tsx b/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/index.tsx
new file mode 100644
index 000000000..8efa2e3f9
--- /dev/null
+++ b/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/index.tsx
@@ -0,0 +1,75 @@
+import { SelectionChangedEvent } from "ag-grid-community";
+import { useContext, useEffect, useRef, useState } from "react";
+import TableComponent from "../../../../components/tableComponent";
+import { Card, CardContent } from "../../../../components/ui/card";
+import { AuthContext } from "../../../../contexts/authContext";
+import useAlertStore from "../../../../stores/alertStore";
+import ApiKeyHeaderComponent from "./components/ApiKeyHeader";
+import { getColumnDefs } from "./helpers/column-defs";
+import useApiKeys from "./hooks/use-api-keys";
+import useDeleteApiKeys from "./hooks/use-handle-delete-key";
+
+export default function ApiKeysPage() {
+  const [loadingKeys, setLoadingKeys] = useState(true);
+  const [selectedRows, setSelectedRows] = useState<string[]>([]);
+  const setSuccessData = useAlertStore((state) => state.setSuccessData);
+  const setErrorData = useAlertStore((state) => state.setErrorData);
+  const { userData } = useContext(AuthContext);
+  const [userId, setUserId] = useState("");
+  const keysList = useRef([]);
+
+  useEffect(() => {
+    fetchApiKeys();
+  }, [userData]);
+
+  const { fetchApiKeys } = useApiKeys(
+    userData,
+    setLoadingKeys,
+    keysList,
+    setUserId,
+  );
+
+  function resetFilter() {
+    fetchApiKeys();
+  }
+
+  const { handleDeleteKey } = useDeleteApiKeys(
+    selectedRows,
+    resetFilter,
+    setSuccessData,
+    setErrorData,
+  );
+
+  const columnDefs = getColumnDefs();
+
+  return (
+    <div className="flex h-full w-full flex-col justify-between gap-6">
+      <ApiKeyHeaderComponent
+        selectedRows={selectedRows}
+        handleDeleteKey={handleDeleteKey}
+        fetchApiKeys={fetchApiKeys}
+        userId={userId}
+      />
+
+      <div className="flex h-full w-full flex-col justify-between">
+        <Card x-chunk="dashboard-04-chunk-2" className="h-full pt-4">
+          <CardContent className="h-full">
+            <TableComponent
+              overlayNoRowsTemplate="No data available"
+              onSelectionChanged={(event: SelectionChangedEvent) => {
+                setSelectedRows(
+                  event.api.getSelectedRows().map((row) => row.id),
+                );
+              }}
+              rowSelection="multiple"
+              suppressRowClickSelection={true}
+              pagination={true}
+              columnDefs={columnDefs}
+              rowData={keysList.current}
+            />
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}
diff --git a/src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/PasswordForm/index.tsx b/src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/PasswordForm/index.tsx
index 28edb2f09..d99752e7b 100644
--- a/src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/PasswordForm/index.tsx
+++ b/src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/PasswordForm/index.tsx
@@ -17,7 +17,7 @@ type PasswordFormComponentProps = {
   handlePatchPassword: (
     password: string,
     cnfPassword: string,
-    handleInput: any,
+    handleInput: any
   ) => void;
 };
 const PasswordFormComponent = ({
diff --git a/src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/StoreApiKeyForm/index.tsx b/src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/StoreApiKeyForm/index.tsx
index 5bc5ea38b..1fbf34024 100644
--- a/src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/StoreApiKeyForm/index.tsx
+++ b/src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/StoreApiKeyForm/index.tsx
@@ -47,8 +47,8 @@ const StoreApiKeyFormComponent = ({
               {(hasApiKey && !validApiKey
                 ? INVALID_API_KEY
                 : !hasApiKey
-                  ? NO_API_KEY
-                  : "") + INSERT_API_KEY}
+                ? NO_API_KEY
+                : "") + INSERT_API_KEY}
             </CardDescription>
           </CardHeader>
           <CardContent>
diff --git a/src/frontend/src/pages/SettingsPage/pages/GeneralPage/index.tsx b/src/frontend/src/pages/SettingsPage/pages/GeneralPage/index.tsx
index 718097152..494a11eb8 100644
--- a/src/frontend/src/pages/SettingsPage/pages/GeneralPage/index.tsx
+++ b/src/frontend/src/pages/SettingsPage/pages/GeneralPage/index.tsx
@@ -20,13 +20,13 @@ import StoreApiKeyFormComponent from "./components/StoreApiKeyForm";
 
 export default function GeneralPage() {
   const setCurrentFlowId = useFlowsManagerStore(
-    (state) => state.setCurrentFlowId,
+    (state) => state.setCurrentFlowId
   );
 
   const { scrollId } = useParams();
 
   const [inputState, setInputState] = useState<patchUserInputStateType>(
-    CONTROL_PATCH_USER_STATE,
+    CONTROL_PATCH_USER_STATE
   );
 
   const { autoLogin } = useContext(AuthContext);
@@ -47,14 +47,14 @@ export default function GeneralPage() {
   const { handlePatchPassword } = usePatchPassword(
     userData,
     setSuccessData,
-    setErrorData,
+    setErrorData
   );
 
   const { handlePatchGradient } = usePatchGradient(
     setSuccessData,
     setErrorData,
     userData,
-    setUserData,
+    setUserData
   );
 
   useScrollToElement(scrollId, setCurrentFlowId);
@@ -64,7 +64,7 @@ export default function GeneralPage() {
     setErrorData,
     setHasApiKey,
     setValidApiKey,
-    setLoadingApiKey,
+    setLoadingApiKey
   );
 
   function handleInput({
diff --git a/src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx b/src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx
index fab532e9f..d33761a17 100644
--- a/src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx
+++ b/src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx
@@ -16,13 +16,13 @@ import { cn } from "../../../../utils/utils";
 
 export default function GlobalVariablesPage() {
   const globalVariablesEntries = useGlobalVariablesStore(
-    (state) => state.globalVariablesEntries,
+    (state) => state.globalVariablesEntries
   );
   const removeGlobalVariable = useGlobalVariablesStore(
-    (state) => state.removeGlobalVariable,
+    (state) => state.removeGlobalVariable
   );
   const globalVariables = useGlobalVariablesStore(
-    (state) => state.globalVariables,
+    (state) => state.globalVariables
   );
   const setErrorData = useAlertStore((state) => state.setErrorData);
   const getVariableId = useGlobalVariablesStore((state) => state.getVariableId);
@@ -154,7 +154,7 @@ export default function GlobalVariablesPage() {
             <IconComponent
               name="Trash2"
               className={cn(
-                "h-5 w-5 text-destructive group-disabled:text-primary",
+                "h-5 w-5 text-destructive group-disabled:text-primary"
               )}
             />
           </Button>
@@ -174,7 +174,7 @@ export default function GlobalVariablesPage() {
               overlayNoRowsTemplate="No data available"
               onSelectionChanged={(event: SelectionChangedEvent) => {
                 setSelectedRows(
-                  event.api.getSelectedRows().map((row) => row.name),
+                  event.api.getSelectedRows().map((row) => row.name)
                 );
               }}
               rowSelection="multiple"
diff --git a/src/frontend/src/pages/SettingsPage/pages/messagesPage/components/headerMessages/index.tsx b/src/frontend/src/pages/SettingsPage/pages/messagesPage/components/headerMessages/index.tsx
index fc88edbf7..339a1a7bd 100644
--- a/src/frontend/src/pages/SettingsPage/pages/messagesPage/components/headerMessages/index.tsx
+++ b/src/frontend/src/pages/SettingsPage/pages/messagesPage/components/headerMessages/index.tsx
@@ -37,7 +37,7 @@ const HeaderMessagesComponent = ({
             <ForwardedIconComponent
               name="Trash2"
               className={cn(
-                "h-5 w-5 text-destructive group-disabled:text-primary",
+                "h-5 w-5 text-destructive group-disabled:text-primary"
               )}
             />
           </Button>
diff --git a/src/frontend/src/pages/SettingsPage/pages/messagesPage/hooks/use-remove-messages.tsx b/src/frontend/src/pages/SettingsPage/pages/messagesPage/hooks/use-remove-messages.tsx
index d7f4d5202..f4de52cbb 100644
--- a/src/frontend/src/pages/SettingsPage/pages/messagesPage/hooks/use-remove-messages.tsx
+++ b/src/frontend/src/pages/SettingsPage/pages/messagesPage/hooks/use-remove-messages.tsx
@@ -5,7 +5,7 @@ const useRemoveMessages = (
   setSelectedRows,
   setSuccessData,
   setErrorData,
-  selectedRows,
+  selectedRows
 ) => {
   const deleteMessages = useMessagesStore((state) => state.removeMessages);
 
diff --git a/src/frontend/src/pages/SettingsPage/pages/messagesPage/hooks/use-updateMessage.tsx b/src/frontend/src/pages/SettingsPage/pages/messagesPage/hooks/use-updateMessage.tsx
index 7165a3cc5..3287c7170 100644
--- a/src/frontend/src/pages/SettingsPage/pages/messagesPage/hooks/use-updateMessage.tsx
+++ b/src/frontend/src/pages/SettingsPage/pages/messagesPage/hooks/use-updateMessage.tsx
@@ -1,6 +1,6 @@
+import { updateMessageApi } from "../../../../../controllers/API";
 import { useMessagesStore } from "../../../../../stores/messagesStore";
 import { Message } from "../../../../../types/messages";
-import { updateMessageApi } from "../../../../../controllers/API";
 
 const useUpdateMessage = (setSuccessData, setErrorData) => {
   const updateMessage = useMessagesStore((state) => state.updateMessage);
diff --git a/src/frontend/src/pages/SettingsPage/pages/messagesPage/index.tsx b/src/frontend/src/pages/SettingsPage/pages/messagesPage/index.tsx
index dac957d9a..2fff6f360 100644
--- a/src/frontend/src/pages/SettingsPage/pages/messagesPage/index.tsx
+++ b/src/frontend/src/pages/SettingsPage/pages/messagesPage/index.tsx
@@ -27,7 +27,7 @@ export default function MessagesPage() {
     setSelectedRows,
     setSuccessData,
     setErrorData,
-    selectedRows,
+    selectedRows
   );
 
   const { handleUpdate } = useUpdateMessage(setSuccessData, setErrorData);
@@ -64,7 +64,7 @@ export default function MessagesPage() {
               overlayNoRowsTemplate="No data available"
               onSelectionChanged={(event: SelectionChangedEvent) => {
                 setSelectedRows(
-                  event.api.getSelectedRows().map((row) => row.index),
+                  event.api.getSelectedRows().map((row) => row.index)
                 );
               }}
               rowSelection="multiple"
diff --git a/src/frontend/src/pages/StorePage/index.tsx b/src/frontend/src/pages/StorePage/index.tsx
index 2fc401d8a..80b842db7 100644
--- a/src/frontend/src/pages/StorePage/index.tsx
+++ b/src/frontend/src/pages/StorePage/index.tsx
@@ -6,7 +6,6 @@ import PageLayout from "../../components/pageLayout";
 import ShadTooltip from "../../components/shadTooltipComponent";
 import { SkeletonCardComponent } from "../../components/skeletonCardComponent";
 import { Button } from "../../components/ui/button";
-import { Input } from "../../components/ui/input";
 
 import { Link, useNavigate, useParams } from "react-router-dom";
 import PaginatorComponent from "../../components/paginatorComponent";
@@ -47,7 +46,7 @@ export default function StorePage(): JSX.Element {
 
   const setErrorData = useAlertStore((state) => state.setErrorData);
   const setCurrentFlowId = useFlowsManagerStore(
-    (state) => state.setCurrentFlowId,
+    (state) => state.setCurrentFlowId
   );
   const currentFlowId = useFlowsManagerStore((state) => state.currentFlowId);
   const [loading, setLoading] = useState(true);
@@ -144,7 +143,7 @@ export default function StorePage(): JSX.Element {
           setTotalRowsCount(
             filteredCategories?.length === 0
               ? Number(res?.count ?? 0)
-              : res?.results?.length ?? 0,
+              : res?.results?.length ?? 0
           );
         }
       })
@@ -184,7 +183,7 @@ export default function StorePage(): JSX.Element {
           disabled={loading}
           className={cn(
             `${!validApiKey ? "animate-pulse border-error" : ""}`,
-            loading ? "cursor-not-allowed" : "",
+            loading ? "cursor-not-allowed" : ""
           )}
           variant="primary"
           onClick={() => {
diff --git a/src/frontend/src/routes.tsx b/src/frontend/src/routes.tsx
index 44697b73a..cf7fcdc7a 100644
--- a/src/frontend/src/routes.tsx
+++ b/src/frontend/src/routes.tsx
@@ -10,24 +10,26 @@ import MessagesPage from "./pages/SettingsPage/pages/messagesPage";
 
 const AdminPage = lazy(() => import("./pages/AdminPage"));
 const LoginAdminPage = lazy(() => import("./pages/AdminPage/LoginPage"));
-const ApiKeysPage = lazy(() => import("./pages/ApiKeysPage"));
+const ApiKeysPage = lazy(
+  () => import("./pages/SettingsPage/pages/ApiKeysPage"),
+);
 const DeleteAccountPage = lazy(() => import("./pages/DeleteAccountPage"));
 const FlowPage = lazy(() => import("./pages/FlowPage"));
 const LoginPage = lazy(() => import("./pages/LoginPage"));
 const MyCollectionComponent = lazy(
-  () => import("./pages/MainPage/components/myCollectionComponent"),
+  () => import("./pages/MainPage/components/myCollectionComponent")
 );
 const HomePage = lazy(() => import("./pages/MainPage/pages/mainPage"));
 const PlaygroundPage = lazy(() => import("./pages/Playground"));
 const SettingsPage = lazy(() => import("./pages/SettingsPage"));
 const GeneralPage = lazy(
-  () => import("./pages/SettingsPage/pages/GeneralPage"),
+  () => import("./pages/SettingsPage/pages/GeneralPage")
 );
 const GlobalVariablesPage = lazy(
-  () => import("./pages/SettingsPage/pages/GlobalVariablesPage"),
+  () => import("./pages/SettingsPage/pages/GlobalVariablesPage")
 );
 const ShortcutsPage = lazy(
-  () => import("./pages/SettingsPage/pages/ShortcutsPage"),
+  () => import("./pages/SettingsPage/pages/ShortcutsPage")
 );
 const SignUp = lazy(() => import("./pages/SignUpPage"));
 const StorePage = lazy(() => import("./pages/StorePage"));
@@ -77,6 +79,7 @@ const Router = () => {
         >
           <Route index element={<Navigate replace to={"general"} />} />
           <Route path="global-variables" element={<GlobalVariablesPage />} />
+          <Route path="api-keys" element={<ApiKeysPage />} />
           <Route path="general/:scrollId?" element={<GeneralPage />} />
           <Route path="shortcuts" element={<ShortcutsPage />} />
           <Route path="messages" element={<MessagesPage />} />
@@ -189,14 +192,6 @@ const Router = () => {
               </ProtectedRoute>
             }
           ></Route>
-          <Route
-            path="api-keys"
-            element={
-              <ProtectedRoute>
-                <ApiKeysPage />
-              </ProtectedRoute>
-            }
-          ></Route>
         </Route>
       </Routes>
     </Suspense>
diff --git a/src/frontend/src/stores/darkStore.ts b/src/frontend/src/stores/darkStore.ts
index 8c9c10951..79f5518da 100644
--- a/src/frontend/src/stores/darkStore.ts
+++ b/src/frontend/src/stores/darkStore.ts
@@ -36,7 +36,7 @@ export const useDarkStore = create<DarkStoreType>((set, get) => ({
         window.localStorage.setItem("githubStars", res?.toString() ?? "0");
         window.localStorage.setItem(
           "githubStarsLastUpdated",
-          new Date().toString(),
+          new Date().toString()
         );
         set(() => ({ stars: res, lastUpdated: new Date() }));
       });
diff --git a/src/frontend/src/stores/flowStore.ts b/src/frontend/src/stores/flowStore.ts
index 6760a427f..c76cf1361 100644
--- a/src/frontend/src/stores/flowStore.ts
+++ b/src/frontend/src/stores/flowStore.ts
@@ -24,7 +24,6 @@ import {
 } from "../types/flow";
 import {
   ChatOutputType,
-  FlowPoolObjectType,
   FlowStoreType,
   VertexLayerElementType,
   chatInputType,
@@ -79,7 +78,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
   updateFlowPool: (
     nodeId: string,
     data: VertexBuildTypeAPI | ChatOutputType | chatInputType,
-    buildId?: string,
+    buildId?: string
   ) => {
     let newFlowPool = cloneDeep({ ...get().flowPool });
     if (!newFlowPool[nodeId]) {
@@ -172,7 +171,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
       flowsManager.autoSaveCurrentFlow(
         newChange,
         newEdges,
-        get().reactFlowInstance?.getViewport() ?? { x: 0, y: 0, zoom: 1 },
+        get().reactFlowInstance?.getViewport() ?? { x: 0, y: 0, zoom: 1 }
       );
     }
   },
@@ -188,7 +187,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
       flowsManager.autoSaveCurrentFlow(
         get().nodes,
         newChange,
-        get().reactFlowInstance?.getViewport() ?? { x: 0, y: 0, zoom: 1 },
+        get().reactFlowInstance?.getViewport() ?? { x: 0, y: 0, zoom: 1 }
       );
     }
   },
@@ -206,7 +205,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
           return newChange;
         }
         return node;
-      }),
+      })
     );
   },
   getNode: (id: string) => {
@@ -217,8 +216,8 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
       get().nodes.filter((node) =>
         typeof nodeId === "string"
           ? node.id !== nodeId
-          : !nodeId.includes(node.id),
-      ),
+          : !nodeId.includes(node.id)
+      )
     );
   },
   deleteEdge: (edgeId) => {
@@ -226,8 +225,8 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
       get().edges.filter((edge) =>
         typeof edgeId === "string"
           ? edge.id !== edgeId
-          : !edgeId.includes(edge.id),
-      ),
+          : !edgeId.includes(edge.id)
+      )
     );
   },
   paste: (selection, position) => {
@@ -293,7 +292,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
       let source = idsMap[edge.source];
       let target = idsMap[edge.target];
       const sourceHandleObject: sourceHandleType = scapeJSONParse(
-        edge.sourceHandle!,
+        edge.sourceHandle!
       );
       let sourceHandle = scapedJSONStringfy({
         ...sourceHandleObject,
@@ -303,7 +302,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
 
       edge.data.sourceHandle = sourceHandleObject;
       const targetHandleObject: targetHandleType = scapeJSONParse(
-        edge.targetHandle!,
+        edge.targetHandle!
       );
       let targetHandle = scapedJSONStringfy({
         ...targetHandleObject,
@@ -324,7 +323,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
           className: "stroke-gray-900 ",
           selected: false,
         },
-        newEdges.map((edge) => ({ ...edge, selected: false })),
+        newEdges.map((edge) => ({ ...edge, selected: false }))
       );
     });
     get().setEdges(newEdges);
@@ -343,10 +342,10 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
       });
 
       const newNodes = get().nodes.filter(
-        (node) => !nodesIdsSelected.includes(node.id),
+        (node) => !nodesIdsSelected.includes(node.id)
       );
       const newEdges = get().edges.filter(
-        (edge) => !edgesIdsSelected.includes(edge.id),
+        (edge) => !edgesIdsSelected.includes(edge.id)
       );
 
       set({ nodes: newNodes, edges: newEdges });
@@ -404,7 +403,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
           style: { stroke: "#555" },
           className: "stroke-foreground stroke-connection",
         },
-        oldEdges,
+        oldEdges
       );
 
       return newEdges;
@@ -414,7 +413,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
       .autoSaveCurrentFlow(
         get().nodes,
         newEdges,
-        get().reactFlowInstance?.getViewport() ?? { x: 0, y: 0, zoom: 1 },
+        get().reactFlowInstance?.getViewport() ?? { x: 0, y: 0, zoom: 1 }
       );
   },
   unselectAll: () => {
@@ -449,7 +448,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
     function validateSubgraph(nodes: string[]) {
       const errorsObjs = validateNodes(
         get().nodes.filter((node) => nodes.includes(node.id)),
-        get().edges,
+        get().edges
       );
 
       const errors = errorsObjs.map((obj) => obj.errors).flat();
@@ -468,13 +467,13 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
     function handleBuildUpdate(
       vertexBuildData: VertexBuildTypeAPI,
       status: BuildStatus,
-      runId: string,
+      runId: string
     ) {
       if (vertexBuildData && vertexBuildData.inactivated_vertices) {
         get().removeFromVerticesBuild(vertexBuildData.inactivated_vertices);
         get().updateBuildStatus(
           vertexBuildData.inactivated_vertices,
-          BuildStatus.INACTIVE,
+          BuildStatus.INACTIVE
         );
       }
 
@@ -490,15 +489,14 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
 
         // next_vertices_ids should be next_vertices_ids without the inactivated vertices
         const next_vertices_ids = vertexBuildData.next_vertices_ids.filter(
-          (id) => !vertexBuildData.inactivated_vertices?.includes(id),
+          (id) => !vertexBuildData.inactivated_vertices?.includes(id)
         );
         const top_level_vertices = vertexBuildData.top_level_vertices.filter(
-          (vertex) =>
-            !vertexBuildData.inactivated_vertices?.includes(vertex.id),
+          (vertex) => !vertexBuildData.inactivated_vertices?.includes(vertex.id)
         );
         const nextVertices: VertexLayerElementType[] = zip(
           next_vertices_ids,
-          top_level_vertices,
+          top_level_vertices
         ).map(([id, reference]) => ({ id: id!, reference }));
 
         const newLayers = [
@@ -519,8 +517,8 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
       }
 
       get().addDataToFlowPool(
-        { ...vertexBuildData, run_id: runId },
-        vertexBuildData.id,
+        { ...vertexBuildData, buildId: runId },
+        vertexBuildData.id
       );
 
       useFlowStore.getState().updateBuildStatus([vertexBuildData.id], status);
@@ -529,7 +527,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
       const newFlowBuildStatus = { ...get().flowBuildStatus };
       // filter out the vertices that are not status
       const verticesToUpdate = verticesIds?.filter(
-        (id) => newFlowBuildStatus[id]?.status !== BuildStatus.BUILT,
+        (id) => newFlowBuildStatus[id]?.status !== BuildStatus.BUILT
       );
 
       if (verticesToUpdate) {
@@ -599,7 +597,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
       verticesLayers: VertexLayerElementType[][];
       runId: string;
       verticesToRun: string[];
-    } | null,
+    } | null
   ) => {
     set({ verticesBuild: vertices });
   },
@@ -624,7 +622,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
         // that are going to be built
         verticesIds: get().verticesBuild!.verticesIds.filter(
           // keep the vertices that are not in the list of vertices to remove
-          (vertex) => !vertices.includes(vertex),
+          (vertex) => !vertices.includes(vertex)
         ),
       },
     });
diff --git a/src/frontend/src/stores/flowsManagerStore.ts b/src/frontend/src/stores/flowsManagerStore.ts
index 28537a56e..f256dc14c 100644
--- a/src/frontend/src/stores/flowsManagerStore.ts
+++ b/src/frontend/src/stores/flowsManagerStore.ts
@@ -1,5 +1,5 @@
-import { cloneDeep } from "lodash";
 import * as debounce from "debounce-promise";
+import { cloneDeep } from "lodash";
 import { Edge, Node, Viewport, XYPosition } from "reactflow";
 import { create } from "zustand";
 import { SAVE_DEBOUNCE_TIME } from "../constants/constants";
@@ -87,12 +87,12 @@ const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
           if (dbData) {
             const { data, flows } = processFlows(dbData, false);
             const examples = flows.filter(
-              (flow) => flow.folder_id === starterFolderId,
+              (flow) => flow.folder_id === starterFolderId
             );
             get().setExamples(examples);
 
             const flowsWithoutStarterFolder = flows.filter(
-              (flow) => flow.folder_id !== starterFolderId,
+              (flow) => flow.folder_id !== starterFolderId
             );
 
             get().setFlows(flowsWithoutStarterFolder);
@@ -120,7 +120,7 @@ const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
     if (get().currentFlow) {
       get().saveFlow(
         { ...get().currentFlow!, data: { nodes, edges, viewport } },
-        true,
+        true
       );
     }
   },
@@ -146,7 +146,7 @@ const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
                   return updatedFlow;
                 }
                 return flow;
-              }),
+              })
             );
             //update tabs state
 
@@ -195,7 +195,7 @@ const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
     flow?: FlowType,
     override?: boolean,
     position?: XYPosition,
-    fromDragAndDrop?: boolean,
+    fromDragAndDrop?: boolean
   ): Promise<string | undefined> => {
     if (newProject) {
       let flowData = flow
@@ -211,7 +211,7 @@ const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
         const newFlow = createNewFlow(
           flowData!,
           flow!,
-          folder_id || my_collection_id!,
+          folder_id || my_collection_id!
         );
         const { id } = await saveFlowToDatabase(newFlow);
         newFlow.id = id;
@@ -234,7 +234,7 @@ const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
       const newFlow = createNewFlow(
         flowData!,
         flow!,
-        folder_id || my_collection_id!,
+        folder_id || my_collection_id!
       );
 
       const newName = addVersionToDuplicates(newFlow, get().flows);
@@ -270,7 +270,7 @@ const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
         .getState()
         .paste(
           { nodes: flow!.data!.nodes, edges: flow!.data!.edges },
-          position ?? { x: 10, y: 10 },
+          position ?? { x: 10, y: 10 }
         );
     }
   },
@@ -280,7 +280,7 @@ const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
         multipleDeleteFlowsComponents(id)
           .then(() => {
             const { data, flows } = processFlows(
-              get().flows.filter((flow) => !id.includes(flow.id)),
+              get().flows.filter((flow) => !id.includes(flow.id))
             );
             get().setFlows(flows);
             set({ isLoading: false });
@@ -300,7 +300,7 @@ const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
           deleteFlowFromDatabase(id)
             .then(() => {
               const { data, flows } = processFlows(
-                get().flows.filter((flow) => flow.id !== id),
+                get().flows.filter((flow) => flow.id !== id)
               );
               get().setFlows(flows);
               set({ isLoading: false });
@@ -322,7 +322,7 @@ const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
     return new Promise<void>((resolve) => {
       let componentFlow = get().flows.find(
         (componentFlow) =>
-          componentFlow.is_component && componentFlow.name === key,
+          componentFlow.is_component && componentFlow.name === key
       );
 
       if (componentFlow) {
@@ -370,7 +370,7 @@ const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
               fileData,
               undefined,
               position,
-              true,
+              true
             );
             resolve(id);
           }
@@ -411,7 +411,7 @@ const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
     return get().addFlow(
       true,
       createFlowComponent(component, useDarkStore.getState().version),
-      override,
+      override
     );
   },
   takeSnapshot: () => {
@@ -432,7 +432,7 @@ const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
     if (pastLength > 0) {
       past[currentFlowId] = past[currentFlowId].slice(
         pastLength - defaultOptions.maxHistorySize + 1,
-        pastLength,
+        pastLength
       );
 
       past[currentFlowId].push(newState);
diff --git a/src/frontend/src/stores/foldersStore.tsx b/src/frontend/src/stores/foldersStore.tsx
index 9edfef135..ce063e032 100644
--- a/src/frontend/src/stores/foldersStore.tsx
+++ b/src/frontend/src/stores/foldersStore.tsx
@@ -17,18 +17,18 @@ export const useFolderStore = create<FoldersStoreType>((set, get) => ({
         getFolders().then(
           (res) => {
             const foldersWithoutStarterProjects = res.filter(
-              (folder) => folder.name !== STARTER_FOLDER_NAME,
+              (folder) => folder.name !== STARTER_FOLDER_NAME
             );
 
             const starterProjects = res.find(
-              (folder) => folder.name === STARTER_FOLDER_NAME,
+              (folder) => folder.name === STARTER_FOLDER_NAME
             );
 
             set({ starterProjectId: starterProjects!.id ?? "" });
             set({ folders: foldersWithoutStarterProjects });
 
             const myCollectionId = res?.find(
-              (f) => f.name === DEFAULT_FOLDER,
+              (f) => f.name === DEFAULT_FOLDER
             )?.id;
 
             set({ myCollectionId });
@@ -45,7 +45,7 @@ export const useFolderStore = create<FoldersStoreType>((set, get) => ({
             set({ folders: [] });
             get().setLoading(false);
             reject();
-          },
+          }
         );
       }
     });
@@ -65,7 +65,7 @@ export const useFolderStore = create<FoldersStoreType>((set, get) => ({
         },
         () => {
           get().setLoadingById(false);
-        },
+        }
       );
     }
   },
diff --git a/src/frontend/src/stores/globalVariablesStore/globalVariables.ts b/src/frontend/src/stores/globalVariablesStore/globalVariables.ts
index 708f7ec09..c07813858 100644
--- a/src/frontend/src/stores/globalVariablesStore/globalVariables.ts
+++ b/src/frontend/src/stores/globalVariablesStore/globalVariables.ts
@@ -45,5 +45,5 @@ export const useGlobalVariablesStore = create<GlobalVariablesStore>(
     getVariableId: (name) => {
       return get().globalVariables[name]?.id;
     },
-  }),
+  })
 );
diff --git a/src/frontend/src/stores/messagesStore.ts b/src/frontend/src/stores/messagesStore.ts
index df1a3c15c..e0ae160eb 100644
--- a/src/frontend/src/stores/messagesStore.ts
+++ b/src/frontend/src/stores/messagesStore.ts
@@ -17,7 +17,7 @@ export const useMessagesStore = create<MessagesStoreType>((set, get) => ({
   updateMessage: (message) => {
     set(() => ({
       messages: get().messages.map((msg) =>
-        msg.index === message.index ? message : msg,
+        msg.index === message.index ? message : msg
       ),
     }));
   },
@@ -29,7 +29,7 @@ export const useMessagesStore = create<MessagesStoreType>((set, get) => ({
       try {
         set((state) => {
           const updatedMessages = state.messages.filter(
-            (msg) => !ids.includes(msg.index),
+            (msg) => !ids.includes(msg.index)
           );
           get().setMessages(updatedMessages);
           resolve(updatedMessages);
diff --git a/src/frontend/src/style/classes.css b/src/frontend/src/style/classes.css
index 29140e7fa..08226b832 100644
--- a/src/frontend/src/style/classes.css
+++ b/src/frontend/src/style/classes.css
@@ -100,3 +100,13 @@ select:-webkit-autofill:focus {
 .json-view-dark {
   background-color: #141924 !important;
 }
+
+.ag-row .ag-cell {
+  display: flex;
+  align-items: center;
+}
+.ag-cell {
+  line-height: 1.25rem;
+  padding-top: 0.675rem;
+  padding-bottom: 0.675rem;
+}
diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts
index ab2f23028..ad9770eb3 100644
--- a/src/frontend/src/types/components/index.ts
+++ b/src/frontend/src/types/components/index.ts
@@ -38,7 +38,7 @@ export type InputComponentType = {
 export type ToggleComponentType = {
   enabled: boolean;
   setEnabled: (state: boolean) => void;
-  disabled: boolean | undefined;
+  disabled?: boolean | undefined;
   size: "small" | "medium" | "large";
   id?: string;
   editNode?: boolean;
@@ -411,11 +411,7 @@ export type UserInputType = {
 };
 
 export type ApiKeyType = {
-  title: string;
-  cancelText: string;
-  confirmationText: string;
   children: ReactElement;
-  icon: string;
   data?: any;
   onCloseModal: () => void;
 };
@@ -545,7 +541,7 @@ export type nodeToolbarPropsType = {
   updateNodeCode?: (
     newNodeClass: APIClassType,
     code: string,
-    name: string,
+    name: string
   ) => void;
   setShowState: (show: boolean | SetStateAction<boolean>) => void;
   isOutdated?: boolean;
@@ -571,7 +567,7 @@ export type iconsType = {
 
 export type modalHeaderType = {
   children: ReactNode;
-  description: string | null;
+  description: string | JSX.Element | null;
 };
 
 export type codeAreaModalPropsType = {
@@ -595,7 +591,7 @@ export type chatMessagePropsType = {
   updateChat: (
     chat: ChatMessageType,
     message: string,
-    stream_url?: string,
+    stream_url?: string
   ) => void;
 };
 
@@ -687,12 +683,12 @@ export type codeTabsPropsType = {
       value: string,
       node: NodeType,
       template: TemplateVariableType,
-      tweak: tweakType,
+      tweak: tweakType
     ) => string;
     buildTweakObject?: (
       tw: string,
       changes: string | string[] | boolean | number | Object[] | Object,
-      template: TemplateVariableType,
+      template: TemplateVariableType
     ) => Promise<string | void>;
   };
   activeTweaks?: boolean;
diff --git a/src/frontend/src/types/zustand/flow/index.ts b/src/frontend/src/types/zustand/flow/index.ts
index 8fd5e03fe..7868d8013 100644
--- a/src/frontend/src/types/zustand/flow/index.ts
+++ b/src/frontend/src/types/zustand/flow/index.ts
@@ -8,8 +8,8 @@ import {
   Viewport,
 } from "reactflow";
 import { BuildStatus } from "../../../constants/enums";
-import { FlowState } from "../../tabs";
 import { VertexBuildTypeAPI } from "../../api";
+import { FlowState } from "../../tabs";
 
 export type chatInputType = {
   result: string;
@@ -98,7 +98,7 @@ export type FlowStoreType = {
     state:
       | FlowState
       | undefined
-      | ((oldState: FlowState | undefined) => FlowState),
+      | ((oldState: FlowState | undefined) => FlowState)
   ) => void;
   nodes: Node[];
   edges: Edge[];
@@ -106,11 +106,11 @@ export type FlowStoreType = {
   onEdgesChange: OnEdgesChange;
   setNodes: (
     update: Node[] | ((oldState: Node[]) => Node[]),
-    skipSave?: boolean,
+    skipSave?: boolean
   ) => void;
   setEdges: (
     update: Edge[] | ((oldState: Edge[]) => Edge[]),
-    skipSave?: boolean,
+    skipSave?: boolean
   ) => void;
   setNode: (id: string, update: Node | ((oldState: Node) => Node)) => void;
   getNode: (id: string) => Node | undefined;
@@ -118,12 +118,12 @@ export type FlowStoreType = {
   deleteEdge: (edgeId: string | Array<string>) => void;
   paste: (
     selection: { nodes: any; edges: any },
-    position: { x: number; y: number; paneX?: number; paneY?: number },
+    position: { x: number; y: number; paneX?: number; paneY?: number }
   ) => void;
   lastCopiedSelection: { nodes: any; edges: any } | null;
   setLastCopiedSelection: (
     newSelection: { nodes: any; edges: any } | null,
-    isCrop?: boolean,
+    isCrop?: boolean
   ) => void;
   cleanFlow: () => void;
   setFilterEdge: (newState) => void;
@@ -150,7 +150,7 @@ export type FlowStoreType = {
       verticesLayers: VertexLayerElementType[][];
       runId: string;
       verticesToRun: string[];
-    } | null,
+    } | null
   ) => void;
   addToVerticesBuild: (vertices: string[]) => void;
   removeFromVerticesBuild: (vertices: string[]) => void;
@@ -168,7 +168,7 @@ export type FlowStoreType = {
   updateFlowPool: (
     nodeId: string,
     data: VertexBuildTypeAPI | ChatOutputType | chatInputType,
-    buildId?: string,
+    buildId?: string
   ) => void;
   getNodePosition: (nodeId: string) => { x: number; y: number };
 };
diff --git a/src/frontend/src/types/zustand/flowsManager/index.ts b/src/frontend/src/types/zustand/flowsManager/index.ts
index aaafebb7b..e0770626e 100644
--- a/src/frontend/src/types/zustand/flowsManager/index.ts
+++ b/src/frontend/src/types/zustand/flowsManager/index.ts
@@ -17,12 +17,12 @@ export type FlowsManagerStoreType = {
   saveFlow: (flow: FlowType, silent?: boolean) => Promise<void> | undefined;
   saveFlowDebounce: (
     flow: FlowType,
-    silent?: boolean,
+    silent?: boolean
   ) => Promise<void> | undefined;
   autoSaveCurrentFlow: (
     nodes: Node[],
     edges: Edge[],
-    viewport: Viewport,
+    viewport: Viewport
   ) => void;
   uploadFlows: () => Promise<void>;
   uploadFlow: ({
@@ -41,13 +41,13 @@ export type FlowsManagerStoreType = {
     flow?: FlowType,
     override?: boolean,
     position?: XYPosition,
-    fromDragAndDrop?: boolean,
+    fromDragAndDrop?: boolean
   ) => Promise<string | undefined>;
   deleteComponent: (key: string) => Promise<void>;
   removeFlow: (id: string | string[]) => Promise<void>;
   saveComponent: (
     component: any,
-    override: boolean,
+    override: boolean
   ) => Promise<string | undefined>;
   undo: () => void;
   redo: () => void;
diff --git a/src/frontend/src/types/zustand/globalVariables/index.ts b/src/frontend/src/types/zustand/globalVariables/index.ts
index 4b178088c..90817780f 100644
--- a/src/frontend/src/types/zustand/globalVariables/index.ts
+++ b/src/frontend/src/types/zustand/globalVariables/index.ts
@@ -21,7 +21,7 @@ export type GlobalVariablesStore = {
     id: string,
     type?: string,
     default_fields?: string[],
-    value?: string,
+    value?: string
   ) => void;
   removeGlobalVariable: (name: string) => Promise<void>;
   getVariableId: (name: string) => string | undefined;
diff --git a/src/frontend/src/utils/parameterUtils.ts b/src/frontend/src/utils/parameterUtils.ts
index d1d53dde7..a1d2f2154 100644
--- a/src/frontend/src/utils/parameterUtils.ts
+++ b/src/frontend/src/utils/parameterUtils.ts
@@ -21,7 +21,7 @@ export const handleUpdateValues = async (name: string, data: NodeDataType) => {
       code,
       template,
       name,
-      data.node?.template[name]?.value,
+      data.node?.template[name]?.value
     );
     if (res.status === 200 && data.node?.template) {
       return res.data.template;
@@ -34,5 +34,5 @@ export const handleUpdateValues = async (name: string, data: NodeDataType) => {
 
 export const debouncedHandleUpdateValues = debounce(
   handleUpdateValues,
-  SAVE_DEBOUNCE_TIME,
+  SAVE_DEBOUNCE_TIME
 );
diff --git a/src/frontend/src/utils/storeUtils.ts b/src/frontend/src/utils/storeUtils.ts
index c8391b211..637e4331a 100644
--- a/src/frontend/src/utils/storeUtils.ts
+++ b/src/frontend/src/utils/storeUtils.ts
@@ -7,7 +7,7 @@ export default function cloneFLowWithParent(
   flow: FlowType,
   parent: string,
   is_component: boolean,
-  keepId = false,
+  keepId = false
 ) {
   let childFLow = cloneDeep(flow);
   childFLow.parent = parent;
diff --git a/src/frontend/src/utils/styleUtils.ts b/src/frontend/src/utils/styleUtils.ts
index 84251ea55..54bbda3a6 100644
--- a/src/frontend/src/utils/styleUtils.ts
+++ b/src/frontend/src/utils/styleUtils.ts
@@ -53,7 +53,6 @@ import {
   FileType2,
   FileUp,
   FlaskConical,
-  ScanEye,
   FolderIcon,
   FolderPlus,
   FolderPlusIcon,
@@ -104,12 +103,15 @@ import {
   Redo,
   RefreshCcw,
   Repeat,
+  RotateCcw,
   Save,
   SaveAll,
+  ScanEye,
   Scissors,
   ScreenShare,
   ScrollText,
   Search,
+  Settings,
   Settings2,
   Share,
   Share2,
@@ -144,8 +146,6 @@ import {
   X,
   XCircle,
   Zap,
-  RotateCcw,
-  Settings,
 } from "lucide-react";
 import { FaApple, FaDiscord, FaGithub } from "react-icons/fa";
 import { AWSIcon } from "../icons/AWS";
@@ -156,8 +156,8 @@ import { AzureIcon } from "../icons/Azure";
 import { BingIcon } from "../icons/Bing";
 import { BotMessageSquareIcon } from "../icons/BotMessageSquare";
 import { ChromaIcon } from "../icons/ChromaIcon";
-import { CouchbaseIcon } from "../icons/Couchbase";
 import { CohereIcon } from "../icons/Cohere";
+import { CouchbaseIcon } from "../icons/Couchbase";
 import { ElasticsearchIcon } from "../icons/ElasticsearchStore";
 import { EvernoteIcon } from "../icons/Evernote";
 import { FBIcon } from "../icons/FacebookMessenger";
@@ -188,6 +188,7 @@ import { SearxIcon } from "../icons/Searx";
 import { ShareIcon } from "../icons/Share";
 import { Share2Icon } from "../icons/Share2";
 import SvgSlackIcon from "../icons/Slack/SlackIcon";
+import { Streamlit } from "../icons/Streamlit";
 import { VectaraIcon } from "../icons/VectaraIcon";
 import { VertexAIIcon } from "../icons/VertexAI";
 import { WeaviateIcon } from "../icons/Weaviate";
@@ -532,4 +533,5 @@ export const nodeIconsLucide: iconsType = {
   Discord: FaDiscord,
   RotateCcw,
   Settings,
+  Streamlit,
 };
diff --git a/src/frontend/src/utils/utils.ts b/src/frontend/src/utils/utils.ts
index 388660844..299f441f4 100644
--- a/src/frontend/src/utils/utils.ts
+++ b/src/frontend/src/utils/utils.ts
@@ -1,7 +1,7 @@
 import { ColDef, ColGroupDef } from "ag-grid-community";
 import clsx, { ClassValue } from "clsx";
 import { twMerge } from "tailwind-merge";
-import TableAutoCellRender from "../components/tableAutoCellRender";
+import TableAutoCellRender from "../components/tableComponent/components/tableAutoCellRender";
 import { APIDataType, TemplateVariableType } from "../types/api";
 import {
   groupedObjType,
@@ -55,7 +55,7 @@ export function normalCaseToSnakeCase(str: string): string {
 
 export function toTitleCase(
   str: string | undefined,
-  isNodeField?: boolean,
+  isNodeField?: boolean
 ): string {
   if (!str) return "";
   let result = str
@@ -64,7 +64,7 @@ export function toTitleCase(
       if (isNodeField) return word;
       if (index === 0) {
         return checkUpperWords(
-          word[0].toUpperCase() + word.slice(1).toLowerCase(),
+          word[0].toUpperCase() + word.slice(1).toLowerCase()
         );
       }
       return checkUpperWords(word.toLowerCase());
@@ -77,7 +77,7 @@ export function toTitleCase(
       if (isNodeField) return word;
       if (index === 0) {
         return checkUpperWords(
-          word[0].toUpperCase() + word.slice(1).toLowerCase(),
+          word[0].toUpperCase() + word.slice(1).toLowerCase()
         );
       }
       return checkUpperWords(word.toLowerCase());
@@ -181,7 +181,7 @@ export function checkLocalStorageKey(key: string): boolean {
 
 export function IncrementObjectKey(
   object: object,
-  key: string,
+  key: string
 ): { newKey: string; increment: number } {
   let count = 1;
   const type = removeCountFromString(key);
@@ -216,7 +216,7 @@ export function groupByFamily(
   data: APIDataType,
   baseClasses: string,
   left: boolean,
-  flow?: NodeType[],
+  flow?: NodeType[]
 ): groupedObjType[] {
   const baseClassesSet = new Set(baseClasses.split("\n"));
   let arrOfPossibleInputs: Array<{
@@ -242,7 +242,7 @@ export function groupByFamily(
         baseClassesSet.has(template.type)) ||
         (template.input_types &&
           template.input_types.some((inputType) =>
-            baseClassesSet.has(inputType),
+            baseClassesSet.has(inputType)
           )))
     );
   };
@@ -262,7 +262,7 @@ export function groupByFamily(
         hasBaseClassInBaseClasses:
           foundNode?.hasBaseClassInBaseClasses ||
           nodeData.node!.base_classes.some((baseClass) =>
-            baseClassesSet.has(baseClass),
+            baseClassesSet.has(baseClass)
           ), //seta como anterior ou verifica se o node tem base class
         displayName: nodeData.node?.display_name,
       });
@@ -279,10 +279,10 @@ export function groupByFamily(
       if (!foundNode) {
         foundNode = {
           hasBaseClassInTemplate: Object.values(node!.template).some(
-            checkBaseClass,
+            checkBaseClass
           ),
           hasBaseClassInBaseClasses: node!.base_classes.some((baseClass) =>
-            baseClassesSet.has(baseClass),
+            baseClassesSet.has(baseClass)
           ),
           displayName: node?.display_name,
         };
@@ -345,14 +345,16 @@ export function freezeObject(obj: any) {
   return JSON.parse(JSON.stringify(obj));
 }
 export function isTimeStampString(str: string): boolean {
-  const timestampRegex = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(\.\d{3}Z)?$/;
-  return timestampRegex.test(str);
+  const timestampRegexA = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(\.\d{3}Z)?$/;
+  const timestampRegexB = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(\.\d{6})?$/;
+
+  return timestampRegexA.test(str) || timestampRegexB.test(str);
 }
 
 export function extractColumnsFromRows(
   rows: object[],
-  mode: "intersection" | "union" = "union",
-  excludeColumns?: Array<string>,
+  mode: "intersection" | "union",
+  excludeColumns?: Array<string>
 ): (ColDef<any> | ColGroupDef<any>)[] {
   let columnsKeys: { [key: string]: ColDef<any> | ColGroupDef<any> } = {};
   if (rows.length === 0) {
diff --git a/src/frontend/tests/end-to-end/codeAreaModalComponent.spec.ts b/src/frontend/tests/end-to-end/codeAreaModalComponent.spec.ts
index 3b2913440..577c138a3 100644
--- a/src/frontend/tests/end-to-end/codeAreaModalComponent.spec.ts
+++ b/src/frontend/tests/end-to-end/codeAreaModalComponent.spec.ts
@@ -23,7 +23,7 @@ test("CodeAreaModalComponent", async ({ page }) => {
   await page.waitForTimeout(1000);
 
   await page.getByTestId("blank-flow").click();
-  await page.waitForTimeout(1000);
+  await page.waitForTimeout(3000);
   await page.getByTestId("extended-disclosure").click();
   await page.getByPlaceholder("Search").click();
   await page.getByPlaceholder("Search").fill("python function");
diff --git a/src/frontend/tests/end-to-end/dropdownComponent.spec.ts b/src/frontend/tests/end-to-end/dropdownComponent.spec.ts
index b5ff9ef00..6c0a7dd9e 100644
--- a/src/frontend/tests/end-to-end/dropdownComponent.spec.ts
+++ b/src/frontend/tests/end-to-end/dropdownComponent.spec.ts
@@ -22,7 +22,7 @@ test("dropDownComponent", async ({ page }) => {
   await page.waitForTimeout(1000);
 
   await page.getByTestId("blank-flow").click();
-  await page.waitForTimeout(1000);
+  await page.waitForTimeout(3000);
 
   await page.getByTestId("extended-disclosure").click();
   await page.getByPlaceholder("Search").click();
@@ -62,6 +62,8 @@ test("dropDownComponent", async ({ page }) => {
     expect(false).toBeTruthy();
   }
 
+  await page.waitForTimeout(1000);
+
   await page.getByTestId("more-options-modal").click();
   await page.getByTestId("edit-button-modal").click();
 
diff --git a/src/frontend/tests/end-to-end/fileUploadComponent.spec.ts b/src/frontend/tests/end-to-end/fileUploadComponent.spec.ts
index 4cce05c83..00f761dea 100644
--- a/src/frontend/tests/end-to-end/fileUploadComponent.spec.ts
+++ b/src/frontend/tests/end-to-end/fileUploadComponent.spec.ts
@@ -23,7 +23,7 @@ test("dropDownComponent", async ({ page }) => {
   await page.waitForTimeout(1000);
 
   await page.getByTestId("blank-flow").click();
-  await page.waitForTimeout(1000);
+  await page.waitForTimeout(3000);
 
   await page.getByTestId("extended-disclosure").click();
   await page.getByPlaceholder("Search").click();
diff --git a/src/frontend/tests/end-to-end/filterEdge.spec.ts b/src/frontend/tests/end-to-end/filterEdge.spec.ts
index b35b7c1da..7edbc0436 100644
--- a/src/frontend/tests/end-to-end/filterEdge.spec.ts
+++ b/src/frontend/tests/end-to-end/filterEdge.spec.ts
@@ -21,7 +21,7 @@ test("LLMChain - Tooltip", async ({ page }) => {
   }
 
   await page.getByTestId("blank-flow").click();
-  await page.waitForTimeout(1000);
+  await page.waitForTimeout(3000);
 
   await page.getByTestId("extended-disclosure").click();
   await page.getByPlaceholder("Search").click();
@@ -117,7 +117,7 @@ test("LLMChain - Filter", async ({ page }) => {
   );
 
   await page.getByTestId("blank-flow").click();
-  await page.waitForTimeout(1000);
+  await page.waitForTimeout(3000);
   await page.getByTestId("extended-disclosure").click();
   await page.getByPlaceholder("Search").click();
   await page.getByPlaceholder("Search").fill("llmchain");
diff --git a/src/frontend/tests/end-to-end/floatComponent.spec.ts b/src/frontend/tests/end-to-end/floatComponent.spec.ts
index 0776355a6..e172a92e3 100644
--- a/src/frontend/tests/end-to-end/floatComponent.spec.ts
+++ b/src/frontend/tests/end-to-end/floatComponent.spec.ts
@@ -22,7 +22,7 @@ test("FloatComponent", async ({ page }) => {
   await page.waitForTimeout(1000);
 
   await page.getByTestId("blank-flow").click();
-  await page.waitForTimeout(1000);
+  await page.waitForTimeout(3000);
   await page.getByTestId("extended-disclosure").click();
   await page.getByPlaceholder("Search").click();
   await page.getByPlaceholder("Search").fill("ollama");
diff --git a/src/frontend/tests/end-to-end/flowPage.spec.ts b/src/frontend/tests/end-to-end/flowPage.spec.ts
index 28703bbc0..4cae45bf2 100644
--- a/src/frontend/tests/end-to-end/flowPage.spec.ts
+++ b/src/frontend/tests/end-to-end/flowPage.spec.ts
@@ -22,7 +22,7 @@ test.describe("Flow Page tests", () => {
     }
 
     await page.getByTestId("blank-flow").click();
-    await page.waitForTimeout(1000);
+    await page.waitForTimeout(3000);
     await page.getByTestId("extended-disclosure").click();
     await page.getByPlaceholder("Search").click();
     await page.getByPlaceholder("Search").fill("custom");
diff --git a/src/frontend/tests/end-to-end/flowSettings.spec.ts b/src/frontend/tests/end-to-end/flowSettings.spec.ts
index 3ebbcd96e..a2e9f25c0 100644
--- a/src/frontend/tests/end-to-end/flowSettings.spec.ts
+++ b/src/frontend/tests/end-to-end/flowSettings.spec.ts
@@ -29,7 +29,7 @@ test("flowSettings", async ({ page }) => {
   await page
     .getByPlaceholder("Flow name")
     .fill(
-      "Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test",
+      "Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test"
     );
 
   await page.getByText("Character limit reached").isVisible();
@@ -41,15 +41,13 @@ test("flowSettings", async ({ page }) => {
   await page
     .getByPlaceholder("Flow description")
     .fill(
-      "Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test",
+      "Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test"
     );
 
   await page.getByTestId("save-flow-settings").click();
 
   await page.getByText("Close").last().click();
 
-  await page.getByText("Close").last().click();
-
   await page.waitForTimeout(1000);
 
   await page.getByText("Changes saved successfully").isVisible();
diff --git a/src/frontend/tests/end-to-end/generalBugs.spec.ts b/src/frontend/tests/end-to-end/generalBugs.spec.ts
new file mode 100644
index 000000000..49ac0af65
--- /dev/null
+++ b/src/frontend/tests/end-to-end/generalBugs.spec.ts
@@ -0,0 +1,99 @@
+import { expect, test } from "@playwright/test";
+
+test("should interact with api request", async ({ page }) => {
+  await page.goto("/");
+  await page.waitForTimeout(2000);
+
+  let modalCount = 0;
+  try {
+    const modalTitleElement = await page?.getByTestId("modal-title");
+    if (modalTitleElement) {
+      modalCount = await modalTitleElement.count();
+    }
+  } catch (error) {
+    modalCount = 0;
+  }
+
+  while (modalCount === 0) {
+    await page.getByText("New Project", { exact: true }).click();
+    await page.waitForTimeout(5000);
+    modalCount = await page.getByTestId("modal-title")?.count();
+  }
+  await page.getByTestId("blank-flow").click();
+  await page.waitForTimeout(1000);
+  await page.getByTestId("extended-disclosure").click();
+  await page.getByPlaceholder("Search").click();
+  await page.getByPlaceholder("Search").fill("api request");
+
+  await page.waitForTimeout(1000);
+
+  await page
+    .getByTestId("dataAPI Request")
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+  await page.mouse.up();
+  await page.mouse.down();
+  await page.getByTitle("fit view").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+});
+
+test("erase button should clear the chat messages", async ({ page }) => {
+  if (!process.env.CI) {
+    dotenv.config();
+    dotenv.config({ path: path.resolve(__dirname, "../../.env") });
+  }
+
+  await page.goto("/");
+
+  await page.waitForTimeout(1000);
+
+  let modalCount = 0;
+  try {
+    const modalTitleElement = await page?.getByTestId("modal-title");
+    if (modalTitleElement) {
+      modalCount = await modalTitleElement.count();
+    }
+  } catch (error) {
+    modalCount = 0;
+  }
+
+  while (modalCount === 0) {
+    await page.getByText("New Project", { exact: true }).click();
+    await page.waitForTimeout(5000);
+    modalCount = await page.getByTestId("modal-title")?.count();
+  }
+
+  await page.getByRole("heading", { name: "Basic Prompting" }).click();
+  await page.waitForTimeout(1000);
+
+  await page.getByTitle("fit view").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+
+  if (!process.env.OPENAI_API_KEY) {
+    //You must set the OPENAI_API_KEY on .env file to run this test
+    expect(false).toBe(true);
+  }
+
+  await page
+    .getByTestId("popover-anchor-input-openai_api_key")
+    .fill(process.env.OPENAI_API_KEY ?? "");
+  await page.getByText("Playground", { exact: true }).click();
+  await page.getByPlaceholder("Send a message...").fill("Hello, how are you?");
+  await page.getByTestId("icon-LucideSend").click();
+  let valueUser = await page.getByTestId("sender_name_user").textContent();
+  let valueAI = await page.getByTestId("sender_name_ai").textContent();
+
+  expect(valueUser).toBe("User");
+  expect(valueAI).toBe("AI");
+
+  await page.getByTestId("icon-Eraser").last().click();
+
+  await page.getByText("Hello, how are you?").isHidden();
+  await page.getByText("AI", { exact: true }).last().isHidden();
+  await page.getByText("User", { exact: true }).last().isHidden();
+  await page.getByText("Start a conversation").isVisible();
+  await page.getByText("Langflow Chat").isVisible();
+});
diff --git a/src/frontend/tests/end-to-end/globalVariables.spec.ts b/src/frontend/tests/end-to-end/globalVariables.spec.ts
index 546c332f6..64af7fe28 100644
--- a/src/frontend/tests/end-to-end/globalVariables.spec.ts
+++ b/src/frontend/tests/end-to-end/globalVariables.spec.ts
@@ -22,7 +22,7 @@ test("GlobalVariables", async ({ page }) => {
   await page.waitForTimeout(1000);
 
   await page.getByTestId("blank-flow").click();
-  await page.waitForTimeout(1000);
+  await page.waitForTimeout(3000);
   await page.getByTestId("extended-disclosure").click();
   await page.getByPlaceholder("Search").click();
   await page.getByPlaceholder("Search").fill("openai");
diff --git a/src/frontend/tests/end-to-end/inputComponent.spec.ts b/src/frontend/tests/end-to-end/inputComponent.spec.ts
index 317ab231e..3e6936b43 100644
--- a/src/frontend/tests/end-to-end/inputComponent.spec.ts
+++ b/src/frontend/tests/end-to-end/inputComponent.spec.ts
@@ -22,7 +22,7 @@ test("InputComponent", async ({ page }) => {
   await page.waitForTimeout(1000);
 
   await page.getByTestId("blank-flow").click();
-  await page.waitForTimeout(1000);
+  await page.waitForTimeout(3000);
   await page.getByTestId("extended-disclosure").click();
   await page.getByPlaceholder("Search").click();
   await page.getByPlaceholder("Search").fill("Chroma");
diff --git a/src/frontend/tests/end-to-end/inputListComponent.spec.ts b/src/frontend/tests/end-to-end/inputListComponent.spec.ts
index 463312839..74c527892 100644
--- a/src/frontend/tests/end-to-end/inputListComponent.spec.ts
+++ b/src/frontend/tests/end-to-end/inputListComponent.spec.ts
@@ -21,7 +21,7 @@ test("InputListComponent", async ({ page }) => {
   }
 
   await page.getByTestId("blank-flow").click();
-  await page.waitForTimeout(1000);
+  await page.waitForTimeout(3000);
   await page.getByTestId("extended-disclosure").click();
   await page.getByPlaceholder("Search").click();
   await page.getByPlaceholder("Search").fill("astradb");
diff --git a/src/frontend/tests/end-to-end/intComponent.spec.ts b/src/frontend/tests/end-to-end/intComponent.spec.ts
index be3918b77..6ec81819a 100644
--- a/src/frontend/tests/end-to-end/intComponent.spec.ts
+++ b/src/frontend/tests/end-to-end/intComponent.spec.ts
@@ -22,7 +22,7 @@ test("IntComponent", async ({ page }) => {
   await page.waitForTimeout(1000);
 
   await page.getByTestId("blank-flow").click();
-  await page.waitForTimeout(1000);
+  await page.waitForTimeout(3000);
   await page.getByTestId("extended-disclosure").click();
   await page.getByPlaceholder("Search").click();
   await page.getByPlaceholder("Search").fill("openai");
diff --git a/src/frontend/tests/end-to-end/keyPairListComponent.spec.ts b/src/frontend/tests/end-to-end/keyPairListComponent.spec.ts
index bf9336b3c..31a4521ae 100644
--- a/src/frontend/tests/end-to-end/keyPairListComponent.spec.ts
+++ b/src/frontend/tests/end-to-end/keyPairListComponent.spec.ts
@@ -22,7 +22,7 @@ test("KeypairListComponent", async ({ page }) => {
   await page.waitForTimeout(1000);
 
   await page.getByTestId("blank-flow").click();
-  await page.waitForTimeout(1000);
+  await page.waitForTimeout(3000);
   await page.getByTestId("extended-disclosure").click();
   await page.getByPlaceholder("Search").click();
   await page.getByPlaceholder("Search").fill("amazon bedrock");
diff --git a/src/frontend/tests/end-to-end/langflowShortcuts.spec.ts b/src/frontend/tests/end-to-end/langflowShortcuts.spec.ts
index a6848d856..42b8744d1 100644
--- a/src/frontend/tests/end-to-end/langflowShortcuts.spec.ts
+++ b/src/frontend/tests/end-to-end/langflowShortcuts.spec.ts
@@ -29,7 +29,7 @@ test("LangflowShortcuts", async ({ page }) => {
   }
 
   await page.getByTestId("blank-flow").click();
-  await page.waitForTimeout(1000);
+  await page.waitForTimeout(3000);
   await page.getByTestId("extended-disclosure").click();
   await page.getByPlaceholder("Search").click();
   await page.getByPlaceholder("Search").fill("ollama");
diff --git a/src/frontend/tests/end-to-end/logs.spec.ts b/src/frontend/tests/end-to-end/logs.spec.ts
index ba340d436..24abd96bf 100644
--- a/src/frontend/tests/end-to-end/logs.spec.ts
+++ b/src/frontend/tests/end-to-end/logs.spec.ts
@@ -52,11 +52,13 @@ test("should able to see and interact with logs", async ({ page }) => {
   await page.getByRole("gridcell").first().isVisible();
 
   await page.getByText("Messages", { exact: true }).click();
-  await page.getByText("timestamp").isVisible();
-  await page.getByText("sender", { exact: true }).isVisible();
-  await page.getByText("sender_name").isVisible();
-  await page.getByText("session_id", { exact: true }).isVisible();
-  await page.getByText("message", { exact: true }).isVisible();
-  await page.getByText("artifacts", { exact: true }).isVisible();
+  await page.getByText("Index").isVisible();
+  await page.getByText("Timestamp").isVisible();
+  await page.getByText("Flow Id", { exact: true }).isVisible();
+  await page.getByText("Source").isVisible();
+  await page.getByText("Target", { exact: true }).isVisible();
+  await page.getByText("Target Args", { exact: true }).isVisible();
+  await page.getByText("Status", { exact: true }).isVisible();
+  await page.getByText("Error", { exact: true }).isVisible();
   await page.getByRole("gridcell").first().isVisible();
 });
diff --git a/src/frontend/tests/end-to-end/nestedComponent.spec.ts b/src/frontend/tests/end-to-end/nestedComponent.spec.ts
index eaa37f2e2..2df9c1b7b 100644
--- a/src/frontend/tests/end-to-end/nestedComponent.spec.ts
+++ b/src/frontend/tests/end-to-end/nestedComponent.spec.ts
@@ -21,7 +21,7 @@ test("NestedComponent", async ({ page }) => {
   }
 
   await page.getByTestId("blank-flow").click();
-  await page.waitForTimeout(1000);
+  await page.waitForTimeout(3000);
   await page.getByTestId("extended-disclosure").click();
   await page.getByPlaceholder("Search").click();
   await page.getByPlaceholder("Search").fill("pinecone");
diff --git a/src/frontend/tests/end-to-end/promptModalComponent.spec.ts b/src/frontend/tests/end-to-end/promptModalComponent.spec.ts
index 201a4b624..8c6a5ab84 100644
--- a/src/frontend/tests/end-to-end/promptModalComponent.spec.ts
+++ b/src/frontend/tests/end-to-end/promptModalComponent.spec.ts
@@ -21,7 +21,7 @@ test("PromptTemplateComponent", async ({ page }) => {
   }
 
   await page.getByTestId("blank-flow").click();
-  await page.waitForTimeout(1000);
+  await page.waitForTimeout(3000);
   await page.getByTestId("extended-disclosure").click();
   await page.getByPlaceholder("Search").click();
   await page.getByPlaceholder("Search").fill("prompt");
diff --git a/src/frontend/tests/end-to-end/saveComponents.spec.ts b/src/frontend/tests/end-to-end/saveComponents.spec.ts
index 10b679a89..624bb5b2e 100644
--- a/src/frontend/tests/end-to-end/saveComponents.spec.ts
+++ b/src/frontend/tests/end-to-end/saveComponents.spec.ts
@@ -91,6 +91,8 @@ test.describe("save component tests", () => {
     if (replaceButton) {
       await page.getByTestId("replace-button").click();
     }
+    await page.waitForTimeout(3000);
+
     await page.getByTestId("extended-disclosure").click();
     await page.getByPlaceholder("Search").click();
     await page.getByPlaceholder("Search").fill("group");
diff --git a/src/frontend/tests/end-to-end/textAreaModalComponent.spec.ts b/src/frontend/tests/end-to-end/textAreaModalComponent.spec.ts
index 40443cfa5..9443586e6 100644
--- a/src/frontend/tests/end-to-end/textAreaModalComponent.spec.ts
+++ b/src/frontend/tests/end-to-end/textAreaModalComponent.spec.ts
@@ -21,7 +21,7 @@ test("TextAreaModalComponent", async ({ page }) => {
   }
 
   await page.getByTestId("blank-flow").click();
-  await page.waitForTimeout(1000);
+  await page.waitForTimeout(3000);
   await page.getByTestId("extended-disclosure").click();
   await page.getByPlaceholder("Search").click();
   await page.getByPlaceholder("Search").fill("prompt");
diff --git a/src/frontend/tests/end-to-end/textInputOutput.spec.ts b/src/frontend/tests/end-to-end/textInputOutput.spec.ts
index c2012ce1b..3da77e867 100644
--- a/src/frontend/tests/end-to-end/textInputOutput.spec.ts
+++ b/src/frontend/tests/end-to-end/textInputOutput.spec.ts
@@ -30,7 +30,7 @@ test("TextInputOutputComponent", async ({ page }) => {
   await page.waitForTimeout(1000);
 
   await page.getByTestId("blank-flow").click();
-  await page.waitForTimeout(1000);
+  await page.waitForTimeout(3000);
   await page.getByTestId("extended-disclosure").click();
   await page.getByPlaceholder("Search").click();
   await page.getByPlaceholder("Search").fill("text input");
diff --git a/src/frontend/tests/end-to-end/toggleComponent.spec.ts b/src/frontend/tests/end-to-end/toggleComponent.spec.ts
index 051366354..58d909af4 100644
--- a/src/frontend/tests/end-to-end/toggleComponent.spec.ts
+++ b/src/frontend/tests/end-to-end/toggleComponent.spec.ts
@@ -21,7 +21,7 @@ test("ToggleComponent", async ({ page }) => {
   }
 
   await page.getByTestId("blank-flow").click();
-  await page.waitForTimeout(1000);
+  await page.waitForTimeout(3000);
   await page.getByTestId("extended-disclosure").click();
   await page.getByPlaceholder("Search").click();
   await page.getByPlaceholder("Search").fill("directory");
diff --git a/src/frontend/tests/end-to-end/tweaks_test.spec.ts b/src/frontend/tests/end-to-end/tweaks_test.spec.ts
index e2e4c7c11..586d0d9e1 100644
--- a/src/frontend/tests/end-to-end/tweaks_test.spec.ts
+++ b/src/frontend/tests/end-to-end/tweaks_test.spec.ts
@@ -82,7 +82,7 @@ test("check if tweaks are updating when someothing on the flow changes", async (
   await page.waitForTimeout(1000);
 
   await page.getByTestId("blank-flow").click();
-  await page.waitForTimeout(1000);
+  await page.waitForTimeout(3000);
   await page.getByTestId("extended-disclosure").click();
   await page.getByPlaceholder("Search").click();
   await page.getByPlaceholder("Search").fill("Chroma");
diff --git a/src/frontend/tests/end-to-end/userSettings.spec.ts b/src/frontend/tests/end-to-end/userSettings.spec.ts
index af7c93824..1228fffb4 100644
--- a/src/frontend/tests/end-to-end/userSettings.spec.ts
+++ b/src/frontend/tests/end-to-end/userSettings.spec.ts
@@ -4,7 +4,11 @@ test("should see general profile gradient", async ({ page }) => {
   await page.goto("/");
   await page.waitForTimeout(2000);
   await page.getByTestId("user-profile-settings").click();
+  await page.waitForTimeout(1000);
+
   await page.getByText("Settings").click();
+  await page.waitForTimeout(3000);
+
   await page.getByText("General").nth(2).isVisible();
   await page.getByText("Profile Gradient").isVisible();
 });
@@ -70,7 +74,11 @@ test("should see shortcuts", async ({ page }) => {
   await page.goto("/");
   await page.waitForTimeout(2000);
   await page.getByTestId("user-profile-settings").click();
+  await page.waitForTimeout(1000);
+
   await page.getByText("Settings").click();
+  await page.waitForTimeout(3000);
+
   await page.getByText("General").nth(2).isVisible();
   await page.getByText("Shortcuts").nth(0).click();
   await page.getByText("Shortcuts", { exact: true }).nth(1).isVisible();
@@ -87,5 +95,33 @@ test("should see shortcuts", async ({ page }) => {
   await page.getByText("Delete Component", { exact: true }).isVisible();
   await page.getByText("Open Playground", { exact: true }).isVisible();
   await page.getByText("Undo", { exact: true }).isVisible();
-  await page.getByText("Redo", { exact: true }).isVisible();
+
+  await page.mouse.wheel(0, 10000);
+
+  await page.getByText("Redo", { exact: true }).last().isVisible();
+
+  await page.getByText("Reset Columns").last().isVisible();
+});
+
+test("should interact with API Keys", async ({ page }) => {
+  await page.goto("/");
+  await page.waitForTimeout(2000);
+  await page.getByTestId("user-profile-settings").click();
+  await page.getByText("Settings").click();
+  await page.getByText("API Keys").click();
+  await page.getByText("API Keys", { exact: true }).nth(1).isVisible();
+  await page.getByText("Add New").click();
+  await page.getByPlaceholder("Insert a name for your API Key").isVisible();
+
+  const randomName = Math.random().toString(36).substring(2);
+
+  await page
+    .getByPlaceholder("Insert a name for your API Key")
+    .fill(randomName);
+  await page.getByText("Create Secret Key", { exact: true }).click();
+  await page.getByText("Please save").isVisible();
+  await page.getByTestId("icon-Copy").click();
+  await page.waitForTimeout(1000);
+  await page.getByText("Api Key Copied!").isVisible();
+  await page.getByText(randomName).isVisible();
 });
diff --git a/tests/conftest.py b/tests/conftest.py
index ca76716f0..8fed91739 100644
--- a/tests/conftest.py
+++ b/tests/conftest.py
@@ -231,8 +231,9 @@ def client_fixture(session: Session, monkeypatch, request, load_flows_dir):
         monkeypatch.setenv("LANGFLOW_DATABASE_URL", f"sqlite:///{db_path}")
         monkeypatch.setenv("LANGFLOW_AUTO_LOGIN", "false")
         if "load_flows" in request.keywords:
-            shutil.copyfile(pytest.BASIC_EXAMPLE_PATH,
-                            os.path.join(load_flows_dir, "c54f9130-f2fa-4a3e-b22a-3856d946351b.json"))
+            shutil.copyfile(
+                pytest.BASIC_EXAMPLE_PATH, os.path.join(load_flows_dir, "c54f9130-f2fa-4a3e-b22a-3856d946351b.json")
+            )
             monkeypatch.setenv("LANGFLOW_LOAD_FLOWS_PATH", load_flows_dir)
             monkeypatch.setenv("LANGFLOW_AUTO_LOGIN", "true")