diff --git a/web/src/components/Knowledge/Knowledge.tsx b/web/src/components/Knowledge/Knowledge.tsx
new file mode 100644
index 00000000..b1c9b78f
--- /dev/null
+++ b/web/src/components/Knowledge/Knowledge.tsx
@@ -0,0 +1,217 @@
+import { type FC, useRef, useState, useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Space, Button, Flex } from 'antd'
+
+import knowledgeEmpty from '@/assets/images/application/knowledgeEmpty.svg'
+import type {
+  KnowledgeConfigForm,
+  KnowledgeConfig,
+  RerankerConfig,
+  KnowledgeBase,
+  KnowledgeModalRef,
+  KnowledgeConfigModalRef,
+  KnowledgeGlobalConfigModalRef,
+} from './types'
+import Empty from '@/components/Empty'
+import KnowledgeListModal from './KnowledgeListModal'
+import KnowledgeConfigModal from './KnowledgeConfigModal'
+import KnowledgeGlobalConfigModal from './KnowledgeGlobalConfigModal'
+import Tag from '@/components/Tag'
+import { getKnowledgeBaseList } from '@/api/knowledgeBase'
+import RbCard from '@/components/RbCard/Card'
+
+interface KnowledgeProps {
+  value?: KnowledgeConfig;
+  onChange?: (config: KnowledgeConfig) => void;
+  /** 'app' renders inside a Card with empty state; 'workflow' renders inline with dashed add button */
+  variant?: 'app' | 'workflow';
+}
+
+const Knowledge: FC<KnowledgeProps> = ({ value = { knowledge_bases: [] }, onChange, variant = 'workflow' }) => {
+  const { t } = useTranslation()
+  const knowledgeModalRef = useRef<KnowledgeModalRef>(null)
+  const knowledgeConfigModalRef = useRef<KnowledgeConfigModalRef>(null)
+  const knowledgeGlobalConfigModalRef = useRef<KnowledgeGlobalConfigModalRef>(null)
+  const [knowledgeList, setKnowledgeList] = useState<KnowledgeBase[]>([])
+  const [editConfig, setEditConfig] = useState<KnowledgeConfig>({} as KnowledgeConfig)
+
+  useEffect(() => {
+    if (value && JSON.stringify(value) !== JSON.stringify(editConfig)) {
+      setEditConfig({ ...(value || {}) })
+      const knowledge_bases = [...(value.knowledge_bases || [])]
+      const basesWithoutName = knowledge_bases.filter(base => !base.name)
+      if (basesWithoutName.length > 0) {
+        getKnowledgeBaseList().then(res => {
+          const fullBases = knowledge_bases.map(base => {
+            if (!base.name) {
+              const fullBase = res.items.find((item: any) => item.id === base.kb_id)
+              return fullBase ? { ...base, ...fullBase } : base
+            }
+            return base
+          })
+          setKnowledgeList(fullBases)
+        }).catch(() => setKnowledgeList(knowledge_bases))
+      } else {
+        setKnowledgeList(knowledge_bases)
+      }
+    }
+  }, [value])
+
+  const handleKnowledgeConfig = () => knowledgeGlobalConfigModalRef.current?.handleOpen()
+  const handleAddKnowledge = () => knowledgeModalRef.current?.handleOpen()
+
+  const handleDeleteKnowledge = (id: string) => {
+    const list = knowledgeList.filter(item => item.id !== id)
+    setKnowledgeList([...list])
+    onChange?.({ ...editConfig, knowledge_bases: [...list] })
+  }
+
+  const handleEditKnowledge = (item: KnowledgeBase) => knowledgeConfigModalRef.current?.handleOpen(item)
+
+  const refresh = (values: KnowledgeBase[] | KnowledgeConfigForm | RerankerConfig, type: 'knowledge' | 'knowledgeConfig' | 'rerankerConfig') => {
+    if (type === 'knowledge') {
+      let list = [...knowledgeList]
+      if (list.length > 0) {
+        (Array.isArray(values) ? values : [values]).forEach(vo => {
+          const index = list.findIndex(item => item.id === (vo as KnowledgeBase).id)
+          if (index === -1) list.push(vo as KnowledgeBase)
+        })
+      } else {
+        list = [...values as KnowledgeBase[]]
+      }
+      setKnowledgeList([...list])
+      onChange?.({ ...editConfig, knowledge_bases: [...list] })
+    } else if (type === 'knowledgeConfig') {
+      const index = knowledgeList.findIndex(item => item.id === (values as KnowledgeBase).kb_id)
+      const list = [...knowledgeList]
+      list[index] = { ...list[index], ...values, config: { ...values as KnowledgeConfigForm } }
+      setKnowledgeList([...list])
+      onChange?.({ ...editConfig, knowledge_bases: [...list] })
+    } else if (type === 'rerankerConfig') {
+      const rerankerValues = values as RerankerConfig
+      setEditConfig(prev => {
+        const next = {
+          ...prev,
+          ...rerankerValues,
+          reranker_id: rerankerValues.rerank_model ? rerankerValues.reranker_id : undefined,
+          reranker_top_k: rerankerValues.rerank_model ? rerankerValues.reranker_top_k : undefined,
+        }
+        onChange?.(next)
+        return next
+      })
+    }
+  }
+
+  const modals = (
+    <>
+      <KnowledgeGlobalConfigModal data={editConfig} ref={knowledgeGlobalConfigModalRef} refresh={refresh} />
+      <KnowledgeListModal ref={knowledgeModalRef} selectedList={knowledgeList} refresh={refresh} />
+      <KnowledgeConfigModal ref={knowledgeConfigModalRef} refresh={refresh} />
+    </>
+  )
+
+  const knowledgeItems = knowledgeList.map(item => {
+    if (!item.id) return null
+    return (
+      <Flex
+        key={item.id}
+        align="center"
+        justify="space-between"
+        className={variant === 'app'
+          ? 'rb:py-3! rb:px-4! rb-border rb:rounded-lg'
+          : 'rb:text-[12px] rb:py-1.75! rb:px-2.5! rb-border rb:rounded-lg'
+        }
+      >
+        <div>
+          <span className={variant === 'app' ? 'rb:font-medium rb:leading-4' : 'rb:font-medium rb:leading-4.25'}>{item.name}</span>
+          <Tag
+            color={item.status === 1 ? 'success' : item.status === 0 ? 'default' : 'error'}
+            className={variant === 'app' ? 'rb:ml-2' : 'rb:ml-1 rb:py-0! rb:px-1! rb:text-[12px] rb:leading-4!'}
+          >
+            {item.status === 1 ? t('common.enable') : item.status === 0 ? t('common.disabled') : t('common.deleted')}
+          </Tag>
+          <div className={variant === 'app'
+            ? 'rb:mt-1 rb:text-[12px] rb:text-[#5B6167] rb:font-regular rb:leading-4'
+            : 'rb:mt-1 rb:text-[12px] rb:text-[#5B6167] rb:font-regular rb:leading-4.25'
+          }>
+            {t('application.contains', { include_count: item.doc_num })}
+          </div>
+        </div>
+        <Space size={12}>
+          {variant === 'app' ? (
+            <>
+              <div className="rb:size-6 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/editBorder.svg')] rb:hover:bg-[url('@/assets/images/editBg.svg')]" onClick={() => handleEditKnowledge(item)} />
+              <div className="rb:size-6 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/deleteBorder.svg')] rb:hover:bg-[url('@/assets/images/deleteBg.svg')]" onClick={() => handleDeleteKnowledge(item.id)} />
+            </>
+          ) : (
+            <>
+              <div className="rb:size-4 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/edit.svg')]" onClick={() => handleEditKnowledge(item)} />
+              <div className="rb:size-4 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/delete.svg')]" onClick={() => handleDeleteKnowledge(item.id)} />
+            </>
+          )}
+        </Space>
+      </Flex>
+    )
+  })
+
+  if (variant === 'app') {
+    return (
+      <RbCard
+        title={t('application.knowledgeBaseAssociation')}
+        extra={
+          <Space>
+            <Button
+              className="rb:h-6! rb:py-0! rb:px-2! rb:rounded-md! rb:text-[#212332]"
+              icon={<div className="rb:size-4 rb:bg-cover rb:bg-[url('@/assets/images/application/set.svg')]"></div>}
+              onClick={handleKnowledgeConfig}
+            >{t('application.globalConfig')}</Button>
+            <Button className="rb:h-6! rb:py-0! rb:px-2! rb:rounded-md! rb:text-[#212332]" onClick={handleAddKnowledge}>+</Button>
+          </Space>
+        }
+        headerType="borderless"
+        headerClassName="rb:h-11.5! rb:py-3! rb:leading-5.5!"
+        titleClassName="rb:font-[MiSans-Bold] rb:font-bold"
+      >
+        <div className="rb:leading-4.5 rb:text-[12px] rb:mb-2 rb:font-medium">
+          {t('application.associatedKnowledgeBase')}
+        </div>
+        {knowledgeList.length === 0
+          ? <div className="rb-border rb:rounded-xl rb:min-h-37">
+              <Empty url={knowledgeEmpty} size={88} subTitle={t('application.knowledgeEmpty')} className="rb:mt-4!" />
+            </div>
+          : <Flex vertical gap={10}>{knowledgeItems}</Flex>
+        }
+        {modals}
+      </RbCard>
+    )
+  }
+
+  return (
+    <div>
+      <Flex align="center" justify="space-between" className="rb:mb-2!">
+        <div className="rb:text-[12px] rb:font-medium rb:leading-4.5">
+          <span className="rb:text-[#ff5d34] rb:text-[14px] rb:font-[SimSun,sans-serif] rb:mr-1">*</span>
+          {t('application.knowledgeBaseAssociation')}
+        </div>
+        <Button
+          onClick={handleKnowledgeConfig}
+          icon={<div className="rb:size-3.5 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/application/set.svg')]"></div>}
+          className="rb:py-0! rb:px-1! rb:text-[12px]! rb:group rb:gap-0.5!"
+          size="small"
+          disabled={knowledgeList.length === 0}
+        >
+          {t('application.globalConfig')}
+        </Button>
+      </Flex>
+      <Flex gap={10} vertical>
+        <Button type="dashed" block size="middle" className="rb:text-[12px]!" onClick={handleAddKnowledge}>
+          + {t('workflow.config.knowledge-retrieval.addKnowledge')}
+        </Button>
+        {knowledgeList.length > 0 && knowledgeItems}
+      </Flex>
+      {modals}
+    </div>
+  )
+}
+
+export default Knowledge
diff --git a/web/src/components/Knowledge/KnowledgeConfigModal.tsx b/web/src/components/Knowledge/KnowledgeConfigModal.tsx
new file mode 100644
index 00000000..c91230ee
--- /dev/null
+++ b/web/src/components/Knowledge/KnowledgeConfigModal.tsx
@@ -0,0 +1,124 @@
+import { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
+import { Form, Select, InputNumber, Flex } from 'antd';
+import { useTranslation } from 'react-i18next';
+
+import type { KnowledgeConfigModalRef, KnowledgeBase, KnowledgeConfigForm, RetrieveType } from './types'
+import RbModal from '@/components/RbModal'
+import RbSlider from '@/components/RbSlider'
+import { formatDateTime } from '@/utils/format';
+
+const FormItem = Form.Item;
+
+interface KnowledgeConfigModalProps {
+  refresh: (values: KnowledgeConfigForm, type: 'knowledgeConfig') => void;
+}
+const retrieveTypes: RetrieveType[] = ['participle', 'semantic', 'hybrid', 'graph']
+
+const KnowledgeConfigModal = forwardRef<KnowledgeConfigModalRef, KnowledgeConfigModalProps>(({ refresh }, ref) => {
+  const { t } = useTranslation();
+  const [visible, setVisible] = useState(false);
+  const [form] = Form.useForm<KnowledgeConfigForm>();
+  const [data, setData] = useState<KnowledgeBase | null>(null);
+  const values = Form.useWatch<KnowledgeConfigForm>([], form);
+
+  const handleClose = () => {
+    setVisible(false);
+    form.resetFields();
+    setData(null)
+  };
+
+  const handleOpen = (data: KnowledgeBase) => {
+    form.setFieldsValue({
+      retrieve_type: data?.config?.retrieve_type || retrieveTypes[0],
+      kb_id: data.id,
+      top_k: data?.config?.top_k || 5,
+      similarity_threshold: data?.config?.similarity_threshold || 0.5,
+      vector_similarity_weight: data?.config?.vector_similarity_weight || 0.5,
+      ...(data || {}),
+      ...(data?.config || {}),
+    })
+    setData({...data})
+    setVisible(true);
+  };
+
+  const handleSave = () => {
+    form.validateFields()
+      .then(() => {
+        refresh(values, 'knowledgeConfig')
+        handleClose()
+      })
+      .catch((err) => console.log('err', err));
+  }
+
+  useImperativeHandle(ref, () => ({ handleOpen, handleClose }));
+
+  useEffect(() => {
+    if (values?.retrieve_type) {
+      const fieldsToReset = Object.keys(values).filter(key =>
+        key !== 'kb_id' && key !== 'retrieve_type' && key !== 'top_k'
+      ) as (keyof KnowledgeConfigForm)[];
+      form.resetFields(fieldsToReset);
+    }
+  }, [values?.retrieve_type])
+
+  return (
+    <RbModal
+      title={t('application.knowledgeConfig')}
+      open={visible}
+      onCancel={handleClose}
+      okText={t('common.save')}
+      onOk={handleSave}
+    >
+      <Form form={form} layout="vertical" size="middle">
+        {data && (
+          <Flex align="center" justify="space-between" className="rb:mb-6! rb-border rb:rounded-lg rb:p-[17px_16px]! rb:cursor-pointer rb:bg-[#F0F3F8] rb:text-[#212332]">
+            <div className="rb:text-[16px] rb:leading-5.5">
+              {data.name}
+              <div className="rb:text-[12px] rb:leading-4 rb:text-[#5B6167] rb:mt-2">{t('application.contains', {include_count: data.doc_num})}</div>
+            </div>
+            <div className="rb:text-[12px] rb:leading-4 rb:text-[#5B6167]">{formatDateTime(data.updated_at, 'YYYY-MM-DD HH:mm:ss')}</div>
+          </Flex>
+        )}
+        <FormItem name="kb_id" hidden />
+        <FormItem
+          name="retrieve_type"
+          label={t('application.retrieve_type')}
+          extra={t('application.retrieve_type_desc')}
+          rules={[{ required: true, message: t('common.pleaseSelect') }]}
+        >
+          <Select options={retrieveTypes.map(key => ({ label: t(`application.${key}`), value: key }))} />
+        </FormItem>
+        <FormItem
+          name="top_k"
+          label={t('application.top_k')}
+          rules={[{ required: true, message: t('common.pleaseEnter') }]}
+          extra={t('application.top_k_desc')}
+        >
+          <InputNumber style={{ width: '100%' }} min={1} max={20} />
+        </FormItem>
+        {values?.retrieve_type === 'semantic' && (
+          <FormItem name="similarity_threshold" label={t('application.similarity_threshold')} extra={t('application.similarity_threshold_desc')} initialValue={0.5}>
+            <RbSlider max={1.0} step={0.1} min={0.0} isInput={true} />
+          </FormItem>
+        )}
+        {values?.retrieve_type === 'participle' && (
+          <FormItem name="vector_similarity_weight" label={t('application.vector_similarity_weight')} extra={t('application.vector_similarity_weight_desc')} initialValue={0.5}>
+            <RbSlider max={1.0} step={0.1} min={0.0} isInput={true} />
+          </FormItem>
+        )}
+        {values?.retrieve_type === 'hybrid' && (
+          <>
+            <FormItem name="similarity_threshold" label={t('application.similarity_threshold')} extra={t('application.similarity_threshold_desc1')} initialValue={0.5}>
+              <RbSlider max={1.0} step={0.1} min={0.0} isInput={true} />
+            </FormItem>
+            <FormItem name="vector_similarity_weight" label={t('application.vector_similarity_weight')} extra={t('application.vector_similarity_weight_desc1')} initialValue={0.5}>
+              <RbSlider max={1.0} step={0.1} min={0.0} isInput={true} />
+            </FormItem>
+          </>
+        )}
+      </Form>
+    </RbModal>
+  );
+});
+
+export default KnowledgeConfigModal;
diff --git a/web/src/components/Knowledge/KnowledgeGlobalConfigModal.tsx b/web/src/components/Knowledge/KnowledgeGlobalConfigModal.tsx
new file mode 100644
index 00000000..fbe2a714
--- /dev/null
+++ b/web/src/components/Knowledge/KnowledgeGlobalConfigModal.tsx
@@ -0,0 +1,93 @@
+import { forwardRef, useImperativeHandle, useState, useEffect } from 'react';
+import { Form, InputNumber, Switch, Flex } from 'antd';
+import { useTranslation } from 'react-i18next';
+
+import type { RerankerConfig, KnowledgeGlobalConfigModalRef } from './types'
+import RbModal from '@/components/RbModal'
+import ModelSelect from '@/components/ModelSelect'
+
+const FormItem = Form.Item;
+
+interface KnowledgeGlobalConfigModalProps {
+  data: RerankerConfig;
+  refresh: (values: RerankerConfig, type: 'rerankerConfig') => void;
+}
+
+const KnowledgeGlobalConfigModal = forwardRef<KnowledgeGlobalConfigModalRef, KnowledgeGlobalConfigModalProps>(({ refresh, data }, ref) => {
+  const { t } = useTranslation();
+  const [visible, setVisible] = useState(false);
+  const [form] = Form.useForm<RerankerConfig>();
+  const values = Form.useWatch<RerankerConfig>([], form);
+
+  const handleClose = () => {
+    setVisible(false);
+    form.resetFields();
+  };
+
+  const handleOpen = () => {
+    form.setFieldsValue({ ...data, rerank_model: !!data?.reranker_id })
+    setVisible(true);
+  };
+
+  const handleSave = () => {
+    form.validateFields()
+      .then(() => {
+        refresh(values, 'rerankerConfig')
+        handleClose()
+      })
+      .catch((err) => console.log('err', err));
+  }
+
+  useEffect(() => {
+    if (values?.rerank_model) {
+      form.setFieldsValue({ ...data })
+    } else {
+      form.setFieldsValue({ reranker_id: undefined, reranker_top_k: undefined })
+    }
+  }, [values?.rerank_model])
+
+  useImperativeHandle(ref, () => ({ handleOpen }));
+
+  return (
+    <RbModal
+      title={t('application.globalConfig')}
+      open={visible}
+      onCancel={handleClose}
+      okText={t('common.save')}
+      onOk={handleSave}
+    >
+      <Form form={form} layout="vertical" size="middle">
+        <div className="rb:text-[#5B6167] rb:mb-6">{t('application.globalConfigDesc')}</div>
+        <Flex align="center" justify="space-between" className="rb:my-6!">
+          <div className="rb:text-[14px] rb:font-medium rb:leading-5">
+            {t('application.rerankModel')}
+            <div className="rb:mt-1 rb:text-[12px] rb:text-[#5B6167] rb:font-regular rb:leading-4">{t('application.rerankModelDesc')}</div>
+          </div>
+          <FormItem name="rerank_model" valuePropName="checked" className="rb:mb-0!">
+            <Switch />
+          </FormItem>
+        </Flex>
+        {values?.rerank_model && <>
+          <FormItem
+            name="reranker_id"
+            label={t('application.rearrangementModel')}
+            rules={[{ required: true, message: t('common.pleaseSelect') }]}
+            extra={t('application.rearrangementModelDesc')}
+          >
+            <ModelSelect params={{ type: 'rerank' }} className="rb:w-full!" />
+          </FormItem>
+          <FormItem
+            name="reranker_top_k"
+            label={t('application.reranker_top_k')}
+            rules={[{ required: true, message: t('common.pleaseEnter') }]}
+            extra={t('application.reranker_top_k_desc')}
+          >
+            <InputNumber style={{ width: '100%' }} min={1} max={20} onChange={(value) => form.setFieldValue('reranker_top_k', value)} />
+          </FormItem>
+        </>}
+      </Form>
+    </RbModal>
+  );
+});
+
+export default KnowledgeGlobalConfigModal;
diff --git a/web/src/components/Knowledge/KnowledgeListModal.tsx b/web/src/components/Knowledge/KnowledgeListModal.tsx
new file mode 100644
index 00000000..917aea05
--- /dev/null
+++ b/web/src/components/Knowledge/KnowledgeListModal.tsx
@@ -0,0 +1,138 @@
+import { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
+import { List, Form, Flex } from 'antd';
+import { useTranslation } from 'react-i18next';
+import clsx from 'clsx'
+
+import type { KnowledgeModalRef, KnowledgeBase } from './types'
+import type { KnowledgeBaseListItem } from '@/views/KnowledgeBase/types'
+import RbModal from '@/components/RbModal'
+import { getKnowledgeBaseList } from '@/api/knowledgeBase'
+import SearchInput from '@/components/SearchInput'
+import Empty from '@/components/Empty'
+import { formatDateTime } from '@/utils/format';
+
+interface KnowledgeModalProps {
+  refresh: (rows: KnowledgeBase[], type: 'knowledge') => void;
+  selectedList: KnowledgeBase[];
+}
+
+const KnowledgeListModal = forwardRef<KnowledgeModalRef, KnowledgeModalProps>(({ refresh, selectedList }, ref) => {
+  const { t } = useTranslation();
+  const [visible, setVisible] = useState(false);
+  const [list, setList] = useState<KnowledgeBaseListItem[]>([])
+  const [filterList, setFilterList] = useState<KnowledgeBaseListItem[]>([])
+  const [selectedIds, setSelectedIds] = useState<string[]>([])
+  const [selectedRows, setSelectedRows] = useState<KnowledgeBase[]>([])
+
+  const [form] = Form.useForm()
+  const query = Form.useWatch([], form)
+
+  const handleClose = () => {
+    setVisible(false);
+    form.resetFields()
+    setSelectedIds([])
+    setSelectedRows([])
+  };
+
+  const handleOpen = () => {
+    setVisible(true);
+    form.resetFields()
+    setSelectedIds([])
+    setSelectedRows([])
+  };
+
+  useEffect(() => {
+    if (visible) getList()
+  }, [query?.keywords, visible])
+
+  const getList = () => {
+    getKnowledgeBaseList(undefined, { ...query, pagesize: 100, orderby: 'created_at', desc: true })
+      .then(res => {
+        const response = res as { items: KnowledgeBaseListItem[] }
+        setList(response.items || [])
+        setSelectedIds([])
+        setSelectedRows([])
+      })
+  }
+
+  const handleSave = () => {
+    refresh(selectedRows.map(item => ({
+      ...item,
+      config: {
+        similarity_threshold: 0.7,
+        retrieve_type: 'hybrid',
+        top_k: 3,
+        weight: 1,
+      }
+    })), 'knowledge')
+    setVisible(false);
+  }
+
+  useImperativeHandle(ref, () => ({ handleOpen, handleClose }));
+
+  const handleSelect = (item: KnowledgeBase) => {
+    const index = selectedIds.indexOf(item.id)
+    if (index === -1) {
+      setSelectedIds([...selectedIds, item.id])
+      setSelectedRows([...selectedRows, item])
+    } else {
+      setSelectedIds(selectedIds.filter(id => id !== item.id))
+      setSelectedRows(selectedRows.filter(row => row.id !== item.id))
+    }
+  }
+
+  useEffect(() => {
+    if (list.length && selectedList.length) {
+      setFilterList(list.filter(item => selectedList.findIndex(vo => vo.id === item.id) < 0))
+    } else {
+      setFilterList([...list])
+    }
+  }, [list, selectedList])
+
+  return (
+    <RbModal
+      title={t('application.chooseKnowledge')}
+      open={visible}
+      onCancel={handleClose}
+      okText={t('common.save')}
+      onOk={handleSave}
+      width={1000}
+    >
+      <Flex gap={24} vertical>
+        <Form form={form}>
+          <Form.Item name="keywords" noStyle>
+            <SearchInput placeholder={t('knowledgeBase.searchPlaceholder')} className="rb:w-full!" variant="outlined" />
+          </Form.Item>
+        </Form>
+        {filterList.length === 0
+          ? <Empty />
+          : <List
+            grid={{ gutter: 16, column: 2 }}
+            dataSource={filterList}
+            renderItem={(item: KnowledgeBase) => (
+              <List.Item key={item.id}>
+                <Flex
+                  align="center"
+                  justify="space-between"
+                  className={clsx('rb:border rb:rounded-lg rb:p-[17px_16px]! rb:cursor-pointer rb:hover:bg-[#F0F3F8]', {
+                    'rb:bg-[rgba(21,94,239,0.06)] rb:border-[#155EEF] rb:text-[#155EEF]': selectedIds.includes(item.id),
+                    'rb:border-[#DFE4ED] rb:text-[#212332]': !selectedIds.includes(item.id),
+                  })}
+                  onClick={() => handleSelect(item)}
+                >
+                  <div className="rb:text-[16px] rb:leading-5.5">
+                    {item.name}
+                    <div className="rb:text-[12px] rb:leading-4 rb:text-[#5B6167] rb:mt-2">{t('application.contains', {include_count: item.doc_num})}</div>
+                  </div>
+                  <div className="rb:text-[12px] rb:leading-4 rb:text-[#5B6167]">{formatDateTime(item.created_at, 'YYYY-MM-DD HH:mm:ss')}</div>
+                </Flex>
+              </List.Item>
+            )}
+          />
+        }
+      </Flex>
+    </RbModal>
+  );
+});
+
+export default KnowledgeListModal;
diff --git a/web/src/components/Knowledge/types.ts b/web/src/components/Knowledge/types.ts
new file mode 100644
index 00000000..4d48b1c9
--- /dev/null
+++ b/web/src/components/Knowledge/types.ts
@@ -0,0 +1,31 @@
+import type { KnowledgeBaseListItem } from '@/views/KnowledgeBase/types'
+
+export interface RerankerConfig {
+  rerank_model?: boolean | undefined;
+  reranker_id?: string | undefined;
+  reranker_top_k?: number | undefined;
+}
+export type RetrieveType = 'participle' | 'semantic' | 'hybrid' | 'graph'
+export interface KnowledgeConfigForm {
+  kb_id?: string;
+  similarity_threshold?: number;
+  vector_similarity_weight?: number;
+  top_k?: number;
+  retrieve_type?: RetrieveType;
+}
+export interface KnowledgeBase extends KnowledgeBaseListItem, KnowledgeConfigForm {
+  config?: KnowledgeConfigForm
+}
+export interface KnowledgeConfig extends RerankerConfig {
+  knowledge_bases: KnowledgeBase[];
+}
+
+export interface KnowledgeConfigModalRef {
+  handleOpen: (data: KnowledgeBase) => void;
+}
+export interface KnowledgeGlobalConfigModalRef {
+  handleOpen: () => void;
+}
+export interface KnowledgeModalRef {
+  handleOpen: (config?: KnowledgeConfig[]) => void;
+}
diff --git a/web/src/components/MoreDropdown/index.tsx b/web/src/components/MoreDropdown/index.tsx
new file mode 100644
index 00000000..cce8216b
--- /dev/null
+++ b/web/src/components/MoreDropdown/index.tsx
@@ -0,0 +1,26 @@
+import { type FC, type MouseEvent } from 'react';
+import { Dropdown } from 'antd';
+import type { MenuProps } from 'antd';
+
+interface MoreDropdownProps {
+  items: NonNullable<MenuProps['items']>;
+  placement?: 'bottomRight' | 'bottomLeft' | 'topRight' | 'topLeft';
+  onClick?: (e: MouseEvent) => void;
+}
+
+/**
+ * Dropdown triggered by a "more" icon button.
+ * Used in card headers across ApiKeyManagement, Ontology, KnowledgeBase, etc.
+ */
+const MoreDropdown: FC<MoreDropdownProps> = ({ items, placement = 'bottomRight', onClick }) => {
+  return (
+    <Dropdown menu={{ items }} placement={placement}>
+      <div
+        onClick={(e) => { e.stopPropagation(); onClick?.(e); }}
+        className="rb:cursor-pointer rb:size-5.5 rb:bg-[url('@/assets/images/common/more.svg')] rb:hover:bg-[url('@/assets/images/common/more_hover.svg')]"
+      />
+    </Dropdown>
+  );
+};
+
+export default MoreDropdown;
diff --git a/web/src/components/OverflowTags/index.tsx b/web/src/components/OverflowTags/index.tsx
new file mode 100644
index 00000000..9ad9cd92
--- /dev/null
+++ b/web/src/components/OverflowTags/index.tsx
@@ -0,0 +1,91 @@
+import { useRef, useState, useLayoutEffect, useCallback, type ReactNode } from 'react'
+import { Popover, type PopoverProps } from 'antd'
+import Tag, { type TagProps } from '@/components/Tag'
+
+interface OverflowTagsProps {
+  items: ReactNode[];
+  gap?: number;
+  numTagColor?: TagProps['color'];
+  numTag?: (num?: number) => ReactNode;
+  popoverProps?: PopoverProps | false;
+}
+
+const OverflowTags = ({ items, gap = 8, numTagColor = 'default', numTag, popoverProps }: OverflowTagsProps) => {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const measureRef = useRef<HTMLDivElement>(null)
+  const [visibleCount, setVisibleCount] = useState(items.length)
+
+  const calculate = useCallback((containerWidth: number) => {
+    const measure = measureRef.current
+    if (!measure || containerWidth === 0) return
+
+    const children = Array.from(measure.children) as HTMLElement[]
+    if (!children.length) return
+
+    // last child is the sample +N tag
+    const extraTagWidth = (children[children.length - 1] as HTMLElement).offsetWidth
+    const widths = children.slice(0, -1).map(c => c.offsetWidth)
+
+    // check if all items fit
+    let total = widths.reduce((sum, w, i) => sum + (i > 0 ? gap : 0) + w, 0)
+    if (total <= containerWidth) {
+      setVisibleCount(widths.length)
+      return
+    }
+
+    // find max count that fits alongside +N
+    let used = 0
+    let count = 0
+    for (let i = 0; i < widths.length; i++) {
+      const w = used + (i > 0 ? gap : 0) + widths[i]
+      if (w + gap + extraTagWidth <= containerWidth) {
+        used = w
+        count = i + 1
+      } else {
+        break
+      }
+    }
+    setVisibleCount(count || 1)
+  }, [items, gap])
+
+  useLayoutEffect(() => {
+    const ro = new ResizeObserver(entries => {
+      calculate(entries[0].contentRect.width)
+    })
+    if (containerRef.current) {
+      ro.observe(containerRef.current)
+    }
+    return () => ro.disconnect()
+  }, [calculate])
+
+  const hidden = items.length - visibleCount
+
+  return (
+    <div ref={containerRef} style={{ width: '100%', minWidth: 0 }}>
+      {/* off-screen measure layer */}
+      <div ref={measureRef} style={{ display: 'flex', gap, position: 'fixed', top: -9999, left: -9999, visibility: 'hidden', pointerEvents: 'none' }}>
+        {items.map((item, i) => <span key={i}>{item}</span>)}
+        <Tag>+0</Tag>
+      </div>
+      <Popover
+        content={
+          <div style={{ display: 'flex', gap, flexWrap: 'wrap', maxWidth: 300 }}>
+            {items.map((item, i) => <span key={i}>{item}</span>)}
+          </div>
+        }
+        {...(popoverProps || {})}
+        open={popoverProps === false ? false : undefined}
+      >
+        <div style={{ display: 'flex', gap, alignItems: 'center', flexWrap: 'nowrap' }}>
+          {items.slice(0, visibleCount).map((item, i) => <span key={i}>{item}</span>)}
+          {hidden > 0 && numTag
+            ? numTag(hidden)
+            : hidden > 0 && <Tag color={numTagColor}>+{hidden}</Tag>
+          }
+        </div>
+      </Popover>
+    </div>
+  )
+}
+
+export default OverflowTags
diff --git a/web/src/components/RbCard/Card.tsx b/web/src/components/RbCard/Card.tsx
index db45915d..67099a6c 100644
--- a/web/src/components/RbCard/Card.tsx
+++ b/web/src/components/RbCard/Card.tsx
@@ -2,7 +2,7 @@
  * @Author: ZhaoYing 
  * @Date: 2026-02-02 15:21:14 
  * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-02-25 16:20:39
+ * @Last Modified time: 2026-04-22 10:51:00
  */
 /**
  * RbCard Component
@@ -98,7 +98,7 @@ const RbCard: FC<RbCardProps> = ({
               {typeof title === 'function' ? title() : title ?
                 <Flex align="center">
                   {avatarUrl
-                    ? <img src={avatarUrl} alt={avatarUrl} className="rb:mr-3.25 rb:size-12 rb:rounded-lg" />
+                    ? <img src={avatarUrl} alt={avatarUrl} className="rb:size-12 rb:rounded-lg" />
                     : avatar ? avatar : null
                   }
                   <div className={
@@ -110,7 +110,7 @@ const RbCard: FC<RbCardProps> = ({
                     )
                   }>
                     <div className={`rb:w-full rb:text-ellipsis rb:overflow-hidden rb:whitespace-nowrap ${titleClassName}`}>{title}</div>
-                    {subTitle && <div className="rb:text-[#5B6167] rb:text-[12px]">{subTitle}</div>}
+                    {subTitle && <div className="rb:w-full rb:text-[#5B6167] rb:text-[12px]">{subTitle}</div>}
                   </div>
                 </Flex> : null
               }
@@ -130,22 +130,24 @@ const RbCard: FC<RbCardProps> = ({
       variant={variant}
       {...props}
       title={typeof title === 'function' ? title() : title ?
-        <Flex align="center" gap={12}>
+        <Flex align="center" gap={12} className={extra ? 'rb:mr-3!' : ''}>
           {/* Avatar image or custom avatar component */}
           {avatarUrl 
-            ? <img src={avatarUrl} alt={avatarUrl} className="rb:mr-3.25 rb:size-12 rb:rounded-lg" />
+            ? <img src={avatarUrl} alt={avatarUrl} className="rb:size-12 rb:rounded-lg" />
             : avatar ? avatar : null
           }
           <div className={
-            clsx(
+            clsx('rb:flex-1',
               {
                 'rb:max-w-full': !avatarUrl && !avatar,
-                'rb:max-w-[calc(100%-80px)]': avatarUrl || avatar,
+                'rb:w-[calc(100%-80px)]': avatarUrl || avatar,
               }
             )
           }>
             {/* Title with tooltip for overflow text */}
-            <Tooltip title={title}><div className={`rb:w-full rb:text-ellipsis rb:overflow-hidden rb:whitespace-nowrap ${titleClassName}`}>{title}</div></Tooltip>
+            <Tooltip title={title}>
+              <div className={`rb:w-full rb:text-ellipsis rb:overflow-hidden rb:whitespace-nowrap ${titleClassName}`}>{title}</div>
+            </Tooltip>
             {/* Optional subtitle */}
             {subTitle && <div className="rb:text-[#5B6167] rb:text-[12px]">{subTitle}</div>}
           </div>
diff --git a/web/src/components/RbCard/index.tsx b/web/src/components/RbCard/index.tsx
index ec2b7301..baae9ded 100644
--- a/web/src/components/RbCard/index.tsx
+++ b/web/src/components/RbCard/index.tsx
@@ -2,7 +2,7 @@
  * @Author: ZhaoYing 
  * @Date: 2026-02-02 15:21:14 
  * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-03-20 20:24:43
+ * @Last Modified time: 2026-04-22 12:03:08
  */
 /**
  * RbCard Component
@@ -67,7 +67,7 @@ const RbCard: FC<RbCardProps> = ({
               {title}
             </div>
           </Tooltip>
-          : <div className="rb:flex-1 rb:leading-5.5 rb:min-w-0 rb:whitespace-break-spaces rb:wrap-break-word rb:line-clamp-2">
+          : <div className={`rb:flex-1 rb:leading-5.5 rb:min-w-0 rb:whitespace-break-spaces rb:wrap-break-word rb:line-clamp-2 ${titleClassName}`}>
             {title}
           </div>
         }
diff --git a/web/src/components/TablePageLayout/index.tsx b/web/src/components/TablePageLayout/index.tsx
new file mode 100644
index 00000000..74056d19
--- /dev/null
+++ b/web/src/components/TablePageLayout/index.tsx
@@ -0,0 +1,26 @@
+import { type FC, type ReactNode } from 'react';
+import { Flex } from 'antd';
+
+interface TablePageLayoutProps {
+  title: ReactNode;
+  extra?: ReactNode;
+  children: ReactNode;
+}
+
+/**
+ * Standard table page container with white background, title and action area.
+ * Used by management pages like MemberManagement, UserManagement, etc.
+ */
+const TablePageLayout: FC<TablePageLayoutProps> = ({ title, extra, children }) => {
+  return (
+    <div className="rb:h-full rb:overflow-hidden rb:bg-white rb:rounded-lg rb:pt-3 rb:px-3">
+      <Flex justify="space-between" align="center" className="rb:px-1! rb:mb-3!">
+        <div className="rb:font-[MiSans-Bold] rb:font-bold rb:text-[#212332] rb:leading-5">{title}</div>
+        {extra && <div>{extra}</div>}
+      </Flex>
+      {children}
+    </div>
+  );
+};
+
+export default TablePageLayout;
diff --git a/web/src/components/Tag/index.tsx b/web/src/components/Tag/index.tsx
index f07f5cad..e7307843 100644
--- a/web/src/components/Tag/index.tsx
+++ b/web/src/components/Tag/index.tsx
@@ -1,8 +1,8 @@
 /*
  * @Author: ZhaoYing 
  * @Date: 2026-02-02 15:29:57 
- * @Last Modified by:   ZhaoYing 
- * @Last Modified time: 2026-02-02 15:29:57 
+ * @Last Modified by: ZhaoYing
+ * @Last Modified time: 2026-04-22 13:48:09
  */
 /**
  * Tag Component
@@ -23,6 +23,7 @@ export interface TagProps {
   children: ReactNode;
   /** Additional CSS classes */
   className?: string;
+  variant?: 'outline' | 'borderless'
 }
 
 /** Color theme mappings with text, border, and background colors */
@@ -37,9 +38,9 @@ const colors = {
 }
 
 /** Custom tag component with color themes */
-const Tag: FC<TagProps> = ({ color = 'processing', children, className }) => {
+const Tag: FC<TagProps> = ({ color = 'processing', children, className, variant = 'outline' }) => {
   return (
-    <span className={`rb:inline-block rb:px-1 rb:py-0.5 rb:rounded-sm rb:text-[12px] rb:font-regular! rb:leading-4 rb:border ${colors[color]} ${className || ''}`}>
+    <span className={`rb:inline-block rb:px-1 rb:py-0.5 rb:rounded-sm rb:text-[12px] rb:font-regular! rb:leading-4 rb:border ${colors[color]} ${className || ''} ${variant === 'borderless' ? 'rb:border-none!' : ''}`}>
       {children}
     </span>
   )
diff --git a/web/src/hooks/useDeleteConfirm.ts b/web/src/hooks/useDeleteConfirm.ts
new file mode 100644
index 00000000..65f286b3
--- /dev/null
+++ b/web/src/hooks/useDeleteConfirm.ts
@@ -0,0 +1,33 @@
+import { App } from 'antd';
+import { useTranslation } from 'react-i18next';
+
+interface DeleteConfirmOptions {
+  name: string;
+  onOk: () => Promise<unknown> | void;
+}
+
+/**
+ * Hook for standardized delete confirmation dialog.
+ * Extracts the repeated modal.confirm pattern used across all management views.
+ */
+const useDeleteConfirm = () => {
+  const { t } = useTranslation();
+  const { modal, message } = App.useApp();
+
+  const confirm = ({ name, onOk }: DeleteConfirmOptions) => {
+    modal.confirm({
+      title: t('common.confirmDeleteDesc', { name }),
+      okText: t('common.delete'),
+      cancelText: t('common.cancel'),
+      okType: 'danger',
+      onOk: async () => {
+        await onOk();
+        message.success(t('common.deleteSuccess'));
+      },
+    });
+  };
+
+  return confirm;
+};
+
+export default useDeleteConfirm;
diff --git a/web/src/main.tsx b/web/src/main.tsx
index 3e86feae..d4b69f7a 100644
--- a/web/src/main.tsx
+++ b/web/src/main.tsx
@@ -11,6 +11,15 @@ import App from '@/App.tsx'
 // Synchronously import i18n config to ensure initialization before component rendering
 import './i18n'
 
+// Fix autofill background color on focus
+document.addEventListener('animationstart', (e) => {
+  if (e.animationName === 'onAutoFillStart') {
+    const input = e.target as HTMLInputElement
+    input.style.backgroundColor = 'transparent'
+    input.addEventListener('focus', () => { input.style.backgroundColor = 'transparent' }, { once: false })
+  }
+})
+
 // After a new release, old dynamic chunk files are deleted; force a page reload on preload error
 window.addEventListener('vite:preloadError', () => {
   console.warn('New version detected, reloading page to load latest assets...')
diff --git a/web/src/styles/index.css b/web/src/styles/index.css
index 13904435..0bbacb51 100644
--- a/web/src/styles/index.css
+++ b/web/src/styles/index.css
@@ -457,4 +457,14 @@ body {
 
 .pageTabs.ant-segmented .ant-segmented-item-selected {
   box-shadow: 0px 2px 4px 0px rgba(33, 35, 50, 0.16);
-}
\ No newline at end of file
+}
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+input:-webkit-autofill:active {
+  -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
+  transition: background-color 5000s ease-in-out 0s !important;
+  animation-name: onAutoFillStart;
+  animation-duration: 1ms;
+}
+@keyframes onAutoFillStart { from {} to {} }
\ No newline at end of file
diff --git a/web/src/views/ApiKeyManagement/index.tsx b/web/src/views/ApiKeyManagement/index.tsx
index 071b9ef5..b14899f5 100644
--- a/web/src/views/ApiKeyManagement/index.tsx
+++ b/web/src/views/ApiKeyManagement/index.tsx
@@ -1,21 +1,21 @@
 /*
  * @Author: ZhaoYing 
  * @Date: 2026-02-03 15:52:50 
- * @Last Modified by:   ZhaoYing 
- * @Last Modified time: 2026-02-03 15:52:50 
+ * @Last Modified by: ZhaoYing
+ * @Last Modified time: 2026-04-22 12:07:40
  */
 import React, { useRef } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Button, App, Dropdown, Flex } from 'antd';
+import { Button, App, Flex } from 'antd';
 import clsx from 'clsx';
-import { DeleteOutlined, EditOutlined, EyeOutlined } from '@ant-design/icons';
 import copy from 'copy-to-clipboard'
-import type { MenuInfo } from 'rc-menu/lib/interface';
 
 import type { ApiKey, ApiKeyModalRef } from './types';
 import ApiKeyModal from './components/ApiKeyModal';
 import ApiKeyDetailModal from './components/ApiKeyDetailModal';
 import RbCard from '@/components/RbCard'
+import MoreDropdown from '@/components/MoreDropdown'
+import useDeleteConfirm from '@/hooks/useDeleteConfirm'
 import { getApiKeyListUrl, deleteApiKey } from '@/api/apiKey';
 import PageScrollList, { type PageScrollListRef } from '@/components/PageScrollList'
 import { formatDateTime } from '@/utils/format';
@@ -30,7 +30,8 @@ import RbDescriptions from '@/components/RbDescriptions';
 const ApiKeyManagement: React.FC = () => {
   // Hooks
   const { t } = useTranslation();
-  const { modal, message } = App.useApp();
+  const { message } = App.useApp();
+  const deleteConfirm = useDeleteConfirm();
   
   // Refs
   const apiKeyModalRef = useRef<ApiKeyModalRef>(null);
@@ -65,18 +66,9 @@ const ApiKeyManagement: React.FC = () => {
    * @param item - API key item to delete
    */
   const handleDelete = (item: ApiKey) => {
-    modal.confirm({
-      title: t('common.confirmDeleteDesc', { name: item.name }),
-      okText: t('common.delete'),
-      cancelText: t('common.cancel'),
-      okType: 'danger',
-      onOk: () => {
-      deleteApiKey(item.id)
-        .then(() => {
-          refresh();
-          message.success(t('common.deleteSuccess'))
-        })
-      }
+    deleteConfirm({
+      name: item.name,
+      onOk: () => deleteApiKey(item.id).then(refresh),
     })
   }
   /**
@@ -103,49 +95,39 @@ const ApiKeyManagement: React.FC = () => {
         renderItem={(apiKeyItem) => {
           return (
             <RbCard
-              title={
-                <Flex justify="space-between">
-                  <Flex gap={4} vertical>
-                    {apiKeyItem.name}
-                    <Flex gap={6}>
-                      {apiKeyItem.scopes?.includes('memory') && <Tag>{t('apiKey.memoryEngine')}</Tag>}
-                      {apiKeyItem.scopes?.includes('rag') && <Tag color="success">{t('apiKey.knowledgeBase')}</Tag>}
-                      {!apiKeyItem.scopes?.includes('memory') && !apiKeyItem.scopes?.includes('rag') && <div>{t('apiKey.noScopes')}</div>}
-                    </Flex>
-                  </Flex>
-                  <Dropdown
-                    menu={{
-                      items: [
-                        {
-                          key: 'edit',
-                          icon: <div className="rb:size-4 rb:bg-cover rb:cursor-pointer rb:bg-[url('@/assets/images/common/edit_bold.svg')]" />,
-                          label: t('common.edit'),
-                          onClick: () => handleEdit(apiKeyItem),
-                        },
-                        {
-                          key: 'view',
-                          icon: <div className="rb:size-4 rb:bg-cover rb:cursor-pointer rb:bg-[url('@/assets/images/common/eye.svg')]" />,
-                          label: t('common.view'),
-                          onClick: () => handleView(apiKeyItem),
-                        },
-                        {
-                          key: 'delete',
-                          danger: true,
-                          icon: <div className="rb:size-4 rb:bg-cover rb:cursor-pointer rb:bg-[url('@/assets/images/common/delete_red_big.svg')]" />,
-                          label: t('common.delete'),
-                          onClick: () => handleDelete(apiKeyItem),
-                        },
-                      ]
-                    }}
-                    placement="bottomRight"
-                  >
-                    <div className="rb:cursor-pointer rb:size-5.5 rb:bg-[url('@/assets/images/common/more.svg')] rb:hover:bg-[url('@/assets/images/common/more_hover.svg')]"></div>
-                  </Dropdown>
-                </Flex>
-              }
-              isNeedTooltip={false}
-              headerClassName="rb:min-h-[78px]!"
+              title={apiKeyItem.name}
+              extra={<MoreDropdown
+                items={[
+                  {
+                    key: 'edit',
+                    icon: <div className="rb:size-4 rb:bg-cover rb:cursor-pointer rb:bg-[url('@/assets/images/common/edit_bold.svg')]" />,
+                    label: t('common.edit'),
+                    onClick: () => handleEdit(apiKeyItem),
+                  },
+                  {
+                    key: 'view',
+                    icon: <div className="rb:size-4 rb:bg-cover rb:cursor-pointer rb:bg-[url('@/assets/images/common/eye.svg')]" />,
+                    label: t('common.view'),
+                    onClick: () => handleView(apiKeyItem),
+                  },
+                  {
+                    key: 'delete',
+                    danger: true,
+                    icon: <div className="rb:size-4 rb:bg-cover rb:cursor-pointer rb:bg-[url('@/assets/images/common/delete_red_big.svg')]" />,
+                    label: t('common.delete'),
+                    onClick: () => handleDelete(apiKeyItem),
+                  },
+                ]}
+              />}
+              variant="borderless"
+              headerClassName="rb:min-h-[42px]!"
+              titleClassName="rb:line-clamp-1!"
             >
+              <Flex gap={6} className="rb:-mt-2! rb:mb-4!">
+                {apiKeyItem.scopes?.includes('memory') && <Tag>{t('apiKey.memoryEngine')}</Tag>}
+                {apiKeyItem.scopes?.includes('rag') && <Tag color="success">{t('apiKey.knowledgeBase')}</Tag>}
+                {!apiKeyItem.scopes?.includes('memory') && !apiKeyItem.scopes?.includes('rag') && <div className="rb:font-regular!">{t('apiKey.noScopes')}</div>}
+              </Flex>
               <RbDescriptions
                 items={['id', 'is_expired', 'created_at'].map(key => ({
                   key,
@@ -166,7 +148,7 @@ const ApiKeyManagement: React.FC = () => {
               <Flex align="center" justify="space-between" className="rb:h-8! rb:mt-4! rb:py-1! rb:pl-2.5! rb:pr-1! rb:bg-[#F6F6F6] rb:rounded-md rb:leading-5">
                 {maskApiKeys(apiKeyItem.api_key)}
                 
-                <div onClick={() => handleCopy(apiKeyItem.api_key)} className="rb:cursor-pointer rb:rounded-md rb:size-6 rb:bg-[url('@/assets/images/common/copy_dark.svg')] rb:bg-size-[16px_16px] rb:bg-center rb:bg-no-repeat" style={{ backgroundColor: 'rgba(0,0,0,0.08)' }}></div>
+                <div onClick={() => handleCopy(apiKeyItem.api_key)} className="rb:cursor-pointer rb:rounded-md rb:size-6 rb:bg-[url('@/assets/images/common/copy_dark.svg')] rb:bg-size-[16px_16px] rb:bg-center rb:bg-no-repeat rb:hover:bg-[rgba(0,0,0,0.08)]"></div>
               </Flex>
             </RbCard>
           );
diff --git a/web/src/views/ApplicationConfig/components/ToolList/ToolList.tsx b/web/src/views/ApplicationConfig/components/ToolList/ToolList.tsx
index 0feb814b..b9981432 100644
--- a/web/src/views/ApplicationConfig/components/ToolList/ToolList.tsx
+++ b/web/src/views/ApplicationConfig/components/ToolList/ToolList.tsx
@@ -137,7 +137,7 @@ const ToolList: FC<{ value?: ToolOption[]; onChange?: (config: ToolOption[]) =>
     <Card 
       title={t('application.toolConfiguration')}
       extra={
-        <Button className="rb:h-6! rb:py-0! rb:px-2! rb:rounded-md! rb:text-[#21233" onClick={handleAddTool}>+ {t('application.addTool')}</Button>
+        <Button className="rb:h-6! rb:py-0! rb:px-2! rb:rounded-md! rb:text-[#212332]" onClick={handleAddTool}>+ {t('application.addTool')}</Button>
       }
     >
       <div className="rb:leading-4.5 rb:text-[12px] rb:mb-2 rb:font-medium">
diff --git a/web/src/views/ApplicationConfig/components/VariableList/VariableList.tsx b/web/src/views/ApplicationConfig/components/VariableList/VariableList.tsx
index 9f7f71f5..432d0e3d 100644
--- a/web/src/views/ApplicationConfig/components/VariableList/VariableList.tsx
+++ b/web/src/views/ApplicationConfig/components/VariableList/VariableList.tsx
@@ -60,7 +60,7 @@ interface VariableListProps {
       extra={
         <Button
           size="small"
-          className="rb:h-6! rb:py-0! rb:px-2! rb:rounded-md! rb:text-[#21233"
+          className="rb:h-6! rb:py-0! rb:px-2! rb:rounded-md! rb:text-[#212332]"
           onClick={handleAddVariable}
         >
           + {t('application.addVariables')}
diff --git a/web/src/views/MemberManagement/index.tsx b/web/src/views/MemberManagement/index.tsx
index b9b392ff..6f17a9bb 100644
--- a/web/src/views/MemberManagement/index.tsx
+++ b/web/src/views/MemberManagement/index.tsx
@@ -10,7 +10,7 @@
  */
 
 import React, { useRef } from 'react';
-import { App, Button, Space, Flex } from 'antd';
+import { Button, Space } from 'antd';
 import { useTranslation } from 'react-i18next';
 import type { ColumnsType } from 'antd/es/table';
 
@@ -20,13 +20,15 @@ import type { Member, MemberModalRef } from './types'
 import Tag from '@/components/Tag';
 import Table, { type TableRef } from '@/components/Table'
 import { formatDateTime } from '@/utils/format';
+import TablePageLayout from '@/components/TablePageLayout';
+import useDeleteConfirm from '@/hooks/useDeleteConfirm';
 
 /**
  * Member management main component
  */
 const MemberManagement: React.FC = () => {
   const { t } = useTranslation();
-  const { message, modal } = App.useApp();
+  const deleteConfirm = useDeleteConfirm();
   const memberFormRef = useRef<MemberModalRef>(null);
   const tableRef = useRef<TableRef>(null);
 
@@ -43,20 +45,11 @@ const MemberManagement: React.FC = () => {
   }
 
   /** Delete member with confirmation */
-  const handleDelete = async (member: Member) => {
-    modal.confirm({
-      title: t('common.confirmDeleteDesc', { name: member.username }),
-      okText: t('common.delete'),
-      cancelText: t('common.cancel'),
-      okType: 'danger',
-      onOk: () => {
-        deleteMember(member.id)
-          .then(() => {
-            message.success(t('common.deleteSuccess'));
-            refreshTable();
-          })
-      }
-    })
+  const handleDelete = (member: Member) => {
+    deleteConfirm({
+      name: member.username,
+      onOk: () => deleteMember(member.id).then(refreshTable),
+    });
   };
 
   /** Table column configuration */
@@ -105,13 +98,10 @@ const MemberManagement: React.FC = () => {
   ];
 
   return (
-    <div className="rb:h-full rb:overflow-hidden rb:bg-white rb:rounded-lg rb:pt-3 rb:px-3">
-      <Flex justify="space-between" align="center" className="rb:px-1! rb:mb-3!">
-        <div className="rb:font-[MiSans-Bold] rb:font-bold rb:text-[#212332] rb:leading-5">{t('member.memberList')}</div>
-        <Button type="primary" onClick={() => handleEdit()}>
-          + {t('member.createMember')}
-        </Button>
-      </Flex>
+    <TablePageLayout
+      title={t('member.memberList')}
+      extra={<Button type="primary" onClick={() => handleEdit()}>+ {t('member.createMember')}</Button>}
+    >
       <Table<Member>
         ref={tableRef}
         apiUrl={memberListUrl}
@@ -125,7 +115,7 @@ const MemberManagement: React.FC = () => {
         ref={memberFormRef}
         refreshTable={refreshTable}
       />
-    </div>
+    </TablePageLayout>
   );
 };
 
diff --git a/web/src/views/ModelManagement/List.tsx b/web/src/views/ModelManagement/List.tsx
index 7342ecd1..50342bd5 100644
--- a/web/src/views/ModelManagement/List.tsx
+++ b/web/src/views/ModelManagement/List.tsx
@@ -2,7 +2,7 @@
  * @Author: ZhaoYing 
  * @Date: 2026-02-03 16:50:10 
  * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-03-27 19:18:55
+ * @Last Modified time: 2026-04-22 10:31:49
  */
 /**
  * Model List View
@@ -11,13 +11,14 @@
  */
 
 import { useRef, useState, useEffect, forwardRef, useImperativeHandle } from 'react';
-import { Button, Flex, Row, Col, Tooltip, Popover } from 'antd'
+import { Button, Flex, Row, Col, Tooltip } from 'antd'
 import { useTranslation } from 'react-i18next';
 
 import type { ProviderModelItem, KeyConfigModalRef, ModelListDetailRef, ModelListItem, BaseRef } from './types'
 import RbCard from '@/components/RbCard'
 import { getModelNewList } from '@/api/models'
 import PageEmpty from '@/components/Empty/PageEmpty';
+import OverflowTags from '@/components/OverflowTags';
 import Tag from '@/components/Tag';
 import KeyConfigModal from './components/KeyConfigModal'
 import ModelListDetail from './components/ModelListDetail'
@@ -76,13 +77,9 @@ const ModelList = forwardRef<BaseRef, { query: any; handleEdit: (vo?: ModelListI
                     <div className="rb:wrap-break-word rb:line-clamp-1">{String(item.provider).charAt(0).toUpperCase() + String(item.provider).slice(1)}</div>
                   </Tooltip>
 
-                  <Popover content={
-                    <Flex gap={8} className="rb:overflow-hidden rb:flex-nowrap rb:w-auto!">{item.tags.map(tag => <Tag key={tag} className="rb:shrink-0">{t(`modelNew.${tag}`)}</Tag>)}</Flex>
-                  }>
-                    <Flex gap={8} className="rb:overflow-hidden rb:flex-nowrap rb:w-auto!">
-                      {item.tags.map(tag => <Tag key={tag} className="rb:shrink-0">{t(`modelNew.${tag}`)}</Tag>)}
-                    </Flex>
-                  </Popover>
+                  <OverflowTags
+                    items={item.tags.map(tag => <Tag>{t(`modelNew.${tag}`)}</Tag>)}
+                  />
                 </Flex>}
                 isNeedTooltip={false}
                 footer={<Row gutter={9} className="rb:pt-2!">
diff --git a/web/src/views/ModelManagement/components/ModelListDetail.tsx b/web/src/views/ModelManagement/components/ModelListDetail.tsx
index 8d44a37f..7c50c086 100644
--- a/web/src/views/ModelManagement/components/ModelListDetail.tsx
+++ b/web/src/views/ModelManagement/components/ModelListDetail.tsx
@@ -2,7 +2,7 @@
  * @Author: ZhaoYing 
  * @Date: 2026-02-03 16:49:45 
  * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-03-27 18:06:23
+ * @Last Modified time: 2026-04-22 10:24:32
  */
 /**
  * Model List Detail Drawer
@@ -12,12 +12,13 @@
 
 import { useState, useImperativeHandle, forwardRef, useRef, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Button, Switch, Row, Col, Space, Tooltip, Popover } from 'antd'
+import { Button, Switch, Row, Col, Tooltip } from 'antd'
 
 import type { ProviderModelItem, ModelListItem, ModelListDetailRef, MultiKeyConfigModalRef } from '../types';
 import RbDrawer from '@/components/RbDrawer';
 import RbCard from '@/components/RbCard/Card'
 import Tag from '@/components/Tag';
+import OverflowTags from '@/components/OverflowTags';
 import PageEmpty from '@/components/Empty/PageEmpty';
 import MultiKeyConfigModal from './MultiKeyConfigModal'
 import { getModelNewList, updateModelStatus, modelTypeUrl } from '@/api/models'
@@ -139,18 +140,13 @@ const ModelListDetail = forwardRef<ModelListDetailRef, ModelListDetailProps>(({
               key={item.id}
               title={item.name}
               subTitle={
-                <Popover content={
-                  <Space size={8} className="rb:mt-1!">
-                    <Tag>{t(`modelNew.${item.type}`)}</Tag>
-                    <Tag color="warning">{item.api_keys.length}{t('modelNew.apiKeyNum')}</Tag>
-                    {item.capability?.map(vo => <Tag key={vo}>{t(`modelNew.${vo}`)}</Tag>)}
-                  </Space>}>
-                  <Space size={8} className="rb:mt-1!">
-                    <Tag>{t(`modelNew.${item.type}`)}</Tag>
-                    <Tag color="warning">{item.api_keys.length}{t('modelNew.apiKeyNum')}</Tag>
-                    {item.capability?.map(vo => <Tag key={vo}>{t(`modelNew.${vo}`)}</Tag>)}
-                  </Space>
-                </Popover>}
+                <OverflowTags
+                  items={[
+                    <Tag>{t(`modelNew.${item.type}`)}</Tag>,
+                    <Tag color="warning">{item.api_keys.length}{t('modelNew.apiKeyNum')}</Tag>,
+                    ...(item.capability ?? []).map(vo => <Tag>{t(`modelNew.${vo}`)}</Tag>)
+                  ]}
+                />}
               avatarUrl={getLogoUrl(item.logo)}
               avatar={
                 <div className="rb:w-12 rb:h-12 rb:rounded-lg rb:mr-3.25 rb:bg-[#155eef] rb:flex rb:items-center rb:justify-center rb:text-[28px] rb:text-[#ffffff]">
diff --git a/web/src/views/Ontology/index.tsx b/web/src/views/Ontology/index.tsx
index 7b98efea..1d4b9e94 100644
--- a/web/src/views/Ontology/index.tsx
+++ b/web/src/views/Ontology/index.tsx
@@ -2,13 +2,13 @@
  * @Author: ZhaoYing 
  * @Date: 2026-02-03 14:10:15 
  * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-03-27 15:03:09
+ * @Last Modified time: 2026-04-22 11:47:38
  */
 import { type FC, useState, useRef } from 'react';
 import type { MenuInfo } from 'rc-menu/lib/interface';
 import { useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import { Row, Col, Flex, Space, App, Tooltip, Dropdown } from 'antd'
+import { Row, Col, Flex, Space, Tooltip } from 'antd'
 
 import SearchInput from '@/components/SearchInput';
 import OntologyModal from './components/OntologyModal'
@@ -21,6 +21,9 @@ import { formatDateTime } from '@/utils/format'
 import OntologyImportModal from './components/OntologyImportModal'
 import OntologyExportModal from './components/OntologyExportModal'
 import RbButton from '@/components/RbButton'
+import MoreDropdown from '@/components/MoreDropdown'
+import useDeleteConfirm from '@/hooks/useDeleteConfirm'
+import OverflowTags from '@/components/OverflowTags'
 
 /**
  * Ontology management page component
@@ -30,7 +33,7 @@ const Ontology: FC = () => {
   // Hooks
   const { t } = useTranslation();
   const navigate = useNavigate()
-  const { modal, message } = App.useApp();
+  const deleteConfirm = useDeleteConfirm();
   
   // State
   const [query, setQuery] = useState<Query>({});
@@ -65,18 +68,9 @@ const Ontology: FC = () => {
    */
   const handleDelete = (item: OntologyItem, e: MenuInfo) => {
     e.domEvent.stopPropagation();
-    modal.confirm({
-      title: t('common.confirmDeleteDesc', { name: item.scene_name }),
-      okText: t('common.delete'),
-      cancelText: t('common.cancel'),
-      okType: 'danger',
-      onOk: () => {
-        deleteOntologyScene(item.scene_id)
-          .then(() => {
-            message.success(t('common.deleteSuccess'))
-            scrollListRef.current?.refresh()
-          })
-      }
+    deleteConfirm({
+      name: item.scene_name,
+      onOk: () => deleteOntologyScene(item.scene_id).then(() => scrollListRef.current?.refresh()),
     })
   }
   
@@ -145,27 +139,22 @@ const Ontology: FC = () => {
                     {item.is_system_default  && <Tag color="warning">{t('common.default')}</Tag>}
                   </Space>
                 </Flex>
-                <Dropdown
-                  menu={{
-                    items: [
-                      {
-                        key: 'edit',
-                        icon: <div className="rb:size-4 rb:bg-cover rb:cursor-pointer rb:bg-[url('@/assets/images/common/edit_bold.svg')]" />,
-                        label: t('common.edit'),
-                        onClick: (e: MenuInfo) => handleEdit(item, e),
-                      },
-                      {
-                        key: 'delete',
-                        icon: <div className="rb:size-4 rb:bg-cover rb:cursor-pointer rb:bg-[url('@/assets/images/common/delete_red_big.svg')]" />,
-                        label: t('common.delete'),
-                        onClick: (e: MenuInfo) => handleDelete(item, e),
-                      },
-                    ]
-                  }}
-                  placement="bottomRight"
-                >
-                  <div onClick={(e) => e.stopPropagation()} className="rb:cursor-pointer rb:size-5.5 rb:bg-[url('@/assets/images/common/more.svg')] rb:hover:bg-[url('@/assets/images/common/more_hover.svg')]"></div>
-                </Dropdown>
+                <MoreDropdown
+                  items={[
+                    {
+                      key: 'edit',
+                      icon: <div className="rb:size-4 rb:bg-cover rb:cursor-pointer rb:bg-[url('@/assets/images/common/edit_bold.svg')]" />,
+                      label: t('common.edit'),
+                      onClick: (e: MenuInfo) => handleEdit(item, e),
+                    },
+                    {
+                      key: 'delete',
+                      icon: <div className="rb:size-4 rb:bg-cover rb:cursor-pointer rb:bg-[url('@/assets/images/common/delete_red_big.svg')]" />,
+                      label: t('common.delete'),
+                      onClick: (e: MenuInfo) => handleDelete(item, e),
+                    },
+                  ]}
+                />
               </Flex>
             }
             isNeedTooltip={false}
@@ -177,16 +166,13 @@ const Ontology: FC = () => {
               <div className="rb:h-10 rb:wrap-break-word rb:line-clamp-2 rb:leading-5">{item.scene_description}</div>
             </Tooltip>
 
-            <Flex gap={8} wrap align="center" className="rb:mt-2!">
-              <Flex gap={8} className="rb:flex-1 rb:overflow-hidden rb:wrap-break-word! rb:line-clamp-1!">
-                {item.entity_type?.map((type, i) => (
-                  <span key={i} className="rb:bg-[#F6F6F6] rb:rounded-md rb:py-px rb:px-1 rb:text-[12px] rb:leading-4.5">{type}</span>
-                ))}
-              </Flex>
-              {item.type_num > 3 && (
-                <span className="rb:bg-[#F6F6F6] rb:rounded-full rb:py-px rb:px-1 rb:text-[12px] rb:leading-4.5">+{item.type_num - 3}</span>
-              )}
-            </Flex>
+            <div className="rb:mt-2">
+              <OverflowTags
+                popoverProps={false}
+                items={[...item.entity_type?.map((type, i) => <Tag key={i} variant="borderless" color="dark">{type}</Tag>), <Tag variant="borderless" color="dark">{`+${item.type_num - 3}`}</Tag>]}
+                numTag={(num?: number) => <Tag variant="borderless" color="dark">{`+${item.type_num - 3 + (num ? num - 1 : 0)}`}</Tag>}
+              />
+            </div>
 
             <Row className="rb:mt-4!">
               {(['created_at', 'updated_at'] as const).map(key => (
diff --git a/web/src/views/Skills/components/ToolList/ToolList.tsx b/web/src/views/Skills/components/ToolList/ToolList.tsx
index 0df4da58..2a36b97d 100644
--- a/web/src/views/Skills/components/ToolList/ToolList.tsx
+++ b/web/src/views/Skills/components/ToolList/ToolList.tsx
@@ -157,7 +157,7 @@ const ToolList: FC<ToolListProps> = ({value, onChange}) => {
     <Card
       title={t('application.toolConfiguration')}
       extra={
-        <Button className="rb:h-6! rb:py-0! rb:px-2! rb:rounded-md! rb:text-[#21233" onClick={handleAddTool}>+ {t('application.addTool')}</Button>
+        <Button className="rb:h-6! rb:py-0! rb:px-2! rb:rounded-md! rb:text-[#212332]" onClick={handleAddTool}>+ {t('application.addTool')}</Button>
       }
     >
       {toolList.length === 0
diff --git a/web/src/views/ToolManagement/Custom.tsx b/web/src/views/ToolManagement/Custom.tsx
index 64f0af8f..3c538f88 100644
--- a/web/src/views/ToolManagement/Custom.tsx
+++ b/web/src/views/ToolManagement/Custom.tsx
@@ -16,6 +16,8 @@ import BodyWrapper from '@/components/Empty/BodyWrapper'
 import RbCard from '@/components/RbCard'
 import { getTools, deleteTool } from '@/api/tools'
 import { formatDateTime } from '@/utils/format'
+import OverflowTags from '@/components/OverflowTags'
+import Tag from '@/components/Tag'
 
 const Custom = forwardRef<CustomRef, { getStatusTag: (status: string) => ReactNode; keyword?: string | undefined }>(({ getStatusTag, keyword }, ref) => {
   const { t } = useTranslation();
@@ -110,24 +112,12 @@ const Custom = forwardRef<CustomRef, { getStatusTag: (status: string) => ReactNo
                 isNeedTooltip={false}
               >
                 {item.tags?.length > 0
-                  ? <Flex gap={8} wrap align="center">
-                    <Flex gap={6}>
-                      {item.tags?.slice(0, 2).map((type, i) => (
-                        <div key={i} className="rb:bg-[#F6F6F6] rb:rounded-md rb:py-px rb:px-1 rb:text-[12px] rb:leading-4.5">{type}</div>
-                      ))}
-                    </Flex>
-                    {item.tags.length > 2 && (
-                      <Tooltip
-                        title={<Flex wrap gap={6}>{item.tags?.slice(2, item.tags.length).map((type, i) => (
-                          <div key={i} className="rb:bg-[#F6F6F6] rb:rounded-md rb:py-px rb:px-1 rb:text-[12px] rb:leading-4.5 rb:text-[#171719]">{type}</div>
-                        ))}</Flex>}
-                        color="white"
-                        placement="bottom"
-                      >
-                        <div className="rb:bg-[#F6F6F6] rb:rounded-md rb:py-px rb:px-1 rb:text-[12px] rb:leading-4.5">+{item.tags.length - 2}</div>
-                      </Tooltip>
-                    )}
-                  </Flex>
+                  ? <div>
+                    <OverflowTags
+                      items={item.tags?.map((type, i) => <Tag variant="borderless" color="dark" key={i}>{type}</Tag>)}
+                      numTag={(num?: number) => <Tag variant="borderless" color="dark">{`+${num}`}</Tag>}
+                    />
+                  </div>
                   : <div className="rb:text-[#A8A9AA] rb:leading-5">{t('tool.noTags')}</div>
                 }
                 <Row className="rb:bg-[#F6F6F6] rb:rounded-lg rb:py-2! rb:px-3! rb:leading-5 rb:mt-4!">
diff --git a/web/src/views/ToolManagement/Inner.tsx b/web/src/views/ToolManagement/Inner.tsx
index 67c3a6f5..956f8f28 100644
--- a/web/src/views/ToolManagement/Inner.tsx
+++ b/web/src/views/ToolManagement/Inner.tsx
@@ -17,6 +17,8 @@ import JsonToolModal from './components/JsonToolModal'
 import InnerToolModal from './components/InnerToolModal'
 import { getTools } from '@/api/tools'
 import { InnerConfigData } from './constant'
+import OverflowTags from '@/components/OverflowTags'
+import Tag from '@/components/Tag'
 
 const Inner: React.FC<{ getStatusTag: (status: string) => ReactNode; keyword?: string | undefined }> = ({ getStatusTag, keyword }) => {
   const { t } = useTranslation();
@@ -98,24 +100,12 @@ const Inner: React.FC<{ getStatusTag: (status: string) => ReactNode; keyword?: s
                   <div className="rb:h-10 rb:wrap-break-word rb:line-clamp-2 rb:leading-5">{t(`tool.${item.config_data.tool_class}_features`)}</div>
                 </Tooltip>
 
-                <Flex gap={8} wrap align="center" className="rb:mt-2! rb:mb-4!">
-                  <Flex gap={6}>
-                    {InnerConfigData[item.config_data.tool_class].features?.slice(0, 2).map((type, i) => (
-                      <div key={i} className="rb:bg-[#F6F6F6] rb:rounded-md rb:py-px rb:px-1 rb:text-[12px] rb:leading-4.5">{t(`tool.${type}`)}</div>
-                    ))}
-                  </Flex>
-                  {InnerConfigData[item.config_data.tool_class].features.length > 2 && (
-                    <Tooltip
-                      title={<Flex wrap gap={6}>{InnerConfigData[item.config_data.tool_class].features?.slice(2, InnerConfigData[item.config_data.tool_class].features.length).map((type, i) => (
-                        <div key={i} className="rb:bg-[#F6F6F6] rb:rounded-md rb:py-px rb:px-1 rb:text-[12px] rb:leading-4.5 rb:text-[#171719]">{t(`tool.${type}`)}</div>
-                      ))}</Flex>}
-                      color="white"
-                      placement="bottom"
-                    >
-                      <div className="rb:bg-[#F6F6F6] rb:rounded-md rb:py-px rb:px-1 rb:text-[12px] rb:leading-4.5">+{InnerConfigData[item.config_data.tool_class].features.length - 2}</div>
-                    </Tooltip>
-                  )}
-                </Flex>
+                <div className="rb:mt-2 rb:mb-4">
+                  <OverflowTags
+                    items={InnerConfigData[item.config_data.tool_class].features?.map((type, i) => <Tag key={i} variant="borderless" color="dark">{t(`tool.${type}`)}</Tag>)}
+                    numTag={(num?: number) => <Tag variant="borderless" color="dark">{`+${num}`}</Tag>}
+                  />
+                </div>
 
                 <Row className="rb:bg-[#F6F6F6] rb:rounded-lg rb:py-2! rb:px-3! rb:leading-5">
                   {item.config_data.tool_class === 'DateTimeTool'
diff --git a/web/src/views/UserManagement/index.tsx b/web/src/views/UserManagement/index.tsx
index ed09994f..de693dbb 100644
--- a/web/src/views/UserManagement/index.tsx
+++ b/web/src/views/UserManagement/index.tsx
@@ -21,6 +21,7 @@ import StatusTag from '@/components/StatusTag'
 import { deleteUser, enableUser, getUserListUrl } from '@/api/user'
 import ResetPasswordModal from './components/ResetPasswordModal'
 import { formatDateTime } from '@/utils/format';
+import TablePageLayout from '@/components/TablePageLayout';
 
 const UserManagement: React.FC = () => {
   const { t } = useTranslation();
@@ -142,14 +143,10 @@ const UserManagement: React.FC = () => {
   ];
 
   return (
-    <div className="rb:h-full rb:overflow-hidden rb:bg-white rb:rounded-lg rb:pt-3 rb:px-3">
-      <Flex justify="space-between" align="center" className="rb:px-1! rb:mb-3!">
-        <div className="rb:font-[MiSans-Bold] rb:font-bold rb:text-[#212332] rb:leading-5">{t('user.userList')}</div>
-        <Button type="primary" onClick={handleCreate}>
-          + {t('user.createUser')}
-        </Button>
-      </Flex>
-
+    <TablePageLayout
+      title={t('user.userList')}
+      extra={<Button type="primary" onClick={handleCreate}>+ {t('user.createUser')}</Button>}
+    >
       <Table<User>
         ref={tableRef}
         apiUrl={getUserListUrl}
@@ -169,7 +166,7 @@ const UserManagement: React.FC = () => {
       <ResetPasswordModal
         ref={resetPasswordModalRef}
       />
-    </div>
+    </TablePageLayout>
   );
 };