diff --git a/web/app/(commonLayout)/workflow/nodes/page.tsx b/web/app/(commonLayout)/workflow/nodes/page.tsx
index f9f6a1f9f6..09d27a8fd9 100644
--- a/web/app/(commonLayout)/workflow/nodes/page.tsx
+++ b/web/app/(commonLayout)/workflow/nodes/page.tsx
@@ -5,8 +5,8 @@ import { memo } from 'react'
 import Workflow from '@/app/components/workflow'
 import { BlockEnum } from '@/app/components/workflow/types'
 const nodes = [
-  BlockEnum.QuestionClassifier/* 5 */, BlockEnum.HttpRequest/* 9 */, BlockEnum.Tool/* 10 */, BlockEnum.VariableAssigner/* 11 */, BlockEnum.Start/* 1 */, BlockEnum.DirectAnswer/* 2 */, BlockEnum.LLM/* 3 */, BlockEnum.KnowledgeRetrieval/* 4 */,
-  BlockEnum.IfElse/* 6 */, BlockEnum.Code/* 7 */, BlockEnum.TemplateTransform/* 8 */,
+  BlockEnum.Tool/* 10 */, BlockEnum.VariableAssigner/* 11 */, 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.End/* 12 */,
 ].map((item, i) => ({
   id: `${i + 1}`,
diff --git a/web/app/components/workflow/nodes/tool/panel.tsx b/web/app/components/workflow/nodes/tool/panel.tsx
index faf48dd51b..e737701cc7 100644
--- a/web/app/components/workflow/nodes/tool/panel.tsx
+++ b/web/app/components/workflow/nodes/tool/panel.tsx
@@ -1,8 +1,39 @@
 import type { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import Split from '../_base/components/split'
+import Button from '@/app/components/base/button'
+import Field from '@/app/components/workflow/nodes/_base/components/field'
+
+const i18nPrefix = 'workflow.nodes.tool'
 
 const Panel: FC = () => {
+  const { t } = useTranslation()
+  const readOnly = false
+
   return (
-    <div>Tool input</div>
+    <div className='mt-2'>
+      {!readOnly && (
+        <>
+          <div className='px-4 pb-3'>
+            <Button
+              type='primary'
+              className='w-full !h-8'>
+              {t(`${i18nPrefix}.toAuthorize`)}
+            </Button>
+          </div>
+          <Split className='mb-2' />
+        </>
+      )}
+
+      <div className='px-4 pb-4 space-y-4'>
+        <Field
+          title={t(`${i18nPrefix}.inputVars`)}
+        >
+          inputVars
+        </Field>
+      </div>
+      <Split />
+    </div>
   )
 }
 
diff --git a/web/app/components/workflow/nodes/variable-assigner/node.tsx b/web/app/components/workflow/nodes/variable-assigner/node.tsx
index 51b762f777..b2405713fc 100644
--- a/web/app/components/workflow/nodes/variable-assigner/node.tsx
+++ b/web/app/components/workflow/nodes/variable-assigner/node.tsx
@@ -57,6 +57,7 @@ const Node: FC = () => {
 
             )}
           </div>
+          {/* For test */}
           <div
             className='mt-1 flex items-center h-6 justify-center bg-gray-100 rounded-md  px-1 space-x-1 text-xs font-normal text-gray-700'
             onClick={() => {
diff --git a/web/i18n/en-US/workflow.ts b/web/i18n/en-US/workflow.ts
index 23c6f912af..6d33cea9b6 100644
--- a/web/i18n/en-US/workflow.ts
+++ b/web/i18n/en-US/workflow.ts
@@ -121,6 +121,10 @@ const translation = {
         array: 'Array',
       },
     },
+    tool: {
+      toAuthorize: 'To authorize',
+      inputVars: 'Input Variables',
+    },
   },
 }
 
diff --git a/web/i18n/zh-Hans/workflow.ts b/web/i18n/zh-Hans/workflow.ts
index 6430b4997a..161508c3e4 100644
--- a/web/i18n/zh-Hans/workflow.ts
+++ b/web/i18n/zh-Hans/workflow.ts
@@ -120,6 +120,10 @@ const translation = {
         array: 'Array',
       },
     },
+    tool: {
+      toAuthorize: '授权',
+      inputVars: '输入变量',
+    },
   },
 }