diff --git a/app/admin/[character]/[page]/page.tsx b/app/admin/[character]/[page]/page.tsx
index 3653b0b..f7d90f2 100644
--- a/app/admin/[character]/[page]/page.tsx
+++ b/app/admin/[character]/[page]/page.tsx
@@ -1,3 +1,4 @@
+import { Localized } from "@/components/i18n/text";
 import Link from "next/link";
 import Image from "next/image";
 import { ArrowLeftIcon } from "lucide-react";
@@ -65,7 +66,7 @@ export default async function StructuredEditorPage({
       <AdminHeader />
       <main className="mx-auto flex w-full max-w-6xl flex-col gap-6 p-4 sm:p-6 lg:p-8">
         <header className="flex items-center gap-4">
-          <Button
+          <Localized attributes={{ "aria-label": "กลับ Dashboard" }}><Button
             variant="outline"
             size="icon"
             render={<Link href="/admin" />}
@@ -73,7 +74,7 @@ export default async function StructuredEditorPage({
             aria-label="กลับ Dashboard"
           >
             <ArrowLeftIcon />
-          </Button>
+          </Button></Localized>
           <div className="relative size-16 shrink-0 overflow-hidden rounded-lg border">
             <Image src={guide.coverUrl} alt={guide.name} fill sizes="64px" className="object-cover" />
           </div>
diff --git a/app/admin/[character]/page.tsx b/app/admin/[character]/page.tsx
index f42b8aa..7777ff4 100644
--- a/app/admin/[character]/page.tsx
+++ b/app/admin/[character]/page.tsx
@@ -1,3 +1,4 @@
+import { Localized, Text } from "@/components/i18n/text";
 import Image from "next/image";
 import Link from "next/link";
 import { ArrowLeftIcon, ArrowUpRightIcon } from "lucide-react";
@@ -40,14 +41,14 @@ export default async function GuideOverviewPage({ params }: { params: Promise<{
       <AdminHeader />
       <main className="mx-auto flex w-full max-w-6xl flex-col gap-8 p-4 sm:p-6 lg:p-8">
         <header className="flex flex-wrap items-center gap-4">
-          <Button variant="outline" size="icon" render={<Link href="/admin" />} nativeButton={false} aria-label="กลับ Dashboard">
+          <Localized attributes={{ "aria-label": "กลับ Dashboard" }}><Button variant="outline" size="icon" render={<Link href="/admin" />} nativeButton={false} aria-label="กลับ Dashboard">
             <ArrowLeftIcon />
-          </Button>
+          </Button></Localized>
           <div className="relative size-16 overflow-hidden rounded-lg border">
             <Image src={guide.coverUrl} alt={guide.name} fill sizes="64px" className="object-cover" />
           </div>
           <div className="min-w-0 flex-1">
-            <p className="text-sm text-muted-foreground">เลือกส่วนที่ต้องการแก้ไข</p>
+            <p className="text-sm text-muted-foreground"><Text message="เลือกส่วนที่ต้องการแก้ไข" /></p>
             <h1 className="font-heading text-3xl font-semibold">{guide.name}</h1>
             <EditorPresence guideId={guide.id} section="Overview" />
           </div>
diff --git a/app/admin/create/page.tsx b/app/admin/create/page.tsx
index 82f834b..f5b2447 100644
--- a/app/admin/create/page.tsx
+++ b/app/admin/create/page.tsx
@@ -1,3 +1,4 @@
+import { Localized, Text } from "@/components/i18n/text";
 import Link from "next/link";
 import { ArrowLeftIcon } from "lucide-react";
 import { redirect } from "next/navigation";
@@ -19,8 +20,8 @@ export default async function CreateGuidePage() {
       <AdminHeader />
       <main className="mx-auto flex w-full max-w-7xl flex-col gap-8 p-4 sm:p-6 lg:p-8">
         <header className="flex items-center gap-4">
-          <Button variant="outline" size="icon" render={<Link href="/admin" />} nativeButton={false} aria-label="กลับ Dashboard"><ArrowLeftIcon /></Button>
-          <div><p className="text-sm text-muted-foreground">Catalog ล่าสุดจาก Lunaris</p><h1 className="font-heading text-3xl font-semibold">สร้าง Guide ใหม่</h1></div>
+          <Localized attributes={{ "aria-label": "กลับ Dashboard" }}><Button variant="outline" size="icon" render={<Link href="/admin" />} nativeButton={false} aria-label="กลับ Dashboard"><ArrowLeftIcon /></Button></Localized>
+          <div><p className="text-sm text-muted-foreground"><Text message="Catalog ล่าสุดจาก Lunaris" /></p><h1 className="font-heading text-3xl font-semibold"><Text message="สร้าง Guide ใหม่" /></h1></div>
         </header>
         <CreateGuideFlow characters={catalog.characters} existingKeys={guides.map((guide) => guide.characterKey)} />
       </main>
diff --git a/app/admin/generate/image/page.tsx b/app/admin/generate/image/page.tsx
index cfabbcd..1350084 100644
--- a/app/admin/generate/image/page.tsx
+++ b/app/admin/generate/image/page.tsx
@@ -1,3 +1,4 @@
+import { Text } from "@/components/i18n/text";
 import { redirect } from "next/navigation";
 import { connection } from "next/server";
 
@@ -29,13 +30,11 @@ export default async function OverviewImagePage() {
       <AdminHeader />
       <main className="mx-auto flex w-full max-w-7xl flex-col gap-8 p-4 sm:p-6 lg:p-8">
         <header>
-          <p className="text-sm font-medium text-primary">Image generator</p>
+          <p className="text-sm font-medium text-primary"><Text message="Image generator" /></p>
           <h1 className="font-heading text-3xl font-semibold">
-            สร้างภาพ Overview
-          </h1>
+            <Text message="สร้างภาพ Overview" /></h1>
           <p className="mt-2 text-muted-foreground">
-            สร้างและดาวน์โหลดภาพ PNG ขนาด 3000×3000 โดยไม่เปลี่ยนภาพใน Guide
-          </p>
+            <Text message="สร้างและดาวน์โหลดภาพ PNG ขนาด 3000×3000 โดยไม่เปลี่ยนภาพใน Guide" /></p>
         </header>
         <OverviewImageGenerator
           characters={catalog.characters.map((character) => ({
diff --git a/app/admin/glossary/page.tsx b/app/admin/glossary/page.tsx
index 0c75055..d73ab05 100644
--- a/app/admin/glossary/page.tsx
+++ b/app/admin/glossary/page.tsx
@@ -1,3 +1,4 @@
+import { Text } from "@/components/i18n/text";
 import { redirect } from "next/navigation";
 import { connection } from "next/server";
 
@@ -20,8 +21,8 @@ export default async function GlossaryPage() {
       <AdminHeader />
       <main className="mx-auto flex w-full max-w-4xl flex-col gap-8 p-4 sm:p-6 lg:p-8">
         <header>
-          <p className="text-sm font-medium text-primary">Search shortcuts</p>
-          <h1 className="font-heading text-3xl font-semibold">Glossary Manager</h1>
+          <p className="text-sm font-medium text-primary"><Text message="Search shortcuts" /></p>
+          <h1 className="font-heading text-3xl font-semibold"><Text message="Glossary Manager" /></h1>
         </header>
         <GlossaryManager aliases={aliases} catalogs={{
           character: catalog.characters,
diff --git a/app/admin/page.tsx b/app/admin/page.tsx
index b642e6e..25b5261 100644
--- a/app/admin/page.tsx
+++ b/app/admin/page.tsx
@@ -1,3 +1,4 @@
+import { Text } from "@/components/i18n/text";
 import { redirect } from "next/navigation";
 import { connection } from "next/server";
 
@@ -22,9 +23,9 @@ export default async function AdminPage() {
       <AdminHeader />
       <main className="mx-auto flex w-full max-w-7xl flex-col gap-8 p-4 sm:p-6 lg:p-8">
         <header>
-          <p className="text-sm font-medium text-primary">Content workspace</p>
-          <h1 className="font-heading text-3xl font-semibold">Guide Dashboard</h1>
-          <p className="mt-2 text-muted-foreground">จัดการ Guide แบบภาพ-first และบันทึกขึ้นเว็บไซต์ทันที</p>
+          <p className="text-sm font-medium text-primary"><Text message="Content workspace" /></p>
+          <h1 className="font-heading text-3xl font-semibold"><Text message="Guide Dashboard" /></h1>
+          <p className="mt-2 text-muted-foreground"><Text message="จัดการ Guide แบบภาพ-first และบันทึกขึ้นเว็บไซต์ทันที" /></p>
         </header>
         <StructuredDashboard guides={guides} trash={trash} catalogVersion={catalogVersion} />
       </main>
diff --git a/app/admin/register/page.tsx b/app/admin/register/page.tsx
index 6966998..5dd9766 100644
--- a/app/admin/register/page.tsx
+++ b/app/admin/register/page.tsx
@@ -1,3 +1,4 @@
+import { Text } from "@/components/i18n/text";
 import { asc } from "drizzle-orm";
 import { redirect } from "next/navigation";
 import { connection } from "next/server";
@@ -28,11 +29,10 @@ export default async function RegisterPage() {
       <AdminHeader />
       <main className="mx-auto flex w-full max-w-7xl flex-col gap-6 p-4 sm:p-6 lg:p-8">
         <header>
-          <p className="text-sm font-medium text-primary">Admin access</p>
-          <h1 className="font-heading text-3xl font-semibold">จัดการบัญชี</h1>
+          <p className="text-sm font-medium text-primary"><Text message="Admin access" /></p>
+          <h1 className="font-heading text-3xl font-semibold"><Text message="จัดการบัญชี" /></h1>
           <p className="mt-2 text-muted-foreground">
-            สร้างบัญชีให้ผู้ดูแลคนอื่น หรือลบบัญชีที่ไม่ต้องใช้งานแล้ว
-          </p>
+            <Text message="สร้างบัญชีให้ผู้ดูแลคนอื่น หรือลบบัญชีที่ไม่ต้องใช้งานแล้ว" /></p>
         </header>
         <RegisterCard accounts={accounts} currentUserId={session.user.id} />
       </main>
diff --git a/app/layout.tsx b/app/layout.tsx
index 5f9006f..ba60593 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import { Anuphan, Geist_Mono } from "next/font/google";
 
+import { LocaleProvider } from "@/components/i18n/locale-provider";
 import { DeploymentUpdateNotifier } from "@/components/deployment-update-notifier";
 import { PageProgress } from "@/components/page-progress";
 import { Toaster } from "@/components/ui/sonner";
@@ -38,6 +39,7 @@ export default function RootLayout({ children }: LayoutProps<"/">) {
       className={`dark ${anuphan.variable} ${geistMono.variable} h-full antialiased`}
     >
       <body className="flex min-h-full flex-col">
+        <LocaleProvider>
         <PageProgress />
         {children}
         <DeploymentUpdateNotifier deploymentId={deploymentId} />
@@ -47,6 +49,7 @@ export default function RootLayout({ children }: LayoutProps<"/">) {
           position="bottom-right"
           toastOptions={{ className: anuphan.className }}
         />
+        </LocaleProvider>
       </body>
     </html>
   );
diff --git a/app/not-found.tsx b/app/not-found.tsx
index 92b1ab5..26eb2e6 100644
--- a/app/not-found.tsx
+++ b/app/not-found.tsx
@@ -1,3 +1,4 @@
+import { Text } from "@/components/i18n/text";
 import Link from "next/link";
 import { MapPinOffIcon } from "lucide-react";
 
@@ -20,13 +21,12 @@ export default function NotFound() {
         <Empty>
           <EmptyHeader>
             <EmptyMedia variant="icon"><MapPinOffIcon aria-hidden="true" /></EmptyMedia>
-            <EmptyTitle>ไม่พบคู่มือนี้</EmptyTitle>
+            <EmptyTitle><Text message="ไม่พบคู่มือนี้" /></EmptyTitle>
             <EmptyDescription>
-              หน้านี้อาจถูกซ่อน เปลี่ยนชื่อ หรือยังไม่มีเนื้อหาที่เผยแพร่
-            </EmptyDescription>
+              <Text message="หน้านี้อาจถูกซ่อน เปลี่ยนชื่อ หรือยังไม่มีเนื้อหาที่เผยแพร่" /></EmptyDescription>
           </EmptyHeader>
           <EmptyContent>
-            <Button render={<Link href="/" />}>กลับไปหน้ารวมตัวละคร</Button>
+            <Button render={<Link href="/" />}><Text message="กลับไปหน้ารวมตัวละคร" /></Button>
           </EmptyContent>
         </Empty>
       </main>
diff --git a/app/page.tsx b/app/page.tsx
index d34fa5c..819b148 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,3 +1,4 @@
+import { Text } from "@/components/i18n/text";
 import { connection } from "next/server";
 import { Suspense } from "react";
 
@@ -21,11 +22,9 @@ export default function HomePage() {
       <main className="mx-auto flex w-full max-w-7xl flex-col gap-8 px-4 py-10 sm:px-6 sm:py-14">
         <header className="max-w-3xl">
           <h1 className="mt-2 font-heading text-4xl font-semibold">
-            เลือกตัวละครแล้วส่องดูได้เลย
-          </h1>
+            <Text message="เลือกตัวละครแล้วส่องดูได้เลย" /></h1>
           <p className="mt-3 text-lg leading-8 text-muted-foreground">
-            ไกด์ตัวละคร อาวุธ อาร์ติแฟกต์ กลุ่มดาว และคำนวณทีม
-          </p>
+            <Text message="ไกด์ตัวละคร อาวุธ อาร์ติแฟกต์ กลุ่มดาว และคำนวณทีม" /></p>
         </header>
         <Suspense fallback={<div className="min-h-svh" aria-hidden="true" />}>
           <DirectoryContent />
diff --git a/app/thanks/page.tsx b/app/thanks/page.tsx
index 1fb89e5..e860f6f 100644
--- a/app/thanks/page.tsx
+++ b/app/thanks/page.tsx
@@ -1,3 +1,4 @@
+import { Text, Localized } from "@/components/i18n/text";
 import type { Metadata } from "next";
 import Image from "next/image";
 import Link from "next/link";
@@ -79,7 +80,7 @@ export default function ThanksPage() {
               height={36}
               className="size-9 object-contain"
             />
-            <span>ไกด์เกนชินไม่ใช่เกมมือถือ</span>
+            <span><Text message="ไกด์เกนชินไม่ใช่เกมมือถือ" /></span>
           </Link>
         </div>
       </header>
@@ -87,11 +88,9 @@ export default function ThanksPage() {
       <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>
+            <Text message="Special Thanks" /></h1>
           <p className="text-lg leading-8 text-muted-foreground">
-            ขอบคุณทุกคนที่มอบแรงสนับสนุนและเวลาให้เว็บไซต์นี้เกิดขึ้นได้
-          </p>
+            <Text message="ขอบคุณทุกคนที่มอบแรงสนับสนุนและเวลาให้เว็บไซต์นี้เกิดขึ้นได้" /></p>
         </header>
 
         <Card className="w-full gap-0 py-0 sm:flex-row sm:items-center">
@@ -105,16 +104,13 @@ export default function ThanksPage() {
               className="row-span-2 size-16 object-contain"
             />
             <CardTitle className="text-xl sm:text-2xl">
-              Astral Development
-            </CardTitle>
+              <Text message="Astral Development" /></CardTitle>
             <CardDescription className="font-medium">
-              ผู้สนับสนุนหลักด้าน Development
-            </CardDescription>
+              <Text message="ผู้สนับสนุนหลักด้าน Development" /></CardDescription>
           </CardHeader>
           <CardContent className="pb-4 sm:max-w-md sm:py-4">
             <p className="leading-6 text-muted-foreground">
-              ขอบคุณที่สนับสนุนระบบ Hosting ที่สามารถให้เว็บออนไลน์และพร้อมใช้งาน
-            </p>
+              <Text message="ขอบคุณที่สนับสนุนระบบ Hosting ที่สามารถให้เว็บออนไลน์และพร้อมใช้งาน" /></p>
           </CardContent>
           <CardFooter className="justify-center sm:self-stretch sm:border-t-0 sm:border-l">
             <Button
@@ -123,14 +119,13 @@ export default function ThanksPage() {
                 <Link href="https://astrxl.dev" target="_blank" rel="noreferrer" />
               }
             >
-              เยี่ยมชม Astral
-              <ExternalLinkIcon data-icon="inline-end" />
+              <Text message="เยี่ยมชม Astral" /><ExternalLinkIcon data-icon="inline-end" />
             </Button>
           </CardFooter>
         </Card>
 
         {specialThanks.length > 0 ? (
-          <section
+          <Localized attributes={{ "aria-label": "รายชื่อผู้สนับสนุน" }}><section
             aria-label="รายชื่อผู้สนับสนุน"
             className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3"
           >
@@ -138,21 +133,20 @@ export default function ThanksPage() {
               <Card key={person.username}>
                 <CardHeader className="justify-items-center text-center">
                   <Avatar className="size-20">
-                    <AvatarImage
+                    <Localized attributes={{ "alt": { message: "รูปโปรไฟล์ของ {name}", params: { name: person.username } } }}><AvatarImage
                       src={`/thanks/${person.profile}`}
                       alt={`รูปโปรไฟล์ของ ${person.username}`}
-                    />
+                    /></Localized>
                     <AvatarFallback>{getInitials(person.username)}</AvatarFallback>
                   </Avatar>
                   <CardTitle className="mt-2">{person.username}</CardTitle>
                   {person.role ? (
-                    <CardDescription>{person.role}</CardDescription>
+                    <CardDescription><Text message={person.role} /></CardDescription>
                   ) : null}
                 </CardHeader>
                 <CardContent>
                   <p className="text-center text-muted-foreground">
-                    ขอบคุณที่เป็นส่วนสำคัญของเว็บไซด์นี้
-                  </p>
+                    <Text message="ขอบคุณที่เป็นส่วนสำคัญของเว็บไซด์นี้" /></p>
                 </CardContent>
                 <CardFooter>
                   <Button
@@ -167,15 +161,14 @@ export default function ThanksPage() {
                       />
                     }
                   >
-                    ดูโปรไฟล์
-                    <ExternalLinkIcon data-icon="inline-end" />
+                    <Text message="ดูโปรไฟล์" /><ExternalLinkIcon data-icon="inline-end" />
                   </Button>
                 </CardFooter>
               </Card>
             ))}
-          </section>
+          </section></Localized>
         ) : (
-            <div>I am sigma number one</div>
+            <div><Text message="I am sigma number one" /></div>
         )}
       </main>
       <SiteFooter />
diff --git a/components/admin/admin-header.tsx b/components/admin/admin-header.tsx
index 6da1140..b36c28d 100644
--- a/components/admin/admin-header.tsx
+++ b/components/admin/admin-header.tsx
@@ -1,5 +1,7 @@
 "use client";
 
+import { useTranslation } from "@/components/i18n/locale-provider";
+import { LanguageDropdown } from "@/components/i18n/language-dropdown";
 import Image from "next/image";
 import Link from "next/link";
 import { usePathname, useRouter } from "next/navigation";
@@ -17,6 +19,7 @@ import { Button } from "@/components/ui/button";
 import { authClient } from "@/lib/auth/client";
 
 export function AdminHeader() {
+  const { t } = useTranslation();
   const pathname = usePathname();
   const router = useRouter();
 
@@ -28,9 +31,10 @@ export function AdminHeader() {
           className="mr-auto 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 className="hidden sm:inline">ไกด์เกนชินไม่ใช่เกมมือถือ</span>
+          <span className="hidden sm:inline">{t("ไกด์เกนชินไม่ใช่เกมมือถือ")}</span>
         </Link>
-        <nav aria-label="Admin navigation" className="flex items-center gap-1">
+        <LanguageDropdown />
+        <nav aria-label={t("Admin navigation")} className="flex items-center gap-1">
           <Button
             variant={pathname === "/admin/glossary" ? "secondary" : "ghost"}
             size="sm"
@@ -38,7 +42,7 @@ export function AdminHeader() {
             render={<Link href="/admin/glossary" />}
           >
             <BookOpenIcon data-icon="inline-start" />
-            <span className="hidden sm:inline">Glossary</span>
+            <span className="hidden sm:inline">{t("Glossary")}</span>
           </Button>
           <Button
             variant={pathname === "/admin/register" ? "secondary" : "ghost"}
@@ -47,7 +51,7 @@ export function AdminHeader() {
             render={<Link href="/admin/register" />}
           >
             <UserPlusIcon data-icon="inline-start" />
-            <span className="hidden sm:inline">Accounts</span>
+            <span className="hidden sm:inline">{t("Accounts")}</span>
           </Button>
           <Button
             variant={pathname === "/admin" ? "secondary" : "ghost"}
@@ -56,7 +60,7 @@ export function AdminHeader() {
             render={<Link href="/admin" />}
           >
             <LayoutDashboardIcon data-icon="inline-start" />
-            <span className="hidden sm:inline">Dashboard</span>
+            <span className="hidden sm:inline">{t("Dashboard")}</span>
           </Button>
           <Button
             variant={pathname === "/admin/create" ? "secondary" : "ghost"}
@@ -65,7 +69,7 @@ export function AdminHeader() {
             render={<Link href="/admin/create" />}
           >
             <PlusIcon data-icon="inline-start" />
-            <span className="hidden sm:inline">New Guide</span>
+            <span className="hidden sm:inline">{t("New Guide")}</span>
           </Button>
           <Button
             variant={
@@ -76,21 +80,21 @@ export function AdminHeader() {
             render={<Link href="/admin/generate/image" />}
           >
             <ImageIcon data-icon="inline-start" />
-            <span className="hidden sm:inline">Image Generator</span>
+            <span className="hidden sm:inline">{t("Image Generator")}</span>
           </Button>
           <Button
             variant="ghost"
             size="icon-sm"
             nativeButton={false}
             render={<Link href="/" target="_blank" />}
-            aria-label="เปิดหน้าเว็บไซต์"
+            aria-label={t("เปิดหน้าเว็บไซต์")}
           >
             <ExternalLinkIcon />
           </Button>
           <Button
             variant="ghost"
             size="icon-sm"
-            aria-label="ออกจากระบบ"
+            aria-label={t("ออกจากระบบ")}
             onClick={() =>
               authClient.signOut({
                 fetchOptions: {
diff --git a/components/admin/autosave-status.tsx b/components/admin/autosave-status.tsx
index bbd2944..4191fc4 100644
--- a/components/admin/autosave-status.tsx
+++ b/components/admin/autosave-status.tsx
@@ -1,3 +1,7 @@
+"use client";
+
+import { useTranslation } from "@/components/i18n/locale-provider";
+import { Text } from "@/components/i18n/text";
 import { AlertCircleIcon, CheckIcon, ClockIcon } from "lucide-react";
 import { useState } from "react";
 
@@ -8,25 +12,26 @@ import { Spinner } from "@/components/ui/spinner";
 import type { AutosaveState } from "@/hooks/use-autosave";
 
 export function AutosaveStatus({ state, issues = [], onSave }: { state: AutosaveState; issues?: readonly string[]; onSave?: () => void }) {
+  const { t } = useTranslation();
   const [showIssues, setShowIssues] = useState(false);
 
-  if (state === "saving") return <Badge variant="secondary"><Spinner data-icon="inline-start" />Saving…</Badge>;
-  if (state === "unsaved") return <Badge variant="outline"><ClockIcon data-icon="inline-start" />Waiting to save…</Badge>;
+  if (state === "saving") return <Badge variant="secondary"><Spinner data-icon="inline-start" /><Text message="Saving…" /></Badge>;
+  if (state === "unsaved") return <Badge variant="outline"><ClockIcon data-icon="inline-start" /><Text message="Waiting to save…" /></Badge>;
   if (state === "incomplete") return <div className="flex flex-col items-end gap-2">
     <Button type="button" variant="outline" size="sm" onClick={() => setShowIssues((current) => !current)} aria-expanded={showIssues}>
-      <AlertCircleIcon data-icon="inline-start" />{showIssues ? "ซ่อนรายการ" : "ตรวจสอบข้อมูลที่ยังไม่ครบ"}
+      <AlertCircleIcon data-icon="inline-start" />{t(showIssues ? "ซ่อนรายการ" : "ตรวจสอบข้อมูลที่ยังไม่ครบ")}
     </Button>
     {showIssues ? <Alert variant="destructive" className="max-w-md">
       <AlertCircleIcon aria-hidden="true" />
-      <AlertTitle>กรุณากรอกข้อมูลให้ครบ</AlertTitle>
+      <AlertTitle><Text message="กรุณากรอกข้อมูลให้ครบ" /></AlertTitle>
       <AlertDescription>
         <div className="flex flex-col gap-2">
-          <p>แก้ไขรายการด้านล่าง แล้วระบบจะบันทึกให้อัตโนมัติ ข้อมูลที่กรอกไว้ยังไม่หาย</p>
-          {issues.length ? <ul className="flex flex-col gap-1">{issues.map((issue, index) => <li key={`${issue}-${index}`}>{issue}</li>)}</ul> : null}
+          <p><Text message="แก้ไขรายการด้านล่าง แล้วระบบจะบันทึกให้อัตโนมัติ ข้อมูลที่กรอกไว้ยังไม่หาย" /></p>
+          {issues.length ? <ul className="flex flex-col gap-1">{issues.map((issue, index) => <li key={`${issue}-${index}`}>{t(issue)}</li>)}</ul> : null}
         </div>
       </AlertDescription>
     </Alert> : null}
   </div>;
-  if (state === "error") return <div className="flex items-center gap-2"><Badge variant="destructive"><AlertCircleIcon data-icon="inline-start" />Autosave failed</Badge>{onSave ? <Button type="button" variant="outline" size="sm" onClick={onSave}>Save now</Button> : null}</div>;
-  return <Badge variant="secondary"><CheckIcon data-icon="inline-start" />Saved</Badge>;
+  if (state === "error") return <div className="flex items-center gap-2"><Badge variant="destructive"><AlertCircleIcon data-icon="inline-start" /><Text message="Autosave failed" /></Badge>{onSave ? <Button type="button" variant="outline" size="sm" onClick={onSave}><Text message="Save now" /></Button> : null}</div>;
+  return <Badge variant="secondary"><CheckIcon data-icon="inline-start" /><Text message="Saved" /></Badge>;
 }
diff --git a/components/admin/create-guide-flow.tsx b/components/admin/create-guide-flow.tsx
index 24fa86a..4579314 100644
--- a/components/admin/create-guide-flow.tsx
+++ b/components/admin/create-guide-flow.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { useTranslation } from "@/components/i18n/locale-provider";
 import { searchItems } from "@/lib/search";
 
 import Image from "next/image";
@@ -23,6 +24,7 @@ import { cn } from "@/lib/utils";
 type Character = { key: string; name: string; aliases: string[]; element: string | null; rarity: number | null; imageUrl: string };
 
 export function CreateGuideFlow({ characters, existingKeys }: { characters: Character[]; existingKeys: string[] }) {
+  const { t } = useTranslation();
   const router = useRouter();
   const [query, setQuery] = useState("");
   const [selected, setSelected] = useState<Character | null>(null);
@@ -39,13 +41,13 @@ export function CreateGuideFlow({ characters, existingKeys }: { characters: Char
     return (
       <Card className="mx-auto w-full max-w-4xl">
         <CardHeader>
-          <CardTitle>ตั้งค่า Guide ของ {selected.name}</CardTitle>
-          <CardDescription>เพิ่มภาพหน้าปก และใส่ Overview ได้หากต้องการ</CardDescription>
+          <CardTitle>{t("ตั้งค่า Guide ของ")}{" "}{selected.name}</CardTitle>
+          <CardDescription>{t("เพิ่มภาพหน้าปก และใส่ Overview ได้หากต้องการ")}</CardDescription>
         </CardHeader>
         <CardContent>
           <FieldGroup>
             <Field>
-              <FieldLabel>Guide Image</FieldLabel>
+              <FieldLabel>{t("Guide Image")}</FieldLabel>
               {cover ? (
                 <div className="relative aspect-square max-w-md overflow-hidden rounded-lg border">
                   <Image src={cover.url} alt={`Guide cover ${selected.name}`} fill className="object-cover" />
@@ -54,20 +56,20 @@ export function CreateGuideFlow({ characters, existingKeys }: { characters: Char
               <MediaUploader onReady={setCover} />
             </Field>
             <Field>
-              <FieldLabel htmlFor="overview">Overview (optional)</FieldLabel>
-              <Textarea id="overview" value={overview} maxLength={500} onChange={(event) => setOverview(event.target.value)} placeholder="สรุปแนวทางเล่น จุดเด่น และสิ่งที่ผู้ชมจะพบใน Guide นี้" />
-              <FieldDescription>{overview.length}/500 ตัวอักษร</FieldDescription>
+              <FieldLabel htmlFor="overview">{t("Overview (optional)")}</FieldLabel>
+              <Textarea id="overview" value={overview} maxLength={500} onChange={(event) => setOverview(event.target.value)} placeholder={t("สรุปแนวทางเล่น จุดเด่น และสิ่งที่ผู้ชมจะพบใน Guide นี้")} />
+              <FieldDescription>{overview.length}{t("/500 ตัวอักษร")}</FieldDescription>
             </Field>
           </FieldGroup>
         </CardContent>
         <CardFooter className="justify-between">
-          <Button type="button" variant="outline" onClick={() => setSelected(null)}><ArrowLeftIcon data-icon="inline-start" />เลือกใหม่</Button>
+          <Button type="button" variant="outline" onClick={() => setSelected(null)}><ArrowLeftIcon data-icon="inline-start" />{t("เลือกใหม่")}</Button>
           <Button disabled={pending || !cover} onClick={() => startTransition(async () => {
             const result = await createStructuredGuide({ characterKey: selected.key, coverMediaId: cover?.id, overview });
-            if (result.status === "error") { toast.error(result.message); return; }
-            toast.success("สร้าง Guide แล้ว");
+            if (result.status === "error") { toast.error(t(result.message)); return; }
+            toast.success(t("สร้าง Guide แล้ว"));
             router.push(result.location!);
-          })}>{pending ? <Spinner data-icon="inline-start" /> : <CheckIcon data-icon="inline-start" />}สร้าง Guide</Button>
+          })}>{pending ? <Spinner data-icon="inline-start" /> : <CheckIcon data-icon="inline-start" />}{t("สร้าง Guide")}</Button>
         </CardFooter>
       </Card>
     );
@@ -77,7 +79,7 @@ export function CreateGuideFlow({ characters, existingKeys }: { characters: Char
     <div className="flex flex-col gap-6">
       <InputGroup className="max-w-xl">
         <InputGroupAddon><SearchIcon /></InputGroupAddon>
-        <InputGroupInput value={query} onChange={(event) => setQuery(event.target.value)} placeholder="ค้นหาตัวละคร…" aria-label="ค้นหาตัวละคร" />
+        <InputGroupInput value={query} onChange={(event) => setQuery(event.target.value)} placeholder={t("ค้นหาตัวละคร…")} aria-label={t("ค้นหาตัวละคร")} />
       </InputGroup>
 
       <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
@@ -90,8 +92,8 @@ export function CreateGuideFlow({ characters, existingKeys }: { characters: Char
                 <CardTitle>{character.name}</CardTitle>
                 <CardDescription>{character.element ?? "Unknown element"}</CardDescription>
               </CardHeader>
-              <CardContent className="flex gap-2">{character.rarity ? <Badge variant="secondary">{character.rarity}★</Badge> : null}{disabled ? <Badge variant="outline">มี Guide แล้ว</Badge> : null}</CardContent>
-              <CardFooter className="pb-4"><Button className="w-full" disabled={disabled} onClick={() => setSelected(character)}>เลือกตัวละคร</Button></CardFooter>
+              <CardContent className="flex gap-2">{character.rarity ? <Badge variant="secondary">{character.rarity}★</Badge> : null}{disabled ? <Badge variant="outline">{t("มี Guide แล้ว")}</Badge> : null}</CardContent>
+              <CardFooter className="pb-4"><Button className="w-full" disabled={disabled} onClick={() => setSelected(character)}>{t("เลือกตัวละคร")}</Button></CardFooter>
             </Card>
           );
         })}
diff --git a/components/admin/delete-condition-dialog.tsx b/components/admin/delete-condition-dialog.tsx
index c9a3d82..034af36 100644
--- a/components/admin/delete-condition-dialog.tsx
+++ b/components/admin/delete-condition-dialog.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { useTranslation } from "@/components/i18n/locale-provider";
 import type { ComponentProps } from "react";
 import { Trash2Icon } from "lucide-react";
 
@@ -17,17 +18,18 @@ export function DeleteConditionDialog({
   onConfirm,
   iconOnly = false,
 }: DeleteConditionDialogProps) {
+  const { t } = useTranslation();
   return (
     <DeleteConfirmationDialog
       trigger={trigger}
-      triggerTooltip={iconOnly ? "ลบ Condition นี้" : undefined}
-      title="ลบ Condition นี้?"
-      description="ข้อมูลทั้งหมดใน Condition นี้จะถูกลบออก"
+      triggerTooltip={iconOnly ? t("ลบ Condition นี้") : undefined}
+      title={t("ลบ Condition นี้?")}
+      description={t("ข้อมูลทั้งหมดใน Condition นี้จะถูกลบออก")}
       showSuccessToast
       onConfirm={onConfirm}
     >
       <Trash2Icon data-icon={iconOnly ? undefined : "inline-start"} />
-      <span className={iconOnly ? "sr-only" : undefined}>ลบ Condition นี้</span>
+      <span className={iconOnly ? "sr-only" : undefined}>{t("ลบ Condition นี้")}</span>
     </DeleteConfirmationDialog>
   );
 }
diff --git a/components/admin/delete-confirmation-dialog.tsx b/components/admin/delete-confirmation-dialog.tsx
index e6f76b7..e54b369 100644
--- a/components/admin/delete-confirmation-dialog.tsx
+++ b/components/admin/delete-confirmation-dialog.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { useTranslation } from "@/components/i18n/locale-provider";
 import type { ComponentProps, ReactNode } from "react";
 import { toast } from "sonner";
 
@@ -41,9 +42,10 @@ export function DeleteConfirmationDialog({
   showSuccessToast = true,
   triggerTooltip,
 }: DeleteConfirmationDialogProps) {
+  const { t } = useTranslation();
   const handleConfirm = async () => {
     await onConfirm();
-    if (showSuccessToast) toast.success("ลบสำเร็จ!");
+    if (showSuccessToast) toast.success(t("ลบสำเร็จ!"));
   };
 
   return (
@@ -59,13 +61,13 @@ export function DeleteConfirmationDialog({
       ) : null}
       <AlertDialogContent>
         <AlertDialogHeader>
-          <AlertDialogTitle>{title}</AlertDialogTitle>
-          <AlertDialogDescription>{description}</AlertDialogDescription>
+          <AlertDialogTitle>{typeof title === "string" ? t(title) : title}</AlertDialogTitle>
+          <AlertDialogDescription>{typeof description === "string" ? t(description) : description}</AlertDialogDescription>
         </AlertDialogHeader>
         <AlertDialogFooter>
-          <AlertDialogCancel>ยกเลิก</AlertDialogCancel>
+          <AlertDialogCancel>{t("ยกเลิก")}</AlertDialogCancel>
           <AlertDialogAction variant="destructive" onClick={handleConfirm}>
-            {confirmLabel}
+            {typeof confirmLabel === "string" ? t(confirmLabel) : confirmLabel}
           </AlertDialogAction>
         </AlertDialogFooter>
       </AlertDialogContent>
diff --git a/components/admin/editor-presence.tsx b/components/admin/editor-presence.tsx
index d5bc424..4706de3 100644
--- a/components/admin/editor-presence.tsx
+++ b/components/admin/editor-presence.tsx
@@ -1,18 +1,20 @@
 "use client";
 
+import { useTranslation } from "@/components/i18n/locale-provider";
 import { UsersIcon } from "lucide-react";
 
 import { Badge } from "@/components/ui/badge";
 import { useAdminPresence } from "@/hooks/use-presence";
 
 export function EditorPresence({ guideId, section }: { guideId: string; section: string }) {
+  const { t } = useTranslation();
   const presence = useAdminPresence(guideId, section);
   const editors = presence?.editorsByGuide[guideId] ?? [];
   return (
     <div className="flex flex-wrap items-center gap-1" aria-live="polite">
       <Badge variant="secondary">
         <UsersIcon data-icon="inline-start" />
-        Editing {editors.length || (presence ? 0 : "")}
+        {t("Editing")}{" "}{editors.length || (presence ? 0 : "")}
       </Badge>
       {editors.map((editor) => (
         <Badge key={editor.userId} variant="outline">
diff --git a/components/admin/extra-sheet-editor.tsx b/components/admin/extra-sheet-editor.tsx
index e2e054d..df12bac 100644
--- a/components/admin/extra-sheet-editor.tsx
+++ b/components/admin/extra-sheet-editor.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { useTranslation } from "@/components/i18n/locale-provider";
 import {
   GripHorizontalIcon,
   GripVerticalIcon,
@@ -118,6 +119,7 @@ function InlineDataEditor({
   cell,
   onChange,
 }: DataEditorProps<{ value: string }>) {
+  const { t } = useTranslation();
   const inputRef = useRef<HTMLInputElement>(null);
   const text = useMemo(() => {
     const document = new DOMParser().parseFromString(
@@ -138,7 +140,7 @@ function InlineDataEditor({
       <input
         ref={inputRef}
         type="text"
-        aria-label="แก้ไขข้อความเซลล์"
+        aria-label={t("แก้ไขข้อความเซลล์")}
         value={text}
         onChange={(event) => onChange({ ...cell, value: event.target.value })}
       />
@@ -153,6 +155,7 @@ function EditableColumnIndicator({
   selected,
   onRename,
 }: ColumnIndicatorProps & { id: string; onRename: (column: number) => void }) {
+  const { t } = useTranslation();
   const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
     id,
     strategy: horizontalListSortingStrategy,
@@ -168,7 +171,7 @@ function EditableColumnIndicator({
         variant="ghost"
         size="icon-sm"
         className="touch-none"
-        aria-label={`ลากเพื่อย้าย ${String(label ?? `คอลัมน์ ${column + 1}`)}`}
+        aria-label={t("ลากเพื่อย้าย {name}", { name: String(label ?? `คอลัมน์ ${column + 1}`) })}
         {...attributes}
         {...listeners}
       >
@@ -188,6 +191,7 @@ function EditableColumnIndicator({
 }
 
 function SortableRowIndicator({ id, row, label, selected, onSelect }: RowIndicatorProps & { id: string }) {
+  const { t } = useTranslation();
   const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
     id,
     strategy: verticalListSortingStrategy,
@@ -203,7 +207,7 @@ function SortableRowIndicator({ id, row, label, selected, onSelect }: RowIndicat
         variant="ghost"
         size="icon-sm"
         className="touch-none"
-        aria-label={`ลากเพื่อย้ายแถว ${row + 1}`}
+        aria-label={t("ลากเพื่อย้ายแถว {index}", { index: row + 1 })}
         {...attributes}
         {...listeners}
       >
@@ -233,6 +237,7 @@ export function ExtraSheetEditor({
   onChange: (value: ExtraSheet) => void;
   onRemove: () => void;
 }) {
+  const { t } = useTranslation();
   const sensors = useSensors(
     useSensor(PointerSensor),
     useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
@@ -412,29 +417,29 @@ export function ExtraSheetEditor({
   return (
     <div
       className="flex min-w-0 flex-col gap-3"
-      aria-label="ตารางข้อมูลเสริม"
+      aria-label={t("ตารางข้อมูลเสริม")}
       onKeyDown={handleSheetKeyDown}
     >
       <div className="flex flex-wrap items-center gap-2">
-        <SimpleTooltip text={<>ย้อนกลับ <Kbd>Ctrl/⌘ Z</Kbd></>}>
+        <SimpleTooltip text={<>{t("ย้อนกลับ")}<Kbd>{t("Ctrl/⌘ Z")}</Kbd></>}>
           <Button
             type="button"
             variant="ghost"
             size="icon-sm"
             disabled={!canUndo}
-            aria-label="ย้อนกลับการแก้ไขตาราง"
+            aria-label={t("ย้อนกลับการแก้ไขตาราง")}
             onClick={() => travel(-1)}
           >
             <Undo2Icon />
           </Button>
         </SimpleTooltip>
-        <SimpleTooltip text={<>ทำซ้ำ <Kbd>Ctrl/⌘ Shift Z</Kbd></>}>
+        <SimpleTooltip text={<>{t("ทำซ้ำ")}<Kbd>{t("Ctrl/⌘ Shift Z")}</Kbd></>}>
           <Button
             type="button"
             variant="ghost"
             size="icon-sm"
             disabled={!canRedo}
-            aria-label="ทำซ้ำการแก้ไขตาราง"
+            aria-label={t("ทำซ้ำการแก้ไขตาราง")}
             onClick={() => travel(1)}
           >
             <Redo2Icon />
@@ -451,24 +456,22 @@ export function ExtraSheetEditor({
           }}
         >
           <PlusIcon data-icon="inline-start" />
-          เพิ่มแถว
-        </Button>
+          {t("เพิ่มแถว")}</Button>
         <Button type="button" variant="outline" size="sm" onClick={openAddColumn}>
           <PlusIcon data-icon="inline-start" />
-          เพิ่มคอลัมน์
-        </Button>
+          {t("เพิ่มคอลัมน์")}</Button>
         <Button type="button" variant="outline" size="sm" onClick={openActiveCellEditor}>
           <PencilIcon data-icon="inline-start" />
-          แก้ไข {selectedCount > 1 ? `${selectedCount} เซลล์` : "เซลล์"}
+          {t("แก้ไข")}{" "}{selectedCount > 1 ? t("{count} เซลล์", { count: selectedCount }) : t("เซลล์")}
         </Button>
         <label className="relative">
           <Button type="button" variant="outline" size="sm" render={<span />} nativeButton={false}>
             <PaletteIcon data-icon="inline-start" />
-            สีพื้นหลัง {selectedCount > 1 ? `${selectedCount} เซลล์` : "เซลล์"}
+            {t("สีพื้นหลัง")}{" "}{selectedCount > 1 ? t("{count} เซลล์", { count: selectedCount }) : t("เซลล์")}
           </Button>
           <input
             type="color"
-            aria-label="เลือกสีพื้นหลังเซลล์"
+            aria-label={t("เลือกสีพื้นหลังเซลล์")}
             className="absolute inset-0 cursor-pointer opacity-0"
             value={activeRow?.backgrounds?.[activeColumn?.id ?? ""] ?? DEFAULT_CELL_BACKGROUND}
             onChange={(event) => {
@@ -486,12 +489,10 @@ export function ExtraSheetEditor({
           size="sm"
           onClick={() => commitSheet(updateExtraSheetCells(value, selectedPointsRef.current, { backgroundColor: null }))}
         >
-          ล้างสีพื้นหลัง
-        </Button>
+          {t("ล้างสีพื้นหลัง")}</Button>
         <Button type="button" variant="ghost" size="sm" onClick={() => setRemoveOpen(true)}>
           <Trash2Icon data-icon="inline-start" />
-          ลบตาราง
-        </Button>
+          {t("ลบตาราง")}</Button>
       </div>
 
       <div
@@ -549,11 +550,11 @@ export function ExtraSheetEditor({
       <Dialog open={cellDialogOpen} onOpenChange={setCellDialogOpen}>
         <DialogContent>
           <DialogHeader>
-            <DialogTitle>แก้ไขเซลล์</DialogTitle>
+            <DialogTitle>{t("แก้ไขเซลล์")}</DialogTitle>
             <DialogDescription>
               {selectedCount > 1
-                ? `การแก้ข้อความจะแทนที่ทั้ง ${selectedCount} เซลล์ แต่การเปลี่ยนรูปแบบจะเก็บข้อความเดิมของแต่ละเซลล์`
-                : `แถว ${active.row + 1} · ${activeColumn?.label ?? "คอลัมน์"}`}
+                ? t("การแก้ข้อความจะแทนที่ทั้ง {count} เซลล์ แต่การเปลี่ยนรูปแบบจะเก็บข้อความเดิมของแต่ละเซลล์", { count: selectedCount })
+                : t("แถว {index} · {name}", { index: active.row + 1, name: activeColumn?.label ?? "คอลัมน์" })}
             </DialogDescription>
           </DialogHeader>
           <RichTextEditor
@@ -577,7 +578,7 @@ export function ExtraSheetEditor({
                   : updateExtraSheetCell(value, active.row, active.column, cellDraft));
               }
               setCellDialogOpen(false);
-            }}>บันทึกเซลล์</Button>
+            }}>{t("บันทึกเซลล์")}</Button>
           </DialogFooter>
         </DialogContent>
       </Dialog>
@@ -585,12 +586,12 @@ export function ExtraSheetEditor({
       <Dialog open={labelDialogOpen} onOpenChange={setLabelDialogOpen}>
         <DialogContent>
           <DialogHeader>
-            <DialogTitle>{renaming ? "แก้ไขชื่อคอลัมน์" : "เพิ่มคอลัมน์"}</DialogTitle>
-            <DialogDescription>ตั้งชื่อที่ใช้อธิบายข้อมูลในคอลัมน์นี้</DialogDescription>
+            <DialogTitle>{renaming ? t("แก้ไขชื่อคอลัมน์") : t("เพิ่มคอลัมน์")}</DialogTitle>
+            <DialogDescription>{t("ตั้งชื่อที่ใช้อธิบายข้อมูลในคอลัมน์นี้")}</DialogDescription>
           </DialogHeader>
           <FieldGroup>
             <Field data-invalid={labelInvalid || undefined}>
-              <FieldLabel htmlFor="extra-sheet-column-label">ชื่อคอลัมน์</FieldLabel>
+              <FieldLabel htmlFor="extra-sheet-column-label">{t("ชื่อคอลัมน์")}</FieldLabel>
               <Input
                 id="extra-sheet-column-label"
                 value={columnLabel}
@@ -605,7 +606,7 @@ export function ExtraSheetEditor({
           </FieldGroup>
           <DialogFooter showCloseButton>
             <Button type="button" disabled={labelInvalid} onClick={saveColumnLabel}>
-              {renaming ? "บันทึกชื่อ" : "เพิ่มคอลัมน์"}
+              {renaming ? t("บันทึกชื่อ") : t("เพิ่มคอลัมน์")}
             </Button>
           </DialogFooter>
         </DialogContent>
@@ -614,9 +615,9 @@ export function ExtraSheetEditor({
       <DeleteConfirmationDialog
         open={removeOpen}
         onOpenChange={setRemoveOpen}
-        title="ลบตารางนี้?"
-        description="คอลัมน์ แถว และข้อมูลในเซลล์ทั้งหมดจะถูกลบออกจากการ์ด"
-        confirmLabel="ยืนยันลบตาราง"
+        title={t("ลบตารางนี้?")}
+        description={t("คอลัมน์ แถว และข้อมูลในเซลล์ทั้งหมดจะถูกลบออกจากการ์ด")}
+        confirmLabel={t("ยืนยันลบตาราง")}
         showSuccessToast={false}
         onConfirm={() => {
           onRemove();
diff --git a/components/admin/glossary-manager.tsx b/components/admin/glossary-manager.tsx
index cddc1aa..61d8787 100644
--- a/components/admin/glossary-manager.tsx
+++ b/components/admin/glossary-manager.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { useTranslation } from "@/components/i18n/locale-provider";
 import { searchItems } from "@/lib/search";
 
 import Image from "next/image";
@@ -37,6 +38,7 @@ export function GlossaryManager({
   aliases: Alias[];
   catalogs: Record<GlossaryKind, CatalogItem[]>;
 }) {
+  const { t } = useTranslation();
   const router = useRouter();
   const [pending, startTransition] = useTransition();
   const [kind, setKind] = useState<GlossaryKind>("character");
@@ -56,11 +58,11 @@ export function GlossaryManager({
   const submit = () => startTransition(async () => {
     const result = await addGlossaryAlias({ kind, catalogKey: item?.key, alias });
     if (result.status === "error") {
-      toast.error(result.message);
+      toast.error(t(result.message));
       return;
     }
     setAlias("");
-    toast.success("เพิ่ม Shortcut แล้ว");
+    toast.success(t("เพิ่ม Shortcut แล้ว"));
     router.refresh();
   });
 
@@ -68,13 +70,13 @@ export function GlossaryManager({
     <div className="flex flex-col gap-6">
       <Card>
         <CardHeader>
-          <CardTitle>เพิ่ม Shortcut</CardTitle>
-          <CardDescription>ผูกคำค้นแบบย่อกับรายการจาก Catalog</CardDescription>
+          <CardTitle>{t("เพิ่ม Shortcut")}</CardTitle>
+          <CardDescription>{t("ผูกคำค้นแบบย่อกับรายการจาก Catalog")}</CardDescription>
         </CardHeader>
         <CardContent>
           <FieldGroup>
             <Field>
-              <FieldLabel>ประเภท</FieldLabel>
+              <FieldLabel>{t("ประเภท")}</FieldLabel>
               <Select value={kind} onValueChange={(value) => {
                 setKind(value as GlossaryKind);
                 setItem(null);
@@ -90,7 +92,7 @@ export function GlossaryManager({
               </Select>
             </Field>
             <Field>
-              <FieldLabel>รายการ</FieldLabel>
+              <FieldLabel>{t("รายการ")}</FieldLabel>
               <FuzzyCombobox
                 items={catalogs[kind]}
                 searchNames={(value) => [value.name, ...aliases.filter((entry) => entry.kind === kind && entry.catalogKey === value.key).map((entry) => entry.alias)]}
@@ -99,9 +101,9 @@ export function GlossaryManager({
                 itemToStringLabel={(value) => value.name}
                 itemToStringValue={(value) => value.name}
               >
-                <ComboboxInput placeholder="ค้นหารายการ…" showClear />
+                <ComboboxInput placeholder={t("ค้นหารายการ…")} showClear />
                 <ComboboxContent>
-                  <ComboboxEmpty>ไม่พบรายการ</ComboboxEmpty>
+                  <ComboboxEmpty>{t("ไม่พบรายการ")}</ComboboxEmpty>
                   <ComboboxList>
                     {(catalogItem) => (
                       <ComboboxItem key={catalogItem.key} value={catalogItem}>
@@ -119,27 +121,26 @@ export function GlossaryManager({
               </FuzzyCombobox>
             </Field>
             <Field>
-              <FieldLabel htmlFor="glossary-alias">Shortcut</FieldLabel>
+              <FieldLabel htmlFor="glossary-alias">{t("Shortcut")}</FieldLabel>
               <Input id="glossary-alias" value={alias} maxLength={120} onChange={(event) => setAlias(event.target.value)} onKeyDown={(event) => {
                 if (event.key === "Enter" && item && alias.trim()) submit();
               }} />
             </Field>
             <Button disabled={pending || !item || !alias.trim()} onClick={submit}>
               {pending ? <Spinner data-icon="inline-start" /> : null}
-              เพิ่ม Shortcut
-            </Button>
+              {t("เพิ่ม Shortcut")}</Button>
           </FieldGroup>
         </CardContent>
       </Card>
 
       <Card>
         <CardHeader>
-          <CardTitle>Glossary</CardTitle>
-          <CardDescription>{aliases.length} shortcuts</CardDescription>
+          <CardTitle>{t("Glossary")}</CardTitle>
+          <CardDescription>{aliases.length} {t("shortcuts")}</CardDescription>
         </CardHeader>
         <CardContent className="flex flex-col gap-3">
           <Field>
-            <FieldLabel htmlFor="glossary-search">ค้นหา</FieldLabel>
+            <FieldLabel htmlFor="glossary-search">{t("ค้นหา")}</FieldLabel>
             <div className="relative">
               <SearchIcon className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground" />
               <Input id="glossary-search" className="pl-9" value={query} onChange={(event) => setQuery(event.target.value)} />
@@ -164,11 +165,11 @@ export function GlossaryManager({
                   <p className="truncate text-sm text-muted-foreground">{name ?? entry.catalogKey}</p>
                 </div>
                 <Badge variant={name ? "secondary" : "outline"}>{name ? kindLabels[entry.kind as GlossaryKind] : "Unavailable"}</Badge>
-                <Button variant="ghost" size="icon-sm" disabled={pending} aria-label={`ลบ ${entry.alias}`} onClick={() => startTransition(async () => {
+                <Button variant="ghost" size="icon-sm" disabled={pending} aria-label={t("ลบ {name}", { name: entry.alias })} onClick={() => startTransition(async () => {
                   const result = await removeGlossaryAlias(entry.id);
-                  if (result.status === "error") toast.error(result.message);
+                  if (result.status === "error") toast.error(t(result.message));
                   else {
-                    toast.success("ลบ Shortcut แล้ว");
+                    toast.success(t("ลบ Shortcut แล้ว"));
                     router.refresh();
                   }
                 })}><Trash2Icon /></Button>
diff --git a/components/admin/guide-extra-controls.tsx b/components/admin/guide-extra-controls.tsx
index d67bf48..ba8816c 100644
--- a/components/admin/guide-extra-controls.tsx
+++ b/components/admin/guide-extra-controls.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { useTranslation } from "@/components/i18n/locale-provider";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { closestCenter, DndContext, KeyboardSensor, PointerSensor, useSensor, useSensors, type DragEndEvent } from "@dnd-kit/core";
@@ -42,22 +43,22 @@ import { cn } from "@/lib/utils";
 type ExtraLink = { id: string; slug: string; title: string };
 
 function SortableExtraCard({ extra, index, characterKey, disabled }: { extra: ExtraLink; index: number; characterKey: string; disabled: boolean }) {
+  const { t } = useTranslation();
   const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: extra.id, disabled });
   return (
     <Card ref={setNodeRef} style={{ transform: CSS.Transform.toString(transform), transition }} className={cn(isDragging && "relative z-10 opacity-70 shadow-lg")}>
       <CardHeader>
         <CardTitle>{extra.title}</CardTitle>
-        <CardDescription>Extra section {index + 1}</CardDescription>
+        <CardDescription>{t("Extra section")}{" "}{index + 1}</CardDescription>
         <CardAction>
-          <Button type="button" variant="ghost" size="icon-sm" disabled={disabled} className="touch-none cursor-grab active:cursor-grabbing" aria-label={`จัดลำดับ ${extra.title}`} {...attributes} {...listeners}>
+          <Button type="button" variant="ghost" size="icon-sm" disabled={disabled} className="touch-none cursor-grab active:cursor-grabbing" aria-label={t("จัดลำดับ {name}", { name: extra.title })} {...attributes} {...listeners}>
             <GripVerticalIcon />
           </Button>
         </CardAction>
       </CardHeader>
       <CardContent>
         <Button variant="outline" render={<Link href={`/admin/${characterKey}/${extra.slug}`} />} nativeButton={false}>
-          แก้ไข Extra
-          <ArrowUpRightIcon data-icon="inline-end" />
+          {t("แก้ไข Extra")}<ArrowUpRightIcon data-icon="inline-end" />
         </Button>
       </CardContent>
     </Card>
@@ -77,6 +78,7 @@ export function AddExtraButton({
   size?: ComponentProps<typeof Button>["size"];
   label?: string;
 }) {
+  const { t } = useTranslation();
   const router = useRouter();
   const [open, setOpen] = useState(false);
   const [title, setTitle] = useState("");
@@ -88,7 +90,7 @@ export function AddExtraButton({
     const browserWindow = window as Window & { __guideHasUnsavedChanges?: boolean };
     if (
       browserWindow.__guideHasUnsavedChanges &&
-      !window.confirm("ข้อมูลยังบันทึกไม่เสร็จ ต้องการสร้าง Extra ใหม่หรือไม่?")
+      !window.confirm(t("ข้อมูลยังบันทึกไม่เสร็จ ต้องการสร้าง Extra ใหม่หรือไม่?"))
     ) {
       return;
     }
@@ -97,12 +99,12 @@ export function AddExtraButton({
     const result = await createGuideExtra(guideId, { title: trimmedTitle });
     setPending(false);
     if (result.status === "error") {
-      toast.error(result.message);
+      toast.error(t(result.message));
       return;
     }
     setOpen(false);
     setTitle("");
-    toast.success("สร้าง Extra แล้ว");
+    toast.success(t("สร้าง Extra แล้ว"));
     router.push(`/admin/${characterKey}/${result.section.slug}`);
     router.refresh();
   };
@@ -113,19 +115,18 @@ export function AddExtraButton({
         type="button"
         variant={variant}
         size={size}
-        aria-label={label || "เพิ่ม Extra"}
+        aria-label={label || t("เพิ่ม Extra")}
         onClick={() => setOpen(true)}
       >
         <PlusIcon data-icon="inline-start" />
-        {label}
+        {t(label)}
       </Button>
       <Dialog open={open} onOpenChange={setOpen}>
         <DialogContent>
           <DialogHeader>
-            <DialogTitle>เพิ่ม Extra section</DialogTitle>
+            <DialogTitle>{t("เพิ่ม Extra section")}</DialogTitle>
             <DialogDescription>
-              ตั้งชื่อส่วนเสริม ระบบจะสร้างและเปิดหน้าแก้ไขให้ทันที
-            </DialogDescription>
+              {t("ตั้งชื่อส่วนเสริม ระบบจะสร้างและเปิดหน้าแก้ไขให้ทันที")}</DialogDescription>
           </DialogHeader>
           <form
             onSubmit={(event) => {
@@ -135,7 +136,7 @@ export function AddExtraButton({
           >
             <FieldGroup>
               <Field>
-                <FieldLabel htmlFor="new-extra-title">ชื่อ Extra</FieldLabel>
+                <FieldLabel htmlFor="new-extra-title">{t("ชื่อ Extra")}</FieldLabel>
                 <Input
                   id="new-extra-title"
                   value={title}
@@ -148,8 +149,7 @@ export function AddExtraButton({
             <DialogFooter className="mt-4">
               <Button type="submit" disabled={!title.trim() || pending}>
                 {pending ? <Spinner data-icon="inline-start" /> : <PlusIcon data-icon="inline-start" />}
-                สร้าง Extra
-              </Button>
+                {t("สร้าง Extra")}</Button>
             </DialogFooter>
           </form>
         </DialogContent>
@@ -169,6 +169,7 @@ export function ExtraOverview({
   initialVersion: number;
   initialExtras: ExtraLink[];
 }) {
+  const { t } = useTranslation();
   const router = useRouter();
   const [extras, setExtras] = useState(initialExtras);
   const [version, setVersion] = useState(initialVersion);
@@ -191,7 +192,7 @@ export function ExtraOverview({
     setPending(false);
     if (result.status !== "saved") {
       setExtras(previous);
-      toast.error(result.message);
+      toast.error(t(result.message));
       if (result.status === "conflict") window.location.reload();
       return;
     }
@@ -203,8 +204,8 @@ export function ExtraOverview({
     <section className="flex flex-col gap-4">
       <div className="flex flex-wrap items-center justify-between gap-3">
         <div>
-          <h2 className="font-heading text-xl font-semibold">Extra sections</h2>
-          <p className="text-sm text-muted-foreground">แต่ละ Extra มีหน้าแก้ไขและบันทึกแยกจากกัน</p>
+          <h2 className="font-heading text-xl font-semibold">{t("Extra sections")}</h2>
+          <p className="text-sm text-muted-foreground">{t("แต่ละ Extra มีหน้าแก้ไขและบันทึกแยกจากกัน")}</p>
         </div>
         <AddExtraButton
           guideId={guideId}
@@ -223,8 +224,8 @@ export function ExtraOverview({
       ) : (
         <Card>
           <CardHeader>
-            <CardTitle>ยังไม่มี Extra</CardTitle>
-            <CardDescription>กดเพิ่ม Extra เพื่อสร้างส่วนเสริมแรกของ Guide นี้</CardDescription>
+            <CardTitle>{t("ยังไม่มี Extra")}</CardTitle>
+            <CardDescription>{t("กดเพิ่ม Extra เพื่อสร้างส่วนเสริมแรกของ Guide นี้")}</CardDescription>
           </CardHeader>
         </Card>
       )}
diff --git a/components/admin/guide-overview-form.tsx b/components/admin/guide-overview-form.tsx
index f8183f9..eb20eeb 100644
--- a/components/admin/guide-overview-form.tsx
+++ b/components/admin/guide-overview-form.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { useTranslation } from "@/components/i18n/locale-provider";
 import Image from "next/image";
 import { closestCenter, DndContext, KeyboardSensor, PointerSensor, useSensor, useSensors, type DragEndEvent } from "@dnd-kit/core";
 import { SortableContext, arrayMove, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
@@ -81,25 +82,26 @@ function createVideoLinkId(): string {
 }
 
 function SortableVideoLink({ link, index, guideName, onChange, onRemove }: { link: VideoLink; index: number; guideName: string; onChange: (url: string) => void; onRemove: () => void }) {
+  const { t } = useTranslation();
   const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: link.id });
   const video = parseYouTubeUrl(link.url.trim());
   const invalid = Boolean(link.url.trim() && !video);
   return (
     <Field ref={setNodeRef} data-invalid={invalid} style={{ transform: CSS.Transform.toString(transform), transition }} className={cn("rounded-lg border p-3", isDragging && "relative z-10 opacity-70 shadow-lg")}>
       <div className="flex items-center gap-2">
-        <Button type="button" variant="ghost" size="icon-sm" className="touch-none cursor-grab active:cursor-grabbing" aria-label={`จัดลำดับวิดีโอ ${index + 1}`} {...attributes} {...listeners}>
+        <Button type="button" variant="ghost" size="icon-sm" className="touch-none cursor-grab active:cursor-grabbing" aria-label={t("จัดลำดับวิดีโอ {index}", { index: index + 1 })} {...attributes} {...listeners}>
           <GripVerticalIcon data-icon="inline-start" />
         </Button>
-        <FieldLabel htmlFor={`guide-youtube-url-${link.id}`} className="flex-1">YouTube video {index + 1}</FieldLabel>
-        <Button type="button" variant="ghost" size="icon-sm" onClick={onRemove} aria-label={`ลบวิดีโอ ${index + 1}`}>
+        <FieldLabel htmlFor={`guide-youtube-url-${link.id}`} className="flex-1">{t("YouTube video")}{" "}{index + 1}</FieldLabel>
+        <Button type="button" variant="ghost" size="icon-sm" onClick={onRemove} aria-label={t("ลบวิดีโอ {index}", { index: index + 1 })}>
           <Trash2Icon data-icon="inline-start" />
         </Button>
       </div>
       <Input id={`guide-youtube-url-${link.id}`} type="url" inputMode="url" value={link.url} maxLength={2_048} placeholder="https://www.youtube.com/watch?v=..." aria-invalid={invalid} onChange={(event) => onChange(event.target.value)} />
-      {invalid ? <FieldError>กรุณาใส่ลิงก์วิดีโอ YouTube ที่ถูกต้อง</FieldError> : null}
+      {invalid ? <FieldError>{t("กรุณาใส่ลิงก์วิดีโอ YouTube ที่ถูกต้อง")}</FieldError> : null}
       {video ? (
         <div className="aspect-video w-full max-w-64 overflow-hidden rounded-lg border bg-muted">
-          <iframe src={video.embedUrl} title={`ตัวอย่างวิดีโอไกด์ ${guideName} ${index + 1}`} loading="lazy" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerPolicy="strict-origin-when-cross-origin" allowFullScreen className="size-full" />
+          <iframe src={video.embedUrl} title={t("ตัวอย่างวิดีโอไกด์ {guideName} {index}", { guideName: guideName, index: index + 1 })} loading="lazy" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerPolicy="strict-origin-when-cross-origin" allowFullScreen className="size-full" />
         </div>
       ) : null}
     </Field>
@@ -107,35 +109,36 @@ function SortableVideoLink({ link, index, guideName, onChange, onRemove }: { lin
 }
 
 function SortableBleedingLayer({ layer, onChange, onRemove }: { layer: BleedingLayer; onChange: (patch: Partial<Pick<BleedingLayer, "amount" | "blendMode">>) => void; onRemove: () => void }) {
+  const { t } = useTranslation();
   const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: layer.id });
   const selectedMode = blendModeItems.find((mode) => mode.value === layer.blendMode);
   return (
     <div ref={setNodeRef} style={{ transform: CSS.Transform.toString(transform), transition }} className={cn("flex items-start gap-2 rounded-lg border bg-card p-3", isDragging && "relative z-10 opacity-70 shadow-lg")}>
-      <Button type="button" variant="ghost" size="icon-sm" className="touch-none cursor-grab active:cursor-grabbing" aria-label="จัดลำดับ Bleeding" {...attributes} {...listeners}><GripVerticalIcon data-icon="inline-start" /></Button>
+      <Button type="button" variant="ghost" size="icon-sm" className="touch-none cursor-grab active:cursor-grabbing" aria-label={t("จัดลำดับ Bleeding")} {...attributes} {...listeners}><GripVerticalIcon data-icon="inline-start" /></Button>
       {layer.imageUrl ? <Image src={layer.imageUrl} alt="" width={48} height={48} className="size-12 rounded object-contain bg-muted" /> : <div className="size-12 rounded bg-muted" />}
       <div className="flex min-w-0 flex-1 flex-col gap-3">
         <Combobox
           items={blendModeItems}
           value={selectedMode}
           onValueChange={(value) => value && onChange({ blendMode: value.value })}
-          itemToStringLabel={(item) => item.label}
+          itemToStringLabel={(item) => t(item.label)}
           itemToStringValue={(item) => item.value}
-          filter={(item, query) => `${item.label} ${item.value}`.toLowerCase().includes(query.trim().toLowerCase())}
+          filter={(item, query) => `${t(item.label)} ${item.label} ${item.value}`.toLowerCase().includes(query.trim().toLowerCase())}
         >
-          <ComboboxInput className="w-full" placeholder="เลือก Blend mode…" />
+          <ComboboxInput className="w-full" placeholder={t("เลือก Blend mode…")} />
           <ComboboxContent>
-            <ComboboxEmpty>ไม่พบ Blend mode</ComboboxEmpty>
+            <ComboboxEmpty>{t("ไม่พบ Blend mode")}</ComboboxEmpty>
             <ComboboxList>
-              {(item) => <ComboboxItem key={item.value} value={item}>{item.label}</ComboboxItem>}
+              {(item) => <ComboboxItem key={item.value} value={item}>{t(item.label)}</ComboboxItem>}
             </ComboboxList>
           </ComboboxContent>
         </Combobox>
         <Field>
-          <FieldLabel htmlFor={`bleeding-amount-${layer.id}`}>Amount {layer.amount}%</FieldLabel>
+          <FieldLabel htmlFor={`bleeding-amount-${layer.id}`}>{t("Amount")}{" "}{layer.amount}%</FieldLabel>
           <Slider id={`bleeding-amount-${layer.id}`} min={0} max={100} step={5} value={[layer.amount]} onValueChange={(value) => onChange({ amount: typeof value === "number" ? value : value[0] ?? 0 })} />
         </Field>
       </div>
-      <Button type="button" variant="ghost" size="icon-sm" onClick={onRemove} aria-label="ลบ Bleeding"><Trash2Icon data-icon="inline-start" /></Button>
+      <Button type="button" variant="ghost" size="icon-sm" onClick={onRemove} aria-label={t("ลบ Bleeding")}><Trash2Icon data-icon="inline-start" /></Button>
     </div>
   );
 }
@@ -162,6 +165,7 @@ export function GuideOverviewForm({
     character: Omit<PublicGuide["character"], "aliases">;
   };
 }) {
+  const { t } = useTranslation();
   const [overview, setOverview] = useState(guide.overview);
   const [youtubeLinks, setYoutubeLinks] = useState<VideoLink[]>(() => guide.youtubeUrls.map((url) => ({ id: createVideoLinkId(), url })));
   const [cover, setCover] = useState({
@@ -363,15 +367,14 @@ export function GuideOverviewForm({
   return (
     <Card>
       <CardHeader>
-        <CardTitle>Overview</CardTitle>
+        <CardTitle>{t("Overview")}</CardTitle>
         <CardDescription>
-          ภาพ ข้อความ และวิดีโอนี้แสดงบนหน้าแรกของ Guide
-        </CardDescription>
+          {t("ภาพ ข้อความ และวิดีโอนี้แสดงบนหน้าแรกของ Guide")}</CardDescription>
       </CardHeader>
       <CardContent>
         <FieldGroup>
           <Field data-invalid={invalidCover}>
-            <FieldLabel>Guide Image</FieldLabel>
+            <FieldLabel>{t("Guide Image")}</FieldLabel>
             <div className="grid items-start gap-4 lg:grid-cols-2">
               <div className={cn(
                 "relative aspect-square w-full overflow-hidden rounded-lg border",
@@ -387,12 +390,12 @@ export function GuideOverviewForm({
               <div className="rounded-lg border p-4">
                 <FieldGroup>
                   <Field>
-                    <FieldLabel>Upload Guide Image</FieldLabel>
-                    <FieldDescription>อัปโหลดภาพสี่เหลี่ยมสำหรับหน้าแรกของ Guide</FieldDescription>
+                    <FieldLabel>{t("Upload Guide Image")}</FieldLabel>
+                    <FieldDescription>{t("อัปโหลดภาพสี่เหลี่ยมสำหรับหน้าแรกของ Guide")}</FieldDescription>
                     <MediaUploader onReady={(asset) => setCover(asset)} />
                   </Field>
                   <Field data-invalid={invalidOverview}>
-                    <FieldLabel htmlFor="guide-overview">Overview</FieldLabel>
+                    <FieldLabel htmlFor="guide-overview">{t("Overview")}</FieldLabel>
                     <Textarea
                       id="guide-overview"
                       value={overview}
@@ -400,7 +403,7 @@ export function GuideOverviewForm({
                       maxLength={500}
                       onChange={(event) => setOverview(event.target.value)}
                     />
-                    <FieldDescription>{overview.length}/500 ตัวอักษร</FieldDescription>
+                    <FieldDescription>{overview.length}{t("/500 ตัวอักษร")}</FieldDescription>
                   </Field>
                 </FieldGroup>
               </div>
@@ -409,13 +412,12 @@ export function GuideOverviewForm({
           <Field>
             <div className="flex items-center justify-between gap-2">
               <div>
-                <FieldLabel>YouTube videos</FieldLabel>
-                <FieldDescription>ไม่บังคับ รองรับ YouTube, youtu.be, Shorts และ Live · ลากเพื่อจัดลำดับ</FieldDescription>
+                <FieldLabel>{t("YouTube videos")}</FieldLabel>
+                <FieldDescription>{t("ไม่บังคับ รองรับ YouTube, youtu.be, Shorts และ Live · ลากเพื่อจัดลำดับ")}</FieldDescription>
               </div>
               <Button type="button" variant="outline" size="sm" disabled={youtubeLinks.length >= 20} onClick={() => setYoutubeLinks((current) => [...current, { id: createVideoLinkId(), url: "" }])}>
                 <PlusIcon data-icon="inline-start" />
-                เพิ่มลิงก์
-              </Button>
+                {t("เพิ่มลิงก์")}</Button>
             </div>
             {youtubeLinks.length ? (
               <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleVideoDragEnd}>
@@ -427,10 +429,10 @@ export function GuideOverviewForm({
                   </div>
                 </SortableContext>
               </DndContext>
-            ) : <p className="text-sm text-muted-foreground">ยังไม่มีวิดีโอใน Overview</p>}
+            ) : <p className="text-sm text-muted-foreground">{t("ยังไม่มีวิดีโอใน Overview")}</p>}
           </Field>
           <Field>
-            <FieldLabel>Materials Overview</FieldLabel>
+            <FieldLabel>{t("Materials Overview")}</FieldLabel>
             <div className="grid items-start gap-4 lg:grid-cols-2">
               <div className="w-full overflow-hidden rounded-lg border">
                 <MaterialPoster
@@ -455,8 +457,7 @@ export function GuideOverviewForm({
                   {posterArt.id ? (
                     <Button type="button" variant="outline" onClick={removeUploadedPoster}>
                       <Trash2Icon data-icon="inline-start" />
-                      ลบภาพตัวละคร
-                    </Button>
+                      {t("ลบภาพตัวละคร")}</Button>
                   ) : null}
                   <GuideImageExport
                     width={1600}
@@ -481,10 +482,10 @@ export function GuideOverviewForm({
                 <div className="flex flex-col gap-2 rounded-lg border p-3">
                   <div className="flex items-center justify-between gap-2">
                     <div>
-                      <FieldLabel>Bleeding layers</FieldLabel>
-                      <p className="text-xs text-muted-foreground">ใช้ภาพตัวละครเดียวกันด้วย mix-blend-mode · รายการบนสุดจะแสดงก่อน</p>
+                      <FieldLabel>{t("Bleeding layers")}</FieldLabel>
+                      <p className="text-xs text-muted-foreground">{t("ใช้ภาพตัวละครเดียวกันด้วย mix-blend-mode · รายการบนสุดจะแสดงก่อน")}</p>
                     </div>
-                    <Button type="button" variant="outline" size="sm" disabled={!posterArt.id || !posterArt.url} onClick={addBleedingEffect}>เพิ่ม effect</Button>
+                    <Button type="button" variant="outline" size="sm" disabled={!posterArt.id || !posterArt.url} onClick={addBleedingEffect}>{t("เพิ่ม effect")}</Button>
                   </div>
                   {bleeding.length ? (
                     <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleBleedingDragEnd}>
@@ -494,15 +495,14 @@ export function GuideOverviewForm({
                         </div>
                       </SortableContext>
                     </DndContext>
-                  ) : <p className="text-sm text-muted-foreground">อัปโหลดภาพเพื่อเพิ่ม Bleeding layer</p>}
+                  ) : <p className="text-sm text-muted-foreground">{t("อัปโหลดภาพเพื่อเพิ่ม Bleeding layer")}</p>}
                 </div>
                 <Field className="rounded-lg border p-3">
-                  <div className="flex items-center justify-between gap-2"><FieldLabel htmlFor="poster-art-scale">Character image zoom</FieldLabel><span className="text-sm text-muted-foreground">{posterArtScale}%</span></div>
+                  <div className="flex items-center justify-between gap-2"><FieldLabel htmlFor="poster-art-scale">{t("Character image zoom")}</FieldLabel><span className="text-sm text-muted-foreground">{posterArtScale}%</span></div>
                   <Slider id="poster-art-scale" min={50} max={500} step={5} value={[posterArtScale]} onValueChange={(value) => setPosterArtScale(typeof value === "number" ? value : value[0] ?? 100)} />
                 </Field>
                 <FieldDescription>
-                  อัปโหลดภาพตัวละคร แล้วลากบนตัวอย่างเพื่อจัดตำแหน่ง สีด้านบนและล่างจะตรวจให้อัตโนมัติ
-                </FieldDescription>
+                  {t("อัปโหลดภาพตัวละคร แล้วลากบนตัวอย่างเพื่อจัดตำแหน่ง สีด้านบนและล่างจะตรวจให้อัตโนมัติ")}</FieldDescription>
               </div>
             </div>
           </Field>
diff --git a/components/admin/guide-section-editor.tsx b/components/admin/guide-section-editor.tsx
index f0c0c04..b653173 100644
--- a/components/admin/guide-section-editor.tsx
+++ b/components/admin/guide-section-editor.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { useTranslation } from "@/components/i18n/locale-provider";
 import { searchItems } from "@/lib/search";
 
 import dynamic from "next/dynamic";
@@ -352,17 +353,18 @@ function ConditionRenameDialog({
   onOpenChange: (open: boolean) => void;
   onChange: (value: string) => void;
 }) {
+  const { t } = useTranslation();
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent>
         <DialogHeader>
-          <DialogTitle>Rename condition</DialogTitle>
+          <DialogTitle>{t("Rename condition")}</DialogTitle>
           <DialogDescription>
-            Leave blank to use {fallback}.
+            {t("Leave blank to use")}{" "}{fallback}.
           </DialogDescription>
         </DialogHeader>
         <Field>
-          <FieldLabel htmlFor="condition-name">Condition name</FieldLabel>
+          <FieldLabel htmlFor="condition-name">{t("Condition name")}</FieldLabel>
           <Input
             id="condition-name"
             autoFocus
@@ -373,7 +375,7 @@ function ConditionRenameDialog({
           />
         </Field>
         <DialogFooter>
-          <Button type="button" onClick={() => onOpenChange(false)}>Done</Button>
+          <Button type="button" onClick={() => onOpenChange(false)}>{t("Done")}</Button>
         </DialogFooter>
       </DialogContent>
     </Dialog>
@@ -458,6 +460,7 @@ function CatalogPicker({
   showSelectedImage?: boolean;
   invalid?: boolean;
 }) {
+  const { t } = useTranslation();
   const selected = items.find((item) => item.key === value) ?? null;
   return (
     <div className="flex min-w-0 items-center gap-2">
@@ -494,7 +497,7 @@ function CatalogPicker({
             aria-invalid={invalid}
           />
           <ComboboxContent className="min-w-[24rem]">
-            <ComboboxEmpty>ไม่พบรายการ</ComboboxEmpty>
+            <ComboboxEmpty>{t("ไม่พบรายการ")}</ComboboxEmpty>
             <ComboboxList>
               {(item) => (
                 <ComboboxItem key={item.key} value={item}>
@@ -542,6 +545,7 @@ function CatalogSlotPicker({
   invalid?: boolean;
   className?: string;
 }) {
+  const { t } = useTranslation();
   const selected = items.find((item) => item.key === value) ?? null;
   return (
     <FuzzyCombobox
@@ -576,7 +580,7 @@ function CatalogSlotPicker({
       </ComboboxTrigger>
       <ComboboxContent className="min-w-72">
         <ComboboxInput placeholder={placeholder} showClear showTrigger={false} />
-        <ComboboxEmpty>ไม่พบรายการ</ComboboxEmpty>
+        <ComboboxEmpty>{t("ไม่พบรายการ")}</ComboboxEmpty>
         <ComboboxList>
           {(item) => (
             <ComboboxItem key={item.key} value={item}>
@@ -614,6 +618,7 @@ function ArtifactSlotPicker({
   onChange: (values: string[]) => void;
   label: string;
 }) {
+  const { t } = useTranslation();
   const firstKey = values[0];
   const secondKey = values[1];
   const selected = useMemo(
@@ -665,11 +670,11 @@ function ArtifactSlotPicker({
       </ComboboxTrigger>
       <ComboboxContent className="min-w-72">
         <ComboboxInput
-          placeholder="ค้นหาชุด Artifact…"
+          placeholder={t("ค้นหาชุด Artifact…")}
           showClear
           showTrigger={false}
         />
-        <ComboboxEmpty>ไม่พบชุด Artifact</ComboboxEmpty>
+        <ComboboxEmpty>{t("ไม่พบชุด Artifact")}</ComboboxEmpty>
         <ComboboxList>
           {(item) => (
             <ComboboxItem
@@ -720,9 +725,10 @@ function StatSelect({
   elementIconUrls: Record<string, string>;
   priorityColors?: boolean;
 }) {
+  const { t } = useTranslation();
   return (
     <Field>
-      <FieldLabel>{label}</FieldLabel>
+      <FieldLabel>{t(label)}</FieldLabel>
       <Select
         multiple
         value={value}
@@ -732,7 +738,7 @@ function StatSelect({
       >
         <SelectTrigger className="w-full">
           <StatIcons values={value} elementIconUrls={elementIconUrls} />
-          <SelectValue placeholder="Select recommended stats…">
+          <SelectValue placeholder={t("Select recommended stats…")}>
             {priorityColors && value.length
               ? () => value.map((selected, index) => (
                   <span key={selected} className={statPriorityColorClass(index)}>
@@ -760,7 +766,7 @@ function StatSelect({
           </SelectGroup>
         </SelectContent>
       </Select>
-      <FieldDescription>เลือกได้สูงสุด {max} ค่า</FieldDescription>
+      <FieldDescription>{t("เลือกได้สูงสุด")}{" "}{max} {t("ค่า")}</FieldDescription>
     </Field>
   );
 }
@@ -839,6 +845,7 @@ function TalentLevelPicker({
   value?: string;
   onChange: (value?: string) => void;
 }) {
+  const { t } = useTranslation();
   const selected = talentLevelOptions.find((level) => level === value) ?? null;
   return (
     <Combobox
@@ -848,15 +855,15 @@ function TalentLevelPicker({
     >
       <ComboboxInput
         className="w-full"
-        placeholder="เลือกระดับ 1–10"
+        placeholder={t("เลือกระดับ 1–10")}
         showClear
       />
       <ComboboxContent>
-        <ComboboxEmpty>ไม่พบระดับ</ComboboxEmpty>
+        <ComboboxEmpty>{t("ไม่พบระดับ")}</ComboboxEmpty>
         <ComboboxList>
           {(level) => (
             <ComboboxItem key={level} value={level}>
-              ระดับ {level}
+              {t("ระดับ")}{" "}{level}
             </ComboboxItem>
           )}
         </ComboboxList>
@@ -874,6 +881,7 @@ function SortableTalentCard({
   catalogTalent?: CatalogTalent;
   onLevelChange: (level?: string) => void;
 }) {
+  const { t } = useTranslation();
   const {
     attributes,
     listeners,
@@ -913,14 +921,14 @@ function SortableTalentCard({
             >
               <GripVerticalIcon />
               <span className="sr-only">
-                ลากเพื่อจัดลำดับ {catalogTalent?.name ?? talent.type}
+                {t("ลากเพื่อจัดลำดับ")}{" "}{catalogTalent?.name ?? talent.type}
               </span>
             </Button>
           </CardAction>
         </CardHeader>
         <CardContent>
           <Field>
-            <FieldLabel>ระดับเป้าหมาย</FieldLabel>
+            <FieldLabel>{t("ระดับเป้าหมาย")}</FieldLabel>
             <TalentLevelPicker value={talent.level} onChange={onLevelChange} />
           </Field>
         </CardContent>
@@ -936,6 +944,7 @@ function SortableWeaponCard({
   id: string;
   children: (dragHandle: ReactNode) => ReactNode;
 }) {
+  const { t } = useTranslation();
   const {
     attributes,
     listeners,
@@ -960,7 +969,7 @@ function SortableWeaponCard({
           {...listeners}
         >
           <GripVerticalIcon />
-          <span className="sr-only">ลากเพื่อจัดลำดับอาวุธ</span>
+          <span className="sr-only">{t("ลากเพื่อจัดลำดับอาวุธ")}</span>
         </Button>,
       )}
     </div>
@@ -974,6 +983,7 @@ function SortableArtifactRow({
   id: string;
   children: (dragHandle: ReactNode) => ReactNode;
 }) {
+  const { t } = useTranslation();
   const {
     attributes,
     listeners,
@@ -998,7 +1008,7 @@ function SortableArtifactRow({
           {...listeners}
         >
           <GripVerticalIcon />
-          <span className="sr-only">ลากเพื่อจัดลำดับ Artifact</span>
+          <span className="sr-only">{t("ลากเพื่อจัดลำดับ Artifact")}</span>
         </Button>,
       )}
     </div>
@@ -1012,6 +1022,7 @@ function SortableTeamItem({
   id: string;
   children: (dragHandle: ReactNode) => ReactNode;
 }) {
+  const { t } = useTranslation();
   const {
     attributes,
     listeners,
@@ -1027,7 +1038,7 @@ function SortableTeamItem({
       className={cn("min-w-0", isDragging && "opacity-60")}
     >
       {children(
-        <SimpleTooltip text="ลากเพื่อจัดลำดับ Team">
+        <SimpleTooltip text={t("ลากเพื่อจัดลำดับ Team")}>
           <Button
             type="button"
             variant="ghost"
@@ -1037,7 +1048,7 @@ function SortableTeamItem({
             {...listeners}
           >
             <GripVerticalIcon />
-            <span className="sr-only">ลากเพื่อจัดลำดับ Team</span>
+            <span className="sr-only">{t("ลากเพื่อจัดลำดับ Team")}</span>
           </Button>
         </SimpleTooltip>,
       )}
@@ -1052,6 +1063,7 @@ function SortableTeamMember({
   id: string;
   children: (dragHandle: ReactNode) => ReactNode;
 }) {
+  const { t } = useTranslation();
   const {
     attributes,
     listeners,
@@ -1067,7 +1079,7 @@ function SortableTeamMember({
       className={cn(isDragging && "opacity-60")}
     >
       {children(
-        <SimpleTooltip text="ลากเพื่อย้ายตำแหน่งตัวละคร">
+        <SimpleTooltip text={t("ลากเพื่อย้ายตำแหน่งตัวละคร")}>
           <Button
             type="button"
             variant="ghost"
@@ -1077,7 +1089,7 @@ function SortableTeamMember({
             {...listeners}
           >
             <GripVerticalIcon />
-            <span className="sr-only">ลากเพื่อย้ายตำแหน่งตัวละคร</span>
+            <span className="sr-only">{t("ลากเพื่อย้ายตำแหน่งตัวละคร")}</span>
           </Button>
         </SimpleTooltip>,
       )}
@@ -1143,6 +1155,7 @@ function SortableConditionTab({
   onSelect: () => void;
   onRename: () => void;
 }) {
+  const { t } = useTranslation();
   const {
     attributes,
     listeners,
@@ -1166,9 +1179,9 @@ function SortableConditionTab({
         onDoubleClick={onRename}
       >
         {label}
-        {index === 0 ? <Badge variant={active ? "secondary" : "outline"}>Default</Badge> : null}
+        {index === 0 ? <Badge variant={active ? "secondary" : "outline"}>{t("Default")}</Badge> : null}
       </ToggleGroupItem>
-      <SimpleTooltip text={`ลากเพื่อจัดลำดับ ${label}`}>
+      <SimpleTooltip text={t("ลากเพื่อจัดลำดับ {label}", { label: label })}>
         <Button
           type="button"
           variant="ghost"
@@ -1178,7 +1191,7 @@ function SortableConditionTab({
           {...listeners}
         >
           <GripVerticalIcon />
-          <span className="sr-only">ลากเพื่อจัดลำดับ {label}</span>
+          <span className="sr-only">{t("ลากเพื่อจัดลำดับ")}{" "}{label}</span>
         </Button>
       </SimpleTooltip>
     </div>
@@ -1255,27 +1268,28 @@ function ConditionControls({
   onDuplicate?: () => void;
   onDelete: () => void;
 }) {
+  const { t } = useTranslation();
   const { items, activeIndex } = switcherProps;
   const atLimit = items.length >= 20;
 
   return (
     <div className="flex flex-wrap gap-2">
       <SortableConditionSwitcher {...switcherProps} />
-      <SimpleTooltip text="เพิ่ม Condition">
-        <Button type="button" size="icon" variant="outline" aria-label="เพิ่ม Condition" disabled={atLimit} onClick={onAdd}>
+      <SimpleTooltip text={t("เพิ่ม Condition")}>
+        <Button type="button" size="icon" variant="outline" aria-label={t("เพิ่ม Condition")} disabled={atLimit} onClick={onAdd}>
           <PlusIcon />
         </Button>
       </SimpleTooltip>
       {onDuplicate ? (
-        <SimpleTooltip text="Duplicate Condition">
-          <Button type="button" size="icon" variant="outline" aria-label="Duplicate Condition" disabled={atLimit || !items[activeIndex]} onClick={onDuplicate}>
+        <SimpleTooltip text={t("Duplicate Condition")}>
+          <Button type="button" size="icon" variant="outline" aria-label={t("Duplicate Condition")} disabled={atLimit || !items[activeIndex]} onClick={onDuplicate}>
             <CopyIcon />
           </Button>
         </SimpleTooltip>
       ) : null}
       {items.length > 1 ? (
         <DeleteConditionDialog
-          trigger={<Button type="button" size="icon" variant="outline" aria-label="ลบ Condition นี้" />}
+          trigger={<Button type="button" size="icon" variant="outline" aria-label={t("ลบ Condition นี้")} />}
           onConfirm={onDelete}
           iconOnly
         />
@@ -1315,6 +1329,7 @@ export function GuideSectionEditor(props: GuideSectionEditorProps) {
 type EditorBase = GuideSectionEditorProps;
 
 function WeaponEditor({ guide, weapons, characters, initial }: EditorBase) {
+  const { t, locale } = useTranslation();
   const characterWeaponType = characters.find(
     (character) => character.key === guide.characterKey,
   )?.weaponType;
@@ -1401,17 +1416,14 @@ function WeaponEditor({ guide, weapons, characters, initial }: EditorBase) {
   return (
     <Card>
       <CardHeader>
-        <CardTitle>Weapon tier list</CardTitle>
+        <CardTitle>{t("Weapon tier list")}</CardTitle>
         <CardDescription>
-          ลากเพื่อเรียงอาวุธจากดีที่สุดลงมา และกรอกเปอร์เซ็นต์อย่างน้อยหนึ่งช่อง
-          ระบบจะบันทึกอัตโนมัติ
-        </CardDescription>
+          {t("ลากเพื่อเรียงอาวุธจากดีที่สุดลงมา และกรอกเปอร์เซ็นต์อย่างน้อยหนึ่งช่อง ระบบจะบันทึกอัตโนมัติ")}</CardDescription>
       </CardHeader>
       <CardContent className="flex flex-col gap-4">
         <Field>
           <FieldLabel htmlFor="weapon-section-note">
-            Header note (optional)
-          </FieldLabel>
+            {t("Header note (optional)")}</FieldLabel>
           <Textarea
             id="weapon-section-note"
             value={note}
@@ -1419,7 +1431,7 @@ function WeaponEditor({ guide, weapons, characters, initial }: EditorBase) {
           />
         </Field>
         <ConditionControls
-          ariaLabel="เลือกเงื่อนไขอาวุธ"
+          ariaLabel={t("เลือกเงื่อนไขอาวุธ")}
           items={groups}
           activeIndex={activeGroupIndex}
           onActiveIndexChange={setActiveGroupIndex}
@@ -1465,8 +1477,7 @@ function WeaponEditor({ guide, weapons, characters, initial }: EditorBase) {
         />
         <Field>
           <FieldLabel htmlFor={`weapon-condition-note-${groups[activeGroupIndex]?.clientId}`}>
-            Condition note (optional)
-          </FieldLabel>
+            {t("Condition note (optional)")}</FieldLabel>
           <Textarea
             id={`weapon-condition-note-${groups[activeGroupIndex]?.clientId}`}
             value={groups[activeGroupIndex]?.note ?? ""}
@@ -1509,7 +1520,7 @@ function WeaponEditor({ guide, weapons, characters, initial }: EditorBase) {
                                 />
                               </div>
                             ) : null}
-                            <span>อันดับ {rowIndex + 1}</span>
+                            <span>{t("อันดับ")}{" "}{rowIndex + 1}</span>
                           </CardTitle>
                           <CardAction>
                             <div className="flex gap-1">
@@ -1522,8 +1533,8 @@ function WeaponEditor({ guide, weapons, characters, initial }: EditorBase) {
                                     size="icon-sm"
                                   />
                                 }
-                                title={`ลบ ${selectedWeapon?.name ?? `อาวุธอันดับ ${rowIndex + 1}`}?`}
-                                description="รายการอาวุธและเปอร์เซ็นต์เปรียบเทียบจะถูกลบออกจาก Guide"
+                                title={t("ลบ {name}?", { name: selectedWeapon?.name ?? `อาวุธอันดับ ${rowIndex + 1}` })}
+                                description={t("รายการอาวุธและเปอร์เซ็นต์เปรียบเทียบจะถูกลบออกจาก Guide")}
                                 onConfirm={() =>
                                   setRows(
                                     rows.filter(
@@ -1533,7 +1544,7 @@ function WeaponEditor({ guide, weapons, characters, initial }: EditorBase) {
                                 }
                               >
                                 <Trash2Icon />
-                                <span className="sr-only">ลบอาวุธ</span>
+                                <span className="sr-only">{t("ลบอาวุธ")}</span>
                               </DeleteConfirmationDialog>
                             </div>
                           </CardAction>
@@ -1542,12 +1553,12 @@ function WeaponEditor({ guide, weapons, characters, initial }: EditorBase) {
                           <FieldGroup>
                             <div className="grid grid-cols-[minmax(0,1fr)_auto] items-end gap-4">
                               <Field className="min-w-0" data-invalid={weaponIssue("groups", activeGroupIndex, "rows", rowIndex, "weaponKey")}>
-                                <FieldLabel>อาวุธ</FieldLabel>
+                                <FieldLabel>{t("อาวุธ")}</FieldLabel>
                                 <CatalogPicker
                                   items={compatibleWeapons}
                                   value={row.weaponKey}
                                   invalid={weaponIssue("groups", activeGroupIndex, "rows", rowIndex, "weaponKey")}
-                                  placeholder="ค้นหาชื่ออาวุธ…"
+                                  placeholder={t("ค้นหาชื่ออาวุธ…")}
                                   rarityBackground
                                   onChange={(weaponKey) =>
                                     setRows(
@@ -1561,7 +1572,7 @@ function WeaponEditor({ guide, weapons, characters, initial }: EditorBase) {
                                 />
                               </Field>
                               <Field className="shrink-0" data-invalid={weaponIssue("groups", activeGroupIndex, "rows", rowIndex)}>
-                                <FieldLabel>Refinement</FieldLabel>
+                                <FieldLabel>{t("Refinement")}</FieldLabel>
                                 <ToggleGroup
                                   variant="outline"
                                   value={[`R${row.refinement}`]}
@@ -1586,7 +1597,7 @@ function WeaponEditor({ guide, weapons, characters, initial }: EditorBase) {
                                       key={refinement}
                                       value={`R${refinement}`}
                                     >
-                                      R{refinement}
+                                      {t("R")}{" "}{refinement}
                                     </ToggleGroupItem>
                                   ))}
                                 </ToggleGroup>
@@ -1594,7 +1605,7 @@ function WeaponEditor({ guide, weapons, characters, initial }: EditorBase) {
                             </div>
                             <div className="grid gap-4 sm:grid-cols-2">
                               <Field data-invalid={weaponIssue("groups", activeGroupIndex, "rows", rowIndex)}>
-                                <FieldLabel>Overall %</FieldLabel>
+                                <FieldLabel>{t("Overall %")}</FieldLabel>
                                 <Input
                                   type="text"
                                   inputMode="decimal"
@@ -1634,7 +1645,7 @@ function WeaponEditor({ guide, weapons, characters, initial }: EditorBase) {
                                 />
                               </Field>
                               <Field data-invalid={weaponIssue("groups", activeGroupIndex, "rows", rowIndex)}>
-                                <FieldLabel>Personal %</FieldLabel>
+                                <FieldLabel>{t("Personal %")}</FieldLabel>
                                 <Input
                                   type="text"
                                   inputMode="decimal"
@@ -1678,8 +1689,7 @@ function WeaponEditor({ guide, weapons, characters, initial }: EditorBase) {
                               <FieldLabel
                                 htmlFor={`weapon-note-${row.clientId}`}
                               >
-                                Note (optional)
-                              </FieldLabel>
+                                {t("Note (optional)")}</FieldLabel>
                               <Textarea
                                 id={`weapon-note-${row.clientId}`}
                                 value={row.note}
@@ -1724,14 +1734,13 @@ function WeaponEditor({ guide, weapons, characters, initial }: EditorBase) {
           }
         >
           <PlusIcon data-icon="inline-start" />
-          เพิ่มอาวุธ
-        </Button>
+          {t("เพิ่มอาวุธ")}</Button>
         <AutosaveStatus
           state={autosave.state}
           issues={
             validation.success
               ? []
-              : formatGuideValidationIssues("weapon", validation.error.issues)
+              : formatGuideValidationIssues("weapon", validation.error.issues, { locale })
           }
           onSave={autosave.saveNow}
         />
@@ -1747,6 +1756,7 @@ function ArtifactEditor({
   catalogTalents,
   characters,
 }: EditorBase) {
+  const { t, locale } = useTranslation();
   const profile = initial.artifactProfile;
   const elementIconUrls = Object.fromEntries(
     characters.flatMap((character) =>
@@ -1951,11 +1961,9 @@ function ArtifactEditor({
       <div className="grid items-start gap-6 xl:grid-cols-2">
       <Card className="order-1">
         <CardHeader>
-          <CardTitle>Artifact tier list</CardTitle>
+          <CardTitle>{t("Artifact tier list")}</CardTitle>
           <CardDescription>
-            จัดชุด Artifact ในกลุ่ม Late Game และ Early Game
-            ระบบจะบันทึกอัตโนมัติ
-          </CardDescription>
+            {t("จัดชุด Artifact ในกลุ่ม Late Game และ Early Game ระบบจะบันทึกอัตโนมัติ")}</CardDescription>
         </CardHeader>
         <CardContent className="flex flex-col gap-5">
           {groups.map((group, groupIndex) => (
@@ -1996,7 +2004,7 @@ function ArtifactEditor({
                                     items={artifacts}
                                     value={row.firstArtifactKey}
                                     invalid={artifactIssue("groups", groupIndex, "rows", rowIndex, "firstArtifactKey")}
-                                    placeholder="ค้นหาชุด Artifact แรก…"
+                                    placeholder={t("ค้นหาชุด Artifact แรก…")}
                                     rarityBackground
                                     showSelectedImage
                                     onChange={(firstArtifactKey) =>
@@ -2023,7 +2031,7 @@ function ArtifactEditor({
                                   <CatalogPicker
                                     items={artifacts}
                                     value={row.secondArtifactKey ?? ""}
-                                    placeholder="ค้นหาชุดที่สอง (ถ้ามี)…"
+                                    placeholder={t("ค้นหาชุดที่สอง (ถ้ามี)…")}
                                     rarityBackground
                                     showSelectedImage
                                     onChange={(secondArtifactKey) =>
@@ -2052,7 +2060,7 @@ function ArtifactEditor({
                                   <Input
                                     type="text"
                                     inputMode="decimal"
-                                    aria-label="Artifact percent"
+                                    aria-label={t("Artifact percent")}
                                     value={row.percent}
                                     aria-invalid={artifactIssue("groups", groupIndex, "rows", rowIndex)}
                                     onChange={(event) =>
@@ -2112,8 +2120,8 @@ function ArtifactEditor({
                                         size="icon"
                                       />
                                     }
-                                    title={`ลบ Artifact อันดับ ${rowIndex + 1}?`}
-                                    description={`รายการ Artifact ในกลุ่ม ${group.name} และเปอร์เซ็นต์เปรียบเทียบจะถูกลบออกจาก Guide`}
+                                    title={t("ลบ Artifact อันดับ {index}?", { index: rowIndex + 1 })}
+                                    description={t("รายการ Artifact ในกลุ่ม {name} และเปอร์เซ็นต์เปรียบเทียบจะถูกลบออกจาก Guide", { name: group.name })}
                                     onConfirm={() =>
                                       setGroups(
                                         groups.map((item, index) =>
@@ -2131,15 +2139,14 @@ function ArtifactEditor({
                                     }
                                   >
                                     <Trash2Icon />
-                                    <span className="sr-only">ลบ Artifact</span>
+                                    <span className="sr-only">{t("ลบ Artifact")}</span>
                                   </DeleteConfirmationDialog>
                                 </div>
                                 <Field>
                                   <FieldLabel
                                     htmlFor={`artifact-note-${groupIndex}-${rowIndex}`}
                                   >
-                                    Note (optional)
-                                  </FieldLabel>
+                                    {t("Note (optional)")}</FieldLabel>
                                   <Textarea
                                     id={`artifact-note-${groupIndex}-${rowIndex}`}
                                     value={row.note ?? ""}
@@ -2200,8 +2207,7 @@ function ArtifactEditor({
                   }
                 >
                   <PlusIcon data-icon="inline-start" />
-                  เพิ่มชุด Artifact
-                </Button>
+                  {t("เพิ่มชุด Artifact")}</Button>
               </CardContent>
             </Card>
           ))}
@@ -2209,12 +2215,12 @@ function ArtifactEditor({
       </Card>
       <Card className="order-3 overflow-hidden pt-0">
         <CardHeader className="bg-primary py-4 text-center text-primary-foreground">
-          <CardTitle className="text-2xl">Recommended Stats</CardTitle>
+          <CardTitle className="text-2xl">{t("Recommended Stats")}</CardTitle>
         </CardHeader>
         <CardContent>
           <FieldGroup>
             <ConditionControls
-              ariaLabel="เลือกเงื่อนไขค่าสถานะแนะนำ"
+              ariaLabel={t("เลือกเงื่อนไขค่าสถานะแนะนำ")}
               items={recommendedGroups}
               activeIndex={activeRecommendedGroupIndex}
               onActiveIndexChange={setActiveRecommendedGroupIndex}
@@ -2247,13 +2253,13 @@ function ArtifactEditor({
               onChange={(name) => setRecommendedGroups(recommendedGroups.map((group, index) => index === renamingRecommendedGroupIndex ? { ...group, name } : group))}
             />
             <Field>
-              <FieldLabel htmlFor={`recommended-condition-note-${recommendedGroups[activeRecommendedGroupIndex]?.clientId}`}>Condition note (optional)</FieldLabel>
+              <FieldLabel htmlFor={`recommended-condition-note-${recommendedGroups[activeRecommendedGroupIndex]?.clientId}`}>{t("Condition note (optional)")}</FieldLabel>
               <Textarea id={`recommended-condition-note-${recommendedGroups[activeRecommendedGroupIndex]?.clientId}`} value={recommendedGroups[activeRecommendedGroupIndex]?.note ?? ""} onChange={(event) => setRecommendedGroups(recommendedGroups.map((group, index) => index === activeRecommendedGroupIndex ? { ...group, note: event.target.value } : group))} />
             </Field>
 
             <div className="grid overflow-hidden rounded-xl border sm:grid-cols-3">
               <StatSelect
-                label="Sands / นาฬิกา"
+                label={t("Sands / นาฬิกา")}
                 options={mainStatOptions.sands}
                 value={sands}
                 max={3}
@@ -2262,7 +2268,7 @@ function ArtifactEditor({
                 priorityColors
               />
               <StatSelect
-                label="Goblet / ถ้วย"
+                label={t("Goblet / ถ้วย")}
                 options={mainStatOptions.goblet}
                 value={goblet}
                 max={3}
@@ -2271,7 +2277,7 @@ function ArtifactEditor({
                 priorityColors
               />
               <StatSelect
-                label="Circlet / หมวก"
+                label={t("Circlet / หมวก")}
                 options={mainStatOptions.circlet}
                 value={circlet}
                 max={3}
@@ -2281,7 +2287,7 @@ function ArtifactEditor({
               />
             </div>
             <StatSelect
-              label="Substats"
+              label={t("Substats")}
               options={substatOptions}
               value={substats}
               max={substatOptions.length}
@@ -2294,17 +2300,16 @@ function ArtifactEditor({
       </Card>
       <Card className="order-2 xl:row-span-2 xl:h-full">
         <CardHeader>
-          <CardTitle>Target Stats</CardTitle>
+          <CardTitle>{t("Target Stats")}</CardTitle>
           <CardDescription>
-            ตั้งค่าเป้าหมายค่าสถานะสำหรับแต่ละ Condition
-          </CardDescription>
+            {t("ตั้งค่าเป้าหมายค่าสถานะสำหรับแต่ละ Condition")}</CardDescription>
         </CardHeader>
         <CardContent>
           <FieldGroup>
             <FieldSet>
-              <FieldLegend>Target Stats</FieldLegend>
+              <FieldLegend>{t("Target Stats")}</FieldLegend>
               <ConditionControls
-                ariaLabel="เลือกเงื่อนไขค่าสถานะเป้าหมาย"
+                ariaLabel={t("เลือกเงื่อนไขค่าสถานะเป้าหมาย")}
                 items={targetGroups}
                 activeIndex={activeTargetGroupIndex}
                 onActiveIndexChange={setActiveTargetGroupIndex}
@@ -2337,7 +2342,7 @@ function ArtifactEditor({
                 onChange={(name) => setTargetGroups(targetGroups.map((group, index) => index === renamingTargetGroupIndex ? { ...group, name } : group))}
               />
               <Field>
-                <FieldLabel htmlFor={`target-condition-note-${targetGroups[activeTargetGroupIndex]?.clientId}`}>Condition note (optional)</FieldLabel>
+                <FieldLabel htmlFor={`target-condition-note-${targetGroups[activeTargetGroupIndex]?.clientId}`}>{t("Condition note (optional)")}</FieldLabel>
                 <Textarea id={`target-condition-note-${targetGroups[activeTargetGroupIndex]?.clientId}`} value={targetGroups[activeTargetGroupIndex]?.note ?? ""} onChange={(event) => setTargetGroups(targetGroups.map((group, index) => index === activeTargetGroupIndex ? { ...group, note: event.target.value } : group))} />
               </Field>
               <div className="grid gap-5 sm:grid-cols-2">
@@ -2360,7 +2365,7 @@ function ArtifactEditor({
                           </FieldLabel>
                           <Input
                             value={target?.value ?? ""}
-                            placeholder="Value or text"
+                            placeholder={t("Value or text")}
                             aria-label={`${stat} value`}
                             onChange={(event) =>
                               setTargets(
@@ -2379,9 +2384,7 @@ function ArtifactEditor({
                 ))}
               </div>
               <FieldDescription>
-                กรอกเฉพาะค่าเป็นตัวเลข เปอร์เซ็นต์ หรือข้อความ เช่น -%
-                หากไม่กรอกค่า ระบบจะไม่แสดงส่วนค่าสถานะเป้าหมาย
-              </FieldDescription>
+                {t("กรอกเฉพาะค่าเป็นตัวเลข เปอร์เซ็นต์ หรือข้อความ เช่น -% หากไม่กรอกค่า ระบบจะไม่แสดงส่วนค่าสถานะเป้าหมาย")}</FieldDescription>
             </FieldSet>
           </FieldGroup>
         </CardContent>
@@ -2389,15 +2392,14 @@ function ArtifactEditor({
       </div>
       <Card>
         <CardHeader>
-          <CardTitle>Talent Upgrade</CardTitle>
+          <CardTitle>{t("Talent Upgrade")}</CardTitle>
           <CardDescription>
-            จัดลำดับ Talent เลือกระดับเป้าหมาย และกำหนดความสำคัญ
-          </CardDescription>
+            {t("จัดลำดับ Talent เลือกระดับเป้าหมาย และกำหนดความสำคัญ")}</CardDescription>
         </CardHeader>
         <CardContent>
           <FieldGroup>
             <FieldSet>
-              <FieldLegend>Talent Priority</FieldLegend>
+              <FieldLegend>{t("Talent Priority")}</FieldLegend>
               <DndContext
                 sensors={talentSensors}
                 collisionDetection={closestCenter}
@@ -2442,27 +2444,26 @@ function ArtifactEditor({
                                 if (relation)
                                   setTalentRelation(talent.type, relation);
                               }}
-                              aria-label={`ตัวเปรียบเทียบหลัง ${catalogTalent?.name ?? talent.type}`}
+                              aria-label={t("ตัวเปรียบเทียบหลัง {name}", { name: catalogTalent?.name ?? talent.type })}
                               className="shrink-0"
                             >
                               <ToggleGroupItem
                                 className={SELECTED_TOGGLE_CLASS}
                                 value="gt"
-                                aria-label="มากกว่า"
+                                aria-label={t("มากกว่า")}
                               >
-                                &gt;
-                              </ToggleGroupItem>
+                                {t("&gt;")}</ToggleGroupItem>
                               <ToggleGroupItem
                                 className={SELECTED_TOGGLE_CLASS}
                                 value="gte"
-                                aria-label="มากกว่าหรือเท่ากับ"
+                                aria-label={t("มากกว่าหรือเท่ากับ")}
                               >
                                 ≥
                               </ToggleGroupItem>
                               <ToggleGroupItem
                                 className={SELECTED_TOGGLE_CLASS}
                                 value="eq"
-                                aria-label="เท่ากับ"
+                                aria-label={t("เท่ากับ")}
                               >
                                 =
                               </ToggleGroupItem>
@@ -2482,7 +2483,7 @@ function ArtifactEditor({
         <CardContent>
           <FieldGroup>
             <Field>
-              <FieldLabel htmlFor="artifact-note">Note (optional)</FieldLabel>
+              <FieldLabel htmlFor="artifact-note">{t("Note (optional)")}</FieldLabel>
               <Textarea
                 id="artifact-note"
                 value={note}
@@ -2500,6 +2501,7 @@ function ArtifactEditor({
                 : formatGuideValidationIssues(
                     "artifact",
                     validation.error.issues,
+                    { locale },
                   )
             }
             onSave={autosave.saveNow}
@@ -2515,6 +2517,7 @@ function ConstellationEditor({
   initial,
   catalogConstellations,
 }: EditorBase) {
+  const { t, locale } = useTranslation();
   const [note, setNote] = useState(initial.sectionNote ?? "");
   const makeRows = (savedRows: ConstellationValue[] = []) => {
     const source = catalogConstellations.length
@@ -2588,17 +2591,14 @@ function ConstellationEditor({
   return (
     <Card>
       <CardHeader>
-        <CardTitle>Constellations</CardTitle>
+        <CardTitle>{t("Constellations")}</CardTitle>
         <CardDescription>
-          ชื่อ รายละเอียด และไอคอนมาจาก Lunaris อัตโนมัติ
-          กรอกเฉพาะเปอร์เซ็นต์เทียบกับ C0 = 100%
-        </CardDescription>
+          {t("ชื่อ รายละเอียด และไอคอนมาจาก Lunaris อัตโนมัติ กรอกเฉพาะเปอร์เซ็นต์เทียบกับ C0 = 100%")}</CardDescription>
       </CardHeader>
       <CardContent className="flex flex-col gap-4">
         <Field>
           <FieldLabel htmlFor="constellation-section-note">
-            Header note (optional)
-          </FieldLabel>
+            {t("Header note (optional)")}</FieldLabel>
           <Textarea
             id="constellation-section-note"
             value={note}
@@ -2606,7 +2606,7 @@ function ConstellationEditor({
           />
         </Field>
         <ConditionControls
-          ariaLabel="เลือกเงื่อนไขกลุ่มดาว"
+          ariaLabel={t("เลือกเงื่อนไขกลุ่มดาว")}
           items={groups}
           activeIndex={activeConstellationGroupIndex}
           onActiveIndexChange={setActiveConstellationGroupIndex}
@@ -2645,18 +2645,16 @@ function ConstellationEditor({
           return (
           <Card key={group.clientId} size="sm">
             <CardHeader>
-              <CardTitle>Condition {groupIndex + 1}</CardTitle>
+              <CardTitle>{t("Condition")}{" "}{groupIndex + 1}</CardTitle>
               <CardDescription>
-                ใช้ note เพื่ออธิบายอาวุธ ทีม หรือเงื่อนไขที่ใช้เปรียบเทียบ
-              </CardDescription>
+                {t("ใช้ note เพื่ออธิบายอาวุธ ทีม หรือเงื่อนไขที่ใช้เปรียบเทียบ")}</CardDescription>
             </CardHeader>
             <CardContent className="flex flex-col gap-4">
               <Field>
                 <FieldLabel
                   htmlFor={`constellation-condition-note-${group.clientId}`}
                 >
-                  Condition note (optional)
-                </FieldLabel>
+                  {t("Condition note (optional)")}</FieldLabel>
                 <Textarea
                   id={`constellation-condition-note-${group.clientId}`}
                   value={group.note}
@@ -2691,13 +2689,13 @@ function ConstellationEditor({
                         />
                       ) : null}
                       <CardTitle>
-                        C{row.level} · {row.name}
+                        {t("C")}{" "}{row.level} · {row.name}
                       </CardTitle>
                       <CardDescription>{row.description}</CardDescription>
                     </CardHeader>
                     <CardContent className="flex items-end gap-3">
                       <Field className="min-w-0 flex-1">
-                        <FieldLabel>Cumulative %</FieldLabel>
+                        <FieldLabel>{t("Cumulative %")}</FieldLabel>
                         <Input
                           type="text"
                           inputMode="decimal"
@@ -2776,8 +2774,7 @@ function ConstellationEditor({
                         )}
                       >
                         <SparklesIcon data-icon="inline-start" />
-                        Great %
-                      </Toggle>
+                        {t("Great %")}</Toggle>
                     </CardContent>
                   </Card>
                 ))}
@@ -2795,6 +2792,7 @@ function ConstellationEditor({
               : formatGuideValidationIssues(
                   "constellations",
                   validation.error.issues,
+                  { locale },
                 )
           }
           onSave={autosave.saveNow}
@@ -2827,6 +2825,7 @@ function TeamEditor({
   artifacts,
   initial,
 }: EditorBase) {
+  const { t, locale } = useTranslation();
   const fallbackMembers = Array.from({ length: 4 }, () => ({
     characterKey: "",
     weaponKey: null,
@@ -3112,7 +3111,7 @@ function TeamEditor({
     );
     if (unsupported) {
       toast.error(
-        `${unsupported.characterName} ไม่รองรับอาวุธ ${unsupported.weaponName}`,
+        t("{character} ไม่รองรับอาวุธ {weapon}", { character: unsupported.characterName, weapon: unsupported.weaponName }),
       );
       return;
     }
@@ -3155,7 +3154,7 @@ function TeamEditor({
     );
     if (unsupported) {
       toast.error(
-        `${unsupported.characterName} ไม่รองรับอาวุธ ${unsupported.weaponName}`,
+        t("{character} ไม่รองรับอาวุธ {weapon}", { character: unsupported.characterName, weapon: unsupported.weaponName }),
       );
       return;
     }
@@ -3167,7 +3166,7 @@ function TeamEditor({
     try {
       serialized = serializeTeamTransfer(team);
     } catch {
-      toast.error("Export Team ไม่สำเร็จ กรุณาตรวจสอบข้อมูล Team");
+      toast.error(t("Export Team ไม่สำเร็จ กรุณาตรวจสอบข้อมูล Team"));
       return;
     }
     const url = URL.createObjectURL(new Blob([serialized], { type: "application/json" }));
@@ -3178,15 +3177,15 @@ function TeamEditor({
     URL.revokeObjectURL(url);
     try {
       await navigator.clipboard.writeText(serialized);
-      toast.success(`คัดลอกและดาวน์โหลด ${team.title} แล้ว`);
+      toast.success(t("คัดลอกและดาวน์โหลด {name} แล้ว", { name: team.title }));
     } catch {
-      toast.success(`ดาวน์โหลด ${teamTransferFileName(team.title)} แล้ว`);
+      toast.success(t("ดาวน์โหลด {fileName} แล้ว", { fileName: teamTransferFileName(team.title) }));
     }
   };
   const appendImportedTeams = (importedTeams: Array<Omit<TeamToolValue, "clientId">>) => {
     if (!importedTeams.length) return false;
     if (teams.length + importedTeams.length > 30) {
-      toast.error("Import ไม่ได้ เพราะ Guide จะมี Team เกิน 30 Team");
+      toast.error(t("Import ไม่ได้ เพราะ Guide จะมี Team เกิน 30 Team"));
       return false;
     }
     for (const imported of importedTeams) {
@@ -3197,7 +3196,7 @@ function TeamEditor({
         artifacts,
       );
       if (catalogIssue) {
-        toast.error(catalogIssue);
+        toast.error(t(catalogIssue));
         return false;
       }
     }
@@ -3215,9 +3214,9 @@ function TeamEditor({
       if (!appendImportedTeams(importedTeams)) return;
       setImportFiles([]);
       setImportOpen(false);
-      toast.success(`Import ${importedTeams.length} Team แล้ว`);
+      toast.success(t("Import {count} Team แล้ว", { count: importedTeams.length }));
     } catch {
-      toast.error("มีไฟล์ Team ที่ไม่ถูกต้องหรือเป็นเวอร์ชันที่ไม่รองรับ");
+      toast.error(t("มีไฟล์ Team ที่ไม่ถูกต้องหรือเป็นเวอร์ชันที่ไม่รองรับ"));
     }
   };
   const openGuideImport = async () => {
@@ -3251,20 +3250,18 @@ function TeamEditor({
     if (!appendImportedTeams(importedTeams)) return;
     setGuideImportOpen(false);
     setSelectedImports({});
-    toast.success(`Import ${importedTeams.length} Team แล้ว`);
+    toast.success(t("Import {count} Team แล้ว", { count: importedTeams.length }));
   };
   return (
     <Card>
       <CardHeader>
-        <CardTitle>Team Calc</CardTitle>
+        <CardTitle>{t("Team Calc")}</CardTitle>
         <CardDescription>
-          ลากเพื่อเรียง Team แล้วใส่ความเสียหายของตัวละคร 4 ตัว
-          ระบบจะแสดงสัดส่วนและ Total DPS และบันทึกอัตโนมัติ
-        </CardDescription>
+          {t("ลากเพื่อเรียง Team แล้วใส่ความเสียหายของตัวละคร 4 ตัว ระบบจะแสดงสัดส่วนและ Total DPS และบันทึกอัตโนมัติ")}</CardDescription>
       </CardHeader>
       <CardContent className="flex flex-col gap-4">
         <ConditionControls
-          ariaLabel="เลือกเงื่อนไข Team"
+          ariaLabel={t("เลือกเงื่อนไข Team")}
           items={teamGroups}
           activeIndex={activeTeamGroupIndex}
           onActiveIndexChange={(nextIndex) => {
@@ -3309,36 +3306,36 @@ function TeamEditor({
           onChange={(name) => setTeamGroups(teamGroups.map((group, index) => index === renamingTeamGroupIndex ? { ...group, name } : group))}
         />
         <Field>
-          <FieldLabel htmlFor={`team-condition-note-${teamGroups[activeTeamGroupIndex]?.clientId}`}>Condition note (optional)</FieldLabel>
+          <FieldLabel htmlFor={`team-condition-note-${teamGroups[activeTeamGroupIndex]?.clientId}`}>{t("Condition note (optional)")}</FieldLabel>
           <Textarea id={`team-condition-note-${teamGroups[activeTeamGroupIndex]?.clientId}`} value={teamGroups[activeTeamGroupIndex]?.note ?? ""} onChange={(event) => setTeamGroups(teamGroups.map((group, index) => index === activeTeamGroupIndex ? { ...group, note: event.target.value } : group))} />
         </Field>
         <div className="flex min-w-0 flex-wrap items-center gap-2 rounded-lg border bg-muted/30 p-3">
           <Checkbox
             checked={selectedTeamIds.size === teams.length && teams.length > 0}
             onCheckedChange={(checked) => setSelectedTeamIds(checked ? new Set(teams.map((team) => team.clientId)) : new Set())}
-            aria-label="เลือกทุก Team"
+            aria-label={t("เลือกทุก Team")}
           />
-          <span className="text-sm font-medium">เลือก Team สำหรับ Multiple Apply</span>
+          <span className="text-sm font-medium">{t("เลือก Team สำหรับ Multiple Apply")}</span>
           <Select value={sourceTeamId} onValueChange={(value) => { if (value) setSourceTeamId(value); }}>
-            <SelectTrigger className="w-full basis-full"><span>{teams.find((team) => team.clientId === sourceTeamId)?.title || "Source Team"}</span></SelectTrigger>
+            <SelectTrigger className="w-full basis-full"><span>{teams.find((team) => team.clientId === sourceTeamId)?.title || t("Source Team")}</span></SelectTrigger>
             <SelectContent>
               <SelectGroup>{teams.map((team) => <SelectItem key={team.clientId} value={team.clientId}>{team.title || "Untitled Team"}</SelectItem>)}</SelectGroup>
             </SelectContent>
           </Select>
-          <Button type="button" size="sm" disabled={!selectedTeamIds.size} onClick={() => setApplyOpen(true)}>Multiple Apply</Button>
-          <Button type="button" variant="outline" size="sm" disabled={!sourceTeamId} onClick={() => setPresetOpen(true)}>Save preset</Button>
+          <Button type="button" size="sm" disabled={!selectedTeamIds.size} onClick={() => setApplyOpen(true)}>{t("Multiple Apply")}</Button>
+          <Button type="button" variant="outline" size="sm" disabled={!sourceTeamId} onClick={() => setPresetOpen(true)}>{t("Save preset")}</Button>
           {presets.map((preset) => (
             <div key={preset.id} className="flex min-w-0 max-w-full items-center gap-1">
               <Button className="min-w-0 max-w-full truncate" type="button" variant="ghost" size="sm" disabled={!selectedTeamIds.size} onClick={() => applyPreset(preset)}>{preset.name}</Button>
-              <SimpleTooltip text={`ลบ preset ${preset.name}`}>
-                <Button type="button" variant="ghost" size="icon-sm" onClick={() => setPresets((current) => current.filter((item) => item.id !== preset.id))} aria-label={`ลบ preset ${preset.name}`}><XIcon /></Button>
+              <SimpleTooltip text={t("ลบ preset {name}", { name: preset.name })}>
+                <Button type="button" variant="ghost" size="icon-sm" onClick={() => setPresets((current) => current.filter((item) => item.id !== preset.id))} aria-label={t("ลบ preset {name}", { name: preset.name })}><XIcon /></Button>
               </SimpleTooltip>
             </div>
           ))}
         </div>
         <FieldGroup className="mt-4">
           <Field>
-            <FieldLabel htmlFor="team-search">ค้นหา Team</FieldLabel>
+            <FieldLabel htmlFor="team-search">{t("ค้นหา Team")}</FieldLabel>
 
             <div className="relative">
               <SearchIcon
@@ -3348,16 +3345,16 @@ function TeamEditor({
               <Input
                 id="team-search"
                 className="pl-9"
-                placeholder="ค้นหาชื่อทีม ตัวละคร อาวุธ หรืออาร์ติแฟกต์"
+                placeholder={t("ค้นหาชื่อทีม ตัวละคร อาวุธ หรืออาร์ติแฟกต์")}
                 value={searchQuery}
                 onValueChange={setSearchQuery}
               />
             </div>
           </Field>
           <Field>
-            <FieldLabel>ค้นหาใน</FieldLabel>
+            <FieldLabel>{t("ค้นหาใน")}</FieldLabel>
             <ToggleGroup
-              aria-label="เลือกประเภทข้อมูลที่ต้องการค้นหา"
+              aria-label={t("เลือกประเภทข้อมูลที่ต้องการค้นหา")}
               className="max-w-full flex-wrap justify-start"
               variant="outline"
               size="sm"
@@ -3367,11 +3364,11 @@ function TeamEditor({
                 if (target) setSearchTarget(target);
               }}
             >
-              <ToggleGroupItem value="all">ทั้งหมด</ToggleGroupItem>
-              <ToggleGroupItem value="team">ชื่อทีม</ToggleGroupItem>
-              <ToggleGroupItem value="character">ตัวละคร</ToggleGroupItem>
-              <ToggleGroupItem value="weapon">อาวุธ</ToggleGroupItem>
-              <ToggleGroupItem value="artifact">อาร์ติแฟกต์</ToggleGroupItem>
+              <ToggleGroupItem value="all">{t("ทั้งหมด")}</ToggleGroupItem>
+              <ToggleGroupItem value="team">{t("ชื่อทีม")}</ToggleGroupItem>
+              <ToggleGroupItem value="character">{t("ตัวละคร")}</ToggleGroupItem>
+              <ToggleGroupItem value="weapon">{t("อาวุธ")}</ToggleGroupItem>
+              <ToggleGroupItem value="artifact">{t("อาร์ติแฟกต์")}</ToggleGroupItem>
             </ToggleGroup>
           </Field>
         </FieldGroup>
@@ -3405,8 +3402,7 @@ function TeamEditor({
                             <CardTitle>
                               <Field data-invalid={teamFieldInvalid(teamIndex, "title")}>
                                 <FieldLabel className="sr-only" htmlFor={`team-title-${team.clientId}`}>
-                                  ชื่อ Team
-                                </FieldLabel>
+                                  {t("ชื่อ Team")}</FieldLabel>
                                 <Input
                                   id={`team-title-${team.clientId}`}
                                   value={team.title}
@@ -3428,8 +3424,7 @@ function TeamEditor({
                                   className="flex-none"
                                   htmlFor={`team-rotation-${team.clientId}`}
                                 >
-                                  Rotation
-                                </FieldLabel>
+                                  {t("Rotation")}</FieldLabel>
                                 <Input
                                   id={`team-rotation-${team.clientId}`}
                                   className="w-24 text-foreground"
@@ -3444,7 +3439,7 @@ function TeamEditor({
                                     })
                                   }
                                 />
-                                <span>วินาที</span>
+                                <span>{t("วินาที")}</span>
                               </Field>
                             </CardDescription>
                             <CardAction className="flex max-w-44 flex-wrap justify-end gap-1">
@@ -3453,10 +3448,10 @@ function TeamEditor({
                                 onCheckedChange={(checked) =>
                                   toggleTeamSelection(team.clientId, checked === true)
                                 }
-                                aria-label={`เลือก ${team.title || `Team ${teamIndex + 1}`}`}
+                                aria-label={t("เลือก {name}", { name: team.title || `Team ${teamIndex + 1}` })}
                               />
                               {dragHandle}
-                              <SimpleTooltip text="Export Team">
+                              <SimpleTooltip text={t("Export Team")}>
                                 <Button
                                   type="button"
                                   variant="ghost"
@@ -3465,11 +3460,11 @@ function TeamEditor({
                                 >
                                   <ClipboardCopyIcon />
                                   <span className="sr-only">
-                                    Export {team.title || `Team ${teamIndex + 1}`}
+                                    {t("Export")}{" "}{team.title || `Team ${teamIndex + 1}`}
                                   </span>
                                 </Button>
                               </SimpleTooltip>
-                              <SimpleTooltip text="ทำสำเนา Team">
+                              <SimpleTooltip text={t("ทำสำเนา Team")}>
                                 <Button
                                   type="button"
                                   variant="ghost"
@@ -3498,11 +3493,11 @@ function TeamEditor({
                                   }
                                 >
                                   <CopyIcon />
-                                  <span className="sr-only">ทำสำเนา Team</span>
+                                  <span className="sr-only">{t("ทำสำเนา Team")}</span>
                                 </Button>
                               </SimpleTooltip>
                               <DeleteConfirmationDialog
-                                triggerTooltip="ลบ Team"
+                                triggerTooltip={t("ลบ Team")}
                                 trigger={
                                   <Button
                                     type="button"
@@ -3510,9 +3505,9 @@ function TeamEditor({
                                     size="icon-sm"
                                   />
                                 }
-                                title={`ลบ ${team.title || `Team ${teamIndex + 1}`}?`}
-                                description="ข้อมูล Team และตัวละครทั้ง 4 คนจะถูกลบออกจาก Guide"
-                                confirmLabel="ยืนยันลบ Team"
+                                title={t("ลบ {name}?", { name: team.title || `Team ${teamIndex + 1}` })}
+                                description={t("ข้อมูล Team และตัวละครทั้ง 4 คนจะถูกลบออกจาก Guide")}
+                                confirmLabel={t("ยืนยันลบ Team")}
                                 onConfirm={() =>
                                   setTeams(
                                     teams.filter(
@@ -3522,7 +3517,7 @@ function TeamEditor({
                                 }
                               >
                                 <Trash2Icon />
-                                <span className="sr-only">ลบ Team</span>
+                                <span className="sr-only">{t("ลบ Team")}</span>
                               </DeleteConfirmationDialog>
                             </CardAction>
                           </CardHeader>
@@ -3592,8 +3587,8 @@ function TeamEditor({
                                                 <CatalogSlotPicker
                                                   items={characters}
                                                   value={member.characterKey}
-                                                  label={`เลือกตัวละครตำแหน่ง ${memberIndex + 1}`}
-                                                  placeholder="ค้นหาชื่อตัวละคร…"
+                                                  label={t("เลือกตัวละครตำแหน่ง {index}", { index: memberIndex + 1 })}
+                                                  placeholder={t("ค้นหาชื่อตัวละคร…")}
                                                   invalid={memberFieldInvalid(
                                                     teamIndex,
                                                     memberIndex,
@@ -3630,8 +3625,8 @@ function TeamEditor({
                                                 <CatalogSlotPicker
                                                   items={compatibleWeapons}
                                                   value={member.weaponKey ?? ""}
-                                                  label={`เลือกอาวุธของตัวละครตำแหน่ง ${memberIndex + 1}`}
-                                                  placeholder="ค้นหาอาวุธที่รองรับ…"
+                                                  label={t("เลือกอาวุธของตัวละครตำแหน่ง {index}", { index: memberIndex + 1 })}
+                                                  placeholder={t("ค้นหาอาวุธที่รองรับ…")}
                                                   rarityBackground
                                                   onChange={(weaponKey) =>
                                                     updateTeamMember(
@@ -3653,7 +3648,7 @@ function TeamEditor({
                                                   ].filter(
                                                     (key): key is string => Boolean(key),
                                                   )}
-                                                  label={`เลือก Artifact สูงสุด 2 ชุดของตัวละครตำแหน่ง ${memberIndex + 1}`}
+                                                  label={t("เลือก Artifact สูงสุด 2 ชุดของตัวละครตำแหน่ง {index}", { index: memberIndex + 1 })}
                                                   onChange={(artifactKeys) =>
                                                     updateTeamMember(
                                                       teamIndex,
@@ -3687,10 +3682,10 @@ function TeamEditor({
                                                 <SelectTrigger
                                                   size="sm"
                                                   className="h-6 min-w-0 flex-1 justify-center px-1 text-xs [&>svg]:hidden"
-                                                  aria-label={`Constellation ของตัวละครตำแหน่ง ${memberIndex + 1}`}
+                                                  aria-label={t("Constellation ของตัวละครตำแหน่ง {index}", { index: memberIndex + 1 })}
                                                 >
                                                   <SelectValue>
-                                                    C{member.constellation}
+                                                    {t("C")}{" "}{member.constellation}
                                                   </SelectValue>
                                                 </SelectTrigger>
                                                 <SelectContent>
@@ -3701,7 +3696,7 @@ function TeamEditor({
                                                           key={constellation}
                                                           value={String(constellation)}
                                                         >
-                                                          C{constellation}
+                                                          {t("C")}{" "}{constellation}
                                                         </SelectItem>
                                                       ),
                                                     )}
@@ -3725,10 +3720,10 @@ function TeamEditor({
                                                 <SelectTrigger
                                                   size="sm"
                                                   className="h-6 min-w-0 flex-1 justify-center px-1 text-xs [&>svg]:hidden"
-                                                  aria-label={`Refinement ของอาวุธตำแหน่ง ${memberIndex + 1}`}
+                                                  aria-label={t("Refinement ของอาวุธตำแหน่ง {index}", { index: memberIndex + 1 })}
                                                 >
                                                   <SelectValue>
-                                                    R{member.refinement}
+                                                    {t("R")}{" "}{member.refinement}
                                                   </SelectValue>
                                                 </SelectTrigger>
                                                 <SelectContent>
@@ -3739,7 +3734,7 @@ function TeamEditor({
                                                           key={refinement}
                                                           value={String(refinement)}
                                                         >
-                                                          R{refinement}
+                                                          {t("R")}{" "}{refinement}
                                                         </SelectItem>
                                                       ),
                                                     )}
@@ -3758,7 +3753,7 @@ function TeamEditor({
                                                 className="sr-only"
                                                 htmlFor={`team-${team.clientId}-damage-${memberIndex}`}
                                               >
-                                                Damage ของตัวละครตำแหน่ง {memberIndex + 1}
+                                                {t("Damage ของตัวละครตำแหน่ง")}{" "}{memberIndex + 1}
                                               </FieldLabel>
                                               <Input
                                                 id={`team-${team.clientId}-damage-${memberIndex}`}
@@ -3798,16 +3793,15 @@ function TeamEditor({
                             <div className="flex items-end justify-between gap-4">
                               <div>
                                 <p className="text-sm text-muted-foreground">
-                                  ดาเมจรวม
-                                </p>
+                                  {t("ดาเมจรวม")}</p>
                                 <p className="font-semibold">
-                                  {total.toLocaleString()}
+                                  {total.toLocaleString(locale)}
                                 </p>
                               </div>
                               <div className="text-right">
-                                <p className="text-sm text-muted-foreground">DPS</p>
+                                <p className="text-sm text-muted-foreground">{t("DPS")}</p>
                                 <p className="text-3xl font-semibold text-primary">
-                                  {dps.toLocaleString(undefined, {
+                                  {dps.toLocaleString(locale, {
                                     maximumFractionDigits: 0,
                                   })}
                                 </p>
@@ -3818,12 +3812,11 @@ function TeamEditor({
                                 className="sr-only"
                                 htmlFor={`team-combo-${team.clientId}`}
                               >
-                                Combo
-                              </FieldLabel>
+                                {t("Combo")}</FieldLabel>
                               <Textarea
                                 id={`team-combo-${team.clientId}`}
                                 value={team.combo}
-                                placeholder="ใส่ลำดับ Combo…"
+                                placeholder={t("ใส่ลำดับ Combo…")}
                                 aria-invalid={teamFieldInvalid(teamIndex, "combo")}
                                 onChange={(event) =>
                                   updateTeam(teamIndex, {
@@ -3847,13 +3840,13 @@ function TeamEditor({
                   </EmptyMedia>
                   <EmptyTitle>
                     {teams.length
-                      ? "ไม่พบ Team ที่ตรงกับคำค้นหา"
-                      : "ยังไม่มี Team ใน Condition นี้"}
+                      ? t("ไม่พบ Team ที่ตรงกับคำค้นหา")
+                      : t("ยังไม่มี Team ใน Condition นี้")}
                   </EmptyTitle>
                   <EmptyDescription>
                     {teams.length
-                      ? "ลองเปลี่ยนคำค้นหาหรือประเภทข้อมูล"
-                      : "เพิ่ม Team เพื่อเริ่มจัดตัวละครและคำนวณ DPS"}
+                      ? t("ลองเปลี่ยนคำค้นหาหรือประเภทข้อมูล")
+                      : t("เพิ่ม Team เพื่อเริ่มจัดตัวละครและคำนวณ DPS")}
                   </EmptyDescription>
                 </EmptyHeader>
                 {!teams.length ? (
@@ -3878,8 +3871,7 @@ function TeamEditor({
                       }
                     >
                       <PlusIcon data-icon="inline-start" />
-                      เพิ่ม Team
-                    </Button>
+                      {t("เพิ่ม Team")}</Button>
                   </EmptyContent>
                 ) : null}
               </Empty>
@@ -3905,8 +3897,7 @@ function TeamEditor({
           }
         >
           <PlusIcon data-icon="inline-start" />
-          เพิ่ม Team
-        </Button>
+          {t("เพิ่ม Team")}</Button>
         <Button
           type="button"
           variant="outline"
@@ -3914,14 +3905,14 @@ function TeamEditor({
           onClick={() => setImportOpen(true)}
         >
           <ClipboardPasteIcon data-icon="inline-start" />
-          Import Team
-        </Button>
+          {t("Import Team")}</Button>
         <AutosaveStatus
           state={autosave.state}
           issues={
             validation.success
               ? []
               : formatGuideValidationIssues("team", validation.error.issues, {
+                  locale,
                   teamNames: teams.map((team) => team.title),
                 })
           }
@@ -3931,15 +3922,15 @@ function TeamEditor({
       <Dialog open={applyOpen} onOpenChange={setApplyOpen}>
         <DialogContent className="max-h-[90svh] grid-rows-[auto_minmax(0,1fr)_auto] overflow-hidden sm:max-w-3xl">
           <DialogHeader>
-            <DialogTitle>Multiple Apply</DialogTitle>
-            <DialogDescription className="break-words">คัดลอกค่าจาก {teams.find((team) => team.clientId === sourceTeamId)?.title || "Source Team"} ไปยัง {selectedTeamIds.size} Team ที่เลือก: {[...selectedTeamIds].map((id) => teams.find((team) => team.clientId === id)?.title || "Untitled Team").join(", ")}</DialogDescription>
+            <DialogTitle>{t("Multiple Apply")}</DialogTitle>
+            <DialogDescription className="break-words">{t("คัดลอกค่าจาก")}{" "}{teams.find((team) => team.clientId === sourceTeamId)?.title || t("Source Team")} {t("ไปยัง")}{" "}{selectedTeamIds.size} {t("Team ที่เลือก:")}{" "}{[...selectedTeamIds].map((id) => teams.find((team) => team.clientId === id)?.title || t("Untitled Team")).join(", ")}</DialogDescription>
           </DialogHeader>
           <div className="flex min-h-0 flex-col gap-5 overflow-y-auto pr-1">
             {teams.find((team) => team.clientId === sourceTeamId)?.members.map((member, memberIndex) => {
               const characterName = characters.find((character) => character.key === member.characterKey)?.name || "No character";
               return (
                 <FieldSet key={memberIndex}>
-                  <FieldLegend>{characterName} (char{memberIndex + 1})</FieldLegend>
+                  <FieldLegend>{characterName} {t("(char")}{" "}{memberIndex + 1})</FieldLegend>
                   <div className="grid gap-3 sm:grid-cols-4">
                     {teamMemberApplyOptions.map(([field, label]) => {
                       const selection = `member:${memberIndex}:${field}` as TeamApplySelection;
@@ -3947,7 +3938,7 @@ function TeamEditor({
                       return (
                         <Field key={field} orientation="horizontal">
                           <Checkbox id={id} checked={applyFields.includes(selection)} onCheckedChange={(checked) => toggleApplyField(selection, checked === true)} />
-                          <FieldLabel htmlFor={id}>{label}{field === "refinement" ? ` (R${member.refinement})` : ""}</FieldLabel>
+                          <FieldLabel htmlFor={id}>{t(label)}{field === "refinement" ? ` (R${member.refinement})` : ""}</FieldLabel>
                         </Field>
                       );
                     })}
@@ -3956,52 +3947,50 @@ function TeamEditor({
               );
             })}
             <FieldSet>
-              <FieldLegend>Team fields</FieldLegend>
+              <FieldLegend>{t("Team fields")}</FieldLegend>
               <div className="grid gap-3 sm:grid-cols-2">
                 {(["rotation", "combo"] as const).map((field) => {
                   const id = `apply-${field}`;
                   return (
                     <Field key={field} orientation="horizontal">
                       <Checkbox id={id} checked={applyFields.includes(field)} onCheckedChange={(checked) => toggleApplyField(field, checked === true)} />
-                      <FieldLabel htmlFor={id}>{field === "rotation" ? "Rotation" : "Combo"}</FieldLabel>
+                      <FieldLabel htmlFor={id}>{t(field === "rotation" ? "Rotation" : "Combo")}</FieldLabel>
                     </Field>
                   );
                 })}
               </div>
             </FieldSet>
           </div>
-          <DialogFooter><Button type="button" variant="outline" onClick={() => setApplyOpen(false)}>ยกเลิก</Button><Button type="button" disabled={!applyFields.length} onClick={applyChanges}>ยืนยันการคัดลอก</Button></DialogFooter>
+          <DialogFooter><Button type="button" variant="outline" onClick={() => setApplyOpen(false)}>{t("ยกเลิก")}</Button><Button type="button" disabled={!applyFields.length} onClick={applyChanges}>{t("ยืนยันการคัดลอก")}</Button></DialogFooter>
         </DialogContent>
       </Dialog>
       <Dialog open={importOpen} onOpenChange={setImportOpen}>
         <DialogContent className="max-h-[90svh] grid-rows-[auto_minmax(0,1fr)_auto] overflow-hidden sm:max-w-lg">
           <DialogHeader>
-            <DialogTitle>Import Team</DialogTitle>
+            <DialogTitle>{t("Import Team")}</DialogTitle>
             <DialogDescription>
-              เลือก Team จาก Guide อื่น หรืออัปโหลดไฟล์ JSON ที่เคย Export ไว้
-            </DialogDescription>
+              {t("เลือก Team จาก Guide อื่น หรืออัปโหลดไฟล์ JSON ที่เคย Export ไว้")}</DialogDescription>
           </DialogHeader>
           <div className="flex min-h-0 flex-col gap-4 overflow-y-auto pr-1">
             <Card size="sm">
               <CardHeader>
-                <CardTitle>เลือกจาก Guide</CardTitle>
-                <CardDescription>เลือก Team ที่บันทึกอยู่ใน Guide อื่นได้โดยไม่ต้องดาวน์โหลดไฟล์</CardDescription>
+                <CardTitle>{t("เลือกจาก Guide")}</CardTitle>
+                <CardDescription>{t("เลือก Team ที่บันทึกอยู่ใน Guide อื่นได้โดยไม่ต้องดาวน์โหลดไฟล์")}</CardDescription>
               </CardHeader>
               <CardFooter>
                 <Button type="button" variant="outline" onClick={() => void openGuideImport()}>
                   <BookOpenIcon data-icon="inline-start" />
-                  เปิดรายการ Guide
-                </Button>
+                  {t("เปิดรายการ Guide")}</Button>
               </CardFooter>
             </Card>
             <Card size="sm">
               <CardHeader>
-                <CardTitle>อัปโหลดไฟล์ JSON</CardTitle>
-                <CardDescription>เลือกหลายไฟล์เพื่อ Import หลาย Team พร้อมกันได้</CardDescription>
+                <CardTitle>{t("อัปโหลดไฟล์ JSON")}</CardTitle>
+                <CardDescription>{t("เลือกหลายไฟล์เพื่อ Import หลาย Team พร้อมกันได้")}</CardDescription>
               </CardHeader>
               <CardContent>
                 <Field>
-                  <FieldLabel htmlFor="team-import-files">ไฟล์ Team JSON</FieldLabel>
+                  <FieldLabel htmlFor="team-import-files">{t("ไฟล์ Team JSON")}</FieldLabel>
                   <Input
                     id="team-import-files"
                     type="file"
@@ -4013,32 +4002,30 @@ function TeamEditor({
               </CardContent>
               <CardFooter>
                 <Button type="button" disabled={!importFiles.length} onClick={() => void importTeamFiles()}>
-                  Import {importFiles.length || ""} Team
-                </Button>
+                  {t("Import")}{" "}{importFiles.length || ""} {t("Team")}</Button>
               </CardFooter>
             </Card>
           </div>
           <DialogFooter>
             <Button type="button" variant="outline" onClick={() => setImportOpen(false)}>
-              ปิด
-            </Button>
+              {t("ปิด")}</Button>
           </DialogFooter>
         </DialogContent>
       </Dialog>
       <Dialog open={guideImportOpen} onOpenChange={setGuideImportOpen}>
         <DialogContent className="max-h-[90svh] grid-rows-[auto_minmax(0,1fr)_auto] overflow-hidden sm:max-w-5xl">
           <DialogHeader>
-            <DialogTitle>{activeImportGuide ? activeImportGuide.name : "เลือก Guide"}</DialogTitle>
+            <DialogTitle>{activeImportGuide ? activeImportGuide.name : t("เลือก Guide")}</DialogTitle>
             <DialogDescription>
               {activeImportGuide
-                ? "เลือก Team ที่ต้องการ สามารถย้อนกลับไปเลือกจาก Guide อื่นเพิ่มได้"
-                : "ค้นหาและเปิด Guide เพื่อเลือก Team ที่ต้องการ Import"}
+                ? t("เลือก Team ที่ต้องการ สามารถย้อนกลับไปเลือกจาก Guide อื่นเพิ่มได้")
+                : t("ค้นหาและเปิด Guide เพื่อเลือก Team ที่ต้องการ Import")}
             </DialogDescription>
           </DialogHeader>
           <div className="min-h-0 overflow-hidden">
             {guideImportError ? (
               <Alert variant="destructive">
-                <AlertTitle>โหลดข้อมูลไม่สำเร็จ</AlertTitle>
+                <AlertTitle>{t("โหลดข้อมูลไม่สำเร็จ")}</AlertTitle>
                 <AlertDescription>{guideImportError}</AlertDescription>
               </Alert>
             ) : null}
@@ -4050,12 +4037,11 @@ function TeamEditor({
               <div className="flex h-full min-h-0 flex-col gap-3">
                 <Button type="button" variant="ghost" className="self-start" onClick={() => setActiveImportGuide(null)}>
                   <ArrowLeftIcon data-icon="inline-start" />
-                  กลับไปเลือก Guide
-                </Button>
+                  {t("กลับไปเลือก Guide")}</Button>
                 {activeImportGuide.groups.length > 1 ? (
-                  <ScrollableNav ariaLabel="เลือกเงื่อนไขทีม" className="w-full min-w-0">
+                  <ScrollableNav ariaLabel={t("เลือกเงื่อนไขทีม")} className="w-full min-w-0">
                     <ToggleGroup
-                      aria-label="เลือกเงื่อนไขทีม"
+                      aria-label={t("เลือกเงื่อนไขทีม")}
                       variant="outline"
                       value={[guideImportCondition]}
                       onValueChange={(values) => { if (values[0]) setGuideImportCondition(values[0]); }}
@@ -4071,26 +4057,26 @@ function TeamEditor({
                 <div className="relative">
                   <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="ค้นหาทีม ตัวละคร อาวุธ หรืออาร์ติแฟกต์"
+                    aria-label={t("ค้นหาทีม ตัวละคร อาวุธ หรืออาร์ติแฟกต์")}
                     className="pl-9"
-                    placeholder="ค้นหาทีม ตัวละคร อาวุธ หรืออาร์ติแฟกต์"
+                    placeholder={t("ค้นหาทีม ตัวละคร อาวุธ หรืออาร์ติแฟกต์")}
                     value={guideTeamQuery}
                     onValueChange={setGuideTeamQuery}
                   />
                 </div>
                 <ToggleGroup
-                  aria-label="เลือกประเภทข้อมูลที่ต้องการค้นหา"
+                  aria-label={t("เลือกประเภทข้อมูลที่ต้องการค้นหา")}
                   className="max-w-full flex-wrap justify-start"
                   variant="outline"
                   size="sm"
                   value={[guideTeamSearchTarget]}
                   onValueChange={(values) => { if (values[0]) setGuideTeamSearchTarget(values[0] as TeamSearchTarget); }}
                 >
-                  <ToggleGroupItem value="all">ทั้งหมด</ToggleGroupItem>
-                  <ToggleGroupItem value="team">ชื่อทีม</ToggleGroupItem>
-                  <ToggleGroupItem value="character">ตัวละคร</ToggleGroupItem>
-                  <ToggleGroupItem value="weapon">อาวุธ</ToggleGroupItem>
-                  <ToggleGroupItem value="artifact">อาร์ติแฟกต์</ToggleGroupItem>
+                  <ToggleGroupItem value="all">{t("ทั้งหมด")}</ToggleGroupItem>
+                  <ToggleGroupItem value="team">{t("ชื่อทีม")}</ToggleGroupItem>
+                  <ToggleGroupItem value="character">{t("ตัวละคร")}</ToggleGroupItem>
+                  <ToggleGroupItem value="weapon">{t("อาวุธ")}</ToggleGroupItem>
+                  <ToggleGroupItem value="artifact">{t("อาร์ติแฟกต์")}</ToggleGroupItem>
                 </ToggleGroup>
                 <div className="min-h-0 overflow-y-auto pr-1">
 
@@ -4104,7 +4090,7 @@ function TeamEditor({
                           <Card key={team.id} className={cn(checked && "ring-2 ring-primary")}>
                             <CardHeader>
                               <CardTitle>{team.title}</CardTitle>
-                              <CardDescription>โรเทชั่น {seconds} วิ</CardDescription>
+                              <CardDescription>{t("โรเทชั่น")}{" "}{seconds} {t("วิ")}</CardDescription>
                               <CardAction>
                                 <Field orientation="horizontal">
                                   <Checkbox
@@ -4132,7 +4118,7 @@ function TeamEditor({
                                       return next;
                                     })}
                                   />
-                                  <FieldLabel htmlFor={`guide-team-${team.id}`}>เลือก</FieldLabel>
+                                  <FieldLabel htmlFor={`guide-team-${team.id}`}>{t("เลือก")}</FieldLabel>
                                 </Field>
                               </CardAction>
                             </CardHeader>
@@ -4158,11 +4144,11 @@ function TeamEditor({
                                         </div>
                                       </div>
                                       <div className="mt-2 flex items-center justify-center gap-1">
-                                        <Badge variant="secondary">C{member.constellation}</Badge>
-                                        <Badge variant="secondary">R{member.refinement}</Badge>
+                                        <Badge variant="secondary">{t("C")}{" "}{member.constellation}</Badge>
+                                        <Badge variant="secondary">{t("R")}{" "}{member.refinement}</Badge>
                                       </div>
                                       <p className="mt-1 truncate text-sm font-medium">{character?.name ?? member.characterName}</p>
-                                      <p className="mt-1 text-sm font-semibold">{Number(member.damage).toLocaleString()}</p>
+                                      <p className="mt-1 text-sm font-semibold">{Number(member.damage).toLocaleString(locale)}</p>
                                       <p className="text-xs text-muted-foreground">{total ? ((Number(member.damage) / total) * 100).toFixed(1) : "0.0"}%</p>
                                     </div>
                                   );
@@ -4170,8 +4156,8 @@ function TeamEditor({
                               </div>
                               <Separator />
                               <div className="flex items-end justify-between gap-4">
-                                <div><p className="text-sm text-muted-foreground">ดาเมจรวม</p><p className="font-semibold">{total.toLocaleString()}</p></div>
-                                <div className="text-right"><p className="text-sm text-muted-foreground">DPS</p><p className="text-3xl font-semibold text-primary">{seconds > 0 ? (total / seconds).toLocaleString(undefined, { maximumFractionDigits: 0 }) : "0"}</p></div>
+                                <div><p className="text-sm text-muted-foreground">{t("ดาเมจรวม")}</p><p className="font-semibold">{total.toLocaleString(locale)}</p></div>
+                                <div className="text-right"><p className="text-sm text-muted-foreground">{t("DPS")}</p><p className="text-3xl font-semibold text-primary">{seconds > 0 ? (total / seconds).toLocaleString(locale, { maximumFractionDigits: 0 }) : "0"}</p></div>
                               </div>
                               <p className="rounded-lg bg-muted p-3 text-sm leading-6">{team.combo}</p>
                             </CardContent>
@@ -4182,8 +4168,8 @@ function TeamEditor({
                   ) : (
                     <Empty>
                       <EmptyHeader>
-                        <EmptyTitle>{activeImportGroup?.teams.length ? "ไม่พบ Team ที่ตรงกับคำค้นหา" : "Condition นี้ยังไม่มี Team"}</EmptyTitle>
-                        <EmptyDescription>{activeImportGroup?.teams.length ? "ลองเปลี่ยนคำค้นหาหรือประเภทข้อมูล" : "เลือก Condition หรือ Guide อื่นเพื่อ Import"}</EmptyDescription>
+                        <EmptyTitle>{activeImportGroup?.teams.length ? t("ไม่พบ Team ที่ตรงกับคำค้นหา") : t("Condition นี้ยังไม่มี Team")}</EmptyTitle>
+                        <EmptyDescription>{activeImportGroup?.teams.length ? t("ลองเปลี่ยนคำค้นหาหรือประเภทข้อมูล") : t("เลือก Condition หรือ Guide อื่นเพื่อ Import")}</EmptyDescription>
                       </EmptyHeader>
                     </Empty>
                   )}
@@ -4194,9 +4180,9 @@ function TeamEditor({
                 <div className="relative">
                   <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="ค้นหา Guide"
+                    aria-label={t("ค้นหา Guide")}
                     className="pl-9"
-                    placeholder="ค้นหาชื่อ Guide หรือตัวละคร…"
+                    placeholder={t("ค้นหาชื่อ Guide หรือตัวละคร…")}
                     value={guideListQuery}
                     onValueChange={setGuideListQuery}
                   />
@@ -4209,7 +4195,7 @@ function TeamEditor({
                         <Card key={sourceGuide.id} className="relative overflow-hidden py-0 transition-colors hover:bg-muted/50">
                           <button
                             type="button"
-                            aria-label={`เปิด Guide ${sourceGuide.name}`}
+                            aria-label={t("เปิด Guide {name}", { name: sourceGuide.name })}
                             className="absolute inset-0 rounded-xl outline-none focus-visible:ring-2 focus-visible:ring-ring"
                             onClick={() => void enterImportGuide(sourceGuide.id)}
                           />
@@ -4227,14 +4213,13 @@ function TeamEditor({
                             <CardDescription>{sourceGuide.characterKey}</CardDescription>
                             <CardAction>
                               <Badge variant={sourceGuide.isPublic ? "default" : "secondary"}>
-                                {sourceGuide.isPublic ? "Published" : "Draft"}
+                                {t(sourceGuide.isPublic ? "Published" : "Draft")}
                               </Badge>
                             </CardAction>
                           </CardHeader>
                           <CardFooter className="relative pb-4">
                             <Button type="button" size="xs" variant="outline" onClick={() => void enterImportGuide(sourceGuide.id)}>
-                              เปิด Guide
-                            </Button>
+                              {t("เปิด Guide")}</Button>
                           </CardFooter>
                         </Card>
                       ))}
@@ -4242,8 +4227,8 @@ function TeamEditor({
                   ) : (
                     <Empty>
                       <EmptyHeader>
-                        <EmptyTitle>ไม่พบ Guide ที่ตรงกับคำค้นหา</EmptyTitle>
-                        <EmptyDescription>ลองค้นหาด้วยชื่อ Guide หรือตัวละครอื่น</EmptyDescription>
+                        <EmptyTitle>{t("ไม่พบ Guide ที่ตรงกับคำค้นหา")}</EmptyTitle>
+                        <EmptyDescription>{t("ลองค้นหาด้วยชื่อ Guide หรือตัวละครอื่น")}</EmptyDescription>
                       </EmptyHeader>
                     </Empty>
                   )}
@@ -4253,25 +4238,24 @@ function TeamEditor({
               <Empty>
                 <EmptyHeader>
                   <EmptyMedia variant="icon"><BookOpenIcon /></EmptyMedia>
-                  <EmptyTitle>ไม่มี Guide อื่นให้เลือก</EmptyTitle>
-                  <EmptyDescription>สร้างหรือบันทึก Team ใน Guide อื่นก่อน</EmptyDescription>
+                  <EmptyTitle>{t("ไม่มี Guide อื่นให้เลือก")}</EmptyTitle>
+                  <EmptyDescription>{t("สร้างหรือบันทึก Team ใน Guide อื่นก่อน")}</EmptyDescription>
                 </EmptyHeader>
               </Empty>
             )}
           </div>
           <DialogFooter>
-            <Button type="button" variant="outline" onClick={() => setGuideImportOpen(false)}>ยกเลิก</Button>
+            <Button type="button" variant="outline" onClick={() => setGuideImportOpen(false)}>{t("ยกเลิก")}</Button>
             <Button type="button" disabled={!Object.keys(selectedImports).length} onClick={confirmGuideImport}>
-              Import {Object.keys(selectedImports).length || ""} Team
-            </Button>
+              {t("Import")}{" "}{Object.keys(selectedImports).length || ""} {t("Team")}</Button>
           </DialogFooter>
         </DialogContent>
       </Dialog>
       <Dialog open={presetOpen} onOpenChange={setPresetOpen}>
         <DialogContent>
-          <DialogHeader><DialogTitle>Save team preset</DialogTitle><DialogDescription>บันทึก Source Team นี้ไว้ใช้กับ Guide นี้ในเบราว์เซอร์นี้</DialogDescription></DialogHeader>
-          <Field><FieldLabel htmlFor="team-preset-name">ชื่อ Preset</FieldLabel><Input id="team-preset-name" value={presetName} onChange={(event) => setPresetName(event.target.value)} /></Field>
-          <DialogFooter><Button type="button" variant="outline" onClick={() => setPresetOpen(false)}>ยกเลิก</Button><Button type="button" disabled={!presetName.trim()} onClick={savePreset}>บันทึก</Button></DialogFooter>
+          <DialogHeader><DialogTitle>{t("Save team preset")}</DialogTitle><DialogDescription>{t("บันทึก Source Team นี้ไว้ใช้กับ Guide นี้ในเบราว์เซอร์นี้")}</DialogDescription></DialogHeader>
+          <Field><FieldLabel htmlFor="team-preset-name">{t("ชื่อ Preset")}</FieldLabel><Input id="team-preset-name" value={presetName} onChange={(event) => setPresetName(event.target.value)} /></Field>
+          <DialogFooter><Button type="button" variant="outline" onClick={() => setPresetOpen(false)}>{t("ยกเลิก")}</Button><Button type="button" disabled={!presetName.trim()} onClick={savePreset}>{t("บันทึก")}</Button></DialogFooter>
         </DialogContent>
       </Dialog>
     </Card>
@@ -4291,6 +4275,7 @@ function ExtraCatalogItemsEditor({
   artifacts: CatalogItem[];
   onChange: (value: ExtraCatalogItem[]) => void;
 }) {
+  const { t } = useTranslation();
   const sensors = useSensors(
     useSensor(PointerSensor),
     useSensor(KeyboardSensor, {
@@ -4312,7 +4297,7 @@ function ExtraCatalogItemsEditor({
 
   return (
     <Field>
-      <FieldLabel>ตัวละคร อาวุธ และอาร์ติแฟกต์</FieldLabel>
+      <FieldLabel>{t("ตัวละคร อาวุธ และอาร์ติแฟกต์")}</FieldLabel>
       <div className="flex flex-col gap-3">
         {value.length ? (
           <DndContext
@@ -4334,7 +4319,7 @@ function ExtraCatalogItemsEditor({
                     <SortableExtraItem
                       key={itemId(reference)}
                       id={itemId(reference)}
-                      label={`ลากเพื่อจัดลำดับ ${label}`}
+                      label={t("ลากเพื่อจัดลำดับ {label}", { label: label })}
                     >
                       {(dragHandle) => (
                         <Card size="sm">
@@ -4346,10 +4331,10 @@ function ExtraCatalogItemsEditor({
                             ) : null}
                             <div className="min-w-0 flex-1">
                               <p className="truncate font-medium">{label}</p>
-                              <p className="text-sm text-muted-foreground">{labels[reference.kind]}</p>
+                              <p className="text-sm text-muted-foreground">{t(labels[reference.kind])}</p>
                             </div>
                             {dragHandle}
-                            <Button type="button" variant="ghost" size="icon-sm" onClick={() => onChange(value.filter((_, itemIndex) => itemIndex !== index))} aria-label={`ลบ ${label}`}>
+                            <Button type="button" variant="ghost" size="icon-sm" onClick={() => onChange(value.filter((_, itemIndex) => itemIndex !== index))} aria-label={t("ลบ {label}", { label: label })}>
                               <XIcon />
                             </Button>
                           </CardContent>
@@ -4366,9 +4351,9 @@ function ExtraCatalogItemsEditor({
           <Select value={kind} onValueChange={(next) => { setKind(next as ExtraCatalogItem["kind"]); setKey(""); }}>
             <SelectTrigger className="w-40"><SelectValue /></SelectTrigger>
             <SelectContent><SelectGroup>
-              <SelectItem value="character">ตัวละคร</SelectItem>
-              <SelectItem value="weapon">อาวุธ</SelectItem>
-              <SelectItem value="artifact">อาร์ติแฟกต์</SelectItem>
+              <SelectItem value="character">{t("ตัวละคร")}</SelectItem>
+              <SelectItem value="weapon">{t("อาวุธ")}</SelectItem>
+              <SelectItem value="artifact">{t("อาร์ติแฟกต์")}</SelectItem>
             </SelectGroup></SelectContent>
           </Select>
           <div className="min-w-64 flex-1">
@@ -4386,7 +4371,7 @@ function ExtraCatalogItemsEditor({
                 }
                 setKey("");
               }}
-              placeholder={`เลือก${labels[kind]}`}
+              placeholder={t("เลือก{type}", { type: t(labels[kind]) })}
               showSelectedImage
               rarityBackground
             />
@@ -4398,6 +4383,7 @@ function ExtraCatalogItemsEditor({
 }
 
 function ExtraEditor({ guide, extraSectionId, initial, characters, weapons, artifacts }: EditorBase) {
+  const { t, locale } = useTranslation();
   const router = useRouter();
   const sectionId = extraSectionId ?? initial.extras[0]?.id ?? "";
   const extraSensors = useSensors(
@@ -4497,9 +4483,7 @@ function ExtraEditor({ guide, extraSectionId, initial, characters, weapons, arti
       <CardHeader>
         <CardTitle>{sections[0]?.title ?? "Extra section"}</CardTitle>
         <CardDescription>
-          เพิ่มส่วนเสริมแบบภาพ หัวข้อ ข้อความที่จัดรูปแบบได้ และเปอร์เซ็นต์
-          ระบบจะบันทึกอัตโนมัติ
-        </CardDescription>
+          {t("เพิ่มส่วนเสริมแบบภาพ หัวข้อ ข้อความที่จัดรูปแบบได้ และเปอร์เซ็นต์ ระบบจะบันทึกอัตโนมัติ")}</CardDescription>
       </CardHeader>
       <CardContent className="flex flex-col gap-5">
         <Accordion
@@ -4520,7 +4504,7 @@ function ExtraEditor({ guide, extraSectionId, initial, characters, weapons, arti
               <CardTitle>
                 <Input
                   value={section.title}
-                  aria-label="ชื่อ Extra section"
+                  aria-label={t("ชื่อ Extra section")}
                   aria-invalid={extraIssue("sections", sectionIndex, "title")}
                   onChange={(event) =>
                     setSections(
@@ -4538,29 +4522,29 @@ function ExtraEditor({ guide, extraSectionId, initial, characters, weapons, arti
                   trigger={
                     <Button type="button" variant="ghost" size="icon-sm" />
                   }
-                  title={`ลบ ${section.title || `Extra section ${sectionIndex + 1}`}?`}
-                  description="แถว ข้อความ รูปภาพ และเปอร์เซ็นต์ทั้งหมดในส่วนนี้จะถูกลบออกจาก Guide"
+                  title={t("ลบ {name}?", { name: section.title || `Extra section ${sectionIndex + 1}` })}
+                  description={t("แถว ข้อความ รูปภาพ และเปอร์เซ็นต์ทั้งหมดในส่วนนี้จะถูกลบออกจาก Guide")}
                   showSuccessToast={false}
                   onConfirm={async () => {
                     const result = await deleteGuideExtra(guide.id, section.id);
                     if (result.status !== "saved") {
-                      toast.error(result.message);
+                      toast.error(t(result.message));
                       return;
                     }
                     window.localStorage.removeItem(adminDraftKey(guide.id, `extra:${section.id}`));
-                    toast.success("ลบ Extra แล้ว");
+                    toast.success(t("ลบ Extra แล้ว"));
                     router.push(`/admin/${guide.characterKey}`);
                     router.refresh();
                   }}
                 >
                   <Trash2Icon />
-                  <span className="sr-only">ลบส่วน</span>
+                  <span className="sr-only">{t("ลบส่วน")}</span>
                 </DeleteConfirmationDialog>
                 <AccordionTrigger
                   className="size-8 flex-none items-center justify-center p-0 hover:no-underline"
                   headerClassName="flex-none"
-                  aria-label={`${openSectionIds.includes(section.clientId) ? "ซ่อน" : "แสดง"} ${section.title || `Extra section ${sectionIndex + 1}`}`}
-                  title={openSectionIds.includes(section.clientId) ? "ซ่อนส่วนนี้" : "แสดงส่วนนี้"}
+                  aria-label={`${openSectionIds.includes(section.clientId) ? t("ซ่อน") : t("แสดง")} ${section.title || `Extra section ${sectionIndex + 1}`}`}
+                  title={openSectionIds.includes(section.clientId) ? t("ซ่อนส่วนนี้") : t("แสดงส่วนนี้")}
                 />
               </CardAction>
             </CardHeader>
@@ -4579,7 +4563,7 @@ function ExtraEditor({ guide, extraSectionId, initial, characters, weapons, arti
                     <SortableExtraItem
                       key={row.clientId}
                       id={row.clientId}
-                      label={`ลากเพื่อจัดลำดับ ${row.heading || `แถว ${rowIndex + 1}`}`}
+                      label={t("ลากเพื่อจัดลำดับ {name}", { name: row.heading || `แถว ${rowIndex + 1}` })}
                     >
                       {(rowDragHandle) => (
                 <Card
@@ -4591,7 +4575,7 @@ function ExtraEditor({ guide, extraSectionId, initial, characters, weapons, arti
                 >
                   <CardHeader>
                     <CardTitle>
-                      {row.heading || `แถว ${rowIndex + 1}`}
+                      {row.heading || t("แถว {index}", { index: rowIndex + 1 })}
                     </CardTitle>
                     <CardAction className="flex items-center gap-1">
                       {rowDragHandle}
@@ -4603,8 +4587,8 @@ function ExtraEditor({ guide, extraSectionId, initial, characters, weapons, arti
                             size="icon-sm"
                           />
                         }
-                        title={`ลบ ${row.heading || `แถว ${rowIndex + 1}`}?`}
-                        description="ข้อความ รูปภาพ และเปอร์เซ็นต์ในแถวนี้จะถูกลบออกจาก Guide"
+                        title={t("ลบ {name}?", { name: row.heading || `แถว ${rowIndex + 1}` })}
+                        description={t("ข้อความ รูปภาพ และเปอร์เซ็นต์ในแถวนี้จะถูกลบออกจาก Guide")}
                         onConfirm={() =>
                           setSections(
                             sections.map((item, index) =>
@@ -4621,7 +4605,7 @@ function ExtraEditor({ guide, extraSectionId, initial, characters, weapons, arti
                         }
                       >
                         <Trash2Icon />
-                        <span className="sr-only">ลบแถว</span>
+                        <span className="sr-only">{t("ลบแถว")}</span>
                       </DeleteConfirmationDialog>
                     </CardAction>
                   </CardHeader>
@@ -4650,12 +4634,12 @@ function ExtraEditor({ guide, extraSectionId, initial, characters, weapons, arti
                                 variant="destructive"
                                 size="icon-sm"
                                 className="absolute top-2 right-2"
-                                aria-label="ลบภาพ"
+                                aria-label={t("ลบภาพ")}
                               />
                             }
-                            title="ลบภาพนี้?"
-                            description="ภาพจะถูกนำออกจากแถวนี้"
-                            confirmLabel="ยืนยันลบภาพ"
+                            title={t("ลบภาพนี้?")}
+                            description={t("ภาพจะถูกนำออกจากแถวนี้")}
+                            confirmLabel={t("ยืนยันลบภาพ")}
                             onConfirm={() =>
                               setSections(
                                 sections.map((item, index) =>
@@ -4731,7 +4715,7 @@ function ExtraEditor({ guide, extraSectionId, initial, characters, weapons, arti
                         }
                       />
                       <Field>
-                        <FieldLabel>หัวข้อ</FieldLabel>
+                        <FieldLabel>{t("หัวข้อ")}</FieldLabel>
                         <Input
                           value={row.heading}
                           aria-invalid={extraIssue(
@@ -4763,7 +4747,7 @@ function ExtraEditor({ guide, extraSectionId, initial, characters, weapons, arti
                         />
                       </Field>
                       <Field>
-                        <FieldLabel>ข้อความ</FieldLabel>
+                        <FieldLabel>{t("ข้อความ")}</FieldLabel>
                         <RichTextEditor
                           value={row.body}
                           showBubbleMenu={false}
@@ -4797,7 +4781,7 @@ function ExtraEditor({ guide, extraSectionId, initial, characters, weapons, arti
                         />
                       </Field>
                       <Field>
-                        <FieldLabel>ตารางข้อมูล (optional)</FieldLabel>
+                        <FieldLabel>{t("ตารางข้อมูล (optional)")}</FieldLabel>
                         {row.sheet ? (
                           <ExtraSheetEditor
                             value={row.sheet}
@@ -4857,12 +4841,11 @@ function ExtraEditor({ guide, extraSectionId, initial, characters, weapons, arti
                             }
                           >
                             <PlusIcon data-icon="inline-start" />
-                            เพิ่มตาราง 2 × 2
-                          </Button>
+                            {t("เพิ่มตาราง 2 × 2")}</Button>
                         )}
                       </Field>
                       <Field>
-                        <FieldLabel>Percent (optional)</FieldLabel>
+                        <FieldLabel>{t("Percent (optional)")}</FieldLabel>
                         <Input
                           type="text"
                           inputMode="decimal"
@@ -4915,10 +4898,9 @@ function ExtraEditor({ guide, extraSectionId, initial, characters, weapons, arti
                         />
                       </Field>
                       <FieldSet>
-                        <FieldLegend>สีพื้นหลังการ์ด (optional)</FieldLegend>
+                        <FieldLegend>{t("สีพื้นหลังการ์ด (optional)")}</FieldLegend>
                         <FieldDescription>
-                          สีจะใช้เฉพาะการ์ดนี้บนหน้า Guide
-                        </FieldDescription>
+                          {t("สีจะใช้เฉพาะการ์ดนี้บนหน้า Guide")}</FieldDescription>
                         <Field
                           data-invalid={extraIssue(
                             "sections",
@@ -4928,7 +4910,7 @@ function ExtraEditor({ guide, extraSectionId, initial, characters, weapons, arti
                             "backgroundColor",
                           ) || undefined}
                         >
-                          <FieldLabel>สีพื้นหลัง</FieldLabel>
+                          <FieldLabel>{t("สีพื้นหลัง")}</FieldLabel>
                           <Input
                             type="color"
                             value={row.backgroundColor ?? DEFAULT_EXTRA_BACKGROUND_COLOR}
@@ -5000,8 +4982,7 @@ function ExtraEditor({ guide, extraSectionId, initial, characters, weapons, arti
                           }
                         >
                           <RefreshCcwIcon data-icon="inline-start" />
-                          ใช้สีตามธีม
-                        </Button>
+                          {t("ใช้สีตามธีม")}</Button>
                       </FieldSet>
                     </FieldGroup>
                   </CardContent>
@@ -5046,8 +5027,7 @@ function ExtraEditor({ guide, extraSectionId, initial, characters, weapons, arti
                 }
               >
                 <PlusIcon data-icon="inline-start" />
-                เพิ่มแถว
-              </Button>
+                {t("เพิ่มแถว")}</Button>
             </CardContent>
             </AccordionContent>
           </Card>
@@ -5061,7 +5041,7 @@ function ExtraEditor({ guide, extraSectionId, initial, characters, weapons, arti
           issues={
             validation.success
               ? []
-              : formatGuideValidationIssues("extra", validation.error.issues)
+              : formatGuideValidationIssues("extra", validation.error.issues, { locale })
           }
           onSave={autosave.saveNow}
         />
diff --git a/components/admin/guide-section-nav.tsx b/components/admin/guide-section-nav.tsx
index 35e40df..7df1c4d 100644
--- a/components/admin/guide-section-nav.tsx
+++ b/components/admin/guide-section-nav.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { useTranslation } from "@/components/i18n/locale-provider";
 import Image from "next/image";
 import Link from "next/link";
 import type { MouseEvent } from "react";
@@ -27,15 +28,16 @@ export function GuideSectionNav({
   current: string;
   extras: Array<{ id: string; slug: string; title: string }>;
 }) {
+  const { t } = useTranslation();
   const confirmNavigation = (event: MouseEvent<HTMLAnchorElement>) => {
     const browserWindow = window as Window & { __guideHasUnsavedChanges?: boolean };
-    if (typeof window !== "undefined" && browserWindow.__guideHasUnsavedChanges && !window.confirm("ข้อมูลยังบันทึกไม่เสร็จหรือไม่ถูกต้อง ต้องการออกจากหน้านี้หรือไม่?")) {
+    if (typeof window !== "undefined" && browserWindow.__guideHasUnsavedChanges && !window.confirm(t("ข้อมูลยังบันทึกไม่เสร็จหรือไม่ถูกต้อง ต้องการออกจากหน้านี้หรือไม่?"))) {
       event.preventDefault();
     }
   };
   return (
     <ScrollableNav
-      ariaLabel="เมนูแก้ไข Guide"
+      ariaLabel={t("เมนูแก้ไข Guide")}
       className="w-full rounded-xl border bg-card p-2"
     >
       <Link
@@ -48,8 +50,7 @@ export function GuideSectionNav({
         )}
       >
         <Image src={navigationIconPath("overview")!} alt="" width={20} height={20} className="size-5 object-contain" />
-        Overview
-      </Link>
+        {t("Overview")}</Link>
       {sections.map((section) => {
         const iconPath = navigationIconPath(section.slug);
         return (
@@ -64,7 +65,7 @@ export function GuideSectionNav({
             )}
           >
             {iconPath ? <Image src={iconPath} alt="" width={20} height={20} className="size-5 object-contain" /> : null}
-            {section.label}
+            {t(section.label)}
           </Link>
         );
       })}
diff --git a/components/admin/guide-visibility-control.tsx b/components/admin/guide-visibility-control.tsx
index 25fded2..2aa8b54 100644
--- a/components/admin/guide-visibility-control.tsx
+++ b/components/admin/guide-visibility-control.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { useTranslation } from "@/components/i18n/locale-provider";
 import { EyeIcon, EyeOffIcon } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { useState, useTransition } from "react";
@@ -32,6 +33,7 @@ export function GuideVisibilityControl({
   isPublic: boolean;
   className?: string;
 }) {
+  const { t } = useTranslation();
   const router = useRouter();
   const [pending, startTransition] = useTransition();
   const [open, setOpen] = useState(false);
@@ -40,7 +42,7 @@ export function GuideVisibilityControl({
     startTransition(async () => {
       const result = await setStructuredGuideVisibility(guideId, nextPublic);
       if (result.status !== "saved") {
-        toast.error(result.message ?? "เปลี่ยนสถานะ Guide ไม่สำเร็จ");
+        toast.error(t(result.message ?? "เปลี่ยนสถานะ Guide ไม่สำเร็จ"));
         return;
       }
       toast.success(nextPublic ? "เผยแพร่ Guide แล้ว" : "เปลี่ยน Guide เป็น Private แล้ว");
@@ -52,7 +54,7 @@ export function GuideVisibilityControl({
   return (
     <div className={cn("flex flex-wrap items-center gap-2", className)}>
       <Badge variant={isPublic ? "default" : "secondary"}>
-        {isPublic ? "Public" : "Private"}
+        {t(isPublic ? "Public" : "Private")}
       </Badge>
       <Button
         type="button"
@@ -64,29 +66,29 @@ export function GuideVisibilityControl({
         onClick={() => setOpen(true)}
       >
         {pending ? <Spinner data-icon="inline-start" /> : isPublic ? <EyeOffIcon data-icon="inline-start" /> : <EyeIcon data-icon="inline-start" />}
-        {isPublic ? "Make private" : "Make Publish"}
+        {t(isPublic ? "Make private" : "Publish")}
       </Button>
       <AlertDialog open={open} onOpenChange={setOpen}>
         <AlertDialogContent>
           <AlertDialogHeader>
             <AlertDialogTitle>
-              {isPublic ? `เปลี่ยน ${guideName} เป็น Private?` : `เผยแพร่ ${guideName} เป็น Public?`}
+              {isPublic ? t("เปลี่ยน {guideName} เป็น Private?", { guideName: guideName }) : t("เผยแพร่ {guideName} เป็น Public?", { guideName: guideName })}
             </AlertDialogTitle>
             <AlertDialogDescription>
               {isPublic
-                ? "Guide จะหายจากหน้าเว็บไซต์และลิงก์สาธารณะจะเปิดไม่ได้ แต่ยังแก้ไขได้ใน Admin"
-                : "Guide จะแสดงบนหน้าเว็บไซต์และทุกคนจะเปิดดูผ่านลิงก์สาธารณะได้"}
+                ? t("Guide จะหายจากหน้าเว็บไซต์และลิงก์สาธารณะจะเปิดไม่ได้ แต่ยังแก้ไขได้ใน Admin")
+                : t("Guide จะแสดงบนหน้าเว็บไซต์และทุกคนจะเปิดดูผ่านลิงก์สาธารณะได้")}
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
-            <AlertDialogCancel disabled={pending}>ยกเลิก</AlertDialogCancel>
+            <AlertDialogCancel disabled={pending}>{t("ยกเลิก")}</AlertDialogCancel>
             <AlertDialogAction
               variant={isPublic ? "destructive" : "default"}
               disabled={pending}
               onClick={() => updateVisibility(!isPublic)}
             >
               {pending && <Spinner data-icon="inline-start" />}
-              {isPublic ? "ยืนยัน Private" : "ยืนยัน Public"}
+              {isPublic ? t("ยืนยัน Private") : t("ยืนยัน Public")}
             </AlertDialogAction>
           </AlertDialogFooter>
         </AlertDialogContent>
diff --git a/components/admin/login-card.tsx b/components/admin/login-card.tsx
index cdcee89..5c55738 100644
--- a/components/admin/login-card.tsx
+++ b/components/admin/login-card.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { useTranslation } from "@/components/i18n/locale-provider";
 import { CircleAlertIcon, LogInIcon } from "lucide-react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
@@ -49,6 +50,7 @@ interface LoginCardProps {
 }
 
 export function LoginCard({ turnstileSiteKey }: LoginCardProps) {
+  const { t } = useTranslation();
   const router = useRouter();
   const turnstileEnabled = process.env.NODE_ENV !== "development";
   const turnstileContainerRef = useRef<HTMLDivElement>(null);
@@ -78,11 +80,11 @@ export function LoginCard({ turnstileSiteKey }: LoginCardProps) {
         "expired-callback": () => setTurnstileToken(null),
         "error-callback": () => {
           setTurnstileToken(null);
-          setError("ยืนยันตัวตนไม่สำเร็จ โปรดลองอีกครั้ง");
+          setError(t("ยืนยันตัวตนไม่สำเร็จ โปรดลองอีกครั้ง"));
         },
       },
     );
-  }, [turnstileEnabled, turnstileSiteKey]);
+  }, [turnstileEnabled, turnstileSiteKey, t]);
 
   function resetTurnstile() {
     setTurnstileToken(null);
@@ -123,7 +125,7 @@ export function LoginCard({ turnstileSiteKey }: LoginCardProps) {
       router.push("/admin");
       router.refresh();
     } catch {
-      setError("เชื่อมต่อระบบเข้าสู่ระบบไม่ได้ โปรดลองอีกครั้ง");
+      setError(t("เชื่อมต่อระบบเข้าสู่ระบบไม่ได้ โปรดลองอีกครั้ง"));
     } finally {
       resetTurnstile();
       setLoading(false);
@@ -133,16 +135,15 @@ export function LoginCard({ turnstileSiteKey }: LoginCardProps) {
   return (
     <Card className="w-full max-w-sm">
       <CardHeader>
-        <CardTitle className="text-xl">เข้าสู่ระบบผู้ดูแล</CardTitle>
+        <CardTitle className="text-xl">{t("เข้าสู่ระบบผู้ดูแล")}</CardTitle>
         <CardDescription>
-          ใช้อีเมลและรหัสผ่านของบัญชีผู้
-        </CardDescription>
+          {t("ใช้อีเมลและรหัสผ่านของบัญชีผู้")}</CardDescription>
       </CardHeader>
       <CardContent>
         <form onSubmit={signIn}>
           <FieldGroup>
             <Field>
-              <FieldLabel htmlFor="login-email">อีเมล</FieldLabel>
+              <FieldLabel htmlFor="login-email">{t("อีเมล")}</FieldLabel>
               <Input
                 id="login-email"
                 name="email"
@@ -155,7 +156,7 @@ export function LoginCard({ turnstileSiteKey }: LoginCardProps) {
               />
             </Field>
             <Field>
-              <FieldLabel htmlFor="login-password">รหัสผ่าน</FieldLabel>
+              <FieldLabel htmlFor="login-password">{t("รหัสผ่าน")}</FieldLabel>
               <Input
                 id="login-password"
                 name="password"
@@ -175,7 +176,7 @@ export function LoginCard({ turnstileSiteKey }: LoginCardProps) {
                   onReady={renderTurnstile}
                   onError={() => {
                     setTurnstileToken(null);
-                    setError("โหลดระบบยืนยันตัวตนไม่สำเร็จ โปรดลองอีกครั้ง");
+                    setError(t("โหลดระบบยืนยันตัวตนไม่สำเร็จ โปรดลองอีกครั้ง"));
                   }}
                 />
               </Field>
@@ -183,8 +184,8 @@ export function LoginCard({ turnstileSiteKey }: LoginCardProps) {
             {error ? (
               <Alert variant="destructive">
                 <CircleAlertIcon aria-hidden="true" />
-                <AlertTitle>เข้าสู่ระบบไม่สำเร็จ</AlertTitle>
-                <AlertDescription>{error}</AlertDescription>
+                <AlertTitle>{t("เข้าสู่ระบบไม่สำเร็จ")}</AlertTitle>
+                <AlertDescription>{t(error)}</AlertDescription>
               </Alert>
             ) : null}
             <Button
@@ -198,17 +199,16 @@ export function LoginCard({ turnstileSiteKey }: LoginCardProps) {
               ) : (
                 <LogInIcon data-icon="inline-start" aria-hidden="true" />
               )}
-              {loading ? "กำลังเข้าสู่ระบบ…" : "เข้าสู่ระบบ"}
+              {loading ? t("กำลังเข้าสู่ระบบ…") : t("เข้าสู่ระบบ")}
             </Button>
           </FieldGroup>
         </form>
       </CardContent>
       <CardFooter className="justify-center">
         <div>
-          ยังไม่มีบัญชี? {" "}
+          {t("ยังไม่มีบัญชี?")}{" "}{" "}
           <Link href="https://file.gunshiz.top/api/raw/flRCGwLA" className={buttonVariants({ variant: "link", size: "sm" })}>
-            สร้างบัญชีเลย
-          </Link>
+            {t("สร้างบัญชีเลย")}</Link>
         </div>
       </CardFooter>
     </Card>
diff --git a/components/admin/media-uploader.tsx b/components/admin/media-uploader.tsx
index 2211a2d..16cab27 100644
--- a/components/admin/media-uploader.tsx
+++ b/components/admin/media-uploader.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { useTranslation } from "@/components/i18n/locale-provider";
 import { ImagePlusIcon, UploadCloudIcon } from "lucide-react";
 import { useId, useState } from "react";
 import { toast } from "sonner";
@@ -24,17 +25,18 @@ export function MediaUploader({
   onReady: (media: UploadedMedia) => void;
   onFileSelected?: (file: File) => void;
 }) {
+  const { t } = useTranslation();
   const inputId = useId();
   const [state, setState] = useState<"idle" | "uploading">("idle");
   const busy = state !== "idle";
 
   async function upload(file: File) {
     if (!IMAGE_MIME_TYPES.includes(file.type as (typeof IMAGE_MIME_TYPES)[number])) {
-      toast.error("รองรับเฉพาะ PNG, JPEG, WebP และ GIF");
+      toast.error(t("รองรับเฉพาะ PNG, JPEG, WebP และ GIF"));
       return;
     }
     if (file.size <= 0 || file.size > MAX_MEDIA_BYTES) {
-      toast.error("ไฟล์ต้องมีขนาดไม่เกิน 100 MB");
+      toast.error(t("ไฟล์ต้องมีขนาดไม่เกิน 100 MB"));
       return;
     }
 
@@ -49,9 +51,9 @@ export function MediaUploader({
       const result = await response.json() as UploadedMedia & { error?: string };
       if (!response.ok) throw new Error(result.error || "upload");
       onReady(result);
-      toast.success("อัปโหลดรูปภาพแล้ว");
+      toast.success(t("อัปโหลดรูปภาพแล้ว"));
     } catch (cause) {
-      toast.error(cause instanceof Error ? cause.message : "อัปโหลดไม่สำเร็จ");
+      toast.error(t(cause instanceof Error ? cause.message : "อัปโหลดไม่สำเร็จ"));
     } finally {
       setState("idle");
     }
@@ -59,7 +61,7 @@ export function MediaUploader({
 
   return (
     <Field>
-      <FieldLabel htmlFor={inputId}>คลังสื่อ</FieldLabel>
+      <FieldLabel htmlFor={inputId}>{t("คลังสื่อ")}</FieldLabel>
       <input
         id={inputId}
         type="file"
@@ -84,11 +86,11 @@ export function MediaUploader({
         nativeButton={false}
       >
         {busy ? <Spinner /> : <ImagePlusIcon />}
-        {state === "uploading" && "กำลังอัปโหลด…"}
-        {state === "idle" && "อัปโหลดและเพิ่มรูปภาพ"}
+        {state === "uploading" && t("กำลังอัปโหลด…")}
+        {state === "idle" && t("อัปโหลดและเพิ่มรูปภาพ")}
         {!busy ? <UploadCloudIcon className="ml-auto" /> : null}
       </Button>
-      <FieldDescription>PNG, JPEG, WebP หรือ GIF ขนาดไม่เกิน 100 MB</FieldDescription>
+      <FieldDescription>{t("PNG, JPEG, WebP หรือ GIF ขนาดไม่เกิน 100 MB")}</FieldDescription>
     </Field>
   );
 }
diff --git a/components/admin/overview-image-generator.tsx b/components/admin/overview-image-generator.tsx
index 40a68da..a6bd17c 100644
--- a/components/admin/overview-image-generator.tsx
+++ b/components/admin/overview-image-generator.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { LocaleBoundary, useTranslation } from "@/components/i18n/locale-provider";
 import Image, { getImageProps } from "next/image";
 import {
   closestCenter,
@@ -33,6 +34,7 @@ import {
 } from "lucide-react";
 import {
   useEffect,
+  useEffectEvent,
   useRef,
   useState,
   type ChangeEvent,
@@ -98,7 +100,7 @@ import {
   weaponTypeIconPath,
   type OverviewRole,
 } from "@/lib/overview-image";
-import { exportText, withoutNotesFileName } from "@/lib/guides/export-text";
+import { withoutNotesFileName } from "@/lib/guides/export-text";
 import { cn } from "@/lib/utils";
 
 type Character = {
@@ -140,8 +142,6 @@ const blendModeItems: Array<{ value: OverviewBlendMode; label: string }> = [
   ...overviewBlendModes,
 ];
 
-const DISCLAIMER = exportText("disclaimer");
-
 function DraggablePosterLayer({
   id,
   offset,
@@ -216,6 +216,8 @@ function OverviewPoster({
   activeLayer?: PosterLayer;
   onLayerMove?: (layer: PosterLayer, delta: Position) => void;
 }) {
+  const { e } = useTranslation();
+  const disclaimerText = e("disclaimer");
   const weaponIcon = weaponTypeIconPath(character?.weaponType ?? null);
   const z = {
     character: 1,
@@ -257,7 +259,7 @@ function OverviewPoster({
       if (!context) return;
       context.font = '100px "Genshin Overview"';
       const longest = Math.max(
-        ...DISCLAIMER.split("\n").map(
+        ...disclaimerText.split("\n").map(
           (line) => context.measureText(line).width,
         ),
       );
@@ -276,7 +278,7 @@ function OverviewPoster({
       cancelled = true;
       observer.disconnect();
     };
-  }, [character?.name, disclaimerFontSize]);
+  }, [character?.name, disclaimerFontSize, disclaimerText]);
 
   return (
     <DndContext sensors={posterSensors} onDragEnd={handlePosterDragEnd}>
@@ -553,7 +555,7 @@ function OverviewPoster({
             ref={disclaimerRef}
             className="mt-[1.5cqw] whitespace-pre text-center text-[2.15cqw] leading-[1.15]"
           >
-            {DISCLAIMER}
+            {disclaimerText}
           </p>
         </div>
       ) : null}
@@ -573,6 +575,7 @@ function ColorField({
   value: string;
   onChange: (value: string) => void;
 }) {
+  const { t } = useTranslation();
   const invalid = !normalizeHex(value);
   return (
     <Field data-invalid={invalid}>
@@ -594,7 +597,7 @@ function ColorField({
           onChange={(event) => onChange(event.target.value)}
         />
       </div>
-      {invalid ? <FieldError>กรุณาใส่สีรูปแบบ #RRGGBB</FieldError> : null}
+      {invalid ? <FieldError>{t("กรุณาใส่สีรูปแบบ #RRGGBB")}</FieldError> : null}
     </Field>
   );
 }
@@ -608,6 +611,7 @@ function SortableBlendLayerRow({
   onUpdate: (patch: Partial<Omit<BlendLayer, "id">>) => void;
   onRemove: () => void;
 }) {
+  const { t } = useTranslation();
   const {
     attributes,
     listeners,
@@ -632,7 +636,7 @@ function SortableBlendLayerRow({
         variant="ghost"
         size="icon-sm"
         className="touch-none cursor-grab active:cursor-grabbing"
-        aria-label="ลากเพื่อจัดลำดับ Blend mode"
+        aria-label={t("ลากเพื่อจัดลำดับ Blend mode")}
         {...attributes}
         {...listeners}
       >
@@ -645,21 +649,21 @@ function SortableBlendLayerRow({
           onValueChange={(value) => {
             if (value) onUpdate({ mode: value.value });
           }}
-          itemToStringLabel={(item) => item.label}
+          itemToStringLabel={(item) => t(item.label)}
           itemToStringValue={(item) => item.value}
           filter={(item, query) =>
-            `${item.label} ${item.value}`
+            `${t(item.label)} ${item.label} ${item.value}`
               .toLocaleLowerCase("en")
               .includes(query.trim().toLocaleLowerCase("en"))
           }
         >
-          <ComboboxInput className="w-full" placeholder="เลือก Blend mode…" />
+          <ComboboxInput className="w-full" placeholder={t("เลือก Blend mode…")} />
           <ComboboxContent>
-            <ComboboxEmpty>ไม่พบ Blend mode</ComboboxEmpty>
+            <ComboboxEmpty>{t("ไม่พบ Blend mode")}</ComboboxEmpty>
             <ComboboxList>
               {(item) => (
                 <ComboboxItem key={item.value} value={item}>
-                  {item.label}
+                  {t(item.label)}
                 </ComboboxItem>
               )}
             </ComboboxList>
@@ -667,7 +671,7 @@ function SortableBlendLayerRow({
         </Combobox>
         <Field className="mt-3">
           <FieldLabel htmlFor={`overview-blend-amount-${layer.id}`}>
-            ความเข้ม {layer.amount}%
+            {t("ความเข้ม")}{" "}{layer.amount}%
           </FieldLabel>
           <Input
             id={`overview-blend-amount-${layer.id}`}
@@ -684,7 +688,7 @@ function SortableBlendLayerRow({
         type="button"
         variant="ghost"
         size="icon-sm"
-        aria-label="ลบ Blend mode"
+        aria-label={t("ลบ Blend mode")}
         onClick={onRemove}
       >
         <Trash2Icon data-icon="inline-start" />
@@ -700,6 +704,8 @@ export function OverviewImageGenerator({
   characters: Character[];
   elementIconUrls: Record<string, string | null>;
 }) {
+  const { t, e, locale } = useTranslation();
+  const showNamecardError = useEffectEvent(() => toast.error(t("ไม่สามารถโหลดภาพ Namecard ได้")));
   const captureRef = useRef<HTMLDivElement>(null);
   const [character, setCharacter] = useState<Character | null>(null);
   const [artworkUrl, setArtworkUrl] = useState<string | null>(null);
@@ -736,6 +742,7 @@ export function OverviewImageGenerator({
       coordinateGetter: sortableKeyboardCoordinates,
     }),
   );
+  const [exportLocale, setExportLocale] = useState<typeof locale | null>(null);
   const [exporting, setExporting] = useState(false);
   const [backgroundUrl, setBackgroundUrl] = useState<string | null>(null);
   const [fadeColor, setFadeColor] = useState("#0E0200");
@@ -868,7 +875,7 @@ export function OverviewImageGenerator({
       });
     };
     image.onerror = () => {
-      if (!cancelled) toast.error("ไม่สามารถโหลดภาพ Namecard ได้");
+      if (!cancelled) showNamecardError();
     };
     image.src = url;
     return () => {
@@ -908,7 +915,7 @@ export function OverviewImageGenerator({
       setPendingCrop({ url, target });
     } catch {
       URL.revokeObjectURL(url);
-      setArtworkError("ไม่สามารถอ่านไฟล์ภาพนี้ได้");
+      setArtworkError(t("ไม่สามารถอ่านไฟล์ภาพนี้ได้"));
     }
   }
 
@@ -955,7 +962,7 @@ export function OverviewImageGenerator({
       setPendingCrop(null);
       setArtworkError(null);
     } catch {
-      setArtworkError("ไม่สามารถครอปไฟล์ภาพนี้ได้");
+      setArtworkError(t("ไม่สามารถครอปไฟล์ภาพนี้ได้"));
       setPendingCrop(null);
     }
   }
@@ -995,7 +1002,7 @@ export function OverviewImageGenerator({
         target: pendingCrop.target,
       });
     } catch {
-      toast.error("หมุนภาพไม่สำเร็จ กรุณาลองอีกครั้ง");
+      toast.error(t("หมุนภาพไม่สำเร็จ กรุณาลองอีกครั้ง"));
     }
   }
 
@@ -1015,6 +1022,7 @@ export function OverviewImageGenerator({
     )
       return;
 
+    setExportLocale(locale);
     setExporting(true);
     try {
       const { domToBlob, waitUntilLoad } = await import("modern-screenshot");
@@ -1035,11 +1043,12 @@ export function OverviewImageGenerator({
       link.click();
       link.remove();
       window.setTimeout(() => URL.revokeObjectURL(url), 0);
-      toast.success(exportText("overviewDownloaded"));
+      toast.success(e("overviewDownloaded"));
     } catch {
-      toast.error(exportText("exportError"));
+      toast.error(e("exportError"));
     } finally {
       setExporting(false);
+      setExportLocale(null);
     }
   }
 
@@ -1061,13 +1070,13 @@ export function OverviewImageGenerator({
       <div className="contents">
         <Card className="order-1 lg:col-start-1 lg:row-start-1">
           <CardHeader>
-            <CardTitle>ตั้งค่าภาพ</CardTitle>
-            <CardDescription>ไฟล์ภาพจะใช้เฉพาะในเบราว์เซอร์นี้</CardDescription>
+            <CardTitle>{t("ตั้งค่าภาพ")}</CardTitle>
+            <CardDescription>{t("ไฟล์ภาพจะใช้เฉพาะในเบราว์เซอร์นี้")}</CardDescription>
           </CardHeader>
           <CardContent>
           <FieldGroup>
             <Field>
-              <FieldLabel>ตัวละคร</FieldLabel>
+              <FieldLabel>{t("ตัวละคร")}</FieldLabel>
               <FuzzyCombobox
                 items={characters}
                 value={character}
@@ -1087,9 +1096,9 @@ export function OverviewImageGenerator({
                 searchNames={(item) => [item.name, ...(item.aliases ?? [])]}
                 autoHighlight
               >
-                <ComboboxInput className="w-full" placeholder="ค้นหาตัวละคร…" />
+                <ComboboxInput className="w-full" placeholder={t("ค้นหาตัวละคร…")} />
                 <ComboboxContent>
-                  <ComboboxEmpty>ไม่พบตัวละคร</ComboboxEmpty>
+                  <ComboboxEmpty>{t("ไม่พบตัวละคร")}</ComboboxEmpty>
                   <ComboboxList>
                     {(item) => (
                       <ComboboxItem key={item.key} value={item}>
@@ -1114,12 +1123,11 @@ export function OverviewImageGenerator({
                 </ComboboxContent>
               </FuzzyCombobox>
               <FieldDescription>
-                ชื่อ ธาตุ และประเภทอาวุธจะมาจาก Catalog
-              </FieldDescription>
+                {t("ชื่อ ธาตุ และประเภทอาวุธจะมาจาก Catalog")}</FieldDescription>
             </Field>
 
             <Field>
-              <FieldLabel>พื้นหลัง Namecard</FieldLabel>
+              <FieldLabel>{t("พื้นหลัง Namecard")}</FieldLabel>
               <Button
                 type="button"
                 variant="outline"
@@ -1131,15 +1139,13 @@ export function OverviewImageGenerator({
                 }}
               >
                 <CropIcon data-icon="inline-start" />
-                เลือกตำแหน่งพื้นหลัง
-              </Button>
+                {t("เลือกตำแหน่งพื้นหลัง")}</Button>
               <FieldDescription>
-                ใช้ Namecard ของตัวละครใต้ภาพโปร่งใส
-              </FieldDescription>
+                {t("ใช้ Namecard ของตัวละครใต้ภาพโปร่งใส")}</FieldDescription>
             </Field>
 
             <Field data-invalid={Boolean(artworkError)}>
-              <FieldLabel htmlFor="overview-artwork">ภาพตัวละคร 1:1</FieldLabel>
+              <FieldLabel htmlFor="overview-artwork">{t("ภาพตัวละคร 1:1")}</FieldLabel>
               <Input
                 id="overview-artwork"
                 type="file"
@@ -1148,15 +1154,13 @@ export function OverviewImageGenerator({
                 onChange={(event) => selectArtwork(event)}
               />
               <FieldDescription>
-                ทุกภาพจะเปิดหน้าต่างให้ครอป ซูม และจัดตำแหน่งก่อนใช้งาน
-              </FieldDescription>
-              {artworkError ? <FieldError>{artworkError}</FieldError> : null}
+                {t("ทุกภาพจะเปิดหน้าต่างให้ครอป ซูม และจัดตำแหน่งก่อนใช้งาน")}</FieldDescription>
+              {artworkError ? <FieldError>{t(artworkError)}</FieldError> : null}
             </Field>
 
             <Field>
               <FieldLabel htmlFor="overview-background">
-                อัปโหลดพื้นหลัง
-              </FieldLabel>
+                {t("อัปโหลดพื้นหลัง")}</FieldLabel>
               <Input
                 id="overview-background"
                 type="file"
@@ -1168,12 +1172,10 @@ export function OverviewImageGenerator({
                   variant="outline"
                   onClick={() => setBackgroundUrl(null)}
                 >
-                  กลับไปใช้ Namecard
-                </Button>
+                  {t("กลับไปใช้ Namecard")}</Button>
               ) : null}
               <FieldDescription>
-                ครอปและซูมพื้นหลังเป็นสี่เหลี่ยมก่อนใช้งาน
-              </FieldDescription>
+                {t("ครอปและซูมพื้นหลังเป็นสี่เหลี่ยมก่อนใช้งาน")}</FieldDescription>
             </Field>
 
           </FieldGroup>
@@ -1182,22 +1184,21 @@ export function OverviewImageGenerator({
 
         <Card className="order-3 lg:col-start-3 lg:row-span-2 lg:row-start-1">
           <CardHeader>
-            <CardTitle>ธีมและเอฟเฟกต์</CardTitle>
+            <CardTitle>{t("ธีมและเอฟเฟกต์")}</CardTitle>
             <CardDescription>
-              สีขอบบนและล่างจะตรวจจากภาพตัวละครโดยอัตโนมัติเมื่ออัปโหลด
-            </CardDescription>
+              {t("สีขอบบนและล่างจะตรวจจากภาพตัวละครโดยอัตโนมัติเมื่ออัปโหลด")}</CardDescription>
           </CardHeader>
           <CardContent>
             <FieldGroup>
               <ColorField
                 id="overview-fade-color"
-                label="สี Fade"
+                label={t("สี Fade")}
                 value={fadeColor}
                 onChange={setFadeColor}
               />
               <Field>
                 <FieldLabel htmlFor="overview-fade-tint">
-                  ความเข้มสี Fade {fadeTint}%
+                  {t("ความเข้มสี Fade")}{" "}{fadeTint}%
                 </FieldLabel>
                 <Input
                   id="overview-fade-tint"
@@ -1211,7 +1212,7 @@ export function OverviewImageGenerator({
               </Field>
               <Field>
                 <FieldLabel htmlFor="overview-aura-up">
-                  เลื่อน Aura ด้านบนขึ้น {auraUpOffset}%
+                  {t("เลื่อน Aura ด้านบนขึ้น")}{" "}{auraUpOffset}%
                 </FieldLabel>
                 <Input
                   id="overview-aura-up"
@@ -1226,22 +1227,20 @@ export function OverviewImageGenerator({
                 />
               </Field>
               <Field>
-                <FieldLabel>ตำแหน่งภาพ</FieldLabel>
+                <FieldLabel>{t("ตำแหน่งภาพ")}</FieldLabel>
                 <Button
                   type="button"
                   variant="outline"
                   onClick={resetPosterPositions}
                 >
                   <RotateCcwIcon data-icon="inline-start" />
-                  รีเซ็ตตำแหน่งตัวละครและ Fade
-                </Button>
+                  {t("รีเซ็ตตำแหน่งตัวละครและ Fade")}</Button>
                 <FieldDescription>
-                  เลือกเลเยอร์ใต้ตัวอย่าง แล้วลากในตัวอย่างเพื่อเลื่อนตำแหน่ง
-                </FieldDescription>
+                  {t("เลือกเลเยอร์ใต้ตัวอย่าง แล้วลากในตัวอย่างเพื่อเลื่อนตำแหน่ง")}</FieldDescription>
               </Field>
               <Field>
                 <FieldLabel htmlFor="overview-disclaimer-size">
-                  ขนาด Disclaimer {disclaimerFontSize === null ? "ตามชื่ออัตโนมัติ" : `${disclaimerFontSize}cqw`}
+                  {t("ขนาด Disclaimer")}{" "}{disclaimerFontSize === null ? t("ตามชื่ออัตโนมัติ") : `${disclaimerFontSize}cqw`}
                 </FieldLabel>
                 <div className="flex items-center gap-3">
                   <Input
@@ -1262,15 +1261,13 @@ export function OverviewImageGenerator({
                     disabled={disclaimerFontSize === null}
                     onClick={() => setDisclaimerFontSize(null)}
                   >
-                    อัตโนมัติ
-                  </Button>
+                    {t("อัตโนมัติ")}</Button>
                 </div>
                 <FieldDescription>
-                  ค่าเริ่มต้นจะปรับให้พอดีกับความกว้างชื่ออัตโนมัติ
-                </FieldDescription>
+                  {t("ค่าเริ่มต้นจะปรับให้พอดีกับความกว้างชื่ออัตโนมัติ")}</FieldDescription>
               </Field>
               <Field>
-                <FieldLabel>Role</FieldLabel>
+                <FieldLabel>{t("Role")}</FieldLabel>
                 <ToggleGroup
                   value={[role]}
                   onValueChange={(value) => {
@@ -1290,19 +1287,18 @@ export function OverviewImageGenerator({
               {role === "Custom" ? (
                 <Field>
                   <FieldLabel htmlFor="overview-custom-role">
-                    ข้อความ Custom Role
-                  </FieldLabel>
+                    {t("ข้อความ Custom Role")}</FieldLabel>
                   <Input
                     id="overview-custom-role"
                     value={customRoleText}
                     maxLength={32}
-                    placeholder="เช่น Buffer"
+                    placeholder={t("เช่น Buffer")}
                     onChange={(event) => setCustomRoleText(event.target.value)}
                   />
                 </Field>
               ) : null}
               <Field>
-                <FieldLabel>Blend mode</FieldLabel>
+                <FieldLabel>{t("Blend mode")}</FieldLabel>
                 <DndContext
                   sensors={blendLayerSensors}
                   collisionDetection={closestCenter}
@@ -1327,12 +1323,10 @@ export function OverviewImageGenerator({
                 <div className="mt-3">
                   <Button type="button" variant="outline" onClick={addBlendLayer}>
                     <PlusIcon data-icon="inline-start" />
-                    เพิ่ม Blend mode
-                  </Button>
+                    {t("เพิ่ม Blend mode")}</Button>
                 </div>
                 <FieldDescription>
-                  เพิ่มได้หลายแบบ และลากที่ไอคอนเพื่อจัดลำดับการผสมสี
-                </FieldDescription>
+                  {t("เพิ่มได้หลายแบบ และลากที่ไอคอนเพื่อจัดลำดับการผสมสี")}</FieldDescription>
               </Field>
             </FieldGroup>
           </CardContent>
@@ -1347,7 +1341,7 @@ export function OverviewImageGenerator({
               ) : (
                 <DownloadIcon data-icon="inline-start" />
               )}
-              {exporting ? exportText("exporting") : exportText("downloadPng", { width: 3000, height: 3000 })}
+              {exporting ? e("exporting") : e("downloadPng", { width: 3000, height: 3000 })}
             </Button>
             <Button
               variant="outline"
@@ -1356,7 +1350,7 @@ export function OverviewImageGenerator({
               onClick={() => void download(false)}
             >
               <DownloadIcon data-icon="inline-start" />
-              {exportText("withoutNote")}
+              {e("withoutNote")}
             </Button>
           </CardFooter>
         </Card>
@@ -1364,10 +1358,9 @@ export function OverviewImageGenerator({
 
       <Card className="order-2 min-w-0 lg:col-start-2 lg:row-start-1">
         <CardHeader>
-          <CardTitle>ตัวอย่าง</CardTitle>
+          <CardTitle>{t("ตัวอย่าง")}</CardTitle>
           <CardDescription>
-            ภาพดาวน์โหลดจะใช้เลย์เอาต์เดียวกับตัวอย่าง
-          </CardDescription>
+            {t("ภาพดาวน์โหลดจะใช้เลย์เอาต์เดียวกับตัวอย่าง")}</CardDescription>
         </CardHeader>
         <CardContent>
           <div className="mx-auto aspect-square w-full max-w-3xl overflow-hidden rounded-lg border">
@@ -1391,7 +1384,7 @@ export function OverviewImageGenerator({
             />
           </div>
           <Field className="mt-4">
-            <FieldLabel>เลือกเลเยอร์ที่จะเลื่อน</FieldLabel>
+            <FieldLabel>{t("เลือกเลเยอร์ที่จะเลื่อน")}</FieldLabel>
             <ToggleGroup
               value={[activePosterLayer]}
               onValueChange={(value) => {
@@ -1402,67 +1395,63 @@ export function OverviewImageGenerator({
               className="w-full"
             >
               <ToggleGroupItem value="character" className="flex-1">
-                Char
-              </ToggleGroupItem>
+                {t("Char")}</ToggleGroupItem>
               <ToggleGroupItem value="fade" className="flex-1">
-                Fade
-              </ToggleGroupItem>
+                {t("Fade")}</ToggleGroupItem>
             </ToggleGroup>
             <FieldDescription>
-              เลือกเลเยอร์แล้วลากตรงบริเวณตัวอย่างเพื่อเลื่อนตำแหน่ง
-            </FieldDescription>
+              {t("เลือกเลเยอร์แล้วลากตรงบริเวณตัวอย่างเพื่อเลื่อนตำแหน่ง")}</FieldDescription>
           </Field>
         </CardContent>
       </Card>
 
       <Card className="order-4 lg:col-span-2 lg:col-start-1 lg:row-start-2">
         <CardHeader>
-          <CardTitle>สีธีม</CardTitle>
+          <CardTitle>{t("สีธีม")}</CardTitle>
           <CardDescription>
-            สีขอบบนและล่างจะตรวจจากภาพตัวละครโดยอัตโนมัติเมื่ออัปโหลด และแก้ไขเองได้
-          </CardDescription>
+            {t("สีขอบบนและล่างจะตรวจจากภาพตัวละครโดยอัตโนมัติเมื่ออัปโหลด และแก้ไขเองได้")}</CardDescription>
         </CardHeader>
         <CardContent>
           <FieldGroup className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
             <ColorField
               id="overview-top-color-start"
-              label="สีขอบบน เริ่มต้น"
+              label={t("สีขอบบน เริ่มต้น")}
               value={topColorStart}
               onChange={setTopColorStart}
             />
             <ColorField
               id="overview-top-color-end"
-              label="สีขอบบน สิ้นสุด"
+              label={t("สีขอบบน สิ้นสุด")}
               value={topColorEnd}
               onChange={setTopColorEnd}
             />
             <ColorField
               id="overview-bottom-color-start"
-              label="สีขอบล่าง เริ่มต้น"
+              label={t("สีขอบล่าง เริ่มต้น")}
               value={bottomColorStart}
               onChange={setBottomColorStart}
             />
             <ColorField
               id="overview-bottom-color-end"
-              label="สีขอบล่าง สิ้นสุด"
+              label={t("สีขอบล่าง สิ้นสุด")}
               value={bottomColorEnd}
               onChange={setBottomColorEnd}
             />
             <ColorField
               id="overview-element-color-start"
-              label="สีไล่ระดับธาตุ เริ่มต้น"
+              label={t("สีไล่ระดับธาตุ เริ่มต้น")}
               value={elementColorStart}
               onChange={setElementColorStart}
             />
             <ColorField
               id="overview-element-color-end"
-              label="สีไล่ระดับธาตุ สิ้นสุด"
+              label={t("สีไล่ระดับธาตุ สิ้นสุด")}
               value={elementColorEnd}
               onChange={setElementColorEnd}
             />
             <Field>
               <FieldLabel htmlFor="overview-element-gradient-angle">
-                มุมสีไล่ระดับธาตุ {elementGradientAngle}°
+                {t("มุมสีไล่ระดับธาตุ")}{" "}{elementGradientAngle}°
               </FieldLabel>
               <Input
                 id="overview-element-gradient-angle"
@@ -1485,6 +1474,7 @@ export function OverviewImageGenerator({
         aria-hidden="true"
         className="pointer-events-none fixed top-0 -left-[10000px] order-5 size-[1000px]"
       >
+        <LocaleBoundary locale={exportLocale ?? locale}>
         <OverviewPoster
           composition={composition}
           artworkUrl={artworkUrl}
@@ -1500,6 +1490,7 @@ export function OverviewImageGenerator({
           elementIconUrls={elementIconUrls}
           disclaimerFontSize={disclaimerFontSize}
         />
+        </LocaleBoundary>
       </div>
 
       <Dialog
@@ -1510,10 +1501,9 @@ export function OverviewImageGenerator({
       >
         <DialogContent className="sm:max-w-2xl">
           <DialogHeader>
-            <DialogTitle>ครอปภาพเป็น 1:1</DialogTitle>
+            <DialogTitle>{t("ครอปภาพเป็น 1:1")}</DialogTitle>
             <DialogDescription>
-              เลื่อนตำแหน่งภาพให้ส่วนที่ต้องการอยู่ภายในกรอบสี่เหลี่ยม
-            </DialogDescription>
+              {t("เลื่อนตำแหน่งภาพให้ส่วนที่ต้องการอยู่ภายในกรอบสี่เหลี่ยม")}</DialogDescription>
           </DialogHeader>
           {pendingCrop ? (
             <div className="flex flex-col gap-5">
@@ -1527,8 +1517,7 @@ export function OverviewImageGenerator({
                 className="h-96 rounded-lg bg-black sm:h-120"
               >
                 <CropperDescription>
-                  ลากภาพหรือใช้ปุ่มลูกศรเพื่อเลือกพื้นที่ครอปสี่เหลี่ยม
-                </CropperDescription>
+                  {t("ลากภาพหรือใช้ปุ่มลูกศรเพื่อเลือกพื้นที่ครอปสี่เหลี่ยม")}</CropperDescription>
                 <CropperImage />
                 <CropperCropArea />
               </Cropper>
@@ -1539,19 +1528,17 @@ export function OverviewImageGenerator({
                   onClick={() => rotateArtwork(-90)}
                 >
                   <RotateCcwIcon data-icon="inline-start" />
-                  หมุนซ้าย
-                </Button>
+                  {t("หมุนซ้าย")}</Button>
                 <Button
                   type="button"
                   variant="outline"
                   onClick={() => rotateArtwork(90)}
                 >
                   <RotateCwIcon data-icon="inline-start" />
-                  หมุนขวา
-                </Button>
+                  {t("หมุนขวา")}</Button>
               </div>
               <Field>
-                <FieldLabel htmlFor="crop-zoom">ซูม</FieldLabel>
+                <FieldLabel htmlFor="crop-zoom">{t("ซูม")}</FieldLabel>
                 <div className="flex items-center gap-3">
                   <ZoomOutIcon
                     aria-hidden="true"
@@ -1578,12 +1565,10 @@ export function OverviewImageGenerator({
           ) : null}
           <DialogFooter>
             <Button variant="outline" onClick={() => setPendingCrop(null)}>
-              ยกเลิก
-            </Button>
+              {t("ยกเลิก")}</Button>
             <Button disabled={!cropArea} onClick={applyCrop}>
               <CropIcon data-icon="inline-start" />
-              ใช้ภาพที่ครอป
-            </Button>
+              {t("ใช้ภาพที่ครอป")}</Button>
           </DialogFooter>
         </DialogContent>
       </Dialog>
@@ -1591,10 +1576,9 @@ export function OverviewImageGenerator({
       <Dialog open={nameCardCropOpen} onOpenChange={setNameCardCropOpen}>
         <DialogContent className="sm:max-w-2xl">
           <DialogHeader>
-            <DialogTitle>ครอปพื้นหลัง Namecard</DialogTitle>
+            <DialogTitle>{t("ครอปพื้นหลัง Namecard")}</DialogTitle>
             <DialogDescription>
-              ลากและซูม Namecard เพื่อเลือกพื้นที่ด้านหลังตัวละคร
-            </DialogDescription>
+              {t("ลากและซูม Namecard เพื่อเลือกพื้นที่ด้านหลังตัวละคร")}</DialogDescription>
           </DialogHeader>
           {character?.nameCardImageUrl ? (
             <div className="flex flex-col gap-5">
@@ -1607,13 +1591,12 @@ export function OverviewImageGenerator({
                 className="h-96 rounded-lg bg-black sm:h-120"
               >
                 <CropperDescription>
-                  ลากภาพหรือใช้ปุ่มลูกศรเพื่อเลือกพื้นหลังสี่เหลี่ยม
-                </CropperDescription>
+                  {t("ลากภาพหรือใช้ปุ่มลูกศรเพื่อเลือกพื้นหลังสี่เหลี่ยม")}</CropperDescription>
                 <CropperImage />
                 <CropperCropArea />
               </Cropper>
               <Field>
-                <FieldLabel htmlFor="namecard-zoom">ซูม</FieldLabel>
+                <FieldLabel htmlFor="namecard-zoom">{t("ซูม")}</FieldLabel>
                 <div className="flex items-center gap-3">
                   <ZoomOutIcon
                     aria-hidden="true"
@@ -1643,8 +1626,7 @@ export function OverviewImageGenerator({
               variant="outline"
               onClick={() => setNameCardCropOpen(false)}
             >
-              ยกเลิก
-            </Button>
+              {t("ยกเลิก")}</Button>
             <Button
               disabled={!nameCardDraftCrop}
               onClick={() => {
@@ -1654,8 +1636,7 @@ export function OverviewImageGenerator({
               }}
             >
               <CropIcon data-icon="inline-start" />
-              ใช้ตำแหน่งนี้
-            </Button>
+              {t("ใช้ตำแหน่งนี้")}</Button>
           </DialogFooter>
         </DialogContent>
       </Dialog>
diff --git a/components/admin/register-card.tsx b/components/admin/register-card.tsx
index b1fb23f..a9506a0 100644
--- a/components/admin/register-card.tsx
+++ b/components/admin/register-card.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { useTranslation } from "@/components/i18n/locale-provider";
 import { CircleAlertIcon, Trash2Icon, UserPlusIcon } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { useActionState, useEffect, useRef, useTransition } from "react";
@@ -46,6 +47,7 @@ export function RegisterCard({
   accounts: Array<{ id: string; name: string; email: string; createdAt: Date }>;
   currentUserId: string;
 }) {
+  const { t } = useTranslation();
   const router = useRouter();
   const formRef = useRef<HTMLFormElement>(null);
   const [state, formAction, pending] = useActionState(
@@ -63,9 +65,9 @@ export function RegisterCard({
   function remove(userId: string) {
     startRemoval(async () => {
       const result = await removeAccount(userId);
-      if (result.status === "error") toast.error(result.message);
+      if (result.status === "error") toast.error(t(result.message ?? "กรุณาตรวจสอบข้อมูลให้ถูกต้อง"));
       else {
-        toast.success("ลบบัญชีแล้ว");
+        toast.success(t("ลบบัญชีแล้ว"));
         router.refresh();
       }
     });
@@ -75,16 +77,15 @@ export function RegisterCard({
     <div className="grid gap-6 lg:grid-cols-[minmax(0,28rem)_minmax(0,1fr)]">
       <Card>
         <CardHeader>
-          <CardTitle>สร้างบัญชี</CardTitle>
+          <CardTitle>{t("สร้างบัญชี")}</CardTitle>
           <CardDescription>
-            เพิ่มบัญชีผู้ดูแลที่สามารถเข้าสู่ระบบและจัดการเนื้อหาได้
-          </CardDescription>
+            {t("เพิ่มบัญชีผู้ดูแลที่สามารถเข้าสู่ระบบและจัดการเนื้อหาได้")}</CardDescription>
         </CardHeader>
         <CardContent>
           <form ref={formRef} action={formAction}>
           <FieldGroup>
             <Field>
-              <FieldLabel htmlFor="register-name">ชื่อ</FieldLabel>
+              <FieldLabel htmlFor="register-name">{t("ชื่อ")}</FieldLabel>
               <Input
                 id="register-name"
                 name="name"
@@ -94,7 +95,7 @@ export function RegisterCard({
               />
             </Field>
             <Field>
-              <FieldLabel htmlFor="register-email">อีเมล</FieldLabel>
+              <FieldLabel htmlFor="register-email">{t("อีเมล")}</FieldLabel>
               <Input
                 id="register-email"
                 name="email"
@@ -107,7 +108,7 @@ export function RegisterCard({
               />
             </Field>
             <Field>
-              <FieldLabel htmlFor="register-password">รหัสผ่าน</FieldLabel>
+              <FieldLabel htmlFor="register-password">{t("รหัสผ่าน")}</FieldLabel>
               <Input
                 id="register-password"
                 name="password"
@@ -118,12 +119,11 @@ export function RegisterCard({
                 disabled={pending}
                 required
               />
-              <FieldDescription>อย่างน้อย 8 ตัวอักษร</FieldDescription>
+              <FieldDescription>{t("อย่างน้อย 8 ตัวอักษร")}</FieldDescription>
             </Field>
             <Field>
               <FieldLabel htmlFor="register-password-confirmation">
-                ยืนยันรหัสผ่าน
-              </FieldLabel>
+                {t("ยืนยันรหัสผ่าน")}</FieldLabel>
               <Input
                 id="register-password-confirmation"
                 name="passwordConfirmation"
@@ -139,9 +139,9 @@ export function RegisterCard({
               <Alert variant={state.status === "error" ? "destructive" : "default"}>
                 <CircleAlertIcon aria-hidden="true" />
                 <AlertTitle>
-                  {state.status === "error" ? "สร้างบัญชีไม่สำเร็จ" : "สร้างบัญชีแล้ว"}
+                  {state.status === "error" ? t("สร้างบัญชีไม่สำเร็จ") : t("สร้างบัญชีแล้ว")}
                 </AlertTitle>
-                <AlertDescription>{state.message}</AlertDescription>
+                <AlertDescription>{t(state.message)}</AlertDescription>
               </Alert>
             ) : null}
             <Button className="w-full" size="lg" type="submit" disabled={pending}>
@@ -150,7 +150,7 @@ export function RegisterCard({
               ) : (
                 <UserPlusIcon data-icon="inline-start" aria-hidden="true" />
               )}
-              {pending ? "กำลังสร้างบัญชี…" : "สร้างบัญชี"}
+              {pending ? t("กำลังสร้างบัญชี…") : t("สร้างบัญชี")}
             </Button>
           </FieldGroup>
           </form>
@@ -159,8 +159,8 @@ export function RegisterCard({
 
       <Card>
         <CardHeader>
-          <CardTitle>บัญชีในระบบ</CardTitle>
-          <CardDescription>{accounts.length} บัญชี</CardDescription>
+          <CardTitle>{t("บัญชีในระบบ")}</CardTitle>
+          <CardDescription>{accounts.length} {t("บัญชี")}</CardDescription>
         </CardHeader>
         <CardContent className="flex flex-col gap-3">
           {accounts.map((account) => {
@@ -172,17 +172,17 @@ export function RegisterCard({
                   <p className="truncate text-sm text-muted-foreground">{account.email}</p>
                 </div>
                 {isCurrent ? (
-                  <span className="text-sm text-muted-foreground">บัญชีปัจจุบัน</span>
+                  <span className="text-sm text-muted-foreground">{t("บัญชีปัจจุบัน")}</span>
                 ) : (
                   <DeleteConfirmationDialog
                     trigger={<Button variant="ghost" size="icon-sm" disabled={removing} />}
-                    title={`ลบบัญชี ${account.name}?`}
-                    description="ผู้ใช้นี้จะออกจากระบบและไม่สามารถเข้าสู่ระบบได้อีก การดำเนินการนี้ย้อนกลับไม่ได้"
-                    confirmLabel="ลบบัญชี"
+                    title={t("ลบบัญชี {name}?", { name: account.name })}
+                    description={t("ผู้ใช้นี้จะออกจากระบบและไม่สามารถเข้าสู่ระบบได้อีก การดำเนินการนี้ย้อนกลับไม่ได้")}
+                    confirmLabel={t("ลบบัญชี")}
                     onConfirm={() => remove(account.id)}
                   >
                     <Trash2Icon />
-                    <span className="sr-only">ลบบัญชี {account.name}</span>
+                    <span className="sr-only">{t("ลบบัญชี")}{" "}{account.name}</span>
                   </DeleteConfirmationDialog>
                 )}
               </div>
@@ -191,8 +191,7 @@ export function RegisterCard({
         </CardContent>
         <CardFooter>
           <p className="text-sm text-muted-foreground">
-            บัญชีทุกบัญชีมีสิทธิ์ผู้ดูแลระบบ
-          </p>
+            {t("บัญชีทุกบัญชีมีสิทธิ์ผู้ดูแลระบบ")}</p>
         </CardFooter>
       </Card>
     </div>
diff --git a/components/admin/structured-dashboard.tsx b/components/admin/structured-dashboard.tsx
index 11afb3e..0d9dd59 100644
--- a/components/admin/structured-dashboard.tsx
+++ b/components/admin/structured-dashboard.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { useTranslation } from "@/components/i18n/locale-provider";
 import { searchItems } from "@/lib/search";
 
 import Image from "next/image";
@@ -75,6 +76,7 @@ export function StructuredDashboard({
   trash: GuideCard[];
   catalogVersion: string | null;
 }) {
+  const { t, locale } = useTranslation();
   const router = useRouter();
   const [pending, startTransition] = useTransition();
   const [query, setQuery] = useState("");
@@ -106,7 +108,7 @@ export function StructuredDashboard({
   function startSync() {
     startTransition(async () => {
       const result = await startCatalogSync();
-      if (result.status === "error") toast.error(result.message);
+      if (result.status === "error") toast.error(t(result.message ?? "กรุณาตรวจสอบข้อมูลให้ถูกต้อง"));
       else setSyncJob(result.job);
     });
   }
@@ -125,7 +127,7 @@ export function StructuredDashboard({
   ) {
     startTransition(async () => {
       const result = await action();
-      if (result.status === "error") toast.error(result.message);
+      if (result.status === "error") toast.error(t(result.message ?? "กรุณาตรวจสอบข้อมูลให้ถูกต้อง"));
       else {
         toast.success(success);
         router.refresh();
@@ -138,8 +140,8 @@ export function StructuredDashboard({
       <div className="flex flex-wrap items-center justify-between gap-3">
         <div className="flex flex-wrap items-center gap-2">
           <Badge variant="outline">
-            Lunaris ที่ Sync:{" "}
-            {catalogVersion ? `v${catalogVersion}` : "ยังไม่ Sync"}
+            {t("Lunaris ที่ Sync:")}{" "}{" "}
+            {catalogVersion ? `v${catalogVersion}` : t("ยังไม่ Sync")}
           </Badge>
         </div>
         <div className="flex gap-2">
@@ -153,13 +155,11 @@ export function StructuredDashboard({
             ) : (
               <RefreshCwIcon data-icon="inline-start" />
             )}
-            Sync Catalog
-          </Button>
+            {t("Sync Catalog")}</Button>
           {syncJob && !["completed", "unchanged", "cancelled", "error"].includes(syncJob.status) ? (
             <Button variant="destructive" disabled={pending} onClick={cancelSync}>
               <XCircleIcon data-icon="inline-start" />
-              Cancel Sync
-            </Button>
+              {t("Cancel Sync")}</Button>
           ) : null}
           <Button
             render={<Link href="/admin/create" />}
@@ -167,21 +167,20 @@ export function StructuredDashboard({
             disabled={!catalogReady}
           >
             <PlusIcon data-icon="inline-start" />
-            สร้าง Guide
-          </Button>
+            {t("สร้าง Guide")}</Button>
         </div>
       </div>
       {syncJob ? (
         <Card>
           <CardContent className="space-y-2 pt-6">
             <div className="flex items-center justify-between gap-3 text-sm">
-              <span>{syncJob.message}</span>
-              <span className="text-muted-foreground">{syncJob.total ? `${syncJob.completed}/${syncJob.total}` : "กำลังเริ่ม…"}</span>
+              <span>{t(syncJob.message)}</span>
+              <span className="text-muted-foreground">{syncJob.total ? `${syncJob.completed}/${syncJob.total}` : t("กำลังเริ่ม…")}</span>
             </div>
             <div className="h-2 overflow-hidden rounded-full bg-muted">
               <div className={cn("h-full bg-primary transition-all", syncJob.total ? "" : "w-1/3 animate-pulse")} style={syncJob.total ? { width: `${Math.min(100, (syncJob.completed / syncJob.total) * 100)}%` } : undefined} />
             </div>
-            {syncJob.status === "error" ? <p className="text-sm text-destructive">{syncJob.error ?? "Sync ไม่สำเร็จ"}</p> : null}
+            {syncJob.status === "error" ? <p className="text-sm text-destructive">{t(syncJob.error ?? "Sync ไม่สำเร็จ")}</p> : null}
           </CardContent>
         </Card>
       ) : null}
@@ -193,8 +192,8 @@ export function StructuredDashboard({
           <InputGroupInput
             value={query}
             onChange={(event) => setQuery(event.target.value)}
-            placeholder="ค้นหาตัวละคร…"
-            aria-label="ค้นหาตัวละคร"
+            placeholder={t("ค้นหาตัวละคร…")}
+            aria-label={t("ค้นหาตัวละคร")}
           />
         </InputGroup>
       ) : null}
@@ -211,7 +210,7 @@ export function StructuredDashboard({
                 prefetch={false}
                 className="absolute inset-0 z-10 rounded-xl outline-none focus-visible:ring-2 focus-visible:ring-ring"
               >
-                <span className="sr-only">แก้ไข Guide {guide.name}</span>
+                <span className="sr-only">{t("แก้ไข Guide")}{" "}{guide.name}</span>
               </Link>
               <div className="relative aspect-square bg-muted">
                 <Image
@@ -229,7 +228,7 @@ export function StructuredDashboard({
                 </CardDescription>
                 <CardAction>
                   <div className="flex flex-col items-end gap-1">
-                    <Badge variant="secondary">v{guide.version}</Badge>
+                    <Badge variant="secondary">{t("v")}{" "}{guide.version}</Badge>
                     {(presence?.editorsByGuide[guide.id] ?? []).map((editor) => (
                       <Badge key={editor.userId} variant="outline">
                         {editor.name}
@@ -241,8 +240,8 @@ export function StructuredDashboard({
               </CardHeader>
               <CardContent>
                 <p className="text-xs text-muted-foreground">
-                  แก้ไขล่าสุด{" "}
-                  {new Date(guide.updatedAt).toLocaleString("th-TH")}
+                  {t("แก้ไขล่าสุด")}{" "}{" "}
+                  {new Date(guide.updatedAt).toLocaleString(locale === "th" ? "th-TH" : "en-GB")}
                 </p>
               </CardContent>
               <CardFooter className="flex-wrap justify-between gap-2 pb-5">
@@ -251,8 +250,7 @@ export function StructuredDashboard({
                   render={<Link href={`/admin/${guide.characterKey}`} />}
                   nativeButton={false}
                 >
-                  แก้ไข Guide
-                </Button>
+                  {t("แก้ไข Guide")}</Button>
                 <GuideVisibilityControl
                   className="relative z-20"
                   guideId={guide.id}
@@ -268,15 +266,15 @@ export function StructuredDashboard({
                       size="icon"
                     />
                   }
-                  title={`ย้าย ${guide.name} ไปถังขยะ?`}
-                  description="Guide จะหายจากหน้าเว็บไซต์ทันที และสามารถกู้คืนได้ภายหลัง"
-                  confirmLabel="ย้ายไปถังขยะ"
+                  title={t("ย้าย {name} ไปถังขยะ?", { name: guide.name })}
+                  description={t("Guide จะหายจากหน้าเว็บไซต์ทันที และสามารถกู้คืนได้ภายหลัง")}
+                  confirmLabel={t("ย้ายไปถังขยะ")}
                   onConfirm={() =>
-                    run(() => moveGuideToTrash(guide.id), "ลบสำเร็จ!")
+                    run(() => moveGuideToTrash(guide.id), t("ลบสำเร็จ!"))
                   }
                 >
                   <Trash2Icon />
-                  <span className="sr-only">ย้าย {guide.name} ไปถังขยะ</span>
+                  <span className="sr-only">{t("ย้าย")}{" "}{guide.name} {t("ไปถังขยะ")}</span>
                 </DeleteConfirmationDialog>
               </CardFooter>
             </Card>
@@ -285,17 +283,16 @@ export function StructuredDashboard({
       ) : guides.length ? (
         <Empty className="border">
           <EmptyHeader>
-            <EmptyTitle>ไม่พบตัวละคร</EmptyTitle>
-            <EmptyDescription>ลองค้นหาด้วยชื่อตัวละครอื่น</EmptyDescription>
+            <EmptyTitle>{t("ไม่พบตัวละคร")}</EmptyTitle>
+            <EmptyDescription>{t("ลองค้นหาด้วยชื่อตัวละครอื่น")}</EmptyDescription>
           </EmptyHeader>
         </Empty>
       ) : (
         <Empty className="border">
           <EmptyHeader>
-            <EmptyTitle>ยังไม่มี Guide</EmptyTitle>
+            <EmptyTitle>{t("ยังไม่มี Guide")}</EmptyTitle>
             <EmptyDescription>
-              Sync Catalog แล้วเลือกตัวละครเพื่อสร้าง Guide แรก
-            </EmptyDescription>
+              {t("Sync Catalog แล้วเลือกตัวละครเพื่อสร้าง Guide แรก")}</EmptyDescription>
           </EmptyHeader>
           <EmptyContent>
             <Button
@@ -303,18 +300,16 @@ export function StructuredDashboard({
               nativeButton={false}
               disabled={!catalogReady}
             >
-              สร้าง Guide
-            </Button>
+              {t("สร้าง Guide")}</Button>
           </EmptyContent>
         </Empty>
       )}
       {trash.length ? (
         <section className="flex flex-col gap-4">
           <div>
-            <h2 className="font-heading text-xl font-semibold">ถังขยะ</h2>
+            <h2 className="font-heading text-xl font-semibold">{t("ถังขยะ")}</h2>
             <p className="text-sm text-muted-foreground">
-              Guide ที่ซ่อนไว้จากเว็บไซต์
-            </p>
+              {t("Guide ที่ซ่อนไว้จากเว็บไซต์")}</p>
           </div>
           <div className="grid gap-3 md:grid-cols-2">
             {trash.map((guide) => (
@@ -331,13 +326,12 @@ export function StructuredDashboard({
                         onClick={() =>
                           run(
                             () => restoreStructuredGuide(guide.id),
-                            "กู้คืน Guide แล้ว",
+                            t("กู้คืน Guide แล้ว"),
                           )
                         }
                       >
                         <RotateCcwIcon data-icon="inline-start" />
-                        กู้คืน
-                      </Button>
+                        {t("กู้คืน")}</Button>
                       <DeleteConfirmationDialog
                         showSuccessToast={false}
                         trigger={
@@ -347,19 +341,18 @@ export function StructuredDashboard({
                             disabled={pending}
                           />
                         }
-                        title={`ลบ ${guide.name} ถาวร?`}
-                        description="ข้อมูล Weapons, Artifacts, Constellations, Team และ Extra ทั้งหมดจะกู้คืนไม่ได้"
-                        confirmLabel="ยืนยันลบถาวร"
+                        title={t("ลบ {name} ถาวร?", { name: guide.name })}
+                        description={t("ข้อมูล Weapons, Artifacts, Constellations, Team และ Extra ทั้งหมดจะกู้คืนไม่ได้")}
+                        confirmLabel={t("ยืนยันลบถาวร")}
                         onConfirm={() =>
                           run(
                             () => deleteStructuredGuide(guide.id),
-                            "ลบสำเร็จ!",
+                            t("ลบสำเร็จ!"),
                           )
                         }
                       >
                         <Trash2Icon data-icon="inline-start" />
-                        ลบถาวร
-                      </DeleteConfirmationDialog>
+                        {t("ลบถาวร")}</DeleteConfirmationDialog>
                     </div>
                   </CardAction>
                 </CardHeader>
diff --git a/components/deployment-update-notifier.tsx b/components/deployment-update-notifier.tsx
index 1584ab2..fb9011a 100644
--- a/components/deployment-update-notifier.tsx
+++ b/components/deployment-update-notifier.tsx
@@ -1,7 +1,8 @@
 "use client";
 
-import { useEffect, useRef } from "react";
+import { useEffect, useEffectEvent, useRef } from "react";
 import { toast } from "sonner";
+import { useTranslation } from "@/components/i18n/locale-provider";
 
 import {
   hasDeploymentChanged,
@@ -15,6 +16,15 @@ export function DeploymentUpdateNotifier({
 }: {
   deploymentId: string;
 }) {
+  const { t } = useTranslation();
+  const showUpdate = useEffectEvent(() => {
+    toast(t("มีอัปเดตใหม่พร้อมใช้งาน"), {
+      id: UPDATE_TOAST_ID,
+      description: t("รีโหลดเพื่ออัปเดตเป็นเวอร์ชันล่าสุด"),
+      action: { label: t("รีโหลด"), onClick: () => window.location.reload() },
+      duration: Infinity,
+    });
+  });
   const currentDeployment = useRef(normalizeDeploymentId(deploymentId));
   const updateAvailable = useRef(false);
 
@@ -35,15 +45,7 @@ export function DeploymentUpdateNotifier({
       }
 
       updateAvailable.current = true;
-      toast("มีอัปเดตใหม่พร้อมใช้งาน", {
-        id: UPDATE_TOAST_ID,
-        description: "รีโหลดเพื่ออัปเดตเป็นเวอร์ชันล่าสุด",
-        action: {
-          label: "รีโหลด",
-          onClick: () => window.location.reload(),
-        },
-        duration: Infinity,
-      });
+      showUpdate();
     };
 
     source.addEventListener("deployment", receiveDeployment);
diff --git a/components/i18n/language-dropdown.tsx b/components/i18n/language-dropdown.tsx
new file mode 100644
index 0000000..8e8b08f
--- /dev/null
+++ b/components/i18n/language-dropdown.tsx
@@ -0,0 +1,35 @@
+"use client";
+
+import Image from "next/image";
+import { ChevronDownIcon } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu, DropdownMenuTrigger, DropdownMenuContent,
+  DropdownMenuRadioGroup, DropdownMenuRadioItem,
+} from "@/components/ui/dropdown-menu";
+import { languages, isLocale } from "@/lib/i18n/locales";
+import { useTranslation } from "./locale-provider";
+
+export function LanguageDropdown() {
+  const { locale, setLocale, t } = useTranslation();
+  const selected = languages.find((language) => language.code === locale)!;
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger render={<Button variant="outline" size="sm" />} aria-label={t("Language")}>
+        <Image src={selected.flag} alt="" aria-hidden width={24} height={16} />
+        <span lang={selected.code}>{selected.name}</span>
+        <ChevronDownIcon data-icon="inline-end" />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuRadioGroup value={locale} onValueChange={(value) => { if (isLocale(value)) setLocale(value); }} aria-label={t("Language")}>
+          {languages.map((language) => (
+            <DropdownMenuRadioItem key={language.code} value={language.code}>
+              <Image src={language.flag} alt="" aria-hidden width={24} height={16} />
+              <span lang={language.code}>{language.name}</span>
+            </DropdownMenuRadioItem>
+          ))}
+        </DropdownMenuRadioGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
diff --git a/components/i18n/locale-provider.tsx b/components/i18n/locale-provider.tsx
new file mode 100644
index 0000000..dcccd1e
--- /dev/null
+++ b/components/i18n/locale-provider.tsx
@@ -0,0 +1,33 @@
+"use client";
+
+import { createContext, useCallback, useContext, useEffect, useSyncExternalStore, type ReactNode } from "react";
+import { createLocaleStore } from "@/lib/i18n/locale-store";
+import { defaultLocale, type Locale } from "@/lib/i18n/locales";
+import { translate, type MessageParams } from "@/lib/i18n/messages";
+import { exportText, type ExportMessageKey } from "@/lib/guides/export-text";
+
+// This store contains a browser preference only; server rendering always uses Thai.
+const store = createLocaleStore(() => typeof window === "undefined" ? undefined : window.localStorage);
+const LocaleContext = createContext<Locale>(defaultLocale);
+
+export function LocaleProvider({ children }: { children: ReactNode }) {
+  const locale = useSyncExternalStore(store.subscribe, store.getSnapshot, store.getServerSnapshot);
+  useEffect(() => { document.documentElement.lang = locale; }, [locale]);
+  return <LocaleContext.Provider value={locale}>{children}</LocaleContext.Provider>;
+}
+
+export function LocaleBoundary({ locale, children }: { locale: Locale; children: ReactNode }) {
+  return <LocaleContext.Provider value={locale}>{children}</LocaleContext.Provider>;
+}
+
+export function useTranslation() {
+  const locale = useContext(LocaleContext);
+  const t = useCallback((message: string, params?: MessageParams) => translate(message, params, locale), [locale]);
+  const e = useCallback((key: ExportMessageKey, params?: MessageParams) => exportText(key, params, locale), [locale]);
+  return {
+    locale,
+    setLocale: store.setLocale,
+    t,
+    e,
+  };
+}
diff --git a/components/i18n/text.tsx b/components/i18n/text.tsx
new file mode 100644
index 0000000..5471d45
--- /dev/null
+++ b/components/i18n/text.tsx
@@ -0,0 +1,48 @@
+"use client";
+
+import { cloneElement, type ReactElement } from "react";
+import { useTranslation } from "./locale-provider";
+import { exportStatLabel, type ExportMessageKey } from "@/lib/guides/export-text";
+import type { MessageParams } from "@/lib/i18n/messages";
+
+export function Text({ message, params }: { message: string; params?: MessageParams }) {
+  const { t } = useTranslation();
+  return t(message, params);
+}
+
+export function ExportText({ message, params }: { message: ExportMessageKey; params?: MessageParams }) {
+  const { e } = useTranslation();
+  return e(message, params);
+}
+
+export function StatText({ value }: { value: string }) {
+  const { locale } = useTranslation();
+  return exportStatLabel(value, locale);
+}
+
+export function Localized({ children, attributes }: {
+  children: ReactElement;
+  attributes: Record<string, string | { message: string; params: MessageParams }>;
+}) {
+  const { t } = useTranslation();
+  const props = Object.fromEntries(Object.entries(attributes).map(([key, value]) => [
+    key, typeof value === "string" ? t(value) : t(value.message, value.params),
+  ]));
+  return cloneElement(children, props);
+}
+
+export function MetricText({ value }: { value: string }) {
+  const { locale } = useTranslation();
+  return `${Number(value).toLocaleString(locale, { maximumFractionDigits: 2 })}%`;
+}
+
+export function SectionTitle({ slug, fallback }: { slug: string; fallback: string }) {
+  const { t } = useTranslation();
+  const titles: Record<string, string> = { overview: "Overview", weapon: "Weapons", artifact: "Artifacts & Stats", constellations: "Constellations", team: "Team Calc" };
+  return titles[slug] ? t(titles[slug]) : fallback;
+}
+
+export function ConditionLabel({ name, index }: { name: string | null; index: number }) {
+  const { e } = useTranslation();
+  return name || e("condition", { index });
+}
diff --git a/components/public/artifact-image-export.tsx b/components/public/artifact-image-export.tsx
index b59a206..ae90c5b 100644
--- a/components/public/artifact-image-export.tsx
+++ b/components/public/artifact-image-export.tsx
@@ -1,9 +1,9 @@
 "use client";
 
+import { useTranslation } from "@/components/i18n/locale-provider";
 import { useState, type ReactNode } from "react";
 import { DownloadIcon } from "lucide-react";
 
-import { exportText } from "@/lib/guides/export-text";
 import { GuideImageExport } from "@/components/public/guide-image-export";
 import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
@@ -40,6 +40,7 @@ export function ArtifactImageExport({
   targetConditionLabels: readonly string[];
   recommendedConditionLabels: readonly string[];
 }) {
+  const { e } = useTranslation();
   const [sections, setSections] = useState<Set<ArtifactExportSection>>(
     () => new Set(sectionOptions.map(([value]) => value)),
   );
@@ -79,13 +80,13 @@ export function ArtifactImageExport({
     <Dialog>
       <DialogTrigger render={<Button type="button" variant="outline" size="sm" />}>
         <DownloadIcon data-icon="inline-start" />
-        {exportText("exportImage")}
+        {e("exportImage")}
       </DialogTrigger>
       <DialogContent>
         <DialogHeader>
-          <DialogTitle>{exportText("sectionTitle")}</DialogTitle>
+          <DialogTitle>{e("sectionTitle")}</DialogTitle>
           <DialogDescription>
-            {exportText("sectionDescription")}
+            {e("sectionDescription")}
           </DialogDescription>
         </DialogHeader>
         <FieldGroup>
@@ -97,7 +98,7 @@ export function ArtifactImageExport({
                 checked ? new Set(sectionOptions.map(([value]) => value)) : new Set(),
               )}
             />
-            <FieldLabel htmlFor="artifact-export-entire">{exportText("allSections")}</FieldLabel>
+            <FieldLabel htmlFor="artifact-export-entire">{e("allSections")}</FieldLabel>
           </Field>
           {sectionOptions.map(([value, label]) => (
             <Field key={value} orientation="horizontal">
@@ -113,7 +114,7 @@ export function ArtifactImageExport({
                   });
                 }}
               />
-              <FieldLabel htmlFor={`artifact-export-${value}`}>{exportText(label)}</FieldLabel>
+              <FieldLabel htmlFor={`artifact-export-${value}`}>{e(label)}</FieldLabel>
             </Field>
           ))}
           {hasNote ? (
@@ -123,13 +124,13 @@ export function ArtifactImageExport({
                 checked={includeNote}
                 onCheckedChange={(checked) => setIncludeNote(checked === true)}
               />
-              <FieldLabel htmlFor="artifact-export-note">{exportText("addNote")}</FieldLabel>
+              <FieldLabel htmlFor="artifact-export-note">{e("addNote")}</FieldLabel>
             </Field>
           ) : null}
         </FieldGroup>
         {sections.has("best-stats") && recommendedConditionLabels.length > 1 ? (
           <div className="flex flex-col gap-2">
-            <p className="text-sm font-medium">{exportText("recommendedCondition")}</p>
+            <p className="text-sm font-medium">{e("recommendedCondition")}</p>
             <ToggleGroup
               variant="outline"
               value={[recommendedCondition]}
@@ -143,7 +144,7 @@ export function ArtifactImageExport({
                   value={String(index)}
                   className="aria-pressed:bg-primary aria-pressed:text-primary-foreground"
                 >
-                  {label}
+                  {label || e("condition", { index: index + 1 })}
                 </ToggleGroupItem>
               ))}
             </ToggleGroup>
@@ -151,7 +152,7 @@ export function ArtifactImageExport({
         ) : null}
         {sections.has("target-stats") && targetConditionLabels.length > 1 ? (
           <div className="flex flex-col gap-2">
-            <p className="text-sm font-medium">{exportText("targetCondition")}</p>
+            <p className="text-sm font-medium">{e("targetCondition")}</p>
             <ToggleGroup
               variant="outline"
               value={[targetCondition]}
@@ -165,7 +166,7 @@ export function ArtifactImageExport({
                   value={String(index)}
                   className="aria-pressed:bg-primary aria-pressed:text-primary-foreground"
                 >
-                  {label}
+                  {label || e("condition", { index: index + 1 })}
                 </ToggleGroupItem>
               ))}
             </ToggleGroup>
diff --git a/components/public/condition-switcher.tsx b/components/public/condition-switcher.tsx
index 96a4537..5d5bf38 100644
--- a/components/public/condition-switcher.tsx
+++ b/components/public/condition-switcher.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { useTranslation } from "@/components/i18n/locale-provider";
 import { Children, type ReactNode, useState } from "react";
 
 import { ScrollableNav } from "@/components/public/scrollable-nav";
@@ -14,6 +15,7 @@ export function ConditionSwitcher({
   label?: string;
   labels?: readonly string[];
 }) {
+  const { t, e } = useTranslation();
   const items = Children.toArray(children);
   const [active, setActive] = useState("0");
 
@@ -21,8 +23,8 @@ export function ConditionSwitcher({
 
   return (
     <div className="flex min-w-0 flex-col gap-4">
-      <ScrollableNav ariaLabel={label} className="w-full min-w-0">
-        <ToggleGroup aria-label={label} variant="outline" value={[active]} onValueChange={(values) => {
+      <ScrollableNav ariaLabel={t(label)} className="w-full min-w-0">
+        <ToggleGroup aria-label={t(label)} variant="outline" value={[active]} onValueChange={(values) => {
           if (values[0]) setActive(values[0]);
         }}>
           {items.map((_, index) => (
@@ -31,7 +33,7 @@ export function ConditionSwitcher({
               value={String(index)}
               className="aria-pressed:bg-primary aria-pressed:text-primary-foreground"
             >
-              {labels?.[index] || `Condition ${index + 1}`}
+              {labels?.[index] || e("condition", { index: index + 1 })}
             </ToggleGroupItem>
           ))}
         </ToggleGroup>
diff --git a/components/public/constellation-image.tsx b/components/public/constellation-image.tsx
index 4716fc7..019c340 100644
--- a/components/public/constellation-image.tsx
+++ b/components/public/constellation-image.tsx
@@ -1,13 +1,16 @@
+"use client";
+
+import { useTranslation } from "@/components/i18n/locale-provider";
+import { Text } from "@/components/i18n/text";
 import Image from "next/image";
 
 import { GuideExportBranding } from "@/components/public/guide-export-branding";
 import type { PublicGuide } from "@/lib/guides/queries";
 import { constellationChartRows } from "@/lib/guides/export-image";
-import { exportText } from "@/lib/guides/export-text";
 import { cn } from "@/lib/utils";
 
-function percentage(value: number): string {
-  return `${value.toLocaleString("en-US", { maximumFractionDigits: 2 })}%`;
+function percentage(value: number, locale: string): string {
+  return `${value.toLocaleString(locale, { maximumFractionDigits: 2 })}%`;
 }
 
 export function ConstellationImage({
@@ -17,6 +20,7 @@ export function ConstellationImage({
   guide: PublicGuide;
   group: PublicGuide["constellationGroups"][number];
 }) {
+  const { e, locale } = useTranslation();
   const rows = constellationChartRows(group.rows);
   const background = guide.character.splashImageUrl ?? guide.coverUrl;
   const footer = group.note;
@@ -43,10 +47,10 @@ export function ConstellationImage({
                 : "text-[76px]",
             )}
           >
-            {exportText("constellationTitle", { name: guide.character.name })}
+            {e("constellationTitle", { name: guide.character.name })}
           </h2>
             <p className="mt-3 line-clamp-2 max-w-[1100px] whitespace-pre-line text-[42px] leading-tight font-bold text-[#f1badd]">
-              {exportText("teamDamage")}
+              {e("teamDamage")}
             </p>
         </div>
       </div>
@@ -59,7 +63,7 @@ export function ConstellationImage({
             className="grid grid-cols-[82px_1fr] items-center gap-4"
           >
             <div className="text-right text-[58px] leading-none font-bold drop-shadow-[0_5px_4px_rgba(0,0,0,0.9)]">
-              C{row.level}
+              <Text message="C" />{row.level}
             </div>
             <div className="flex h-[100px] items-center">
               <div
@@ -75,7 +79,7 @@ export function ConstellationImage({
                   row.isGreat ? "text-[#f0c76a]" : "text-[#f1badd]",
                 )}
               >
-                {percentage(row.percent)}
+                {percentage(row.percent, locale)}
               </span>
             </div>
           </div>
diff --git a/components/public/guide-export-branding.tsx b/components/public/guide-export-branding.tsx
index 82a013f..36e9bca 100644
--- a/components/public/guide-export-branding.tsx
+++ b/components/public/guide-export-branding.tsx
@@ -1,4 +1,5 @@
 import Image from "next/image";
+import { ExportText } from "@/components/i18n/text";
 
 export function GuideExportBranding({
   backgroundUrl,
@@ -20,18 +21,15 @@ export function GuideExportBranding({
         className="object-cover"
       />
       <div className="absolute inset-0 bg-[#050817]/65" />
-      <Image
-        src="/icon/Watermark.png"
-        alt=""
-        width={constellation ? 280 : 180}
-        height={constellation ? 158 : 101}
-        loading="eager"
+      <div
         className={
           constellation
-            ? "guide-export-watermark absolute right-4 bottom-0 z-30 h-auto w-[280px] object-contain drop-shadow-[0_4px_3px_rgba(0,0,0,0.8)]"
-            : "guide-export-watermark absolute top-4 right-4 z-30 h-auto w-[180px] object-contain drop-shadow-[0_4px_3px_rgba(0,0,0,0.8)]"
+            ? "guide-export-watermark absolute right-4 bottom-4 z-30 whitespace-nowrap text-xl font-semibold text-white/80 drop-shadow-[0_4px_3px_rgba(0,0,0,0.8)]"
+            : "guide-export-watermark absolute top-4 right-4 z-30 whitespace-nowrap text-base font-semibold text-white/80 drop-shadow-[0_4px_3px_rgba(0,0,0,0.8)]"
         }
-      />
+      >
+        <ExportText message="watermark" />
+      </div>
     </>
   );
 }
diff --git a/components/public/guide-image-export.tsx b/components/public/guide-image-export.tsx
index 82a4b62..fa5cfc0 100644
--- a/components/public/guide-image-export.tsx
+++ b/components/public/guide-image-export.tsx
@@ -5,6 +5,8 @@ import { createPortal } from "react-dom";
 import { DownloadIcon } from "lucide-react";
 import { toast } from "sonner";
 
+import { LocaleBoundary, useTranslation } from "@/components/i18n/locale-provider";
+import type { Locale } from "@/lib/i18n/locales";
 import { Button } from "@/components/ui/button";
 import { Spinner } from "@/components/ui/spinner";
 import { exportText, withoutNotesFileName } from "@/lib/guides/export-text";
@@ -24,7 +26,7 @@ export function GuideImageExport({
   format = "png",
   disabled = false,
   captureClassName,
-  buttonLabel = exportText("exportImage"),
+  buttonLabel,
 }: {
   children: ReactNode;
   fileName: string;
@@ -35,15 +37,17 @@ export function GuideImageExport({
   captureClassName?: string;
   buttonLabel?: string;
 }) {
+  const { e, locale } = useTranslation();
   const captureRef = useRef<HTMLDivElement>(null);
-  const [captureMode, setCaptureMode] = useState<
-    "with-notes" | "without-notes" | null
-  >(null);
-  const capturing = captureMode !== null;
+  const [captureOptions, setCaptureOptions] = useState<{ mode: "with-notes" | "without-notes"; locale: Locale; fileName: string } | null>(null);
+  const captureMode = captureOptions?.mode;
+  const capturing = captureOptions !== null;
 
   useEffect(() => {
-    if (!capturing) return;
+    if (!captureOptions) return;
 
+    const exportLocale = captureOptions.locale;
+    const exportFileName = captureOptions.fileName;
     let cancelled = false;
 
     async function capture() {
@@ -83,8 +87,8 @@ export function GuideImageExport({
         const link = document.createElement("a");
         link.download = downloadFileName(
           captureMode === "without-notes"
-            ? withoutNotesFileName(fileName)
-            : fileName,
+            ? withoutNotesFileName(exportFileName)
+            : exportFileName,
         );
         link.href = url;
         document.body.append(link);
@@ -92,9 +96,9 @@ export function GuideImageExport({
         link.remove();
         window.setTimeout(() => URL.revokeObjectURL(url), 0);
       } catch {
-        if (!cancelled) toast.error(exportText("exportError"));
+        if (!cancelled) toast.error(exportText("exportError", {}, exportLocale));
       } finally {
-        if (!cancelled) setCaptureMode(null);
+        if (!cancelled) setCaptureOptions(null);
       }
     }
 
@@ -102,7 +106,7 @@ export function GuideImageExport({
     return () => {
       cancelled = true;
     };
-  }, [capturing, captureMode, fileName, format, height, width]);
+  }, [captureOptions, captureMode, format, height, width]);
 
   return (
     <>
@@ -114,7 +118,7 @@ export function GuideImageExport({
             variant="outline"
             size="sm"
             disabled={capturing || disabled}
-            onClick={() => setCaptureMode(mode)}
+            onClick={() => setCaptureOptions({ mode, locale, fileName })}
           >
             {captureMode === mode ? (
               <Spinner data-icon="inline-start" />
@@ -122,10 +126,10 @@ export function GuideImageExport({
               <DownloadIcon data-icon="inline-start" />
             )}
             {captureMode === mode
-              ? exportText("exporting")
+              ? e("exporting")
               : mode === "without-notes"
-                ? exportText("withoutNote")
-                : buttonLabel}
+                ? e("withoutNote")
+                : buttonLabel ?? e("exportImage")}
           </Button>
         ))}
       </div>
@@ -143,7 +147,7 @@ export function GuideImageExport({
                 )}
                 style={{ width, height }}
               >
-                {children}
+                <LocaleBoundary locale={captureOptions!.locale}>{children}</LocaleBoundary>
               </div>
             </div>,
             document.body,
diff --git a/components/public/material-poster.tsx b/components/public/material-poster.tsx
index 3d8e76f..e6e1da5 100644
--- a/components/public/material-poster.tsx
+++ b/components/public/material-poster.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { useTranslation } from "@/components/i18n/locale-provider";
 import Image from "next/image";
 import Link from "next/link";
 import { useRef, type PointerEvent } from "react";
@@ -66,7 +67,7 @@ export function MaterialPoster({
   onArtworkMove,
   className,
   bleeding = [],
-  locale = "en",
+  locale: overrideLocale,
 }: {
   locale?: Locale;
   character: PosterCharacter;
@@ -82,6 +83,8 @@ export function MaterialPoster({
   artworkScale: number;
   bleeding?: Array<{ id: string; imageUrl: string | null; amount: number; blendMode: PosterBlendMode }>;
 }) {
+  const { t, locale: selectedLocale } = useTranslation();
+  const locale = overrideLocale ?? selectedLocale;
   const dragStart = useRef<{ pointerId: number; x: number; y: number; offsetX: number; offsetY: number } | null>(null);
   const stats = character.baseStats.slice(0, 4);
   const materials = mergePosterMaterials(
@@ -127,7 +130,7 @@ export function MaterialPoster({
       onPointerUp={handlePointerUp}
       onPointerCancel={handlePointerUp}
       role={interactive && characterArtUrl ? "application" : undefined}
-      aria-label={interactive && characterArtUrl ? "ลากเพื่อเลื่อนภาพตัวละคร" : undefined}
+      aria-label={interactive && characterArtUrl ? t("ลากเพื่อเลื่อนภาพตัวละคร") : undefined}
     >
       {character.nameCardImageUrl ? (
         <Image
@@ -191,7 +194,7 @@ export function MaterialPoster({
       />
 
       <div className="absolute inset-x-[4%] top-[5%]" style={{ fontFamily: "Kanit Poster", fontWeight: 800, fontStyle: "italic" }}>
-        <h2 className="text-[7cqw] leading-none" style={{ textShadow: "-6px 14px 0 rgba(0,0,0,0.59)" }}>BASE STATS</h2>
+        <h2 className="text-[7cqw] leading-none" style={{ textShadow: "-6px 14px 0 rgba(0,0,0,0.59)" }}>{t("BASE STATS")}</h2>
         <div className="mt-[4%] flex w-[53%] flex-col gap-[1.2cqw]">
           {Array.from({ length: 4 }, (_, index) => {
             const stat = stats[index];
@@ -240,7 +243,7 @@ export function MaterialPoster({
                 key={`${material.key}-${index}`}
                 href={`https://lunaris.moe/material/${encodeURIComponent(material.key)}`}
                 className={className}
-                aria-label={`เปิดข้อมูล ${material.name} บน Lunaris`}
+                aria-label={t("เปิดข้อมูล {name} บน Lunaris", { name: material.name })}
               >
                 {materialCard}
               </Link>
diff --git a/components/public/scrollable-nav.tsx b/components/public/scrollable-nav.tsx
index 5751518..5e5db50 100644
--- a/components/public/scrollable-nav.tsx
+++ b/components/public/scrollable-nav.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { useTranslation } from "@/components/i18n/locale-provider";
 import { useCallback, useEffect, useRef, useState, type ReactNode } from "react";
 import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
 
@@ -15,6 +16,7 @@ export function ScrollableNav({
   children: ReactNode;
   className?: string;
 }) {
+  const { t } = useTranslation();
   const navRef = useRef<HTMLElement>(null);
   const [canScrollLeft, setCanScrollLeft] = useState(false);
   const [canScrollRight, setCanScrollRight] = useState(false);
@@ -51,13 +53,13 @@ export function ScrollableNav({
         className="shrink-0 sm:hidden"
         disabled={!canScrollLeft}
         onClick={() => scroll(-1)}
-        aria-label="เลื่อนเมนูไปทางซ้าย"
+        aria-label={t("เลื่อนเมนูไปทางซ้าย")}
       >
         <ChevronLeftIcon />
       </Button>
       <nav
         ref={navRef}
-        aria-label={ariaLabel}
+        aria-label={t(ariaLabel ?? "Navigation")}
         className="flex min-w-0 flex-1 gap-1 overflow-x-auto scrollbar-none"
       >
         {children}
@@ -69,7 +71,7 @@ export function ScrollableNav({
         className="shrink-0 sm:hidden"
         disabled={!canScrollRight}
         onClick={() => scroll(1)}
-        aria-label="เลื่อนเมนูไปทางขวา"
+        aria-label={t("เลื่อนเมนูไปทางขวา")}
       >
         <ChevronRightIcon />
       </Button>
diff --git a/components/public/section-drawer.tsx b/components/public/section-drawer.tsx
index cfa20c3..f4c5c95 100644
--- a/components/public/section-drawer.tsx
+++ b/components/public/section-drawer.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { useTranslation } from "@/components/i18n/locale-provider";
 import { ListTreeIcon } from "lucide-react";
 
 import { Button } from "@/components/ui/button";
@@ -19,19 +20,19 @@ export interface GuideSectionLink {
 }
 
 export function SectionDrawer({ sections }: { sections: GuideSectionLink[] }) {
+  const { t } = useTranslation();
   return (
     <div className="lg:hidden">
       <Drawer showSwipeHandle>
         <DrawerTrigger render={<Button variant="outline" className="w-full" />}>
           <ListTreeIcon aria-hidden="true" />
-          สารบัญหน้านี้
-        </DrawerTrigger>
+          {t("สารบัญหน้านี้")}</DrawerTrigger>
         <DrawerContent>
           <DrawerHeader>
-            <DrawerTitle>สารบัญหน้านี้</DrawerTitle>
-            <DrawerDescription>เลือกหัวข้อเพื่อเลื่อนไปยังเนื้อหา</DrawerDescription>
+            <DrawerTitle>{t("สารบัญหน้านี้")}</DrawerTitle>
+            <DrawerDescription>{t("เลือกหัวข้อเพื่อเลื่อนไปยังเนื้อหา")}</DrawerDescription>
           </DrawerHeader>
-          <nav aria-label="สารบัญบนมือถือ" className="grid gap-1 overflow-y-auto p-4">
+          <nav aria-label={t("สารบัญบนมือถือ")} className="grid gap-1 overflow-y-auto p-4">
             {sections.map((section) => (
               <DrawerClose
                 key={section.id}
@@ -42,7 +43,7 @@ export function SectionDrawer({ sections }: { sections: GuideSectionLink[] }) {
                   />
                 }
               >
-                {section.label}
+                {t(section.label)}
               </DrawerClose>
             ))}
           </nav>
diff --git a/components/public/site-footer.tsx b/components/public/site-footer.tsx
index e04d23c..07de53b 100644
--- a/components/public/site-footer.tsx
+++ b/components/public/site-footer.tsx
@@ -1,3 +1,4 @@
+import { Text } from "@/components/i18n/text";
 import Link from "next/link";
 
 export function SiteFooter() {
@@ -8,8 +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>
+          <Text message="Special Thanks" /></Link>
       </div>
     </footer>
   );
diff --git a/components/public/site-header.tsx b/components/public/site-header.tsx
index e84ce8c..ddcb18e 100644
--- a/components/public/site-header.tsx
+++ b/components/public/site-header.tsx
@@ -1,3 +1,5 @@
+import { Text } from "@/components/i18n/text";
+import { LanguageDropdown } from "@/components/i18n/language-dropdown";
 import Image from "next/image";
 import Link from "next/link";
 import { Suspense } from "react";
@@ -16,8 +18,7 @@ async function AdminEditLink({ editHref }: { editHref: string }) {
       nativeButton={false}
       render={<Link href={editHref} />}
     >
-      ไปหน้าแก้ไข
-    </Button>
+      <Text message="ไปหน้าแก้ไข" /></Button>
   ) : null;
 }
 
@@ -30,8 +31,9 @@ export function SiteHeader({ editHref = "/admin", guideId }: { editHref?: string
           className="mr-auto 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 className="hidden sm:inline">ไกด์เกนชินไม่ใช่เกมมือถือ</span>
+          <span className="hidden sm:inline"><Text message="ไกด์เกนชินไม่ใช่เกมมือถือ" /></span>
         </Link>
+        <LanguageDropdown />
         <nav aria-label="Public navigation" className="flex items-center gap-1">
           <VisitorPresence guideId={guideId} />
           <Suspense fallback={null}>
diff --git a/components/public/structured-directory.tsx b/components/public/structured-directory.tsx
index e2d7ad1..c759948 100644
--- a/components/public/structured-directory.tsx
+++ b/components/public/structured-directory.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { useTranslation } from "@/components/i18n/locale-provider";
 import { searchItems } from "@/lib/search";
 
 import Image from "next/image";
@@ -39,6 +40,7 @@ type GuideCard = {
 };
 
 export function StructuredDirectory({ guides }: { guides: GuideCard[] }) {
+  const { t } = useTranslation();
   const [query, setQuery] = useState("");
   const presence = useVisitorPresence(null);
   const search = searchItems(guides, query,
@@ -54,8 +56,8 @@ export function StructuredDirectory({ guides }: { guides: GuideCard[] }) {
         <InputGroupInput
           value={query}
           onChange={(event) => setQuery(event.target.value)}
-          placeholder="ค้นหาไกด์…"
-          aria-label="ค้นหาไกด์"
+          placeholder={t("ค้นหาไกด์…")}
+          aria-label={t("ค้นหาไกด์")}
         />
       </InputGroup>
 
@@ -72,7 +74,7 @@ export function StructuredDirectory({ guides }: { guides: GuideCard[] }) {
                 <div className="relative aspect-square bg-muted">
                   <Image
                     src={guide.coverUrl}
-                    alt={`ไกด์ ${guide.name}`}
+                    alt={t("ไกด์ {name}", { name: guide.name })}
                     fill
                     fetchPriority={index === 0 ? "high" : undefined}
                     sizes="(min-width: 1024px) 33vw, (min-width: 640px) 50vw, 100vw"
@@ -86,8 +88,7 @@ export function StructuredDirectory({ guides }: { guides: GuideCard[] }) {
                   >
                     <Badge variant="secondary" className="min-w-14 tabular-nums">
                       <UsersIcon data-icon="inline-start" />
-                      {presence?.byGuide[guide.id] ?? 0} คน
-                    </Badge>
+                      {presence?.byGuide[guide.id] ?? 0} {t("คน")}</Badge>
                   </CardAction>
                   <CardDescription className="line-clamp-3">
                     {guide.overview}
@@ -100,8 +101,8 @@ export function StructuredDirectory({ guides }: { guides: GuideCard[] }) {
       ) : (
         <Empty className="border">
           <EmptyHeader>
-            <EmptyTitle>ไม่พบไกด์</EmptyTitle>
-            <EmptyDescription>ลองค้นหาด้วยชื่อตัวละครอื่น</EmptyDescription>
+            <EmptyTitle>{t("ไม่พบไกด์")}</EmptyTitle>
+            <EmptyDescription>{t("ลองค้นหาด้วยชื่อตัวละครอื่น")}</EmptyDescription>
           </EmptyHeader>
         </Empty>
       )}
diff --git a/components/public/structured-guide.tsx b/components/public/structured-guide.tsx
index be8ffbb..15c0708 100644
--- a/components/public/structured-guide.tsx
+++ b/components/public/structured-guide.tsx
@@ -1,3 +1,4 @@
+import { Localized, Text, ExportText, StatText, MetricText, SectionTitle, ConditionLabel } from "@/components/i18n/text";
 import Image from "next/image";
 import Link from "next/link";
 import { ArrowUpRightIcon, ChevronLeftIcon } from "lucide-react";
@@ -54,7 +55,6 @@ import {
 } from "@/lib/guides/talents";
 import { parseYouTubeUrl } from "@/lib/guides/youtube";
 import { normalizeExtraRichText } from "@/lib/rich-text";
-import { exportText, exportStatLabel, type Locale } from "@/lib/guides/export-text";
 import { cn } from "@/lib/utils";
 
 function hasSection(guide: PublicGuide, slug: string): boolean {
@@ -84,14 +84,6 @@ export function publicSections(guide: PublicGuide) {
   return guide.sections.filter((section) => hasSection(guide, section.slug));
 }
 
-function publicSectionTitle(slug: string, fallback: string): string {
-  if (slug === "weapon") return "อาวุธ";
-  if (slug === "artifact") return "อาร์ติแฟกต์และค่าสถานะ";
-  if (slug === "constellations") return "กลุ่มดาว";
-  if (slug === "team") return "คำนวณทีม";
-  return fallback;
-}
-
 export function StructuredGuideShell({
   guide,
   section,
@@ -109,13 +101,13 @@ export function StructuredGuideShell({
       <SiteHeader editHref={`/admin/${guide.characterKey}`} guideId={guide.id} />
       <div className="sticky top-0 z-40 bg-background/95 supports-backdrop-filter:backdrop-blur">
         <div className="mx-auto flex min-h-16 w-full max-w-7xl items-center gap-3 px-4 sm:px-6">
-          <Link
+          <Localized attributes={{ "aria-label": "กลับหน้ารวม" }}><Link
             href="/"
             aria-label="กลับหน้ารวม"
             className="grid size-10 place-items-center rounded-lg hover:bg-muted"
           >
             <ChevronLeftIcon />
-          </Link>
+          </Link></Localized>
           <div className="relative size-11 overflow-hidden rounded-lg border">
             <Image
               src={guide.coverUrl}
@@ -130,7 +122,7 @@ export function StructuredGuideShell({
               {guide.name}
             </p>
             <p className="truncate font-heading text-2xl font-semibold">
-              {currentPageTitle}
+              <SectionTitle slug={section ?? "overview"} fallback={currentPageTitle} />
             </p>
           </div>
         </div>
@@ -155,8 +147,7 @@ export function StructuredGuideShell({
               height={20}
               className="size-5 object-contain"
             />
-            Overview
-          </Link>
+            <Text message="Overview" /></Link>
           {sections.map((item) => (
             <Link
               key={item.id}
@@ -178,7 +169,7 @@ export function StructuredGuideShell({
                   className="size-5 object-contain"
                 />
               ) : null}
-              {item.title}
+              <SectionTitle slug={item.slug} fallback={item.title} />
             </Link>
           ))}
         </ScrollableNav>
@@ -210,20 +201,20 @@ function GuideOverview({
   return (
     <div className="flex flex-col gap-8">
       <div className="mx-auto flex max-w-3xl flex-col gap-3 text-center">
-        <p className="text-sm font-medium text-primary">ภาพรวมแนวทาง</p>
+        <p className="text-sm font-medium text-primary"><Text message="ภาพรวมแนวทาง" /></p>
         <h1 className="font-heading text-4xl font-bold">{guide.name}</h1>
         <p className="text-lg font-semibold">{guide.overview}</p>
       </div>
       <div className="grid items-start gap-6 lg:grid-cols-2">
         <div className="order-1 relative aspect-square w-full overflow-hidden rounded-xl border bg-muted lg:col-start-1 lg:row-start-1">
-          <Image
+          <Localized attributes={{ "alt": { message: "ไกด์ {name}", params: { name: guide.name } } }}><Image
             src={guide.coverUrl}
             alt={`ไกด์ ${guide.name}`}
             fill
             sizes="(min-width: 1280px) 600px, (min-width: 1024px) calc(50vw - 44px), calc(100vw - 32px)"
             priority
             className="object-cover"
-          />
+          /></Localized>
         </div>
         <div className="order-3 lg:col-start-2 lg:row-start-1">
           <GuideNavigation guide={guide} sections={sections} />
@@ -268,7 +259,7 @@ function GuideOverview({
               {youtubeVideos.map((youtubeVideo, index) => (
                 <section key={`${youtubeVideo.videoId}-${index}`} className="flex flex-col items-center gap-3">
                   <div className="aspect-video w-full overflow-hidden rounded-xl border bg-muted">
-                    <iframe
+                    <Localized attributes={{ "title": { message: "วิดีโอไกด์ {name} {index}", params: { name: guide.name, index: index + 1 } } }}><iframe
                       src={youtubeVideo.embedUrl}
                       title={`วิดีโอไกด์ ${guide.name} ${index + 1}`}
                       loading="lazy"
@@ -276,7 +267,7 @@ function GuideOverview({
                       referrerPolicy="strict-origin-when-cross-origin"
                       allowFullScreen
                       className="size-full"
-                    />
+                    /></Localized>
                   </div>
                 </section>
               ))}
@@ -297,7 +288,7 @@ function GuideNavigation({
   sections: ReturnType<typeof publicSections>;
 }) {
   return sections.length ? (
-    <nav aria-label={`เมนูคู่มือ ${guide.name}`} className="flex flex-col gap-3">
+    <Localized attributes={{ "aria-label": { message: "เมนูคู่มือ {name}", params: { name: guide.name } } }}><nav aria-label={`เมนูคู่มือ ${guide.name}`} className="flex flex-col gap-3">
       {sections.map((item) => (
         <Link
           key={item.id}
@@ -316,8 +307,8 @@ function GuideNavigation({
                   className="size-8 object-contain"
                 />
               ) : null}
-              <CardTitle>{publicSectionTitle(item.slug, item.title)}</CardTitle>
-              <CardDescription>เปิดดูคำแนะนำฉบับเต็ม</CardDescription>
+              <CardTitle><SectionTitle slug={item.slug} fallback={item.title} /></CardTitle>
+              <CardDescription><Text message="เปิดดูคำแนะนำฉบับเต็ม" /></CardDescription>
               <CardAction>
                 <ArrowUpRightIcon aria-hidden="true" className="size-5 text-primary" />
               </CardAction>
@@ -325,12 +316,12 @@ function GuideNavigation({
           </Card>
         </Link>
       ))}
-    </nav>
+    </nav></Localized>
   ) : (
     <Card>
       <CardHeader>
-        <CardTitle>กำลังจัดทำเนื้อหา</CardTitle>
-        <CardDescription>กลับมาตรวจสอบอีกครั้งหลังผู้ดูแลเพิ่มข้อมูล</CardDescription>
+        <CardTitle><Text message="กำลังจัดทำเนื้อหา" /></CardTitle>
+        <CardDescription><Text message="กลับมาตรวจสอบอีกครั้งหลังผู้ดูแลเพิ่มข้อมูล" /></CardDescription>
       </CardHeader>
     </Card>
   );
@@ -352,10 +343,8 @@ function GuideSection({
   return extra ? <ExtraSection guide={guide} extra={extra} /> : null;
 }
 
-function metric(value: string | null, locale?: string) {
-  return value === null
-    ? null
-    : `${Number(value).toLocaleString(locale, { maximumFractionDigits: 2 })}%`;
+function metric(value: string | null) {
+  return value === null ? null : <MetricText value={value} />;
 }
 
 function lunarisItemUrl(
@@ -409,8 +398,7 @@ function WeaponSectionContent({
       <header className="relative z-10 flex items-center justify-center text-center">
         <div className="flex flex-col items-center gap-3">
           <p className="text-sm font-medium text-primary">
-            อาวุธที่แนะนำ
-          </p>
+            <Text message="อาวุธที่แนะนำ" /></p>
           <div className="flex items-center justify-center gap-3">
             <Image
               src="/icon/nav/Weapon.png"
@@ -425,8 +413,7 @@ function WeaponSectionContent({
               )}
             />
             <h1 className="whitespace-nowrap font-heading text-4xl font-semibold">
-              Weapons
-            </h1>
+              <Text message="Weapons" /></h1>
           </div>
           {note ? (
             <p className="max-w-3xl whitespace-pre-wrap text-muted-foreground">
@@ -438,14 +425,14 @@ function WeaponSectionContent({
       <WeaponDisplayModeProvider>
       <ConditionSwitcher
         label="เลือกเงื่อนไขอาวุธ"
-        labels={weaponGroups.map((group, index) => group.name || `Condition ${index + 1}`)}
+        labels={weaponGroups.map((group) => group.name || "")}
       >
       {weaponGroups.map((group, groupIndex, groups) => (
       <div key={group.id} className="relative z-10 flex flex-col gap-3">
         <div className="flex items-center justify-between gap-3">
           {groups.length > 1 || conditionNumber ? (
             <h2 className="font-heading text-2xl font-semibold">
-              {group.name || `Condition ${conditionNumber ?? groupIndex + 1}`}
+              <ConditionLabel name={group.name} index={conditionNumber ?? groupIndex + 1} />
             </h2>
           ) : <span />}
           {showExportActions ? (
@@ -473,7 +460,7 @@ function WeaponSectionContent({
                     : "md:grid-cols-[minmax(0,3fr)_minmax(0,1fr)]",
               )}
             >
-              <a
+              <Localized attributes={{ "aria-label": { message: "เปิดข้อมูลอาวุธ {name} บน Lunaris", params: { name: row.weapon.name } } }}><a
                 href={lunarisItemUrl("weapon", row.weapon.key)}
                 target="_blank"
                 rel="noreferrer"
@@ -510,7 +497,7 @@ function WeaponSectionContent({
                           : "text-base sm:text-lg",
                     )}
                   >
-                    {index + 1}. {row.weapon.name} R{row.refinement}
+                    {index + 1}. {row.weapon.name} <Text message="R" />{row.refinement}
                   </p>
                   {row.note ? (
                     <p
@@ -523,7 +510,7 @@ function WeaponSectionContent({
                     </p>
                   ) : null}
                 </div>
-              </a>
+              </a></Localized>
               <div
                 className={cn(
                   "flex items-center justify-around bg-white py-5 text-black",
@@ -557,8 +544,7 @@ function WeaponSectionContent({
                             : "text-sm sm:text-base",
                       )}
                     >
-                      ดาเมจทั้งทีม
-                    </p>
+                      <Text message="ดาเมจทั้งทีม" /></p>
                   </div>
                 ) : null}
                 {row.personalPercent ? (
@@ -588,8 +574,7 @@ function WeaponSectionContent({
                             : "text-sm sm:text-base",
                       )}
                     >
-                      ดาเมจส่วนตัว
-                    </p>
+                      <Text message="ดาเมจส่วนตัว" /></p>
                   </div>
                 ) : null}
               </div>
@@ -617,8 +602,8 @@ function ArtifactSection({ guide }: { guide: PublicGuide }) {
         <ArtifactImageExport
           fileName={`${guide.name}-Artifact.png`}
           hasNote={Boolean(guide.artifactProfile?.note)}
-          recommendedConditionLabels={(guide.artifactProfile?.recommendedConditions ?? []).map((group, index) => group.name || `Condition ${index + 1}`)}
-          targetConditionLabels={targetConditions.map((group, index) => group.name || `Condition ${index + 1}`)}
+          recommendedConditionLabels={(guide.artifactProfile?.recommendedConditions ?? []).map((group) => group.name || "")}
+          targetConditionLabels={targetConditions.map((group) => group.name || "")}
         >
           <ArtifactSectionContent guide={guide} exporting />
         </ArtifactImageExport>
@@ -640,31 +625,31 @@ function ArtifactSectionContent({
   const recommendedConditions = profile?.recommendedConditions ?? [];
   const recommendedCards = recommendedConditions.map((condition, conditionIndex) => (
     <div key={conditionIndex} data-artifact-export-section="best-stats" data-recommended-condition={conditionIndex} className="flex flex-col gap-5">
-      {exporting && recommendedConditions.length > 1 ? <p className="text-sm font-medium">{condition.name || exportText("condition", { index: conditionIndex + 1 })}</p> : null}
+      {exporting && recommendedConditions.length > 1 ? <p className="text-sm font-medium"><ConditionLabel name={condition.name ?? null} index={conditionIndex + 1} /></p> : null}
       {condition.note ? <p data-export-note className="whitespace-pre-wrap text-sm text-muted-foreground">{condition.note}</p> : null}
       {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">{exportText("mainStats", {}, exporting ? "en" : "th")}</CardTitle>
+            <CardTitle className="text-2xl"><ExportText message="mainStats" /></CardTitle>
           </CardHeader>
           <CardContent className="grid grid-cols-3 p-0">
             <ArtifactStat
               iconSrc="/icon/Icon_Sands_of_Eon.webp"
-              label={exportText("sands", {}, exporting ? "en" : "th")}
+              label={<ExportText message="sands" />}
               values={condition.sands}
               exporting={exporting}
               elementIconUrls={guide.elementIconUrls}
             />
             <ArtifactStat
               iconSrc="/icon/Icon_Goblet_of_Eonothem.webp"
-              label={exportText("goblet", {}, exporting ? "en" : "th")}
+              label={<ExportText message="goblet" />}
               values={condition.goblet}
               exporting={exporting}
               elementIconUrls={guide.elementIconUrls}
             />
             <ArtifactStat
               iconSrc="/icon/Icon_Circlet_of_Logos.webp"
-              label={exportText("circlet", {}, exporting ? "en" : "th")}
+              label={<ExportText message="circlet" />}
               values={condition.circlet}
               exporting={exporting}
               elementIconUrls={guide.elementIconUrls}
@@ -675,7 +660,7 @@ function ArtifactSectionContent({
       {condition.substats.length ? (
         <Card data-artifact-export-section="best-stats" className="artifact-export-substats">
           <CardContent className="flex flex-col items-center gap-2 py-5 text-center text-sm">
-            <strong>{exportText("substats", {}, exporting ? "en" : "th")}</strong>
+            <strong><ExportText message="substats" /></strong>
             <div className="flex flex-col items-center gap-1">
               {condition.substats.map((stat, index) => (
                 <ArtifactStatValue
@@ -710,7 +695,7 @@ function ArtifactSectionContent({
       <header className="relative z-10 flex items-center justify-center text-center">
         <div className="flex flex-col items-center gap-3">
           <p className="text-sm font-medium text-primary">
-            {exportText("artifactRecommendation", {}, exporting ? "en" : "th")}
+            <ExportText message="artifactRecommendation" />
           </p>
           <div className="flex items-center justify-center gap-3">
             <Image
@@ -726,7 +711,7 @@ function ArtifactSectionContent({
               )}
             />
             <h1 className="whitespace-nowrap font-heading text-4xl font-semibold">
-              {exportText("artifactTitle", {}, exporting ? "en" : "th")}
+              <ExportText message="artifactTitle" />
             </h1>
           </div>
           {action}
@@ -741,7 +726,7 @@ function ArtifactSectionContent({
         {" "}
         <div className="artifact-export-left flex flex-col gap-5">
           {exporting ? recommendedCards : (
-            <ConditionSwitcher label="เลือกเงื่อนไขค่าสถานะแนะนำ" labels={recommendedConditions.map((condition, index) => condition.name || `Condition ${index + 1}`)}>
+            <ConditionSwitcher label="เลือกเงื่อนไขค่าสถานะแนะนำ" labels={recommendedConditions.map((condition) => condition.name || "")}>
               {recommendedCards}
             </ConditionSwitcher>
           )}
@@ -751,9 +736,9 @@ function ArtifactSectionContent({
                 <CardHeader>
                   <CardTitle>
                     {group.name === "Late Game"
-                      ? exportText("lateGame", {}, exporting ? "en" : "th")
+                      ? <ExportText message="lateGame" />
                       : group.name === "Early Game"
-                        ? exportText("earlyGame", {}, exporting ? "en" : "th")
+                        ? <ExportText message="earlyGame" />
                         : group.name}
                   </CardTitle>
                 </CardHeader>
@@ -787,7 +772,7 @@ function ArtifactSectionContent({
                         ) : null}
                       </div>
                       <p className="text-2xl font-semibold text-primary">
-                        {Number(row.percent) === 0 ? "-%" : metric(row.percent, exporting ? "en-US" : undefined)}
+                        {Number(row.percent) === 0 ? "-%" : metric(row.percent)}
                       </p>
                     </div>
                   ))}
@@ -806,7 +791,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">{exportText("minimumStats", {}, exporting ? "en" : "th")}</p>
+                    <p className="mb-2 text-sm font-medium"><ExportText message="minimumStats" /></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) => (
@@ -830,7 +815,7 @@ function ArtifactSectionContent({
                             ) : null}
                             <span>
                               {statLabel(
-                                normalizeTargetStat(target.stat) ?? target.stat, exporting ? "en" : "th",
+                                normalizeTargetStat(target.stat) ?? target.stat,
                               )}
                             </span>
                           </span>
@@ -841,10 +826,10 @@ function ArtifactSectionContent({
                   </div>
                     ))
                   ) : (
-                    <ConditionSwitcher label="เลือกเงื่อนไขค่าสถานะเป้าหมาย" labels={profile.targetConditions.filter((group) => group.rows.length).map((group, index) => group.name || `Condition ${index + 1}`)}>
+                    <ConditionSwitcher label="เลือกเงื่อนไขค่าสถานะเป้าหมาย" labels={profile.targetConditions.filter((group) => group.rows.length).map((group) => group.name || "")}>
                       {profile.targetConditions.filter((group) => group.rows.length).map((group, groupIndex) => (
                         <div key={groupIndex}>
-                          <p className="mb-2 text-sm font-medium">{exportText("minimumStats", {}, exporting ? "en" : "th")}</p>
+                          <p className="mb-2 text-sm font-medium"><ExportText message="minimumStats" /></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) => (
@@ -865,7 +850,7 @@ function ArtifactSectionContent({
                 {profile.talents.length ? (
                   <div data-artifact-export-section="talents">
                     <p className="mb-2 text-sm font-medium">
-                      {exportText("talents", {}, exporting ? "en" : "th")}
+                      <ExportText message="talents" />
                     </p>
                     <div
                       className={cn(
@@ -915,7 +900,7 @@ function ArtifactSectionContent({
                                 </div>
                                 <Badge variant="secondary">
                                   {talent.level
-                                    ? exportText("level", { level: talent.level }, exporting ? "en" : "th")
+                                    ? <ExportText message="level" params={{ level: talent.level }} />
                                     : "-"}
                                 </Badge>
                                 <p
@@ -932,11 +917,11 @@ function ArtifactSectionContent({
                                     exporting ? "text-xs" : "text-[11px] sm:text-xs",
                                   )}
                                 >
-                                  {exportText(talent.type === "E" ? "skill" : talent.type === "Q" ? "burst" : "normalAttack", {}, exporting ? "en" : "th")}
+                                  <ExportText message={talent.type === "E" ? "skill" : talent.type === "Q" ? "burst" : "normalAttack"} />
                                 </p>
                               </div>
                               {index < talents.length - 1 ? (
-                                <span
+                                <Localized attributes={{ "aria-label": talent.relationToNext === "gte" ? "มากกว่าหรือเท่ากับ" : talent.relationToNext === "eq" ? "เท่ากับ" : "มากกว่า" }}><span
                                   className={cn(
                                     "font-semibold",
                                     exporting
@@ -952,7 +937,7 @@ function ArtifactSectionContent({
                                   }
                                 >
                                   {talentRelationSymbol(talent.relationToNext)}
-                                </span>
+                                </span></Localized>
                               ) : null}
                             </div>
                           );
@@ -963,7 +948,7 @@ function ArtifactSectionContent({
                 ) : null}
                 {profile.note ? (
                   <div data-export-note data-artifact-export-section="note" className="pt-3">
-                    <p className="mb-2 text-sm font-medium">{exportText("note", {}, exporting ? "en" : "th")}</p>
+                    <p className="mb-2 text-sm font-medium"><ExportText message="note" /></p>
                     <p className="text-sm leading-6 text-muted-foreground">
                       {profile.note}
                     </p>
@@ -978,8 +963,8 @@ function ArtifactSectionContent({
   );
 }
 
-function statLabel(value: string, locale: Locale = "th"): string {
-  return exportStatLabel(value, locale);
+function statLabel(value: string) {
+  return <StatText value={value} />;
 }
 
 function ArtifactStat({
@@ -990,7 +975,7 @@ function ArtifactStat({
   elementIconUrls,
 }: {
   iconSrc: string;
-  label: string;
+  label: ReactNode;
   values: string[];
   exporting?: boolean;
   elementIconUrls: Record<string, string>;
@@ -1080,7 +1065,7 @@ function ArtifactStatValue({
           className="size-5 shrink-0 object-contain brightness-0 invert"
         />
       ) : null}
-      <span className="break-words">{statLabel(value, exporting ? "en" : "th")}</span>
+      <span className="break-words">{statLabel(value)}</span>
     </span>
   );
 }
@@ -1093,8 +1078,7 @@ function ConstellationSection({ guide }: { guide: PublicGuide }) {
     <section className="flex flex-col gap-6">
       <header className="flex flex-col items-center gap-3 text-center">
         <p className="text-sm font-medium text-primary">
-          กลุ่มดาวที่แนะนำ
-        </p>
+          <Text message="กลุ่มดาวที่แนะนำ" /></p>
         <div className="flex items-center justify-center gap-3">
           <Image
             src="/icon/nav/Constellations.webp"
@@ -1105,8 +1089,7 @@ function ConstellationSection({ guide }: { guide: PublicGuide }) {
             className="size-14 shrink-0 object-contain"
           />
           <h1 className="whitespace-nowrap font-heading text-4xl font-semibold">
-            Constellations
-          </h1>
+            <Text message="Constellations" /></h1>
         </div>
         {note ? (
           <p className="max-w-3xl whitespace-pre-wrap text-muted-foreground">
@@ -1114,7 +1097,7 @@ function ConstellationSection({ guide }: { guide: PublicGuide }) {
           </p>
         ) : null}
       </header>
-      <ConditionSwitcher label="เลือกเงื่อนไขกลุ่มดาว" labels={guide.constellationGroups.filter((group) => group.rows.length > 0).map((group, index) => group.name || `Condition ${index + 1}`)}>
+      <ConditionSwitcher label="เลือกเงื่อนไขกลุ่มดาว" labels={guide.constellationGroups.filter((group) => group.rows.length > 0).map((group) => group.name || "")}>
       {guide.constellationGroups.filter((group) => group.rows.length > 0).map((group, groupIndex, groups) => (
         <div key={group.id} className="flex flex-col gap-4">
           <div>
@@ -1130,7 +1113,7 @@ function ConstellationSection({ guide }: { guide: PublicGuide }) {
               />
             </GuideImageExport>
           </div>
-          {groups.length > 1 ? <h2 className="font-heading text-2xl font-semibold">{group.name || `Condition ${groupIndex + 1}`}</h2> : null}
+          {groups.length > 1 ? <h2 className="font-heading text-2xl font-semibold"><ConditionLabel name={group.name} index={groupIndex + 1} /></h2> : null}
           {group.note ? <p className="whitespace-pre-wrap">{group.note}</p> : null}
           <div className="grid gap-4 md:grid-cols-2">
             {group.rows.map((row) => (
@@ -1155,7 +1138,7 @@ function ConstellationSection({ guide }: { guide: PublicGuide }) {
                       {metric(row.cumulativePercent)}
                     </CardTitle>
                     <CardDescription className="text-base font-medium text-white">
-                      C{row.level} · {row.name}
+                      <Text message="C" />{row.level} · {row.name}
                     </CardDescription>
                   </div>
                 </CardHeader>
@@ -1176,8 +1159,8 @@ function TeamSection({ guide }: { guide: PublicGuide }) {
   return (
     <section className="flex flex-col gap-6">
       <header className="text-center">
-        <p className="text-sm font-medium text-primary">คำนวณความเสียหาย</p>
-        <h1 className="font-heading text-4xl font-semibold">คำนวณทีม</h1>
+        <p className="text-sm font-medium text-primary"><Text message="คำนวณความเสียหาย" /></p>
+        <h1 className="font-heading text-4xl font-semibold"><Text message="คำนวณทีม" /></h1>
       </header>
       <TeamSearch groups={guide.teamGroups} />
     </section>
@@ -1223,7 +1206,7 @@ function ExtraSectionContent({
         />
       ) : null}
       <header className="relative z-10 flex flex-col items-center gap-3 text-center">
-        <p className="text-sm font-medium text-primary">{exportText("extraGuide", {}, exporting ? "en" : "th")}</p>
+        <p className="text-sm font-medium text-primary"><ExportText message="extraGuide" /></p>
         <h1 className="font-heading text-4xl font-semibold">{extra.title}</h1>
         {action}
       </header>
@@ -1258,7 +1241,7 @@ function ExtraSectionContent({
             {row.catalogItems.length ? (
               <CardContent className="grid grid-cols-2 gap-2 pt-5">
                 {row.catalogItems.map((item) => (
-                  <a
+                  <Localized key={`${item.kind}:${item.key}`} attributes={{ "aria-label": { message: "เปิดข้อมูล {name} บน Lunaris", params: { name: item.name } } }}><a
                     key={`${item.kind}:${item.key}`}
                     href={lunarisItemUrl(item.kind, item.key)}
                     target="_blank"
@@ -1274,10 +1257,10 @@ function ExtraSectionContent({
                     ) : null}
                     <div className="min-w-0">
                       <p className="truncate text-sm font-medium">{item.name}</p>
-                      {!item.available ? <Badge variant="secondary">{exportText("missingItem", {}, exporting ? "en" : "th")}</Badge> : null}
+                      {!item.available ? <Badge variant="secondary"><ExportText message="missingItem" /></Badge> : null}
                     </div>
                     <ArrowUpRightIcon aria-hidden="true" className="ml-auto shrink-0" />
-                  </a>
+                  </a></Localized>
                 ))}
               </CardContent>
             ) : null}
@@ -1286,7 +1269,7 @@ function ExtraSectionContent({
               <CardDescription>
                 <RichTextContent html={normalizeExtraRichText(row.body, row.highlights)} />
               </CardDescription>
-              {row.percent ? <Badge>{metric(row.percent, exporting ? "en-US" : undefined)}</Badge> : null}
+              {row.percent ? <Badge>{metric(row.percent)}</Badge> : null}
             </CardHeader>
             {row.sheet ? (
               <CardContent
diff --git a/components/public/team-search.tsx b/components/public/team-search.tsx
index 1eee6e1..80bf8c7 100644
--- a/components/public/team-search.tsx
+++ b/components/public/team-search.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 
+import { useTranslation } from "@/components/i18n/locale-provider";
 import Image from "next/image";
 import Link from "next/link";
 import { ArrowUpRightIcon, SearchIcon, XIcon } from "lucide-react";
@@ -25,7 +26,6 @@ import {
   type DpsOrder,
   type TeamSearchTarget,
 } from "@/lib/guides/team-search";
-import { exportText } from "@/lib/guides/export-text";
 import { cn } from "@/lib/utils";
 
 type Team = PublicGuide["teams"][number];
@@ -49,6 +49,7 @@ function ArtifactHalf({
   linked: boolean;
   sizes: string;
 }) {
+  const { t } = useTranslation();
   const content = (
     <span className="relative block size-full">
       <Image
@@ -74,7 +75,7 @@ function ArtifactHalf({
       href={`https://lunaris.moe/artifact/${encodeURIComponent(artifact.key)}`}
       target="_blank"
       rel="noreferrer"
-      aria-label={`เปิดข้อมูลอาร์ติแฟกต์ ${artifact.name} บน Lunaris`}
+      aria-label={t("เปิดข้อมูลอาร์ติแฟกต์ {name} บน Lunaris", { name: artifact.name })}
       className={className}
     >
       {content}
@@ -99,6 +100,7 @@ export function TeamArtifactIcon({
   className?: string;
   sizes: string;
 }) {
+  const { t } = useTranslation();
   const primary = first ?? second;
   const secondary = first ? second : null;
 
@@ -135,7 +137,7 @@ export function TeamArtifactIcon({
         href={`https://lunaris.moe/artifact/${encodeURIComponent(primary.key)}`}
         target="_blank"
         rel="noreferrer"
-        aria-label={`เปิดข้อมูลอาร์ติแฟกต์ ${primary.name} บน Lunaris`}
+        aria-label={t("เปิดข้อมูลอาร์ติแฟกต์ {name} บน Lunaris", { name: primary.name })}
         className={artifactClassName}
       >
         {content}
@@ -163,13 +165,14 @@ export function TeamArtifactIcon({
 }
 
 function TeamExportImage({ team }: { team: Team }) {
+  const { t, e, locale } = useTranslation();
   const total = team.members.reduce((sum, member) => sum + Number(member.damage), 0);
   const seconds = Number(team.rotationSeconds);
   return (
     <div className="flex min-h-337.5 w-270 flex-col bg-[#05060a] p-[48px_52px] font-heading text-[white]">
       <header className="flex flex-col items-center text-center">
         <h2 className="text-[64px] leading-tight font-bold">{team.title}</h2>
-        <p className="text-[32px] text-[#b9b9c2]">{exportText("rotation", { seconds: seconds.toLocaleString("en-US", { maximumFractionDigits: 2 }) })}</p>
+        <p className="text-[32px] text-[#b9b9c2]">{e("rotation", { seconds: seconds.toLocaleString(locale, { maximumFractionDigits: 2 }) })}</p>
       </header>
       <div className="mt-5 flex flex-col gap-4">
         {team.members.map((member) => {
@@ -194,9 +197,9 @@ function TeamExportImage({ team }: { team: Team }) {
                 <div className="flex items-center justify-between gap-4">
                   <span className="flex min-w-0 items-baseline gap-3 text-[36px] font-semibold">
                     <span className="truncate">{member.character.name}</span>
-                    <span className="shrink-0 text-[28px] text-[#f0c95f]">C{member.constellation}R{member.refinement}</span>
+                    <span className="shrink-0 text-[28px] text-[#f0c95f]">{t("C")}{" "}{member.constellation}{t("R")}{" "}{member.refinement}</span>
                   </span>
-                  <span className="shrink-0 text-[36px]">{damage.toLocaleString("en-US")}</span>
+                  <span className="shrink-0 text-[36px]">{damage.toLocaleString(locale)}</span>
                 </div>
                 <div className="flex items-center gap-5"><div className="h-11 flex-1 overflow-hidden rounded-xl bg-[#272730]"><div className="h-full rounded-xl bg-linear-to-r from-[#b7791f] to-[#f0b72f]" style={{ width: `${Math.max(2, Math.min(100, percent))}%` }} /></div><span className="w-28 text-right text-[34px] font-bold">{percent.toFixed(1)}%</span></div>
               </div>
@@ -205,8 +208,8 @@ function TeamExportImage({ team }: { team: Team }) {
         })}
       </div>
       <div className="my-3 flex flex-1 items-center justify-center rounded-2xl bg-[#272730] p-4 text-center text-[28px] leading-[1.4]"><p className="whitespace-pre-wrap">{team.combo}</p></div>
-      <div className="flex shrink-0 justify-center border-t-2 border-[#34343d] pt-6 text-[64px] font-bold text-[#f0c95f]">DPS: {seconds > 0 ? (total / seconds).toLocaleString("en-US", { maximumFractionDigits: 0 }) : "0"}</div>
-      <div className="mt-5 flex shrink-0 justify-center text-[40px] text-[#74747f]">{exportText("teamCredit")}</div>
+      <div className="flex shrink-0 justify-center border-t-2 border-[#34343d] pt-6 text-[64px] font-bold text-[#f0c95f]">{t("DPS:")}{" "}{seconds > 0 ? (total / seconds).toLocaleString(locale, { maximumFractionDigits: 0 }) : "0"}</div>
+      <div className="mt-5 flex shrink-0 justify-center text-[40px] text-[#74747f]">{e("teamCredit")}</div>
     </div>
   );
 }
@@ -220,6 +223,7 @@ function TeamCard({
   action?: ReactNode;
   exporting?: boolean;
 }) {
+  const { t, locale } = useTranslation();
   const total = team.members.reduce(
     (sum, member) => sum + Number(member.damage),
     0,
@@ -230,7 +234,7 @@ function TeamCard({
     <Card>
       <CardHeader>
         <CardTitle>{team.title}</CardTitle>
-        <CardDescription>โรเทชั่น {seconds} วิ</CardDescription>
+        <CardDescription>{t("โรเทชั่น")}{" "}{seconds} {t("วิ")}</CardDescription>
         {action ? <CardAction>{action}</CardAction> : null}
       </CardHeader>
       <CardContent className="flex flex-col gap-4">
@@ -297,7 +301,7 @@ function TeamCard({
                       target="_blank"
                       rel="noreferrer"
                       tabIndex={exporting ? -1 : undefined}
-                      aria-label={`เปิดข้อมูลอาวุธ ${member.weapon.name} บน Lunaris`}
+                      aria-label={t("เปิดข้อมูลอาวุธ {name} บน Lunaris", { name: member.weapon.name })}
                       className={cn(
                         "relative aspect-square scale-110 overflow-hidden rounded-md bg-muted outline-none sm:col-span-2",
                         rarityGradientClass(member.weapon.rarity),
@@ -329,14 +333,14 @@ function TeamCard({
                 </div>
               </div>
               <div className="mt-2 flex items-center justify-center gap-1">
-                <Badge variant="secondary">C{member.constellation}</Badge>
-                <Badge variant="secondary">R{member.refinement}</Badge>
+                <Badge variant="secondary">{t("C")}{" "}{member.constellation}</Badge>
+                <Badge variant="secondary">{t("R")}{" "}{member.refinement}</Badge>
               </div>
               <p className="mt-1 truncate text-sm font-medium">
                 {member.character.name}
               </p>
               <p className="text-sm font-semibold">
-                {Number(member.damage).toLocaleString(undefined, {
+                {Number(member.damage).toLocaleString(locale, {
                   maximumFractionDigits: 2,
                 })}
               </p>
@@ -352,14 +356,14 @@ function TeamCard({
         <Separator />
         <div className="flex items-end justify-between">
           <div>
-            <p className="text-sm text-muted-foreground">ดาเมจรวม</p>
-            <p className="font-semibold">{total.toLocaleString()}</p>
+            <p className="text-sm text-muted-foreground">{t("ดาเมจรวม")}</p>
+            <p className="font-semibold">{total.toLocaleString(locale)}</p>
           </div>
           <div className="text-right">
-            <p className="text-sm text-muted-foreground">DPS</p>
+            <p className="text-sm text-muted-foreground">{t("DPS")}</p>
             <p className="text-3xl font-semibold text-primary">
               {seconds > 0
-                ? (total / seconds).toLocaleString(undefined, {
+                ? (total / seconds).toLocaleString(locale, {
                     maximumFractionDigits: 0,
                   })
                 : "0"}
@@ -375,6 +379,7 @@ function TeamCard({
 }
 
 export function TeamSearch({ groups }: { groups: PublicGuide["teamGroups"] }) {
+  const { t, e } = useTranslation();
   const [activeCondition, setActiveCondition] = useState("0");
   const activeGroup = groups[Number(activeCondition)] ?? groups[0];
   const teams = useMemo(() => activeGroup?.teams ?? [], [activeGroup]);
@@ -397,11 +402,11 @@ export function TeamSearch({ groups }: { groups: PublicGuide["teamGroups"] }) {
     <div className="flex min-w-0 flex-col gap-4">
 
       {groups.length > 1 ? (
-        <ScrollableNav ariaLabel="เลือกเงื่อนไขทีม" className="w-full min-w-0">
-          <ToggleGroup aria-label="เลือกเงื่อนไขทีม" variant="outline" value={[activeCondition]} onValueChange={(values) => {
+        <ScrollableNav ariaLabel={t("เลือกเงื่อนไขทีม")} className="w-full min-w-0">
+          <ToggleGroup aria-label={t("เลือกเงื่อนไขทีม")} variant="outline" value={[activeCondition]} onValueChange={(values) => {
             if (values[0]) setActiveCondition(values[0]);
           }}>
-            {groups.map((group, index) => <ToggleGroupItem key={group.id} value={String(index)} className="aria-pressed:bg-primary aria-pressed:text-primary-foreground">{group.name || `Condition ${index + 1}`}</ToggleGroupItem>)}
+            {groups.map((group, index) => <ToggleGroupItem key={group.id} value={String(index)} className="aria-pressed:bg-primary aria-pressed:text-primary-foreground">{group.name || e("condition", { index: index + 1 })}</ToggleGroupItem>)}
           </ToggleGroup>
         </ScrollableNav>
       ) : null}
@@ -409,15 +414,15 @@ export function TeamSearch({ groups }: { groups: PublicGuide["teamGroups"] }) {
       <div className="relative">
         <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="ค้นหาทีม ตัวละคร อาวุธ หรืออาร์ติแฟกต์"
+          aria-label={t("ค้นหาทีม ตัวละคร อาวุธ หรืออาร์ติแฟกต์")}
           className="pl-9"
-          placeholder="ค้นหาทีม ตัวละคร อาวุธ หรืออาร์ติแฟกต์"
+          placeholder={t("ค้นหาทีม ตัวละคร อาวุธ หรืออาร์ติแฟกต์")}
           value={query}
           onValueChange={setQuery}
         />
       </div>
       <ToggleGroup
-        aria-label="เลือกประเภทข้อมูลที่ต้องการค้นหา"
+        aria-label={t("เลือกประเภทข้อมูลที่ต้องการค้นหา")}
         className="max-w-full flex-wrap justify-start"
         variant="outline"
         size="sm"
@@ -427,15 +432,15 @@ export function TeamSearch({ groups }: { groups: PublicGuide["teamGroups"] }) {
           if (target) setSearchTarget(target);
         }}
       >
-        <ToggleGroupItem value="all">ทั้งหมด</ToggleGroupItem>
-        <ToggleGroupItem value="team">ชื่อทีม</ToggleGroupItem>
-        <ToggleGroupItem value="character">ตัวละคร</ToggleGroupItem>
-        <ToggleGroupItem value="weapon">อาวุธ</ToggleGroupItem>
-        <ToggleGroupItem value="artifact">อาร์ติแฟกต์</ToggleGroupItem>
+        <ToggleGroupItem value="all">{t("ทั้งหมด")}</ToggleGroupItem>
+        <ToggleGroupItem value="team">{t("ชื่อทีม")}</ToggleGroupItem>
+        <ToggleGroupItem value="character">{t("ตัวละคร")}</ToggleGroupItem>
+        <ToggleGroupItem value="weapon">{t("อาวุธ")}</ToggleGroupItem>
+        <ToggleGroupItem value="artifact">{t("อาร์ติแฟกต์")}</ToggleGroupItem>
       </ToggleGroup>
       <div className="flex items-center gap-2">
         <ToggleGroup
-          aria-label="เรียงทีมตาม DPS"
+          aria-label={t("เรียงทีมตาม DPS")}
           variant="outline"
           size="sm"
           value={dpsOrder ? [dpsOrder] : []}
@@ -444,8 +449,8 @@ export function TeamSearch({ groups }: { groups: PublicGuide["teamGroups"] }) {
             if (order) setDpsOrder(order);
           }}
         >
-          <ToggleGroupItem value="best">Best DPS</ToggleGroupItem>
-          <ToggleGroupItem value="worst">Worst DPS</ToggleGroupItem>
+          <ToggleGroupItem value="best">{t("Best DPS")}</ToggleGroupItem>
+          <ToggleGroupItem value="worst">{t("Worst DPS")}</ToggleGroupItem>
         </ToggleGroup>
         <Button
           variant="ghost"
@@ -454,8 +459,7 @@ export function TeamSearch({ groups }: { groups: PublicGuide["teamGroups"] }) {
           onClick={() => setDpsOrder(null)}
         >
           <XIcon data-icon="inline-start" />
-          Clear
-        </Button>
+          {t("Clear")}</Button>
       </div>
       {filteredTeams.length ? (
         <div className="grid gap-5 xl:grid-cols-2">
@@ -474,8 +478,7 @@ export function TeamSearch({ groups }: { groups: PublicGuide["teamGroups"] }) {
       ) : (
         <Card>
           <CardContent className="py-8 text-center text-sm text-muted-foreground">
-            ไม่พบทีมที่ตรงกับคำค้นหา
-          </CardContent>
+            {t("ไม่พบทีมที่ตรงกับคำค้นหา")}</CardContent>
         </Card>
       )}
     </div>
diff --git a/components/public/term-detail.tsx b/components/public/term-detail.tsx
index 66f5121..21c0ee7 100644
--- a/components/public/term-detail.tsx
+++ b/components/public/term-detail.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { useTranslation } from "@/components/i18n/locale-provider";
 import { InfoIcon } from "lucide-react";
 import { useSyncExternalStore } from "react";
 
@@ -45,12 +46,13 @@ export function TermDetail({
   label: string;
   detail: string;
 }) {
+  const { t } = useTranslation();
   const finePointer = useSyncExternalStore(subscribe, getSnapshot, () => false);
 
   if (finePointer) {
     return (
       <HoverCard>
-        <HoverCardTrigger aria-label={`ดูรายละเอียด ${label}`}>
+        <HoverCardTrigger aria-label={t("ดูรายละเอียด {label}", { label: label })}>
           <Trigger label={label} />
         </HoverCardTrigger>
         <HoverCardContent align="start">
@@ -63,7 +65,7 @@ export function TermDetail({
 
   return (
     <Drawer showSwipeHandle>
-      <DrawerTrigger aria-label={`เปิดรายละเอียด ${label}`}>
+      <DrawerTrigger aria-label={t("เปิดรายละเอียด {label}", { label: label })}>
         <Trigger label={label} />
       </DrawerTrigger>
       <DrawerContent>
diff --git a/components/public/visitor-presence.tsx b/components/public/visitor-presence.tsx
index 83441e3..8bd9144 100644
--- a/components/public/visitor-presence.tsx
+++ b/components/public/visitor-presence.tsx
@@ -1,29 +1,31 @@
 "use client";
 
+import { useTranslation } from "@/components/i18n/locale-provider";
 import { UsersIcon } from "lucide-react";
 
 import { Badge } from "@/components/ui/badge";
 import { useVisitorPresence } from "@/hooks/use-presence";
 
 export function VisitorPresence({ guideId }: { guideId?: string }) {
+  const { t } = useTranslation();
   const counts = useVisitorPresence(guideId ?? null);
   return (
     <div className="flex items-center gap-1" aria-live="polite">
       <Badge
         variant="secondary"
         className=" tabular-nums"
-        title="ผู้เข้าชมทั้งหมดที่กำลังออนไลน์"
+        title={t("ผู้เข้าชมทั้งหมดที่กำลังออนไลน์")}
       >
         <UsersIcon data-icon="inline-start" />
-        ทั้งหมด {counts?.global ?? "-"}
+        {t("ทั้งหมด")}{" "}{counts?.global ?? "-"}
       </Badge>
       {guideId ? (
         <Badge
           variant="outline"
           className=" tabular-nums"
-          title="ผู้เข้าชม Guide นี้ที่กำลังออนไลน์"
+          title={t("ผู้เข้าชม Guide นี้ที่กำลังออนไลน์")}
         >
-          Guide นี้ {counts?.guide ?? "-"}
+          {t("Guide นี้")}{" "}{counts?.guide ?? "-"}
         </Badge>
       ) : null}
     </div>
diff --git a/components/public/weapon-chart.tsx b/components/public/weapon-chart.tsx
index 735ba64..729af30 100644
--- a/components/public/weapon-chart.tsx
+++ b/components/public/weapon-chart.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { useTranslation } from "@/components/i18n/locale-provider";
 import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from "recharts";
 
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
@@ -13,7 +14,7 @@ import {
 } from "@/components/ui/chart";
 import type { PublicGuide } from "@/lib/guides/queries";
 
-const chartConfig = {
+const baseChartConfig = {
   overall: { label: "Overall · ดาเมจทั้งทีม", color: "var(--chart-1)" },
   personal: { label: "Personal · ดาเมจส่วนตัว", color: "var(--chart-2)" },
 } satisfies ChartConfig;
@@ -26,6 +27,11 @@ function percentage(value: string | null) {
 }
 
 export function WeaponChart({ rows }: { rows: PublicGuide["weaponGroups"][number]["rows"] }) {
+  const { t } = useTranslation();
+  const chartConfig = {
+    overall: { ...baseChartConfig.overall, label: t(baseChartConfig.overall.label) },
+    personal: { ...baseChartConfig.personal, label: t(baseChartConfig.personal.label) },
+  };
   const data = rows.map((row, index) => ({
     name: `${index + 1}. ${row.weapon.name} R${row.refinement}`,
     imageUrl: row.weapon.imageUrl,
@@ -41,8 +47,8 @@ export function WeaponChart({ rows }: { rows: PublicGuide["weaponGroups"][number
   return (
     <Card className="min-w-0" size={singleMetric ? "sm" : "default"}>
       <CardHeader>
-        <CardTitle>เปรียบเทียบดาเมจอาวุธ</CardTitle>
-        <CardDescription>เปอร์เซ็นต์ดาเมจของอาวุธทั้งหมดใน Condition นี้</CardDescription>
+        <CardTitle>{t("เปรียบเทียบดาเมจอาวุธ")}</CardTitle>
+        <CardDescription>{t("เปอร์เซ็นต์ดาเมจของอาวุธทั้งหมดใน Condition นี้")}</CardDescription>
       </CardHeader>
       <CardContent className="min-w-0">
           <ChartContainer
@@ -51,7 +57,7 @@ export function WeaponChart({ rows }: { rows: PublicGuide["weaponGroups"][number
             style={{
               height: singleMetric ? 300 : 400,
             }}
-            aria-label="กราฟเปรียบเทียบเปอร์เซ็นต์ดาเมจอาวุธ"
+            aria-label={t("กราฟเปรียบเทียบเปอร์เซ็นต์ดาเมจอาวุธ")}
           >
             <BarChart accessibilityLayer data={data} margin={{ right: 16 }}>
               <CartesianGrid vertical={false} />
diff --git a/components/public/weapon-display-mode.tsx b/components/public/weapon-display-mode.tsx
index 9330023..1a4c22d 100644
--- a/components/public/weapon-display-mode.tsx
+++ b/components/public/weapon-display-mode.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { useTranslation } from "@/components/i18n/locale-provider";
 import { createContext, useContext, useState, type ReactNode } from "react";
 
 import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
@@ -28,6 +29,7 @@ export function WeaponDisplayMode({
   chart: ReactNode;
   exporting?: boolean;
 }) {
+  const { t } = useTranslation();
   const context = useContext(WeaponModeContext);
 
   if (!context) throw new Error("WeaponDisplayMode requires WeaponDisplayModeProvider");
@@ -38,15 +40,15 @@ export function WeaponDisplayMode({
   return (
     <div className="flex min-w-0 flex-col gap-3">
       <ToggleGroup
-        aria-label="Weapon display mode"
+        aria-label={t("Weapon display mode")}
         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">{t("List")}</ToggleGroupItem>
+        <ToggleGroupItem value="chart">{t("Chart")}</ToggleGroupItem>
       </ToggleGroup>
       {mode === "chart" ? chart : children}
     </div>
diff --git a/components/public/weapon-image-export.tsx b/components/public/weapon-image-export.tsx
index efb389f..0fae5c6 100644
--- a/components/public/weapon-image-export.tsx
+++ b/components/public/weapon-image-export.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { useTranslation } from "@/components/i18n/locale-provider";
 import Image from "next/image";
 import { DownloadIcon } from "lucide-react";
 
@@ -14,44 +15,45 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
-import { exportText } from "@/lib/guides/export-text";
 import type { PublicGuide } from "@/lib/guides/queries";
 
 type WeaponGroup = PublicGuide["weaponGroups"][number];
 type DamageMetric = "overallPercent" | "personalPercent";
 
-function formattedPercent(value: string | null): string {
+function formattedPercent(value: string | null, locale: string): string {
   if (value === null) return "-%";
   const numeric = Number(value);
   if (numeric === 0) return "-%";
-  return `${numeric.toLocaleString("en-US", { maximumFractionDigits: 2 })}%`;
+  return `${numeric.toLocaleString(locale, { maximumFractionDigits: 2 })}%`;
 }
 
 function WeaponComparisonImage({
   guide,
   group,
   metric,
-  conditionLabel,
+  conditionIndex,
 }: {
   guide: PublicGuide;
   group: WeaponGroup;
   metric: DamageMetric;
-  conditionLabel: string;
+  conditionIndex: number;
 }) {
+  const { e, locale } = useTranslation();
+  const conditionLabel = group.name || e("condition", { index: conditionIndex + 1 });
   const values = group.rows.map((row) => Number(row[metric]) || 0);
   const maximum = Math.max(100, ...values);
 
   return (
     <div className="relative isolate w-300 overflow-hidden bg-[#070b20] px-14 pt-10 pb-12 font-heading text-white">
       <GuideExportBranding backgroundUrl={guide.character.splashImageUrl ?? guide.coverUrl} />
-      <header className="relative z-10 flex flex-col items-center px-48 text-center drop-shadow-[0_4px_3px_rgba(0,0,0,0.9)]">
-        <h2 className="max-w-full text-5xl leading-tight font-bold text-balance">
-          {exportText("weaponTitle", { name: guide.character.name })}
+      <header className="relative z-10 flex flex-col items-center px-36 text-center drop-shadow-[0_4px_3px_rgba(0,0,0,0.9)]">
+        <h2 className="max-w-full truncate text-4xl leading-tight font-bold">
+          {e("weaponTitle", { name: guide.character.name })}
         </h2>
-        <p className="mt-1 text-4xl font-bold text-white">
-          {exportText(metric === "overallPercent" ? "overallDamage" : "personalDamage")}
+        <p className="mt-1 text-3xl font-bold text-white">
+          {e(metric === "overallPercent" ? "overallDamage" : "personalDamage")}
         </p>
-        <p className="mt-2 text-2xl font-semibold">{conditionLabel}</p>
+        <p className="mt-2 max-w-full truncate text-xl font-semibold">{conditionLabel}</p>
       </header>
 
       <div className="relative z-10 mt-9 flex flex-col gap-3">
@@ -76,15 +78,16 @@ function WeaponComparisonImage({
               </div>
               <div className="flex min-w-0 items-center">
                 <div
-                  className="flex min-h-16 shrink-0 items-center rounded-r-xl bg-white px-5 text-[#15121a]"
-                  style={{ width: `${width}%` }}
+                  className="flex min-h-16 min-w-0 shrink-0 items-center gap-2 rounded-r-xl bg-white px-3 text-[#15121a]"
+                  style={{ width: `${width}%`, maxWidth: "calc(100% - 140px)" }}
                 >
-                  <span className="truncate text-[28px] font-bold">
-                    {row.weapon.name} R{row.refinement}
+                  <span className="min-w-0 flex-1 truncate text-[22px] font-bold">
+                    {row.weapon.name}
                   </span>
+                  <span className="shrink-0 text-lg font-bold">R{row.refinement}</span>
                 </div>
                 <div className="ml-3 flex min-w-0 flex-1 flex-col items-start gap-1 text-white drop-shadow-[0_4px_3px_rgba(0,0,0,0.9)]">
-                  <strong className="shrink-0 text-[30px]">{formattedPercent(row[metric])}</strong>
+                  <strong className="shrink-0 whitespace-nowrap text-[26px]">{formattedPercent(row[metric], locale)}</strong>
                   {row.note ? <span data-export-note className="min-w-0 text-xl leading-tight">{row.note}</span> : null}
                 </div>
               </div>
@@ -111,11 +114,12 @@ export function WeaponImageExport({
   group: WeaponGroup;
   conditionIndex: number;
 }) {
-  const conditionLabel = group.name || exportText("condition", { index: conditionIndex + 1 });
+  const { e } = useTranslation();
+  const conditionLabel = group.name || e("condition", { index: conditionIndex + 1 });
   const baseName = `${guide.name}-Weapon-${conditionLabel}`;
   const metricOptions = ([
-    ["overallPercent", exportText("overallDamage")],
-    ["personalPercent", exportText("personalDamage")],
+    ["overallPercent", e("overallDamage")],
+    ["personalPercent", e("personalDamage")],
   ] as const).filter(([metric]) =>
     group.rows.some((row) => row[metric] !== null),
   );
@@ -124,13 +128,13 @@ export function WeaponImageExport({
     <Dialog>
       <DialogTrigger render={<Button type="button" variant="outline" size="sm" />}>
         <DownloadIcon data-icon="inline-start" />
-        {exportText("exportImage")}
+        {e("exportImage")}
       </DialogTrigger>
       <DialogContent>
         <DialogHeader>
-          <DialogTitle>{exportText("damageTitle")}</DialogTitle>
+          <DialogTitle>{e("damageTitle")}</DialogTitle>
           <DialogDescription>
-            {exportText("damageDescription")}
+            {e("damageDescription")}
           </DialogDescription>
         </DialogHeader>
         <div className="grid gap-2 sm:grid-cols-2">
@@ -146,7 +150,7 @@ export function WeaponImageExport({
                 guide={guide}
                 group={group}
                 metric={metric}
-                conditionLabel={conditionLabel}
+                conditionIndex={conditionIndex}
               />
             </GuideImageExport>
           ))}
diff --git a/components/rich-text-editor.tsx b/components/rich-text-editor.tsx
index 7d1c8bb..c8bd181 100644
--- a/components/rich-text-editor.tsx
+++ b/components/rich-text-editor.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { useTranslation } from "@/components/i18n/locale-provider";
 import { useEffect, useState } from "react";
 import type { Editor } from "@tiptap/core";
 import Link from "@tiptap/extension-link";
@@ -73,6 +74,7 @@ function FormatControls({
   formatWholeContent: boolean;
   onFormatChange?: (patch: RichTextStylePatch) => void;
 }) {
+  const { t } = useTranslation();
   const formats: Format[] = ["bold", "italic", "underline", "strike"];
   const active = formats.filter((format) => editor.isActive(format));
   const color = editor.getAttributes("textStyle").color ?? "#FF3B30";
@@ -108,29 +110,29 @@ function FormatControls({
         variant="outline"
         size="sm"
         spacing={0}
-        aria-label="รูปแบบข้อความ"
+        aria-label={t("รูปแบบข้อความ")}
         onValueChange={(next) => {
           const changed = formats.find((format) => active.includes(format) !== next.includes(format));
           if (changed) toggleFormat(changed);
         }}
       >
-        <ToggleGroupItem value="bold" aria-label="ตัวหนา" title="ตัวหนา">
+        <ToggleGroupItem value="bold" aria-label={t("ตัวหนา")} title={t("ตัวหนา")}>
           <BoldIcon />
         </ToggleGroupItem>
-        <ToggleGroupItem value="italic" aria-label="ตัวเอียง" title="ตัวเอียง">
+        <ToggleGroupItem value="italic" aria-label={t("ตัวเอียง")} title={t("ตัวเอียง")}>
           <ItalicIcon />
         </ToggleGroupItem>
-        <ToggleGroupItem value="underline" aria-label="ขีดเส้นใต้" title="ขีดเส้นใต้">
+        <ToggleGroupItem value="underline" aria-label={t("ขีดเส้นใต้")} title={t("ขีดเส้นใต้")}>
           <UnderlineIcon />
         </ToggleGroupItem>
-        <ToggleGroupItem value="strike" aria-label="ขีดฆ่า" title="ขีดฆ่า">
+        <ToggleGroupItem value="strike" aria-label={t("ขีดฆ่า")} title={t("ขีดฆ่า")}>
           <StrikethroughIcon />
         </ToggleGroupItem>
       </ToggleGroup>
       <Separator orientation="vertical" className="mx-1 h-6" />
-      <label className="relative grid size-8 cursor-pointer place-items-center rounded-lg border border-input hover:bg-muted" title="สีข้อความ">
+      <label className="relative grid size-8 cursor-pointer place-items-center rounded-lg border border-input hover:bg-muted" title={t("สีข้อความ")}>
         <PaletteIcon aria-hidden="true" />
-        <span className="sr-only">สีข้อความ</span>
+        <span className="sr-only">{t("สีข้อความ")}</span>
         <input
           type="color"
           value={color}
@@ -146,8 +148,8 @@ function FormatControls({
         type="button"
         variant="ghost"
         size="icon-sm"
-        aria-label="ล้างสีข้อความ"
-        title="ล้างสีข้อความ"
+        aria-label={t("ล้างสีข้อความ")}
+        title={t("ล้างสีข้อความ")}
         onClick={() => {
           if (formatWholeContent) editor.commands.selectAll();
           editor.chain().focus().unsetColor().run();
@@ -160,8 +162,8 @@ function FormatControls({
         type="button"
         variant="ghost"
         size="icon-sm"
-        aria-label={editor.isActive("link") ? "ลบลิงก์" : "เพิ่มลิงก์"}
-        title={editor.isActive("link") ? "ลบลิงก์" : "เพิ่มลิงก์"}
+        aria-label={editor.isActive("link") ? t("ลบลิงก์") : t("เพิ่มลิงก์")}
+        title={editor.isActive("link") ? t("ลบลิงก์") : t("เพิ่มลิงก์")}
         onClick={onLink}
       >
         {editor.isActive("link") ? <UnlinkIcon /> : <LinkIcon />}
@@ -180,6 +182,7 @@ export function RichTextEditor({
   formatWholeContent = false,
   onFormatChange,
 }: RichTextEditorProps) {
+  const { t } = useTranslation();
   const [linkOpen, setLinkOpen] = useState(false);
   const [linkText, setLinkText] = useState("");
   const [linkUrl, setLinkUrl] = useState("");
@@ -206,7 +209,7 @@ export function RichTextEditor({
       }),
       TextStyle,
       Color,
-      Placeholder.configure({ placeholder }),
+      Placeholder.configure({ placeholder: t(placeholder) }),
     ],
     content: value,
     immediatelyRender: false,
@@ -218,6 +221,13 @@ export function RichTextEditor({
     },
   });
 
+  useEffect(() => {
+    if (!editor) return;
+    const extension = editor.extensionManager.extensions.find((item) => item.name === "placeholder");
+    if (extension) extension.options.placeholder = t(placeholder);
+    editor.view.dispatch(editor.state.tr.setMeta("preventUpdate", true));
+  }, [editor, placeholder, t]);
+
   useEffect(() => {
     if (!editor) return;
     const next = sanitizeRichTextHtml(value);
@@ -296,20 +306,20 @@ export function RichTextEditor({
       <Dialog open={linkOpen} onOpenChange={setLinkOpen}>
         <DialogContent>
           <DialogHeader>
-            <DialogTitle>เพิ่มลิงก์</DialogTitle>
+            <DialogTitle>{t("เพิ่มลิงก์")}</DialogTitle>
           </DialogHeader>
           <FieldGroup>
             <Field>
-              <FieldLabel htmlFor="rich-text-link-text">ข้อความ</FieldLabel>
+              <FieldLabel htmlFor="rich-text-link-text">{t("ข้อความ")}</FieldLabel>
               <Input
                 id="rich-text-link-text"
                 value={linkText}
-                placeholder="ข้อความลิงก์"
+                placeholder={t("ข้อความลิงก์")}
                 onChange={(event) => setLinkText(event.target.value)}
               />
             </Field>
             <Field data-invalid={linkInvalid || undefined}>
-              <FieldLabel htmlFor="rich-text-link-url">URL</FieldLabel>
+              <FieldLabel htmlFor="rich-text-link-url">{t("URL")}</FieldLabel>
               <Input
                 id="rich-text-link-url"
                 value={linkUrl}
@@ -328,17 +338,15 @@ export function RichTextEditor({
                 }}
               />
               {linkInvalid ? (
-                <FieldDescription>ใช้ลิงก์ http, https หรือ mailto เท่านั้น</FieldDescription>
+                <FieldDescription>{t("ใช้ลิงก์ http, https หรือ mailto เท่านั้น")}</FieldDescription>
               ) : null}
             </Field>
           </FieldGroup>
           <DialogFooter>
             <Button type="button" variant="outline" onClick={() => setLinkOpen(false)}>
-              ยกเลิก
-            </Button>
+              {t("ยกเลิก")}</Button>
             <Button type="button" onClick={saveLink}>
-              บันทึกลิงก์
-            </Button>
+              {t("บันทึกลิงก์")}</Button>
           </DialogFooter>
         </DialogContent>
       </Dialog>
diff --git a/components/tooltip.tsx b/components/tooltip.tsx
index 433e261..be71ad4 100644
--- a/components/tooltip.tsx
+++ b/components/tooltip.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { useTranslation } from "@/components/i18n/locale-provider";
 import type { ComponentProps, ReactNode } from "react";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 
@@ -13,12 +14,13 @@ export function SimpleTooltip({
   side?: "top" | "right" | "bottom" | "left" | undefined;
   children: ReactNode;
 } & Omit<ComponentProps<typeof Tooltip>, "children">) {
+  const { t } = useTranslation();
   return (
     <Tooltip {...props}>
       <TooltipTrigger render={<span className="inline-flex" />}>
         {children}
       </TooltipTrigger>
-      <TooltipContent side={side}>{text}</TooltipContent>
+      <TooltipContent side={side}>{typeof text === "string" ? t(text) : text}</TooltipContent>
     </Tooltip>
   );
 }
diff --git a/components/ui/breadcrumb.tsx b/components/ui/breadcrumb.tsx
index 3d85c18..53213eb 100644
--- a/components/ui/breadcrumb.tsx
+++ b/components/ui/breadcrumb.tsx
@@ -1,3 +1,7 @@
+"use client"
+
+import { useTranslation } from "@/components/i18n/locale-provider";
+import { Text } from "@/components/i18n/text"
 import * as React from "react"
 import { mergeProps } from "@base-ui/react/merge-props"
 import { useRender } from "@base-ui/react/use-render"
@@ -6,9 +10,10 @@ import { cn } from "@/lib/utils"
 import { ChevronRightIcon, MoreHorizontalIcon } from "lucide-react"
 
 function Breadcrumb({ className, ...props }: React.ComponentProps<"nav">) {
+  const { t } = useTranslation();
   return (
     <nav
-      aria-label="breadcrumb"
+      aria-label={t("breadcrumb")}
       data-slot="breadcrumb"
       className={cn(className)}
       {...props}
@@ -109,7 +114,7 @@ function BreadcrumbEllipsis({
     >
       <MoreHorizontalIcon
       />
-      <span className="sr-only">More</span>
+      <span className="sr-only"><Text message="More" /></span>
     </span>
   )
 }
diff --git a/components/ui/carousel.tsx b/components/ui/carousel.tsx
index c4fafc5..eb87a51 100644
--- a/components/ui/carousel.tsx
+++ b/components/ui/carousel.tsx
@@ -1,5 +1,6 @@
 "use client"
 
+import { Text } from "@/components/i18n/text"
 import * as React from "react"
 import useEmblaCarousel, {
   type UseEmblaCarouselType,
@@ -198,7 +199,7 @@ function CarouselPrevious({
       {...props}
     >
       <ChevronLeftIcon />
-      <span className="sr-only">Previous slide</span>
+      <span className="sr-only"><Text message="Previous slide" /></span>
     </Button>
   )
 }
@@ -228,7 +229,7 @@ function CarouselNext({
       {...props}
     >
       <ChevronRightIcon />
-      <span className="sr-only">Next slide</span>
+      <span className="sr-only"><Text message="Next slide" /></span>
     </Button>
   )
 }
diff --git a/components/ui/command.tsx b/components/ui/command.tsx
index 37fb2d9..41dacce 100644
--- a/components/ui/command.tsx
+++ b/components/ui/command.tsx
@@ -1,6 +1,7 @@
 "use client"
 
 import * as React from "react"
+import { useTranslation } from "@/components/i18n/locale-provider"
 import { Command as CommandPrimitive } from "cmdk"
 
 import { cn } from "@/lib/utils"
@@ -47,11 +48,12 @@ function CommandDialog({
   showCloseButton?: boolean
   children: React.ReactNode
 }) {
+  const { t } = useTranslation()
   return (
     <Dialog {...props}>
       <DialogHeader className="sr-only">
-        <DialogTitle>{title}</DialogTitle>
-        <DialogDescription>{description}</DialogDescription>
+        <DialogTitle>{t(title)}</DialogTitle>
+        <DialogDescription>{t(description)}</DialogDescription>
       </DialogHeader>
       <DialogContent
         className={cn(
diff --git a/components/ui/dialog.tsx b/components/ui/dialog.tsx
index 014f5aa..1522dd3 100644
--- a/components/ui/dialog.tsx
+++ b/components/ui/dialog.tsx
@@ -1,5 +1,6 @@
 "use client"
 
+import { Text } from "@/components/i18n/text"
 import * as React from "react"
 import { Dialog as DialogPrimitive } from "@base-ui/react/dialog"
 
@@ -72,7 +73,7 @@ function DialogContent({
           >
             <XIcon
             />
-            <span className="sr-only">Close</span>
+            <span className="sr-only"><Text message="Close" /></span>
           </DialogPrimitive.Close>
         )}
       </DialogPrimitive.Popup>
diff --git a/components/ui/pagination.tsx b/components/ui/pagination.tsx
index db376f6..dcad7d4 100644
--- a/components/ui/pagination.tsx
+++ b/components/ui/pagination.tsx
@@ -1,3 +1,7 @@
+"use client"
+
+import { useTranslation } from "@/components/i18n/locale-provider";
+import { Text } from "@/components/i18n/text"
 import * as React from "react"
 
 import { cn } from "@/lib/utils"
@@ -5,10 +9,11 @@ import { Button } from "@/components/ui/button"
 import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from "lucide-react"
 
 function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
+  const { t } = useTranslation();
   return (
     <nav
       role="navigation"
-      aria-label="pagination"
+      aria-label={t("pagination")}
       data-slot="pagination"
       className={cn("mx-auto flex w-full justify-center", className)}
       {...props}
@@ -67,9 +72,10 @@ function PaginationPrevious({
   text = "Previous",
   ...props
 }: React.ComponentProps<typeof PaginationLink> & { text?: string }) {
+  const { t } = useTranslation();
   return (
     <PaginationLink
-      aria-label="Go to previous page"
+      aria-label={t("Go to previous page")}
       size="default"
       className={cn("pl-1.5!", className)}
       {...props}
@@ -85,9 +91,10 @@ function PaginationNext({
   text = "Next",
   ...props
 }: React.ComponentProps<typeof PaginationLink> & { text?: string }) {
+  const { t } = useTranslation();
   return (
     <PaginationLink
-      aria-label="Go to next page"
+      aria-label={t("Go to next page")}
       size="default"
       className={cn("pr-1.5!", className)}
       {...props}
@@ -114,7 +121,7 @@ function PaginationEllipsis({
     >
       <MoreHorizontalIcon
       />
-      <span className="sr-only">More pages</span>
+      <span className="sr-only"><Text message="More pages" /></span>
     </span>
   )
 }
diff --git a/components/ui/sheet.tsx b/components/ui/sheet.tsx
index 78c0a76..f44599f 100644
--- a/components/ui/sheet.tsx
+++ b/components/ui/sheet.tsx
@@ -1,5 +1,6 @@
 "use client"
 
+import { Text } from "@/components/i18n/text"
 import * as React from "react"
 import { Dialog as SheetPrimitive } from "@base-ui/react/dialog"
 
@@ -72,7 +73,7 @@ function SheetContent({
           >
             <XIcon
             />
-            <span className="sr-only">Close</span>
+            <span className="sr-only"><Text message="Close" /></span>
           </SheetPrimitive.Close>
         )}
       </SheetPrimitive.Popup>
diff --git a/components/ui/sidebar.tsx b/components/ui/sidebar.tsx
index aca53fc..3852eea 100644
--- a/components/ui/sidebar.tsx
+++ b/components/ui/sidebar.tsx
@@ -1,5 +1,7 @@
 "use client"
 
+import { useTranslation } from "@/components/i18n/locale-provider";
+import { Text } from "@/components/i18n/text"
 import * as React from "react"
 import { mergeProps } from "@base-ui/react/merge-props"
 import { useRender } from "@base-ui/react/use-render"
@@ -196,8 +198,8 @@ function Sidebar({
           side={side}
         >
           <SheetHeader className="sr-only">
-            <SheetTitle>Sidebar</SheetTitle>
-            <SheetDescription>Displays the mobile sidebar.</SheetDescription>
+            <SheetTitle><Text message="Sidebar" /></SheetTitle>
+            <SheetDescription><Text message="Displays the mobile sidebar." /></SheetDescription>
           </SheetHeader>
           <div className="flex h-full w-full flex-col">{children}</div>
         </SheetContent>
@@ -272,22 +274,23 @@ function SidebarTrigger({
       {...props}
     >
       <PanelLeftIcon />
-      <span className="sr-only">Toggle Sidebar</span>
+      <span className="sr-only"><Text message="Toggle Sidebar" /></span>
     </Button>
   )
 }
 
 function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
+  const { t } = useTranslation();
   const { toggleSidebar } = useSidebar()
 
   return (
     <button
       data-sidebar="rail"
       data-slot="sidebar-rail"
-      aria-label="Toggle Sidebar"
+      aria-label={t("Toggle Sidebar")}
       tabIndex={-1}
       onClick={toggleSidebar}
-      title="Toggle Sidebar"
+      title={t("Toggle Sidebar")}
       className={cn(
         "absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] hover:after:bg-sidebar-border sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2",
         "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
diff --git a/components/ui/spinner.tsx b/components/ui/spinner.tsx
index 8dca22b..a83f991 100644
--- a/components/ui/spinner.tsx
+++ b/components/ui/spinner.tsx
@@ -1,9 +1,13 @@
+"use client"
+
+import { useTranslation } from "@/components/i18n/locale-provider"
 import { cn } from "@/lib/utils"
 import { Loader2Icon } from "lucide-react"
 
 function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
+  const { t } = useTranslation()
   return (
-    <Loader2Icon data-slot="spinner" role="status" aria-label="Loading" className={cn("size-4 animate-spin", className)} {...props} />
+    <Loader2Icon data-slot="spinner" role="status" aria-label={t("Loading")} className={cn("size-4 animate-spin", className)} {...props} />
   )
 }
 
diff --git a/hooks/use-autosave.ts b/hooks/use-autosave.ts
index 941da40..dce654c 100644
--- a/hooks/use-autosave.ts
+++ b/hooks/use-autosave.ts
@@ -1,5 +1,6 @@
 "use client";
 
+import { useTranslation } from "@/components/i18n/locale-provider";
 import { useEffect, useEffectEvent, useRef, useState } from "react";
 import { toast } from "sonner";
 
@@ -36,6 +37,8 @@ export function useAutosave<Value, Draft = Value>({
   parseLocalDraft?: (value: unknown) => Draft | null;
   restoreLocalDraft?: (draft: Draft) => void;
 }) {
+  const { t: translateMessage } = useTranslation();
+  const t = useEffectEvent(translateMessage);
   const fingerprint = JSON.stringify(value);
   const draftFingerprint = JSON.stringify(localDraft ?? value);
   const [savedFingerprint, setSavedFingerprint] = useState(fingerprint);
@@ -81,19 +84,19 @@ export function useAutosave<Value, Draft = Value>({
           else window.localStorage.removeItem(storageKey);
           setHydrated(true);
         };
-        toast("พบ Local draft ต้องการกู้คืนหรือไม่?", {
+        toast(t("พบ Local draft ต้องการกู้คืนหรือไม่?"), {
           id: `restore:${storageKey}`,
-          description: "หากไม่เลือก ระบบจะใช้ข้อมูลล่าสุดจากเซิร์ฟเวอร์",
+          description: t("หากไม่เลือก ระบบจะใช้ข้อมูลล่าสุดจากเซิร์ฟเวอร์"),
           duration: 10_000,
-          action: { label: "กู้คืน", onClick: () => finish(true) },
-          cancel: { label: "ไม่ใช้", onClick: () => finish(false) },
+          action: { label: t("กู้คืน"), onClick: () => finish(true) },
+          cancel: { label: t("ไม่ใช้"), onClick: () => finish(false) },
           onDismiss: () => finish(false),
           onAutoClose: () => finish(false),
         });
       } catch {
         if (!storageWarningShown.current) {
           storageWarningShown.current = true;
-          toast.error("ไม่สามารถเปิด Local draft ได้");
+          toast.error(t("ไม่สามารถเปิด Local draft ได้"));
         }
         setHydrated(true);
       }
@@ -112,7 +115,7 @@ export function useAutosave<Value, Draft = Value>({
     } catch {
       if (!storageWarningShown.current) {
         storageWarningShown.current = true;
-        toast.error("บันทึก Local draft ไม่สำเร็จ กรุณาตรวจสอบพื้นที่ของเบราว์เซอร์");
+        toast.error(t("บันทึก Local draft ไม่สำเร็จ กรุณาตรวจสอบพื้นที่ของเบราว์เซอร์"));
       }
     }
   }, [draftFingerprint, hydrated, localDraft, savedDraftFingerprint, storageKey, version]);
@@ -127,7 +130,7 @@ export function useAutosave<Value, Draft = Value>({
       if (result.status === "error" || result.status === "conflict") {
         if (result.currentVersion) setVersion(result.currentVersion);
         setErrorFingerprint(snapshotFingerprint);
-        toast.error(result.message ?? "บันทึกอัตโนมัติไม่สำเร็จ");
+        toast.error(t(result.message ?? "บันทึกอัตโนมัติไม่สำเร็จ"));
         return;
       }
       if (result.version) setVersion(result.version);
@@ -135,7 +138,7 @@ export function useAutosave<Value, Draft = Value>({
       setSavedDraftFingerprint(snapshotDraftFingerprint);
     } catch (cause) {
       setErrorFingerprint(snapshotFingerprint);
-      toast.error(cause instanceof Error ? cause.message : "บันทึกอัตโนมัติไม่สำเร็จ");
+      toast.error(t(cause instanceof Error ? cause.message : "บันทึกอัตโนมัติไม่สำเร็จ"));
     } finally {
       setSaving(false);
     }
diff --git a/lib/guides/export-text.test.tsx b/lib/guides/export-text.test.tsx
index 3f5870a..63adead 100644
--- a/lib/guides/export-text.test.tsx
+++ b/lib/guides/export-text.test.tsx
@@ -2,6 +2,7 @@ import { createElement } from "react";
 import { renderToStaticMarkup } from "react-dom/server";
 import { describe, expect, it } from "vitest";
 
+import { LocaleBoundary } from "@/components/i18n/locale-provider";
 import { GuideImageExport } from "@/components/public/guide-image-export";
 import { ConstellationImage } from "@/components/public/constellation-image";
 import type { PublicGuide } from "@/lib/guides/queries";
@@ -18,9 +19,9 @@ describe("export translations", () => {
   });
 
   it("defaults to English and interpolates names without interpreting their contents", () => {
-    expect(exportText("weaponTitle", { name: "Raiden" })).toBe("Raiden’s Weapon Comparison");
+    expect(exportText("weaponTitle", { name: "Raiden" })).toBe("Raiden Weapons");
     expect(exportText("rotation", { seconds: "20.5" })).toBe("Rotation duration: 20.5 seconds");
-    expect(exportText("weaponTitle", { name: "{seconds}" })).toBe("{seconds}’s Weapon Comparison");
+    expect(exportText("weaponTitle", { name: "{seconds}" })).toBe("{seconds} Weapons");
     expect(exportText("condition", { index: 2 }, "th")).toBe("เงื่อนไข 2");
   });
 
@@ -41,7 +42,7 @@ describe("export translations", () => {
 
 describe("image export controls", () => {
   it("always offers both export modes even without notes", () => {
-    const html = renderToStaticMarkup(<GuideImageExport fileName="guide.png">No notes</GuideImageExport>);
+    const html = renderToStaticMarkup(<LocaleBoundary locale="en"><GuideImageExport fileName="guide.png">No notes</GuideImageExport></LocaleBoundary>);
     expect(html).toContain("Export image");
     expect(html).toContain("Export without note");
     expect(html.match(/<button\b/gu)).toHaveLength(2);
@@ -55,7 +56,7 @@ describe("image export controls", () => {
   it.each(["English note", "โน้ตภาษาไทย"])("marks constellation notes for omission regardless of language: %s", (note) => {
     const guide = { character: { name: "Raiden", splashImageUrl: "/splash.png" }, coverUrl: "/cover.png" } as PublicGuide;
     const group = { rows: [], note } as unknown as PublicGuide["constellationGroups"][number];
-    const html = renderToStaticMarkup(createElement(ConstellationImage, { guide, group }));
+    const html = renderToStaticMarkup(<LocaleBoundary locale="en">{createElement(ConstellationImage, { guide, group })}</LocaleBoundary>);
     expect(html).toContain("Raiden’s Constellations");
     expect(html).toContain("Team Damage");
     expect(html).toContain('data-export-note="true"');
diff --git a/lib/guides/export-text.ts b/lib/guides/export-text.ts
index b3fb092..e42deab 100644
--- a/lib/guides/export-text.ts
+++ b/lib/guides/export-text.ts
@@ -1,4 +1,5 @@
-export type Locale = "th" | "en";
+import type { Locale } from "@/lib/i18n/locales";
+export type { Locale } from "@/lib/i18n/locales";
 
 const english = {
   exportImage: "Export image",
@@ -9,7 +10,7 @@ const english = {
   damageDescription: "Choose the damage metric for your weapon comparison image.",
   overallDamage: "Overall Damage",
   personalDamage: "Personal Damage",
-  weaponTitle: "{name}’s Weapon Comparison",
+  weaponTitle: "{name} Weapons",
   condition: "Condition {index}",
   sectionTitle: "Choose what to export",
   sectionDescription: "Select individual sections or choose All sections to export everything.",
@@ -41,7 +42,8 @@ const english = {
   constellationTitle: "{name}’s Constellations",
   teamDamage: "Team Damage",
   rotation: "Rotation duration: {seconds} seconds",
-  teamCredit: "By YT Genshin Is Not a Mobile Game",
+  teamCredit: "Genshin isnt Mobile Game",
+  watermark: "Genshin isnt Mobile Game",
   disclaimer: "Results cannot be directly compared with other theorycrafters’ calculations,\nas each uses different stats.\nThe figures shown may change in future updates.",
   overviewDownloaded: "Overview image downloaded.",
   downloadPng: "Download PNG {width}×{height}",
@@ -60,7 +62,7 @@ const thai: Record<ExportMessageKey, string> = {
   damageDescription: "เลือกค่าที่ต้องการใช้สร้างภาพเปรียบเทียบอาวุธ",
   overallDamage: "ดาเมจทั้งทีม",
   personalDamage: "ดาเมจส่วนตัว",
-  weaponTitle: "เปรียบเทียบอาวุธของ {name}",
+  weaponTitle: "อาวุธของ {name}",
   condition: "เงื่อนไข {index}",
   sectionTitle: "เลือกข้อมูลสำหรับส่งออก",
   sectionDescription: "เลือกได้หลายส่วน หรือเลือกทั้งหมดเพื่อส่งออกทุกส่วน",
@@ -78,7 +80,7 @@ const thai: Record<ExportMessageKey, string> = {
   goblet: "ถ้วย",
   circlet: "หัว",
   artifactRecommendation: "อาร์ติแฟกต์และสแตทที่แนะนำ",
-  artifactTitle: "Artifact & Stats",
+  artifactTitle: "อาร์ติแฟกต์และค่าสถานะ",
   lateGame: "เลทเกม",
   earlyGame: "ต้นเกม",
   minimumStats: "ค่าสถานะต่ำๆที่ควรจะปั้นไว้",
@@ -92,7 +94,8 @@ const thai: Record<ExportMessageKey, string> = {
   constellationTitle: "กลุ่มดาวของ {name}",
   teamDamage: "ดาเมจทั้งทีม",
   rotation: "ระยะเวลาโรเทชั่น {seconds} วิ",
-  teamCredit: "By YT เกนชินไม่ใช่เกมมือถือ",
+  teamCredit: "Genshin isnt Mobile Game",
+  watermark: "Genshin isnt Mobile Game",
   disclaimer: "ไม่สามารถเอาไปเปรียบเทียบกับการคำนวณของ TC ท่านอื่นๆได้\nเพราะแต่ละคนใช้สแตทในการคำนวณที่ไม่เหมือนกัน\nและตารางที่เห็นอาจมีการเปลี่ยนแปลงได้ในอนาคต",
   overviewDownloaded: "ดาวน์โหลดภาพ Overview แล้ว",
   downloadPng: "ดาวน์โหลด PNG {width}×{height}",
diff --git a/lib/guides/validation-messages.ts b/lib/guides/validation-messages.ts
index 22266e3..7967af3 100644
--- a/lib/guides/validation-messages.ts
+++ b/lib/guides/validation-messages.ts
@@ -1,3 +1,6 @@
+import { translate } from "@/lib/i18n/messages";
+import type { Locale } from "@/lib/i18n/locales";
+
 export type GuideValidationSection = "weapon" | "artifact" | "constellations" | "team" | "extra";
 
 interface ValidationIssue {
@@ -34,30 +37,30 @@ function indexAfter(path: readonly PropertyKey[], key: string): number | null {
   return position >= 0 && typeof value === "number" ? value : null;
 }
 
-function issueContext(section: GuideValidationSection, path: readonly PropertyKey[], teamNames?: readonly string[]): string {
+function issueContext(section: GuideValidationSection, path: readonly PropertyKey[], teamNames?: readonly string[], locale: Locale = "th"): string {
   const rowIndex = indexAfter(path, "rows");
   const groupIndex = indexAfter(path, "groups");
   const teamIndex = indexAfter(path, "teams");
   const memberIndex = indexAfter(path, "members");
   const sectionIndex = indexAfter(path, "sections");
 
-  if (section === "weapon" && groupIndex === null && rowIndex !== null) return `อาวุธอันดับ ${rowIndex + 1}`;
+  if (section === "weapon" && groupIndex === null && rowIndex !== null) return translate("อาวุธอันดับ {rank}", { rank: rowIndex + 1 }, locale);
   if (section === "weapon" && groupIndex !== null) {
-    return rowIndex === null ? `Condition ${groupIndex + 1}` : `Condition ${groupIndex + 1} · อาวุธอันดับ ${rowIndex + 1}`;
+    return rowIndex === null ? `Condition ${groupIndex + 1}` : translate("Condition {index} · อาวุธอันดับ {rank}", { index: groupIndex + 1, rank: rowIndex + 1 }, locale);
   }
   if (section === "artifact" && groupIndex !== null) {
     const group = groupIndex === 0 ? "Late Game" : "Early Game";
-    return rowIndex === null ? `Artifact ${group}` : `Artifact ${group} อันดับ ${rowIndex + 1}`;
+    return rowIndex === null ? `Artifact ${group}` : translate("Artifact {name} อันดับ {rank}", { name: group, rank: rowIndex + 1 }, locale);
   }
   if (section === "constellations" && groupIndex !== null) {
     return rowIndex === null ? `Condition ${groupIndex + 1}` : `Condition ${groupIndex + 1} · C${rowIndex + 1}`;
   }
   if (section === "team" && teamIndex !== null) {
     const teamName = teamNames?.[teamIndex]?.trim() || `Team ${teamIndex + 1}`;
-    return memberIndex === null ? teamName : `${teamName} · ตัวละคร ${memberIndex + 1}`;
+    return memberIndex === null ? teamName : translate("{name} · ตัวละคร {index}", { name: teamName, index: memberIndex + 1 }, locale);
   }
   if (section === "extra" && sectionIndex !== null) {
-    return rowIndex === null ? `Extra section ${sectionIndex + 1}` : `Extra section ${sectionIndex + 1} · แถว ${rowIndex + 1}`;
+    return rowIndex === null ? `Extra section ${sectionIndex + 1}` : translate("Extra section {index} · แถว {row}", { index: sectionIndex + 1, row: rowIndex + 1 }, locale);
   }
   return sectionLabels[section];
 }
@@ -74,7 +77,7 @@ function issueMessage(issue: ValidationIssue): string {
 export function formatGuideValidationIssues(
   section: GuideValidationSection,
   issues: readonly ValidationIssue[],
-  options: { teamNames?: readonly string[] } = {},
+  options: { teamNames?: readonly string[]; locale?: Locale } = {},
 ): string[] {
-  return issues.map((issue) => `${issueContext(section, issue.path, options.teamNames)}: ${issueMessage(issue)}`);
+  return issues.map((issue) => `${issueContext(section, issue.path, options.teamNames, options.locale)}: ${translate(issueMessage(issue), {}, options.locale)}`);
 }
diff --git a/lib/i18n/i18n.test.tsx b/lib/i18n/i18n.test.tsx
new file mode 100644
index 0000000..d397bcf
--- /dev/null
+++ b/lib/i18n/i18n.test.tsx
@@ -0,0 +1,106 @@
+import Link from "next/link";
+import { readFileSync } from "node:fs";
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it, vi } from "vitest";
+import { LocaleBoundary } from "@/components/i18n/locale-provider";
+import { LanguageDropdown } from "@/components/i18n/language-dropdown";
+import { Text, Localized, ExportText, ConditionLabel, SectionTitle } from "@/components/i18n/text";
+import { GuideImageExport } from "@/components/public/guide-image-export";
+import { createLocaleStore } from "./locale-store";
+import { isLocale, languages, localeStorageKey } from "./locales";
+import { messages, translate } from "./messages";
+import { formatGuideValidationIssues } from "@/lib/guides/validation-messages";
+
+function memoryStorage(initial?: string) {
+  const values = new Map<string, string>();
+  if (initial) values.set(localeStorageKey, initial);
+  return { getItem: (key: string) => values.get(key) ?? null, setItem: (key: string, value: string) => { values.set(key, value); } };
+}
+
+describe("personal language preference", () => {
+  it("renders Thai on the server and restores a saved browser choice on subscription", () => {
+    const storage = memoryStorage("en");
+    const store = createLocaleStore(() => storage);
+    expect(store.getServerSnapshot()).toBe("th");
+    const listener = vi.fn();
+    const unsubscribe = store.subscribe(listener);
+    expect(store.getSnapshot()).toBe("en");
+    store.setLocale("th");
+    expect(storage.getItem(localeStorageKey)).toBe("th");
+    expect(listener).toHaveBeenCalledTimes(2);
+    unsubscribe();
+    store.setLocale("en");
+    expect(listener).toHaveBeenCalledTimes(2);
+  });
+
+  it("keeps choices independent between users' browsers", () => {
+    const first = createLocaleStore(() => memoryStorage());
+    const second = createLocaleStore(() => memoryStorage());
+    first.subscribe(() => {});
+    second.subscribe(() => {});
+    first.setLocale("en");
+    expect(first.getSnapshot()).toBe("en");
+    expect(second.getSnapshot()).toBe("th");
+  });
+
+  it("falls back to Thai for invalid storage and still changes language when storage is blocked", () => {
+    const invalid = createLocaleStore(() => memoryStorage("invalid"));
+    invalid.subscribe(() => {});
+    expect(invalid.getSnapshot()).toBe("th");
+    const blocked = createLocaleStore(() => { throw new Error("Storage disabled"); });
+    blocked.subscribe(() => {});
+    blocked.setLocale("en");
+    expect(blocked.getSnapshot()).toBe("en");
+    expect(isLocale("invalid")).toBe(false);
+  });
+});
+
+describe("interface translations", () => {
+  it("has matching named placeholders and English translations without Thai interface text", () => {
+    for (const [key, value] of Object.entries(messages)) {
+      const placeholders = (text: string) => [...text.matchAll(/\{(\w+)\}/gu)].map((match) => match[1]).sort();
+      expect(placeholders(value.en), key).toEqual(placeholders(value.th));
+      expect(value.en, key).not.toMatch(/[\u0e00-\u0e7f]/u);
+    }
+  });
+
+  it("translates app-owned API messages with interpolated values without changing their response shape", () => {
+    expect(translate("สร้างบัญชี buzz@example.com แล้ว", {}, "en")).toBe("Account created for buzz@example.com");
+    expect(translate("ดึงข้อมูลตัวละคร 4/10", {}, "en")).toBe("Fetching characters 4/10");
+    expect(translate("{character} ไม่รองรับอาวุธ {weapon}", { character: "Raiden", weapon: "Bow" }, "en")).toBe("Raiden cannot use Bow.");
+  });
+
+  it("localises validation while preserving an authored Thai team name", () => {
+    expect(formatGuideValidationIssues("team", [{ path: ["teams", 0, "members", 1, "damage"], message: "Invalid input" }], { locale: "en", teamNames: ["ทีมของฉัน"] })).toEqual(["ทีมของฉัน · Character 2: Enter damage of zero or more."]);
+  });
+
+  it("updates text and accessible attributes through the same locale context", () => {
+    const html = renderToStaticMarkup(<LocaleBoundary locale="en"><Text message="ค้นหาไกด์" /><Localized attributes={{ "aria-label": "กลับหน้ารวม" }}><Link href="/">Home</Link></Localized><ExportText message="talents" /></LocaleBoundary>);
+    expect(html).toContain("Search guides");
+    expect(html).toContain('aria-label="Back to all guides"');
+    expect(html).toContain("Talent Priority");
+  });
+
+  it("preserves custom content while translating only generated headings and conditions", () => {
+    const html = renderToStaticMarkup(<LocaleBoundary locale="en"><input defaultValue="ชื่อภาษาไทย" /><ConditionLabel name="เงื่อนไขของฉัน" index={1} /><ConditionLabel name={null} index={2} /><SectionTitle slug="custom" fallback="หัวข้อของฉัน" /></LocaleBoundary>);
+    expect(html).toContain('value="ชื่อภาษาไทย"');
+    expect(html).toContain("เงื่อนไขของฉัน");
+    expect(html).toContain("Condition 2");
+    expect(html).toContain("หัวข้อของฉัน");
+  });
+
+  it.each(["th", "en"] as const)("shows a labelled dropdown with the selected SVG flag in %s", (locale) => {
+    const language = languages.find((item) => item.code === locale)!;
+    const html = renderToStaticMarkup(<LocaleBoundary locale={locale}><LanguageDropdown /></LocaleBoundary>);
+    expect(html).toContain(language.name);
+    expect(html).toContain(language.flag);
+    expect(html).toContain('aria-haspopup="menu"');
+    for (const item of languages) expect(readFileSync(`public${item.flag}`, "utf8")).toContain("<svg");
+  });
+
+  it.each(["th", "en"] as const)("offers both export modes in %s even with no notes", (locale) => {
+    const html = renderToStaticMarkup(<LocaleBoundary locale={locale}><GuideImageExport fileName="test.png">No notes</GuideImageExport></LocaleBoundary>);
+    expect(html).toContain(locale === "en" ? "Export without note" : "ส่งออกภาพโดยไม่รวมโน้ต");
+    expect(html.match(/<button\b/gu)).toHaveLength(2);
+  });
+});
diff --git a/lib/i18n/locale-store.ts b/lib/i18n/locale-store.ts
new file mode 100644
index 0000000..f26d95e
--- /dev/null
+++ b/lib/i18n/locale-store.ts
@@ -0,0 +1,31 @@
+import { defaultLocale, isLocale, localeStorageKey, type Locale } from "./locales";
+
+export function createLocaleStore(storage: () => Pick<Storage, "getItem" | "setItem"> | undefined) {
+  let locale: Locale = defaultLocale;
+  let restored = false;
+  const listeners = new Set<() => void>();
+  const emit = () => listeners.forEach((listener) => listener());
+
+  return {
+    getSnapshot: () => locale,
+    getServerSnapshot: () => defaultLocale,
+    subscribe(listener: () => void) {
+      listeners.add(listener);
+      if (!restored) {
+        restored = true;
+        try {
+          const saved = storage()?.getItem(localeStorageKey);
+          if (isLocale(saved)) locale = saved;
+        } catch { /* Storage may be disabled by the browser. */ }
+        emit();
+      }
+      return () => { listeners.delete(listener); };
+    },
+    setLocale(value: Locale) {
+      if (!isLocale(value)) return;
+      locale = value;
+      try { storage()?.setItem(localeStorageKey, value); } catch { /* Keep the session choice when storage is unavailable. */ }
+      emit();
+    },
+  };
+}
diff --git a/lib/i18n/locales.ts b/lib/i18n/locales.ts
new file mode 100644
index 0000000..8f3597b
--- /dev/null
+++ b/lib/i18n/locales.ts
@@ -0,0 +1,12 @@
+export const languages = [
+  { code: "th", name: "ไทย", flag: "/flags/th.svg", numberLocale: "th-TH" },
+  { code: "en", name: "English", flag: "/flags/gb.svg", numberLocale: "en-GB" },
+] as const;
+
+export type Locale = (typeof languages)[number]["code"];
+export const defaultLocale: Locale = "th";
+export const localeStorageKey = "buzz-guide-language";
+
+export function isLocale(value: unknown): value is Locale {
+  return languages.some((language) => language.code === value);
+}
diff --git a/lib/i18n/messages.ts b/lib/i18n/messages.ts
new file mode 100644
index 0000000..5005e3d
--- /dev/null
+++ b/lib/i18n/messages.ts
@@ -0,0 +1,2878 @@
+import type { Locale } from "./locales";
+
+export type MessageParams = Record<string, string | number>;
+
+export const messages = {
+  "Language": {
+    "th": "ภาษา",
+    "en": "Language"
+  },
+  "Accounts": {
+    "th": "บัญชี",
+    "en": "Accounts"
+  },
+  "Admin access": {
+    "th": "สำหรับผู้ดูแล",
+    "en": "Admin access"
+  },
+  "Amount": {
+    "th": "จำนวน",
+    "en": "Amount"
+  },
+  "Artifact tier list": {
+    "th": "อันดับอาร์ติแฟกต์",
+    "en": "Artifact tier list"
+  },
+  "Autosave failed": {
+    "th": "บันทึกอัตโนมัติไม่สำเร็จ",
+    "en": "Autosave failed"
+  },
+  "BASE STATS": {
+    "th": "ค่าสถานะพื้นฐาน",
+    "en": "BASE STATS"
+  },
+  "Best DPS": {
+    "th": "DPS สูงสุด",
+    "en": "Best DPS"
+  },
+  "Bleeding layers": {
+    "th": "เลเยอร์ Bleeding",
+    "en": "Bleeding layers"
+  },
+  "Blend mode": {
+    "th": "โหมดผสมสี",
+    "en": "Blend mode"
+  },
+  "Cancel Sync": {
+    "th": "ยกเลิกการซิงก์",
+    "en": "Cancel Sync"
+  },
+  "Catalog ล่าสุดจาก Lunaris": {
+    "th": "Catalog ล่าสุดจาก Lunaris",
+    "en": "Latest catalog from Lunaris"
+  },
+  "Char": {
+    "th": "Character",
+    "en": "Char"
+  },
+  "Character image zoom": {
+    "th": "ซูมภาพตัวละคร",
+    "en": "Character image zoom"
+  },
+  "Chart": {
+    "th": "กราฟ",
+    "en": "Chart"
+  },
+  "Circlet / หมวก": {
+    "th": "Circlet / หมวก",
+    "en": "Circlet"
+  },
+  "Clear": {
+    "th": "ล้าง",
+    "en": "Clear"
+  },
+  "Combo": {
+    "th": "คอมโบ",
+    "en": "Combo"
+  },
+  "Condition": {
+    "th": "เงื่อนไข",
+    "en": "Condition"
+  },
+  "Condition name": {
+    "th": "ชื่อเงื่อนไข",
+    "en": "Condition name"
+  },
+  "Condition note (optional)": {
+    "th": "โน้ตเงื่อนไข (ไม่บังคับ)",
+    "en": "Condition note (optional)"
+  },
+  "Condition นี้ยังไม่มี Team": {
+    "th": "Condition นี้ยังไม่มี Team",
+    "en": "No teams in this condition yet"
+  },
+  "Constellations": {
+    "th": "กลุ่มดาว",
+    "en": "Constellations"
+  },
+  "Content workspace": {
+    "th": "พื้นที่จัดการเนื้อหา",
+    "en": "Content workspace"
+  },
+  "Cumulative %": {
+    "th": "เปอร์เซ็นต์สะสม",
+    "en": "Cumulative %"
+  },
+  "Damage ของตัวละครตำแหน่ง": {
+    "th": "Damage ของตัวละครตำแหน่ง",
+    "en": "Damage for character in slot"
+  },
+  "Dashboard": {
+    "th": "แดชบอร์ด",
+    "en": "Dashboard"
+  },
+  "Default": {
+    "th": "ค่าเริ่มต้น",
+    "en": "Default"
+  },
+  "Done": {
+    "th": "เสร็จสิ้น",
+    "en": "Done"
+  },
+  "Editing": {
+    "th": "กำลังแก้ไข",
+    "en": "Editing"
+  },
+  "Export": {
+    "th": "ส่งออก",
+    "en": "Export"
+  },
+  "Export Team ไม่สำเร็จ กรุณาตรวจสอบข้อมูล Team": {
+    "th": "Export Team ไม่สำเร็จ กรุณาตรวจสอบข้อมูล Team",
+    "en": "Could not export the team. Please check its details."
+  },
+  "Extra section": {
+    "th": "ส่วนเสริม",
+    "en": "Extra section"
+  },
+  "Extra sections": {
+    "th": "ส่วนเสริม",
+    "en": "Extra sections"
+  },
+  "Fade": {
+    "th": "การไล่ความจาง",
+    "en": "Fade"
+  },
+  "Glossary": {
+    "th": "อภิธานศัพท์",
+    "en": "Glossary"
+  },
+  "Glossary Manager": {
+    "th": "จัดการอภิธานศัพท์",
+    "en": "Glossary Manager"
+  },
+  "Goblet / ถ้วย": {
+    "th": "Goblet / ถ้วย",
+    "en": "Goblet"
+  },
+  "Great %": {
+    "th": "เปอร์เซ็นต์ที่แนะนำ",
+    "en": "Great %"
+  },
+  "Guide Dashboard": {
+    "th": "แดชบอร์ดไกด์",
+    "en": "Guide Dashboard"
+  },
+  "Guide Image": {
+    "th": "ภาพไกด์",
+    "en": "Guide Image"
+  },
+  "Guide จะหายจากหน้าเว็บไซต์ทันที และสามารถกู้คืนได้ภายหลัง": {
+    "th": "Guide จะหายจากหน้าเว็บไซต์ทันที และสามารถกู้คืนได้ภายหลัง",
+    "en": "The guide will disappear from the website immediately. You can restore it later."
+  },
+  "Guide จะหายจากหน้าเว็บไซต์และลิงก์สาธารณะจะเปิดไม่ได้ แต่ยังแก้ไขได้ใน Admin": {
+    "th": "Guide จะหายจากหน้าเว็บไซต์และลิงก์สาธารณะจะเปิดไม่ได้ แต่ยังแก้ไขได้ใน Admin",
+    "en": "The guide will be hidden and its public link will stop working. You can still edit it in admin."
+  },
+  "Guide จะแสดงบนหน้าเว็บไซต์และทุกคนจะเปิดดูผ่านลิงก์สาธารณะได้": {
+    "th": "Guide จะแสดงบนหน้าเว็บไซต์และทุกคนจะเปิดดูผ่านลิงก์สาธารณะได้",
+    "en": "The guide will appear on the website and anyone can open its public link."
+  },
+  "Guide ที่ซ่อนไว้จากเว็บไซต์": {
+    "th": "Guide ที่ซ่อนไว้จากเว็บไซต์",
+    "en": "Guides hidden from the website"
+  },
+  "Guide นี้": {
+    "th": "Guide นี้",
+    "en": "This guide"
+  },
+  "Header note (optional)": {
+    "th": "โน้ตส่วนหัว (ไม่บังคับ)",
+    "en": "Header note (optional)"
+  },
+  "Image Generator": {
+    "th": "สร้างภาพ",
+    "en": "Image Generator"
+  },
+  "Image generator": {
+    "th": "สร้างภาพ",
+    "en": "Image generator"
+  },
+  "Import": {
+    "th": "นำเข้า",
+    "en": "Import"
+  },
+  "Import Team": {
+    "th": "นำเข้าทีม",
+    "en": "Import Team"
+  },
+  "Import ไม่ได้ เพราะ Guide จะมี Team เกิน 30 Team": {
+    "th": "Import ไม่ได้ เพราะ Guide จะมี Team เกิน 30 Team",
+    "en": "Cannot import: the guide would contain more than 30 teams."
+  },
+  "Leave blank to use": {
+    "th": "เว้นว่างเพื่อใช้",
+    "en": "Leave blank to use"
+  },
+  "List": {
+    "th": "รายการ",
+    "en": "List"
+  },
+  "Lunaris ที่ Sync:": {
+    "th": "Lunaris ที่ Sync:",
+    "en": "Lunaris synced:"
+  },
+  "Materials Overview": {
+    "th": "ภาพรวมวัสดุ",
+    "en": "Materials Overview"
+  },
+  "Multiple Apply": {
+    "th": "ใช้กับหลายทีม",
+    "en": "Multiple Apply"
+  },
+  "New Guide": {
+    "th": "สร้างไกด์",
+    "en": "New Guide"
+  },
+  "Note (optional)": {
+    "th": "โน้ต (ไม่บังคับ)",
+    "en": "Note (optional)"
+  },
+  "Overall %": {
+    "th": "เปอร์เซ็นต์ดาเมจทั้งทีม",
+    "en": "Overall %"
+  },
+  "Overview": {
+    "th": "ภาพรวม",
+    "en": "Overview"
+  },
+  "Overview (optional)": {
+    "th": "ภาพรวม (ไม่บังคับ)",
+    "en": "Overview (optional)"
+  },
+  "PNG, JPEG, WebP หรือ GIF ขนาดไม่เกิน 100 MB": {
+    "th": "PNG, JPEG, WebP หรือ GIF ขนาดไม่เกิน 100 MB",
+    "en": "PNG, JPEG, WebP, or GIF up to 100 MB"
+  },
+  "Percent (optional)": {
+    "th": "เปอร์เซ็นต์ (ไม่บังคับ)",
+    "en": "Percent (optional)"
+  },
+  "Personal %": {
+    "th": "เปอร์เซ็นต์ดาเมจส่วนตัว",
+    "en": "Personal %"
+  },
+  "Recommended Stats": {
+    "th": "ค่าสถานะแนะนำ",
+    "en": "Recommended Stats"
+  },
+  "Refinement": {
+    "th": "ระดับขัดเกลา",
+    "en": "Refinement"
+  },
+  "Rename condition": {
+    "th": "เปลี่ยนชื่อเงื่อนไข",
+    "en": "Rename condition"
+  },
+  "Role": {
+    "th": "บทบาท",
+    "en": "Role"
+  },
+  "Rotation": {
+    "th": "โรเทชั่น",
+    "en": "Rotation"
+  },
+  "Sands / นาฬิกา": {
+    "th": "Sands / นาฬิกา",
+    "en": "Sands"
+  },
+  "Save now": {
+    "th": "บันทึกตอนนี้",
+    "en": "Save now"
+  },
+  "Save preset": {
+    "th": "บันทึกพรีเซ็ต",
+    "en": "Save preset"
+  },
+  "Save team preset": {
+    "th": "บันทึกพรีเซ็ตทีม",
+    "en": "Save team preset"
+  },
+  "Saved": {
+    "th": "บันทึกแล้ว",
+    "en": "Saved"
+  },
+  "Saving…": {
+    "th": "กำลังบันทึก…",
+    "en": "Saving…"
+  },
+  "Search shortcuts": {
+    "th": "ค้นหาคำย่อ",
+    "en": "Search shortcuts"
+  },
+  "Shortcut": {
+    "th": "คำย่อ",
+    "en": "Shortcut"
+  },
+  "Special Thanks": {
+    "th": "ขอบคุณผู้สนับสนุน",
+    "en": "Special Thanks"
+  },
+  "Sync Catalog": {
+    "th": "ซิงก์แคตตาล็อก",
+    "en": "Sync Catalog"
+  },
+  "Sync Catalog แล้วเลือกตัวละครเพื่อสร้าง Guide แรก": {
+    "th": "Sync Catalog แล้วเลือกตัวละครเพื่อสร้าง Guide แรก",
+    "en": "Sync the catalog, then choose a character to create your first guide."
+  },
+  "Sync ไม่สำเร็จ": {
+    "th": "Sync ไม่สำเร็จ",
+    "en": "Sync failed"
+  },
+  "Talent Priority": {
+    "th": "ลำดับความสำคัญพรสวรรค์",
+    "en": "Talent Priority"
+  },
+  "Talent Upgrade": {
+    "th": "อัปเกรดพรสวรรค์",
+    "en": "Talent Upgrade"
+  },
+  "Target Stats": {
+    "th": "ค่าสถานะเป้าหมาย",
+    "en": "Target Stats"
+  },
+  "Team": {
+    "th": "ทีม",
+    "en": "Team"
+  },
+  "Team Calc": {
+    "th": "คำนวณทีม",
+    "en": "Team Calc"
+  },
+  "Team fields": {
+    "th": "ข้อมูลทีม",
+    "en": "Team fields"
+  },
+  "Team ที่เลือก:": {
+    "th": "Team ที่เลือก:",
+    "en": "Selected teams:"
+  },
+  "Upload Guide Image": {
+    "th": "อัปโหลดภาพไกด์",
+    "en": "Upload Guide Image"
+  },
+  "Waiting to save…": {
+    "th": "รอบันทึก…",
+    "en": "Waiting to save…"
+  },
+  "Weapon tier list": {
+    "th": "อันดับอาวุธ",
+    "en": "Weapon tier list"
+  },
+  "Weapons": {
+    "th": "อาวุธ",
+    "en": "Weapons"
+  },
+  "Worst DPS": {
+    "th": "DPS ต่ำสุด",
+    "en": "Worst DPS"
+  },
+  "YouTube video": {
+    "th": "วิดีโอ YouTube",
+    "en": "YouTube video"
+  },
+  "YouTube videos": {
+    "th": "วิดีโอ YouTube",
+    "en": "YouTube videos"
+  },
+  "shortcuts": {
+    "th": "คำย่อ",
+    "en": "shortcuts"
+  },
+  "/500 ตัวอักษร": {
+    "th": "/500 ตัวอักษร",
+    "en": "/500 characters"
+  },
+  "กดเพิ่ม Extra เพื่อสร้างส่วนเสริมแรกของ Guide นี้": {
+    "th": "กดเพิ่ม Extra เพื่อสร้างส่วนเสริมแรกของ Guide นี้",
+    "en": "Select Add extra to create this guide’s first additional section."
+  },
+  "กรอกเฉพาะค่าเป็นตัวเลข เปอร์เซ็นต์ หรือข้อความ เช่น -% หากไม่กรอกค่า ระบบจะไม่แสดงส่วนค่าสถานะเป้าหมาย": {
+    "th": "กรอกเฉพาะค่าเป็นตัวเลข เปอร์เซ็นต์ หรือข้อความ เช่น -% หากไม่กรอกค่า ระบบจะไม่แสดงส่วนค่าสถานะเป้าหมาย",
+    "en": "Enter a number, percentage, or text such as -%. Leave values blank to hide target stats."
+  },
+  "กราฟเปรียบเทียบเปอร์เซ็นต์ดาเมจอาวุธ": {
+    "th": "กราฟเปรียบเทียบเปอร์เซ็นต์ดาเมจอาวุธ",
+    "en": "Weapon damage percentage comparison chart"
+  },
+  "กรุณากรอกข้อมูลให้ครบ": {
+    "th": "กรุณากรอกข้อมูลให้ครบ",
+    "en": "Please complete the required fields."
+  },
+  "กรุณาใส่ลิงก์วิดีโอ YouTube ที่ถูกต้อง": {
+    "th": "กรุณาใส่ลิงก์วิดีโอ YouTube ที่ถูกต้อง",
+    "en": "Please enter a valid YouTube video link."
+  },
+  "กรุณาใส่สีรูปแบบ #RRGGBB": {
+    "th": "กรุณาใส่สีรูปแบบ #RRGGBB",
+    "en": "Enter a colour in #RRGGBB format."
+  },
+  "กลับ Dashboard": {
+    "th": "กลับ Dashboard",
+    "en": "Back to dashboard"
+  },
+  "กลับมาตรวจสอบอีกครั้งหลังผู้ดูแลเพิ่มข้อมูล": {
+    "th": "กลับมาตรวจสอบอีกครั้งหลังผู้ดูแลเพิ่มข้อมูล",
+    "en": "Check back after an admin adds content."
+  },
+  "กลับหน้ารวม": {
+    "th": "กลับหน้ารวม",
+    "en": "Back to all guides"
+  },
+  "กลับไปหน้ารวมตัวละคร": {
+    "th": "กลับไปหน้ารวมตัวละคร",
+    "en": "Back to all characters"
+  },
+  "กลับไปเลือก Guide": {
+    "th": "กลับไปเลือก Guide",
+    "en": "Back to guide selection"
+  },
+  "กลับไปใช้ Namecard": {
+    "th": "กลับไปใช้ Namecard",
+    "en": "Use namecard again"
+  },
+  "กลุ่มดาวที่แนะนำ": {
+    "th": "กลุ่มดาวที่แนะนำ",
+    "en": "Recommended Constellations"
+  },
+  "กำลังจัดทำเนื้อหา": {
+    "th": "กำลังจัดทำเนื้อหา",
+    "en": "Content in progress"
+  },
+  "กำลังสร้างบัญชี…": {
+    "th": "กำลังสร้างบัญชี…",
+    "en": "Creating account…"
+  },
+  "กำลังอัปโหลด…": {
+    "th": "กำลังอัปโหลด…",
+    "en": "Uploading…"
+  },
+  "กำลังเข้าสู่ระบบ…": {
+    "th": "กำลังเข้าสู่ระบบ…",
+    "en": "Signing in…"
+  },
+  "กำลังเริ่ม…": {
+    "th": "กำลังเริ่ม…",
+    "en": "Starting…"
+  },
+  "กู้คืน": {
+    "th": "กู้คืน",
+    "en": "Restore"
+  },
+  "กู้คืน Guide แล้ว": {
+    "th": "กู้คืน Guide แล้ว",
+    "en": "Guide restored"
+  },
+  "ขนาด Disclaimer": {
+    "th": "ขนาด Disclaimer",
+    "en": "Disclaimer size"
+  },
+  "ขอบคุณที่สนับสนุนระบบ Hosting ที่สามารถให้เว็บออนไลน์และพร้อมใช้งาน": {
+    "th": "ขอบคุณที่สนับสนุนระบบ Hosting ที่สามารถให้เว็บออนไลน์และพร้อมใช้งาน",
+    "en": "Thank you for supporting the hosting that keeps this website online and available."
+  },
+  "ขอบคุณที่เป็นส่วนสำคัญของเว็บไซด์นี้": {
+    "th": "ขอบคุณที่เป็นส่วนสำคัญของเว็บไซด์นี้",
+    "en": "Thank you for being an essential part of this website."
+  },
+  "ขอบคุณทุกคนที่มอบแรงสนับสนุนและเวลาให้เว็บไซต์นี้เกิดขึ้นได้": {
+    "th": "ขอบคุณทุกคนที่มอบแรงสนับสนุนและเวลาให้เว็บไซต์นี้เกิดขึ้นได้",
+    "en": "Thank you to everyone whose support and time made this website possible."
+  },
+  "ขีดฆ่า": {
+    "th": "ขีดฆ่า",
+    "en": "Strikethrough"
+  },
+  "ขีดเส้นใต้": {
+    "th": "ขีดเส้นใต้",
+    "en": "Underline"
+  },
+  "ข้อความ": {
+    "th": "ข้อความ",
+    "en": "Text"
+  },
+  "ข้อความ Custom Role": {
+    "th": "ข้อความ Custom Role",
+    "en": "Custom role text"
+  },
+  "ข้อความ รูปภาพ และเปอร์เซ็นต์ในแถวนี้จะถูกลบออกจาก Guide": {
+    "th": "ข้อความ รูปภาพ และเปอร์เซ็นต์ในแถวนี้จะถูกลบออกจาก Guide",
+    "en": "This row’s text, image, and percentage will be removed from the guide."
+  },
+  "ข้อความลิงก์": {
+    "th": "ข้อความลิงก์",
+    "en": "Link text"
+  },
+  "ข้อมูล Team และตัวละครทั้ง 4 คนจะถูกลบออกจาก Guide": {
+    "th": "ข้อมูล Team และตัวละครทั้ง 4 คนจะถูกลบออกจาก Guide",
+    "en": "This team and all four characters will be removed from the guide."
+  },
+  "ข้อมูล Weapons, Artifacts, Constellations, Team และ Extra ทั้งหมดจะกู้คืนไม่ได้": {
+    "th": "ข้อมูล Weapons, Artifacts, Constellations, Team และ Extra ทั้งหมดจะกู้คืนไม่ได้",
+    "en": "All weapon, artifact, constellation, team, and extra-section data will be permanently deleted."
+  },
+  "ข้อมูลทั้งหมดใน Condition นี้จะถูกลบออก": {
+    "th": "ข้อมูลทั้งหมดใน Condition นี้จะถูกลบออก",
+    "en": "All data in this condition will be deleted."
+  },
+  "ข้อมูลยังบันทึกไม่เสร็จ ต้องการสร้าง Extra ใหม่หรือไม่?": {
+    "th": "ข้อมูลยังบันทึกไม่เสร็จ ต้องการสร้าง Extra ใหม่หรือไม่?",
+    "en": "Changes have not finished saving. Create a new extra section anyway?"
+  },
+  "ข้อมูลยังบันทึกไม่เสร็จหรือไม่ถูกต้อง ต้องการออกจากหน้านี้หรือไม่?": {
+    "th": "ข้อมูลยังบันทึกไม่เสร็จหรือไม่ถูกต้อง ต้องการออกจากหน้านี้หรือไม่?",
+    "en": "Some changes are unsaved or invalid. Leave this page anyway?"
+  },
+  "คน": {
+    "th": "คน",
+    "en": "visitors"
+  },
+  "ครอปพื้นหลัง Namecard": {
+    "th": "ครอปพื้นหลัง Namecard",
+    "en": "Crop namecard background"
+  },
+  "ครอปภาพเป็น 1:1": {
+    "th": "ครอปภาพเป็น 1:1",
+    "en": "Crop image to 1:1"
+  },
+  "ครอปและซูมพื้นหลังเป็นสี่เหลี่ยมก่อนใช้งาน": {
+    "th": "ครอปและซูมพื้นหลังเป็นสี่เหลี่ยมก่อนใช้งาน",
+    "en": "Crop and zoom the background to a square before using it."
+  },
+  "คลังสื่อ": {
+    "th": "คลังสื่อ",
+    "en": "Media library"
+  },
+  "ความเข้ม": {
+    "th": "ความเข้ม",
+    "en": "Intensity"
+  },
+  "ความเข้มสี Fade": {
+    "th": "ความเข้มสี Fade",
+    "en": "Fade intensity"
+  },
+  "คอลัมน์ แถว และข้อมูลในเซลล์ทั้งหมดจะถูกลบออกจากการ์ด": {
+    "th": "คอลัมน์ แถว และข้อมูลในเซลล์ทั้งหมดจะถูกลบออกจากการ์ด",
+    "en": "All columns, rows, and cell contents will be removed from this card."
+  },
+  "คัดลอกค่าจาก": {
+    "th": "คัดลอกค่าจาก",
+    "en": "Copy values from"
+  },
+  "คำนวณความเสียหาย": {
+    "th": "คำนวณความเสียหาย",
+    "en": "Damage Calculation"
+  },
+  "คำนวณทีม": {
+    "th": "คำนวณทีม",
+    "en": "Team Calculation"
+  },
+  "ค่า": {
+    "th": "ค่า",
+    "en": "values"
+  },
+  "ค่าเริ่มต้นจะปรับให้พอดีกับความกว้างชื่ออัตโนมัติ": {
+    "th": "ค่าเริ่มต้นจะปรับให้พอดีกับความกว้างชื่ออัตโนมัติ",
+    "en": "The default size automatically fits the name’s width."
+  },
+  "ค้นหา": {
+    "th": "ค้นหา",
+    "en": "Search"
+  },
+  "ค้นหา Guide": {
+    "th": "ค้นหา Guide",
+    "en": "Search guides"
+  },
+  "ค้นหา Team": {
+    "th": "ค้นหา Team",
+    "en": "Search teams"
+  },
+  "ค้นหาชื่อ Guide หรือตัวละคร…": {
+    "th": "ค้นหาชื่อ Guide หรือตัวละคร…",
+    "en": "Search guide or character names…"
+  },
+  "ค้นหาชื่อตัวละคร…": {
+    "th": "ค้นหาชื่อตัวละคร…",
+    "en": "Search character names…"
+  },
+  "ค้นหาชื่อทีม ตัวละคร อาวุธ หรืออาร์ติแฟกต์": {
+    "th": "ค้นหาชื่อทีม ตัวละคร อาวุธ หรืออาร์ติแฟกต์",
+    "en": "Search team, character, weapon, or artifact names"
+  },
+  "ค้นหาชื่ออาวุธ…": {
+    "th": "ค้นหาชื่ออาวุธ…",
+    "en": "Search weapon names…"
+  },
+  "ค้นหาชุด Artifact แรก…": {
+    "th": "ค้นหาชุด Artifact แรก…",
+    "en": "Search the first artifact set…"
+  },
+  "ค้นหาชุด Artifact…": {
+    "th": "ค้นหาชุด Artifact…",
+    "en": "Search artifact sets…"
+  },
+  "ค้นหาชุดที่สอง (ถ้ามี)…": {
+    "th": "ค้นหาชุดที่สอง (ถ้ามี)…",
+    "en": "Search the second set (optional)…"
+  },
+  "ค้นหาตัวละคร": {
+    "th": "ค้นหาตัวละคร",
+    "en": "Search characters"
+  },
+  "ค้นหาตัวละคร…": {
+    "th": "ค้นหาตัวละคร…",
+    "en": "Search characters…"
+  },
+  "ค้นหาทีม ตัวละคร อาวุธ หรืออาร์ติแฟกต์": {
+    "th": "ค้นหาทีม ตัวละคร อาวุธ หรืออาร์ติแฟกต์",
+    "en": "Search teams, characters, weapons, or artifacts"
+  },
+  "ค้นหารายการ…": {
+    "th": "ค้นหารายการ…",
+    "en": "Search items…"
+  },
+  "ค้นหาอาวุธที่รองรับ…": {
+    "th": "ค้นหาอาวุธที่รองรับ…",
+    "en": "Search compatible weapons…"
+  },
+  "ค้นหาและเปิด Guide เพื่อเลือก Team ที่ต้องการ Import": {
+    "th": "ค้นหาและเปิด Guide เพื่อเลือก Team ที่ต้องการ Import",
+    "en": "Find and open a guide to choose teams to import."
+  },
+  "ค้นหาใน": {
+    "th": "ค้นหาใน",
+    "en": "Search in"
+  },
+  "ค้นหาไกด์": {
+    "th": "ค้นหาไกด์",
+    "en": "Search guides"
+  },
+  "ค้นหาไกด์…": {
+    "th": "ค้นหาไกด์…",
+    "en": "Search guides…"
+  },
+  "จัดการ Guide แบบภาพ-first และบันทึกขึ้นเว็บไซต์ทันที": {
+    "th": "จัดการ Guide แบบภาพ-first และบันทึกขึ้นเว็บไซต์ทันที",
+    "en": "Manage image-based guides and save changes directly to the website."
+  },
+  "จัดการบัญชี": {
+    "th": "จัดการบัญชี",
+    "en": "Manage Accounts"
+  },
+  "จัดชุด Artifact ในกลุ่ม Late Game และ Early Game ระบบจะบันทึกอัตโนมัติ": {
+    "th": "จัดชุด Artifact ในกลุ่ม Late Game และ Early Game ระบบจะบันทึกอัตโนมัติ",
+    "en": "Arrange artifact sets in Late Game and Early Game groups. Changes save automatically."
+  },
+  "จัดลำดับ Bleeding": {
+    "th": "จัดลำดับ Bleeding",
+    "en": "Reorder bleeding layers"
+  },
+  "จัดลำดับ Talent เลือกระดับเป้าหมาย และกำหนดความสำคัญ": {
+    "th": "จัดลำดับ Talent เลือกระดับเป้าหมาย และกำหนดความสำคัญ",
+    "en": "Arrange talents, choose target levels, and set their priority."
+  },
+  "ชื่อ": {
+    "th": "ชื่อ",
+    "en": "Name"
+  },
+  "ชื่อ Extra": {
+    "th": "ชื่อ Extra",
+    "en": "Extra section name"
+  },
+  "ชื่อ Extra section": {
+    "th": "ชื่อ Extra section",
+    "en": "Extra section name"
+  },
+  "ชื่อ Preset": {
+    "th": "ชื่อ Preset",
+    "en": "Preset name"
+  },
+  "ชื่อ Team": {
+    "th": "ชื่อ Team",
+    "en": "Team name"
+  },
+  "ชื่อ ธาตุ และประเภทอาวุธจะมาจาก Catalog": {
+    "th": "ชื่อ ธาตุ และประเภทอาวุธจะมาจาก Catalog",
+    "en": "The name, element, and weapon type come from the catalog."
+  },
+  "ชื่อ รายละเอียด และไอคอนมาจาก Lunaris อัตโนมัติ กรอกเฉพาะเปอร์เซ็นต์เทียบกับ C0 = 100%": {
+    "th": "ชื่อ รายละเอียด และไอคอนมาจาก Lunaris อัตโนมัติ กรอกเฉพาะเปอร์เซ็นต์เทียบกับ C0 = 100%",
+    "en": "Names, descriptions, and icons come from Lunaris. Enter percentages relative to C0 = 100%."
+  },
+  "ชื่อคอลัมน์": {
+    "th": "ชื่อคอลัมน์",
+    "en": "Column name"
+  },
+  "ชื่อทีม": {
+    "th": "ชื่อทีม",
+    "en": "Team name"
+  },
+  "ซูม": {
+    "th": "ซูม",
+    "en": "Zoom"
+  },
+  "ซ่อน": {
+    "th": "ซ่อน",
+    "en": "Hide"
+  },
+  "ซ่อนส่วนนี้": {
+    "th": "ซ่อนส่วนนี้",
+    "en": "Hide this section"
+  },
+  "ดาเมจทั้งทีม": {
+    "th": "ดาเมจทั้งทีม",
+    "en": "Overall Damage"
+  },
+  "ดาเมจรวม": {
+    "th": "ดาเมจรวม",
+    "en": "Total Damage"
+  },
+  "ดาเมจส่วนตัว": {
+    "th": "ดาเมจส่วนตัว",
+    "en": "Personal Damage"
+  },
+  "ดูโปรไฟล์": {
+    "th": "ดูโปรไฟล์",
+    "en": "View profile"
+  },
+  "ตัวละคร": {
+    "th": "ตัวละคร",
+    "en": "Character"
+  },
+  "ตัวละคร อาวุธ และอาร์ติแฟกต์": {
+    "th": "ตัวละคร อาวุธ และอาร์ติแฟกต์",
+    "en": "Characters, weapons, and artifacts"
+  },
+  "ตัวหนา": {
+    "th": "ตัวหนา",
+    "en": "Bold"
+  },
+  "ตัวอย่าง": {
+    "th": "ตัวอย่าง",
+    "en": "Preview"
+  },
+  "ตัวเอียง": {
+    "th": "ตัวเอียง",
+    "en": "Italic"
+  },
+  "ตั้งค่า Guide ของ": {
+    "th": "ตั้งค่า Guide ของ",
+    "en": "Set up the guide for"
+  },
+  "ตั้งค่าภาพ": {
+    "th": "ตั้งค่าภาพ",
+    "en": "Image Settings"
+  },
+  "ตั้งค่าเป้าหมายค่าสถานะสำหรับแต่ละ Condition": {
+    "th": "ตั้งค่าเป้าหมายค่าสถานะสำหรับแต่ละ Condition",
+    "en": "Set target stats for each condition."
+  },
+  "ตั้งชื่อที่ใช้อธิบายข้อมูลในคอลัมน์นี้": {
+    "th": "ตั้งชื่อที่ใช้อธิบายข้อมูลในคอลัมน์นี้",
+    "en": "Enter a name that describes this column’s data."
+  },
+  "ตั้งชื่อส่วนเสริม ระบบจะสร้างและเปิดหน้าแก้ไขให้ทันที": {
+    "th": "ตั้งชื่อส่วนเสริม ระบบจะสร้างและเปิดหน้าแก้ไขให้ทันที",
+    "en": "Name the extra section. Its editor will open as soon as it is created."
+  },
+  "ตามชื่ออัตโนมัติ": {
+    "th": "ตามชื่ออัตโนมัติ",
+    "en": "Automatically match name"
+  },
+  "ตารางข้อมูล (optional)": {
+    "th": "ตารางข้อมูล (optional)",
+    "en": "Data table (optional)"
+  },
+  "ตารางข้อมูลเสริม": {
+    "th": "ตารางข้อมูลเสริม",
+    "en": "Additional data table"
+  },
+  "ตำแหน่งภาพ": {
+    "th": "ตำแหน่งภาพ",
+    "en": "Image Position"
+  },
+  "ถังขยะ": {
+    "th": "ถังขยะ",
+    "en": "Trash"
+  },
+  "ทั้งหมด": {
+    "th": "ทั้งหมด",
+    "en": "All"
+  },
+  "ทำซ้ำ": {
+    "th": "ทำซ้ำ",
+    "en": "Redo"
+  },
+  "ทำซ้ำการแก้ไขตาราง": {
+    "th": "ทำซ้ำการแก้ไขตาราง",
+    "en": "Redo table edit"
+  },
+  "ทำสำเนา Team": {
+    "th": "ทำสำเนา Team",
+    "en": "Duplicate team"
+  },
+  "ทุกภาพจะเปิดหน้าต่างให้ครอป ซูม และจัดตำแหน่งก่อนใช้งาน": {
+    "th": "ทุกภาพจะเปิดหน้าต่างให้ครอป ซูม และจัดตำแหน่งก่อนใช้งาน",
+    "en": "Each image opens a dialog to crop, zoom, and position it before use."
+  },
+  "ธีมและเอฟเฟกต์": {
+    "th": "ธีมและเอฟเฟกต์",
+    "en": "Theme and Effects"
+  },
+  "บัญชี": {
+    "th": "บัญชี",
+    "en": "accounts"
+  },
+  "บัญชีทุกบัญชีมีสิทธิ์ผู้ดูแลระบบ": {
+    "th": "บัญชีทุกบัญชีมีสิทธิ์ผู้ดูแลระบบ",
+    "en": "Every account has administrator access."
+  },
+  "บัญชีปัจจุบัน": {
+    "th": "บัญชีปัจจุบัน",
+    "en": "Current account"
+  },
+  "บัญชีในระบบ": {
+    "th": "บัญชีในระบบ",
+    "en": "Accounts"
+  },
+  "บันทึก": {
+    "th": "บันทึก",
+    "en": "Save"
+  },
+  "บันทึก Local draft ไม่สำเร็จ กรุณาตรวจสอบพื้นที่ของเบราว์เซอร์": {
+    "th": "บันทึก Local draft ไม่สำเร็จ กรุณาตรวจสอบพื้นที่ของเบราว์เซอร์",
+    "en": "Could not save the local draft. Please check your browser’s storage."
+  },
+  "บันทึก Source Team นี้ไว้ใช้กับ Guide นี้ในเบราว์เซอร์นี้": {
+    "th": "บันทึก Source Team นี้ไว้ใช้กับ Guide นี้ในเบราว์เซอร์นี้",
+    "en": "Save this source team for this guide in this browser."
+  },
+  "บันทึกชื่อ": {
+    "th": "บันทึกชื่อ",
+    "en": "Save name"
+  },
+  "บันทึกลิงก์": {
+    "th": "บันทึกลิงก์",
+    "en": "Save link"
+  },
+  "บันทึกเซลล์": {
+    "th": "บันทึกเซลล์",
+    "en": "Save cells"
+  },
+  "ประเภท": {
+    "th": "ประเภท",
+    "en": "Type"
+  },
+  "ปิด": {
+    "th": "ปิด",
+    "en": "Close"
+  },
+  "ผูกคำค้นแบบย่อกับรายการจาก Catalog": {
+    "th": "ผูกคำค้นแบบย่อกับรายการจาก Catalog",
+    "en": "Link a search shortcut to a catalog item."
+  },
+  "ผู้สนับสนุนหลักด้าน Development": {
+    "th": "ผู้สนับสนุนหลักด้าน Development",
+    "en": "Main Development Sponsor"
+  },
+  "ผู้เข้าชม Guide นี้ที่กำลังออนไลน์": {
+    "th": "ผู้เข้าชม Guide นี้ที่กำลังออนไลน์",
+    "en": "Visitors currently viewing this guide"
+  },
+  "ผู้เข้าชมทั้งหมดที่กำลังออนไลน์": {
+    "th": "ผู้เข้าชมทั้งหมดที่กำลังออนไลน์",
+    "en": "All visitors currently online"
+  },
+  "ผู้ใช้นี้จะออกจากระบบและไม่สามารถเข้าสู่ระบบได้อีก การดำเนินการนี้ย้อนกลับไม่ได้": {
+    "th": "ผู้ใช้นี้จะออกจากระบบและไม่สามารถเข้าสู่ระบบได้อีก การดำเนินการนี้ย้อนกลับไม่ได้",
+    "en": "This user will be signed out and will no longer be able to sign in. This cannot be undone."
+  },
+  "พื้นหลัง Namecard": {
+    "th": "พื้นหลัง Namecard",
+    "en": "Namecard Background"
+  },
+  "ภาพ ข้อความ และวิดีโอนี้แสดงบนหน้าแรกของ Guide": {
+    "th": "ภาพ ข้อความ และวิดีโอนี้แสดงบนหน้าแรกของ Guide",
+    "en": "This image, text, and videos appear on the guide’s overview page."
+  },
+  "ภาพจะถูกนำออกจากแถวนี้": {
+    "th": "ภาพจะถูกนำออกจากแถวนี้",
+    "en": "The image will be removed from this row."
+  },
+  "ภาพดาวน์โหลดจะใช้เลย์เอาต์เดียวกับตัวอย่าง": {
+    "th": "ภาพดาวน์โหลดจะใช้เลย์เอาต์เดียวกับตัวอย่าง",
+    "en": "The downloaded image uses the same layout as the preview."
+  },
+  "ภาพตัวละคร 1:1": {
+    "th": "ภาพตัวละคร 1:1",
+    "en": "Square Character Image"
+  },
+  "ภาพรวมแนวทาง": {
+    "th": "ภาพรวมแนวทาง",
+    "en": "Guide Overview"
+  },
+  "มากกว่า": {
+    "th": "มากกว่า",
+    "en": "Greater than"
+  },
+  "มากกว่าหรือเท่ากับ": {
+    "th": "มากกว่าหรือเท่ากับ",
+    "en": "Greater than or equal to"
+  },
+  "มี Guide แล้ว": {
+    "th": "มี Guide แล้ว",
+    "en": "Guide already exists"
+  },
+  "มีไฟล์ Team ที่ไม่ถูกต้องหรือเป็นเวอร์ชันที่ไม่รองรับ": {
+    "th": "มีไฟล์ Team ที่ไม่ถูกต้องหรือเป็นเวอร์ชันที่ไม่รองรับ",
+    "en": "Some team files are invalid or use an unsupported version."
+  },
+  "มุมสีไล่ระดับธาตุ": {
+    "th": "มุมสีไล่ระดับธาตุ",
+    "en": "Element gradient angle"
+  },
+  "ยกเลิก": {
+    "th": "ยกเลิก",
+    "en": "Cancel"
+  },
+  "ยังไม่ Sync": {
+    "th": "ยังไม่ Sync",
+    "en": "Not synced yet"
+  },
+  "ยังไม่มี Extra": {
+    "th": "ยังไม่มี Extra",
+    "en": "No extra sections yet"
+  },
+  "ยังไม่มี Guide": {
+    "th": "ยังไม่มี Guide",
+    "en": "No guides yet"
+  },
+  "ยังไม่มี Team ใน Condition นี้": {
+    "th": "ยังไม่มี Team ใน Condition นี้",
+    "en": "No teams in this condition yet"
+  },
+  "ยังไม่มีบัญชี?": {
+    "th": "ยังไม่มีบัญชี?",
+    "en": "No account yet?"
+  },
+  "ยังไม่มีวิดีโอใน Overview": {
+    "th": "ยังไม่มีวิดีโอใน Overview",
+    "en": "No overview videos yet"
+  },
+  "ยืนยัน Private": {
+    "th": "ยืนยัน Private",
+    "en": "Make private"
+  },
+  "ยืนยัน Public": {
+    "th": "ยืนยัน Public",
+    "en": "Publish"
+  },
+  "ยืนยันการคัดลอก": {
+    "th": "ยืนยันการคัดลอก",
+    "en": "Confirm copy"
+  },
+  "ยืนยันตัวตนไม่สำเร็จ โปรดลองอีกครั้ง": {
+    "th": "ยืนยันตัวตนไม่สำเร็จ โปรดลองอีกครั้ง",
+    "en": "Verification failed. Please try again."
+  },
+  "ยืนยันรหัสผ่าน": {
+    "th": "ยืนยันรหัสผ่าน",
+    "en": "Confirm password"
+  },
+  "ยืนยันลบ Team": {
+    "th": "ยืนยันลบ Team",
+    "en": "Delete team"
+  },
+  "ยืนยันลบตาราง": {
+    "th": "ยืนยันลบตาราง",
+    "en": "Delete table"
+  },
+  "ยืนยันลบถาวร": {
+    "th": "ยืนยันลบถาวร",
+    "en": "Delete permanently"
+  },
+  "ยืนยันลบภาพ": {
+    "th": "ยืนยันลบภาพ",
+    "en": "Delete image"
+  },
+  "ย้อนกลับ": {
+    "th": "ย้อนกลับ",
+    "en": "Undo"
+  },
+  "ย้อนกลับการแก้ไขตาราง": {
+    "th": "ย้อนกลับการแก้ไขตาราง",
+    "en": "Undo table edit"
+  },
+  "ย้าย": {
+    "th": "ย้าย",
+    "en": "Move"
+  },
+  "ย้ายไปถังขยะ": {
+    "th": "ย้ายไปถังขยะ",
+    "en": "Move to trash"
+  },
+  "รหัสผ่าน": {
+    "th": "รหัสผ่าน",
+    "en": "Password"
+  },
+  "รองรับเฉพาะ PNG, JPEG, WebP และ GIF": {
+    "th": "รองรับเฉพาะ PNG, JPEG, WebP และ GIF",
+    "en": "Only PNG, JPEG, WebP, and GIF are supported."
+  },
+  "ระดับ": {
+    "th": "ระดับ",
+    "en": "Level"
+  },
+  "ระดับเป้าหมาย": {
+    "th": "ระดับเป้าหมาย",
+    "en": "Target level"
+  },
+  "รายการ": {
+    "th": "รายการ",
+    "en": "items"
+  },
+  "รายการอาวุธและเปอร์เซ็นต์เปรียบเทียบจะถูกลบออกจาก Guide": {
+    "th": "รายการอาวุธและเปอร์เซ็นต์เปรียบเทียบจะถูกลบออกจาก Guide",
+    "en": "The weapon and its comparison percentages will be removed from the guide."
+  },
+  "รายชื่อผู้สนับสนุน": {
+    "th": "รายชื่อผู้สนับสนุน",
+    "en": "Supporters"
+  },
+  "รีเซ็ตตำแหน่งตัวละครและ Fade": {
+    "th": "รีเซ็ตตำแหน่งตัวละครและ Fade",
+    "en": "Reset character and fade positions"
+  },
+  "รูปแบบข้อความ": {
+    "th": "รูปแบบข้อความ",
+    "en": "Text formatting"
+  },
+  "ลบ Artifact": {
+    "th": "ลบ Artifact",
+    "en": "Delete artifact"
+  },
+  "ลบ Bleeding": {
+    "th": "ลบ Bleeding",
+    "en": "Delete bleeding layer"
+  },
+  "ลบ Blend mode": {
+    "th": "ลบ Blend mode",
+    "en": "Delete blend mode"
+  },
+  "ลบ Condition นี้": {
+    "th": "ลบ Condition นี้",
+    "en": "Delete this condition"
+  },
+  "ลบ Condition นี้?": {
+    "th": "ลบ Condition นี้?",
+    "en": "Delete this condition?"
+  },
+  "ลบ Extra แล้ว": {
+    "th": "ลบ Extra แล้ว",
+    "en": "Extra section deleted"
+  },
+  "ลบ Shortcut แล้ว": {
+    "th": "ลบ Shortcut แล้ว",
+    "en": "Shortcut deleted"
+  },
+  "ลบ Team": {
+    "th": "ลบ Team",
+    "en": "Delete team"
+  },
+  "ลบตาราง": {
+    "th": "ลบตาราง",
+    "en": "Delete table"
+  },
+  "ลบตารางนี้?": {
+    "th": "ลบตารางนี้?",
+    "en": "Delete this table?"
+  },
+  "ลบถาวร": {
+    "th": "ลบถาวร",
+    "en": "Delete permanently"
+  },
+  "ลบบัญชี": {
+    "th": "ลบบัญชี",
+    "en": "Delete account"
+  },
+  "ลบบัญชีแล้ว": {
+    "th": "ลบบัญชีแล้ว",
+    "en": "Account deleted"
+  },
+  "ลบภาพ": {
+    "th": "ลบภาพ",
+    "en": "Remove image"
+  },
+  "ลบภาพตัวละคร": {
+    "th": "ลบภาพตัวละคร",
+    "en": "Remove character image"
+  },
+  "ลบภาพนี้?": {
+    "th": "ลบภาพนี้?",
+    "en": "Remove this image?"
+  },
+  "ลบลิงก์": {
+    "th": "ลบลิงก์",
+    "en": "Remove link"
+  },
+  "ลบสำเร็จ!": {
+    "th": "ลบสำเร็จ!",
+    "en": "Deleted successfully!"
+  },
+  "ลบส่วน": {
+    "th": "ลบส่วน",
+    "en": "Delete section"
+  },
+  "ลบอาวุธ": {
+    "th": "ลบอาวุธ",
+    "en": "Delete weapon"
+  },
+  "ลบแถว": {
+    "th": "ลบแถว",
+    "en": "Delete row"
+  },
+  "ลองค้นหาด้วยชื่อ Guide หรือตัวละครอื่น": {
+    "th": "ลองค้นหาด้วยชื่อ Guide หรือตัวละครอื่น",
+    "en": "Try another guide or character name."
+  },
+  "ลองค้นหาด้วยชื่อตัวละครอื่น": {
+    "th": "ลองค้นหาด้วยชื่อตัวละครอื่น",
+    "en": "Try another character name."
+  },
+  "ลองเปลี่ยนคำค้นหาหรือประเภทข้อมูล": {
+    "th": "ลองเปลี่ยนคำค้นหาหรือประเภทข้อมูล",
+    "en": "Try a different search or category."
+  },
+  "ลากภาพหรือใช้ปุ่มลูกศรเพื่อเลือกพื้นที่ครอปสี่เหลี่ยม": {
+    "th": "ลากภาพหรือใช้ปุ่มลูกศรเพื่อเลือกพื้นที่ครอปสี่เหลี่ยม",
+    "en": "Drag the image or use the arrow keys to select a square crop."
+  },
+  "ลากภาพหรือใช้ปุ่มลูกศรเพื่อเลือกพื้นหลังสี่เหลี่ยม": {
+    "th": "ลากภาพหรือใช้ปุ่มลูกศรเพื่อเลือกพื้นหลังสี่เหลี่ยม",
+    "en": "Drag the image or use the arrow keys to select a square background."
+  },
+  "ลากเพื่อจัดลำดับ": {
+    "th": "ลากเพื่อจัดลำดับ",
+    "en": "Drag to reorder"
+  },
+  "ลากเพื่อจัดลำดับ Artifact": {
+    "th": "ลากเพื่อจัดลำดับ Artifact",
+    "en": "Drag to reorder artifacts"
+  },
+  "ลากเพื่อจัดลำดับ Blend mode": {
+    "th": "ลากเพื่อจัดลำดับ Blend mode",
+    "en": "Drag to reorder blend modes"
+  },
+  "ลากเพื่อจัดลำดับ Team": {
+    "th": "ลากเพื่อจัดลำดับ Team",
+    "en": "Drag to reorder teams"
+  },
+  "ลากเพื่อจัดลำดับอาวุธ": {
+    "th": "ลากเพื่อจัดลำดับอาวุธ",
+    "en": "Drag to reorder weapons"
+  },
+  "ลากเพื่อย้ายตำแหน่งตัวละคร": {
+    "th": "ลากเพื่อย้ายตำแหน่งตัวละคร",
+    "en": "Drag to move the character"
+  },
+  "ลากเพื่อเรียง Team แล้วใส่ความเสียหายของตัวละคร 4 ตัว ระบบจะแสดงสัดส่วนและ Total DPS และบันทึกอัตโนมัติ": {
+    "th": "ลากเพื่อเรียง Team แล้วใส่ความเสียหายของตัวละคร 4 ตัว ระบบจะแสดงสัดส่วนและ Total DPS และบันทึกอัตโนมัติ",
+    "en": "Drag to reorder teams and enter damage for four characters. Damage shares and total DPS are calculated and saved automatically."
+  },
+  "ลากเพื่อเรียงอาวุธจากดีที่สุดลงมา และกรอกเปอร์เซ็นต์อย่างน้อยหนึ่งช่อง ระบบจะบันทึกอัตโนมัติ": {
+    "th": "ลากเพื่อเรียงอาวุธจากดีที่สุดลงมา และกรอกเปอร์เซ็นต์อย่างน้อยหนึ่งช่อง ระบบจะบันทึกอัตโนมัติ",
+    "en": "Drag to rank weapons from best to worst and enter at least one percentage. Changes save automatically."
+  },
+  "ลากเพื่อเลื่อนภาพตัวละคร": {
+    "th": "ลากเพื่อเลื่อนภาพตัวละคร",
+    "en": "Drag to move the character image"
+  },
+  "ลากและซูม Namecard เพื่อเลือกพื้นที่ด้านหลังตัวละคร": {
+    "th": "ลากและซูม Namecard เพื่อเลือกพื้นที่ด้านหลังตัวละคร",
+    "en": "Drag and zoom the namecard to choose the background behind the character."
+  },
+  "ล้างสีข้อความ": {
+    "th": "ล้างสีข้อความ",
+    "en": "Clear text colour"
+  },
+  "ล้างสีพื้นหลัง": {
+    "th": "ล้างสีพื้นหลัง",
+    "en": "Clear background colour"
+  },
+  "วิ": {
+    "th": "วิ",
+    "en": "sec"
+  },
+  "วินาที": {
+    "th": "วินาที",
+    "en": "seconds"
+  },
+  "สรุปแนวทางเล่น จุดเด่น และสิ่งที่ผู้ชมจะพบใน Guide นี้": {
+    "th": "สรุปแนวทางเล่น จุดเด่น และสิ่งที่ผู้ชมจะพบใน Guide นี้",
+    "en": "Summarise the playstyle, strengths, and what readers will find in this guide."
+  },
+  "สร้าง Extra": {
+    "th": "สร้าง Extra",
+    "en": "Create extra section"
+  },
+  "สร้าง Extra แล้ว": {
+    "th": "สร้าง Extra แล้ว",
+    "en": "Extra section created"
+  },
+  "สร้าง Guide": {
+    "th": "สร้าง Guide",
+    "en": "Create guide"
+  },
+  "สร้าง Guide แล้ว": {
+    "th": "สร้าง Guide แล้ว",
+    "en": "Guide created"
+  },
+  "สร้าง Guide ใหม่": {
+    "th": "สร้าง Guide ใหม่",
+    "en": "Create a New Guide"
+  },
+  "สร้างบัญชี": {
+    "th": "สร้างบัญชี",
+    "en": "Create Account"
+  },
+  "สร้างบัญชีเลย": {
+    "th": "สร้างบัญชีเลย",
+    "en": "Create an account"
+  },
+  "สร้างบัญชีแล้ว": {
+    "th": "สร้างบัญชีแล้ว",
+    "en": "Account created"
+  },
+  "สร้างบัญชีให้ผู้ดูแลคนอื่น หรือลบบัญชีที่ไม่ต้องใช้งานแล้ว": {
+    "th": "สร้างบัญชีให้ผู้ดูแลคนอื่น หรือลบบัญชีที่ไม่ต้องใช้งานแล้ว",
+    "en": "Create accounts for other admins or delete accounts that are no longer needed."
+  },
+  "สร้างบัญชีไม่สำเร็จ": {
+    "th": "สร้างบัญชีไม่สำเร็จ",
+    "en": "Could not create the account."
+  },
+  "สร้างภาพ Overview": {
+    "th": "สร้างภาพ Overview",
+    "en": "Create Overview Image"
+  },
+  "สร้างหรือบันทึก Team ใน Guide อื่นก่อน": {
+    "th": "สร้างหรือบันทึก Team ใน Guide อื่นก่อน",
+    "en": "Create or save a team in another guide first."
+  },
+  "สร้างและดาวน์โหลดภาพ PNG ขนาด 3000×3000 โดยไม่เปลี่ยนภาพใน Guide": {
+    "th": "สร้างและดาวน์โหลดภาพ PNG ขนาด 3000×3000 โดยไม่เปลี่ยนภาพใน Guide",
+    "en": "Create and download a 3000×3000 PNG without changing the guide’s image."
+  },
+  "สารบัญบนมือถือ": {
+    "th": "สารบัญบนมือถือ",
+    "en": "Mobile table of contents"
+  },
+  "สารบัญหน้านี้": {
+    "th": "สารบัญหน้านี้",
+    "en": "On this page"
+  },
+  "สี Fade": {
+    "th": "สี Fade",
+    "en": "Fade colour"
+  },
+  "สีขอบบน สิ้นสุด": {
+    "th": "สีขอบบน สิ้นสุด",
+    "en": "Top border end colour"
+  },
+  "สีขอบบน เริ่มต้น": {
+    "th": "สีขอบบน เริ่มต้น",
+    "en": "Top border start colour"
+  },
+  "สีขอบบนและล่างจะตรวจจากภาพตัวละครโดยอัตโนมัติเมื่ออัปโหลด": {
+    "th": "สีขอบบนและล่างจะตรวจจากภาพตัวละครโดยอัตโนมัติเมื่ออัปโหลด",
+    "en": "Top and bottom border colours are detected automatically when you upload the character image."
+  },
+  "สีขอบบนและล่างจะตรวจจากภาพตัวละครโดยอัตโนมัติเมื่ออัปโหลด และแก้ไขเองได้": {
+    "th": "สีขอบบนและล่างจะตรวจจากภาพตัวละครโดยอัตโนมัติเมื่ออัปโหลด และแก้ไขเองได้",
+    "en": "Top and bottom border colours are detected on upload. You can also adjust them manually."
+  },
+  "สีขอบล่าง สิ้นสุด": {
+    "th": "สีขอบล่าง สิ้นสุด",
+    "en": "Bottom border end colour"
+  },
+  "สีขอบล่าง เริ่มต้น": {
+    "th": "สีขอบล่าง เริ่มต้น",
+    "en": "Bottom border start colour"
+  },
+  "สีข้อความ": {
+    "th": "สีข้อความ",
+    "en": "Text colour"
+  },
+  "สีจะใช้เฉพาะการ์ดนี้บนหน้า Guide": {
+    "th": "สีจะใช้เฉพาะการ์ดนี้บนหน้า Guide",
+    "en": "This colour applies only to this card on the guide page."
+  },
+  "สีธีม": {
+    "th": "สีธีม",
+    "en": "Theme Colours"
+  },
+  "สีพื้นหลัง": {
+    "th": "สีพื้นหลัง",
+    "en": "Background colour"
+  },
+  "สีพื้นหลังการ์ด (optional)": {
+    "th": "สีพื้นหลังการ์ด (optional)",
+    "en": "Card background colour (optional)"
+  },
+  "สีไล่ระดับธาตุ สิ้นสุด": {
+    "th": "สีไล่ระดับธาตุ สิ้นสุด",
+    "en": "Element gradient end colour"
+  },
+  "สีไล่ระดับธาตุ เริ่มต้น": {
+    "th": "สีไล่ระดับธาตุ เริ่มต้น",
+    "en": "Element gradient start colour"
+  },
+  "หน้านี้อาจถูกซ่อน เปลี่ยนชื่อ หรือยังไม่มีเนื้อหาที่เผยแพร่": {
+    "th": "หน้านี้อาจถูกซ่อน เปลี่ยนชื่อ หรือยังไม่มีเนื้อหาที่เผยแพร่",
+    "en": "This page may be hidden, renamed, or not published yet."
+  },
+  "หมุนขวา": {
+    "th": "หมุนขวา",
+    "en": "Rotate right"
+  },
+  "หมุนซ้าย": {
+    "th": "หมุนซ้าย",
+    "en": "Rotate left"
+  },
+  "หมุนภาพไม่สำเร็จ กรุณาลองอีกครั้ง": {
+    "th": "หมุนภาพไม่สำเร็จ กรุณาลองอีกครั้ง",
+    "en": "Could not rotate the image. Please try again."
+  },
+  "หัวข้อ": {
+    "th": "หัวข้อ",
+    "en": "Heading"
+  },
+  "อย่างน้อย 8 ตัวอักษร": {
+    "th": "อย่างน้อย 8 ตัวอักษร",
+    "en": "At least 8 characters"
+  },
+  "ออกจากระบบ": {
+    "th": "ออกจากระบบ",
+    "en": "Sign out"
+  },
+  "อัตโนมัติ": {
+    "th": "อัตโนมัติ",
+    "en": "Automatic"
+  },
+  "อันดับ": {
+    "th": "อันดับ",
+    "en": "Rank"
+  },
+  "อัปโหลดพื้นหลัง": {
+    "th": "อัปโหลดพื้นหลัง",
+    "en": "Upload background"
+  },
+  "อัปโหลดภาพตัวละคร แล้วลากบนตัวอย่างเพื่อจัดตำแหน่ง สีด้านบนและล่างจะตรวจให้อัตโนมัติ": {
+    "th": "อัปโหลดภาพตัวละคร แล้วลากบนตัวอย่างเพื่อจัดตำแหน่ง สีด้านบนและล่างจะตรวจให้อัตโนมัติ",
+    "en": "Upload a character image and drag it in the preview to position it. Top and bottom colours are detected automatically."
+  },
+  "อัปโหลดภาพสี่เหลี่ยมสำหรับหน้าแรกของ Guide": {
+    "th": "อัปโหลดภาพสี่เหลี่ยมสำหรับหน้าแรกของ Guide",
+    "en": "Upload a square image for the guide’s overview page."
+  },
+  "อัปโหลดภาพเพื่อเพิ่ม Bleeding layer": {
+    "th": "อัปโหลดภาพเพื่อเพิ่ม Bleeding layer",
+    "en": "Upload an image to add a bleeding layer."
+  },
+  "อัปโหลดรูปภาพแล้ว": {
+    "th": "อัปโหลดรูปภาพแล้ว",
+    "en": "Image uploaded"
+  },
+  "อัปโหลดและเพิ่มรูปภาพ": {
+    "th": "อัปโหลดและเพิ่มรูปภาพ",
+    "en": "Upload and add image"
+  },
+  "อัปโหลดไฟล์ JSON": {
+    "th": "อัปโหลดไฟล์ JSON",
+    "en": "Upload JSON files"
+  },
+  "อาร์ติแฟกต์": {
+    "th": "อาร์ติแฟกต์",
+    "en": "Artifact"
+  },
+  "อาวุธ": {
+    "th": "อาวุธ",
+    "en": "Weapon"
+  },
+  "อาวุธที่แนะนำ": {
+    "th": "อาวุธที่แนะนำ",
+    "en": "Recommended Weapons"
+  },
+  "อีเมล": {
+    "th": "อีเมล",
+    "en": "Email"
+  },
+  "เข้าสู่ระบบ": {
+    "th": "เข้าสู่ระบบ",
+    "en": "Sign in"
+  },
+  "เข้าสู่ระบบผู้ดูแล": {
+    "th": "เข้าสู่ระบบผู้ดูแล",
+    "en": "Admin Sign In"
+  },
+  "เข้าสู่ระบบไม่สำเร็จ": {
+    "th": "เข้าสู่ระบบไม่สำเร็จ",
+    "en": "Sign-in failed"
+  },
+  "เชื่อมต่อระบบเข้าสู่ระบบไม่ได้ โปรดลองอีกครั้ง": {
+    "th": "เชื่อมต่อระบบเข้าสู่ระบบไม่ได้ โปรดลองอีกครั้ง",
+    "en": "Could not connect to the sign-in service. Please try again."
+  },
+  "เช่น Buffer": {
+    "th": "เช่น Buffer",
+    "en": "For example, Buffer"
+  },
+  "เซลล์": {
+    "th": "เซลล์",
+    "en": "cells"
+  },
+  "เท่ากับ": {
+    "th": "เท่ากับ",
+    "en": "Equal to"
+  },
+  "เปรียบเทียบดาเมจอาวุธ": {
+    "th": "เปรียบเทียบดาเมจอาวุธ",
+    "en": "Weapon Damage Comparison"
+  },
+  "เปอร์เซ็นต์ดาเมจของอาวุธทั้งหมดใน Condition นี้": {
+    "th": "เปอร์เซ็นต์ดาเมจของอาวุธทั้งหมดใน Condition นี้",
+    "en": "Damage percentages for all weapons in this condition"
+  },
+  "เปิด Guide": {
+    "th": "เปิด Guide",
+    "en": "Open guide"
+  },
+  "เปิดดูคำแนะนำฉบับเต็ม": {
+    "th": "เปิดดูคำแนะนำฉบับเต็ม",
+    "en": "Read the full guide"
+  },
+  "เปิดรายการ Guide": {
+    "th": "เปิดรายการ Guide",
+    "en": "Browse guides"
+  },
+  "เปิดหน้าเว็บไซต์": {
+    "th": "เปิดหน้าเว็บไซต์",
+    "en": "Open website"
+  },
+  "เพิ่ม Blend mode": {
+    "th": "เพิ่ม Blend mode",
+    "en": "Add blend mode"
+  },
+  "เพิ่ม Condition": {
+    "th": "เพิ่ม Condition",
+    "en": "Add condition"
+  },
+  "เพิ่ม Extra": {
+    "th": "เพิ่ม Extra",
+    "en": "Add extra section"
+  },
+  "เพิ่ม Extra section": {
+    "th": "เพิ่ม Extra section",
+    "en": "Add Extra Section"
+  },
+  "เพิ่ม Shortcut": {
+    "th": "เพิ่ม Shortcut",
+    "en": "Add shortcut"
+  },
+  "เพิ่ม Shortcut แล้ว": {
+    "th": "เพิ่ม Shortcut แล้ว",
+    "en": "Shortcut added"
+  },
+  "เพิ่ม Team": {
+    "th": "เพิ่ม Team",
+    "en": "Add team"
+  },
+  "เพิ่ม Team เพื่อเริ่มจัดตัวละครและคำนวณ DPS": {
+    "th": "เพิ่ม Team เพื่อเริ่มจัดตัวละครและคำนวณ DPS",
+    "en": "Add a team to arrange characters and calculate DPS."
+  },
+  "เพิ่ม effect": {
+    "th": "เพิ่ม effect",
+    "en": "Add effect"
+  },
+  "เพิ่มคอลัมน์": {
+    "th": "เพิ่มคอลัมน์",
+    "en": "Add column"
+  },
+  "เพิ่มชุด Artifact": {
+    "th": "เพิ่มชุด Artifact",
+    "en": "Add artifact set"
+  },
+  "เพิ่มตาราง 2 × 2": {
+    "th": "เพิ่มตาราง 2 × 2",
+    "en": "Add a 2 × 2 table"
+  },
+  "เพิ่มบัญชีผู้ดูแลที่สามารถเข้าสู่ระบบและจัดการเนื้อหาได้": {
+    "th": "เพิ่มบัญชีผู้ดูแลที่สามารถเข้าสู่ระบบและจัดการเนื้อหาได้",
+    "en": "Add an admin account that can sign in and manage content."
+  },
+  "เพิ่มภาพหน้าปก และใส่ Overview ได้หากต้องการ": {
+    "th": "เพิ่มภาพหน้าปก และใส่ Overview ได้หากต้องการ",
+    "en": "Add a cover image and an optional overview."
+  },
+  "เพิ่มลิงก์": {
+    "th": "เพิ่มลิงก์",
+    "en": "Add link"
+  },
+  "เพิ่มส่วนเสริมแบบภาพ หัวข้อ ข้อความที่จัดรูปแบบได้ และเปอร์เซ็นต์ ระบบจะบันทึกอัตโนมัติ": {
+    "th": "เพิ่มส่วนเสริมแบบภาพ หัวข้อ ข้อความที่จัดรูปแบบได้ และเปอร์เซ็นต์ ระบบจะบันทึกอัตโนมัติ",
+    "en": "Add sections with images, headings, formatted text, and percentages. Changes save automatically."
+  },
+  "เพิ่มอาวุธ": {
+    "th": "เพิ่มอาวุธ",
+    "en": "Add weapon"
+  },
+  "เพิ่มแถว": {
+    "th": "เพิ่มแถว",
+    "en": "Add row"
+  },
+  "เพิ่มได้หลายแบบ และลากที่ไอคอนเพื่อจัดลำดับการผสมสี": {
+    "th": "เพิ่มได้หลายแบบ และลากที่ไอคอนเพื่อจัดลำดับการผสมสี",
+    "en": "Add multiple blend modes and drag their icons to reorder them."
+  },
+  "เมนูแก้ไข Guide": {
+    "th": "เมนูแก้ไข Guide",
+    "en": "Guide editor navigation"
+  },
+  "เยี่ยมชม Astral": {
+    "th": "เยี่ยมชม Astral",
+    "en": "Visit Astral"
+  },
+  "เรียงทีมตาม DPS": {
+    "th": "เรียงทีมตาม DPS",
+    "en": "Sort teams by DPS"
+  },
+  "เลือก": {
+    "th": "เลือก",
+    "en": "Select"
+  },
+  "เลือก Blend mode…": {
+    "th": "เลือก Blend mode…",
+    "en": "Choose a blend mode…"
+  },
+  "เลือก Condition หรือ Guide อื่นเพื่อ Import": {
+    "th": "เลือก Condition หรือ Guide อื่นเพื่อ Import",
+    "en": "Choose another condition or guide to import from."
+  },
+  "เลือก Guide": {
+    "th": "เลือก Guide",
+    "en": "Choose Guide"
+  },
+  "เลือก Team จาก Guide อื่น หรืออัปโหลดไฟล์ JSON ที่เคย Export ไว้": {
+    "th": "เลือก Team จาก Guide อื่น หรืออัปโหลดไฟล์ JSON ที่เคย Export ไว้",
+    "en": "Choose teams from another guide or upload previously exported JSON files."
+  },
+  "เลือก Team ที่ต้องการ สามารถย้อนกลับไปเลือกจาก Guide อื่นเพิ่มได้": {
+    "th": "เลือก Team ที่ต้องการ สามารถย้อนกลับไปเลือกจาก Guide อื่นเพิ่มได้",
+    "en": "Select teams to import. You can go back and add teams from other guides."
+  },
+  "เลือก Team ที่บันทึกอยู่ใน Guide อื่นได้โดยไม่ต้องดาวน์โหลดไฟล์": {
+    "th": "เลือก Team ที่บันทึกอยู่ใน Guide อื่นได้โดยไม่ต้องดาวน์โหลดไฟล์",
+    "en": "Choose teams saved in another guide without downloading files."
+  },
+  "เลือก Team สำหรับ Multiple Apply": {
+    "th": "เลือก Team สำหรับ Multiple Apply",
+    "en": "Select teams for bulk apply"
+  },
+  "เลือกจาก Guide": {
+    "th": "เลือกจาก Guide",
+    "en": "Choose from Guide"
+  },
+  "เลือกตัวละคร": {
+    "th": "เลือกตัวละคร",
+    "en": "Choose Character"
+  },
+  "เลือกตัวละครแล้วส่องดูได้เลย": {
+    "th": "เลือกตัวละครแล้วส่องดูได้เลย",
+    "en": "Choose a character to explore their guide."
+  },
+  "เลือกตำแหน่งพื้นหลัง": {
+    "th": "เลือกตำแหน่งพื้นหลัง",
+    "en": "Choose background position"
+  },
+  "เลือกทุก Team": {
+    "th": "เลือกทุก Team",
+    "en": "Select all teams"
+  },
+  "เลือกประเภทข้อมูลที่ต้องการค้นหา": {
+    "th": "เลือกประเภทข้อมูลที่ต้องการค้นหา",
+    "en": "Choose which types of data to search."
+  },
+  "เลือกระดับ 1–10": {
+    "th": "เลือกระดับ 1–10",
+    "en": "Choose a level from 1–10"
+  },
+  "เลือกสีพื้นหลังเซลล์": {
+    "th": "เลือกสีพื้นหลังเซลล์",
+    "en": "Choose cell background colour"
+  },
+  "เลือกส่วนที่ต้องการแก้ไข": {
+    "th": "เลือกส่วนที่ต้องการแก้ไข",
+    "en": "Choose a section to edit."
+  },
+  "เลือกหลายไฟล์เพื่อ Import หลาย Team พร้อมกันได้": {
+    "th": "เลือกหลายไฟล์เพื่อ Import หลาย Team พร้อมกันได้",
+    "en": "Select multiple files to import several teams at once."
+  },
+  "เลือกหัวข้อเพื่อเลื่อนไปยังเนื้อหา": {
+    "th": "เลือกหัวข้อเพื่อเลื่อนไปยังเนื้อหา",
+    "en": "Choose a heading to jump to its content."
+  },
+  "เลือกเงื่อนไข Team": {
+    "th": "เลือกเงื่อนไข Team",
+    "en": "Choose team condition"
+  },
+  "เลือกเงื่อนไขกลุ่มดาว": {
+    "th": "เลือกเงื่อนไขกลุ่มดาว",
+    "en": "Choose constellation condition"
+  },
+  "เลือกเงื่อนไขค่าสถานะเป้าหมาย": {
+    "th": "เลือกเงื่อนไขค่าสถานะเป้าหมาย",
+    "en": "Choose target stats condition"
+  },
+  "เลือกเงื่อนไขค่าสถานะแนะนำ": {
+    "th": "เลือกเงื่อนไขค่าสถานะแนะนำ",
+    "en": "Choose recommended stats condition"
+  },
+  "เลือกเงื่อนไขทีม": {
+    "th": "เลือกเงื่อนไขทีม",
+    "en": "Choose team condition"
+  },
+  "เลือกเงื่อนไขอาวุธ": {
+    "th": "เลือกเงื่อนไขอาวุธ",
+    "en": "Choose weapon condition"
+  },
+  "เลือกเลเยอร์ที่จะเลื่อน": {
+    "th": "เลือกเลเยอร์ที่จะเลื่อน",
+    "en": "Choose a layer to move"
+  },
+  "เลือกเลเยอร์แล้วลากตรงบริเวณตัวอย่างเพื่อเลื่อนตำแหน่ง": {
+    "th": "เลือกเลเยอร์แล้วลากตรงบริเวณตัวอย่างเพื่อเลื่อนตำแหน่ง",
+    "en": "Choose a layer, then drag it in the preview to move it."
+  },
+  "เลือกเลเยอร์ใต้ตัวอย่าง แล้วลากในตัวอย่างเพื่อเลื่อนตำแหน่ง": {
+    "th": "เลือกเลเยอร์ใต้ตัวอย่าง แล้วลากในตัวอย่างเพื่อเลื่อนตำแหน่ง",
+    "en": "Choose a layer below the preview, then drag it in the preview to move it."
+  },
+  "เลือกใหม่": {
+    "th": "เลือกใหม่",
+    "en": "Choose again"
+  },
+  "เลือกได้สูงสุด": {
+    "th": "เลือกได้สูงสุด",
+    "en": "Select up to"
+  },
+  "เลื่อน Aura ด้านบนขึ้น": {
+    "th": "เลื่อน Aura ด้านบนขึ้น",
+    "en": "Move the top aura upwards"
+  },
+  "เลื่อนตำแหน่งภาพให้ส่วนที่ต้องการอยู่ภายในกรอบสี่เหลี่ยม": {
+    "th": "เลื่อนตำแหน่งภาพให้ส่วนที่ต้องการอยู่ภายในกรอบสี่เหลี่ยม",
+    "en": "Position the desired part of the image inside the square frame."
+  },
+  "เลื่อนเมนูไปทางขวา": {
+    "th": "เลื่อนเมนูไปทางขวา",
+    "en": "Scroll menu right"
+  },
+  "เลื่อนเมนูไปทางซ้าย": {
+    "th": "เลื่อนเมนูไปทางซ้าย",
+    "en": "Scroll menu left"
+  },
+  "แก้ไข": {
+    "th": "แก้ไข",
+    "en": "Edit"
+  },
+  "แก้ไข Extra": {
+    "th": "แก้ไข Extra",
+    "en": "Edit extra section"
+  },
+  "แก้ไข Guide": {
+    "th": "แก้ไข Guide",
+    "en": "Edit guide"
+  },
+  "แก้ไขข้อความเซลล์": {
+    "th": "แก้ไขข้อความเซลล์",
+    "en": "Edit cell text"
+  },
+  "แก้ไขชื่อคอลัมน์": {
+    "th": "แก้ไขชื่อคอลัมน์",
+    "en": "Edit Column Name"
+  },
+  "แก้ไขรายการด้านล่าง แล้วระบบจะบันทึกให้อัตโนมัติ ข้อมูลที่กรอกไว้ยังไม่หาย": {
+    "th": "แก้ไขรายการด้านล่าง แล้วระบบจะบันทึกให้อัตโนมัติ ข้อมูลที่กรอกไว้ยังไม่หาย",
+    "en": "Fix the items below and your changes will save automatically. Your entered data is still here."
+  },
+  "แก้ไขล่าสุด": {
+    "th": "แก้ไขล่าสุด",
+    "en": "Last edited"
+  },
+  "แก้ไขเซลล์": {
+    "th": "แก้ไขเซลล์",
+    "en": "Edit Cells"
+  },
+  "แต่ละ Extra มีหน้าแก้ไขและบันทึกแยกจากกัน": {
+    "th": "แต่ละ Extra มีหน้าแก้ไขและบันทึกแยกจากกัน",
+    "en": "Each extra section has its own editor and saves independently."
+  },
+  "แถว ข้อความ รูปภาพ และเปอร์เซ็นต์ทั้งหมดในส่วนนี้จะถูกลบออกจาก Guide": {
+    "th": "แถว ข้อความ รูปภาพ และเปอร์เซ็นต์ทั้งหมดในส่วนนี้จะถูกลบออกจาก Guide",
+    "en": "All rows, text, images, and percentages in this section will be removed from the guide."
+  },
+  "แสดง": {
+    "th": "แสดง",
+    "en": "Show"
+  },
+  "แสดงส่วนนี้": {
+    "th": "แสดงส่วนนี้",
+    "en": "Show this section"
+  },
+  "โรเทชั่น": {
+    "th": "โรเทชั่น",
+    "en": "Rotation"
+  },
+  "โหลดข้อมูลไม่สำเร็จ": {
+    "th": "โหลดข้อมูลไม่สำเร็จ",
+    "en": "Could not load data."
+  },
+  "โหลดระบบยืนยันตัวตนไม่สำเร็จ โปรดลองอีกครั้ง": {
+    "th": "โหลดระบบยืนยันตัวตนไม่สำเร็จ โปรดลองอีกครั้ง",
+    "en": "Could not load verification. Please try again."
+  },
+  "ใช้ Namecard ของตัวละครใต้ภาพโปร่งใส": {
+    "th": "ใช้ Namecard ของตัวละครใต้ภาพโปร่งใส",
+    "en": "Use the character’s namecard behind transparent artwork."
+  },
+  "ใช้ note เพื่ออธิบายอาวุธ ทีม หรือเงื่อนไขที่ใช้เปรียบเทียบ": {
+    "th": "ใช้ note เพื่ออธิบายอาวุธ ทีม หรือเงื่อนไขที่ใช้เปรียบเทียบ",
+    "en": "Use notes to explain the weapons, teams, or comparison conditions."
+  },
+  "ใช้ตำแหน่งนี้": {
+    "th": "ใช้ตำแหน่งนี้",
+    "en": "Use this position"
+  },
+  "ใช้ภาพตัวละครเดียวกันด้วย mix-blend-mode · รายการบนสุดจะแสดงก่อน": {
+    "th": "ใช้ภาพตัวละครเดียวกันด้วย mix-blend-mode · รายการบนสุดจะแสดงก่อน",
+    "en": "Use the same character image with mix-blend-mode. The top item is drawn first."
+  },
+  "ใช้ภาพที่ครอป": {
+    "th": "ใช้ภาพที่ครอป",
+    "en": "Use cropped image"
+  },
+  "ใช้ลิงก์ http, https หรือ mailto เท่านั้น": {
+    "th": "ใช้ลิงก์ http, https หรือ mailto เท่านั้น",
+    "en": "Use only http, https, or mailto links."
+  },
+  "ใช้สีตามธีม": {
+    "th": "ใช้สีตามธีม",
+    "en": "Use theme colour"
+  },
+  "ใช้อีเมลและรหัสผ่านของบัญชีผู้": {
+    "th": "ใช้อีเมลและรหัสผ่านของบัญชีผู้ดูแล",
+    "en": "Use your admin account’s email and password."
+  },
+  "ใส่ลำดับ Combo…": {
+    "th": "ใส่ลำดับ Combo…",
+    "en": "Enter the combo sequence…"
+  },
+  "ไกด์ตัวละคร อาวุธ อาร์ติแฟกต์ กลุ่มดาว และคำนวณทีม": {
+    "th": "ไกด์ตัวละคร อาวุธ อาร์ติแฟกต์ กลุ่มดาว และคำนวณทีม",
+    "en": "Character guides, weapons, artifacts, constellations, and team calculations"
+  },
+  "ไกด์เกนชินไม่ใช่เกมมือถือ": {
+    "th": "ไกด์เกนชินไม่ใช่เกมมือถือ",
+    "en": "Genshin Is Not a Mobile Game Guides"
+  },
+  "ไปถังขยะ": {
+    "th": "ไปถังขยะ",
+    "en": "to trash"
+  },
+  "ไปยัง": {
+    "th": "ไปยัง",
+    "en": "to"
+  },
+  "ไปหน้าแก้ไข": {
+    "th": "ไปหน้าแก้ไข",
+    "en": "Edit this page"
+  },
+  "ไฟล์ Team JSON": {
+    "th": "ไฟล์ Team JSON",
+    "en": "Team JSON files"
+  },
+  "ไฟล์ต้องมีขนาดไม่เกิน 100 MB": {
+    "th": "ไฟล์ต้องมีขนาดไม่เกิน 100 MB",
+    "en": "Files must be no larger than 100 MB."
+  },
+  "ไฟล์ภาพจะใช้เฉพาะในเบราว์เซอร์นี้": {
+    "th": "ไฟล์ภาพจะใช้เฉพาะในเบราว์เซอร์นี้",
+    "en": "Image files stay in this browser."
+  },
+  "ไม่บังคับ รองรับ YouTube, youtu.be, Shorts และ Live · ลากเพื่อจัดลำดับ": {
+    "th": "ไม่บังคับ รองรับ YouTube, youtu.be, Shorts และ Live · ลากเพื่อจัดลำดับ",
+    "en": "Optional. Supports YouTube, youtu.be, Shorts, and Live. Drag to reorder."
+  },
+  "ไม่พบ Blend mode": {
+    "th": "ไม่พบ Blend mode",
+    "en": "No blend modes found"
+  },
+  "ไม่พบ Guide ที่ตรงกับคำค้นหา": {
+    "th": "ไม่พบ Guide ที่ตรงกับคำค้นหา",
+    "en": "No guides match your search"
+  },
+  "ไม่พบ Team ที่ตรงกับคำค้นหา": {
+    "th": "ไม่พบ Team ที่ตรงกับคำค้นหา",
+    "en": "No teams match your search"
+  },
+  "ไม่พบคู่มือนี้": {
+    "th": "ไม่พบคู่มือนี้",
+    "en": "Guide Not Found"
+  },
+  "ไม่พบชุด Artifact": {
+    "th": "ไม่พบชุด Artifact",
+    "en": "No artifact sets found"
+  },
+  "ไม่พบตัวละคร": {
+    "th": "ไม่พบตัวละคร",
+    "en": "No characters found"
+  },
+  "ไม่พบทีมที่ตรงกับคำค้นหา": {
+    "th": "ไม่พบทีมที่ตรงกับคำค้นหา",
+    "en": "No teams match your search"
+  },
+  "ไม่พบระดับ": {
+    "th": "ไม่พบระดับ",
+    "en": "No levels found"
+  },
+  "ไม่พบรายการ": {
+    "th": "ไม่พบรายการ",
+    "en": "No items found"
+  },
+  "ไม่พบไกด์": {
+    "th": "ไม่พบไกด์",
+    "en": "No guides found"
+  },
+  "ไม่มี Guide อื่นให้เลือก": {
+    "th": "ไม่มี Guide อื่นให้เลือก",
+    "en": "No other guides available"
+  },
+  "ไม่สามารถครอปไฟล์ภาพนี้ได้": {
+    "th": "ไม่สามารถครอปไฟล์ภาพนี้ได้",
+    "en": "Could not crop this image."
+  },
+  "ไม่สามารถอ่านไฟล์ภาพนี้ได้": {
+    "th": "ไม่สามารถอ่านไฟล์ภาพนี้ได้",
+    "en": "Could not read this image file."
+  },
+  "ไม่สามารถเปิด Local draft ได้": {
+    "th": "ไม่สามารถเปิด Local draft ได้",
+    "en": "Could not open the local draft."
+  },
+  "ไม่สามารถโหลดภาพ Namecard ได้": {
+    "th": "ไม่สามารถโหลดภาพ Namecard ได้",
+    "en": "Could not load the namecard image."
+  },
+  "&gt;": {
+    "th": ">",
+    "en": ">"
+  },
+  "(char": {
+    "th": "(char",
+    "en": "(char"
+  },
+  "Astral Development": {
+    "th": "Astral Development",
+    "en": "Astral Development"
+  },
+  "C": {
+    "th": "C",
+    "en": "C"
+  },
+  "Ctrl/⌘ Shift Z": {
+    "th": "Ctrl/⌘ Shift Z",
+    "en": "Ctrl/⌘ Shift Z"
+  },
+  "Ctrl/⌘ Z": {
+    "th": "Ctrl/⌘ Z",
+    "en": "Ctrl/⌘ Z"
+  },
+  "DPS": {
+    "th": "DPS",
+    "en": "DPS"
+  },
+  "DPS:": {
+    "th": "DPS:",
+    "en": "DPS:"
+  },
+  "I am sigma number one": {
+    "th": "I am sigma number one",
+    "en": "I am sigma number one"
+  },
+  "R": {
+    "th": "R",
+    "en": "R"
+  },
+  "URL": {
+    "th": "URL",
+    "en": "URL"
+  },
+  "v": {
+    "th": "v",
+    "en": "v"
+  },
+  "Constellation ของตัวละครตำแหน่ง {index}": {
+    "th": "Constellation ของตัวละครตำแหน่ง {index}",
+    "en": "Constellation for character in slot {index}"
+  },
+  "Import {count} Team แล้ว": {
+    "th": "Import {count} Team แล้ว",
+    "en": "Imported {count} teams"
+  },
+  "Refinement ของอาวุธตำแหน่ง {index}": {
+    "th": "Refinement ของอาวุธตำแหน่ง {index}",
+    "en": "Refinement for weapon in slot {index}"
+  },
+  "{count} เซลล์": {
+    "th": "{count} เซลล์",
+    "en": "{count} cells"
+  },
+  "{character} ไม่รองรับอาวุธ {weapon}": {
+    "th": "{character} ไม่รองรับอาวุธ {weapon}",
+    "en": "{character} cannot use {weapon}."
+  },
+  "การแก้ข้อความจะแทนที่ทั้ง {count} เซลล์ แต่การเปลี่ยนรูปแบบจะเก็บข้อความเดิมของแต่ละเซลล์": {
+    "th": "การแก้ข้อความจะแทนที่ทั้ง {count} เซลล์ แต่การเปลี่ยนรูปแบบจะเก็บข้อความเดิมของแต่ละเซลล์",
+    "en": "Editing text replaces all {count} selected cells. Formatting changes preserve each cell’s existing text."
+  },
+  "คัดลอกและดาวน์โหลด {name} แล้ว": {
+    "th": "คัดลอกและดาวน์โหลด {name} แล้ว",
+    "en": "Copied and downloaded {name}"
+  },
+  "จัดลำดับ {name}": {
+    "th": "จัดลำดับ {name}",
+    "en": "Reorder {name}"
+  },
+  "จัดลำดับวิดีโอ {index}": {
+    "th": "จัดลำดับวิดีโอ {index}",
+    "en": "Reorder video {index}"
+  },
+  "ดาวน์โหลด {fileName} แล้ว": {
+    "th": "ดาวน์โหลด {fileName} แล้ว",
+    "en": "Downloaded {fileName}"
+  },
+  "ดูรายละเอียด {label}": {
+    "th": "ดูรายละเอียด {label}",
+    "en": "View {label} details"
+  },
+  "ตัวอย่างวิดีโอไกด์ {guideName} {index}": {
+    "th": "ตัวอย่างวิดีโอไกด์ {guideName} {index}",
+    "en": "Guide video preview for {guideName}, video {index}"
+  },
+  "ตัวเปรียบเทียบหลัง {name}": {
+    "th": "ตัวเปรียบเทียบหลัง {name}",
+    "en": "Comparison after {name}"
+  },
+  "ย้าย {name} ไปถังขยะ?": {
+    "th": "ย้าย {name} ไปถังขยะ?",
+    "en": "Move {name} to trash?"
+  },
+  "รายการ Artifact ในกลุ่ม {name} และเปอร์เซ็นต์เปรียบเทียบจะถูกลบออกจาก Guide": {
+    "th": "รายการ Artifact ในกลุ่ม {name} และเปอร์เซ็นต์เปรียบเทียบจะถูกลบออกจาก Guide",
+    "en": "This artifact in {name} and its comparison percentage will be removed from the guide."
+  },
+  "รูปโปรไฟล์ของ {name}": {
+    "th": "รูปโปรไฟล์ของ {name}",
+    "en": "{name}’s profile picture"
+  },
+  "ลบ Artifact อันดับ {index}?": {
+    "th": "ลบ Artifact อันดับ {index}?",
+    "en": "Delete artifact ranked {index}?"
+  },
+  "ลบ preset {name}": {
+    "th": "ลบ preset {name}",
+    "en": "Delete preset {name}"
+  },
+  "ลบ {name}": {
+    "th": "ลบ {name}",
+    "en": "Delete {name}"
+  },
+  "ลบ {name} ถาวร?": {
+    "th": "ลบ {name} ถาวร?",
+    "en": "Permanently delete {name}?"
+  },
+  "ลบ {label}": {
+    "th": "ลบ {label}",
+    "en": "Delete {label}"
+  },
+  "ลบ {name}?": {
+    "th": "ลบ {name}?",
+    "en": "Delete {name}?"
+  },
+  "ลบบัญชี {name}?": {
+    "th": "ลบบัญชี {name}?",
+    "en": "Delete account {name}?"
+  },
+  "ลบวิดีโอ {index}": {
+    "th": "ลบวิดีโอ {index}",
+    "en": "Remove video {index}"
+  },
+  "ลากเพื่อจัดลำดับ {label}": {
+    "th": "ลากเพื่อจัดลำดับ {label}",
+    "en": "Drag to reorder {label}"
+  },
+  "ลากเพื่อจัดลำดับ {name}": {
+    "th": "ลากเพื่อจัดลำดับ {name}",
+    "en": "Drag to reorder {name}"
+  },
+  "ลากเพื่อย้าย {name}": {
+    "th": "ลากเพื่อย้าย {name}",
+    "en": "Drag to move {name}"
+  },
+  "ลากเพื่อย้ายแถว {index}": {
+    "th": "ลากเพื่อย้ายแถว {index}",
+    "en": "Drag to move row {index}"
+  },
+  "วิดีโอไกด์ {name} {index}": {
+    "th": "วิดีโอไกด์ {name} {index}",
+    "en": "Guide video for {name}, video {index}"
+  },
+  "เปลี่ยน {guideName} เป็น Private?": {
+    "th": "เปลี่ยน {guideName} เป็น Private?",
+    "en": "Make {guideName} private?"
+  },
+  "เปิด Guide {name}": {
+    "th": "เปิด Guide {name}",
+    "en": "Open guide {name}"
+  },
+  "เปิดข้อมูล {name} บน Lunaris": {
+    "th": "เปิดข้อมูล {name} บน Lunaris",
+    "en": "View {name} on Lunaris"
+  },
+  "เปิดข้อมูลอาร์ติแฟกต์ {name} บน Lunaris": {
+    "th": "เปิดข้อมูลอาร์ติแฟกต์ {name} บน Lunaris",
+    "en": "View artifact {name} on Lunaris"
+  },
+  "เปิดข้อมูลอาวุธ {name} บน Lunaris": {
+    "th": "เปิดข้อมูลอาวุธ {name} บน Lunaris",
+    "en": "View weapon {name} on Lunaris"
+  },
+  "เปิดรายละเอียด {label}": {
+    "th": "เปิดรายละเอียด {label}",
+    "en": "View {label} details"
+  },
+  "เผยแพร่ {guideName} เป็น Public?": {
+    "th": "เผยแพร่ {guideName} เป็น Public?",
+    "en": "Publish {guideName}?"
+  },
+  "เมนูคู่มือ {name}": {
+    "th": "เมนูคู่มือ {name}",
+    "en": "Guide navigation for {name}"
+  },
+  "เลือก Artifact สูงสุด 2 ชุดของตัวละครตำแหน่ง {index}": {
+    "th": "เลือก Artifact สูงสุด 2 ชุดของตัวละครตำแหน่ง {index}",
+    "en": "Choose up to 2 artifact sets for character in slot {index}"
+  },
+  "เลือก {name}": {
+    "th": "เลือก {name}",
+    "en": "Select {name}"
+  },
+  "เลือก{type}": {
+    "th": "เลือก{type}",
+    "en": "Choose {type}"
+  },
+  "เลือกตัวละครตำแหน่ง {index}": {
+    "th": "เลือกตัวละครตำแหน่ง {index}",
+    "en": "Choose character in slot {index}"
+  },
+  "เลือกอาวุธของตัวละครตำแหน่ง {index}": {
+    "th": "เลือกอาวุธของตัวละครตำแหน่ง {index}",
+    "en": "Choose weapon for character in slot {index}"
+  },
+  "แถว {index} · {name}": {
+    "th": "แถว {index} · {name}",
+    "en": "Row {index} · {name}"
+  },
+  "แถว {index}": {
+    "th": "แถว {index}",
+    "en": "Row {index}"
+  },
+  "ไกด์ {name}": {
+    "th": "ไกด์ {name}",
+    "en": "Guide for {name}"
+  },
+  "เขียนข้อความ...": {
+    "th": "เขียนข้อความ...",
+    "en": "Write something…"
+  },
+  "เลือก Condition": {
+    "th": "เลือก Condition",
+    "en": "Choose condition"
+  },
+  "Navigation": {
+    "th": "เมนูนำทาง",
+    "en": "Navigation"
+  },
+  "Public navigation": {
+    "th": "เมนูเว็บไซต์",
+    "en": "Public navigation"
+  },
+  "Admin navigation": {
+    "th": "เมนูผู้ดูแล",
+    "en": "Admin navigation"
+  },
+  "Duplicate Condition": {
+    "th": "ทำสำเนาเงื่อนไข",
+    "en": "Duplicate Condition"
+  },
+  "ยืนยันลบ": {
+    "th": "ยืนยันลบ",
+    "en": "Confirm deletion"
+  },
+  "ซ่อนรายการ": {
+    "th": "ซ่อนรายการ",
+    "en": "Hide issues"
+  },
+  "ตรวจสอบข้อมูลที่ยังไม่ครบ": {
+    "th": "ตรวจสอบข้อมูลที่ยังไม่ครบ",
+    "en": "Review incomplete fields"
+  },
+  "กรุณาอัปโหลด Guide Image": {
+    "th": "กรุณาอัปโหลด Guide Image",
+    "en": "Please upload a guide image."
+  },
+  "กรุณากรอก Overview": {
+    "th": "กรุณากรอก Overview",
+    "en": "Please enter an overview."
+  },
+  "บันทึกอัตโนมัติไม่สำเร็จ": {
+    "th": "บันทึกอัตโนมัติไม่สำเร็จ",
+    "en": "Autosave failed"
+  },
+  "พบ Local draft ต้องการกู้คืนหรือไม่?": {
+    "th": "พบ Local draft ต้องการกู้คืนหรือไม่?",
+    "en": "A local draft was found. Restore it?"
+  },
+  "หากไม่เลือก ระบบจะใช้ข้อมูลล่าสุดจากเซิร์ฟเวอร์": {
+    "th": "หากไม่เลือก ระบบจะใช้ข้อมูลล่าสุดจากเซิร์ฟเวอร์",
+    "en": "Otherwise, the latest data from the server will be used."
+  },
+  "ไม่ใช้": {
+    "th": "ไม่ใช้",
+    "en": "Discard"
+  },
+  "อีเมลหรือรหัสผ่านไม่ถูกต้อง": {
+    "th": "อีเมลหรือรหัสผ่านไม่ถูกต้อง",
+    "en": "Incorrect email or password."
+  },
+  "เข้าสู่ระบบไม่สำเร็จ โปรดลองอีกครั้ง": {
+    "th": "เข้าสู่ระบบไม่สำเร็จ โปรดลองอีกครั้ง",
+    "en": "Could not sign in. Please try again."
+  },
+  "อัปโหลดไม่สำเร็จ": {
+    "th": "อัปโหลดไม่สำเร็จ",
+    "en": "Upload failed"
+  },
+  "เปลี่ยนสถานะ Guide ไม่สำเร็จ": {
+    "th": "เปลี่ยนสถานะ Guide ไม่สำเร็จ",
+    "en": "Could not change guide visibility."
+  },
+  "เผยแพร่ Guide แล้ว": {
+    "th": "เผยแพร่ Guide แล้ว",
+    "en": "Guide published"
+  },
+  "เปลี่ยน Guide เป็น Private แล้ว": {
+    "th": "เปลี่ยน Guide เป็น Private แล้ว",
+    "en": "Guide made private"
+  },
+  "Overall · ดาเมจทั้งทีม": {
+    "th": "Overall · ดาเมจทั้งทีม",
+    "en": "Overall Damage"
+  },
+  "Personal · ดาเมจส่วนตัว": {
+    "th": "Personal · ดาเมจส่วนตัว",
+    "en": "Personal Damage"
+  },
+  "อาร์ติแฟกต์และค่าสถานะ": {
+    "th": "อาร์ติแฟกต์และค่าสถานะ",
+    "en": "Artifacts & Stats"
+  },
+  "กลุ่มดาว": {
+    "th": "กลุ่มดาว",
+    "en": "Constellations"
+  },
+  "กรุณาเลือกอาวุธ": {
+    "th": "กรุณาเลือกอาวุธ",
+    "en": "Please choose a weapon."
+  },
+  "กรุณาเลือก Artifact ชุดแรก": {
+    "th": "กรุณาเลือก Artifact ชุดแรก",
+    "en": "Please choose the first artifact set."
+  },
+  "กรุณาเลือกตัวละคร": {
+    "th": "กรุณาเลือกตัวละคร",
+    "en": "Please choose a character."
+  },
+  "กรุณากรอก Overall % ระหว่าง -9,999 ถึง 9,999": {
+    "th": "กรุณากรอก Overall % ระหว่าง -9,999 ถึง 9,999",
+    "en": "Enter an overall damage percentage between -9,999 and 9,999."
+  },
+  "กรุณากรอก Personal % ระหว่าง -9,999 ถึง 9,999": {
+    "th": "กรุณากรอก Personal % ระหว่าง -9,999 ถึง 9,999",
+    "en": "Enter a personal damage percentage between -9,999 and 9,999."
+  },
+  "กรุณากรอกเปอร์เซ็นต์ระหว่าง -9,999 ถึง 9,999": {
+    "th": "กรุณากรอกเปอร์เซ็นต์ระหว่าง -9,999 ถึง 9,999",
+    "en": "Enter a percentage between -9,999 and 9,999."
+  },
+  "กรุณากรอก Cumulative % ระหว่าง -9,999 ถึง 9,999": {
+    "th": "กรุณากรอก Cumulative % ระหว่าง -9,999 ถึง 9,999",
+    "en": "Enter a cumulative percentage between -9,999 and 9,999."
+  },
+  "กรุณากรอกชื่อไม่เกิน 160 ตัวอักษร": {
+    "th": "กรุณากรอกชื่อไม่เกิน 160 ตัวอักษร",
+    "en": "Enter a name of no more than 160 characters."
+  },
+  "กรุณากรอกหัวข้อไม่เกิน 200 ตัวอักษร": {
+    "th": "กรุณากรอกหัวข้อไม่เกิน 200 ตัวอักษร",
+    "en": "Enter a heading of no more than 200 characters."
+  },
+  "กรุณากรอก Combo": {
+    "th": "กรุณากรอก Combo",
+    "en": "Please enter a combo."
+  },
+  "กรุณากรอก Rotation เป็นตัวเลขมากกว่า 0": {
+    "th": "กรุณากรอก Rotation เป็นตัวเลขมากกว่า 0",
+    "en": "Enter a rotation duration greater than zero."
+  },
+  "กรุณากรอก Damage เป็นตัวเลข 0 ขึ้นไป": {
+    "th": "กรุณากรอก Damage เป็นตัวเลข 0 ขึ้นไป",
+    "en": "Enter damage of zero or more."
+  },
+  "ข้อมูลเกินจำนวนหรือความยาวที่กำหนด": {
+    "th": "ข้อมูลเกินจำนวนหรือความยาวที่กำหนด",
+    "en": "The data exceeds the allowed count or length."
+  },
+  "กรุณาตรวจสอบข้อมูลให้ถูกต้อง": {
+    "th": "กรุณาตรวจสอบข้อมูลให้ถูกต้อง",
+    "en": "Please check that the information is correct."
+  },
+  "อาวุธอันดับ {rank}": {
+    "th": "อาวุธอันดับ {rank}",
+    "en": "Weapon ranked {rank}"
+  },
+  "Condition {index} · อาวุธอันดับ {rank}": {
+    "th": "Condition {index} · อาวุธอันดับ {rank}",
+    "en": "Condition {index} · Weapon ranked {rank}"
+  },
+  "Artifact {name} อันดับ {rank}": {
+    "th": "Artifact {name} อันดับ {rank}",
+    "en": "Artifact {name}, ranked {rank}"
+  },
+  "{name} · ตัวละคร {index}": {
+    "th": "{name} · ตัวละคร {index}",
+    "en": "{name} · Character {index}"
+  },
+  "Extra section {index} · แถว {row}": {
+    "th": "Extra section {index} · แถว {row}",
+    "en": "Extra section {index} · Row {row}"
+  },
+  "อาวุธต้องมีเปอร์เซ็นต์อย่างน้อยหนึ่งค่า": {
+    "th": "อาวุธต้องมีเปอร์เซ็นต์อย่างน้อยหนึ่งค่า",
+    "en": "Each weapon needs at least one percentage."
+  },
+  "แต่ละเงื่อนไขต้องมีระดับกลุ่มดาวไม่ซ้ำกัน": {
+    "th": "แต่ละเงื่อนไขต้องมีระดับกลุ่มดาวไม่ซ้ำกัน",
+    "en": "Constellation levels must be unique within each condition."
+  },
+  "Team ต้องมีตัวละครไม่ซ้ำกัน 4 ตัว": {
+    "th": "Team ต้องมีตัวละครไม่ซ้ำกัน 4 ตัว",
+    "en": "A team must have four different characters."
+  },
+  "ความเสียหายรวมต้องมากกว่า 0": {
+    "th": "ความเสียหายรวมต้องมากกว่า 0",
+    "en": "Total damage must be greater than zero."
+  },
+  "กรุณาเลือกสีที่ถูกต้อง": {
+    "th": "กรุณาเลือกสีที่ถูกต้อง",
+    "en": "Please choose a valid colour."
+  },
+  "รายการตัวละคร อาวุธ และอาร์ติแฟกต์ต้องไม่ซ้ำกัน": {
+    "th": "รายการตัวละคร อาวุธ และอาร์ติแฟกต์ต้องไม่ซ้ำกัน",
+    "en": "Characters, weapons, and artifacts must not be duplicated."
+  },
+  "คำหรือวลีที่ไฮไลต์ต้องไม่ซ้ำกัน": {
+    "th": "คำหรือวลีที่ไฮไลต์ต้องไม่ซ้ำกัน",
+    "en": "Highlighted words and phrases must be unique."
+  },
+  "Extra sections ต้องไม่ซ้ำกัน": {
+    "th": "Extra sections ต้องไม่ซ้ำกัน",
+    "en": "Extra sections must be unique."
+  },
+  "รหัสคอลัมน์ต้องไม่ซ้ำกัน": {
+    "th": "รหัสคอลัมน์ต้องไม่ซ้ำกัน",
+    "en": "Column IDs must be unique."
+  },
+  "ชื่อคอลัมน์ต้องไม่ซ้ำกัน": {
+    "th": "ชื่อคอลัมน์ต้องไม่ซ้ำกัน",
+    "en": "Column names must be unique."
+  },
+  "รหัสแถวต้องไม่ซ้ำกัน": {
+    "th": "รหัสแถวต้องไม่ซ้ำกัน",
+    "en": "Row IDs must be unique."
+  },
+  "ไม่พบคอลัมน์ของเซลล์นี้": {
+    "th": "ไม่พบคอลัมน์ของเซลล์นี้",
+    "en": "The column for this cell was not found."
+  },
+  "โปรดตรวจสอบชื่อ อีเมล และรหัสผ่านให้ถูกต้อง": {
+    "th": "โปรดตรวจสอบชื่อ อีเมล และรหัสผ่านให้ถูกต้อง",
+    "en": "Please check the name, email, and password."
+  },
+  "อีเมลนี้มีบัญชีอยู่แล้ว": {
+    "th": "อีเมลนี้มีบัญชีอยู่แล้ว",
+    "en": "An account already exists for this email."
+  },
+  "สร้างบัญชีไม่สำเร็จ โปรดลองอีกครั้ง": {
+    "th": "สร้างบัญชีไม่สำเร็จ โปรดลองอีกครั้ง",
+    "en": "Could not create the account. Please try again."
+  },
+  "สร้างบัญชี {email} แล้ว": {
+    "th": "สร้างบัญชี {email} แล้ว",
+    "en": "Account created for {email}"
+  },
+  "ไม่สามารถลบบัญชีที่กำลังใช้งานอยู่": {
+    "th": "ไม่สามารถลบบัญชีที่กำลังใช้งานอยู่",
+    "en": "You cannot delete the account you are currently using."
+  },
+  "ลบบัญชีไม่สำเร็จ โปรดลองอีกครั้ง": {
+    "th": "ลบบัญชีไม่สำเร็จ โปรดลองอีกครั้ง",
+    "en": "Could not delete the account. Please try again."
+  },
+  "บันทึกไม่สำเร็จ": {
+    "th": "บันทึกไม่สำเร็จ",
+    "en": "Could not save changes."
+  },
+  "สร้าง Guide ไม่สำเร็จ": {
+    "th": "สร้าง Guide ไม่สำเร็จ",
+    "en": "Could not create the guide."
+  },
+  "Guide ID ไม่ถูกต้อง": {
+    "th": "Guide ID ไม่ถูกต้อง",
+    "en": "Invalid guide ID"
+  },
+  "โหลดรายการ Guide ไม่สำเร็จ": {
+    "th": "โหลดรายการ Guide ไม่สำเร็จ",
+    "en": "Could not load guides."
+  },
+  "ไม่พบ Guide นี้": {
+    "th": "ไม่พบ Guide นี้",
+    "en": "Guide not found"
+  },
+  "โหลด Team จาก Guide ไม่สำเร็จ": {
+    "th": "โหลด Team จาก Guide ไม่สำเร็จ",
+    "en": "Could not load teams from the guide."
+  },
+  "สร้าง Extra section ไม่สำเร็จ": {
+    "th": "สร้าง Extra section ไม่สำเร็จ",
+    "en": "Could not create the extra section."
+  },
+  "เริ่ม Sync ไม่สำเร็จ": {
+    "th": "เริ่ม Sync ไม่สำเร็จ",
+    "en": "Could not start sync."
+  },
+  "Shortcut นี้ถูกใช้งานแล้ว": {
+    "th": "Shortcut นี้ถูกใช้งานแล้ว",
+    "en": "This shortcut is already in use."
+  },
+  "เพิ่ม Shortcut ไม่สำเร็จ": {
+    "th": "เพิ่ม Shortcut ไม่สำเร็จ",
+    "en": "Could not add the shortcut."
+  },
+  "ลบ Shortcut ไม่สำเร็จ": {
+    "th": "ลบ Shortcut ไม่สำเร็จ",
+    "en": "Could not delete the shortcut."
+  },
+  "ไม่พบรายการใน Catalog": {
+    "th": "ไม่พบรายการใน Catalog",
+    "en": "Catalog item not found"
+  },
+  "ไม่พบ Shortcut": {
+    "th": "ไม่พบ Shortcut",
+    "en": "Shortcut not found"
+  },
+  "ข้อมูลบางรายการไม่ถูกต้อง": {
+    "th": "ข้อมูลบางรายการไม่ถูกต้อง",
+    "en": "Some information is invalid."
+  },
+  "ไฟล์ไม่ตรงกับชนิดรูปภาพที่ระบุ": {
+    "th": "ไฟล์ไม่ตรงกับชนิดรูปภาพที่ระบุ",
+    "en": "The file does not match the specified image type."
+  },
+  "ไม่สามารถอ่านขนาดรูปภาพได้": {
+    "th": "ไม่สามารถอ่านขนาดรูปภาพได้",
+    "en": "Could not read the image dimensions."
+  },
+  "ข้อมูลถูกแก้ไขจากแท็บอื่น กด Save now เพื่อบันทึก Local draft ทับเวอร์ชันล่าสุด": {
+    "th": "ข้อมูลถูกแก้ไขจากแท็บอื่น กด Save now เพื่อบันทึก Local draft ทับเวอร์ชันล่าสุด",
+    "en": "Changes were made in another tab. Select Save now to overwrite the latest version with your local draft."
+  },
+  "ไม่พบตัวละครใน Catalog": {
+    "th": "ไม่พบตัวละครใน Catalog",
+    "en": "Character not found in the catalog"
+  },
+  "กรุณาอัปโหลดภาพ Guide ให้สำเร็จ": {
+    "th": "กรุณาอัปโหลดภาพ Guide ให้สำเร็จ",
+    "en": "Please finish uploading the guide image."
+  },
+  "ไม่พบ Guide": {
+    "th": "ไม่พบ Guide",
+    "en": "Guide not found"
+  },
+  "ไม่พบภาพ Guide ที่อัปโหลดแล้ว": {
+    "th": "ไม่พบภาพ Guide ที่อัปโหลดแล้ว",
+    "en": "Uploaded guide image not found"
+  },
+  "ไม่พบภาพตัวละครที่อัปโหลดแล้ว": {
+    "th": "ไม่พบภาพตัวละครที่อัปโหลดแล้ว",
+    "en": "Uploaded character image not found"
+  },
+  "ไม่พบภาพ Bleeding ที่อัปโหลดแล้ว": {
+    "th": "ไม่พบภาพ Bleeding ที่อัปโหลดแล้ว",
+    "en": "Uploaded bleeding image not found"
+  },
+  "ไม่พบตัวละครบางรายการใน Catalog": {
+    "th": "ไม่พบตัวละครบางรายการใน Catalog",
+    "en": "Some characters were not found in the catalog."
+  },
+  "ไม่พบอาวุธบางรายการใน Catalog": {
+    "th": "ไม่พบอาวุธบางรายการใน Catalog",
+    "en": "Some weapons were not found in the catalog."
+  },
+  "ไม่พบ Artifact บางรายการใน Catalog": {
+    "th": "ไม่พบ Artifact บางรายการใน Catalog",
+    "en": "Some artifacts were not found in the catalog."
+  },
+  "Guide มี Extra sections ได้สูงสุด 20 ส่วน": {
+    "th": "Guide มี Extra sections ได้สูงสุด 20 ส่วน",
+    "en": "A guide can have up to 20 extra sections."
+  },
+  "ไม่พบ Extra section": {
+    "th": "ไม่พบ Extra section",
+    "en": "Extra section not found"
+  },
+  "รายการ Extra sections ไม่ตรงกับข้อมูลล่าสุด": {
+    "th": "รายการ Extra sections ไม่ตรงกับข้อมูลล่าสุด",
+    "en": "The extra section list does not match the latest data."
+  },
+  "Guide ต้องอยู่ในถังขยะก่อนลบถาวร": {
+    "th": "Guide ต้องอยู่ในถังขยะก่อนลบถาวร",
+    "en": "Move the guide to trash before deleting it permanently."
+  },
+  "กำลังบันทึก Catalog": {
+    "th": "กำลังบันทึก Catalog",
+    "en": "Saving catalog…"
+  },
+  "บันทึก Catalog แล้ว": {
+    "th": "บันทึก Catalog แล้ว",
+    "en": "Catalog saved"
+  },
+  "กำลังยกเลิก Sync…": {
+    "th": "กำลังยกเลิก Sync…",
+    "en": "Cancelling sync…"
+  },
+  "กำลังเตรียม Sync": {
+    "th": "กำลังเตรียม Sync",
+    "en": "Preparing sync…"
+  },
+  "กำลังตรวจสอบเวอร์ชัน Lunaris": {
+    "th": "กำลังตรวจสอบเวอร์ชัน Lunaris",
+    "en": "Checking Lunaris version…"
+  },
+  "Catalog เป็นเวอร์ชันล่าสุดแล้ว": {
+    "th": "Catalog เป็นเวอร์ชันล่าสุดแล้ว",
+    "en": "The catalog is up to date."
+  },
+  "Sync Catalog สำเร็จ": {
+    "th": "Sync Catalog สำเร็จ",
+    "en": "Catalog synced successfully"
+  },
+  "ยกเลิก Sync แล้ว": {
+    "th": "ยกเลิก Sync แล้ว",
+    "en": "Sync cancelled"
+  },
+  "กรุณาเลือกไฟล์รูปภาพ": {
+    "th": "กรุณาเลือกไฟล์รูปภาพ",
+    "en": "Please choose an image file."
+  },
+  "มีอัปเดตใหม่พร้อมใช้งาน": {
+    "th": "มีอัปเดตใหม่พร้อมใช้งาน",
+    "en": "An update is available"
+  },
+  "รีโหลดเพื่ออัปเดตเป็นเวอร์ชันล่าสุด": {
+    "th": "รีโหลดเพื่ออัปเดตเป็นเวอร์ชันล่าสุด",
+    "en": "Reload to get the latest version."
+  },
+  "รีโหลด": {
+    "th": "รีโหลด",
+    "en": "Reload"
+  },
+  "Character": {
+    "th": "ตัวละคร",
+    "en": "Character"
+  },
+  "Weapon": {
+    "th": "อาวุธ",
+    "en": "Weapon"
+  },
+  "Artifact": {
+    "th": "อาร์ติแฟกต์",
+    "en": "Artifact"
+  },
+  "Artifacts & Stats": {
+    "th": "อาร์ติแฟกต์และค่าสถานะ",
+    "en": "Artifacts & Stats"
+  },
+  "Artifact 1": {
+    "th": "อาร์ติแฟกต์ 1",
+    "en": "Artifact 1"
+  },
+  "Artifact 2": {
+    "th": "อาร์ติแฟกต์ 2",
+    "en": "Artifact 2"
+  },
+  "Damage": {
+    "th": "ความเสียหาย",
+    "en": "Damage"
+  },
+  "Substats": {
+    "th": "ออฟรอง",
+    "en": "Substats"
+  },
+  "Select recommended stats…": {
+    "th": "เลือกค่าสถานะแนะนำ…",
+    "en": "Select recommended stats…"
+  },
+  "Artifact percent": {
+    "th": "เปอร์เซ็นต์อาร์ติแฟกต์",
+    "en": "Artifact percent"
+  },
+  "Value or text": {
+    "th": "ค่าหรือข้อความ",
+    "en": "Value or text"
+  },
+  "Export Team": {
+    "th": "ส่งออกทีม",
+    "en": "Export Team"
+  },
+  "Weapon display mode": {
+    "th": "รูปแบบแสดงอาวุธ",
+    "en": "Weapon display mode"
+  },
+  "จัดอันดับอาวุธ Refinement และเปอร์เซ็นต์": {
+    "th": "จัดอันดับอาวุธ Refinement และเปอร์เซ็นต์",
+    "en": "Rank weapons, refinement levels, and damage percentages."
+  },
+  "ชุด Artifact, Main/Sub Stats และ Talent": {
+    "th": "ชุด Artifact, Main/Sub Stats และ Talent",
+    "en": "Artifact sets, main stats, substats, and talents."
+  },
+  "รายละเอียด C1–C6 และเปอร์เซ็นต์สะสม": {
+    "th": "รายละเอียด C1–C6 และเปอร์เซ็นต์สะสม",
+    "en": "C1–C6 details and cumulative damage percentages."
+  },
+  "ตัวละคร 4 ตัว Damage share, DPS และ Combo": {
+    "th": "ตัวละคร 4 ตัว Damage share, DPS และ Combo",
+    "en": "Four characters, damage shares, DPS, and combos."
+  },
+  "กำลังดึงรายการ Catalog จาก Lunaris": {
+    "th": "กำลังดึงรายการ Catalog จาก Lunaris",
+    "en": "Fetching the catalog from Lunaris…"
+  },
+  "ได้รับรายการ Catalog แล้ว": {
+    "th": "ได้รับรายการ Catalog แล้ว",
+    "en": "Catalog lists received"
+  },
+  "กำลังดาวน์โหลดรูปภาพ Catalog": {
+    "th": "กำลังดาวน์โหลดรูปภาพ Catalog",
+    "en": "Downloading catalog images…"
+  },
+  "ดึงข้อมูลตัวละคร {completed}/{total}": {
+    "th": "ดึงข้อมูลตัวละคร {completed}/{total}",
+    "en": "Fetching characters {completed}/{total}"
+  },
+  "ดาวน์โหลดรูปภาพ {completed}/{total}": {
+    "th": "ดาวน์โหลดรูปภาพ {completed}/{total}",
+    "en": "Downloading images {completed}/{total}"
+  },
+  "ไม่พบตัวละคร {name} ใน Catalog": {
+    "th": "ไม่พบตัวละคร {name} ใน Catalog",
+    "en": "Character {name} was not found in the catalog."
+  },
+  "ไม่พบอาวุธ {name} ใน Catalog": {
+    "th": "ไม่พบอาวุธ {name} ใน Catalog",
+    "en": "Weapon {name} was not found in the catalog."
+  },
+  "ไม่พบ Artifact {name} ใน Catalog": {
+    "th": "ไม่พบ Artifact {name} ใน Catalog",
+    "en": "Artifact {name} was not found in the catalog."
+  },
+  "{weapon} ไม่รองรับ {character}": {
+    "th": "{weapon} ไม่รองรับ {character}",
+    "en": "{weapon} is not compatible with {character}."
+  },
+  "Close": {
+    "th": "ปิด",
+    "en": "Close"
+  },
+  "Loading": {
+    "th": "กำลังโหลด",
+    "en": "Loading"
+  },
+  "Previous slide": {
+    "th": "สไลด์ก่อนหน้า",
+    "en": "Previous slide"
+  },
+  "Next slide": {
+    "th": "สไลด์ถัดไป",
+    "en": "Next slide"
+  },
+  "Toggle Sidebar": {
+    "th": "เปิดหรือปิดแถบด้านข้าง",
+    "en": "Toggle Sidebar"
+  },
+  "More": {
+    "th": "เพิ่มเติม",
+    "en": "More"
+  },
+  "More pages": {
+    "th": "หน้าเพิ่มเติม",
+    "en": "More pages"
+  },
+  "Go to previous page": {
+    "th": "ไปหน้าก่อนหน้า",
+    "en": "Go to previous page"
+  },
+  "Go to next page": {
+    "th": "ไปหน้าถัดไป",
+    "en": "Go to next page"
+  },
+  "breadcrumb": {
+    "th": "เส้นทางนำทาง",
+    "en": "breadcrumb"
+  },
+  "pagination": {
+    "th": "การแบ่งหน้า",
+    "en": "pagination"
+  },
+  "Previous": {
+    "th": "ก่อนหน้า",
+    "en": "Previous"
+  },
+  "Next": {
+    "th": "ถัดไป",
+    "en": "Next"
+  },
+  "Sidebar": {
+    "th": "แถบด้านข้าง",
+    "en": "Sidebar"
+  },
+  "Displays the mobile sidebar.": {
+    "th": "แสดงแถบด้านข้างบนมือถือ",
+    "en": "Displays the mobile sidebar."
+  },
+  "Make private": {
+    "th": "เปลี่ยนเป็นส่วนตัว",
+    "en": "Make private"
+  },
+  "Publish": {
+    "th": "เผยแพร่",
+    "en": "Publish"
+  },
+  "Public": {
+    "th": "สาธารณะ",
+    "en": "Public"
+  },
+  "Private": {
+    "th": "ส่วนตัว",
+    "en": "Private"
+  },
+  "Late Game": {
+    "th": "เลทเกม",
+    "en": "Late Game"
+  },
+  "Early Game": {
+    "th": "ต้นเกม",
+    "en": "Early Game"
+  },
+  "Normal Attack": {
+    "th": "ตีปกติ",
+    "en": "Normal Attack"
+  },
+  "Elemental Skill": {
+    "th": "สกิลธาตุ",
+    "en": "Elemental Skill"
+  },
+  "Elemental Burst": {
+    "th": "ท่าไม้ตาย",
+    "en": "Elemental Burst"
+  },
+  "Command Palette": {
+    "th": "เมนูคำสั่ง",
+    "en": "Command Palette"
+  },
+  "Search for a command to run...": {
+    "th": "ค้นหาคำสั่ง…",
+    "en": "Search for a command to run..."
+  },
+  "Source Team": {
+    "th": "ทีมต้นทาง",
+    "en": "Source Team"
+  },
+  "Untitled Team": {
+    "th": "ทีมไม่มีชื่อ",
+    "en": "Untitled Team"
+  },
+  "Published": {
+    "th": "เผยแพร่แล้ว",
+    "en": "Published"
+  },
+  "Draft": {
+    "th": "ฉบับร่าง",
+    "en": "Draft"
+  },
+  "Calculator & Guide Creator": {
+    "th": "ผู้คำนวณและจัดทำไกด์",
+    "en": "Calculator & Guide Creator"
+  },
+  "Developer": {
+    "th": "ผู้พัฒนา",
+    "en": "Developer"
+  },
+  "Data Entry": {
+    "th": "ผู้กรอกข้อมูล",
+    "en": "Data Entry"
+  },
+  "Normal": {
+    "th": "ปกติ",
+    "en": "Normal"
+  },
+  "Multiply": {
+    "th": "คูณสี",
+    "en": "Multiply"
+  },
+  "Screen": {
+    "th": "สกรีน",
+    "en": "Screen"
+  },
+  "Overlay": {
+    "th": "โอเวอร์เลย์",
+    "en": "Overlay"
+  },
+  "Darken": {
+    "th": "ทำให้มืดลง",
+    "en": "Darken"
+  },
+  "Lighten": {
+    "th": "ทำให้สว่างขึ้น",
+    "en": "Lighten"
+  },
+  "Color Dodge": {
+    "th": "เพิ่มความสว่างสี",
+    "en": "Color Dodge"
+  },
+  "Color Burn": {
+    "th": "เพิ่มความเข้มสี",
+    "en": "Color Burn"
+  },
+  "Hard Light": {
+    "th": "แสงเข้ม",
+    "en": "Hard Light"
+  },
+  "Soft Light": {
+    "th": "แสงนุ่ม",
+    "en": "Soft Light"
+  },
+  "Difference": {
+    "th": "ความแตกต่าง",
+    "en": "Difference"
+  },
+  "Exclusion": {
+    "th": "ยกเว้น",
+    "en": "Exclusion"
+  },
+  "Hue": {
+    "th": "เฉดสี",
+    "en": "Hue"
+  },
+  "Saturation": {
+    "th": "ความอิ่มตัวสี",
+    "en": "Saturation"
+  },
+  "Color": {
+    "th": "สี",
+    "en": "Color"
+  },
+  "Luminosity": {
+    "th": "ความสว่าง",
+    "en": "Luminosity"
+  },
+  "Plus Darker": {
+    "th": "รวมสีให้มืดลง",
+    "en": "Plus Darker"
+  },
+  "Plus Lighter": {
+    "th": "รวมสีให้สว่างขึ้น",
+    "en": "Plus Lighter"
+  }
+} as const;
+
+export type MessageKey = keyof typeof messages;
+
+const lookup = new Map<string, { th: string; en: string }>();
+for (const [key, value] of Object.entries(messages)) {
+  lookup.set(key, value);
+  lookup.set(value.en, value);
+}
+
+const parameterisedMessages = Object.values(messages).flatMap((value) => {
+  return (["th", "en"] as const).flatMap((sourceLocale) => {
+    const source = value[sourceLocale];
+    const names: string[] = [];
+    const parts = source.split(/(\{\w+\})/gu).map((part) => {
+      const placeholder = /^\{(\w+)\}$/u.exec(part);
+      if (placeholder) { names.push(placeholder[1]); return "(.+?)"; }
+      return part.replace(/[.*+?^${}()|[\]\\]/gu, "\\$&");
+    });
+    return names.length ? [{ pattern: new RegExp(`^${parts.join("")}$`, "u"), names, value }] : [];
+  });
+});
+
+export function translate(message: string, params: MessageParams = {}, locale: Locale = "th"): string {
+  let template = lookup.get(message)?.[locale];
+  let values = params;
+  if (!template) {
+    for (const candidate of parameterisedMessages) {
+      const match = candidate.pattern.exec(message);
+      if (!match) continue;
+      template = candidate.value[locale];
+      values = { ...Object.fromEntries(candidate.names.map((name, index) => [name, match[index + 1]])), ...params };
+      break;
+    }
+  }
+  return (template ?? message).replace(/\{(\w+)\}/gu, (placeholder, name: string) => String(values[name] ?? placeholder));
+}
diff --git a/public/flags/gb.svg b/public/flags/gb.svg
new file mode 100644
index 0000000..d67a866
--- /dev/null
+++ b/public/flags/gb.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 30"><defs><clipPath id="bounds"><path d="M0 0h60v30H0z"/></clipPath><clipPath id="diagonals"><path d="M30 15h30v15zv15H0zH0V0zV0h30z"/></clipPath></defs><g clip-path="url(#bounds)"><path fill="#012169" d="M0 0h60v30H0z"/><path stroke="#fff" stroke-width="6" d="m0 0 60 30m0-30L0 30"/><path stroke="#c8102e" stroke-width="4" clip-path="url(#diagonals)" d="m0 0 60 30m0-30L0 30"/><path stroke="#fff" stroke-width="10" d="M30 0v30M0 15h60"/><path stroke="#c8102e" stroke-width="6" d="M30 0v30M0 15h60"/></g></svg>
diff --git a/public/flags/th.svg b/public/flags/th.svg
new file mode 100644
index 0000000..9857916
--- /dev/null
+++ b/public/flags/th.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 24"><path fill="#a51931" d="M0 0h36v24H0z"/><path fill="#f4f5f8" d="M0 4h36v16H0z"/><path fill="#2d2a4a" d="M0 8h36v8H0z"/></svg>
diff --git a/tests/deployment-contract.test.ts b/tests/deployment-contract.test.ts
index f471b99..e94374f 100644
--- a/tests/deployment-contract.test.ts
+++ b/tests/deployment-contract.test.ts
@@ -139,7 +139,7 @@ describe("production deployment contract", () => {
     expect(layout).toContain("<DeploymentUpdateNotifier");
     expect(notifier).toContain('new EventSource("/api/active")');
     expect(notifier).toContain("window.location.reload()");
-    expect(notifier).toContain('label: "รีโหลด"');
+    expect(notifier).toContain('label: t("รีโหลด")');
     expect(route).toContain('channel.sendNamed("deployment", deploymentId)');
   });
 });