diff --git a/web/app/(commonLayout)/workflow/nodes/page.tsx b/web/app/(commonLayout)/workflow/nodes/page.tsx
index a55cb33563..117e9b4cf7 100644
--- a/web/app/(commonLayout)/workflow/nodes/page.tsx
+++ b/web/app/(commonLayout)/workflow/nodes/page.tsx
@@ -5,9 +5,9 @@ import { memo } from 'react'
 import Workflow from '@/app/components/workflow'
 import { BlockEnum } from '@/app/components/workflow/types'
 const nodes = [
-  BlockEnum.Start, BlockEnum.DirectAnswer, BlockEnum.LLM, BlockEnum.KnowledgeRetrieval, BlockEnum.QuestionClassifier,
-  BlockEnum.IfElse, BlockEnum.Code, BlockEnum.TemplateTransform, BlockEnum.HttpRequest, BlockEnum.Tool,
-  BlockEnum.VariableAssigner, BlockEnum.End,
+  BlockEnum.Start/* 1 */, BlockEnum.DirectAnswer/* 2 */, BlockEnum.LLM/* 3 */, BlockEnum.KnowledgeRetrieval/* 4 */, BlockEnum.QuestionClassifier/* 5 */,
+  BlockEnum.IfElse/* 6 */, BlockEnum.Code/* 7 */, BlockEnum.TemplateTransform/* 8 */, BlockEnum.HttpRequest/* 9 */, BlockEnum.Tool/* 10 */,
+  BlockEnum.VariableAssigner/* 11 */, BlockEnum.End/* 12 */,
 ].map((item, i) => ({
   id: `${i + 1}`,
   type: 'custom',
diff --git a/web/app/components/workflow/nodes/tool/mock.ts b/web/app/components/workflow/nodes/tool/mock.ts
new file mode 100644
index 0000000000..2bc348071a
--- /dev/null
+++ b/web/app/components/workflow/nodes/tool/mock.ts
@@ -0,0 +1,26 @@
+import type { ToolNodeType } from './types'
+import { VarType } from './types'
+
+export const mockData: ToolNodeType = {
+  title: 'Test',
+  desc: 'Test',
+  type: 'Test',
+  provider_id: 'test',
+  provider_type: 'builtin',
+  provider_name: 'test',
+  tool_name: 'test',
+  tool_label: 'test',
+  tool_inputs: [
+    {
+      variable: 'size',
+      variable_type: VarType.selector,
+      value_selector: ['aaa', 'name'],
+    },
+    {
+      variable: 'quality',
+      variable_type: VarType.static,
+      value: 'HD',
+    },
+  ],
+  tool_parameters: {},
+}
diff --git a/web/app/components/workflow/nodes/tool/node.tsx b/web/app/components/workflow/nodes/tool/node.tsx
index edb35989e8..2f4cf02a50 100644
--- a/web/app/components/workflow/nodes/tool/node.tsx
+++ b/web/app/components/workflow/nodes/tool/node.tsx
@@ -1,8 +1,35 @@
 import type { FC } from 'react'
+import { mockData } from './mock'
+import { VarType } from './types'
+import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
 
 const Node: FC = () => {
+  const { tool_inputs } = mockData
+
   return (
-    <div>tool</div>
+    <div className='px-3'>
+      <div className='space-y-0.5'>
+        {tool_inputs.map((input, index) => (
+          <div key={index} className='flex items-center h-6 justify-between bg-gray-100 rounded-md  px-1 space-x-1 text-xs font-normal text-gray-700'>
+            <div className='text-xs font-medium text-gray-500 uppercase'>
+              {input.variable}
+            </div>
+            <div className='text-xs font-normal text-gray-700'>
+              {input.variable_type === VarType.selector
+                ? (
+                  <div className='flex items-center text-primary-600 space-x-0.5'>
+                    <Variable02 className='h-3.5 w-3.5' />
+                    <div className='font-medium'>{input.value_selector?.slice(0, -1)[0]}</div>
+                  </div>
+                )
+                : input.value}
+            </div>
+          </div>
+
+        ))}
+
+      </div>
+    </div>
   )
 }
 
diff --git a/web/app/components/workflow/nodes/tool/panel.tsx b/web/app/components/workflow/nodes/tool/panel.tsx
index 6e401a9a4e..faf48dd51b 100644
--- a/web/app/components/workflow/nodes/tool/panel.tsx
+++ b/web/app/components/workflow/nodes/tool/panel.tsx
@@ -2,7 +2,7 @@ import type { FC } from 'react'
 
 const Panel: FC = () => {
   return (
-    <div>start panel inputs</div>
+    <div>Tool input</div>
   )
 }
 
diff --git a/web/app/components/workflow/nodes/tool/types.ts b/web/app/components/workflow/nodes/tool/types.ts
new file mode 100644
index 0000000000..b6b92304d6
--- /dev/null
+++ b/web/app/components/workflow/nodes/tool/types.ts
@@ -0,0 +1,23 @@
+import type { CommonNodeType } from '@/app/components/workflow/types'
+
+export enum VarType {
+  selector = 'selector',
+  static = 'static',
+}
+
+export type ToolVarInput = {
+  variable: string
+  variable_type: VarType
+  value?: string
+  value_selector?: string[]
+}
+
+export type ToolNodeType = CommonNodeType & {
+  provider_id: string
+  provider_type: 'builtin'
+  provider_name: string
+  tool_name: string
+  tool_label: string
+  tool_inputs: ToolVarInput[]
+  tool_parameters: Record<string, any>
+}