diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
index 3f9885194..58b56354b 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
@@ -54,6 +54,7 @@ export default function ParameterComponent({
   optionalHandle = null,
   info = "",
   showNode,
+  index = "",
 }: ParameterComponentType): JSX.Element {
   const ref = useRef<HTMLDivElement>(null);
   const refHtml = useRef<HTMLDivElement & ReactNode>(null);
@@ -329,6 +330,7 @@ export default function ParameterComponent({
               />
             ) : (
               <InputComponent
+                id={"input-" + index}
                 disabled={disabled}
                 password={data.node?.template[name].password ?? false}
                 value={data.node?.template[name].value ?? ""}
@@ -339,6 +341,7 @@ export default function ParameterComponent({
         ) : left === true && type === "bool" ? (
           <div className="mt-2 w-full">
             <ToggleShadComponent
+              id={"toggle-" + index}
               disabled={disabled}
               enabled={data.node?.template[name].value ?? false}
               setEnabled={(isEnabled) => {
@@ -397,6 +400,7 @@ export default function ParameterComponent({
               disabled={disabled}
               value={data.node?.template[name].value ?? ""}
               onChange={handleOnNewValue}
+              id={"int-input-" + index}
             />
           </div>
         ) : left === true && type === "prompt" ? (
diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx
index 524b54ead..aac79a329 100644
--- a/src/frontend/src/CustomNodes/GenericNode/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx
@@ -178,6 +178,7 @@ export default function GenericNode({
                         data.node!.template[templateField].show &&
                         !data.node!.template[templateField].advanced && (
                           <ParameterComponent
+                            index={idx.toString()}
                             key={
                               (data.node!.template[
                                 templateField
@@ -348,6 +349,7 @@ export default function GenericNode({
                     {data.node!.template[templateField].show &&
                     !data.node!.template[templateField].advanced ? (
                       <ParameterComponent
+                        index={idx.toString()}
                         key={
                           (data.node!.template[templateField].input_types?.join(
                             ";"
diff --git a/src/frontend/src/components/dictComponent/index.tsx b/src/frontend/src/components/dictComponent/index.tsx
index 63a1a5227..b17c678b3 100644
--- a/src/frontend/src/components/dictComponent/index.tsx
+++ b/src/frontend/src/components/dictComponent/index.tsx
@@ -22,7 +22,6 @@ export default function DictComponent({
   }, [value]);
 
   const ref = useRef(value);
-  debugger;
   return (
     <div
       className={classNames(
diff --git a/src/frontend/src/components/inputComponent/index.tsx b/src/frontend/src/components/inputComponent/index.tsx
index 490be0fb0..8f3670efe 100644
--- a/src/frontend/src/components/inputComponent/index.tsx
+++ b/src/frontend/src/components/inputComponent/index.tsx
@@ -15,6 +15,7 @@ export default function InputComponent({
   editNode = false,
   placeholder = "Type something...",
   className,
+  id = "",
 }: InputComponentType): JSX.Element {
   const [pwdVisible, setPwdVisible] = useState(false);
 
@@ -30,6 +31,7 @@ export default function InputComponent({
       {isForm ? (
         <Form.Control asChild>
           <Input
+            id={"form-" + id}
             type={password && !pwdVisible ? "password" : "text"}
             value={value}
             disabled={disabled}
@@ -54,6 +56,7 @@ export default function InputComponent({
         </Form.Control>
       ) : (
         <Input
+          id={id}
           type="text"
           value={value}
           disabled={disabled}
diff --git a/src/frontend/src/components/intComponent/index.tsx b/src/frontend/src/components/intComponent/index.tsx
index dffb1b1f8..f246516ec 100644
--- a/src/frontend/src/components/intComponent/index.tsx
+++ b/src/frontend/src/components/intComponent/index.tsx
@@ -8,6 +8,7 @@ export default function IntComponent({
   onChange,
   disabled,
   editNode = false,
+  id = "",
 }: FloatComponentType): JSX.Element {
   const min = 0;
 
@@ -21,6 +22,7 @@ export default function IntComponent({
   return (
     <div className="w-full">
       <Input
+        id={id}
         onKeyDown={(event) => {
           if (
             event.key !== "Backspace" &&
diff --git a/src/frontend/src/modals/EditNodeModal/index.tsx b/src/frontend/src/modals/EditNodeModal/index.tsx
index 5da769693..cb4d12a5c 100644
--- a/src/frontend/src/modals/EditNodeModal/index.tsx
+++ b/src/frontend/src/modals/EditNodeModal/index.tsx
@@ -216,6 +216,7 @@ const EditNodeModal = forwardRef(
                                     />
                                   ) : (
                                     <InputComponent
+                                      id={"input-" + index}
                                       editNode={true}
                                       disabled={disabled}
                                       password={
@@ -311,6 +312,7 @@ const EditNodeModal = forwardRef(
                                 <div className="ml-auto">
                                   {" "}
                                   <ToggleShadComponent
+                                    id={"toggle-edit-" + index}
                                     disabled={disabled}
                                     enabled={
                                       myData.current.node.template[
@@ -369,6 +371,7 @@ const EditNodeModal = forwardRef(
                                   .type === "int" ? (
                                 <div className="mx-auto">
                                   <IntComponent
+                                    id={"int-input-" + index}
                                     disabled={disabled}
                                     editNode={true}
                                     value={
diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts
index f0a92bff2..0ed800aee 100644
--- a/src/frontend/src/types/components/index.ts
+++ b/src/frontend/src/types/components/index.ts
@@ -17,6 +17,7 @@ export type InputComponentType = {
   showPass?: boolean;
   placeholder?: string;
   className?: string;
+  id?: string;
 };
 export type ToggleComponentType = {
   enabled: boolean;
@@ -48,6 +49,7 @@ export type ParameterComponentType = {
   optionalHandle?: Array<String> | null;
   info?: string;
   showNode?: boolean;
+  index?: string;
 };
 export type InputListComponentType = {
   value: string[];
@@ -131,24 +133,25 @@ export type FloatComponentType = {
   disabled?: boolean;
   onChange: (value: string) => void;
   editNode?: boolean;
+  id?: string;
 };
 
 export type TooltipComponentType = {
   children: ReactElement;
   title: string | ReactElement;
   placement?:
-  | "bottom-end"
-  | "bottom-start"
-  | "bottom"
-  | "left-end"
-  | "left-start"
-  | "left"
-  | "right-end"
-  | "right-start"
-  | "right"
-  | "top-end"
-  | "top-start"
-  | "top";
+    | "bottom-end"
+    | "bottom-start"
+    | "bottom"
+    | "left-end"
+    | "left-start"
+    | "left"
+    | "right-end"
+    | "right-start"
+    | "right"
+    | "top-end"
+    | "top-start"
+    | "top";
 };
 
 export type ProgressBarType = {
diff --git a/src/frontend/tests/floatComponent.spec.ts b/src/frontend/tests/floatComponent.spec.ts
new file mode 100644
index 000000000..2c200b618
--- /dev/null
+++ b/src/frontend/tests/floatComponent.spec.ts
@@ -0,0 +1,415 @@
+import { expect, test } from "@playwright/test";
+
+test("FloatComponent", async ({ page }) => {
+  await page.goto("http://localhost:3000/");
+  await page.waitForTimeout(2000);
+
+  await page.locator('//*[@id="new-project-btn"]').click();
+  await page.waitForTimeout(2000);
+
+  await page.getByPlaceholder("Search").click();
+  await page.getByPlaceholder("Search").fill("llamacpp");
+
+  await page.waitForTimeout(2000);
+
+  await page
+    .locator('//*[@id="sideLlamaCpp"]')
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+  await page.mouse.up();
+  await page.mouse.down();
+
+  await page.locator('//*[@id="float-input"]').click();
+  await page.locator('//*[@id="float-input"]').fill("3");
+
+  let value = await page.locator('//*[@id="float-input"]').inputValue();
+
+  if (value != "2") {
+    expect(false).toBeTruthy();
+  }
+
+  await page.locator('//*[@id="float-input"]').click();
+  await page.locator('//*[@id="float-input"]').fill("-3");
+
+  value = await page.locator('//*[@id="float-input"]').inputValue();
+
+  if (value != "-2") {
+    expect(false).toBeTruthy();
+  }
+
+  await page
+    .locator(
+      '//*[@id="react-flow-id"]/div[1]/div[1]/div[1]/div/div[2]/div/div/div[1]/div/div[1]/div'
+    )
+    .click();
+  await page.locator('//*[@id="editAdvancedIcon"]').click();
+
+  await page.locator('//*[@id="showcache"]').click();
+  expect(await page.locator('//*[@id="showcache"]').isChecked()).toBeTruthy();
+
+  // showecho
+  await page.locator('//*[@id="showecho"]').click();
+  expect(await page.locator('//*[@id="showecho"]').isChecked()).toBeTruthy();
+
+  // showf16_kv
+  await page.locator('//*[@id="showf16_kv"]').click();
+  expect(await page.locator('//*[@id="showf16_kv"]').isChecked()).toBeTruthy();
+
+  // showgrammar_path
+  await page.locator('//*[@id="showgrammar_path"]').click();
+  expect(
+    await page.locator('//*[@id="showgrammar_path"]').isChecked()
+  ).toBeTruthy();
+
+  // showlast_n_tokens_size
+  await page.locator('//*[@id="showlast_n_tokens_size"]').click();
+  expect(
+    await page.locator('//*[@id="showlast_n_tokens_size"]').isChecked()
+  ).toBeTruthy();
+
+  // showlogits_all
+  await page.locator('//*[@id="showlogits_all"]').click();
+  expect(
+    await page.locator('//*[@id="showlogits_all"]').isChecked()
+  ).toBeTruthy();
+
+  // showlogprobs
+  await page.locator('//*[@id="showlogprobs"]').click();
+  expect(
+    await page.locator('//*[@id="showlogprobs"]').isChecked()
+  ).toBeTruthy();
+
+  // showlora_base
+  await page.locator('//*[@id="showlora_base"]').click();
+  expect(
+    await page.locator('//*[@id="showlora_base"]').isChecked()
+  ).toBeTruthy();
+
+  // showlora_path
+  await page.locator('//*[@id="showlora_path"]').click();
+  expect(
+    await page.locator('//*[@id="showlora_path"]').isChecked()
+  ).toBeTruthy();
+
+  // showmax_tokens
+  await page.locator('//*[@id="showmax_tokens"]').click();
+  expect(
+    await page.locator('//*[@id="showmax_tokens"]').isChecked()
+  ).toBeTruthy();
+
+  // showmetadata
+  await page.locator('//*[@id="showmetadata"]').click();
+  expect(
+    await page.locator('//*[@id="showmetadata"]').isChecked()
+  ).toBeTruthy();
+
+  // showmodel_kwargs
+  await page.locator('//*[@id="showmodel_kwargs"]').click();
+  expect(
+    await page.locator('//*[@id="showmodel_kwargs"]').isChecked()
+  ).toBeTruthy();
+
+  // showmodel_path
+  await page.locator('//*[@id="showmodel_path"]').click();
+  expect(
+    await page.locator('//*[@id="showmodel_path"]').isChecked()
+  ).toBeFalsy();
+
+  // shown_batch
+  await page.locator('//*[@id="shown_batch"]').click();
+  expect(await page.locator('//*[@id="shown_batch"]').isChecked()).toBeTruthy();
+
+  // shown_ctx
+  await page.locator('//*[@id="shown_ctx"]').click();
+  expect(await page.locator('//*[@id="shown_ctx"]').isChecked()).toBeTruthy();
+
+  // shown_gpu_layers
+  await page.locator('//*[@id="shown_gpu_layers"]').click();
+  expect(
+    await page.locator('//*[@id="shown_gpu_layers"]').isChecked()
+  ).toBeTruthy();
+
+  // shown_parts
+  await page.locator('//*[@id="shown_parts"]').click();
+  expect(await page.locator('//*[@id="shown_parts"]').isChecked()).toBeTruthy();
+
+  // shown_threads
+  await page.locator('//*[@id="shown_threads"]').click();
+  expect(
+    await page.locator('//*[@id="shown_threads"]').isChecked()
+  ).toBeTruthy();
+
+  // showrepeat_penalty
+  await page.locator('//*[@id="showrepeat_penalty"]').click();
+  expect(
+    await page.locator('//*[@id="showrepeat_penalty"]').isChecked()
+  ).toBeTruthy();
+
+  // showrope_freq_base
+  await page.locator('//*[@id="showrope_freq_base"]').click();
+  expect(
+    await page.locator('//*[@id="showrope_freq_base"]').isChecked()
+  ).toBeTruthy();
+
+  // showrope_freq_scale
+  await page.locator('//*[@id="showrope_freq_scale"]').click();
+  expect(
+    await page.locator('//*[@id="showrope_freq_scale"]').isChecked()
+  ).toBeTruthy();
+
+  // showseed
+  await page.locator('//*[@id="showseed"]').click();
+  expect(await page.locator('//*[@id="showseed"]').isChecked()).toBeTruthy();
+
+  // showstop
+  await page.locator('//*[@id="showstop"]').click();
+  expect(await page.locator('//*[@id="showstop"]').isChecked()).toBeTruthy();
+
+  // showstreaming
+  await page.locator('//*[@id="showstreaming"]').click();
+  expect(
+    await page.locator('//*[@id="showstreaming"]').isChecked()
+  ).toBeTruthy();
+
+  // showsuffix
+  await page.locator('//*[@id="showsuffix"]').click();
+  expect(await page.locator('//*[@id="showsuffix"]').isChecked()).toBeTruthy();
+
+  // showtags
+  await page.locator('//*[@id="showtags"]').click();
+  expect(await page.locator('//*[@id="showtags"]').isChecked()).toBeTruthy();
+
+  // showtemperature
+  await page.locator('//*[@id="showtemperature"]').click();
+  expect(
+    await page.locator('//*[@id="showtemperature"]').isChecked()
+  ).toBeFalsy();
+
+  // showtop_k
+  await page.locator('//*[@id="showtop_k"]').click();
+  expect(await page.locator('//*[@id="showtop_k"]').isChecked()).toBeTruthy();
+
+  // showtop_p
+  await page.locator('//*[@id="showtop_p"]').click();
+  expect(await page.locator('//*[@id="showtop_p"]').isChecked()).toBeTruthy();
+
+  // showuse_mlock
+  await page.locator('//*[@id="showuse_mlock"]').click();
+  expect(
+    await page.locator('//*[@id="showuse_mlock"]').isChecked()
+  ).toBeTruthy();
+
+  // showuse_mmap
+  await page.locator('//*[@id="showuse_mmap"]').click();
+  expect(
+    await page.locator('//*[@id="showuse_mmap"]').isChecked()
+  ).toBeTruthy();
+
+  // showverbose
+  await page.locator('//*[@id="showverbose"]').click();
+  expect(await page.locator('//*[@id="showverbose"]').isChecked()).toBeTruthy();
+
+  // showvocab_only
+  await page.locator('//*[@id="showvocab_only"]').click();
+  expect(
+    await page.locator('//*[@id="showvocab_only"]').isChecked()
+  ).toBeTruthy();
+
+  await page.locator('//*[@id="showcache"]').click();
+  expect(await page.locator('//*[@id="showcache"]').isChecked()).toBeFalsy();
+
+  // showecho
+  await page.locator('//*[@id="showecho"]').click();
+  expect(await page.locator('//*[@id="showecho"]').isChecked()).toBeFalsy();
+
+  // showf16_kv
+  await page.locator('//*[@id="showf16_kv"]').click();
+  expect(await page.locator('//*[@id="showf16_kv"]').isChecked()).toBeFalsy();
+
+  // showgrammar_path
+  await page.locator('//*[@id="showgrammar_path"]').click();
+  expect(
+    await page.locator('//*[@id="showgrammar_path"]').isChecked()
+  ).toBeFalsy();
+
+  // showlast_n_tokens_size
+  await page.locator('//*[@id="showlast_n_tokens_size"]').click();
+  expect(
+    await page.locator('//*[@id="showlast_n_tokens_size"]').isChecked()
+  ).toBeFalsy();
+
+  // showlogits_all
+  await page.locator('//*[@id="showlogits_all"]').click();
+  expect(
+    await page.locator('//*[@id="showlogits_all"]').isChecked()
+  ).toBeFalsy();
+
+  // showlogprobs
+  await page.locator('//*[@id="showlogprobs"]').click();
+  expect(await page.locator('//*[@id="showlogprobs"]').isChecked()).toBeFalsy();
+
+  // showlora_base
+  await page.locator('//*[@id="showlora_base"]').click();
+  expect(
+    await page.locator('//*[@id="showlora_base"]').isChecked()
+  ).toBeFalsy();
+
+  // showlora_path
+  await page.locator('//*[@id="showlora_path"]').click();
+  expect(
+    await page.locator('//*[@id="showlora_path"]').isChecked()
+  ).toBeFalsy();
+
+  // showmax_tokens
+  await page.locator('//*[@id="showmax_tokens"]').click();
+  expect(
+    await page.locator('//*[@id="showmax_tokens"]').isChecked()
+  ).toBeFalsy();
+
+  // showmetadata
+  await page.locator('//*[@id="showmetadata"]').click();
+  expect(await page.locator('//*[@id="showmetadata"]').isChecked()).toBeFalsy();
+
+  // showmodel_kwargs
+  await page.locator('//*[@id="showmodel_kwargs"]').click();
+  expect(
+    await page.locator('//*[@id="showmodel_kwargs"]').isChecked()
+  ).toBeFalsy();
+
+  // showmodel_path
+  await page.locator('//*[@id="showmodel_path"]').click();
+  expect(
+    await page.locator('//*[@id="showmodel_path"]').isChecked()
+  ).toBeTruthy();
+
+  // shown_batch
+  await page.locator('//*[@id="shown_batch"]').click();
+  expect(await page.locator('//*[@id="shown_batch"]').isChecked()).toBeFalsy();
+
+  // shown_ctx
+  await page.locator('//*[@id="shown_ctx"]').click();
+  expect(await page.locator('//*[@id="shown_ctx"]').isChecked()).toBeFalsy();
+
+  // shown_gpu_layers
+  await page.locator('//*[@id="shown_gpu_layers"]').click();
+  expect(
+    await page.locator('//*[@id="shown_gpu_layers"]').isChecked()
+  ).toBeFalsy();
+
+  // shown_parts
+  await page.locator('//*[@id="shown_parts"]').click();
+  expect(await page.locator('//*[@id="shown_parts"]').isChecked()).toBeFalsy();
+
+  // shown_threads
+  await page.locator('//*[@id="shown_threads"]').click();
+  expect(
+    await page.locator('//*[@id="shown_threads"]').isChecked()
+  ).toBeFalsy();
+
+  // showrepeat_penalty
+  await page.locator('//*[@id="showrepeat_penalty"]').click();
+  expect(
+    await page.locator('//*[@id="showrepeat_penalty"]').isChecked()
+  ).toBeFalsy();
+
+  // showrope_freq_base
+  await page.locator('//*[@id="showrope_freq_base"]').click();
+  expect(
+    await page.locator('//*[@id="showrope_freq_base"]').isChecked()
+  ).toBeFalsy();
+
+  // showrope_freq_scale
+  await page.locator('//*[@id="showrope_freq_scale"]').click();
+  expect(
+    await page.locator('//*[@id="showrope_freq_scale"]').isChecked()
+  ).toBeFalsy();
+
+  // showseed
+  await page.locator('//*[@id="showseed"]').click();
+  expect(await page.locator('//*[@id="showseed"]').isChecked()).toBeFalsy();
+
+  // showstop
+  await page.locator('//*[@id="showstop"]').click();
+  expect(await page.locator('//*[@id="showstop"]').isChecked()).toBeFalsy();
+
+  // showstreaming
+  await page.locator('//*[@id="showstreaming"]').click();
+  expect(
+    await page.locator('//*[@id="showstreaming"]').isChecked()
+  ).toBeFalsy();
+
+  // showsuffix
+  await page.locator('//*[@id="showsuffix"]').click();
+  expect(await page.locator('//*[@id="showsuffix"]').isChecked()).toBeFalsy();
+
+  // showtags
+  await page.locator('//*[@id="showtags"]').click();
+  expect(await page.locator('//*[@id="showtags"]').isChecked()).toBeFalsy();
+
+  // showtop_k
+  await page.locator('//*[@id="showtop_k"]').click();
+  expect(await page.locator('//*[@id="showtop_k"]').isChecked()).toBeFalsy();
+
+  // showtop_p
+  await page.locator('//*[@id="showtop_p"]').click();
+  expect(await page.locator('//*[@id="showtop_p"]').isChecked()).toBeFalsy();
+
+  // showuse_mlock
+  await page.locator('//*[@id="showuse_mlock"]').click();
+  expect(
+    await page.locator('//*[@id="showuse_mlock"]').isChecked()
+  ).toBeFalsy();
+
+  // showuse_mmap
+  await page.locator('//*[@id="showuse_mmap"]').click();
+  expect(await page.locator('//*[@id="showuse_mmap"]').isChecked()).toBeFalsy();
+
+  // showverbose
+  await page.locator('//*[@id="showverbose"]').click();
+  expect(await page.locator('//*[@id="showverbose"]').isChecked()).toBeFalsy();
+
+  // showvocab_only
+  await page.locator('//*[@id="showvocab_only"]').click();
+  expect(
+    await page.locator('//*[@id="showvocab_only"]').isChecked()
+  ).toBeFalsy();
+
+  await page.locator('//*[@id="saveChangesBtn"]').click();
+
+  const plusButtonLocator = page.locator('//*[@id="float-input"]');
+  const elementCount = await plusButtonLocator.count();
+  if (elementCount === 0) {
+    expect(true).toBeTruthy();
+
+    await page
+      .locator(
+        '//*[@id="react-flow-id"]/div[1]/div[1]/div[1]/div/div[2]/div/div/div[1]/div/div[1]/div'
+      )
+      .click();
+    await page.locator('//*[@id="editAdvancedIcon"]').click();
+
+    // showtemperature
+    await page.locator('//*[@id="showtemperature"]').click();
+    expect(
+      await page.locator('//*[@id="showtemperature"]').isChecked()
+    ).toBeTruthy();
+
+    await page.locator('//*[@id="saveChangesBtn"]').click();
+    await page.locator('//*[@id="float-input"]').click();
+    await page.locator('//*[@id="float-input"]').fill("3");
+
+    let value = await page.locator('//*[@id="float-input"]').inputValue();
+
+    if (value != "2") {
+      expect(false).toBeTruthy();
+    }
+
+    await page.locator('//*[@id="float-input"]').click();
+    await page.locator('//*[@id="float-input"]').fill("-3");
+
+    value = await page.locator('//*[@id="float-input"]').inputValue();
+
+    if (value != "-2") {
+      expect(false).toBeTruthy();
+    }
+  }
+});
diff --git a/src/frontend/tests/inputComponent.spec.ts b/src/frontend/tests/inputComponent.spec.ts
new file mode 100644
index 000000000..d84b2b36e
--- /dev/null
+++ b/src/frontend/tests/inputComponent.spec.ts
@@ -0,0 +1,162 @@
+import { expect, test } from "@playwright/test";
+
+test("InputComponent", async ({ page }) => {
+  await page.goto("http://localhost:3000/");
+  await page.waitForTimeout(2000);
+
+  await page.locator('//*[@id="new-project-btn"]').click();
+  await page.waitForTimeout(2000);
+
+  await page.getByPlaceholder("Search").click();
+  await page.getByPlaceholder("Search").fill("Chroma");
+
+  await page.waitForTimeout(2000);
+
+  await page
+    .locator('//*[@id="sideChroma"]')
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+  await page.mouse.up();
+  await page.mouse.down();
+
+  await page.locator('//*[@id="input-10"]').click();
+  await page
+    .locator('//*[@id="input-10"]')
+    .fill("collection_name_test_123123123!@#$&*(&%$@");
+
+  let value = await page.locator('//*[@id="input-10"]').inputValue();
+
+  if (value != "collection_name_test_123123123!@#$&*(&%$@") {
+    expect(false).toBeTruthy();
+  }
+
+  await page
+    .locator(
+      '//*[@id="react-flow-id"]/div[1]/div[1]/div[1]/div/div[2]/div/div/div[1]/div/div[1]/div'
+    )
+    .click();
+  await page.locator('//*[@id="editAdvancedIcon"]').click();
+
+  await page.locator('//*[@id="showchroma_server_cors_allow_origins"]').click();
+  expect(
+    await page
+      .locator('//*[@id="showchroma_server_cors_allow_origins"]')
+      .isChecked()
+  ).toBeTruthy();
+
+  await page.locator('//*[@id="showchroma_server_grpc_port"]').click();
+  expect(
+    await page.locator('//*[@id="showchroma_server_grpc_port"]').isChecked()
+  ).toBeTruthy();
+
+  await page.locator('//*[@id="showchroma_server_host"]').click();
+  expect(
+    await page.locator('//*[@id="showchroma_server_host"]').isChecked()
+  ).toBeTruthy();
+
+  await page.locator('//*[@id="showchroma_server_http_port"]').click();
+  expect(
+    await page.locator('//*[@id="showchroma_server_http_port"]').isChecked()
+  ).toBeTruthy();
+
+  await page.locator('//*[@id="showchroma_server_ssl_enabled"]').click();
+  expect(
+    await page.locator('//*[@id="showchroma_server_ssl_enabled"]').isChecked()
+  ).toBeTruthy();
+
+  await page.locator('//*[@id="showcollection_name"]').click();
+  expect(
+    await page.locator('//*[@id="showcollection_name"]').isChecked()
+  ).toBeFalsy();
+
+  await page.locator('//*[@id="showpersist"]').click();
+  expect(await page.locator('//*[@id="showpersist"]').isChecked()).toBeFalsy();
+
+  await page.locator('//*[@id="showpersist_directory"]').click();
+  expect(
+    await page.locator('//*[@id="showpersist_directory"]').isChecked()
+  ).toBeFalsy();
+
+  await page.locator('//*[@id="showsearch_kwargs"]').click();
+  expect(
+    await page.locator('//*[@id="showsearch_kwargs"]').isChecked()
+  ).toBeTruthy();
+
+  await page.locator('//*[@id="showchroma_server_cors_allow_origins"]').click();
+  expect(
+    await page
+      .locator('//*[@id="showchroma_server_cors_allow_origins"]')
+      .isChecked()
+  ).toBeFalsy();
+
+  await page.locator('//*[@id="showchroma_server_grpc_port"]').click();
+  expect(
+    await page.locator('//*[@id="showchroma_server_grpc_port"]').isChecked()
+  ).toBeFalsy();
+
+  await page.locator('//*[@id="showchroma_server_host"]').click();
+  expect(
+    await page.locator('//*[@id="showchroma_server_host"]').isChecked()
+  ).toBeFalsy();
+
+  await page.locator('//*[@id="showchroma_server_http_port"]').click();
+  expect(
+    await page.locator('//*[@id="showchroma_server_http_port"]').isChecked()
+  ).toBeFalsy();
+
+  await page.locator('//*[@id="showchroma_server_ssl_enabled"]').click();
+  expect(
+    await page.locator('//*[@id="showchroma_server_ssl_enabled"]').isChecked()
+  ).toBeFalsy();
+
+  await page.locator('//*[@id="showpersist"]').click();
+  expect(await page.locator('//*[@id="showpersist"]').isChecked()).toBeTruthy();
+
+  await page.locator('//*[@id="showpersist_directory"]').click();
+  expect(
+    await page.locator('//*[@id="showpersist_directory"]').isChecked()
+  ).toBeTruthy();
+
+  await page.locator('//*[@id="showsearch_kwargs"]').click();
+  expect(
+    await page.locator('//*[@id="showsearch_kwargs"]').isChecked()
+  ).toBeFalsy();
+
+  let valueEditNode = await page.locator('//*[@id="input-5"]').inputValue();
+
+  if (valueEditNode != "collection_name_test_123123123!@#$&*(&%$@") {
+    expect(false).toBeTruthy();
+  }
+
+  await page.locator('//*[@id="input-5"]').click();
+  await page
+    .locator('//*[@id="input-5"]')
+    .fill("NEW_collection_name_test_123123123!@#$&*(&%$@");
+
+  await page.locator('//*[@id="saveChangesBtn"]').click();
+
+  const plusButtonLocator = page.locator('//*[@id="input-10"]');
+  const elementCount = await plusButtonLocator.count();
+  if (elementCount === 0) {
+    expect(true).toBeTruthy();
+
+    await page
+      .locator(
+        '//*[@id="react-flow-id"]/div[1]/div[1]/div[1]/div/div[2]/div/div/div[1]/div/div[1]/div'
+      )
+      .click();
+    await page.locator('//*[@id="editAdvancedIcon"]').click();
+
+    await page.locator('//*[@id="showcollection_name"]').click();
+    expect(
+      await page.locator('//*[@id="showcollection_name"]').isChecked()
+    ).toBeTruthy();
+
+    await page.locator('//*[@id="saveChangesBtn"]').click();
+
+    let value = await page.locator('//*[@id="input-10"]').inputValue();
+
+    if (value != "NEW_collection_name_test_123123123!@#$&*(&%$@") {
+      expect(false).toBeTruthy();
+    }
+  }
+});
diff --git a/src/frontend/tests/intComponent.spec.ts b/src/frontend/tests/intComponent.spec.ts
new file mode 100644
index 000000000..80900fbdf
--- /dev/null
+++ b/src/frontend/tests/intComponent.spec.ts
@@ -0,0 +1,118 @@
+import { expect, test } from "@playwright/test";
+
+test("IntComponent", async ({ page }) => {
+  await page.goto("http://localhost:3000/");
+  await page.waitForTimeout(2000);
+
+  await page.locator('//*[@id="new-project-btn"]').click();
+  await page.waitForTimeout(2000);
+
+  await page.getByPlaceholder("Search").click();
+  await page.getByPlaceholder("Search").fill("getrequest");
+
+  await page.waitForTimeout(2000);
+
+  await page
+    .locator('//*[@id="sideGET Request"]')
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+  await page.mouse.up();
+  await page.mouse.down();
+
+  await page.locator('//*[@id="int-input-2"]').click();
+  await page
+    .locator('//*[@id="int-input-2"]')
+    .fill("123456789123456789123456789");
+
+  let value = await page.locator('//*[@id="int-input-2"]').inputValue();
+
+  if (value != "123456789123456789123456789") {
+    expect(false).toBeTruthy();
+  }
+
+  await page.locator('//*[@id="int-input-2"]').click();
+  await page.locator('//*[@id="int-input-2"]').fill("-3");
+
+  value = await page.locator('//*[@id="int-input-2"]').inputValue();
+
+  if (value != "0") {
+    expect(false).toBeTruthy();
+  }
+
+  await page
+    .locator('//*[@id="react-flow-id"]/div[1]/div[1]/div[1]/div/div[2]/div')
+    .click();
+  await page.locator('//*[@id="advancedIcon"]').click();
+  await page.locator('//*[@id="editAdvancedBtn"]').click();
+
+  value = await page.locator('//*[@id="int-input-1"]').inputValue();
+
+  if (value != "0") {
+    expect(false).toBeTruthy();
+  }
+
+  await page.locator('//*[@id="int-input-1"]').click();
+  await page
+    .locator('//*[@id="int-input-1"]')
+    .fill("123456789123456789123456789");
+
+  await page.locator('//*[@id="showheaders"]').click();
+  expect(await page.locator('//*[@id="showheaders"]').isChecked()).toBeFalsy();
+
+  await page.locator('//*[@id="showtimeout"]').click();
+  expect(await page.locator('//*[@id="showtimeout"]').isChecked()).toBeFalsy();
+
+  await page.locator('//*[@id="showurl"]').click();
+  expect(await page.locator('//*[@id="showurl"]').isChecked()).toBeFalsy();
+
+  await page.locator('//*[@id="showheaders"]').click();
+  expect(await page.locator('//*[@id="showheaders"]').isChecked()).toBeTruthy();
+
+  await page.locator('//*[@id="showurl"]').click();
+  expect(await page.locator('//*[@id="showurl"]').isChecked()).toBeTruthy();
+
+  await page.locator('//*[@id="saveChangesBtn"]').click();
+
+  const plusButtonLocator = page.locator('//*[@id="int-input-2"]');
+  const elementCount = await plusButtonLocator.count();
+  if (elementCount === 0) {
+    expect(true).toBeTruthy();
+
+    await page
+      .locator('//*[@id="react-flow-id"]/div[1]/div[1]/div[1]/div/div[2]/div')
+      .click();
+    await page.locator('//*[@id="advancedIcon"]').click();
+    await page.locator('//*[@id="editAdvancedBtn"]').click();
+
+    await page.locator('//*[@id="showtimeout"]').click();
+    expect(
+      await page.locator('//*[@id="showtimeout"]').isChecked()
+    ).toBeTruthy();
+
+    const valueEditNode = await page
+      .locator('//*[@id="int-input-1"]')
+      .inputValue();
+
+    if (valueEditNode != "123456789123456789123456789") {
+      expect(false).toBeTruthy();
+    }
+
+    await page.locator('//*[@id="saveChangesBtn"]').click();
+    await page.locator('//*[@id="int-input-2"]').click();
+    await page.locator('//*[@id="int-input-2"]').fill("3");
+
+    let value = await page.locator('//*[@id="int-input-2"]').inputValue();
+
+    if (value != "3") {
+      expect(false).toBeTruthy();
+    }
+
+    await page.locator('//*[@id="int-input-2"]').click();
+    await page.locator('//*[@id="int-input-2"]').fill("-3");
+
+    value = await page.locator('//*[@id="int-input-2"]').inputValue();
+
+    if (value != "0") {
+      expect(false).toBeTruthy();
+    }
+  }
+});
diff --git a/src/frontend/tests/keyPairListComponent.spec.ts b/src/frontend/tests/keyPairListComponent.spec.ts
new file mode 100644
index 000000000..01c7c7bca
--- /dev/null
+++ b/src/frontend/tests/keyPairListComponent.spec.ts
@@ -0,0 +1,149 @@
+import { expect, test } from "@playwright/test";
+
+test("KeypairListComponent", async ({ page }) => {
+  await page.goto("http://localhost:3000/");
+  await page.waitForTimeout(2000);
+
+  await page.locator('//*[@id="new-project-btn"]').click();
+  await page.waitForTimeout(2000);
+
+  await page.getByPlaceholder("Search").click();
+  await page.getByPlaceholder("Search").fill("csv");
+
+  await page.waitForTimeout(2000);
+
+  await page
+    .locator('//*[@id="sideCSVLoader"]')
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+  await page.mouse.up();
+  await page.mouse.down();
+
+  await page.locator('//*[@id="keypair0"]').click();
+  await page.locator('//*[@id="keypair0"]').fill("testtesttesttest");
+  await page.locator('//*[@id="keypair100"]').click();
+  await page.locator('//*[@id="keypair100"]').fill("testtesttesttesttesttest");
+
+  const plusButtonLocatorNode = page.locator('//*[@id="plusbtn0"]');
+  const elementCountNode = await plusButtonLocatorNode.count();
+  if (elementCountNode > 0) {
+    await plusButtonLocatorNode.click();
+  }
+
+  await page.locator('//*[@id="keypair1"]').click();
+  await page.locator('//*[@id="keypair1"]').fill("testtesttesttest1");
+  await page.locator('//*[@id="keypair101"]').click();
+  await page.locator('//*[@id="keypair101"]').fill("testtesttesttesttesttest1");
+  await page.locator('//*[@id="plusbtn1"]').click();
+
+  await page.locator('//*[@id="keypair2"]').click();
+  await page.locator('//*[@id="keypair2"]').fill("testtesttesttest2");
+  await page.locator('//*[@id="keypair102"]').click();
+  await page.locator('//*[@id="keypair102"]').fill("testtesttesttesttesttest2");
+
+  await page.locator('//*[@id="minusbtn1"]').click();
+
+  const keyPairVerification = page.locator('//*[@id="keypair102"]');
+  const elementKeyCount = await keyPairVerification.count();
+
+  if (elementKeyCount === 0) {
+    expect(true).toBeTruthy();
+  } else {
+    expect(false).toBeTruthy();
+  }
+
+  await page
+    .locator(
+      '//*[@id="react-flow-id"]/div[1]/div[1]/div[1]/div/div[2]/div/div/div[1]/div/div[1]/div'
+    )
+    .click();
+  await page.locator('//*[@id="advancedIcon"]').click();
+  await page.locator('//*[@id="editAdvancedBtn"]').click();
+
+  await page.locator('//*[@id="showfile_path"]').click();
+  expect(
+    await page.locator('//*[@id="showfile_path"]').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();
+  if (elementCount === 0) {
+    expect(true).toBeTruthy();
+
+    await page
+      .locator(
+        '//*[@id="react-flow-id"]/div[1]/div[1]/div[1]/div/div[2]/div/div/div[1]/div/div[1]/div'
+      )
+      .click();
+    await page.locator('//*[@id="advancedIcon"]').click();
+    await page.locator('//*[@id="editAdvancedBtn"]').click();
+
+    await page.locator('//*[@id="showfile_path"]').click();
+    expect(
+      await page.locator('//*[@id="showfile_path"]').isChecked()
+    ).toBeTruthy();
+    await page.locator('//*[@id="showmetadata"]').click();
+    expect(
+      await page.locator('//*[@id="showmetadata"]').isChecked()
+    ).toBeTruthy();
+
+    await page.locator('//*[@id="keypair0"]').click();
+    await page.locator('//*[@id="keypair0"]').fill("testtesttesttest");
+    await page.locator('//*[@id="keypair100"]').click();
+    await page
+      .locator('//*[@id="keypair100"]')
+      .fill("testtesttesttesttesttest");
+
+    const plusButtonLocator = page.locator('//*[@id="plusbtn0"]');
+    const elementCount = await plusButtonLocator.count();
+    if (elementCount > 0) {
+      await plusButtonLocator.click();
+    }
+
+    await page.locator('//*[@id="keypair1"]').click();
+    await page.locator('//*[@id="keypair1"]').fill("testtesttesttest1");
+    await page.locator('//*[@id="keypair101"]').click();
+    await page
+      .locator('//*[@id="keypair101"]')
+      .fill("testtesttesttesttesttest1");
+    await page.locator('//*[@id="plusbtn1"]').click();
+
+    await page.locator('//*[@id="keypair2"]').click();
+    await page.locator('//*[@id="keypair2"]').fill("testtesttesttest2");
+    await page.locator('//*[@id="keypair102"]').click();
+    await page
+      .locator('//*[@id="keypair102"]')
+      .fill("testtesttesttesttesttest2");
+
+    await page.locator('//*[@id="minusbtn1"]').click();
+
+    const keyPairVerification = page.locator('//*[@id="keypair102"]');
+    const elementKeyCount = await keyPairVerification.count();
+
+    if (elementKeyCount === 0) {
+      await page.locator('//*[@id="saveChangesBtn"]').click();
+
+      const key1 = await page.locator('//*[@id="keypair0"]').inputValue();
+      const value1 = await page.locator('//*[@id="keypair100"]').inputValue();
+      const key2 = await page.locator('//*[@id="keypair1"]').inputValue();
+      const value2 = await page.locator('//*[@id="keypair101"]').inputValue();
+
+      if (
+        key1 === "testtesttesttest" &&
+        value1 === "testtesttesttesttesttest" &&
+        key2 === "testtesttesttest2" &&
+        value2 === "testtesttesttesttesttest2"
+      ) {
+        expect(true).toBeTruthy();
+      } else {
+        expect(false).toBeTruthy();
+      }
+    } else {
+      expect(false).toBeTruthy();
+    }
+  } else {
+    expect(false).toBeTruthy();
+  }
+});
diff --git a/src/frontend/tests/keypair.spec.ts b/src/frontend/tests/keypair.spec.ts
deleted file mode 100644
index cd435fe92..000000000
--- a/src/frontend/tests/keypair.spec.ts
+++ /dev/null
@@ -1,459 +0,0 @@
-import { expect, test } from "@playwright/test";
-
-test("KeypairListComponent", async ({ page }) => {
-    await page.goto('http://localhost:3000/');
-    await page.waitForTimeout(2000);
-
-    await page.locator('//*[@id="new-project-btn"]').click();
-    await page.waitForTimeout(2000);
-
-    await page.getByPlaceholder('Search').click();
-    await page.getByPlaceholder('Search').fill('csv');
-
-    await page.waitForTimeout(2000);
-
-    await page.locator('//*[@id="sideCSVLoader"]').dragTo(page.locator('//*[@id="react-flow-id"]'));
-    await page.mouse.up();
-    await page.mouse.down();
-
-    await page.locator('//*[@id="keypair0"]').click();
-    await page.locator('//*[@id="keypair0"]').fill('testtesttesttest');
-    await page.locator('//*[@id="keypair100"]').click();
-    await page.locator('//*[@id="keypair100"]').fill('testtesttesttesttesttest');
-
-    const plusButtonLocatorNode = page.locator('//*[@id="plusbtn0"]');
-    const elementCountNode = await plusButtonLocatorNode.count();
-    if (elementCountNode > 0) {
-        await plusButtonLocatorNode.click();
-    }
-
-    await page.locator('//*[@id="keypair1"]').click();
-    await page.locator('//*[@id="keypair1"]').fill('testtesttesttest1');
-    await page.locator('//*[@id="keypair101"]').click();
-    await page.locator('//*[@id="keypair101"]').fill('testtesttesttesttesttest1');
-    await page.locator('//*[@id="plusbtn1"]').click();
-
-    await page.locator('//*[@id="keypair2"]').click();
-    await page.locator('//*[@id="keypair2"]').fill('testtesttesttest2');
-    await page.locator('//*[@id="keypair102"]').click();
-    await page.locator('//*[@id="keypair102"]').fill('testtesttesttesttesttest2');
-
-    await page.locator('//*[@id="minusbtn1"]').click();
-
-    const keyPairVerification = page.locator('//*[@id="keypair102"]');
-    const elementKeyCount = await keyPairVerification.count();
-
-    if (elementKeyCount === 0) {
-        expect(true).toBeTruthy();
-
-    } else {
-        expect(false).toBeTruthy();
-    }
-
-    await page.locator('//*[@id="react-flow-id"]/div[1]/div[1]/div[1]/div/div[2]/div/div/div[1]/div/div[1]/div').click();
-    await page.locator('//*[@id="advancedIcon"]').click();
-    await page.locator('//*[@id="editAdvancedBtn"]').click();
-
-    await page.locator('//*[@id="showfile_path"]').click();
-    expect(await page.locator('//*[@id="showfile_path"]').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();
-    if (elementCount === 0) {
-        expect(true).toBeTruthy();
-
-        await page.locator('//*[@id="react-flow-id"]/div[1]/div[1]/div[1]/div/div[2]/div/div/div[1]/div/div[1]/div').click();
-        await page.locator('//*[@id="advancedIcon"]').click();
-        await page.locator('//*[@id="editAdvancedBtn"]').click();
-
-        await page.locator('//*[@id="showfile_path"]').click();
-        expect(await page.locator('//*[@id="showfile_path"]').isChecked()).toBeTruthy();
-        await page.locator('//*[@id="showmetadata"]').click();
-        expect(await page.locator('//*[@id="showmetadata"]').isChecked()).toBeTruthy();
-
-        await page.locator('//*[@id="keypair0"]').click();
-        await page.locator('//*[@id="keypair0"]').fill('testtesttesttest');
-        await page.locator('//*[@id="keypair100"]').click();
-        await page.locator('//*[@id="keypair100"]').fill('testtesttesttesttesttest');
-
-        const plusButtonLocator = page.locator('//*[@id="plusbtn0"]');
-        const elementCount = await plusButtonLocator.count();
-        if (elementCount > 0) {
-            await plusButtonLocator.click();
-        }
-
-        await page.locator('//*[@id="keypair1"]').click();
-        await page.locator('//*[@id="keypair1"]').fill('testtesttesttest1');
-        await page.locator('//*[@id="keypair101"]').click();
-        await page.locator('//*[@id="keypair101"]').fill('testtesttesttesttesttest1');
-        await page.locator('//*[@id="plusbtn1"]').click();
-
-        await page.locator('//*[@id="keypair2"]').click();
-        await page.locator('//*[@id="keypair2"]').fill('testtesttesttest2');
-        await page.locator('//*[@id="keypair102"]').click();
-        await page.locator('//*[@id="keypair102"]').fill('testtesttesttesttesttest2');
-
-        await page.locator('//*[@id="minusbtn1"]').click();
-
-        const keyPairVerification = page.locator('//*[@id="keypair102"]');
-        const elementKeyCount = await keyPairVerification.count();
-
-        if (elementKeyCount === 0) {
-            await page.locator('//*[@id="saveChangesBtn"]').click();
-
-            const key1 = await page.locator('//*[@id="keypair0"]').inputValue();
-            const value1 = await page.locator('//*[@id="keypair100"]').inputValue();
-            const key2 = await page.locator('//*[@id="keypair1"]').inputValue();
-            const value2 = await page.locator('//*[@id="keypair101"]').inputValue();
-
-            if (key1 === 'testtesttesttest' && value1 === 'testtesttesttesttesttest' && key2 === 'testtesttesttest2' && value2 === 'testtesttesttesttesttest2') {
-                expect(true).toBeTruthy();
-            }
-            else {
-                expect(false).toBeTruthy();
-            }
-        } else {
-            expect(false).toBeTruthy();
-        }
-
-    } else {
-        expect(false).toBeTruthy();
-    }
-});
-
-test("FloatComponent", async ({ page }) => {
-    await page.goto('http://localhost:3000/');
-    await page.waitForTimeout(2000);
-
-    await page.locator('//*[@id="new-project-btn"]').click();
-    await page.waitForTimeout(2000);
-
-    await page.getByPlaceholder('Search').click();
-    await page.getByPlaceholder('Search').fill('llamacpp');
-
-    await page.waitForTimeout(2000);
-
-    await page.locator('//*[@id="sideLlamaCpp"]').dragTo(page.locator('//*[@id="react-flow-id"]'));
-    await page.mouse.up();
-    await page.mouse.down();
-
-    await page.locator('//*[@id="float-input"]').click();
-    await page.locator('//*[@id="float-input"]').fill('3');
-
-    let value = await page.locator('//*[@id="float-input"]').inputValue();
-
-    if (value != "2") {
-        expect(false).toBeTruthy();
-    }
-
-    await page.locator('//*[@id="float-input"]').click();
-    await page.locator('//*[@id="float-input"]').fill('-3');
-
-    value = await page.locator('//*[@id="float-input"]').inputValue();
-
-    if (value != "-2") {
-        expect(false).toBeTruthy();
-    }
-
-
-    await page.locator('//*[@id="react-flow-id"]/div[1]/div[1]/div[1]/div/div[2]/div/div/div[1]/div/div[1]/div').click();
-    await page.locator('//*[@id="editAdvancedIcon"]').click();
-
-    await page.locator('//*[@id="showcache"]').click();
-    expect(await page.locator('//*[@id="showcache"]').isChecked()).toBeTruthy();
-
-    // showecho
-    await page.locator('//*[@id="showecho"]').click();
-    expect(await page.locator('//*[@id="showecho"]').isChecked()).toBeTruthy();
-
-    // showf16_kv
-    await page.locator('//*[@id="showf16_kv"]').click();
-    expect(await page.locator('//*[@id="showf16_kv"]').isChecked()).toBeTruthy();
-
-    // showgrammar_path
-    await page.locator('//*[@id="showgrammar_path"]').click();
-    expect(await page.locator('//*[@id="showgrammar_path"]').isChecked()).toBeTruthy();
-
-    // showlast_n_tokens_size
-    await page.locator('//*[@id="showlast_n_tokens_size"]').click();
-    expect(await page.locator('//*[@id="showlast_n_tokens_size"]').isChecked()).toBeTruthy();
-
-    // showlogits_all
-    await page.locator('//*[@id="showlogits_all"]').click();
-    expect(await page.locator('//*[@id="showlogits_all"]').isChecked()).toBeTruthy();
-
-    // showlogprobs
-    await page.locator('//*[@id="showlogprobs"]').click();
-    expect(await page.locator('//*[@id="showlogprobs"]').isChecked()).toBeTruthy();
-
-    // showlora_base
-    await page.locator('//*[@id="showlora_base"]').click();
-    expect(await page.locator('//*[@id="showlora_base"]').isChecked()).toBeTruthy();
-
-    // showlora_path
-    await page.locator('//*[@id="showlora_path"]').click();
-    expect(await page.locator('//*[@id="showlora_path"]').isChecked()).toBeTruthy();
-
-    // showmax_tokens
-    await page.locator('//*[@id="showmax_tokens"]').click();
-    expect(await page.locator('//*[@id="showmax_tokens"]').isChecked()).toBeTruthy();
-
-    // showmetadata
-    await page.locator('//*[@id="showmetadata"]').click();
-    expect(await page.locator('//*[@id="showmetadata"]').isChecked()).toBeTruthy();
-
-    // showmodel_kwargs
-    await page.locator('//*[@id="showmodel_kwargs"]').click();
-    expect(await page.locator('//*[@id="showmodel_kwargs"]').isChecked()).toBeTruthy();
-
-    // showmodel_path
-    await page.locator('//*[@id="showmodel_path"]').click();
-    expect(await page.locator('//*[@id="showmodel_path"]').isChecked()).toBeFalsy();
-
-    // shown_batch
-    await page.locator('//*[@id="shown_batch"]').click();
-    expect(await page.locator('//*[@id="shown_batch"]').isChecked()).toBeTruthy();
-
-    // shown_ctx
-    await page.locator('//*[@id="shown_ctx"]').click();
-    expect(await page.locator('//*[@id="shown_ctx"]').isChecked()).toBeTruthy();
-
-    // shown_gpu_layers
-    await page.locator('//*[@id="shown_gpu_layers"]').click();
-    expect(await page.locator('//*[@id="shown_gpu_layers"]').isChecked()).toBeTruthy();
-
-    // shown_parts
-    await page.locator('//*[@id="shown_parts"]').click();
-    expect(await page.locator('//*[@id="shown_parts"]').isChecked()).toBeTruthy();
-
-    // shown_threads
-    await page.locator('//*[@id="shown_threads"]').click();
-    expect(await page.locator('//*[@id="shown_threads"]').isChecked()).toBeTruthy();
-
-    // showrepeat_penalty
-    await page.locator('//*[@id="showrepeat_penalty"]').click();
-    expect(await page.locator('//*[@id="showrepeat_penalty"]').isChecked()).toBeTruthy();
-
-    // showrope_freq_base
-    await page.locator('//*[@id="showrope_freq_base"]').click();
-    expect(await page.locator('//*[@id="showrope_freq_base"]').isChecked()).toBeTruthy();
-
-    // showrope_freq_scale
-    await page.locator('//*[@id="showrope_freq_scale"]').click();
-    expect(await page.locator('//*[@id="showrope_freq_scale"]').isChecked()).toBeTruthy();
-
-    // showseed
-    await page.locator('//*[@id="showseed"]').click();
-    expect(await page.locator('//*[@id="showseed"]').isChecked()).toBeTruthy();
-
-    // showstop
-    await page.locator('//*[@id="showstop"]').click();
-    expect(await page.locator('//*[@id="showstop"]').isChecked()).toBeTruthy();
-
-    // showstreaming
-    await page.locator('//*[@id="showstreaming"]').click();
-    expect(await page.locator('//*[@id="showstreaming"]').isChecked()).toBeTruthy();
-
-    // showsuffix
-    await page.locator('//*[@id="showsuffix"]').click();
-    expect(await page.locator('//*[@id="showsuffix"]').isChecked()).toBeTruthy();
-
-    // showtags
-    await page.locator('//*[@id="showtags"]').click();
-    expect(await page.locator('//*[@id="showtags"]').isChecked()).toBeTruthy();
-
-    // showtemperature
-    await page.locator('//*[@id="showtemperature"]').click();
-    expect(await page.locator('//*[@id="showtemperature"]').isChecked()).toBeFalsy();
-
-    // showtop_k
-    await page.locator('//*[@id="showtop_k"]').click();
-    expect(await page.locator('//*[@id="showtop_k"]').isChecked()).toBeTruthy();
-
-    // showtop_p
-    await page.locator('//*[@id="showtop_p"]').click();
-    expect(await page.locator('//*[@id="showtop_p"]').isChecked()).toBeTruthy();
-
-    // showuse_mlock
-    await page.locator('//*[@id="showuse_mlock"]').click();
-    expect(await page.locator('//*[@id="showuse_mlock"]').isChecked()).toBeTruthy();
-
-    // showuse_mmap
-    await page.locator('//*[@id="showuse_mmap"]').click();
-    expect(await page.locator('//*[@id="showuse_mmap"]').isChecked()).toBeTruthy();
-
-    // showverbose
-    await page.locator('//*[@id="showverbose"]').click();
-    expect(await page.locator('//*[@id="showverbose"]').isChecked()).toBeTruthy();
-
-    // showvocab_only
-    await page.locator('//*[@id="showvocab_only"]').click();
-    expect(await page.locator('//*[@id="showvocab_only"]').isChecked()).toBeTruthy();
-
-
-
-    await page.locator('//*[@id="showcache"]').click();
-    expect(await page.locator('//*[@id="showcache"]').isChecked()).toBeFalsy();
-
-    // showecho
-    await page.locator('//*[@id="showecho"]').click();
-    expect(await page.locator('//*[@id="showecho"]').isChecked()).toBeFalsy();
-
-    // showf16_kv
-    await page.locator('//*[@id="showf16_kv"]').click();
-    expect(await page.locator('//*[@id="showf16_kv"]').isChecked()).toBeFalsy();
-
-    // showgrammar_path
-    await page.locator('//*[@id="showgrammar_path"]').click();
-    expect(await page.locator('//*[@id="showgrammar_path"]').isChecked()).toBeFalsy();
-
-    // showlast_n_tokens_size
-    await page.locator('//*[@id="showlast_n_tokens_size"]').click();
-    expect(await page.locator('//*[@id="showlast_n_tokens_size"]').isChecked()).toBeFalsy();
-
-    // showlogits_all
-    await page.locator('//*[@id="showlogits_all"]').click();
-    expect(await page.locator('//*[@id="showlogits_all"]').isChecked()).toBeFalsy();
-
-    // showlogprobs
-    await page.locator('//*[@id="showlogprobs"]').click();
-    expect(await page.locator('//*[@id="showlogprobs"]').isChecked()).toBeFalsy();
-
-    // showlora_base
-    await page.locator('//*[@id="showlora_base"]').click();
-    expect(await page.locator('//*[@id="showlora_base"]').isChecked()).toBeFalsy();
-
-    // showlora_path
-    await page.locator('//*[@id="showlora_path"]').click();
-    expect(await page.locator('//*[@id="showlora_path"]').isChecked()).toBeFalsy();
-
-    // showmax_tokens
-    await page.locator('//*[@id="showmax_tokens"]').click();
-    expect(await page.locator('//*[@id="showmax_tokens"]').isChecked()).toBeFalsy();
-
-    // showmetadata
-    await page.locator('//*[@id="showmetadata"]').click();
-    expect(await page.locator('//*[@id="showmetadata"]').isChecked()).toBeFalsy();
-
-    // showmodel_kwargs
-    await page.locator('//*[@id="showmodel_kwargs"]').click();
-    expect(await page.locator('//*[@id="showmodel_kwargs"]').isChecked()).toBeFalsy();
-
-    // showmodel_path
-    await page.locator('//*[@id="showmodel_path"]').click();
-    expect(await page.locator('//*[@id="showmodel_path"]').isChecked()).toBeTruthy();
-
-    // shown_batch
-    await page.locator('//*[@id="shown_batch"]').click();
-    expect(await page.locator('//*[@id="shown_batch"]').isChecked()).toBeFalsy();
-
-    // shown_ctx
-    await page.locator('//*[@id="shown_ctx"]').click();
-    expect(await page.locator('//*[@id="shown_ctx"]').isChecked()).toBeFalsy();
-
-    // shown_gpu_layers
-    await page.locator('//*[@id="shown_gpu_layers"]').click();
-    expect(await page.locator('//*[@id="shown_gpu_layers"]').isChecked()).toBeFalsy();
-
-    // shown_parts
-    await page.locator('//*[@id="shown_parts"]').click();
-    expect(await page.locator('//*[@id="shown_parts"]').isChecked()).toBeFalsy();
-
-    // shown_threads
-    await page.locator('//*[@id="shown_threads"]').click();
-    expect(await page.locator('//*[@id="shown_threads"]').isChecked()).toBeFalsy();
-
-    // showrepeat_penalty
-    await page.locator('//*[@id="showrepeat_penalty"]').click();
-    expect(await page.locator('//*[@id="showrepeat_penalty"]').isChecked()).toBeFalsy();
-
-    // showrope_freq_base
-    await page.locator('//*[@id="showrope_freq_base"]').click();
-    expect(await page.locator('//*[@id="showrope_freq_base"]').isChecked()).toBeFalsy();
-
-    // showrope_freq_scale
-    await page.locator('//*[@id="showrope_freq_scale"]').click();
-    expect(await page.locator('//*[@id="showrope_freq_scale"]').isChecked()).toBeFalsy();
-
-    // showseed
-    await page.locator('//*[@id="showseed"]').click();
-    expect(await page.locator('//*[@id="showseed"]').isChecked()).toBeFalsy();
-
-    // showstop
-    await page.locator('//*[@id="showstop"]').click();
-    expect(await page.locator('//*[@id="showstop"]').isChecked()).toBeFalsy();
-
-    // showstreaming
-    await page.locator('//*[@id="showstreaming"]').click();
-    expect(await page.locator('//*[@id="showstreaming"]').isChecked()).toBeFalsy();
-
-    // showsuffix
-    await page.locator('//*[@id="showsuffix"]').click();
-    expect(await page.locator('//*[@id="showsuffix"]').isChecked()).toBeFalsy();
-
-    // showtags
-    await page.locator('//*[@id="showtags"]').click();
-    expect(await page.locator('//*[@id="showtags"]').isChecked()).toBeFalsy();
-
-    // showtop_k
-    await page.locator('//*[@id="showtop_k"]').click();
-    expect(await page.locator('//*[@id="showtop_k"]').isChecked()).toBeFalsy();
-
-    // showtop_p
-    await page.locator('//*[@id="showtop_p"]').click();
-    expect(await page.locator('//*[@id="showtop_p"]').isChecked()).toBeFalsy();
-
-    // showuse_mlock
-    await page.locator('//*[@id="showuse_mlock"]').click();
-    expect(await page.locator('//*[@id="showuse_mlock"]').isChecked()).toBeFalsy();
-
-    // showuse_mmap
-    await page.locator('//*[@id="showuse_mmap"]').click();
-    expect(await page.locator('//*[@id="showuse_mmap"]').isChecked()).toBeFalsy();
-
-    // showverbose
-    await page.locator('//*[@id="showverbose"]').click();
-    expect(await page.locator('//*[@id="showverbose"]').isChecked()).toBeFalsy();
-
-    // showvocab_only
-    await page.locator('//*[@id="showvocab_only"]').click();
-    expect(await page.locator('//*[@id="showvocab_only"]').isChecked()).toBeFalsy();
-
-
-    await page.locator('//*[@id="saveChangesBtn"]').click();
-
-    const plusButtonLocator = page.locator('//*[@id="float-input"]');
-    const elementCount = await plusButtonLocator.count();
-    if (elementCount === 0) {
-        expect(true).toBeTruthy();
-
-        await page.locator('//*[@id="react-flow-id"]/div[1]/div[1]/div[1]/div/div[2]/div/div/div[1]/div/div[1]/div').click();
-        await page.locator('//*[@id="editAdvancedIcon"]').click();
-
-        // showtemperature
-        await page.locator('//*[@id="showtemperature"]').click();
-        expect(await page.locator('//*[@id="showtemperature"]').isChecked()).toBeTruthy();
-
-        await page.locator('//*[@id="saveChangesBtn"]').click();
-        await page.locator('//*[@id="float-input"]').click();
-        await page.locator('//*[@id="float-input"]').fill('3');
-
-        let value = await page.locator('//*[@id="float-input"]').inputValue();
-
-        if (value != "2") {
-            expect(false).toBeTruthy();
-        }
-
-        await page.locator('//*[@id="float-input"]').click();
-        await page.locator('//*[@id="float-input"]').fill('-3');
-
-        value = await page.locator('//*[@id="float-input"]').inputValue();
-
-        if (value != "-2") {
-            expect(false).toBeTruthy();
-        }
-    }
-});
diff --git a/src/frontend/tests/toggleComponent.spec.ts b/src/frontend/tests/toggleComponent.spec.ts
new file mode 100644
index 000000000..86a4aa250
--- /dev/null
+++ b/src/frontend/tests/toggleComponent.spec.ts
@@ -0,0 +1,167 @@
+import { expect, test } from "@playwright/test";
+
+test("ToggleComponent", async ({ page }) => {
+  await page.goto("http://localhost:3000/");
+  await page.waitForTimeout(2000);
+
+  await page.locator('//*[@id="new-project-btn"]').click();
+  await page.waitForTimeout(2000);
+
+  await page.getByPlaceholder("Search").click();
+  await page.getByPlaceholder("Search").fill("directoryLoader");
+
+  await page.waitForTimeout(2000);
+
+  await page
+    .locator('//*[@id="sideDirectoryLoader"]')
+    .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[1]/div/div/div[2]/div/div/div[1]/div'
+    )
+    .click();
+  await page.locator('//*[@id="advancedIcon"]').click();
+  await page.locator('//*[@id="editAdvancedBtn"]').click();
+
+  await page.locator('//*[@id="showload_hidden"]').click();
+  expect(
+    await page.locator('//*[@id="showload_hidden"]').isChecked()
+  ).toBeTruthy();
+
+  await page.locator('//*[@id="saveChangesBtn"]').click();
+
+  await page.locator('//*[@id="toggle-1"]').click();
+  expect(await page.locator('//*[@id="toggle-1"]').isChecked()).toBeFalsy();
+
+  await page.locator('//*[@id="toggle-1"]').click();
+  expect(await page.locator('//*[@id="toggle-1"]').isChecked()).toBeTruthy();
+
+  await page.locator('//*[@id="toggle-1"]').click();
+  expect(await page.locator('//*[@id="toggle-1"]').isChecked()).toBeFalsy();
+
+  await page.locator('//*[@id="toggle-1"]').click();
+  expect(await page.locator('//*[@id="toggle-1"]').isChecked()).toBeTruthy();
+
+  await page.locator('//*[@id="toggle-1"]').click();
+  expect(await page.locator('//*[@id="toggle-1"]').isChecked()).toBeFalsy();
+
+  await page
+    .locator(
+      '//*[@id="react-flow-id"]/div[1]/div[1]/div/div/div[2]/div/div/div[1]/div'
+    )
+    .click();
+  await page.locator('//*[@id="advancedIcon"]').click();
+  await page.locator('//*[@id="editAdvancedBtn"]').click();
+
+  expect(
+    await page.locator('//*[@id="toggle-edit-1"]').isChecked()
+  ).toBeFalsy();
+
+  await page.locator('//*[@id="showglob"]').click();
+  expect(await page.locator('//*[@id="showglob"]').isChecked()).toBeFalsy();
+
+  await page.locator('//*[@id="showload_hidden"]').click();
+  expect(
+    await page.locator('//*[@id="showload_hidden"]').isChecked()
+  ).toBeFalsy();
+
+  await page.locator('//*[@id="showmax_concurrency"]').click();
+  expect(
+    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();
+
+  await page.locator('//*[@id="showrecursive"]').click();
+  expect(
+    await page.locator('//*[@id="showrecursive"]').isChecked()
+  ).toBeTruthy();
+
+  await page.locator('//*[@id="showsilent_errors"]').click();
+  expect(
+    await page.locator('//*[@id="showsilent_errors"]').isChecked()
+  ).toBeTruthy();
+
+  await page.locator('//*[@id="showuse_multithreading"]').click();
+  expect(
+    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();
+
+  await page.locator('//*[@id="showrecursive"]').click();
+  expect(
+    await page.locator('//*[@id="showrecursive"]').isChecked()
+  ).toBeFalsy();
+
+  await page.locator('//*[@id="showsilent_errors"]').click();
+  expect(
+    await page.locator('//*[@id="showsilent_errors"]').isChecked()
+  ).toBeFalsy();
+
+  await page.locator('//*[@id="showuse_multithreading"]').click();
+  expect(
+    await page.locator('//*[@id="showuse_multithreading"]').isChecked()
+  ).toBeFalsy();
+
+  await page.locator('//*[@id="saveChangesBtn"]').click();
+
+  const plusButtonLocator = page.locator('//*[@id="toggle-1"]');
+  const elementCount = await plusButtonLocator.count();
+  if (elementCount === 0) {
+    expect(true).toBeTruthy();
+
+    await page
+      .locator('//*[@id="react-flow-id"]/div[1]/div[1]/div[1]/div/div[2]/div')
+      .click();
+    await page.locator('//*[@id="advancedIcon"]').click();
+    await page.locator('//*[@id="editAdvancedBtn"]').click();
+
+    await page.locator('//*[@id="showload_hidden"]').click();
+    expect(
+      await page.locator('//*[@id="showload_hidden"]').isChecked()
+    ).toBeTruthy();
+
+    expect(
+      await page.locator('//*[@id="toggle-edit-1"]').isChecked()
+    ).toBeFalsy();
+
+    await page.locator('//*[@id="saveChangesBtn"]').click();
+
+    await page.locator('//*[@id="toggle-1"]').click();
+    expect(await page.locator('//*[@id="toggle-1"]').isChecked()).toBeTruthy();
+
+    await page.locator('//*[@id="toggle-1"]').click();
+    expect(await page.locator('//*[@id="toggle-1"]').isChecked()).toBeFalsy();
+
+    await page.locator('//*[@id="toggle-1"]').click();
+    expect(await page.locator('//*[@id="toggle-1"]').isChecked()).toBeTruthy();
+
+    await page.locator('//*[@id="toggle-1"]').click();
+    expect(await page.locator('//*[@id="toggle-1"]').isChecked()).toBeFalsy();
+
+    await page.locator('//*[@id="toggle-1"]').click();
+    expect(await page.locator('//*[@id="toggle-1"]').isChecked()).toBeTruthy();
+  }
+});