diff --git a/app/api/teams/[teamId]/image/route.tsx b/app/api/teams/[teamId]/image/route.tsx
index ab2b8ab..f6d04da 100644
--- a/app/api/teams/[teamId]/image/route.tsx
+++ b/app/api/teams/[teamId]/image/route.tsx
@@ -4,6 +4,7 @@ import sharp from "sharp";
 
 import { elementBackgroundColor } from "@/lib/catalog/element";
 import { rarityGradient } from "@/lib/catalog/rarity";
+import { isCustomTravelerKey } from "@/lib/catalog/travelers";
 import { getCachedPublicTeamExport } from "@/lib/cache/public";
 import { imageContentDisposition } from "@/lib/guides/export-image";
 
@@ -103,17 +104,17 @@ export async function GET(
           const damage = Number(member.damage);
           const percent = total > 0 ? (damage / total) * 100 : 0;
           return (
-            <div key={member.position} style={{ display: "flex", alignItems: "center", gap: 14 }}>
+            <div key={member.position} style={{ display: "flex", alignItems: "center", gap: 14, borderRadius: 16, background: elementBackgroundColor(member.character.element), padding: 6 }}>
               {memberAssets[index].character ? (
                 <img
                   src={memberAssets[index].character}
                   alt=""
                   width={78}
                   height={78}
-                  style={{ borderRadius: 16, border: "2px solid #ffffff2a", background: elementBackgroundColor(member.character.element), objectFit: "cover" }}
+                  style={{ borderRadius: 16, border: "2px solid #ffffff2a", background: rarityGradient(isCustomTravelerKey(member.character.key) ? 5 : member.character.rarity), objectFit: "cover" }}
                 />
               ) : (
-                <div style={{ display: "flex", width: 78, height: 78, alignItems: "center", justifyContent: "center", borderRadius: 16, border: "2px solid #ffffff2a", background: elementBackgroundColor(member.character.element), color: "#b9b9c2", fontSize: 30 }}>
+                <div style={{ display: "flex", width: 78, height: 78, alignItems: "center", justifyContent: "center", borderRadius: 16, border: "2px solid #ffffff2a", background: rarityGradient(isCustomTravelerKey(member.character.key) ? 5 : member.character.rarity), color: "#b9b9c2", fontSize: 30 }}>
                   {member.character.name.slice(0, 1)}
                 </div>
               )}
diff --git a/components/public/team-search.tsx b/components/public/team-search.tsx
index 6fb4c96..767b831 100644
--- a/components/public/team-search.tsx
+++ b/components/public/team-search.tsx
@@ -11,6 +11,7 @@ import { Kbd } from "@/components/ui/kbd";
 import { Separator } from "@/components/ui/separator";
 import { elementBackgroundColor } from "@/lib/catalog/element";
 import { rarityGradientClass } from "@/lib/catalog/rarity";
+import { isCustomTravelerKey } from "@/lib/catalog/travelers";
 import type { PublicGuide } from "@/lib/guides/queries";
 import { cn } from "@/lib/utils";
 
@@ -75,11 +76,17 @@ export function TeamSearch({ teams }: { teams: PublicGuide["teams"] }) {
                 <CardContent className="flex flex-col gap-4">
                   <div className="grid grid-cols-4 gap-1 sm:gap-3">
                     {team.members.map((member) => (
-                      <div key={member.position} className="min-w-0 text-center">
+                      <div
+                        key={member.position}
+                        className="min-w-0 rounded-lg p-1 text-center sm:p-2"
+                        style={{ backgroundColor: elementBackgroundColor(member.character.element) }}
+                      >
                         <div className="grid grid-cols-3 gap-2">
                           <div
-                            className="relative col-span-2 row-span-2 min-h-0 overflow-hidden rounded-lg"
-                            style={{ backgroundColor: elementBackgroundColor(member.character.element) }}
+                            className={cn(
+                              "relative col-span-2 row-span-2 min-h-0 overflow-hidden rounded-lg bg-muted",
+                              rarityGradientClass(isCustomTravelerKey(member.character.key) ? 5 : member.character.rarity),
+                            )}
                           >
                             <Image
                               src={member.character.imageUrl}