diff --git a/src/frontend/src/components/cardComponent/index.tsx b/src/frontend/src/components/cardComponent/index.tsx
index 422417d99..e207b8853 100644
--- a/src/frontend/src/components/cardComponent/index.tsx
+++ b/src/frontend/src/components/cardComponent/index.tsx
@@ -55,6 +55,32 @@ export default function CollectionCardComponent({
 
   const { onDragStart } = useDragStart(data);
 
+  const handlePlaygroundClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    track("Playground Button Clicked", { flowId: data.id });
+    setLoadingPlayground(true);
+    const flow = getFlowById(data.id);
+    if (flow) {
+      if (!hasPlayground(flow)) {
+        setErrorData({
+          title: "Error",
+          list: ["This flow doesn't have a playground."],
+        });
+        setLoadingPlayground(false);
+        return;
+      }
+      setCurrentFlow(flow);
+      setOpenPlayground(true);
+      setLoadingPlayground(false);
+    } else {
+      setErrorData({
+        title: "Error",
+        list: ["Error getting flow data."],
+      });
+    }
+  };
+
   return (
     <>
       <Card
@@ -135,31 +161,7 @@ export default function CollectionCardComponent({
                   size="sm"
                   className="gap-2 whitespace-nowrap bg-muted"
                   data-testid={"playground-flow-button-" + data.id}
-                  onClick={(e) => {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    track("Playground Button Clicked", { flowId: data.id });
-                    setLoadingPlayground(true);
-                    const flow = getFlowById(data.id);
-                    if (flow) {
-                      if (!hasPlayground(flow)) {
-                        setErrorData({
-                          title: "Error",
-                          list: ["This flow doesn't have a playground."],
-                        });
-                        setLoadingPlayground(false);
-                        return;
-                      }
-                      setCurrentFlow(flow);
-                      setOpenPlayground(true);
-                      setLoadingPlayground(false);
-                    } else {
-                      setErrorData({
-                        title: "Error",
-                        list: ["Error getting flow data."],
-                      });
-                    }
-                  }}
+                  onClick={handlePlaygroundClick}
                 >
                   {!loadingPlayground ? (
                     <IconComponent
diff --git a/src/frontend/src/components/codeAreaComponent/index.tsx b/src/frontend/src/components/codeAreaComponent/index.tsx
index ad8cfaf6f..145be49b9 100644
--- a/src/frontend/src/components/codeAreaComponent/index.tsx
+++ b/src/frontend/src/components/codeAreaComponent/index.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
 import CodeAreaModal from "../../modals/codeAreaModal";
 import { CodeAreaComponentType } from "../../types/components";
+import { cn } from "../../utils/utils";
 
 import IconComponent from "../genericIconComponent";
 
@@ -17,57 +18,68 @@ export default function CodeAreaComponent({
   open,
   setOpen,
 }: CodeAreaComponentType) {
-  const [myValue, setMyValue] = useState(
+  const [componentValue, setComponentValue] = useState(
     typeof value == "string" ? value : JSON.stringify(value),
   );
   useEffect(() => {
-    if (disabled && myValue !== "") {
-      setMyValue("");
+    if (disabled && componentValue !== "") {
+      setComponentValue("");
       onChange("", undefined, true);
     }
   }, [disabled]);
 
   useEffect(() => {
-    setMyValue(typeof value == "string" ? value : JSON.stringify(value));
+    setComponentValue(typeof value == "string" ? value : JSON.stringify(value));
   }, [value]);
 
+  const handleValueChange = (newValue) => {
+    onChange(newValue);
+  };
+
+  const renderInputText = () => (
+    <span
+      id={id}
+      data-testid={id}
+      className={cn(
+        editNode
+          ? "input-edit-node input-dialog"
+          : "primary-input text-muted-foreground",
+        disabled && !editNode && "input-disable input-ring",
+      )}
+    >
+      {value !== "" ? value : "Type something..."}
+    </span>
+  );
+
+  const renderExternalLinkIcon = () => {
+    if (editNode) return null;
+
+    return (
+      <IconComponent
+        name="ExternalLink"
+        className={cn(
+          "icons-parameters-comp shrink-0",
+          disabled ? "text-ring" : "hover:text-accent-foreground",
+        )}
+      />
+    );
+  };
+
   return (
-    <div className={disabled ? "pointer-events-none w-full" : "w-full"}>
+    <div className={cn("w-full", disabled && "pointer-events-none")}>
       <CodeAreaModal
         open={open}
         setOpen={setOpen}
         readonly={readonly}
         dynamic={dynamic}
-        value={myValue}
+        value={value}
         nodeClass={nodeClass}
         setNodeClass={setNodeClass!}
-        setValue={(value: string) => {
-          setMyValue(value);
-          onChange(value);
-        }}
+        setValue={handleValueChange}
       >
         <div className="flex w-full items-center gap-3">
-          <span
-            id={id}
-            data-testid={id}
-            className={
-              editNode
-                ? "input-edit-node input-dialog"
-                : (disabled ? "input-disable input-ring " : "") +
-                  " primary-input text-muted-foreground"
-            }
-          >
-            {myValue !== "" ? myValue : "Type something..."}
-          </span>
-          {!editNode && (
-            <IconComponent
-              name="ExternalLink"
-              className={
-                "icons-parameters-comp shrink-0" +
-                (disabled ? " text-ring" : " hover:text-accent-foreground")
-              }
-            />
-          )}
+          {renderInputText()}
+          {renderExternalLinkIcon()}
         </div>
       </CodeAreaModal>
     </div>
diff --git a/src/frontend/src/components/dropdownComponent/index.tsx b/src/frontend/src/components/dropdownComponent/index.tsx
index f930d18d1..aa1ee20d1 100644
--- a/src/frontend/src/components/dropdownComponent/index.tsx
+++ b/src/frontend/src/components/dropdownComponent/index.tsx
@@ -69,131 +69,125 @@ export default function Dropdown({
     }
   }, [open]);
 
-  return (
-    <>
-      {Object.keys(options ?? [])?.length > 0 || combobox ? (
-        <>
-          <Popover open={open} onOpenChange={children ? () => {} : setOpen}>
-            {children ? (
-              <PopoverAnchor>{children}</PopoverAnchor>
-            ) : (
-              <PopoverTrigger asChild>
-                <Button
-                  disabled={disabled}
-                  variant="primary"
-                  size="xs"
-                  role="combobox"
-                  ref={refButton}
-                  aria-expanded={open}
-                  data-testid={`${id ?? ""}`}
-                  className={cn(
-                    editNode
-                      ? "dropdown-component-outline"
-                      : "dropdown-component-false-outline",
-                    "w-full justify-between font-normal",
-                    editNode ? "input-edit-node" : "py-2",
-                  )}
-                >
-                  <span
-                    className="truncate"
-                    data-testid={`value-dropdown-` + id}
-                  >
-                    {value &&
-                    value !== "" &&
-                    filteredOptions.find((option) => option === value)
-                      ? filteredOptions.find((option) => option === value)
-                      : "Choose an option..."}
-                  </span>
+  const renderTriggerButton = () => (
+    <PopoverTrigger asChild>
+      <Button
+        disabled={disabled}
+        variant="primary"
+        size="xs"
+        role="combobox"
+        ref={refButton}
+        aria-expanded={open}
+        data-testid={id}
+        className={cn(
+          editNode
+            ? "dropdown-component-outline input-edit-node"
+            : "dropdown-component-false-outline py-2",
+          "w-full justify-between font-normal",
+        )}
+      >
+        <span className="truncate" data-testid={`value-dropdown-${id}`}>
+          {value &&
+          value !== "" &&
+          filteredOptions.find((option) => option === value)
+            ? filteredOptions.find((option) => option === value)
+            : "Choose an option..."}
+        </span>
+        <ForwardedIconComponent
+          name="ChevronsUpDown"
+          className="ml-2 h-4 w-4 shrink-0 opacity-50"
+        />
+      </Button>
+    </PopoverTrigger>
+  );
 
-                  <ForwardedIconComponent
-                    name="ChevronsUpDown"
-                    className="ml-2 h-4 w-4 shrink-0 opacity-50"
-                  />
-                </Button>
-              </PopoverTrigger>
-            )}
-            <PopoverContentDropdown
-              side="bottom"
-              avoidCollisions={!!children}
-              className="noflow nowheel nopan nodelete nodrag p-0"
-              style={
-                children
-                  ? {}
-                  : { minWidth: refButton?.current?.clientWidth ?? "200px" }
-              }
-            >
-              <Command>
-                <div className="flex items-center border-b px-3">
-                  <ForwardedIconComponent
-                    name="search"
-                    className="mr-2 h-4 w-4 shrink-0 opacity-50"
-                  />
-                  <input
-                    onChange={searchRoleByTerm}
-                    placeholder="Search options..."
-                    className="flex h-9 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
-                  />
-                </div>
-                <CommandList>
-                  <CommandEmpty>No values found.</CommandEmpty>
-                  <CommandGroup defaultChecked={false}>
-                    {filteredOptions?.map((option, id) => (
-                      <ShadTooltip
-                        delayDuration={700}
-                        key={id}
-                        content={option}
-                      >
-                        <div>
-                          <CommandItem
-                            key={id}
-                            value={option}
-                            onSelect={(currentValue) => {
-                              onSelect(currentValue);
-                              setOpen(false);
-                            }}
-                            className="items-center overflow-hidden truncate"
-                            data-testid={`${option}-${id ?? ""}-option`}
-                          >
-                            {customValue === option ? (
-                              <span className="text-muted-foreground">
-                                Text:&nbsp;
-                              </span>
-                            ) : (
-                              <></>
-                            )}
-                            <span className="truncate">{option}</span>
-                            <ForwardedIconComponent
-                              name="Check"
-                              className={cn(
-                                "ml-auto h-4 w-4 shrink-0 text-primary",
-                                value === option ? "opacity-100" : "opacity-0",
-                              )}
-                            />
-                          </CommandItem>
-                        </div>
-                      </ShadTooltip>
-                    ))}
-                  </CommandGroup>
-                </CommandList>
-              </Command>
-            </PopoverContentDropdown>
-          </Popover>
-        </>
+  const renderSearchInput = () => (
+    <div className="flex items-center border-b px-3">
+      <ForwardedIconComponent
+        name="search"
+        className="mr-2 h-4 w-4 shrink-0 opacity-50"
+      />
+      <input
+        onChange={searchRoleByTerm}
+        placeholder="Search options..."
+        className="flex h-9 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
+      />
+    </div>
+  );
+
+  const renderOptionsList = () => (
+    <CommandList>
+      <CommandEmpty>No values found.</CommandEmpty>
+      <CommandGroup defaultChecked={false}>
+        {filteredOptions?.map((option, index) => (
+          <ShadTooltip key={index} delayDuration={700} content={option}>
+            <div>
+              <CommandItem
+                value={option}
+                onSelect={(currentValue) => {
+                  onSelect(currentValue);
+                  setOpen(false);
+                }}
+                className="items-center overflow-hidden truncate"
+                data-testid={`${option}-${index}-option`}
+              >
+                {customValue === option && (
+                  <span className="text-muted-foreground">Text:&nbsp;</span>
+                )}
+                <span className="truncate">{option}</span>
+                <ForwardedIconComponent
+                  name="Check"
+                  className={cn(
+                    "ml-auto h-4 w-4 shrink-0 text-primary",
+                    value === option ? "opacity-100" : "opacity-0",
+                  )}
+                />
+              </CommandItem>
+            </div>
+          </ShadTooltip>
+        ))}
+      </CommandGroup>
+    </CommandList>
+  );
+
+  const renderPopoverContent = () => (
+    <PopoverContentDropdown
+      side="bottom"
+      avoidCollisions={!!children}
+      className="noflow nowheel nopan nodelete nodrag p-0"
+      style={
+        children ? {} : { minWidth: refButton?.current?.clientWidth ?? "200px" }
+      }
+    >
+      <Command>
+        {renderSearchInput()}
+        {renderOptionsList()}
+      </Command>
+    </PopoverContentDropdown>
+  );
+
+  if (Object.keys(options).length === 0 && !combobox) {
+    return isLoading ? (
+      <div>
+        <span className="text-sm italic">Loading...</span>
+      </div>
+    ) : (
+      <div>
+        <span className="text-sm italic">
+          No parameters are available for display.
+        </span>
+      </div>
+    );
+  }
+
+  return (
+    <Popover open={open} onOpenChange={children ? () => {} : setOpen}>
+      {children ? (
+        <PopoverAnchor>{children}</PopoverAnchor>
       ) : (
-        <>
-          {(!isLoading && (
-            <div>
-              <span className="text-sm italic">
-                No parameters are available for display.
-              </span>
-            </div>
-          )) || (
-            <div>
-              <span className="text-sm italic">Loading...</span>
-            </div>
-          )}
-        </>
+        renderTriggerButton()
       )}
-    </>
+      {renderPopoverContent()}
+    </Popover>
   );
 }
diff --git a/src/frontend/src/components/floatComponent/index.tsx b/src/frontend/src/components/floatComponent/index.tsx
index 979f55aba..1a316a9e1 100644
--- a/src/frontend/src/components/floatComponent/index.tsx
+++ b/src/frontend/src/components/floatComponent/index.tsx
@@ -20,6 +20,19 @@ export default function FloatComponent({
     }
   }, [disabled]);
 
+  const handleInput = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const inputValue = Number(event.target.value);
+    if (inputValue < min) {
+      event.target.value = min.toString();
+    } else if (inputValue > max) {
+      event.target.value = max.toString();
+    }
+  };
+
+  const handleChange = (event) => {
+    onChange(event.target.value);
+  };
+
   return (
     <div className="w-full">
       <Input
@@ -28,25 +41,14 @@ export default function FloatComponent({
         type="number"
         step={step}
         min={min}
-        onInput={(event: React.ChangeEvent<HTMLInputElement>) => {
-          if (Number(event.target.value) < min) {
-            event.target.value = min.toString();
-          }
-          if (Number(event.target.value) > max) {
-            event.target.value = max.toString();
-          }
-        }}
         max={max}
         value={value ?? ""}
         disabled={disabled}
         className={editNode ? "input-edit-node" : ""}
-        placeholder={`Enter a value`}
-        onChange={(event) => {
-          onChange(event.target.value);
-        }}
-        onKeyDown={(e) => {
-          handleKeyDown(e, value, "");
-        }}
+        placeholder="Enter a value"
+        onInput={handleInput}
+        onChange={handleChange}
+        onKeyDown={(e) => handleKeyDown(e, value, "")}
       />
     </div>
   );
diff --git a/src/frontend/src/components/inputListComponent/index.tsx b/src/frontend/src/components/inputListComponent/index.tsx
index ddf75c1c1..dce65cb15 100644
--- a/src/frontend/src/components/inputListComponent/index.tsx
+++ b/src/frontend/src/components/inputListComponent/index.tsx
@@ -29,6 +29,36 @@ export default function InputListComponent({
 
   if (!value?.length) value = [""];
 
+  const handleInputChange = (index, newValue) => {
+    const newInputList = _.cloneDeep(value);
+    newInputList[index] = newValue;
+    onChange(newInputList);
+  };
+
+  const addNewInput = (e) => {
+    e.preventDefault();
+    const newInputList = _.cloneDeep(value);
+    newInputList.push("");
+    onChange(newInputList);
+  };
+
+  const removeInput = (index, e) => {
+    e.preventDefault();
+    const newInputList = _.cloneDeep(value);
+    newInputList.splice(index, 1);
+    onChange(newInputList);
+  };
+
+  const getButtonClassName = () =>
+    classNames(
+      disabled || playgroundDisabled
+        ? "cursor-not-allowed text-muted-foreground"
+        : "text-primary hover:text-accent-foreground",
+    );
+
+  const getTestId = (type, index) =>
+    `input-list-${type}-btn${editNode ? "-edit" : ""}_${componentName}-${index}`;
+
   return (
     <div
       className={classNames(
@@ -36,72 +66,31 @@ export default function InputListComponent({
         "flex w-full flex-col gap-3",
       )}
     >
-      {value.map((singleValue, idx) => {
-        return (
-          <div key={idx} className="flex w-full gap-3">
-            <Input
-              disabled={disabled || playgroundDisabled}
-              type="text"
-              value={singleValue}
-              className={editNode ? "input-edit-node" : ""}
-              placeholder="Type something..."
-              onChange={(event) => {
-                let newInputList = _.cloneDeep(value);
-                newInputList[idx] = event.target.value;
-                onChange(newInputList);
-              }}
-              data-testid={`${id}_` + idx}
+      {value.map((singleValue, index) => (
+        <div key={index} className="flex w-full gap-3">
+          <Input
+            disabled={disabled || playgroundDisabled}
+            type="text"
+            value={singleValue}
+            className={editNode ? "input-edit-node" : ""}
+            placeholder="Type something..."
+            onChange={(event) => handleInputChange(index, event.target.value)}
+            data-testid={`${id}_${index}`}
+          />
+          <Button
+            unstyled
+            className={getButtonClassName()}
+            onClick={index === 0 ? addNewInput : (e) => removeInput(index, e)}
+            data-testid={getTestId(index === 0 ? "plus" : "minus", index)}
+            disabled={disabled || playgroundDisabled}
+          >
+            <IconComponent
+              name={index === 0 ? "Plus" : "X"}
+              className="h-4 w-4"
             />
-            {idx === 0 ? (
-              <Button
-                unstyled
-                className={cn(
-                  disabled || playgroundDisabled
-                    ? "cursor-not-allowed text-muted-foreground"
-                    : "text-primary hover:text-accent-foreground",
-                )}
-                onClick={(e) => {
-                  let newInputList = _.cloneDeep(value);
-                  newInputList.push("");
-                  onChange(newInputList);
-                  e.preventDefault();
-                }}
-                data-testid={
-                  `input-list-plus-btn${
-                    editNode ? "-edit" : ""
-                  }_${componentName}-` + idx
-                }
-                disabled={disabled || playgroundDisabled}
-              >
-                <IconComponent name="Plus" className="h-4 w-4" />
-              </Button>
-            ) : (
-              <Button
-                unstyled
-                className={cn(
-                  disabled || playgroundDisabled
-                    ? "cursor-not-allowed text-muted-foreground"
-                    : "text-primary hover:text-accent-foreground",
-                )}
-                data-testid={
-                  `input-list-minus-btn${
-                    editNode ? "-edit" : ""
-                  }_${componentName}-` + idx
-                }
-                onClick={(e) => {
-                  let newInputList = _.cloneDeep(value);
-                  newInputList.splice(idx, 1);
-                  onChange(newInputList);
-                  e.preventDefault();
-                }}
-                disabled={disabled || playgroundDisabled}
-              >
-                <IconComponent name="X" className="h-4 w-4" />
-              </Button>
-            )}
-          </div>
-        );
-      })}
+          </Button>
+        </div>
+      ))}
     </div>
   );
 }
diff --git a/src/frontend/src/components/intComponent/index.tsx b/src/frontend/src/components/intComponent/index.tsx
index 10bcad7bf..9ebd54121 100644
--- a/src/frontend/src/components/intComponent/index.tsx
+++ b/src/frontend/src/components/intComponent/index.tsx
@@ -38,36 +38,57 @@ export default function IntComponent({
     onChange(Number(e.target.value));
   };
 
+  const getStepValue = () => {
+    return (Number.isInteger(rangeSpec?.step) ? rangeSpec.step : 1) ?? 1;
+  };
+
+  const getMinValue = () => {
+    return rangeSpec?.min ?? min;
+  };
+
+  const getMaxValue = () => {
+    return rangeSpec?.max ?? undefined;
+  };
+
+  const getInputClassName = () => {
+    return cn(
+      editNode ? "input-edit-node" : "",
+      "nopan nodelete nodrag noflow primary-input",
+    );
+  };
+
+  const handleNumberChange = (newValue) => {
+    onChange(Number(newValue));
+  };
+
+  const handleInputChange = (event) => {
+    const inputValue = Number(event.target.value);
+    if (inputValue < getMinValue()) {
+      event.target.value = getMinValue().toString();
+    }
+  };
+
+  const inputRef = useRef(null);
+
   return (
     <div className="w-full">
       <NumberInput
         id={id}
-        step={(Number.isInteger(rangeSpec?.step) ? rangeSpec?.step : 1) ?? 1}
-        min={rangeSpec?.min ?? min}
-        max={rangeSpec?.max ?? undefined}
-        onChange={(value) => {
-          onChange(Number(value));
-        }}
+        step={getStepValue()}
+        min={getMinValue()}
+        max={getMaxValue()}
+        onChange={handleNumberChange}
         value={value ?? ""}
       >
         <NumberInputField
-          className={cn(
-            editNode ? "input-edit-node" : "",
-            "nopan nodelete nodrag noflow primary-input",
-          )}
+          className={getInputClassName()}
           onChange={handleChangeInput}
-          onKeyDown={(event) => {
-            handleKeyDown(event, value, "");
-          }}
-          onInput={(event: React.ChangeEvent<HTMLInputElement>) => {
-            if (Number(event.target.value) < min) {
-              event.target.value = min.toString();
-            }
-          }}
+          onKeyDown={(event) => handleKeyDown(event, value, "")}
+          onInput={handleInputChange}
           disabled={disabled}
           placeholder={editNode ? "Integer number" : "Type an integer number"}
           data-testid={id}
-          ref={ref}
+          ref={inputRef}
         />
         <NumberInputStepper paddingRight={10}>
           <NumberIncrementStepper fontSize={8} marginTop={6} />
diff --git a/src/frontend/src/components/keypairListComponent/index.tsx b/src/frontend/src/components/keypairListComponent/index.tsx
index 118097f5e..a77e7107d 100644
--- a/src/frontend/src/components/keypairListComponent/index.tsx
+++ b/src/frontend/src/components/keypairListComponent/index.tsx
@@ -7,7 +7,6 @@ import {
   hasDuplicateKeys,
 } from "@/utils/reactflowUtils";
 import { cloneDeep } from "lodash";
-import { classNames } from "../../utils/utils";
 import IconComponent from "../genericIconComponent";
 import { Input } from "../ui/input";
 
@@ -27,7 +26,7 @@ export default function KeypairListComponent({
 
   const [duplicateKey, setDuplicateKey] = useState(false);
 
-  const myValue =
+  const values =
     Object.keys(value || {})?.length === 0 || !value
       ? [{ "": "" }]
       : convertObjToArray(value, "dict");
@@ -43,120 +42,100 @@ export default function KeypairListComponent({
   };
 
   const handleChangeKey = (event, idx) => {
-    const oldKey = Object.keys(myValue[idx])[0];
-    const updatedObj = { [event.target.value]: myValue[idx][oldKey] };
+    const oldKey = Object.keys(values[idx])[0];
+    const updatedObj = { [event.target.value]: values[idx][oldKey] };
 
-    const newValue = cloneDeep(myValue);
+    const newValue = cloneDeep(values);
     newValue[idx] = updatedObj;
 
     handleNewValue(newValue);
   };
 
   const handleChangeValue = (event, idx) => {
-    const key = Object.keys(myValue[idx])[0];
+    const key = Object.keys(values[idx])[0];
     const updatedObj = { [key]: event.target.value };
 
-    const newValue = cloneDeep(myValue);
+    const newValue = cloneDeep(values);
     newValue[idx] = updatedObj;
 
     handleNewValue(newValue);
   };
 
+  const addNewKeyValuePair = () => {
+    const newValues = cloneDeep(values);
+    newValues.push({ "": "" });
+    onChange(newValues);
+  };
+
+  const removeKeyValuePair = (index) => {
+    const newValues = cloneDeep(values);
+    newValues.splice(index, 1);
+    onChange(newValues);
+  };
+
+  const getInputClassName = (isEditNode, isDuplicateKey) => {
+    return `${isEditNode ? "input-edit-node" : ""} ${isDuplicateKey ? "input-invalid" : ""}`.trim();
+  };
+
+  const getTestId = (prefix, index) =>
+    `${editNode ? "editNode" : ""}${prefix}${index}`;
+
   return (
     <div
-      className={classNames(
-        myValue?.length > 1 && editNode ? "mx-2 my-1" : "",
-        "flex h-full flex-col gap-3",
-      )}
+      className={`flex h-full flex-col gap-3 ${values?.length > 1 && editNode ? "mx-2 my-1" : ""}`}
     >
-      {myValue?.map((obj, index) => {
-        return Object.keys(obj).map((key, idx) => {
-          return (
-            <div key={idx} className="flex w-full gap-2">
-              <Input
-                data-testid={
-                  editNode ? "editNodekeypair" + index : "keypair" + index
-                }
-                id={editNode ? "editNodekeypair" + index : "keypair" + index}
-                type="text"
-                value={key.trim()}
-                className={classNames(
-                  editNode ? "input-edit-node" : "",
-                  duplicateKey ? "input-invalid" : "",
-                )}
-                placeholder="Type key..."
-                onChange={(event) => handleChangeKey(event, index)}
-              />
+      {values?.map((obj, index) =>
+        Object.keys(obj).map((key, idx) => (
+          <div key={idx} className="flex w-full gap-2">
+            <Input
+              data-testid={getTestId("keypair", index)}
+              id={getTestId("keypair", index)}
+              type="text"
+              value={key.trim()}
+              className={getInputClassName(editNode, duplicateKey)}
+              placeholder="Type key..."
+              onChange={(event) => handleChangeKey(event, index)}
+            />
 
-              <Input
-                data-testid={
-                  editNode
-                    ? "editNodekeypair" + (index + 100).toString()
-                    : "keypair" + (index + 100).toString()
-                }
-                id={
-                  editNode
-                    ? "editNodekeypair" + (index + 100).toString()
-                    : "keypair" + (index + 100).toString()
-                }
-                type="text"
-                disabled={disabled}
-                value={obj[key]}
-                className={editNode ? "input-edit-node" : ""}
-                placeholder="Type a value..."
-                onChange={(event) => handleChangeValue(event, index)}
-              />
+            <Input
+              data-testid={getTestId("keypair", index + 100)}
+              id={getTestId("keypair", index + 100)}
+              type="text"
+              disabled={disabled}
+              value={obj[key]}
+              className={editNode ? "input-edit-node" : ""}
+              placeholder="Type a value..."
+              onChange={(event) => handleChangeValue(event, index)}
+            />
 
-              {isList && index === myValue.length - 1 ? (
+            {isList &&
+              (index === values.length - 1 ? (
                 <button
                   disabled={disabled}
-                  onClick={() => {
-                    let newInputList = cloneDeep(myValue);
-                    newInputList.push({ "": "" });
-                    onChange(newInputList);
-                  }}
-                  id={
-                    editNode
-                      ? "editNodeplusbtn" + index.toString()
-                      : "plusbtn" + index.toString()
-                  }
+                  onClick={addNewKeyValuePair}
+                  id={getTestId("plusbtn", index)}
                   data-testid={id}
                 >
                   <IconComponent
                     name="Plus"
-                    className={"h-4 w-4 hover:text-accent-foreground"}
+                    className="h-4 w-4 hover:text-accent-foreground"
                   />
                 </button>
-              ) : isList ? (
+              ) : (
                 <button
-                  onClick={() => {
-                    let newInputList = cloneDeep(myValue);
-                    newInputList.splice(index, 1);
-                    onChange(newInputList);
-                  }}
-                  data-testid={
-                    editNode
-                      ? "editNodeminusbtn" + index.toString()
-                      : "minusbtn" + index.toString()
-                  }
-                  id={
-                    editNode
-                      ? "editNodeminusbtn" + index.toString()
-                      : "minusbtn" + index.toString()
-                  }
+                  onClick={() => removeKeyValuePair(index)}
+                  data-testid={getTestId("minusbtn", index)}
+                  id={getTestId("minusbtn", index)}
                 >
                   <IconComponent
                     name="X"
                     className="h-4 w-4 hover:text-status-red"
                   />
                 </button>
-              ) : (
-                ""
-              )}
-            </div>
-          );
-        });
-      })}
+              ))}
+          </div>
+        )),
+      )}
     </div>
   );
 }
diff --git a/src/frontend/src/components/multiselectComponent/index.tsx b/src/frontend/src/components/multiselectComponent/index.tsx
index d432d6a24..59572469b 100644
--- a/src/frontend/src/components/multiselectComponent/index.tsx
+++ b/src/frontend/src/components/multiselectComponent/index.tsx
@@ -92,156 +92,139 @@ export default function MultiselectComponent({
     }
   }, [open]);
 
-  return (
-    <>
-      {Object.keys(options ?? [])?.length > 0 || combobox ? (
-        <>
-          <Popover open={open} onOpenChange={children ? () => {} : setOpen}>
-            {children ? (
-              <PopoverAnchor>{children}</PopoverAnchor>
-            ) : (
-              <PopoverTrigger asChild>
-                <Button
-                  disabled={disabled}
-                  variant="primary"
-                  size="xs"
-                  role="combobox"
-                  ref={refButton}
-                  aria-expanded={open}
-                  data-testid={`${id ?? ""}`}
+  const handleOptionSelect = (currentValue) => {
+    if (value.includes(currentValue)) {
+      onSelect(value.filter((v) => v !== currentValue));
+    } else {
+      onSelect([...value, currentValue]);
+    }
+  };
+
+  const renderDropdownTrigger = () => (
+    <PopoverTrigger asChild>
+      <Button
+        disabled={disabled}
+        variant="primary"
+        size="xs"
+        role="combobox"
+        ref={refButton}
+        aria-expanded={open}
+        data-testid={id}
+        className={cn(
+          editNode
+            ? "dropdown-component-outline input-edit-node"
+            : "dropdown-component-false-outline py-2",
+          "w-full justify-between font-normal",
+        )}
+      >
+        <span className="truncate" data-testid={`value-dropdown-${id}`}>
+          {value.length > 0 && options.find((option) => value.includes(option))
+            ? value.join(", ")
+            : "Choose an option..."}
+        </span>
+        <ForwardedIconComponent
+          name="ChevronsUpDown"
+          className="ml-2 h-4 w-4 shrink-0 opacity-50"
+        />
+      </Button>
+    </PopoverTrigger>
+  );
+
+  const renderSearchInput = () => (
+    <div className="flex items-center border-b px-3">
+      <ForwardedIconComponent
+        name="search"
+        className="mr-2 h-4 w-4 shrink-0 opacity-50"
+      />
+      <input
+        onChange={(event) => {
+          setSearchValue(event.target.value);
+        }}
+        placeholder="Search options..."
+        className="flex h-9 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
+      />
+      <Button
+        unstyled
+        className="ml-2"
+        onClick={() => setOnlySelected((old) => !old)}
+      >
+        <ForwardedIconComponent
+          className="h-4 w-4"
+          name={onlySelected ? "CheckCheck" : "Check"}
+        />
+      </Button>
+    </div>
+  );
+
+  const renderOptionsList = () => (
+    <CommandList className="overflow-y-scroll">
+      <CommandEmpty>No values found.</CommandEmpty>
+      <CommandGroup>
+        {filteredOptions.map((option, index) => (
+          <ShadTooltip key={index} delayDuration={700} content={option}>
+            <div>
+              <CommandItem
+                value={option}
+                onSelect={handleOptionSelect}
+                className="items-center overflow-hidden truncate"
+                data-testid={`${option}-${id ?? ""}-option`}
+              >
+                {(customValues.includes(option) || searchValue === option) && (
+                  <span className="text-muted-foreground">Text:&nbsp;</span>
+                )}
+                <span className="truncate">{option}</span>
+                <ForwardedIconComponent
+                  name="Check"
                   className={cn(
-                    editNode
-                      ? "dropdown-component-outline"
-                      : "dropdown-component-false-outline",
-                    "w-full justify-between font-normal",
-                    editNode ? "input-edit-node" : "py-2",
+                    "ml-auto h-4 w-4 shrink-0 text-primary",
+                    value.includes(option) ? "opacity-100" : "opacity-0",
                   )}
-                >
-                  <span
-                    className="truncate"
-                    data-testid={`value-dropdown-` + id}
-                  >
-                    {value &&
-                    value.length > 0 &&
-                    options.find((option) => value.includes(option))
-                      ? value.join(", ")
-                      : "Choose an option..."}
-                  </span>
+                />
+              </CommandItem>
+            </div>
+          </ShadTooltip>
+        ))}
+      </CommandGroup>
+    </CommandList>
+  );
 
-                  <ForwardedIconComponent
-                    name="ChevronsUpDown"
-                    className="ml-2 h-4 w-4 shrink-0 opacity-50"
-                  />
-                </Button>
-              </PopoverTrigger>
-            )}
-            <PopoverContentDropdown
-              onOpenAutoFocus={(event) => {
-                event.preventDefault();
-              }}
-              side="bottom"
-              avoidCollisions={!!children}
-              className="noflow nowheel nopan nodelete nodrag p-0"
-              style={
-                children
-                  ? {}
-                  : { minWidth: refButton?.current?.clientWidth ?? "200px" }
-              }
-            >
-              <Command>
-                <div className="flex items-center border-b px-3">
-                  <ForwardedIconComponent
-                    name="search"
-                    className="mr-2 h-4 w-4 shrink-0 opacity-50"
-                  />
-                  <input
-                    onChange={(event) => {
-                      setSearchValue(event.target.value);
-                      searchRoleByTerm(event.target.value);
-                    }}
-                    placeholder="Search options..."
-                    className="flex h-9 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
-                  />
-                  <Button
-                    unstyled
-                    className="ml-2"
-                    onClick={() => setOnlySelected((old) => !old)}
-                  >
-                    <ForwardedIconComponent
-                      className="h-4 w-4"
-                      name={onlySelected ? "CheckCheck" : "Check"}
-                    />
-                  </Button>
-                </div>
+  if (Object.keys(options).length === 0 && !combobox) {
+    return isLoading ? (
+      <div>
+        <span className="text-sm italic">Loading...</span>
+      </div>
+    ) : (
+      <div>
+        <span className="text-sm italic">
+          No parameters are available for display.
+        </span>
+      </div>
+    );
+  }
 
-                <CommandList className="overflow-y-scroll">
-                  <CommandEmpty>No values found.</CommandEmpty>
-                  <CommandGroup defaultChecked={false}>
-                    {filteredOptions?.map((option, id) => (
-                      <ShadTooltip
-                        delayDuration={700}
-                        key={id}
-                        content={option}
-                      >
-                        <div>
-                          <CommandItem
-                            key={id}
-                            value={option}
-                            onSelect={(currentValue) => {
-                              if (value.includes(currentValue)) {
-                                onSelect(
-                                  value.filter((v) => v !== currentValue),
-                                );
-                              } else {
-                                onSelect([...value, currentValue]);
-                              }
-                            }}
-                            className="items-center overflow-hidden truncate"
-                            data-testid={`${option}-${id ?? ""}-option`}
-                          >
-                            {customValues.includes(option) ||
-                            searchValue === option ? (
-                              <span className="text-muted-foreground">
-                                Text:&nbsp;
-                              </span>
-                            ) : (
-                              <></>
-                            )}
-                            <span className="truncate">{option}</span>
-                            <ForwardedIconComponent
-                              name="Check"
-                              className={cn(
-                                "ml-auto h-4 w-4 shrink-0 text-primary",
-                                value.includes(option)
-                                  ? "opacity-100"
-                                  : "opacity-0",
-                              )}
-                            />
-                          </CommandItem>
-                        </div>
-                      </ShadTooltip>
-                    ))}
-                  </CommandGroup>
-                </CommandList>
-              </Command>
-            </PopoverContentDropdown>
-          </Popover>
-        </>
+  return (
+    <Popover open={open} onOpenChange={children ? () => {} : setOpen}>
+      {children ? (
+        <PopoverAnchor>{children}</PopoverAnchor>
       ) : (
-        <>
-          {(!isLoading && (
-            <div>
-              <span className="text-sm italic">
-                No parameters are available for display.
-              </span>
-            </div>
-          )) || (
-            <div>
-              <span className="text-sm italic">Loading...</span>
-            </div>
-          )}
-        </>
+        renderDropdownTrigger()
       )}
-    </>
+      <PopoverContentDropdown
+        onOpenAutoFocus={(event) => event.preventDefault()}
+        side="bottom"
+        avoidCollisions={!!children}
+        className="noflow nowheel nopan nodelete nodrag p-0"
+        style={
+          children
+            ? {}
+            : { minWidth: refButton?.current?.clientWidth ?? "200px" }
+        }
+      >
+        <Command>
+          {renderSearchInput()}
+          {renderOptionsList()}
+        </Command>
+      </PopoverContentDropdown>
+    </Popover>
   );
 }
diff --git a/src/frontend/src/components/promptComponent/index.tsx b/src/frontend/src/components/promptComponent/index.tsx
index 3d3ed8084..9d577ed1e 100644
--- a/src/frontend/src/components/promptComponent/index.tsx
+++ b/src/frontend/src/components/promptComponent/index.tsx
@@ -1,6 +1,7 @@
 import PromptModal from "@/modals/promptModal";
 import { useEffect } from "react";
 import { PromptAreaComponentType } from "../../types/components";
+import { cn } from "../../utils/utils";
 import IconComponent from "../genericIconComponent";
 import { Button } from "../ui/button";
 
@@ -21,8 +22,38 @@ export default function PromptAreaComponent({
     }
   }, [disabled]);
 
+  const renderPromptText = () => (
+    <span
+      id={id}
+      data-testid={id}
+      className={cn(
+        editNode
+          ? "input-edit-node input-dialog"
+          : "primary-input text-muted-foreground",
+        disabled && !editNode && "input-disable text-ring",
+      )}
+    >
+      {value !== "" ? value : "Type your prompt here..."}
+    </span>
+  );
+
+  const renderExternalLinkIcon = () => {
+    if (editNode) return null;
+
+    return (
+      <IconComponent
+        id={id}
+        name="ExternalLink"
+        className={cn(
+          "icons-parameters-comp shrink-0",
+          disabled ? "text-ring" : "hover:text-accent-foreground",
+        )}
+      />
+    );
+  };
+
   return (
-    <div className={disabled ? "pointer-events-none w-full" : "w-full"}>
+    <div className={cn("w-full", disabled && "pointer-events-none")}>
       <PromptModal
         id={id}
         field_name={field_name}
@@ -34,28 +65,8 @@ export default function PromptAreaComponent({
       >
         <Button unstyled className="w-full">
           <div className="flex w-full items-center gap-3">
-            <span
-              id={id}
-              data-testid={id}
-              className={
-                editNode
-                  ? "input-edit-node input-dialog"
-                  : (disabled ? "input-disable text-ring " : "") +
-                    " primary-input text-muted-foreground"
-              }
-            >
-              {value !== "" ? value : "Type your prompt here..."}
-            </span>
-            {!editNode && (
-              <IconComponent
-                id={id}
-                name="ExternalLink"
-                className={
-                  "icons-parameters-comp shrink-0" +
-                  (disabled ? " text-ring" : " hover:text-accent-foreground")
-                }
-              />
-            )}
+            {renderPromptText()}
+            {renderExternalLinkIcon()}
           </div>
         </Button>
       </PromptModal>
diff --git a/src/frontend/src/components/textAreaComponent/index.tsx b/src/frontend/src/components/textAreaComponent/index.tsx
index 9999d624d..b4e749753 100644
--- a/src/frontend/src/components/textAreaComponent/index.tsx
+++ b/src/frontend/src/components/textAreaComponent/index.tsx
@@ -22,107 +22,117 @@ export default function TextAreaComponent({
     }
   }, [disabled]);
 
-  return (
-    <div className={"flex w-full items-center" + (disabled ? "" : "")}>
-      <div className="flex w-full items-center gap-3" data-testid={"div-" + id}>
-        <Textarea
-          id={id}
-          data-testid={id}
-          value={value}
-          disabled={disabled}
-          className={classNames(
-            password !== undefined && password && value !== ""
-              ? "text-clip password"
-              : "",
-            editNode ? "input-edit-node" : "",
-            password != undefined ? "pr-8" : "",
-            "w-full",
-            "resize-none",
-          )}
-          rows={1}
-          placeholder={"Type something..."}
-          onChange={(event) => {
-            onChange(event.target.value);
-          }}
-        />
-        <ComponentTextModal
-          changeVisibility={updateVisibility}
-          value={value}
-          setValue={(value: string) => {
-            onChange(value);
-          }}
-          disabled={disabled}
-          password={password}
-        >
-          <div
-            className={
-              "flex items-center" + (password ? "relative left-6" : "")
-            }
-          >
-            <Button unstyled>
-              <IconComponent
-                strokeWidth={1.5}
-                id={id}
-                name="ExternalLink"
-                className={
-                  "icons-parameters-comp shrink-0" +
-                  (disabled ? " text-ring" : " hover:text-accent-foreground")
-                }
-              />
-            </Button>
-          </div>
-        </ComponentTextModal>
-        {password !== undefined && (
-          <Button
-            unstyled
-            tabIndex={-1}
-            className={classNames(
-              "mb-px text-muted-foreground hover:text-current",
-              editNode
-                ? "side-bar-button-size absolute bottom-[1.3rem] right-[4.2rem]"
-                : "side-bar-button-size absolute bottom-4 right-[4.2rem]",
-            )}
-            onClick={(event) => {
-              event.preventDefault();
-              if (updateVisibility) updateVisibility();
-            }}
-          >
-            {password ? (
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                fill="none"
-                viewBox="0 0 24 24"
-                strokeWidth={1.5}
-                stroke="currentColor"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"
-                />
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
-                />
-              </svg>
-            ) : (
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                fill="none"
-                viewBox="0 0 24 24"
-                strokeWidth={1.5}
-                stroke="currentColor"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88"
-                />
-              </svg>
-            )}
-          </Button>
+  const renderTextarea = () => (
+    <Textarea
+      id={id}
+      data-testid={id}
+      value={value}
+      disabled={disabled}
+      className={classNames(
+        "w-full resize-none",
+        password !== undefined && password && value !== ""
+          ? "text-clip password"
+          : "",
+        editNode ? "input-edit-node" : "",
+        password !== undefined ? "pr-8" : "",
+      )}
+      rows={1}
+      placeholder="Type something..."
+      onChange={(event) => onChange(event.target.value)}
+    />
+  );
+
+  const renderExternalLinkButton = () => (
+    <ComponentTextModal
+      changeVisibility={updateVisibility}
+      value={value}
+      setValue={(value) => onChange(value)}
+      disabled={disabled}
+      password={password}
+    >
+      <div
+        className={classNames(
+          "flex items-center",
+          password ? "relative left-6" : "",
         )}
+      >
+        <Button unstyled>
+          <IconComponent
+            strokeWidth={1.5}
+            id={id}
+            name="ExternalLink"
+            className={classNames(
+              "icons-parameters-comp shrink-0",
+              disabled ? "text-ring" : "hover:text-accent-foreground",
+            )}
+          />
+        </Button>
+      </div>
+    </ComponentTextModal>
+  );
+
+  const renderPasswordToggle = () => {
+    if (password === undefined) return null;
+
+    return (
+      <Button
+        unstyled
+        tabIndex={-1}
+        className={classNames(
+          "side-bar-button-size absolute mb-px text-muted-foreground hover:text-current",
+          editNode
+            ? "bottom-[1.3rem] right-[4.2rem]"
+            : "bottom-4 right-[4.2rem]",
+        )}
+        onClick={(event) => {
+          event.preventDefault();
+          if (updateVisibility) updateVisibility();
+        }}
+      >
+        {password ? (
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            strokeWidth={1.5}
+            stroke="currentColor"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"
+            />
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+            />
+          </svg>
+        ) : (
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            strokeWidth={1.5}
+            stroke="currentColor"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88"
+            />
+          </svg>
+        )}
+      </Button>
+    );
+  };
+
+  return (
+    <div className={classNames("flex w-full items-center", disabled ? "" : "")}>
+      <div className="flex w-full items-center gap-3" data-testid={`div-${id}`}>
+        {renderTextarea()}
+        {renderExternalLinkButton()}
+        {renderPasswordToggle()}
       </div>
     </div>
   );
diff --git a/src/frontend/src/components/ui/rename-label.tsx b/src/frontend/src/components/ui/rename-label.tsx
index 32107109a..6eb304e92 100644
--- a/src/frontend/src/components/ui/rename-label.tsx
+++ b/src/frontend/src/components/ui/rename-label.tsx
@@ -1,24 +1,30 @@
 import { useEffect, useRef, useState } from "react";
 import { cn } from "../../utils/utils";
 
-export default function RenameLabel(props) {
+export default function RenameLabel({
+  value,
+  setValue,
+  className,
+  rename,
+  setRename,
+}) {
   const [internalState, setInternalState] = useState(false);
-  const [isRename, setIsRename] = props.rename
-    ? [props.rename, props.setRename]
+  const [componentValue, setComponentValue] = useState(value);
+  const [isRename, setIsRename] = rename
+    ? [rename, setRename]
     : [internalState, setInternalState];
 
   useEffect(() => {
-    if (props.value) setMyValue(props.value);
-  }, [props.value]);
+    if (value) setComponentValue(value);
+  }, [value]);
 
-  const [myValue, setMyValue] = useState(props.value);
   useEffect(() => {
     if (isRename) {
-      setMyValue(props.value);
+      setComponentValue(value);
       document.addEventListener("keydown", (event) => {
         if (event.key === "Escape") {
           setIsRename(false);
-          props.setValue("");
+          setValue("");
         }
       });
       if (inputRef.current) {
@@ -52,41 +58,47 @@ export default function RenameLabel(props) {
       input.style.width = `${textWidth + 16}px`;
     }
   };
-  return (
-    <div>
-      {isRename ? (
-        <input
-          autoFocus
-          ref={inputRef}
-          onInput={resizeInput}
-          className={cn(
-            "nopan nodelete nodrag noflow rounded-md bg-transparent px-2 outline-ring hover:outline focus:border-none focus:outline active:outline",
-            props.className,
-          )}
-          onBlur={() => {
-            setIsRename(false);
-            if (props.value !== "") {
-              props.setValue(myValue);
-            }
-          }}
-          value={myValue}
-          onChange={(event) => {
-            setMyValue(event.target.value);
-          }}
-        />
-      ) : (
-        <div className="flex items-center gap-2">
-          <span
-            className={cn("truncate px-2 text-left", props.className)}
-            onDoubleClick={() => {
-              setIsRename(true);
-              setMyValue(props.value);
-            }}
-          >
-            {props.value}
-          </span>
-        </div>
+
+  const handleBlur = () => {
+    setIsRename(false);
+    if (componentValue !== "") {
+      setValue(componentValue);
+    }
+  };
+
+  const handleChange = (event) => {
+    setComponentValue(event.target.value);
+  };
+
+  const handleDoubleClick = () => {
+    setIsRename(true);
+    setComponentValue(value);
+  };
+
+  const renderInput = () => (
+    <input
+      ref={inputRef}
+      onInput={resizeInput}
+      className={cn(
+        "nopan nodelete nodrag noflow rounded-md bg-transparent px-2 outline-ring hover:outline focus:border-none focus:outline active:outline",
+        className,
       )}
+      onBlur={handleBlur}
+      value={componentValue}
+      onChange={handleChange}
+    />
+  );
+
+  const renderSpan = () => (
+    <div className="flex items-center gap-2">
+      <span
+        className={cn("truncate px-2 text-left", className)}
+        onDoubleClick={handleDoubleClick}
+      >
+        {value}
+      </span>
     </div>
   );
+
+  return <div>{isRename ? renderInput() : renderSpan()}</div>;
 }
diff --git a/src/frontend/src/modals/dictAreaModal/index.tsx b/src/frontend/src/modals/dictAreaModal/index.tsx
index cfb040c92..b0499e7a8 100644
--- a/src/frontend/src/modals/dictAreaModal/index.tsx
+++ b/src/frontend/src/modals/dictAreaModal/index.tsx
@@ -27,58 +27,68 @@ export default function DictAreaModal({
 }): JSX.Element {
   const [open, setOpen] = useState(false);
   const isDark = useDarkStore((state) => state.dark);
-  const [myValue, setMyValue] = useState(value);
+  const [componentValue, setComponentValue] = useState(value);
 
   useEffect(() => {
-    setMyValue(value);
+    setComponentValue(value);
   }, [value, open]);
 
+  const handleSubmit = () => {
+    if (onChange) {
+      onChange(componentValue);
+      setOpen(false);
+    }
+  };
+
+  const handleJsonChange = (edit) => {
+    setComponentValue(edit.src);
+  };
+
+  const customizeCopy = (copy) => {
+    navigator.clipboard.writeText(JSON.stringify(copy));
+  };
+
+  const renderHeader = () => (
+    <BaseModal.Header description={onChange ? CODE_DICT_DIALOG_SUBTITLE : null}>
+      <span className="pr-2">
+        {onChange ? "Edit Dictionary" : "View Dictionary"}
+      </span>
+      <IconComponent
+        name="BookMarked"
+        className="h-6 w-6 pl-1 text-primary"
+        aria-hidden="true"
+      />
+    </BaseModal.Header>
+  );
+
+  const renderContent = () => (
+    <BaseModal.Content>
+      <div className="flex h-full w-full flex-col transition-all">
+        <JsonView
+          theme="vscode"
+          dark={isDark}
+          className={!isDark ? "json-view-white" : "json-view-dark"}
+          editable={!!onChange}
+          enableClipboard
+          onChange={handleJsonChange}
+          src={cloneDeep(componentValue)}
+          customizeCopy={customizeCopy}
+        />
+      </div>
+    </BaseModal.Content>
+  );
+
   return (
     <BaseModal
       size="medium-h-full"
       open={open}
       disable={disabled}
       setOpen={setOpen}
-      onSubmit={
-        onChange
-          ? () => {
-              onChange(myValue);
-              setOpen(false);
-            }
-          : undefined
-      }
+      onSubmit={onChange ? handleSubmit : undefined}
     >
       <BaseModal.Trigger className="h-full">{children}</BaseModal.Trigger>
-      <BaseModal.Header
-        description={onChange ? CODE_DICT_DIALOG_SUBTITLE : null}
-      >
-        <span className="pr-2">
-          {onChange ? "Edit Dictionary" : "View Dictionary"}
-        </span>
-        <IconComponent
-          name="BookMarked"
-          className="h-6 w-6 pl-1 text-primary"
-          aria-hidden="true"
-        />
-      </BaseModal.Header>
-      <BaseModal.Content>
-        <div className="flex h-full w-full flex-col transition-all">
-          <JsonView
-            theme="vscode"
-            dark={isDark}
-            className={!isDark ? "json-view-white" : "json-view-dark"}
-            editable={!!onChange}
-            enableClipboard
-            onChange={(edit) => {
-              setMyValue(edit.src);
-            }}
-            src={cloneDeep(myValue)}
-            customizeCopy={(copy) => {
-              navigator.clipboard.writeText(JSON.stringify(copy));
-            }}
-          />
-        </div>
-      </BaseModal.Content>
+      {renderHeader()}
+      {renderContent()}
       <BaseModal.Footer submit={onChange ? { label: "Save" } : undefined} />
     </BaseModal>
   );
diff --git a/src/frontend/tests/end-to-end/auto-login-off.spec.ts b/src/frontend/tests/end-to-end/auto-login-off.spec.ts
index 8f88bf8e9..878066e34 100644
--- a/src/frontend/tests/end-to-end/auto-login-off.spec.ts
+++ b/src/frontend/tests/end-to-end/auto-login-off.spec.ts
@@ -217,6 +217,8 @@ test("when auto_login is false, admin can CRUD user's and should see just your o
     timeout: 30000,
   });
 
+  await page.waitForTimeout(1000);
+
   expect(
     await page.getByText(secondRandomFlowName, { exact: true }).isVisible(),
   ).toBe(true);