diff --git a/apps/web-remix/app/api/pipeline/pipeline.contracts.ts b/apps/web-remix/app/api/pipeline/pipeline.contracts.ts
index da378facf..a6f51aa1b 100644
--- a/apps/web-remix/app/api/pipeline/pipeline.contracts.ts
+++ b/apps/web-remix/app/api/pipeline/pipeline.contracts.ts
@@ -7,14 +7,38 @@ import {
   ExtendedBlockConfig,
   UpdateBlockConfig,
 } from '~/api/blockType/blockType.contracts';
-import type { IInterfaceConfigFormProperty } from '~/components/pages/pipelines/pipeline.types';
+import type {
+  IInterfaceConfigFormOutputProperty,
+  IInterfaceConfigFormProperty,
+  IInterfaceConfigProperty,
+} from '~/components/pages/pipelines/pipeline.types';
 import { PaginationMeta } from '~/components/pagination/pagination.types';
 
-export const InterfaceConfigFormProperty = z.object({
+export const InterfaceConfigProperty = z.object({
   name: z.string(),
   type: z.string(),
 });
-export const InterfaceConfigForm = z.object({
+
+export const InterfaceConfigFormProperty = InterfaceConfigProperty.extend({
+  label: z.string().optional().default(''),
+  description: z.string().optional().default(''),
+  required: z
+    .union([z.boolean(), z.string().transform((v) => v === 'on')])
+    .optional()
+    .default(false),
+});
+
+export const InterfaceConfigFormOutputProperty =
+  InterfaceConfigFormProperty.omit({ required: true });
+
+export const CommonInterfaceConfigForm = z.object({
+  public: z
+    .union([z.boolean(), z.string().transform((v) => v === 'on')])
+    .optional()
+    .default(false),
+});
+
+export const InterfaceFormConfigForm = CommonInterfaceConfigForm.extend({
   inputs: z
     .union([
       z
@@ -32,56 +56,64 @@ export const InterfaceConfigForm = z.object({
         .transform(
           (value) => JSON.parse(value) as IInterfaceConfigFormProperty[],
         ),
-      z.array(InterfaceConfigFormProperty),
+      z.array(InterfaceConfigFormOutputProperty),
     ])
     .default([]),
-  public: z
-    .union([z.boolean(), z.string().transform((v) => v === 'on')])
-    .optional()
-    .default(false),
 });
 
-export const InterfaceWebchatConfigForm = InterfaceConfigForm.extend({
+export const InterfaceWebchatConfigForm = CommonInterfaceConfigForm.extend({
   description: z
     .string()
     .optional()
     .default('Hello. How can I help you today?'),
   suggested_messages: z.array(z.string()).optional().default([]),
+  inputs: z
+    .union([
+      z
+        .string()
+        .transform((value) => JSON.parse(value) as IInterfaceConfigProperty[]),
+      z.array(InterfaceConfigProperty),
+    ])
+    .default([]),
+  outputs: z
+    .union([
+      z
+        .string()
+        .transform((value) => JSON.parse(value) as IInterfaceConfigProperty[]),
+      z.array(InterfaceConfigProperty),
+    ])
+    .default([]),
   audio_inputs: z
     .union([
       z
         .string()
-        .transform(
-          (value) => JSON.parse(value) as IInterfaceConfigFormProperty[],
-        ),
-      z.array(InterfaceConfigFormProperty),
+        .transform((value) => JSON.parse(value) as IInterfaceConfigProperty[]),
+      z.array(InterfaceConfigProperty),
     ])
     .default([]),
   audio_outputs: z
     .union([
       z
         .string()
-        .transform(
-          (value) => JSON.parse(value) as IInterfaceConfigFormProperty[],
-        ),
-      z.array(InterfaceConfigFormProperty),
+        .transform((value) => JSON.parse(value) as IInterfaceConfigProperty[]),
+      z.array(InterfaceConfigProperty),
     ])
     .default([]),
 });
 
 export const InterfaceConfig = z.object({
   webchat: InterfaceWebchatConfigForm.optional().default({
-    inputs: [] as IInterfaceConfigFormProperty[],
-    outputs: [] as IInterfaceConfigFormProperty[],
-    audio_inputs: [] as IInterfaceConfigFormProperty[],
-    audio_outputs: [] as IInterfaceConfigFormProperty[],
+    inputs: [] as IInterfaceConfigProperty[],
+    outputs: [] as IInterfaceConfigProperty[],
+    audio_inputs: [] as IInterfaceConfigProperty[],
+    audio_outputs: [] as IInterfaceConfigProperty[],
     description: 'Hello. How can I help you today?',
     suggested_messages: [] as string[],
     public: false,
   }),
-  form: InterfaceConfigForm.optional().default({
+  form: InterfaceFormConfigForm.optional().default({
     inputs: [] as IInterfaceConfigFormProperty[],
-    outputs: [] as IInterfaceConfigFormProperty[],
+    outputs: [] as IInterfaceConfigFormOutputProperty[],
     public: false,
   }),
 });
@@ -93,34 +125,34 @@ export const SafeInterfaceConfig = z
       ? c
       : {
           webchat: {
-            inputs: [] as IInterfaceConfigFormProperty[],
-            outputs: [] as IInterfaceConfigFormProperty[],
-            audio_outputs: [] as IInterfaceConfigFormProperty[],
-            audio_inputs: [] as IInterfaceConfigFormProperty[],
+            inputs: [] as IInterfaceConfigProperty[],
+            outputs: [] as IInterfaceConfigProperty[],
+            audio_outputs: [] as IInterfaceConfigProperty[],
+            audio_inputs: [] as IInterfaceConfigProperty[],
             description: 'Hello. How can I help you today?',
             suggested_messages: [] as string[],
             public: false,
           },
           form: {
             inputs: [] as IInterfaceConfigFormProperty[],
-            outputs: [] as IInterfaceConfigFormProperty[],
+            outputs: [] as IInterfaceConfigFormOutputProperty[],
             public: false,
           },
         },
   )
   .default({
     webchat: {
-      inputs: [] as IInterfaceConfigFormProperty[],
-      outputs: [] as IInterfaceConfigFormProperty[],
-      audio_outputs: [] as IInterfaceConfigFormProperty[],
-      audio_inputs: [] as IInterfaceConfigFormProperty[],
+      inputs: [] as IInterfaceConfigProperty[],
+      outputs: [] as IInterfaceConfigProperty[],
+      audio_outputs: [] as IInterfaceConfigProperty[],
+      audio_inputs: [] as IInterfaceConfigProperty[],
       description: 'Hello. How can I help you today?',
       suggested_messages: [] as string[],
       public: false,
     },
     form: {
       inputs: [] as IInterfaceConfigFormProperty[],
-      outputs: [] as IInterfaceConfigFormProperty[],
+      outputs: [] as IInterfaceConfigFormOutputProperty[],
       public: false,
     },
   });
@@ -352,5 +384,3 @@ export const PipelineRunLogsResponse = z.object({
 
 export type IPipelineRunLogsResponse = z.TypeOf<typeof PipelineRunLogsResponse>;
 export type IPipelineRunLog = z.TypeOf<typeof PipelineRunLog>;
-
-
diff --git a/apps/web-remix/app/components/form/fields/select.field.tsx b/apps/web-remix/app/components/form/fields/select.field.tsx
index 21bcf6eaf..58202c079 100644
--- a/apps/web-remix/app/components/form/fields/select.field.tsx
+++ b/apps/web-remix/app/components/form/fields/select.field.tsx
@@ -40,7 +40,7 @@ export const SelectField = ({
         }
         {...getInputProps()}
       />
-      <FieldLabel>{label}</FieldLabel>
+      {label ? <FieldLabel>{label}</FieldLabel> : null}
       <SelectInput
         id={name}
         options={options}
diff --git a/apps/web-remix/app/components/form/fields/text.field.tsx b/apps/web-remix/app/components/form/fields/text.field.tsx
index 509eb9440..d9ce1b0f4 100644
--- a/apps/web-remix/app/components/form/fields/text.field.tsx
+++ b/apps/web-remix/app/components/form/fields/text.field.tsx
@@ -17,7 +17,7 @@ export const TextInputField = ({
   ...props
 }: Partial<TextInputFieldProps> & {
   validationBehavior?: Partial<ValidationBehaviorOptions>;
-  ref?: React.RefObject<HTMLInputElement | null>;
+  ref?: React.RefObject<HTMLInputElement | null> | null;
 }) => {
   const { name, getInputProps, error } = useFieldContext({
     validationBehavior,
@@ -58,7 +58,7 @@ export function ResettableTextInputField({
   size,
   ...props
 }: Partial<TextInputFieldProps> & { label: string }) {
-  const inputRef = useRef<HTMLInputElement>(null);
+  const inputRef = useRef<HTMLInputElement | null>(null);
   const { name } = useFieldContext({
     validationBehavior: {
       initial: 'onChange',
diff --git a/apps/web-remix/app/components/form/inputs/select/select.input.css b/apps/web-remix/app/components/form/inputs/select/select.input.css
index 9cc4433d3..b0a6d2116 100644
--- a/apps/web-remix/app/components/form/inputs/select/select.input.css
+++ b/apps/web-remix/app/components/form/inputs/select/select.input.css
@@ -11,7 +11,7 @@
 }
 
 .rc-select .rc-select-selector .rc-select-selection-search-input {
-  @apply !bg-white !shadow-none !ring-0 !text-foreground !text-sm !h-[40px] !outline-none;
+  @apply !bg-white !shadow-none !ring-0 !text-foreground !text-sm !h-[36px] !outline-none;
 }
 
 .rc-select .rc-select-selection-placeholder {
diff --git a/apps/web-remix/app/components/form/inputs/select/select.input.tsx b/apps/web-remix/app/components/form/inputs/select/select.input.tsx
index dba29ecde..35afca622 100644
--- a/apps/web-remix/app/components/form/inputs/select/select.input.tsx
+++ b/apps/web-remix/app/components/form/inputs/select/select.input.tsx
@@ -11,7 +11,7 @@ export const SelectInput: React.FC<SelectInputProps> = ({ ...props }) => {
   return (
     <ClientOnly
       fallback={
-        <div className="w-full h-[44px] rounded-lg border-[1.5px] border-input bg-white" />
+        <div className="w-full h-[40px] rounded-lg border-[1.5px] border-input bg-white" />
       }
     >
       {() => <AsyncSelectInputComponent {...props} />}
diff --git a/apps/web-remix/app/components/pages/interfaces/form/formInterface.form.tsx b/apps/web-remix/app/components/pages/interfaces/form/formInterface.form.tsx
index 307b22fb8..1b697ba12 100644
--- a/apps/web-remix/app/components/pages/interfaces/form/formInterface.form.tsx
+++ b/apps/web-remix/app/components/pages/interfaces/form/formInterface.form.tsx
@@ -9,11 +9,14 @@ type PropertyValue =
   | null
   | undefined;
 
+// todo refactor this form after bum to rmv
+
 type State = {
   formValues: {
     [key: string]: PropertyValue;
   };
   formErrors: Record<string, string[]>;
+
   isSubmitting?: boolean;
 };
 
@@ -89,8 +92,10 @@ export const FormContext = React.createContext<{
 export function useForm({
   defaultValues,
   onSubmit,
+  requiredFields,
 }: {
   defaultValues?: State['formValues'];
+  requiredFields?: string[];
   onSubmit?: (
     data: State['formValues'],
     e: React.FormEvent<HTMLFormElement>,
@@ -104,11 +109,14 @@ export function useForm({
 
   const validate = () => {
     const errors: Record<string, string[]> = {};
-    Object.entries(state.formValues).forEach(([key, value]) => {
-      if (!value) {
-        errors[key] = ['This field is required'];
-      }
-    });
+
+    if (requiredFields) {
+      requiredFields.forEach((field) => {
+        if (!state.formValues[field]) {
+          errors[field] = ['This field is required'];
+        }
+      });
+    }
 
     dispatch({ type: 'SET_ERRORS', payload: errors });
 
diff --git a/apps/web-remix/app/components/pages/interfaces/form/formInterface.reducer.tsx b/apps/web-remix/app/components/pages/interfaces/form/formInterface.reducer.tsx
index e325c7852..67097ae21 100644
--- a/apps/web-remix/app/components/pages/interfaces/form/formInterface.reducer.tsx
+++ b/apps/web-remix/app/components/pages/interfaces/form/formInterface.reducer.tsx
@@ -77,6 +77,16 @@ export function formInterfaceReducer(
     case 'DONE':
       return {
         ...state,
+        outputs: Object.keys(state.outputs).reduce(
+          (acc, key) => {
+            acc[key] = {
+              ...state.outputs[key],
+              isCompleted: true,
+            };
+            return acc;
+          },
+          {} as Record<string, Output>,
+        ),
         isWaitingForOutputs: false,
       };
 
diff --git a/apps/web-remix/app/components/pages/pipelines/build/FloatingInterfaces/FloatingChat.tsx b/apps/web-remix/app/components/pages/pipelines/build/FloatingInterfaces/FloatingChat.tsx
index 6aa8498a6..ba71a11be 100644
--- a/apps/web-remix/app/components/pages/pipelines/build/FloatingInterfaces/FloatingChat.tsx
+++ b/apps/web-remix/app/components/pages/pipelines/build/FloatingInterfaces/FloatingChat.tsx
@@ -3,14 +3,14 @@ import { MessageCircle } from 'lucide-react';
 
 import { IconButton, IconButtonProps } from '~/components/iconButton';
 import { BasicLink } from '~/components/link/BasicLink';
-import { IInterfaceConfigForm } from '~/components/pages/pipelines/pipeline.types';
+import { IInterfaceWebchatConfigForm } from '~/components/pages/pipelines/pipeline.types';
 import { useOrganizationId } from '~/hooks/useOrganizationId';
 import { usePipelineId } from '~/hooks/usePipelineId';
 import { cn } from '~/utils/cn';
 import { routes } from '~/utils/routes.utils';
 
 export interface FloatingChatProps {
-  config: IInterfaceConfigForm;
+  config: IInterfaceWebchatConfigForm;
   chatUrl: string;
 }
 
diff --git a/apps/web-remix/app/components/pages/pipelines/build/editBlock/page.tsx b/apps/web-remix/app/components/pages/pipelines/build/editBlock/page.tsx
index 6f3ab604b..f5bc8139a 100644
--- a/apps/web-remix/app/components/pages/pipelines/build/editBlock/page.tsx
+++ b/apps/web-remix/app/components/pages/pipelines/build/editBlock/page.tsx
@@ -13,10 +13,10 @@ import type {
   IBlockConfig,
   IConfigConnection,
   IInterfaceConfig,
+  IInterfaceConfigProperty,
   INode,
   IPipeline,
 } from '~/components/pages/pipelines/pipeline.types';
-import { IInterfaceConfigFormProperty } from '~/components/pages/pipelines/pipeline.types';
 import {
   getEdges,
   getNodes,
@@ -211,8 +211,8 @@ function validateInterfaceConfigs(
 }
 
 function validateInterfaceProperty(updated: IExtendedBlockConfig) {
-  return (property: IInterfaceConfigFormProperty) => {
-    const updatedProperty: IInterfaceConfigFormProperty = { ...property };
+  return (property: IInterfaceConfigProperty) => {
+    const updatedProperty: IInterfaceConfigProperty = { ...property };
 
     if (property.name === updated.oldName) {
       updatedProperty.name = updated.name;
diff --git a/apps/web-remix/app/components/pages/pipelines/interface/form/InterfaceConfigForm.tsx b/apps/web-remix/app/components/pages/pipelines/interface/form/InterfaceConfigForm.tsx
index 7866110c1..1988910a0 100644
--- a/apps/web-remix/app/components/pages/pipelines/interface/form/InterfaceConfigForm.tsx
+++ b/apps/web-remix/app/components/pages/pipelines/interface/form/InterfaceConfigForm.tsx
@@ -1,18 +1,36 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
 import { withZod } from '@remix-validated-form/with-zod';
-import { ValidatedForm } from 'remix-validated-form';
+import startCase from 'lodash.startcase';
+import { Trash } from 'lucide-react';
+import {
+  useControlField,
+  useFieldArray,
+  ValidatedForm,
+} from 'remix-validated-form';
 
-import { InterfaceConfig } from '~/api/pipeline/pipeline.contracts';
+import {
+  InterfaceConfig,
+  InterfaceConfigFormProperty,
+} from '~/api/pipeline/pipeline.contracts';
 import { CheckboxInputField } from '~/components/form/fields/checkbox.field';
-import { Field } from '~/components/form/fields/field.context';
-import { SelectField } from '~/components/form/fields/select.field';
+import { Field, HiddenField } from '~/components/form/fields/field.context';
+import { TextInputField } from '~/components/form/fields/text.field';
+import { SelectInput } from '~/components/form/inputs/select/select.input';
 import { SubmitButton } from '~/components/form/submit';
+import { IconButton } from '~/components/iconButton';
 import { toSelectOption } from '~/components/pages/pipelines/interface/interface.utils';
 import type {
+  IBlockConfig,
   IInterfaceConfig,
+  IInterfaceConfigFormOutputProperty,
+  IInterfaceConfigFormProperty,
+  IInterfaceConfigProperty,
   IPipeline,
 } from '~/components/pages/pipelines/pipeline.types';
+import { errorToast } from '~/components/toasts/errorToast';
+import { Button } from '~/components/ui/button';
 import { Label } from '~/components/ui/label';
+import { cn } from '~/utils/cn';
 
 interface InterfaceConfigFormProps {
   pipeline: IPipeline;
@@ -37,19 +55,16 @@ export const InterfaceConfigForm: React.FC<InterfaceConfigFormProps> = ({
     e: React.FormEvent<HTMLFormElement>,
   ) => {
     e.preventDefault();
+
     const inputs = data.form.inputs.map((input) => {
-      const parsed = JSON.parse(input as unknown as string);
       return {
-        name: parsed.name,
-        type: parsed.type,
-      };
+        ...input,
+      } as IInterfaceConfigFormProperty;
     });
     const outputs = data.form.outputs.map((output) => {
-      const parsed = JSON.parse(output as unknown as string);
       return {
-        name: parsed.name,
-        type: parsed.type,
-      };
+        ...output,
+      } as IInterfaceConfigFormOutputProperty;
     });
 
     const body = {
@@ -60,6 +75,7 @@ export const InterfaceConfigForm: React.FC<InterfaceConfigFormProps> = ({
         public: data.form.public,
       },
     };
+
     onSubmit(body);
   };
 
@@ -70,22 +86,17 @@ export const InterfaceConfigForm: React.FC<InterfaceConfigFormProps> = ({
       noValidate
       onSubmit={handleOnSubmit}
     >
-      <div className="grid gap-3 grid-cols-1 sm:grid-cols-2 md:grid-cols-4 items-center max-w-screen-2xl">
-        <Field name="form.inputs">
-          <SelectField
-            options={inputs.map(toSelectOption)}
-            mode="multiple"
-            label="Input"
-          />
-        </Field>
+      <div className="flex flex-col gap-4 max-w-screen-2xl">
+        <div>
+          <Label className="mb-2 block">Inputs</Label>
 
-        <Field name="form.outputs">
-          <SelectField
-            options={outputs.map(toSelectOption)}
-            mode="multiple"
-            label="Output"
-          />
-        </Field>
+          <Inputs blocks={inputs} />
+        </div>
+
+        <div>
+          <Label className="mb-2 block">Outputs</Label>
+          <Outputs blocks={outputs} />
+        </div>
 
         <Field name="form.public">
           <Label className="flex gap-1 items-center">
@@ -103,16 +114,463 @@ export const InterfaceConfigForm: React.FC<InterfaceConfigFormProps> = ({
   );
 };
 
+interface IOProps {
+  blocks: IBlockConfig[];
+}
+function Inputs({ blocks }: IOProps) {
+  const [items, { push, remove }] = useFieldArray<IInterfaceConfigFormProperty>(
+    'form.inputs',
+    {},
+  );
+
+  const [availableBlocks, setAvailableBlocks] = useState(
+    blocks.filter(
+      (block) =>
+        !items.map((item) => item.defaultValue.name).includes(block.name),
+    ),
+  );
+
+  const onAdd = () => {
+    if (availableBlocks.length === 0) return;
+
+    try {
+      push(
+        InterfaceConfigFormProperty.parse({
+          name: availableBlocks[0].name,
+          type: availableBlocks[0].type,
+        }),
+      );
+
+      setAvailableBlocks((prev) => prev.slice(1));
+    } catch (err) {
+      console.error(err);
+      errorToast('Something went wrong');
+    }
+  };
+
+  const onGlobalChange = (prevName: string, nextName: string) => {
+    const prevBlock = blocks.find((block) => block.name === prevName);
+    if (!prevBlock) return;
+
+    setAvailableBlocks(
+      [prevBlock, ...availableBlocks].filter(
+        (block) => block.name !== nextName,
+      ),
+    );
+  };
+
+  const onRemove = (index: number) => {
+    remove(index);
+
+    setAvailableBlocks((prev) => [
+      ...prev,
+      blocks.find(
+        (block) => block.name === items[index].defaultValue.name,
+      ) as IBlockConfig,
+    ]);
+  };
+
+  const hasInputs = availableBlocks.length !== blocks.length;
+
+  return (
+    <IOWrapper
+      className={cn({
+        'overflow-y-auto': hasInputs,
+      })}
+    >
+      <IOInnerWrapper className={cn({ 'min-w-[780px]': hasInputs })}>
+        {hasInputs ? (
+          <IOBody>
+            <IOHeader>
+              <IOHeaderCell>Input</IOHeaderCell>
+              <IOHeaderCell>Label</IOHeaderCell>
+              <IOHeaderCell>Description</IOHeaderCell>
+              <IOHeaderCell>Required</IOHeaderCell>
+            </IOHeader>
+
+            {items.map((input, index) => (
+              <Input
+                key={input.key}
+                input={input}
+                index={index}
+                onRemove={onRemove}
+                onGlobalChange={onGlobalChange}
+                options={availableBlocks}
+              />
+            ))}
+          </IOBody>
+        ) : null}
+
+        <Button
+          onClick={onAdd}
+          disabled={availableBlocks.length === 0}
+          type="button"
+          size="xxs"
+          variant="ghost"
+        >
+          Add input
+        </Button>
+      </IOInnerWrapper>
+    </IOWrapper>
+  );
+}
+
+function Input({
+  input,
+  index,
+  onRemove,
+  onGlobalChange,
+  options,
+}: {
+  index: number;
+  input: { defaultValue: IInterfaceConfigFormProperty; key: string };
+  onRemove: (index: number) => void;
+  onGlobalChange: (prev: string, next: string) => void;
+  options: IBlockConfig[];
+}) {
+  const [name, setName] = useControlField<string>(`form.inputs[${index}].name`);
+  const [type, setType] = useControlField<string>(`form.inputs[${index}].type`);
+
+  const selected = { type, name };
+  const onSelect = (value: string) => {
+    try {
+      const values = decodeNameAndType(value);
+
+      onGlobalChange(selected.name, values.name);
+
+      setName(values.name);
+      setType(values.type);
+    } catch (err) {
+      console.error(err);
+    }
+  };
+  return (
+    <IOItemWrapper>
+      <HiddenField name={`form.inputs[${index}].type`} value={type} />
+      <HiddenField name={`form.inputs[${index}].name`} value={name} />
+
+      <SelectInput
+        options={[...options.map(toSelectOption), toSelectOption(selected)]}
+        value={name}
+        placeholder="Select..."
+        onChange={onSelect}
+      />
+
+      <Field name={`form.inputs[${index}].label`}>
+        <TextInputField
+          placeholder="Label"
+          defaultValue={
+            input.defaultValue.label || startCase(input.defaultValue.name)
+          }
+        />
+      </Field>
+
+      <Field name={`form.inputs[${index}].description`}>
+        <TextInputField defaultValue={input.defaultValue.description} />
+      </Field>
+
+      <Field name={`form.inputs[${index}].required`}>
+        <div className="md:h-10 flex items-center">
+          <CheckboxInputField defaultChecked={input.defaultValue.required} />
+        </div>
+      </Field>
+
+      <IOItemButtonWrapper>
+        <IconButton
+          type="button"
+          size="xxs"
+          onClick={() => onRemove(index)}
+          variant="ghost"
+          icon={<Trash />}
+        />
+      </IOItemButtonWrapper>
+    </IOItemWrapper>
+  );
+}
+
+function Outputs({ blocks }: IOProps) {
+  const [items, { push, remove }] = useFieldArray<IInterfaceConfigFormProperty>(
+    'form.outputs',
+    {},
+  );
+
+  const [availableBlocks, setAvailableBlocks] = useState(
+    blocks.filter(
+      (block) =>
+        !items.map((item) => item.defaultValue.name).includes(block.name),
+    ),
+  );
+
+  const onAdd = () => {
+    if (availableBlocks.length === 0) return;
+
+    try {
+      push(
+        InterfaceConfigFormProperty.parse({
+          name: availableBlocks[0].name,
+          type: availableBlocks[0].type,
+        }),
+      );
+
+      setAvailableBlocks((prev) => prev.slice(1));
+    } catch (err) {
+      console.error(err);
+      errorToast('Something went wrong');
+    }
+  };
+
+  const onGlobalChange = (prevName: string, nextName: string) => {
+    const prevBlock = blocks.find((block) => block.name === prevName);
+    if (!prevBlock) return;
+
+    setAvailableBlocks(
+      [prevBlock, ...availableBlocks].filter(
+        (block) => block.name !== nextName,
+      ),
+    );
+  };
+
+  const onRemove = (index: number) => {
+    remove(index);
+
+    setAvailableBlocks((prev) => [
+      ...prev,
+      blocks.find(
+        (block) => block.name === items[index].defaultValue.name,
+      ) as IBlockConfig,
+    ]);
+  };
+
+  const hasOutputs = availableBlocks.length !== blocks.length;
+
+  return (
+    <IOWrapper
+      className={cn({
+        'overflow-y-auto': hasOutputs,
+      })}
+    >
+      <IOInnerWrapper className={cn({ 'min-w-[780px]': hasOutputs })}>
+        {hasOutputs ? (
+          <IOBody>
+            <IOHeader>
+              <IOHeaderCell>Output</IOHeaderCell>
+              <IOHeaderCell>Label</IOHeaderCell>
+              <IOHeaderCell>Description</IOHeaderCell>
+              <span />
+            </IOHeader>
+
+            {items.map((output, index) => (
+              <Output
+                key={output.key}
+                output={output}
+                index={index}
+                onRemove={onRemove}
+                onGlobalChange={onGlobalChange}
+                options={availableBlocks}
+              />
+            ))}
+          </IOBody>
+        ) : null}
+
+        <Button
+          onClick={onAdd}
+          disabled={availableBlocks.length === 0}
+          type="button"
+          size="xxs"
+          variant="ghost"
+        >
+          Add output
+        </Button>
+      </IOInnerWrapper>
+    </IOWrapper>
+  );
+}
+
+function Output({
+  output,
+  index,
+  onRemove,
+  onGlobalChange,
+  options,
+}: {
+  index: number;
+  output: { defaultValue: IInterfaceConfigFormOutputProperty; key: string };
+  onRemove: (index: number) => void;
+  onGlobalChange: (prev: string, next: string) => void;
+  options: IBlockConfig[];
+}) {
+  const [name, setName] = useControlField<string>(
+    `form.outputs[${index}].name`,
+  );
+  const [type, setType] = useControlField<string>(
+    `form.outputs[${index}].type`,
+  );
+
+  const selected = { type, name };
+  const onSelect = (value: string) => {
+    try {
+      const values = decodeNameAndType(value);
+
+      onGlobalChange(selected.name, values.name);
+
+      setName(values.name);
+      setType(values.type);
+    } catch (err) {
+      console.error(err);
+    }
+  };
+  return (
+    <IOItemWrapper>
+      <HiddenField name={`form.outputs[${index}].type`} value={type} />
+      <HiddenField name={`form.outputs[${index}].name`} value={name} />
+
+      <SelectInput
+        options={[...options.map(toSelectOption), toSelectOption(selected)]}
+        value={name}
+        placeholder="Select..."
+        onChange={onSelect}
+      />
+
+      <Field name={`form.outputs[${index}].label`}>
+        <TextInputField
+          placeholder="Label"
+          defaultValue={
+            output.defaultValue.label || startCase(output.defaultValue.name)
+          }
+        />
+      </Field>
+
+      <Field name={`form.outputs[${index}].description`}>
+        <TextInputField defaultValue={output.defaultValue.description} />
+      </Field>
+
+      <span />
+
+      <IOItemButtonWrapper>
+        <IconButton
+          type="button"
+          size="xxs"
+          onClick={() => onRemove(index)}
+          variant="ghost"
+          icon={<Trash />}
+        />
+      </IOItemButtonWrapper>
+    </IOItemWrapper>
+  );
+}
+
+function IOWrapper({
+  className,
+  children,
+  ...rest
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn(
+        'w-full max-w-[835px] bg-muted rounded-lg px-3 py-4',
+        className,
+      )}
+      {...rest}
+    >
+      {children}
+    </div>
+  );
+}
+
+function IOInnerWrapper({
+  className,
+  children,
+  ...rest
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div className={cn('flex flex-col items-start gap-2', className)} {...rest}>
+      {children}
+    </div>
+  );
+}
+
+function IOBody({
+  className,
+  children,
+  ...rest
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div className={cn('space-y-2', className)} {...rest}>
+      {children}
+    </div>
+  );
+}
+
+function IOHeader({
+  className,
+  children,
+  ...rest
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <header
+      className={cn(
+        'grid grid-cols-[2fr_2fr_4fr_1fr_1fr] gap-3 border-b pb-2',
+        className,
+      )}
+      {...rest}
+    >
+      {children}
+    </header>
+  );
+}
+
+function IOHeaderCell({
+  className,
+  children,
+  ...rest
+}: React.HTMLAttributes<HTMLParagraphElement>) {
+  return (
+    <p className={cn('text-sm text-muted-foreground', className)} {...rest}>
+      {children}
+    </p>
+  );
+}
+
+function IOItemWrapper({
+  className,
+  children,
+  ...rest
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn(
+        'grid grid-cols-[2fr_2fr_4fr_1fr_1fr] gap-3 items-center w-full justify-between',
+        className,
+      )}
+      {...rest}
+    >
+      {children}
+    </div>
+  );
+}
+
+function IOItemButtonWrapper({
+  className,
+  children,
+  ...rest
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div className={cn('flex justify-end items-center', className)} {...rest}>
+      {children}
+    </div>
+  );
+}
+
 function toSelectDefaults(data: IInterfaceConfig) {
   return {
     form: {
-      inputs: data.form.inputs.map((item) =>
-        JSON.stringify({ name: item.name, type: item.type }),
-      ),
-      outputs: data.form.outputs.map((item) =>
-        JSON.stringify({ name: item.name, type: item.type }),
-      ),
+      inputs: data.form.inputs.map((item) => item),
+      outputs: data.form.outputs.map((item) => item),
       public: data.form.public,
     },
   };
 }
+
+function decodeNameAndType(value: string) {
+  return JSON.parse(value) as IInterfaceConfigProperty;
+}
diff --git a/apps/web-remix/app/components/pages/pipelines/interface/interface.utils.ts b/apps/web-remix/app/components/pages/pipelines/interface/interface.utils.ts
index 41ce9a3d8..8b65b19aa 100644
--- a/apps/web-remix/app/components/pages/pipelines/interface/interface.utils.ts
+++ b/apps/web-remix/app/components/pages/pipelines/interface/interface.utils.ts
@@ -1,6 +1,4 @@
-import type { IBlockConfig } from '~/components/pages/pipelines/pipeline.types';
-
-export function toSelectOption(item: IBlockConfig) {
+export function toSelectOption(item: { name: string; type: string }) {
   return {
     id: item.name.toString(),
     value: JSON.stringify({ name: item.name, type: item.type }),
diff --git a/apps/web-remix/app/components/pages/pipelines/list/PipelinesListItem.tsx b/apps/web-remix/app/components/pages/pipelines/list/PipelinesListItem.tsx
index 323e98f1a..4cc7bb7c6 100644
--- a/apps/web-remix/app/components/pages/pipelines/list/PipelinesListItem.tsx
+++ b/apps/web-remix/app/components/pages/pipelines/list/PipelinesListItem.tsx
@@ -49,7 +49,11 @@ import { cn } from '~/utils/cn';
 import { MonetaryValue } from '~/utils/MonetaryValue';
 import { routes } from '~/utils/routes.utils';
 
-import type { IInterfaceConfigForm, IPipeline } from '../pipeline.types';
+import type {
+  IInterfaceFormConfigForm,
+  IInterfaceWebchatConfigForm,
+  IPipeline,
+} from '../pipeline.types';
 
 interface PipelinesListItemProps extends PropsWithChildren {
   className?: string;
@@ -250,7 +254,9 @@ function PipelineItemInterfaceBadge({
   className,
   interfaceConfig,
   ...rest
-}: BadgeProps & { interfaceConfig: IInterfaceConfigForm }) {
+}: BadgeProps & {
+  interfaceConfig: IInterfaceFormConfigForm | IInterfaceWebchatConfigForm;
+}) {
   return (
     <TooltipProvider>
       <Tooltip delayDuration={500}>
@@ -294,6 +300,8 @@ function PipelineItemInterfaceBadge({
   );
 }
 
-function isInterfaceInitialized(config: IInterfaceConfigForm) {
+function isInterfaceInitialized(
+  config: IInterfaceFormConfigForm | IInterfaceWebchatConfigForm,
+) {
   return config.outputs.length > 0 && config.inputs.length > 0;
 }
diff --git a/apps/web-remix/app/components/pages/pipelines/pipeline.types.ts b/apps/web-remix/app/components/pages/pipelines/pipeline.types.ts
index d60992759..8c7cb8b87 100644
--- a/apps/web-remix/app/components/pages/pipelines/pipeline.types.ts
+++ b/apps/web-remix/app/components/pages/pipelines/pipeline.types.ts
@@ -11,8 +11,11 @@ import type {
   Alias,
   ExtendedPipeline,
   InterfaceConfig,
-  InterfaceConfigForm,
+  InterfaceConfigFormOutputProperty,
   InterfaceConfigFormProperty,
+  InterfaceConfigProperty,
+  InterfaceFormConfigForm,
+  InterfaceWebchatConfigForm,
   Pipeline,
   PipelineCost,
   PipelineCosts,
@@ -79,11 +82,21 @@ export type IBlockTypes = z.TypeOf<typeof BlockTypes>;
 export type IBlockType = z.TypeOf<typeof BlockType>;
 
 export type IInterfaceConfig = z.infer<typeof InterfaceConfig>;
-export type IInterfaceConfigForm = z.infer<typeof InterfaceConfigForm>;
+
+export type IInterfaceWebchatConfigForm = z.infer<
+  typeof InterfaceWebchatConfigForm
+>;
+export type IInterfaceFormConfigForm = z.infer<typeof InterfaceFormConfigForm>;
+
+export type IInterfaceConfigProperty = z.infer<typeof InterfaceConfigProperty>;
 export type IInterfaceConfigFormProperty = z.infer<
   typeof InterfaceConfigFormProperty
 >;
 
+export type IInterfaceConfigFormOutputProperty = z.infer<
+  typeof InterfaceConfigFormOutputProperty
+>;
+
 export type IPipeline = z.infer<typeof Pipeline>;
 
 export type IExtendedPipeline = z.infer<typeof ExtendedPipeline>;
diff --git a/apps/web-remix/app/routes/forms.$organizationId.pipelines.$pipelineId.tsx b/apps/web-remix/app/routes/forms.$organizationId.pipelines.$pipelineId.tsx
index 321c971a3..18abd80aa 100644
--- a/apps/web-remix/app/routes/forms.$organizationId.pipelines.$pipelineId.tsx
+++ b/apps/web-remix/app/routes/forms.$organizationId.pipelines.$pipelineId.tsx
@@ -1,3 +1,4 @@
+import type { PropsWithChildren } from 'react';
 import React, { useCallback, useEffect, useReducer } from 'react';
 import type { LoaderFunctionArgs, MetaFunction } from '@remix-run/node';
 import { useLoaderData } from '@remix-run/react';
@@ -29,6 +30,7 @@ import type {
   TextOutput,
 } from '~/components/pages/interfaces/form/formInterface.reducer';
 import {
+  done,
   formInterfaceReducer,
   generate,
   setOutput,
@@ -39,7 +41,10 @@ import {
   NodeCopyButton,
   NodeDownloadButton,
 } from '~/components/pages/pipelines/Nodes/CustomNodes/NodeActionButtons';
-import type { IInterfaceConfigFormProperty } from '~/components/pages/pipelines/pipeline.types';
+import type {
+  IInterfaceConfigFormOutputProperty,
+  IInterfaceConfigFormProperty,
+} from '~/components/pages/pipelines/pipeline.types';
 import { usePipelineRun } from '~/components/pages/pipelines/usePipelineRun';
 import { Button } from '~/components/ui/button';
 import { InputMessage, Label } from '~/components/ui/label';
@@ -84,6 +89,18 @@ export default function WebsiteForm() {
     isWaitingForOutputs: false,
   });
 
+  useEffect(() => {
+    if (!state.isWaitingForOutputs) return;
+
+    const id = setTimeout(() => {
+      dispatch(done());
+    }, 10000);
+
+    return () => {
+      clearTimeout(id);
+    };
+  }, [state.isWaitingForOutputs]);
+
   const onBlockOutput: OnBlockOutput = (block, _output, payload, metadata) => {
     if (doesOutputExist(block)) {
       if (payload instanceof Uint8Array && 'file_type' in metadata) {
@@ -159,6 +176,15 @@ export default function WebsiteForm() {
 
   const { onSubmit, ...formProps } = useForm({
     onSubmit: handleOnSubmit,
+    requiredFields: pipeline.interface_config.form.inputs.reduce(
+      (acc, curr) => {
+        if (curr.required) {
+          return [...acc, curr.name];
+        }
+        return acc;
+      },
+      [] as string[],
+    ),
     defaultValues: pipeline.interface_config.form.inputs.reduce(
       (acc, curr) => ({
         ...acc,
@@ -201,13 +227,14 @@ export default function WebsiteForm() {
           </form>
 
           <div className="flex flex-col gap-4">
-            {Object.entries(state.outputs).map(([key, output]) => (
+            {pipeline.interface_config.form.outputs.map((output) => (
               <FormInterfaceOutput
-                key={key}
-                data={
+                key={output.name}
+                data={output}
+                result={
                   state.isWaitingForOutputs
-                    ? { ...output, value: undefined }
-                    : output
+                    ? { ...state.outputs[output.name], value: undefined }
+                    : state.outputs[output.name]
                 }
               />
             ))}
@@ -226,20 +253,24 @@ export function FormInterfaceInput({ data }: FormInterfaceInputProps) {
   if (data.type === 'text_input') {
     return (
       <>
-        <Label>{data.name}</Label>
+        <Label>{data.label || data.name}</Label>
         <div>
           <FormInterfaceTextInput data={data} />
-          <FormInterfaceFieldMessage data={data} />
+          <FormInterfaceFieldMessage data={data}>
+            {data.description}
+          </FormInterfaceFieldMessage>
         </div>
       </>
     );
   } else if (data.type === 'file_input') {
     return (
       <>
-        <Label>{data.name}</Label>
+        <Label>{data.label || data.name}</Label>
         <div>
           <FormInterfaceFileInput data={data} />
-          <FormInterfaceFieldMessage data={data} />
+          <FormInterfaceFieldMessage data={data}>
+            {data.description}
+          </FormInterfaceFieldMessage>
         </div>
 
         <div>
@@ -268,11 +299,13 @@ export function FormInterfaceInput({ data }: FormInterfaceInputProps) {
   } else if (data.type === 'image_input') {
     return (
       <>
-        <Label>{data.name}</Label>
+        <Label>{data.label || data.name}</Label>
 
         <div>
           <FormInterfaceFileInput data={data} accept="image/*" />
-          <FormInterfaceFieldMessage data={data} />
+          <FormInterfaceFieldMessage data={data}>
+            {data.description}
+          </FormInterfaceFieldMessage>
         </div>
 
         <div>
@@ -320,12 +353,15 @@ function FormInterfaceTextInput({ data }: FormInterfaceInputProps) {
   );
 }
 
-function FormInterfaceFieldMessage({ data }: FormInterfaceInputProps) {
+function FormInterfaceFieldMessage({
+  data,
+  children,
+}: PropsWithChildren<FormInterfaceInputProps>) {
   const { errors } = useFormField(data.name);
 
   const isError = errors && errors.length > 0;
 
-  const body = isError ? errors.join(', ') : null;
+  const body = isError ? errors.join(', ') : children;
 
   if (!body) {
     return null;
@@ -444,76 +480,100 @@ function renderSize(size: number) {
 }
 
 interface FormInterfaceOutputProps {
-  data: Output;
+  result: Output;
+  data: IInterfaceConfigFormOutputProperty;
 }
 
-export function FormInterfaceOutput({ data }: FormInterfaceOutputProps) {
-  if (data.type === 'text_output') {
-    return <FormInterfaceTextOutput data={data as TextOutput} />;
+export function FormInterfaceOutput({
+  data,
+  result,
+}: FormInterfaceOutputProps) {
+  if (result.type === 'text_output') {
+    return (
+      <FormInterfaceTextOutput result={result as TextOutput} data={data} />
+    );
   } else if (
-    (data.type === 'file_output' || data.type === 'image_output') &&
-    data.value &&
-    data.metadata &&
-    !data.metadata.file_type.includes('image')
+    (result.type === 'file_output' || result.type === 'image_output') &&
+    result.value &&
+    result.metadata &&
+    !result.metadata.file_type.includes('image')
   ) {
-    return <FormInterfaceFileOutput data={data as Required<FileOutput>} />;
+    return (
+      <FormInterfaceFileOutput
+        result={result as Required<FileOutput>}
+        data={data}
+      />
+    );
   } else if (
-    data.type === 'image_output' &&
-    data.value &&
-    data.metadata &&
-    data.metadata.file_type.includes('image')
+    result.type === 'image_output' &&
+    result.value &&
+    result.metadata &&
+    result.metadata.file_type.includes('image')
   ) {
-    console.log(data.metadata);
-    return <FormInterfaceImageOutput data={data as Required<FileOutput>} />;
+    return (
+      <FormInterfaceImageOutput
+        result={result as Required<FileOutput>}
+        data={data}
+      />
+    );
   }
 
   return null;
 }
 
 interface FormInterfaceTextOutputProps {
-  data: TextOutput;
+  result: TextOutput;
+  data: IInterfaceConfigFormOutputProperty;
 }
 
 export function FormInterfaceTextOutput({
   data,
+  result,
 }: FormInterfaceTextOutputProps) {
   return (
     <div className="w-full">
       <div className="flex items-center justify-between gap2 flex-wrap mb-2">
-        <Label>{data.name}</Label>
+        <Label>{data.label || data.name}</Label>
         <div className="mb-1 flex gap-1">
-          <NodeCopyButton text={data.value ?? ''} />
+          <NodeCopyButton text={result.value ?? ''} />
 
-          <NodeDownloadButton blockName={data.name} text={data.value ?? ''} />
+          <NodeDownloadButton blockName={data.name} text={result.value ?? ''} />
         </div>
       </div>
+
       <div className="bg-white w-full prose min-w-[280px] max-w-full px-3 py-1 overflow-y-auto resize min-h-[100px] max-h-[500px] border border-input rounded-md">
-        <ChatMarkdown>{data.value ?? ''}</ChatMarkdown>
+        <ChatMarkdown>{result.value ?? ''}</ChatMarkdown>
       </div>
+
+      {data.description ? (
+        <InputMessage size="sm">{data.description}</InputMessage>
+      ) : null}
     </div>
   );
 }
 
 interface FormInterfaceFileOutputProps {
-  data: Required<FileOutput>;
+  result: Required<FileOutput>;
+  data: IInterfaceConfigFormOutputProperty;
 }
 
 export function FormInterfaceFileOutput({
   data,
+  result,
 }: FormInterfaceFileOutputProps) {
-  const fileName = data.metadata?.file_name ?? 'file';
+  const fileName = result.metadata?.file_name ?? 'file';
 
   const download = () => {
-    downloadFile(data.value, fileName);
+    downloadFile(result.value, fileName);
   };
 
   return (
     <div className="flex flex-col gap-2">
-      <Label>{data.name}</Label>
+      <Label>{data.label || data.name}</Label>
 
-      {data.value ? (
+      {result.value ? (
         <FormInterfaceFilePreviewItem
-          file={new File([data.value], fileName)}
+          file={new File([result.value], fileName)}
           action={
             <IconButton
               icon={<FileDown />}
@@ -526,26 +586,31 @@ export function FormInterfaceFileOutput({
           }
         />
       ) : null}
+
+      {data.description ? (
+        <InputMessage size="sm">{data.description}</InputMessage>
+      ) : null}
     </div>
   );
 }
 
 export function FormInterfaceImageOutput({
   data,
+  result,
 }: FormInterfaceFileOutputProps) {
-  const fileName = data.metadata?.file_name ?? 'image';
+  const fileName = result.metadata?.file_name ?? 'image';
 
   const download = () => {
-    downloadFile(data.value, fileName);
+    downloadFile(result.value, fileName);
   };
 
   return (
     <div className="flex flex-col gap-2">
-      <Label>{data.name}</Label>
+      <Label>{data.label || data.name}</Label>
 
-      {data.value ? (
+      {result.value ? (
         <FormInterfaceImagePreviewItem
-          file={new File([data.value], fileName)}
+          file={new File([result.value], fileName)}
           action={
             <IconButton
               icon={<ImageDown />}
@@ -557,6 +622,10 @@ export function FormInterfaceImageOutput({
           }
         />
       ) : null}
+
+      {data.description ? (
+        <InputMessage size="sm">{data.description}</InputMessage>
+      ) : null}
     </div>
   );
 }