diff --git a/app/api/teams/[teamId]/image/route.tsx b/app/api/teams/[teamId]/image/route.tsx
index 2834d98..08c7bf7 100644
--- a/app/api/teams/[teamId]/image/route.tsx
+++ b/app/api/teams/[teamId]/image/route.tsx
@@ -28,6 +28,13 @@ function amount(value: number): string {
   return new Intl.NumberFormat("en-US", { maximumFractionDigits: 0 }).format(value);
 }
 
+function weaponBackground(rarity: number | null): string {
+  if (rarity === 5) return "linear-gradient(90deg, #8a5a00 0%, #0f0800 100%)";
+  if (rarity === 4) return "linear-gradient(90deg, #a300b8 0%, #000000 100%)";
+  if (rarity === 3) return "linear-gradient(90deg, #00a0b5 0%, #000000 100%)";
+  return "#17383d";
+}
+
 function contentDisposition(teamName: string): string {
   const displayName = teamName.trim() || "team";
   const fallback = displayName
@@ -70,8 +77,15 @@ export async function GET(
   const seconds = Number(team.rotationSeconds);
   const dps = seconds > 0 ? total / seconds : 0;
   const fonts = await anuphanFonts;
-  const memberImages = await Promise.all(
-    team.members.map((member) => pngDataUrl(member.character.imageUrl)),
+  const memberAssets = await Promise.all(
+    team.members.map(async (member) => {
+      const [character, weapon, artifact] = await Promise.all([
+        pngDataUrl(member.character.imageUrl),
+        member.weapon ? pngDataUrl(member.weapon.imageUrl) : null,
+        member.artifact ? pngDataUrl(member.artifact.imageUrl) : null,
+      ]);
+      return { character, weapon, artifact };
+    }),
   );
 
   return new ImageResponse(
@@ -104,9 +118,9 @@ export async function GET(
           const percent = total > 0 ? (damage / total) * 100 : 0;
           return (
             <div key={member.position} style={{ display: "flex", alignItems: "center", gap: 14 }}>
-              {memberImages[index] ? (
+              {memberAssets[index].character ? (
                 <img
-                  src={memberImages[index]}
+                  src={memberAssets[index].character}
                   alt=""
                   width={78}
                   height={78}
@@ -117,9 +131,24 @@ export async function GET(
                   {member.character.name.slice(0, 1)}
                 </div>
               )}
+              <div style={{ display: "flex", gap: 6 }}>
+                {member.weapon && memberAssets[index].weapon ? (
+                  <div style={{ position: "relative", display: "flex", width: 50, height: 50, overflow: "hidden", borderRadius: 10, background: weaponBackground(member.weapon.rarity) }}>
+                    <img src={memberAssets[index].weapon} alt="" width={50} height={50} style={{ objectFit: "contain" }} />
+                    <div style={{ position: "absolute", top: 2, right: 2, display: "flex", borderRadius: 4, background: "#f4fbfa", color: "#06171b", padding: "1px 4px", fontSize: 11, fontWeight: 700 }}>
+                      R{member.refinement}
+                    </div>
+                  </div>
+                ) : null}
+                {member.artifact && memberAssets[index].artifact ? (
+                  <div style={{ display: "flex", width: 50, height: 50, overflow: "hidden", borderRadius: 10, background: "#17383d" }}>
+                    <img src={memberAssets[index].artifact} alt="" width={50} height={50} style={{ objectFit: "contain" }} />
+                  </div>
+                ) : null}
+              </div>
               <div style={{ display: "flex", flex: 1, flexDirection: "column", gap: 6 }}>
                 <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
-                  <div style={{ display: "flex", fontSize: 20, fontWeight: 600 }}>{member.character.name}</div>
+                  <div style={{ display: "flex", fontSize: 20, fontWeight: 600 }}>C{member.constellation} · {member.character.name}</div>
                   <div style={{ display: "flex", color: "#d9f6f2", fontSize: 18 }}>{amount(damage)}</div>
                 </div>
                 <div style={{ display: "flex", alignItems: "center", gap: 10 }}>