diff --git a/web/app/components/datasets/documents/detail/completed/common/batch-action.tsx b/web/app/components/datasets/documents/detail/completed/common/batch-action.tsx
index 78dda7bbb6..900ab3fb5a 100644
--- a/web/app/components/datasets/documents/detail/completed/common/batch-action.tsx
+++ b/web/app/components/datasets/documents/detail/completed/common/batch-action.tsx
@@ -3,8 +3,9 @@ import { RiArchive2Line, RiCheckboxCircleLine, RiCloseCircleLine, RiDeleteBinLin
 import { useTranslation } from 'react-i18next'
 import { useBoolean } from 'ahooks'
 import Divider from '@/app/components/base/divider'
-import classNames from '@/utils/classnames'
+import cn from '@/utils/classnames'
 import Confirm from '@/app/components/base/confirm'
+import Button from '@/app/components/base/button'
 
 const i18nPrefix = 'dataset.batchAction'
 type IBatchActionProps = {
@@ -43,55 +44,70 @@ const BatchAction: FC<IBatchActionProps> = ({
     hideDeleteConfirm()
   }
   return (
-    <div className={classNames('w-full flex justify-center gap-x-2', className)}>
-      <div className='flex items-center gap-x-1 rounded-[10px] border border-components-actionbar-border-accent bg-components-actionbar-bg-accent p-1 shadow-xl shadow-shadow-shadow-5 backdrop-blur-[5px]'>
+    <div className={cn('flex w-full justify-center gap-x-2', className)}>
+      <div className='flex items-center gap-x-1 rounded-[10px] border border-components-actionbar-border-accent bg-components-actionbar-bg-accent p-1 shadow-xl shadow-shadow-shadow-5'>
         <div className='inline-flex items-center gap-x-2 py-1 pl-2 pr-3'>
-          <span className='flex h-5 w-5 items-center justify-center rounded-md bg-text-accent px-1 py-0.5 text-xs font-medium text-text-primary-on-surface'>
+          <span className='system-xs-medium flex h-5 w-5 items-center justify-center rounded-md bg-text-accent text-text-primary-on-surface'>
             {selectedIds.length}
           </span>
-          <span className='text-[13px] font-semibold leading-[16px] text-text-accent'>{t(`${i18nPrefix}.selected`)}</span>
+          <span className='system-sm-semibold text-text-accent'>{t(`${i18nPrefix}.selected`)}</span>
         </div>
         <Divider type='vertical' className='mx-0.5 h-3.5 bg-divider-regular' />
-        <div className='flex items-center gap-x-0.5 px-3 py-2'>
-          <RiCheckboxCircleLine className='h-4 w-4 text-components-button-ghost-text' />
-          <button type='button' className='px-0.5 text-[13px] font-medium leading-[16px] text-components-button-ghost-text' onClick={onBatchEnable}>
-            {t(`${i18nPrefix}.enable`)}
-          </button>
-        </div>
-        <div className='flex items-center gap-x-0.5 px-3 py-2'>
-          <RiCloseCircleLine className='h-4 w-4 text-components-button-ghost-text' />
-          <button type='button' className='px-0.5 text-[13px] font-medium leading-[16px] text-components-button-ghost-text' onClick={onBatchDisable}>
-            {t(`${i18nPrefix}.disable`)}
-          </button>
-        </div>
+        <Button
+          variant='ghost'
+          className='gap-x-0.5 px-3'
+          onClick={onBatchEnable}
+        >
+          <RiCheckboxCircleLine className='size-4' />
+          <span className='px-0.5'>{t(`${i18nPrefix}.enable`)}</span>
+        </Button>
+        <Button
+          variant='ghost'
+          className='gap-x-0.5 px-3'
+          onClick={onBatchDisable}
+        >
+          <RiCloseCircleLine className='size-4' />
+          <span className='px-0.5'>{t(`${i18nPrefix}.disable`)}</span>
+        </Button>
         {onEditMetadata && (
-          <div className='flex items-center gap-x-0.5 px-3 py-2'>
-            <RiDraftLine className='h-4 w-4 text-components-button-ghost-text' />
-            <button type='button' className='px-0.5 text-[13px] font-medium leading-[16px] text-components-button-ghost-text' onClick={onEditMetadata}>
-              {t('dataset.metadata.metadata')}
-            </button>
-          </div>
+          <Button
+            variant='ghost'
+            className='gap-x-0.5 px-3'
+            onClick={onEditMetadata}
+          >
+            <RiDraftLine className='size-4' />
+            <span className='px-0.5'>{t('dataset.metadata.metadata')}</span>
+          </Button>
         )}
 
         {onArchive && (
-          <div className='flex items-center gap-x-0.5 px-3 py-2'>
-            <RiArchive2Line className='h-4 w-4 text-components-button-ghost-text' />
-            <button type='button' className='px-0.5 text-[13px] font-medium leading-[16px] text-components-button-ghost-text' onClick={onArchive}>
-              {t(`${i18nPrefix}.archive`)}
-            </button>
-          </div>
+          <Button
+            variant='ghost'
+            className='gap-x-0.5 px-3'
+            onClick={onArchive}
+          >
+            <RiArchive2Line className='size-4' />
+            <span className='px-0.5'>{t(`${i18nPrefix}.archive`)}</span>
+          </Button>
         )}
-        <div className='flex items-center gap-x-0.5 px-3 py-2'>
-          <RiDeleteBinLine className='h-4 w-4 text-components-button-destructive-ghost-text' />
-          <button type='button' className='px-0.5 text-[13px] font-medium leading-[16px] text-components-button-destructive-ghost-text' onClick={showDeleteConfirm}>
-            {t(`${i18nPrefix}.delete`)}
-          </button>
-        </div>
+        <Button
+          variant='ghost'
+          destructive
+          className='gap-x-0.5 px-3'
+          onClick={showDeleteConfirm}
+        >
+          <RiDeleteBinLine className='size-4' />
+          <span className='px-0.5'>{t(`${i18nPrefix}.delete`)}</span>
+        </Button>
 
         <Divider type='vertical' className='mx-0.5 h-3.5 bg-divider-regular' />
-        <button type='button' className='px-3.5 py-2 text-[13px] font-medium leading-[16px] text-components-button-ghost-text' onClick={onCancel}>
-          {t(`${i18nPrefix}.cancel`)}
-        </button>
+        <Button
+          variant='ghost'
+          className='px-3'
+          onClick={onCancel}
+        >
+          <span className='px-0.5'>{t(`${i18nPrefix}.cancel`)}</span>
+        </Button>
       </div>
       {
         isShowDeleteConfirm && (
diff --git a/web/app/components/datasets/list/dataset-card/index.tsx b/web/app/components/datasets/list/dataset-card/index.tsx
index cd3b7f1eec..88204db029 100644
--- a/web/app/components/datasets/list/dataset-card/index.tsx
+++ b/web/app/components/datasets/list/dataset-card/index.tsx
@@ -62,19 +62,19 @@ const DatasetCard = ({
   }
   const { formatIndexingTechniqueAndMethod } = useKnowledge()
   const documentCount = useMemo(() => {
-    const availableDocCount = dataset.available_document_count || dataset.document_count
+    const availableDocCount = dataset.total_available_documents ?? 0
     if (availableDocCount === dataset.document_count)
       return `${dataset.document_count}`
     if (availableDocCount < dataset.document_count)
       return `${availableDocCount} / ${dataset.document_count}`
-  }, [dataset.document_count, dataset.available_document_count])
+  }, [dataset.document_count, dataset.total_available_documents])
   const documentCountTooltip = useMemo(() => {
-    const availableDocCount = dataset.available_document_count || dataset.document_count
+    const availableDocCount = dataset.total_available_documents ?? 0
     if (availableDocCount === dataset.document_count)
       return t('dataset.docAllEnabled', { count: availableDocCount })
     if (availableDocCount < dataset.document_count)
       return t('dataset.docAllEnabled', { count: dataset.document_count, num: availableDocCount })
-  }, [t, dataset.document_count, dataset.available_document_count])
+  }, [t, dataset.document_count, dataset.total_available_documents])
 
   const language = useGetLanguage()
   const formatTimeFromNow = useCallback((time: number) => {
diff --git a/web/models/datasets.ts b/web/models/datasets.ts
index 8a49a2b675..965eb8a709 100644
--- a/web/models/datasets.ts
+++ b/web/models/datasets.ts
@@ -56,7 +56,7 @@ export type DataSet = {
   doc_form: ChunkingMode
   document_count: number
   total_document_count: number
-  available_document_count?: number
+  total_available_documents?: number
   word_count: number
   provider: string
   embedding_model: string