diff --git a/landing/siwe.css b/landing/siwe.css
index 4941af8c4..f13542643 100644
--- a/landing/siwe.css
+++ b/landing/siwe.css
@@ -1,41 +1,32 @@
-.wrapper {
-  display: flex;
-  flex-wrap: wrap;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  align-content: center;
-  padding-top: 20px;
-  padding-bottom: 50px;
-}
-
-.spacer {
-  height: 10px;
-  width: 10px;
+html,
+body {
+  background: #242529 !important;
 }
 
 .button {
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   align-content: center;
   background: #7e57c2;
   box-shadow: -12px 20px 50px rgba(126, 87, 194, 0.5);
   border-color: white;
   border-width: 2px;
   border-radius: 15px;
   text-transform: uppercase;
   padding: 10px;
   width: 241px;
 }
 @media screen and (max-width: 400px) {
   .button {
     width: 140px;
   }
 }
 
-.h1 {
-  text-align: center;
-  margin-bottom: 20px;
+body > div > :global(div.iekbcc0) > div {
+  bottom: initial !important;
+}
+body > div > :global(div.iekbcc0) > div > div > div > div {
+  border: 0 !important;
 }
diff --git a/landing/siwe.react.js b/landing/siwe.react.js
index 833b6fea5..1b1f98fca 100644
--- a/landing/siwe.react.js
+++ b/landing/siwe.react.js
@@ -1,115 +1,131 @@
 // @flow
 
 import {
-  ConnectButton,
+  useConnectModal,
   getDefaultWallets,
   RainbowKitProvider,
+  darkTheme,
 } from '@rainbow-me/rainbowkit';
 import invariant from 'invariant';
+import _merge from 'lodash/fp/merge';
 import * as React from 'react';
 import { SiweMessage } from 'siwe';
 import '@rainbow-me/rainbowkit/dist/index.css';
 import {
   useAccount,
   useSigner,
   chain,
   configureChains,
   createClient,
   WagmiConfig,
 } from 'wagmi';
 import { publicProvider } from 'wagmi/providers/public';
 
 import { SIWENonceContext } from './siwe-nonce-context.js';
 import css from './siwe.css';
 
 // details can be found https://wagmi.sh/docs/providers/configuring-chains
 const { chains, provider } = configureChains(
   [chain.mainnet],
   [publicProvider()],
 );
 
 const { connectors } = getDefaultWallets({
   appName: 'comm',
   chains,
 });
 
 const wagmiClient = createClient({
   autoConnect: true,
   connectors,
   provider,
 });
 
 function createSiweMessage(address: string, statement: string, nonce: string) {
   invariant(nonce, 'nonce must be present in createSiweMessage');
   const domain = window.location.host;
   const origin = window.location.origin;
   const message = new SiweMessage({
     domain,
     address,
     statement,
     uri: origin,
     version: '1',
     chainId: '1',
     nonce,
   });
   return message.prepareMessage();
 }
 
 async function signInWithEthereum(address: string, signer, nonce: string) {
   invariant(nonce, 'nonce must be present in signInWithEthereum');
   const message = createSiweMessage(
     address,
     'By continuing, I accept the Comm Terms of Service: https://comm.app/terms',
     nonce,
   );
   const signature = await signer.signMessage(message);
   const messageToPost = JSON.stringify({ address, message, signature });
   window.ReactNativeWebView?.postMessage?.(messageToPost);
   return signature;
 }
 
 function SIWE(): React.Node {
   const { address } = useAccount();
   const { data: signer } = useSigner();
   const { siweNonce } = React.useContext(SIWENonceContext);
   const onClick = React.useCallback(() => {
     invariant(siweNonce, 'nonce must be present during SIWE attempt');
     signInWithEthereum(address, signer, siweNonce);
   }, [address, signer, siweNonce]);
 
-  if (siweNonce === null || siweNonce === undefined) {
+  const { openConnectModal } = useConnectModal();
+  const hasNonce = siweNonce !== null && siweNonce !== undefined;
+  React.useEffect(() => {
+    if (hasNonce) {
+      openConnectModal();
+    }
+  }, [hasNonce, openConnectModal]);
+
+  if (!hasNonce) {
     return (
       <div className={css.wrapper}>
         <h1 className={css.h1}>Unable to proceed: nonce not found.</h1>
       </div>
     );
+  } else if (!signer) {
+    return null;
+  } else {
+    return (
+      <div className={css.button} onClick={onClick}>
+        <img src="images/ethereum_icon.svg" style={ethIconStyle} />
+        sign in
+      </div>
+    );
   }
-
-  const SignInButton = !signer ? null : (
-    <div className={css.button} onClick={onClick}>
-      <img src="images/ethereum_icon.svg" style={ethIconStyle} />
-      sign in
-    </div>
-  );
-  return (
-    <div className={css.wrapper}>
-      <h1 className={css.h1}>SIWE</h1>
-      <ConnectButton />
-      <div className={css.spacer} />
-      {SignInButton}
-    </div>
-  );
 }
+
 function SIWEWrapper(): React.Node {
+  const theme = React.useMemo(() => {
+    return _merge(darkTheme())({
+      radii: {
+        modal: 0,
+        modalMobile: 0,
+      },
+      colors: {
+        modalBackdrop: '#242529',
+      },
+    });
+  }, []);
   return (
     <WagmiConfig client={wagmiClient}>
-      <RainbowKitProvider chains={chains}>
+      <RainbowKitProvider theme={theme} modalSize="compact" chains={chains}>
         <SIWE />
       </RainbowKitProvider>
     </WagmiConfig>
   );
 }
 
 const ethIconStyle = { height: 25, paddingRight: 10 };
 
 export default SIWEWrapper;