diff --git a/packages/checkout/src/components/SequenceCheckoutProvider/SequenceCheckoutProvider.tsx b/packages/checkout/src/components/SequenceCheckoutProvider/SequenceCheckoutProvider.tsx
index fad8f80f8..32b5e1b5b 100644
--- a/packages/checkout/src/components/SequenceCheckoutProvider/SequenceCheckoutProvider.tsx
+++ b/packages/checkout/src/components/SequenceCheckoutProvider/SequenceCheckoutProvider.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { getModalPositionCss, ShadowRoot, useConnectConfigContext, useTheme } from '@0xsequence/connect'
-import { Modal } from '@0xsequence/design-system'
+import { Modal, ThemeProvider } from '@0xsequence/design-system'
 import { AnimatePresence } from 'motion/react'
 import { useEffect, useState, type ReactNode } from 'react'
 
@@ -303,111 +303,115 @@ export const SequenceCheckoutProvider = ({ children, config }: SequenceCheckoutP
                           defaultLocation: getDefaultLocationCheckout()
                         }}
                       >
-                        <ShadowRoot theme={theme} customCSS={customCSS}>
-                          <AnimatePresence>
-                            {openCheckoutModal && (
-                              <Modal
-                                contentProps={{
-                                  style: {
-                                    maxWidth: '540px',
-                                    height: 'auto',
-                                    ...getModalPositionCss(position)
-                                  }
-                                }}
-                                scroll={false}
-                                onClose={() => setOpenCheckoutModal(false)}
-                              >
-                                <div id="sequence-kit-checkout-content">
-                                  {getCheckoutHeader()}
-                                  {getCheckoutContent()}
-                                </div>
-                              </Modal>
-                            )}
-                            {openAddFundsModal && (
-                              <Modal
-                                contentProps={{
-                                  style: {
-                                    maxWidth: '540px',
-                                    height: 'auto',
-                                    ...getModalPositionCss(position)
-                                  }
-                                }}
-                                scroll={false}
-                                onClose={closeAddFunds}
-                              >
-                                <div id="sequence-kit-add-funds-content">
-                                  {getAddFundsHeader()}
-                                  {getAddFundsContent()}
-                                </div>
-                              </Modal>
-                            )}
-                            {openPaymentSelectionModal && (
-                              <Modal
-                                contentProps={{
-                                  style: {
-                                    maxWidth: '320px',
-                                    height: 'auto',
-                                    ...getModalPositionCss(position)
-                                  }
-                                }}
-                                scroll={false}
-                                onClose={() => setOpenPaymentSelectionModal(false)}
-                              >
-                                <div id="sequence-web-sdk-payment-selection-content">
-                                  {getCheckoutFlowHeader()}
-                                  {getCheckoutFlowContent()}
-                                </div>
-                              </Modal>
-                            )}
-                            {openTransferFundsModal && (
-                              <Modal
-                                contentProps={{
-                                  style: {
-                                    height: 'auto',
-                                    ...getModalPositionCss(position)
-                                  }
-                                }}
-                                onClose={closeTransferFunds}
-                              >
-                                <div id="sequence-kit-transfer-funds-modal">
-                                  <NavigationHeader primaryText="Receive" />
-                                  <TransferToWallet />
-                                </div>
-                              </Modal>
-                            )}
-                            {openTransactionStatusModal && (
-                              <Modal
-                                contentProps={{
-                                  style: {
-                                    height: 'auto',
-                                    ...getModalPositionCss(position)
-                                  }
-                                }}
-                                onClose={closeTransactionStatusModal}
-                              >
-                                <div id="sequence-kit-transaction-status-modal">
-                                  <TransactionStatus />
-                                </div>
-                              </Modal>
-                            )}
-                            {isOpenSwapModal && (
-                              <Modal
-                                contentProps={{
-                                  style: {
-                                    maxWidth: '450px',
-                                    height: 'auto',
-                                    ...getModalPositionCss(position)
-                                  }
-                                }}
-                                onClose={closeSwapModal}
-                              >
-                                <div id="sequence-kit-swap-modal">
-                                  <NavigationHeader primaryText={swapModalSettings?.title || 'Swap'} />
-                                  <Swap />
-                                </div>
-                              </Modal>
-                            )}
-                          </AnimatePresence>
+                        <ShadowRoot customCSS={customCSS}>
+                          {(container: HTMLDivElement) => (
+                            <ThemeProvider theme={theme} root={container}>
+                              <AnimatePresence>
+                                {openCheckoutModal && (
+                                  <Modal
+                                    contentProps={{
+                                      style: {
+                                        maxWidth: '540px',
+                                        height: 'auto',
+                                        ...getModalPositionCss(position)
+                                      }
+                                    }}
+                                    scroll={false}
+                                    onClose={() => setOpenCheckoutModal(false)}
+                                  >
+                                    <div id="sequence-kit-checkout-content">
+                                      {getCheckoutHeader()}
+                                      {getCheckoutContent()}
+                                    </div>
+                                  </Modal>
+                                )}
+                                {openAddFundsModal && (
+                                  <Modal
+                                    contentProps={{
+                                      style: {
+                                        maxWidth: '540px',
+                                        height: 'auto',
+                                        ...getModalPositionCss(position)
+                                      }
+                                    }}
+                                    scroll={false}
+                                    onClose={closeAddFunds}
+                                  >
+                                    <div id="sequence-kit-add-funds-content">
+                                      {getAddFundsHeader()}
+                                      {getAddFundsContent()}
+                                    </div>
+                                  </Modal>
+                                )}
+                                {openPaymentSelectionModal && (
+                                  <Modal
+                                    contentProps={{
+                                      style: {
+                                        maxWidth: '320px',
+                                        height: 'auto',
+                                        ...getModalPositionCss(position)
+                                      }
+                                    }}
+                                    scroll={false}
+                                    onClose={() => setOpenPaymentSelectionModal(false)}
+                                  >
+                                    <div id="sequence-web-sdk-payment-selection-content">
+                                      {getCheckoutFlowHeader()}
+                                      {getCheckoutFlowContent()}
+                                    </div>
+                                  </Modal>
+                                )}
+                                {openTransferFundsModal && (
+                                  <Modal
+                                    contentProps={{
+                                      style: {
+                                        height: 'auto',
+                                        ...getModalPositionCss(position)
+                                      }
+                                    }}
+                                    onClose={closeTransferFunds}
+                                  >
+                                    <div id="sequence-kit-transfer-funds-modal">
+                                      <NavigationHeader primaryText="Receive" />
+                                      <TransferToWallet />
+                                    </div>
+                                  </Modal>
+                                )}
+                                {openTransactionStatusModal && (
+                                  <Modal
+                                    contentProps={{
+                                      style: {
+                                        height: 'auto',
+                                        ...getModalPositionCss(position)
+                                      }
+                                    }}
+                                    onClose={closeTransactionStatusModal}
+                                  >
+                                    <div id="sequence-kit-transaction-status-modal">
+                                      <TransactionStatus />
+                                    </div>
+                                  </Modal>
+                                )}
+                                {isOpenSwapModal && (
+                                  <Modal
+                                    contentProps={{
+                                      style: {
+                                        maxWidth: '450px',
+                                        height: 'auto',
+                                        ...getModalPositionCss(position)
+                                      }
+                                    }}
+                                    onClose={closeSwapModal}
+                                  >
+                                    <div id="sequence-kit-swap-modal">
+                                      <NavigationHeader primaryText={swapModalSettings?.title || 'Swap'} />
+                                      <Swap />
+                                    </div>
+                                  </Modal>
+                                )}
+                              </AnimatePresence>
+                            </ThemeProvider>
+                          )}
                         </ShadowRoot>
                         {children}
                       </NavigationCheckoutContextProvider>
