diff --git a/web/app/(commonLayout)/workflow/nodes/page.tsx b/web/app/(commonLayout)/workflow/nodes/page.tsx
index 6ef58e2775..663f83ff78 100644
--- a/web/app/(commonLayout)/workflow/nodes/page.tsx
+++ b/web/app/(commonLayout)/workflow/nodes/page.tsx
@@ -6,7 +6,7 @@ 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.QuestionClassifier, BlockEnum.IfElse, BlockEnum.Code, BlockEnum.TemplateTransform, BlockEnum.HttpRequest,
+  BlockEnum.IfElse, BlockEnum.Code, BlockEnum.TemplateTransform, BlockEnum.HttpRequest,
   BlockEnum.Tool,
 ].map((item, i) => ({
   id: `${i + 1}`,
@@ -45,9 +45,9 @@ const Page: FC = () => {
         edges={initialEdges}
         /*
         * TODO: for debug.
-        * 2 directAnswer 3: llm
+        * 2 directAnswer 3: llm 5: questionClassifier
         */
-        selectedNodeId='2'
+        selectedNodeId='5'
       />
     </div>
   )
diff --git a/web/app/components/workflow/nodes/_base/components/info-panel.tsx b/web/app/components/workflow/nodes/_base/components/info-panel.tsx
new file mode 100644
index 0000000000..bd7ee4d7e4
--- /dev/null
+++ b/web/app/components/workflow/nodes/_base/components/info-panel.tsx
@@ -0,0 +1,27 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+
+type Props = {
+  title: string
+  content: string
+}
+
+const InfoPanel: FC<Props> = ({
+  title,
+  content,
+}) => {
+  return (
+    <div>
+      <div className='px-[5px] py-[3px] bg-gray-100 rounded-md'>
+        <div className='leading-4 text-[10px] font-medium text-gray-500 uppercase'>
+          {title}
+        </div>
+        <div className='leading-4 text-xs font-normal text-gray-700'>
+          {content}
+        </div>
+      </div>
+    </div>
+  )
+}
+export default React.memo(InfoPanel)
diff --git a/web/app/components/workflow/nodes/direct-answer/node.tsx b/web/app/components/workflow/nodes/direct-answer/node.tsx
index 5b53db2a80..294538b27a 100644
--- a/web/app/components/workflow/nodes/direct-answer/node.tsx
+++ b/web/app/components/workflow/nodes/direct-answer/node.tsx
@@ -1,5 +1,6 @@
 import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
+import InfoPanel from '../_base/components/info-panel'
 import { mockData } from './mock'
 
 const Node: FC = () => {
@@ -7,14 +8,7 @@ const Node: FC = () => {
 
   return (
     <div className='px-3'>
-      <div className='px-[5px] py-[3px] bg-gray-100 rounded-md'>
-        <div className='leading-4 text-[10px] font-medium text-gray-500 uppercase'>
-          {t('workflow.nodes.directAnswer.answer')}
-        </div>
-        <div className='leading-4 text-xs font-normal text-gray-700'>
-          {mockData.answer}
-        </div>
-      </div>
+      <InfoPanel title={t('workflow.nodes.directAnswer.answer')} content={mockData.answer} />
     </div>
   )
 }
diff --git a/web/app/components/workflow/nodes/llm/node.tsx b/web/app/components/workflow/nodes/llm/node.tsx
index 61621687e0..ea6a30226f 100644
--- a/web/app/components/workflow/nodes/llm/node.tsx
+++ b/web/app/components/workflow/nodes/llm/node.tsx
@@ -8,7 +8,6 @@ import ModelSelector from '@/app/components/header/account-setting/model-provide
 const Node: FC = () => {
   const { provider, name: modelId } = mockData.model
   const {
-
     textGenerationModelList,
   } = useTextGenerationCurrentProviderAndModelAndModelList()
   return (
diff --git a/web/app/components/workflow/nodes/question-classifier/mock.ts b/web/app/components/workflow/nodes/question-classifier/mock.ts
new file mode 100644
index 0000000000..1698eee6e3
--- /dev/null
+++ b/web/app/components/workflow/nodes/question-classifier/mock.ts
@@ -0,0 +1,37 @@
+import { MemoryRole } from '../../types'
+import type { QuestionClassifierNodeType } from './types'
+
+export const mockData: QuestionClassifierNodeType = {
+  title: 'Test',
+  desc: 'Test',
+  type: 'Test',
+  query_variable_selector: ['aaa', 'name'],
+  model: {
+    provider: 'openai',
+    name: 'gpt-4',
+    mode: 'chat',
+    completion_params: {
+      temperature: 0.7,
+    },
+  },
+  topics: [
+    {
+      id: '1',
+      name: 'topic 1',
+      topic: 'xxxxx',
+    },
+    {
+      id: '2',
+      name: 'topic 2',
+      topic: 'xxxxx2',
+    },
+  ],
+  instruction: 'You are an entity extraction model that accepts an input',
+  memory: {
+    role_prefix: MemoryRole.assistant,
+    window: {
+      enabled: false,
+      size: 0,
+    },
+  },
+}
diff --git a/web/app/components/workflow/nodes/question-classifier/node.tsx b/web/app/components/workflow/nodes/question-classifier/node.tsx
index 20b2f22d0a..1c221d5d8b 100644
--- a/web/app/components/workflow/nodes/question-classifier/node.tsx
+++ b/web/app/components/workflow/nodes/question-classifier/node.tsx
@@ -1,8 +1,34 @@
 import type { FC } from 'react'
+import InfoPanel from '../_base/components/info-panel'
+import { mockData } from './mock'
+import {
+  useTextGenerationCurrentProviderAndModelAndModelList,
+} from '@/app/components/header/account-setting/model-provider-page/hooks'
+import ModelSelector from '@/app/components/header/account-setting/model-provider-page/model-selector'
 
 const Node: FC = () => {
+  const { provider, name: modelId } = mockData.model
+  const topics = mockData.topics
+  const {
+    textGenerationModelList,
+  } = useTextGenerationCurrentProviderAndModelAndModelList()
   return (
-    <div>question-classifier</div>
+    <div className='px-3'>
+      <ModelSelector
+        defaultModel={(provider || modelId) ? { provider, model: modelId } : undefined}
+        modelList={textGenerationModelList}
+        readonly
+      />
+      <div className='mt-2 space-y-0.5'>
+        {topics.map(topic => (
+          <InfoPanel
+            key={topic.id}
+            title={topic.name}
+            content={topic.topic}
+          />
+        ))}
+      </div>
+    </div>
   )
 }
 
diff --git a/web/app/components/workflow/nodes/question-classifier/types.ts b/web/app/components/workflow/nodes/question-classifier/types.ts
new file mode 100644
index 0000000000..2f1b3bf71b
--- /dev/null
+++ b/web/app/components/workflow/nodes/question-classifier/types.ts
@@ -0,0 +1,15 @@
+import type { CommonNodeType, Memory, ModelConfig, ValueSelector } from '@/app/components/workflow/types'
+
+type Topic = {
+  id: string
+  name: string
+  topic: string
+}
+
+export type QuestionClassifierNodeType = CommonNodeType & {
+  query_variable_selector: ValueSelector
+  model: ModelConfig
+  topics: Topic[]
+  instruction: string
+  memory: Memory
+}