diff --git a/src/components/account-info.css b/src/components/account-info.css
index ad10b696..526059b1 100644
--- a/src/components/account-info.css
+++ b/src/components/account-info.css
@@ -38,6 +38,11 @@
   margin-bottom: -44px;
   user-select: none;
   -webkit-user-drag: none;
+  opacity: 0;
+  transition: opacity 0.3s ease-out;
+}
+.account-container .header-banner.loaded {
+  opacity: 1;
 }
 .sheet .account-container .header-banner {
   border-top-left-radius: 16px;
diff --git a/src/components/account-info.jsx b/src/components/account-info.jsx
index 1bbf00f7..91fd45af 100644
--- a/src/components/account-info.jsx
+++ b/src/components/account-info.jsx
@@ -186,6 +186,7 @@ function AccountInfo({
                 }}
                 crossOrigin="anonymous"
                 onLoad={(e) => {
+                  e.target.classList.add('loaded');
                   try {
                     // Get color from four corners of image
                     const canvas = document.createElement('canvas');