diff --git a/packages/connect/src/components/SequenceConnectInlineProvider/SequenceConnectInlineProvider.tsx b/packages/connect/src/components/SequenceConnectInlineProvider/SequenceConnectInlineProvider.tsx
index 258591209..e3bea1c9e 100644
--- a/packages/connect/src/components/SequenceConnectInlineProvider/SequenceConnectInlineProvider.tsx
+++ b/packages/connect/src/components/SequenceConnectInlineProvider/SequenceConnectInlineProvider.tsx
@@ -282,152 +282,159 @@ export const SequenceConnectInlineProvider = (props: SequenceConnectInlineProvid
                         </ThemeProvider>
                       </div>
 
-                      <ShadowRoot theme={theme} customCSS={customCSS}>
-                        <AnimatePresence>
-                          {pendingRequestConfirmation && (
-                            <Modal
-                              scroll={false}
-                              size="sm"
-                              contentProps={{
-                                style: {
-                                  maxWidth: '390px',
-                                  ...getModalPositionCss(position)
-                                }
-                              }}
-                              isDismissible={false}
-                              onClose={() => {
-                                rejectPendingRequest('')
-                              }}
-                            >
-                              <div className="px-4 pt-4 pb-2">
-                                <div
-                                  className="flex flex-col justify-center text-primary items-center font-medium"
-                                  style={{
-                                    marginTop: '4px'
+                      <ShadowRoot customCSS={customCSS}>
+                        {(container: HTMLDivElement) => (
+                          <ThemeProvider theme={theme} root={container}>
+                            <AnimatePresence>
+                              {pendingRequestConfirmation && (
+                                <Modal
+                                  scroll={false}
+                                  size="sm"
+                                  contentProps={{
+                                    style: {
+                                      maxWidth: '390px',
+                                      ...getModalPositionCss(position)
+                                    }
+                                  }}
+                                  isDismissible={false}
+                                  onClose={() => {
+                                    rejectPendingRequest('')
                                   }}
                                 >
-                                  <ModalPrimitive.Title asChild>
-                                    <Text className="mb-5" variant="large" asChild>
-                                      <h1>
-                                        Confirm{' '}
-                                        {pendingRequestConfirmation.type === 'signMessage' ? 'signing message' : 'transaction'}
-                                      </h1>
-                                    </Text>
-                                  </ModalPrimitive.Title>
-
-                                  {pendingRequestConfirmation.type === 'signMessage' && pendingRequestConfirmation.message && (
-                                    <div className="flex flex-col w-full">
-                                      <Text variant="normal" color="muted" fontWeight="medium">
-                                        Message
-                                      </Text>
-                                      <Card className="mt-2 py-2 overflow-scroll max-h-[200px]">
-                                        <Text className="mb-4" variant="normal">
-                                          {isJSON(pendingRequestConfirmation.message) ? (
-                                            <JsonTreeViewer data={JSON.parse(pendingRequestConfirmation.message)} />
-                                          ) : (
-                                            hexToString(pendingRequestConfirmation.message as unknown as Hex)
-                                          )}
-                                        </Text>
-                                      </Card>
-                                    </div>
-                                  )}
-
-                                  {pendingRequestConfirmation.type === 'signTransaction' && (
-                                    <TxnDetails
-                                      address={address ?? ''}
-                                      txs={pendingRequestConfirmation.txs ?? []}
-                                      chainId={pendingRequestConfirmation.chainId ?? ChainId.POLYGON}
-                                    />
-                                  )}
-
-                                  {pendingRequestConfirmation.chainId && (
-                                    <div className="flex w-full mt-3 justify-end items-center">
-                                      <div className="flex w-1/2 justify-start">
-                                        <Text variant="small" color="muted">
-                                          Network
+                                  <div className="px-4 pt-4 pb-2">
+                                    <div
+                                      className="flex flex-col justify-center text-primary items-center font-medium"
+                                      style={{
+                                        marginTop: '4px'
+                                      }}
+                                    >
+                                      <ModalPrimitive.Title asChild>
+                                        <Text className="mb-5" variant="large" asChild>
+                                          <h1>
+                                            Confirm{' '}
+                                            {pendingRequestConfirmation.type === 'signMessage'
+                                              ? 'signing message'
+                                              : 'transaction'}
+                                          </h1>
                                         </Text>
-                                      </div>
-                                      <div className="flex w-1/2 justify-end">
-                                        <NetworkBadge chainId={pendingRequestConfirmation.chainId} />
+                                      </ModalPrimitive.Title>
+
+                                      {pendingRequestConfirmation.type === 'signMessage' &&
+                                        pendingRequestConfirmation.message && (
+                                          <div className="flex flex-col w-full">
+                                            <Text variant="normal" color="muted" fontWeight="medium">
+                                              Message
+                                            </Text>
+                                            <Card className="mt-2 py-2 overflow-scroll max-h-[200px]">
+                                              <Text className="mb-4" variant="normal">
+                                                {isJSON(pendingRequestConfirmation.message) ? (
+                                                  <JsonTreeViewer data={JSON.parse(pendingRequestConfirmation.message)} />
+                                                ) : (
+                                                  hexToString(pendingRequestConfirmation.message as unknown as Hex)
+                                                )}
+                                              </Text>
+                                            </Card>
+                                          </div>
+                                        )}
+
+                                      {pendingRequestConfirmation.type === 'signTransaction' && (
+                                        <TxnDetails
+                                          address={address ?? ''}
+                                          txs={pendingRequestConfirmation.txs ?? []}
+                                          chainId={pendingRequestConfirmation.chainId ?? ChainId.POLYGON}
+                                        />
+                                      )}
+
+                                      {pendingRequestConfirmation.chainId && (
+                                        <div className="flex w-full mt-3 justify-end items-center">
+                                          <div className="flex w-1/2 justify-start">
+                                            <Text variant="small" color="muted">
+                                              Network
+                                            </Text>
+                                          </div>
+                                          <div className="flex w-1/2 justify-end">
+                                            <NetworkBadge chainId={pendingRequestConfirmation.chainId} />
+                                          </div>
+                                        </div>
+                                      )}
+
+                                      <div className="flex flex-row gap-2 w-full mt-5">
+                                        <Button
+                                          className="w-full"
+                                          shape="square"
+                                          size="lg"
+                                          label="Reject"
+                                          onClick={() => {
+                                            rejectPendingRequest(pendingRequestConfirmation?.id)
+                                          }}
+                                        />
+                                        <Button
+                                          className="flex items-center text-center w-full"
+                                          shape="square"
+                                          size="lg"
+                                          label="Confirm"
+                                          variant="primary"
+                                          onClick={() => {
+                                            confirmPendingRequest(pendingRequestConfirmation?.id)
+                                          }}
+                                        />
                                       </div>
                                     </div>
-                                  )}
-
-                                  <div className="flex flex-row gap-2 w-full mt-5">
-                                    <Button
-                                      className="w-full"
-                                      shape="square"
-                                      size="lg"
-                                      label="Reject"
-                                      onClick={() => {
-                                        rejectPendingRequest(pendingRequestConfirmation?.id)
-                                      }}
-                                    />
-                                    <Button
-                                      className="flex items-center text-center w-full"
-                                      shape="square"
-                                      size="lg"
-                                      label="Confirm"
-                                      variant="primary"
-                                      onClick={() => {
-                                        confirmPendingRequest(pendingRequestConfirmation?.id)
-                                      }}
-                                    />
-                                  </div>
-                                </div>
-
-                                <div className="mt-4">
-                                  <PoweredBySequence />
-                                </div>
-                              </div>
-                            </Modal>
-                          )}
 
-                          {isEmailConflictOpen && emailConflictInfo && (
-                            <Modal
-                              size="sm"
-                              scroll={false}
-                              onClose={() => {
-                                toggleEmailConflictModal(false)
-                              }}
-                            >
-                              <div className="p-4">
-                                <ModalPrimitive.Title asChild>
-                                  <PageHeading>Email already in use</PageHeading>
-                                </ModalPrimitive.Title>
-                                <div>
-                                  <Text className="text-center" variant="normal" color="secondary">
-                                    Another account with this email address{' '}
-                                    <Text color="primary">({emailConflictInfo.email})</Text> already exists with account type{' '}
-                                    <Text color="primary">({emailConflictInfo.type})</Text>. Please sign in again with the correct
-                                    account.
-                                  </Text>
-                                  <div className="flex mt-4 gap-2 items-center justify-center">
-                                    <Button
-                                      label="OK"
-                                      onClick={() => {
-                                        toggleEmailConflictModal(false)
-                                      }}
-                                    />
+                                    <div className="mt-4">
+                                      <PoweredBySequence />
+                                    </div>
                                   </div>
-                                </div>
-                              </div>
-                            </Modal>
-                          )}
-
-                          {isSocialLinkOpen &&
-                            (waasConnector ? (
-                              <Modal size="sm" scroll={false} onClose={() => setIsSocialLinkOpen(false)}>
-                                <SocialLink />
-                              </Modal>
-                            ) : (
-                              <Modal size="sm" scroll={false} onClose={() => setIsSocialLinkOpen(false)}>
-                                <Text className="p-8" variant="medium" color="warning">
-                                  Social link is not supported for universal wallets (works only for embedded wallets)
-                                </Text>
-                              </Modal>
-                            ))}
-                        </AnimatePresence>
+                                </Modal>
+                              )}
+
+                              {isEmailConflictOpen && emailConflictInfo && (
+                                <Modal
+                                  size="sm"
+                                  scroll={false}
+                                  onClose={() => {
+                                    toggleEmailConflictModal(false)
+                                  }}
+                                >
+                                  <div className="p-4">
+                                    <ModalPrimitive.Title asChild>
+                                      <PageHeading>Email already in use</PageHeading>
+                                    </ModalPrimitive.Title>
+                                    <div>
+                                      <Text className="text-center" variant="normal" color="secondary">
+                                        Another account with this email address{' '}
+                                        <Text color="primary">({emailConflictInfo.email})</Text> already exists with account type{' '}
+                                        <Text color="primary">({emailConflictInfo.type})</Text>. Please sign in again with the
+                                        correct account.
+                                      </Text>
+                                      <div className="flex mt-4 gap-2 items-center justify-center">
+                                        <Button
+                                          label="OK"
+                                          onClick={() => {
+                                            toggleEmailConflictModal(false)
+                                          }}
+                                        />
+                                      </div>
+                                    </div>
+                                  </div>
+                                </Modal>
+                              )}
+
+                              {isSocialLinkOpen &&
+                                (waasConnector ? (
+                                  <Modal size="sm" scroll={false} onClose={() => setIsSocialLinkOpen(false)}>
+                                    <SocialLink />
+                                  </Modal>
+                                ) : (
+                                  <Modal size="sm" scroll={false} onClose={() => setIsSocialLinkOpen(false)}>
+                                    <Text className="p-8" variant="medium" color="warning">
+                                      Social link is not supported for universal wallets (works only for embedded wallets)
+                                    </Text>
+                                  </Modal>
+                                ))}
+                            </AnimatePresence>
+                          </ThemeProvider>
+                        )}
                       </ShadowRoot>
                     </EpicAuthProvider>
                     {children}
diff --git a/packages/connect/src/components/SequenceConnectProvider/SequenceConnectProvider.tsx b/packages/connect/src/components/SequenceConnectProvider/SequenceConnectProvider.tsx
index 2828f9266..22af78af5 100644
--- a/packages/connect/src/components/SequenceConnectProvider/SequenceConnectProvider.tsx
+++ b/packages/connect/src/components/SequenceConnectProvider/SequenceConnectProvider.tsx
@@ -1,6 +1,16 @@
 'use client'
 
-import { Button, Card, Modal, ModalPrimitive, Spinner, Text, ToastProvider, type Theme } from '@0xsequence/design-system'
+import {
+  Button,
+  Card,
+  Modal,
+  ModalPrimitive,
+  Spinner,
+  Text,
+  ThemeProvider,
+  ToastProvider,
+  type Theme
+} from '@0xsequence/design-system'
 import { SequenceHooksProvider } from '@0xsequence/hooks'
 import { SequenceClient, setupAnalytics, type Analytics } from '@0xsequence/provider'
 import { GoogleOAuthProvider } from '@react-oauth/google'
@@ -240,187 +250,194 @@ export const SequenceConnectProvider = (props: SequenceConnectProviderProps) =>
                 <AnalyticsContextProvider value={{ setAnalytics, analytics }}>
                   <ToastProvider>
                     <SocialLinkContextProvider value={{ isSocialLinkOpen, waasConfigKey, setIsSocialLinkOpen }}>
-                      <ShadowRoot theme={theme} customCSS={customCSS}>
-                        <AnimatePresence>
-                          {openConnectModal && (
-                            <Modal
-                              scroll={false}
-                              size="sm"
-                              contentProps={{
-                                style: {
-                                  maxWidth: '390px',
-                                  overflow: 'visible',
-                                  ...getModalPositionCss(position)
-                                }
-                              }}
-                              onClose={() => setOpenConnectModal(false)}
-                            >
-                              {isWalletConfigLoading || isAuthStatusLoading ? (
-                                <div className="flex py-16 justify-center items-center">
-                                  <Spinner size="lg" />
-                                </div>
-                              ) : (
-                                <EpicAuthProvider>
-                                  <Connect
-                                    onClose={() => setOpenConnectModal(false)}
-                                    emailConflictInfo={emailConflictInfo}
-                                    {...props}
-                                    config={incomingConfig}
-                                    resolvedConfig={config}
-                                    isV3WalletSignedIn={isV3WalletSignedIn}
-                                    isAuthStatusLoading={isAuthStatusLoading}
-                                    enabledProviders={enabledProviders}
-                                    walletConfigurationSignIn={walletConfigurationSignIn}
-                                    sdkConfig={sdkConfig}
-                                  />
-                                </EpicAuthProvider>
-                              )}
-                            </Modal>
-                          )}
-                          {pendingRequestConfirmation && (
-                            <Modal
-                              scroll={false}
-                              size="sm"
-                              contentProps={{
-                                style: {
-                                  maxWidth: '390px',
-                                  ...getModalPositionCss(position)
-                                }
-                              }}
-                              isDismissible={false}
-                              onClose={() => {
-                                rejectPendingRequest('')
-                              }}
-                            >
-                              <div className="px-4 pt-4 pb-2">
-                                <div
-                                  className="flex flex-col justify-center text-primary items-center font-medium"
-                                  style={{
-                                    marginTop: '4px'
+                      <ShadowRoot customCSS={customCSS}>
+                        {(container: HTMLDivElement) => (
+                          <ThemeProvider theme={theme} root={container}>
+                            <AnimatePresence>
+                              {openConnectModal && (
+                                <Modal
+                                  scroll={false}
+                                  size="sm"
+                                  contentProps={{
+                                    style: {
+                                      maxWidth: '390px',
+                                      overflow: 'visible',
+                                      ...getModalPositionCss(position)
+                                    }
                                   }}
+                                  onClose={() => setOpenConnectModal(false)}
                                 >
-                                  <ModalPrimitive.Title asChild>
-                                    <Text className="mb-5" variant="large" asChild>
-                                      <h1>
-                                        Confirm{' '}
-                                        {pendingRequestConfirmation.type === 'signMessage' ? 'signing message' : 'transaction'}
-                                      </h1>
-                                    </Text>
-                                  </ModalPrimitive.Title>
-
-                                  {pendingRequestConfirmation.type === 'signMessage' && pendingRequestConfirmation.message && (
-                                    <div className="flex flex-col w-full">
-                                      <Text variant="normal" color="muted" fontWeight="medium">
-                                        Message
-                                      </Text>
-                                      <Card className="mt-2 py-2 overflow-scroll max-h-[200px]">
-                                        <Text className="mb-4" variant="normal">
-                                          {isJSON(pendingRequestConfirmation.message) ? (
-                                            <JsonTreeViewer data={JSON.parse(pendingRequestConfirmation.message)} />
-                                          ) : (
-                                            hexToString(pendingRequestConfirmation.message as unknown as Hex)
-                                          )}
-                                        </Text>
-                                      </Card>
+                                  {isWalletConfigLoading || isAuthStatusLoading ? (
+                                    <div className="flex py-16 justify-center items-center">
+                                      <Spinner size="lg" />
                                     </div>
+                                  ) : (
+                                    <EpicAuthProvider>
+                                      <Connect
+                                        onClose={() => setOpenConnectModal(false)}
+                                        emailConflictInfo={emailConflictInfo}
+                                        {...props}
+                                        config={incomingConfig}
+                                        resolvedConfig={config}
+                                        isV3WalletSignedIn={isV3WalletSignedIn}
+                                        isAuthStatusLoading={isAuthStatusLoading}
+                                        enabledProviders={enabledProviders}
+                                        walletConfigurationSignIn={walletConfigurationSignIn}
+                                        sdkConfig={sdkConfig}
+                                      />
+                                    </EpicAuthProvider>
                                   )}
-
-                                  {pendingRequestConfirmation.type === 'signTransaction' && (
-                                    <TxnDetails
-                                      address={address ?? ''}
-                                      txs={pendingRequestConfirmation.txs ?? []}
-                                      chainId={pendingRequestConfirmation.chainId ?? ChainId.POLYGON}
-                                    />
-                                  )}
-
-                                  {pendingRequestConfirmation.chainId && (
-                                    <div className="flex w-full mt-3 justify-end items-center">
-                                      <div className="flex w-1/2 justify-start">
-                                        <Text variant="small" color="muted">
-                                          Network
+                                </Modal>
+                              )}
+                              {pendingRequestConfirmation && (
+                                <Modal
+                                  scroll={false}
+                                  size="sm"
+                                  contentProps={{
+                                    style: {
+                                      maxWidth: '390px',
+                                      ...getModalPositionCss(position)
+                                    }
+                                  }}
+                                  isDismissible={false}
+                                  onClose={() => {
+                                    rejectPendingRequest('')
+                                  }}
+                                >
+                                  <div className="px-4 pt-4 pb-2">
+                                    <div
+                                      className="flex flex-col justify-center text-primary items-center font-medium"
+                                      style={{
+                                        marginTop: '4px'
+                                      }}
+                                    >
+                                      <ModalPrimitive.Title asChild>
+                                        <Text className="mb-5" variant="large" asChild>
+                                          <h1>
+                                            Confirm{' '}
+                                            {pendingRequestConfirmation.type === 'signMessage'
+                                              ? 'signing message'
+                                              : 'transaction'}
+                                          </h1>
                                         </Text>
-                                      </div>
-                                      <div className="flex w-1/2 justify-end">
-                                        <NetworkBadge chainId={pendingRequestConfirmation.chainId} />
+                                      </ModalPrimitive.Title>
+
+                                      {pendingRequestConfirmation.type === 'signMessage' &&
+                                        pendingRequestConfirmation.message && (
+                                          <div className="flex flex-col w-full">
+                                            <Text variant="normal" color="muted" fontWeight="medium">
+                                              Message
+                                            </Text>
+                                            <Card className="mt-2 py-2 overflow-scroll max-h-[200px]">
+                                              <Text className="mb-4" variant="normal">
+                                                {isJSON(pendingRequestConfirmation.message) ? (
+                                                  <JsonTreeViewer data={JSON.parse(pendingRequestConfirmation.message)} />
+                                                ) : (
+                                                  hexToString(pendingRequestConfirmation.message as unknown as Hex)
+                                                )}
+                                              </Text>
+                                            </Card>
+                                          </div>
+                                        )}
+
+                                      {pendingRequestConfirmation.type === 'signTransaction' && (
+                                        <TxnDetails
+                                          address={address ?? ''}
+                                          txs={pendingRequestConfirmation.txs ?? []}
+                                          chainId={pendingRequestConfirmation.chainId ?? ChainId.POLYGON}
+                                        />
+                                      )}
+
+                                      {pendingRequestConfirmation.chainId && (
+                                        <div className="flex w-full mt-3 justify-end items-center">
+                                          <div className="flex w-1/2 justify-start">
+                                            <Text variant="small" color="muted">
+                                              Network
+                                            </Text>
+                                          </div>
+                                          <div className="flex w-1/2 justify-end">
+                                            <NetworkBadge chainId={pendingRequestConfirmation.chainId} />
+                                          </div>
+                                        </div>
+                                      )}
+
+                                      <div className="flex flex-row gap-2 w-full mt-5">
+                                        <Button
+                                          className="w-full"
+                                          shape="square"
+                                          size="lg"
+                                          label="Reject"
+                                          onClick={() => {
+                                            rejectPendingRequest(pendingRequestConfirmation?.id)
+                                          }}
+                                        />
+                                        <Button
+                                          className="flex items-center text-center w-full"
+                                          shape="square"
+                                          size="lg"
+                                          label="Confirm"
+                                          variant="primary"
+                                          onClick={() => {
+                                            confirmPendingRequest(pendingRequestConfirmation?.id)
+                                          }}
+                                        />
                                       </div>
                                     </div>
-                                  )}
 
-                                  <div className="flex flex-row gap-2 w-full mt-5">
-                                    <Button
-                                      className="w-full"
-                                      shape="square"
-                                      size="lg"
-                                      label="Reject"
-                                      onClick={() => {
-                                        rejectPendingRequest(pendingRequestConfirmation?.id)
-                                      }}
-                                    />
-                                    <Button
-                                      className="flex items-center text-center w-full"
-                                      shape="square"
-                                      size="lg"
-                                      label="Confirm"
-                                      variant="primary"
-                                      onClick={() => {
-                                        confirmPendingRequest(pendingRequestConfirmation?.id)
-                                      }}
-                                    />
+                                    <div className="mt-4">
+                                      <PoweredBySequence />
+                                    </div>
                                   </div>
-                                </div>
-
-                                <div className="mt-4">
-                                  <PoweredBySequence />
-                                </div>
-                              </div>
-                            </Modal>
-                          )}
-                          {isEmailConflictOpen && emailConflictInfo && (
-                            <Modal
-                              size="sm"
-                              scroll={false}
-                              onClose={() => {
-                                setOpenConnectModal(false)
-                                toggleEmailConflictModal(false)
-                              }}
-                            >
-                              <div className="p-4">
-                                <ModalPrimitive.Title asChild>
-                                  <PageHeading>Email already in use</PageHeading>
-                                </ModalPrimitive.Title>
-                                <div>
-                                  <Text className="text-center" variant="normal" color="secondary">
-                                    Another account with this email address{' '}
-                                    <Text color="primary">({emailConflictInfo.email})</Text> already exists with account type{' '}
-                                    <Text color="primary">({emailConflictInfo.type})</Text>. Please sign in again with the correct
-                                    account.
-                                  </Text>
-                                  <div className="flex mt-4 gap-2 items-center justify-center">
-                                    <Button
-                                      label="OK"
-                                      onClick={() => {
-                                        setOpenConnectModal(false)
-                                        toggleEmailConflictModal(false)
-                                      }}
-                                    />
+                                </Modal>
+                              )}
+                              {isEmailConflictOpen && emailConflictInfo && (
+                                <Modal
+                                  size="sm"
+                                  scroll={false}
+                                  onClose={() => {
+                                    setOpenConnectModal(false)
+                                    toggleEmailConflictModal(false)
+                                  }}
+                                >
+                                  <div className="p-4">
+                                    <ModalPrimitive.Title asChild>
+                                      <PageHeading>Email already in use</PageHeading>
+                                    </ModalPrimitive.Title>
+                                    <div>
+                                      <Text className="text-center" variant="normal" color="secondary">
+                                        Another account with this email address{' '}
+                                        <Text color="primary">({emailConflictInfo.email})</Text> already exists with account type{' '}
+                                        <Text color="primary">({emailConflictInfo.type})</Text>. Please sign in again with the
+                                        correct account.
+                                      </Text>
+                                      <div className="flex mt-4 gap-2 items-center justify-center">
+                                        <Button
+                                          label="OK"
+                                          onClick={() => {
+                                            setOpenConnectModal(false)
+                                            toggleEmailConflictModal(false)
+                                          }}
+                                        />
+                                      </div>
+                                    </div>
                                   </div>
-                                </div>
-                              </div>
-                            </Modal>
-                          )}
-                          {isSocialLinkOpen &&
-                            (waasConnector ? (
-                              <Modal size="sm" scroll={false} onClose={() => setIsSocialLinkOpen(false)}>
-                                <SocialLink />
-                              </Modal>
-                            ) : (
-                              <Modal size="sm" scroll={false} onClose={() => setIsSocialLinkOpen(false)}>
-                                <Text className="p-8" variant="medium" color="warning">
-                                  Social link is not supported for universal wallets (works only for embedded wallets)
-                                </Text>
-                              </Modal>
-                            ))}
-                        </AnimatePresence>
+                                </Modal>
+                              )}
+                              {isSocialLinkOpen &&
+                                (waasConnector ? (
+                                  <Modal size="sm" scroll={false} onClose={() => setIsSocialLinkOpen(false)}>
+                                    <SocialLink />
+                                  </Modal>
+                                ) : (
+                                  <Modal size="sm" scroll={false} onClose={() => setIsSocialLinkOpen(false)}>
+                                    <Text className="p-8" variant="medium" color="warning">
+                                      Social link is not supported for universal wallets (works only for embedded wallets)
+                                    </Text>
+                                  </Modal>
+                                ))}
+                            </AnimatePresence>
+                          </ThemeProvider>
+                        )}
                       </ShadowRoot>
                       {children}
                     </SocialLinkContextProvider>
diff --git a/packages/connect/src/components/ShadowRoot/ShadowRoot.tsx b/packages/connect/src/components/ShadowRoot/ShadowRoot.tsx
index f5a2ee54d..dfa082b47 100644
--- a/packages/connect/src/components/ShadowRoot/ShadowRoot.tsx
+++ b/packages/connect/src/components/ShadowRoot/ShadowRoot.tsx
@@ -20,7 +20,7 @@ const getCSSStyleSheet = (customCSS?: string) => {
 
 interface ShadowRootProps {
   theme?: Theme
-  children: ReactNode
+  children: ReactNode | ((container: HTMLDivElement) => ReactNode)
   customCSS?: string
 }
 
@@ -51,14 +51,20 @@ export const ShadowRoot = (props: ShadowRootProps) => {
     }
   }, [windowDocument])
 
+  const renderedChildren = container ? (
+    typeof children === 'function' ? (
+      children(container)
+    ) : (
+      <ThemeProvider theme={theme} root={container}>
+        {children}
+      </ThemeProvider>
+    )
+  ) : null
+
   return windowDocument
     ? createPortal(
         <div data-shadow-host ref={hostRef}>
-          {container && (
-            <ThemeProvider theme={theme} root={container}>
-              {children}
-            </ThemeProvider>
-          )}
+          {renderedChildren}
         </div>,
         document.body
       )
diff --git a/packages/wallet-widget/src/components/SequenceWalletProvider/SequenceWalletProvider.tsx b/packages/wallet-widget/src/components/SequenceWalletProvider/SequenceWalletProvider.tsx
index 75236d719..8b00228d2 100644
--- a/packages/wallet-widget/src/components/SequenceWalletProvider/SequenceWalletProvider.tsx
+++ b/packages/wallet-widget/src/components/SequenceWalletProvider/SequenceWalletProvider.tsx
@@ -8,7 +8,7 @@ import {
   useSocialLink,
   useTheme
 } from '@0xsequence/connect'
-import { Modal, Scroll } from '@0xsequence/design-system'
+import { Modal, Scroll, ThemeProvider } from '@0xsequence/design-system'
 import { AnimatePresence } from 'motion/react'
 import { useContext, useEffect, useRef, useState, type ReactNode } from 'react'
 import { useConnection } from 'wagmi'
@@ -112,40 +112,48 @@ export const WalletContent = ({ children }: SequenceWalletProviderProps) => {
         <SharedProvider>
           <ValueRegistryProvider>
             <NavigationHeaderContextProvider value={{ search, selectedTab, setSearch, setSelectedTab }}>
-              <ShadowRoot theme={theme} customCSS={customCSS}>
-                <AnimatePresence>
-                  {openWalletModal && !isConnectModalOpen && !isSocialLinkOpen && (
-                    <Modal
-                      contentProps={{
-                        className: 'border border-border-normal',
-                        style: {
-                          maxWidth: WALLET_WIDTH,
-                          height: WALLET_HEIGHT,
-                          ...getModalPositionCss(position),
-                          scrollbarColor: 'gray black',
-                          scrollbarWidth: 'thin'
-                        }
-                      }}
-                      scroll={false}
-                      isDismissible={navigation.location !== 'search'}
-                      onClose={() => setOpenWalletModal(false)}
-                    >
-                      <div
-                        className="flex flex-col"
-                        id="sequence-kit-wallet-content"
-                        ref={walletContentRef}
-                        style={{ height: `calc(${WALLET_HEIGHT} - 2px)` }}
-                        // -2 px because of the Modal border
-                      >
-                        <div>{getHeader(navigation)}</div>
-
-                        <div style={{ flex: 1, minHeight: 0 }}>
-                          {displayScrollbar ? <Scroll shadows={false}>{getContent(navigation)}</Scroll> : getContent(navigation)}
-                        </div>
-                      </div>
-                    </Modal>
-                  )}
-                </AnimatePresence>
+              <ShadowRoot customCSS={customCSS}>
+                {(container: HTMLDivElement) => (
+                  <ThemeProvider theme={theme} root={container}>
+                    <AnimatePresence>
+                      {openWalletModal && !isConnectModalOpen && !isSocialLinkOpen && (
+                        <Modal
+                          contentProps={{
+                            className: 'border border-border-normal',
+                            style: {
+                              maxWidth: WALLET_WIDTH,
+                              height: WALLET_HEIGHT,
+                              ...getModalPositionCss(position),
+                              scrollbarColor: 'gray black',
+                              scrollbarWidth: 'thin'
+                            }
+                          }}
+                          scroll={false}
+                          isDismissible={navigation.location !== 'search'}
+                          onClose={() => setOpenWalletModal(false)}
+                        >
+                          <div
+                            className="flex flex-col"
+                            id="sequence-kit-wallet-content"
+                            ref={walletContentRef}
+                            style={{ height: `calc(${WALLET_HEIGHT} - 2px)` }}
+                            // -2 px because of the Modal border
+                          >
+                            <div>{getHeader(navigation)}</div>
+
+                            <div style={{ flex: 1, minHeight: 0 }}>
+                              {displayScrollbar ? (
+                                <Scroll shadows={false}>{getContent(navigation)}</Scroll>
+                              ) : (
+                                getContent(navigation)
+                              )}
+                            </div>
+                          </div>
+                        </Modal>
+                      )}
+                    </AnimatePresence>
+                  </ThemeProvider>
+                )}
               </ShadowRoot>
               {children}
             </NavigationHeaderContextProvider>