diff --git a/packages/web3-react/src/components/AlephiumConnect.tsx b/packages/web3-react/src/components/AlephiumConnect.tsx
index aade8b319..ef092bf13 100644
--- a/packages/web3-react/src/components/AlephiumConnect.tsx
+++ b/packages/web3-react/src/components/AlephiumConnect.tsx
@@ -42,7 +42,8 @@ import {
   ConnectSettingContext,
   ConnectSettingValue,
   ConnectionStatus,
-  useAlephiumConnectContext
+  useAlephiumConnectContext,
+  useConnectSettingContext
 } from '../contexts/alephiumConnect'
 import { getLastConnectedAccount, removeLastConnectedAccount } from '../utils/storage'
 import { ConnectResult, getConnectorById } from '../utils/connector'
@@ -94,13 +95,16 @@ export const ConnectSettingProvider: React.FC<{
     errorMessage
   }
 
+  return <ConnectSettingContext.Provider value={value}>{children}</ConnectSettingContext.Provider>
+}
+
+const DefaultThemeProvider: React.FC<{ children?: React.ReactNode }> = ({ children }) => {
+  const context = useConnectSettingContext()
   return (
-    <ConnectSettingContext.Provider value={value}>
-      <ThemeProvider theme={defaultTheme}>
-        {children}
-        <AlephiumConnectModal theme={_theme} mode={_mode} customTheme={_customTheme} />
-      </ThemeProvider>
-    </ConnectSettingContext.Provider>
+    <ThemeProvider theme={defaultTheme}>
+      {children}
+      <AlephiumConnectModal theme={context.theme} mode={context.mode} customTheme={context.customTheme} />
+    </ThemeProvider>
   )
 }
 
@@ -321,7 +325,9 @@ export const AlephiumWalletProvider = ({
         customTheme={customTheme}
         csrModeOnly={csrModeOnly}
       >
-        <AlephiumBalanceProvider>{children}</AlephiumBalanceProvider>
+        <DefaultThemeProvider>
+          <AlephiumBalanceProvider>{children}</AlephiumBalanceProvider>
+        </DefaultThemeProvider>
       </ConnectSettingProvider>
     </AlephiumConnectProvider>
   )
diff --git a/packages/web3-react/src/index.ts b/packages/web3-react/src/index.ts
index e2eddabb4..3fcad2a66 100644
--- a/packages/web3-react/src/index.ts
+++ b/packages/web3-react/src/index.ts
@@ -15,7 +15,12 @@ GNU Lesser General Public License for more details.
 You should have received a copy of the GNU Lesser General Public License
 along with the library. If not, see <http://www.gnu.org/licenses/>.
 */
-export { AlephiumWalletProvider, AlephiumBalanceProvider } from './components/AlephiumConnect'
+export {
+  AlephiumWalletProvider,
+  AlephiumBalanceProvider,
+  ConnectSettingProvider,
+  AlephiumConnectProvider
+} from './components/AlephiumConnect'
 export { AlephiumConnectButton, AlephiumConnectButtonCustom } from './components/ConnectButton'
 
 export { default as supportedConnectors } from './constants/supportedConnectors'
@@ -24,3 +29,5 @@ export { useConnect } from './hooks/useConnect'
 export { useTxStatus } from './hooks/useTxStatus'
 export { useBalance } from './hooks/useBalance'
 export { useWallet, Wallet, useWalletConfig, WalletConfig } from './hooks/useWallet'
+
+export * from './contexts/alephiumConnect'