diff --git a/app/commission/page.tsx b/app/commission/page.tsx
index 30e58bd..6af8c8b 100644
--- a/app/commission/page.tsx
+++ b/app/commission/page.tsx
@@ -19,22 +19,23 @@ async function CommissionContent() {
   if (!availability.isOpen) return <div className="flex flex-col gap-8"><div className="flex flex-col gap-4 rounded-xl border p-6">
     <h2 className="font-heading text-xl font-semibold">ปิดรับ Commission ชั่วคราว</h2>
     <p className="whitespace-pre-wrap">{availability.closureMessage}</p>
-    <Button variant="outline" nativeButton={false} render={<Link href="/commission/tickets" />}>
-      ดู Ticket และคำขอที่มีอยู่
+    <Button variant="outline" className="min-h-11" nativeButton={false} render={<Link href="/commission/tickets" />}>
+      ดูคำขอของฉัน
     </Button>
   </div><CommissionIntro /></div>;
   const session = await getCustomerSession();
-  if (!session) return <div className="flex flex-col gap-8"><CommissionIntro /><div className="flex flex-col gap-4 rounded-xl border p-6">
-    <p>เข้าสู่ระบบหรือสมัครสมาชิกก่อนเริ่มคำขอ</p>
+  if (!session) return <div className="flex flex-col gap-8"><div className="flex flex-col gap-4 rounded-xl border p-6">
+    <h2 className="font-heading text-xl font-semibold">เริ่มคำขอ</h2>
+    <p>เข้าสู่ระบบหรือสมัครสมาชิกเพื่อบันทึกคำขอ ติดตามผล และพูดคุยกับทีมงาน</p>
     <div className="flex flex-wrap gap-2">
-      <Button nativeButton={false} render={<Link href="/auth/login?next=%2Fcommission" />}>เข้าสู่ระบบ</Button>
-      <Button variant="outline" nativeButton={false} render={<Link href="/auth/register?next=%2Fcommission" />}>สมัครสมาชิก</Button>
+      <Button className="min-h-11" nativeButton={false} render={<Link href="/auth/login?next=%2Fcommission" />}>เข้าสู่ระบบ</Button>
+      <Button variant="outline" className="min-h-11" nativeButton={false} render={<Link href="/auth/register?next=%2Fcommission" />}>สมัครสมาชิก</Button>
     </div>
-  </div></div>;
+  </div><CommissionIntro /></div>;
   const catalog = await getCatalogOptions();
   if (!catalog) return <p>ยังไม่มีข้อมูลตัวละครสำหรับสร้างคำขอ</p>;
   return <div className="flex flex-col gap-6">
-    <div className="flex items-center gap-3"><Button variant="outline" nativeButton={false} render={<Link href="/commission/tickets" />}>ดู Ticket ของฉัน</Button></div>
+    <div className="flex items-center gap-3"><Button variant="outline" className="min-h-11" nativeButton={false} render={<Link href="/commission/tickets" />}>ดูคำขอของฉัน</Button></div>
     <CommissionRequestForm key={session.user.id} catalog={catalog} userId={session.user.id} />
   </div>;
 }
