diff --git a/web/account/connected-wallet-info.css b/web/account/connected-wallet-info.css
--- a/web/account/connected-wallet-info.css
+++ b/web/account/connected-wallet-info.css
@@ -7,6 +7,17 @@
   border-radius: 8px;
   background-color: #282537;
   outline: #302b42 solid 1px;
+  transition: background-color 0.25s ease, outline-color 0.25s ease,
+    box-shadow 0.25s ease;
+}
+
+div.container:hover {
+  cursor: pointer;
+  background-color: #302b42;
+  outline: #6a20e3 solid 1px;
+  box-shadow: 2px 4px 20px #6a20e333;
+  transition: background-color 0.25s, outline-color 0.25s ease,
+    box-shadow 0.25s ease;
 }
 
 div.avatar {
diff --git a/web/account/connected-wallet-info.react.js b/web/account/connected-wallet-info.react.js
--- a/web/account/connected-wallet-info.react.js
+++ b/web/account/connected-wallet-info.react.js
@@ -1,6 +1,6 @@
 // @flow
 
-import { emojiAvatarForAddress } from '@rainbow-me/rainbowkit';
+import { emojiAvatarForAddress, useAccountModal } from '@rainbow-me/rainbowkit';
 import * as React from 'react';
 import { useAccount } from 'wagmi';
 
@@ -16,6 +16,7 @@
 
 function ConnectedWalletInfo(): React.Node {
   const { address } = useAccount();
+  const { openAccountModal } = useAccountModal();
   const potentiallyENSName = useENSName(address);
 
   const emojiAvatar: RainbowKitEmojiAvatar = React.useMemo(
@@ -28,8 +29,12 @@
     [emojiAvatar.color],
   );
 
+  const onClick = React.useCallback(() => {
+    openAccountModal && openAccountModal();
+  }, [openAccountModal]);
+
   return (
-    <div className={css.container}>
+    <div className={css.container} onClick={onClick}>
       <div className={css.avatar} style={emojiAvatarStyle}>
         <p>{emojiAvatar.emoji}</p>
       </div>