diff --git a/landing/siwe.css b/landing/siwe.css
index a1dae4272..22292f9ee 100644
--- a/landing/siwe.css
+++ b/landing/siwe.css
@@ -1,63 +1,68 @@
 html,
 body {
   background: #242529 !important;
 }
 
 .wrapper {
   display: flex;
   flex-wrap: wrap;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   align-content: center;
   color: white;
   font-family: sans-serif;
   padding: 20px;
 }
-.walletDisplay {
+
+div.connectedWalletInfo {
+  width: 100%;
   display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 20px;
+  flex-direction: row;
 }
+
+div.connectedWalletInfo > div {
+  width: 100%;
+}
+
 .walletDisplayText {
   font-size: 24px;
   padding: 5px;
 }
 .wrapper > p {
   text-align: center;
   padding: 5px;
   font-size: 15px;
 }
 .button {
   margin-top: 20px;
   background: #7e57c2;
   border-radius: 4px;
   text-align: center;
   padding: 10px;
   width: 100%;
 }
 
 /* Classes from node_modules/@rainbow-me/rainbowkit/dist/components/index.css */
 body > div > :global(div.iekbcc0) {
   word-break: initial;
 }
 [data-rk] :global(._9pm4ki5) {
   animation: initial !important;
   -webkit-animation: initial !important;
 }
 body > div > :global(div.iekbcc0) > div {
   bottom: initial !important;
 }
 body > div > :global(div.iekbcc0) > div > div > div > div {
   border: 0 !important;
 }
 
 :global(div#walletconnect-wrapper) {
   word-break: initial;
   color: initial;
 }
 :global(div.walletconnect-modal__footer) {
   overflow: hidden;
   justify-content: flex-start;
 }
diff --git a/landing/siwe.react.js b/landing/siwe.react.js
index 54d7315ae..eb4e57d5f 100644
--- a/landing/siwe.react.js
+++ b/landing/siwe.react.js
@@ -1,201 +1,201 @@
 // @flow
 
 import {
   useConnectModal,
   RainbowKitProvider,
   darkTheme,
   useModalState,
-  ConnectButton,
   connectorsForWallets,
 } from '@rainbow-me/rainbowkit';
 import '@rainbow-me/rainbowkit/styles.css';
 import {
   injectedWallet,
   rainbowWallet,
   metaMaskWallet,
   walletConnectWallet,
   // eslint-disable-next-line import/extensions
 } from '@rainbow-me/rainbowkit/wallets';
 import invariant from 'invariant';
 import _merge from 'lodash/fp/merge.js';
 import * as React from 'react';
 import { useAccount, useSigner, WagmiConfig } from 'wagmi';
 
+import ConnectedWalletInfo from 'lib/components/connected-wallet-info.react.js';
 import type { SIWEWebViewMessage } from 'lib/types/siwe-types.js';
 import {
   getSIWEStatementForPublicKey,
   siweStatementWithoutPublicKey,
   siweMessageSigningExplanationStatements,
   createSIWEMessage,
 } from 'lib/utils/siwe-utils.js';
 import {
   WagmiENSCacheProvider,
   configureWagmiChains,
   createWagmiClient,
 } from 'lib/utils/wagmi-utils.js';
 
 import { SIWEContext } from './siwe-context.js';
 import css from './siwe.css';
 
 const { chains, provider } = configureWagmiChains(process.env.COMM_ALCHEMY_KEY);
 const connectors = connectorsForWallets([
   {
     groupName: 'Recommended',
     wallets: [
       injectedWallet({ chains }),
       rainbowWallet({ chains }),
       metaMaskWallet({ chains }),
       walletConnectWallet({ chains }),
     ],
   },
 ]);
 const wagmiClient = createWagmiClient({ connectors, provider });
 
 function postMessageToNativeWebView(message: SIWEWebViewMessage) {
   window.ReactNativeWebView?.postMessage?.(JSON.stringify(message));
 }
 
 async function signInWithEthereum(
   address: string,
   signer,
   nonce: string,
   statement: string,
 ) {
   invariant(nonce, 'nonce must be present in signInWithEthereum');
   const message = createSIWEMessage(address, statement, nonce);
   const signature = await signer.signMessage(message);
   postMessageToNativeWebView({
     type: 'siwe_success',
     address,
     message,
     signature,
   });
 }
 
 function SIWE(): React.Node {
   const { address } = useAccount();
   const { data: signer } = useSigner();
   const { siweNonce, siwePrimaryIdentityPublicKey } =
     React.useContext(SIWEContext);
   const onClick = React.useCallback(() => {
     invariant(siweNonce, 'nonce must be present during SIWE attempt');
     const statement = siwePrimaryIdentityPublicKey
       ? getSIWEStatementForPublicKey(siwePrimaryIdentityPublicKey)
       : siweStatementWithoutPublicKey;
     signInWithEthereum(address, signer, siweNonce, statement);
   }, [address, signer, siweNonce, siwePrimaryIdentityPublicKey]);
 
   const { openConnectModal } = useConnectModal();
   const hasNonce = siweNonce !== null && siweNonce !== undefined;
   React.useEffect(() => {
     if (hasNonce && openConnectModal) {
       openConnectModal();
     }
   }, [hasNonce, openConnectModal]);
 
   const prevConnectModalOpen = React.useRef(false);
   const modalState = useModalState();
   const closeTimeoutRef = React.useRef();
   const { connectModalOpen } = modalState;
   React.useEffect(() => {
     if (!connectModalOpen && prevConnectModalOpen.current && !signer) {
       closeTimeoutRef.current = setTimeout(
         () => postMessageToNativeWebView({ type: 'siwe_closed' }),
         50,
       );
     } else if (closeTimeoutRef.current) {
       clearTimeout(closeTimeoutRef.current);
       closeTimeoutRef.current = undefined;
     }
     prevConnectModalOpen.current = connectModalOpen;
   }, [connectModalOpen, signer]);
 
   const newModalAppeared = React.useCallback(mutationList => {
     for (const mutation of mutationList) {
       for (const addedNode of mutation.addedNodes) {
         if (
           addedNode instanceof HTMLElement &&
           addedNode.id === 'walletconnect-wrapper'
         ) {
           postMessageToNativeWebView({
             type: 'walletconnect_modal_update',
             state: 'open',
           });
         }
       }
       for (const addedNode of mutation.removedNodes) {
         if (
           addedNode instanceof HTMLElement &&
           addedNode.id === 'walletconnect-wrapper'
         ) {
           postMessageToNativeWebView({
             type: 'walletconnect_modal_update',
             state: 'closed',
           });
         }
       }
     }
   }, []);
 
   React.useEffect(() => {
     const observer = new MutationObserver(newModalAppeared);
     invariant(document.body, 'document.body should be set');
     observer.observe(document.body, { childList: true });
     return () => {
       observer.disconnect();
     };
   }, [newModalAppeared]);
 
   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.wrapper}>
-        <div className={css.walletDisplay}>
-          <span className={css.walletDisplayText}>Wallet Connected:</span>
-          <ConnectButton />
+        <span className={css.walletDisplayText}>Wallet Connected:</span>
+        <div className={css.connectedWalletInfo}>
+          <ConnectedWalletInfo />
         </div>
         <p>{siweMessageSigningExplanationStatements}</p>
         <p>
           By signing up, you agree to our{' '}
           <a href="https://comm.app/terms">Terms of Use</a> &{' '}
           <a href="https://comm.app/privacy">Privacy Policy</a>.
         </p>
         <div className={css.button} onClick={onClick}>
           Sign in using this wallet
         </div>
       </div>
     );
   }
 }
 
 function SIWEWrapper(): React.Node {
   const theme = React.useMemo(() => {
     return _merge(darkTheme())({
       radii: {
         modal: 0,
         modalMobile: 0,
       },
       colors: {
         modalBackdrop: '#242529',
       },
     });
   }, []);
   return (
     <WagmiConfig client={wagmiClient}>
       <WagmiENSCacheProvider>
         <RainbowKitProvider theme={theme} modalSize="compact" chains={chains}>
           <SIWE />
         </RainbowKitProvider>
       </WagmiENSCacheProvider>
     </WagmiConfig>
   );
 }
 
 export default SIWEWrapper;
