diff --git a/web/app/components/app/configuration/base/warning-mask/index.tsx b/web/app/components/app/configuration/base/warning-mask/index.tsx
index fbe58bee1..8bd7ea12a 100644
--- a/web/app/components/app/configuration/base/warning-mask/index.tsx
+++ b/web/app/components/app/configuration/base/warning-mask/index.tsx
@@ -22,14 +22,14 @@ const WarningMask: FC<IWarningMaskProps> = ({
   footer,
 }) => {
   return (
-    <div className={`${s.mask} absolute inset-0 z-10 pt-16`}
+    <div className={`${s.mask} absolute inset-0 z-10 pt-16 bg-components-panel-bg-blur`}
     >
       <div className='mx-auto px-10'>
-        <div className={`${s.icon} flex h-11 w-11 items-center justify-center rounded-xl bg-white`}>{warningIcon}</div>
-        <div className='mt-4 text-[24px] font-semibold leading-normal text-gray-800'>
+        <div className={`${s.icon} flex h-11 w-11 items-center justify-center rounded-xl bg-components-panel-bg`}>{warningIcon}</div>
+        <div className='mt-4 text-[24px] font-semibold leading-normal text-text-primary'>
           {title}
         </div>
-        <div className='mt-3 text-base text-gray-500'>
+        <div className='mt-3 text-base text-text-secondary'>
           {description}
         </div>
         <div className='mt-6'>
diff --git a/web/app/components/app/configuration/base/warning-mask/style.module.css b/web/app/components/app/configuration/base/warning-mask/style.module.css
index 87f226fd9..a2c394de2 100644
--- a/web/app/components/app/configuration/base/warning-mask/style.module.css
+++ b/web/app/components/app/configuration/base/warning-mask/style.module.css
@@ -1,5 +1,4 @@
 .mask {
-  background-color: rgba(239, 244, 255, 0.9);
   backdrop-filter: blur(2px);
 }