diff --git a/app/api/guides/[guideId]/artifacts/image/route.tsx b/app/api/guides/[guideId]/artifacts/image/route.tsx
index 3144fa5..bea4e4e 100644
--- a/app/api/guides/[guideId]/artifacts/image/route.tsx
+++ b/app/api/guides/[guideId]/artifacts/image/route.tsx
@@ -1,4 +1,6 @@
 /* eslint-disable @next/next/no-img-element */
+import { join } from "node:path";
+
 import { ImageResponse } from "next/og";
 import sharp from "sharp";
 
@@ -53,6 +55,14 @@ async function pngDataUrl(url: string): Promise<string | null> {
   }
 }
 
+async function localPngDataUrl(fileName: string): Promise<string> {
+  const png = await sharp(join(process.cwd(), "public", "icon", fileName))
+    .resize(96, 96, { fit: "contain" })
+    .png()
+    .toBuffer();
+  return `data:image/png;base64,${png.toString("base64")}`;
+}
+
 export async function GET(
   _request: Request,
   context: RouteContext<"/api/guides/[guideId]/artifacts/image">,
@@ -61,7 +71,7 @@ export async function GET(
   const guide = await getPublicArtifactExport(guideId);
   if (!guide) return new Response("Guide not found", { status: 404 });
 
-  const [fonts, groupAssets] = await Promise.all([
+  const [fonts, groupAssets, statIconAssets] = await Promise.all([
     anuphanFonts,
     Promise.all(
       guide.groups.map((group) =>
@@ -73,6 +83,11 @@ export async function GET(
         ),
       ),
     ),
+    Promise.all([
+      localPngDataUrl("Icon_Sands_of_Eon.webp"),
+      localPngDataUrl("Icon_Goblet_of_Eonothem.webp"),
+      localPngDataUrl("Icon_Circlet_of_Logos.webp"),
+    ]),
   ]);
 
   const profile = guide.profile;
@@ -81,7 +96,7 @@ export async function GET(
     ? 60 + profile.targets.length * 30 + (profile.talents.length ? 58 : 0) + (profile.note ? Math.max(48, Math.ceil(profile.note.length / 58) * 24) : 0)
     : 0;
   const rightHeight = profile
-    ? 194 + (profile.substats.length ? 76 : 0) + (detailHeight > 60 ? detailHeight + 16 : 0) + 32
+    ? 242 + (profile.substats.length ? 76 : 0) + (detailHeight > 60 ? detailHeight + 16 : 0) + 32
     : 0;
   const height = Math.max(520, 190 + Math.max(leftHeight, rightHeight));
   const talents = normalizeTalentPriorities(profile?.talents ?? []);
@@ -162,11 +177,12 @@ export async function GET(
               </div>
               <div style={{ display: "flex" }}>
                 {[
-                  { label: "Sands", values: profile.sands },
-                  { label: "Goblet", values: profile.goblet },
-                  { label: "Circlet", values: profile.circlet },
+                  { label: "Sands", values: profile.sands, icon: statIconAssets[0] },
+                  { label: "Goblet", values: profile.goblet, icon: statIconAssets[1] },
+                  { label: "Circlet", values: profile.circlet, icon: statIconAssets[2] },
                 ].map((stat) => (
-                  <div key={stat.label} style={{ display: "flex", flex: 1, minHeight: 128, flexDirection: "column", alignItems: "center", gap: 10, borderRight: stat.label === "Circlet" ? "none" : "1px solid #34343d", padding: "16px 10px", textAlign: "center" }}>
+                  <div key={stat.label} style={{ display: "flex", flex: 1, minHeight: 176, flexDirection: "column", alignItems: "center", gap: 10, borderRight: stat.label === "Circlet" ? "none" : "1px solid #34343d", padding: "16px 10px", textAlign: "center" }}>
+                    <img src={stat.icon} alt="" width={48} height={48} style={{ objectFit: "contain" }} />
                     <div style={{ display: "flex", fontSize: 17, fontWeight: 700 }}>{stat.label}</div>
                     <div style={{ display: "flex", width: "100%", borderTop: "1px solid #34343d" }} />
                     <div style={{ display: "flex", fontSize: 14, lineHeight: 1.45 }}>
diff --git a/components/admin/guide-section-editor.tsx b/components/admin/guide-section-editor.tsx
index 61760cb..9fac8fa 100644
--- a/components/admin/guide-section-editor.tsx
+++ b/components/admin/guide-section-editor.tsx
@@ -29,6 +29,7 @@ import {
 } from "@/app/admin/actions";
 import { AutosaveStatus } from "@/components/admin/autosave-status";
 import { MediaUploader } from "@/components/admin/media-uploader";
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Button } from "@/components/ui/button";
 import {
@@ -348,7 +349,7 @@ function ConstellationEditor({ guide, initial, catalogConstellations }: EditorBa
     <Card>
       <CardHeader><CardTitle>Constellations</CardTitle><CardDescription>ชื่อ รายละเอียด และไอคอนมาจาก Lunaris อัตโนมัติ กรอกเฉพาะเปอร์เซ็นต์เทียบกับ C0 = 100%</CardDescription></CardHeader>
       <CardContent className="grid gap-4 lg:grid-cols-2">
-        {rows.map((row, index) => <Card key={row.level} size="sm"><CardHeader>{row.iconUrl ? <Image src={row.iconUrl} alt="" width={48} height={48} className="rounded-lg bg-muted" /> : null}<CardTitle>C{row.level} · {row.name}</CardTitle><CardDescription>{row.description}</CardDescription></CardHeader><CardContent className="flex items-end gap-3"><Field className="min-w-0 flex-1"><FieldLabel>Cumulative %</FieldLabel><Input type="number" min="0" step="0.01" value={row.cumulativePercent} onChange={(event) => setRows(rows.map((item, itemIndex) => itemIndex === index ? { ...item, cumulativePercent: event.target.value } : item))} /></Field><Toggle variant="outline" pressed={row.isGreat} onPressedChange={(isGreat) => setRows(rows.map((item, itemIndex) => itemIndex === index ? { ...item, isGreat } : item))} aria-label={`Mark C${row.level} percentage as great`} className="data-[state=on]:text-warning"><SparklesIcon data-icon="inline-start" />Great %</Toggle></CardContent></Card>)}
+        {rows.map((row, index) => <Card key={row.level} size="sm"><CardHeader>{row.iconUrl ? <Image src={row.iconUrl} alt="" width={48} height={48} className="rounded-lg bg-muted" /> : null}<CardTitle>C{row.level} · {row.name}</CardTitle><CardDescription>{row.description}</CardDescription></CardHeader><CardContent className="flex items-end gap-3"><Field className="min-w-0 flex-1"><FieldLabel>Cumulative %</FieldLabel><Input type="number" min="0" step="0.01" value={row.cumulativePercent} onChange={(event) => setRows(rows.map((item, itemIndex) => itemIndex === index ? { ...item, cumulativePercent: event.target.value } : item))} /></Field><Toggle variant="outline" pressed={row.isGreat} onPressedChange={(isGreat) => setRows(rows.map((item, itemIndex) => itemIndex === index ? { ...item, isGreat } : item))} aria-label={`Mark C${row.level} percentage as great`} className={cn(SELECTED_TOGGLE_CLASS, "data-[state=on]:text-warning")}><SparklesIcon data-icon="inline-start" />Great %</Toggle></CardContent></Card>)}
       </CardContent>
       <CardFooter className="justify-end"><AutosaveStatus state={autosave} /></CardFooter>
     </Card>
@@ -363,8 +364,34 @@ function TeamEditor({ guide, characters, weapons, artifacts, initial }: EditorBa
   return (
     <Card>
       <CardHeader><CardTitle>Team Calc</CardTitle><CardDescription>ใส่ความเสียหายของตัวละคร 4 ตัว ระบบจะแสดงสัดส่วนและ Total DPS และบันทึกอัตโนมัติ</CardDescription></CardHeader>
-      <CardContent className="flex flex-col gap-5">
-        {teams.map((team, teamIndex) => { const total = team.members.reduce((sum, member) => sum + (Number(member.damage) || 0), 0); const dps = total / (Number(team.rotationSeconds) || 1); return <Card key={teamIndex} size="sm"><CardHeader><CardTitle>Team {teamIndex + 1}</CardTitle><CardDescription>Damage {total.toLocaleString()} • DPS {dps.toFixed(0)}</CardDescription><CardAction><RowActions index={teamIndex} length={teams.length} move={(from, to) => setTeams(moveItem(teams, from, to))} remove={() => setTeams(teams.filter((_, index) => index !== teamIndex))} /></CardAction></CardHeader><CardContent><FieldGroup><Field><FieldLabel>ชื่อ Team</FieldLabel><Input value={team.title} onChange={(event) => setTeams(teams.map((item, index) => index === teamIndex ? { ...item, title: event.target.value } : item))} /></Field><div className="grid gap-4 md:grid-cols-2">{team.members.map((member, memberIndex) => { const character = characters.find((item) => item.key === member.characterKey); const compatibleWeapons = weapons.filter((weapon) => supportsWeaponType(character?.weaponType, weapon.weaponType)); return <Card key={memberIndex} size="sm"><CardHeader><CardTitle>ตัวละคร {memberIndex + 1}</CardTitle><CardDescription>{total ? `${((Number(member.damage) || 0) / total * 100).toFixed(2)}% ของ Team` : "0% ของ Team"}</CardDescription>{character ? <CardAction><Avatar size="lg"><AvatarImage src={character.imageUrl} alt={character.name} /><AvatarFallback>{character.name.slice(0, 2).toUpperCase()}</AvatarFallback></Avatar></CardAction> : null}</CardHeader><CardContent><FieldGroup><Field><FieldLabel>ตัวละคร</FieldLabel><CatalogPicker items={characters} value={member.characterKey} placeholder="ค้นหาชื่อตัวละคร…" onChange={(characterKey) => setTeams(teams.map((item, index) => index === teamIndex ? { ...item, members: item.members.map((candidate, inner) => inner === memberIndex ? { ...candidate, characterKey, weaponKey: null, artifactKey: null, constellation: 0, refinement: 1 } : candidate) } : item))} /></Field><Field><FieldLabel>Damage</FieldLabel><Input type="number" min="0" step="0.01" value={member.damage} onChange={(event) => setTeams(teams.map((item, index) => index === teamIndex ? { ...item, members: item.members.map((candidate, inner) => inner === memberIndex ? { ...candidate, damage: event.target.value } : candidate) } : item))} /></Field><Field><FieldLabel>Weapon</FieldLabel><CatalogPicker items={compatibleWeapons} value={member.weaponKey ?? ""} placeholder="ค้นหาอาวุธที่รองรับ…" rarityBackground onChange={(weaponKey) => setTeams(teams.map((item, index) => index === teamIndex ? { ...item, members: item.members.map((candidate, inner) => inner === memberIndex ? { ...candidate, weaponKey: weaponKey || null } : candidate) } : item))} /></Field><Field><FieldLabel>Refinement</FieldLabel><ToggleGroup className="flex-wrap justify-start" variant="outline" value={[`R${member.refinement}`]} onValueChange={(selected) => { const refinement = selected[0]; if (refinement) setTeams(teams.map((item, index) => index === teamIndex ? { ...item, members: item.members.map((candidate, inner) => inner === memberIndex ? { ...candidate, refinement: Number(refinement.slice(1)) } : candidate) } : item)); }}>{[1, 2, 3, 4, 5].map((refinement) => <ToggleGroupItem className={SELECTED_TOGGLE_CLASS} key={refinement} value={`R${refinement}`}>R{refinement}</ToggleGroupItem>)}</ToggleGroup></Field><Field><FieldLabel>Artifact set</FieldLabel><CatalogPicker items={artifacts} value={member.artifactKey ?? ""} placeholder="ค้นหาชุด Artifact…" rarityBackground onChange={(artifactKey) => setTeams(teams.map((item, index) => index === teamIndex ? { ...item, members: item.members.map((candidate, inner) => inner === memberIndex ? { ...candidate, artifactKey: artifactKey || null } : candidate) } : item))} /></Field><Field><FieldLabel>Constellation</FieldLabel><ToggleGroup className="flex-wrap justify-start" variant="outline" value={[`C${member.constellation}`]} onValueChange={(selected) => { const constellation = selected[0]; if (constellation) setTeams(teams.map((item, index) => index === teamIndex ? { ...item, members: item.members.map((candidate, inner) => inner === memberIndex ? { ...candidate, constellation: Number(constellation.slice(1)) } : candidate) } : item)); }}>{[0, 1, 2, 3, 4, 5, 6].map((constellation) => <ToggleGroupItem className={SELECTED_TOGGLE_CLASS} key={constellation} value={`C${constellation}`}>C{constellation}</ToggleGroupItem>)}</ToggleGroup></Field></FieldGroup></CardContent></Card>; })}</div><Field><FieldLabel>Rotation (seconds)</FieldLabel><Input type="number" min="0.01" step="0.01" value={team.rotationSeconds} onChange={(event) => setTeams(teams.map((item, index) => index === teamIndex ? { ...item, rotationSeconds: event.target.value } : item))} /></Field><Field><FieldLabel>Combo</FieldLabel><Textarea value={team.combo} onChange={(event) => setTeams(teams.map((item, index) => index === teamIndex ? { ...item, combo: event.target.value } : item))} /></Field></FieldGroup></CardContent></Card>; })}
+      <CardContent>
+        <Accordion multiple defaultValue={teams.length ? ["team-0"] : []} className="gap-3">
+          {teams.map((team, teamIndex) => {
+            const total = team.members.reduce((sum, member) => sum + (Number(member.damage) || 0), 0);
+            const dps = total / (Number(team.rotationSeconds) || 1);
+            return (
+              <AccordionItem key={teamIndex} value={`team-${teamIndex}`} className="rounded-xl border px-4">
+                <div className="flex items-center gap-2">
+                  <AccordionTrigger className="min-w-0 py-4 hover:no-underline">
+                    <span className="flex min-w-0 flex-col gap-1">
+                      <span className="font-semibold">{team.title || `Team ${teamIndex + 1}`}</span>
+                      <span className="text-xs font-normal text-muted-foreground">Damage {total.toLocaleString()} • DPS {dps.toFixed(0)}</span>
+                    </span>
+                  </AccordionTrigger>
+                  <RowActions index={teamIndex} length={teams.length} move={(from, to) => setTeams(moveItem(teams, from, to))} remove={() => setTeams(teams.filter((_, index) => index !== teamIndex))} />
+                </div>
+                <AccordionContent className="pb-4">
+                  <FieldGroup>
+                    <Field><FieldLabel>ชื่อ Team</FieldLabel><Input value={team.title} onChange={(event) => setTeams(teams.map((item, index) => index === teamIndex ? { ...item, title: event.target.value } : item))} /></Field>
+                    <div className="grid gap-4 md:grid-cols-2">{team.members.map((member, memberIndex) => { const character = characters.find((item) => item.key === member.characterKey); const compatibleWeapons = weapons.filter((weapon) => supportsWeaponType(character?.weaponType, weapon.weaponType)); return <Card key={memberIndex} size="sm"><CardHeader><CardTitle>ตัวละคร {memberIndex + 1}</CardTitle><CardDescription>{total ? `${((Number(member.damage) || 0) / total * 100).toFixed(2)}% ของ Team` : "0% ของ Team"}</CardDescription>{character ? <CardAction><Avatar size="lg"><AvatarImage src={character.imageUrl} alt={character.name} /><AvatarFallback>{character.name.slice(0, 2).toUpperCase()}</AvatarFallback></Avatar></CardAction> : null}</CardHeader><CardContent><FieldGroup><Field><FieldLabel>ตัวละคร</FieldLabel><CatalogPicker items={characters} value={member.characterKey} placeholder="ค้นหาชื่อตัวละคร…" onChange={(characterKey) => setTeams(teams.map((item, index) => index === teamIndex ? { ...item, members: item.members.map((candidate, inner) => inner === memberIndex ? { ...candidate, characterKey, weaponKey: null, artifactKey: null, constellation: 0, refinement: 1 } : candidate) } : item))} /></Field><Field><FieldLabel>Damage</FieldLabel><Input type="number" min="0" step="0.01" value={member.damage} onChange={(event) => setTeams(teams.map((item, index) => index === teamIndex ? { ...item, members: item.members.map((candidate, inner) => inner === memberIndex ? { ...candidate, damage: event.target.value } : candidate) } : item))} /></Field><Field><FieldLabel>Weapon</FieldLabel><CatalogPicker items={compatibleWeapons} value={member.weaponKey ?? ""} placeholder="ค้นหาอาวุธที่รองรับ…" rarityBackground onChange={(weaponKey) => setTeams(teams.map((item, index) => index === teamIndex ? { ...item, members: item.members.map((candidate, inner) => inner === memberIndex ? { ...candidate, weaponKey: weaponKey || null } : candidate) } : item))} /></Field><Field><FieldLabel>Refinement</FieldLabel><ToggleGroup className="flex-wrap justify-start" variant="outline" value={[`R${member.refinement}`]} onValueChange={(selected) => { const refinement = selected[0]; if (refinement) setTeams(teams.map((item, index) => index === teamIndex ? { ...item, members: item.members.map((candidate, inner) => inner === memberIndex ? { ...candidate, refinement: Number(refinement.slice(1)) } : candidate) } : item)); }}>{[1, 2, 3, 4, 5].map((refinement) => <ToggleGroupItem className={SELECTED_TOGGLE_CLASS} key={refinement} value={`R${refinement}`}>R{refinement}</ToggleGroupItem>)}</ToggleGroup></Field><Field><FieldLabel>Artifact set</FieldLabel><CatalogPicker items={artifacts} value={member.artifactKey ?? ""} placeholder="ค้นหาชุด Artifact…" rarityBackground onChange={(artifactKey) => setTeams(teams.map((item, index) => index === teamIndex ? { ...item, members: item.members.map((candidate, inner) => inner === memberIndex ? { ...candidate, artifactKey: artifactKey || null } : candidate) } : item))} /></Field><Field><FieldLabel>Constellation</FieldLabel><ToggleGroup className="flex-wrap justify-start" variant="outline" value={[`C${member.constellation}`]} onValueChange={(selected) => { const constellation = selected[0]; if (constellation) setTeams(teams.map((item, index) => index === teamIndex ? { ...item, members: item.members.map((candidate, inner) => inner === memberIndex ? { ...candidate, constellation: Number(constellation.slice(1)) } : candidate) } : item)); }}>{[0, 1, 2, 3, 4, 5, 6].map((constellation) => <ToggleGroupItem className={SELECTED_TOGGLE_CLASS} key={constellation} value={`C${constellation}`}>C{constellation}</ToggleGroupItem>)}</ToggleGroup></Field></FieldGroup></CardContent></Card>; })}</div>
+                    <Field><FieldLabel>Rotation (seconds)</FieldLabel><Input type="number" min="0.01" step="0.01" value={team.rotationSeconds} onChange={(event) => setTeams(teams.map((item, index) => index === teamIndex ? { ...item, rotationSeconds: event.target.value } : item))} /></Field>
+                    <Field><FieldLabel>Combo</FieldLabel><Textarea value={team.combo} onChange={(event) => setTeams(teams.map((item, index) => index === teamIndex ? { ...item, combo: event.target.value } : item))} /></Field>
+                  </FieldGroup>
+                </AccordionContent>
+              </AccordionItem>
+            );
+          })}
+        </Accordion>
       </CardContent>
       <CardFooter className="flex-wrap justify-between gap-3"><Button variant="outline" disabled={characters.length < 4} onClick={() => setTeams([...teams, { title: "", rotationSeconds: "20", combo: "", members: fallbackMembers }])}><PlusIcon data-icon="inline-start" />เพิ่ม Team</Button><AutosaveStatus state={autosave} /></CardFooter>
     </Card>
diff --git a/components/public/structured-guide.tsx b/components/public/structured-guide.tsx
index 658038a..5e9e96b 100644
--- a/components/public/structured-guide.tsx
+++ b/components/public/structured-guide.tsx
@@ -18,6 +18,7 @@ import { SiteHeader } from "@/components/public/site-header";
 import { ElementIcon } from "@/components/public/element-icon";
 import { LiveRefresh } from "@/components/live-refresh";
 import { rarityGradientClass, rarityTextClass } from "@/lib/catalog/rarity";
+import { isCustomTravelerKey } from "@/lib/catalog/travelers";
 import type { PublicGuide } from "@/lib/guides/queries";
 import { normalizeTalentPriorities, talentRelationSymbol } from "@/lib/guides/talents";
 import { cn } from "@/lib/utils";
@@ -517,12 +518,12 @@ function TeamSection({ guide }: { guide: PublicGuide }) {
                   {team.members.map((member) => (
                     <div key={member.position} className="min-w-0 text-center">
                       <div className="grid grid-cols-[minmax(0,1fr)_2.75rem] gap-2">
-                        <div className="relative aspect-square overflow-hidden rounded-lg bg-muted">
+                        <div className={cn("relative aspect-square overflow-hidden rounded-lg bg-muted", rarityGradientClass(isCustomTravelerKey(member.character.key) ? 5 : member.character.rarity))}>
                           <Image
                             src={member.character.imageUrl}
                             alt={member.character.name}
                             fill
-                            className="object-cover"
+                            className="object-contain"
                           />
                         </div>
                         <div className="flex flex-col gap-2">
diff --git a/lib/catalog/sync.ts b/lib/catalog/sync.ts
index 4f26cc0..3fdf4c6 100644
--- a/lib/catalog/sync.ts
+++ b/lib/catalog/sync.ts
@@ -173,7 +173,7 @@ export async function processCatalogSyncJob(jobId: string): Promise<void> {
         key: traveler.key,
         name: traveler.name,
         element: traveler.element,
-        rarity: 5,
+        rarity: traveler.rarity,
         weaponType: "WEAPON_SWORD_ONE_HAND",
         imageKey: `catalog/${version}/characters/${traveler.asset}`,
         elementIconKey: `catalog/${version}/elements/${traveler.element.toLowerCase()}.png`,
diff --git a/lib/catalog/travelers.test.ts b/lib/catalog/travelers.test.ts
index a1f45e4..771fba2 100644
--- a/lib/catalog/travelers.test.ts
+++ b/lib/catalog/travelers.test.ts
@@ -3,7 +3,7 @@ import { readFile } from "node:fs/promises";
 import { join } from "node:path";
 import { describe, expect, it } from "vitest";
 
-import { customTravelers, isUpstreamTraveler } from "@/lib/catalog/travelers";
+import { customTravelers, isCustomTravelerKey, isUpstreamTraveler } from "@/lib/catalog/travelers";
 
 describe("custom Traveler catalog", () => {
   it("blacklists every upstream Traveler spelling variant", () => {
@@ -24,4 +24,10 @@ describe("custom Traveler catalog", () => {
     }));
     expect(new Set(hashes).size).toBe(7);
   });
+
+  it("marks every custom Traveler as a five-star character", () => {
+    expect(customTravelers.every((traveler) => traveler.rarity === 5)).toBe(true);
+    expect(isCustomTravelerKey("traveler_hydro")).toBe(true);
+    expect(isCustomTravelerKey("traveler_unknown")).toBe(false);
+  });
 });
diff --git a/lib/catalog/travelers.ts b/lib/catalog/travelers.ts
index 21c853d..45a90ca 100644
--- a/lib/catalog/travelers.ts
+++ b/lib/catalog/travelers.ts
@@ -1,13 +1,17 @@
 export const customTravelers = [
-  { key: "traveler_pyro", name: "Traveler Pyro", element: "Pyro", detailKey: "10000005_PYRO", asset: "traveler_pyro.webp" },
-  { key: "traveler_hydro", name: "Traveler Hydro", element: "Hydro", detailKey: "10000005_HYDRO", asset: "traveler_hydro.webp" },
-  { key: "traveler_anemo", name: "Traveler Anemo", element: "Anemo", detailKey: "10000005_ANEMO", asset: "traveler_anemo.webp" },
-  { key: "traveler_geo", name: "Traveler Geo", element: "Geo", detailKey: "10000005_GEO", asset: "traveler_geo.webp" },
-  { key: "traveler_electro", name: "Traveler Electro", element: "Electro", detailKey: "10000005_ELECTRO", asset: "traveler_electro.webp" },
-  { key: "traveler_dendro", name: "Traveler Dendro", element: "Dendro", detailKey: "10000005_DENDRO", asset: "traveler_dendro.webp" },
-  { key: "traveler_cryo", name: "Traveler Cryo", element: "Cryo", detailKey: "10000005_CRYO", asset: "traveler_cyro.webp" },
+  { key: "traveler_pyro", name: "Traveler Pyro", element: "Pyro", rarity: 5, detailKey: "10000005_PYRO", asset: "traveler_pyro.webp" },
+  { key: "traveler_hydro", name: "Traveler Hydro", element: "Hydro", rarity: 5, detailKey: "10000005_HYDRO", asset: "traveler_hydro.webp" },
+  { key: "traveler_anemo", name: "Traveler Anemo", element: "Anemo", rarity: 5, detailKey: "10000005_ANEMO", asset: "traveler_anemo.webp" },
+  { key: "traveler_geo", name: "Traveler Geo", element: "Geo", rarity: 5, detailKey: "10000005_GEO", asset: "traveler_geo.webp" },
+  { key: "traveler_electro", name: "Traveler Electro", element: "Electro", rarity: 5, detailKey: "10000005_ELECTRO", asset: "traveler_electro.webp" },
+  { key: "traveler_dendro", name: "Traveler Dendro", element: "Dendro", rarity: 5, detailKey: "10000005_DENDRO", asset: "traveler_dendro.webp" },
+  { key: "traveler_cryo", name: "Traveler Cryo", element: "Cryo", rarity: 5, detailKey: "10000005_CRYO", asset: "traveler_cyro.webp" },
 ] as const;
 
+export function isCustomTravelerKey(key: string): boolean {
+  return customTravelers.some((traveler) => traveler.key === key);
+}
+
 export function isUpstreamTraveler(name: string): boolean {
   return name.trim().toLocaleLowerCase("en-US") === "traveler";
 }