@@ -42,7 +43,7 @@ async function CommissionContent() {
 export default function CommissionPage() {
   return <div className="min-h-svh"><SiteHeader />
     <main className="mx-auto flex w-full max-w-5xl flex-col gap-6 p-4 py-10 sm:p-8">
-      <header><h1 className="font-heading text-3xl font-semibold">Commission</h1>
+      <header><h1 className="font-heading text-3xl font-semibold">จ้างคำนวณทีม</h1>
         <p className="text-muted-foreground">ขอทีม เปรียบเทียบอาวุธหรือกลุ่มดาวตามที่ต้องการ</p></header>
       <Suspense fallback={<Card><CardHeader><Skeleton className="h-6 w-48" /><Skeleton className="h-4 w-full max-w-md" /></CardHeader></Card>}><CommissionContent /></Suspense>
     </main>
diff --git a/app/commission/tickets/page.tsx b/app/commission/tickets/page.tsx
index 8b11369..7d024e7 100644
--- a/app/commission/tickets/page.tsx
+++ b/app/commission/tickets/page.tsx
@@ -30,21 +30,22 @@ export default async function CommissionTicketsPage() {
   return <div className="min-h-svh"><SiteHeader /><CommissionLiveRefresh endpoint="/api/commission/events" userId={session.user.id} />
     <main className="mx-auto flex max-w-4xl flex-col gap-5 p-4 py-10 sm:p-8">
       <div className="flex items-center justify-between gap-3">
-        <h1 className="font-heading text-3xl font-semibold">Ticket ของฉัน</h1>
+        <h1 className="font-heading text-3xl font-semibold">คำขอของฉัน</h1>
       </div>
+      <p className="text-sm text-muted-foreground">แต่ละคำขอมีแชตสำหรับรับผลและพูดคุยกับทีมงาน (Ticket) สถานะแชตบอกว่ายังส่งข้อความได้หรือไม่ ส่วนความคืบหน้าของงานสอบถามได้ในแชต</p>
       <Link href="/commission" className="text-sm underline">สร้างคำขอเพิ่ม</Link>
       {pending.length > 0 && <h2 className="text-xl font-semibold">รอชำระเงิน</h2>}
       {pending.map((checkout) => <Link key={checkout.id} href={`/commission/pay/${checkout.id}`}>
         <Card><CardHeader><CardTitle>รอชำระเงิน - ฿{checkout.amount}</CardTitle></CardHeader>
           <CardContent>{checkout.createdAt.toLocaleString("th-TH")}</CardContent></Card>
       </Link>)}
-      <h2 className="text-xl font-semibold">Ticket ที่ชำระเงินแล้ว</h2>
-      {tickets.length === 0 && <p>ยังไม่มี Ticket</p>}
+      <h2 className="text-xl font-semibold">คำขอที่ชำระเงินแล้ว</h2>
+      {tickets.length === 0 && <p>ยังไม่มีคำขอที่ชำระเงินแล้ว</p>}
       {tickets.map(({ ticket, amount }) => <Link key={ticket.id} href={`/commission/tickets/${ticket.id}`}>
         <Card><CardHeader><CardTitle>{ticket.title || `Ticket #${ticket.id.slice(0, 8)}`}</CardTitle>
           <CardAction><Badge variant={ticket.status === "open" ? "outline" : "destructive"}
             className={ticket.status === "open" ? "border-success/30 bg-success/10 text-success" : undefined}>
-            {ticket.status === "open" ? "เปิดอยู่" : "ปิดแล้ว"}
+            {ticket.status === "open" ? "แชตเปิดอยู่" : "แชตปิดแล้ว"}
           </Badge></CardAction></CardHeader>
           <CardContent>฿{amount} - {ticket.updatedAt.toLocaleString("th-TH")}</CardContent></Card>
       </Link>)}
diff --git a/app/donate/page.tsx b/app/donate/page.tsx
index 70ed0fa..fc183a2 100644
--- a/app/donate/page.tsx
+++ b/app/donate/page.tsx
@@ -1,3 +1,4 @@
+import { Button } from "@/components/ui/button";
 import Image from "@/components/ui/resilient-image";
 
 import { SiteFooter } from "@/components/public/site-footer";
@@ -33,8 +34,9 @@ export default function DonatePage() {
                 priority
               />
             </div>
+            <Button nativeButton={false} className="min-h-11" render={<a href="/donate.jpg" download="buzz-guide-donate-qr.jpg" />}>บันทึก QR สำหรับโอนเงิน</Button>
             <p className="text-sm leading-6 text-muted-foreground">
-              สามารถสแกน QR Code ได้ทุกแอปธนาคาร
+              สแกน QR ด้วยแอปธนาคาร หรือบันทึก QR แล้วเลือกรูปในแอปธนาคารบนมือถือเครื่องนี้
               <br />
               ขอบคุณทุกการสนับสนุน เลิฟๆคับ
             </p>
diff --git a/app/not-found.tsx b/app/not-found.tsx
index 92b1ab5..e71aa07 100644
--- a/app/not-found.tsx
+++ b/app/not-found.tsx
@@ -20,13 +20,13 @@ export default function NotFound() {
         <Empty>
           <EmptyHeader>
             <EmptyMedia variant="icon"><MapPinOffIcon aria-hidden="true" /></EmptyMedia>
-            <EmptyTitle>ไม่พบคู่มือนี้</EmptyTitle>
+            <EmptyTitle>ไม่พบหน้านี้</EmptyTitle>
             <EmptyDescription>
-              หน้านี้อาจถูกซ่อน เปลี่ยนชื่อ หรือยังไม่มีเนื้อหาที่เผยแพร่
+              ลิงก์อาจไม่ถูกต้อง หน้าถูกย้าย หรือคุณไม่มีสิทธิ์เข้าถึง
             </EmptyDescription>
           </EmptyHeader>
           <EmptyContent>
-            <Button render={<Link href="/" />}>กลับไปหน้ารวมตัวละคร</Button>
+            <Button className="min-h-11" nativeButton={false} render={<Link href="/" />}>กลับไปหน้ารวมตัวละคร</Button>
           </EmptyContent>
         </Empty>
       </main>
diff --git a/app/stygian/page.tsx b/app/stygian/page.tsx
index 23bbad2..becda36 100644
--- a/app/stygian/page.tsx
+++ b/app/stygian/page.tsx
@@ -28,10 +28,11 @@ export default async function StygianPage({ searchParams }: { searchParams: Prom
         <header>
           <p className="text-sm font-medium text-primary">Stygian Onslaught</p>
           <h1 className="font-heading text-4xl font-semibold">ไกด์ Stygian</h1>
+          <p className="mt-3 text-muted-foreground">เลือกเวอร์ชัน ระดับบอส และบอสที่ต้องการดู เพื่ออ่านทีมแนะนำและกลไกของบอส</p>
         </header>
-        {schedules.length ? <nav className="flex flex-wrap gap-2" aria-label="เวอร์ชัน Stygian">{schedules.map((entry) =>
+        {schedules.length ? <div className="flex flex-col gap-2"><p className="text-sm font-medium">เลือกเวอร์ชัน</p><nav className="flex flex-wrap gap-2" aria-label="เวอร์ชัน Stygian">{schedules.map((entry) =>
           <Link key={entry.scheduleId} href={`/stygian?schedule=${entry.scheduleId}`} aria-current={entry.scheduleId === selectedId ? "page" : undefined}
-            className={buttonVariants({ variant: entry.scheduleId === selectedId ? "default" : "outline", size: "sm" })}>{entry.challengeName}</Link>)}</nav> : null}
+            className={buttonVariants({ variant: entry.scheduleId === selectedId ? "default" : "outline", size: "sm", className: "max-sm:min-h-11" })}>{entry.challengeName}</Link>)}</nav></div> : null}
         {schedule && catalog ? <StygianGuide schedule={schedule} catalog={catalog} /> : (
           <Empty className="border"><EmptyHeader><EmptyTitle>ยังไม่มีไกด์ Stygian</EmptyTitle><EmptyDescription>กำลังเตรียมข้อมูล กลับมาอ่านได้ภายหลัง หรือเลือกไกด์ตัวละครระหว่างรอ</EmptyDescription></EmptyHeader><Link href="/" className={buttonVariants({ variant: "outline" })}>เลือกไกด์ตัวละคร</Link></Empty>
         )}
diff --git a/app/thanks/page.tsx b/app/thanks/page.tsx
index 3a01847..4595a18 100644
--- a/app/thanks/page.tsx
+++ b/app/thanks/page.tsx
@@ -8,6 +8,7 @@ import {
   AvatarFallback,
   AvatarImage,
 } from "@/components/ui/avatar";
+import { SiteHeader } from "@/components/public/site-header";
 import { SiteFooter } from "@/components/public/site-footer";
 import { Button } from "@/components/ui/button";
 import {
@@ -55,7 +56,7 @@ const specialThanks: ThanksProfile[] = [
 ];
 
 export const metadata: Metadata = {
-  title: "Special Thanks",
+  title: "ขอบคุณผู้สนับสนุน",
   description: "ขอบคุณทุกคนที่มีส่วนช่วยให้ Buzz Guide เกิดขึ้นได้",
 };
 
@@ -66,28 +67,12 @@ function getInitials(username: string) {
 export default function ThanksPage() {
   return (
     <div className="flex min-h-svh flex-col bg-background">
-      <header className="border-b">
-        <div className="mx-auto flex min-h-16 w-full max-w-6xl items-center px-4 sm:px-6">
-          <Link
-            href="/"
-            className="flex min-h-11 items-center gap-3 rounded-lg font-heading font-semibold focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-          >
-            <Image
-              src="/icon.png"
-              alt=""
-              width={36}
-              height={36}
-              className="size-9 object-contain"
-            />
-            <span>ไกด์เกนชินไม่ใช่เกมมือถือ</span>
-          </Link>
-        </div>
-      </header>
+      <SiteHeader />
 
       <main className="mx-auto flex w-full max-w-6xl flex-col gap-10 px-4 py-12 sm:px-6 sm:py-16">
         <header className="mx-auto flex max-w-2xl flex-col gap-3 text-center">
           <h1 className="font-heading text-4xl font-semibold tracking-tight sm:text-5xl">
-            Special Thanks
+            ขอบคุณผู้สนับสนุน
           </h1>
           <p className="text-lg leading-8 text-muted-foreground">
             ขอบคุณทุกคนที่มอบแรงสนับสนุนและเวลาให้เว็บไซต์นี้เกิดขึ้นได้
diff --git a/bun.lock b/bun.lock
index 49312b9..1a5eaae 100644
--- a/bun.lock
+++ b/bun.lock
@@ -31,6 +31,7 @@
         "emoji-picker-react": "^4.22.3",
         "emoji-regex": "^11.0.0",
         "entities": "7.0.1",
+        "input-otp": "^1.5.0",
         "ioredis": "^6.0.0",
         "lucide-react": "^1.35.0",
         "modern-screenshot": "^4.7.0",
@@ -1296,6 +1297,8 @@
 
     "inherits": ["inherits@2.0.4", "", {}, "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="],
 
+    "input-otp": ["input-otp@1.5.0", "", { "peerDependencies": { "react": "^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc" } }, "sha512-3AcfdW1sNG0FmSA5hHMBXG7jNW5CdcdKs8ln8JOmn6S2SRkoXoJx+2UwC+ZvjflfnOdHJx0SfQ9/YjlxVYLtGQ=="],
+
     "internal-slot": ["internal-slot@1.1.0", "", { "dependencies": { "es-errors": "^1.3.0", "hasown": "^2.0.2", "side-channel": "^1.1.0" } }, "sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw=="],
 
     "internmap": ["internmap@2.0.3", "", {}, "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg=="],
diff --git a/components/admin/guide-section-editor.tsx b/components/admin/guide-section-editor.tsx
index 07ac11c..644061d 100644
--- a/components/admin/guide-section-editor.tsx
+++ b/components/admin/guide-section-editor.tsx
@@ -2670,7 +2670,7 @@ function TeamImportPreviewCard({
     <Card className={cn(checked && "ring-2 ring-primary")}>
       <CardHeader>
         <CardTitle>{team.title}</CardTitle>
-        <CardDescription>โรเทชั่น {seconds} วิ{sourceLabel ? ` · ${sourceLabel}` : ""}</CardDescription>
+        <CardDescription>โรเทชั่น {seconds} วิ{sourceLabel ? ` - ${sourceLabel}` : ""}</CardDescription>
         <CardAction>
           <Field orientation="horizontal">
             <Checkbox id={checkboxId} checked={checked} disabled={disabled} onCheckedChange={(value) => onCheckedChange(value === true)} />
@@ -4025,7 +4025,7 @@ function TeamEditor({
               <>
                 <div className="flex flex-wrap items-center justify-between gap-2">
                   <p className="text-sm text-muted-foreground">
-                    พบ {everywhereTeams.length} Team · เลือกได้ {eligibleEverywhereTeams.length} Team
+                    พบ {everywhereTeams.length} Team - เลือกได้ {eligibleEverywhereTeams.length} Team
                   </p>
                   <Button
                     type="button"
@@ -4051,7 +4051,7 @@ function TeamEditor({
                         artifacts={artifacts}
                         checked={eligible && everywhereSelectedIds.has(team.id)}
                         checkboxId={`everywhere-team-${team.id}`}
-                        sourceLabel={`${team.guideName}${team.conditionName ? ` · ${team.conditionName}` : ""}`}
+                        sourceLabel={`${team.guideName}${team.conditionName ? ` - ${team.conditionName}` : ""}`}
                         disabled={!eligible}
                         onCheckedChange={(checked) => setEverywhereSelectedIds((current) => {
                           const next = new Set(current);
diff --git a/components/auth/account-form.tsx b/components/auth/account-form.tsx
index 15d3d3c..046e494 100644
--- a/components/auth/account-form.tsx
+++ b/components/auth/account-form.tsx
@@ -3,11 +3,15 @@
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useEffect, useRef, useState, type FormEvent } from "react";
+import { EyeClosedIcon, EyeIcon } from "lucide-react";
+import { REGEXP_ONLY_DIGITS } from "input-otp";
 import { Alert, AlertDescription } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Field, FieldGroup, FieldLabel, FieldDescription } from "@/components/ui/field";
 import { Input } from "@/components/ui/input";
+import { InputOTP, InputOTPGroup, InputOTPSlot } from "@/components/ui/input-otp";
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from "@/components/ui/input-group";
 import { authClient } from "@/lib/auth/client";
 
 declare global {
@@ -20,6 +24,7 @@ declare global {
         "error-callback": () => void;
       }): string;
       reset(widgetId: string): void;
+      remove(widgetId: string): void;
     };
   }
 }
@@ -44,6 +49,8 @@ export function AccountForm({
   const [pendingEmail, setPendingEmail] = useState("");
   const [notice, setNotice] = useState("");
   const [token, setToken] = useState("");
+  const [captchaError, setCaptchaError] = useState("");
+  const [captchaAttempt, setCaptchaAttempt] = useState(0);
   const [showPassword, setShowPassword] = useState(false);
   const [resendSeconds, setResendSeconds] = useState(0);
   const formRef = useRef<HTMLFormElement>(null);
@@ -57,24 +64,50 @@ export function AccountForm({
   }, [resendSeconds]);
   useEffect(() => {
     if (!captcha || pendingEmail) return;
+    let active = true;
     const script = document.createElement("script");
-    script.src =
-      "https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit";
+    script.src = "https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit";
     script.async = true;
+    const failed = () => {
+      if (!active) return;
+      window.clearTimeout(timeout);
+      setToken("");
+      setCaptchaError("โหลดการตรวจสอบความปลอดภัยไม่สำเร็จ กรุณาลองอีกครั้ง");
+    };
+    const timeout = window.setTimeout(failed, 15000);
+    script.onerror = failed;
     script.onload = () => {
-      if (container.current && window.turnstile && !widget.current)
+      if (!active) return;
+      if (!container.current || !window.turnstile) return failed();
+      try {
         widget.current = window.turnstile.render(container.current, {
           sitekey: siteKey,
-          callback: (value: string) => setToken(value),
-          "expired-callback": () => setToken(""),
-          "error-callback": () => setToken(""),
+          callback: (value: string) => {
+            if (!active) return;
+            window.clearTimeout(timeout);
+            setCaptchaError("");
+            setToken(value);
+          },
+          "expired-callback": () => {
+            if (!active) return;
+            setToken("");
+            setCaptchaError("การตรวจสอบหมดอายุ กรุณาตรวจสอบอีกครั้ง");
+          },
+          "error-callback": failed,
         });
+        window.clearTimeout(timeout);
+      } catch { failed(); }
     };
-    document.head.append(script);
+    if (window.turnstile) script.onload(new Event("load"));
+    else document.head.append(script);
     return () => {
+      active = false;
+      window.clearTimeout(timeout);
       script.remove();
+      if (widget.current) window.turnstile?.remove(widget.current);
+      widget.current = null;
     };
-  }, [captcha, siteKey, pendingEmail]);
+  }, [captcha, siteKey, pendingEmail, captchaAttempt]);
 
   async function sendRegistrationOtp() {
     if (!register || busy || (pendingEmail && resendSeconds > 0)) return;
@@ -165,7 +198,8 @@ export function AccountForm({
     <Card className="w-full max-w-sm">
       <CardHeader>
         <CardTitle>{register ? pendingEmail ? "ยืนยันอีเมล" : "สร้างบัญชี Buzz Guide" : "เข้าสู่ระบบ"}</CardTitle>
-        {register && <CardDescription>ขั้นตอน {pendingEmail ? "2 จาก 2 · ยืนยันอีเมล" : "1 จาก 2 · ข้อมูลบัญชี"}</CardDescription>}
+        {nextPath.startsWith("/commission") && <CardDescription>เข้าสู่ระบบเพื่อบันทึกคำขอ รับผล และพูดคุยกับทีมงาน</CardDescription>}
+        {register && <CardDescription>ขั้นตอน {pendingEmail ? "2 จาก 2 - ยืนยันอีเมล" : "1 จาก 2 - ข้อมูลบัญชี"}</CardDescription>}
       </CardHeader>
       <CardContent className="flex flex-col gap-4">
         {verified && <Alert><AlertDescription>ยืนยันอีเมลแล้ว กรุณาเข้าสู่ระบบ</AlertDescription></Alert>}
@@ -185,26 +219,46 @@ export function AccountForm({
                   autoComplete="email" disabled={busy} />
               </Field>
               <Field>
-                <div className="flex items-center justify-between gap-2">
-                  <FieldLabel htmlFor="password">รหัสผ่าน</FieldLabel>
-                  <Button type="button" variant="ghost" size="sm" disabled={busy}
-                    aria-pressed={showPassword} onClick={() => setShowPassword((current) => !current)}>
-                    {showPassword ? "ซ่อนรหัสผ่าน" : "แสดงรหัสผ่าน"}
-                  </Button>
-                </div>
-                <Input id="password" name="password" type={showPassword ? "text" : "password"}
-                  required minLength={6} autoComplete={register ? "new-password" : "current-password"}
-                  aria-describedby={register ? "password-help" : undefined} disabled={busy} />
+                <FieldLabel htmlFor="password">รหัสผ่าน</FieldLabel>
+                <InputGroup>
+                  <InputGroupInput id="password" name="password" type={showPassword ? "text" : "password"}
+                    required minLength={6} autoComplete={register ? "new-password" : "current-password"}
+                    aria-describedby={register ? "password-help" : undefined} disabled={busy} />
+                  <InputGroupAddon align="inline-end" className="py-0">
+                    <InputGroupButton size="icon-xs" disabled={busy}
+                      aria-label={showPassword ? "ซ่อนรหัสผ่าน" : "แสดงรหัสผ่าน"}
+                      aria-controls="password" aria-pressed={showPassword}
+                      onClick={() => setShowPassword((current) => !current)}>
+                      {showPassword ? <EyeIcon aria-hidden="true" /> : <EyeClosedIcon aria-hidden="true" />}
+                    </InputGroupButton>
+                  </InputGroupAddon>
+                </InputGroup>
                 {register && <FieldDescription id="password-help">ใช้รหัสผ่านอย่างน้อย 6 ตัวอักษร</FieldDescription>}
               </Field>
-              {captcha && <div ref={container} />}
+              {captcha && <Field>
+                <p className="text-sm text-muted-foreground">ตรวจสอบความปลอดภัยก่อนดำเนินการ</p>
+                <div ref={container} />
+                {captchaError && <Alert variant="destructive" role="alert"><AlertDescription>{captchaError}</AlertDescription></Alert>}
+                {captchaError && <Button type="button" variant="outline" disabled={busy} onClick={() => {
+                  setToken(""); setCaptchaError(""); setCaptchaAttempt((attempt) => attempt + 1);
+                }}>ลองตรวจสอบอีกครั้ง</Button>}
+              </Field>}
             </> : <>
               <p className="text-sm">ส่งรหัสไปที่ <strong className="break-all">{pendingEmail}</strong></p>
+              <p className="text-sm text-muted-foreground">หากกรอกอีเมลผิด ให้เริ่มสมัครด้วยอีเมลที่ใช้งานได้ บัญชีเดิมจะยังไม่ยืนยันอีเมล</p>
+              <Button type="button" variant="outline" disabled={busy} onClick={() => {
+                setPendingEmail(""); setNotice(""); setError(""); setToken("");
+                setCaptchaError(""); setResendSeconds(0); setCaptchaAttempt((attempt) => attempt + 1);
+              }}>ใช้อีเมลอื่น</Button>
               <Field>
                 <FieldLabel htmlFor="otp">รหัสยืนยัน 6 หลัก</FieldLabel>
-                <Input id="otp" name="otp" inputMode="numeric" autoComplete="one-time-code"
-                  pattern="[0-9]{6}" minLength={6} maxLength={6} required autoFocus
-                  placeholder="000000" aria-describedby="otp-help" disabled={busy} />
+                <InputOTP id="otp" name="otp" containerClassName="w-full" inputMode="numeric" autoComplete="one-time-code"
+                  pattern={REGEXP_ONLY_DIGITS} minLength={6} maxLength={6} required autoFocus
+                  aria-describedby="otp-help" disabled={busy}>
+                  <InputOTPGroup className="w-full">
+                    {Array.from({ length: 6 }, (_, index) => <InputOTPSlot key={index} index={index} className="flex-1" />)}
+                  </InputOTPGroup>
+                </InputOTP>
                 <FieldDescription id="otp-help">รหัสมีอายุ 5 นาที หากไม่พบอีเมล ลองดูในโฟลเดอร์สแปม</FieldDescription>
               </Field>
               <Button type="button" variant="outline" onClick={() => void sendRegistrationOtp()}
@@ -214,7 +268,7 @@ export function AccountForm({
             </>}
             {error && <Alert variant="destructive" role="alert"><AlertDescription>{error}</AlertDescription></Alert>}
             <Button type="submit" disabled={busy || (captcha && !token && !pendingEmail)}>
-              {busy ? "กำลังดำเนินการ…" : register ? pendingEmail ? "ยืนยันและสร้างบัญชี" : "ถัดไป · ส่งรหัสยืนยัน" : "เข้าสู่ระบบ"}
+              {busy ? "กำลังดำเนินการ…" : register ? pendingEmail ? "ยืนยันและสร้างบัญชี" : "ถัดไป - ส่งรหัสยืนยัน" : "เข้าสู่ระบบ"}
             </Button>
           </FieldGroup>
         </form>
diff --git a/components/auth/email-action-form.tsx b/components/auth/email-action-form.tsx
index 066a1ad..2ffe3d0 100644
--- a/components/auth/email-action-form.tsx
+++ b/components/auth/email-action-form.tsx
@@ -73,7 +73,7 @@ export function EmailActionForm({ mode, token = "", invalidToken = false, nextPa
               <Input id="confirm-password" name="confirmPassword" type="password" minLength={6} maxLength={128}
                 autoComplete="new-password" required disabled={busy} /></Field>
           </>}
-          <Button type="submit" disabled={busy}>{busy ? "กำลังดำเนินการ..." :
+          <Button type="submit" className="min-h-11" disabled={busy}>{busy ? "กำลังดำเนินการ..." :
             mode === "forgot" ? "ส่งลิงก์รีเซ็ต" : "ตั้งรหัสผ่าน"}</Button>
         </FieldGroup>
       </form>}
diff --git a/components/auth/registration-otp-form.tsx b/components/auth/registration-otp-form.tsx
index f5a2c06..01c1219 100644
--- a/components/auth/registration-otp-form.tsx
+++ b/components/auth/registration-otp-form.tsx
@@ -3,11 +3,13 @@
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useRef, useState, type FormEvent } from "react";
+import { REGEXP_ONLY_DIGITS } from "input-otp";
 import { Alert, AlertDescription } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Field, FieldGroup, FieldLabel } from "@/components/ui/field";
 import { Input } from "@/components/ui/input";
+import { InputOTP, InputOTPGroup, InputOTPSlot } from "@/components/ui/input-otp";
 import { authClient } from "@/lib/auth/client";
 
 export function RegistrationOtpForm({ email, nextPath, setup }: {
@@ -66,8 +68,12 @@ export function RegistrationOtpForm({ email, nextPath, setup }: {
             <Input ref={emailRef} id="otp-email" name="email" type="email" defaultValue={email} autoComplete="email" required disabled={busy || sending} />
           </Field>
           <Field><FieldLabel htmlFor="otp-code">รหัส OTP</FieldLabel>
-            <Input id="otp-code" name="otp" inputMode="numeric" autoComplete="one-time-code"
-              pattern="[0-9]{6}" minLength={6} maxLength={6} required disabled={busy || sending} />
+            <InputOTP id="otp-code" name="otp" containerClassName="w-full" inputMode="numeric" autoComplete="one-time-code"
+              pattern={REGEXP_ONLY_DIGITS} minLength={6} maxLength={6} required disabled={busy || sending}>
+              <InputOTPGroup className="w-full">
+                {Array.from({ length: 6 }, (_, index) => <InputOTPSlot key={index} index={index} className="flex-1" />)}
+              </InputOTPGroup>
+            </InputOTP>
           </Field>
           <Button type="submit" disabled={busy || sending}>{busy ? "กำลังยืนยัน..." : "ยืนยันอีเมล"}</Button>
         </FieldGroup>
diff --git a/components/auth/sign-out-button.tsx b/components/auth/sign-out-button.tsx
index f3924a9..63c5546 100644
--- a/components/auth/sign-out-button.tsx
+++ b/components/auth/sign-out-button.tsx
@@ -2,11 +2,18 @@
 
 import { useRouter } from "next/navigation";
 import { LogOutIcon } from "lucide-react";
+import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
 import { Button } from "@/components/ui/button";
 import { authClient } from "@/lib/auth/client";
 import { unsubscribeCommissionPush } from "@/components/commission/push-client";
 
-export function SignOutButton({ admin = false }: { admin?: boolean }) {
+export function SignOutButton({
+  admin = false,
+  menuItem = false,
+}: {
+  admin?: boolean;
+  menuItem?: boolean;
+}) {
   const router = useRouter();
   const { data } = authClient.useSession();
   if (!admin && !data?.user) return null;
@@ -14,11 +21,27 @@ export function SignOutButton({ admin = false }: { admin?: boolean }) {
   async function signOut() {
     await unsubscribeCommissionPush().catch(() => undefined);
     await authClient.signOut();
-    router.push(admin ? "/auth/login?next=%2Fadmin" : "/commission");
+    router.push(admin ? "/auth/login?next=%2Fadmin" : "/");
     router.refresh();
   }
 
-  return <Button type="button" variant="ghost" size="icon-sm" aria-label="ออกจากระบบ" onClick={() => void signOut()}>
-    <LogOutIcon />
-  </Button>;
+  if (menuItem)
+    return (
+      <DropdownMenuItem onClick={() => void signOut()}>
+        <LogOutIcon/>
+       <span className="text-red-400">ออกจากระบบ</span>
+      </DropdownMenuItem>
+    );
+
+  return (
+    <Button
+      type="button"
+      variant="ghost"
+      size="icon-sm"
+      aria-label="ออกจากระบบ"
+      onClick={() => void signOut()}
+    >
+      <LogOutIcon />
+    </Button>
+  );
 }
diff --git a/components/commission/commission-intro.tsx b/components/commission/commission-intro.tsx
index 660b844..eaafd91 100644
--- a/components/commission/commission-intro.tsx
+++ b/components/commission/commission-intro.tsx
@@ -7,7 +7,7 @@ import { Separator } from "@/components/ui/separator";
 const steps = [
   { title: "1. เลือกรายการ", description: "เลือกทีม อาวุธ หรือกลุ่มดาวที่ต้องการคำนวณ" },
   { title: "2. ชำระเงิน", description: "ตรวจสอบยอด สแกน PromptPay และส่งสลิป" },
-  { title: "3. รับผลใน Ticket", description: "ติดตามคำขอและพูดคุยเรื่องผลลัพธ์ใน Ticket ของคุณ" },
+  { title: "3. รับผลในแชตคำขอ", description: "ติดตามคำขอและพูดคุยเรื่องผลลัพธ์ในแชตของคำขอ (Ticket)" },
 ];
 
 const sampleMembers = [
@@ -21,7 +21,7 @@ function CommissionTeamPreview() {
   return <Card>
     <CardHeader>
       <CardTitle>ตัวอย่างทีม 4 ตัวละคร</CardTitle>
-      <CardDescription>โรเทชั่น 20 วิ · ข้อมูลสมมติสำหรับดูรูปแบบผลลัพธ์</CardDescription>
+      <CardDescription>โรเทชั่น 20 วิ - ข้อมูลสมมติสำหรับดูรูปแบบผลลัพธ์</CardDescription>
     </CardHeader>
     <CardContent className="flex flex-col gap-4">
       <div className="grid grid-cols-4 gap-1 sm:gap-3">
@@ -54,7 +54,7 @@ export function CommissionIntro() {
     <div>
       <h2 id="commission-how-it-works" className="font-heading text-2xl font-semibold">ขอคำนวณแบบที่ต้องการ</h2>
       <p className="mt-2 text-muted-foreground">เลือกได้ทั้งจัดทีม เปรียบเทียบอาวุธ และเปรียบเทียบกลุ่มดาว โดยเห็นยอดก่อนชำระเงิน</p>
-      <p className="mt-2 text-sm text-muted-foreground">ระยะเวลาจัดทำ 1–7 วันหลังยืนยันการชำระเงิน ขึ้นอยู่กับขนาดคำขอ งานเล็กอาจเสร็จภายในประมาณ 4 ชั่วโมง ติดตามความคืบหน้าและสอบถามได้ใน Ticket</p>
+      <p className="mt-2 text-sm text-muted-foreground">ระยะเวลาจัดทำ 1–7 วันหลังยืนยันการชำระเงิน ขึ้นอยู่กับขนาดคำขอ งานเล็กอาจเสร็จภายในประมาณ 4 ชั่วโมง ติดตามความคืบหน้าและสอบถามได้ในแชตของคำขอ (Ticket)</p>
     </div>
     <div className="grid gap-3 sm:grid-cols-3">
       {steps.map((step) => <Card key={step.title} size="sm">
diff --git a/components/commission/income-calendar.tsx b/components/commission/income-calendar.tsx
index 3725ffb..aef4e09 100644
--- a/components/commission/income-calendar.tsx
+++ b/components/commission/income-calendar.tsx
@@ -15,7 +15,7 @@ const date = new Intl.DateTimeFormat("th-TH", { timeZone: "Asia/Bangkok", day: "
 
 function Totals({ amount }: { amount: number }) {
   const shares = commissionIncomeShares(amount);
-  return <span>รวม {money(amount * 100)} · Buzz {money(shares.buzzSatang)} · Gunshin {money(shares.gunshinSatang)}</span>;
+  return <span>รวม {money(amount * 100)} - Buzz {money(shares.buzzSatang)} - Gunshin {money(shares.gunshinSatang)}</span>;
 }
 
 export function CommissionIncomeCalendar({ period, rows }: { period: Period; rows: IncomeRow[] }) {
diff --git a/components/commission/mobile-slip-form.tsx b/components/commission/mobile-slip-form.tsx
index 0cc90eb..a12d05b 100644
--- a/components/commission/mobile-slip-form.tsx
+++ b/components/commission/mobile-slip-form.tsx
@@ -49,7 +49,7 @@ export function MobileSlipForm() {
     {ready && <><p>ยอดชำระ ฿{amount}</p><form onSubmit={submit} className="flex flex-col gap-4">
       <Field><FieldLabel htmlFor="mobile-slip">เลือกรูปสลิปจากแอปธนาคาร</FieldLabel>
         <Input id="mobile-slip" name="file" type="file" accept="image/png,image/jpeg,image/webp" required disabled={busy} /></Field>
-      <Button type="submit" disabled={busy}>{busy ? "กำลังตรวจสอบ..." : "ตรวจสอบสลิป"}</Button>
+      <Button type="submit" className="min-h-11" disabled={busy}>{busy ? "กำลังตรวจสอบ..." : "ตรวจสอบสลิป"}</Button>
     </form></>}
     {error && <Alert variant="destructive"><AlertDescription>{error}</AlertDescription></Alert>}
   </div>;
diff --git a/components/commission/mobile-slip-handoff.tsx b/components/commission/mobile-slip-handoff.tsx
index 90c4d6e..6b89b0d 100644
--- a/components/commission/mobile-slip-handoff.tsx
+++ b/components/commission/mobile-slip-handoff.tsx
@@ -70,15 +70,15 @@ export function MobileSlipHandoff({ checkoutId }: { checkoutId: string }) {
   }, [checkoutId, link, router]);
 
   return <div className="flex w-full flex-col items-start gap-3">
-    <Button type="button" variant="link" className="h-auto px-0 text-foreground underline" disabled={busy}
+    <Button type="button" variant="link" className="min-h-11 px-0 text-foreground underline" disabled={busy}
       onClick={() => { if (link && !expired && secondsLeft > 0) setOpen(true); else void createLink(); }}>
-      {busy ? "กำลังสร้าง QR..." : "อัปโหลดจากมือถือ"}
+      {busy ? "กำลังสร้าง QR..." : "ใช้มือถืออีกเครื่องอัปโหลด"}
     </Button>
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogContent>
         <DialogHeader>
-          <DialogTitle>อัปโหลดสลิปจากมือถือ</DialogTitle>
-          <DialogDescription>สแกน QR ด้วยมือถือ แล้วเลือกรูปสลิปจากแอปธนาคาร</DialogDescription>
+          <DialogTitle>ใช้มือถืออีกเครื่องอัปโหลดสลิป</DialogTitle>
+          <DialogDescription>สแกน QR นี้ด้วยมือถืออีกเครื่อง แล้วเลือกรูปสลิปจากแอปธนาคาร หากใช้มือถือเครื่องนี้ ให้ปิดหน้าต่างแล้วเลือกไฟล์สลิปได้โดยตรง</DialogDescription>
         </DialogHeader>
         {link && <div className="flex flex-col items-center gap-3">
           {!expired && <>
@@ -86,7 +86,7 @@ export function MobileSlipHandoff({ checkoutId }: { checkoutId: string }) {
             <img src={link.qr} alt="QR สำหรับเปิดหน้าอัปโหลดสลิปบนมือถือ" width={240} height={240} />
             <p className="text-center text-sm text-muted-foreground">เวลาที่เหลือ {timeLeft}</p>
           </>}
-          {expired && <p className="text-center text-sm text-muted-foreground">ลิงก์หมดอายุแล้ว ปิดหน้าต่างนี้แล้วกดอัปโหลดจากมือถืออีกครั้ง</p>}
+          {expired && <p className="text-center text-sm text-muted-foreground">ลิงก์หมดอายุแล้ว ปิดหน้าต่างนี้แล้วกดใช้มือถืออีกเครื่องอัปโหลดอีกครั้ง</p>}
         </div>}
         {error && <Alert variant="destructive"><AlertDescription>{error}</AlertDescription></Alert>}
       </DialogContent>
diff --git a/components/commission/payment-form.tsx b/components/commission/payment-form.tsx
index 8cd0609..87eb36c 100644
--- a/components/commission/payment-form.tsx
+++ b/components/commission/payment-form.tsx
@@ -53,7 +53,9 @@ export function CommissionPaymentForm({ checkoutId, amountBaht, qr, expiresAt, s
       {/* Generated locally from the fixed checkout amount and configured recipient. */}
       {/* eslint-disable-next-line @next/next/no-img-element */}
       <img src={qr} alt={`PromptPay QR สำหรับชำระเงิน ${amountBaht} บาท`} width={300} height={300} />
+      <Button nativeButton={false} className="min-h-11" render={<a href={qr} download="promptpay-qr.png" />}>บันทึก QR สำหรับชำระเงิน</Button>
       <strong>฿{amountBaht}</strong>
+      <p className="text-center text-sm text-muted-foreground">ใช้มือถือเครื่องนี้ชำระเงิน: บันทึก QR แล้วเลือกรูปในแอปธนาคาร</p>
       <p className="text-sm text-muted-foreground">โอนเงินแล้วอัปโหลดรูปสลิปเพื่อยืนยัน</p>
       <p className="text-sm text-muted-foreground">เวลาชำระเงินที่เหลือ {String(Math.floor(secondsLeft / 60)).padStart(2, "0")}:{String(secondsLeft % 60).padStart(2, "0")}</p>
     </CardContent></Card>
@@ -61,6 +63,6 @@ export function CommissionPaymentForm({ checkoutId, amountBaht, qr, expiresAt, s
     <Field><FieldLabel htmlFor="slip">อัปโหลดสลิปที่ชำระเงินแล้ว</FieldLabel>
       <Input id="slip" name="file" type="file" accept="image/png,image/jpeg,image/webp" required />
       <MobileSlipHandoff checkoutId={checkoutId} /></Field>
-    <Button type="submit" disabled={busy}>{busy ? "กำลังตรวจสอบ..." : "ตรวจสอบสลิปและเปิด Ticket"}</Button>
+    <Button type="submit" className="min-h-11" disabled={busy}>{busy ? "กำลังตรวจสอบ..." : "ตรวจสอบสลิปและเปิดแชตคำขอ"}</Button>
   </FieldGroup>{error && <Alert variant="destructive"><AlertDescription>{error}</AlertDescription></Alert>}</form></>;
 }
diff --git a/components/commission/request-form.tsx b/components/commission/request-form.tsx
index 19a9ddc..ccce414 100644
--- a/components/commission/request-form.tsx
+++ b/components/commission/request-form.tsx
@@ -171,11 +171,11 @@ export function CommissionRequestForm({ catalog, userId }: { catalog: Catalog; u
                     }} triggerProps={{ size: "sm", className: "h-6 min-w-0 flex-1 justify-center px-1 text-xs [&>svg]:hidden" }} />
                 </div>
                 <p className="mt-1 truncate text-center text-xs font-medium" title={character?.name}>{character?.name ?? "เลือกตัวละคร"}</p>
-                {errorsAt(`teams.${teamIndex}.members.${memberIndex}`).length > 0 && <FieldError>{errorsAt(`teams.${teamIndex}.members.${memberIndex}`).join(" · ")}</FieldError>}
+                {errorsAt(`teams.${teamIndex}.members.${memberIndex}`).length > 0 && <FieldError>{errorsAt(`teams.${teamIndex}.members.${memberIndex}`).join(" - ")}</FieldError>}
               </div>;
             })}
           </div>
-          {issues.some((issue) => issue.path === `teams.${teamIndex}`) && <FieldError data-commission-errors tabIndex={-1}>{issues.filter((issue) => issue.path === `teams.${teamIndex}`).map((issue) => issue.message).join(" · ")}</FieldError>}
+          {issues.some((issue) => issue.path === `teams.${teamIndex}`) && <FieldError data-commission-errors tabIndex={-1}>{issues.filter((issue) => issue.path === `teams.${teamIndex}`).map((issue) => issue.message).join(" - ")}</FieldError>}
           <Button variant="outline" onClick={() => patch({ teams: request.teams.filter((_, index) => index !== teamIndex) })}>ลบทีม</Button>
         </CardContent></Card>)}
         <Button variant="outline" onClick={() => patch({ teams: [...request.teams, blankTeam()] })}>เพิ่มทีม</Button>
@@ -234,7 +234,7 @@ export function CommissionRequestForm({ catalog, userId }: { catalog: Catalog; u
               {catalog.characters.find((item) => item.key === set.characterKey)?.name ?? "เลือกตัวละคร"}</p>
           </div>
         </div>
-        {errorsAt(`weapons.${index}`).length > 0 && <FieldError data-commission-errors tabIndex={-1}>{errorsAt(`weapons.${index}`).join(" · ")}</FieldError>}
+        {errorsAt(`weapons.${index}`).length > 0 && <FieldError data-commission-errors tabIndex={-1}>{errorsAt(`weapons.${index}`).join(" - ")}</FieldError>}
         <Button variant="outline" disabled={set.weaponKeys.length >= 100} onClick={() => {
           const weapons = structuredClone(request.weapons); weapons[index].weaponKeys.push(""); patch({ weapons });
         }}>เพิ่มอาวุธ</Button>
@@ -263,21 +263,22 @@ export function CommissionRequestForm({ catalog, userId }: { catalog: Catalog; u
               {catalog.characters.find((item) => item.key === set.characterKey)?.name ?? "เลือกตัวละคร"}</p>
           </div>
         </div>
-        {errorsAt(`constellations.${index}`).length > 0 && <FieldError data-commission-errors tabIndex={-1}>{errorsAt(`constellations.${index}`).join(" · ")}</FieldError>}
+        {errorsAt(`constellations.${index}`).length > 0 && <FieldError data-commission-errors tabIndex={-1}>{errorsAt(`constellations.${index}`).join(" - ")}</FieldError>}
         <Button variant="outline" onClick={() => patch({ constellations: request.constellations.filter((_, i) => i !== index) })}>ลบชุดนี้</Button>
       </FieldGroup>)}
       <Button variant="outline" onClick={() => patch({ constellations: [...request.constellations, { characterKey: "", levels: [] }] })}>เพิ่มชุดกลุ่มดาว</Button>
     </CardContent></Card>
     <Card className="sticky bottom-2 z-20 shadow-lg">
       <CardHeader className="hidden sm:grid"><CardTitle>สรุปคำขอ</CardTitle><CardDescription>
-        {request.teams.length} ทีม · {request.weapons.reduce((sum, set) => sum + set.weaponKeys.filter(Boolean).length, 0)} อาวุธ · {request.constellations.reduce((sum, set) => sum + set.levels.length, 0)} ระดับกลุ่มดาว
+        {request.teams.length} ทีม - {request.weapons.reduce((sum, set) => sum + set.weaponKeys.filter(Boolean).length, 0)} อาวุธ - {request.constellations.reduce((sum, set) => sum + set.levels.length, 0)} ระดับกลุ่มดาว
       </CardDescription></CardHeader>
       <CardFooter className="flex flex-wrap items-center justify-between gap-3">
         {error && <Alert variant="destructive" role="alert" className="w-full"><AlertDescription>{error}</AlertDescription></Alert>}
         <div><strong className="text-lg">รวม ฿{commissionPrice(request)}</strong>
+          <p className="text-xs text-muted-foreground sm:hidden">{request.teams.length} ทีม - {request.weapons.reduce((sum, set) => sum + set.weaponKeys.filter(Boolean).length, 0)} อาวุธ - {request.constellations.reduce((sum, set) => sum + set.levels.length, 0)} ระดับกลุ่มดาว</p>
           {request.teams.length === 0 && request.weapons.length + request.constellations.length > 0 && <p className="text-sm text-muted-foreground">รวมค่าบริการพื้นฐาน ฿100</p>}
         </div>
-        <Button disabled={!hydrated || busy || commissionPrice(request) === 0} onClick={() => void submit()}>{busy ? "กำลังสร้างคำขอ…" : "ยืนยันและชำระเงิน"}</Button>
+        <Button className="min-h-11" disabled={!hydrated || busy || commissionPrice(request) === 0} onClick={() => void submit()}>{busy ? "กำลังสร้างคำขอ…" : "ยืนยันและชำระเงิน"}</Button>
       </CardFooter>
     </Card>
   </FieldSet>;
diff --git a/components/commission/ticket-chat.tsx b/components/commission/ticket-chat.tsx
index e38acad..cad7706 100644
--- a/components/commission/ticket-chat.tsx
+++ b/components/commission/ticket-chat.tsx
@@ -645,10 +645,11 @@ export function CommissionTicketChat({
       <Card className="h-full min-h-0 min-w-0 gap-0 py-0">
         <CardHeader className="shrink-0 border-b py-3">
           <CardTitle>แชต{admin ? "กับลูกค้า" : "กับทีมงาน"}</CardTitle>
+          {!admin && <CardDescription>สถานะนี้บอกว่าส่งข้อความได้หรือไม่ สอบถามความคืบหน้างานได้ในแชต</CardDescription>}
           <CardAction className="flex flex-wrap items-center gap-2">
             <Badge variant={status === "open" ? "outline" : "destructive"}
               className={status === "open" ? "border-success/30 bg-success/10 text-success" : undefined}>
-              {status === "open" ? "เปิดอยู่" : "ปิดแล้ว"}
+              {admin ? (status === "open" ? "เปิดอยู่" : "ปิดแล้ว") : (status === "open" ? "แชตเปิดอยู่" : "แชตปิดแล้ว")}
             </Badge>
             {admin &&
               (status === "open" ? (
@@ -1080,7 +1081,7 @@ export function CommissionTicketChat({
                         </div>
                       ))}
                     </div>
-                    <p className="mt-1 text-xs text-muted-foreground">{images.length}/10 รูป · สูงสุด 10 MiB ต่อรูป</p>
+                    <p className="mt-1 text-xs text-muted-foreground">{images.length}/10 รูป - สูงสุด 10 MiB ต่อรูป</p>
                   </div>
                 )}
                 <Field>
diff --git a/components/public/artifact-image-export.tsx b/components/public/artifact-image-export.tsx
index 4af2ab8..688f41d 100644
--- a/components/public/artifact-image-export.tsx
+++ b/components/public/artifact-image-export.tsx
@@ -148,9 +148,9 @@ export function ArtifactImageExport({
 
   return (
     <Dialog>
-      <DialogTrigger render={<Button type="button" variant="outline" size="sm" />}>
+      <DialogTrigger render={<Button type="button" variant="outline" size="sm" className="max-sm:min-h-11" />}>
         <DownloadIcon data-icon="inline-start" />
-        ส่งออกภาพ
+        บันทึกภาพ
       </DialogTrigger>
       <DialogContent className="max-h-[90svh] overflow-y-auto sm:w-fit sm:max-w-[calc(100%-2rem)]">
         <DialogHeader>
diff --git a/components/public/comparison-context.test.tsx b/components/public/comparison-context.test.tsx
new file mode 100644
index 0000000..fdf78b4
--- /dev/null
+++ b/components/public/comparison-context.test.tsx
@@ -0,0 +1,35 @@
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it } from "vitest";
+import { ComparisonContext, ComparisonValue } from "./comparison-context";
+
+describe("public comparison explanations", () => {
+  it("keeps each damage metric's 100% rows separate", () => {
+    const rows = [
+      { weapon: { name: "Team reference" }, refinement: "5", overallPercent: "100", personalPercent: "110" },
+      { weapon: { name: "Personal reference" }, refinement: "1", overallPercent: "105", personalPercent: "100" },
+    ];
+    const team = renderToStaticMarkup(<ComparisonContext rows={rows} metric="overallPercent" />);
+    const personal = renderToStaticMarkup(<ComparisonContext rows={rows} metric="personalPercent" />);
+    expect(team).toContain("Team reference R5");
+    expect(team).not.toContain("Personal reference");
+    expect(personal).toContain("Personal reference R1");
+    expect(personal).not.toContain("Team reference");
+  });
+
+  it("does not invent a reference when no row is 100%", () => {
+    const html = renderToStaticMarkup(<ComparisonContext rows={[
+      { weapon: { name: "Only choice" }, refinement: "1", overallPercent: "109", personalPercent: null },
+    ]} metric="overallPercent" />);
+    expect(html).toContain("ดูหมายเหตุ");
+    expect(html).not.toContain("Only choice");
+  });
+
+  it("renders a loss relative to the baseline but never treats an unavailable value as a loss", () => {
+    expect(renderToStaticMarkup(<ComparisonValue value="98.5" />)).toContain("-1.5%");
+    for (const value of [null, "0", "invalid"]) {
+      const html = renderToStaticMarkup(<ComparisonValue value={value} />);
+      expect(html).toContain("ไม่มีข้อมูลเปรียบเทียบ");
+      expect(html).not.toContain("-100%");
+    }
+  });
+});
diff --git a/components/public/comparison-context.tsx b/components/public/comparison-context.tsx
new file mode 100644
index 0000000..e739955
--- /dev/null
+++ b/components/public/comparison-context.tsx
@@ -0,0 +1,23 @@
+import { comparisonDelta, comparisonReferenceNames } from "@/lib/guides/comparison";
+
+type WeaponRows = Parameters<typeof comparisonReferenceNames>[0];
+
+export function ComparisonContext({ rows, metric }: {
+  rows?: WeaponRows;
+  metric?: "overallPercent" | "personalPercent";
+}) {
+  const references = rows && metric ? comparisonReferenceNames(rows, metric) : [];
+  return <div className="flex flex-col gap-1 text-sm text-muted-foreground">
+    {!rows && <p>100% = ค่าฐานของเงื่อนไขนี้ เช่น 109% หมายถึงสูงกว่าค่าฐาน 9% เปรียบเทียบภายในเงื่อนไขเดียวกัน</p>}
+    {rows && metric ? <p>
+      {metric === "overallPercent" ? "ดาเมจทั้งทีม" : "ดาเมจส่วนตัว"} - {references.length
+        ? `รายการที่แสดง 100%: ${references.join(" / ")}`
+        : "ดูหมายเหตุของเงื่อนไขสำหรับรายการที่ใช้เป็นค่าฐาน"}
+    </p> : null}
+  </div>;
+}
+
+export function ComparisonValue({ value }: { value: string | null }) {
+  const delta = comparisonDelta(value);
+  return <p className="text-xs opacity-75">{delta ?? "ไม่มีข้อมูลเปรียบเทียบ"}</p>;
+}
diff --git a/components/public/condition-switcher.tsx b/components/public/condition-switcher.tsx
index 0ba773e..0400a40 100644
--- a/components/public/condition-switcher.tsx
+++ b/components/public/condition-switcher.tsx
@@ -15,7 +15,7 @@ export function ConditionTabIcon({ iconUrl }: { iconUrl?: string | null }) {
 
 export function ConditionSwitcher({
   children,
-  label = "เลือก Condition",
+  label = "เลือกเงื่อนไข",
   labels,
   iconUrls,
 }: {
@@ -36,9 +36,9 @@ export function ConditionSwitcher({
           {items.map((_, index) => (
             <Fragment key={index}>
               {index > 0 ? <Separator orientation="vertical" aria-hidden="true" className="mx-1 h-7" /> : null}
-              <TabsTrigger value={String(index)} className="outline-primary m-2">
+              <TabsTrigger value={String(index)} className="outline-primary m-2 max-sm:min-h-11">
                 <ConditionTabIcon iconUrl={iconUrls?.[index]} />
-                <span className="font-medium text-lg">{labels?.[index] || `Condition ${index + 1}`}</span>
+                <span className="font-medium text-lg">{labels?.[index] || `เงื่อนไข ${index + 1}`}</span>
               </TabsTrigger>
             </Fragment>
           ))}
diff --git a/components/public/guide-image-export.tsx b/components/public/guide-image-export.tsx
index 0a0613c..cf47437 100644
--- a/components/public/guide-image-export.tsx
+++ b/components/public/guide-image-export.tsx
@@ -171,7 +171,7 @@ export function GuideImageExport({
   disabled = false,
   allowWithoutNotes = true,
   captureClassName,
-  buttonLabel = "ส่งออกภาพ",
+  buttonLabel = "บันทึกภาพ",
   mobileIconOnly = false,
   language: controlledLanguage,
   showLanguageSelector = true,
@@ -229,7 +229,7 @@ export function GuideImageExport({
         type="button"
         variant="outline"
         size="sm"
-        className={mobileIconOnly ? "max-sm:size-7 max-sm:px-0 max-sm:has-data-[icon=inline-start]:pl-0" : undefined}
+        className={mobileIconOnly ? "max-sm:size-11 max-sm:px-0 max-sm:has-data-[icon=inline-start]:pl-0" : "max-sm:min-h-11"}
         disabled={capturing || disabled}
         onClick={() => {
           if (modeSelection === "direct") setCaptureMode("with-notes");
@@ -242,7 +242,7 @@ export function GuideImageExport({
           <DownloadIcon data-icon="inline-start" />
         )}
         <span className={mobileIconOnly ? "sr-only sm:not-sr-only" : undefined}>
-          {capturing ? "กำลังส่งออก…" : label}
+          {capturing ? "กำลังบันทึก…" : label}
         </span>
       </Button>
     );
@@ -299,9 +299,9 @@ export function GuideImageExport({
   );
 
   const exportAction = (
-    <Button type="button" disabled={capturing || disabled} onClick={requestCapture}>
+    <Button type="button" className="max-sm:min-h-11" disabled={capturing || disabled} onClick={requestCapture}>
       {capturing ? <Spinner data-icon="inline-start" /> : <DownloadIcon data-icon="inline-start" />}
-      {capturing ? "กำลังส่งออก…" : buttonLabel}
+      {capturing ? "กำลังบันทึก…" : buttonLabel}
     </Button>
   );
 
@@ -465,8 +465,8 @@ export function GuideImageExport({
             )}
           >
             <DialogHeader>
-              <DialogTitle>ตั้งค่าการส่งออกภาพ</DialogTitle>
-              <DialogDescription>เลือกตัวเลือกที่ต้องการก่อนส่งออกภาพ</DialogDescription>
+              <DialogTitle>ตั้งค่าภาพที่จะบันทึก</DialogTitle>
+              <DialogDescription>เลือกตัวเลือกที่ต้องการก่อนบันทึกภาพ</DialogDescription>
             </DialogHeader>
             {previewPosition === "right" ? (
               <div className="grid min-h-0 gap-4 lg:grid-cols-[16rem_minmax(0,1fr)]">
diff --git a/components/public/public-account-menu.tsx b/components/public/public-account-menu.tsx
new file mode 100644
index 0000000..eb458ac
--- /dev/null
+++ b/components/public/public-account-menu.tsx
@@ -0,0 +1,51 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { ChevronDownIcon, SettingsIcon, UserRoundIcon, MessageCircle   } from "lucide-react";
+import { authClient } from "@/lib/auth/client";
+import { safeAuthReturnPath } from "@/lib/auth/return-path";
+import { SignOutButton } from "@/components/auth/sign-out-button";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu, DropdownMenuContent, DropdownMenuGroup,
+  DropdownMenuItem, DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Separator } from "@/components/ui/separator"
+
+export function PublicAccountMenu() {
+  const pathname = usePathname();
+  const { data, isPending } = authClient.useSession();
+  const [openedPath, setOpenedPath] = useState<string | null>(null);
+  const returnPath = safeAuthReturnPath(openedPath ?? pathname);
+  const suffix = returnPath === "/" ? "" : `?next=${encodeURIComponent(returnPath)}`;
+  const accountLabel = data?.user ? data.user.name.trim() || "โปรไฟล์" : "บัญชี";
+
+  return <DropdownMenu onOpenChange={(open) => {
+    if (open) setOpenedPath(window.location.pathname + window.location.search + window.location.hash);
+  }}>
+    <DropdownMenuTrigger render={<Button variant="link" size="sm" className="text-foreground" disabled={isPending} aria-label={data?.user ? `บัญชีของ ${accountLabel}` : "บัญชี"} />}>
+      <Avatar size="sm" aria-hidden="true">
+        {data?.user?.image && <AvatarImage src={data.user.image} alt="" />}
+        <AvatarFallback><UserRoundIcon className="size-4" /></AvatarFallback>
+      </Avatar>
+      <span className="max-w-24 truncate sm:max-w-40" title={accountLabel}>{accountLabel}</span>
+      <ChevronDownIcon data-icon="inline-end" aria-hidden="true" className="transition-transform group-aria-expanded/button:rotate-180" />
+    </DropdownMenuTrigger>
+    <DropdownMenuContent align="end">
+      <DropdownMenuGroup>
+        {data?.user ? <>
+          <DropdownMenuItem render={<Link href="/profile" />}><SettingsIcon aria-hidden="true" />ตั้งค่าบัญชี</DropdownMenuItem>
+          <DropdownMenuItem render={<Link href="/commission/tickets" />}><MessageCircle aria-hidden="true" />คำขอของฉัน</DropdownMenuItem>
+          <Separator />
+          <SignOutButton menuItem />
+        </> : <>
+          <DropdownMenuItem render={<Link href={`/auth/login${suffix}`} />}>เข้าสู่ระบบ</DropdownMenuItem>
+          <DropdownMenuItem render={<Link href={`/auth/register${suffix}`} />}>สมัครสมาชิก</DropdownMenuItem>
+        </>}
+      </DropdownMenuGroup>
+    </DropdownMenuContent>
+  </DropdownMenu>;
+}
diff --git a/components/public/public-navigation.tsx b/components/public/public-navigation.tsx
index f91417b..97a855d 100644
--- a/components/public/public-navigation.tsx
+++ b/components/public/public-navigation.tsx
@@ -36,7 +36,7 @@ export function PublicNavigation() {
     </nav>
     <div className="lg:hidden">
       <Drawer>
-        <DrawerTrigger render={<Button type="button" variant="outline" size="sm" aria-label="เปิดเมนูหลัก" />}>
+        <DrawerTrigger render={<Button type="button" variant="outline" size="sm" className="min-h-11" aria-label="เปิดเมนูหลัก" />}>
           <MenuIcon data-icon="inline-start" aria-hidden="true" />เมนู
         </DrawerTrigger>
         <DrawerContent>
diff --git a/components/public/rotation-help.tsx b/components/public/rotation-help.tsx
index f9df22d..2f66bfe 100644
--- a/components/public/rotation-help.tsx
+++ b/components/public/rotation-help.tsx
@@ -11,7 +11,8 @@ export function RotationHelp() {
             <dt className="font-semibold text-foreground">E / Q</dt><dd>สกิลธาตุ / ท่าไม้ตาย</dd>
             <dt className="font-semibold text-foreground">N / C / P</dt><dd>โจมตีปกติ / ชาร์จโจมตี / โจมตีพุ่งลง</dd>
             <dt className="font-semibold text-foreground">hP / lP</dt><dd>โจมตีพุ่งลงจากที่สูง (High Plunge) / โจมตีพุ่งลงจากที่ต่ำ (Low Plunge)</dd>
-            <dt className="font-semibold text-foreground">D / J</dt><dd>แดช / กระโดดเพื่อยกเลิกแอนิเมชั่น</dd>
+            <dt className="font-semibold text-foreground">D / J / W</dt><dd>แดช / กระโดดเพื่อยกเลิกแอนิเมชั่น / เดินเพื่อยกเลิกแอนิเมชั่น</dd>
+            <dt className="font-semibold text-foreground">s</dt><dd>สกิลพิเศษ (เช่น sE สกิลธาตุพิเศษ sQ อันติพิเศษ)</dd>
             <dt className="font-semibold text-foreground">hE / tE</dt><dd>กดสกิลธาตุค้าง / แตะสกิลธาตุ</dd>
             <dt className="font-semibold text-foreground">C0 / R1</dt><dd>กลุ่มดาวระดับ 0 / อาวุธขัดเกลาระดับ 1</dd>
           </dl>
diff --git a/components/public/scrollable-nav.tsx b/components/public/scrollable-nav.tsx
index 7fd7644..fc2e965 100644
--- a/components/public/scrollable-nav.tsx
+++ b/components/public/scrollable-nav.tsx
@@ -62,7 +62,7 @@ export function ScrollableNav({
         type="button"
         variant="ghost"
         size="icon-sm"
-        className="shrink-0 sm:hidden"
+        className="size-11 shrink-0 sm:hidden"
         disabled={!canScrollLeft}
         onClick={() => scroll(-1)}
         aria-label="เลื่อนเมนูไปทางซ้าย"
@@ -80,7 +80,7 @@ export function ScrollableNav({
         type="button"
         variant="ghost"
         size="icon-sm"
-        className="shrink-0 sm:hidden"
+        className="size-11 shrink-0 sm:hidden"
         disabled={!canScrollRight}
         onClick={() => scroll(1)}
         aria-label="เลื่อนเมนูไปทางขวา"
diff --git a/components/public/site-footer.tsx b/components/public/site-footer.tsx
index c7f9b36..c4fefc9 100644
--- a/components/public/site-footer.tsx
+++ b/components/public/site-footer.tsx
@@ -9,7 +9,7 @@ export function SiteFooter() {
             href="/thanks"
             className="text-sm font-medium text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
           >
-            Special Thanks
+            ขอบคุณผู้สนับสนุน
           </Link>
           <Link
             href="https://discord.gg/qrTNRsChSX"
@@ -23,7 +23,7 @@ export function SiteFooter() {
             href="/donate"
             className="text-sm font-medium text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
           >
-            Donate
+            สนับสนุนเว็บไซต์
           </Link>
         </div>
         <p className="max-w-3xl text-xs leading-5 text-muted-foreground/80">
diff --git a/components/public/site-header.tsx b/components/public/site-header.tsx
index 1ce8577..2bfcb97 100644
--- a/components/public/site-header.tsx
+++ b/components/public/site-header.tsx
@@ -6,7 +6,7 @@ import { PencilIcon } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { VisitorPresence } from "@/components/public/visitor-presence";
 import { PublicNavigation } from "@/components/public/public-navigation";
-import { SignOutButton } from "@/components/auth/sign-out-button";
+import { PublicAccountMenu } from "@/components/public/public-account-menu";
 import { getAdminSession } from "@/lib/auth/server";
 import { HttpError } from "@/lib/security/http";
 
@@ -45,7 +45,7 @@ export function SiteHeader({ editHref = "/admin", guideId }: { editHref?: string
         <Suspense fallback={null}>
           <AdminEditLink editHref={editHref} />
         </Suspense>
-        <SignOutButton />
+        <PublicAccountMenu />
       </div>
     </header>
   );
diff --git a/components/public/structured-directory.tsx b/components/public/structured-directory.tsx
index b9b9e3e..c243ffd 100644
--- a/components/public/structured-directory.tsx
+++ b/components/public/structured-directory.tsx
@@ -170,19 +170,19 @@ export function StructuredDirectory({ guides }: { guides: GuideCard[] }) {
     <div className="flex flex-col gap-8">
       <div className="flex flex-col gap-2">
         <div className="flex items-center gap-2">
-          <InputGroup className="h-9 min-w-0 flex-1 sm:w-48 sm:flex-none">
+          <InputGroup className="min-h-11 sm:min-h-9 min-w-0 flex-1 sm:w-48 sm:flex-none">
             <InputGroupAddon>
               <SearchIcon />
             </InputGroupAddon>
             <InputGroupInput
               value={query}
               onChange={(event) => setParam("q", event.target.value)}
-              placeholder="ค้นหาไกด์…"
+              placeholder="ค้นหาชื่อตัวละคร…"
               aria-label="ค้นหาไกด์"
             />
           </InputGroup>
           <Select value={sort} onValueChange={(next) => next && setParam("sort", next)}>
-            <SelectTrigger aria-label="เรียงตาม" className="w-32 sm:w-auto"><SelectValue>{sortOptions.find((option) => option.value === sort)?.label}</SelectValue></SelectTrigger>
+            <SelectTrigger aria-label="เรียงตาม" className="min-h-11 w-32 sm:min-h-0 sm:w-auto"><SelectValue>{sortOptions.find((option) => option.value === sort)?.label}</SelectValue></SelectTrigger>
             <SelectContent>
               <SelectGroup>
                 {sortOptions.map((option) => <SelectItem key={option.value} value={option.value}>{option.label}</SelectItem>)}
@@ -192,20 +192,20 @@ export function StructuredDirectory({ guides }: { guides: GuideCard[] }) {
         </div>
         <div className="sm:hidden">
           <Drawer>
-            <DrawerTrigger render={<Button variant="outline" className="w-full" />}>
+            <DrawerTrigger render={<Button variant="outline" className="min-h-11 w-full" />}>
               <SlidersHorizontalIcon data-icon="inline-start" />ตัวกรอง{activeFilters.length ? ` (${activeFilters.length})` : ""}
             </DrawerTrigger>
             <DrawerContent>
               <DrawerHeader><DrawerTitle>ตัวกรองไกด์</DrawerTitle><DrawerDescription>เลือกธาตุ อาวุธ หรือจำนวนดาว</DrawerDescription></DrawerHeader>
               <div className="flex max-h-[60svh] flex-col gap-5 overflow-y-auto px-4 pb-4">{filterControls(true)}</div>
               <div className="flex gap-2 border-t p-4">
-                <Button variant="outline" disabled={!activeFilters.length} onClick={() => clearParams()}>ล้างตัวกรอง</Button>
-                <DrawerClose render={<Button className="flex-1" />}>ดู {filtered.length} ไกด์</DrawerClose>
+                <Button variant="outline" className="min-h-11" disabled={!activeFilters.length} onClick={() => clearParams()}>ล้างตัวกรอง</Button>
+                <DrawerClose render={<Button className="min-h-11 flex-1" />}>ดู {filtered.length} ไกด์</DrawerClose>
               </div>
             </DrawerContent>
           </Drawer>
         </div>
-        <div className="hidden min-w-0 items-center gap-2 overflow-x-auto pb-1 sm:flex" aria-label="ตัวกรองไกด์">{filterControls(false)}</div>
+        <div className="hidden min-w-0 flex-wrap items-start gap-5 pb-1 sm:flex" aria-label="ตัวกรองไกด์">{filterControls(true)}</div>
         <div className="flex flex-wrap items-center gap-2 text-sm text-muted-foreground" aria-live="polite">
           <span>พบ {filtered.length} ไกด์</span>
           {activeFilters.map((filter) => <Button key={`${filter.name}-${filter.value}`} variant="secondary" size="xs"
@@ -290,10 +290,9 @@ function GuideToggleFilter({
 }) {
   return (
     <div className={showLabels ? "flex flex-col gap-2" : "shrink-0 border-l pl-2"}>
-      {showLabels ? <p className="text-sm font-medium">{label}</p> : null}
       <ToggleGroup aria-label={label} variant="outline" size="sm" multiple value={value} onValueChange={onChange} className={showLabels ? "flex flex-wrap justify-start" : undefined}>
         {options.map((option) => (
-          <ToggleGroupItem key={option} value={option} aria-label={`${label}: ${optionLabels[option] ?? option}`} title={`${label}: ${optionLabels[option] ?? option}`} className="aria-pressed:border-primary aria-pressed:bg-transparent aria-pressed:text-primary">
+          <ToggleGroupItem key={option} value={option} aria-label={`${label}: ${optionLabels[option] ?? option}`} title={`${label}: ${optionLabels[option] ?? option}`} className="max-sm:min-h-11 aria-pressed:border-primary aria-pressed:bg-transparent aria-pressed:text-primary">
             {optionIcon?.(option)}{showLabels ? optionLabels[option] ?? option : optionText?.(option)}
           </ToggleGroupItem>
         ))}
diff --git a/components/public/structured-guide.tsx b/components/public/structured-guide.tsx
index 9557be1..0a4c609 100644
--- a/components/public/structured-guide.tsx
+++ b/components/public/structured-guide.tsx
@@ -6,6 +6,7 @@ import type { ReactNode } from "react";
 
 import { Badge } from "@/components/ui/badge";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { ComparisonContext, ComparisonValue } from "@/components/public/comparison-context";
 import { Button } from "@/components/ui/button";
 import {
   Card,
@@ -78,7 +79,7 @@ function publicSectionTitle(slug: string, fallback: string): string {
   if (slug === "weapon") return "อาวุธ";
   if (slug === "artifact") return "อาร์ติแฟกต์และค่าสถานะ";
   if (slug === "constellations") return "กลุ่มดาว";
-  if (slug === "team") return "คำนวณทีม";
+  if (slug === "team") return "ทีมแนะนำและดาเมจ";
   return fallback;
 }
 
@@ -110,7 +111,7 @@ export function StructuredGuideShell({
       ) : null}
       <div className="sticky top-0 z-40 bg-background/95 supports-backdrop-filter:backdrop-blur">
         <div className="mx-auto flex min-h-12 w-full max-w-7xl items-center gap-3 px-4 sm:min-h-16 sm:px-6 lg:px-8">
-          <Button variant="ghost" size="icon" render={<Link href={preview ? `/admin/${guide.characterKey}` : "/"} />} nativeButton={false} aria-label={preview ? "กลับหน้าแก้ไข" : "กลับหน้ารวม"}>
+          <Button variant="ghost" size="icon" className="max-sm:size-11" render={<Link href={preview ? `/admin/${guide.characterKey}` : "/"} />} nativeButton={false} aria-label={preview ? "กลับหน้าแก้ไข" : "กลับหน้ารวม"}>
             <ArrowLeftIcon />
           </Button>
           <div className="relative size-10 shrink-0 overflow-hidden rounded-lg border sm:size-16">
@@ -141,7 +142,7 @@ export function StructuredGuideShell({
             href={baseHref}
             aria-current={!section ? "page" : undefined}
             className={cn(
-              "flex min-h-8 shrink-0 items-center gap-2 whitespace-nowrap rounded-md px-3 text-sm transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              "flex min-h-11 sm:min-h-8 shrink-0 items-center gap-2 whitespace-nowrap rounded-md px-3 text-sm transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring",
               !section
                 ? "bg-primary/15 font-semibold text-primary"
                 : "text-muted-foreground hover:bg-muted hover:text-foreground",
@@ -163,7 +164,7 @@ export function StructuredGuideShell({
               href={`${baseHref}/${item.slug}`}
               aria-current={section === item.slug ? "page" : undefined}
               className={cn(
-                "flex min-h-8 shrink-0 items-center gap-2 whitespace-nowrap rounded-md px-3 text-sm transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                "flex min-h-11 sm:min-h-8 shrink-0 items-center gap-2 whitespace-nowrap rounded-md px-3 text-sm transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring",
                 section === item.slug
                   ? "bg-primary/15 font-semibold text-primary"
                   : "text-muted-foreground hover:bg-muted hover:text-foreground",
@@ -334,7 +335,12 @@ function GuideNavigation({
                 />
               ) : null}
               <CardTitle>{publicSectionTitle(item.slug, item.title)}</CardTitle>
-              <CardDescription>เปิดดูคำแนะนำฉบับเต็ม</CardDescription>
+              <CardDescription>{({
+                weapon: "เปรียบเทียบอาวุธตามทีมและเงื่อนไขในไกด์",
+                artifact: "เลือกชุดอาร์ติแฟกต์และดูค่าสถานะที่ควรปั้น",
+                constellations: "ดูผลของแต่ละกลุ่มดาวและดาเมจที่เพิ่มขึ้น",
+                team: "ดูทีม อุปกรณ์ ดาเมจ และลำดับการใช้สกิล",
+              } as Record<string, string>)[item.slug] ?? `อ่านรายละเอียด${item.title}`}</CardDescription>
               <CardAction>
                 <ArrowUpRightIcon aria-hidden="true" className="size-5 text-primary" />
               </CardAction>
@@ -476,6 +482,11 @@ function WeaponSectionContent({
           ) : null}
         </div>
         {group.note ? <p className="whitespace-pre-wrap text-muted-foreground">{group.note}</p> : null}
+        {!exporting && <div className="flex flex-col gap-2">
+          <ComparisonContext />
+          {group.rows.some((row) => row.overallPercent !== null) && <ComparisonContext rows={group.rows} metric="overallPercent" />}
+          {group.rows.some((row) => row.personalPercent !== null) && <ComparisonContext rows={group.rows} metric="personalPercent" />}
+        </div>}
         <WeaponDisplayMode exporting={exporting} rows={group.rows}>
         <div
           className={cn("grid gap-3", useCompactExportGrid && "grid-cols-2")}
@@ -563,7 +574,7 @@ function WeaponSectionContent({
                       )}
                     >
                       {Number(row.overallPercent) === 0
-                        ? "-%"
+                        ? (exporting ? "-%" : "—")
                         : metric(row.overallPercent)}
                     </p>
                     <p
@@ -578,6 +589,7 @@ function WeaponSectionContent({
                     >
                       ดาเมจทั้งทีม
                     </p>
+                    {!exporting && <ComparisonValue value={row.overallPercent} />}
                   </div>
                 ) : null}
                 {row.personalPercent ? (
@@ -594,7 +606,7 @@ function WeaponSectionContent({
                       )}
                     >
                       {Number(row.personalPercent) === 0
-                        ? "-%"
+                        ? (exporting ? "-%" : "—")
                         : metric(row.personalPercent)}
                     </p>
                     <p
@@ -609,6 +621,7 @@ function WeaponSectionContent({
                     >
                       ดาเมจส่วนตัว
                     </p>
+                    {!exporting && <ComparisonValue value={row.personalPercent} />}
                   </div>
                 ) : null}
               </div>
@@ -665,7 +678,7 @@ function ArtifactSectionContent({
       {profile ? (
         <Card data-artifact-export-section="best-stats" className="artifact-export-main-stats overflow-hidden pt-0">
           <CardHeader className="bg-primary py-4 text-center text-primary-foreground">
-            <CardTitle className="text-2xl">{exportLabel(exporting, "ออฟหลักที่ดีที่สุด", "Best Main Stats")}</CardTitle>
+            <CardTitle className="text-2xl">{exportLabel(exporting, exporting ? "ออฟหลักที่ดีที่สุด" : "ค่าสถานะหลักแนะนำ", "Best Main Stats")}</CardTitle>
           </CardHeader>
           <CardContent className="grid grid-cols-3 p-0">
             <ArtifactStat
@@ -694,7 +707,7 @@ function ArtifactSectionContent({
             <>
               <Separator />
               <CardContent className="flex flex-col items-center gap-2 py-5 text-center text-sm">
-                <strong>{exportLabel(exporting, "ออฟรองที่ดีที่สุด", "Best Substats")}</strong>
+                <strong>{exportLabel(exporting, exporting ? "ออฟรองที่ดีที่สุด" : "ค่าสถานะรองแนะนำ", "Best Substats")}</strong>
                 <div className="flex flex-col items-center gap-1">
                   {condition.substats.map((stat, index) => (
                     <ArtifactStatValue
@@ -762,10 +775,11 @@ function ArtifactSectionContent({
               {recommendedCards}
             </ConditionSwitcher>
           )}
-          <div data-artifact-export-section="tierlist" className="order-first">
+          <div data-artifact-export-section="tierlist" className={exporting ? "order-first" : "lg:order-first"}>
             {(() => {
               const tierCards = guide.artifactGroups.map((condition, conditionIndex) => (
               <div key={condition.id} data-tier-condition={conditionIndex} className="artifact-export-tierlist flex flex-col gap-5">
+              {!exporting && <ComparisonContext />}
               {exporting && guide.artifactGroups.length > 1 ? <p className="text-sm font-medium">{condition.name || <ExportText th={`เงื่อนไข ${conditionIndex + 1}`} en={`Condition ${conditionIndex + 1}`} />}</p> : null}
               {condition.note ? <p data-export-note className="whitespace-pre-wrap text-sm text-muted-foreground">{condition.note}</p> : null}
               {condition.tiers.map((group) => <Card key={group.id}>
@@ -807,9 +821,12 @@ function ArtifactSectionContent({
                           </p>
                         ) : null}
                       </div>
-                      <p className="text-2xl font-semibold text-primary">
-                        {Number(row.percent) === 0 ? "-%" : metric(row.percent, exporting ? "en-US" : undefined)}
-                      </p>
+                      <div className="w-24 shrink-0 text-right sm:w-28">
+                        <p className="text-2xl font-semibold text-primary">
+                          {Number(row.percent) === 0 ? (exporting ? "-%" : "—") : metric(row.percent, exporting ? "en-US" : undefined)}
+                        </p>
+                        {!exporting && <ComparisonValue value={row.percent} />}
+                      </div>
                     </div>
                   ))}
                 </CardContent>
@@ -830,7 +847,7 @@ function ArtifactSectionContent({
                   exporting ? (
                     profile.targetConditions.filter((group) => group.rows.length).map((group, groupIndex) => (
                   <div key={groupIndex} data-artifact-export-section="target-stats" data-target-condition={groupIndex}>
-                    <p className="mb-2 text-sm font-medium">{exportLabel(exporting, "ค่าสถานะต่ำๆที่ควรจะปั้นไว้", "Recommended Minimum Stats")}</p>
+                    <p className="mb-2 text-sm font-medium">{exportLabel(exporting, exporting ? "ค่าสถานะต่ำๆที่ควรจะปั้นไว้" : "ค่าสถานะเป้าหมายขั้นต่ำ", "Recommended Minimum Stats")}</p>
                     {group.note ? <p data-export-note className="mb-2 whitespace-pre-wrap text-sm text-muted-foreground">{group.note}</p> : null}
                     <div className="flex flex-col gap-1">
                       {group.rows.map((target, index) => (
@@ -868,7 +885,7 @@ function ArtifactSectionContent({
                     <ConditionSwitcher label="เลือกเงื่อนไขค่าสถานะเป้าหมาย" labels={profile.targetConditions.filter((group) => group.rows.length).map((group, index) => group.name || `เงื่อนไข ${index + 1}`)} iconUrls={profile.targetConditions.filter((group) => group.rows.length).map((group) => group.iconUrl)}>
                       {profile.targetConditions.filter((group) => group.rows.length).map((group, groupIndex) => (
                         <div key={groupIndex}>
-                          <p className="mb-2 text-sm font-medium">{exportLabel(exporting, "ค่าสถานะต่ำๆที่ควรจะปั้นไว้", "Recommended Minimum Stats")}</p>
+                          <p className="mb-2 text-sm font-medium">{exportLabel(exporting, exporting ? "ค่าสถานะต่ำๆที่ควรจะปั้นไว้" : "ค่าสถานะเป้าหมายขั้นต่ำ", "Recommended Minimum Stats")}</p>
                           {group.note ? <p data-export-note className="mb-2 whitespace-pre-wrap text-sm text-muted-foreground">{group.note}</p> : null}
                           <div className="flex flex-col gap-1">
                             {group.rows.map((target, index) => (
@@ -1186,6 +1203,7 @@ function ConstellationSection({ guide }: { guide: PublicGuide }) {
           </p>
         ) : null}
       </header>
+      <p className="text-sm text-muted-foreground">ดาเมจทั้งทีมสะสมเทียบกับ C0 = 100% เช่น 117% คือสูงกว่า C0 17% ภายใต้เงื่อนไขเดียวกัน</p>
       <ConditionSwitcher label="เลือกเงื่อนไขกลุ่มดาว" labels={guide.constellationGroups.filter((group) => group.rows.length > 0).map((group, index) => group.name || `เงื่อนไข ${index + 1}`)} iconUrls={guide.constellationGroups.filter((group) => group.rows.length > 0).map((group) => group.iconUrl)}>
       {guide.constellationGroups.filter((group) => group.rows.length > 0).map((group, groupIndex, groups) => (
         <div key={group.id} className="flex flex-col gap-4">
@@ -1227,8 +1245,9 @@ function ConstellationSection({ guide }: { guide: PublicGuide }) {
                         row.isGreat && "text-warning",
                       )}
                     >
-                      {metric(row.cumulativePercent)}
+                      {Number(row.cumulativePercent) === 0 ? "—" : metric(row.cumulativePercent)}
                     </CardTitle>
+                    <ComparisonValue value={row.cumulativePercent} />
                     <CardDescription className="text-base font-medium text-white">
                       C{row.level} - {row.name}
                     </CardDescription>
@@ -1253,7 +1272,8 @@ function TeamSection({ guide }: { guide: PublicGuide }) {
   return (
     <section className="flex flex-col gap-6">
       <header className="text-center">
-        <h1 className="font-heading text-3xl font-semibold sm:text-4xl">คำนวณทีม</h1>
+        <h1 className="font-heading text-3xl font-semibold sm:text-4xl">ทีมแนะนำและดาเมจ</h1>
+        <p className="mt-3 text-sm text-muted-foreground">ผลคำนวณสำหรับทีม อาวุธ กลุ่มดาว และเงื่อนไขที่ระบุในไกด์ เลือกดูและเปรียบเทียบทีมที่มีอยู่ได้</p>
       </header>
       <TeamSearch groups={guide.teamGroups} />
     </section>
diff --git a/components/public/stygian-guide.tsx b/components/public/stygian-guide.tsx
index 50de994..2477eb1 100644
--- a/components/public/stygian-guide.tsx
+++ b/components/public/stygian-guide.tsx
@@ -1,6 +1,7 @@
 import Image from "@/components/ui/resilient-image";
 import Link from "next/link";
 
+import { TermDetail } from "@/components/public/term-detail";
 import { Badge } from "@/components/ui/badge";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { buttonVariants } from "@/components/ui/button";
@@ -59,6 +60,11 @@ function RecommendationIcon({ item, catalog, teamLayout = false }: { item: Item;
             {value.artifact ? <div className={cn("relative aspect-square overflow-hidden rounded-md border", rarityGradientClass(value.artifact.rarity))}><Image src={value.artifact.imageUrl} alt={value.artifact.name} fill sizes="64px" className="object-contain p-1" /></div> : null}
           </div> : null}
         </div>
+        {teamLayout && <p className="text-center text-xs font-medium wrap-anywhere">{value.name}</p>}
+        {teamLayout && hasEquipment && <TermDetail interactive label="อุปกรณ์" title={`อุปกรณ์ของ ${value.name}`} detail={[
+          value.weapon ? `อาวุธ: ${value.weapon.name}${value.refinement ? ` R${value.refinement}` : ""}` : null,
+          value.artifact ? `อาร์ติแฟกต์: ${value.artifact.name}` : null,
+        ].filter(Boolean).join("\n")} />}
         {teamLayout ? item.constellationLevel !== null || value.weapon && value.refinement ? <div className="flex justify-center gap-1">
           {item.constellationLevel !== null ? <Badge variant="secondary">C{item.constellationLevel}</Badge> : null}
           {value.weapon && value.refinement ? <Badge variant="secondary">R{value.refinement}</Badge> : null}
@@ -116,14 +122,16 @@ function BossCard({ schedule, level, position, catalog }: { schedule: Schedule;
 export function StygianGuide({ schedule, catalog }: { schedule: Schedule; catalog: Catalog }) {
   return (
     <Tabs defaultValue="110">
+      <p className="text-sm font-medium">เลือกระดับบอส</p>
       <TabsList aria-label="ระดับความยาก Stygian">
         {stygianLevels.map((level) => (
-          <TabsTrigger key={level} value={String(level)}>เลเวล {level}</TabsTrigger>
+          <TabsTrigger key={level} value={String(level)} className="max-sm:min-h-11">เลเวล {level}</TabsTrigger>
         ))}
       </TabsList>
       {stygianLevels.map((level) => (
         <TabsContent key={level} value={String(level)}>
           <Tabs defaultValue="0">
+            <p className="text-sm font-medium">เลือกบอส</p>
             <TabsList variant="line" className="grid w-full grid-cols-3 overflow-hidden group-data-horizontal/tabs:h-auto" aria-label={`Level ${level} bosses`}>
               {stygianBossPositions.map((position) => {
                 const boss = schedule.bosses.find((candidate) => candidate.level === level && candidate.position === position);
diff --git a/components/public/team-search.tsx b/components/public/team-search.tsx
index f2b405f..6ea31bf 100644
--- a/components/public/team-search.tsx
+++ b/components/public/team-search.tsx
@@ -388,6 +388,7 @@ function TeamCard({
               <p className="mt-1 truncate text-sm font-medium">
                 {member.character.name}
               </p>
+              {!exporting && <p className="text-xs text-muted-foreground">ดาเมจต่อโรเทชั่น</p>}
               <p className="text-sm font-semibold">
                 {Number(member.damage).toLocaleString(undefined, {
                   maximumFractionDigits: 2,
@@ -397,7 +398,7 @@ function TeamCard({
                 {total
                   ? ((Number(member.damage) / total) * 100).toFixed(2)
                   : "0.00"}
-                %
+                %{!exporting && " ของทีม"}
               </p>
             </div>
           ))}
@@ -405,7 +406,7 @@ function TeamCard({
         <Separator />
         <div className="flex items-end justify-between">
           <div>
-            <p className="text-sm text-muted-foreground">ดาเมจรวม</p>
+            <p className="text-sm text-muted-foreground">{exporting ? "ดาเมจรวม" : "ดาเมจรวมต่อโรเทชั่น"}</p>
             <p className="font-semibold">{total.toLocaleString()}</p>
           </div>
           <div className="text-right">
@@ -462,12 +463,13 @@ export function TeamSearch({ groups }: { groups: PublicGuide["teamGroups"] }) {
         </ScrollableNav>
       ) : null}
       {activeGroup?.note ? <p className="whitespace-pre-wrap text-muted-foreground">{activeGroup.note}</p> : null}
+      <p className="text-sm text-muted-foreground">ค้นหาในเงื่อนไขที่เลือก - พบ {filteredTeams.length} ทีม</p>
       <div className="flex min-w-0 items-center gap-2">
         <div className="relative min-w-0 flex-1">
           <SearchIcon aria-hidden="true" className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground" />
           <Input
             aria-label="ค้นหาทีม ตัวละคร อาวุธ หรืออาร์ติแฟกต์"
-            className="pl-9"
+            className="min-h-11 pl-9 sm:min-h-0"
             placeholder="ค้นหาทีม ตัวละคร อาวุธ หรืออาร์ติแฟกต์"
             value={query}
             onValueChange={setQuery}
@@ -478,7 +480,7 @@ export function TeamSearch({ groups }: { groups: PublicGuide["teamGroups"] }) {
         }}>
           <SelectTrigger
             aria-label="เลือกประเภทข้อมูลที่ต้องการค้นหา"
-            className="w-32 shrink-0"
+            className="min-h-11 w-32 shrink-0 sm:min-h-0"
           >
             <SelectValue>{teamSearchTargetLabels[searchTarget]}</SelectValue>
           </SelectTrigger>
@@ -504,8 +506,8 @@ export function TeamSearch({ groups }: { groups: PublicGuide["teamGroups"] }) {
             if (order) setDpsOrder(order);
           }}
         >
-          <ToggleGroupItem value="best">DPS สูงสุด</ToggleGroupItem>
-          <ToggleGroupItem value="worst">DPS ต่ำสุด</ToggleGroupItem>
+          <ToggleGroupItem value="best" className="max-sm:min-h-11">DPS สูงสุด</ToggleGroupItem>
+          <ToggleGroupItem value="worst" className="max-sm:min-h-11">DPS ต่ำสุด</ToggleGroupItem>
         </ToggleGroup>
         <Button
           variant="ghost"
@@ -517,6 +519,7 @@ export function TeamSearch({ groups }: { groups: PublicGuide["teamGroups"] }) {
           ล้างการเรียง
         </Button>
       </div>
+      <p className="text-sm text-muted-foreground">DPS คือดาเมจรวมของทีมต่อวินาทีในโรเทชั่นที่ระบุ ผลจริงขึ้นอยู่กับอุปกรณ์และการเล่น</p>
       <RotationHelp />
       {filteredTeams.length ? (
         <div className="grid gap-5 xl:grid-cols-2">
@@ -545,7 +548,10 @@ export function TeamSearch({ groups }: { groups: PublicGuide["teamGroups"] }) {
       ) : (
         <Card>
           <CardContent className="py-8 text-center text-sm text-muted-foreground">
-            ไม่พบทีมที่ตรงกับคำค้นหา
+            <div className="flex flex-col items-center gap-3">
+              <p>{query.trim() ? "ไม่พบทีมที่ตรงกับคำค้นหาในเงื่อนไขนี้" : "ยังไม่มีทีมในเงื่อนไขนี้"}</p>
+              {query && <Button className="min-h-11" variant="outline" onClick={() => setQuery("")}>ล้างการค้นหา</Button>}
+            </div>
           </CardContent>
         </Card>
       )}
diff --git a/components/public/term-detail.tsx b/components/public/term-detail.tsx
index df8f687..cec06d7 100644
--- a/components/public/term-detail.tsx
+++ b/components/public/term-detail.tsx
@@ -43,15 +43,17 @@ export function TermDetail({
   title,
   detail,
   showIcon = true,
+  interactive = false,
 }: {
   label: ReactNode;
   title: string;
   detail: string;
   showIcon?: boolean;
+  interactive?: boolean;
 }) {
   const finePointer = useSyncExternalStore(subscribe, getSnapshot, () => false);
 
-  if (finePointer) {
+  if (finePointer && !interactive) {
     return (
       <HoverCard>
         <HoverCardTrigger aria-label={`ดูรายละเอียด ${title}`}>
diff --git a/components/public/weapon-chart.tsx b/components/public/weapon-chart.tsx
index 84d360b..88f58c7 100644
--- a/components/public/weapon-chart.tsx
+++ b/components/public/weapon-chart.tsx
@@ -1,36 +1,27 @@
 "use client";
 
-import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from "recharts";
-
-import { Badge } from "@/components/ui/badge";
+import { Bar, BarChart, CartesianGrid, LabelList, ReferenceLine, XAxis, YAxis } from "recharts";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import {
-  ChartContainer,
-  ChartLegend,
-  ChartLegendContent,
-  ChartTooltip,
-  ChartTooltipContent,
-  type ChartConfig,
+  ChartContainer, ChartLegend, ChartLegendContent,
+  ChartTooltip, ChartTooltipContent, type ChartConfig,
 } from "@/components/ui/chart";
 import type { PublicGuide } from "@/lib/guides/queries";
 
 const chartConfig = {
-  overall: { label: "Overall - ดาเมจทั้งทีม", color: "var(--chart-1)" },
-  personal: { label: "Personal - ดาเมจส่วนตัว", color: "var(--chart-2)" },
+  overall: { label: "ดาเมจทั้งทีม", color: "var(--chart-1)" },
+  personal: { label: "ดาเมจส่วนตัว", color: "var(--chart-2)" },
 } satisfies ChartConfig;
 
 function percentage(value: string | null) {
   if (!value?.trim()) return null;
   const number = Number(value);
-  // Zero is displayed as an unavailable metric in the weapon cards.
   return Number.isFinite(number) && number !== 0 ? number : null;
 }
 
 export function WeaponChart({ rows }: { rows: PublicGuide["weaponGroups"][number]["rows"] }) {
   const data = rows.map((row, index) => ({
     name: `${index + 1}. ${row.weapon.name} R${row.refinement}`,
-    imageUrl: row.weapon.imageUrl,
-    refinement: row.refinement,
     overall: percentage(row.overallPercent),
     personal: percentage(row.personalPercent),
   }));
@@ -38,73 +29,42 @@ export function WeaponChart({ rows }: { rows: PublicGuide["weaponGroups"][number
   const hasPersonal = data.some((row) => row.personal !== null);
   const singleMetric = !hasOverall || !hasPersonal;
 
-  if (!hasOverall && !hasPersonal) return null;
+  if (!hasOverall && !hasPersonal) return <p className="text-sm text-muted-foreground">ไม่มีข้อมูลเปรียบเทียบสำหรับกราฟนี้</p>;
 
-  return (
-    <Card className="min-w-0" size={singleMetric ? "sm" : "default"}>
-      <CardHeader>
-        <CardTitle>เปรียบเทียบดาเมจอาวุธ</CardTitle>
-        <CardDescription>เปอร์เซ็นต์ดาเมจของอาวุธทั้งหมดใน Condition นี้</CardDescription>
-      </CardHeader>
-      <CardContent className="min-w-0">
-          <ChartContainer
-            config={chartConfig}
-            className="min-w-0 aspect-auto w-full"
-            style={{
-              height: singleMetric ? 300 : 400,
-            }}
-            aria-label="กราฟเปรียบเทียบเปอร์เซ็นต์ดาเมจอาวุธ"
-          >
-            <BarChart accessibilityLayer data={data} margin={{ right: 16 }}>
-              <CartesianGrid vertical={false} />
-              <YAxis type="number" tickLine={false} axisLine={false} tickFormatter={(value) => `${value}%`} />
-              <XAxis
-                dataKey="name"
-                type="category"
-                height={80}
-                tickLine={false}
-                axisLine={false}
-                interval={0}
-                tick={({ x, y, payload, width }) => {
-                  const weapon = data.find((row) => row.name === payload.value);
-                  if (!weapon) return <g />;
-                  const size = Math.max(8, Math.min(40, Number(width) / data.length - 4 || 32));
-                  return (
-                    <g transform={`translate(${x},${y})`}>
-                      <title>{weapon.name}</title>
-                      <image
-                        href={weapon.imageUrl}
-                        x={-size / 2}
-                        y={4}
-                        width={size}
-                        height={size}
-                        preserveAspectRatio="xMidYMid meet"
-                        role="img"
-                        aria-label={weapon.name}
-                      />
-                      <foreignObject x={-24} y={size + 8} width={48} height={24}>
-                        <div className="flex justify-center">
-                          <Badge variant="secondary">R{weapon.refinement}</Badge>
-                        </div>
-                      </foreignObject>
-                    </g>
-                  );
-                }}
-              />
-              <ChartTooltip content={
-                <ChartTooltipContent formatter={(value, name) => (
-                  <div className="flex flex-1 items-center justify-between gap-4">
-                    <span className="text-muted-foreground">{chartConfig[name as keyof typeof chartConfig]?.label ?? name}</span>
-                    <span className="font-mono font-medium">{value}%</span>
-                  </div>
-                )} />
-              } />
-              <ChartLegend content={<ChartLegendContent className="flex-wrap" />} />
-              {hasPersonal ? <Bar dataKey="personal" fill="var(--color-personal)" radius={4} maxBarSize={32} /> : null}
-              {hasOverall ? <Bar dataKey="overall" fill="var(--color-overall)" radius={4} maxBarSize={32} /> : null}
-            </BarChart>
-          </ChartContainer>
-      </CardContent>
-    </Card>
-  );
+  return <Card className="min-w-0" size="sm">
+    <CardHeader>
+      <CardTitle>เปรียบเทียบดาเมจอาวุธ</CardTitle>
+      <CardDescription>เปอร์เซ็นต์ดาเมจในเงื่อนไขนี้ - เส้น 100% คือค่าฐาน</CardDescription>
+    </CardHeader>
+    <CardContent className="min-w-0">
+      <ChartContainer config={chartConfig} className="aspect-auto min-w-0 w-full"
+        style={{ height: Math.max(240, data.length * 72 + 80) }}
+        aria-label="กราฟเปรียบเทียบเปอร์เซ็นต์ดาเมจอาวุธ">
+        <BarChart accessibilityLayer data={data} layout="vertical" margin={{ right: 42, left: 0 }}>
+          <CartesianGrid horizontal={false} />
+          <XAxis type="number" tickLine={false} axisLine={false}
+            domain={[(minimum: number) => Math.min(0, minimum), (maximum: number) => Math.max(110, maximum)]}
+            tickFormatter={(value) => `${value}%`} />
+          <YAxis dataKey="name" type="category" tickLine={false} axisLine={false} width={142} interval={0}
+            tick={({ x, y, payload }) => <g transform={`translate(${x},${y})`}>
+              <foreignObject x={-140} y={-32} width={132} height={64}>
+                <div className="flex h-full items-center justify-end text-right text-xs leading-4 wrap-anywhere text-foreground">{payload.value}</div>
+              </foreignObject>
+            </g>} />
+          <ReferenceLine x={100} stroke="var(--muted-foreground)" strokeDasharray="4 4" />
+          <ChartTooltip content={<ChartTooltipContent formatter={(value, name) => <div className="flex flex-1 items-center justify-between gap-4">
+            <span className="text-muted-foreground">{chartConfig[name as keyof typeof chartConfig]?.label ?? name}</span>
+            <span className="font-mono font-medium">{value}%</span>
+          </div>} />} />
+          <ChartLegend content={<ChartLegendContent className="flex-wrap" />} />
+          {hasPersonal && <Bar dataKey="personal" fill="var(--color-personal)" radius={4} maxBarSize={singleMetric ? 26 : 18} isAnimationActive={false}>
+            <LabelList position="right" formatter={(value) => typeof value === "number" ? `${value.toLocaleString("th-TH", { maximumFractionDigits: 2 })}%` : ""} className="fill-foreground text-xs" />
+          </Bar>}
+          {hasOverall && <Bar dataKey="overall" fill="var(--color-overall)" radius={4} maxBarSize={singleMetric ? 26 : 18} isAnimationActive={false}>
+            <LabelList position="right" formatter={(value) => typeof value === "number" ? `${value.toLocaleString("th-TH", { maximumFractionDigits: 2 })}%` : ""} className="fill-foreground text-xs" />
+          </Bar>}
+        </BarChart>
+      </ChartContainer>
+    </CardContent>
+  </Card>;
 }
diff --git a/components/public/weapon-display-mode.tsx b/components/public/weapon-display-mode.tsx
index fb39ae7..0659aaf 100644
--- a/components/public/weapon-display-mode.tsx
+++ b/components/public/weapon-display-mode.tsx
@@ -46,15 +46,15 @@ export function WeaponDisplayMode({
   return (
     <div className="flex min-w-0 flex-col gap-3">
       <ToggleGroup
-        aria-label="Weapon display mode"
+        aria-label="รูปแบบการแสดงอาวุธ"
         variant="outline"
         value={[mode]}
         onValueChange={(values) => {
           if (values[0]) setMode(values[0]);
         }}
       >
-        <ToggleGroupItem value="normal">List</ToggleGroupItem>
-        <ToggleGroupItem value="chart">Chart</ToggleGroupItem>
+        <ToggleGroupItem value="normal" className="max-sm:min-h-11">รายการ</ToggleGroupItem>
+        <ToggleGroupItem value="chart" className="max-sm:min-h-11">กราฟ</ToggleGroupItem>
       </ToggleGroup>
       {mode === "chart" ? <LazyWeaponChart rows={rows} /> : children}
     </div>
diff --git a/components/public/weapon-image-export.tsx b/components/public/weapon-image-export.tsx
index b9bd909..a30a05c 100644
--- a/components/public/weapon-image-export.tsx
+++ b/components/public/weapon-image-export.tsx
@@ -145,8 +145,8 @@ export function WeaponImageExport({
   const conditionLabel = group.name;
   const baseName = `${guide.name}-Weapon-${conditionLabel || `Condition ${conditionIndex + 1}`}`;
   const metricOptions = ([
-    ["overallPercent", "Overall Damage"],
-    ["personalPercent", "Personal Damage"],
+    ["overallPercent", "ดาเมจทั้งทีม"],
+    ["personalPercent", "ดาเมจส่วนตัว"],
   ] as const).filter(([metric]) =>
     group.rows.some((row) => row[metric] !== null),
   );
@@ -177,9 +177,9 @@ export function WeaponImageExport({
 
   return (
     <Dialog>
-      <DialogTrigger render={<Button type="button" variant="outline" size="sm" />}>
+      <DialogTrigger render={<Button type="button" variant="outline" size="sm" className="max-sm:min-h-11" />}>
         <DownloadIcon data-icon="inline-start" />
-        ส่งออกภาพ
+        บันทึกภาพ
       </DialogTrigger>
       <DialogContent className="max-h-[90svh] overflow-y-auto sm:w-fit sm:max-w-[calc(100%-2rem)]">
         <DialogHeader>
diff --git a/components/stygian/stygian-boss-display.tsx b/components/stygian/stygian-boss-display.tsx
index 80da6da..9623ab1 100644
--- a/components/stygian/stygian-boss-display.tsx
+++ b/components/stygian/stygian-boss-display.tsx
@@ -130,7 +130,7 @@ export function StygianBossCard({
         <header className="text-center">
           <h2 className="font-heading text-lg font-semibold">{boss.name}</h2>
           <p className="mt-1 text-sm text-muted-foreground">
-            เลเวล {level} · HP {Math.round(boss.hp).toLocaleString("en-US")}
+            เลเวล {level} - HP {Math.round(boss.hp).toLocaleString("en-US")}
           </p>
         </header>
         <div className="flex min-w-0 flex-col gap-5">
diff --git a/components/ui/input-otp.tsx b/components/ui/input-otp.tsx
new file mode 100644
index 0000000..446598b
--- /dev/null
+++ b/components/ui/input-otp.tsx
@@ -0,0 +1,86 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "@/lib/utils"
+import { OTPInput, OTPInputContext } from "input-otp"
+import { MinusIcon } from "lucide-react"
+
+function InputOTP({
+  className,
+  containerClassName,
+  ...props
+}: React.ComponentProps<typeof OTPInput> & {
+  containerClassName?: string
+}) {
+  return (
+    <OTPInput
+      data-slot="input-otp"
+      containerClassName={cn(
+        "cn-input-otp flex items-center has-disabled:opacity-50",
+        containerClassName
+      )}
+      spellCheck={false}
+      className={cn("disabled:cursor-not-allowed", className)}
+      {...props}
+    />
+  )
+}
+
+function InputOTPGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="input-otp-group"
+      className={cn(
+        "flex items-center rounded-lg has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function InputOTPSlot({
+  index,
+  className,
+  ...props
+}: React.ComponentProps<"div"> & {
+  index: number
+}) {
+  const inputOTPContext = React.useContext(OTPInputContext)
+  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}
+
+  return (
+    <div
+      data-slot="input-otp-slot"
+      data-active={isActive}
+      className={cn(
+        "relative flex size-8 items-center justify-center border-y border-r border-input text-sm transition-all outline-none first:rounded-l-lg first:border-l last:rounded-r-lg aria-invalid:border-destructive data-[active=true]:z-10 data-[active=true]:border-ring data-[active=true]:ring-3 data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/20 dark:bg-input/30 dark:data-[active=true]:aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    >
+      {char}
+      {hasFakeCaret && (
+        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+          <div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
+        </div>
+      )}
+    </div>
+  )
+}
+
+function InputOTPSeparator({ ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="input-otp-separator"
+      className="flex items-center [&_svg:not([class*='size-'])]:size-4"
+      role="separator"
+      {...props}
+    >
+      <MinusIcon
+      />
+    </div>
+  )
+}
+
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }
diff --git a/lib/guides/image-export.test.tsx b/lib/guides/image-export.test.tsx
index 9299cf2..bcbdcf0 100644
--- a/lib/guides/image-export.test.tsx
+++ b/lib/guides/image-export.test.tsx
@@ -80,13 +80,13 @@ describe("image export controls", () => {
 
   it("shows one export trigger and keeps settings in its dialog", () => {
     const html = renderToStaticMarkup(<GuideImageExport fileName="guide.png">No notes</GuideImageExport>);
-    expect(html).toContain("ส่งออกภาพ");
+    expect(html).toContain("บันทึกภาพ");
     expect(html.match(/<button\b/gu)).toHaveLength(1);
   });
 
   it("shows only one export action when no-note export is disabled", () => {
     const html = renderToStaticMarkup(<GuideImageExport fileName="guide.png" allowWithoutNotes={false}>Content</GuideImageExport>);
-    expect(html).toContain("ส่งออกภาพ");
+    expect(html).toContain("บันทึกภาพ");
     expect(html.match(/<button\b/gu)).toHaveLength(1);
   });
 
@@ -96,8 +96,8 @@ describe("image export controls", () => {
         Poster
       </GuideImageExport>,
     );
-    expect(html).toContain("ส่งออกภาพ");
-    expect(html).not.toContain("ตั้งค่าการส่งออกภาพ");
+    expect(html).toContain("บันทึกภาพ");
+    expect(html).not.toContain("ตั้งค่าภาพที่จะบันทึก");
     expect(html.match(/<button\b/gu)).toHaveLength(1);
   });
 
@@ -115,7 +115,7 @@ describe("image export controls", () => {
     expect(html).toContain("h-[clamp(8rem,50svh,32rem)]");
     expect(html).toContain('data-slot="dialog-footer"');
     expect(html).toContain("sticky bottom-0");
-    expect(html.match(/>ส่งออกภาพ<\/button>/gu)).toHaveLength(1);
+    expect(html.match(/>บันทึกภาพ<\/button>/gu)).toHaveLength(1);
   });
 
   it("hides the persistent language chooser when language is prompted on export", () => {
diff --git a/package.json b/package.json
index 66b7ec8..0d73c2f 100644
--- a/package.json
+++ b/package.json
@@ -47,6 +47,7 @@
     "emoji-picker-react": "^4.22.3",
     "emoji-regex": "^11.0.0",
     "entities": "7.0.1",
+    "input-otp": "^1.5.0",
     "ioredis": "^6.0.0",
     "lucide-react": "^1.35.0",
     "modern-screenshot": "^4.7.0",
diff --git a/tests/security-boundaries.test.ts b/tests/security-boundaries.test.ts
index cbe1106..730ad75 100644
--- a/tests/security-boundaries.test.ts
+++ b/tests/security-boundaries.test.ts
@@ -62,7 +62,7 @@ describe("administrative security boundaries", () => {
     );
     expect(source).toContain('"x-captcha-response": token');
     expect(source).toContain("disabled={busy || (captcha && !token && !pendingEmail)}");
-    expect(source).toContain('"expired-callback": () => setToken("")');
+    expect(source).toMatch(/"expired-callback":\s*\(\)\s*=>\s*\{[^}]*setToken\(""\)/u);
     expect(source).toContain("window.turnstile?.reset(widget.current)");
   });
 });