diff --git a/apps/business/src/components/BrandModal.module.css b/apps/business/src/components/BrandModal.module.css
index bbdd25d..27bff75 100644
--- a/apps/business/src/components/BrandModal.module.css
+++ b/apps/business/src/components/BrandModal.module.css
@@ -1,8 +1,9 @@
 .overlay {
   position: fixed;
   inset: 0;
-  isolation: isolate;
-  background: transparent;
+  background: var(--modal-overlay-bg);
+  backdrop-filter: blur(var(--modal-overlay-blur));
+  -webkit-backdrop-filter: blur(var(--modal-overlay-blur));
   display: flex;
   align-items: center;
   justify-content: center;
@@ -10,19 +11,6 @@
   padding: 20px;
 }
 
-/* Tint + blur on ::before so opacity animations on .overlay cannot disable backdrop-filter. */
-.overlay::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  z-index: -1;
-  pointer-events: none;
-  background: var(--modal-overlay-bg);
-  backdrop-filter: blur(var(--modal-overlay-blur));
-  -webkit-backdrop-filter: blur(var(--modal-overlay-blur));
-}
-
-
 .modal {
   width: 100%;
   max-width: 520px;
diff --git a/apps/business/src/components/CategoryModal.module.css b/apps/business/src/components/CategoryModal.module.css
index 1de6162..f078dde 100644
--- a/apps/business/src/components/CategoryModal.module.css
+++ b/apps/business/src/components/CategoryModal.module.css
@@ -1,8 +1,9 @@
 .overlay {
   position: fixed;
   inset: 0;
-  isolation: isolate;
-  background: transparent;
+  background: var(--modal-overlay-bg);
+  backdrop-filter: blur(var(--modal-overlay-blur));
+  -webkit-backdrop-filter: blur(var(--modal-overlay-blur));
   display: flex;
   align-items: center;
   justify-content: center;
@@ -10,19 +11,6 @@
   padding: 20px;
 }
 
-/* Tint + blur on ::before so opacity animations on .overlay cannot disable backdrop-filter. */
-.overlay::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  z-index: -1;
-  pointer-events: none;
-  background: var(--modal-overlay-bg);
-  backdrop-filter: blur(var(--modal-overlay-blur));
-  -webkit-backdrop-filter: blur(var(--modal-overlay-blur));
-}
-
-
 .modal {
   width: 100%;
   max-width: 480px;
diff --git a/apps/business/src/components/ConfirmBulkAddStoreItemsModal.module.css b/apps/business/src/components/ConfirmBulkAddStoreItemsModal.module.css
index a97e78d..26b0259 100644
--- a/apps/business/src/components/ConfirmBulkAddStoreItemsModal.module.css
+++ b/apps/business/src/components/ConfirmBulkAddStoreItemsModal.module.css
@@ -1,8 +1,9 @@
 .overlay {
   position: fixed;
   inset: 0;
-  isolation: isolate;
-  background: transparent;
+  background: var(--modal-overlay-bg);
+  backdrop-filter: blur(var(--modal-overlay-blur));
+  -webkit-backdrop-filter: blur(var(--modal-overlay-blur));
   display: flex;
   align-items: center;
   justify-content: center;
@@ -10,19 +11,6 @@
   padding: 20px;
 }
 
-/* Tint + blur on ::before so opacity animations on .overlay cannot disable backdrop-filter. */
-.overlay::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  z-index: -1;
-  pointer-events: none;
-  background: var(--modal-overlay-bg);
-  backdrop-filter: blur(var(--modal-overlay-blur));
-  -webkit-backdrop-filter: blur(var(--modal-overlay-blur));
-}
-
-
 .modal {
   position: relative;
   width: 100%;
diff --git a/apps/business/src/components/ConfirmDeleteModal.module.css b/apps/business/src/components/ConfirmDeleteModal.module.css
index de84732..2110a15 100644
--- a/apps/business/src/components/ConfirmDeleteModal.module.css
+++ b/apps/business/src/components/ConfirmDeleteModal.module.css
@@ -1,8 +1,9 @@
 .overlay {
   position: fixed;
   inset: 0;
-  isolation: isolate;
-  background: transparent;
+  background: rgba(127, 29, 29, 0.28);
+  backdrop-filter: blur(var(--modal-overlay-blur));
+  -webkit-backdrop-filter: blur(var(--modal-overlay-blur));
   display: flex;
   align-items: center;
   justify-content: center;
@@ -10,19 +11,6 @@
   padding: 20px;
 }
 
-/* Tint + blur on ::before so opacity animations on .overlay cannot disable backdrop-filter. */
-.overlay::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  z-index: -1;
-  pointer-events: none;
-  background: rgba(127, 29, 29, 0.28);
-  backdrop-filter: blur(var(--modal-overlay-blur));
-  -webkit-backdrop-filter: blur(var(--modal-overlay-blur));
-}
-
-
 .modal {
   position: relative;
   width: 100%;
diff --git a/apps/business/src/components/ImageLightbox.module.css b/apps/business/src/components/ImageLightbox.module.css
index 107dc5d..d94e0a7 100644
--- a/apps/business/src/components/ImageLightbox.module.css
+++ b/apps/business/src/components/ImageLightbox.module.css
@@ -1,7 +1,6 @@
 .overlay {
   position: fixed;
   inset: 0;
-  isolation: isolate;
   z-index: 300;
   display: flex;
   flex-direction: column;
@@ -9,21 +8,11 @@
   justify-content: center;
   gap: 16px;
   padding: 24px;
-  background: transparent;
-}
-
-.overlay::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  z-index: -1;
-  pointer-events: none;
   background: rgba(15, 23, 42, 0.82);
   backdrop-filter: blur(var(--modal-overlay-blur));
   -webkit-backdrop-filter: blur(var(--modal-overlay-blur));
 }
 
