diff --git a/src/frontend/package-lock.json b/src/frontend/package-lock.json
index 374236168..b1807d37e 100644
--- a/src/frontend/package-lock.json
+++ b/src/frontend/package-lock.json
@@ -13,6 +13,8 @@
                 "@headlessui/react": "^1.7.10",
                 "@heroicons/react": "^2.0.15",
                 "@mui/material": "^5.11.9",
+                "@radix-ui/react-label": "^2.0.2",
+                "@radix-ui/react-switch": "^1.0.3",
                 "@tabler/icons-react": "^2.18.0",
                 "@tailwindcss/forms": "^0.5.3",
                 "@tailwindcss/line-clamp": "^0.4.4",
@@ -1274,6 +1276,228 @@
                 "url": "https://opencollective.com/popperjs"
             }
         },
+        "node_modules/@radix-ui/primitive": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.0.1.tgz",
+            "integrity": "sha512-yQ8oGX2GVsEYMWGxcovu1uGWPCxV5BFfeeYxqPmuAzUyLT9qmaMXSAhXpb0WrspIeqYzdJpkh2vHModJPgRIaw==",
+            "dependencies": {
+                "@babel/runtime": "^7.13.10"
+            }
+        },
+        "node_modules/@radix-ui/react-compose-refs": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz",
+            "integrity": "sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==",
+            "dependencies": {
+                "@babel/runtime": "^7.13.10"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-context": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.0.1.tgz",
+            "integrity": "sha512-ebbrdFoYTcuZ0v4wG5tedGnp9tzcV8awzsxYph7gXUyvnNLuTIcCk1q17JEbnVhXAKG9oX3KtchwiMIAYp9NLg==",
+            "dependencies": {
+                "@babel/runtime": "^7.13.10"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-label": {
+            "version": "2.0.2",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-label/-/react-label-2.0.2.tgz",
+            "integrity": "sha512-N5ehvlM7qoTLx7nWPodsPYPgMzA5WM8zZChQg8nyFJKnDO5WHdba1vv5/H6IO5LtJMfD2Q3wh1qHFGNtK0w3bQ==",
+            "dependencies": {
+                "@babel/runtime": "^7.13.10",
+                "@radix-ui/react-primitive": "1.0.3"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "@types/react-dom": "*",
+                "react": "^16.8 || ^17.0 || ^18.0",
+                "react-dom": "^16.8 || ^17.0 || ^18.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "@types/react-dom": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-primitive": {
+            "version": "1.0.3",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.3.tgz",
+            "integrity": "sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==",
+            "dependencies": {
+                "@babel/runtime": "^7.13.10",
+                "@radix-ui/react-slot": "1.0.2"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "@types/react-dom": "*",
+                "react": "^16.8 || ^17.0 || ^18.0",
+                "react-dom": "^16.8 || ^17.0 || ^18.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "@types/react-dom": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-slot": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.2.tgz",
+            "integrity": "sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==",
+            "dependencies": {
+                "@babel/runtime": "^7.13.10",
+                "@radix-ui/react-compose-refs": "1.0.1"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-switch": {
+            "version": "1.0.3",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-switch/-/react-switch-1.0.3.tgz",
+            "integrity": "sha512-mxm87F88HyHztsI7N+ZUmEoARGkC22YVW5CaC+Byc+HRpuvCrOBPTAnXgf+tZ/7i0Sg/eOePGdMhUKhPaQEqow==",
+            "dependencies": {
+                "@babel/runtime": "^7.13.10",
+                "@radix-ui/primitive": "1.0.1",
+                "@radix-ui/react-compose-refs": "1.0.1",
+                "@radix-ui/react-context": "1.0.1",
+                "@radix-ui/react-primitive": "1.0.3",
+                "@radix-ui/react-use-controllable-state": "1.0.1",
+                "@radix-ui/react-use-previous": "1.0.1",
+                "@radix-ui/react-use-size": "1.0.1"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "@types/react-dom": "*",
+                "react": "^16.8 || ^17.0 || ^18.0",
+                "react-dom": "^16.8 || ^17.0 || ^18.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "@types/react-dom": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-use-callback-ref": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz",
+            "integrity": "sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==",
+            "dependencies": {
+                "@babel/runtime": "^7.13.10"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-use-controllable-state": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.0.1.tgz",
+            "integrity": "sha512-Svl5GY5FQeN758fWKrjM6Qb7asvXeiZltlT4U2gVfl8Gx5UAv2sMR0LWo8yhsIZh2oQ0eFdZ59aoOOMV7b47VA==",
+            "dependencies": {
+                "@babel/runtime": "^7.13.10",
+                "@radix-ui/react-use-callback-ref": "1.0.1"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-use-layout-effect": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.1.tgz",
+            "integrity": "sha512-v/5RegiJWYdoCvMnITBkNNx6bCj20fiaJnWtRkU18yITptraXjffz5Qbn05uOiQnOvi+dbkznkoaMltz1GnszQ==",
+            "dependencies": {
+                "@babel/runtime": "^7.13.10"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-use-previous": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-1.0.1.tgz",
+            "integrity": "sha512-cV5La9DPwiQ7S0gf/0qiD6YgNqM5Fk97Kdrlc5yBcrF3jyEZQwm7vYFqMo4IfeHgJXsRaMvLABFtd0OVEmZhDw==",
+            "dependencies": {
+                "@babel/runtime": "^7.13.10"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-use-size": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.0.1.tgz",
+            "integrity": "sha512-ibay+VqrgcaI6veAojjofPATwledXiSmX+C0KrBk/xgpX9rBzPV3OsfwlhQdUOFbh+LKQorLYT+xTXW9V8yd0g==",
+            "dependencies": {
+                "@babel/runtime": "^7.13.10",
+                "@radix-ui/react-use-layout-effect": "1.0.1"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/@reactflow/background": {
             "version": "11.1.7",
             "resolved": "https://registry.npmjs.org/@reactflow/background/-/background-11.1.7.tgz",
@@ -2422,7 +2646,7 @@
             "version": "18.2.4",
             "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.4.tgz",
             "integrity": "sha512-G2mHoTMTL4yoydITgOGwWdWMVd8sNgyEP85xVmMKAPUBwQWm9wBPQUmvbeF4V3WBY1P7mmL4BkjQ0SqUpf1snw==",
-            "dev": true,
+            "devOptional": true,
             "dependencies": {
                 "@types/react": "*"
             }
diff --git a/src/frontend/package.json b/src/frontend/package.json
index bd846ce19..4aa0336e8 100644
--- a/src/frontend/package.json
+++ b/src/frontend/package.json
@@ -8,6 +8,8 @@
         "@headlessui/react": "^1.7.10",
         "@heroicons/react": "^2.0.15",
         "@mui/material": "^5.11.9",
+        "@radix-ui/react-label": "^2.0.2",
+        "@radix-ui/react-switch": "^1.0.3",
         "@tabler/icons-react": "^2.18.0",
         "@tailwindcss/forms": "^0.5.3",
         "@tailwindcss/line-clamp": "^0.4.4",
diff --git a/src/frontend/src/components/toggleShadComponent/index.tsx b/src/frontend/src/components/toggleShadComponent/index.tsx
new file mode 100644
index 000000000..6759c19ed
--- /dev/null
+++ b/src/frontend/src/components/toggleShadComponent/index.tsx
@@ -0,0 +1,27 @@
+import { classNames } from "../../utils";
+import { useEffect } from "react";
+import { ToggleComponentType } from "../../types/components";
+import { Switch } from "../ui/switch";
+
+export default function ToggleShadComponent({
+  enabled,
+  setEnabled,
+  disabled,
+}: ToggleComponentType) {
+  useEffect(() => {
+    if (disabled) {
+      setEnabled(false);
+    }
+  }, [disabled, setEnabled]);
+  return (
+    <div className={disabled ? "pointer-events-none cursor-not-allowed" : ""}>
+      <Switch
+        checked={enabled}
+        onCheckedChange={(x: boolean) => {
+          setEnabled(x);
+        }}
+      >
+      </Switch>
+    </div>
+  );
+}
diff --git a/src/frontend/src/components/ui/label.tsx b/src/frontend/src/components/ui/label.tsx
new file mode 100644
index 000000000..d6578bf64
--- /dev/null
+++ b/src/frontend/src/components/ui/label.tsx
@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "../../utils"
+
+
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+)
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+))
+Label.displayName = LabelPrimitive.Root.displayName
+
+export { Label }
diff --git a/src/frontend/src/components/ui/switch.tsx b/src/frontend/src/components/ui/switch.tsx
new file mode 100644
index 000000000..9c28fa50a
--- /dev/null
+++ b/src/frontend/src/components/ui/switch.tsx
@@ -0,0 +1,29 @@
+"use client"
+
+import * as React from "react"
+import * as SwitchPrimitives from "@radix-ui/react-switch"
+import { cn } from "../../utils"
+
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      "peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      className
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
+      )}
+    />
+  </SwitchPrimitives.Root>
+))
+Switch.displayName = SwitchPrimitives.Root.displayName
+
+export { Switch }
diff --git a/src/frontend/src/components/ui/table.tsx b/src/frontend/src/components/ui/table.tsx
index d41309e8b..f08ce3f6b 100644
--- a/src/frontend/src/components/ui/table.tsx
+++ b/src/frontend/src/components/ui/table.tsx
@@ -1,5 +1,5 @@
 import * as React from "react";
-import { cn } from "./lib/utils";
+import { cn } from "../../utils";
 
 const Table = React.forwardRef<
   HTMLTableElement,
diff --git a/src/frontend/src/modals/EditNodeModal/index.tsx b/src/frontend/src/modals/EditNodeModal/index.tsx
index 62232321c..e7ed0a094 100644
--- a/src/frontend/src/modals/EditNodeModal/index.tsx
+++ b/src/frontend/src/modals/EditNodeModal/index.tsx
@@ -1,4 +1,4 @@
-import { Dialog, Switch, Transition } from "@headlessui/react";
+import { Dialog, Transition } from "@headlessui/react";
 import {
   ChevronDoubleLeftIcon,
   ChevronDoubleRightIcon,
@@ -19,57 +19,17 @@ import {
   TableHeader,
   TableRow,
 } from "../../components/ui/table";
+import { Switch } from "../../components/ui/switch";
+import ToggleShadComponent from "../../components/toggleShadComponent";
+
 
-const invoices = [
-  {
-    invoice: "INV001",
-    paymentStatus: "Paid",
-    totalAmount: "$250.00",
-    paymentMethod: "Credit Card",
-  },
-  {
-    invoice: "INV002",
-    paymentStatus: "Pending",
-    totalAmount: "$150.00",
-    paymentMethod: "PayPal",
-  },
-  {
-    invoice: "INV003",
-    paymentStatus: "Unpaid",
-    totalAmount: "$350.00",
-    paymentMethod: "Bank Transfer",
-  },
-  {
-    invoice: "INV004",
-    paymentStatus: "Paid",
-    totalAmount: "$450.00",
-    paymentMethod: "Credit Card",
-  },
-  {
-    invoice: "INV005",
-    paymentStatus: "Paid",
-    totalAmount: "$550.00",
-    paymentMethod: "PayPal",
-  },
-  {
-    invoice: "INV006",
-    paymentStatus: "Pending",
-    totalAmount: "$200.00",
-    paymentMethod: "Bank Transfer",
-  },
-  {
-    invoice: "INV007",
-    paymentStatus: "Unpaid",
-    totalAmount: "$300.00",
-    paymentMethod: "Credit Card",
-  },
-];
 
 export default function EditNodeModal({ data }: { data: NodeDataType }) {
   const [open, setOpen] = useState(true);
   const { closePopUp } = useContext(PopUpContext);
   const { types } = useContext(typesContext);
   const ref = useRef();
+
   function setModalOpen(x: boolean) {
     setOpen(x);
     if (x === false) {
@@ -78,44 +38,16 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
       }, 300);
     }
   }
-  const [advanced, setAdvanced] = useState([]);
-  const [parameters, setParameters] = useState([]);
-  const [enabled, setEnabled] = useState(false);
 
-  const updateAdvancedParameters = () => {
-    setAdvanced(
-      Object.keys(data.node.template).filter(
-        (t) =>
-          t.charAt(0) !== "_" &&
-          data.node.template[t].advanced &&
-          data.node.template[t].show
-      )
-    );
-    setParameters(
-      Object.keys(data.node.template).filter(
-        (t) =>
-          t.charAt(0) !== "_" &&
-          !data.node.template[t].advanced &&
-          data.node.template[t].show &&
-          (data.node.template[t].type === "str" ||
-            data.node.template[t].type === "bool" ||
-            data.node.template[t].type === "float" ||
-            data.node.template[t].type === "code" ||
-            data.node.template[t].type === "prompt" ||
-            data.node.template[t].type === "file" ||
-            data.node.template[t].type === "Any" ||
-            data.node.template[t].type === "int")
-      )
-    );
-  };
+  function changeAdvanced(node): void{
+    Object.keys(data.node.template).filter((n, i) => {
+      if (n === node.name) {
+        data.node.template[n].advanced = !data.node.template[n].advanced;
+      }
+      return true;
+    });
+  }
 
-  useEffect(() => {
-    updateAdvancedParameters();
-  }, [data.node.template]);
-
-  console.log("DATA", data.node.template);
-
-  const Icon = nodeIcons[types[data.type]];
   return (
     <Transition.Root show={open} appear={true} as={Fragment}>
       <Dialog
@@ -185,127 +117,70 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
                           Object.keys(data.node.template).filter(
                             (t) =>
                               t.charAt(0) !== "_" &&
-                              data.node.template[t].advanced &&
-                              data.node.template[t].show
-                          ).length > limitScrollFieldsModal ||
-                            Object.keys(data.node.template).filter(
-                              (t) =>
-                                t.charAt(0) !== "_" &&
-                                !data.node.template[t].advanced &&
-                                data.node.template[t].show
-                            ).length > limitScrollFieldsModal
+                              data.node.template[t].show &&
+                              (data.node.template[t].type === "str" ||
+                                data.node.template[t].type === "bool" ||
+                                data.node.template[t].type === "float" ||
+                                data.node.template[t].type === "code" ||
+                                data.node.template[t].type === "prompt" ||
+                                data.node.template[t].type === "file" ||
+                                data.node.template[t].type === "Any" ||
+                                data.node.template[t].type === "int")
+                          ).length > limitScrollFieldsModal
                             ? "overflow-scroll overflow-x-hidden custom-scroll h-fit"
                             : "overflow-hidden h-fit"
                         )}
                       >
                         <div className="flex flex-col h-full gap-5 h-fit	">
                           <Table>
-                            <TableCaption>
-                              A list of your recent invoices.
-                            </TableCaption>
                             <TableHeader>
                               <TableRow>
-                                <TableHead className="w-[100px]">
-                                  Invoice
-                                </TableHead>
-                                <TableHead>Status</TableHead>
-                                <TableHead>Method</TableHead>
-                                <TableHead className="text-right">
-                                  Amount
+                                <TableHead className="w-[80px]">
+                                  Param
                                 </TableHead>
+                                <TableHead>Value</TableHead>
+                                <TableHead>Show</TableHead>
                               </TableRow>
                             </TableHeader>
                             <TableBody>
-                              {invoices.map((invoice) => (
-                                <TableRow key={invoice.invoice}>
+                            { Object.keys(data.node.template).filter(
+                                  (t) =>
+                                    t.charAt(0) !== "_" &&
+                                    data.node.template[t].show &&
+                                    (data.node.template[t].type === "str" ||
+                                      data.node.template[t].type === "bool" ||
+                                      data.node.template[t].type === "float" ||
+                                      data.node.template[t].type === "code" ||
+                                      data.node.template[t].type === "prompt" ||
+                                      data.node.template[t].type === "file" ||
+                                      data.node.template[t].type === "Any" ||
+                                      data.node.template[t].type === "int")
+                                )
+                                .map((n, i) => (
+                                <TableRow key={i}>
                                   <TableCell className="font-medium">
-                                    {invoice.invoice}
+                                  {data.node.template[n].name
+                                        ? data.node.template[n].name
+                                        : data.node.template[n].display_name}
                                   </TableCell>
-                                  <TableCell>{invoice.paymentStatus}</TableCell>
-                                  <TableCell>{invoice.paymentMethod}</TableCell>
-                                  <TableCell className="text-right">
-                                    {invoice.totalAmount}
+                                  <TableCell>
+                                  {data.node.template[n].value
+                                        ? data.node.template[n].value
+                                        : "-"}
+                                  </TableCell>
+                                  <TableCell>
+
+                                  <div className="flex items-center space-x-2">
+                                  <ToggleShadComponent 
+                                  enabled={data.node.template[n].advanced}
+                                  setEnabled={(e) => changeAdvanced(data.node.template[n])}
+                                  disabled={false} />
+                                </div>
                                   </TableCell>
                                 </TableRow>
                               ))}
                             </TableBody>
                           </Table>
-
-                          <table className="min-w-full divide-y divide-gray-300">
-                            <thead className="bg-gray-50">
-                              <tr>
-                                <th
-                                  scope="col"
-                                  className="py-1 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6"
-                                >
-                                  Param
-                                </th>
-                                <th
-                                  scope="col"
-                                  className="px-3 py-1 text-left text-sm font-semibold text-gray-900"
-                                >
-                                  Value
-                                </th>
-                                <th
-                                  scope="col"
-                                  className="px-3 py-1 text-left text-sm font-semibold text-gray-900"
-                                >
-                                  Show
-                                </th>
-                              </tr>
-                            </thead>
-                            <tbody className="divide-y divide-gray-200 bg-white">
-                              {Object.keys(data.node.template)
-                                .filter((t) => t.charAt(0) !== "_")
-                                .map((n, i) => (
-                                  <tr key={i}>
-                                    <td className="whitespace-nowrap py-1 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6">
-                                      {data.node.template[n].name
-                                        ? data.node.template[n].name
-                                        : data.node.template[n].display_name}
-                                    </td>
-                                    <td className="whitespace-nowrap px-3 py-1 text-sm text-gray-500">
-                                      {data.node.template[n].value
-                                        ? data.node.template[n].value
-                                        : "-"}
-                                    </td>
-                                    <td className="whitespace-nowrap px-3 py-1 text-sm text-gray-500">
-                                      <Switch
-                                        checked={enabled}
-                                        onChange={setEnabled}
-                                        className="group relative inline-flex h-5 w-10 flex-shrink-0 cursor-pointer items-center justify-center rounded-full focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2"
-                                      >
-                                        <span className="sr-only">
-                                          Use setting
-                                        </span>
-                                        <span
-                                          aria-hidden="true"
-                                          className="pointer-events-none absolute h-full w-full rounded-md bg-white"
-                                        />
-                                        <span
-                                          aria-hidden="true"
-                                          className={classNames(
-                                            enabled
-                                              ? "bg-indigo-600"
-                                              : "bg-gray-200",
-                                            "pointer-events-none absolute mx-auto h-4 w-9 rounded-full transition-colors duration-200 ease-in-out"
-                                          )}
-                                        />
-                                        <span
-                                          aria-hidden="true"
-                                          className={classNames(
-                                            enabled
-                                              ? "translate-x-5"
-                                              : "translate-x-0",
-                                            "pointer-events-none absolute left-0 inline-block h-5 w-5 transform rounded-full border border-gray-200 bg-white shadow ring-0 transition-transform duration-200 ease-in-out"
-                                          )}
-                                        />
-                                      </Switch>
-                                    </td>
-                                  </tr>
-                                ))}
-                            </tbody>
-                          </table>
                         </div>
                       </div>
                     </div>
diff --git a/src/frontend/src/utils.ts b/src/frontend/src/utils.ts
index 559080f3f..1db2669c8 100644
--- a/src/frontend/src/utils.ts
+++ b/src/frontend/src/utils.ts
@@ -47,6 +47,12 @@ import { WolframIcon } from "./icons/Wolfram";
 import { WordIcon } from "./icons/Word";
 import { SerperIcon } from "./icons/Serper";
 import { v4 as uuidv4 } from "uuid";
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+ 
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
 
 export function classNames(...classes: Array<string>) {
   return classes.filter(Boolean).join(" ");
@@ -631,4 +637,5 @@ export function updateIds(newFlow, getNodeId) {
       e.target +
       e.targetHandle;
   });
+  
 }
diff --git a/src/frontend/tsconfig.json b/src/frontend/tsconfig.json
index f370e332b..3a05105de 100644
--- a/src/frontend/tsconfig.json
+++ b/src/frontend/tsconfig.json
@@ -1,9 +1,5 @@
 {
   "compilerOptions": {
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["./*"]
-    },
     "target": "es5",
     "lib": [
       "dom",