diff --git a/app/api/guides/[guideId]/weapons/image/route.tsx b/app/api/guides/[guideId]/weapons/image/route.tsx
index cf4bc53..78287df 100644
--- a/app/api/guides/[guideId]/weapons/image/route.tsx
+++ b/app/api/guides/[guideId]/weapons/image/route.tsx
@@ -27,7 +27,9 @@ const anuphanFonts = Promise.all(
 ).catch(() => []);
 
 function metric(value: string): string {
-  return `${Number(value).toLocaleString("en-US", { maximumFractionDigits: 2 })}%`;
+  return Number(value) === 0
+    ? "-%"
+    : `${Number(value).toLocaleString("en-US", { maximumFractionDigits: 2 })}%`;
 }
 
 async function pngDataUrl(url: string): Promise<string | null> {
diff --git a/app/api/teams/[teamId]/image/route.tsx b/app/api/teams/[teamId]/image/route.tsx
index 2746af5..d4b3a40 100644
--- a/app/api/teams/[teamId]/image/route.tsx
+++ b/app/api/teams/[teamId]/image/route.tsx
@@ -80,10 +80,9 @@ export async function GET(
         height: "100%",
         display: "flex",
         flexDirection: "column",
-        color: "#f4fbfa",
-        background:
-          "radial-gradient(circle at 50% 0%, #16454a 0%, #0a2429 38%, #06171b 100%)",
-        border: "2px solid #3aaaa2",
+        color: "#f7f7f7",
+        background: "#05060a",
+        border: "2px solid #34343d",
         padding: "34px 36px",
         fontFamily: "Anuphan",
         position: "relative",
@@ -94,7 +93,7 @@ export async function GET(
         <div style={{ display: "flex", justifyContent: "center", fontSize: 42, fontWeight: 700 }}>
           {team.guideName}
         </div>
-        <div style={{ display: "flex", justifyContent: "center", color: "#82d6ce", fontSize: 20 }}>
+        <div style={{ display: "flex", justifyContent: "center", color: "#b9b9c2", fontSize: 20 }}>
           {team.title} · ระยะเวลาโรเทชั่น {seconds.toLocaleString(undefined, { maximumFractionDigits: 2 })} วิ
         </div>
       </div>
@@ -111,10 +110,10 @@ export async function GET(
                   alt=""
                   width={78}
                   height={78}
-                  style={{ borderRadius: 16, border: "2px solid #78cbc4", background: rarityGradient(isCustomTravelerKey(member.character.key) ? 5 : member.character.rarity), 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 #78cbc4", background: rarityGradient(isCustomTravelerKey(member.character.key) ? 5 : member.character.rarity), color: "#82d6ce", 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>
               )}
@@ -136,17 +135,17 @@ export async function GET(
               <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 }}>C{member.constellation} {member.character.name}</div>
-                  <div style={{ display: "flex", color: "#d9f6f2", fontSize: 18 }}>{amount(damage)}</div>
+                  <div style={{ display: "flex", color: "#f7f7f7", fontSize: 18 }}>{amount(damage)}</div>
                 </div>
                 <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
-                  <div style={{ display: "flex", flex: 1, height: 24, overflow: "hidden", borderRadius: 8, background: "#17383d" }}>
+                  <div style={{ display: "flex", flex: 1, height: 24, overflow: "hidden", borderRadius: 8, background: "#272730" }}>
                     <div
                       style={{
                         display: "flex",
                         width: `${Math.max(2, Math.min(100, percent))}%`,
                         height: "100%",
                         borderRadius: 8,
-                        background: "linear-gradient(90deg, #55b7ae 0%, #8be0d7 100%)",
+                        background: "linear-gradient(90deg, #b7791f 0%, #f0b72f 100%)",
                       }}
                     />
                   </div>
@@ -160,16 +159,16 @@ export async function GET(
         })}
       </div>
 
-      <div style={{ display: "flex", flex: 1, flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 6, padding: "16px 0", textAlign: "center", color: "#d1e9e6", fontSize: 18, lineHeight: 1.45 }}>
-        <div style={{ display: "flex", color: "#82d6ce", fontSize: 15, fontWeight: 700 }}>Rotation</div>
+      <div style={{ display: "flex", flex: 1, flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 6, margin: "16px 0", borderRadius: 10, background: "#272730", padding: "16px", textAlign: "center", color: "#f7f7f7", fontSize: 18, lineHeight: 1.45 }}>
+        <div style={{ display: "flex", color: "#b9b9c2", fontSize: 15, fontWeight: 700 }}>Rotation</div>
         <div style={{ display: "flex" }}>{team.combo}</div>
       </div>
-      <div style={{ display: "flex", justifyContent: "center", gap: 16, borderTop: "1px solid #28555a", paddingTop: 20, fontSize: 26, fontWeight: 700 }}>
+      <div style={{ display: "flex", justifyContent: "center", gap: 16, borderTop: "1px solid #34343d", paddingTop: 20, fontSize: 26, fontWeight: 700 }}>
         <span style={{ color: "#f0c95f" }}>DPS): {amount(dps)}</span>
-        <span style={{ color: "#688c90" }}>|</span>
+        <span style={{ color: "#74747f" }}>|</span>
         <span>DPR: {amount(total)}</span>
       </div>
-      <div style={{ display: "flex", justifyContent: "center", marginTop: 18, color: "#5c9995", fontSize: 14 }}>
+      <div style={{ display: "flex", justifyContent: "center", marginTop: 18, color: "#74747f", fontSize: 14 }}>
         By YT เกนชินไม่ใช่เกมมือถือ
       </div>
       </div>
diff --git a/components/public/structured-guide.tsx b/components/public/structured-guide.tsx
index 282e1e7..9ea4f6d 100644
--- a/components/public/structured-guide.tsx
+++ b/components/public/structured-guide.tsx
@@ -262,7 +262,7 @@ function WeaponSection({ guide }: { guide: PublicGuide }) {
                         rarityTextClass(row.weapon.rarity),
                       )}
                     >
-                      {metric(row.overallPercent)}
+                      {Number(row.overallPercent) === 0 ? "-%" : metric(row.overallPercent)}
                     </p>
                     <p className="mt-1 text-sm sm:text-base">ดาเมททั้งทีม</p>
                   </div>
@@ -275,7 +275,7 @@ function WeaponSection({ guide }: { guide: PublicGuide }) {
                         rarityTextClass(row.weapon.rarity),
                       )}
                     >
-                      {metric(row.personalPercent)}
+                      {Number(row.personalPercent) === 0 ? "-%" : metric(row.personalPercent)}
                     </p>
                     <p className="mt-1 text-sm sm:text-base">ดาเมจส่วนตัว</p>
                   </div>