diff --git a/src/backend/base/langflow/__main__.py b/src/backend/base/langflow/__main__.py
index cbfe65d96f35..8ef351b88ab6 100644
--- a/src/backend/base/langflow/__main__.py
+++ b/src/backend/base/langflow/__main__.py
@@ -156,6 +156,11 @@ def run(
         help="Defines the maximum file size for the upload in MB.",
         show_default=False,
     ),
+    webhook_polling_interval: int | None = typer.Option(  # noqa: ARG001
+        None,
+        help="Defines the polling interval for the webhook.",
+        show_default=False,
+    ),
 ) -> None:
     """Run Langflow."""
     # Register SIGTERM handler
diff --git a/src/backend/base/langflow/api/v1/schemas.py b/src/backend/base/langflow/api/v1/schemas.py
index 0d90d12df930..3c9e72903021 100644
--- a/src/backend/base/langflow/api/v1/schemas.py
+++ b/src/backend/base/langflow/api/v1/schemas.py
@@ -376,3 +376,4 @@ class ConfigResponse(BaseModel):
     auto_saving_interval: int
     health_check_max_retries: int
     max_file_size_upload: int
+    webhook_polling_interval: int
diff --git a/src/backend/base/langflow/base/constants.py b/src/backend/base/langflow/base/constants.py
index 3e2f2f6c75a1..4e9988cd8c5b 100644
--- a/src/backend/base/langflow/base/constants.py
+++ b/src/backend/base/langflow/base/constants.py
@@ -38,6 +38,7 @@
     "refresh_button_text",
     "options",
     "advanced",
+    "copy_field",
 ]
 
 ORJSON_OPTIONS = orjson.OPT_INDENT_2 | orjson.OPT_SORT_KEYS | orjson.OPT_OMIT_MICROSECONDS
diff --git a/src/backend/base/langflow/components/data/webhook.py b/src/backend/base/langflow/components/data/webhook.py
index 537836c66ace..e4860fd1c251 100644
--- a/src/backend/base/langflow/components/data/webhook.py
+++ b/src/backend/base/langflow/components/data/webhook.py
@@ -7,7 +7,6 @@
 
 class WebhookComponent(Component):
     display_name = "Webhook"
-    description = "Defines a webhook input for the flow."
     name = "Webhook"
     icon = "webhook"
 
@@ -16,7 +15,23 @@ class WebhookComponent(Component):
             name="data",
             display_name="Payload",
             info="Receives a payload from external systems via HTTP POST.",
-        )
+            advanced=True,
+        ),
+        MultilineInput(
+            name="curl",
+            display_name="cURL",
+            value="CURL_WEBHOOK",
+            advanced=True,
+            input_types=[],
+        ),
+        MultilineInput(
+            name="endpoint",
+            display_name="Endpoint",
+            value="BACKEND_URL",
+            advanced=False,
+            copy_field=True,
+            input_types=[],
+        ),
     ]
     outputs = [
         Output(display_name="Data", name="output_data", method="build_data"),
diff --git a/src/backend/base/langflow/graph/graph/base.py b/src/backend/base/langflow/graph/graph/base.py
index f7b3eec89414..6b65fe49ccd7 100644
--- a/src/backend/base/langflow/graph/graph/base.py
+++ b/src/backend/base/langflow/graph/graph/base.py
@@ -31,6 +31,7 @@
     should_continue,
 )
 from langflow.graph.schema import InterfaceComponentTypes, RunOutputs
+from langflow.graph.utils import log_vertex_build
 from langflow.graph.vertex.base import Vertex, VertexStates
 from langflow.graph.vertex.schema import NodeData, NodeTypeEnum
 from langflow.graph.vertex.vertex_types import ComponentVertex, InterfaceVertex, StateVertex
@@ -1596,6 +1597,15 @@ async def _execute_tasks(self, tasks: list[asyncio.Task], lock: asyncio.Lock) ->
                     t.cancel()
                 raise result
             if isinstance(result, VertexBuildResult):
+                await log_vertex_build(
+                    flow_id=self.flow_id,
+                    vertex_id=result.vertex.id,
+                    valid=result.valid,
+                    params=result.params,
+                    data=result.result_dict,
+                    artifacts=result.artifacts,
+                )
+
                 vertices.append(result.vertex)
             else:
                 msg = f"Invalid result from task {task_name}: {result}"
