diff --git a/.github/workflows/typescript_test.yml b/.github/workflows/typescript_test.yml
index a75327785..0cb3213d8 100644
--- a/.github/workflows/typescript_test.yml
+++ b/.github/workflows/typescript_test.yml
@@ -19,8 +19,8 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        shardIndex: [1, 2, 3, 4]
-        shardTotal: [4]
+        shardIndex: [1]
+        shardTotal: [1]
     steps:
       - name: Checkout code
         uses: actions/checkout@v4
@@ -38,27 +38,6 @@ jobs:
           npm ci
         if: ${{ steps.setup-node.outputs.cache-hit != 'true' }}
 
-      # Attempt to restore the correct Playwright browser binaries based on the
-      # currently installed version of Playwright (The browser binary versions
-      # may change with Playwright versions).
-      # Note: Playwright's cache directory is hard coded because that's what it
-      # says to do in the docs. There doesn't appear to be a command that prints
-      # it out for us.
-      # - uses: actions/cache@v4
-      #   id: playwright-cache
-      #   with:
-      #     path: ${{ env.PLAYWRIGHT_BROWSERS_PATH }}
-      #     key: "${{ runner.os }}-playwright-${{ hashFiles('src/frontend/package-lock.json') }}"
-      #     # As a fallback, if the Playwright version has changed, try use the
-      #     # most recently cached version. There's a good chance that at least one
-      #     # of the browser binary versions haven't been updated, so Playwright can
-      #     # skip installing that in the next step.
-      #     # Note: When falling back to an old cache, `cache-hit` (used below)
-      #     # will be `false`. This allows us to restore the potentially out of
-      #     # date cache, but still let Playwright decide if it needs to download
-      #     # new binaries or not.
-      #     restore-keys: |
-      #       ${{ runner.os }}-playwright-
       - name: Cache playwright binaries
         uses: actions/cache@v4
         id: playwright-cache
@@ -82,32 +61,26 @@ jobs:
           npx playwright install-deps
         if: steps.playwright-cache.outputs.cache-hit != 'true'
 
-      # If the Playwright browser binaries weren't able to be restored, we tell
-      # paywright to install everything for us.
-      # - name: Install Playwright's dependencies
-      #   if: steps.playwright-cache.outputs.cache-hit != 'true'
-      #   run: npx playwright install --with-deps
-
-      - name: Install Poetry
-        run: pipx install "poetry==${{ env.POETRY_VERSION }}"
-
-      - name: Set up Python
-        uses: actions/setup-python@v5
-        id: setup-python
+      - name: Set up Python ${{ env.PYTHON_VERSION }} + Poetry ${{ env.POETRY_VERSION }}
+        uses: "./.github/actions/poetry_caching"
         with:
           python-version: ${{ env.PYTHON_VERSION }}
-          cache: "poetry"
-
+          poetry-version: ${{ env.POETRY_VERSION }}
+          cache-key: ${{ runner.os }}-poetry-${{ env.POETRY_VERSION }}-${{ hashFiles('**/poetry.lock') }}
       - name: Install Python dependencies
         run: |
           poetry env use ${{ env.PYTHON_VERSION }}
           poetry install
-        if: ${{ steps.setup-python.outputs.cache-hit != 'true' }}
+
+      - name: create .env
+        run: |
+          touch .env
+          echo "${{ secrets.ENV_VARS }}" > .env
 
       - name: Run Playwright Tests
         run: |
           cd src/frontend
-          npx playwright test --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }}
+          npx playwright test
 
       - name: Upload blob report to GitHub Actions Artifacts
         if: always()
diff --git a/src/frontend/package-lock.json b/src/frontend/package-lock.json
index 971c9eee1..7b2e691b6 100644
--- a/src/frontend/package-lock.json
+++ b/src/frontend/package-lock.json
@@ -38,6 +38,7 @@
         "clsx": "^1.2.1",
         "cmdk": "^1.0.0",
         "dompurify": "^3.0.5",
+        "dotenv": "^16.4.5",
         "esbuild": "^0.17.19",
         "framer-motion": "^11.0.6",
         "lodash": "^4.17.21",
@@ -5671,6 +5672,17 @@
         "tslib": "^2.0.3"
       }
     },
+    "node_modules/dotenv": {
+      "version": "16.4.5",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.5.tgz",
+      "integrity": "sha512-ZmdL2rui+eB2YwhsWzjInR8LldtZHGDoQ1ugH85ppHKwpUHL7j7rN0Ti9NCnGiQbhaZ11FpR+7ao1dNsmduNUg==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://dotenvx.com"
+      }
+    },
     "node_modules/eastasianwidth": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
diff --git a/src/frontend/package.json b/src/frontend/package.json
index fd27d8bd6..6e3fbd344 100644
--- a/src/frontend/package.json
+++ b/src/frontend/package.json
@@ -33,6 +33,7 @@
     "clsx": "^1.2.1",
     "cmdk": "^1.0.0",
     "dompurify": "^3.0.5",
+    "dotenv": "^16.4.5",
     "esbuild": "^0.17.19",
     "framer-motion": "^11.0.6",
     "lodash": "^4.17.21",
diff --git a/src/frontend/playwright.config.ts b/src/frontend/playwright.config.ts
index 649c42390..9535e0a15 100644
--- a/src/frontend/playwright.config.ts
+++ b/src/frontend/playwright.config.ts
@@ -1,14 +1,17 @@
 import { defineConfig, devices } from "@playwright/test";
+import * as dotenv from "dotenv";
+import path from "path";
+dotenv.config();
+dotenv.config({ path: path.resolve(__dirname, "../../.env") });
 
 /**
  * Read environment variables from file.
  * https://github.com/motdotla/dotenv
  */
-// require('dotenv').config();
-
 /**
  * See https://playwright.dev/docs/test-configuration.
  */
