diff --git a/src/app/mod/users/[id]/page.tsx b/src/app/mod/users/[id]/page.tsx
index de85abb292..8c97a5d154 100644
--- a/src/app/mod/users/[id]/page.tsx
+++ b/src/app/mod/users/[id]/page.tsx
@@ -2,11 +2,11 @@ import { eq } from "drizzle-orm";
 import { notFound } from "next/navigation";
 import { getTranslations } from "next-intl/server";
 import Link from "@/components/link";
+import { AvatarImage } from "@/components/shared/avatar-image";
 import { Badge } from "@/components/ui/badge";
 import { requireModPermission } from "@/lib/admin/guard";
 import { db, User } from "@/lib/db";
 import { formatDate } from "@/lib/format-date";
-import { avatarImageOnError, getAvatarUrl } from "@/lib/imager";
 import { PERMS } from "@/lib/permissions";
 
 export default async function ModUserDetailPage({
@@ -41,15 +41,12 @@ export default async function ModUserDetailPage({
 		<div className="space-y-6">
 			<div className="flex flex-wrap items-start justify-between gap-4">
 				<div className="flex items-center gap-4">
-					<img
-						src={getAvatarUrl(user.look, {
-							direction: 2,
-							headDirection: 2,
-						})}
+					<AvatarImage
+						figure={user.look}
+						options={{ size: "m", direction: 2, headDirection: 2 }}
 						alt=""
 						width={64}
 						height={110}
-						onError={avatarImageOnError}
 						className="rounded"
 					/>
 					<div>
diff --git a/src/app/mod/users/page.tsx b/src/app/mod/users/page.tsx
index b3dcb17c1b..752a89a907 100644
--- a/src/app/mod/users/page.tsx
+++ b/src/app/mod/users/page.tsx
@@ -2,11 +2,11 @@ import { and, asc, count, desc, eq, like, or, type SQL } from "drizzle-orm";
 import { getTranslations } from "next-intl/server";
 import { DataTable } from "@/components/admin/data-table";
 import Link from "@/components/link";
+import { AvatarImage } from "@/components/shared/avatar-image";
 import { Badge } from "@/components/ui/badge";
 import { requireModPermission } from "@/lib/admin/guard";
 import { calcPagination, parseListParams } from "@/lib/admin-helpers";
 import { db, User } from "@/lib/db";
-import { avatarImageOnError, getAvatarUrl } from "@/lib/imager";
 import { PERMS } from "@/lib/permissions";
 import { logServerError } from "@/lib/server-log";
 import type { DataTableColumn } from "@/types/common";
@@ -29,16 +29,12 @@ const columns: DataTableColumn<ModUserRow>[] = [
 		sortable: true,
 		render: (_, row) => (
 			<div className="flex items-center gap-2.5">
-				<img
-					src={getAvatarUrl(row.look, {
-						size: "m",
-						direction: 2,
-						headDirection: 2,
-					})}
+				<AvatarImage
+					figure={row.look}
+					options={{ size: "m", direction: 2, headDirection: 2 }}
 					alt=""
 					width={32}
 					height={32}
-					onError={avatarImageOnError}
 					className="rounded"
 				/>
 				<span className="font-medium">{row.username}</span>
diff --git a/src/components/shared/avatar-image.tsx b/src/components/shared/avatar-image.tsx
index adc97efe69..7868ee174c 100644
--- a/src/components/shared/avatar-image.tsx
+++ b/src/components/shared/avatar-image.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import {
 	type AvatarOptions,
 	avatarImageOnError,