diff --git a/app/api/guides/[guideId]/artifacts/image/route.tsx b/app/api/guides/[guideId]/artifacts/image/route.tsx
index 3f0d342..4b090af 100644
--- a/app/api/guides/[guideId]/artifacts/image/route.tsx
+++ b/app/api/guides/[guideId]/artifacts/image/route.tsx
@@ -8,8 +8,8 @@ import { rarityGradient } from "@/lib/catalog/rarity";
 import { artifactTierCount } from "@/lib/guides/artifacts";
 import { getCachedPublicArtifactExport } from "@/lib/cache/public";
 import { imageContentDisposition } from "@/lib/guides/export-image";
-import { normalizeTargetStat, statPriorityColor, targetStatIconName, targetStatOptions } from "@/lib/guides/stats";
-import { normalizeTalentPriorities, talentTypeLabel } from "@/lib/guides/talents";
+import { normalizeTargetStat, recommendedStatIconName, statPriorityColor, targetStatIconName, targetStatOptions } from "@/lib/guides/stats";
+import { normalizeTalentPriorities, talentRelationSymbol, talentTypeLabel } from "@/lib/guides/talents";
 
 const anuphanFonts = Promise.all(
   [
@@ -118,13 +118,21 @@ export async function GET(
   ]);
 
   const profile = guide.profile;
+  const recommendedStatAsset = (value: string) => {
+    const iconName = recommendedStatIconName(value);
+    const iconIndex = targetStatOptions.findIndex((stat) => targetStatIconName(stat) === iconName);
+    return iconIndex >= 0 ? targetStatAssets[iconIndex] : null;
+  };
   const groupRowHeights = guide.groups.map((group) => group.rows.map((row) => Math.max(76, 76 + (row.note ? Math.ceil(row.note.length / 58) * 22 : 0))));
   const tierListHeight = guide.groups.reduce((sum, _group, groupIndex) => sum + 68 + groupRowHeights[groupIndex].reduce((groupSum, rowHeight) => groupSum + rowHeight, 0), 0) + Math.max(0, guide.groups.length - 1) * 16;
   const detailHeight = profile
     ? 60 + profile.targets.length * 40 + (profile.talents.length ? 82 : 0) + (profile.note ? Math.max(48, Math.ceil(profile.note.length / 58) * 24) : 0)
     : 0;
+  const mainStatExtraHeight = profile
+    ? Math.max(0, Math.max(profile.sands.length, profile.goblet.length, profile.circlet.length) - 2) * 24
+    : 0;
   const profileHeight = profile
-    ? 242 + (profile.substats.length ? 92 + profile.substats.length * 18 : 0)
+    ? 242 + mainStatExtraHeight + (profile.substats.length ? 92 + profile.substats.length * 18 : 0)
     : 0;
   const leftHeight = tierListHeight + (profile ? profileHeight + 16 : 0);
   const rightHeight = detailHeight > 60 ? detailHeight : 0;
@@ -219,7 +227,7 @@ export async function GET(
                     <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", flexDirection: "column", alignItems: "center", gap: 4, fontSize: 14, lineHeight: 1.45 }}>
-                      {stat.values.length ? stat.values.map((value, index) => <span key={`${value}-${index}`} style={{ color: statPriorityColor(index), whiteSpace: "normal", wordBreak: "break-word" }}>{statLabel(value)}</span>) : "—"}
+                      {stat.values.length ? stat.values.map((value, index) => <span key={`${value}-${index}`} style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 5, color: statPriorityColor(index), whiteSpace: "normal", wordBreak: "break-word" }}>{recommendedStatAsset(value) ? <img src={recommendedStatAsset(value)!} alt="" width={18} height={18} style={{ objectFit: "contain" }} /> : null}{statLabel(value)}</span>) : "—"}
                     </div>
                   </div>
                 ))}
@@ -229,9 +237,9 @@ export async function GET(
 
           {profile?.substats.length ? (
             <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 4, border: "1px solid #34343d", borderRadius: 14, background: "#1d1d25", padding: "16px", fontSize: 14, textAlign: "center" }}>
-              <strong>ลำดับค่าสถานะ:</strong>
+              <strong>ออฟรอง</strong>
               <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 2 }}>