+
 export default defineConfig({
   testDir: "./tests",
   /* Run tests in files in parallel */
@@ -18,7 +21,7 @@ export default defineConfig({
   /* Retry on CI only */
   retries: process.env.CI ? 2 : 0,
   /* Opt out of parallel tests on CI. */
-  workers: 3,
+  workers: 1,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
   timeout: 120 * 1000,
   // reporter: [
@@ -40,24 +43,32 @@ export default defineConfig({
   projects: [
     {
       name: "chromium",
-      use: { ...devices["Desktop Chrome"] },
+      use: {
+        ...devices["Desktop Chrome"],
+        contextOptions: {
+          // chromium-specific permissions
+          permissions: ["clipboard-read", "clipboard-write"],
+        },
+      },
     },
 
     {
       name: "firefox",
-      use: { ...devices["Desktop Firefox"] },
+      use: {
+        ...devices["Desktop Firefox"],
+        launchOptions: {
+          firefoxUserPrefs: {
+            "dom.events.asyncClipboard.readText": true,
+            "dom.events.testing.asyncClipboard": true,
+          },
+        },
+      },
     },
-
-    // {
-    //   name: "webkit",
-    //   use: { ...devices["Desktop Safari"] },
-    // },
   ],
-  /* Run your local dev server before starting the tests */
   webServer: [
     {
       command:
-        "poetry run uvicorn --factory langflow.main:create_app --host 127.0.0.1 --port 7860",
+        "poetry run uvicorn --factory langflow.main:create_app --host 127.0.0.1 --port 7860 --loop asyncio",
       port: 7860,
       env: {
         LANGFLOW_DATABASE_URL: "sqlite:///./temp",
@@ -65,7 +76,7 @@ export default defineConfig({
       },
       stdout: "ignore",
 
-      reuseExistingServer: !process.env.CI,
+      reuseExistingServer: true,
       timeout: 120 * 1000,
     },
     {
diff --git a/src/frontend/src/components/headerComponent/components/menuBar/index.tsx b/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
index 756143217..d61f64620 100644
--- a/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
+++ b/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
@@ -83,7 +83,9 @@ export const MenuBar = ({
           <DropdownMenuTrigger asChild>
             <Button asChild variant="primary" size="sm">
               <div className="header-menu-bar-display">
-                <div className="header-menu-flow-name">{currentFlow.name}</div>
+                <div className="header-menu-flow-name" data-testid="flow_name">
+                  {currentFlow.name}
+                </div>
                 <IconComponent name="ChevronDown" className="h-4 w-4" />
               </div>
             </Button>
diff --git a/src/frontend/src/controllers/API/api.tsx b/src/frontend/src/controllers/API/api.tsx
index 033a0e648..8084dfeb9 100644
--- a/src/frontend/src/controllers/API/api.tsx
+++ b/src/frontend/src/controllers/API/api.tsx
@@ -24,6 +24,9 @@ function ApiInterceptor() {
       async (error: AxiosError) => {
         if (error.response?.status === 403 || error.response?.status === 401) {
           if (!autoLogin) {
+            if (error?.config?.url?.includes("github")) {
+              return Promise.reject(error);
+            }
             const stillRefresh = checkErrorCount();
             if (!stillRefresh) {
               return Promise.reject(error);
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 b15b61df3..93a0db3c3 100644
--- a/src/frontend/src/modals/IOModal/components/chatView/chatMessage/index.tsx
+++ b/src/frontend/src/modals/IOModal/components/chatView/chatMessage/index.tsx
@@ -135,7 +135,12 @@ export default function ChatMessage({
                 alt={!chat.isSend ? "robot_image" : "male_technology"}
               />
             </div>
-            <span className="max-w-24 truncate text-xs">
+            <span
+              className="max-w-24 truncate text-xs"
+              data-testid={
+                "sender_name_" + chat.sender_name?.toLocaleLowerCase()
+              }
+            >
               {chat.sender_name}
             </span>
           </div>
diff --git a/src/frontend/src/modals/shareModal/index.tsx b/src/frontend/src/modals/shareModal/index.tsx
index 8272bddbe..f37c166f3 100644
--- a/src/frontend/src/modals/shareModal/index.tsx
+++ b/src/frontend/src/modals/shareModal/index.tsx
@@ -237,6 +237,7 @@ export default function ShareModal({
               onCheckedChange={(event: boolean) => {
                 setSharePublic(event);
               }}
+              data-testid="public-checkbox"
             />
             <label htmlFor="public" className="export-modal-save-api text-sm ">
               Set {nameComponent} status to public
diff --git a/src/frontend/src/stores/darkStore.tsx b/src/frontend/src/stores/darkStore.tsx
index 84ee3308e..885c914c4 100644
--- a/src/frontend/src/stores/darkStore.tsx
+++ b/src/frontend/src/stores/darkStore.tsx
@@ -18,6 +18,11 @@ export const useDarkStore = create<DarkStoreType>((set, get) => ({
     });
   },
   refreshStars: () => {
+    if (import.meta.env.CI) {
+      window.localStorage.setItem("githubStars", "0");
+      set(() => ({ stars: 0, lastUpdated: new Date() }));
+      return;
+    }
     let lastUpdated = window.localStorage.getItem("githubStarsLastUpdated");
     let diff = 0;
     // check if lastUpdated actually exists
diff --git a/src/frontend/tests/end-to-end/assets/test_file.txt b/src/frontend/tests/end-to-end/assets/test_file.txt
new file mode 100644
index 000000000..68a4528a6
--- /dev/null
+++ b/src/frontend/tests/end-to-end/assets/test_file.txt
@@ -0,0 +1 @@
+this is a test file
\ No newline at end of file
diff --git a/src/frontend/tests/end-to-end/auto_login.spec.ts b/src/frontend/tests/end-to-end/auto_login.spec.ts
index 929fb6a0d..8eaed40c7 100644
--- a/src/frontend/tests/end-to-end/auto_login.spec.ts
+++ b/src/frontend/tests/end-to-end/auto_login.spec.ts
@@ -2,12 +2,12 @@ import { test } from "@playwright/test";
 
 test.describe("Auto_login tests", () => {
   test("auto_login sign in", async ({ page }) => {
-    await page.goto("http:localhost:3000/");
+    await page.goto("/");
     await page.locator('//*[@id="new-project-btn"]').click();
   });
 
   test("auto_login block_admin", async ({ page }) => {
-    await page.goto("http:localhost:3000/");
+    await page.goto("/");
     await page.locator('//*[@id="new-project-btn"]').click();
     await page.waitForTimeout(5000);
 
diff --git a/src/frontend/tests/end-to-end/chatInputOutput.spec.ts b/src/frontend/tests/end-to-end/chatInputOutput.spec.ts
new file mode 100644
index 000000000..bc507efb7
--- /dev/null
+++ b/src/frontend/tests/end-to-end/chatInputOutput.spec.ts
@@ -0,0 +1,149 @@
+import { expect, test } from "@playwright/test";
+import * as dotenv from "dotenv";
+import { readFileSync } from "fs";
+import path from "path";
+
+test("user must interact with chat with Input/Output", 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.locator('//*[@id="new-project-btn"]').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("input-openai_api_key")
+    .fill(process.env.OPENAI_API_KEY ?? "");
+  await page.getByText("Run", { 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.keyboard.press("Escape");
+
+  await page
+    .getByTestId("textarea-input_value")
+    .nth(1)
+    .fill(
+      "testtesttesttesttesttestte;.;.,;,.;,.;.,;,..,;;;;;;;;;;;;;;;;;;;;;,;.;,.;,.,;.,;.;.,~~çççççççççççççççççççççççççççççççççççççççisdajfdasiopjfaodisjhvoicxjiovjcxizopjviopasjioasfhjaiohf23432432432423423sttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttestççççççççççççççççççççççççççççççççç,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,!"
+    );
+  await page.getByTestId("input-sender_name").nth(1).fill("TestSenderNameUser");
+  await page.getByTestId("input-sender_name").nth(0).fill("TestSenderNameAI");
+
+  await page.getByText("Run", { exact: true }).click();
+  await page.getByTestId("icon-LucideSend").click();
+
+  valueUser = await page
+    .getByTestId("sender_name_testsendernameuser")
+    .textContent();
+  valueAI = await page
+    .getByTestId("sender_name_testsendernameai")
+    .textContent();
+
+  expect(valueUser).toBe("TestSenderNameUser");
+  expect(valueAI).toBe("TestSenderNameAI");
+
+  expect(
+    await page
+      .getByText(
+        "testtesttesttesttesttestte;.;.,;,.;,.;.,;,..,;;;;;;;;;;;;;;;;;;;;;,;.;,.;,.,;.,;.;.,~~çççççççççççççççççççççççççççççççççççççççisdajfdasiopjfaodisjhvoicxjiovjcxizopjviopasjioasfhjaiohf23432432432423423sttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttestççççççççççççççççççççççççççççççççç,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,!",
+        { exact: true }
+      )
+      .isVisible()
+  );
+});
+
+test("chat_io_teste", async ({ page }) => {
+  await page.goto("/");
+  await page.locator("span").filter({ hasText: "My Collection" }).isVisible();
+  // Read your file into a buffer.
+  const jsonContent = readFileSync(
+    "tests/end-to-end/assets/ChatTest.json",
+    "utf-8"
+  );
+
+  await page.waitForTimeout(3000);
+
+  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.locator('//*[@id="new-project-btn"]').click();
+    await page.waitForTimeout(5000);
+    modalCount = await page.getByTestId("modal-title")?.count();
+  }
+
+  await page.getByTestId("blank-flow").click();
+  await page.waitForTimeout(2000);
+
+  // Create the DataTransfer and File
+  const dataTransfer = await page.evaluateHandle((data) => {
+    const dt = new DataTransfer();
+    // Convert the buffer to a hex array
+    const file = new File([data], "ChatTest.json", {
+      type: "application/json",
+    });
+    dt.items.add(file);
+    return dt;
+  }, jsonContent);
+
+  // Now dispatch
+  await page.dispatchEvent(
+    '//*[@id="react-flow-id"]/div[1]/div[1]/div',
+    "drop",
+    {
+      dataTransfer,
+    }
+  );
+  await page.getByLabel("fit view").click();
+  await page.getByText("Run", { exact: true }).click();
+  await page.getByPlaceholder("Send a message...").click();
+  await page.getByPlaceholder("Send a message...").fill("teste");
+  await page.getByRole("button").nth(1).click();
+  const chat_output = page.getByTestId("chat-message-AI-teste");
+  const chat_input = page.getByTestId("chat-message-User-teste");
+  await expect(chat_output).toHaveText("teste");
+  await expect(chat_input).toHaveText("teste");
+});
diff --git a/src/frontend/tests/end-to-end/chat_io.spec.ts b/src/frontend/tests/end-to-end/chat_io.spec.ts
deleted file mode 100644
index 54580efbf..000000000
--- a/src/frontend/tests/end-to-end/chat_io.spec.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-import { expect, test } from "@playwright/test";
-import { readFileSync } from "fs";
-
-test("chat_io_teste", async ({ page }) => {
-  await page.goto("/");
-  await page.locator("span").filter({ hasText: "My Collection" }).isVisible();
-  // Read your file into a buffer.
-  const jsonContent = readFileSync(
-    "tests/end-to-end/assets/ChatTest.json",
-    "utf-8"
-  );
-
-  await page.waitForTimeout(3000);
-
-  await page.locator('//*[@id="new-project-btn"]').click();
-  await page.locator('//*[@id="new-project-btn"]').click();
-
-  await page.getByTestId("blank-flow").click();
-  await page.waitForTimeout(2000);
-
-  // Create the DataTransfer and File
-  const dataTransfer = await page.evaluateHandle((data) => {
-    const dt = new DataTransfer();
-    // Convert the buffer to a hex array
-    const file = new File([data], "ChatTest.json", {
-      type: "application/json",
-    });
-    dt.items.add(file);
-    return dt;
-  }, jsonContent);
-
-  // Now dispatch
-  await page.dispatchEvent(
-    '//*[@id="react-flow-id"]/div[1]/div[1]/div',
-    "drop",
-    {
-      dataTransfer,
-    }
-  );
-  await page.getByLabel("fit view").click();
-  await page.getByText("Run", { exact: true }).click();
-  await page.getByPlaceholder("Send a message...").click();
-  await page.getByPlaceholder("Send a message...").fill("teste");
-  await page.getByRole("button").nth(1).click();
-  const chat_output = page.getByTestId("chat-message-AI-teste");
-  const chat_input = page.getByTestId("chat-message-User-teste");
-  await expect(chat_output).toHaveText("teste");
-  await expect(chat_input).toHaveText("teste");
-});
diff --git a/src/frontend/tests/end-to-end/codeAreaModalComponent.spec.ts b/src/frontend/tests/end-to-end/codeAreaModalComponent.spec.ts
index 13ed9fe74..78e1a06b9 100644
--- a/src/frontend/tests/end-to-end/codeAreaModalComponent.spec.ts
+++ b/src/frontend/tests/end-to-end/codeAreaModalComponent.spec.ts
@@ -1,49 +1,63 @@
 import { expect, test } from "@playwright/test";
 
 test("CodeAreaModalComponent", async ({ page }) => {
-  await page.goto("http:localhost:3000/");
+  await page.goto("/");
   await page.waitForTimeout(2000);
 
-  await page.locator('//*[@id="new-project-btn"]').click();
+  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.locator('//*[@id="new-project-btn"]').click();
+    await page.waitForTimeout(5000);
+    modalCount = await page.getByTestId("modal-title")?.count();
+  }
+
   await page.waitForTimeout(1000);
 
   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("pythonfunctiontool");
+  await page.getByPlaceholder("Search").fill("python function");
 
   await page.waitForTimeout(1000);
 
   await page
-    .getByTestId("toolsPythonFunctionTool")
+    .getByTestId("experimentalPython Function")
     .dragTo(page.locator('//*[@id="react-flow-id"]'));
   await page.mouse.up();
   await page.mouse.down();
-  await page
-    .locator('//*[@id="react-flow-id"]/div[1]/div[2]/button[2]')
-    .click();
-
-  await page
-    .locator('//*[@id="react-flow-id"]/div[1]/div[2]/button[2]')
-    .click();
-
-  await page
-    .locator('//*[@id="react-flow-id"]/div[1]/div[2]/button[2]')
-    .click();
+  await page.getByTitle("fit view").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
   await page.getByTestId("div-generic-node").click();
   await page.getByTestId("code-button-modal").click();
 
-  let value = await page.locator('//*[@id="codeValue"]').inputValue();
-  const code =
-    'def python_function(text: str) -> str:\n    """This is a default python function that returns the input text"""\n    return text';
   const wCode =
     'def python_function(text: str) -> st:    """This is a default python function that returns the input text"""    return text';
-  const assertCode =
-    'def python_function(text: str) -> str:    """This is a default python function that returns the input text"""    return text';
+
+  const customComponentCode = `from typing import Callable
+from langflow.field_typing import Code
+from langflow.interface.custom.custom_component import CustomComponent
+from langflow.interface.custom.utils import get_function
+
+class PythonFunctionComponent(CustomComponent):
+    def python_function(text: str) -> str:
+        """This is a default python function that returns the input text"""
+        return text`;
+
   await page
     .locator("#CodeEditor div")
-    .filter({ hasText: "def python_function(text: str" })
+    .filter({ hasText: "PythonFunctionComponent" })
     .nth(1)
     .click();
   await page.locator("textarea").press("Control+a");
@@ -55,13 +69,14 @@ test("CodeAreaModalComponent", async ({ page }) => {
   ).toBeTruthy();
   await page.locator("textarea").press("Control+a");
   await page.locator("textarea").fill(wCode);
-  await page.locator("textarea").fill(code);
+  await page.locator("textarea").fill(customComponentCode);
   await page.locator('//*[@id="checkAndSaveBtn"]').click();
   await page.waitForTimeout(1000);
 
-  expect(await page.getByText("Code is ready to run").isVisible()).toBeTruthy();
   await page.getByTestId("code-button-modal").click();
-  expect(await page.locator('//*[@id="codeValue"]').inputValue()).toBe(
-    assertCode
-  );
+  const inputCodeValue = await page
+    .locator('//*[@id="codeValue"]')
+    .inputValue();
+
+  expect(inputCodeValue).toContain("def python_function(text: str) -> str");
 });
diff --git a/src/frontend/tests/end-to-end/curl_api_generation.spec.ts b/src/frontend/tests/end-to-end/curl_api_generation.spec.ts
index 4525fa698..7c3f5f246 100644
--- a/src/frontend/tests/end-to-end/curl_api_generation.spec.ts
+++ b/src/frontend/tests/end-to-end/curl_api_generation.spec.ts
@@ -1,9 +1,22 @@
 import { expect, test } from "@playwright/test";
 
 test("curl_api_generation", async ({ page, context }) => {
-  await page.goto("http:localhost:3000/");
-  await page.locator('//*[@id="new-project-btn"]').click();
-  await context.grantPermissions(["clipboard-read", "clipboard-write"]);
+  await page.goto("/");
+  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.locator('//*[@id="new-project-btn"]').click();
+    await page.waitForTimeout(5000);
+    modalCount = await page.getByTestId("modal-title")?.count();
+  }
   await page.getByRole("heading", { name: "Basic Prompting" }).click();
   await page.waitForTimeout(2000);
   await page.getByText("API", { exact: true }).click();
diff --git a/src/frontend/tests/end-to-end/dragAndDrop.spec.ts b/src/frontend/tests/end-to-end/dragAndDrop.spec.ts
index 72cccaa9a..785aab408 100644
--- a/src/frontend/tests/end-to-end/dragAndDrop.spec.ts
+++ b/src/frontend/tests/end-to-end/dragAndDrop.spec.ts
@@ -4,7 +4,25 @@ import { readFileSync } from "fs";
 test.describe("drag and drop test", () => {
   /// <reference lib="dom"/>
   test("drop collection", async ({ page }) => {
-    await page.goto("http:localhost:3000/");
+    await page.goto("/");
+
+    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.locator('//*[@id="new-project-btn"]').click();
+      await page.waitForTimeout(5000);
+      modalCount = await page.getByTestId("modal-title")?.count();
+    }
+    await page.locator("span").filter({ hasText: "Close" }).first().click();
+
     await page.locator("span").filter({ hasText: "My Collection" }).isVisible();
     // Read your file into a buffer.
     const jsonContent = readFileSync(
@@ -36,7 +54,7 @@ test.describe("drag and drop test", () => {
     await page.waitForTimeout(1000);
 
     const genericNoda = page.getByTestId("div-generic-node");
-    const elementCount = await genericNoda.count();
+    const elementCount = await genericNoda?.count();
     if (elementCount > 0) {
       expect(true).toBeTruthy();
     }
diff --git a/src/frontend/tests/end-to-end/dropdownComponent.spec.ts b/src/frontend/tests/end-to-end/dropdownComponent.spec.ts
index 0623e7460..46c84f707 100644
--- a/src/frontend/tests/end-to-end/dropdownComponent.spec.ts
+++ b/src/frontend/tests/end-to-end/dropdownComponent.spec.ts
@@ -1,10 +1,24 @@
 import { expect, test } from "@playwright/test";
 
 test("dropDownComponent", async ({ page }) => {
-  await page.goto("http:localhost:3000/");
+  await page.goto("/");
   await page.waitForTimeout(2000);
 
-  await page.locator('//*[@id="new-project-btn"]').click();
+  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.locator('//*[@id="new-project-btn"]').click();
+    await page.waitForTimeout(5000);
+    modalCount = await page.getByTestId("modal-title")?.count();
+  }
   await page.waitForTimeout(1000);
 
   await page.getByTestId("blank-flow").click();
@@ -22,17 +36,10 @@ test("dropDownComponent", async ({ page }) => {
     .dragTo(page.locator('//*[@id="react-flow-id"]'));
   await page.mouse.up();
   await page.mouse.down();
-  await page
-    .locator('//*[@id="react-flow-id"]/div[1]/div[2]/button[2]')
-    .click();
-
-  await page
-    .locator('//*[@id="react-flow-id"]/div[1]/div[2]/button[2]')
-    .click();
-
-  await page
-    .locator('//*[@id="react-flow-id"]/div[1]/div[2]/button[2]')
-    .click();
+  await page.getByTitle("fit view").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
   await page.getByTestId("title-Amazon Bedrock").click();
 
   await page.getByTestId("dropdown-model_id").click();
diff --git a/src/frontend/tests/end-to-end/fileUploadComponent.spec.ts b/src/frontend/tests/end-to-end/fileUploadComponent.spec.ts
new file mode 100644
index 000000000..7141c6a7f
--- /dev/null
+++ b/src/frontend/tests/end-to-end/fileUploadComponent.spec.ts
@@ -0,0 +1,88 @@
+import { expect, test } from "@playwright/test";
+import path from "path";
+
+test("dropDownComponent", 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.locator('//*[@id="new-project-btn"]').click();
+    await page.waitForTimeout(5000);
+    modalCount = await page.getByTestId("modal-title")?.count();
+  }
+  await page.waitForTimeout(1000);
+
+  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("file");
+
+  await page.waitForTimeout(1000);
+
+  await page
+    .getByTestId("dataFile")
+    .first()
+    .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();
+  const fileChooserPromise = page.waitForEvent("filechooser");
+  await page.getByTestId("icon-FileSearch2").click();
+  const fileChooser = await fileChooserPromise;
+  await fileChooser.setFiles(path.join(__dirname, "/assets/test_file.txt"));
+  await page.getByText("test_file.txt").isVisible();
+
+  await page.getByPlaceholder("Search").click();
+  await page.getByPlaceholder("Search").fill("text output");
+
+  await page
+    .getByTestId("outputsText Output")
+    .first()
+    .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();
+
+  // Click and hold on the first element
+  await page
+    .locator(
+      '//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div[1]/div/div[2]/div[6]/button/div/div'
+    )
+    .hover();
+  await page.mouse.down();
+
+  // Move to the second element
+  await page
+    .locator(
+      '//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div[2]/div/div[2]/div[3]/div/button/div/div'
+    )
+    .hover();
+
+  // Release the mouse
+  await page.mouse.up();
+
+  await page.getByText("Run", { exact: true }).click();
+  await page.getByText("Run Flow", { exact: true }).click();
+  await page.waitForTimeout(3000);
+  const textOutput = await page.getByPlaceholder("Empty").first().inputValue();
+
+  expect(textOutput).toContain("this is a test file");
+});
diff --git a/src/frontend/tests/end-to-end/filterEdge.spec.ts b/src/frontend/tests/end-to-end/filterEdge.spec.ts
index f75305629..898499b23 100644
--- a/src/frontend/tests/end-to-end/filterEdge.spec.ts
+++ b/src/frontend/tests/end-to-end/filterEdge.spec.ts
@@ -1,11 +1,24 @@
 import { expect, test } from "@playwright/test";
 
 test("LLMChain - Tooltip", async ({ page }) => {
-  await page.goto("http://localhost:3000/");
+  await page.goto("/");
   await page.waitForTimeout(1000);
 
-  await page.locator('//*[@id="new-project-btn"]').click();
-  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.locator('//*[@id="new-project-btn"]').click();
+    await page.waitForTimeout(5000);
+    modalCount = await page.getByTestId("modal-title")?.count();
+  }
 
   await page.getByTestId("blank-flow").click();
   await page.waitForTimeout(1000);
@@ -20,18 +33,10 @@ test("LLMChain - Tooltip", async ({ page }) => {
     .dragTo(page.locator('//*[@id="react-flow-id"]'));
   await page.mouse.up();
   await page.mouse.down();
-  await page
-    .locator('//*[@id="react-flow-id"]/div[1]/div[2]/button[2]')
-    .click();
-
-  await page
-    .locator('//*[@id="react-flow-id"]/div[1]/div[2]/button[2]')
-    .click();
-
-  await page
-    .locator('//*[@id="react-flow-id"]/div[1]/div[2]/button[2]')
-    .click();
   await page.getByTitle("fit view").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
 
   await page
     .locator(
@@ -39,26 +44,20 @@ test("LLMChain - Tooltip", async ({ page }) => {
     )
     .hover()
     .then(async () => {
-      await expect(
-        page.getByTestId("available-input-model_specs").first()
-      ).toBeVisible();
+      await expect(page.getByTestId("tooltip-Chains").first()).toBeVisible();
 
-      await expect(page.getByTestId("tooltip-Models").first()).toBeVisible();
+      await expect(page.getByTestId("tooltip-Inputs").first()).toBeVisible();
 
-      await expect(
-        page.getByTestId("tooltip-AzureOpenAIModel").first()
-      ).toBeVisible();
-
-      await expect(
-        page.getByTestId("tooltip-Model Specs").first()
-      ).toBeVisible();
+      await expect(page.getByTestId("tooltip-Outputs").first()).toBeVisible();
 
       await page.getByTestId("icon-X").click();
       await page.waitForTimeout(500);
     });
 
   await page.getByTitle("fit view").click();
-
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
   await page
     .locator(
       '//*[@id="react-flow-id"]/div[1]/div[1]/div/div/div[2]/div/div/div[2]/div[4]/div/button/div/div'
@@ -66,18 +65,12 @@ test("LLMChain - Tooltip", async ({ page }) => {
     .hover()
     .then(async () => {
       await expect(
-        page.getByTestId("available-input-memories").first()
+        page.getByTestId("tooltip-Model Specs").first()
       ).toBeVisible();
+      await page.waitForTimeout(2000);
 
-      await expect(page.getByTestId("tooltip-Memories").first()).toBeVisible();
+      await expect(page.getByTestId("tooltip-Models").first()).toBeVisible();
 
-      await expect(
-        page
-          .getByTestId(
-            "tooltip-ConversationBufferMemory, ConversationBufferWindowMemory, ConversationEntityMemory, ConversationKGMemory, ConversationSummaryMemory, MotorheadMemory, VectorStoreRetrieverMemory"
-          )
-          .first()
-      ).toBeVisible();
       await page.getByTestId("icon-Search").click();
 
       await page.waitForTimeout(500);
@@ -97,11 +90,29 @@ test("LLMChain - Tooltip", async ({ page }) => {
 });
 
 test("LLMChain - Filter", async ({ page }) => {
-  await page.goto("http://localhost:3000/");
+  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.locator('//*[@id="new-project-btn"]').click();
+    await page.waitForTimeout(5000);
+    modalCount = await page.getByTestId("modal-title")?.count();
+  }
   await page.waitForTimeout(1000);
 
-  await page.locator('//*[@id="new-project-btn"]').click();
-  await page.waitForTimeout(1000);
+  await page.getByTestId(
+    "input-list-plus-btn-edit_metadata_indexing_include-2"
+  );
 
   await page.getByTestId("blank-flow").click();
   await page.waitForTimeout(1000);
@@ -115,43 +126,28 @@ test("LLMChain - Filter", async ({ page }) => {
     .dragTo(page.locator('//*[@id="react-flow-id"]'));
   await page.mouse.up();
   await page.mouse.down();
-  await page
-    .locator('//*[@id="react-flow-id"]/div[1]/div[2]/button[2]')
-    .click();
-
-  await page
-    .locator('//*[@id="react-flow-id"]/div[1]/div[2]/button[2]')
-    .click();
-
-  await page
-    .locator('//*[@id="react-flow-id"]/div[1]/div[2]/button[2]')
-    .click();
   await page.getByTitle("fit view").click();
-
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
   await page.waitForTimeout(500);
 
   await page
     .locator(
-      '//*[@id="react-flow-id"]/div[1]/div[1]/div/div/div[2]/div/div/div[2]/div[3]/div/button/div/div'
+      '//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div/div/div[2]/div[4]/div/button/div/div'
     )
     .click();
 
   await page
     .locator(
-      '//*[@id="react-flow-id"]/div[1]/div[1]/div/div/div[2]/div/div/div[2]/div[3]/div/button/div/div'
+      '//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div/div/div[2]/div[4]/div/button/div/div'
     )
     .click();
-  await page.getByTestId("icon-Search").click();
 
   await expect(page.getByTestId("disclosure-models")).toBeVisible();
-  await expect(page.getByTestId("disclosure-model specs")).toBeVisible();
-
-  await expect(page.getByTestId("modelsAzure OpenAI")).toBeVisible();
+  await expect(page.getByTestId("model_specsAnthropic").first()).toBeVisible();
   await expect(page.getByTestId("model_specsAmazon Bedrock")).toBeVisible();
-  await expect(page.getByTestId("model_specsAnthropic")).toBeVisible();
-  await expect(page.getByTestId("model_specsAnthropicLLM")).toBeVisible();
   await expect(page.getByTestId("model_specsAzureChatOpenAI")).toBeVisible();
-  await expect(page.getByTestId("model_specsChatAnthropic")).toBeVisible();
   await expect(page.getByTestId("model_specsChatLiteLLM")).toBeVisible();
   await expect(page.getByTestId("model_specsChatOllama")).toBeVisible();
   await expect(page.getByTestId("model_specsChatOpenAI")).toBeVisible();
@@ -176,8 +172,6 @@ test("LLMChain - Filter", async ({ page }) => {
   await expect(page.getByTestId("model_specsCTransformers")).not.toBeVisible();
   await expect(page.getByTestId("model_specsAmazon Bedrock")).not.toBeVisible();
   await expect(page.getByTestId("modelsAzure OpenAI")).not.toBeVisible();
-  await expect(page.getByTestId("model_specsAnthropic")).not.toBeVisible();
-  await expect(page.getByTestId("model_specsAnthropicLLM")).not.toBeVisible();
   await expect(
     page.getByTestId("model_specsAzureChatOpenAI")
   ).not.toBeVisible();
@@ -190,52 +184,19 @@ test("LLMChain - Filter", async ({ page }) => {
 
   await page
     .locator(
-      '//*[@id="react-flow-id"]/div[1]/div[1]/div/div/div[2]/div/div/div[2]/div[4]/div/button/div/div'
+      '//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div/div/div[2]/div[7]/button/div/div'
     )
     .click();
 
   await page
     .locator(
-      '//*[@id="react-flow-id"]/div[1]/div[1]/div/div/div[2]/div/div/div[2]/div[4]/div/button/div/div'
+      '//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div/div/div[2]/div[7]/button/div/div'
     )
     .click();
 
-  await expect(page.getByTestId("disclosure-memories")).toBeVisible();
-  await expect(
-    page.getByTestId("memoriesConversationBufferMemory")
-  ).toBeVisible();
-  await expect(
-    page.getByTestId("memoriesConversationBufferWindowMemory")
-  ).toBeVisible();
-  await expect(
-    page.getByTestId("memoriesConversationEntityMemory")
-  ).toBeVisible();
-  await expect(page.getByTestId("memoriesConversationKGMemory")).toBeVisible();
-  await expect(page.getByTestId("memoriesConversationKGMemory")).toBeVisible();
-  await expect(
-    page.getByTestId("memoriesConversationSummaryMemory")
-  ).toBeVisible();
-  await expect(
-    page.getByTestId("memoriesVectorStoreRetrieverMemory")
-  ).toBeVisible();
-
-  await page.getByTestId("rf__wrapper").click();
-
-  await expect(
-    page.getByTestId("memoriesConversationBufferMemory")
-  ).toBeVisible();
-  await expect(
-    page.getByTestId("memoriesConversationBufferWindowMemory")
-  ).toBeVisible();
-  await expect(
-    page.getByTestId("memoriesConversationEntityMemory")
-  ).toBeVisible();
-  await expect(page.getByTestId("memoriesConversationKGMemory")).toBeVisible();
-  await expect(page.getByTestId("memoriesConversationKGMemory")).toBeVisible();
-  await expect(
-    page.getByTestId("memoriesConversationSummaryMemory")
-  ).toBeVisible();
-  await expect(
-    page.getByTestId("memoriesVectorStoreRetrieverMemory")
-  ).toBeVisible();
+  await expect(page.getByTestId("inputsChat Input")).toBeVisible();
+  await expect(page.getByTestId("outputsChat Output")).toBeVisible();
+  await expect(page.getByTestId("helpersID Generator")).toBeVisible();
+  await expect(page.getByTestId("vectorstoresChroma")).toBeVisible();
+  await expect(page.getByTestId("disclosure-vector stores")).toBeVisible();
 });
diff --git a/src/frontend/tests/end-to-end/floatComponent.spec.ts b/src/frontend/tests/end-to-end/floatComponent.spec.ts
index 587f0e7ef..23e0bab1a 100644
--- a/src/frontend/tests/end-to-end/floatComponent.spec.ts
+++ b/src/frontend/tests/end-to-end/floatComponent.spec.ts
@@ -1,10 +1,24 @@
 import { expect, test } from "@playwright/test";
 
 test("FloatComponent", async ({ page }) => {
-  await page.goto("http:localhost:3000/");
+  await page.goto("/");
   await page.waitForTimeout(2000);
 
-  await page.locator('//*[@id="new-project-btn"]').click();
+  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.locator('//*[@id="new-project-btn"]').click();
+    await page.waitForTimeout(5000);
+    modalCount = await page.getByTestId("modal-title")?.count();
+  }
   await page.waitForTimeout(1000);
 
   await page.getByTestId("blank-flow").click();
@@ -20,28 +34,10 @@ test("FloatComponent", async ({ page }) => {
     .dragTo(page.locator('//*[@id="react-flow-id"]'));
   await page.mouse.up();
   await page.mouse.down();
-  await page
-    .locator('//*[@id="react-flow-id"]/div[1]/div[2]/button[2]')
-    .click();
-
-  await page
-    .locator('//*[@id="react-flow-id"]/div[1]/div[2]/button[2]')
-    .click();
-
-  await page
-    .locator('//*[@id="react-flow-id"]/div[1]/div[2]/button[2]')
-    .click();
-  await page
-    .locator('//*[@id="react-flow-id"]/div[1]/div[2]/button[2]')
-    .click();
-
-  await page
-    .locator('//*[@id="react-flow-id"]/div[1]/div[2]/button[2]')
-    .click();
-
-  await page
-    .locator('//*[@id="react-flow-id"]/div[1]/div[2]/button[2]')
-    .click();
+  await page.getByTitle("fit view").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
 
   await page.locator('//*[@id="float-input"]').click();
   await page.locator('//*[@id="float-input"]').fill("3");
@@ -145,7 +141,7 @@ test("FloatComponent", async ({ page }) => {
   await page.locator('//*[@id="saveChangesBtn"]').click();
 
   const plusButtonLocator = page.locator('//*[@id="float-input"]');
-  const elementCount = await plusButtonLocator.count();
+  const elementCount = await plusButtonLocator?.count();
   if (elementCount === 0) {
     expect(true).toBeTruthy();
 
diff --git a/src/frontend/tests/end-to-end/flowPage.spec.ts b/src/frontend/tests/end-to-end/flowPage.spec.ts
index f9511d37a..e434824e4 100644
--- a/src/frontend/tests/end-to-end/flowPage.spec.ts
+++ b/src/frontend/tests/end-to-end/flowPage.spec.ts
@@ -1,17 +1,25 @@
-import { Page, test } from "@playwright/test";
+import { test } from "@playwright/test";
 
 test.describe("Flow Page tests", () => {
-  async function goToFlowPage(page: Page) {
-    await page.goto("http:localhost:3000/");
-    await page.getByRole("button", { name: "New Project" }).click();
-  }
-
   test("save", async ({ page }) => {
-    await page.goto("http:localhost:3000/");
+    await page.goto("/");
     await page.waitForTimeout(2000);
 
-    await page.locator('//*[@id="new-project-btn"]').click();
-    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.locator('//*[@id="new-project-btn"]').click();
+      await page.waitForTimeout(5000);
+      modalCount = await page.getByTestId("modal-title")?.count();
+    }
 
     await page.getByTestId("blank-flow").click();
     await page.waitForTimeout(1000);
@@ -26,18 +34,9 @@ test.describe("Flow Page tests", () => {
       .dragTo(page.locator('//*[@id="react-flow-id"]'));
     await page.mouse.up();
     await page.mouse.down();
-    await page
-      .locator('//*[@id="react-flow-id"]/div[1]/div[2]/button[2]')
-      .click();
-
-    await page
-      .locator('//*[@id="react-flow-id"]/div[1]/div[2]/button[2]')
-      .click();
-
-    await page
-      .locator('//*[@id="react-flow-id"]/div[1]/div[2]/button[2]')
-      .click();
-    // await page.getByTestId("icon-ExternalLink").click();
-    // await page.locator('//*[@id="checkAndSaveBtn"]').click();
+    await page.getByTitle("fit view").click();
+    await page.getByTitle("zoom out").click();
+    await page.getByTitle("zoom out").click();
+    await page.getByTitle("zoom out").click();
   });
 });
diff --git a/src/frontend/tests/end-to-end/flowSettings.spec.ts b/src/frontend/tests/end-to-end/flowSettings.spec.ts
new file mode 100644
index 000000000..f0f9f010c
--- /dev/null
+++ b/src/frontend/tests/end-to-end/flowSettings.spec.ts
@@ -0,0 +1,73 @@
+import { expect, test } from "@playwright/test";
+
+test("flowSettings", 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.locator('//*[@id="new-project-btn"]').click();
+    await page.waitForTimeout(5000);
+    modalCount = await page.getByTestId("modal-title")?.count();
+  }
+  await page.waitForTimeout(1000);
+
+  await page.getByTestId("blank-flow").click();
+  await page.waitForTimeout(1000);
+
+  await page.getByTestId("flow_name").click();
+  await page.getByText("Settings").first().click();
+  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"
+    );
+
+  await page.getByText("Character limit reached").isVisible();
+
+  await page.getByPlaceholder("Flow name").click();
+  const randomName = Math.random().toString(36).substring(2);
+  await page.getByPlaceholder("Flow name").fill(randomName);
+  await page.getByPlaceholder("Flow name").click();
+  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"
+    );
+
+  await page.getByText("Save").last().click();
+
+  await page.waitForTimeout(1000);
+
+  await page.getByText("Changes saved successfully").isVisible();
+
+  await page.getByTestId("flow_name").click();
+  await page.getByText("Settings").first().click();
+
+  const flowName = await page.getByPlaceholder("Flow name").inputValue();
+  const flowDescription = await page
+    .getByPlaceholder("Flow description")
+    .inputValue();
+
+  if (flowName != randomName) {
+    expect(false).toBeTruthy();
+  }
+
+  if (
+    flowDescription !=
+    "Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test"
+  ) {
+    expect(false).toBeTruthy();
+  }
+  await page.getByText("Saved").first().isVisible();
+  await page.getByTestId("icon-CheckCircle2").first().isVisible();
+});
diff --git a/src/frontend/tests/end-to-end/globalVariables.spec.ts b/src/frontend/tests/end-to-end/globalVariables.spec.ts
new file mode 100644
index 000000000..bd3758a7d
--- /dev/null
+++ b/src/frontend/tests/end-to-end/globalVariables.spec.ts
@@ -0,0 +1,72 @@
+import { expect, test } from "@playwright/test";
+
+test("GlobalVariables", 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.locator('//*[@id="new-project-btn"]').click();
+    await page.waitForTimeout(5000);
+    modalCount = await page.getByTestId("modal-title")?.count();
+  }
+  await page.waitForTimeout(1000);
+
+  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("openai");
+
+  await page.waitForTimeout(1000);
+
+  await page
+    .getByTestId("modelsOpenAI")
+    .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();
+
+  const genericName = Math.random().toString();
+  const credentialName = Math.random().toString();
+
+  await page.getByTestId("icon-Globe").nth(1).click();
+  await page.getByText("Add New Variable", { exact: true }).click();
+  await page
+    .getByPlaceholder("Insert a name for the variable...")
+    .fill(genericName);
+  await page.getByTestId("icon-ChevronsUpDown").nth(1).click();
+  await page.getByText("Generic", { exact: true }).click();
+  await page
+    .getByPlaceholder("Insert a value for the variable...")
+    .fill("This is a test of generic variable value");
+  await page.getByText("Save Variable", { exact: true }).click();
+  expect(page.getByText(genericName, { exact: true })).not.toBeNull();
+  await page.getByText(genericName, { exact: true }).isVisible();
+
+  await page.getByText("Add New Variable", { exact: true }).click();
+  await page
+    .getByPlaceholder("Insert a name for the variable...")
+    .fill(credentialName);
+  await page.getByTestId("icon-ChevronsUpDown").nth(1).click();
+  await page.getByText("Credential", { exact: true }).click();
+  await page
+    .getByPlaceholder("Insert a value for the variable...")
+    .fill("This is a test of credential variable value");
+  await page.getByText("Save Variable", { exact: true }).click();
+  expect(page.getByText(credentialName, { exact: true })).not.toBeNull();
+  await page.getByText(credentialName, { exact: true }).isVisible();
+});
diff --git a/src/frontend/tests/end-to-end/group.spec.ts b/src/frontend/tests/end-to-end/group.spec.ts
index 1a7c294fe..03ec9719c 100644
--- a/src/frontend/tests/end-to-end/group.spec.ts
+++ b/src/frontend/tests/end-to-end/group.spec.ts
@@ -4,7 +4,21 @@ test.describe("group node test", () => {
   /// <reference lib="dom"/>
   test("group and ungroup updating values", async ({ page }) => {
     await page.goto("/");
-    await page.locator('//*[@id="new-project-btn"]').click();
+
+    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.locator('//*[@id="new-project-btn"]').click();
+      modalCount = await page.getByTestId("modal-title")?.count();
+    }
 
     await page
       .getByRole("heading", { name: "Basic Prompting" })
@@ -13,8 +27,6 @@ test.describe("group node test", () => {
     await page.waitForTimeout(2000);
     await page.getByLabel("fit view").first().click();
     await page.getByTestId("title-OpenAI").click({ modifiers: ["Control"] });
-    await page.getByTestId("title-Prompt").click({ modifiers: ["Control"] });
-    await page.getByTestId("title-OpenAI").click({ modifiers: ["Control"] });
 
     await page.getByRole("button", { name: "Group" }).click();
     await page.getByTestId("title-Group").dblclick();
diff --git a/src/frontend/tests/end-to-end/inputComponent.spec.ts b/src/frontend/tests/end-to-end/inputComponent.spec.ts
index 8a1b4b46c..267b935cc 100644
--- a/src/frontend/tests/end-to-end/inputComponent.spec.ts
+++ b/src/frontend/tests/end-to-end/inputComponent.spec.ts
@@ -1,10 +1,24 @@
 import { expect, test } from "@playwright/test";
 
 test("InputComponent", async ({ page }) => {
-  await page.goto("http:localhost:3000/");
+  await page.goto("/");
   await page.waitForTimeout(2000);
 
-  await page.locator('//*[@id="new-project-btn"]').click();
+  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.locator('//*[@id="new-project-btn"]').click();
+    await page.waitForTimeout(5000);
+    modalCount = await page.getByTestId("modal-title")?.count();
+  }
   await page.waitForTimeout(1000);
 
   await page.getByTestId("blank-flow").click();
@@ -20,17 +34,10 @@ test("InputComponent", async ({ page }) => {
     .dragTo(page.locator('//*[@id="react-flow-id"]'));
   await page.mouse.up();
   await page.mouse.down();
-  await page
-    .locator('//*[@id="react-flow-id"]/div[1]/div[2]/button[2]')
-    .click();
-
-  await page
-    .locator('//*[@id="react-flow-id"]/div[1]/div[2]/button[2]')
-    .click();
-
-  await page
-    .locator('//*[@id="react-flow-id"]/div[1]/div[2]/button[2]')
-    .click();
+  await page.getByTitle("fit view").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
   await page.getByTestId("input-collection_name").click();
   await page
     .getByTestId("input-collection_name")
@@ -132,7 +139,7 @@ test("InputComponent", async ({ page }) => {
   await page.locator('//*[@id="saveChangesBtn"]').click();
 
   const plusButtonLocator = page.getByTestId("input-collection_name");
-  const elementCount = await plusButtonLocator.count();
+  const elementCount = await plusButtonLocator?.count();
   if (elementCount === 0) {
     expect(true).toBeTruthy();
 
diff --git a/src/frontend/tests/end-to-end/inputListComponent.spec.ts b/src/frontend/tests/end-to-end/inputListComponent.spec.ts
index 3ed170af2..b6c2678fd 100644
--- a/src/frontend/tests/end-to-end/inputListComponent.spec.ts
+++ b/src/frontend/tests/end-to-end/inputListComponent.spec.ts
@@ -1,36 +1,41 @@
 import { expect, test } from "@playwright/test";
 
 test("InputListComponent", async ({ page }) => {
-  await page.goto("http://localhost:3000/");
+  await page.goto("/");
   await page.waitForTimeout(1000);
 
-  await page.locator('//*[@id="new-project-btn"]').click();
-  await page.waitForTimeout(1000);
-  await page.locator('//*[@id="new-project-btn"]').click();
+  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.locator('//*[@id="new-project-btn"]').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("astradb search");
+  await page.getByPlaceholder("Search").fill("astradb");
 
   await page.waitForTimeout(1000);
   await page
-    .getByTestId("vectorsearchAstraDB Search")
+    .getByTestId("vectorsearchAstra DB Search")
     .dragTo(page.locator('//*[@id="react-flow-id"]'));
   await page.mouse.up();
   await page.mouse.down();
-  await page
-    .locator('//*[@id="react-flow-id"]/div[1]/div[2]/button[2]')
-    .click();
-
-  await page
-    .locator('//*[@id="react-flow-id"]/div[1]/div[2]/button[2]')
-    .click();
-
-  await page
-    .locator('//*[@id="react-flow-id"]/div[1]/div[2]/button[2]')
-    .click();
+  await page.getByTitle("fit view").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
   await page.getByTestId("div-generic-node").click();
   await page.getByTestId("more-options-modal").click();
   await page.getByTestId("edit-button-modal").click();
@@ -90,7 +95,7 @@ test("InputListComponent", async ({ page }) => {
   const plusButtonLocator = page.getByTestId(
     "input-list-plus-btn_metadata_indexing_include-1"
   );
-  const elementCount = await plusButtonLocator.count();
+  const elementCount = await plusButtonLocator?.count();
 
   if (elementCount > 0) {
     expect(false).toBeTruthy();
@@ -161,12 +166,12 @@ test("InputListComponent", async ({ page }) => {
   const plusButtonLocatorEdit0 = await page.getByTestId(
     "input-list-plus-btn-edit_metadata_indexing_include-0"
   );
-  const elementCountEdit0 = await plusButtonLocatorEdit0.count();
+  const elementCountEdit0 = await plusButtonLocatorEdit0?.count();
 
   const plusButtonLocatorEdit2 = await page.getByTestId(
     "input-list-plus-btn-edit_metadata_indexing_include-2"
   );
-  const elementCountEdit2 = await plusButtonLocatorEdit2.count();
+  const elementCountEdit2 = await plusButtonLocatorEdit2?.count();
 
   if (elementCountEdit0 > 0 || elementCountEdit2 > 0) {
     expect(false).toBeTruthy();
@@ -176,13 +181,13 @@ test("InputListComponent", async ({ page }) => {
     "input-list-minus-btn-edit_metadata_indexing_include-1"
   );
 
-  const elementCountMinusEdit1 = await minusButtonLocatorEdit1.count();
+  const elementCountMinusEdit1 = await minusButtonLocatorEdit1?.count();
 
   const minusButtonLocatorEdit2 = await page.getByTestId(
     "input-list-minus-btn-edit_metadata_indexing_include-2"
   );
 
-  const elementCountMinusEdit2 = await minusButtonLocatorEdit2.count();
+  const elementCountMinusEdit2 = await minusButtonLocatorEdit2?.count();
 
   if (elementCountMinusEdit1 > 0 || elementCountMinusEdit2 > 0) {
     expect(false).toBeTruthy();
diff --git a/src/frontend/tests/end-to-end/intComponent.spec.ts b/src/frontend/tests/end-to-end/intComponent.spec.ts
index ae5e2fbd2..87b89d790 100644
--- a/src/frontend/tests/end-to-end/intComponent.spec.ts
+++ b/src/frontend/tests/end-to-end/intComponent.spec.ts
@@ -1,10 +1,24 @@
 import { expect, test } from "@playwright/test";
 
 test("IntComponent", async ({ page }) => {
-  await page.goto("http:localhost:3000/");
+  await page.goto("/");
   await page.waitForTimeout(2000);
 
-  await page.locator('//*[@id="new-project-btn"]').click();
+  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.locator('//*[@id="new-project-btn"]').click();
+    await page.waitForTimeout(5000);
+    modalCount = await page.getByTestId("modal-title")?.count();
+  }
   await page.waitForTimeout(1000);
 
   await page.getByTestId("blank-flow").click();
@@ -21,17 +35,10 @@ test("IntComponent", async ({ page }) => {
     .dragTo(page.locator('//*[@id="react-flow-id"]'));
   await page.mouse.up();
   await page.mouse.down();
-  await page
-    .locator('//*[@id="react-flow-id"]/div[1]/div[2]/button[2]')
-    .click();
-
-  await page
-    .locator('//*[@id="react-flow-id"]/div[1]/div[2]/button[2]')
-    .click();
-
-  await page
-    .locator('//*[@id="react-flow-id"]/div[1]/div[2]/button[2]')
-    .click();
+  await page.getByTitle("fit view").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
   await page.getByTestId("int-input-max_tokens").click();
   await page
     .getByTestId("int-input-max_tokens")
@@ -53,17 +60,10 @@ test("IntComponent", async ({ page }) => {
   }
 
   await page.getByTestId("title-ChatOpenAI").click();
-  await page
-    .locator('//*[@id="react-flow-id"]/div[1]/div[2]/button[2]')
-    .click();
-
-  await page
-    .locator('//*[@id="react-flow-id"]/div[1]/div[2]/button[2]')
-    .click();
-
-  await page
-    .locator('//*[@id="react-flow-id"]/div[1]/div[2]/button[2]')
-    .click();
+  await page.getByTitle("fit view").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
 
   await page.getByTestId("more-options-modal").click();
   await page.getByTestId("edit-button-modal").click();
@@ -157,7 +157,7 @@ test("IntComponent", async ({ page }) => {
   await page.locator('//*[@id="saveChangesBtn"]').click();
 
   const plusButtonLocator = page.getByTestId("int-input-max_tokens");
-  const elementCount = await plusButtonLocator.count();
+  const elementCount = await plusButtonLocator?.count();
   if (elementCount === 0) {
     expect(true).toBeTruthy();
 
diff --git a/src/frontend/tests/end-to-end/keyPairListComponent.spec.ts b/src/frontend/tests/end-to-end/keyPairListComponent.spec.ts
index 5b27103cc..174254933 100644
--- a/src/frontend/tests/end-to-end/keyPairListComponent.spec.ts
+++ b/src/frontend/tests/end-to-end/keyPairListComponent.spec.ts
@@ -1,36 +1,43 @@
 import { expect, test } from "@playwright/test";
 
 test("KeypairListComponent", async ({ page }) => {
-  await page.goto("http:localhost:3000/");
+  await page.goto("/");
   await page.waitForTimeout(2000);
 
-  await page.locator('//*[@id="new-project-btn"]').click();
+  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.locator('//*[@id="new-project-btn"]').click();
+    await page.waitForTimeout(5000);
+    modalCount = await page.getByTestId("modal-title")?.count();
+  }
   await page.waitForTimeout(1000);
 
   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("csv");
+  await page.getByPlaceholder("Search").fill("amazon bedrock");
 
   await page.waitForTimeout(1000);
 
   await page
-    .getByTestId("documentloadersCSVLoader")
+    .getByTestId("model_specsAmazon Bedrock")
     .dragTo(page.locator('//*[@id="react-flow-id"]'));
   await page.mouse.up();
   await page.mouse.down();
-  await page
-    .locator('//*[@id="react-flow-id"]/div[1]/div[2]/button[2]')
-    .click();
-
-  await page
-    .locator('//*[@id="react-flow-id"]/div[1]/div[2]/button[2]')
-    .click();
-
-  await page
-    .locator('//*[@id="react-flow-id"]/div[1]/div[2]/button[2]')
-    .click();
+  await page.getByTitle("fit view").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
   await page.locator('//*[@id="keypair0"]').click();
   await page.locator('//*[@id="keypair0"]').fill("testtesttesttest");
   await page.locator('//*[@id="keypair100"]').click();
@@ -48,7 +55,7 @@ test("KeypairListComponent", async ({ page }) => {
   }
 
   const plusButtonLocatorNode = page.locator('//*[@id="plusbtn0"]');
-  const elementCountNode = await plusButtonLocatorNode.count();
+  const elementCountNode = await plusButtonLocatorNode?.count();
   if (elementCountNode > 0) {
     await plusButtonLocatorNode.click();
   }
@@ -59,7 +66,7 @@ test("KeypairListComponent", async ({ page }) => {
   await page.getByTestId("div-generic-node").click();
 
   const keyPairVerification = page.locator('//*[@id="keypair100"]');
-  const elementKeyCount = await keyPairVerification.count();
+  const elementKeyCount = await keyPairVerification?.count();
 
   if (elementKeyCount === 1) {
     expect(true).toBeTruthy();
@@ -70,16 +77,16 @@ test("KeypairListComponent", async ({ page }) => {
   await page.getByTestId("more-options-modal").click();
   await page.getByTestId("edit-button-modal").click();
 
-  await page.locator('//*[@id="showfile_path"]').click();
+  await page.locator('//*[@id="showcache"]').click();
+  expect(await page.locator('//*[@id="showcache"]').isChecked()).toBeFalsy();
+  await page.locator('//*[@id="showcredentials_profile_name"]').click();
   expect(
-    await page.locator('//*[@id="showfile_path"]').isChecked()
+    await page.locator('//*[@id="showcredentials_profile_name"]').isChecked()
   ).toBeFalsy();
-  await page.locator('//*[@id="showmetadata"]').click();
-  expect(await page.locator('//*[@id="showmetadata"]').isChecked()).toBeFalsy();
   await page.locator('//*[@id="saveChangesBtn"]').click();
 
   const plusButtonLocator = page.locator('//*[@id="plusbtn0"]');
-  const elementCount = await plusButtonLocator.count();
+  const elementCount = await plusButtonLocator?.count();
   if (elementCount === 0) {
     expect(true).toBeTruthy();
     await page.getByTestId("div-generic-node").click();
@@ -87,20 +94,18 @@ test("KeypairListComponent", async ({ page }) => {
     await page.getByTestId("more-options-modal").click();
     await page.getByTestId("edit-button-modal").click();
 
-    await page.locator('//*[@id="showfile_path"]').click();
+    await page.locator('//*[@id="showcredentials_profile_name"]').click();
     expect(
-      await page.locator('//*[@id="showfile_path"]').isChecked()
-    ).toBeTruthy();
-    await page.locator('//*[@id="showmetadata"]').click();
-    expect(
-      await page.locator('//*[@id="showmetadata"]').isChecked()
+      await page.locator('//*[@id="showcredentials_profile_name"]').isChecked()
     ).toBeTruthy();
+    await page.locator('//*[@id="showcache"]').click();
+    expect(await page.locator('//*[@id="showcache"]').isChecked()).toBeTruthy();
 
     await page.locator('//*[@id="editNodekeypair0"]').click();
     await page.locator('//*[@id="editNodekeypair0"]').fill("testtesttesttest");
 
     const keyPairVerification = page.locator('//*[@id="editNodekeypair0"]');
-    const elementKeyCount = await keyPairVerification.count();
+    const elementKeyCount = await keyPairVerification?.count();
 
     if (elementKeyCount === 1) {
       await page.locator('//*[@id="saveChangesBtn"]').click();
diff --git a/src/frontend/tests/end-to-end/langflowShortcuts.spec.ts b/src/frontend/tests/end-to-end/langflowShortcuts.spec.ts
index becc6c5d1..9e4956a08 100644
--- a/src/frontend/tests/end-to-end/langflowShortcuts.spec.ts
+++ b/src/frontend/tests/end-to-end/langflowShortcuts.spec.ts
@@ -1,6 +1,7 @@
 import { expect, test } from "@playwright/test";
 import uaParser from "ua-parser-js";
 test("LangflowShortcuts", async ({ page }) => {
+  await page.goto("/");
   const getUA = await page.evaluate(() => navigator.userAgent);
   const userAgentInfo = uaParser(getUA);
   let control = "Control";
@@ -9,11 +10,23 @@ test("LangflowShortcuts", async ({ page }) => {
     control = "Meta";
   }
 
-  await page.goto("http:localhost:3000/");
   await page.waitForTimeout(1000);
 
-  await page.locator('//*[@id="new-project-btn"]').click();
-  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.locator('//*[@id="new-project-btn"]').click();
+    await page.waitForTimeout(5000);
+    modalCount = await page.getByTestId("modal-title")?.count();
+  }
 
   await page.getByTestId("blank-flow").click();
   await page.waitForTimeout(1000);
@@ -30,17 +43,10 @@ test("LangflowShortcuts", async ({ page }) => {
   await page.mouse.down();
 
   await page.locator('//*[@id="react-flow-id"]/div/div[2]/button[3]').click();
-  await page
-    .locator('//*[@id="react-flow-id"]/div[1]/div[2]/button[2]')
-    .click();
-
-  await page
-    .locator('//*[@id="react-flow-id"]/div[1]/div[2]/button[2]')
-    .click();
-
-  await page
-    .locator('//*[@id="react-flow-id"]/div[1]/div[2]/button[2]')
-    .click();
+  await page.getByTitle("fit view").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
   await page.getByTestId("title-Ollama").click();
   await page.keyboard.press(`${control}+Shift+A`);
   await page.locator('//*[@id="saveChangesBtn"]').click();
@@ -48,7 +54,7 @@ test("LangflowShortcuts", async ({ page }) => {
   await page.getByTestId("title-Ollama").click();
   await page.keyboard.press(`${control}+d`);
 
-  let numberOfNodes = await page.getByTestId("title-Ollama").count();
+  let numberOfNodes = await page.getByTestId("title-Ollama")?.count();
   if (numberOfNodes != 2) {
     expect(false).toBeTruthy();
   }
@@ -60,7 +66,7 @@ test("LangflowShortcuts", async ({ page }) => {
     .click();
   await page.keyboard.press("Backspace");
 
-  numberOfNodes = await page.getByTestId("title-Ollama").count();
+  numberOfNodes = await page.getByTestId("title-Ollama")?.count();
   if (numberOfNodes != 1) {
     expect(false).toBeTruthy();
   }
@@ -71,7 +77,7 @@ test("LangflowShortcuts", async ({ page }) => {
   await page.getByTestId("title-Ollama").click();
   await page.keyboard.press(`${control}+v`);
 
-  numberOfNodes = await page.getByTestId("title-Ollama").count();
+  numberOfNodes = await page.getByTestId("title-Ollama")?.count();
   if (numberOfNodes != 2) {
     expect(false).toBeTruthy();
   }
@@ -86,12 +92,12 @@ test("LangflowShortcuts", async ({ page }) => {
   await page.getByTestId("title-Ollama").click();
   await page.keyboard.press(`${control}+x`);
 
-  numberOfNodes = await page.getByTestId("title-Ollama").count();
+  numberOfNodes = await page.getByTestId("title-Ollama")?.count();
   if (numberOfNodes != 0) {
     expect(false).toBeTruthy();
   }
   await page.keyboard.press(`${control}+v`);
-  numberOfNodes = await page.getByTestId("title-Ollama").count();
+  numberOfNodes = await page.getByTestId("title-Ollama")?.count();
   if (numberOfNodes != 1) {
     expect(false).toBeTruthy();
   }
diff --git a/src/frontend/tests/end-to-end/nestedComponent.spec.ts b/src/frontend/tests/end-to-end/nestedComponent.spec.ts
index 042c683bf..a6b358f71 100644
--- a/src/frontend/tests/end-to-end/nestedComponent.spec.ts
+++ b/src/frontend/tests/end-to-end/nestedComponent.spec.ts
@@ -1,11 +1,24 @@
 import { expect, test } from "@playwright/test";
 
 test("NestedComponent", async ({ page }) => {
-  await page.goto("http:localhost:3000/");
+  await page.goto("/");
   await page.waitForTimeout(2000);
 
-  await page.locator('//*[@id="new-project-btn"]').click();
-  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.locator('//*[@id="new-project-btn"]').click();
+    await page.waitForTimeout(5000);
+    modalCount = await page.getByTestId("modal-title")?.count();
+  }
 
   await page.getByTestId("blank-flow").click();
   await page.waitForTimeout(1000);
diff --git a/src/frontend/tests/end-to-end/promptModalComponent.spec.ts b/src/frontend/tests/end-to-end/promptModalComponent.spec.ts
index 8a64d8dcb..993ebfdd5 100644
--- a/src/frontend/tests/end-to-end/promptModalComponent.spec.ts
+++ b/src/frontend/tests/end-to-end/promptModalComponent.spec.ts
@@ -1,11 +1,24 @@
 import { expect, test } from "@playwright/test";
 
 test("PromptTemplateComponent", async ({ page }) => {
-  await page.goto("http:localhost:3000/");
+  await page.goto("/");
   await page.waitForTimeout(2000);
 
-  await page.locator('//*[@id="new-project-btn"]').click();
-  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.locator('//*[@id="new-project-btn"]').click();
+    await page.waitForTimeout(5000);
+    modalCount = await page.getByTestId("modal-title")?.count();
+  }
 
   await page.getByTestId("blank-flow").click();
   await page.waitForTimeout(1000);
@@ -20,17 +33,10 @@ test("PromptTemplateComponent", async ({ page }) => {
     .dragTo(page.locator('//*[@id="react-flow-id"]'));
   await page.mouse.up();
   await page.mouse.down();
-  await page
-    .locator('//*[@id="react-flow-id"]/div[1]/div[2]/button[2]')
-    .click();
-
-  await page
-    .locator('//*[@id="react-flow-id"]/div[1]/div[2]/button[2]')
-    .click();
-
-  await page
-    .locator('//*[@id="react-flow-id"]/div[1]/div[2]/button[2]')
-    .click();
+  await page.getByTitle("fit view").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
   await page.getByTestId("prompt-input-template").click();
 
   await page
diff --git a/src/frontend/tests/end-to-end/python_api_generation.spec.ts b/src/frontend/tests/end-to-end/python_api_generation.spec.ts
index 6c70ebbb1..27f08edd0 100644
--- a/src/frontend/tests/end-to-end/python_api_generation.spec.ts
+++ b/src/frontend/tests/end-to-end/python_api_generation.spec.ts
@@ -2,8 +2,21 @@ import { expect, test } from "@playwright/test";
 
 test("python_api_generation", async ({ page, context }) => {
   await page.goto("/");
-  await page.locator('//*[@id="new-project-btn"]').click();
-  await context.grantPermissions(["clipboard-read", "clipboard-write"]);
+  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.locator('//*[@id="new-project-btn"]').click();
+    await page.waitForTimeout(5000);
+    modalCount = await page.getByTestId("modal-title")?.count();
+  }
   await page.getByRole("heading", { name: "Basic Prompting" }).click();
   await page.waitForTimeout(2000);
   await page.getByText("API", { exact: true }).click();
diff --git a/src/frontend/tests/end-to-end/saveComponents.spec.ts b/src/frontend/tests/end-to-end/saveComponents.spec.ts
index 3860bb431..47b35bd27 100644
--- a/src/frontend/tests/end-to-end/saveComponents.spec.ts
+++ b/src/frontend/tests/end-to-end/saveComponents.spec.ts
@@ -1,18 +1,24 @@
-import { Page, expect, test } from "@playwright/test";
+import { expect, test } from "@playwright/test";
 import { readFileSync } from "fs";
 
 test.describe("save component tests", () => {
-  async function saveComponent(page: Page, pattern: RegExp, n: number) {
-    for (let i = 0; i < n; i++) {
-      await page.getByTestId(pattern).click();
-      await page.getByLabel("Save").click();
-    }
-  }
-
   /// <reference lib="dom"/>
   test("save group component tests", async ({ page }) => {
-    await page.goto("http:localhost:3000/");
-    await page.locator('//*[@id="new-project-btn"]').click();
+    await page.goto("/");
+    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.locator('//*[@id="new-project-btn"]').click();
+      modalCount = await page.getByTestId("modal-title")?.count();
+    }
 
     await page.getByTestId("blank-flow").click();
     await page.waitForTimeout(1000);
@@ -46,7 +52,7 @@ test.describe("save component tests", () => {
     );
 
     const genericNoda = page.getByTestId("div-generic-node");
-    const elementCount = await genericNoda.count();
+    const elementCount = await genericNoda?.count();
     if (elementCount > 0) {
       expect(true).toBeTruthy();
     }
@@ -68,13 +74,13 @@ test.describe("save component tests", () => {
     await page.getByRole("button", { name: "Group" }).click();
 
     let textArea = page.getByTestId("div-textarea-description");
-    let elementCountText = await textArea.count();
+    let elementCountText = await textArea?.count();
     if (elementCountText > 0) {
       expect(true).toBeTruthy();
     }
 
     let groupNode = page.getByTestId("title-Group");
-    let elementGroup = await groupNode.count();
+    let elementGroup = await groupNode?.count();
     if (elementGroup > 0) {
       expect(true).toBeTruthy();
     }
@@ -98,25 +104,18 @@ test.describe("save component tests", () => {
       .dragTo(page.locator('//*[@id="react-flow-id"]'));
     await page.mouse.up();
     await page.mouse.down();
-    await page
-      .locator('//*[@id="react-flow-id"]/div[1]/div[2]/button[2]')
-      .click();
-
-    await page
-      .locator('//*[@id="react-flow-id"]/div[1]/div[2]/button[2]')
-      .click();
-
-    await page
-      .locator('//*[@id="react-flow-id"]/div[1]/div[2]/button[2]')
-      .click();
+    await page.getByTitle("fit view").click();
+    await page.getByTitle("zoom out").click();
+    await page.getByTitle("zoom out").click();
+    await page.getByTitle("zoom out").click();
     textArea = page.getByTestId("div-textarea-description");
-    elementCountText = await textArea.count();
+    elementCountText = await textArea?.count();
     if (elementCountText > 0) {
       expect(true).toBeTruthy();
     }
 
     groupNode = page.getByTestId("title-Group");
-    elementGroup = await groupNode.count();
+    elementGroup = await groupNode?.count();
     if (elementGroup > 0) {
       expect(true).toBeTruthy();
     }
diff --git a/src/frontend/tests/end-to-end/store.spec.ts b/src/frontend/tests/end-to-end/store.spec.ts
index 20847bdb8..ba126bf7c 100644
--- a/src/frontend/tests/end-to-end/store.spec.ts
+++ b/src/frontend/tests/end-to-end/store.spec.ts
@@ -1,7 +1,7 @@
 import { expect, test } from "@playwright/test";
 
 test("should exists Store", async ({ page }) => {
-  await page.goto("http://localhost:3000/");
+  await page.goto("/");
   await page.waitForTimeout(1000);
 
   await page.getByTestId("button-store").isVisible();
@@ -9,7 +9,7 @@ test("should exists Store", async ({ page }) => {
 });
 
 test("should not have an API key", async ({ page }) => {
-  await page.goto("http://localhost:3000/");
+  await page.goto("/");
   await page.waitForTimeout(1000);
 
   await page.getByTestId("button-store").click();
@@ -19,7 +19,7 @@ test("should not have an API key", async ({ page }) => {
 });
 
 test("should find a searched Component on Store", async ({ page }) => {
-  await page.goto("http://localhost:3000/");
+  await page.goto("/");
   await page.waitForTimeout(1000);
 
   await page.getByTestId("button-store").click();
@@ -39,7 +39,7 @@ test("should find a searched Component on Store", async ({ page }) => {
 });
 
 test("should filter by tag", async ({ page }) => {
-  await page.goto("http://localhost:3000/");
+  await page.goto("/");
   await page.waitForTimeout(1000);
 
   await page.getByTestId("button-store").click();
@@ -66,7 +66,7 @@ test("should filter by tag", async ({ page }) => {
 });
 
 test("should order the visualization", async ({ page }) => {
-  await page.goto("http://localhost:3000/");
+  await page.goto("/");
   await page.waitForTimeout(1000);
 
   await page.getByTestId("button-store").click();
@@ -86,7 +86,7 @@ test("should order the visualization", async ({ page }) => {
 });
 
 test("should filter by type", async ({ page }) => {
-  await page.goto("http://localhost:3000/");
+  await page.goto("/");
   await page.waitForTimeout(1000);
 
   await page.getByTestId("button-store").click();
@@ -97,7 +97,7 @@ test("should filter by type", async ({ page }) => {
   await page.getByTestId("flows-button-store").click();
   await page.waitForTimeout(3000);
 
-  let iconGroup = await page.getByTestId("icon-Group").count();
+  let iconGroup = await page.getByTestId("icon-Group")?.count();
   expect(iconGroup).not.toBe(0);
 
   await page.getByText("icon-ToyBrick").isHidden();
@@ -106,14 +106,14 @@ test("should filter by type", async ({ page }) => {
   await page.waitForTimeout(3000);
 
   await page.getByTestId("icon-Group").isHidden();
-  let toyBrick = await page.getByTestId("icon-ToyBrick").count();
+  let toyBrick = await page.getByTestId("icon-ToyBrick")?.count();
   expect(toyBrick).not.toBe(0);
 
   await page.getByTestId("all-button-store").click();
   await page.waitForTimeout(3000);
 
-  iconGroup = await page.getByTestId("icon-Group").count();
-  toyBrick = await page.getByTestId("icon-ToyBrick").count();
+  iconGroup = await page.getByTestId("icon-Group")?.count();
+  toyBrick = await page.getByTestId("icon-ToyBrick")?.count();
 
   if (iconGroup === 0 || toyBrick === 0) {
     expect(false).toBe(true);
@@ -121,7 +121,7 @@ test("should filter by type", async ({ page }) => {
 });
 
 test("should add API-KEY", async ({ page }) => {
-  await page.goto("http://localhost:3000/");
+  await page.goto("/");
   await page.waitForTimeout(1000);
 
   await page.getByTestId("button-store").click();
@@ -154,7 +154,7 @@ test("should add API-KEY", async ({ page }) => {
 });
 
 test("should like and add components and flows", async ({ page }) => {
-  await page.goto("http://localhost:3000/");
+  await page.goto("/");
   await page.waitForTimeout(1000);
 
   await page.getByTestId("button-store").click();
@@ -216,3 +216,60 @@ test("should like and add components and flows", async ({ page }) => {
   await page.getByTestId("sidebar-nav-Components").click();
   await page.getByText("Basic RAG").first().isVisible();
 });
+
+test("should share component with share button", 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.locator('//*[@id="new-project-btn"]').click();
+    await page.waitForTimeout(5000);
+    modalCount = await page.getByTestId("modal-title")?.count();
+  }
+  await page.waitForTimeout(1000);
+
+  await page.getByRole("heading", { name: "Basic Prompting" }).click();
+  await page.waitForTimeout(1000);
+  const flowName = await page.getByTestId("flow_name").innerText();
+  await page.getByTestId("flow_name").click();
+  await page.getByText("Settings").click();
+  const flowDescription = await page
+    .getByPlaceholder("Flow description")
+    .inputValue();
+  await page.getByText("Save").last().click();
+
+  await page.getByTestId("icon-Share3").first().click();
+  await page.getByText("Name:").isVisible();
+  await page.getByText("Description:").isVisible();
+  await page.getByText("Set workflow status to public").isVisible();
+  await page
+    .getByText(
+      "Attention: API keys in specified fields are automatically removed upon sharing."
+    )
+    .isVisible();
+  await page.getByText("Export").first().isVisible();
+  await page.getByText("Share Flow").first().isVisible();
+
+  await page.waitForTimeout(5000);
+
+  await page.getByText("Agent").first().isVisible();
+  await page.getByText("Memory").first().isVisible();
+  await page.getByText("Chain").first().isVisible();
+  await page.getByText("Vector Store").first().isVisible();
+  await page.getByText("Prompt").last().isVisible();
+  await page.getByTestId("public-checkbox").isChecked();
+  await page.getByText(flowName).last().isVisible();
+  await page.getByText(flowDescription).last().isVisible();
+  await page.waitForTimeout(1000);
+  await page.getByText("Flow shared successfully").last().isVisible();
+});
diff --git a/src/frontend/tests/end-to-end/textAreaModalComponent.spec.ts b/src/frontend/tests/end-to-end/textAreaModalComponent.spec.ts
index c8f69742a..3473155a5 100644
--- a/src/frontend/tests/end-to-end/textAreaModalComponent.spec.ts
+++ b/src/frontend/tests/end-to-end/textAreaModalComponent.spec.ts
@@ -1,13 +1,25 @@
 import { expect, test } from "@playwright/test";
 
 test("TextAreaModalComponent", async ({ page }) => {
-  await page.goto("http://localhost:3000/");
+  await page.goto("/");
   await page.waitForTimeout(1000);
 
-  await page.locator('//*[@id="new-project-btn"]').click();
-  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.locator('//*[@id="new-project-btn"]').click();
+    await page.waitForTimeout(5000);
+    modalCount = await page.getByTestId("modal-title")?.count();
+  }
 
-  await page.locator('//*[@id="new-project-btn"]').click();
   await page.getByTestId("blank-flow").click();
   await page.waitForTimeout(1000);
   await page.getByTestId("extended-disclosure").click();
@@ -21,17 +33,10 @@ test("TextAreaModalComponent", async ({ page }) => {
     .dragTo(page.locator('//*[@id="react-flow-id"]'));
   await page.mouse.up();
   await page.mouse.down();
-  await page
-    .locator('//*[@id="react-flow-id"]/div[1]/div[2]/button[2]')
-    .click();
-
-  await page
-    .locator('//*[@id="react-flow-id"]/div[1]/div[2]/button[2]')
-    .click();
-
-  await page
-    .locator('//*[@id="react-flow-id"]/div[1]/div[2]/button[2]')
-    .click();
+  await page.getByTitle("fit view").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
   await page.getByTestId("prompt-input-template").click();
 
   await page.getByTestId("modal-prompt-input-template").fill("{text}");
diff --git a/src/frontend/tests/end-to-end/textInputOutput.spec.ts b/src/frontend/tests/end-to-end/textInputOutput.spec.ts
new file mode 100644
index 000000000..1b4a10d43
--- /dev/null
+++ b/src/frontend/tests/end-to-end/textInputOutput.spec.ts
@@ -0,0 +1,155 @@
+import { expect, test } from "@playwright/test";
+import * as dotenv from "dotenv";
+import path from "path";
+
+test("TextInputOutputComponent", async ({ page }) => {
+  if (!process.env.CI) {
+    dotenv.config();
+    dotenv.config({ path: path.resolve(__dirname, "../../.env") });
+  }
+
+  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.locator('//*[@id="new-project-btn"]').click();
+    await page.waitForTimeout(5000);
+    modalCount = await page.getByTestId("modal-title")?.count();
+  }
+
+  await page.waitForTimeout(1000);
+
+  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("text input");
+  await page.waitForTimeout(1000);
+
+  await page
+    .getByTestId("inputsText Input")
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+  await page.mouse.up();
+  await page.mouse.down();
+
+  await page.getByPlaceholder("Search").click();
+  await page.getByPlaceholder("Search").fill("openai");
+  await page.waitForTimeout(1000);
+
+  await page
+    .getByTestId("modelsOpenAI")
+    .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();
+
+  // Click and hold on the first element
+  await page
+    .locator(
+      '//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div[1]/div/div[2]/div[6]/button/div/div'
+    )
+    .hover();
+  await page.mouse.down();
+
+  // Move to the second element
+  await page
+    .locator(
+      '//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div[2]/div/div[2]/div[9]/div/button/div/div'
+    )
+    .hover();
+
+  // Release the mouse
+  await page.mouse.up();
+
+  await page.getByPlaceholder("Search").click();
+  await page.getByPlaceholder("Search").fill("text output");
+
+  await page
+    .getByTestId("outputsText Output")
+    .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();
+
+  // Click and hold on the first element
+  await page
+    .locator(
+      '//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div[2]/div/div[2]/div[13]/button/div/div'
+    )
+    .hover();
+  await page.mouse.down();
+
+  // Move to the second element
+  await page
+    .locator(
+      '//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div[3]/div/div[2]/div[3]/div/button/div/div'
+    )
+    .hover();
+
+  // Release the mouse
+  await page.mouse.up();
+
+  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("input-input_value").nth(0).fill("This is a test!");
+
+  await page
+    .getByTestId("input-openai_api_key")
+    .fill(process.env.OPENAI_API_KEY ?? "");
+  await page.getByText("Run", { exact: true }).click();
+  await page.getByText("Run Flow", { exact: true }).click();
+
+  await page.waitForTimeout(5000);
+
+  let textInputContent = await page
+    .getByPlaceholder("Enter text...")
+    .textContent();
+  expect(textInputContent).toBe("This is a test!");
+
+  await page.getByText("Outputs", { exact: true }).nth(1).click();
+  await page.getByText("Text Output", { exact: true }).nth(2).click();
+  let contentOutput = await page.getByPlaceholder("Empty").inputValue();
+  expect(contentOutput).not.toBe(null);
+  expect(contentOutput).not.toBe("");
+
+  await page.keyboard.press("Escape");
+
+  await page
+    .getByTestId("input-input_value")
+    .nth(0)
+    .fill("This is a test, again just to be sure!");
+  await page.getByText("Run", { exact: true }).click();
+  await page.getByText("Run Flow", { exact: true }).click();
+
+  await page.waitForTimeout(5000);
+
+  textInputContent = await page.getByPlaceholder("Enter text...").textContent();
+  expect(textInputContent).toBe("This is a test, again just to be sure!");
+
+  await page.getByText("Outputs", { exact: true }).nth(1).click();
+  await page.getByText("Text Output", { exact: true }).nth(2).click();
+  contentOutput = await page.getByPlaceholder("Empty").textContent();
+  expect(contentOutput).not.toBe(null);
+  expect(contentOutput).not.toBe("");
+});
diff --git a/src/frontend/tests/end-to-end/toggleComponent.spec.ts b/src/frontend/tests/end-to-end/toggleComponent.spec.ts
index 1eabfa6a7..e04df9689 100644
--- a/src/frontend/tests/end-to-end/toggleComponent.spec.ts
+++ b/src/frontend/tests/end-to-end/toggleComponent.spec.ts
@@ -1,36 +1,42 @@
 import { expect, test } from "@playwright/test";
 
 test("ToggleComponent", async ({ page }) => {
-  await page.goto("http:localhost:3000/");
+  await page.goto("/");
   await page.waitForTimeout(2000);
 
-  await page.locator('//*[@id="new-project-btn"]').click();
-  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.locator('//*[@id="new-project-btn"]').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("directoryLoader");
+  await page.getByPlaceholder("Search").fill("directory");
 
   await page.waitForTimeout(1000);
   await page
-    .getByTestId("documentloadersDirectoryLoader")
+    .getByTestId("dataDirectory")
     .dragTo(page.locator('//*[@id="react-flow-id"]'));
   await page.mouse.up();
   await page.mouse.down();
 
-  await page
-    .locator('//*[@id="react-flow-id"]/div[1]/div[2]/button[2]')
-    .click();
-
-  await page
-    .locator('//*[@id="react-flow-id"]/div[1]/div[2]/button[2]')
-    .click();
-
-  await page
-    .locator('//*[@id="react-flow-id"]/div[1]/div[2]/button[2]')
-    .click();
+  await page.getByTitle("fit view").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
 
   await page.getByTestId("div-generic-node").click();
 
@@ -44,8 +50,7 @@ test("ToggleComponent", async ({ page }) => {
 
   await page.locator('//*[@id="saveChangesBtn"]').click();
 
-  await page.getByTestId("toggle-load_hidden").click();
-  expect(await page.getByTestId("toggle-load_hidden").isChecked()).toBeFalsy();
+  await page.getByTitle("fit view").click();
 
   await page.getByTestId("toggle-load_hidden").click();
   expect(await page.getByTestId("toggle-load_hidden").isChecked()).toBeTruthy();
@@ -59,15 +64,20 @@ test("ToggleComponent", async ({ page }) => {
   await page.getByTestId("toggle-load_hidden").click();
   expect(await page.getByTestId("toggle-load_hidden").isChecked()).toBeFalsy();
 
+  await page.getByTestId("toggle-load_hidden").click();
+  expect(await page.getByTestId("toggle-load_hidden").isChecked()).toBeTruthy();
+
   await page.getByTestId("div-generic-node").click();
 
+  await page.getByTitle("fit view").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+
   await page.getByTestId("more-options-modal").click();
   await page.getByTestId("edit-button-modal").click();
 
-  expect(await page.getByTestId("toggle-load_hidden").isChecked()).toBeFalsy();
-
-  await page.locator('//*[@id="showglob"]').click();
-  expect(await page.locator('//*[@id="showglob"]').isChecked()).toBeFalsy();
+  expect(await page.getByTestId("toggle-load_hidden").isChecked()).toBeTruthy();
 
   await page.locator('//*[@id="showload_hidden"]').click();
   expect(
@@ -79,9 +89,6 @@ test("ToggleComponent", async ({ page }) => {
     await page.locator('//*[@id="showmax_concurrency"]').isChecked()
   ).toBeTruthy();
 
-  await page.locator('//*[@id="showmetadata"]').click();
-  expect(await page.locator('//*[@id="showmetadata"]').isChecked()).toBeFalsy();
-
   await page.locator('//*[@id="showpath"]').click();
   expect(await page.locator('//*[@id="showpath"]').isChecked()).toBeFalsy();
 
@@ -100,19 +107,11 @@ test("ToggleComponent", async ({ page }) => {
     await page.locator('//*[@id="showuse_multithreading"]').isChecked()
   ).toBeTruthy();
 
-  await page.locator('//*[@id="showglob"]').click();
-  expect(await page.locator('//*[@id="showglob"]').isChecked()).toBeTruthy();
-
   await page.locator('//*[@id="showmax_concurrency"]').click();
   expect(
     await page.locator('//*[@id="showmax_concurrency"]').isChecked()
   ).toBeFalsy();
 
-  await page.locator('//*[@id="showmetadata"]').click();
-  expect(
-    await page.locator('//*[@id="showmetadata"]').isChecked()
-  ).toBeTruthy();
-
   await page.locator('//*[@id="showpath"]').click();
   expect(await page.locator('//*[@id="showpath"]').isChecked()).toBeTruthy();
 
@@ -134,7 +133,7 @@ test("ToggleComponent", async ({ page }) => {
   await page.locator('//*[@id="saveChangesBtn"]').click();
 
   const plusButtonLocator = page.getByTestId("toggle-load_hidden");
-  const elementCount = await plusButtonLocator.count();
+  const elementCount = await plusButtonLocator?.count();
   if (elementCount === 0) {
     expect(true).toBeTruthy();
 
@@ -150,15 +149,10 @@ test("ToggleComponent", async ({ page }) => {
 
     expect(
       await page.getByTestId("toggle-edit-load_hidden").isChecked()
-    ).toBeFalsy();
+    ).toBeTruthy();
 
     await page.locator('//*[@id="saveChangesBtn"]').click();
 
-    await page.getByTestId("toggle-load_hidden").click();
-    expect(
-      await page.getByTestId("toggle-load_hidden").isChecked()
-    ).toBeTruthy();
-
     await page.getByTestId("toggle-load_hidden").click();
     expect(
       await page.getByTestId("toggle-load_hidden").isChecked()
@@ -178,5 +172,10 @@ test("ToggleComponent", async ({ page }) => {
     expect(
       await page.getByTestId("toggle-load_hidden").isChecked()
     ).toBeTruthy();
+
+    await page.getByTestId("toggle-load_hidden").click();
+    expect(
+      await page.getByTestId("toggle-load_hidden").isChecked()
+    ).toBeFalsy();
   }
 });
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 c89194377..4c81f6146 100644
--- a/src/frontend/tests/end-to-end/tweaks_test.spec.ts
+++ b/src/frontend/tests/end-to-end/tweaks_test.spec.ts
@@ -2,8 +2,22 @@ import { expect, test } from "@playwright/test";
 
 test("curl_api_generation", async ({ page, context }) => {
   await page.goto("/");
-  await page.locator('//*[@id="new-project-btn"]').click();
-  await context.grantPermissions(["clipboard-read", "clipboard-write"]);
+  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.locator('//*[@id="new-project-btn"]').click();
+    await page.waitForTimeout(5000);
+    modalCount = await page.getByTestId("modal-title")?.count();
+  }
+
   await page.getByRole("heading", { name: "Basic Prompting" }).click();
   await page.waitForTimeout(2000);
   await page.getByText("API", { exact: true }).click();