diff --git a/web/bun.lockb b/web/bun.lockb
index 120c913d..d5338f3e 100755
Binary files a/web/bun.lockb and b/web/bun.lockb differ
diff --git a/web/components/ImageFallback.tsx b/web/components/ImageFallback.tsx
index f31e65f4..9e449b9e 100644
--- a/web/components/ImageFallback.tsx
+++ b/web/components/ImageFallback.tsx
@@ -1,29 +1,23 @@
 "use client";
-
-import { useEffect, useState } from "react";
-
 type Props = {
   url?: string;
   fallback: React.ReactElement;
   width: string;
   height: string;
-  alt: string;
 };
 
 // https://medium.com/@abhishekmicosoft/handling-img-fallback-307653b2f30
-export function ImageFallback({ width, height, url, fallback, alt }: Props) {
-  const [ok, setOK] = useState<boolean>(true);
-  useEffect(() => {
-    url;
-    setOK(true);
-  }, [url]);
+export function ImageFallback({ width, height, url }: Props) {
   const URL = url?.startsWith("/")
     ? `${process.env.NEXT_PUBLIC_API_ENDPOINT}${url}`
     : url;
 
-  return ok ? (
-    <img
-      src={URL}
+  return (
+    <object
+      data={URL}
+      type="image/webp"
+      width={width} // there probably prevent style shaking
+      height={height}
       style={{
         width,
         height,
@@ -31,13 +25,14 @@ export function ImageFallback({ width, height, url, fallback, alt }: Props) {
         borderRadius: "50%",
         pointerEvents: "none",
       }}
-      onError={() => {
-        console.log("failed to fetch image data of:", URL);
-        setOK(false);
-      }}
-      alt={alt}
-    />
-  ) : (
-    <>{fallback}</>
+    >
+      <img
+        src="/avatar.svg"
+        width={width}
+        height={height}
+        style={{ width, height }}
+        alt=""
+      />
+    </object>
   );
 }
diff --git a/web/components/human/WithFallback.tsx b/web/components/human/WithFallback.tsx
index 2e2f92a9..f9d3981e 100644
--- a/web/components/human/WithFallback.tsx
+++ b/web/components/human/WithFallback.tsx
@@ -18,7 +18,6 @@ export function AvatarWithFallback({ width, height, url }: Props) {
           sx={{ width: `${width}`, height: `${height}`, objectFit: "cover" }}
         />
       }
-      alt=""
     />
   );
 }
diff --git a/web/public/avatar.svg b/web/public/avatar.svg
new file mode 100755
index 00000000..ac3aa6fe
--- /dev/null
+++ b/web/public/avatar.svg
@@ -0,0 +1,6 @@
+<!--
+Source: https://www.veryicon.com/icons/miscellaneous/cust-background-icon/default-avatar-3.html
+Author: zuozuozuozuo
+License: Free for personal and commercial purpose.
+-->
+<svg class="svg-icon" style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M512 0C229.236338 0 0 229.236338 0 512s229.236338 512 512 512 512-229.224912 512-512S794.775088 0 512 0z m-6.443844 190.801776c94.681097 0 171.710173 75.886551 171.710173 169.185192s-77.029076 169.208042-171.710173 169.208042-171.698748-75.909401-171.698749-169.185191S410.886484 190.801776 505.556156 190.801776zM793.141276 771.638944c0 61.536429-100.473702 61.536429-216.817084 61.536429H447.664383c-121.107714 0-216.794234 0-216.794234-61.536429v-12.670609c0-117.680137 97.240354-213.48091 216.794234-213.480909h128.659809c119.553879 0 216.817084 95.777922 216.817084 213.480909z" fill="#e5e5e5" /><path d="M576.324192 545.487426H447.664383c-119.553879 0-216.794234 95.755071-216.794234 213.480909v12.670609c0 61.536429 95.68652 61.536429 216.794234 61.536429h128.659809c116.343383 0 216.817084 0 216.817084-61.536429v-12.670609c0-117.702988-97.263205-213.48091-216.817084-213.480909zM505.556156 529.19501c94.681097 0 171.710173-75.875126 171.710173-169.185191S600.237253 190.801776 505.556156 190.801776s-171.698748 75.932252-171.698749 169.208043 77.029076 169.185192 171.698749 169.185191z" fill="#ffffff" /></svg>