-                {profile.substats.map((stat, index) => <span key={`${stat}-${index}`} style={{ color: statPriorityColor(index) }}>{statLabel(stat)}</span>)}
+                {profile.substats.map((stat, index) => <span key={`${stat}-${index}`} style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 5, color: statPriorityColor(index) }}>{recommendedStatAsset(stat) ? <img src={recommendedStatAsset(stat)!} alt="" width={18} height={18} style={{ objectFit: "contain" }} /> : null}{statLabel(stat)}</span>)}
               </div>
             </div>
           ) : null}
@@ -248,7 +256,7 @@ export async function GET(
                       const iconIndex = targetStatOptions.findIndex((stat) => stat === normalizeTargetStat(target.stat));
                       return (
                       <div key={`${target.stat}-${target.value}`} style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12, borderRadius: 6, background: index % 2 === 0 ? "#34343d" : "#272730", padding: "5px 8px", fontSize: 15 }}>
-                        <span style={{ display: "flex", alignItems: "center", gap: 8 }}>{iconIndex >= 0 ? <img src={targetStatAssets[iconIndex]} alt="" width={28} height={28} style={{ objectFit: "contain" }} /> : null}{normalizeTargetStat(target.stat) ?? target.stat}</span><strong>{target.value}</strong>
+                        <span style={{ display: "flex", alignItems: "center", gap: 8 }}>{iconIndex >= 0 ? <img src={targetStatAssets[iconIndex]} alt="" width={14} height={14} style={{ objectFit: "contain" }} /> : null}{normalizeTargetStat(target.stat) ?? target.stat}</span><strong>{target.value}</strong>
                       </div>
                       );
                     })}
@@ -265,7 +273,7 @@ export async function GET(
                             <span>{talent.type}{talent.level ? ` เลเวล ${talent.level}+` : ""}</span>
                             <span style={{ color: "#b9b9c2", fontSize: 13, fontWeight: 400 }}>{talentTypeLabel(talent.type)}</span>
                           </span>
-                          {index < talents.length - 1 ? <span>{talent.relationToNext === "gte" ? ">=" : ">"}</span> : null}
+                          {index < talents.length - 1 ? <span>{talentRelationSymbol(talent.relationToNext)}</span> : null}
                         </div>
                       ))}
                     </div>
diff --git a/components/admin/guide-overview-form.tsx b/components/admin/guide-overview-form.tsx
index 3a6f3b2..93069e2 100644
--- a/components/admin/guide-overview-form.tsx
+++ b/components/admin/guide-overview-form.tsx
@@ -25,5 +25,5 @@ export function GuideOverviewForm({ guide }: { guide: { id: string; version: num
     initialVersion: guide.version,
     persist: (next, expectedVersion) => saveGuideOverview(guide.id, { ...next, expectedVersion }),
   });
-  return <Card><CardHeader><CardTitle>Overview</CardTitle><CardDescription>ภาพและข้อความนี้แสดงบนหน้าแรกและส่วนแนะนำของ Guide</CardDescription></CardHeader><CardContent><FieldGroup><Field><FieldLabel>Guide Image</FieldLabel><div className="relative aspect-square max-w-md overflow-hidden rounded-lg border"><Image src={cover.url} alt={`Guide ${guide.name}`} fill className="object-cover" /></div><MediaUploader onReady={(asset) => setCover(asset)} /></Field><Field><FieldLabel htmlFor="guide-overview">Overview</FieldLabel><Textarea id="guide-overview" value={overview} maxLength={500} onChange={(event) => setOverview(event.target.value)} /><FieldDescription>{overview.length}/500 ตัวอักษร</FieldDescription></Field></FieldGroup></CardContent><CardFooter className="justify-end"><AutosaveStatus state={autosave} issues={incompleteIssues} /></CardFooter></Card>;
+  return <Card><CardHeader><CardTitle>Overview</CardTitle><CardDescription>ภาพและข้อความนี้แสดงบนหน้าแรกและส่วนแนะนำของ Guide</CardDescription></CardHeader><CardContent><FieldGroup><Field><FieldLabel>Guide Image</FieldLabel><div className="relative mx-auto aspect-square w-full max-w-md overflow-hidden rounded-lg border"><Image src={cover.url} alt={`Guide ${guide.name}`} fill className="object-cover" /></div><MediaUploader onReady={(asset) => setCover(asset)} /></Field><Field><FieldLabel htmlFor="guide-overview">Overview</FieldLabel><Textarea id="guide-overview" value={overview} maxLength={500} onChange={(event) => setOverview(event.target.value)} /><FieldDescription>{overview.length}/500 ตัวอักษร</FieldDescription></Field></FieldGroup></CardContent><CardFooter className="justify-end"><AutosaveStatus state={autosave} issues={incompleteIssues} /></CardFooter></Card>;
 }
