diff --git a/assets/js/app.ts b/assets/js/app.ts
index 0f0eb8dbe..d8d78a4fc 100644
--- a/assets/js/app.ts
+++ b/assets/js/app.ts
@@ -503,6 +503,17 @@ const Hooks = {
       }
     },
   },
+  AvatarImage: {
+    mounted() {
+      this.handleLoad = () => {
+        this.el.style.display = "";
+      };
+      this.el.addEventListener("load", this.handleLoad);
+    },
+    destroyed() {
+      this.el.removeEventListener("load", this.handleLoad);
+    },
+  },
 } satisfies Record<string, Partial<ViewHook> & Record<string, unknown>>;
 
 // Accessible focus handling
diff --git a/lib/algora_web/components/ui/avatar.ex b/lib/algora_web/components/ui/avatar.ex
index f0ae79a7c..e674a7ee6 100644
--- a/lib/algora_web/components/ui/avatar.ex
+++ b/lib/algora_web/components/ui/avatar.ex
@@ -18,14 +18,15 @@ defmodule AlgoraWeb.Components.UI.Avatar do
   attr :rest, :global
 
   def avatar_image(assigns) do
+    assigns = assign(assigns, id: "avatar-image-#{Algora.Util.random_string()}")
+
     ~H"""
     <img
+      id={@id}
       src={@src}
       class={classes(["aspect-square h-full w-full", @class])}
-      id={@src}
-      phx-update="ignore"
+      phx-hook="AvatarImage"
       style="display:none"
-      onload="this.style.display=''"
       {@rest}
     />
     """