diff --git a/web/app/components/app/annotation/clear-all-annotations-confirm-modal/index.tsx b/web/app/components/app/annotation/clear-all-annotations-confirm-modal/index.tsx
new file mode 100644
index 0000000000..7316ee10a1
--- /dev/null
+++ b/web/app/components/app/annotation/clear-all-annotations-confirm-modal/index.tsx
@@ -0,0 +1,32 @@
+'use client'
+
+import type { FC } from 'react'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import Confirm from '@/app/components/base/confirm'
+
+type Props = {
+  isShow: boolean
+  onHide: () => void
+  onConfirm: () => void
+}
+
+const ClearAllAnnotationsConfirmModal: FC<Props> = ({
+  isShow,
+  onHide,
+  onConfirm,
+}) => {
+  const { t } = useTranslation()
+
+  return (
+    <Confirm
+      isShow={isShow}
+      onCancel={onHide}
+      onConfirm={onConfirm}
+      type='danger'
+      title={t('appAnnotation.table.header.clearAllConfirm')}
+    />
+  )
+}
+
+export default React.memo(ClearAllAnnotationsConfirmModal)
diff --git a/web/app/components/app/annotation/header-opts/index.tsx b/web/app/components/app/annotation/header-opts/index.tsx
index a5df69c5f3..42e65df388 100644
--- a/web/app/components/app/annotation/header-opts/index.tsx
+++ b/web/app/components/app/annotation/header-opts/index.tsx
@@ -1,6 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import React, { Fragment, useEffect, useState } from 'react'
+import ClearAllAnnotationsConfirmModal from './clear-all-annotations-confirm-modal'
 import { useTranslation } from 'react-i18next'
 import {
   RiAddLine,
@@ -78,21 +79,18 @@ const HeaderOptions: FC<Props> = ({
   }, [controlUpdateList])
 
   const [showBulkImportModal, setShowBulkImportModal] = useState(false)
-
-  const handleClearAll = async () => {
-    const isConfirmed = await confirm({
-      message: t('appAnnotation.table.header.clearAllConfirm'),
-      type: 'danger',
-    })
-    if (isConfirmed){
-      try {
-        await clearAllAnnotations(appId)
-        onAdded()
-      } catch (_) {
-        console.error('Failed to clear annotations')
-      }
-    }
+  const [showClearConfirm, setShowClearConfirm] = useState(false)
+  const handleClearAll = () => {
+    setShowClearConfirm(true)
   }
+  const handleConfirmed = async () => {
+  setShowClearConfirm(false)
+  try {
+    await clearAllAnnotations(appId)
+    onAdded()
+  } catch (_) {
+  }
+}
   const Operations = () => {
     return (
       <div className="w-full py-1">
@@ -194,6 +192,15 @@ const HeaderOptions: FC<Props> = ({
           />
         )
       }
+      {
+      showClearConfirm && (
+        <ClearAllAnnotationsConfirmModal
+          isShow={showClearConfirm}
+          onHide={() => setShowClearConfirm(false)}
+          onConfirm={handleConfirmed}
+        />
+        )
+      }
     </div>
   )
 }