diff --git a/apps/web/src/components/pure/workspace-slider-bar/collections/collections-list.tsx b/apps/web/src/components/pure/workspace-slider-bar/collections/collections-list.tsx
index e640f7b9c9..97a96d4e41 100644
--- a/apps/web/src/components/pure/workspace-slider-bar/collections/collections-list.tsx
+++ b/apps/web/src/components/pure/workspace-slider-bar/collections/collections-list.tsx
@@ -87,7 +87,7 @@ const CollectionOperations = ({
         element: <div key="divider" className={styles.menuDividerStyle}></div>,
       },
       {
-        icon: <DeleteIcon style={{ color: 'var(--affine-warning-color)' }} />,
+        icon: <DeleteIcon />,
         name: t['Delete'](),
         click: () => {
           return setting.deleteCollection(view.id);
diff --git a/apps/web/src/components/pure/workspace-slider-bar/collections/page.tsx b/apps/web/src/components/pure/workspace-slider-bar/collections/page.tsx
index 6389480740..87fbdb49f9 100644
--- a/apps/web/src/components/pure/workspace-slider-bar/collections/page.tsx
+++ b/apps/web/src/components/pure/workspace-slider-bar/collections/page.tsx
@@ -77,7 +77,7 @@ export const PageOperations = ({
         element: <div key="divider" className={styles.menuDividerStyle}></div>,
       },
       {
-        icon: <DeleteIcon style={{ color: 'var(--affine-warning-color)' }} />,
+        icon: <DeleteIcon />,
         name: t['Delete'](),
         click: () => {
           removeToTrash(page.id);
diff --git a/apps/web/src/components/pure/workspace-slider-bar/collections/styles.css.ts b/apps/web/src/components/pure/workspace-slider-bar/collections/styles.css.ts
index 137d7e2430..1623b553b4 100644
--- a/apps/web/src/components/pure/workspace-slider-bar/collections/styles.css.ts
+++ b/apps/web/src/components/pure/workspace-slider-bar/collections/styles.css.ts
@@ -1,4 +1,4 @@
-import { style } from '@vanilla-extract/css';
+import { globalStyle, style } from '@vanilla-extract/css';
 
 export const wrapper = style({
   userSelect: 'none',
@@ -36,11 +36,14 @@ export const more = style({
   },
 });
 export const deleteFolder = style({
-  color: 'var(--affine-warning-color)',
   ':hover': {
-    backgroundColor: 'var(--affine-background-warning-color)',
+    color: 'var(--affine-error-color)',
+    backgroundColor: 'var(--affine-background-error-color)',
   },
 });
+globalStyle(`${deleteFolder}:hover svg`, {
+  color: 'var(--affine-error-color)',
+});
 export const menuDividerStyle = style({
   marginTop: '2px',
   marginBottom: '2px',
diff --git a/packages/component/src/components/image-preview-modal/index.css.ts b/packages/component/src/components/image-preview-modal/index.css.ts
index 36913e144c..d1b9b343fb 100644
--- a/packages/component/src/components/image-preview-modal/index.css.ts
+++ b/packages/component/src/components/image-preview-modal/index.css.ts
@@ -138,7 +138,7 @@ export const buttonStyle = style({
   margin: '10px 6px',
   padding: '0 0',
   ':hover': {
-    backgroundColor: 'var(--affine-hover-color)',
+    backgroundColor: 'var(--affine-background-error-color)',
     backgroundSize: '24px 24px',
   },
 });
diff --git a/packages/component/src/components/image-preview-modal/index.tsx b/packages/component/src/components/image-preview-modal/index.tsx
index 86e52cd470..db68780084 100644
--- a/packages/component/src/components/image-preview-modal/index.tsx
+++ b/packages/component/src/components/image-preview-modal/index.tsx
@@ -478,7 +478,7 @@ const ImagePreviewModalImpl = (
               noBorder={true}
               className={buttonStyle}
               onClick={() => blockId && deleteHandler(blockId)}
-              hoverColor={'-moz-initial'}
+              hoverColor="var(--affine-error-color)"
             />
           </Tooltip>
         </div>
diff --git a/packages/component/src/components/page-list/operation-cell.tsx b/packages/component/src/components/page-list/operation-cell.tsx
index e1c874d7fd..3b9dd9d1f9 100644
--- a/packages/component/src/components/page-list/operation-cell.tsx
+++ b/packages/component/src/components/page-list/operation-cell.tsx
@@ -147,6 +147,8 @@ export const TrashOperationCell: React.FC<TrashOperationCellProps> = ({
           onClick={() => {
             setOpen(true);
           }}
+          hoverBackground="var(--affine-background-error-color)"
+          hoverColor="var(--affine-error-color)"
         >
           <DeletePermanentlyIcon />
         </IconButton>
diff --git a/packages/component/src/components/page-list/operation-menu-items/index.css.ts b/packages/component/src/components/page-list/operation-menu-items/index.css.ts
new file mode 100644
index 0000000000..d5941c4551
--- /dev/null
+++ b/packages/component/src/components/page-list/operation-menu-items/index.css.ts
@@ -0,0 +1,12 @@
+import { globalStyle, style } from '@vanilla-extract/css';
+
+export const moveToTrashStyle = style({
+  ':hover': {
+    backgroundColor: 'var(--affine-background-error-color)',
+    color: 'var(--affine-error-color)',
+  },
+});
+
+globalStyle(`${moveToTrashStyle}:hover svg`, {
+  color: 'var(--affine-error-color)',
+});
diff --git a/packages/component/src/components/page-list/operation-menu-items/move-to-trash.tsx b/packages/component/src/components/page-list/operation-menu-items/move-to-trash.tsx
index 7e2a8128ae..57f18f120b 100644
--- a/packages/component/src/components/page-list/operation-menu-items/move-to-trash.tsx
+++ b/packages/component/src/components/page-list/operation-menu-items/move-to-trash.tsx
@@ -3,8 +3,8 @@ import { DeleteTemporarilyIcon } from '@blocksuite/icons';
 
 import type { ConfirmProps } from '../../..';
 import { Confirm, MenuItem } from '../../..';
+import { moveToTrashStyle } from './index.css';
 import type { CommonMenuItemProps } from './types';
-
 export const MoveToTrash = ({
   onSelect,
   onItemClick,
@@ -21,6 +21,7 @@ export const MoveToTrash = ({
           onSelect?.();
         }}
         icon={<DeleteTemporarilyIcon />}
+        className={moveToTrashStyle}
       >
         {t['Move to Trash']()}
       </MenuItem>
diff --git a/packages/component/src/components/page-list/view/collection-bar.tsx b/packages/component/src/components/page-list/view/collection-bar.tsx
index c62603c82f..e3a4457948 100644
--- a/packages/component/src/components/page-list/view/collection-bar.tsx
+++ b/packages/component/src/components/page-list/view/collection-bar.tsx
@@ -69,7 +69,7 @@ export const CollectionBar = ({
         },
       },
       {
-        icon: <DeleteIcon style={{ color: 'red' }} />,
+        icon: <DeleteIcon style={{ color: 'var(--affine-error-color)' }} />,
         name: 'delete',
         click: () => {
           setting.deleteCollection(collection.id).catch(err => {
diff --git a/packages/component/src/components/page-list/view/collection-list.css.ts b/packages/component/src/components/page-list/view/collection-list.css.ts
index 35e2841523..c8d3dac4e2 100644
--- a/packages/component/src/components/page-list/view/collection-list.css.ts
+++ b/packages/component/src/components/page-list/view/collection-list.css.ts
@@ -202,6 +202,7 @@ export const deleteIcon = style({
   padding: 4,
   cursor: 'pointer',
   ':hover': {
-    backgroundColor: 'var(--affine-hover-color)',
+    color: 'var(--affine-error-color)',
+    backgroundColor: 'var(--affine-background-error-color)',
   },
 });
diff --git a/packages/component/src/components/page-list/view/collection-list.tsx b/packages/component/src/components/page-list/view/collection-list.tsx
index 4faa10a5c0..1ef90ab22a 100644
--- a/packages/component/src/components/page-list/view/collection-list.tsx
+++ b/packages/component/src/components/page-list/view/collection-list.tsx
@@ -57,7 +57,7 @@ const CollectionOption = ({
         },
       },
       {
-        icon: <DeleteIcon style={{ color: 'red' }} />,
+        icon: <DeleteIcon style={{ color: 'var(--affine-error-color)' }} />,
         name: 'delete',
         click: () => {
           setting.deleteCollection(collection.id).catch(err => {