diff --git a/landing/siwe.css b/landing/siwe.css
index a89fcda69..46e193a5b 100644
--- a/landing/siwe.css
+++ b/landing/siwe.css
@@ -1,79 +1,70 @@
 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;
 }
 
 div.connectedWalletInfo {
   width: 100%;
   display: flex;
   flex-direction: row;
 }
 
 div.connectedWalletInfo > div {
   width: 100%;
 }
 
 .walletDisplayText {
   display: flex;
   width: 100%;
   padding-bottom: 6px;
 }
 
 .walletDisplayText p {
   font-size: 16px;
   font-weight: bold;
 }
 
 .wrapper > p {
   padding-top: 16px;
   font-size: 15px;
 }
 
 .wrapper a {
   color: #2a5db0;
 }
 
 .button {
   margin-top: 20px;
   background: #6a20e3;
   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/walletconnect-hooks.js b/landing/walletconnect-hooks.js
index 3bd85f318..79d52bd50 100644
--- a/landing/walletconnect-hooks.js
+++ b/landing/walletconnect-hooks.js
@@ -1,119 +1,131 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 
+const walletConnectCSSOverride = `
+  div.wcm-overlay {
+    --wcm-background-border-radius: 0;
+    align-items: flex-start;
+    padding: 0;
+  }
+`;
+
 type WalletConnectModalUpdate =
   | { +state: 'closed' }
   | { +state: 'open', +height: number };
 function useMonitorForWalletConnectModal(
   callback: WalletConnectModalUpdate => mixed,
 ) {
   const [wcShadowRoot, setWCShadowRoot] = React.useState();
   const [wcResizableContainer, setWCResizableContainer] = React.useState();
 
   const newShadowRootAppeared = React.useCallback(mutationList => {
     for (const mutation of mutationList) {
       for (const addedNode of mutation.addedNodes) {
         if (
           addedNode instanceof HTMLElement &&
           addedNode.localName === 'wcm-modal' &&
           addedNode.shadowRoot
         ) {
           const { shadowRoot } = addedNode;
           // We actually are looking to track an element inside w3m-modal,
           // rather than w3m-modal itself. Normally we could pass subtree: true
           // to observer.observe, but this doesn't appear to work with a "shadow
           // root", so instead we implement a second-layer MutationObserver once
           // we see the shadow root.
           setWCShadowRoot(shadowRoot);
+          // We want to customize the style of the WalletConnect modal
+          const styleOverride = document.createElement('style');
+          styleOverride.textContent = walletConnectCSSOverride;
+          shadowRoot.appendChild(styleOverride);
         }
       }
     }
   }, []);
 
   React.useEffect(() => {
     const observer = new MutationObserver(newShadowRootAppeared);
     invariant(document.body, 'document.body should be set');
     observer.observe(document.body, { childList: true });
     return () => {
       observer.disconnect();
     };
   }, [newShadowRootAppeared]);
 
   const newModalAppeared = React.useCallback(mutationList => {
     // We pass subtree: true to the MutationObserver that calls this function.
     // This means we monitor for changes all through the subtree, but if a child
     // subtree is added, we only get the root of the subtree in addedNodes. As
     // such we need to recursively scan the subtree to try and find the node
     // that we're looking for.
     const nodesToInspect = new Set();
     const addNodesToInspect = node => {
       nodesToInspect.add(node);
       for (const childNode of node.childNodes) {
         addNodesToInspect(childNode);
       }
     };
     for (const mutation of mutationList) {
       for (const addedNode of mutation.addedNodes) {
         addNodesToInspect(addedNode);
       }
     }
     for (const node of nodesToInspect) {
       if (
         node instanceof HTMLElement &&
         node.localName === 'div' &&
         node.className === 'wcm-container'
       ) {
         setWCResizableContainer(node);
       }
     }
   }, []);
 
   React.useEffect(() => {
     if (!wcShadowRoot) {
       return undefined;
     }
 
     // We can actually skip the MutationObserver below if by the time the React
     // state of wcShadowRoot is set, the subtree has already appeared. We store
     // wcShadowRoot as React state so that we can properly "clean up" the
     // associated observer below in an effect, but it means we have to deal with
     // the associated delay in updated React state, which is unpredictable.
     const modal = wcShadowRoot.getElementById('wcm-modal');
     if (modal) {
       const container = wcShadowRoot.querySelector('div.wcm-container');
       if (container) {
         setWCResizableContainer(container);
         return undefined;
       }
     }
 
     const observer = new MutationObserver(newModalAppeared);
     observer.observe(wcShadowRoot, { childList: true, subtree: true });
     return () => {
       observer.disconnect();
     };
   }, [wcShadowRoot, newModalAppeared]);
 
   React.useEffect(() => {
     if (!wcResizableContainer) {
       return undefined;
     }
     const resizeObserver = new ResizeObserver(entries => {
       const lastEntry = entries[entries.length - 1];
       const { height } = lastEntry.contentRect;
       if (height) {
         callback({ state: 'open', height });
       } else {
         callback({ state: 'closed' });
       }
     });
     resizeObserver.observe(wcResizableContainer);
     return () => {
       resizeObserver.disconnect();
     };
   }, [wcResizableContainer, callback]);
 }
 
 export { useMonitorForWalletConnectModal };