diff --git a/web/app/(commonLayout)/workflow/nodes/page.tsx b/web/app/(commonLayout)/workflow/nodes/page.tsx
index c035a0040b..3692cc9066 100644
--- a/web/app/(commonLayout)/workflow/nodes/page.tsx
+++ b/web/app/(commonLayout)/workflow/nodes/page.tsx
@@ -6,9 +6,9 @@ import Workflow from '@/app/components/workflow'
 import { BlockEnum } from '@/app/components/workflow/types'
 
 const nodes = [
-  BlockEnum.LLM/* 3 */, BlockEnum.VariableAssigner/* 11 */, BlockEnum.Start/* 1 */, BlockEnum.DirectAnswer/* 2 */, BlockEnum.KnowledgeRetrieval/* 4 */, BlockEnum.QuestionClassifier/* 5 */,
+  BlockEnum.KnowledgeRetrieval/* 4 */, BlockEnum.Start/* 1 */, BlockEnum.DirectAnswer/* 2 */, BlockEnum.LLM/* 3 */, BlockEnum.QuestionClassifier/* 5 */,
   BlockEnum.IfElse/* 6 */, BlockEnum.Code/* 7 */, BlockEnum.TemplateTransform/* 8 */, BlockEnum.HttpRequest/* 9 */, BlockEnum.Tool/* 10 */,
-  BlockEnum.End/* 12 */,
+  BlockEnum.VariableAssigner/* 11 */, BlockEnum.End/* 12 */,
 ].map((item, i) => ({
   id: `${i + 1}`,
   type: 'custom',
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/mock.ts b/web/app/components/workflow/nodes/knowledge-retrieval/mock.ts
index fbabf5de33..b011ab68d4 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/mock.ts
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/mock.ts
@@ -1,8 +1,9 @@
+import { BlockEnum } from '../../types'
 import type { KnowledgeRetrievalNodeType } from './types'
 import { RETRIEVE_TYPE } from '@/types/app'
 
 export const mockData: KnowledgeRetrievalNodeType = {
-  type: 'KnowledgeRetrieval',
+  type: BlockEnum.KnowledgeRetrieval,
   desc: 'xxx',
   title: 'KnowledgeRetrieval',
   query_variable_selector: ['aaa', 'name'],
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/panel.tsx b/web/app/components/workflow/nodes/knowledge-retrieval/panel.tsx
index 6e401a9a4e..0827704450 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/panel.tsx
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/panel.tsx
@@ -1,8 +1,36 @@
 import type { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import VarReferencePicker from '../_base/components/variable/var-reference-picker'
+import useConfig from './use-config'
+import { mockData } from './mock'
+import Field from '@/app/components/workflow/nodes/_base/components/field'
+
+const i18nPrefix = 'workflow.nodes.knowledgeRetrieval'
 
 const Panel: FC = () => {
+  const { t } = useTranslation()
+  const readOnly = false
+
+  const {
+    inputs,
+    handleQueryVarChange,
+  } = useConfig(mockData)
+
   return (
-    <div>start panel inputs</div>
+    <div className='mt-2'>
+      <div className='px-4 pb-4 space-y-4'>
+        <Field
+          title={t(`${i18nPrefix}.queryVariable`)}
+        >
+          <VarReferencePicker
+            readonly={readOnly}
+            isShowNodeName
+            value={inputs.query_variable_selector}
+            onChange={handleQueryVarChange}
+          />
+        </Field>
+      </div>
+    </div>
   )
 }
 
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/use-config.ts b/web/app/components/workflow/nodes/knowledge-retrieval/use-config.ts
new file mode 100644
index 0000000000..db17b743bc
--- /dev/null
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/use-config.ts
@@ -0,0 +1,22 @@
+import { useCallback, useState } from 'react'
+import produce from 'immer'
+import type { ValueSelector } from '../../types'
+import type { KnowledgeRetrievalNodeType } from './types'
+
+const useConfig = (initInputs: KnowledgeRetrievalNodeType) => {
+  const [inputs, setInputs] = useState<KnowledgeRetrievalNodeType>(initInputs)
+
+  const handleQueryVarChange = useCallback((newVar: ValueSelector) => {
+    const newInputs = produce(inputs, (draft) => {
+      draft.query_variable_selector = newVar
+    })
+    setInputs(newInputs)
+  }, [inputs, setInputs])
+
+  return {
+    inputs,
+    handleQueryVarChange,
+  }
+}
+
+export default useConfig
diff --git a/web/i18n/en-US/workflow.ts b/web/i18n/en-US/workflow.ts
index 14b59c4e8e..4346287015 100644
--- a/web/i18n/en-US/workflow.ts
+++ b/web/i18n/en-US/workflow.ts
@@ -54,6 +54,9 @@ const translation = {
         usage: 'Model Usage Information',
       },
     },
+    knowledgeRetrieval: {
+      queryVariable: 'Query Variable',
+    },
     http: {
       inputVars: 'Input Variables',
       api: 'API',
diff --git a/web/i18n/zh-Hans/workflow.ts b/web/i18n/zh-Hans/workflow.ts
index 0950f6171a..8daf27524a 100644
--- a/web/i18n/zh-Hans/workflow.ts
+++ b/web/i18n/zh-Hans/workflow.ts
@@ -53,6 +53,9 @@ const translation = {
         usage: '模型用量信息',
       },
     },
+    knowledgeRetrieval: {
+      queryVariable: '查询变量',
+    },
     http: {
       inputVars: '输入变量',
       api: 'API',