-
 .closeBtn {
   position: absolute;
   top: 20px;
diff --git a/apps/business/src/components/ProductCommentsModal.module.css b/apps/business/src/components/ProductCommentsModal.module.css
index 40b68c9..373bbdb 100644
--- a/apps/business/src/components/ProductCommentsModal.module.css
+++ b/apps/business/src/components/ProductCommentsModal.module.css
@@ -1,8 +1,9 @@
 .overlay {
   position: fixed;
   inset: 0;
-  isolation: isolate;
-  background: transparent;
+  background: var(--modal-overlay-bg);
+  backdrop-filter: blur(var(--modal-overlay-blur));
+  -webkit-backdrop-filter: blur(var(--modal-overlay-blur));
   display: flex;
   align-items: center;
   justify-content: center;
@@ -10,19 +11,6 @@
   padding: 20px;
 }
 
-/* Tint + blur on ::before so opacity animations on .overlay cannot disable backdrop-filter. */
-.overlay::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  z-index: -1;
-  pointer-events: none;
-  background: var(--modal-overlay-bg);
-  backdrop-filter: blur(var(--modal-overlay-blur));
-  -webkit-backdrop-filter: blur(var(--modal-overlay-blur));
-}
-
-
 .modal {
   width: 100%;
   max-width: 640px;
diff --git a/apps/business/src/components/VariationsModal.module.css b/apps/business/src/components/VariationsModal.module.css
index 3ab2875..de90fee 100644
--- a/apps/business/src/components/VariationsModal.module.css
+++ b/apps/business/src/components/VariationsModal.module.css
@@ -1,8 +1,9 @@
 .overlay {
   position: fixed;
   inset: 0;
-  isolation: isolate;
-  background: transparent;
+  background: var(--modal-overlay-bg);
+  backdrop-filter: blur(var(--modal-overlay-blur));
+  -webkit-backdrop-filter: blur(var(--modal-overlay-blur));
   display: flex;
   align-items: center;
   justify-content: center;
@@ -10,19 +11,6 @@
   padding: 20px;
 }
 
-/* Tint + blur on ::before so opacity animations on .overlay cannot disable backdrop-filter. */
-.overlay::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  z-index: -1;
-  pointer-events: none;
-  background: var(--modal-overlay-bg);
-  backdrop-filter: blur(var(--modal-overlay-blur));
-  -webkit-backdrop-filter: blur(var(--modal-overlay-blur));
-}
-
-
 .overlayNested {
   z-index: 1010;
 }
diff --git a/apps/business/src/index.css b/apps/business/src/index.css
index 526b263..efac186 100644
--- a/apps/business/src/index.css
+++ b/apps/business/src/index.css
@@ -25,7 +25,7 @@
   --glass-shadow: 0 8px 32px rgba(31, 38, 135, 0.08);
   --blur-glass: 28px;
   --modal-overlay-bg: rgba(15, 23, 42, 0.4);
-  --modal-overlay-blur: 12px;
+  --modal-overlay-blur: 16px;
   --text-primary: #1e293b;
   --text-secondary: #64748b;
   --text-muted: #94a3b8;
diff --git a/apps/customer/src/components/VariationsModal.module.css b/apps/customer/src/components/VariationsModal.module.css
index f1db1fa..fca1930 100644
--- a/apps/customer/src/components/VariationsModal.module.css
+++ b/apps/customer/src/components/VariationsModal.module.css
@@ -1,8 +1,9 @@
 .overlay {
   position: fixed;
   inset: 0;
-  isolation: isolate;
-  background: transparent;
+  background: var(--modal-overlay-bg);
+  backdrop-filter: blur(var(--modal-overlay-blur));
+  -webkit-backdrop-filter: blur(var(--modal-overlay-blur));
   display: flex;
   align-items: center;
   justify-content: center;
@@ -10,19 +11,6 @@
   padding: 20px;
 }
 
-/* Tint + blur on ::before so opacity animations on .overlay cannot disable backdrop-filter. */
-.overlay::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  z-index: -1;
-  pointer-events: none;
-  background: var(--modal-overlay-bg);
-  backdrop-filter: blur(var(--modal-overlay-blur));
-  -webkit-backdrop-filter: blur(var(--modal-overlay-blur));
-}
-
-
 .overlayNested {
   z-index: 210;
 }
