diff --git a/web/account/connected-wallet-info.css b/web/account/connected-wallet-info.css
index 85a08925d..f12bbe74a 100644
--- a/web/account/connected-wallet-info.css
+++ b/web/account/connected-wallet-info.css
@@ -1,51 +1,53 @@
 div.container {
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
   padding: 10px 20px;
   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;
+  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;
-  outline: #6a20e3 solid 1px;
+  border: #6a20e3 solid 1px;
   box-shadow: 2px 4px 20px #6a20e333;
-  transition: background-color 0.25s, outline-color 0.25s ease,
-    box-shadow 0.25s ease;
+  transition: background-color 0.2s ease, border 0.2s ease, box-shadow 0.2s ease;
 }
 
 div.avatar {
   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;
 }
diff --git a/web/account/connected-wallet-info.react.js b/web/account/connected-wallet-info.react.js
index 926ff1c28..5d2d6e9aa 100644
--- a/web/account/connected-wallet-info.react.js
+++ b/web/account/connected-wallet-info.react.js
@@ -1,58 +1,70 @@
 // @flow
 
 import { emojiAvatarForAddress, useAccountModal } from '@rainbow-me/rainbowkit';
 import * as React from 'react';
-import { useAccount } from 'wagmi';
+import { useAccount, useEnsAvatar } from 'wagmi';
 
 import { useENSName } from 'lib/hooks/ens-cache.js';
 
 import SWMansionIcon from '../SWMansionIcon.react.js';
 import css from './connected-wallet-info.css';
 
 function shortenAddressToFitWidth(address: string): string {
   if (address.length < 22) {
     return address;
   }
   return `${address.slice(0, 10)}…${address.slice(-10)}`;
 }
 
 type RainbowKitEmojiAvatar = {
   +color: string,
   +emoji: string,
 };
 
 function ConnectedWalletInfo(): React.Node {
   const { address } = useAccount();
   const { openAccountModal } = useAccountModal();
   const potentiallyENSName = useENSName(address);
 
   const emojiAvatar: RainbowKitEmojiAvatar = React.useMemo(
     () => emojiAvatarForAddress(address),
     [address],
   );
 
   const emojiAvatarStyle = React.useMemo(
     () => ({ backgroundColor: emojiAvatar.color }),
     [emojiAvatar.color],
   );
 
+  const emojiAvatarView = React.useMemo(() => <p>{emojiAvatar.emoji}</p>, [
+    emojiAvatar.emoji,
+  ]);
+
+  const { data: ensAvatarURI } = useEnsAvatar({
+    addressOrName: potentiallyENSName,
+  });
+  const potentiallyENSAvatar = React.useMemo(
+    () => <img src={ensAvatarURI} height="34px" width="34px" />,
+    [ensAvatarURI],
+  );
+
   const onClick = React.useCallback(() => {
     openAccountModal && openAccountModal();
   }, [openAccountModal]);
 
   return (
     <div className={css.container} onClick={onClick} title={potentiallyENSName}>
       <div className={css.avatar} style={emojiAvatarStyle}>
-        <p>{emojiAvatar.emoji}</p>
+        {ensAvatarURI ? potentiallyENSAvatar : emojiAvatarView}
       </div>
       <div className={css.address}>
         <p>{shortenAddressToFitWidth(potentiallyENSName)}</p>
       </div>
       <div className={css.chevronDown}>
         <SWMansionIcon icon="chevron-down" size={18} />
       </div>
     </div>
   );
 }
 
 export default ConnectedWalletInfo;
diff --git a/web/account/log-in-form.css b/web/account/log-in-form.css
index 8e0ee3c02..860c93872 100644
--- a/web/account/log-in-form.css
+++ b/web/account/log-in-form.css
@@ -1,69 +1,69 @@
 div.modal_body {
   display: flex;
   flex-direction: column;
   justify-content: center;
   min-height: 324px;
   min-width: 360px;
   padding: 20px 20px;
   border-radius: 16px;
   background-color: #191723;
-  outline: #282537 solid 1px;
+  border: #282537 solid 1px;
 }
 
 div.modal_body h4 {
   color: white;
   font-family: sans-serif;
 }
 
 div.form_title {
   padding: 6px 6px 0 0;
   font-size: var(--s-font-14);
   font-weight: var(--bold);
   color: var(--fg);
 }
 
 div.form_content {
   margin-top: 4px;
   margin-bottom: 8px;
   font-family: var(--font-stack);
   color: var(--fg);
 }
 
 div.form_footer {
   display: flex;
   flex-direction: column;
   margin-top: 16px;
 }
 
 div.form_footer > button:disabled {
   min-height: 48px;
   opacity: 0.5;
 }
 
 div.modal_form_error {
   font-size: 14px;
   color: var(--error);
   font-style: italic;
   padding-left: 6px;
   align-self: center;
 }
 
 div.modal_body .input[type='text'],
 div.modal_body .input[type='password'] {
   background: #282537;
   border: 1px solid #211e2d;
   transition: border 0.35s ease;
   border-radius: 8px;
 }
 
 div.modal_body .input[type='text']::placeholder,
 div.modal_body .input[type='password']::placeholder {
   color: #8c889b;
 }
 
 div.modal_body .input[type='text']:focus,
 div.modal_body .input[type='password']:focus {
   outline: none;
   border: #6a20e399 solid 1px;
   transition: border 0.35s ease;
 }