diff --git a/web/app/(commonLayout)/workflow/nodes/page.tsx b/web/app/(commonLayout)/workflow/nodes/page.tsx
index c31149a343..cc41ff378a 100644
--- a/web/app/(commonLayout)/workflow/nodes/page.tsx
+++ b/web/app/(commonLayout)/workflow/nodes/page.tsx
@@ -46,9 +46,9 @@ const Page: FC = () => {
         /*
         * TODO: for debug.
         * 2 directAnswer 3: llm 5: questionClassifier
-        * 7 Code, 8 TemplateTransform
+        * 7 Code, 8 TemplateTransform 9 http
         */
-        selectedNodeId='7'
+        selectedNodeId='9'
       />
     </div>
   )
diff --git a/web/app/components/workflow/nodes/http/mock.ts b/web/app/components/workflow/nodes/http/mock.ts
new file mode 100644
index 0000000000..206cccba0c
--- /dev/null
+++ b/web/app/components/workflow/nodes/http/mock.ts
@@ -0,0 +1,25 @@
+import type { HttpNodeType } from './types'
+
+export const mockData: HttpNodeType = {
+  title: 'Test',
+  desc: 'Test',
+  type: 'Test',
+  variables: [
+    {
+      variable: 'name',
+      value_selector: ['aaa', 'name'],
+    },
+    {
+      variable: 'age',
+      value_selector: ['bbb', 'b', 'c'],
+    },
+  ],
+  method: 'get',
+  url: 'https://api.dify.com/xx',
+  headers: '',
+  params: '',
+  body: {
+    type: 'json',
+    data: '',
+  },
+}
diff --git a/web/app/components/workflow/nodes/http/panel.tsx b/web/app/components/workflow/nodes/http/panel.tsx
index 6e401a9a4e..dfb3e356ae 100644
--- a/web/app/components/workflow/nodes/http/panel.tsx
+++ b/web/app/components/workflow/nodes/http/panel.tsx
@@ -1,8 +1,84 @@
 import type { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import useConfig from './use-config'
+import { mockData } from './mock'
+import VarList from '@/app/components/workflow/nodes/_base/components/variable/var-list'
+import Field from '@/app/components/workflow/nodes/_base/components/field'
+import AddButton from '@/app/components/base/button/add-button'
+import Split from '@/app/components/workflow/nodes/_base/components/split'
+import OutputVars, { VarItem } from '@/app/components/workflow/nodes/_base/components/output-vars'
+
+const i18nPrefix = 'workflow.nodes.http'
 
 const Panel: FC = () => {
+  const { t } = useTranslation()
+  const readOnly = false
+
+  const {
+    inputs,
+    handleVarListChange,
+    handleAddVariable,
+  } = useConfig(mockData)
+
   return (
-    <div>start panel inputs</div>
+    <div className='mt-2'>
+      <div className='px-4 pb-4 space-y-4'>
+        <Field
+          title={t(`${i18nPrefix}.inputVars`)}
+          operations={
+            <AddButton onClick={handleAddVariable} />
+          }
+        >
+          <VarList
+            readonly={readOnly}
+            list={inputs.variables}
+            onChange={handleVarListChange}
+          />
+        </Field>
+        <Field
+          title={t(`${i18nPrefix}.api`)}
+        >
+          API
+        </Field>
+        <Field
+          title={t(`${i18nPrefix}.headers`)}
+        >
+          headers
+        </Field>
+        <Field
+          title={t(`${i18nPrefix}.params`)}
+        >
+          params
+        </Field>
+        <Field
+          title={t(`${i18nPrefix}.body`)}
+        >
+          body
+        </Field>
+      </div>
+      <Split />
+      <div className='px-4 pt-4 pb-2'>
+        <OutputVars>
+          <>
+            <VarItem
+              name='body'
+              type='string'
+              description={t(`${i18nPrefix}.outputVars.body`)}
+            />
+            <VarItem
+              name='status_code'
+              type='string'
+              description={t(`${i18nPrefix}.outputVars.statusCode`)}
+            />
+            <VarItem
+              name='headers'
+              type='sting'
+              description={t(`${i18nPrefix}.outputVars.headers`)}
+            />
+          </>
+        </OutputVars>
+      </div>
+    </div >
   )
 }
 
diff --git a/web/app/components/workflow/nodes/http/types.ts b/web/app/components/workflow/nodes/http/types.ts
new file mode 100644
index 0000000000..b7f94506e0
--- /dev/null
+++ b/web/app/components/workflow/nodes/http/types.ts
@@ -0,0 +1,13 @@
+import type { CommonNodeType, Variable } from '@/app/components/workflow/types'
+
+export type HttpNodeType = CommonNodeType & {
+  variables: Variable[]
+  method: string
+  url: string
+  headers: string
+  params: string
+  body: {
+    type: string
+    data: string
+  }
+}
diff --git a/web/app/components/workflow/nodes/http/use-config.ts b/web/app/components/workflow/nodes/http/use-config.ts
new file mode 100644
index 0000000000..9f78351be7
--- /dev/null
+++ b/web/app/components/workflow/nodes/http/use-config.ts
@@ -0,0 +1,20 @@
+import { useState } from 'react'
+import useVarList from '../_base/hooks/use-var-list'
+import type { HttpNodeType } from './types'
+
+const useConfig = (initInputs: HttpNodeType) => {
+  const [inputs, setInputs] = useState<HttpNodeType>(initInputs)
+
+  const { handleVarListChange, handleAddVariable } = useVarList<HttpNodeType>({
+    inputs,
+    setInputs,
+  })
+
+  return {
+    inputs,
+    handleVarListChange,
+    handleAddVariable,
+  }
+}
+
+export default useConfig
diff --git a/web/app/components/workflow/nodes/llm/panel.tsx b/web/app/components/workflow/nodes/llm/panel.tsx
index 6b6b9b30b4..1d0250f343 100644
--- a/web/app/components/workflow/nodes/llm/panel.tsx
+++ b/web/app/components/workflow/nodes/llm/panel.tsx
@@ -107,7 +107,6 @@ const Panel: FC = () => {
           </>
         </OutputVars>
       </div>
-
     </div>
   )
 }
