diff --git a/landing/siwe.css b/landing/siwe.css
--- a/landing/siwe.css
+++ b/landing/siwe.css
@@ -46,12 +46,21 @@
 }
 
 .button {
+  all: unset;
+  color: white;
+  font-family: sans-serif;
   margin-top: 20px;
   background: #6a20e3;
   border-radius: 4px;
   text-align: center;
   padding: 10px;
   width: 100%;
+  transition: 150ms;
+}
+
+.disabled {
+  background-color: var(--black-80);
+  color: var(--black-60);
 }
 
 /* Classes from node_modules/@rainbow-me/rainbowkit/dist/components/index.css */
diff --git a/landing/siwe.react.js b/landing/siwe.react.js
--- a/landing/siwe.react.js
+++ b/landing/siwe.react.js
@@ -7,6 +7,7 @@
 } from '@rainbow-me/rainbowkit';
 import '@rainbow-me/rainbowkit/styles.css';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import classnames from 'classnames';
 import invariant from 'invariant';
 import _merge from 'lodash/fp/merge.js';
 import * as React from 'react';
@@ -79,24 +80,31 @@
     siweMessageIssuedAt,
   } = React.useContext(SIWEContext);
 
-  const onClick = React.useCallback(() => {
+  const [inProgress, setInProgress] = React.useState(false);
+
+  const onClick = React.useCallback(async () => {
     invariant(siweNonce, 'nonce must be present during SIWE attempt');
     invariant(siweMessageType, 'message type must be set during SIWE attempt');
     invariant(
       siwePrimaryIdentityPublicKey,
       'primaryIdentityPublicKey must be present during SIWE attempt',
     );
-    const statement = getSIWEStatementForPublicKey(
-      siwePrimaryIdentityPublicKey,
-      siweMessageType,
-    );
-    void signInWithEthereum(
-      address,
-      signer,
-      siweNonce,
-      statement,
-      siweMessageIssuedAt,
-    );
+    try {
+      setInProgress(true);
+      const statement = getSIWEStatementForPublicKey(
+        siwePrimaryIdentityPublicKey,
+        siweMessageType,
+      );
+      await signInWithEthereum(
+        address,
+        signer,
+        siweNonce,
+        statement,
+        siweMessageIssuedAt,
+      );
+    } finally {
+      setInProgress(false);
+    }
   }, [
     address,
     signer,
@@ -186,6 +194,11 @@
       );
     }
 
+    const buttonClasses = classnames({
+      [css.button]: true,
+      [css.disabled]: inProgress,
+    });
+
     return (
       <div className={css.wrapper}>
         <span className={css.walletDisplayText}>
@@ -196,9 +209,13 @@
         </div>
         <p>{explanationStatement}</p>
         {termsOfUseAndPolicyInfo}
-        <div className={css.button} onClick={onClick}>
+        <button
+          className={buttonClasses}
+          onClick={onClick}
+          disabled={inProgress}
+        >
           {buttonStatement}
-        </div>
+        </button>
       </div>
     );
   }