diff --git a/src/AppLogin.tsx b/src/AppLogin.tsx
index abe8c2532a..d8ec43662e 100644
--- a/src/AppLogin.tsx
+++ b/src/AppLogin.tsx
@@ -61,7 +61,6 @@ const AppLogin = ({ toggleDarkMode }) => {
 
   useEffect(() => {
     if (!authError) return;
-    console.log("Asdasdasd112312312132")
 
     handleErrorMessage(authError);
   }, [authError]);
@@ -70,30 +69,25 @@ const AppLogin = ({ toggleDarkMode }) => {
     let observer: ResizeObserver | undefined;
     try {
       setAuthError(undefined);
-      setTimeout(() => {
-        if (!readOnlyWallet) {
-          connect();
-          setModalHeight(0);
-          setModalWidth(0);
-        }
-        setTimeout(() => {
-          const onboardModal = document.getElementById("onboard-container");
-          const observer = new ResizeObserver(() => {
-            setModalHeight(onboardModal.offsetHeight);
-            setModalWidth(onboardModal.offsetWidth);
-          });
-
-          if (!readOnlyWallet) {
-            onboardModal.style.display = 'block';
-            observer.observe(onboardModal);
-          } else {
-            onboardModal.style.display = 'none';
-            observer.unobserve(onboardModal);
-            observer.disconnect();
-          }
-
-        }, 500)
-      }, 500);
+      var onboardModal = document.getElementById("onboard-container");
+      const observer = new ResizeObserver(() => {
+        setModalHeight(onboardModal.offsetHeight);
+        setModalWidth(onboardModal.offsetWidth);
+      });
+      if (!readOnlyWallet) {
+        onboardModal.style.display = 'block';
+        observer.observe(onboardModal);
+      } else {
+        onboardModal.style.display = 'none';
+        observer.unobserve(onboardModal);
+        observer.disconnect();
+      }
+
+      if(!readOnlyWallet) {
+        connect();
+        setModalHeight(0);
+        setModalWidth(0);
+      }
     }
     catch (error) {
       console.log("Error !!!!! >>>>>>>", error);
diff --git a/src/contexts/AppContext.tsx b/src/contexts/AppContext.tsx
index 1bdd34c88c..e6cb4f8ed8 100644
--- a/src/contexts/AppContext.tsx
+++ b/src/contexts/AppContext.tsx
@@ -32,7 +32,34 @@ const AppContextProvider = ({ children }) => {
     const handleConnectWallet = () => {
         const onboardModal = document.getElementById("onboard-container");
         onboardModal.style.display = 'block';
+        // Open the onboard modal
         connect();
+
+        // Create an observer instance and apply custom styles to the divElement once it is found
+        const observer = new MutationObserver(function (mutations) {
+            mutations.forEach(function (mutation) {
+                if (mutation.addedNodes && mutation.addedNodes.length > 0) {
+                    // Check if the divElement now exists in the DOM
+                    const sectionElement = document.querySelector('onboard-v2')?.shadowRoot?.querySelector('.svelte-baitaa');
+                    const divElement = sectionElement?.querySelector('div');
+                    if (divElement) {
+                        // Disconnect the observer once the divElement is found
+                        observer.disconnect();
+                        // Apply custom styles
+                        divElement.style.position = 'fixed';
+                        divElement.style.top = '0px';
+                        divElement.style.right = '0px';
+                        divElement.style.height = '100vh';
+                        divElement.style.left = '0px';
+                        divElement.style.backgroundColor = 'rgba(0, 0, 0, 0.2)';
+                        divElement.style.backdropFilter = 'blur(5px)';
+                    }
+                }
+            });
+        });
+
+        // Start observing the DOM for changes
+        observer.observe(document.body, { childList: true, subtree: true });
     }
 
     const initialisePushSdkGuestMode = async () => {
diff --git a/src/index.css b/src/index.css
index 74171ce1c6..86c621ae2b 100644
--- a/src/index.css
+++ b/src/index.css
@@ -566,8 +566,11 @@ button, a, a:before, a:after {
   --w3o-action-color: #C631C6 !important;
   --w3o-border-radius: 24px !important;
   --w3o-font-family: unset !important;
-  --onboard-modal-backdrop:transparent !important;
-  --modal-backdrop:transparent !important;
+  --onboard-modal-backdrop: transparent !important;
+  --modal-backdrop: transparent !important;
+
+  /* Wallet connect modal z-index */
+  --wcm-z-index: 99999 !important;
 }
 
 [theme="dark"] {
@@ -579,8 +582,8 @@ button, a, a:before, a:after {
   --w3o-action-color: #C631C6 !important;
   --w3o-border-radius: 24px !important;
   --w3o-font-family: unset !important;
-  --onboard-modal-backdrop:transparent !important;
-  --modal-backdrop:transparent !important;
+  --onboard-modal-backdrop: transparent !important;
+  --modal-backdrop: transparent !important;
 }
 
 #onboard-container {
@@ -594,6 +597,6 @@ button, a, a:before, a:after {
   margin-right: auto;
   border-radius: var(--w3o-border-radius);
   overflow: auto;
-	z-index: 10;
+	z-index: 99999;
 }