diff --git a/lib/components/connected-wallet-info.css b/lib/components/connected-wallet-info.css
index f12bbe74a..7351e4d37 100644
--- a/lib/components/connected-wallet-info.css
+++ b/lib/components/connected-wallet-info.css
@@ -1,53 +1,54 @@
 div.container {
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
   padding: 10px 20px;
   border-radius: 8px;
   background-color: #282537;
   border: #302b42 solid 1px;
   transition: background-color 0.2s ease, border 0.2s ease, box-shadow 0.2s ease;
 }
 
 div.container:hover {
   cursor: pointer;
   background-color: #302b42;
   border: #6a20e3 solid 1px;
   box-shadow: 2px 4px 20px #6a20e333;
   transition: background-color 0.2s ease, border 0.2s ease, box-shadow 0.2s ease;
 }
 
 div.avatar {
+  box-sizing: content-box;
   display: flex;
   align-items: center;
   justify-content: center;
   height: 16px;
   width: 16px;
   padding: 8px;
   border-radius: 16px;
 }
 
 div.avatar img {
   border-radius: 18px;
 }
 
 div.address p {
   font-size: 18px;
 }
 
 div.chevronDown {
   display: flex;
   align-content: center;
   justify-content: center;
   color: white;
 }
 
 div p {
   padding-bottom: 0;
 }
 
 div.container p {
   padding-bottom: 0;
   font-weight: bold;
 }