diff --git a/web/src/components/llm-select/index.tsx b/web/src/components/llm-select/index.tsx
new file mode 100644
index 000000000..7e1bc7a43
--- /dev/null
+++ b/web/src/components/llm-select/index.tsx
@@ -0,0 +1,23 @@
+import { Popover, Select } from 'antd';
+import LlmSettingItems from '../llm-setting-items';
+
+const LLMSelect = () => {
+  const content = (
+    <div>
+      <LlmSettingItems handleParametersChange={() => {}}></LlmSettingItems>
+    </div>
+  );
+
+  return (
+    <Popover content={content} trigger="click" placement="left" arrow={false}>
+      {/* <Button>Click me</Button> */}
+      <Select
+        defaultValue="lucy"
+        style={{ width: '100%' }}
+        dropdownStyle={{ display: 'none' }}
+      />
+    </Popover>
+  );
+};
+
+export default LLMSelect;
diff --git a/web/src/pages/flow/categorize-form/index.tsx b/web/src/pages/flow/categorize-form/index.tsx
new file mode 100644
index 000000000..17fe73902
--- /dev/null
+++ b/web/src/pages/flow/categorize-form/index.tsx
@@ -0,0 +1,11 @@
+import LLMSelect from '@/components/llm-select';
+
+const CategorizeForm = () => {
+  return (
+    <section>
+      <LLMSelect></LLMSelect>
+    </section>
+  );
+};
+
+export default CategorizeForm;
diff --git a/web/src/pages/flow/constant.tsx b/web/src/pages/flow/constant.tsx
index 8eb817b34..acede6f72 100644
--- a/web/src/pages/flow/constant.tsx
+++ b/web/src/pages/flow/constant.tsx
@@ -1,4 +1,5 @@
 import {
+  DatabaseOutlined,
   MergeCellsOutlined,
   RocketOutlined,
   SendOutlined,
@@ -10,6 +11,7 @@ export enum Operator {
   Retrieval = 'Retrieval',
   Generate = 'Generate',
   Answer = 'Answer',
+  Categorize = 'Categorize',
 }
 
 export const operatorIconMap = {
@@ -17,6 +19,7 @@ export const operatorIconMap = {
   [Operator.Generate]: MergeCellsOutlined,
   [Operator.Answer]: SendOutlined,
   [Operator.Begin]: SlidersOutlined,
+  [Operator.Categorize]: DatabaseOutlined,
 };
 
 export const operatorMap = {
@@ -26,6 +29,7 @@ export const operatorMap = {
   [Operator.Generate]: { description: 'Generate description' },
   [Operator.Answer]: { description: 'Answer description' },
   [Operator.Begin]: { description: 'Begin description' },
+  [Operator.Categorize]: { description: 'Categorize description' },
 };
 
 export const componentMenuList = [
@@ -41,6 +45,10 @@ export const componentMenuList = [
     name: Operator.Answer,
     description: operatorMap[Operator.Answer].description,
   },
+  {
+    name: Operator.Categorize,
+    description: operatorMap[Operator.Categorize].description,
+  },
 ];
 
 export const initialRetrievalValues = {
diff --git a/web/src/pages/flow/flow-drawer/index.tsx b/web/src/pages/flow/flow-drawer/index.tsx
index 6cb9daa97..310e27464 100644
--- a/web/src/pages/flow/flow-drawer/index.tsx
+++ b/web/src/pages/flow/flow-drawer/index.tsx
@@ -4,6 +4,7 @@ import { useEffect } from 'react';
 import { Node } from 'reactflow';
 import AnswerForm from '../answer-form';
 import BeginForm from '../begin-form';
+import CategorizeForm from '../categorize-form';
 import { Operator } from '../constant';
 import GenerateForm from '../generate-form';
 import { useHandleFormValuesChange } from '../hooks';
@@ -18,6 +19,7 @@ const FormMap = {
   [Operator.Retrieval]: RetrievalForm,
   [Operator.Generate]: GenerateForm,
   [Operator.Answer]: AnswerForm,
+  [Operator.Categorize]: CategorizeForm,
 };
 
 const FlowDrawer = ({