diff --git a/src/components/modal/Modal.tsx b/src/components/modal/Modal.tsx
index 58e46d4..07fb071 100644
--- a/src/components/modal/Modal.tsx
+++ b/src/components/modal/Modal.tsx
@@ -15,8 +15,8 @@ interface ModalProps {
 }
 
 const modalbgVariants = {
-    closed: { opacity: 0 },
-    open: { opacity: 1 },
+    closed: { opacity: 0, backdropFilter: 'blur(0px)' },
+    open: { opacity: 1, backdropFilter: 'blur(6px)' },
 };
 
 const modalVariants = {
@@ -47,13 +47,15 @@ export const Modal: React.FC<ModalProps> = ({
                         exit={modalbgVariants.closed}
                         transition={{ duration: 0.15 }}
                         className={cn(
-                            ' fixed top-0 left-0 h-svh w-svw backdrop-filter transition-[background-color,backdrop-filter,opacity]  z-50',
-                            backdrop == 'blur' && open && 'backdrop-blur-sm',
-                            backdrop == 'opaque' &&
-                                open &&
-                                'bg-[#00000055] pointer-events-none',
+                            'fixed top-0 left-0 h-svh w-svw z-50',
+                            backdrop === 'opaque' && 'bg-[#00000055]',
                         )}
-                    ></motion.div>
+                        style={
+                            backdrop === 'blur'
+                                ? undefined
+                                : { backdropFilter: 'none' }
+                        }
+                    />
                 )}
             </AnimatePresence>
             <div className="fixed top-0 left-0 h-svh w-svw flex items-center justify-center pointer-events-none  z-50">