diff --git a/web/README.md b/web/README.md
index 1ae75a221..6111df55f 100644
--- a/web/README.md
+++ b/web/README.md
@@ -48,7 +48,7 @@ yarn install
 
 ### Usage
 ```sh
-cp .env.example .env
+cp .env.template .env
 ```
 edit the `API_BASE_URL` to the real address
 
diff --git a/web/components/flow/node-param-handler.tsx b/web/components/flow/node-param-handler.tsx
index 26eb2e4ef..58e9c8d78 100644
--- a/web/components/flow/node-param-handler.tsx
+++ b/web/components/flow/node-param-handler.tsx
@@ -9,7 +9,7 @@ import {
   RenderCheckbox,
   RenderRadio,
   RenderCascader,
-  RenderDataPicker,
+  RenderDatePicker,
   RenderInput,
   RenderSlider,
   RenderTreeSelect,
@@ -28,7 +28,6 @@ interface NodeParamHandlerProps {
 // render node parameters item
 const NodeParamHandler: React.FC<NodeParamHandlerProps> = ({ node, data, label, index }) => {
   function onChange(value: any) {
-    console.log(value);
     data.value = value;
   }
 
@@ -116,7 +115,7 @@ const NodeParamHandler: React.FC<NodeParamHandlerProps> = ({ node, data, label,
   function renderNodeWithUiParam(data: IFlowNodeParameter) {
     let defaultValue = data.value ?? data.default;
     const props = { data, defaultValue, onChange };
-
+    
     switch (data?.ui?.ui_type) {
       case 'select':
         return <RenderSelect {...props} />;
@@ -134,8 +133,8 @@ const NodeParamHandler: React.FC<NodeParamHandlerProps> = ({ node, data, label,
         return <RenderTextArea {...props} />;
       case 'slider':
         return <RenderSlider {...props} />;
-      case 'data_picker':
-        return <RenderDataPicker {...props} />;
+      case 'date_picker':
+        return <RenderDatePicker {...props} />;
       case 'time_picker':
         return <RenderTimePicker {...props} />;
       case 'tree_select':
diff --git a/web/components/flow/node-renderer/cascader.tsx b/web/components/flow/node-renderer/cascader.tsx
index b7b9c4a9f..4c9d69ac8 100644
--- a/web/components/flow/node-renderer/cascader.tsx
+++ b/web/components/flow/node-renderer/cascader.tsx
@@ -13,13 +13,15 @@ export const RenderCascader = (params: Props) => {
   const attr = convertKeysToCamelCase(data.ui?.attr || {});
 
   return (
-    <Cascader 
-      {...attr}
-      options={data.options} 
-      defaultValue={defaultValue}
-      placeholder="Please select" 
-      className="w-full nodrag"
-      onChange={onChange} 
-    />
+    <div className="p-2 text-sm">
+      <Cascader
+        {...attr}
+        options={data.options}
+        defaultValue={defaultValue}
+        placeholder="please select"
+        className="w-full nodrag"
+        onChange={onChange}
+      />
+    </div>
   );
 };
diff --git a/web/components/flow/node-renderer/checkbox.tsx b/web/components/flow/node-renderer/checkbox.tsx
index 194005982..34b8ac657 100644
--- a/web/components/flow/node-renderer/checkbox.tsx
+++ b/web/components/flow/node-renderer/checkbox.tsx
@@ -14,13 +14,9 @@ export const RenderCheckbox = (params: Props) => {
 
   return (
     data.options?.length > 0 && (
-      <Checkbox.Group
-        {...attr}
-        options={data.options}
-        disabled
-        defaultValue={defaultValue}
-        onChange={onChange}
-      />
+      <div className="p-2 text-sm">
+        <Checkbox.Group {...attr} options={data.options} defaultValue={defaultValue} onChange={onChange} />
+      </div>
     )
   );
 };
diff --git a/web/components/flow/node-renderer/data-picker.tsx b/web/components/flow/node-renderer/data-picker.tsx
deleted file mode 100644
index 69f18d78f..000000000
--- a/web/components/flow/node-renderer/data-picker.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { IFlowNodeParameter } from '@/types/flow';
-import { convertKeysToCamelCase } from '@/utils/flow';
-import { DatePicker } from 'antd';
-import dayjs from 'dayjs';
-
-type Props = {
-  data: IFlowNodeParameter;
-  defaultValue: any;
-  onChange: (value: any) => void;
-};
-
-export const RenderDataPicker = (params: Props) => {
-  const { data, defaultValue, onChange } = params;
-  const attr = convertKeysToCamelCase(data.ui?.attr || {});
-
-  return <DatePicker {...attr} defaultValue={dayjs(defaultValue)} onChange={onChange} />;
-};
diff --git a/web/components/flow/node-renderer/date-picker.tsx b/web/components/flow/node-renderer/date-picker.tsx
new file mode 100644
index 000000000..d69538a61
--- /dev/null
+++ b/web/components/flow/node-renderer/date-picker.tsx
@@ -0,0 +1,25 @@
+import { IFlowNodeParameter } from '@/types/flow';
+import { convertKeysToCamelCase } from '@/utils/flow';
+import { DatePicker, DatePickerProps } from 'antd';
+import dayjs from 'dayjs';
+
+type Props = {
+  data: IFlowNodeParameter;
+  defaultValue: any;
+  onChange: (value: any) => void;
+};
+
+export const RenderDatePicker = (params: Props) => {
+  const { data, defaultValue, onChange } = params;
+  const attr = convertKeysToCamelCase(data.ui?.attr || {});
+
+  const onChangeDate: DatePickerProps['onChange'] = (date, dateString) => {
+    onChange(dateString);
+  };
+
+  return (
+    <div className="p-2 text-sm">
+      <DatePicker {...attr} className="w-full" defaultValue={dayjs(defaultValue)} onChange={onChangeDate} />
+    </div>
+  );
+};
diff --git a/web/components/flow/node-renderer/index.ts b/web/components/flow/node-renderer/index.ts
index 277c03411..4eb0d5c39 100644
--- a/web/components/flow/node-renderer/index.ts
+++ b/web/components/flow/node-renderer/index.ts
@@ -1,6 +1,6 @@
 export * from './select';
 export * from './cascader';
-export * from './data-picker';
+export * from './date-picker';
 export * from './input';
 export * from './checkbox';
 export * from './radio';
diff --git a/web/components/flow/node-renderer/input.tsx b/web/components/flow/node-renderer/input.tsx
index b6f1f5052..8a47d3d2f 100644
--- a/web/components/flow/node-renderer/input.tsx
+++ b/web/components/flow/node-renderer/input.tsx
@@ -13,13 +13,16 @@ export const RenderInput = (params: Props) => {
   const attr = convertKeysToCamelCase(data.ui?.attr || {});
 
   return (
-    <Input
-      {...attr}
-      className="w-full"
-      defaultValue={defaultValue}
-      onChange={(e) => {
-        onChange(e.target.value);
-      }}
-    />
+    <div className="p-2 text-sm">
+      <Input
+        {...attr}
+        className="w-full"
+        placeholder="please input"
+        defaultValue={defaultValue}
+        onChange={(e) => {
+          onChange(e.target.value);
+        }}
+      />
+    </div>
   );
 };
diff --git a/web/components/flow/node-renderer/radio.tsx b/web/components/flow/node-renderer/radio.tsx
index 4b5a1a194..1bc1763a6 100644
--- a/web/components/flow/node-renderer/radio.tsx
+++ b/web/components/flow/node-renderer/radio.tsx
@@ -13,13 +13,15 @@ export const RenderRadio = (params: Props) => {
   const attr = convertKeysToCamelCase(data.ui?.attr || {});
 
   return (
-    <Radio.Group
-      {...attr}
-      options={data.options}
-      onChange={(e) => {
-        onChange(e.target.checked);
-      }}
-      defaultValue={defaultValue}
-    />
+    <div className="p-2 text-sm">
+      <Radio.Group
+        {...attr}
+        options={data.options}
+        onChange={(e) => {
+          onChange(e.target.value);
+        }}
+        defaultValue={defaultValue}
+      />
+    </div>
   );
 };
diff --git a/web/components/flow/node-renderer/select.tsx b/web/components/flow/node-renderer/select.tsx
index 0752d6959..8472f39b4 100644
--- a/web/components/flow/node-renderer/select.tsx
+++ b/web/components/flow/node-renderer/select.tsx
@@ -13,13 +13,15 @@ export const RenderSelect = (params: Props) => {
   const attr = convertKeysToCamelCase(data.ui?.attr || {});
 
   return (
-    <Select
-      {...attr}
-      className="w-full nodrag"
-      placeholder="Please select" 
-      defaultValue={defaultValue}
-      options={data.options}
-      onChange={onChange}
-    />
+    <div className="p-2 text-sm">
+      <Select
+        {...attr}
+        className="w-full nodrag"
+        placeholder="please select"
+        defaultValue={defaultValue}
+        options={data.options}
+        onChange={onChange}
+      />
+    </div>
   );
 };
diff --git a/web/components/flow/node-renderer/slider-list.tsx b/web/components/flow/node-renderer/slider-list.tsx
index 330926040..a1e3553f4 100644
--- a/web/components/flow/node-renderer/slider-list.tsx
+++ b/web/components/flow/node-renderer/slider-list.tsx
@@ -19,14 +19,15 @@ export const RenderSlider = (params: TextAreaProps) => {
     setInputValue(newValue as number);
     onChange(newValue as number);
   };
-  
+
   return (
-    <>
+    <div className="p-2 text-sm">
       {data?.ui?.show_input ? (
         <Row>
           <Col span={12}>
             <Slider {...attr} onChange={onChangeSlider} value={typeof inputValue === 'number' ? inputValue : 0} />
           </Col>
+
           <Col span={4}>
             <InputNumber {...attr} style={{ margin: '0 16px' }} value={inputValue} onChange={onChangeSlider} />
           </Col>
@@ -34,6 +35,6 @@ export const RenderSlider = (params: TextAreaProps) => {
       ) : (
         <Slider {...attr} onChange={onChangeSlider} value={typeof inputValue === 'number' ? inputValue : 0} />
       )}
-    </>
+    </div>
   );
 };
diff --git a/web/components/flow/node-renderer/slider.tsx b/web/components/flow/node-renderer/slider.tsx
index 1017e20bb..bb8456adb 100644
--- a/web/components/flow/node-renderer/slider.tsx
+++ b/web/components/flow/node-renderer/slider.tsx
@@ -21,7 +21,7 @@ export const RenderSlider = (params: TextAreaProps) => {
   };
 
   return (
-    <>
+    <div className="p-2 text-sm">
       {data?.ui?.show_input ? (
         <Row>
           <Col span={12}>
@@ -34,6 +34,6 @@ export const RenderSlider = (params: TextAreaProps) => {
       ) : (
         <Slider {...attr} onChange={onChangeSlider} value={typeof inputValue === 'number' ? inputValue : 0} />
       )}
-    </>
+    </div>
   );
 };
diff --git a/web/components/flow/node-renderer/textarea.tsx b/web/components/flow/node-renderer/textarea.tsx
index a22caed10..5f8c55ac0 100644
--- a/web/components/flow/node-renderer/textarea.tsx
+++ b/web/components/flow/node-renderer/textarea.tsx
@@ -15,12 +15,8 @@ export const RenderTextArea = (params: TextAreaProps) => {
   convertKeysToCamelCase(data?.ui?.attr?.autosize || {});
 
   return (
-    <TextArea 
-      {...data.ui.attr} 
-      defaultValue={defaultValue} 
-      onChange={(e) => onChange(e.target.value)} 
-      {...data.ui.attr.autosize} 
-      rows={4} 
-    />
-  )
+    <div className="p-2 text-sm">
+      <TextArea {...data.ui.attr} defaultValue={defaultValue} onChange={(e) => onChange(e.target.value)} {...data.ui.attr.autosize} rows={4} />
+    </div>
+  );
 };
diff --git a/web/components/flow/node-renderer/time-picker.tsx b/web/components/flow/node-renderer/time-picker.tsx
index 841a4131d..358f0b8a9 100644
--- a/web/components/flow/node-renderer/time-picker.tsx
+++ b/web/components/flow/node-renderer/time-picker.tsx
@@ -11,15 +11,15 @@ type TextAreaProps = {
 };
 export const RenderTimePicker = (params: TextAreaProps) => {
   const { data, defaultValue, onChange } = params;
-  const [value, setValue] = useState(defaultValue);
   const attr = convertKeysToCamelCase(data.ui?.attr || {});
 
-  // dayjs.extend(customParseFormat);
-
   const onChangeTime: TimePickerProps['onChange'] = (time, timeString) => {
     onChange(timeString);
-    setValue(time);
   };
 
-  return <TimePicker {...attr} style={{ width: '100%' }} value={value} onChange={onChangeTime} />;
+  return (
+    <div className="p-2 text-sm">
+      <TimePicker {...attr} className="w-full" defaultValue={defaultValue} onChange={onChangeTime} />
+    </div>
+  );
 };
diff --git a/web/components/flow/node-renderer/tree-select.tsx b/web/components/flow/node-renderer/tree-select.tsx
index 508407217..7acc3d73a 100644
--- a/web/components/flow/node-renderer/tree-select.tsx
+++ b/web/components/flow/node-renderer/tree-select.tsx
@@ -79,16 +79,18 @@ export const RenderTreeSelect = (params: TextAreaProps) => {
   };
 
   return (
-    <TreeSelect
-      fieldNames={{ label: 'label', value: 'value', children: 'children' }}
-      {...data.ui.attr}
-      style={{ width: '100%' }}
-      value={defaultValue}
-      treeDefaultExpandAll
-      onChange={onChange}
-      treeData={data.options}
-      onDropdownVisibleChange={handleDropdownVisibleChange}
-    />
+    <div className="p-2 text-sm">
+      <TreeSelect
+        fieldNames={{ label: 'label', value: 'value', children: 'children' }}
+        {...data.ui.attr}
+        style={{ width: '100%' }}
+        value={defaultValue}
+        treeDefaultExpandAll
+        onChange={onChange}
+        treeData={data.options}
+        onDropdownVisibleChange={handleDropdownVisibleChange}
+      />
+    </div>
 
     // TODO: Implement the TreeSelect component
     //   <TreeSelect