diff --git a/web/app/components/workflow/nodes/http/components/key-value-item.tsx b/web/app/components/workflow/nodes/http/components/key-value-item.tsx
new file mode 100644
index 0000000000..4a1f390c69
--- /dev/null
+++ b/web/app/components/workflow/nodes/http/components/key-value-item.tsx
@@ -0,0 +1,61 @@
+'use client'
+import type { FC } from 'react'
+import React, { useCallback } from 'react'
+import { useBoolean } from 'ahooks'
+import type { KeyValue } from '../types'
+import { Trash03 } from '@/app/components/base/icons/src/vender/line/general'
+
+type Props = {
+  payload: KeyValue
+  onChange: (newPayload: KeyValue) => void
+  onRemove: () => void
+  isLastItem: boolean
+  onAdd: () => void
+}
+
+const KeyValueItem: FC<Props> = ({
+  payload,
+  onChange,
+  onRemove,
+  isLastItem,
+  onAdd,
+}) => {
+  const [isKeyEditing, {
+    setTrue: setIsKeyEditing,
+    setFalse: setIsKeyEditingFalse,
+
+  }] = useBoolean(false)
+  const handleKeyChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    onChange({
+      key: e.target.value,
+      value: payload.value,
+    })
+  }, [])
+  return (
+    <div>
+      <div>
+        {isKeyEditing
+          ? (
+            <input
+              type='text'
+              value={payload.key}
+              onChange={handleKeyChange}
+              onBlur={setIsKeyEditingFalse}
+            />
+          )
+          : <div onClick={setIsKeyEditing}>{payload.key}</div>}
+      </div>
+      <div
+      >
+        {payload.value}
+        <div
+          className='p-1 cursor-pointer rounded-md hover:bg-black/5'
+          onClick={onRemove}
+        >
+          <Trash03 className='w-4 h-4' />
+        </div>
+      </div>
+    </div>
+  )
+}
+export default React.memo(KeyValueItem)
diff --git a/web/app/components/workflow/nodes/http/components/key-value-list.tsx b/web/app/components/workflow/nodes/http/components/key-value-list.tsx
new file mode 100644
index 0000000000..7ff8d104f1
--- /dev/null
+++ b/web/app/components/workflow/nodes/http/components/key-value-list.tsx
@@ -0,0 +1,47 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import type { KeyValue } from '../types'
+import KeyValueItem from './key-value-item'
+
+type Props = {
+  list: KeyValue[]
+  onChange: (newList: KeyValue[]) => void
+  onAdd: () => void
+}
+
+const KeyValueList: FC<Props> = ({
+  list,
+  onChange,
+  onAdd,
+}) => {
+  return (
+    <div>
+      <div>
+        <div>key</div>
+        <div>value</div>
+      </div>
+      {
+        list.map((item, index) => (
+          <KeyValueItem
+            key={index}
+            payload={item}
+            onChange={(newItem) => {
+              const newList = [...list]
+              newList[index] = newItem
+              onChange(newList)
+            }}
+            onRemove={() => {
+              const newList = [...list]
+              newList.splice(index, 1)
+              onChange(newList)
+            }}
+            isLastItem={index === list.length - 1}
+            onAdd={onAdd}
+          />
+        ))
+      }
+    </div>
+  )
+}
+export default React.memo(KeyValueList)