diff --git a/components/admin/guide-section-editor.tsx b/components/admin/guide-section-editor.tsx
index 7cc25a4..936fe87 100644
--- a/components/admin/guide-section-editor.tsx
+++ b/components/admin/guide-section-editor.tsx
@@ -28,6 +28,7 @@ import {
 } from "@dnd-kit/core";
 import {
   arrayMove,
+  horizontalListSortingStrategy,
   SortableContext,
   sortableKeyboardCoordinates,
   useSortable,
@@ -212,12 +213,10 @@ function TalentLevelPicker({ value, onChange }: { value?: string; onChange: (val
 
 function SortableTalentCard({
   talent,
-  index,
   catalogTalent,
   onLevelChange,
 }: {
   talent: TalentPriority;
-  index: number;
   catalogTalent?: CatalogTalent;
   onLevelChange: (level?: string) => void;
 }) {
@@ -231,7 +230,7 @@ function SortableTalentCard({
       <Card size="sm" className="h-full">
         <CardHeader className="flex items-center gap-2">
           {catalogTalent?.iconUrl ? <Image src={catalogTalent.iconUrl} alt="" width={40} height={40} className="size-10 shrink-0 rounded-lg bg-muted" /> : null}
-          <CardTitle className="min-w-0 flex-1 truncate">{index + 1}. {catalogTalent?.name ?? talent.type}</CardTitle>
+          <CardTitle className="min-w-0 flex-1 truncate">{talent.type}. {catalogTalent?.name ?? talent.type}</CardTitle>
           <CardAction>
             <Button type="button" variant="ghost" size="icon-sm" className="touch-none" {...attributes} {...listeners}>
               <GripVerticalIcon />
@@ -460,13 +459,13 @@ function ArtifactEditor({ guide, artifacts, initial, catalogTalents }: EditorBas
         </CardContent>
       </Card>
       <Card>
-        <CardHeader><CardTitle>Recommended Stats</CardTitle><CardDescription>เลือกค่าจากรายการแทนปุ่ม และเลือก Main Stat ได้สูงสุด 2 ค่าต่อชิ้น</CardDescription></CardHeader>
+        <CardHeader><CardTitle>Recommended Stats</CardTitle><CardDescription>เลือกค่าจากรายการแทนปุ่ม และเลือก Main Stat ได้สูงสุด 3 ค่าต่อชิ้น</CardDescription></CardHeader>
         <CardContent>
           <FieldGroup>
             <div className="grid gap-4 sm:grid-cols-3">
-              <StatSelect label="Sands / นาฬิกา" options={mainStatOptions.sands} value={sands} max={2} onChange={setSands} />
-              <StatSelect label="Goblet / ถ้วย" options={mainStatOptions.goblet} value={goblet} max={2} onChange={setGoblet} />
-              <StatSelect label="Circlet / หมวก" options={mainStatOptions.circlet} value={circlet} max={2} onChange={setCirclet} />
+              <StatSelect label="Sands / นาฬิกา" options={mainStatOptions.sands} value={sands} max={3} onChange={setSands} />
+              <StatSelect label="Goblet / ถ้วย" options={mainStatOptions.goblet} value={goblet} max={3} onChange={setGoblet} />
+              <StatSelect label="Circlet / หมวก" options={mainStatOptions.circlet} value={circlet} max={3} onChange={setCirclet} />
             </div>
             <StatSelect label="Substats" options={substatOptions} value={substats} max={substatOptions.length} onChange={setSubstats} />
             <FieldSet>
@@ -486,12 +485,12 @@ function ArtifactEditor({ guide, artifacts, initial, catalogTalents }: EditorBas
                   </div>
                 ))}
               </div>
-              <FieldDescription>กรอกเฉพาะค่าเป็นตัวเลข เปอร์เซ็นต์ หรือข้อความ เช่น -%</FieldDescription>
+              <FieldDescription>กรอกเฉพาะค่าเป็นตัวเลข เปอร์เซ็นต์ หรือข้อความ เช่น -% หากไม่กรอกค่า ระบบจะไม่แสดงส่วนค่าสถานะเป้าหมาย</FieldDescription>
             </FieldSet>
             <FieldSet>
               <FieldLegend>Talent Priority</FieldLegend>
               <DndContext sensors={talentSensors} collisionDetection={closestCenter} onDragEnd={handleTalentDragEnd}>
-                <SortableContext items={orderedTalents.map((talent) => talent.type)} strategy={verticalListSortingStrategy}>
+                <SortableContext items={orderedTalents.map((talent) => talent.type)} strategy={horizontalListSortingStrategy}>
                   <div className="flex items-start gap-3 overflow-x-auto pb-1">
                     {orderedTalents.map((talent, index) => {
                       const catalogTalent = catalogTalents.find((item) => item.type === talent.type);
@@ -499,7 +498,6 @@ function ArtifactEditor({ guide, artifacts, initial, catalogTalents }: EditorBas
                         <div key={talent.type} className="flex shrink-0 items-center gap-3">
                           <SortableTalentCard
                             talent={talent}
-                            index={index}
                             catalogTalent={catalogTalent}
                             onLevelChange={(level) => setTalents(orderedTalents.map((item) => item.type === talent.type ? { ...item, level } : item))}
                           />
@@ -517,6 +515,7 @@ function ArtifactEditor({ guide, artifacts, initial, catalogTalents }: EditorBas
                             >
                               <ToggleGroupItem className={SELECTED_TOGGLE_CLASS} value="gt" aria-label="มากกว่า">&gt;</ToggleGroupItem>
                               <ToggleGroupItem className={SELECTED_TOGGLE_CLASS} value="gte" aria-label="มากกว่าหรือเท่ากับ">≥</ToggleGroupItem>
+                              <ToggleGroupItem className={SELECTED_TOGGLE_CLASS} value="eq" aria-label="เท่ากับ">=</ToggleGroupItem>
                             </ToggleGroup>
                           ) : null}
                         </div>
@@ -632,7 +631,7 @@ function TeamEditor({ guide, characters, weapons, artifacts, initial }: EditorBa
                             <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}
+                              {character ? <CardAction><Avatar><AvatarImage src={character.imageUrl} alt={character.name} /><AvatarFallback>{character.name.slice(0, 2).toUpperCase()}</AvatarFallback></Avatar></CardAction> : null}
                             </CardHeader>
                             <CardContent>
                               <FieldGroup>
diff --git a/components/public/structured-guide.tsx b/components/public/structured-guide.tsx
index 9ea4f6d..9e9c5b2 100644
--- a/components/public/structured-guide.tsx
+++ b/components/public/structured-guide.tsx
@@ -21,7 +21,7 @@ import { rarityGradientClass, rarityTextClass } from "@/lib/catalog/rarity";
 import type { PublicGuide } from "@/lib/guides/queries";
 import { artifactTierCount } from "@/lib/guides/artifacts";
 import { navigationIconPath } from "@/lib/navigation";
-import { normalizeTargetStat, statPriorityColorClass, targetStatIconName } from "@/lib/guides/stats";
+import { normalizeTargetStat, recommendedStatIconName, statPriorityColorClass, targetStatIconName, targetStatOptions } from "@/lib/guides/stats";
 import { normalizeTalentPriorities, talentRelationSymbol, talentTypeLabel } from "@/lib/guides/talents";
 import { cn } from "@/lib/utils";
 
@@ -142,6 +142,13 @@ function GuideOverview({
 }) {
   return (
     <div className="flex flex-col gap-8">
+      <div className="mx-auto flex max-w-3xl flex-col gap-3 text-center">
+        <p className="text-sm font-medium text-primary">ภาพรวมแนวทาง</p>
+        <h1 className="font-heading text-4xl font-bold">{guide.name}</h1>
+        <p className="text-lg font-semibold">
+          {guide.overview}
+        </p>
+      </div>
       <div className="relative mx-auto aspect-square w-full max-w-3xl overflow-hidden rounded-xl border bg-muted">
         <Image
           src={guide.coverUrl}
@@ -151,13 +158,6 @@ function GuideOverview({
           className="object-cover"
         />
       </div>
-      <div className="mx-auto flex max-w-3xl flex-col gap-3 text-center">
-        <p className="text-sm font-medium text-primary">ภาพรวมแนวทาง</p>
-        <h1 className="font-heading text-4xl font-semibold">{guide.name}</h1>
-        <p className="text-lg leading-8 text-muted-foreground">
-          {guide.overview}
-        </p>
-      </div>
       {sections.length ? (
         <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
           {sections.map((item) => (
@@ -238,11 +238,12 @@ function WeaponSection({ guide }: { guide: PublicGuide }) {
                   rarityGradientClass(row.weapon.rarity),
                 )}
               >
-                <div className="relative size-20 shrink-0">
+                <div className="relative size-24 shrink-0 md:size-28">
                   <Image
                     src={row.weapon.imageUrl}
                     alt={row.weapon.name}
                     fill
+                    sizes="(min-width: 768px) 7rem, 6rem"
                     className="object-contain"
                   />
                 </div>
@@ -312,6 +313,30 @@ function ArtifactSection({ guide }: { guide: PublicGuide }) {
       <div className="grid gap-5 lg:grid-cols-[1.2fr_1fr]">
         {" "}
         <div className="flex flex-col gap-5">
+          {profile ? (
+            <Card className="overflow-hidden pt-0">
+              <CardHeader className="bg-primary py-4 text-center text-primary-foreground">
+                <CardTitle className="text-2xl">ออฟหลักที่แนะนำ</CardTitle>
+              </CardHeader>
+              <CardContent className="grid grid-cols-3 p-0">
+                <ArtifactStat iconSrc="/icon/Icon_Sands_of_Eon.webp" label="นาฬิกา" values={profile.sands} />
+                <ArtifactStat iconSrc="/icon/Icon_Goblet_of_Eonothem.webp" label="ถ้วย" values={profile.goblet} />
+                <ArtifactStat iconSrc="/icon/Icon_Circlet_of_Logos.webp" label="หัว" values={profile.circlet} />
+              </CardContent>
+            </Card>
+          ) : null}
+          {profile?.substats.length ? (
+            <Card>
+              <CardContent className="flex flex-col items-center gap-2 py-5 text-center text-sm">
+                <strong>ออฟรอง</strong>
+                <div className="flex flex-col items-center gap-1">
+                  {profile.substats.map((stat, index) => (
+                    <ArtifactStatValue key={`${stat}-${index}`} value={stat} index={index} />
+                  ))}
+                </div>
+              </CardContent>
+            </Card>
+          ) : null}
           {guide.artifactGroups.map((group) => (
             <Card key={group.id}>
               <CardHeader>
@@ -323,7 +348,7 @@ function ArtifactSection({ guide }: { guide: PublicGuide }) {
                     <div className="flex -space-x-3">
                       <div
                         className={cn(
-                          "relative size-14 overflow-hidden rounded-lg border",
+                          "relative size-16 overflow-hidden rounded-lg border sm:size-20",
                           rarityGradientClass(row.first.rarity),
                         )}
                       >
@@ -331,13 +356,14 @@ function ArtifactSection({ guide }: { guide: PublicGuide }) {
                           src={row.first.imageUrl}
                           alt={row.first.name}
                           fill
+                          sizes="(min-width: 640px) 5rem, 4rem"
                           className="object-contain"
                         />
                       </div>
                       {row.second ? (
                         <div
                           className={cn(
-                            "relative size-14 overflow-hidden rounded-lg border",
+                            "relative size-16 overflow-hidden rounded-lg border sm:size-20",
                             rarityGradientClass(row.second.rarity),
                           )}
                         >
@@ -345,6 +371,7 @@ function ArtifactSection({ guide }: { guide: PublicGuide }) {
                             src={row.second.imageUrl}
                             alt={row.second.name}
                             fill
+                            sizes="(min-width: 640px) 5rem, 4rem"
                             className="object-contain"
                           />
                         </div>
@@ -369,30 +396,6 @@ function ArtifactSection({ guide }: { guide: PublicGuide }) {
         </div>
         {profile ? (
           <div className="flex flex-col gap-5">
-            <Card className="overflow-hidden pt-0">
-              <CardHeader className="bg-primary py-4 text-center text-primary-foreground">
-                <CardTitle className="text-2xl">ออฟหลักที่แนะนำ</CardTitle>
-              </CardHeader>
-              <CardContent className="grid grid-cols-3 p-0">
-                <ArtifactStat iconSrc="/icon/Icon_Sands_of_Eon.webp" label="นาฬิกา" values={profile.sands} />
-                <ArtifactStat iconSrc="/icon/Icon_Goblet_of_Eonothem.webp" label="ถ้วย" values={profile.goblet} />
-                <ArtifactStat iconSrc="/icon/Icon_Circlet_of_Logos.webp" label="หัว" values={profile.circlet} />
-              </CardContent>
-            </Card>
-            {profile.substats.length ? (
-              <Card>
-                <CardContent className="flex flex-col items-center gap-2 py-5 text-center text-sm">
-                  <strong>ลำดับค่าสถานะ:</strong>
-                  <div className="flex flex-col items-center gap-1">
-                    {profile.substats.map((stat, index) => (
-                      <span key={`${stat}-${index}`} className={statPriorityColorClass(index)}>
-                        {statLabel(stat)}
-                      </span>
-                    ))}
-                  </div>
-                </CardContent>
-              </Card>
-            ) : null}
             <Card>
               <CardHeader><CardTitle>รายละเอียดเพิ่มเติม</CardTitle></CardHeader>
               <CardContent className="flex flex-col gap-5">
@@ -409,7 +412,7 @@ function ArtifactSection({ guide }: { guide: PublicGuide }) {
                       )}
                     >
                       <span className="flex min-w-0 items-center gap-2">
-                        {targetStatIconName(target.stat) ? <Image src={`/icon/stats/${targetStatIconName(target.stat)}.webp`} alt="" width={28} height={28} className="size-7 shrink-0 object-contain brightness-0 invert" /> : null}
+                        {targetStatIconName(target.stat) ? <Image src={`/icon/stats/${targetStatIconName(target.stat)}.webp`} alt="" width={14} height={14} className="size-3.5 shrink-0 object-contain brightness-0 invert" /> : null}
                         <span>{statLabel(normalizeTargetStat(target.stat) ?? target.stat)}</span>
                       </span>
                       <strong className="shrink-0">{target.value}</strong>
@@ -437,7 +440,7 @@ function ArtifactSection({ guide }: { guide: PublicGuide }) {
                               <p className="text-[11px] text-muted-foreground sm:text-xs">{talentTypeLabel(talent.type)}</p>
                             </div>
                             {index < talents.length - 1 ? (
-                              <span className="mt-4 text-xl font-semibold sm:mt-6 sm:text-3xl" aria-label={talent.relationToNext === "gte" ? "มากกว่าหรือเท่ากับ" : "มากกว่า"}>
+                              <span className="mt-4 text-xl font-semibold sm:mt-6 sm:text-3xl" aria-label={talent.relationToNext === "gte" ? "มากกว่าหรือเท่ากับ" : talent.relationToNext === "eq" ? "เท่ากับ" : "มากกว่า"}>
                                 {talentRelationSymbol(talent.relationToNext)}
                               </span>
                             ) : null}
@@ -499,9 +502,7 @@ function ArtifactStat({ iconSrc, label, values }: { iconSrc: string; label: stri
       <div className="flex max-w-full flex-col items-center gap-1 text-xs leading-5 sm:text-sm sm:leading-6">
         {values.length
           ? values.map((value, index) => (
-              <span key={`${value}-${index}`} className={cn("max-w-full break-words text-center", statPriorityColorClass(index))}>
-                {statLabel(value)}
-              </span>
+              <ArtifactStatValue key={`${value}-${index}`} value={value} index={index} />
             ))
           : <span>—</span>}
       </div>
@@ -509,6 +510,17 @@ function ArtifactStat({ iconSrc, label, values }: { iconSrc: string; label: stri
   );
 }
 
+function ArtifactStatValue({ value, index }: { value: string; index: number }) {
+  const iconName = recommendedStatIconName(value);
+  const hasIcon = iconName && targetStatOptions.some((stat) => targetStatIconName(stat) === iconName);
+  return (
+    <span className={cn("flex max-w-full items-center justify-center gap-1 text-center", statPriorityColorClass(index))}>
+      {hasIcon ? <Image src={`/icon/stats/${iconName}.webp`} alt="" width={20} height={20} className="size-5 shrink-0 object-contain brightness-0 invert" /> : null}
+      <span className="break-words">{statLabel(value)}</span>
+    </span>
+  );
+}
+
 function ConstellationSection({ guide }: { guide: PublicGuide }) {
   const note = guide.sections.find((section) => section.slug === "constellations")?.note;
   return (
diff --git a/db/schema.ts b/db/schema.ts
index e91b7e0..7468000 100644
--- a/db/schema.ts
+++ b/db/schema.ts
@@ -569,7 +569,7 @@ export const artifactProfiles = guidesSchema.table("artifact_profile", {
   circlet: jsonb("circlet").$type<string[]>().default([]).notNull(),
   substats: jsonb("substats").$type<string[]>().default([]).notNull(),
   targets: jsonb("targets").$type<Array<{ stat: string; value: string }>>().default([]).notNull(),
-  talents: jsonb("talents").$type<Array<{ type: "NA" | "E" | "Q"; priority: number; level?: string; relationToNext?: "gt" | "gte" }>>().default([]).notNull(),
+  talents: jsonb("talents").$type<Array<{ type: "NA" | "E" | "Q"; priority: number; level?: string; relationToNext?: "gt" | "gte" | "eq" }>>().default([]).notNull(),
   note: text("note"),
   ...timestamps,
 });
diff --git a/lib/catalog/element.test.ts b/lib/catalog/element.test.ts
index 5094e99..e879176 100644
--- a/lib/catalog/element.test.ts
+++ b/lib/catalog/element.test.ts
@@ -3,19 +3,19 @@ import { describe, expect, it } from "vitest";
 import { elementBackgroundColor } from "@/lib/catalog/element";
 
 describe("catalog element backgrounds", () => {
-  it("maps every character element to its 40% opacity color", () => {
-    expect(elementBackgroundColor("Pyro")).toBe("#12000066");
-    expect(elementBackgroundColor("Hydro")).toBe("#00051266");
-    expect(elementBackgroundColor("Anemo")).toBe("#06141566");
-    expect(elementBackgroundColor("Electro")).toBe("#0D000F66");
-    expect(elementBackgroundColor("Dendro")).toBe("#000F0466");
-    expect(elementBackgroundColor("Cryo")).toBe("#03202166");
-    expect(elementBackgroundColor("Geo")).toBe("#0F0D0066");
+  it("maps every character element to its opaque background color", () => {
+    expect(elementBackgroundColor("Pyro")).toBe("#120000");
+    expect(elementBackgroundColor("Hydro")).toBe("#000512");
+    expect(elementBackgroundColor("Anemo")).toBe("#061415");
+    expect(elementBackgroundColor("Electro")).toBe("#0D000F");
+    expect(elementBackgroundColor("Dendro")).toBe("#000F04");
+    expect(elementBackgroundColor("Cryo")).toBe("#032021");
+    expect(elementBackgroundColor("Geo")).toBe("#0F0D00");
   });
 
   it("uses the neutral character background when the element is unavailable", () => {
-    expect(elementBackgroundColor(null)).toBe("#17383d66");
-    expect(elementBackgroundColor(undefined)).toBe("#17383d66");
-    expect(elementBackgroundColor("Unknown")).toBe("#17383d66");
+    expect(elementBackgroundColor(null)).toBe("#17383d");
+    expect(elementBackgroundColor(undefined)).toBe("#17383d");
+    expect(elementBackgroundColor("Unknown")).toBe("#17383d");
   });
 });
diff --git a/lib/catalog/element.ts b/lib/catalog/element.ts
index 2cae2ba..483a9b7 100644
--- a/lib/catalog/element.ts
+++ b/lib/catalog/element.ts
@@ -1,13 +1,13 @@
 const elementBackgroundColors: Record<string, string> = {
-  Pyro: "#12000066",
-  Hydro: "#00051266",
-  Anemo: "#06141566",
-  Electro: "#0D000F66",
-  Dendro: "#000F0466",
-  Cryo: "#03202166",
-  Geo: "#0F0D0066",
+  Pyro: "#120000",
+  Hydro: "#000512",
+  Anemo: "#061415",
+  Electro: "#0D000F",
+  Dendro: "#000F04",
+  Cryo: "#032021",
+  Geo: "#0F0D00",
 };
 
 export function elementBackgroundColor(element: string | null | undefined): string {
-  return (element && elementBackgroundColors[element]) || "#17383d66";
+  return (element && elementBackgroundColors[element]) || "#17383d";
 }
diff --git a/lib/guides/schemas.test.ts b/lib/guides/schemas.test.ts
index 60c3b1b..b3866c0 100644
--- a/lib/guides/schemas.test.ts
+++ b/lib/guides/schemas.test.ts
@@ -31,9 +31,10 @@ describe("structured guide validation", () => {
     expect(constellationSectionSchema.safeParse({ expectedVersion: 1, note: "x".repeat(2_001), rows: [] }).success).toBe(false);
   });
 
-  it("limits artifact main stats to two per slot", () => {
-    const result = artifactSectionSchema.safeParse({ expectedVersion: 1, groups: artifactGroups, sands: ["EM", "ER", "ATK%"], goblet: [], circlet: [], substats: [], targets: [], talents: [], note: null });
-    expect(result.success).toBe(false);
+  it("limits artifact main stats to three per slot", () => {
+    const base = { expectedVersion: 1, groups: artifactGroups, goblet: [], circlet: [], substats: [], targets: [], talents: [], note: null };
+    expect(artifactSectionSchema.safeParse({ ...base, sands: ["EM", "ER", "ATK%"] }).success).toBe(true);
+    expect(artifactSectionSchema.safeParse({ ...base, sands: ["EM", "ER", "ATK%", "HP%"] }).success).toBe(false);
   });
 
   it("accepts flat artifact substats with the same icons as their percentage variants", () => {
@@ -80,6 +81,7 @@ describe("structured guide validation", () => {
   it("accepts talent comparison relations while keeping legacy talents valid", () => {
     const base = { expectedVersion: 1, groups: artifactGroups, sands: [], goblet: [], circlet: [], substats: [], targets: [], note: null };
     expect(artifactSectionSchema.safeParse({ ...base, talents: [{ type: "E", priority: 1, relationToNext: "gte" }] }).success).toBe(true);
+    expect(artifactSectionSchema.safeParse({ ...base, talents: [{ type: "E", priority: 1, relationToNext: "eq" }] }).success).toBe(true);
     expect(artifactSectionSchema.safeParse({ ...base, talents: [{ type: "E", priority: 1 }] }).success).toBe(true);
     expect(artifactSectionSchema.safeParse({ ...base, talents: [{ type: "E", priority: 1, relationToNext: "equal" }] }).success).toBe(false);
   });
diff --git a/lib/guides/schemas.ts b/lib/guides/schemas.ts
index f0d7e56..c0774dc 100644
--- a/lib/guides/schemas.ts
+++ b/lib/guides/schemas.ts
@@ -42,7 +42,7 @@ export const mainStatOptions = {
 
 export const substatOptions = ["CRIT Rate%/CRIT DMG%", "HP%", "HP", "ATK%", "ATK", "DEF%", "DEF", "EM", "ER"] as const;
 export const talentLevelOptions = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"] as const;
-export const talentRelationOptions = ["gt", "gte"] as const;
+export const talentRelationOptions = ["gt", "gte", "eq"] as const;
 
 const artifactGroupSchema = (name: "Late Game" | "Early Game") => z.strictObject({
   name: z.literal(name),
@@ -60,9 +60,9 @@ export const artifactSectionSchema = z.strictObject({
     artifactGroupSchema("Late Game"),
     artifactGroupSchema("Early Game"),
   ]),
-  sands: z.array(z.enum(mainStatOptions.sands)).max(2),
-  goblet: z.array(z.enum(mainStatOptions.goblet)).max(2),
-  circlet: z.array(z.enum(mainStatOptions.circlet)).max(2),
+  sands: z.array(z.enum(mainStatOptions.sands)).max(3),
+  goblet: z.array(z.enum(mainStatOptions.goblet)).max(3),
+  circlet: z.array(z.enum(mainStatOptions.circlet)).max(3),
   substats: z.array(z.enum(substatOptions)).max(substatOptions.length),
   targets: z.array(z.strictObject({
     stat: z.enum(targetStatOptions),
diff --git a/lib/guides/talents.test.ts b/lib/guides/talents.test.ts
index 729c1e9..df91978 100644
--- a/lib/guides/talents.test.ts
+++ b/lib/guides/talents.test.ts
@@ -27,9 +27,10 @@ describe("talent priorities", () => {
     ]);
   });
 
-  it("formats strict and greater-than-or-equal relations", () => {
+  it("formats every supported talent relation", () => {
     expect(talentRelationSymbol("gt")).toBe(">");
     expect(talentRelationSymbol("gte")).toBe("≥");
+    expect(talentRelationSymbol("eq")).toBe("=");
     expect(talentRelationSymbol()).toBe(">");
   });
 
diff --git a/lib/guides/talents.ts b/lib/guides/talents.ts
index aef6352..8e83803 100644
--- a/lib/guides/talents.ts
+++ b/lib/guides/talents.ts
@@ -1,4 +1,4 @@
-export type TalentRelation = "gt" | "gte";
+export type TalentRelation = "gt" | "gte" | "eq";
 
 export interface TalentPriority {
   type: "NA" | "E" | "Q";
@@ -38,8 +38,8 @@ export function reorderTalentPriorities(
   }));
 }
 
-export function talentRelationSymbol(relation?: TalentRelation): ">" | "≥" {
-  return relation === "gte" ? "≥" : ">";
+export function talentRelationSymbol(relation?: TalentRelation): ">" | "≥" | "=" {
+  return relation === "gte" ? "≥" : relation === "eq" ? "=" : ">";
 }
 
 export function talentTypeLabel(type: TalentPriority["type"]): string {