diff --git a/src/frontend/src/components/core/parameterRenderComponent/components/inputListComponent/index.tsx b/src/frontend/src/components/core/parameterRenderComponent/components/inputListComponent/index.tsx
index 6984feab4..fd5d6fdb0 100644
--- a/src/frontend/src/components/core/parameterRenderComponent/components/inputListComponent/index.tsx
+++ b/src/frontend/src/components/core/parameterRenderComponent/components/inputListComponent/index.tsx
@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+import { useEffect, useRef } from "react";
 
 import { ICON_STROKE_WIDTH } from "@/constants/constants";
 import _ from "lodash";
@@ -23,6 +23,7 @@ export default function InputListComponent({
       handleOnNewValue({ value: [""] }, { skipSnapshot: true });
     }
   }, [disabled]);
+  const inputRef = useRef<HTMLInputElement>(null);
 
   // @TODO Recursive Character Text Splitter - the value might be in string format, whereas the InputListComponent specifically requires an array format. To ensure smooth operation and prevent potential errors, it's crucial that we handle the conversion from a string to an array with the string as its element.
   if (typeof value === "string") {
@@ -70,22 +71,66 @@ export default function InputListComponent({
             disabled={disabled}
             type="text"
             value={singleValue}
+            ref={index === 0 ? inputRef : null}
             className={cn(
               editNode ? "input-edit-node" : "",
               disabled ? "disabled-state" : "",
+              "peer relative",
+              index === 0 && value.length > 1 && "pr-7 focus:pr-3",
             )}
             placeholder={getPlaceholder(disabled, placeholder)}
             onChange={(event) => handleInputChange(index, event.target.value)}
             data-testid={`${id}_${index}`}
           />
+          {index === 0 && value.length > 1 && (
+            <div className="absolute right-[65px] flex items-center peer-focus:pointer-events-none peer-focus:hidden">
+              <div
+                onClick={addNewInput}
+                className={cn(
+                  "hit-area-icon group flex !h-9 items-center justify-center text-center",
+                  disabled
+                    ? "pointer-events-none bg-background hover:bg-background"
+                    : "",
+                  index === 0
+                    ? "bg-background hover:bg-muted"
+                    : "hover:bg-smooth-red",
+                )}
+              >
+                <Button
+                  unstyled
+                  size="icon"
+                  className={cn(
+                    "hit-area-icon flex items-center justify-center",
+                    getButtonClassName(),
+                  )}
+                  data-testid={getTestId("plus", index)}
+                  disabled={disabled}
+                >
+                  <IconComponent
+                    name={"Plus"}
+                    className={cn(
+                      "icon-size justify-self-center text-muted-foreground",
+                      !disabled && "hover:cursor-pointer hover:text-foreground",
+                      "group-hover:text-foreground",
+                    )}
+                    strokeWidth={ICON_STROKE_WIDTH}
+                  />
+                </Button>
+              </div>
+            </div>
+          )}
           <div
-            onClick={index === 0 ? addNewInput : (e) => removeInput(index, e)}
+            onClick={
+              index === 0 && value.length <= 1
+                ? addNewInput
+                : (e) => removeInput(index, e)
+            }
             className={cn(
               "hit-area-icon group flex items-center justify-center text-center",
               disabled
                 ? "pointer-events-none bg-background hover:bg-background"
                 : "",
-              index === 0
+              index === 0 && value.length <= 1
                 ? "bg-background hover:bg-muted"
                 : "hover:bg-smooth-red",
             )}
@@ -97,15 +142,18 @@ export default function InputListComponent({
                 "hit-area-icon flex items-center justify-center",
                 getButtonClassName(),
               )}
-              data-testid={getTestId(index === 0 ? "plus" : "minus", index)}
+              data-testid={getTestId(
+                index === 0 && value.length <= 1 ? "plus" : "minus",
+                index,
+              )}
               disabled={disabled}
             >
               <IconComponent
-                name={index === 0 ? "Plus" : "Trash2"}
+                name={index === 0 && value.length <= 1 ? "Plus" : "Trash2"}
                 className={cn(
                   "icon-size justify-self-center text-muted-foreground",
                   !disabled && "hover:cursor-pointer hover:text-foreground",
-                  index === 0
+                  index === 0 && value.length <= 1
                     ? "group-hover:text-foreground"
                     : "group-hover:text-destructive",
                 )}
diff --git a/src/frontend/tests/core/unit/codeAreaModalComponent.spec.ts b/src/frontend/tests/core/unit/codeAreaModalComponent.spec.ts
index 09496259d..47a8e1339 100644
--- a/src/frontend/tests/core/unit/codeAreaModalComponent.spec.ts
+++ b/src/frontend/tests/core/unit/codeAreaModalComponent.spec.ts
@@ -56,12 +56,8 @@ test(
     await page
       .getByTestId("prototypesPython Function")
       .dragTo(page.locator('//*[@id="react-flow-id"]'));
-    await page.mouse.up();
-    await page.mouse.down();
     await page.getByTestId("fit_view").click();
     await page.getByTestId("zoom_out").click();
-    await page.getByTestId("zoom_out").click();
-    await page.getByTestId("zoom_out").click();
     await page.getByTestId("div-generic-node").click();
 
     await page.getByTestId("code-button-modal").click();