diff --git a/components/account/AccountAvatar.vue b/components/account/AccountAvatar.vue
index 4d7fa57d..08c29fe4 100644
--- a/components/account/AccountAvatar.vue
+++ b/components/account/AccountAvatar.vue
@@ -4,6 +4,8 @@ import type { Account } from 'masto'
 defineProps<{
   account: Account
 }>()
+
+const loaded = $ref(false)
 </script>
 
 <template>
@@ -12,7 +14,9 @@ defineProps<{
     :src="account.avatar"
     :alt="account.username"
     loading="lazy"
-    rounded-full bg-gray:10
+    rounded-full
+    :class="loaded ? 'bg-gray' : 'bg-gray:10'"
     v-bind="$attrs"
+    @load="loaded = true"
   >
 </template>
diff --git a/components/account/AccountHeader.vue b/components/account/AccountHeader.vue
index 4ab160b6..5f21e7da 100644
--- a/components/account/AccountHeader.vue
+++ b/components/account/AccountHeader.vue
@@ -80,7 +80,7 @@ watchEffect(() => {
     <div p4 mt--17 flex flex-col gap-4>
       <div relative>
         <div flex="~ col gap-2 1">
-          <button w-30 h-30 rounded-full bg-gray border-4 border-bg-base z-2 @click="previewAvatar">
+          <button w-30 h-30 rounded-full border-4 border-bg-base z-2 @click="previewAvatar">
             <AccountAvatar :account="account" hover:opacity-90 transition-opacity />
           </button>
           <div flex flex-col>