diff --git a/web/app/(commonLayout)/datasets/Container.tsx b/web/app/(commonLayout)/datasets/Container.tsx
index 96f1045ab0..48457f9477 100644
--- a/web/app/(commonLayout)/datasets/Container.tsx
+++ b/web/app/(commonLayout)/datasets/Container.tsx
@@ -23,7 +23,7 @@ import CheckboxWithLabel from '@/app/components/datasets/create/website/base/che
 import CreateModal from '@/app/components/datasets/metadata/create-metadata-modal'
 import SelectMetadataModal from '@/app/components/datasets/metadata/select-metadata-modal'
 // import DatasetMetadataDrawer from '@/app/components/datasets/metadata/dataset-metadata-drawer'
-import EditMetadataBatchModal from '@/app/components/datasets/metadata/edit-metadata-batch-modal'
+import EditMetadataBatchModal from '@/app/components/datasets/metadata/edit-metadat-batch/modal'
 // Services
 import { fetchDatasetApiBaseUrl } from '@/service/datasets'
 
@@ -113,10 +113,12 @@ const Container = () => {
           onClose={() => { }}
         /> */}
         <EditMetadataBatchModal
+          documentNum={20}
           list={[
             {
               id: '1', name: 'name1', type: DataType.string, value: 'aaa',
-            }, {
+            },
+            {
               id: '2', name: 'name2', type: DataType.number, value: 'ccc', isMultipleValue: true,
             }, {
               id: '3', name: 'name3', type: DataType.time, value: '', isMultipleValue: false,
diff --git a/web/app/components/datasets/metadata/edit-metadata-batch-item.tsx b/web/app/components/datasets/metadata/edit-metadata-batch-item.tsx
deleted file mode 100644
index 9ac55cba05..0000000000
--- a/web/app/components/datasets/metadata/edit-metadata-batch-item.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-'use client'
-import type { FC } from 'react'
-import React from 'react'
-import type { MetadataItemWithEdit } from './types'
-import Input from '../create/website/base/input'
-
-type Props = {
-  payload: MetadataItemWithEdit
-  onChange: (payload: MetadataItemWithEdit) => void
-  onRemove: (id: string) => void
-}
-
-const labelClassName = 'w-[136px] system-xs-medium text-text-tertiary'
-
-export const AddedMetadataItem: FC<Props> = ({
-  payload,
-  onChange,
-}) => {
-  return (
-    <div className='flex'>
-      <div className={labelClassName}>{payload.name}</div>
-      <Input
-        value={payload.value}
-        onChange={v => onChange({ ...payload, value: v as string })
-        } />
-    </div>
-  )
-}
-
-const EditMetadatabatchItem: FC<Props> = ({
-  payload,
-  onChange,
-  onRemove,
-}) => {
-  return (
-    <div className='flex'>
-      <div className={labelClassName}>{payload.name}</div>
-      <Input
-        value={payload.value}
-        onChange={v => onChange({ ...payload, value: v as string })
-        } />
-    </div>
-  )
-}
-export default React.memo(EditMetadatabatchItem)
diff --git a/web/app/components/datasets/metadata/edit-metadata-batch-modal.tsx b/web/app/components/datasets/metadata/edit-metadata-batch-modal.tsx
deleted file mode 100644
index ce385c8557..0000000000
--- a/web/app/components/datasets/metadata/edit-metadata-batch-modal.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-'use client'
-import type { FC } from 'react'
-import React, { useCallback, useState } from 'react'
-import Modal from '../../base/modal'
-import type { MetadataItemWithEdit } from './types'
-import EditMetadataBatchItem, { AddedMetadataItem } from './edit-metadata-batch-item'
-import Button from '../../base/button'
-import { useTranslation } from 'react-i18next'
-import Checkbox from '../../base/checkbox'
-import Tooltip from '../../base/tooltip'
-
-type Props = {
-  list: MetadataItemWithEdit[]
-  onChange: (list: MetadataItemWithEdit[], addedList: MetadataItemWithEdit[], isApplyToAllSelectDocument: boolean) => void
-  onHide: () => void
-}
-
-const EditMetadataBatchModal: FC<Props> = ({
-  list,
-  onChange,
-  onHide,
-}) => {
-  const { t } = useTranslation()
-  const [templeList, setTempleList] = useState<MetadataItemWithEdit[]>(list)
-  const handleTemplesChange = useCallback((payload: MetadataItemWithEdit) => {
-    const newTempleList = templeList.map(i => i.id === payload.id ? payload : i)
-    setTempleList(newTempleList)
-  }, [templeList])
-  const handleTempleItemRemove = useCallback((id: string) => {
-    const newTempleList = templeList.filter(i => i.id !== id)
-    setTempleList(newTempleList)
-  }, [templeList])
-
-  const [addedList, setAddedList] = useState<MetadataItemWithEdit[]>([])
-  const handleAddedListChange = useCallback((payload: MetadataItemWithEdit) => {
-    const newAddedList = addedList.map(i => i.id === payload.id ? payload : i)
-    setAddedList(newAddedList)
-  }, [addedList])
-  const handleAddedItemRemove = useCallback((id: string) => {
-    const newAddedList = addedList.filter(i => i.id !== id)
-    setAddedList(newAddedList)
-  }, [addedList])
-
-  const [isApplyToAllSelectDocument, setIsApplyToAllSelectDocument] = useState(false)
-
-  const handleSave = useCallback(() => {
-    onChange(templeList, addedList, isApplyToAllSelectDocument)
-  }, [templeList, addedList, isApplyToAllSelectDocument, onChange])
-  return (
-    <Modal
-      title='Edit Metadata'
-      isShow
-      onClose={onHide}
-      wrapperClassName='w-[640px]'
-    >
-      <div>Editing 5 documents</div>
-      {/* TODO handle list scroll. There is two list. */}
-      <div className=''>
-        {templeList.map(item => (
-          <EditMetadataBatchItem
-            key={item.id}
-            payload={item}
-            onChange={handleTemplesChange}
-            onRemove={handleTempleItemRemove}
-          />
-        ))}
-      </div>
-
-      <div>
-        {addedList.map(item => (
-          <AddedMetadataItem
-            key={item.id}
-            payload={item}
-            onChange={handleAddedListChange}
-            onRemove={handleAddedItemRemove}
-          />
-        ))}
-      </div>
-
-      <div className='mt-4 flex items-center justify-between'>
-        <div className='flex items-center'>
-          <Checkbox checked={isApplyToAllSelectDocument} onCheck={() => setIsApplyToAllSelectDocument(!isApplyToAllSelectDocument)} />
-          <div className='ml-2 mr-1'> Apply to all selected documents</div>
-          <Tooltip popupContent={
-            <div className='max-w-[240px]'>Automatically create all the above edited and new metadata for all selected documents, otherwise editing metadata will only apply to documents with it.</div>
-          } />
-        </div>
-        <div className='flex items-center space-x-2'>
-          <Button
-            onClick={onHide}>{t('common.operation.cancel')}</Button>
-          <Button
-            onClick={handleSave}
-            variant='primary'
-          >{t('common.operation.save')}</Button>
-        </div>
-      </div>
-    </Modal>
-  )
-}
-export default React.memo(EditMetadataBatchModal)
diff --git a/web/app/components/datasets/metadata/types.ts b/web/app/components/datasets/metadata/types.ts
index ee4d62b90a..346686a7dc 100644
--- a/web/app/components/datasets/metadata/types.ts
+++ b/web/app/components/datasets/metadata/types.ts
@@ -13,10 +13,13 @@ export type MetadataItem = {
 export type MetadataItemWithValueLength = MetadataItem & {
   valueLength: number
 }
-
+export enum UpdateType {
+  changeValue = 'changeValue',
+  delete = 'delete',
+}
 export type MetadataItemWithEdit = MetadataItem & {
   value: string
   isMultipleValue?: boolean
-  isRemoved?: boolean
   isUpdated?: boolean
+  updateType?: UpdateType
 }