diff --git a/web/i18n/lang/workflow.en.ts b/web/i18n/lang/workflow.en.ts
index 2a1630e8b3..f8cb2b9701 100644
--- a/web/i18n/lang/workflow.en.ts
+++ b/web/i18n/lang/workflow.en.ts
@@ -19,6 +19,18 @@ const translation = {
         usage: 'Model Usage Information',
       },
     },
+    http: {
+      inputVars: 'Input Variables',
+      api: 'API',
+      headers: 'Headers',
+      params: 'Params',
+      body: 'Body',
+      outputVars: {
+        body: 'Response Content',
+        statusCode: 'Response Status Code',
+        headers: 'Response Header List JSON',
+      },
+    },
     code: {
       inputVars: 'Input Variables',
       outputVars: 'Output Variables',
diff --git a/web/i18n/lang/workflow.zh.ts b/web/i18n/lang/workflow.zh.ts
index 88a98b6d8a..4fd1f1ef7a 100644
--- a/web/i18n/lang/workflow.zh.ts
+++ b/web/i18n/lang/workflow.zh.ts
@@ -19,6 +19,18 @@ const translation = {
         usage: '模型用量信息',
       },
     },
+    http: {
+      inputVars: '输入变量',
+      api: 'API',
+      headers: '响应头',
+      params: '参数',
+      body: '响应内容',
+      outputVars: {
+        body: '响应内容',
+        statusCode: '响应状态码',
+        headers: '响应头列表 JSON',
+      },
+    },
     code: {
       inputVars: '输入变量',
       outputVars: '输出变量',