diff --git a/web/src/chakraTheme.ts b/web/src/chakraTheme.ts
index c2aec089c9..7343a59285 100644
--- a/web/src/chakraTheme.ts
+++ b/web/src/chakraTheme.ts
@@ -416,6 +416,8 @@ const theme = extendTheme({
     },
     error: {
       100: "#FDECEE",
+      200: "#FDD8DC",
+      400: "#FF8492",
       500: "#F16979",
       600: "#ED4458",
     },
diff --git a/web/src/chakraThemeDark.ts b/web/src/chakraThemeDark.ts
index 6cc3a6e1af..76449bb7ad 100644
--- a/web/src/chakraThemeDark.ts
+++ b/web/src/chakraThemeDark.ts
@@ -131,6 +131,13 @@ const Button = defineStyleConfig({
       },
     },
 
+    warn: {
+      bg: "lafDark.300",
+      _hover: {
+        bg: "error.500",
+      },
+    },
+
     warnText: {
       color: "error.500",
       _hover: {
@@ -412,6 +419,8 @@ const theme = extendTheme({
     },
     error: {
       100: "#FDECEE",
+      200: "#FDD8DC",
+      400: "#FF8492",
       500: "#F16979",
       600: "#ED4458",
     },
diff --git a/web/src/components/IconText/index.tsx b/web/src/components/IconText/index.tsx
index 645288c0e8..4aa7ba5d9f 100644
--- a/web/src/components/IconText/index.tsx
+++ b/web/src/components/IconText/index.tsx
@@ -7,6 +7,7 @@ import { COLOR_MODE } from "@/constants";
 export default function IconText(props: {
   icon: React.ReactElement;
   text: string;
+  className?: string;
   onClick?: () => void;
 }) {
   const { colorMode } = useColorMode();
@@ -15,10 +16,14 @@ export default function IconText(props: {
   return (
     <div
       onClick={props.onClick}
-      className={clsx("flex flex-col items-center text-grayIron-600", {
-        "hover:text-black": !darkMode,
-        "hover:text-white": darkMode,
-      })}
+      className={clsx(
+        "flex flex-col items-center text-grayIron-600",
+        {
+          "hover:text-black": !darkMode,
+          "hover:text-white": darkMode,
+        },
+        props.className,
+      )}
     >
       {React.cloneElement(props.icon, {
         height: "20px",
diff --git a/web/src/pages/app/database/PolicyListPanel/index.tsx b/web/src/pages/app/database/PolicyListPanel/index.tsx
index cdbe8667df..c48ef39bf5 100644
--- a/web/src/pages/app/database/PolicyListPanel/index.tsx
+++ b/web/src/pages/app/database/PolicyListPanel/index.tsx
@@ -78,7 +78,11 @@ export default function PolicyListPanel() {
                           headerText={String(t("Delete"))}
                           bodyText={t("CollectionPanel.ConformDelete")}
                         >
-                          <IconText icon={<DeleteIcon />} text={t("Delete")} />
+                          <IconText
+                            icon={<DeleteIcon />}
+                            text={t("Delete")}
+                            className="hover:!text-error-600"
+                          />
                         </ConfirmButton>
                       </>
                     </MoreButton>
diff --git a/web/src/pages/app/database/mods/DeleteCollectionModal/index.tsx b/web/src/pages/app/database/mods/DeleteCollectionModal/index.tsx
index b6bcb619c0..194d9615e2 100644
--- a/web/src/pages/app/database/mods/DeleteCollectionModal/index.tsx
+++ b/web/src/pages/app/database/mods/DeleteCollectionModal/index.tsx
@@ -51,6 +51,7 @@ function DeleteCollectionModal(props: { database: any }) {
         }}
         icon={<DeleteIcon />}
         text={t("Delete")}
+        className="hover:!text-error-600"
       />
 
       <Modal isOpen={isOpen} onClose={onClose}>
diff --git a/web/src/pages/app/functions/mods/FunctionPanel/index.tsx b/web/src/pages/app/functions/mods/FunctionPanel/index.tsx
index 5d348939c4..bc7e702e3f 100644
--- a/web/src/pages/app/functions/mods/FunctionPanel/index.tsx
+++ b/web/src/pages/app/functions/mods/FunctionPanel/index.tsx
@@ -215,7 +215,11 @@ export default function FunctionList() {
                           headerText={String(t("Delete"))}
                           bodyText={String(t("FunctionPanel.DeleteConfirm"))}
                         >
-                          <IconText icon={<DeleteIcon />} text={t("Delete")} />
+                          <IconText
+                            icon={<DeleteIcon />}
+                            text={t("Delete")}
+                            className="hover:!text-error-600"
+                          />
                         </ConfirmButton>
                       </>
                     </MoreButton>
diff --git a/web/src/pages/app/storages/mods/DeleteBucketModal/index.tsx b/web/src/pages/app/storages/mods/DeleteBucketModal/index.tsx
index d07dad6d99..d17b66c286 100644
--- a/web/src/pages/app/storages/mods/DeleteBucketModal/index.tsx
+++ b/web/src/pages/app/storages/mods/DeleteBucketModal/index.tsx
@@ -42,6 +42,7 @@ function DeleteBucketModal(props: { storage: TBucket; onSuccessAction?: () => vo
       <IconText
         icon={<DeleteIcon />}
         text={t("Delete")}
+        className="hover:!text-error-600"
         onClick={() => {
           reset();
           onOpen();
diff --git a/web/tailwind.config.cjs b/web/tailwind.config.cjs
index 7fcd9eed4a..6fa289a322 100644
--- a/web/tailwind.config.cjs
+++ b/web/tailwind.config.cjs
@@ -8,10 +8,10 @@ module.exports = {
       md: "768px",
       lg: "976px",
       xl: "1440px",
-      '2xl': "1680px",
-      'phone': { 'min': '320px', 'max': '480px' },
-      'laptop': { 'min': '1024px', 'max': '1440px' },
-      'pc': { 'min': '1441px' },
+      "2xl": "1680px",
+      phone: { min: "320px", max: "480px" },
+      laptop: { min: "1024px", max: "1440px" },
+      pc: { min: "1441px" },
     },
     boxShadow: {
       DEFAULT: "0px 4px 10px rgba(191, 202, 213, 0.25)",
@@ -95,6 +95,7 @@ module.exports = {
         },
         error: {
           100: "#FDECEE",
+          200: "#FDD8DC",
           400: "#FF8492",
           500: "#F16979",
           600: "#ED4458",
@@ -117,7 +118,7 @@ module.exports = {
         },
         adora: {
           200: "#E6E3F7",
-          600: "#8172D8"
+          600: "#8172D8",
         },
         blue: {
           100: "#EBF7FD",
@@ -128,7 +129,7 @@ module.exports = {
         },
         frostyNightfall: {
           200: "#EAEBF0",
-          300: "#D5D6E1"
+          300: "#D5D6E1",
         },
       },
     },