diff --git a/web/app/(commonLayout)/workflow/nodes/page.tsx b/web/app/(commonLayout)/workflow/nodes/page.tsx
index ea6542d771..a13fd8c802 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.End/* 12 */, BlockEnum.Start/* 1 */, BlockEnum.DirectAnswer/* 2 */, BlockEnum.LLM/* 3 */, BlockEnum.KnowledgeRetrieval/* 4 */, BlockEnum.QuestionClassifier/* 5 */,
+  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.Tool/* 10 */,
-  BlockEnum.VariableAssigner/* 11 */,
+  BlockEnum.End/* 12 */,
 ].map((item, i) => ({
   id: `${i + 1}`,
   type: 'custom',
diff --git a/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.tsx b/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.tsx
index 9be0b44477..d5ba0e368e 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.tsx
@@ -30,7 +30,7 @@ type Props = {
 // }
 
 // TODO: get data from context
-const getNodeInfoById = (id: string) => {
+export const getNodeInfoById = (id: string) => {
   return mockNodesData[id]
 }
 
diff --git a/web/app/components/workflow/nodes/variable-assigner/mock.ts b/web/app/components/workflow/nodes/variable-assigner/mock.ts
index ace6c8800f..505de87adc 100644
--- a/web/app/components/workflow/nodes/variable-assigner/mock.ts
+++ b/web/app/components/workflow/nodes/variable-assigner/mock.ts
@@ -1,9 +1,10 @@
+import { BlockEnum } from '../../types'
 import type { VariableAssignerNodeType } from './types'
 
 export const mockData: VariableAssignerNodeType = {
   title: 'Test',
   desc: 'Test',
-  type: 'Test',
+  type: BlockEnum.VariableAssigner,
   output_type: 'string',
   variables: [
     ['aaa', 'name'],
diff --git a/web/app/components/workflow/nodes/variable-assigner/node.tsx b/web/app/components/workflow/nodes/variable-assigner/node.tsx
index d0863bd5e2..37922e4209 100644
--- a/web/app/components/workflow/nodes/variable-assigner/node.tsx
+++ b/web/app/components/workflow/nodes/variable-assigner/node.tsx
@@ -1,15 +1,71 @@
 import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
-// import { mockData } from './mock'
+import { mockData } from './mock'
+import { getNodeInfoById } from '@/app/components/workflow/nodes/_base/components/variable/var-reference-picker'
+import { VarBlockIcon } from '@/app/components/workflow/block-icon'
+import { Line3 } from '@/app/components/base/icons/src/public/common'
+import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
 const i18nPrefix = 'workflow.nodes.variableAssigner'
 
 const Node: FC = () => {
   const { t } = useTranslation()
-  // const { variables } = mockData
+  const { variables, output_type } = mockData
+  // TODO: get var type through node and  value
+  const getVarType = () => {
+    return 'string'
+  }
+
   return (
     <div className='px-3'>
-      <div className='leading-4 text-xs font-medium text-gray-500 uppercase'>{t(`${i18nPrefix}.title`)}</div>
-    </div>
+      <div className='mb-0.5 leading-4 text-xs font-medium text-gray-500 uppercase'>{t(`${i18nPrefix}.title`)}</div>
+      {
+        variables.length === 0 && (
+          <div className='flex items-center h-6 justify-between bg-gray-100 rounded-md  px-1 space-x-1 text-xs font-normal text-gray-400 uppercase'>
+            {t(`${i18nPrefix}.varNotSet`)}
+          </div>
+        )
+      }
+      {variables.length > 0 && (
+        <>
+          <div className='space-y-0.5'>
+            {variables.map((item, index) => {
+              const node = getNodeInfoById(item[0])
+              const varName = item[item.length - 1]
+              return (
+                <div key={index} className='flex items-center h-6 bg-gray-100 rounded-md  px-1 text-xs font-normal text-gray-700' >
+                  <div className='flex items-center'>
+                    <div className='p-[1px]'>
+                      <VarBlockIcon
+                        className='!text-gray-900'
+                        type={node?.type}
+                      />
+                    </div>
+                    <div className='mx-0.5 text-xs font-medium text-gray-700'>{node?.title}</div>
+                    <Line3 className='mr-0.5'></Line3>
+                  </div>
+                  <div className='flex items-center text-primary-600'>
+                    <Variable02 className='w-3.5 h-3.5' />
+                    <div className='ml-0.5 text-xs font-medium'>{varName}</div>
+                  </div>
+                  <div className='ml-0.5 text-xs font-normal text-gray-500'>{getVarType()}</div>
+                </div>
+              )
+            },
+
+            )}
+          </div>
+          <div className='mt-2 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'>
+              {t(`${i18nPrefix}.outputType`)}
+            </div>
+            <div className='text-xs font-normal text-gray-700'>
+              {t(`${i18nPrefix}.type.${output_type}`)}
+            </div>
+          </div>
+        </>
+      )
+      }
+    </div >
   )
 }
 
diff --git a/web/i18n/en-US/workflow.ts b/web/i18n/en-US/workflow.ts
index 915838ac39..5511f1bc27 100644
--- a/web/i18n/en-US/workflow.ts
+++ b/web/i18n/en-US/workflow.ts
@@ -89,6 +89,14 @@ const translation = {
     },
     variableAssigner: {
       title: 'Assign variables',
+      outputType: 'Output Type',
+      varNotSet: 'Variable not set',
+      type: {
+        string: 'String',
+        number: 'Number',
+        object: 'Object',
+        arrayObject: 'Array[Object]',
+      },
     },
   },
 }
diff --git a/web/i18n/zh-Hans/workflow.ts b/web/i18n/zh-Hans/workflow.ts
index 5cf60f3330..9d48f72e08 100644
--- a/web/i18n/zh-Hans/workflow.ts
+++ b/web/i18n/zh-Hans/workflow.ts
@@ -88,6 +88,14 @@ const translation = {
     },
     variableAssigner: {
       title: '变量赋值',
+      outputType: '输出类型',
+      varNotSet: '未设置变量',
+      type: {
+        string: 'String',
+        number: 'Number',
+        object: 'Object',
+        arrayObject: 'Array[Object]',
+      },
     },
   },
 }