diff --git a/apps/super-admin/src/components/ConfirmDeleteModal.module.css b/apps/super-admin/src/components/ConfirmDeleteModal.module.css
index de84732..2110a15 100644
--- a/apps/super-admin/src/components/ConfirmDeleteModal.module.css
+++ b/apps/super-admin/src/components/ConfirmDeleteModal.module.css
@@ -1,8 +1,9 @@
 .overlay {
   position: fixed;
   inset: 0;
-  isolation: isolate;
-  background: transparent;
+  background: rgba(127, 29, 29, 0.28);
+  backdrop-filter: blur(var(--modal-overlay-blur));
+  -webkit-backdrop-filter: blur(var(--modal-overlay-blur));
   display: flex;
   align-items: center;
   justify-content: center;
@@ -10,19 +11,6 @@
   padding: 20px;
 }
 
-/* Tint + blur on ::before so opacity animations on .overlay cannot disable backdrop-filter. */
-.overlay::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  z-index: -1;
-  pointer-events: none;
-  background: rgba(127, 29, 29, 0.28);
-  backdrop-filter: blur(var(--modal-overlay-blur));
-  -webkit-backdrop-filter: blur(var(--modal-overlay-blur));
-}
-
-
 .modal {
   position: relative;
   width: 100%;
diff --git a/apps/super-admin/src/components/Modal.module.css b/apps/super-admin/src/components/Modal.module.css
index 0fc4766..97f87cf 100644
--- a/apps/super-admin/src/components/Modal.module.css
+++ b/apps/super-admin/src/components/Modal.module.css
@@ -1,8 +1,9 @@
 .overlay {
   position: fixed;
   inset: 0;
-  isolation: isolate;
-  background: transparent;
+  background: var(--modal-overlay-bg);
+  backdrop-filter: blur(var(--modal-overlay-blur));
+  -webkit-backdrop-filter: blur(var(--modal-overlay-blur));
   display: flex;
   align-items: center;
   justify-content: center;
@@ -10,19 +11,6 @@
   padding: 20px;
 }
 
-/* Tint + blur on ::before so opacity animations on .overlay cannot disable backdrop-filter. */
-.overlay::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  z-index: -1;
-  pointer-events: none;
-  background: var(--modal-overlay-bg);
-  backdrop-filter: blur(var(--modal-overlay-blur));
-  -webkit-backdrop-filter: blur(var(--modal-overlay-blur));
-}
-
-
 .modal {
   width: 100%;
   max-width: 520px;
diff --git a/apps/super-admin/src/index.css b/apps/super-admin/src/index.css
index 5c95814..09873fe 100644
--- a/apps/super-admin/src/index.css
+++ b/apps/super-admin/src/index.css
@@ -30,7 +30,7 @@
   --radius-sm: 12px;
   --blur-glass: 28px;
   --modal-overlay-bg: rgba(15, 23, 42, 0.4);
-  --modal-overlay-blur: 12px;
+  --modal-overlay-blur: 16px;
   --select-arrow-size: 16px;
   --select-arrow-offset: 12px;
   --select-padding-end: 2.5rem;
diff --git a/packages/dashboard-core/src/styles/tokens.css b/packages/dashboard-core/src/styles/tokens.css
index 5f0d8da..d017b76 100644
--- a/packages/dashboard-core/src/styles/tokens.css
+++ b/packages/dashboard-core/src/styles/tokens.css
@@ -25,7 +25,7 @@
   --glass-shadow: 0 8px 32px rgba(31, 38, 135, 0.08);
   --blur-glass: 28px;
   --modal-overlay-bg: rgba(15, 23, 42, 0.4);
-  --modal-overlay-blur: 12px;
+  --modal-overlay-blur: 16px;
   --text-primary: #1e293b;
   --text-secondary: #64748b;
   --text-muted: #94a3b8;
diff --git a/packages/dashboard-ui/src/components/PasswordResetModal.module.css b/packages/dashboard-ui/src/components/PasswordResetModal.module.css
index 1e467a7..cd01f74 100644
--- a/packages/dashboard-ui/src/components/PasswordResetModal.module.css
+++ b/packages/dashboard-ui/src/components/PasswordResetModal.module.css
@@ -1,8 +1,9 @@
 .overlay {
   position: fixed;
   inset: 0;
-  isolation: isolate;
-  background: transparent;
+  background: var(--modal-overlay-bg);
+  backdrop-filter: blur(var(--modal-overlay-blur));
+  -webkit-backdrop-filter: blur(var(--modal-overlay-blur));
   display: flex;
   align-items: center;
   justify-content: center;
@@ -10,19 +11,6 @@
   padding: 20px;
 }
 
-/* Tint + blur on ::before so opacity animations on .overlay cannot disable backdrop-filter. */
-.overlay::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  z-index: -1;
-  pointer-events: none;
-  background: var(--modal-overlay-bg);
-  backdrop-filter: blur(var(--modal-overlay-blur));
-  -webkit-backdrop-filter: blur(var(--modal-overlay-blur));
-}
-
-
 .modal {
   position: relative;
   width: 100%;