diff --git a/web/app/components/workflow/nodes/question-classifier/panel.tsx b/web/app/components/workflow/nodes/question-classifier/panel.tsx
index 6e401a9a4e..a37ac0643e 100644
--- a/web/app/components/workflow/nodes/question-classifier/panel.tsx
+++ b/web/app/components/workflow/nodes/question-classifier/panel.tsx
@@ -1,8 +1,43 @@
 import type { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import useConfig from './use-config'
+import { mockData } from './mock'
+import Field from '@/app/components/workflow/nodes/_base/components/field'
+import ModelParameterModal from '@/app/components/header/account-setting/model-provider-page/model-parameter-modal'
+
+const i18nPrefix = 'workflow.nodes.llm'
 
 const Panel: FC = () => {
+  const { t } = useTranslation()
+  // const readOnly = false
+
+  const {
+    inputs,
+    handleModelChanged,
+    handleCompletionParamsChange,
+
+  } = useConfig(mockData)
+  const model = inputs.model
+
   return (
-    <div>start panel inputs</div>
+    <div className='mt-2 px-4 space-y-4'>
+      <Field
+        title={t(`${i18nPrefix}.model`)}
+      >
+        <ModelParameterModal
+          popupClassName='!w-[387px]'
+          isAdvancedMode={true}
+          mode={model?.mode}
+          provider={model?.provider}
+          completionParams={model.completion_params}
+          modelId={model.name}
+          setModel={handleModelChanged}
+          onCompletionParamsChange={handleCompletionParamsChange}
+          hideDebugWithMultipleModel
+          debugWithMultipleModel={false}
+        />
+      </Field>
+    </div>
   )
 }
 
diff --git a/web/app/components/workflow/nodes/question-classifier/use-config.ts b/web/app/components/workflow/nodes/question-classifier/use-config.ts
new file mode 100644
index 0000000000..5decb873d8
--- /dev/null
+++ b/web/app/components/workflow/nodes/question-classifier/use-config.ts
@@ -0,0 +1,32 @@
+import { useCallback, useState } from 'react'
+import produce from 'immer'
+import type { QuestionClassifierNodeType } from './types'
+
+const useConfig = (initInputs: QuestionClassifierNodeType) => {
+  const [inputs, setInputs] = useState<QuestionClassifierNodeType>(initInputs)
+
+  // model
+  const handleModelChanged = useCallback((model: { provider: string; modelId: string; mode?: string }) => {
+    const newInputs = produce(inputs, (draft) => {
+      draft.model.provider = model.provider
+      draft.model.name = model.modelId
+      draft.model.mode = model.mode!
+    })
+    setInputs(newInputs)
+  }, [inputs, setInputs])
+
+  const handleCompletionParamsChange = useCallback((newParams: Record<string, any>) => {
+    const newInputs = produce(inputs, (draft) => {
+      draft.model.completion_params = newParams
+    })
+    setInputs(newInputs)
+  }, [inputs, setInputs])
+
+  return {
+    inputs,
+    handleModelChanged,
+    handleCompletionParamsChange,
+  }
+}
+
+export default useConfig