diff --git a/app/api/teams/[teamId]/image/route.tsx b/app/api/teams/[teamId]/image/route.tsx
index 2f713b7..d5f6bc1 100644
--- a/app/api/teams/[teamId]/image/route.tsx
+++ b/app/api/teams/[teamId]/image/route.tsx
@@ -18,7 +18,8 @@ const anuphanFonts = Promise.all(
     const response = await fetch(
       `https://unpkg.com/@fontsource/anuphan@5.3.0/files/anuphan-${subset}-${weight}-normal.woff`,
     );
-    if (!response.ok) throw new Error(`Unable to load Anuphan ${subset} ${weight}`);
+    if (!response.ok)
+      throw new Error(`Unable to load Anuphan ${subset} ${weight}`);
     return {
       name: "Anuphan",
       data: await response.arrayBuffer(),
@@ -29,7 +30,9 @@ const anuphanFonts = Promise.all(
 ).catch(() => []);
 
 function amount(value: number): string {
-  return new Intl.NumberFormat("en-US", { maximumFractionDigits: 0 }).format(value);
+  return new Intl.NumberFormat("en-US", { maximumFractionDigits: 0 }).format(
+    value,
+  );
 }
 
 async function pngDataUrl(url: string): Promise<string | null> {
@@ -37,7 +40,7 @@ async function pngDataUrl(url: string): Promise<string | null> {
     const response = await fetch(url);
     if (!response.ok) return null;
     const png = await sharp(Buffer.from(await response.arrayBuffer()))
-      .resize(156, 156, { fit: "cover" })
+      .resize(300, 300, { fit: "cover" })
       .png()
       .toBuffer();
     return `data:image/png;base64,${png.toString("base64")}`;
@@ -63,14 +66,14 @@ export async function GET(
   const [fonts, memberAssets] = await Promise.all([
     anuphanFonts,
     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 };
-    }),
+      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 };
+      }),
     ),
   ]);
 
@@ -83,105 +86,313 @@ export async function GET(
         flexDirection: "column",
         color: "#f7f7f7",
         background: "#05060a",
-        border: "2px solid #34343d",
-        padding: "34px 36px",
+        border: "3px solid #34343d",
+        padding: "48px 52px",
         fontFamily: "Anuphan",
         position: "relative",
       }}
     >
-      <div style={{ position: "relative", zIndex: 1, display: "flex", flex: 1, flexDirection: "column" }}>
-      <div style={{ display: "flex", flexDirection: "column", textAlign: "center" }}>
-        <div style={{ display: "flex", justifyContent: "center", fontSize: 42, fontWeight: 700 }}>
-          {team.guideName}
+      <div
+        style={{
+          position: "relative",
+          zIndex: 1,
+          display: "flex",
+          flex: 1,
+          flexDirection: "column",
+        }}
+      >
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            textAlign: "center",
+          }}
+        >
+          <div
+            style={{
+              display: "flex",
+              justifyContent: "center",
+              fontSize: 64,
+              fontWeight: 700,
+            }}
+          >
+            {team.guideName}
+          </div>
+          <div
+            style={{
+              display: "flex",
+              justifyContent: "center",
+              color: "#b9b9c2",
+              fontSize: 32,
+            }}
+          >
+            {team.title} · ระยะเวลาโรเทชั่น{" "}
+            {seconds.toLocaleString(undefined, { maximumFractionDigits: 2 })} วิ
+          </div>
         </div>
-        <div style={{ display: "flex", justifyContent: "center", color: "#b9b9c2", fontSize: 20 }}>
-          {team.title} · ระยะเวลาโรเทชั่น {seconds.toLocaleString(undefined, { maximumFractionDigits: 2 })} วิ
-        </div>
-      </div>
 
