diff --git a/web/src/pages/app/database/CollectionDataList/mods/DataPanel/index.tsx b/web/src/pages/app/database/CollectionDataList/mods/DataPanel/index.tsx
index 1ee1dbc591..fffa6e489f 100644
--- a/web/src/pages/app/database/CollectionDataList/mods/DataPanel/index.tsx
+++ b/web/src/pages/app/database/CollectionDataList/mods/DataPanel/index.tsx
@@ -145,7 +145,7 @@ export default function DataPanel() {
   return (
     <>
       <Panel.Header className="my-1 flex-shrink-0">
-        <div className="flex items-center flex-1">
+        <div className="flex flex-1 items-center">
           <AddDataModal
             schema={currentData.data ? currentData.data : {}}
             onSuccessSubmit={(id: string, count: number) => {
@@ -190,7 +190,7 @@ export default function DataPanel() {
               refresh(search);
             }}
           >
-            <div className="my-4 flex justify-between flex-1">
+            <div className="my-4 flex flex-1 justify-between">
               <HStack spacing={2} className="flex flex-1">
                 <InputGroup className="mr-4 flex-1">
                   <InputLeftElement
@@ -262,20 +262,21 @@ export default function DataPanel() {
                 const newData = { ...item };
                 delete newData._id;
                 return (
-                  <IconWrap
-                    showBg
-                    tooltip={t("Copy").toString()}
-                    size={32}
-                    className="group/icon ml-2 hover:bg-gray-200"
+                  <CopyText
+                    hideToolTip
+                    text={JSON.stringify(newData, null, 2)}
+                    tip={String(t("Copied"))}
+                    className="ml-2 hover:bg-gray-200"
                   >
-                    <CopyText
-                      hideToolTip
-                      text={JSON.stringify(newData, null, 2)}
-                      tip={String(t("Copied"))}
+                    <IconWrap
+                      showBg
+                      tooltip={t("Copy").toString()}
+                      size={32}
+                      className="group/icon"
                     >
                       <CopyIcon />
-                    </CopyText>
-                  </IconWrap>
+                    </IconWrap>
+                  </CopyText>
                 );
               }}
             />
diff --git a/web/src/pages/app/database/PolicyDataList/index.tsx b/web/src/pages/app/database/PolicyDataList/index.tsx
index cf38637ceb..cfbbc6597b 100644
--- a/web/src/pages/app/database/PolicyDataList/index.tsx
+++ b/web/src/pages/app/database/PolicyDataList/index.tsx
@@ -142,21 +142,21 @@ export default function PolicyDataList() {
               }}
               toolComponent={(item: any) => {
                 return (
-                  <IconWrap
-                    showBg
-                    tooltip={t("Copy").toString()}
-                    size={32}
-                    className="group/icon ml-2 hover:bg-rose-100"
+                  <CopyText
+                    hideToolTip
+                    text={JSON.stringify(item.value, null, 2)}
+                    tip={String(t("Copied"))}
+                    className="ml-2 hover:bg-gray-200"
                   >
-                    <CopyText
-                      hideToolTip
-                      text={JSON.stringify(item.value, null, 2)}
-                      tip={String(t("Copied"))}
-                      className="group-hover/icon:text-error-500"
+                    <IconWrap
+                      showBg
+                      tooltip={t("Copy").toString()}
+                      size={32}
+                      className="group/icon"
                     >
                       <CopyIcon />
-                    </CopyText>
-                  </IconWrap>
+                    </IconWrap>
+                  </CopyText>
                 );
               }}
             />
diff --git a/web/src/pages/app/database/RightComponent/DeleteButton.tsx b/web/src/pages/app/database/RightComponent/DeleteButton.tsx
index 9f6ae86668..20080aa17d 100644
--- a/web/src/pages/app/database/RightComponent/DeleteButton.tsx
+++ b/web/src/pages/app/database/RightComponent/DeleteButton.tsx
@@ -12,7 +12,7 @@ import { t } from "i18next";
 import IconWrap from "@/components/IconWrap";
 
 export default function DeleteButton(props: { data: any; deleteMethod: any }) {
-  const { isOpen, onOpen, onClose } = useDisclosure();
+  const { isOpen, onToggle, onOpen, onClose } = useDisclosure();
   return (
     <>
       <Popover
@@ -28,6 +28,7 @@ export default function DeleteButton(props: { data: any; deleteMethod: any }) {
           tooltip={t("Delete").toString()}
           size={32}
           onClick={(event: any) => {
+            onToggle();
             event?.stopPropagation();
           }}
         >