diff --git a/src/backend/base/langflow/inputs/inputs.py b/src/backend/base/langflow/inputs/inputs.py
index 48e0c0649693..6c77f89fe894 100644
--- a/src/backend/base/langflow/inputs/inputs.py
+++ b/src/backend/base/langflow/inputs/inputs.py
@@ -226,7 +226,7 @@ class MultilineInput(MessageTextInput, MultilineMixin, InputTraceMixin, ToolMode
 
     field_type: SerializableFieldTypes = FieldTypes.TEXT
     multiline: CoalesceBool = True
-
+    copy_field: CoalesceBool = False
 
 class MultilineSecretInput(MessageTextInput, MultilineMixin, InputTraceMixin):
     """Represents a multiline input field.
diff --git a/src/backend/base/langflow/services/settings/base.py b/src/backend/base/langflow/services/settings/base.py
index 687e4f6f1c8a..7500ba0614f1 100644
--- a/src/backend/base/langflow/services/settings/base.py
+++ b/src/backend/base/langflow/services/settings/base.py
@@ -198,6 +198,8 @@ class Settings(BaseSettings):
     """The maximum number of vertex builds to keep in the database."""
     max_vertex_builds_per_vertex: int = 2
     """The maximum number of builds to keep per vertex. Older builds will be deleted."""
+    webhook_polling_interval: int = 5000
+    """The polling interval for the webhook in ms."""
 
     # MCP Server
     mcp_server_enabled: bool = True
diff --git a/src/backend/base/langflow/template/field/base.py b/src/backend/base/langflow/template/field/base.py
index e16a9fe7b07f..559709edbdf5 100644
--- a/src/backend/base/langflow/template/field/base.py
+++ b/src/backend/base/langflow/template/field/base.py
@@ -89,6 +89,7 @@ class Input(BaseModel):
 
     refresh_button: bool | None = None
     """Specifies if the field should have a refresh button. Defaults to False."""
+
     refresh_button_text: str | None = None
     """Specifies the text for the refresh button. Defaults to None."""
 
@@ -97,6 +98,7 @@ class Input(BaseModel):
 
     load_from_db: bool = False
     """Specifies if the field should be loaded from the database. Defaults to False."""
+
     title_case: bool = False
     """Specifies if the field should be displayed in title case. Defaults to True."""
 
diff --git a/src/backend/base/langflow/utils/util.py b/src/backend/base/langflow/utils/util.py
index b0cb9845607c..5b85910ba583 100644
--- a/src/backend/base/langflow/utils/util.py
+++ b/src/backend/base/langflow/utils/util.py
@@ -415,6 +415,7 @@ async def update_settings(
     auto_saving_interval: int = 1000,
     health_check_max_retries: int = 5,
     max_file_size_upload: int = 100,
+    webhook_polling_interval: int = 5000,
 ) -> None:
     """Update the settings from a config file."""
     # Check for database_url in the environment variables
@@ -448,6 +449,9 @@ async def update_settings(
     if max_file_size_upload is not None:
         logger.debug(f"Setting max_file_size_upload to {max_file_size_upload}")
         settings_service.settings.update_settings(max_file_size_upload=max_file_size_upload)
+    if webhook_polling_interval is not None:
+        logger.debug(f"Setting webhook_polling_interval to {webhook_polling_interval}")
+        settings_service.settings.update_settings(webhook_polling_interval=webhook_polling_interval)
 
 
 def is_class_method(func, cls):
diff --git a/src/frontend/src/CustomNodes/GenericNode/components/NodeDescription/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/NodeDescription/index.tsx
index f43d4b9bca5e..c81dca65126c 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/NodeDescription/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/NodeDescription/index.tsx
@@ -10,7 +10,7 @@ export default function NodeDescription({
   description,
   selected,
   nodeId,
-  emptyPlaceholder = "Double Click to Edit Description",
+  emptyPlaceholder = "",
   placeholderClassName,
   charLimit,
   inputClassName,
@@ -69,23 +69,23 @@ export default function NodeDescription({
   }, [description]);
 
   const MemoizedMarkdown = memo(Markdown);
-  const renderedDescription = useMemo(
-    () =>
-      description === "" || !description ? (
-        emptyPlaceholder
-      ) : (
-        <MemoizedMarkdown
-          linkTarget="_blank"
-          className={cn(
-            "markdown prose flex w-full flex-col text-[13px] leading-5 word-break-break-word [&_pre]:whitespace-break-spaces [&_pre]:!bg-code-description-background [&_pre_code]:!bg-code-description-background",
-            mdClassName,
-          )}
-        >
-          {String(description)}
-        </MemoizedMarkdown>
-      ),
-    [description, emptyPlaceholder, mdClassName],
-  );
+
+  const renderedDescription = useMemo(() => {
+    if (description === "" || !description) {
+      return emptyPlaceholder;
+    }
+    return (
+      <MemoizedMarkdown
+        linkTarget="_blank"
+        className={cn(
+          "markdown prose flex w-full flex-col text-[13px] leading-5 word-break-break-word [&_pre]:whitespace-break-spaces [&_pre]:!bg-code-description-background [&_pre_code]:!bg-code-description-background",
+          mdClassName,
+        )}
+      >
+        {String(description)}
+      </MemoizedMarkdown>
+    );
+  }, [description, emptyPlaceholder, mdClassName]);
 
   const handleBlurFn = () => {
     setNodeDescription(nodeDescription);
diff --git a/src/frontend/src/CustomNodes/GenericNode/components/NodeInputField/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/NodeInputField/index.tsx
index 8f03374ad121..e0223f6ed60c 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/NodeInputField/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/NodeInputField/index.tsx
@@ -1,12 +1,14 @@
 import useHandleNodeClass from "@/CustomNodes/hooks/use-handle-node-class";
+import { NodeInfoType } from "@/components/core/parameterRenderComponent/types";
 import { usePostTemplateValue } from "@/controllers/API/queries/nodes/use-post-template-value";
 import {
   CustomParameterComponent,
   CustomParameterLabel,
   getCustomParameterTitle,
 } from "@/customization/components/custom-parameter";
+import useAuthStore from "@/stores/authStore";
 import { cn } from "@/utils/utils";
-import { useEffect, useRef } from "react";
+import { useEffect, useMemo, useRef } from "react";
 import { default as IconComponent } from "../../../../components/common/genericIconComponent";
 import ShadTooltip from "../../../../components/common/shadTooltipComponent";
 import {
@@ -44,6 +46,8 @@ export default function NodeInputField({
   const ref = useRef<HTMLDivElement>(null);
   const nodes = useFlowStore((state) => state.nodes);
   const edges = useFlowStore((state) => state.edges);
+  const isAuth = useAuthStore((state) => state.isAuthenticated);
+  const currentFlow = useFlowStore((state) => state.currentFlow);
   const myData = useTypesStore((state) => state.data);
   const postTemplateValue = usePostTemplateValue({
     node: data.node!,
@@ -64,6 +68,17 @@ export default function NodeInputField({
     name,
   });
 
+  const nodeInformationMetadata: NodeInfoType = useMemo(() => {
+    return {
+      flowId: currentFlow?.id ?? "",
+      nodeType: data?.type?.toLowerCase() ?? "",
+      flowName: currentFlow?.name ?? "",
+      endpointName: currentFlow?.endpoint_name ?? "",
+      isAuth,
+      variableName: name,
+    };
+  }, [data?.node?.id, isAuth, name]);
+
   useFetchDataOnMount(data.node!, handleNodeClass, name, postTemplateValue);
 
   useEffect(() => {
@@ -193,6 +208,7 @@ export default function NodeInputField({
                 : data.node?.template[name].placeholder
             }
             isToolMode={isToolMode}
+            nodeInformationMetadata={nodeInformationMetadata}
           />
         )}
       </div>
diff --git a/src/frontend/src/CustomNodes/GenericNode/components/NodeOutputfield/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/NodeOutputfield/index.tsx
index ae4d86c883c1..7622917f506b 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/NodeOutputfield/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/NodeOutputfield/index.tsx
@@ -42,14 +42,6 @@ const SnowflakeIcon = memo(() => (
   <IconComponent className="h-5 w-5 text-ice" name="Snowflake" />
 ));
 
-const ScanEyeIcon = memo(({ className }: { className: string }) => (
-  <IconComponent
-    className={className}
-    name="ScanEye"
-    strokeWidth={ICON_STROKE_WIDTH}
-  />
-));
-
 // Memoize Button components
 const HideShowButton = memo(
   ({
diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx
index bb86f9b2574a..e9b5c797b79d 100644
--- a/src/frontend/src/CustomNodes/GenericNode/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx
@@ -252,6 +252,13 @@ function GenericNode({
   const [hasChangedNodeDescription, setHasChangedNodeDescription] =
     useState(false);
 
+  const editedNameDescription =
+    editNameDescription && hasChangedNodeDescription;
+
+  const hasDescription = useMemo(() => {
+    return data.node?.description && data.node?.description !== "";
+  }, [data.node?.description]);
+
   const memoizedNodeToolbarComponent = useMemo(() => {
     return selected ? (
       <>
@@ -294,25 +301,21 @@ function GenericNode({
               showNode
                 ? "top-2 translate-x-[10.4rem]"
                 : "top-0 translate-x-[6.4rem]",
-              editNameDescription && hasChangedNodeDescription
+              editedNameDescription
                 ? "bg-accent-emerald"
                 : "bg-zinc-foreground",
             )}
             data-testid={
-              editNameDescription && hasChangedNodeDescription
+              editedNameDescription
                 ? "save-name-description-button"
                 : "edit-name-description-button"
             }
           >
             <ForwardedIconComponent
-              name={
-                editNameDescription && hasChangedNodeDescription
-                  ? "Check"
-                  : "PencilLine"
-              }
+              name={editedNameDescription ? "Check" : "PencilLine"}
               strokeWidth={ICON_STROKE_WIDTH}
               className={cn(
-                editNameDescription && hasChangedNodeDescription
+                editedNameDescription
                   ? "text-accent-emerald-foreground"
                   : "text-muted-foreground",
                 "icon-size",
@@ -490,8 +493,9 @@ function GenericNode({
         <div
           data-testid={`${data.id}-main-node`}
           className={cn(
-            "grid gap-3 truncate text-wrap p-4 leading-5",
+            "grid truncate text-wrap p-4 leading-5",
             showNode && "border-b",
+            hasDescription && "gap-3",
           )}
         >
           <div
diff --git a/src/frontend/src/components/core/parameterRenderComponent/components/copyFieldAreaComponent/index.tsx b/src/frontend/src/components/core/parameterRenderComponent/components/copyFieldAreaComponent/index.tsx
new file mode 100644
index 000000000000..9f2f26ae4ad2
--- /dev/null
+++ b/src/frontend/src/components/core/parameterRenderComponent/components/copyFieldAreaComponent/index.tsx
@@ -0,0 +1,152 @@
+import { GRADIENT_CLASS_DISABLED } from "@/constants/constants";
+import useAlertStore from "@/stores/alertStore";
+import { useMemo, useRef, useState } from "react";
+import { cn } from "../../../../../utils/utils";
+import IconComponent from "../../../../common/genericIconComponent";
+import { Input } from "../../../../ui/input";
+import { InputProps, TextAreaComponentType } from "../../types";
+
+const BACKEND_URL = "BACKEND_URL";
+const URL_WEBHOOK = `${window.location.protocol}//${window.location.host}/api/v1/webhook/`;
+
+const inputClasses = {
+  base: ({ isFocused }: { isFocused: boolean }) =>
+    `w-full ${isFocused ? "" : "pr-3"}`,
+  editNode: "input-edit-node",
+  normal: ({ isFocused }: { isFocused: boolean }) =>
+    `primary-input ${isFocused ? "text-primary" : "text-muted-foreground"}`,
+  disabled: "disabled-state",
+};
+
+const externalLinkIconClasses = {
+  gradient: ({
+    editNode,
+    disabled,
+  }: {
+    editNode: boolean;
+    disabled: boolean;
+  }) =>
+    disabled
+      ? "gradient-fade-input-edit-node"
+      : editNode
+        ? "gradient-fade-input-edit-node"
+        : "gradient-fade-input",
+  background: ({
+    editNode,
+    disabled,
+  }: {
+    editNode: boolean;
+    disabled: boolean;
+  }) =>
+    disabled
+      ? ""
+      : editNode
+        ? "background-fade-input-edit-node"
+        : "background-fade-input",
+  icon: "icons-parameters-comp absolute right-3 h-4 w-4 shrink-0",
+  editNodeTop: "top-[-1.4rem] h-5",
+  normalTop: "top-[-2.1rem] h-7",
+  iconTop: "top-[-1.7rem]",
+};
+
+export default function CopyFieldAreaComponent({
+  value,
+  handleOnNewValue,
+  editNode = false,
+  id = "",
+  nodeInformationMetadata,
+}: InputProps<string, TextAreaComponentType>): JSX.Element {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [isFocused, setIsFocused] = useState(false);
+  const [isCopied, setIsCopied] = useState(false);
+
+  const isValueToReplace = value === BACKEND_URL;
+  const setSuccessData = useAlertStore((state) => state.setSuccessData);
+
+  const valueToRender = useMemo(() => {
+    if (isValueToReplace) {
+      return isValueToReplace ? URL_WEBHOOK : value;
+    }
+    return value;
+  }, [value]);
+
+  const getInputClassName = () => {
+    return cn(
+      inputClasses.base({ isFocused }),
+      editNode ? inputClasses.editNode : inputClasses.normal({ isFocused }),
+      isFocused && "pr-10",
+    );
+  };
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    handleOnNewValue({ value: e.target.value });
+  };
+
+  const handleCopy = (event?: React.MouseEvent<HTMLDivElement>) => {
+    setIsCopied(true);
+    setTimeout(() => setIsCopied(false), 2000);
+    navigator.clipboard.writeText(valueToRender);
+
+    setSuccessData({
+      title: "Endpoint URL copied",
+    });
+
+    event?.stopPropagation();
+  };
+
+  const renderIcon = () => (
+    <>
+      {!isFocused && (
+        <div
+          className={cn(
+            externalLinkIconClasses.gradient({
+              editNode,
+              disabled: false,
+            }),
+            editNode
+              ? externalLinkIconClasses.editNodeTop
+              : externalLinkIconClasses.normalTop,
+          )}
+          style={{
+            pointerEvents: "none",
+            background: isFocused ? undefined : GRADIENT_CLASS_DISABLED,
+          }}
+          aria-hidden="true"
+        />
+      )}
+      <div onClick={handleCopy}>
+        <IconComponent
+          dataTestId={`btn_copy_${id?.toLowerCase()}${editNode ? "_advanced" : ""}`}
+          name={isCopied ? "Check" : "Copy"}
+          className={cn(
+            "cursor-pointer bg-muted",
+            externalLinkIconClasses.icon,
+            editNode
+              ? externalLinkIconClasses.editNodeTop
+              : externalLinkIconClasses.iconTop,
+            "bg-muted text-foreground",
+          )}
+        />
+      </div>
+    </>
+  );
+
+  return (
+    <div className={cn("w-full")}>
+      <Input
+        onFocus={() => setIsFocused(true)}
+        onBlur={() => setIsFocused(false)}
+        id={id}
+        data-testid={id}
+        value={valueToRender}
+        onChange={handleInputChange}
+        className={cn(getInputClassName())}
+        aria-label={valueToRender}
+        ref={inputRef}
+        type="text"
+        disabled
+      />
+      <div className="relative w-full">{renderIcon()}</div>
+    </div>
+  );
+}
diff --git a/src/frontend/src/components/core/parameterRenderComponent/components/strRenderComponent/index.tsx b/src/frontend/src/components/core/parameterRenderComponent/components/strRenderComponent/index.tsx
index 3978353c6aa4..e075669a79b1 100644
--- a/src/frontend/src/components/core/parameterRenderComponent/components/strRenderComponent/index.tsx
+++ b/src/frontend/src/components/core/parameterRenderComponent/components/strRenderComponent/index.tsx
@@ -1,7 +1,9 @@
 import { InputProps, StrRenderComponentType } from "../../types";
+import CopyFieldAreaComponent from "../copyFieldAreaComponent";
 import DropdownComponent from "../dropdownComponent";
 import InputGlobalComponent from "../inputGlobalComponent";
 import TextAreaComponent from "../textAreaComponent";
+import WebhookFieldComponent from "../webhookFieldComponent";
 
 export function StrRenderComponent({
   templateData,
@@ -10,25 +12,43 @@ export function StrRenderComponent({
   placeholder,
   ...baseInputProps
 }: InputProps<string, StrRenderComponentType>) {
-  const { handleOnNewValue, id, isToolMode } = baseInputProps;
+  const { handleOnNewValue, id, isToolMode, nodeInformationMetadata } =
+    baseInputProps;
 
-  if (!templateData.options) {
-    return templateData.multiline ? (
-      <TextAreaComponent
-        {...baseInputProps}
-        // password={templateData.password}
-        updateVisibility={() => {
-          if (templateData.password !== undefined) {
-            handleOnNewValue(
-              { password: !templateData.password },
-              { skipSnapshot: true },
-            );
-          }
-        }}
-        id={`textarea_${id}`}
-        isToolMode={isToolMode}
-      />
-    ) : (
+  const noOptions = !templateData.options;
+  const isMultiline = templateData.multiline;
+  const copyField = templateData.copy_field;
+  const hasOptions = !!templateData.options;
+  const isWebhook = nodeInformationMetadata?.nodeType === "webhook";
+
+  if (noOptions) {
+    if (isMultiline) {
+      if (isWebhook) {
+        return <WebhookFieldComponent {...baseInputProps} />;
+      }
+
+      if (copyField) {
+        return <CopyFieldAreaComponent {...baseInputProps} />;
+      }
+
+      return (
+        <TextAreaComponent
+          {...baseInputProps}
+          updateVisibility={() => {
+            if (templateData.password !== undefined) {
+              handleOnNewValue(
+                { password: !templateData.password },
+                { skipSnapshot: true },
+              );
+            }
+          }}
+          id={`textarea_${id}`}
+          isToolMode={isToolMode}
+        />
+      );
+    }
+
+    return (
       <InputGlobalComponent
         {...baseInputProps}
         password={templateData.password}
@@ -41,7 +61,7 @@ export function StrRenderComponent({
     );
   }
 
-  if (!!templateData.options) {
+  if (hasOptions) {
     return (
       <DropdownComponent
         {...baseInputProps}
diff --git a/src/frontend/src/components/core/parameterRenderComponent/components/tableComponent/components/tableNodeCellRender/index.tsx b/src/frontend/src/components/core/parameterRenderComponent/components/tableComponent/components/tableNodeCellRender/index.tsx
index 7d0832f699fc..97eea3006b0e 100644
--- a/src/frontend/src/components/core/parameterRenderComponent/components/tableComponent/components/tableNodeCellRender/index.tsx
+++ b/src/frontend/src/components/core/parameterRenderComponent/components/tableComponent/components/tableNodeCellRender/index.tsx
@@ -1,11 +1,14 @@
 import useHandleOnNewValue from "@/CustomNodes/hooks/use-handle-new-value";
 import useHandleNodeClass from "@/CustomNodes/hooks/use-handle-node-class";
 import { ParameterRenderComponent } from "@/components/core/parameterRenderComponent";
+import { NodeInfoType } from "@/components/core/parameterRenderComponent/types";
+import useAuthStore from "@/stores/authStore";
 import useFlowStore from "@/stores/flowStore";
 import { useTweaksStore } from "@/stores/tweaksStore";
 import { APIClassType } from "@/types/api";
 import { isTargetHandleConnected } from "@/utils/reactflowUtils";
 import { CustomCellRendererProps } from "ag-grid-react";
+import { useMemo } from "react";
 
 export default function TableNodeCellRender({
   value: { nodeId, parameterId, isTweaks },
@@ -15,6 +18,8 @@ export default function TableNodeCellRender({
     ? useTweaksStore((state) => state.getNode(nodeId))
     : useFlowStore((state) => state.getNode(nodeId));
   const parameter = node?.data?.node?.template?.[parameterId];
+  const currentFlow = useFlowStore((state) => state.currentFlow);
+  const isAuth = useAuthStore((state) => state.isAuthenticated);
 
   const setNode = useTweaksStore((state) => state.setNode);
 
@@ -37,6 +42,17 @@ export default function TableNodeCellRender({
     isTweaks ? setNode : undefined,
   );
 
+  const nodeInformationMetadata: NodeInfoType = useMemo(() => {
+    return {
+      flowId: currentFlow?.id ?? "",
+      nodeType: node?.data?.type?.toLowerCase() ?? "",
+      flowName: currentFlow?.name ?? "",
+      endpointName: currentFlow?.endpoint_name ?? "",
+      isAuth,
+      variableName: parameterId,
+    };
+  }, [nodeId, isAuth, parameterId]);
+
   return (
     parameter && (
       <div className="group mx-auto flex h-full max-h-48 w-[300px] items-center justify-center overflow-auto px-1 py-2.5 custom-scroll">
@@ -50,6 +66,7 @@ export default function TableNodeCellRender({
           handleNodeClass={handleNodeClass}
           nodeClass={node?.data.node}
           disabled={disabled}
+          nodeInformationMetadata={nodeInformationMetadata}
         />
       </div>
     )
diff --git a/src/frontend/src/components/core/parameterRenderComponent/components/textAreaComponent/index.tsx b/src/frontend/src/components/core/parameterRenderComponent/components/textAreaComponent/index.tsx
index 8d796d3698a1..dd2c95ec9ede 100644
--- a/src/frontend/src/components/core/parameterRenderComponent/components/textAreaComponent/index.tsx
+++ b/src/frontend/src/components/core/parameterRenderComponent/components/textAreaComponent/index.tsx
@@ -1,6 +1,7 @@
 import { GRADIENT_CLASS } from "@/constants/constants";
+import { getCurlWebhookCode } from "@/modals/apiModal/utils/get-curl-code";
 import ComponentTextModal from "@/modals/textAreaModal";
-import { useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { cn } from "../../../../../utils/utils";
 import IconComponent from "../../../../common/genericIconComponent";
 import { Input } from "../../../../ui/input";
@@ -18,6 +19,8 @@ const inputClasses = {
   password: "password",
 };
 
+const WEBHOOK_VALUE = "CURL_WEBHOOK";
+
 const externalLinkIconClasses = {
   gradient: ({
     disabled,
@@ -61,12 +64,30 @@ export default function TextAreaComponent({
   password,
   placeholder,
   isToolMode = false,
+  nodeInformationMetadata,
 }: InputProps<string, TextAreaComponentType>): JSX.Element {
   const inputRef = useRef<HTMLInputElement>(null);
   const [isFocused, setIsFocused] = useState(false);
-
   const [passwordVisible, setPasswordVisible] = useState(false);
 
+  const isWebhook = useMemo(
+    () => nodeInformationMetadata?.nodeType === "webhook",
+    [nodeInformationMetadata?.nodeType],
+  );
+
+  useEffect(() => {
+    if (isWebhook && value === WEBHOOK_VALUE) {
+      const curlWebhookCode = getCurlWebhookCode({
+        flowId: nodeInformationMetadata?.flowId!,
+        isAuth: nodeInformationMetadata?.isAuth!,
+        endpointName: nodeInformationMetadata?.endpointName!,
+        flowName: nodeInformationMetadata?.flowName!,
+        format: "singleline",
+      });
+      handleOnNewValue({ value: curlWebhookCode });
+    }
+  }, [isWebhook]);
+
   const getInputClassName = () => {
     return cn(
       inputClasses.base({ isFocused, password: password! }),
@@ -81,9 +102,22 @@ export default function TextAreaComponent({
     handleOnNewValue({ value: e.target.value });
   };
 
+  const changeWebhookFormat = (format: "multiline" | "singleline") => {
+    if (isWebhook) {
+      const curlWebhookCode = getCurlWebhookCode({
+        flowId: nodeInformationMetadata?.flowId!,
+        isAuth: nodeInformationMetadata?.isAuth!,
+        endpointName: nodeInformationMetadata?.endpointName!,
+        flowName: nodeInformationMetadata?.flowName!,
+        format,
+      });
+      handleOnNewValue({ value: curlWebhookCode });
+    }
+  };
+
   const renderIcon = () => (
     <div>
-      {!disabled && (
+      {!disabled && !isFocused && (
         <div
           className={cn(
             externalLinkIconClasses.gradient({
@@ -139,6 +173,7 @@ export default function TextAreaComponent({
         aria-label={disabled ? value : undefined}
         ref={inputRef}
         type={password ? (passwordVisible ? "text" : "password") : "text"}
+        readOnly={isWebhook}
       />
 
       <ComponentTextModal
@@ -146,8 +181,14 @@ export default function TextAreaComponent({
         value={value}
         setValue={(newValue) => handleOnNewValue({ value: newValue })}
         disabled={disabled}
+        onCloseModal={() => changeWebhookFormat("singleline")}
       >
-        <div className="relative w-full">{renderIcon()}</div>
+        <div
+          onClick={() => changeWebhookFormat("multiline")}
+          className="relative w-full"
+        >
+          {renderIcon()}
+        </div>
       </ComponentTextModal>
       {password && !isFocused && (
         <div
diff --git a/src/frontend/src/components/core/parameterRenderComponent/components/webhookFieldComponent/components/secret-key-modal.tsx b/src/frontend/src/components/core/parameterRenderComponent/components/webhookFieldComponent/components/secret-key-modal.tsx
new file mode 100644
index 000000000000..85f784a47eaf
--- /dev/null
+++ b/src/frontend/src/components/core/parameterRenderComponent/components/webhookFieldComponent/components/secret-key-modal.tsx
@@ -0,0 +1,26 @@
+// import { ForwardedIconComponent } from "@/components/common/genericIconComponent";
+// import { Button } from "@/components/ui/button";
+// import SecretKeyModal from "@/modals/secretKeyModal";
+
+// const SecretKeyModalButton = (modalProps: any, userId: string) => {
+//   return (
+//     <SecretKeyModal
+//       modalProps={{ ...modalProps, size: "small-h-full" }}
+//       data={userId}
+//     >
+//       <Button
+//         size="sm"
+//         data-testid="generate_token_webhook_button"
+//         variant="outline"
+//         onClick={(e) => e.stopPropagation()}
+//       >
+//         <ForwardedIconComponent name="Key" className="h-4 w-4" />
+//         Generate API key
+//       </Button>
+//     </SecretKeyModal>
+//   );
+// };
+
+// export default SecretKeyModalButton;
+
+//@TODO: add this component to DSLF repository
diff --git a/src/frontend/src/components/core/parameterRenderComponent/components/webhookFieldComponent/index.tsx b/src/frontend/src/components/core/parameterRenderComponent/components/webhookFieldComponent/index.tsx
new file mode 100644
index 000000000000..2cf1b68ca829
--- /dev/null
+++ b/src/frontend/src/components/core/parameterRenderComponent/components/webhookFieldComponent/index.tsx
@@ -0,0 +1,74 @@
+import { AuthContext } from "@/contexts/authContext";
+import { useGetBuildsMutation } from "@/controllers/API/queries/_builds/use-get-builds-polling-mutation";
+import SecretKeyModalButton from "@/customization/components/custom-secret-key-modal-button";
+import { useContext, useEffect, useState } from "react";
+import { InputProps, TextAreaComponentType } from "../../types";
+import CopyFieldAreaComponent from "../copyFieldAreaComponent";
+import TextAreaComponent from "../textAreaComponent";
+
+export default function WebhookFieldComponent({
+  value,
+  handleOnNewValue,
+  editNode = false,
+  id = "",
+  nodeInformationMetadata,
+  ...baseInputProps
+}: InputProps<string, TextAreaComponentType>): JSX.Element {
+  const { userData } = useContext(AuthContext);
+  const [userId, setUserId] = useState("");
+  const { mutate: getBuildsMutation } = useGetBuildsMutation();
+
+  const isBackendUrl = nodeInformationMetadata?.variableName === "endpoint";
+  const isCurlWebhook = nodeInformationMetadata?.variableName === "curl";
+  const isAuth = nodeInformationMetadata?.isAuth;
+  const showGenerateToken = isBackendUrl && !editNode && !isAuth;
+
+  useEffect(() => {
+    if (!editNode && isBackendUrl) {
+      getBuildsMutation({
+        flowId: nodeInformationMetadata?.flowId!,
+      });
+    }
+  }, []);
+
+  useEffect(() => {
+    if (userData) {
+      setUserId(userData.id);
+    }
+  }, [userData]);
+
+  return (
+    <div className="grid w-full gap-2">
+      {isBackendUrl && (
+        <div>
+          <CopyFieldAreaComponent
+            id={id}
+            value={value}
+            editNode={editNode}
+            handleOnNewValue={handleOnNewValue}
+            {...baseInputProps}
+          />
+        </div>
+      )}
+
+      {isCurlWebhook && (
+        <div>
+          <TextAreaComponent
+            id={id}
+            value={value}
+            editNode={editNode}
+            handleOnNewValue={handleOnNewValue}
+            {...baseInputProps}
+            nodeInformationMetadata={nodeInformationMetadata}
+          />
+        </div>
+      )}
+
+      {showGenerateToken && (
+        <div>
+          <SecretKeyModalButton userId={userId} />
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/frontend/src/components/core/parameterRenderComponent/index.tsx b/src/frontend/src/components/core/parameterRenderComponent/index.tsx
index 7c0a9640f63f..309c99c9a255 100644
--- a/src/frontend/src/components/core/parameterRenderComponent/index.tsx
+++ b/src/frontend/src/components/core/parameterRenderComponent/index.tsx
@@ -18,7 +18,7 @@ import PromptAreaComponent from "./components/promptComponent";
 import { RefreshParameterComponent } from "./components/refreshParameterComponent";
 import { StrRenderComponent } from "./components/strRenderComponent";
 import ToggleShadComponent from "./components/toggleShadComponent";
-import { InputProps } from "./types";
+import { InputProps, NodeInfoType } from "./types";
 
 export function ParameterRenderComponent({
   handleOnNewValue,
@@ -32,6 +32,7 @@ export function ParameterRenderComponent({
   disabled,
   placeholder,
   isToolMode,
+  nodeInformationMetadata,
 }: {
   handleOnNewValue:
     | handleOnNewValueType
@@ -46,6 +47,7 @@ export function ParameterRenderComponent({
   disabled: boolean;
   placeholder?: string;
   isToolMode?: boolean;
+  nodeInformationMetadata?: NodeInfoType;
 }) {
   const id = (
     templateData.type +
@@ -67,6 +69,7 @@ export function ParameterRenderComponent({
       placeholder,
       isToolMode,
       nodeId,
+      nodeInformationMetadata,
     };
 
     if (TEXT_FIELD_TYPES.includes(templateData.type ?? "")) {
diff --git a/src/frontend/src/components/core/parameterRenderComponent/types.ts b/src/frontend/src/components/core/parameterRenderComponent/types.ts
index 920726de9f38..ce9d8c398442 100644
--- a/src/frontend/src/components/core/parameterRenderComponent/types.ts
+++ b/src/frontend/src/components/core/parameterRenderComponent/types.ts
@@ -17,6 +17,7 @@ export type BaseInputProps<valueType = any> = {
   isToolMode?: boolean;
   metadata?: any;
   nodeId?: string;
+  nodeInformationMetadata?: NodeInfoType;
 };
 
 // Generic type for composing input props
@@ -100,3 +101,12 @@ export type MultiselectComponentType = {
   options: string[];
   combobox?: boolean;
 };
+
+export type NodeInfoType = {
+  flowId: string;
+  nodeType: string;
+  flowName: string;
+  endpointName: string;
+  isAuth: boolean;
+  variableName: string;
+};
diff --git a/src/frontend/src/constants/constants.ts b/src/frontend/src/constants/constants.ts
index f70d2bb6364b..512f196f9dcb 100644
--- a/src/frontend/src/constants/constants.ts
+++ b/src/frontend/src/constants/constants.ts
@@ -998,6 +998,9 @@ export const STORE_PAGINATION_ROWS_COUNT = [12, 24, 48, 96];
 export const GRADIENT_CLASS =
   "linear-gradient(to right, hsl(var(--background) / 0.3), hsl(var(--background)))";
 
+export const GRADIENT_CLASS_DISABLED =
+  "linear-gradient(to right, hsl(var(--muted) / 0.3), hsl(var(--muted)))";
+
 export const RECEIVING_INPUT_VALUE = "Receiving input";
 
 export const ICON_STROKE_WIDTH = 1.5;
diff --git a/src/frontend/src/controllers/API/helpers/validate-webhook.ts b/src/frontend/src/controllers/API/helpers/validate-webhook.ts
new file mode 100644
index 000000000000..237c8029178f
--- /dev/null
+++ b/src/frontend/src/controllers/API/helpers/validate-webhook.ts
@@ -0,0 +1,11 @@
+export const validateWebhookData = (res) => {
+  if (!res?.data?.vertex_builds) {
+    return false;
+  }
+  return Object.keys(res?.data?.vertex_builds).some(
+    (key) =>
+      key.includes("Webhook") &&
+      Array.isArray(res?.data?.vertex_builds[key]) &&
+      res?.data?.vertex_builds[key]?.length > 0,
+  );
+};
diff --git a/src/frontend/src/controllers/API/queries/_builds/use-get-builds-polling-mutation.ts b/src/frontend/src/controllers/API/queries/_builds/use-get-builds-polling-mutation.ts
new file mode 100644
index 000000000000..4d4517058f91
--- /dev/null
+++ b/src/frontend/src/controllers/API/queries/_builds/use-get-builds-polling-mutation.ts
@@ -0,0 +1,168 @@
+import useFlowStore from "@/stores/flowStore";
+import { useUtilityStore } from "@/stores/utilityStore";
+import { useMutationFunctionType } from "@/types/api";
+import { FlowPoolType } from "@/types/zustand/flow";
+import { useEffect, useRef } from "react";
+import { api } from "../../api";
+import { getURL } from "../../helpers/constants";
+import { UseRequestProcessor } from "../../services/request-processor";
+
+interface PollingItem {
+  interval: NodeJS.Timeout;
+  timestamp: number;
+  flowId: string;
+  callback: () => Promise<void>;
+}
+
+const PollingManager = {
+  pollingQueue: new Map<string, PollingItem[]>(),
+  activePolls: new Map<string, PollingItem>(),
+
+  enqueuePolling(flowId: string, pollingItem: PollingItem) {
+    if (!this.pollingQueue.has(flowId)) {
+      this.pollingQueue.set(flowId, []);
+    }
+    this.pollingQueue.set(
+      flowId,
+      (this.pollingQueue.get(flowId) || []).filter(
+        (item) => item.timestamp !== pollingItem.timestamp,
+      ),
+    );
+    this.pollingQueue.get(flowId)?.push(pollingItem);
+
+    if (!this.activePolls.has(flowId)) {
+      this.startNextPolling(flowId);
+    }
+  },
+
+  startNextPolling(flowId: string) {
+    const queue = this.pollingQueue.get(flowId) || [];
+    if (queue.length === 0) {
+      this.activePolls.delete(flowId);
+      return;
+    }
+
+    const nextPoll = queue[0];
+    this.activePolls.set(flowId, nextPoll);
+    nextPoll.callback();
+  },
+
+  stopPoll(flowId: string) {
+    const activePoll = this.activePolls.get(flowId);
+    if (activePoll) {
+      clearInterval(activePoll.interval);
+      this.activePolls.delete(flowId);
+      const queue = this.pollingQueue.get(flowId) || [];
+      this.pollingQueue.set(
+        flowId,
+        queue.filter((item) => item.timestamp !== activePoll.timestamp),
+      );
+      this.startNextPolling(flowId);
+    }
+  },
+
+  stopAll() {
+    this.activePolls.forEach((poll) => clearInterval(poll.interval));
+    this.activePolls.clear();
+    this.pollingQueue.clear();
+  },
+
+  removeFromQueue(flowId: string, timestamp: number) {
+    const queue = this.pollingQueue.get(flowId) || [];
+    this.pollingQueue.set(
+      flowId,
+      queue.filter((item) => item.timestamp !== timestamp),
+    );
+  },
+};
+
+interface IGetBuilds {
+  flowId: string;
+  onSuccess?: (data: { vertex_builds: FlowPoolType }) => void;
+  stopPollingOn?: (data: { vertex_builds: FlowPoolType }) => boolean;
+}
+
+export const useGetBuildsMutation: useMutationFunctionType<
+  undefined,
+  IGetBuilds
+> = (options?) => {
+  const { mutate } = UseRequestProcessor();
+  const webhookPollingInterval = useUtilityStore(
+    (state) => state.webhookPollingInterval,
+  );
+
+  const setFlowPool = useFlowStore((state) => state.setFlowPool);
+  const currentFlow = useFlowStore((state) => state.currentFlow);
+
+  const flowIdRef = useRef<string | null>(null);
+
+  const getBuildsFn = async (
+    payload: IGetBuilds,
+  ): Promise<{ vertex_builds: FlowPoolType }> => {
+    const config = {};
+    config["params"] = { flow_id: payload.flowId };
+    const res = await api.get<any>(`${getURL("BUILDS")}`, config);
+
+    if (currentFlow) {
+      const flowPool = res?.data?.vertex_builds;
+      setFlowPool(flowPool);
+    }
+
+    return res.data;
+  };
+
+  const startPolling = (payload: IGetBuilds) => {
+    if (!webhookPollingInterval || webhookPollingInterval === 0) {
+      return getBuildsFn(payload);
+    }
+
+    flowIdRef.current = payload.flowId;
+
+    const timestamp = Date.now();
+    const pollCallback = async () => {
+      const data = await getBuildsFn(payload);
+      payload.onSuccess?.(data);
+
+      if (payload.stopPollingOn?.(data)) {
+        PollingManager.stopPoll(payload.flowId);
+      }
+    };
+
+    const intervalId = setInterval(pollCallback, webhookPollingInterval);
+
+    const pollingItem: PollingItem = {
+      interval: intervalId,
+      timestamp,
+      flowId: payload.flowId,
+      callback: pollCallback,
+    };
+
+    PollingManager.enqueuePolling(payload.flowId, pollingItem);
+
+    return getBuildsFn(payload).then((data) => {
+      payload.onSuccess?.(data);
+      if (payload.stopPollingOn?.(data)) {
+        PollingManager.stopPoll(payload.flowId);
+      }
+    });
+  };
+
+  useEffect(() => {
+    return () => {
+      if (flowIdRef.current) {
+        PollingManager.stopPoll(flowIdRef.current);
+      }
+    };
+  }, []);
+
+  const mutation = mutate(
+    ["useGetBuildsMutation"],
+    (payload: IGetBuilds) =>
+      startPolling(payload) ?? Promise.reject("Failed to start polling"),
+    options,
+  );
+
+  return mutation;
+};
+
+export { PollingManager };
diff --git a/src/frontend/src/controllers/API/queries/api-keys/use-get-api-keys.ts b/src/frontend/src/controllers/API/queries/api-keys/use-get-api-keys.ts
index 89f4bc502f71..5fbeb775f26c 100644
--- a/src/frontend/src/controllers/API/queries/api-keys/use-get-api-keys.ts
+++ b/src/frontend/src/controllers/API/queries/api-keys/use-get-api-keys.ts
@@ -26,6 +26,7 @@ export const useGetApiKeysQuery: useQueryFunctionType<
 > = (options) => {
   const { query } = UseRequestProcessor();
 
+  //@TODO: Request API key from DSLF endpoint
   const getApiKeysFn = async () => {
     return await api.get<IApiQueryResponse>(`${getURL("API_KEY")}/`);
   };
diff --git a/src/frontend/src/controllers/API/queries/config/use-get-config.ts b/src/frontend/src/controllers/API/queries/config/use-get-config.ts
index b3457b13a9a1..1fc09e0a280e 100644
--- a/src/frontend/src/controllers/API/queries/config/use-get-config.ts
+++ b/src/frontend/src/controllers/API/queries/config/use-get-config.ts
@@ -13,6 +13,7 @@ export interface ConfigResponse {
   health_check_max_retries: number;
   max_file_size_upload: number;
   feature_flags: Record<string, any>;
+  webhook_polling_interval: number;
 }
 
 export const useGetConfig: useQueryFunctionType<undefined, ConfigResponse> = (
@@ -29,6 +30,9 @@ export const useGetConfig: useQueryFunctionType<undefined, ConfigResponse> = (
     (state) => state.setMaxFileSizeUpload,
   );
   const setFeatureFlags = useUtilityStore((state) => state.setFeatureFlags);
+  const setWebhookPollingInterval = useUtilityStore(
+    (state) => state.setWebhookPollingInterval,
+  );
 
   const { query } = UseRequestProcessor();
 
@@ -46,6 +50,7 @@ export const useGetConfig: useQueryFunctionType<undefined, ConfigResponse> = (
       setHealthCheckMaxRetries(data.health_check_max_retries);
       setMaxFileSizeUpload(data.max_file_size_upload);
       setFeatureFlags(data.feature_flags);
+      setWebhookPollingInterval(data.webhook_polling_interval);
     }
     return data;
   };
diff --git a/src/frontend/src/customization/components/custom-parameter.tsx b/src/frontend/src/customization/components/custom-parameter.tsx
index ff7a095aed07..521f532abef6 100644
--- a/src/frontend/src/customization/components/custom-parameter.tsx
+++ b/src/frontend/src/customization/components/custom-parameter.tsx
@@ -1,4 +1,5 @@
 import { ParameterRenderComponent } from "@/components/core/parameterRenderComponent";
+import { NodeInfoType } from "@/components/core/parameterRenderComponent/types";
 import { handleOnNewValueType } from "@/CustomNodes/hooks/use-handle-new-value";
 import { APIClassType, InputFieldType } from "@/types/api";
 import { cn } from "@/utils/utils";
@@ -15,6 +16,7 @@ export function CustomParameterComponent({
   disabled,
   placeholder,
   isToolMode,
+  nodeInformationMetadata,
 }: {
   handleOnNewValue: handleOnNewValueType;
   name: string;
@@ -27,6 +29,7 @@ export function CustomParameterComponent({
   disabled: boolean;
   placeholder?: string;
   isToolMode?: boolean;
+  nodeInformationMetadata?: NodeInfoType;
 }) {
   return (
     <ParameterRenderComponent
@@ -41,6 +44,7 @@ export function CustomParameterComponent({
       disabled={disabled}
       placeholder={placeholder}
       isToolMode={isToolMode}
+      nodeInformationMetadata={nodeInformationMetadata}
     />
   );
 }
diff --git a/src/frontend/src/customization/components/custom-secret-key-modal-button.tsx b/src/frontend/src/customization/components/custom-secret-key-modal-button.tsx
new file mode 100644
index 000000000000..f824e70a28ef
--- /dev/null
+++ b/src/frontend/src/customization/components/custom-secret-key-modal-button.tsx
@@ -0,0 +1,13 @@
+import { getModalPropsApiKey } from "@/pages/SettingsPage/pages/ApiKeysPage/helpers/get-modal-props";
+
+export const SecretKeyModalButton = ({
+  userId,
+}: {
+  userId: string;
+}): JSX.Element => {
+  const modalProps = getModalPropsApiKey();
+
+  return <></>;
+};
+
+export default SecretKeyModalButton;
diff --git a/src/frontend/src/customization/utils/get-modal-props.tsx b/src/frontend/src/customization/utils/get-modal-props.tsx
new file mode 100644
index 000000000000..74ff6d263899
--- /dev/null
+++ b/src/frontend/src/customization/utils/get-modal-props.tsx
@@ -0,0 +1 @@
+export const getModalPropsApiKey = () => {};
diff --git a/src/frontend/src/modals/apiModal/utils/get-curl-code.tsx b/src/frontend/src/modals/apiModal/utils/get-curl-code.tsx
index ca00de7a831f..8776203006c0 100644
--- a/src/frontend/src/modals/apiModal/utils/get-curl-code.tsx
+++ b/src/frontend/src/modals/apiModal/utils/get-curl-code.tsx
@@ -51,14 +51,20 @@ export function getCurlWebhookCode({
   flowId,
   isAuth,
   endpointName,
-}: GetCodeType) {
+  format = "multiline",
+}: GetCodeType & { format?: "multiline" | "singleline" }) {
+  const baseUrl = `${window.location.protocol}//${window.location.host}/api/v1/webhook/${endpointName || flowId}`;
+  const authHeader = !isAuth ? `-H 'x-api-key: <your api key>'` : "";
+
+  if (format === "singleline") {
+    return `curl -X POST "${baseUrl}" -H 'Content-Type: application/json' ${authHeader} -d '{"any": "data"}'`.trim();
+  }
+
   return `curl -X POST \\
-  "${window.location.protocol}//${window.location.host}/api/v1/webhook/${
-    endpointName || flowId
-  }" \\
+  "${baseUrl}" \\
   -H 'Content-Type: application/json'\\${
     !isAuth ? `\n  -H 'x-api-key: <your api key>'\\` : ""
   }
   -d '{"any": "data"}'
-  `;
+  `.trim();
 }
diff --git a/src/frontend/src/modals/baseModal/index.tsx b/src/frontend/src/modals/baseModal/index.tsx
index dfe86a68144f..65ba7f9869d5 100644
--- a/src/frontend/src/modals/baseModal/index.tsx
+++ b/src/frontend/src/modals/baseModal/index.tsx
@@ -74,13 +74,20 @@ const Trigger: React.FC<TriggerProps> = ({
 const Header: React.FC<{
   children: ReactNode;
   description: string | JSX.Element | null;
-}> = ({ children, description }: modalHeaderType): JSX.Element => {
+  clampDescription?: number;
+}> = ({
+  children,
+  description,
+  clampDescription,
+}: modalHeaderType): JSX.Element => {
   return (
     <DialogHeader>
       <DialogTitle className="line-clamp-1 flex items-center pb-0.5 text-base">
         {children}
       </DialogTitle>
-      <DialogDescription className="line-clamp-2 text-sm">
+      <DialogDescription
+        className={`line-clamp-${clampDescription ?? 2} text-sm`}
+      >
         {description}
       </DialogDescription>
     </DialogHeader>
diff --git a/src/frontend/src/modals/secretKeyModal/components/content-render.tsx b/src/frontend/src/modals/secretKeyModal/components/content-render.tsx
new file mode 100644
index 000000000000..db4a7ab8ffa3
--- /dev/null
+++ b/src/frontend/src/modals/secretKeyModal/components/content-render.tsx
@@ -0,0 +1,55 @@
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import IconComponent from "../../../components/common/genericIconComponent";
+
+export const ContentRenderKey = ({
+  inputLabel,
+  inputRef,
+  apiKeyValue,
+  handleCopyClick,
+  textCopied,
+  renderKey,
+}: {
+  inputLabel: string;
+  inputRef: React.RefObject<HTMLInputElement>;
+  apiKeyValue: string;
+  handleCopyClick: () => void;
+  textCopied: boolean;
+  renderKey: boolean;
+}) => {
+  return (
+    <>
+      <div className="flex items-center gap-3">
+        <div className="w-full">
+          {inputLabel && !renderKey && (
+            <div className="relative bottom-1">
+              {inputLabel as React.ReactNode}
+            </div>
+          )}
+
+          <Input
+            data-testid="api-key-input"
+            ref={inputRef}
+            readOnly={true}
+            value={apiKeyValue}
+          />
+        </div>
+
+        <Button
+          onClick={(e) => {
+            handleCopyClick();
+            e.stopPropagation();
+          }}
+          data-testid="btn-copy-api-key"
+          unstyled
+        >
+          {textCopied ? (
+            <IconComponent name="Copy" className="h-4 w-4" />
+          ) : (
+            <IconComponent name="Check" className="h-4 w-4" />
+          )}
+        </Button>
+      </div>
+    </>
+  );
+};
diff --git a/src/frontend/src/modals/secretKeyModal/components/form-key-render.tsx b/src/frontend/src/modals/secretKeyModal/components/form-key-render.tsx
new file mode 100644
index 000000000000..8c3234a3ba55
--- /dev/null
+++ b/src/frontend/src/modals/secretKeyModal/components/form-key-render.tsx
@@ -0,0 +1,41 @@
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import * as Form from "@radix-ui/react-form";
+
+export const FormKeyRender = ({
+  modalProps,
+  apiKeyName,
+  inputRef,
+  setApiKeyName,
+}: {
+  modalProps: any;
+  apiKeyName: string;
+  inputRef: React.RefObject<HTMLInputElement>;
+  setApiKeyName: (value: string) => void;
+}) => {
+  return (
+    <Form.Field name="apikey">
+      {modalProps?.inputLabel && (
+        <Form.Label asChild className="mb-2">
+          <Label className="relative bottom-1">
+            {modalProps?.inputLabel as React.ReactNode}
+          </Label>
+        </Form.Label>
+      )}
+
+      <div className="flex items-center justify-between gap-2">
+        <Form.Control asChild>
+          <Input
+            id="primary-input"
+            value={apiKeyName}
+            ref={inputRef}
+            onChange={({ target: { value } }) => {
+              setApiKeyName(value);
+            }}
+            placeholder={modalProps?.inputPlaceholder}
+          />
+        </Form.Control>
+      </div>
+    </Form.Field>
+  );
+};
diff --git a/src/frontend/src/modals/secretKeyModal/components/header-render.tsx b/src/frontend/src/modals/secretKeyModal/components/header-render.tsx
new file mode 100644
index 000000000000..59ec545adcb2
--- /dev/null
+++ b/src/frontend/src/modals/secretKeyModal/components/header-render.tsx
@@ -0,0 +1,16 @@
+import IconComponent from "../../../components/common/genericIconComponent";
+
+export const HeaderRender = ({ title, showIcon }) => {
+  return (
+    <>
+      <span className="pr-2">{title}</span>
+      {showIcon && (
+        <IconComponent
+          name="Key"
+          className="h-6 w-6 pl-1 text-foreground"
+          aria-hidden="true"
+        />
+      )}
+    </>
+  );
+};
diff --git a/src/frontend/src/modals/secretKeyModal/index.tsx b/src/frontend/src/modals/secretKeyModal/index.tsx
index 6603cf8fc7ee..316683b0afb1 100644
--- a/src/frontend/src/modals/secretKeyModal/index.tsx
+++ b/src/frontend/src/modals/secretKeyModal/index.tsx
@@ -1,19 +1,27 @@
 import * as Form from "@radix-ui/react-form";
+import { Label } from "@radix-ui/react-form";
 import { useEffect, useRef, useState } from "react";
-import IconComponent from "../../components/common/genericIconComponent";
-import { Button } from "../../components/ui/button";
 import { Input } from "../../components/ui/input";
 import { COPIED_NOTICE_ALERT } from "../../constants/alerts_constants";
 import { createApiKey } from "../../controllers/API";
 import useAlertStore from "../../stores/alertStore";
 import { ApiKeyType } from "../../types/components";
 import BaseModal from "../baseModal";
+import { ContentRenderKey } from "./components/content-render";
+import { FormKeyRender } from "./components/form-key-render";
+import { HeaderRender } from "./components/header-render";
+
+interface ModalProps {
+  generatedKeyMessage?: React.ReactNode;
+  description?: React.ReactNode;
+}
 
 export default function SecretKeyModal({
   children,
   data,
   onCloseModal,
-}: ApiKeyType) {
+  modalProps,
+}: ApiKeyType & { modalProps?: ModalProps }) {
   const [open, setOpen] = useState(false);
   const [apiKeyName, setApiKeyName] = useState(data?.apikeyname ?? "");
   const [apiKeyValue, setApiKeyValue] = useState("");
@@ -27,7 +35,7 @@ export default function SecretKeyModal({
       setRenderKey(false);
       resetForm();
     } else {
-      onCloseModal();
+      onCloseModal?.();
     }
   }, [open]);
 
@@ -72,78 +80,47 @@ export default function SecretKeyModal({
   return (
     <BaseModal
       onSubmit={handleSubmitForm}
-      size="small-h-full"
+      size={modalProps?.size ?? "small-h-full"}
       open={open}
       setOpen={setOpen}
     >
       <BaseModal.Trigger asChild>{children}</BaseModal.Trigger>
       <BaseModal.Header
+        clampDescription={3}
         description={
           renderKey ? (
-            <>
-              {" "}
-              Please save this secret key somewhere safe and accessible. For
-              security reasons,{" "}
-              <strong>you won't be able to view it again</strong> through your
-              account. If you lose this secret key, you'll need to generate a
-              new one.
-            </>
+            <>{modalProps?.generatedKeyMessage}</>
           ) : (
-            <>Create a secret API Key to use Langflow API.</>
+            <>{modalProps?.description}</>
           )
         }
       >
-        <span className="pr-2">Create API Key</span>
-        <IconComponent
-          name="Key"
-          className="h-6 w-6 pl-1 text-foreground"
-          aria-hidden="true"
+        <HeaderRender
+          title={modalProps?.title}
+          showIcon={modalProps?.showIcon}
         />
       </BaseModal.Header>
       <BaseModal.Content>
         {renderKey ? (
-          <>
-            <div className="flex items-center gap-3">
-              <div className="w-full">
-                <Input ref={inputRef} readOnly={true} value={apiKeyValue} />
-              </div>
-
-              <Button
-                onClick={() => {
-                  handleCopyClick();
-                }}
-                data-testid="btn-copy-api-key"
-                unstyled
-              >
-                {textCopied ? (
-                  <IconComponent name="Copy" className="h-4 w-4" />
-                ) : (
-                  <IconComponent name="Check" className="h-4 w-4" />
-                )}
-              </Button>
-            </div>
-          </>
+          <ContentRenderKey
+            inputLabel={String(modalProps?.inputLabel ?? "")}
+            inputRef={inputRef}
+            apiKeyValue={apiKeyValue}
+            handleCopyClick={handleCopyClick}
+            textCopied={textCopied}
+            renderKey={renderKey}
+          />
         ) : (
-          <Form.Field name="apikey">
-            <div className="flex items-center justify-between gap-2">
-              <Form.Control asChild>
-                <Input
-                  //fake api key
-                  id="primary-input"
-                  value={apiKeyName}
-                  ref={inputRef}
-                  onChange={({ target: { value } }) => {
-                    setApiKeyName(value);
-                  }}
-                  placeholder="Insert a name for your API Key"
-                />
-              </Form.Control>
-            </div>
-          </Form.Field>
+          <FormKeyRender
+            modalProps={modalProps}
+            apiKeyName={apiKeyName}
+            inputRef={inputRef}
+            setApiKeyName={setApiKeyName}
+          />
         )}
       </BaseModal.Content>
       <BaseModal.Footer
-        submit={{ label: renderKey ? "Done" : "Create Secret Key" }}
+        submit={{ label: renderKey ? "Done" : (modalProps?.buttonText ?? "") }}
       />
     </BaseModal>
   );
diff --git a/src/frontend/src/modals/textAreaModal/index.tsx b/src/frontend/src/modals/textAreaModal/index.tsx
index 6bae59a37747..3bfac4c2178c 100644
--- a/src/frontend/src/modals/textAreaModal/index.tsx
+++ b/src/frontend/src/modals/textAreaModal/index.tsx
@@ -19,6 +19,7 @@ export default function ComponentTextModal({
   readonly = false,
   password,
   changeVisibility,
+  onCloseModal,
 }: textModalPropsType): JSX.Element {
   const [modalOpen, setModalOpen] = useState(false);
   const [inputValue, setInputValue] = useState(value);
@@ -28,6 +29,12 @@ export default function ComponentTextModal({
     if (typeof value === "string") setInputValue(value);
   }, [value, modalOpen]);
 
+  useEffect(() => {
+    if (!modalOpen) {
+      onCloseModal?.();
+    }
+  }, [modalOpen]);
+
   return (
     <BaseModal
       onChangeOpenModal={(open) => {}}
diff --git a/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/bundleItems/index.tsx b/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/bundleItems/index.tsx
index 6ef924069a11..90867da6768a 100644
--- a/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/bundleItems/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/bundleItems/index.tsx
@@ -6,6 +6,7 @@ import {
 } from "@/components/ui/disclosure";
 import { SidebarMenuButton, SidebarMenuItem } from "@/components/ui/sidebar";
 import { memo } from "react";
+import { BundleItemProps } from "../../types";
 import SidebarItemsList from "../sidebarItemsList";
 
 export const BundleItem = memo(
@@ -15,21 +16,11 @@ export const BundleItem = memo(
     onOpenChange,
     dataFilter,
     nodeColors,
-    chatInputAdded,
+    uniqueInputsComponents,
     onDragStart,
     sensitiveSort,
     handleKeyDownInput,
-  }: {
-    item: any;
-    isOpen: boolean;
-    onOpenChange: (isOpen: boolean) => void;
-    dataFilter: any;
-    nodeColors: any;
-    chatInputAdded: any;
-    onDragStart: any;
-    sensitiveSort: any;
-    handleKeyDownInput: any;
-  }) => {
+  }: BundleItemProps) => {
     if (
       !dataFilter[item.name] ||
       Object.keys(dataFilter[item.name]).length === 0
@@ -68,7 +59,7 @@ export const BundleItem = memo(
                 item={item}
                 dataFilter={dataFilter}
                 nodeColors={nodeColors}
-                chatInputAdded={chatInputAdded}
+                uniqueInputsComponents={uniqueInputsComponents}
                 onDragStart={onDragStart}
                 sensitiveSort={sensitiveSort}
               />
diff --git a/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/categoryDisclouse/index.tsx b/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/categoryDisclouse/index.tsx
index bdb1cf317bf3..f37665c4b739 100644
--- a/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/categoryDisclouse/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/categoryDisclouse/index.tsx
@@ -15,7 +15,7 @@ export const CategoryDisclosure = memo(function CategoryDisclosure({
   setOpenCategories,
   dataFilter,
   nodeColors,
-  chatInputAdded,
+  uniqueInputsComponents,
   onDragStart,
   sensitiveSort,
 }: {
@@ -24,7 +24,10 @@ export const CategoryDisclosure = memo(function CategoryDisclosure({
   setOpenCategories;
   dataFilter: any;
   nodeColors: any;
-  chatInputAdded: boolean;
+  uniqueInputsComponents: {
+    chatInput: boolean;
+    webhookInput: boolean;
+  };
   onDragStart: (
     event: React.DragEvent<any>,
     data: { type: string; node?: APIClassType },
@@ -84,7 +87,7 @@ export const CategoryDisclosure = memo(function CategoryDisclosure({
             item={item}
             dataFilter={dataFilter}
             nodeColors={nodeColors}
-            chatInputAdded={chatInputAdded}
+            uniqueInputsComponents={uniqueInputsComponents}
             onDragStart={onDragStart}
             sensitiveSort={sensitiveSort}
           />
diff --git a/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/categoryGroup/index.tsx b/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/categoryGroup/index.tsx
index 2e54e274bce6..382abdd1b83c 100644
--- a/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/categoryGroup/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/categoryGroup/index.tsx
@@ -16,7 +16,7 @@ export const CategoryGroup = memo(function CategoryGroup({
   setOpenCategories,
   search,
   nodeColors,
-  chatInputAdded,
+  uniqueInputsComponents,
   onDragStart,
   sensitiveSort,
 }: CategoryGroupProps) {
@@ -65,9 +65,9 @@ export const CategoryGroup = memo(function CategoryGroup({
                   setOpenCategories={setOpenCategories}
                   dataFilter={dataFilter}
                   nodeColors={nodeColors}
-                  chatInputAdded={chatInputAdded}
                   onDragStart={onDragStart}
                   sensitiveSort={sensitiveSort}
+                  uniqueInputsComponents={uniqueInputsComponents}
                 />
               );
             })}
diff --git a/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/sidebarBundles/index.tsx b/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/sidebarBundles/index.tsx
index b49c061e44b6..e2e804bdf5d7 100644
--- a/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/sidebarBundles/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/sidebarBundles/index.tsx
@@ -5,6 +5,7 @@ import {
   SidebarMenu,
 } from "@/components/ui/sidebar";
 import { memo, useMemo } from "react";
+import { SidebarGroupProps } from "../../types";
 import { BundleItem } from "../bundleItems";
 
 export const MemoizedSidebarGroup = memo(
@@ -14,26 +15,13 @@ export const MemoizedSidebarGroup = memo(
     sortedCategories,
     dataFilter,
     nodeColors,
-    chatInputAdded,
     onDragStart,
     sensitiveSort,
     openCategories,
     setOpenCategories,
     handleKeyDownInput,
-  }: {
-    BUNDLES: any;
-    search: any;
-    sortedCategories: any;
-    dataFilter: any;
-    nodeColors: any;
-    chatInputAdded: any;
-    onDragStart: any;
-    sensitiveSort: any;
-    openCategories: any;
-    setOpenCategories: any;
-    handleKeyDownInput: any;
-  }) => {
-    // Memoize the sorted bundles calculation
+    uniqueInputsComponents,
+  }: SidebarGroupProps) => {
     const sortedBundles = useMemo(() => {
       return BUNDLES.toSorted((a, b) => {
         const referenceArray = search !== "" ? sortedCategories : BUNDLES;
@@ -63,7 +51,7 @@ export const MemoizedSidebarGroup = memo(
                 }}
                 dataFilter={dataFilter}
                 nodeColors={nodeColors}
-                chatInputAdded={chatInputAdded}
+                uniqueInputsComponents={uniqueInputsComponents}
                 onDragStart={onDragStart}
                 sensitiveSort={sensitiveSort}
                 handleKeyDownInput={handleKeyDownInput}
diff --git a/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/sidebarDraggableComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/sidebarDraggableComponent/index.tsx
index 25af5b692c95..92ac9ddeda4c 100644
--- a/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/sidebarDraggableComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/sidebarDraggableComponent/index.tsx
@@ -123,6 +123,7 @@ export const SidebarDraggableComponent = forwardRef(
             tabIndex={0}
             onKeyDown={handleKeyDown}
             className="m-[1px] rounded-md outline-none ring-ring focus-visible:ring-1"
+            data-testid={`${sectionName.toLowerCase()}_${display_name.toLowerCase()}_draggable`}
           >
             <div
               data-testid={sectionName + display_name}
diff --git a/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/sidebarItemsList/index.tsx b/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/sidebarItemsList/index.tsx
index 0456c1e7754a..4b124e3351b6 100644
--- a/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/sidebarItemsList/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/sidebarItemsList/index.tsx
@@ -1,12 +1,14 @@
 import ShadTooltip from "@/components/common/shadTooltipComponent";
 import { removeCountFromString } from "@/utils/utils";
+import { disableItem } from "../../helpers/disable-item";
+import { getDisabledTooltip } from "../../helpers/get-disabled-tooltip";
 import SidebarDraggableComponent from "../sidebarDraggableComponent";
 
 const SidebarItemsList = ({
   item,
   dataFilter,
   nodeColors,
-  chatInputAdded,
+  uniqueInputsComponents,
   onDragStart,
   sensitiveSort,
 }) => {
@@ -46,8 +48,11 @@ const SidebarItemsList = ({
                 official={currentItem.official === false ? false : true}
                 beta={currentItem.beta ?? false}
                 legacy={currentItem.legacy ?? false}
-                disabled={SBItemName === "ChatInput" && chatInputAdded}
-                disabledTooltip="Chat input already added"
+                disabled={disableItem(SBItemName, uniqueInputsComponents)}
+                disabledTooltip={getDisabledTooltip(
+                  SBItemName,
+                  uniqueInputsComponents,
+                )}
               />
             </ShadTooltip>
           );
diff --git a/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/helpers/disable-item.ts b/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/helpers/disable-item.ts
new file mode 100644
index 000000000000..9583b793243d
--- /dev/null
+++ b/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/helpers/disable-item.ts
@@ -0,0 +1,14 @@
+import { UniqueInputsComponents } from "../types";
+
+export const disableItem = (
+  SBItemName: string,
+  uniqueInputsComponents: UniqueInputsComponents,
+) => {
+  if (SBItemName === "ChatInput" && uniqueInputsComponents.chatInput) {
+    return true;
+  }
+  if (SBItemName === "Webhook" && uniqueInputsComponents.webhookInput) {
+    return true;
+  }
+  return false;
+};
diff --git a/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/helpers/get-disabled-tooltip.ts b/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/helpers/get-disabled-tooltip.ts
new file mode 100644
index 000000000000..c72300112557
--- /dev/null
+++ b/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/helpers/get-disabled-tooltip.ts
@@ -0,0 +1,14 @@
+import { UniqueInputsComponents } from "../types";
+
+export const getDisabledTooltip = (
+  SBItemName: string,
+  uniqueInputsComponents: UniqueInputsComponents,
+) => {
+  if (SBItemName === "ChatInput" && uniqueInputsComponents.chatInput) {
+    return "Chat input already added";
+  }
+  if (SBItemName === "Webhook" && uniqueInputsComponents.webhookInput) {
+    return "Webhook already added";
+  }
+  return "";
+};
diff --git a/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/index.tsx
index 857430ee875b..0e75013503c3 100644
--- a/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/index.tsx
@@ -7,7 +7,7 @@ import {
 import { useAddComponent } from "@/hooks/useAddComponent";
 import { useShortcutsStore } from "@/stores/shortcuts";
 import { useStoreStore } from "@/stores/storeStore";
-import { checkChatInput } from "@/utils/reactflowUtils";
+import { checkChatInput, checkWebhookInput } from "@/utils/reactflowUtils";
 import {
   nodeColors,
   SIDEBAR_BUNDLES,
@@ -35,6 +35,7 @@ import { combinedResultsFn } from "./helpers/combined-results";
 import { filteredDataFn } from "./helpers/filtered-data";
 import { normalizeString } from "./helpers/normalize-string";
 import { traditionalSearchMetadata } from "./helpers/traditional-search-metadata";
+import { UniqueInputsComponents } from "./types";
 
 const CATEGORIES = SIDEBAR_CATEGORIES;
 const BUNDLES = SIDEBAR_BUNDLES;
@@ -85,6 +86,13 @@ export function FlowSidebarComponent() {
   const searchInputRef = useRef<HTMLInputElement | null>(null);
 
   const chatInputAdded = useMemo(() => checkChatInput(nodes), [nodes]);
+  const webhookInputAdded = useMemo(() => checkWebhookInput(nodes), [nodes]);
+  const uniqueInputsComponents: UniqueInputsComponents = useMemo(() => {
+    return {
+      chatInput: chatInputAdded,
+      webhookInput: webhookInputAdded,
+    };
+  }, [chatInputAdded, webhookInputAdded]);
 
   const customComponent = useMemo(() => {
     return data?.["custom_component"]?.["CustomComponent"] ?? null;
@@ -333,7 +341,7 @@ export function FlowSidebarComponent() {
               setOpenCategories={setOpenCategories}
               search={search}
               nodeColors={nodeColors}
-              chatInputAdded={chatInputAdded}
+              uniqueInputsComponents={uniqueInputsComponents}
               onDragStart={onDragStart}
               sensitiveSort={sensitiveSort}
             />
@@ -344,7 +352,7 @@ export function FlowSidebarComponent() {
                 sortedCategories={sortedCategories}
                 dataFilter={dataFilter}
                 nodeColors={nodeColors}
-                chatInputAdded={chatInputAdded}
+                uniqueInputsComponents={uniqueInputsComponents}
                 onDragStart={onDragStart}
                 sensitiveSort={sensitiveSort}
                 openCategories={openCategories}
diff --git a/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/types/index.ts b/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/types/index.ts
index 8214933bcaf5..a52f42ca33c1 100644
--- a/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/types/index.ts
+++ b/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/types/index.ts
@@ -1,6 +1,10 @@
 import { APIClassType, APIDataType } from "@/types/api";
 import { Dispatch, SetStateAction } from "react";
 
+export interface NodeColors {
+  [key: string]: string;
+}
+
 export interface CategoryGroupProps {
   dataFilter: APIDataType;
   sortedCategories: string[];
@@ -12,15 +16,57 @@ export interface CategoryGroupProps {
   openCategories: string[];
   setOpenCategories: (categories: string[]) => void;
   search: string;
-  nodeColors: {
-    [key: string]: string;
+  nodeColors: NodeColors;
+  onDragStart: (
+    event: React.DragEvent<any>,
+    data: { type: string; node?: APIClassType },
+  ) => void;
+  sensitiveSort: (a: string, b: string) => number;
+  uniqueInputsComponents: {
+    chatInput: boolean;
+    webhookInput: boolean;
+  };
+}
+
+export interface SidebarGroupProps {
+  BUNDLES: any;
+  search: string;
+  sortedCategories: string[];
+  dataFilter: APIDataType;
+  nodeColors: NodeColors;
+  onDragStart: (
+    event: React.DragEvent<HTMLDivElement>,
+    data: { type: string; node?: APIClassType },
+  ) => void;
+  sensitiveSort: (a: string, b: string) => number;
+  openCategories: string[];
+  setOpenCategories: (
+    categories: string[] | ((prev: string[]) => string[]),
+  ) => void;
+  handleKeyDownInput: (
+    event: React.KeyboardEvent<HTMLDivElement>,
+    name: string,
+  ) => void;
+  uniqueInputsComponents: UniqueInputsComponents;
+}
+
+export interface BundleItemProps {
+  item: {
+    name: string;
+    display_name: string;
+    icon: string;
   };
-  chatInputAdded: boolean;
+  isOpen: boolean;
+  onOpenChange: (isOpen: boolean) => void;
+  dataFilter: APIDataType;
+  nodeColors: NodeColors;
+  uniqueInputsComponents: UniqueInputsComponents;
   onDragStart: (
     event: React.DragEvent<any>,
     data: { type: string; node?: APIClassType },
   ) => void;
   sensitiveSort: (a: string, b: string) => number;
+  handleKeyDownInput: (event: React.KeyboardEvent<any>, name: string) => void;
 }
 
 export interface SidebarHeaderComponentProps {
@@ -50,3 +96,8 @@ export interface SidebarHeaderComponentProps {
   setFilterData: Dispatch<SetStateAction<APIDataType>>;
   data: APIDataType;
 }
+
+export interface UniqueInputsComponents {
+  chatInput: boolean;
+  webhookInput: boolean;
+}
diff --git a/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/components/ApiKeyHeader/index.tsx b/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/components/ApiKeyHeader/index.tsx
index 6f12aae6fc56..e4e56b8186af 100644
--- a/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/components/ApiKeyHeader/index.tsx
+++ b/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/components/ApiKeyHeader/index.tsx
@@ -2,6 +2,7 @@ import ForwardedIconComponent from "../../../../../../components/common/genericI
 import { Button } from "../../../../../../components/ui/button";
 import { API_PAGE_PARAGRAPH } from "../../../../../../constants/constants";
 import SecretKeyModal from "../../../../../../modals/secretKeyModal";
+import { getModalPropsApiKey } from "../../helpers/get-modal-props";
 
 type ApiKeyHeaderComponentProps = {
   selectedRows: string[];
@@ -13,6 +14,7 @@ const ApiKeyHeaderComponent = ({
   fetchApiKeys,
   userId,
 }: ApiKeyHeaderComponentProps) => {
+  const modalProps = getModalPropsApiKey();
   return (
     <>
       <div className="flex w-full items-start justify-between gap-6">
@@ -27,7 +29,11 @@ const ApiKeyHeaderComponent = ({
           <p className="text-sm text-muted-foreground">{API_PAGE_PARAGRAPH}</p>
         </div>
         <div className="flex flex-shrink-0 items-center gap-2">
-          <SecretKeyModal data={userId} onCloseModal={fetchApiKeys}>
+          <SecretKeyModal
+            modalProps={modalProps}
+            data={userId}
+            onCloseModal={fetchApiKeys}
+          >
             <Button data-testid="api-key-button-store" variant="primary">
               <ForwardedIconComponent name="Plus" className="w-4" />
               Add New
diff --git a/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/helpers/get-modal-props.tsx b/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/helpers/get-modal-props.tsx
new file mode 100644
index 000000000000..878641eef98e
--- /dev/null
+++ b/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/helpers/get-modal-props.tsx
@@ -0,0 +1,79 @@
+export const getModalPropsApiKey = () => {
+  const modalProps = {
+    title: "Create API Key",
+    description: "Create a secret API Key to use Langflow API.",
+    inputPlaceholder: "My API Key",
+    buttonText: "Generate API Key",
+    generatedKeyMessage: (
+      <>
+        {" "}
+        Please save this secret key somewhere safe and accessible. For security
+        reasons, <strong>you won't be able to view it again</strong> through
+        your account. If you lose this secret key, you'll need to generate a new
+        one.
+      </>
+    ),
+    showIcon: true,
+    inputLabel: (
+      <>
+        <span className="text-sm">Description</span>{" "}
+        <span className="text-xs text-muted-foreground">(optional)</span>
+      </>
+    ),
+  };
+
+  return modalProps;
+};
+
+// @TODO add this to DSLF repository
+// import { Link } from "react-router-dom";
+
+// export const DOCS_ACCESS_DATASTAX =
+//   "https://docs.datastax.com/en/astra-db-classic/administration/manage-database-access.html#default-roles";
+
+// export const getModalPropsApiKey = () => {
+//   const orgId =
+//     window.location.pathname.split("langflow/")[1]?.split("/")[0] || "";
+
+//   const URL_DATASTAX_TOKENS_URL = `https://astra.datastax.com/org/${orgId}/settings/tokens`;
+
+//   const modalProps = {
+//     title: "Create new token",
+//     description: (
+//       <>
+//         Generate a token with{" "}
+//         <Link to={DOCS_ACCESS_DATASTAX} className="text-accent-pink-foreground">
+//           Org Adm
+//         </Link>{" "}
+//         permissions. For custom roles, visit{" "}
+//         <Link
+//           to={URL_DATASTAX_TOKENS_URL}
+//           className="text-accent-pink-foreground"
+//         >
+//           Tokens
+//         </Link>
+//         .
+//       </>
+//     ),
+//     inputLabel: (
+//       <>
+//         <span className="text-sm">Description</span>{" "}
+//         <span className="text-xs text-muted-foreground">(optional)</span>
+//       </>
+//     ),
+//     inputPlaceholder: "New webhook key",
+//     buttonText: "Create token",
+//     generatedKeyMessage: (
+//       <>
+//         {" "}
+//         Please save this secret key somewhere safe and accessible. For security
+//         reasons, <strong>you won't be able to view it again</strong> through
+//         your account. If you lose this secret key, you'll need to generate a new
+//         one.
+//       </>
+//     ),
+//     showIcon: false,
+//   };
+
+//   return modalProps;
+// };
diff --git a/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/index.tsx b/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/index.tsx
index 9454e6e55086..64f47fafd8ca 100644
--- a/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/index.tsx
+++ b/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/index.tsx
@@ -10,7 +10,7 @@ import {
   useGetApiKeysQuery,
 } from "@/controllers/API/queries/api-keys";
 import { SelectionChangedEvent } from "ag-grid-community";
-import { useContext, useEffect, useRef, useState } from "react";
+import { useContext, useEffect, useState } from "react";
 import TableComponent from "../../../../components/core/parameterRenderComponent/components/tableComponent";
 import { AuthContext } from "../../../../contexts/authContext";
 import useAlertStore from "../../../../stores/alertStore";
@@ -18,7 +18,6 @@ import ApiKeyHeaderComponent from "./components/ApiKeyHeader";
 import { getColumnDefs } from "./helpers/column-defs";
 
 export default function ApiKeysPage() {
-  const [loadingKeys, setLoadingKeys] = useState(true);
   const [selectedRows, setSelectedRows] = useState<string[]>([]);
   const setSuccessData = useAlertStore((state) => state.setSuccessData);
   const setErrorData = useAlertStore((state) => state.setErrorData);
diff --git a/src/frontend/src/stores/utilityStore.ts b/src/frontend/src/stores/utilityStore.ts
index 4b4308597aad..e71b3d8644ff 100644
--- a/src/frontend/src/stores/utilityStore.ts
+++ b/src/frontend/src/stores/utilityStore.ts
@@ -35,4 +35,7 @@ export const useUtilityStore = create<UtilityStoreType>((set, get) => ({
   setTags: (tags: Tag[]) => set({ tags }),
   featureFlags: {},
   setFeatureFlags: (featureFlags: Record<string, any>) => set({ featureFlags }),
+  webhookPollingInterval: 5000,
+  setWebhookPollingInterval: (webhookPollingInterval: number) =>
+    set({ webhookPollingInterval }),
 }));
diff --git a/src/frontend/src/style/applies.css b/src/frontend/src/style/applies.css
index 435629ee2929..9aca7346197a 100644
--- a/src/frontend/src/style/applies.css
+++ b/src/frontend/src/style/applies.css
@@ -174,7 +174,7 @@
     @apply flex gap-2;
   }
   .primary-input {
-    @apply form-input block w-full truncate rounded-md border border-border bg-background px-3 text-left text-sm placeholder:text-muted-foreground hover:border-muted-foreground focus:border-foreground focus:placeholder-transparent focus:ring-0 focus:ring-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted disabled:opacity-100 placeholder:disabled:text-muted-foreground;
+    @apply form-input block w-full truncate rounded-md border border-border bg-background px-3 text-left text-sm placeholder:text-muted-foreground hover:border-muted-foreground focus:border-foreground focus:placeholder-transparent focus:ring-0 focus:ring-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground disabled:opacity-100 placeholder:disabled:text-muted-foreground;
   }
 
   .skeleton-card {
diff --git a/src/frontend/src/types/api/index.ts b/src/frontend/src/types/api/index.ts
index 650f4f80ff40..d5cc6c03cb46 100644
--- a/src/frontend/src/types/api/index.ts
+++ b/src/frontend/src/types/api/index.ts
@@ -52,6 +52,7 @@ export type APIClassType = {
   flow?: FlowType;
   field_order?: string[];
   tool_mode?: boolean;
+  type?: string;
   [key: string]:
     | Array<string>
     | string
diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts
index 2e6d5e0a8710..58e6077909ed 100644
--- a/src/frontend/src/types/components/index.ts
+++ b/src/frontend/src/types/components/index.ts
@@ -421,7 +421,29 @@ export type UserInputType = {
 export type ApiKeyType = {
   children: ReactElement;
   data?: any;
-  onCloseModal: () => void;
+  onCloseModal?: () => void;
+  modalProps?: {
+    title?: string;
+    description?: string | ReactElement | HTMLElement;
+    inputLabel?: string | ReactElement | HTMLElement | ReactNode;
+    inputPlaceholder?: string;
+    buttonText?: string;
+    generatedKeyMessage?: string | ReactElement | HTMLElement;
+    showIcon?: boolean;
+    size?:
+      | "x-small"
+      | "smaller"
+      | "small"
+      | "medium"
+      | "medium-tall"
+      | "large"
+      | "three-cards"
+      | "large-thin"
+      | "large-h-full"
+      | "templates"
+      | "small-h-full"
+      | "medium-h-full";
+  };
 };
 
 export type StoreApiKeyType = {
@@ -574,6 +596,7 @@ export type iconsType = {
 export type modalHeaderType = {
   children: ReactNode;
   description: string | JSX.Element | null;
+  clampDescription?: number;
 };
 
 export type codeAreaModalPropsType = {
@@ -640,6 +663,7 @@ export type textModalPropsType = {
   changeVisibility?: () => void;
   open?: boolean;
   setOpen?: (open: boolean) => void;
+  onCloseModal?: () => void;
 };
 
 export type newFlowModalPropsType = {
diff --git a/src/frontend/src/types/tweaks/index.ts b/src/frontend/src/types/tweaks/index.ts
index 3ac7d58f5e44..d6a672379ffd 100644
--- a/src/frontend/src/types/tweaks/index.ts
+++ b/src/frontend/src/types/tweaks/index.ts
@@ -11,7 +11,7 @@ export type GetCodeType = {
   flowId: string;
   flowName: string;
   isAuth: boolean;
-  tweaksBuildedObject: {};
+  tweaksBuildedObject?: {};
   endpointName?: string | null;
-  activeTweaks: boolean;
+  activeTweaks?: boolean;
 };
diff --git a/src/frontend/src/types/zustand/utility/index.ts b/src/frontend/src/types/zustand/utility/index.ts
index fda8add9db96..dc4b53c8b985 100644
--- a/src/frontend/src/types/zustand/utility/index.ts
+++ b/src/frontend/src/types/zustand/utility/index.ts
@@ -15,6 +15,8 @@ export type UtilityStoreType = {
   setTags: (tags: Tag[]) => void;
   featureFlags: Record<string, any>;
   setFeatureFlags: (featureFlags: Record<string, any>) => void;
+  webhookPollingInterval: number;
+  setWebhookPollingInterval: (webhookPollingInterval: number) => void;
   chatValueStore: string;
   setChatValueStore: (value: string) => void;
   dismissAll: boolean;
diff --git a/src/frontend/src/utils/reactflowUtils.ts b/src/frontend/src/utils/reactflowUtils.ts
index ee779e8dc6af..1b8f17b005b1 100644
--- a/src/frontend/src/utils/reactflowUtils.ts
+++ b/src/frontend/src/utils/reactflowUtils.ts
@@ -54,6 +54,10 @@ export function checkChatInput(nodes: Node[]) {
   return nodes.some((node) => node.data.type === "ChatInput");
 }
 
+export function checkWebhookInput(nodes: Node[]) {
+  return nodes.some((node) => node.data.type === "Webhook");
+}
+
 export function cleanEdges(nodes: AllNodeType[], edges: EdgeType[]) {
   let newEdges = cloneDeep(edges);
   edges.forEach((edge) => {
diff --git a/src/frontend/tests/core/unit/webhookComponent.spec.ts b/src/frontend/tests/core/unit/webhookComponent.spec.ts
new file mode 100644
index 000000000000..bb1d7fed4753
--- /dev/null
+++ b/src/frontend/tests/core/unit/webhookComponent.spec.ts
@@ -0,0 +1,150 @@
+import { expect, test } from "@playwright/test";
+import { adjustScreenView } from "../../utils/adjust-screen-view";
+import { awaitBootstrapTest } from "../../utils/await-bootstrap-test";
+
+test(
+  "user should be able to create an api key within a webhook component",
+  { tag: ["@release", "@workspace"] },
+  async ({ page }) => {
+    const randomApiKeyDescription =
+      Math.random().toString(36).substring(2, 15) +
+      Math.random().toString(36).substring(2, 15);
+
+    await awaitBootstrapTest(page);
+
+    await page.waitForSelector('[data-testid="blank-flow"]', {
+      timeout: 30000,
+    });
+    await page.getByTestId("blank-flow").click();
+    await page.getByTestId("sidebar-search-input").click();
+    await page.getByTestId("sidebar-search-input").fill("webhook");
+
+    await page.waitForSelector('[data-testid="dataWebhook"]', {
+      timeout: 3000,
+    });
+
+    await page
+      .getByTestId("dataWebhook")
+      .hover()
+      .then(async () => {
+        await page.getByTestId("add-component-button-webhook").click();
+      });
+
+    await adjustScreenView(page);
+
+    await page
+      .getByTestId("data_webhook_draggable")
+      .hover()
+      .then(async () => {
+        await page.waitForSelector("text=Webhook already added", {
+          timeout: 30000,
+        });
+      });
+
+    await page.getByTestId("btn_copy_str_endpoint").click();
+    await page.waitForSelector("text=Endpoint URL copied", { timeout: 30000 });
+
+    await page.getByTestId("generate_token_webhook_button").click();
+    await page.waitForSelector("text=Create API Key", { timeout: 30000 });
+    await page.getByPlaceholder("My API Key").click();
+    await page.getByPlaceholder("My API Key").fill(randomApiKeyDescription);
+    await page.getByText("Generate API Key").click();
+    await page.waitForSelector(
+      "text=Please save this secret key somewhere safe and accessible.",
+      { timeout: 30000 },
+    );
+
+    await page.getByTestId("btn-copy-api-key").click();
+    await page.waitForSelector("text=API Key copied", { timeout: 30000 });
+
+    await page.getByText("Done").click();
+
+    await page.getByTestId("user_menu_button").click();
+    await page.getByText("Settings").click();
+
+    await page.getByTestId("sidebar-nav-Langflow API Keys").click();
+    await page.waitForSelector(`text=${randomApiKeyDescription}`, {
+      timeout: 30000,
+    });
+  },
+);
+
+test(
+  "user should be able to poll a webhook",
+  { tag: ["@release", "@workspace"] },
+  async ({ page, request }) => {
+    await page.route("**/api/v1/config", (route) => {
+      route.fulfill({
+        status: 200,
+        contentType: "application/json",
+        body: JSON.stringify({
+          webhook_polling_interval: 1000,
+        }),
+        headers: {
+          "content-type": "application/json",
+          ...route.request().headers(),
+        },
+      });
+    });
+
+    const randomApiKeyDescription =
+      Math.random().toString(36).substring(2, 15) +
+      Math.random().toString(36).substring(2, 15);
+
+    await awaitBootstrapTest(page);
+
+    await page.waitForSelector('[data-testid="blank-flow"]', {
+      timeout: 30000,
+    });
+    await page.getByTestId("blank-flow").click();
+    await page.getByTestId("sidebar-search-input").click();
+    await page.getByTestId("sidebar-search-input").fill("webhook");
+
+    await page.waitForSelector('[data-testid="dataWebhook"]', {
+      timeout: 3000,
+    });
+
+    await page
+      .getByTestId("dataWebhook")
+      .hover()
+      .then(async () => {
+        await page.getByTestId("add-component-button-webhook").click();
+      });
+
+    await adjustScreenView(page);
+
+    await page
+      .getByTestId("data_webhook_draggable")
+      .hover()
+      .then(async () => {
+        await page.waitForSelector("text=Webhook already added", {
+          timeout: 30000,
+        });
+      });
+
+    await page.getByTestId("btn_copy_str_endpoint").click();
+    await page.waitForSelector("text=Endpoint URL copied", { timeout: 30000 });
+
+    await page.getByTestId("generate_token_webhook_button").click();
+    await page.waitForSelector("text=Create API Key", { timeout: 30000 });
+    await page.getByPlaceholder("My API Key").click();
+    await page.getByPlaceholder("My API Key").fill(randomApiKeyDescription);
+    await page.getByText("Generate API Key").click();
+    await page.waitForSelector(
+      "text=Please save this secret key somewhere safe and accessible.",
+      { timeout: 30000 },
+    );
+
+    await page.getByTestId("btn-copy-api-key").click();
+    await page.waitForSelector("text=API Key copied", { timeout: 30000 });
+
+    await page.getByText("Done").click();
+
+    const monitorBuildPromise = page.waitForRequest((request) =>
+      request.url().includes("/monitor/build"),
+    );
+
+    const monitorBuildRequest = await monitorBuildPromise;
+    expect(monitorBuildRequest).toBeTruthy();
+  },
+);