diff --git a/web/app/(commonLayout)/workflow/nodes/page.tsx b/web/app/(commonLayout)/workflow/nodes/page.tsx
new file mode 100644
index 0000000000..22e4804ab7
--- /dev/null
+++ b/web/app/(commonLayout)/workflow/nodes/page.tsx
@@ -0,0 +1,49 @@
+'use client'
+
+import type { FC } from 'react'
+import { memo } from 'react'
+import Workflow from '@/app/components/workflow'
+const nodes = [
+  'start', 'directAnswer', 'llm', 'knowledgeRetrieval', 'questionClassifier',
+  'questionClassifier', 'ifElse', 'code', 'templateTransform', 'http',
+  'tool',
+].map((item, i) => ({
+  id: `${i + 1}`,
+  type: 'custom',
+  position: { x: 330, y: 30 + i * 200 },
+  data: { type: item },
+}))
+const initialNodes = nodes
+
+const initialEdges = [
+  {
+    id: '1',
+    source: '1',
+    target: '2',
+    type: 'custom',
+  },
+  {
+    id: '2',
+    source: '2',
+    target: '3',
+    type: 'custom',
+  },
+  {
+    id: '3',
+    source: '2',
+    target: '4',
+    type: 'custom',
+  },
+]
+
+const Page: FC = () => {
+  return (
+    <div className='min-w-[720px] w-full h-full overflow-x-auto'>
+      <Workflow
+        nodes={initialNodes}
+        edges={initialEdges}
+      />
+    </div>
+  )
+}
+export default memo(Page)
diff --git a/web/app/components/workflow/nodes/_base/panel.tsx b/web/app/components/workflow/nodes/_base/panel.tsx
index afcb536b2d..51d12214d1 100644
--- a/web/app/components/workflow/nodes/_base/panel.tsx
+++ b/web/app/components/workflow/nodes/_base/panel.tsx
@@ -14,15 +14,15 @@ enum TabEnum {
 type BasePanelProps = {
   defaultElement?: ReactNode
   inputsElement?: ReactNode
-  ouputsElement?: ReactNode
+  outputsElement?: ReactNode
 }
 
 const BasePanel: FC<BasePanelProps> = ({
   defaultElement,
   inputsElement,
-  ouputsElement,
+  outputsElement,
 }) => {
-  const initialActiveTab = inputsElement ? TabEnum.Inputs : ouputsElement ? TabEnum.Outputs : ''
+  const initialActiveTab = inputsElement ? TabEnum.Inputs : outputsElement ? TabEnum.Outputs : ''
   const [activeTab, setActiveTab] = useState(initialActiveTab)
   const { handleSelectedNodeIdChange } = useWorkflowContext()
 
@@ -46,7 +46,7 @@ const BasePanel: FC<BasePanelProps> = ({
         </div>
       </div>
       {
-        (inputsElement || ouputsElement) && (
+        (inputsElement || outputsElement) && (
           <div className='flex items-center px-4 h-[42px]'>
             {
               inputsElement && (
@@ -59,7 +59,7 @@ const BasePanel: FC<BasePanelProps> = ({
               )
             }
             {
-              ouputsElement && (
+              outputsElement && (
                 <div
                   className='ml-4 cursor-pointer'
                   onClick={() => setActiveTab(TabEnum.Outputs)}
@@ -74,7 +74,7 @@ const BasePanel: FC<BasePanelProps> = ({
       <div className='py-2 border-t-[0.5px] border-b-[0.5px] border-black/5'>
         {defaultElement}
         {activeTab === TabEnum.Inputs && inputsElement}
-        {activeTab === TabEnum.Outputs && ouputsElement}
+        {activeTab === TabEnum.Outputs && outputsElement}
       </div>
       <div className='p-4'>
         next step
diff --git a/web/app/components/workflow/nodes/code/node.tsx b/web/app/components/workflow/nodes/code/node.tsx
new file mode 100644
index 0000000000..d9f80001b7
--- /dev/null
+++ b/web/app/components/workflow/nodes/code/node.tsx
@@ -0,0 +1,12 @@
+import type { FC } from 'react'
+import BaseNode from '../_base/node'
+
+const Node: FC = () => {
+  return (
+    <BaseNode>
+      <div>code</div>
+    </BaseNode>
+  )
+}
+
+export default Node
diff --git a/web/app/components/workflow/nodes/code/panel.tsx b/web/app/components/workflow/nodes/code/panel.tsx
new file mode 100644
index 0000000000..ca61bbcc67
--- /dev/null
+++ b/web/app/components/workflow/nodes/code/panel.tsx
@@ -0,0 +1,13 @@
+import type { FC } from 'react'
+import BasePanel from '../_base/panel'
+
+const Panel: FC = () => {
+  return (
+    <BasePanel
+      inputsElement={<div>start panel inputs</div>}
+      outputsElement={<div>start panel outputs</div>}
+    />
+  )
+}
+
+export default Panel
diff --git a/web/app/components/workflow/nodes/constants.ts b/web/app/components/workflow/nodes/constants.ts
index 25ee51a6c2..66f1464eb1 100644
--- a/web/app/components/workflow/nodes/constants.ts
+++ b/web/app/components/workflow/nodes/constants.ts
@@ -1,11 +1,51 @@
 import type { ComponentType } from 'react'
 import StartNode from './start/node'
 import StartPanel from './start/panel'
+import EndNode from './end/node'
+import EndPanel from './end/panel'
+import DirectAnswerNode from './direct-answer/node'
+import DirectAnswerPanel from './direct-answer/panel'
+import LLMNode from './llm/node'
+import LLMPanel from './llm/panel'
+import KnowledgeRetrievalNode from './knowledge-retrieval/node'
+import KnowledgeRetrievalPanel from './knowledge-retrieval/panel'
+import QuestionClassifierNode from './question-classifier/node'
+import QuestionClassifierPanel from './question-classifier/panel'
+import IfElseNode from './if-else/node'
+import IfElsePanel from './if-else/panel'
+import CodeNode from './code/node'
+import CodePanel from './code/panel'
+import TemplateTransformNode from './template-transform/node'
+import TemplateTransformPanel from './template-transform/panel'
+import HttpNode from './http/node'
+import HttpPanel from './http/panel'
+import ToolNode from './tool/node'
+import ToolPanel from './tool/panel'
 
 export const NodeMap: Record<string, ComponentType> = {
   start: StartNode,
+  end: EndNode,
+  directAnswer: DirectAnswerNode,
+  llm: LLMNode,
+  knowledgeRetrieval: KnowledgeRetrievalNode,
+  questionClassifier: QuestionClassifierNode,
+  ifElse: IfElseNode,
+  code: CodeNode,
+  templateTransform: TemplateTransformNode,
+  http: HttpNode,
+  tool: ToolNode,
 }
 
 export const PanelMap: Record<string, ComponentType> = {
   start: StartPanel,
+  end: EndPanel,
+  directAnswer: DirectAnswerPanel,
+  llm: LLMPanel,
+  knowledgeRetrieval: KnowledgeRetrievalPanel,
+  questionClassifier: QuestionClassifierPanel,
+  ifElse: IfElsePanel,
+  code: CodePanel,
+  templateTransform: TemplateTransformPanel,
+  http: HttpPanel,
+  tool: ToolPanel,
 }
diff --git a/web/app/components/workflow/nodes/direct-answer/node.tsx b/web/app/components/workflow/nodes/direct-answer/node.tsx
new file mode 100644
index 0000000000..c054a708a6
--- /dev/null
+++ b/web/app/components/workflow/nodes/direct-answer/node.tsx
@@ -0,0 +1,12 @@
+import type { FC } from 'react'
+import BaseNode from '../_base/node'
+
+const Node: FC = () => {
+  return (
+    <BaseNode>
+      <div>directAnswer</div>
+    </BaseNode>
+  )
+}
+
+export default Node
diff --git a/web/app/components/workflow/nodes/direct-answer/panel.tsx b/web/app/components/workflow/nodes/direct-answer/panel.tsx
new file mode 100644
index 0000000000..ca61bbcc67
--- /dev/null
+++ b/web/app/components/workflow/nodes/direct-answer/panel.tsx
@@ -0,0 +1,13 @@
+import type { FC } from 'react'
+import BasePanel from '../_base/panel'
+
+const Panel: FC = () => {
+  return (
+    <BasePanel
+      inputsElement={<div>start panel inputs</div>}
+      outputsElement={<div>start panel outputs</div>}
+    />
+  )
+}
+
+export default Panel
diff --git a/web/app/components/workflow/nodes/end/node.tsx b/web/app/components/workflow/nodes/end/node.tsx
new file mode 100644
index 0000000000..dd7b5a3bdf
--- /dev/null
+++ b/web/app/components/workflow/nodes/end/node.tsx
@@ -0,0 +1,12 @@
+import type { FC } from 'react'
+import BaseNode from '../_base/node'
+
+const Node: FC = () => {
+  return (
+    <BaseNode>
+      <div>end</div>
+    </BaseNode>
+  )
+}
+
+export default Node
diff --git a/web/app/components/workflow/nodes/end/panel.tsx b/web/app/components/workflow/nodes/end/panel.tsx
new file mode 100644
index 0000000000..ca61bbcc67
--- /dev/null
+++ b/web/app/components/workflow/nodes/end/panel.tsx
@@ -0,0 +1,13 @@
+import type { FC } from 'react'
+import BasePanel from '../_base/panel'
+
+const Panel: FC = () => {
+  return (
+    <BasePanel
+      inputsElement={<div>start panel inputs</div>}
+      outputsElement={<div>start panel outputs</div>}
+    />
+  )
+}
+
+export default Panel
diff --git a/web/app/components/workflow/nodes/http/node.tsx b/web/app/components/workflow/nodes/http/node.tsx
new file mode 100644
index 0000000000..1231cefae6
--- /dev/null
+++ b/web/app/components/workflow/nodes/http/node.tsx
@@ -0,0 +1,12 @@
+import type { FC } from 'react'
+import BaseNode from '../_base/node'
+
+const Node: FC = () => {
+  return (
+    <BaseNode>
+      <div>http</div>
+    </BaseNode>
+  )
+}
+
+export default Node
diff --git a/web/app/components/workflow/nodes/http/panel.tsx b/web/app/components/workflow/nodes/http/panel.tsx
new file mode 100644
index 0000000000..ca61bbcc67
--- /dev/null
+++ b/web/app/components/workflow/nodes/http/panel.tsx
@@ -0,0 +1,13 @@
+import type { FC } from 'react'
+import BasePanel from '../_base/panel'
+
+const Panel: FC = () => {
+  return (
+    <BasePanel
+      inputsElement={<div>start panel inputs</div>}
+      outputsElement={<div>start panel outputs</div>}
+    />
+  )
+}
+
+export default Panel
diff --git a/web/app/components/workflow/nodes/if-else/node.tsx b/web/app/components/workflow/nodes/if-else/node.tsx
new file mode 100644
index 0000000000..91ac8c96a2
--- /dev/null
+++ b/web/app/components/workflow/nodes/if-else/node.tsx
@@ -0,0 +1,12 @@
+import type { FC } from 'react'
+import BaseNode from '../_base/node'
+
+const Node: FC = () => {
+  return (
+    <BaseNode>
+      <div>if else</div>
+    </BaseNode>
+  )
+}
+
+export default Node
diff --git a/web/app/components/workflow/nodes/if-else/panel.tsx b/web/app/components/workflow/nodes/if-else/panel.tsx
new file mode 100644
index 0000000000..ca61bbcc67
--- /dev/null
+++ b/web/app/components/workflow/nodes/if-else/panel.tsx
@@ -0,0 +1,13 @@
+import type { FC } from 'react'
+import BasePanel from '../_base/panel'
+
+const Panel: FC = () => {
+  return (
+    <BasePanel
+      inputsElement={<div>start panel inputs</div>}
+      outputsElement={<div>start panel outputs</div>}
+    />
+  )
+}
+
+export default Panel
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/node.tsx b/web/app/components/workflow/nodes/knowledge-retrieval/node.tsx
new file mode 100644
index 0000000000..25c14b4308
--- /dev/null
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/node.tsx
@@ -0,0 +1,12 @@
+import type { FC } from 'react'
+import BaseNode from '../_base/node'
+
+const Node: FC = () => {
+  return (
+    <BaseNode>
+      <div>knowledge-retrieval</div>
+    </BaseNode>
+  )
+}
+
+export default Node
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/panel.tsx b/web/app/components/workflow/nodes/knowledge-retrieval/panel.tsx
new file mode 100644
index 0000000000..ca61bbcc67
--- /dev/null
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/panel.tsx
@@ -0,0 +1,13 @@
+import type { FC } from 'react'
+import BasePanel from '../_base/panel'
+
+const Panel: FC = () => {
+  return (
+    <BasePanel
+      inputsElement={<div>start panel inputs</div>}
+      outputsElement={<div>start panel outputs</div>}
+    />
+  )
+}
+
+export default Panel
diff --git a/web/app/components/workflow/nodes/llm/node.tsx b/web/app/components/workflow/nodes/llm/node.tsx
new file mode 100644
index 0000000000..d11b1aba28
--- /dev/null
+++ b/web/app/components/workflow/nodes/llm/node.tsx
@@ -0,0 +1,12 @@
+import type { FC } from 'react'
+import BaseNode from '../_base/node'
+
+const Node: FC = () => {
+  return (
+    <BaseNode>
+      <div>llm</div>
+    </BaseNode>
+  )
+}
+
+export default Node
diff --git a/web/app/components/workflow/nodes/llm/panel.tsx b/web/app/components/workflow/nodes/llm/panel.tsx
new file mode 100644
index 0000000000..ca61bbcc67
--- /dev/null
+++ b/web/app/components/workflow/nodes/llm/panel.tsx
@@ -0,0 +1,13 @@
+import type { FC } from 'react'
+import BasePanel from '../_base/panel'
+
+const Panel: FC = () => {
+  return (
+    <BasePanel
+      inputsElement={<div>start panel inputs</div>}
+      outputsElement={<div>start panel outputs</div>}
+    />
+  )
+}
+
+export default Panel
diff --git a/web/app/components/workflow/nodes/question-classifier/node.tsx b/web/app/components/workflow/nodes/question-classifier/node.tsx
new file mode 100644
index 0000000000..0df8e60e5a
--- /dev/null
+++ b/web/app/components/workflow/nodes/question-classifier/node.tsx
@@ -0,0 +1,12 @@
+import type { FC } from 'react'
+import BaseNode from '../_base/node'
+
+const Node: FC = () => {
+  return (
+    <BaseNode>
+      <div>question-classifier</div>
+    </BaseNode>
+  )
+}
+
+export default Node
diff --git a/web/app/components/workflow/nodes/question-classifier/panel.tsx b/web/app/components/workflow/nodes/question-classifier/panel.tsx
new file mode 100644
index 0000000000..ca61bbcc67
--- /dev/null
+++ b/web/app/components/workflow/nodes/question-classifier/panel.tsx
@@ -0,0 +1,13 @@
+import type { FC } from 'react'
+import BasePanel from '../_base/panel'
+
+const Panel: FC = () => {
+  return (
+    <BasePanel
+      inputsElement={<div>start panel inputs</div>}
+      outputsElement={<div>start panel outputs</div>}
+    />
+  )
+}
+
+export default Panel
diff --git a/web/app/components/workflow/nodes/start/panel.tsx b/web/app/components/workflow/nodes/start/panel.tsx
index bed1dfe64c..ca61bbcc67 100644
--- a/web/app/components/workflow/nodes/start/panel.tsx
+++ b/web/app/components/workflow/nodes/start/panel.tsx
@@ -5,7 +5,7 @@ const Panel: FC = () => {
   return (
     <BasePanel
       inputsElement={<div>start panel inputs</div>}
-      ouputsElement={<div>start panel outputs</div>}
+      outputsElement={<div>start panel outputs</div>}
     />
   )
 }
diff --git a/web/app/components/workflow/nodes/template-transform/node.tsx b/web/app/components/workflow/nodes/template-transform/node.tsx
new file mode 100644
index 0000000000..5fd7be022c
--- /dev/null
+++ b/web/app/components/workflow/nodes/template-transform/node.tsx
@@ -0,0 +1,12 @@
+import type { FC } from 'react'
+import BaseNode from '../_base/node'
+
+const Node: FC = () => {
+  return (
+    <BaseNode>
+      <div>template-transform</div>
+    </BaseNode>
+  )
+}
+
+export default Node
diff --git a/web/app/components/workflow/nodes/template-transform/panel.tsx b/web/app/components/workflow/nodes/template-transform/panel.tsx
new file mode 100644
index 0000000000..ca61bbcc67
--- /dev/null
+++ b/web/app/components/workflow/nodes/template-transform/panel.tsx
@@ -0,0 +1,13 @@
+import type { FC } from 'react'
+import BasePanel from '../_base/panel'
+
+const Panel: FC = () => {
+  return (
+    <BasePanel
+      inputsElement={<div>start panel inputs</div>}
+      outputsElement={<div>start panel outputs</div>}
+    />
+  )
+}
+
+export default Panel
diff --git a/web/app/components/workflow/nodes/tool/node.tsx b/web/app/components/workflow/nodes/tool/node.tsx
new file mode 100644
index 0000000000..bca392dc4d
--- /dev/null
+++ b/web/app/components/workflow/nodes/tool/node.tsx
@@ -0,0 +1,12 @@
+import type { FC } from 'react'
+import BaseNode from '../_base/node'
+
+const Node: FC = () => {
+  return (
+    <BaseNode>
+      <div>tool</div>
+    </BaseNode>
+  )
+}
+
+export default Node
diff --git a/web/app/components/workflow/nodes/tool/panel.tsx b/web/app/components/workflow/nodes/tool/panel.tsx
new file mode 100644
index 0000000000..ca61bbcc67
--- /dev/null
+++ b/web/app/components/workflow/nodes/tool/panel.tsx
@@ -0,0 +1,13 @@
+import type { FC } from 'react'
+import BasePanel from '../_base/panel'
+
+const Panel: FC = () => {
+  return (
+    <BasePanel
+      inputsElement={<div>start panel inputs</div>}
+      outputsElement={<div>start panel outputs</div>}
+    />
+  )
+}
+
+export default Panel