-      <div style={{ display: "flex", flexDirection: "column", gap: 16, marginTop: 10 }}>
-        {team.members.map((member, index) => {
-          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, borderRadius: 16, background: elementBackgroundColor(member.character.element), padding: 6 }}>
-              <div style={{ position: "relative", display: "flex", width: 78, height: 78, flexShrink: 0, overflow: "hidden", borderRadius: 16, border: "2px solid #ffffff2a", background: rarityGradient(isCustomTravelerKey(member.character.key) ? 5 : member.character.rarity) }}>
-                {memberAssets[index].character ? (
-                  <img
-                    src={memberAssets[index].character}
-                    alt=""
-                    width={78}
-                    height={78}
-                    style={{ objectFit: "cover" }}
-                  />
-                ) : (
-                  <div style={{ display: "flex", width: 78, height: 78, alignItems: "center", justifyContent: "center", color: "#b9b9c2", fontSize: 30 }}>
-                    {member.character.name.slice(0, 1)}
-                  </div>
-                )}
-                <div style={{ position: "absolute", top: 2, left: 2, display: "flex", borderRadius: 4, background: "transparent", color: "#ffffff", padding: "1px 4px", fontSize: 11, fontWeight: 700 }}>
-                  C{member.constellation}
-                </div>
-              </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: rarityGradient(member.weapon.rarity) }}>
-                    <img src={memberAssets[index].weapon} alt="" width={50} height={50} style={{ objectFit: "contain" }} />
-                    <div style={{ position: "absolute", top: 1, left: 1, display: "flex", borderRadius: 4, background: "transparent", color: "#ffffff", padding: "0 2px", fontSize: 9, 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: rarityGradient(member.artifact.rarity) }}>
-                    <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", 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: "#272730" }}>
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            gap: 24,
+            marginTop: 24,
+          }}
+        >
+          {team.members.map((member, index) => {
+            const damage = Number(member.damage);
+            const percent = total > 0 ? (damage / total) * 100 : 0;
+            return (
+              <div
+                key={member.position}
+                style={{
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 24,
+                  borderRadius: 24,
+                  background: elementBackgroundColor(member.character.element),
+                  padding: 14,
+                }}
+              >
+                <div
+                  style={{
+                    position: "relative",
+                    display: "flex",
+                    width: 150,
+                    height: 150,
+                    flexShrink: 0,
+                    overflow: "hidden",
+                    borderRadius: 24,
+                    border: "3px solid #ffffff2a",
+                    background: rarityGradient(
+                      isCustomTravelerKey(member.character.key)
+                        ? 5
+                        : member.character.rarity,
+                    ),
+                  }}
+                >
+                  {memberAssets[index].character ? (
+                    <img
+                      src={memberAssets[index].character}
+                      alt=""
+                      width={150}
+                      height={150}
+                      style={{ objectFit: "cover" }}
+                    />
+                  ) : (
                     <div
                       style={{
                         display: "flex",
-                        width: `${Math.max(2, Math.min(100, percent))}%`,
-                        height: "100%",
-                        borderRadius: 8,
-                        background: "linear-gradient(90deg, #b7791f 0%, #f0b72f 100%)",
+                        width: 150,
+                        height: 150,
+                        alignItems: "center",
+                        justifyContent: "center",
+                        color: "#b9b9c2",
+                        fontSize: 52,
                       }}
-                    />
+                    >
+                      {member.character.name.slice(0, 1)}
+                    </div>
+                  )}
+                  <div
+                    style={{
+                      position: "absolute",
+                      top: 6,
+                      left: 6,
+                      display: "flex",
+                      borderRadius: 4,
+                      background: "transparent",
+                      color: "#ffffff",
+                      padding: "2px 8px",
+                      fontSize: 20,
+                      fontWeight: 700,
+                    }}
+                  >
+                    C{member.constellation}
                   </div>
-                  <div style={{ display: "flex", width: 66, justifyContent: "flex-end", fontSize: 20, fontWeight: 700 }}>
-                    {percent.toFixed(1)}%
+                </div>
+                <div style={{ display: "flex", gap: 12 }}>
+                  {member.weapon && memberAssets[index].weapon ? (
+                    <div
+                      style={{
+                        position: "relative",
+                        display: "flex",
+                        width: 96,
+                        height: 96,
+                        overflow: "hidden",
+                        borderRadius: 16,
+                        background: rarityGradient(member.weapon.rarity),
+                      }}
+                    >
+                      <img
+                        src={memberAssets[index].weapon}
+                        alt=""
+                        width={96}
+                        height={96}
+                        style={{ objectFit: "contain" }}
+                      />
+                      <div
+                        style={{
+                          position: "absolute",
+                          top: 3,
+                          left: 3,
+                          display: "flex",
+                          borderRadius: 4,
+                          background: "transparent",
+                          color: "#ffffff",
+                          padding: "1px 5px",
+                          fontSize: 16,
+                          fontWeight: 700,
+                        }}
+                      >
+                        R{member.refinement}
+                      </div>
+                    </div>
+                  ) : null}
+                  {member.artifact && memberAssets[index].artifact ? (
+                    <div
+                      style={{
+                        display: "flex",
+                        width: 96,
+                        height: 96,
+                        overflow: "hidden",
+                        borderRadius: 16,
+                        background: rarityGradient(member.artifact.rarity),
+                      }}
+                    >
+                      <img
+                        src={memberAssets[index].artifact}
+                        alt=""
+                        width={96}
+                        height={96}
+                        style={{ objectFit: "contain" }}
+                      />
+                    </div>
+                  ) : null}
+                </div>
+                <div
+                  style={{
+                    display: "flex",
+                    flex: 1,
+                    flexDirection: "column",
+                    gap: 14,
+                  }}
+                >
+                  <div
+                    style={{
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "space-between",
+                    }}
+                  >
+                    <div
+                      style={{ display: "flex", fontSize: 36, fontWeight: 600 }}
+                    >
+                      {member.character.name}
+                    </div>
+                    <div
+                      style={{
+                        display: "flex",
+                        color: "#f7f7f7",
+                        fontSize: 34,
+                      }}
+                    >
+                      {amount(damage)}
+                    </div>
+                  </div>
+                  <div
+                    style={{ display: "flex", alignItems: "center", gap: 20 }}
+                  >
+                    <div
+                      style={{
+                        display: "flex",
+                        flex: 1,
+                        height: 44,
+                        overflow: "hidden",
+                        borderRadius: 14,
+                        background: "#272730",
+                      }}
+                    >
+                      <div
+                        style={{
+                          display: "flex",
+                          width: `${Math.max(2, Math.min(100, percent))}%`,
+                          height: "100%",
+                          borderRadius: 14,
+                          background:
+                            "linear-gradient(90deg, #b7791f 0%, #f0b72f 100%)",
+                        }}
+                      />
+                    </div>
+                    <div
+                      style={{
+                        display: "flex",
+                        width: 116,
+                        justifyContent: "flex-end",
+                        fontSize: 34,
+                        fontWeight: 700,
+                      }}
+                    >
+                      {percent.toFixed(1)}%
+                    </div>
                   </div>
                 </div>
               </div>
-            </div>
-          );
-        })}
-      </div>
+            );
+          })}
+        </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 #34343d", paddingTop: 20, fontSize: 26, fontWeight: 700 }}>
-        <span style={{ color: "#f0c95f" }}>DPS): {amount(dps)}</span>
-        <span style={{ color: "#74747f" }}>|</span>
-        <span>DPR: {amount(total)}</span>
-      </div>
-      <div style={{ display: "flex", justifyContent: "center", marginTop: 18, color: "#74747f", fontSize: 14 }}>
-        By YT เกนชินไม่ใช่เกมมือถือ
-      </div>
+        <div
+          style={{
+            display: "flex",
+            flex: 1,
+            flexDirection: "column",
+            alignItems: "center",
+            justifyContent: "center",
+            gap: 10,
+            margin: "20px 0",
+            borderRadius: 16,
+            background: "#272730",
+            padding: "24px",
+            textAlign: "center",
+            color: "#f7f7f7",
+            fontSize: 28,
+            lineHeight: 1.45,
+          }}
+        >
+          <div style={{ display: "flex" }}>{team.combo}</div>
+        </div>
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "center",
+            gap: 24,
+            borderTop: "2px solid #34343d",
+            paddingTop: 26,
+            fontSize: 38,
+            fontWeight: 700,
+          }}
+        >
+          <span style={{ color: "#f0c95f" }}>DPS: {amount(dps)}</span>
+          <span style={{ color: "#74747f" }}>|</span>
+          <span>DPR: {amount(total)}</span>
+        </div>
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "center",
+            marginTop: 22,
+            color: "#74747f",
+            fontSize: 40,
+          }}
+        >
+          By YT เกนชินไม่ใช่เกมมือถือ
+        </div>
       </div>
     </div>,
     {
-      width: 550,
-      height: 776,
+      width: 1080,
+      height: 1350,
       fonts: fonts.length ? fonts : undefined,
       headers: {
         "Cache-Control": "no-store",
diff --git a/components/public/structured-guide.tsx b/components/public/structured-guide.tsx
index 9e9c5b2..f617441 100644
--- a/components/public/structured-guide.tsx
+++ b/components/public/structured-guide.tsx
@@ -337,6 +337,7 @@ function ArtifactSection({ guide }: { guide: PublicGuide }) {
               </CardContent>
             </Card>
           ) : null}
+          <div className="order-first flex flex-col gap-5">
           {guide.artifactGroups.map((group) => (
             <Card key={group.id}>
               <CardHeader>
@@ -393,6 +394,7 @@ function ArtifactSection({ guide }: { guide: PublicGuide }) {
               </CardContent>
             </Card>
           ))}
+          </div>
         </div>
         {profile ? (
           <div className="flex flex-col gap-5">
diff --git a/package.json b/package.json
index 51e5b65..ba81f37 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "next dev --turbopack",
     "build": "next build",
     "start": "next start",
     "lint": "eslint .",