diff --git a/src/components/UserSettings.tsx b/src/components/UserSettings.tsx
index 92b578a..c7f42c1 100644
--- a/src/components/UserSettings.tsx
+++ b/src/components/UserSettings.tsx
@@ -13,7 +13,7 @@ export function UserSettings({ displayModalConfig, handleModalDisplay }: UserSet
         <>
             {displayModalConfig ?
                 <>
-                    <div className="absolute dark:opacity-40 bg-gray-800 z-[50] h-screen w-full inset-0 opacity-60 visible transition-opacity" onClick={handleModalDisplay}></div>
+                    <div className="absolute backdrop-blur-sm z-[50] h-screen w-full inset-0 visible transition-all" onClick={handleModalDisplay}></div>
                     <div className="fixed dark:bg-gray-900 bg-gray-200 z-[100] bottom-4 h-fit w-11/12 p-6 opacity-100 visible transition-opacity rounded">
                         <h2 className="dark:text-gray-200 text-gray-800 font-semi-bold mb-4">Configurações</h2>
 
@@ -24,7 +24,7 @@ export function UserSettings({ displayModalConfig, handleModalDisplay }: UserSet
                 :
 
                 <>
-                    <div className="absolute dark:opacity-40 bg-gray-800 z-[50] h-screen w-full inset-0 opacity-0 invisible transition-opacity"></div>
+                    <div className="absolute backdrop-blur-sm z-[50] h-screen w-full inset-0 invisible transition-all"></div>
                     <div className="fixed z-[100] opacity-0 invisible transition-opacity">
                         <DarkModeButton />
                     </div>