diff --git a/packages/modal-ui/src/components/Body/Body.tsx b/packages/modal-ui/src/components/Body/Body.tsx
index 8c00e0465..405892076 100644
--- a/packages/modal-ui/src/components/Body/Body.tsx
+++ b/packages/modal-ui/src/components/Body/Body.tsx
@@ -1,7 +1,7 @@
 import { type SafeEventEmitter } from "@web3auth/auth";
-import { ChainNamespaceType, WALLET_ADAPTERS, WalletRegistry } from "@web3auth/base/src";
+import { ChainNamespaceType, WalletRegistry } from "@web3auth/base/src";
 import Bowser from "bowser";
-import { createContext, createEffect, createMemo, Match, Show, Suspense, Switch } from "solid-js";
+import { createContext, createMemo, Match, Show, Suspense, Switch } from "solid-js";
 import { createStore } from "solid-js/store";
 
 import { PAGES } from "../../constants";
@@ -161,13 +161,6 @@ const Body = (props: BodyProps) => {
     return [installLink, ...mobileInstallLinks()];
   };
 
-  createEffect(() => {
-    const wcAvailable = (props.modalState.externalWalletsConfig[WALLET_ADAPTERS.WALLET_CONNECT_V2]?.showOnModal || false) !== false;
-    if (wcAvailable) {
-      props.handleExternalWalletClick({ adapter: WALLET_ADAPTERS.WALLET_CONNECT_V2 });
-    }
-  });
-
   return (
     <BodyContext.Provider value={{ bodyState, setBodyState }}>
       <div class="w3a--h-auto w3a--p-6 w3a--flex w3a--flex-col w3a--flex-1 w3a--relative">
diff --git a/packages/modal-ui/src/components/Body/ConnectWallet.tsx b/packages/modal-ui/src/components/Body/ConnectWallet.tsx
index 39c274117..4e01c916f 100644
--- a/packages/modal-ui/src/components/Body/ConnectWallet.tsx
+++ b/packages/modal-ui/src/components/Body/ConnectWallet.tsx
@@ -213,7 +213,7 @@ const ConnectWallet = (props: ConnectWalletProps) => {
     // if doesn't have wallet connect & doesn't have install links, must be a custom adapter
     if (button.hasInjectedWallet || (!button.hasWalletConnect && !button.hasInstallLinks)) {
       props.handleExternalWalletClick({ adapter: button.name });
-    } else if (button.hasWalletConnect && props.walletConnectUri) {
+    } else if (button.hasWalletConnect) {
       setSelectedButton(button);
       setSelectedWallet(true);
       setCurrentPage(CONNECT_WALLET_PAGES.SELECTED_WALLET);
@@ -337,7 +337,7 @@ const ConnectWallet = (props: ConnectWalletProps) => {
               </div>
             }
           >
-            <div class="w3a--relative w3a--bg-app-gray-100 dark:w3a--bg-app-white w3a--rounded-lg w3a--h-[300px] w3a--w-[300px] w3a--mx-auto w3a--flex w3a--items-center w3a--justify-center">
+            <div class="w3a--relative w3a--bg-app-gray-50 w3a--rounded-lg w3a--h-[300px] w3a--w-[300px] w3a--mx-auto w3a--flex w3a--items-center w3a--justify-center">
               <QRCodeCanvas
                 value={props.walletConnectUri || ""}
                 level="low"
@@ -351,7 +351,7 @@ const ConnectWallet = (props: ConnectWalletProps) => {
                 y={0}
                 maskType={MaskType.FLOWER_IN_SQAURE}
               />
-              <div class="w3a--absolute w3a--top-[45%] w3a--left-[45%] w3a--transform -translate-y-1/2 w3a--w-10 w3a--h-10 w3a--bg-app-white w3a--rounded-full w3a--flex w3a--items-center w3a--justify-center">
+              <div class="w3a--absolute w3a--top-[43%] w3a--left-[43%] w3a--transform -translate-y-1/2 w3a--w-10 w3a--h-10 w3a--bg-app-white w3a--rounded-full w3a--flex w3a--items-center w3a--justify-center">
                 <Image
                   imageId={`login-${selectedButton().name}`}
                   hoverImageId={`login-${selectedButton().name}`}
diff --git a/packages/modal-ui/src/components/LoginModal/LoginModal.tsx b/packages/modal-ui/src/components/LoginModal/LoginModal.tsx
index b0bb01432..b8ea8805f 100644
--- a/packages/modal-ui/src/components/LoginModal/LoginModal.tsx
+++ b/packages/modal-ui/src/components/LoginModal/LoginModal.tsx
@@ -1,5 +1,5 @@
 import { LOGIN_PROVIDER, type SafeEventEmitter } from "@web3auth/auth";
-import { ADAPTER_NAMES, ChainNamespaceType, cloneDeep, log, WalletRegistry } from "@web3auth/base/src";
+import { ADAPTER_NAMES, ChainNamespaceType, cloneDeep, log, WALLET_ADAPTERS, WalletRegistry } from "@web3auth/base/src";
 import deepmerge from "deepmerge";
 import { createEffect, createMemo, createSignal, on } from "solid-js";
 
@@ -45,7 +45,7 @@ const LoginModal = (props: LoginModalProps) => {
 
   createEffect(
     on(
-      () => props.stateListener,
+      () => [props.stateListener],
       () => {
         props.stateListener.emit("MOUNTED");
         props.stateListener.on("STATE_UPDATED", (newModalState: Partial<ModalState>) => {
@@ -160,6 +160,21 @@ const LoginModal = (props: LoginModalProps) => {
     log.debug("handleBackClick Body");
   };
 
+  createEffect(
+    on(
+      () => [modalState().externalWalletsConfig, modalState().walletConnectUri, props.handleExternalWalletClick],
+      ([config, walletConnectUri, handleExternalWalletClick]) => {
+        log.debug("modalState createEffect", modalState(), typeof handleExternalWalletClick === "function");
+        if (typeof config === "object") {
+          const wcAvailable = (config[WALLET_ADAPTERS.WALLET_CONNECT_V2]?.showOnModal || false) !== false;
+          if (wcAvailable && !walletConnectUri && typeof handleExternalWalletClick === "function") {
+            handleExternalWalletClick({ adapter: WALLET_ADAPTERS.WALLET_CONNECT_V2 });
+          }
+        }
+      }
+    )
+  );
+
   return (
     <Modal open={modalState().modalVisibility} placement="center" padding={false} showCloseIcon={showCloseIcon()} onClose={closeModal}>
       <Body