diff --git a/README.md b/README.md
index 70ef8db18..feb337268 100644
--- a/README.md
+++ b/README.md
@@ -43,6 +43,7 @@ OpenReply is built around Meta's official Instagram private replies. It does not
 - Multiple Instagram accounts. Connect several professional accounts under one workspace, each with its own limits.
 - Workspaces and roles. Owner, admin, and member roles with invite links, useful if you run this for clients.
 - Campaign templates. Start from a preset instead of a blank form.
+- English and Traditional Chinese interface, with a saved language preference. See [interface languages](docs/localization.md).
 - Inbox. Read your Instagram DM conversations and reply from the dashboard, inside Meta's 24-hour messaging window. Cached so it loads instantly on repeat visits.
 - DM logs. Every send, skip, and failure is logged with a reason.
 - Self-comment filtering. Your own comments never trigger a reply, since Meta rejects DMing yourself anyway.
diff --git a/__tests__/i18n-actions.test.ts b/__tests__/i18n-actions.test.ts
new file mode 100644
index 000000000..8def0585d
--- /dev/null
+++ b/__tests__/i18n-actions.test.ts
@@ -0,0 +1,53 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+const store = vi.hoisted(() => ({ get: vi.fn(), set: vi.fn() }));
+vi.mock("next/headers", () => ({ cookies: async () => store }));
+
+import { setLocale } from "../lib/i18n/actions";
+import { getI18n } from "../lib/i18n/server";
+import { LOCALE_COOKIE } from "../lib/i18n";
+
+beforeEach(() => vi.clearAllMocks());
+afterEach(() => vi.unstubAllEnvs());
+
+describe("language preference", () => {
+  it("renders a saved language on the server before hydration", async () => {
+    store.get.mockReturnValue({ value: "zh-TW" });
+    const { locale, t } = await getI18n();
+    expect(store.get).toHaveBeenCalledWith(LOCALE_COOKIE);
+    expect(locale).toBe("zh-TW");
+    expect(t("Settings")).toBe("設定");
+  });
+
+  it("falls back to English for an invalid cookie", async () => {
+    store.get.mockReturnValue({ value: "unsupported" });
+    expect((await getI18n()).locale).toBe("en");
+  });
+
+  it("persists only the language cookie, across routes and browser restarts", async () => {
+    vi.stubEnv("NODE_ENV", "production");
+    await setLocale("zh-TW");
+    expect(store.set).toHaveBeenCalledExactlyOnceWith(LOCALE_COOKIE, "zh-TW", {
+      path: "/",
+      maxAge: 31_536_000,
+      sameSite: "lax",
+      httpOnly: true,
+      secure: true,
+    });
+  });
+
+  it("allows switching back to English during local development", async () => {
+    vi.stubEnv("NODE_ENV", "development");
+    await setLocale("en");
+    expect(store.set).toHaveBeenCalledWith(
+      LOCALE_COOKIE,
+      "en",
+      expect.objectContaining({ secure: false }),
+    );
+  });
+
+  it("rejects an unsupported locale without writing cookies", async () => {
+    await expect(setLocale("en; path=/")).rejects.toThrow("Unsupported locale");
+    expect(store.set).not.toHaveBeenCalled();
+  });
+});
diff --git a/__tests__/i18n.test.ts b/__tests__/i18n.test.ts
new file mode 100644
index 000000000..c7573f94d
--- /dev/null
+++ b/__tests__/i18n.test.ts
@@ -0,0 +1,58 @@
+import { describe, expect, it } from "vitest";
+import { createI18n, resolveLocale } from "../lib/i18n";
+import zhTW from "../lib/i18n/zh-TW.json";
+
+describe("interface translations", () => {
+  it("keeps English as the default for absent or unsupported preferences", () => {
+    for (const value of [undefined, null, "", "fr", "zh-CN", "../zh-TW"]) {
+      expect(resolveLocale(value)).toBe("en");
+    }
+    expect(resolveLocale("zh-TW")).toBe("zh-TW");
+  });
+
+  it("renders both interface languages from the same keys", () => {
+    expect(createI18n("en").t("Campaigns")).toBe("Campaigns");
+    expect(createI18n("zh-TW").t("Campaigns")).toBe("自動回覆活動");
+  });
+
+  it("allows sentence order to differ between languages", () => {
+    const values = { count: 2 };
+    expect(createI18n("en").t("{count} connected accounts", values)).toBe(
+      "2 connected accounts",
+    );
+    expect(createI18n("zh-TW").t("{count} connected accounts", values)).toBe(
+      "已連接 2 個帳號",
+    );
+  });
+
+  it("preserves interpolation values verbatim, including user content and zero", () => {
+    const { t } = createI18n("zh-TW");
+    expect(t("Hello, {name}!", { name: "{count} <b>Alex</b> $&" })).toBe(
+      "你好，{count} <b>Alex</b> $&！",
+    );
+    expect(t("{count} campaigns", { count: 0 })).toBe("0 個活動");
+  });
+
+  it("translates display labels without changing stored codes or unknown values", () => {
+    const codes = ["SENT", "OWNER", "active", "CUSTOM_STATUS"];
+    expect(codes.map(createI18n("zh-TW").label)).toEqual([
+      "已傳送",
+      "擁有者",
+      "啟用中",
+      "CUSTOM_STATUS",
+    ]);
+    expect(codes).toEqual(["SENT", "OWNER", "active", "CUSTOM_STATUS"]);
+    expect(createI18n("zh-TW").label("toString")).toBe("toString");
+    expect(createI18n("zh-TW").label("__proto__")).toBe("__proto__");
+  });
+
+  it("has complete, plain-text translations with matching interpolation fields", () => {
+    const placeholders = (text: string) =>
+      [...text.matchAll(/\{(\w+)\}/g)].map((match) => match[1]).sort();
+    for (const [source, translation] of Object.entries(zhTW)) {
+      expect(translation.trim(), source).not.toBe("");
+      expect(placeholders(translation), source).toEqual(placeholders(source));
+      expect(source, source).not.toMatch(/&(?:[a-z]+|#\d+);/i);
+    }
+  });
+});
diff --git a/app/(dashboard)/campaigns/[id]/page.tsx b/app/(dashboard)/campaigns/[id]/page.tsx
index 03d4df0d6..b0f2a9d5b 100644
--- a/app/(dashboard)/campaigns/[id]/page.tsx
+++ b/app/(dashboard)/campaigns/[id]/page.tsx
@@ -8,6 +8,7 @@
  * live in the top bar.
  */
 
+import { useI18n } from "@/lib/i18n/provider";
 import { useEffect, useState } from "react";
 import { useParams, useRouter } from "next/navigation";
 import Link from "next/link";
@@ -57,6 +58,7 @@ interface Campaign {
 type Tab = "insights" | "preview";
 
 export default function CampaignDetailPage() {
+  const { t } = useI18n();
   const router = useRouter();
   const { id } = useParams<{ id: string }>();
 
@@ -131,12 +133,12 @@ export default function CampaignDetailPage() {
   if (notFound || !campaign) {
     return (
       <div className="panel rounded p-8 text-center">
-        <p className="text-sm text-muted">Campaign not found.</p>
+        <p className="text-sm text-muted">{t("Campaign not found.")}</p>
         <button
           onClick={() => router.push("/campaigns")}
           className="mt-4 rounded border border-border px-4 py-2 text-sm text-muted hover:text-foreground"
         >
-          Back to campaigns
+          {t("Back to campaigns")}
         </button>
       </div>
     );
@@ -152,19 +154,19 @@ export default function CampaignDetailPage() {
   const hasSecondLink = Boolean(campaign.trackedLinks?.[1]?.destinationUrl);
 
   const trigger = campaign.matchAnyPost
-    ? "Any post or reel"
+    ? t("Any post or reel")
     : campaign.pendingNextReel
-      ? "Your next reel"
-      : "A specific post or reel";
+      ? t("Your next reel")
+      : t("A specific post or reel");
   const matchText = campaign.matchAnyWord
-    ? "Any comment"
-    : campaign.keywords.join(", ") || "No keywords";
+    ? t("Any comment")
+    : campaign.keywords.join(", ") || t("No keywords");
 
   const metrics = [
-    { label: "Sends", value: campaign.analytics.sent },
-    { label: "Clicks", value: campaign.analytics.clicks },
-    { label: "CTR", value: `${campaign.analytics.ctr}%` },
-    { label: "Failed", value: campaign.analytics.failed },
+    { label: t("Sends"), value: campaign.analytics.sent },
+    { label: t("Clicks"), value: campaign.analytics.clicks },
+    { label: t("CTR"), value: `${campaign.analytics.ctr}%` },
+    { label: t("Failed"), value: campaign.analytics.failed },
   ];
 
   return (
@@ -176,7 +178,7 @@ export default function CampaignDetailPage() {
             href="/campaigns"
             className="text-sm text-muted hover:text-foreground"
           >
-            &larr; Campaigns
+            {t("← Campaigns")}
           </Link>
         </div>
         <div className="flex items-center gap-2">
@@ -188,39 +190,39 @@ export default function CampaignDetailPage() {
                 : "bg-zinc-500/10 text-muted"
             }`}
           >
-            {campaign.isActive ? "LIVE" : "Paused"}
+            {campaign.isActive ? t("LIVE") : t("Paused")}
           </span>
         </div>
 
-        <Summary title="When someone comments on">
+        <Summary title={t("When someone comments on")}>
           <div className="flex items-center gap-3">
             {postThumb ? (
               // eslint-disable-next-line @next/next/no-img-element
               <img
                 src={postThumb}
-                alt="Post"
+                alt={t("Post")}
                 className="h-14 w-14 rounded object-cover"
               />
             ) : (
               <div className="grid h-14 w-14 place-items-center rounded bg-surface-hover text-[10px] text-muted">
-                {campaign.matchAnyPost || campaign.pendingNextReel ? "Any" : "Post"}
+                {campaign.matchAnyPost || campaign.pendingNextReel ? "Any" : t("Post")}
               </div>
             )}
             <span className="text-sm text-foreground">{trigger}</span>
           </div>
         </Summary>
 
-        <Summary title="And this comment has">
+        <Summary title={t("And this comment has")}>
           <FieldBox>{matchText}</FieldBox>
           {campaign.dmTriggerEnabled && (
             <p className="text-xs text-muted">
-              Also replies when someone DMs{" "}
-              {campaign.matchAnyWord ? "anything" : "these words"}.
+              {t("Also replies when someone DMs")}{" "}
+              {campaign.matchAnyWord ? t("anything") : t("these words")}.
             </p>
           )}
           {publicReplies.length > 0 && (
             <div className="space-y-1.5">
-              <p className="text-xs text-muted">Public reply under the post</p>
+              <p className="text-xs text-muted">{t("Public reply under the post")}</p>
               {publicReplies.map((m, i) => (
                 <FieldBox key={i}>{m}</FieldBox>
               ))}
@@ -229,14 +231,14 @@ export default function CampaignDetailPage() {
         </Summary>
 
         {campaign.openingDmEnabled && (
-          <Summary title="They will get an opening DM">
-            <FieldBox>{campaign.openingDmMessage || "Opening message"}</FieldBox>
-            <FieldBox>{campaign.openingDmButtonLabel || "Button"}</FieldBox>
+          <Summary title={t("They will get an opening DM")}>
+            <FieldBox>{campaign.openingDmMessage || t("Opening message")}</FieldBox>
+            <FieldBox>{campaign.openingDmButtonLabel || t("Button")}</FieldBox>
           </Summary>
         )}
 
         {campaign.requireFollow && (
-          <Summary title="They must follow first">
+          <Summary title={t("They must follow first")}>
             <FieldBox>
               {campaign.followPromptMessage ||
                 "quick favor before i send your link. i don't make any money from this, it's free. if you want to support me, just don't unfollow after, and star the repo on github if it helps you. tap the button once you're following and i'll send it over"}
@@ -247,7 +249,7 @@ export default function CampaignDetailPage() {
           </Summary>
         )}
 
-        <Summary title="And then, they will get a DM">
+        <Summary title={t("And then, they will get a DM")}>
           <FieldBox>{campaign.dmMessage}</FieldBox>
           {hasLink && (
             <FieldBox>{campaign.linkButtonLabel || "Open link"}</FieldBox>
@@ -260,7 +262,7 @@ export default function CampaignDetailPage() {
         </Summary>
 
         {hasLink && (
-          <Summary title="The exact link sent">
+          <Summary title={t("The exact link sent")}>
             {campaign.trackedLinks
               ?.filter((link) => link.destinationUrl)
               .map((link, i) => (
@@ -271,7 +273,7 @@ export default function CampaignDetailPage() {
                     </p>
                   </div>
                   <p className="text-xs text-muted">
-                    {link.label ? `${link.label} · ` : ""}redirects to{" "}
+                    {link.label ? `${link.label} · ` : ""}{t("redirects to")}{" "}
                     <span className="break-all">{link.destinationUrl}</span>
                   </p>
                 </div>
@@ -280,12 +282,12 @@ export default function CampaignDetailPage() {
         )}
 
         {campaign.followUpEnabled && campaign.followUpMessage && (
-          <Summary title="Then a follow-up message">
+          <Summary title={t("Then a follow-up message")}>
             <FieldBox>{campaign.followUpMessage}</FieldBox>
             <p className="text-xs text-muted">
               {campaign.followUpDelayMinutes && campaign.followUpDelayMinutes > 0
-                ? `Sent ${campaign.followUpDelayMinutes} min after the link.`
-                : "Sent right after the link."}
+                ? t("Sent {minutes} min after the link.", { minutes: campaign.followUpDelayMinutes })
+                : t("Sent right after the link.")}
             </p>
           </Summary>
         )}
@@ -296,10 +298,10 @@ export default function CampaignDetailPage() {
         <div className="flex flex-wrap items-center justify-between gap-x-3 gap-y-3 border-b border-border pb-3">
           <div className="flex gap-4">
             <TabButton active={tab === "insights"} onClick={() => setTab("insights")}>
-              Insights
+              {t("Insights")}
             </TabButton>
             <TabButton active={tab === "preview"} onClick={() => setTab("preview")}>
-              Preview
+              {t("Preview")}
             </TabButton>
           </div>
           <div className="flex items-center gap-2">
@@ -307,7 +309,7 @@ export default function CampaignDetailPage() {
               href={`/campaigns/${campaign.id}/edit`}
               className="rounded border border-border px-3 py-1.5 text-sm text-muted hover:text-foreground"
             >
-              Edit
+              {t("Edit")}
             </Link>
             <button
               onClick={toggleActive}
@@ -318,7 +320,7 @@ export default function CampaignDetailPage() {
                   : "border-success/30 text-success hover:bg-success/10"
               }`}
             >
-              {campaign.isActive ? "Stop" : "Resume"}
+              {campaign.isActive ? t("Stop") : t("Resume")}
             </button>
           </div>
         </div>
@@ -345,7 +347,7 @@ export default function CampaignDetailPage() {
             avatarUrl={avatarUrl}
             postThumb={postThumb}
             caption=""
-            sampleComment={campaign.matchAnyWord ? "nice!" : campaign.keywords[0] ?? "LINK"}
+            sampleComment={campaign.matchAnyWord ? t("nice!") : campaign.keywords[0] ?? "LINK"}
             dmTriggerEnabled={campaign.dmTriggerEnabled}
             publicReplyEnabled={campaign.publicReplyEnabled}
             publicReplyMessage={publicReplies[0] ?? ""}
diff --git a/app/(dashboard)/campaigns/import/page.tsx b/app/(dashboard)/campaigns/import/page.tsx
index 4c0c394bf..1e116c5cf 100644
--- a/app/(dashboard)/campaigns/import/page.tsx
+++ b/app/(dashboard)/campaigns/import/page.tsx
@@ -8,6 +8,7 @@
  * each campaign and pick its reel before saving.
  */
 
+import { useI18n } from "@/lib/i18n/provider";
 import { useEffect, useState } from "react";
 import { useRouter } from "next/navigation";
 import AccountSelect, { type AccountOption } from "@/components/account-select";
@@ -19,6 +20,7 @@ const SAMPLE = `keywords,dm_message,public_reply,tracked_url,opening_dm,opening_
 "LINK,SHOP","grab it here: {link}","dmed u",,,`;
 
 export default function ImportCampaignsPage() {
+  const { t } = useI18n();
   const router = useRouter();
   const [accounts, setAccounts] = useState<AccountOption[]>([]);
   const [selectedAccountId, setSelectedAccountId] = useState("");
@@ -42,7 +44,7 @@ export default function ImportCampaignsPage() {
     setError(null);
     const parsed = parseCsv(csv);
     if (parsed.length === 0) {
-      setError("Paste a CSV with a header row and at least one campaign.");
+      setError(t("Paste a CSV with a header row and at least one campaign."));
       return;
     }
 
@@ -56,7 +58,7 @@ export default function ImportCampaignsPage() {
         .slice(0, 10);
       const dmMessage = (r.dm_message ?? r.message ?? "").trim();
       if (keywords.length === 0 || !dmMessage) {
-        setError(`Row ${i + 1} is missing keywords or a message.`);
+        setError(t("Row {row} is missing keywords or a message.", { row: i + 1 }));
         return;
       }
       rows.push({
@@ -76,7 +78,7 @@ export default function ImportCampaignsPage() {
         window.localStorage.setItem(IMPORT_ACCOUNT_KEY, selectedAccountId);
       }
     } catch {
-      setError("Could not stage the import in this browser.");
+      setError(t("Could not stage the import in this browser."));
       return;
     }
     router.push("/campaigns/new");
@@ -85,21 +87,17 @@ export default function ImportCampaignsPage() {
   return (
     <div className="max-w-2xl mx-auto space-y-6">
       <div>
-        <h1 className="text-lg font-semibold">Import campaigns</h1>
+        <h1 className="text-lg font-semibold">{t("Import campaigns")}</h1>
         <p className="text-sm text-muted mt-1">
-          Paste a CSV with one row per campaign. Each row opens in the builder
-          prefilled and editable, so you can review it and pick the reel before
-          saving. Required columns are{" "}
-          <code className="text-accent">keywords</code> and{" "}
-          <code className="text-accent">dm_message</code>. Optional:{" "}
+          {t("Paste a CSV with one row per campaign. Each row opens in the builder prefilled and editable, so you can review it and pick the reel before saving. Required columns are")}{" "}
+          <code className="text-accent">keywords</code> {t("and")}{" "}
+          <code className="text-accent">dm_message</code>{t(". Optional:")}{" "}
           <code className="text-accent">name</code>,{" "}
           <code className="text-accent">public_reply</code>,{" "}
           <code className="text-accent">tracked_url</code>,{" "}
           <code className="text-accent">opening_dm</code>,{" "}
-          <code className="text-accent">opening_dm_button</code>. Keywords go in
-          one cell, separated by commas. Use{" "}
-          <code className="text-accent">{"{link}"}</code> in the message to
-          insert the tracked link.
+          <code className="text-accent">opening_dm_button</code>{t(". Keywords go in one cell, separated by commas. Use")}{" "}
+          <code className="text-accent">{"{link}"}</code> {t("in the message to insert the tracked link.")}
         </p>
       </div>
 
@@ -112,14 +110,14 @@ export default function ImportCampaignsPage() {
       {accounts.length > 1 && (
         <div className="space-y-2">
           <label className="block text-sm font-medium text-foreground">
-            Instagram account
+            {t("Instagram account")}
           </label>
           <AccountSelect
             accounts={accounts}
             value={selectedAccountId}
             onChange={setSelectedAccountId}
             includeAll={false}
-            label="Account"
+            label={t("Account")}
           />
         </div>
       )}
@@ -138,7 +136,7 @@ export default function ImportCampaignsPage() {
           onClick={() => setCsv(SAMPLE)}
           className="text-xs text-muted hover:text-foreground"
         >
-          Fill with a sample
+          {t("Fill with a sample")}
         </button>
       </div>
 
@@ -147,13 +145,13 @@ export default function ImportCampaignsPage() {
           onClick={startImport}
           className="px-5 py-2 rounded bg-accent text-sm font-medium text-white hover:bg-accent-hover"
         >
-          Review and import
+          {t("Review and import")}
         </button>
         <button
           onClick={() => router.push("/campaigns")}
           className="px-5 py-2 rounded text-sm text-muted hover:text-foreground border border-border"
         >
-          Cancel
+          {t("Cancel")}
         </button>
       </div>
     </div>
diff --git a/app/(dashboard)/campaigns/page.tsx b/app/(dashboard)/campaigns/page.tsx
index 1cea26e8e..1c764f442 100644
--- a/app/(dashboard)/campaigns/page.tsx
+++ b/app/(dashboard)/campaigns/page.tsx
@@ -6,6 +6,7 @@
  * Shows all campaigns as cards with toggle and delete.
  */
 
+import { useI18n } from "@/lib/i18n/provider";
 import { useCallback, useEffect, useState } from "react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
@@ -63,6 +64,7 @@ interface Campaign {
 }
 
 export default function CampaignsPage() {
+  const { t, label } = useI18n();
   const router = useRouter();
   const [automations, setAutomations] = useState<Campaign[]>([]);
   const [accounts, setAccounts] = useState<AccountOption[]>([]);
@@ -228,7 +230,7 @@ export default function CampaignsPage() {
   }
 
   async function deleteAutomation(id: string) {
-    if (!confirm("Delete this campaign? This cannot be undone.")) return;
+    if (!confirm(t("Delete this campaign? This cannot be undone."))) return;
     try {
       await fetch(`/api/automations?id=${id}`, { method: "DELETE" });
       setAutomations((prev) => prev.filter((a) => a.id !== id));
@@ -282,11 +284,9 @@ export default function CampaignsPage() {
       <div className="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
         <div>
           <p className="text-sm text-muted">
-            {filtered.length}
             {filtered.length !== automations.length
-              ? ` of ${automations.length}`
-              : ""}{" "}
-            campaign{automations.length !== 1 ? "s" : ""}
+              ? t("{count} of {total} campaigns", { count: filtered.length, total: automations.length })
+              : t(automations.length === 1 ? "{count} campaign" : "{count} campaigns", { count: automations.length })}
           </p>
         </div>
         <div className="flex flex-wrap items-end gap-3">
@@ -301,13 +301,13 @@ export default function CampaignsPage() {
             href="/campaigns/import"
             className="flex-1 rounded border border-border px-4 py-2 text-center text-sm font-medium text-muted hover:text-foreground sm:flex-none"
           >
-            Import
+            {t("Import")}
           </Link>
           <Link
             href="/campaigns/new"
             className="flex-1 rounded bg-accent px-4 py-2 text-center text-sm font-medium text-white hover:bg-accent-hover sm:flex-none"
           >
-            New Campaign
+            {t("New Campaign")}
           </Link>
         </div>
       </div>
@@ -318,13 +318,13 @@ export default function CampaignsPage() {
           <input
             value={search}
             onChange={(e) => setSearch(e.target.value)}
-            placeholder="Search campaigns by name, keyword, or message…"
+            placeholder={t("Search campaigns by name, keyword, or message…")}
             className="w-full rounded-lg border border-border bg-surface px-3 py-2 text-sm text-foreground placeholder:text-zinc-500 focus:border-accent/40 focus:outline-none"
           />
           <div className="inline-flex shrink-0 rounded-lg bg-surface p-1">
             {(["all", "active", "paused"] as const).map((s) => (
               <button
-                key={s}
+                key={label(s)}
                 type="button"
                 onClick={() => setStatusFilter(s)}
                 className={`rounded-md px-3 py-1.5 text-sm capitalize transition-colors ${
@@ -333,7 +333,7 @@ export default function CampaignsPage() {
                     : "text-muted hover:text-foreground"
                 }`}
               >
-                {s}
+                {label(s)}
               </button>
             ))}
           </div>
@@ -343,15 +343,15 @@ export default function CampaignsPage() {
       {/* Empty state */}
       {automations.length === 0 && (
         <div className="panel rounded p-8 text-center sm:p-12">
-          <h3 className="text-lg font-semibold mb-2">No campaigns yet</h3>
+          <h3 className="text-lg font-semibold mb-2">{t("No campaigns yet")}</h3>
           <p className="text-sm text-muted mb-6 max-w-sm mx-auto">
-            Create your first comment-to-DM campaign to turn a post or reel into a measurable conversation flow.
+            {t("Create your first comment-to-DM campaign to turn a post or reel into a measurable conversation flow.")}
           </p>
           <Link
             href="/campaigns/new"
             className="inline-flex items-center gap-2 px-5 py-2.5 rounded bg-accent text-sm font-semibold text-white hover:bg-accent-hover transition-colors"
           >
-            Create Campaign
+            {t("Create Campaign")}
           </Link>
         </div>
       )}
@@ -359,7 +359,7 @@ export default function CampaignsPage() {
       {/* No matches for the current filter */}
       {automations.length > 0 && filtered.length === 0 && (
         <div className="panel rounded p-8 text-center text-sm text-muted">
-          No campaigns match your search.
+          {t("No campaigns match your search.")}
         </div>
       )}
 
@@ -384,13 +384,13 @@ export default function CampaignsPage() {
                       e.stopPropagation();
                       setPlayingVideo({ url: videoUrl, postUrl: auto.postUrl });
                     }}
-                    aria-label="Play reel preview"
+                    aria-label={t("Play reel preview")}
                     className="shrink-0"
                   >
                     {/* eslint-disable-next-line @next/next/no-img-element */}
                     <img
                       src={thumbnails[auto.postId]}
-                      alt="Campaign reel"
+                      alt={t("Campaign reel")}
                       className="w-12 h-12 rounded object-cover border border-border hover:border-border-hover"
                       onError={(e) => {
                         e.currentTarget.style.display = "none";
@@ -408,7 +408,7 @@ export default function CampaignsPage() {
                     {/* eslint-disable-next-line @next/next/no-img-element */}
                     <img
                       src={thumbnails[auto.postId]}
-                      alt="Campaign post"
+                      alt={t("Campaign post")}
                       className="w-12 h-12 rounded object-cover border border-border"
                       onError={(e) => {
                         e.currentTarget.style.display = "none";
@@ -430,21 +430,21 @@ export default function CampaignsPage() {
                         : "bg-zinc-500/10 text-muted"
                     }`}
                   >
-                    {auto.isActive ? "Active" : "Paused"}
+                    {auto.isActive ? t("Active") : t("Paused")}
                   </span>
                   {auto.pendingNextReel && (
                     <span className="shrink-0 rounded-full bg-amber-500/10 px-2 py-0.5 text-xs font-medium text-warning">
-                      Waiting for next reel
+                      {t("Waiting for next reel")}
                     </span>
                   )}
                   {auto.requireFollow && (
                     <span className="shrink-0 rounded-full bg-accent/10 px-2 py-0.5 text-xs font-medium text-accent">
-                      Follow gate
+                      {t("Follow gate")}
                     </span>
                   )}
                   {auto.trackedLinks.length >= 2 && (
                     <span className="shrink-0 rounded-full bg-accent/10 px-2 py-0.5 text-xs font-medium text-accent">
-                      2 links
+                      {t("2 links")}
                     </span>
                   )}
                 </div>
@@ -462,7 +462,7 @@ export default function CampaignsPage() {
                 </div>
 
                 {/* DM preview */}
-                <p className="text-sm text-muted truncate">&ldquo;{auto.dmMessage}&rdquo;</p>
+                <p className="text-sm text-muted truncate">&ldquo;{auto.dmMessage}{t("”")}</p>
 
                 {/* Tracked link sent */}
                 {auto.trackedLinks[0]?.trackedUrl && (
@@ -474,20 +474,20 @@ export default function CampaignsPage() {
                 {/* Stats */}
                 <div className="flex flex-wrap items-center gap-x-4 gap-y-2 mt-3 text-xs text-zinc-500">
                   <span className="font-medium text-foreground">
-                    {auto._count.dmLogs} runs
+                    {auto._count.dmLogs} {t("runs")}
                   </span>
                   <span>·</span>
                   <span className="font-medium text-foreground">
-                    {auto.analytics.ctr}% CTR
+                    {auto.analytics.ctr}{t("% CTR")}
                   </span>
                   <span>·</span>
-                  <span>{auto.analytics.sent} sent</span>
+                  <span>{auto.analytics.sent} {t("sent")}</span>
                   <span>·</span>
-                  <span>{auto.analytics.skipped} skipped</span>
+                  <span>{auto.analytics.skipped} {t("skipped")}</span>
                   <span>·</span>
-                  <span>{auto.analytics.failed} failed</span>
+                  <span>{auto.analytics.failed} {t("failed")}</span>
                   <span>·</span>
-                  <span>{auto.analytics.clicks} clicks</span>
+                  <span>{auto.analytics.clicks} {t("clicks")}</span>
                 </div>
 
                 {auto.analytics.topKeywords.length > 0 && (
@@ -515,7 +515,7 @@ export default function CampaignsPage() {
                     onClick={() => void copyReelUrl(auto)}
                     className="shrink-0 rounded-full border border-border px-2.5 py-1 text-xs font-medium text-muted transition-colors hover:border-border-hover hover:text-foreground"
                   >
-                    {copiedId === auto.id ? "Copied!" : "Copy URL"}
+                    {copiedId === auto.id ? t("Copied!") : t("Copy URL")}
                   </button>
                 )}
                 {/* Toggle */}
@@ -540,7 +540,7 @@ export default function CampaignsPage() {
                     onClick={() =>
                       setMenuOpenId((cur) => (cur === auto.id ? null : auto.id))
                     }
-                    aria-label="More actions"
+                    aria-label={t("More actions")}
                     className="px-2 py-1 rounded text-lg leading-none text-muted hover:text-foreground"
                   >
                     ⋯
@@ -556,7 +556,7 @@ export default function CampaignsPage() {
                           onClick={() => void duplicateAutomation(auto.id)}
                           className="block w-full px-3 py-2 text-left text-sm text-foreground hover:bg-surface-hover"
                         >
-                          Duplicate
+                          {t("Duplicate")}
                         </button>
                         <button
                           onClick={() => {
@@ -565,7 +565,7 @@ export default function CampaignsPage() {
                           }}
                           className="block w-full px-3 py-2 text-left text-sm text-error hover:bg-surface-hover"
                         >
-                          Delete
+                          {t("Delete")}
                         </button>
                       </div>
                     </>
@@ -596,7 +596,7 @@ export default function CampaignsPage() {
                   rel="noreferrer"
                   className="text-zinc-300 hover:text-white"
                 >
-                  Open on Instagram
+                  {t("Open on Instagram")}
                 </a>
               )}
               <button
@@ -604,7 +604,7 @@ export default function CampaignsPage() {
                 onClick={() => setPlayingVideo(null)}
                 className="text-zinc-300 hover:text-white"
               >
-                Close
+                {t("Close")}
               </button>
             </div>
             <video
diff --git a/app/(dashboard)/dashboard/page.tsx b/app/(dashboard)/dashboard/page.tsx
index 14a01b37e..5573839f2 100644
--- a/app/(dashboard)/dashboard/page.tsx
+++ b/app/(dashboard)/dashboard/page.tsx
@@ -6,6 +6,7 @@
  * Overview cards, 7-day chart, and recent activity feed.
  */
 
+import { useI18n } from "@/lib/i18n/provider";
 import { useEffect, useState } from "react";
 import AccountSelect, { type AccountOption } from "@/components/account-select";
 import StatCard from "@/components/stat-card";
@@ -41,6 +42,7 @@ interface DashboardStats {
 }
 
 export default function DashboardPage() {
+  const { t, label } = useI18n();
   const [stats, setStats] = useState<DashboardStats | null>(null);
   const [loading, setLoading] = useState(true);
   const [selectedAccountId, setSelectedAccountId] = useState("all");
@@ -91,17 +93,15 @@ export default function DashboardPage() {
       <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
         <div>
           <h1 className="text-2xl font-bold text-foreground sm:text-3xl">
-            Hello, {stats?.userName ?? "there"}!
+            {t("Hello, {name}!", { name: stats?.userName ?? t("there") })}
           </h1>
           <p className="mt-1 text-sm text-muted">
-            {connectedCount} connected{" "}
-            {connectedCount === 1 ? "account" : "accounts"}
+            {t(connectedCount === 1 ? "{count} connected account" : "{count} connected accounts", { count: connectedCount })}
             {" · "}
-            {stats?.contactsCount ?? 0}{" "}
-            {stats?.contactsCount === 1 ? "contact" : "contacts"}
+            {t(stats?.contactsCount === 1 ? "{count} contact" : "{count} contacts", { count: stats?.contactsCount ?? 0 })}
             {" · "}
             <a href="/logs" className="text-accent hover:underline">
-              See activity
+              {t("See activity")}
             </a>
           </p>
         </div>
@@ -117,24 +117,24 @@ export default function DashboardPage() {
       {/* Stat Cards */}
       <div className="grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 gap-3 sm:gap-4">
         <StatCard
-          label="Active Campaigns"
+          label={t("Active Campaigns")}
           value={stats?.activeAutomations ?? 0}
         />
-        <StatCard label="DMs Sent" value={stats?.dmsSentMonth ?? 0} />
-        <StatCard label="Skipped" value={stats?.dmsSkippedMonth ?? 0} />
-        <StatCard label="Failed" value={stats?.dmsFailedMonth ?? 0} />
-        <StatCard label="Clicks" value={stats?.clicksThisMonth ?? 0} />
-        <StatCard label="CTR" value={`${stats?.ctrThisMonth ?? 0}%`} />
+        <StatCard label={t("DMs Sent")} value={stats?.dmsSentMonth ?? 0} />
+        <StatCard label={t("Skipped")} value={stats?.dmsSkippedMonth ?? 0} />
+        <StatCard label={t("Failed")} value={stats?.dmsFailedMonth ?? 0} />
+        <StatCard label={t("Clicks")} value={stats?.clicksThisMonth ?? 0} />
+        <StatCard label={t("CTR")} value={`${stats?.ctrThisMonth ?? 0}%`} />
       </div>
 
       {/* Chart + Recent Activity */}
       <div className="grid grid-cols-1 lg:grid-cols-6 gap-4 sm:gap-6">
         {/* 7-Day Chart */}
         <div className="lg:col-span-3 panel rounded p-4 sm:p-6">
-          <h2 className="text-sm font-semibold text-foreground mb-6">DMs — Last 7 Days</h2>
+          <h2 className="text-sm font-semibold text-foreground mb-6">{t("DMs — Last 7 Days")}</h2>
           <div className="flex items-end gap-1.5 h-40 sm:gap-2">
             {stats?.dailyDMs.map((day) => (
-              <div key={day.date} className="min-w-0 flex-1 flex flex-col items-center gap-2">
+              <div key={label(day.date)} className="min-w-0 flex-1 flex flex-col items-center gap-2">
                 <span className="text-xs text-muted font-medium">{day.count}</span>
                 <div
                   className="w-full rounded-sm bg-accent min-h-[4px]"
@@ -142,7 +142,7 @@ export default function DashboardPage() {
                 />
                 {/* Seven labels share a phone's width, so they must not wrap. */}
                 <span className="w-full truncate text-center text-[10px] text-zinc-500">
-                  {day.date}
+                  {label(day.date)}
                 </span>
               </div>
             ))}
@@ -151,10 +151,10 @@ export default function DashboardPage() {
 
         {/* Top Keywords */}
         <div className="lg:col-span-1 panel rounded p-4 sm:p-6">
-          <h2 className="text-sm font-semibold text-foreground mb-4">Top Keywords</h2>
+          <h2 className="text-sm font-semibold text-foreground mb-4">{t("Top Keywords")}</h2>
           <div className="space-y-3">
             {stats?.topKeywords.length === 0 && (
-              <p className="text-sm text-muted py-8">No keyword matches yet</p>
+              <p className="text-sm text-muted py-8">{t("No keyword matches yet")}</p>
             )}
             {stats?.topKeywords.map((keyword) => (
               <div key={keyword.keyword} className="flex items-center justify-between gap-3">
@@ -169,10 +169,10 @@ export default function DashboardPage() {
 
         {/* Recent Activity */}
         <div className="lg:col-span-2 panel rounded p-4 sm:p-6">
-          <h2 className="text-sm font-semibold text-foreground mb-4">Recent Activity</h2>
+          <h2 className="text-sm font-semibold text-foreground mb-4">{t("Recent Activity")}</h2>
           <div className="space-y-3 max-h-60 overflow-y-auto">
             {stats?.recentLogs.length === 0 && (
-              <p className="text-sm text-muted text-center py-8">No activity yet</p>
+              <p className="text-sm text-muted text-center py-8">{t("No activity yet")}</p>
             )}
             {stats?.recentLogs.map((log) => (
               <div
diff --git a/app/(dashboard)/diagnostics/page.tsx b/app/(dashboard)/diagnostics/page.tsx
index 4a641c1f4..1801efac5 100644
--- a/app/(dashboard)/diagnostics/page.tsx
+++ b/app/(dashboard)/diagnostics/page.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { useI18n } from "@/lib/i18n/provider";
 import { useEffect, useState } from "react";
 import StatusBadge from "@/components/status-badge";
 
@@ -52,8 +53,8 @@ interface DiagnosticsData {
   }>;
 }
 
-function formatDate(value: string) {
-  return new Date(value).toLocaleString();
+function formatDate(value: string, locale: string) {
+  return new Date(value).toLocaleString(locale);
 }
 
 function EmptyState({ label }: { label: string }) {
@@ -76,6 +77,7 @@ function Section({
 }
 
 export default function DiagnosticsPage() {
+  const { t, label, locale } = useI18n();
   const [data, setData] = useState<DiagnosticsData | null>(null);
   const [loading, setLoading] = useState(true);
 
@@ -124,42 +126,42 @@ export default function DiagnosticsPage() {
       <div className="flex flex-col justify-between gap-4 sm:flex-row sm:items-center">
         <div>
           <h1 className="text-2xl font-bold text-foreground">
-            Production Diagnostics
+            {t("Production Diagnostics")}
           </h1>
           <p className="mt-1 text-sm text-muted">
-            Health, queues, webhook failures, billing events, and worker alerts.
+            {t("Health, queues, webhook failures, billing events, and worker alerts.")}
           </p>
         </div>
         <button
           onClick={() => void refreshDiagnostics()}
           className="rounded border border-border bg-surface px-4 py-2 text-sm font-semibold text-foreground transition hover:border-border-hover"
         >
-          Refresh
+          {t("Refresh")}
         </button>
       </div>
 
       <div className="grid grid-cols-2 gap-3 sm:gap-4 md:grid-cols-3">
         <div className="panel rounded p-4 sm:p-5">
           <p className="text-xs font-semibold uppercase text-muted">
-            Worker health
+            {t("Worker health")}
           </p>
           <p
             className={`mt-3 text-2xl font-bold ${
               data?.workerHealth.healthy ? "text-success" : "text-warning"
             }`}
           >
-            {data?.workerHealth.healthy ? "Healthy" : "Needs attention"}
+            {data?.workerHealth.healthy ? t("Healthy") : t("Needs attention")}
           </p>
           <p className="mt-2 text-xs text-muted">
             {workerAgeSeconds == null
-              ? "No heartbeat found"
-              : `Last heartbeat ${workerAgeSeconds}s ago`}
+              ? t("No heartbeat found")
+              : t("Last heartbeat {seconds}s ago", { seconds: workerAgeSeconds })}
           </p>
         </div>
         {["waiting", "active", "delayed", "failed"].map((key) => (
           <div key={key} className="panel rounded p-4 sm:p-5">
             <p className="text-xs font-semibold uppercase text-muted">
-              Queue {key}
+              {t("Queue")} {label(key)}
             </p>
             <p className="mt-3 text-2xl font-bold text-foreground">
               {data?.queueCounts[key] ?? 0}
@@ -168,7 +170,7 @@ export default function DiagnosticsPage() {
         ))}
       </div>
 
-      <Section title="Recent Worker Alerts">
+      <Section title={t("Recent Worker Alerts")}>
         {data?.workerAlerts.length ? (
           <div className="space-y-3">
             {data.workerAlerts.map((alert) => (
@@ -185,19 +187,19 @@ export default function DiagnosticsPage() {
                   </span>
                 </div>
                 <p className="mt-2 text-xs text-muted">
-                  {formatDate(alert.createdAt)}
+                  {formatDate(alert.createdAt, locale)}
                   {alert.commentId ? ` · ${alert.commentId}` : ""}
                 </p>
               </div>
             ))}
           </div>
         ) : (
-          <EmptyState label="No worker alerts recorded." />
+          <EmptyState label={t("No worker alerts recorded.")} />
         )}
       </Section>
 
       <div className="grid gap-6 lg:grid-cols-2">
-        <Section title="Campaign DM Failures And Skips">
+        <Section title={t("Campaign DM Failures And Skips")}>
           {data?.dmFailures.length ? (
             <div className="space-y-3">
               {data.dmFailures.map((item) => (
@@ -218,35 +220,35 @@ export default function DiagnosticsPage() {
               ))}
             </div>
           ) : (
-            <EmptyState label="No DM failures or skips." />
+            <EmptyState label={t("No DM failures or skips.")} />
           )}
         </Section>
 
-        <Section title="Webhook Failures">
+        <Section title={t("Webhook Failures")}>
           {data?.webhookFailures.length ? (
             <div className="space-y-3">
               {data.webhookFailures.map((event) => (
                 <div key={event.id} className="border-b border-border pb-3 last:border-0">
                   <p className="text-sm font-semibold text-foreground">
-                    {event.object ?? "Instagram webhook"}
+                    {event.object ?? t("Instagram webhook")}
                   </p>
                   <p className="mt-1 text-xs text-error">
-                    {event.errorMessage ?? "Unknown error"}
+                    {event.errorMessage ?? t("Unknown error")}
                   </p>
                   <p className="mt-1 text-xs text-muted">
-                    {formatDate(event.createdAt)}
+                    {formatDate(event.createdAt, locale)}
                   </p>
                 </div>
               ))}
             </div>
           ) : (
-            <EmptyState label="No failed webhook events." />
+            <EmptyState label={t("No failed webhook events.")} />
           )}
         </Section>
       </div>
 
       <div className="grid gap-6 lg:grid-cols-2">
-        <Section title="Token Refresh Failures">
+        <Section title={t("Token Refresh Failures")}>
           {data?.tokenRefreshFailures.length ? (
             <div className="space-y-3">
               {data.tokenRefreshFailures.map((event) => (
@@ -255,31 +257,31 @@ export default function DiagnosticsPage() {
                     {event.message}
                   </p>
                   <p className="mt-1 text-xs text-muted">
-                    {formatDate(event.createdAt)}
+                    {formatDate(event.createdAt, locale)}
                   </p>
                 </div>
               ))}
             </div>
           ) : (
-            <EmptyState label="No token refresh failures." />
+            <EmptyState label={t("No token refresh failures.")} />
           )}
         </Section>
 
       </div>
 
-      <Section title="Operational Event Timeline">
+      <Section title={t("Operational Event Timeline")}>
         {data?.operationalEvents.length ? (
           <div className="space-y-3">
             {data.operationalEvents.map((event) => (
               <div key={event.id} className="grid gap-2 border-b border-border pb-3 last:border-0 sm:grid-cols-[140px_1fr_auto]">
                 <p className="text-xs font-semibold text-muted">{event.source}</p>
                 <p className="text-sm text-foreground">{event.message}</p>
-                <p className="text-xs text-muted">{formatDate(event.createdAt)}</p>
+                <p className="text-xs text-muted">{formatDate(event.createdAt, locale)}</p>
               </div>
             ))}
           </div>
         ) : (
-          <EmptyState label="No operational events recorded." />
+          <EmptyState label={t("No operational events recorded.")} />
         )}
       </Section>
     </div>
diff --git a/app/(dashboard)/inbox/page.tsx b/app/(dashboard)/inbox/page.tsx
index e87e60cc6..b898b7fd5 100644
--- a/app/(dashboard)/inbox/page.tsx
+++ b/app/(dashboard)/inbox/page.tsx
@@ -10,6 +10,8 @@
  * surfaced verbatim when it applies.
  */
 
+import type { Locale } from "@/lib/i18n";
+import { useI18n } from "@/lib/i18n/provider";
 import { useCallback, useEffect, useRef, useState } from "react";
 import AccountSelect, { type AccountOption } from "@/components/account-select";
 import { readCache, writeCache } from "@/lib/client-cache";
@@ -24,18 +26,19 @@ const CACHE_MAX_AGE_MS = 60_000;
 const convCacheKey = (accountId: string) => `inbox:convs:${accountId}`;
 const msgCacheKey = (conversationId: string) => `inbox:msgs:${conversationId}`;
 
-function formatTime(iso: string | null): string {
+function formatTime(iso: string | null, locale: Locale): string {
   if (!iso) return "";
   const d = new Date(iso);
   if (Number.isNaN(d.getTime())) return "";
   const now = new Date();
   const sameDay = d.toDateString() === now.toDateString();
   return sameDay
-    ? d.toLocaleTimeString(undefined, { hour: "numeric", minute: "2-digit" })
-    : d.toLocaleDateString(undefined, { month: "short", day: "numeric" });
+    ? d.toLocaleTimeString(locale, { hour: "numeric", minute: "2-digit" })
+    : d.toLocaleDateString(locale, { month: "short", day: "numeric" });
 }
 
 export default function InboxPage() {
+  const { t, locale } = useI18n();
   const [accounts, setAccounts] = useState<AccountOption[]>([]);
   // Seed from the last-used account so a revisit can paint the cached
   // conversation list immediately, before the account list even loads.
@@ -241,12 +244,12 @@ export default function InboxPage() {
         // Roll the optimistic message back and restore the draft so it's not lost.
         setMessages((prev) => prev.filter((m) => m.id !== optimistic.id));
         setDraft(text);
-        setSendError(data.error ?? "Failed to send message");
+        setSendError(data.error ?? t("Failed to send message"));
       }
     } catch {
       setMessages((prev) => prev.filter((m) => m.id !== optimistic.id));
       setDraft(text);
-      setSendError("Failed to send message");
+      setSendError(t("Failed to send message"));
     } finally {
       setSending(false);
     }
@@ -262,7 +265,7 @@ export default function InboxPage() {
   return (
     <div className="space-y-4">
       <div className="flex items-end justify-between gap-4">
-        <h1 className="text-lg font-semibold text-foreground">Inbox</h1>
+        <h1 className="text-lg font-semibold text-foreground">{t("Inbox")}</h1>
         {accounts.length > 1 && (
           <AccountSelect
             accounts={accounts}
@@ -282,15 +285,15 @@ export default function InboxPage() {
           }`}
         >
           <div className="shrink-0 border-b border-border px-4 py-3 text-sm font-semibold text-foreground">
-            Conversations
+            {t("Conversations")}
           </div>
           <div className="min-h-0 flex-1 overflow-y-auto">
             {convLoading ? (
-              <p className="px-4 py-6 text-sm text-muted">Loading…</p>
+              <p className="px-4 py-6 text-sm text-muted">{t("Loading…")}</p>
             ) : convError ? (
-              <p className="px-4 py-6 text-sm text-error">{convError}</p>
+              <p className="px-4 py-6 text-sm text-error">{convError === "Failed to load conversations" ? t("Failed to load conversations") : convError}</p>
             ) : conversations.length === 0 ? (
-              <p className="px-4 py-6 text-sm text-muted">No conversations yet.</p>
+              <p className="px-4 py-6 text-sm text-muted">{t("No conversations yet.")}</p>
             ) : (
               conversations.map((c) => {
                 const isActive = c.id === activeId;
@@ -305,19 +308,19 @@ export default function InboxPage() {
                   >
                     <div className="flex items-baseline justify-between gap-2">
                       <span className="truncate text-sm font-medium text-foreground">
-                        {c.detailsUnavailable ? "Details unavailable" : `@${c.contact.username ?? "unknown"}`}
+                        {c.detailsUnavailable ? t("Details unavailable") : `@${c.contact.username ?? "unknown"}`}
                       </span>
                       <span className="shrink-0 text-[11px] text-zinc-500">
-                        {formatTime(c.updatedTime)}
+                        {formatTime(c.updatedTime, locale)}
                       </span>
                     </div>
                     {c.detailsUnavailable && (
-                      <p className="mt-0.5 text-xs text-muted">Instagram could not load this conversation.</p>
+                      <p className="mt-0.5 text-xs text-muted">{t("Instagram could not load this conversation.")}</p>
                     )}
                     {c.lastMessage && (
                       <p className="mt-0.5 truncate text-xs text-muted">
-                        {c.lastMessage.fromMe ? "You: " : ""}
-                        {c.lastMessage.text || "(no text)"}
+                        {c.lastMessage.fromMe ? t("You: ") : ""}
+                        {c.lastMessage.text || t("(no text)")}
                       </p>
                     )}
                   </button>
@@ -334,7 +337,7 @@ export default function InboxPage() {
         >
           {!active ? (
             <div className="flex flex-1 items-center justify-center p-6 text-sm text-muted">
-              Select a conversation to read and reply.
+              {t("Select a conversation to read and reply.")}
             </div>
           ) : (
             <>
@@ -343,24 +346,24 @@ export default function InboxPage() {
                   type="button"
                   onClick={() => setActiveId(null)}
                   className="-ml-1 rounded px-2 py-1 text-muted hover:text-foreground sm:hidden"
-                  aria-label="Back to conversations"
+                  aria-label={t("Back to conversations")}
                 >
-                  Back
+                  {t("Back")}
                 </button>
                 <span className="truncate">
-                  {active.detailsUnavailable ? "Details unavailable" : `@${active.contact.username ?? "unknown"}`}
+                  {active.detailsUnavailable ? t("Details unavailable") : `@${active.contact.username ?? "unknown"}`}
                 </span>
               </div>
 
               <div ref={scrollRef} className="min-h-0 flex-1 space-y-2 overflow-y-auto p-4">
                 {active.detailsUnavailable ? (
                   <p role="status" className="text-sm text-muted">
-                    Instagram could not load the details of this conversation. Other conversations are still available. You can check this chat in Instagram.
+                    {t("Instagram could not load the details of this conversation. Other conversations are still available. You can check this chat in Instagram.")}
                   </p>
                 ) : threadLoading && messages.length === 0 ? (
-                  <p className="text-sm text-muted">Loading…</p>
+                  <p className="text-sm text-muted">{t("Loading…")}</p>
                 ) : messages.length === 0 ? (
-                  <p className="text-sm text-muted">No messages.</p>
+                  <p className="text-sm text-muted">{t("No messages.")}</p>
                 ) : (
                   messages.map((m) => (
                     <div
@@ -380,7 +383,7 @@ export default function InboxPage() {
                             m.fromMe ? "text-white/70" : "text-zinc-500"
                           }`}
                         >
-                          {formatTime(m.createdTime)}
+                          {formatTime(m.createdTime, locale)}
                         </p>
                       </div>
                     </div>
@@ -399,7 +402,7 @@ export default function InboxPage() {
                     onChange={(e) => setDraft(e.target.value)}
                     onKeyDown={handleKeyDown}
                     rows={1}
-                    placeholder="Write a reply…  (Enter to send, Shift+Enter for a new line)"
+                    placeholder={t("Write a reply…  (Enter to send, Shift+Enter for a new line)")}
                     className="max-h-32 min-h-[40px] flex-1 resize-none rounded-lg border border-border bg-surface px-3 py-2 text-sm text-foreground placeholder:text-zinc-500 focus:border-accent/40 focus:outline-none"
                   />
                   <button
@@ -408,7 +411,7 @@ export default function InboxPage() {
                     disabled={sending || !draft.trim() || !active.contact.id || active.detailsUnavailable}
                     className="rounded-lg bg-accent px-4 py-2 text-sm font-medium text-white hover:bg-accent-hover disabled:opacity-50"
                   >
-                    {sending ? "Sending…" : "Send"}
+                    {sending ? t("Sending…") : t("Send")}
                   </button>
                 </div>
               </div>
diff --git a/app/(dashboard)/layout.tsx b/app/(dashboard)/layout.tsx
index 4d972b7f5..b4fccee00 100644
--- a/app/(dashboard)/layout.tsx
+++ b/app/(dashboard)/layout.tsx
@@ -1,14 +1,22 @@
+import { I18nProvider } from "@/lib/i18n/provider";
+import { getI18n } from "@/lib/i18n/server";
 import { redirect } from "next/navigation";
 import DashboardShell from "@/components/dashboard-shell";
 import { auth } from "@/lib/auth";
 import { prisma } from "@/lib/db/client";
 import { ensureWorkspaceForUser } from "@/lib/workspace";
 
+export async function generateMetadata() {
+  const { t } = await getI18n();
+  return { title: t("OpenReply - Open source Instagram comment-to-DM automation") };
+}
+
 export default async function DashboardLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
+  const { locale } = await getI18n();
   const session = await auth();
 
   if (!session?.user?.id) {
@@ -26,12 +34,14 @@ export default async function DashboardLayout({
   });
 
   return (
-    <DashboardShell
-      workspaceName={workspace.name}
-      instagramUsername={accounts[0]?.username ?? null}
-      instagramAccountCount={accounts.length}
-    >
-      {children}
-    </DashboardShell>
+    <I18nProvider locale={locale}>
+      <DashboardShell
+        workspaceName={workspace.name}
+        instagramUsername={accounts[0]?.username ?? null}
+        instagramAccountCount={accounts.length}
+      >
+        {children}
+      </DashboardShell>
+    </I18nProvider>
   );
 }
diff --git a/app/(dashboard)/logs/page.tsx b/app/(dashboard)/logs/page.tsx
index 653186398..1d9fad633 100644
--- a/app/(dashboard)/logs/page.tsx
+++ b/app/(dashboard)/logs/page.tsx
@@ -6,6 +6,7 @@
  * Filterable, paginated table of DM logs.
  */
 
+import { useI18n } from "@/lib/i18n/provider";
 import { useEffect, useState, useCallback } from "react";
 import AccountSelect, { type AccountOption } from "@/components/account-select";
 import StatusBadge from "@/components/status-badge";
@@ -40,6 +41,7 @@ const STATUS_FILTERS = [
 ];
 
 export default function LogsPage() {
+  const { t, label, locale } = useI18n();
   const [logs, setLogs] = useState<DmLog[]>([]);
   const [pagination, setPagination] = useState<Pagination | null>(null);
   const [loading, setLoading] = useState(true);
@@ -115,7 +117,7 @@ export default function LogsPage() {
                 }
               `}
             >
-              {status === "ALL" ? "All" : status.replace("SKIPPED_", "").replace("_", " ")}
+              {label(status)}
             </button>
           ))}
         </div>
@@ -136,12 +138,12 @@ export default function LogsPage() {
           <table className="w-full min-w-[760px] text-sm">
             <thead>
               <tr className="border-b border-border text-left">
-                <th className="px-4 py-4 text-xs font-semibold text-muted uppercase tracking-wider sm:px-6">Commenter</th>
-                <th className="px-4 py-4 text-xs font-semibold text-muted uppercase tracking-wider sm:px-6">Comment</th>
-                <th className="px-4 py-4 text-xs font-semibold text-muted uppercase tracking-wider sm:px-6">Campaign</th>
-                <th className="px-4 py-4 text-xs font-semibold text-muted uppercase tracking-wider sm:px-6">Account</th>
-                <th className="px-4 py-4 text-xs font-semibold text-muted uppercase tracking-wider sm:px-6">Status</th>
-                <th className="px-4 py-4 text-xs font-semibold text-muted uppercase tracking-wider sm:px-6">Time</th>
+                <th className="px-4 py-4 text-xs font-semibold text-muted uppercase tracking-wider sm:px-6">{t("Commenter")}</th>
+                <th className="px-4 py-4 text-xs font-semibold text-muted uppercase tracking-wider sm:px-6">{t("Comment")}</th>
+                <th className="px-4 py-4 text-xs font-semibold text-muted uppercase tracking-wider sm:px-6">{t("Campaign")}</th>
+                <th className="px-4 py-4 text-xs font-semibold text-muted uppercase tracking-wider sm:px-6">{t("Account")}</th>
+                <th className="px-4 py-4 text-xs font-semibold text-muted uppercase tracking-wider sm:px-6">{t("Status")}</th>
+                <th className="px-4 py-4 text-xs font-semibold text-muted uppercase tracking-wider sm:px-6">{t("Time")}</th>
               </tr>
             </thead>
             <tbody className="divide-y divide-border">
@@ -159,7 +161,7 @@ export default function LogsPage() {
               {!loading && logs.length === 0 && (
                 <tr>
                   <td colSpan={6} className="px-4 py-12 text-center text-muted sm:px-6">
-                    No logs found
+                    {t("No logs found")}
                   </td>
                 </tr>
               )}
@@ -184,7 +186,7 @@ export default function LogsPage() {
                       <StatusBadge status={log.status} />
                     </td>
                     <td className="px-4 py-4 text-muted whitespace-nowrap sm:px-6">
-                      {new Date(log.createdAt).toLocaleString("en-US", {
+                      {new Date(log.createdAt).toLocaleString(locale, {
                         month: "short",
                         day: "numeric",
                         hour: "2-digit",
@@ -201,9 +203,11 @@ export default function LogsPage() {
         {pagination && pagination.totalPages > 1 && (
           <div className="flex flex-wrap items-center justify-between gap-3 px-4 py-4 border-t border-border sm:px-6">
             <p className="text-xs text-muted">
-              Showing {(pagination.page - 1) * pagination.limit + 1}–
-              {Math.min(pagination.page * pagination.limit, pagination.total)} of{" "}
-              {pagination.total}
+              {t("Showing {start}–{end} of {total}", {
+                start: (pagination.page - 1) * pagination.limit + 1,
+                end: Math.min(pagination.page * pagination.limit, pagination.total),
+                total: pagination.total,
+              })}
             </p>
             <div className="flex items-center gap-2">
               <button
@@ -214,7 +218,7 @@ export default function LogsPage() {
                 }}
                 className="px-3 py-1.5 rounded-lg text-xs font-medium text-muted border border-border hover:text-foreground hover:border-border-hover transition-all disabled:opacity-30 disabled:pointer-events-none"
               >
-                Previous
+                {t("Previous")}
               </button>
               <span className="text-xs text-muted px-2">
                 {page} / {pagination.totalPages}
@@ -227,7 +231,7 @@ export default function LogsPage() {
                 }}
                 className="px-3 py-1.5 rounded-lg text-xs font-medium text-muted border border-border hover:text-foreground hover:border-border-hover transition-all disabled:opacity-30 disabled:pointer-events-none"
               >
-                Next
+                {t("Next")}
               </button>
             </div>
           </div>
diff --git a/app/(dashboard)/overview/page.tsx b/app/(dashboard)/overview/page.tsx
index eeb1021ec..441a12722 100644
--- a/app/(dashboard)/overview/page.tsx
+++ b/app/(dashboard)/overview/page.tsx
@@ -8,22 +8,24 @@
  * the insights permission); likes and comments are always available.
  */
 
+import type { Locale } from "@/lib/i18n";
+import { useI18n } from "@/lib/i18n/provider";
 import { useEffect, useState } from "react";
 import AccountSelect from "@/components/account-select";
 import StatCard from "@/components/stat-card";
 import FollowerChart from "@/components/follower-chart";
 import type { OverviewResponse } from "@/app/api/instagram/overview/route";
 
-function formatNumber(n: number | null): string {
+function formatNumber(n: number | null, locale: Locale): string {
   if (n === null) return "—";
   if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
   if (n >= 1_000) return `${(n / 1_000).toFixed(1)}K`;
-  return n.toLocaleString();
+  return n.toLocaleString(locale);
 }
 
-function formatDate(iso: string): string {
+function formatDate(iso: string, locale: Locale): string {
   const d = new Date(iso);
-  return d.toLocaleDateString(undefined, { month: "short", day: "numeric" });
+  return d.toLocaleDateString(locale, { month: "short", day: "numeric" });
 }
 
 const COUNT_OPTIONS = [
@@ -31,9 +33,10 @@ const COUNT_OPTIONS = [
   { value: "50", label: "Last 50" },
   { value: "100", label: "Last 100" },
   { value: "all", label: "All time" },
-];
+] as const;
 
 export default function OverviewPage() {
+  const { t, locale } = useI18n();
   const [data, setData] = useState<OverviewResponse | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
@@ -87,13 +90,13 @@ export default function OverviewPage() {
   if (error) {
     return (
       <div className="panel rounded p-8 text-center">
-        <p className="text-sm text-error">{error}</p>
+        <p className="text-sm text-error">{error === "Failed to load overview" ? t("Failed to load overview") : error}</p>
         {error.includes("connect") && (
           <a
             href="/api/instagram/connect"
             className="mt-4 inline-block text-sm text-accent hover:underline"
           >
-            Connect Instagram
+            {t("Connect Instagram")}
           </a>
         )}
       </div>
@@ -110,25 +113,25 @@ export default function OverviewPage() {
       {data.limitations?.map(note => <p key={note} className="text-sm text-muted">{note}</p>)}
       <div className="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
         <div className="min-w-0">
-          <h1 className="text-lg font-semibold text-foreground">Overview</h1>
+          <h1 className="text-lg font-semibold text-foreground">{t("Overview")}</h1>
           <p className="text-sm text-muted mt-1">
-            {data.provider !== "ZERNIO" && data.requestedCount === "all" ? "All-time" : "Recent"} —{" "}
-            {totals.posts} post{totals.posts === 1 ? "" : "s"} from @
+            {data.provider !== "ZERNIO" && data.requestedCount === "all" ? t("All-time") : t("Recent")} —{" "}
+            {t(totals.posts === 1 ? "{count} post" : "{count} posts", { count: totals.posts })} {t("from @")}
             {data.account.username}
-            {data.truncated ? ` (capped at ${totals.posts})` : ""}
+            {data.truncated ? t(" (capped at {count})", { count: totals.posts }) : ""}
           </p>
           {followers !== null && (
             // Kept out of the tile row below: that row sums the selected posts,
             // whereas this is a current account-level total.
             <p className="mt-1 text-sm text-muted">
-              {followers.toLocaleString()} followers
+              {followers.toLocaleString(locale)} {t("followers")}
             </p>
           )}
         </div>
         <div className="flex flex-wrap items-end gap-x-4 gap-y-3">
           <label className="flex flex-col gap-2 text-sm">
             <span className="text-xs font-semibold uppercase tracking-wide text-zinc-500">
-              Range
+              {t("Range")}
             </span>
             <select
               value={count}
@@ -137,7 +140,7 @@ export default function OverviewPage() {
             >
               {COUNT_OPTIONS.map((o) => (
                 <option key={o.value} value={o.value}>
-                  {o.label}
+                  {t(o.label)}
                 </option>
               ))}
             </select>
@@ -159,29 +162,28 @@ export default function OverviewPage() {
       {!insightsAvailable && (
         <div className="panel rounded p-4 border border-border">
           <p className="text-sm text-foreground">
-            Views, reach, saved and shares need the insights permission.
+            {t("Views, reach, saved and shares need the insights permission.")}
           </p>
           <p className="text-sm text-muted mt-1">
-            Reconnect your account to grant it — likes and comments are shown in
-            the meantime.
+            {t("Reconnect your account to grant it — likes and comments are shown in the meantime.")}
           </p>
           <a
             href="/api/instagram/connect"
             className="mt-3 inline-block text-sm text-accent hover:underline"
           >
-            Reconnect Instagram
+            {t("Reconnect Instagram")}
           </a>
         </div>
       )}
 
       {/* Aggregate totals */}
       <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-3 sm:gap-4">
-        <StatCard label="Views" value={formatNumber(totals.views)} />
-        <StatCard label="Reach" value={formatNumber(totals.reach)} />
-        <StatCard label="Likes" value={formatNumber(totals.likes)} />
-        <StatCard label="Comments" value={formatNumber(totals.comments)} />
-        <StatCard label="Saved" value={formatNumber(totals.saved)} />
-        <StatCard label="Shares" value={formatNumber(totals.shares)} />
+        <StatCard label={t("Views")} value={formatNumber(totals.views, locale)} />
+        <StatCard label={t("Reach")} value={formatNumber(totals.reach, locale)} />
+        <StatCard label={t("Likes")} value={formatNumber(totals.likes, locale)} />
+        <StatCard label={t("Comments")} value={formatNumber(totals.comments, locale)} />
+        <StatCard label={t("Saved")} value={formatNumber(totals.saved, locale)} />
+        <StatCard label={t("Shares")} value={formatNumber(totals.shares, locale)} />
       </div>
 
       {/* Follower trend — account-level, independent of the post range */}
@@ -189,9 +191,9 @@ export default function OverviewPage() {
 
       {/* Per-post table */}
       <div className="panel rounded p-4 sm:p-6">
-        <h2 className="text-sm font-semibold text-foreground mb-4">Posts</h2>
+        <h2 className="text-sm font-semibold text-foreground mb-4">{t("Posts")}</h2>
         {posts.length === 0 ? (
-          <p className="text-sm text-muted py-8 text-center">No posts found</p>
+          <p className="text-sm text-muted py-8 text-center">{t("No posts found")}</p>
         ) : (
           // Eight metric columns can't compress into a phone; let the table keep
           // its natural width and scroll inside the panel instead.
@@ -199,14 +201,14 @@ export default function OverviewPage() {
             <table className="w-full min-w-[720px] text-sm">
               <thead>
                 <tr className="text-left text-xs uppercase tracking-wide text-zinc-500 border-b border-border">
-                  <th className="py-2 pr-4 font-medium">Post</th>
-                  <th className="py-2 px-3 font-medium text-right">Views</th>
-                  <th className="py-2 px-3 font-medium text-right">Reach</th>
-                  <th className="py-2 px-3 font-medium text-right">Likes</th>
-                  <th className="py-2 px-3 font-medium text-right">Comments</th>
-                  <th className="py-2 px-3 font-medium text-right">Saved</th>
-                  <th className="py-2 px-3 font-medium text-right">Shares</th>
-                  <th className="py-2 pl-3 font-medium text-right">Date</th>
+                  <th className="py-2 pr-4 font-medium">{t("Post")}</th>
+                  <th className="py-2 px-3 font-medium text-right">{t("Views")}</th>
+                  <th className="py-2 px-3 font-medium text-right">{t("Reach")}</th>
+                  <th className="py-2 px-3 font-medium text-right">{t("Likes")}</th>
+                  <th className="py-2 px-3 font-medium text-right">{t("Comments")}</th>
+                  <th className="py-2 px-3 font-medium text-right">{t("Saved")}</th>
+                  <th className="py-2 px-3 font-medium text-right">{t("Shares")}</th>
+                  <th className="py-2 pl-3 font-medium text-right">{t("Date")}</th>
                 </tr>
               </thead>
               <tbody>
@@ -223,34 +225,34 @@ export default function OverviewPage() {
                           rel="noopener noreferrer"
                           className="text-foreground hover:text-accent truncate block"
                         >
-                          {p.caption || `${p.mediaType} post`}
+                          {p.caption || t("{type} post", { type: p.mediaType })}
                         </a>
                       ) : (
                         <span className="text-foreground truncate block">
-                          {p.caption || `${p.mediaType} post`}
+                          {p.caption || t("{type} post", { type: p.mediaType })}
                         </span>
                       )}
                     </td>
                     <td className="py-3 px-3 text-right text-muted">
-                      {formatNumber(p.views)}
+                      {formatNumber(p.views, locale)}
                     </td>
                     <td className="py-3 px-3 text-right text-muted">
-                      {formatNumber(p.reach)}
+                      {formatNumber(p.reach, locale)}
                     </td>
                     <td className="py-3 px-3 text-right text-muted">
-                      {formatNumber(p.likes)}
+                      {formatNumber(p.likes, locale)}
                     </td>
                     <td className="py-3 px-3 text-right text-muted">
-                      {formatNumber(p.comments)}
+                      {formatNumber(p.comments, locale)}
                     </td>
                     <td className="py-3 px-3 text-right text-muted">
-                      {formatNumber(p.saved)}
+                      {formatNumber(p.saved, locale)}
                     </td>
                     <td className="py-3 px-3 text-right text-muted">
-                      {formatNumber(p.shares)}
+                      {formatNumber(p.shares, locale)}
                     </td>
                     <td className="py-3 pl-3 text-right text-zinc-500">
-                      {formatDate(p.timestamp)}
+                      {formatDate(p.timestamp, locale)}
                     </td>
                   </tr>
                 ))}
diff --git a/app/(dashboard)/settings/page.tsx b/app/(dashboard)/settings/page.tsx
index ae66ed769..197edf30d 100644
--- a/app/(dashboard)/settings/page.tsx
+++ b/app/(dashboard)/settings/page.tsx
@@ -1,5 +1,7 @@
 "use client";
 
+import LanguageSwitcher from "@/components/language-switcher";
+import { useI18n } from "@/lib/i18n/provider";
 import { Suspense, useEffect, useState } from "react";
 import type { AccountOption } from "@/components/account-select";
 import { ZernioConnection } from "@/components/zernio-connection";
@@ -48,6 +50,7 @@ interface WorkspaceMembersData {
 }
 
 export default function SettingsPage() {
+  const { t, label, locale } = useI18n();
   const [data, setData] = useState<SettingsData | null>(null);
   const [membersData, setMembersData] = useState<WorkspaceMembersData | null>(
     null
@@ -77,7 +80,7 @@ export default function SettingsPage() {
   }
 
   async function disconnectInstagram(instagramAccountId: string) {
-    if (!confirm("Disconnect Instagram? Campaigns for this account will stop sending DMs.")) {
+    if (!confirm(t("Disconnect Instagram? Campaigns for this account will stop sending DMs."))) {
       return;
     }
 
@@ -104,7 +107,7 @@ export default function SettingsPage() {
       setMembersData(payload.data);
       setInviteEmail("");
     } else {
-      setMemberError(payload.error ?? "Could not invite member");
+      setMemberError(payload.error ?? t("Could not invite member"));
     }
     setBusy(null);
   }
@@ -138,17 +141,23 @@ export default function SettingsPage() {
         <InstagramConnectNotice />
       </Suspense>
 
+      <section className="panel rounded p-4 sm:p-6 space-y-3">
+        <h2 className="text-base font-semibold">{t("Interface language")}</h2>
+        <LanguageSwitcher />
+        <p className="text-sm text-muted">{t("Saved in this browser. Campaign messages stay unchanged.")}</p>
+      </section>
+
       <ZernioConnection canManage={canManageMembers} />
 
       <section className="panel rounded p-4 sm:p-6">
-        <h2 className="text-base font-semibold mb-6">Instagram Connection</h2>
+        <h2 className="text-base font-semibold mb-6">{t("Instagram Connection")}</h2>
 
         <div className="space-y-4">
           <div className="flex items-center justify-between gap-3 py-3 border-b border-border">
             <div>
-              <p className="text-sm font-medium text-foreground">Status</p>
+              <p className="text-sm font-medium text-foreground">{t("Status")}</p>
               <p className="text-xs text-muted mt-0.5">
-                Comment webhooks and private replies depend on this connection.
+                {t("Comment webhooks and private replies depend on this connection.")}
               </p>
             </div>
             <span
@@ -158,27 +167,26 @@ export default function SettingsPage() {
                   : "bg-warning/10 text-warning"
               }`}
             >
-              {accounts.length > 0 ? "Connected" : "Not connected"}
+              {accounts.length > 0 ? t("Connected") : t("Not connected")}
             </span>
           </div>
 
           <div className="flex items-center justify-between gap-3 py-3 border-b border-border">
             <div>
-              <p className="text-sm font-medium text-foreground">Accounts</p>
+              <p className="text-sm font-medium text-foreground">{t("Accounts")}</p>
               <p className="text-xs text-muted mt-0.5">
-                {accounts.length} connected Instagram profile
-                {accounts.length === 1 ? "" : "s"}
+                {t(accounts.length === 1 ? "{count} connected Instagram profile" : "{count} connected Instagram profiles", { count: accounts.length })}
               </p>
             </div>
             <span className="text-sm text-muted">
-              {accounts.length > 0 ? `${accounts.length} connected` : "None"}
+              {accounts.length > 0 ? t("{count} connected", { count: accounts.length }) : t("None")}
             </span>
           </div>
 
           <div className="space-y-3 py-3">
             {accounts.length === 0 && (
               <p className="text-sm text-muted">
-                Connect an Instagram professional account to launch campaigns.
+                {t("Connect an Instagram professional account to launch campaigns.")}
               </p>
             )}
             {accounts.map((account) => (
@@ -191,11 +199,11 @@ export default function SettingsPage() {
                     @{account.username}
                   </p>
                   <p className="mt-1 text-xs text-muted">
-                    {account.provider === "ZERNIO" ? "Connected via Zernio" : <>Token expires{" "}
+                    {account.provider === "ZERNIO" ? t("Connected via Zernio") : <>{t("Token expires")}{" "}
                     {account.tokenExpiresAt
-                      ? new Date(account.tokenExpiresAt).toLocaleDateString()
-                      : "not available"}</>}{" "}
-                    · {account.webhookSubscribed ? "Webhook ready" : "Webhook pending"}
+                      ? new Date(account.tokenExpiresAt).toLocaleDateString(locale)
+                      : t("not available")}</>}{" "}
+                    · {account.webhookSubscribed ? t("Webhook ready") : t("Webhook pending")}
                   </p>
                 </div>
                 <button
@@ -204,8 +212,8 @@ export default function SettingsPage() {
                   className="inline-flex items-center justify-center rounded border border-error/20 px-4 py-2 text-sm font-medium text-error transition-all hover:border-error/40 hover:bg-error/10 disabled:opacity-50"
                 >
                   {busy === `disconnect:${account.id}`
-                    ? "Disconnecting..."
-                    : "Disconnect"}
+                    ? t("Disconnecting...")
+                    : t("Disconnect")}
                 </button>
               </div>
             ))}
@@ -217,13 +225,13 @@ export default function SettingsPage() {
             href="/api/instagram/connect"
             className="px-4 py-2 rounded text-sm font-medium transition-colors bg-accent text-white hover:bg-accent-hover"
           >
-            Connect using your own Meta app
+            {t("Connect using your own Meta app")}
           </a>
         </div>
       </section>
 
       <section className="panel rounded p-4 sm:p-6">
-        <h2 className="text-base font-semibold mb-6">Team</h2>
+        <h2 className="text-base font-semibold mb-6">{t("Team")}</h2>
         <div className="space-y-3">
           {membersData?.members.map((member) => (
             <div
@@ -232,12 +240,12 @@ export default function SettingsPage() {
             >
               <div className="min-w-0">
                 <p className="truncate text-sm font-medium text-foreground">
-                  {member.user.name ?? member.user.email ?? "Unknown member"}
+                  {member.user.name ?? member.user.email ?? t("Unknown member")}
                 </p>
                 <p className="text-xs text-muted">{member.user.email}</p>
               </div>
               <span className="rounded-full border border-border px-3 py-1 text-xs font-semibold text-muted">
-                {member.role}
+                {label(member.role)}
               </span>
             </div>
           ))}
@@ -246,7 +254,7 @@ export default function SettingsPage() {
         {membersData?.invitations.length ? (
           <div className="mt-6 border-t border-border pt-4">
             <p className="mb-3 text-xs font-semibold uppercase tracking-wide text-zinc-500">
-              Pending invites
+              {t("Pending invites")}
             </p>
             <div className="space-y-3">
               {membersData.invitations.map((invitation) => (
@@ -259,7 +267,7 @@ export default function SettingsPage() {
                       {invitation.email}
                     </p>
                     <p className="truncate text-xs text-muted">
-                      {invitation.role} · {invitation.inviteUrl}
+                      {label(invitation.role)} · {invitation.inviteUrl}
                     </p>
                   </div>
                   <div className="flex gap-2">
@@ -270,7 +278,7 @@ export default function SettingsPage() {
                       }
                       className="rounded-lg border border-border px-3 py-1.5 text-xs font-medium text-muted transition-colors hover:border-border-hover hover:text-foreground"
                     >
-                      Copy
+                      {t("Copy")}
                     </button>
                     <button
                       type="button"
@@ -278,7 +286,7 @@ export default function SettingsPage() {
                       disabled={busy === `invite:${invitation.id}`}
                       className="rounded-lg border border-error/20 px-3 py-1.5 text-xs font-medium text-error transition-colors hover:bg-error/10 disabled:opacity-50"
                     >
-                      Revoke
+                      {t("Revoke")}
                     </button>
                   </div>
                 </div>
@@ -307,15 +315,15 @@ export default function SettingsPage() {
               }
               className="rounded border border-border bg-surface px-3 py-2 text-sm text-foreground outline-none transition-colors focus:border-accent/40"
             >
-              <option value="MEMBER">Member</option>
-              <option value="ADMIN">Admin</option>
+              <option value="MEMBER">{t("Member")}</option>
+              <option value="ADMIN">{t("Admin")}</option>
             </select>
             <button
               type="submit"
               disabled={busy === "invite"}
               className="rounded bg-accent px-4 py-2 text-sm font-semibold text-white transition-colors hover:bg-accent-hover disabled:opacity-50"
             >
-              {busy === "invite" ? "Inviting..." : "Invite"}
+              {busy === "invite" ? t("Inviting...") : t("Invite")}
             </button>
             {memberError && (
               <p className="sm:col-span-3 text-sm text-error">{memberError}</p>
@@ -325,14 +333,14 @@ export default function SettingsPage() {
       </section>
 
       <section className="panel rounded p-4 sm:p-6">
-        <h2 className="text-base font-semibold mb-6">Usage</h2>
+        <h2 className="text-base font-semibold mb-6">{t("Usage")}</h2>
         <div className="flex items-center justify-between gap-3 py-3">
           <div>
             <p className="text-sm font-medium text-foreground">
-              DMs sent this month
+              {t("DMs sent this month")}
             </p>
             <p className="text-xs text-muted mt-0.5">
-              Self-hosted — no plan limits.
+              {t("Self-hosted — no plan limits.")}
             </p>
           </div>
           <span className="text-sm font-semibold text-foreground">
diff --git a/app/invite/[token]/page.tsx b/app/invite/[token]/page.tsx
index 78dd9b625..065208dd0 100644
--- a/app/invite/[token]/page.tsx
+++ b/app/invite/[token]/page.tsx
@@ -1,4 +1,5 @@
 import type { Metadata } from "next";
+import { getI18n } from "@/lib/i18n/server";
 import Link from "next/link";
 import { notFound } from "next/navigation";
 import InvitationAcceptCard from "@/components/invitation-accept-card";
@@ -9,12 +10,16 @@ type InvitePageProps = {
   params: Promise<{ token: string }>;
 };
 
-export const metadata: Metadata = {
-  title: "Accept Workspace Invitation - OpenReply",
-  robots: { index: false, follow: false },
-};
+export async function generateMetadata(): Promise<Metadata> {
+  const { t } = await getI18n();
+  return {
+    title: t("Accept Workspace Invitation - OpenReply"),
+    robots: { index: false, follow: false },
+  };
+}
 
 export default async function InvitePage({ params }: InvitePageProps) {
+  const { t, label } = await getI18n();
   const { token } = await params;
   const [session, invitation] = await Promise.all([
     auth(),
@@ -40,19 +45,18 @@ export default async function InvitePage({ params }: InvitePageProps) {
         </Link>
         <section className="border border-white/10 bg-white/[0.035] p-8">
           <p className="text-xs font-semibold uppercase tracking-wide text-cyan-100">
-            Workspace invitation
+            {t("Workspace invitation")}
           </p>
           <h1 className="mt-4 text-3xl font-black leading-tight text-white">
-            Join {invitation.workspace.name}
+            {t("Join {workspace}", { workspace: invitation.workspace.name })}
           </h1>
           <p className="mt-4 text-sm leading-6 text-zinc-400">
-            You were invited as {invitation.role.toLowerCase()} for{" "}
-            {invitation.email}.
+            {t("You were invited as {role} for {email}.", { role: label(invitation.role), email: invitation.email })}
           </p>
           <div className="mt-8">
             {expired ? (
               <p className="text-sm text-error">
-                This invitation has expired. Ask the workspace owner to resend it.
+                {t("This invitation has expired. Ask the workspace owner to resend it.")}
               </p>
             ) : (
               <InvitationAcceptCard
diff --git a/app/invite/layout.tsx b/app/invite/layout.tsx
new file mode 100644
index 000000000..6324eb623
--- /dev/null
+++ b/app/invite/layout.tsx
@@ -0,0 +1 @@
+export { default } from "@/components/localized-layout";
diff --git a/app/login/layout.tsx b/app/login/layout.tsx
new file mode 100644
index 000000000..6324eb623
--- /dev/null
+++ b/app/login/layout.tsx
@@ -0,0 +1 @@
+export { default } from "@/components/localized-layout";
diff --git a/app/login/page.tsx b/app/login/page.tsx
index 0bc3bc295..800e5dd1a 100644
--- a/app/login/page.tsx
+++ b/app/login/page.tsx
@@ -1,4 +1,5 @@
 import { EMAIL_PROVIDER_ID, signIn } from "@/lib/auth";
+import { getI18n } from "@/lib/i18n/server";
 import { getCampaignTemplate } from "@/lib/templates/campaign-templates";
 import { DemoNotice } from "@/components/demo-notice";
 import { isPublicDemoHost } from "@/lib/env";
@@ -6,10 +7,13 @@ import { isPublicDemoHost } from "@/lib/env";
 const GITHUB_URL = "https://github.com/diwenne/openreply";
 const SETUP_DOCS_URL = `${GITHUB_URL}/blob/main/docs/setup.md`;
 
-export const metadata = {
-  title: "Login - OpenReply",
-  description: "Sign in to manage Instagram comment-to-DM campaigns.",
-};
+export async function generateMetadata() {
+  const { t } = await getI18n();
+  return {
+    title: t("Login - OpenReply"),
+    description: t("Sign in to manage Instagram comment-to-DM campaigns."),
+  };
+}
 
 export default async function LoginPage({
   searchParams,
@@ -20,6 +24,7 @@ export default async function LoginPage({
     template?: string;
   }>;
 }) {
+  const { t } = await getI18n();
   if (await isPublicDemoHost()) {
     return (
       <div className="min-h-screen flex items-center justify-center px-6">
@@ -29,12 +34,10 @@ export default async function LoginPage({
           </h1>
           <div className="panel rounded p-8 mt-8 shadow-black/40">
             <h2 className="text-lg font-semibold text-foreground">
-              Sign-in is off on this demo
+              {t("Sign-in is off on this demo")}
             </h2>
             <p className="mt-3 text-sm leading-relaxed text-muted">
-              This is the public demo — it doesn&rsquo;t create real accounts
-              or send DMs. To use OpenReply for real, clone it and run your
-              own instance with your own Meta app and domain.
+              {t("This is the public demo — it doesn’t create real accounts or send DMs. To use OpenReply for real, clone it and run your own instance with your own Meta app and domain.")}
             </p>
             <a
               href={SETUP_DOCS_URL}
@@ -42,7 +45,7 @@ export default async function LoginPage({
               rel="noreferrer"
               className="mt-6 inline-flex w-full items-center justify-center gap-2 rounded bg-accent px-6 py-3.5 text-sm font-semibold text-white shadow-indigo-500/25 transition-all hover:shadow-indigo-500/30"
             >
-              Clone it yourself <span aria-hidden="true">↗</span>
+              {t("Clone it yourself")} <span aria-hidden="true">↗</span>
             </a>
           </div>
         </div>
@@ -75,8 +78,8 @@ export default async function LoginPage({
           </h1>
           <p className="text-muted text-sm leading-relaxed mt-2">
             {selectedTemplate
-              ? `Sign in to use the ${selectedTemplate.title} template.`
-              : "Sign in by email, then connect your Instagram professional account."}
+              ? t("Sign in to use the {name} template.", { name: selectedTemplate.title })
+              : t("Sign in by email, then connect your Instagram professional account.")}
           </p>
         </div>
 
@@ -86,7 +89,7 @@ export default async function LoginPage({
           {selectedTemplate && !checkEmail && (
             <div className="mb-5 border border-accent/20 bg-accent/10 p-4">
               <p className="text-xs font-semibold uppercase tracking-wide text-accent">
-                Template selected
+                {t("Template selected")}
               </p>
               <p className="mt-2 text-sm font-semibold text-foreground">
                 {selectedTemplate.title}
@@ -96,10 +99,9 @@ export default async function LoginPage({
 
           {checkEmail ? (
             <div className="text-center py-4">
-              <h2 className="text-lg font-semibold mb-2">Check your email</h2>
+              <h2 className="text-lg font-semibold mb-2">{t("Check your email")}</h2>
               <p className="text-sm text-muted">
-                We sent you a secure sign-in link. Open it on this device to
-                continue.
+                {t("We sent you a secure sign-in link. Open it on this device to continue.")}
               </p>
             </div>
           ) : (
@@ -109,7 +111,7 @@ export default async function LoginPage({
                   htmlFor="email"
                   className="block text-sm font-medium text-foreground"
                 >
-                  Work email
+                  {t("Work email")}
                 </label>
                 <input
                   id="email"
@@ -126,7 +128,7 @@ export default async function LoginPage({
                 type="submit"
                 className="w-full inline-flex items-center justify-center gap-2 rounded bg-accent px-6 py-3.5 text-sm font-semibold text-white shadow-indigo-500/25 transition-all hover:shadow-indigo-500/30"
               >
-                Email me a magic link
+                {t("Email me a magic link")}
               </button>
             </form>
           )}
diff --git a/app/reports/[shareSlug]/page.tsx b/app/reports/[shareSlug]/page.tsx
index f6672460d..19722381b 100644
--- a/app/reports/[shareSlug]/page.tsx
+++ b/app/reports/[shareSlug]/page.tsx
@@ -1,4 +1,6 @@
 import type { Metadata } from "next";
+import type { I18n } from "@/lib/i18n";
+import { getI18n } from "@/lib/i18n/server";
 import Link from "next/link";
 import { notFound } from "next/navigation";
 import { getCampaignReportBySlug } from "@/lib/reports/data";
@@ -7,9 +9,9 @@ type ReportPageProps = {
   params: Promise<{ shareSlug: string }>;
 };
 
-function formatDate(date: Date | null) {
-  if (!date) return "No sends yet";
-  return date.toLocaleDateString("en-US", {
+function formatDate(date: Date | null, { locale, t }: Pick<I18n, "locale" | "t">) {
+  if (!date) return t("No sends yet");
+  return date.toLocaleDateString(locale, {
     month: "short",
     day: "numeric",
     year: "numeric",
@@ -41,26 +43,28 @@ function MetricCard({
 export async function generateMetadata({
   params,
 }: ReportPageProps): Promise<Metadata> {
+  const { locale, t } = await getI18n();
   const { shareSlug } = await params;
-  const report = await getCampaignReportBySlug(shareSlug);
+  const report = await getCampaignReportBySlug(shareSlug, locale);
 
   if (!report) {
     return {
-      title: "Report Not Found",
+      title: t("Report Not Found"),
       robots: { index: false, follow: false },
     };
   }
 
   return {
-    title: `${report.campaign.name} Campaign Report`,
-    description: `Read-only Instagram comment-to-DM campaign report for ${report.campaign.name}.`,
+    title: t("{name} Campaign Report", { name: report.campaign.name }),
+    description: t("Read-only Instagram comment-to-DM campaign report for {name}.", { name: report.campaign.name }),
     robots: { index: false, follow: false },
   };
 }
 
 export default async function ReportPage({ params }: ReportPageProps) {
+  const { locale, t } = await getI18n();
   const { shareSlug } = await params;
-  const report = await getCampaignReportBySlug(shareSlug);
+  const report = await getCampaignReportBySlug(shareSlug, locale);
 
   if (!report) {
     notFound();
@@ -78,7 +82,7 @@ export default async function ReportPage({ params }: ReportPageProps) {
           <div className="flex flex-col gap-6 md:flex-row md:items-start md:justify-between">
             <div>
               <p className="text-sm font-bold uppercase tracking-wide text-cyan-200">
-                Client campaign report
+                {t("Client campaign report")}
               </p>
               <h1 className="mt-4 max-w-3xl text-4xl font-black leading-tight text-white sm:text-5xl">
                 {report.campaign.name}
@@ -93,25 +97,25 @@ export default async function ReportPage({ params }: ReportPageProps) {
                 )}
                 <span>·</span>
                 <span>
-                  {report.campaign.isActive ? "Active campaign" : "Paused campaign"}
+                  {report.campaign.isActive ? t("Active campaign") : t("Paused campaign")}
                 </span>
               </div>
             </div>
 
             <div className="border border-white/10 bg-white/[0.035] p-4 text-sm text-zinc-300 md:min-w-64">
               <p className="text-xs font-semibold uppercase tracking-wide text-zinc-500">
-                Workspace
+                {t("Workspace")}
               </p>
               <p className="mt-2 font-bold text-white">{report.workspace.name}</p>
               <p className="mt-4 text-xs text-zinc-500">
-                Generated {formatDate(report.generatedAt)}
+                {t("Generated")} {formatDate(report.generatedAt, { locale, t })}
               </p>
               {report.branded && (
                 <Link
                   href="/"
                   className="mt-4 inline-flex items-center justify-center border border-cyan-200/20 bg-cyan-300/10 px-3 py-2 text-xs font-semibold text-cyan-100 transition hover:border-cyan-200/40"
                 >
-                  Powered by OpenReply
+                  {t("Powered by OpenReply")}
                 </Link>
               )}
             </div>
@@ -122,29 +126,29 @@ export default async function ReportPage({ params }: ReportPageProps) {
       <section className="mx-auto w-full max-w-6xl px-5 py-10 sm:px-6 lg:px-8">
         <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-5">
           <MetricCard
-            label="DMs sent"
+            label={t("DMs sent")}
             value={report.metrics.sent}
-            helper="Private replies successfully sent."
+            helper={t("Private replies successfully sent.")}
           />
           <MetricCard
-            label="Skipped"
+            label={t("Skipped")}
             value={report.metrics.skipped}
-            helper="Duplicates, limits, or no-send outcomes."
+            helper={t("Duplicates, limits, or no-send outcomes.")}
           />
           <MetricCard
-            label="Failed"
+            label={t("Failed")}
             value={report.metrics.failed}
-            helper="Replies that need operational review."
+            helper={t("Replies that need operational review.")}
           />
           <MetricCard
-            label="Clicks"
+            label={t("Clicks")}
             value={report.metrics.clicks}
-            helper="Tracked link visits from replies."
+            helper={t("Tracked link visits from replies.")}
           />
           <MetricCard
-            label="CTR"
+            label={t("CTR")}
             value={`${report.metrics.ctr}%`}
-            helper="Clicks divided by sent replies."
+            helper={t("Clicks divided by sent replies.")}
           />
         </div>
 
@@ -153,14 +157,14 @@ export default async function ReportPage({ params }: ReportPageProps) {
             <div className="flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between">
               <div>
                 <h2 className="text-xl font-black text-white">
-                  Last 7 Days
+                  {t("Last 7 Days")}
                 </h2>
                 <p className="mt-2 text-sm text-zinc-400">
-                  Sent replies and tracked clicks by day.
+                  {t("Sent replies and tracked clicks by day.")}
                 </p>
               </div>
               <p className="text-xs text-zinc-500">
-                Last send: {formatDate(report.metrics.latestSentAt)}
+                {t("Last send:")} {formatDate(report.metrics.latestSentAt, { locale, t })}
               </p>
             </div>
             <div className="mt-8 grid h-56 grid-cols-7 items-end gap-1.5 sm:gap-3">
@@ -172,14 +176,14 @@ export default async function ReportPage({ params }: ReportPageProps) {
                       style={{
                         height: `${Math.max((day.sent / maxDaily) * 100, 4)}%`,
                       }}
-                      title={`${day.sent} sent`}
+                      title={t("{count} sent", { count: day.sent })}
                     />
                     <div
                       className="w-full bg-emerald-300/75"
                       style={{
                         height: `${Math.max((day.clicks / maxDaily) * 100, 4)}%`,
                       }}
-                      title={`${day.clicks} clicks`}
+                      title={t("{count} clicks", { count: day.clicks })}
                     />
                   </div>
                   <p className="truncate text-center text-[11px] text-zinc-500">
@@ -191,22 +195,22 @@ export default async function ReportPage({ params }: ReportPageProps) {
             <div className="mt-5 flex flex-wrap gap-4 text-xs text-zinc-400">
               <span className="inline-flex items-center gap-2">
                 <span className="h-2 w-2 bg-cyan-300" />
-                Sent replies
+                {t("Sent replies")}
               </span>
               <span className="inline-flex items-center gap-2">
                 <span className="h-2 w-2 bg-emerald-300" />
-                Link clicks
+                {t("Link clicks")}
               </span>
             </div>
           </section>
 
           <aside className="space-y-6">
             <section className="border border-white/10 bg-white/[0.035] p-4 sm:p-6">
-              <h2 className="text-xl font-black text-white">Top Keywords</h2>
+              <h2 className="text-xl font-black text-white">{t("Top Keywords")}</h2>
               <div className="mt-5 space-y-3">
                 {report.topKeywords.length === 0 && (
                   <p className="text-sm text-zinc-400">
-                    No matched keyword data yet.
+                    {t("No matched keyword data yet.")}
                   </p>
                 )}
                 {report.topKeywords.map((keyword) => (
@@ -226,11 +230,11 @@ export default async function ReportPage({ params }: ReportPageProps) {
             </section>
 
             <section className="border border-white/10 bg-white/[0.035] p-4 sm:p-6">
-              <h2 className="text-xl font-black text-white">Tracked Links</h2>
+              <h2 className="text-xl font-black text-white">{t("Tracked Links")}</h2>
               <div className="mt-5 space-y-3">
                 {report.trackedLinks.length === 0 && (
                   <p className="text-sm text-zinc-400">
-                    This campaign does not have a tracked link.
+                    {t("This campaign does not have a tracked link.")}
                   </p>
                 )}
                 {report.trackedLinks.map((link) => (
@@ -252,11 +256,11 @@ export default async function ReportPage({ params }: ReportPageProps) {
         </div>
 
         <section className="mt-8 border border-white/10 bg-white/[0.035] p-4 sm:p-6">
-          <h2 className="text-xl font-black text-white">Campaign Setup</h2>
+          <h2 className="text-xl font-black text-white">{t("Campaign Setup")}</h2>
           <div className="mt-5 grid gap-5 md:grid-cols-3">
             <div>
               <p className="text-xs font-semibold uppercase tracking-wide text-zinc-500">
-                Keywords
+                {t("Keywords")}
               </p>
               <div className="mt-3 flex flex-wrap gap-2">
                 {report.campaign.keywords.map((keyword) => (
@@ -271,15 +275,15 @@ export default async function ReportPage({ params }: ReportPageProps) {
             </div>
             <div>
               <p className="text-xs font-semibold uppercase tracking-wide text-zinc-500">
-                Created
+                {t("Created")}
               </p>
               <p className="mt-3 text-sm text-zinc-300">
-                {formatDate(report.campaign.createdAt)}
+                {formatDate(report.campaign.createdAt, { locale, t })}
               </p>
             </div>
             <div>
               <p className="text-xs font-semibold uppercase tracking-wide text-zinc-500">
-                Source post
+                {t("Source post")}
               </p>
               {report.campaign.postUrl ? (
                 <a
@@ -288,10 +292,10 @@ export default async function ReportPage({ params }: ReportPageProps) {
                   rel="noreferrer"
                   className="mt-3 inline-flex text-sm font-semibold text-cyan-200 transition hover:text-cyan-100"
                 >
-                  View Instagram post
+                  {t("View Instagram post")}
                 </a>
               ) : (
-                <p className="mt-3 text-sm text-zinc-400">Not attached</p>
+                <p className="mt-3 text-sm text-zinc-400">{t("Not attached")}</p>
               )}
             </div>
           </div>
@@ -299,7 +303,7 @@ export default async function ReportPage({ params }: ReportPageProps) {
 
         {report.branded && (
           <footer className="mt-8 border-t border-white/10 pt-6 text-center text-xs text-zinc-500">
-            Built with OpenReply, the Instagram comment-to-DM campaign OS.
+            {t("Built with OpenReply, the Instagram comment-to-DM campaign OS.")}
           </footer>
         )}
       </section>
diff --git a/app/reports/layout.tsx b/app/reports/layout.tsx
new file mode 100644
index 000000000..6324eb623
--- /dev/null
+++ b/app/reports/layout.tsx
@@ -0,0 +1 @@
+export { default } from "@/components/localized-layout";
diff --git a/app/verify-request/layout.tsx b/app/verify-request/layout.tsx
new file mode 100644
index 000000000..6324eb623
--- /dev/null
+++ b/app/verify-request/layout.tsx
@@ -0,0 +1 @@
+export { default } from "@/components/localized-layout";
diff --git a/app/verify-request/page.tsx b/app/verify-request/page.tsx
index 8606c32a9..9fa7b1e62 100644
--- a/app/verify-request/page.tsx
+++ b/app/verify-request/page.tsx
@@ -1,11 +1,16 @@
+import { getI18n } from "@/lib/i18n/server";
 import Link from "next/link";
 
-export const metadata = {
-  title: "Check your email - OpenReply",
-  description: "A sign-in link was sent to your email.",
-};
+export async function generateMetadata() {
+  const { t } = await getI18n();
+  return {
+    title: t("Check your email - OpenReply"),
+    description: t("A sign-in link was sent to your email."),
+  };
+}
 
-export default function VerifyRequestPage() {
+export default async function VerifyRequestPage() {
+  const { t } = await getI18n();
   return (
     <div className="min-h-screen flex items-center justify-center px-6">
       <div className="w-full max-w-md">
@@ -16,14 +21,13 @@ export default function VerifyRequestPage() {
         </div>
 
         <div className="panel rounded p-8 text-center">
-          <h2 className="text-lg font-semibold mb-2">Check your email</h2>
+          <h2 className="text-lg font-semibold mb-2">{t("Check your email")}</h2>
           <p className="text-sm text-muted">
-            We sent you a secure sign-in link. Open it on this device to
-            continue.
+            {t("We sent you a secure sign-in link. Open it on this device to continue.")}
           </p>
           <p className="mt-6 text-sm">
             <Link href="/login" className="text-accent hover:underline">
-              Back to sign in
+              {t("Back to sign in")}
             </Link>
           </p>
         </div>
diff --git a/components/account-select.tsx b/components/account-select.tsx
index de6f5a554..3d0e66d0d 100644
--- a/components/account-select.tsx
+++ b/components/account-select.tsx
@@ -1,5 +1,8 @@
 "use client";
 
+import { useI18n } from "@/lib/i18n/provider";
+
+
 export interface AccountOption {
   id: string;
   username: string;
@@ -20,19 +23,20 @@ export default function AccountSelect({
   value,
   onChange,
   includeAll = true,
-  label = "Instagram account",
+  label,
 }: AccountSelectProps) {
+  const { t } = useI18n();
   return (
     <label className="flex flex-col gap-2 text-sm">
       <span className="text-xs font-semibold uppercase tracking-wide text-zinc-500">
-        {label}
+        {label ?? t("Instagram account")}
       </span>
       <select
         value={value}
         onChange={(event) => onChange(event.target.value)}
         className="min-w-52 rounded-xl border border-border bg-surface px-3 py-2 text-sm text-foreground outline-none transition-colors focus:border-accent/40"
       >
-        {includeAll && <option value="all">All accounts</option>}
+        {includeAll && <option value="all">{t("All accounts")}</option>}
         {accounts.map((account) => (
           <option key={account.id} value={account.id}>
             @{account.username}
diff --git a/components/campaign-builder.tsx b/components/campaign-builder.tsx
index ba97b280b..7a98ba3eb 100644
--- a/components/campaign-builder.tsx
+++ b/components/campaign-builder.tsx
@@ -12,6 +12,7 @@
  * follow / email / follow-up steps arrive in later turns.
  */
 
+import { useI18n } from "@/lib/i18n/provider";
 import { useEffect, useMemo, useState } from "react";
 import { useRouter } from "next/navigation";
 import AccountSelect, { type AccountOption } from "@/components/account-select";
@@ -130,6 +131,7 @@ function Toggle({
 }
 
 export default function CampaignBuilder({ mode, campaignId }: CampaignBuilderProps) {
+  const { t } = useI18n();
   const router = useRouter();
 
   const [loading, setLoading] = useState(mode === "edit");
@@ -386,14 +388,14 @@ export default function CampaignBuilder({ mode, campaignId }: CampaignBuilderPro
   async function handleSubmit(activeValue: boolean) {
     setError(null);
 
-    if (!selectedAccountId) return setError("Connect an Instagram account first.");
+    if (!selectedAccountId) return setError(t("Connect an Instagram account first."));
     if (triggerScope === "specific" && !postId)
-      return setError("Pick a post or reel to trigger the campaign.");
+      return setError(t("Pick a post or reel to trigger the campaign."));
     if (matchMode === "specific" && keywords.length === 0)
-      return setError("Add at least one keyword, or switch to any word.");
-    if (!dmMessage.trim()) return setError("Add the DM with the link.");
+      return setError(t("Add at least one keyword, or switch to any word."));
+    if (!dmMessage.trim()) return setError(t("Add the DM with the link."));
     if (openingDmEnabled && (!openingDmMessage.trim() || !openingDmButtonLabel.trim()))
-      return setError("Your opening DM needs a message and a button label.");
+      return setError(t("Your opening DM needs a message and a button label."));
 
     setSaving(true);
 
@@ -492,13 +494,13 @@ export default function CampaignBuilder({ mode, campaignId }: CampaignBuilderPro
         setError(
           firstField
             ? `${firstField}: ${fieldErrors[firstField][0]}`
-            : data.error ?? "Failed to save campaign"
+            : data.error ?? t("Failed to save campaign")
         );
         if (typeof window !== "undefined")
           window.scrollTo({ top: 0, behavior: "smooth" });
       }
     } catch {
-      setError("Failed to save campaign");
+      setError(t("Failed to save campaign"));
     } finally {
       setSaving(false);
     }
@@ -539,12 +541,12 @@ export default function CampaignBuilder({ mode, campaignId }: CampaignBuilderPro
   if (notFound) {
     return (
       <div className="panel rounded p-8 text-center">
-        <p className="text-sm text-muted">Campaign not found.</p>
+        <p className="text-sm text-muted">{t("Campaign not found.")}</p>
         <button
           onClick={() => router.push("/campaigns")}
           className="mt-4 rounded border border-border px-4 py-2 text-sm text-muted hover:text-foreground"
         >
-          Back to campaigns
+          {t("Back to campaigns")}
         </button>
       </div>
     );
@@ -555,11 +557,10 @@ export default function CampaignBuilder({ mode, campaignId }: CampaignBuilderPro
       {importQueue && (
         <div className="rounded border border-accent/30 bg-accent/5 px-4 py-3 text-sm">
           <span className="font-medium text-foreground">
-            Importing {importTotal - importQueue.length + 1} of {importTotal}.
+            {t("Importing {current} of {total}.", { current: importTotal - importQueue.length + 1, total: importTotal })}
           </span>{" "}
           <span className="text-muted">
-            Fields are prefilled from your CSV. Pick the reel, edit anything, and
-            save to load the next one — or Skip if you don&rsquo;t want this one.
+            {t("Fields are prefilled from your CSV. Pick the reel, edit anything, and save to load the next one — or Skip if you don’t want this one.")}
           </span>
         </div>
       )}
@@ -570,18 +571,18 @@ export default function CampaignBuilder({ mode, campaignId }: CampaignBuilderPro
           {mode === "edit" ? (
             <>
               <span className="truncate text-sm font-semibold text-foreground">
-                {name || "Untitled campaign"}
+                {name || t("Untitled campaign")}
               </span>
               <span
                 className={`rounded px-2 py-0.5 text-xs font-semibold ${
                   isActive ? "bg-success/15 text-success" : "bg-zinc-500/15 text-muted"
                 }`}
               >
-                {isActive ? "LIVE" : "PAUSED"}
+                {isActive ? t("LIVE") : t("PAUSED")}
               </span>
             </>
           ) : (
-            <span className="text-sm text-muted">New campaign</span>
+            <span className="text-sm text-muted">{t("New campaign")}</span>
           )}
         </div>
         <div className="ml-auto flex items-center gap-2">
@@ -592,7 +593,7 @@ export default function CampaignBuilder({ mode, campaignId }: CampaignBuilderPro
               disabled={saving}
               className="rounded-lg border border-border px-4 py-2 text-sm font-medium text-muted hover:text-foreground disabled:opacity-50"
             >
-              {importQueue.length > 1 ? "Skip" : "Skip & finish"}
+              {importQueue.length > 1 ? t("Skip") : t("Skip & finish")}
             </button>
           )}
           {mode === "edit" &&
@@ -603,7 +604,7 @@ export default function CampaignBuilder({ mode, campaignId }: CampaignBuilderPro
                 disabled={saving}
                 className="rounded-lg border border-border px-4 py-2 text-sm font-medium text-muted hover:text-foreground disabled:opacity-50"
               >
-                Stop
+                {t("Stop")}
               </button>
             ) : (
               <button
@@ -612,7 +613,7 @@ export default function CampaignBuilder({ mode, campaignId }: CampaignBuilderPro
                 disabled={saving}
                 className="rounded-lg border border-border px-4 py-2 text-sm font-medium text-muted hover:text-foreground disabled:opacity-50"
               >
-                Go Live
+                {t("Go Live")}
               </button>
             ))}
           <button
@@ -621,7 +622,7 @@ export default function CampaignBuilder({ mode, campaignId }: CampaignBuilderPro
             disabled={saving}
             className="rounded-lg bg-accent px-5 py-2 text-sm font-medium text-white hover:bg-accent-hover disabled:opacity-50"
           >
-            {saving ? "Saving…" : mode === "new" ? "Go Live" : "Save changes"}
+            {saving ? t("Saving…") : mode === "new" ? t("Go Live") : t("Save changes")}
           </button>
         </div>
       </div>
@@ -639,13 +640,13 @@ export default function CampaignBuilder({ mode, campaignId }: CampaignBuilderPro
 
         <div className="space-y-3">
           <label className="text-sm font-semibold text-foreground">
-            Campaign name{" "}
-            <span className="font-normal text-muted">(optional)</span>
+            {t("Campaign name")}{" "}
+            <span className="font-normal text-muted">{t("(optional)")}</span>
           </label>
           <input
             value={name}
             onChange={(e) => setName(e.target.value)}
-            placeholder="e.g. YC referral"
+            placeholder={t("e.g. YC referral")}
             className="w-full rounded-lg border border-border bg-surface px-3 py-2 text-sm text-foreground placeholder:text-zinc-500 focus:border-accent/40 focus:outline-none"
             maxLength={100}
           />
@@ -661,18 +662,18 @@ export default function CampaignBuilder({ mode, campaignId }: CampaignBuilderPro
                   setPostThumb(null);
                 }}
                 includeAll={false}
-                label="Instagram account"
+                label={t("Instagram account")}
               />
             </div>
           )}
         </div>
 
-        <Section title="When someone comments on">
+        <Section title={t("When someone comments on")}>
           <Radio
             checked={triggerScope === "specific"}
             onSelect={() => setTriggerScope("specific")}
           >
-            a specific post or reel
+            {t("a specific post or reel")}
           </Radio>
           {triggerScope === "specific" && (
             <div className="rounded-lg border border-border p-2">
@@ -688,44 +689,44 @@ export default function CampaignBuilder({ mode, campaignId }: CampaignBuilderPro
             checked={triggerScope === "any"}
             onSelect={() => setTriggerScope("any")}
           >
-            any post or reel
+            {t("any post or reel")}
           </Radio>
           <Radio
             checked={triggerScope === "next"}
             onSelect={() => setTriggerScope("next")}
           >
-            next post or reel
+            {t("next post or reel")}
           </Radio>
         </Section>
 
-        <Section title="And this comment has">
+        <Section title={t("And this comment has")}>
           <Radio
             checked={matchMode === "specific"}
             onSelect={() => setMatchMode("specific")}
           >
-            a specific word or words
+            {t("a specific word or words")}
           </Radio>
           {matchMode === "specific" && (
             <div className="space-y-1">
               <input
                 value={keywordText}
                 onChange={(e) => setKeywordText(e.target.value)}
-                placeholder="Enter a word or multiple"
+                placeholder={t("Enter a word or multiple")}
                 className="w-full rounded-lg border border-border bg-surface px-3 py-2 text-sm text-foreground placeholder:text-zinc-500 focus:border-accent/40 focus:outline-none"
               />
-              <p className="text-xs text-muted">Use commas to separate words</p>
+              <p className="text-xs text-muted">{t("Use commas to separate words")}</p>
             </div>
           )}
           <Radio
             checked={matchMode === "any"}
             onSelect={() => setMatchMode("any")}
           >
-            any word
+            {t("any word")}
           </Radio>
           <div className="flex items-center justify-between gap-3 rounded-lg border border-border px-3 py-2.5">
             <span className="text-sm text-foreground">
-              also reply when someone DMs{" "}
-              {matchMode === "any" ? "anything" : "these words"}
+              {t("also reply when someone DMs")}{" "}
+              {matchMode === "any" ? t("anything") : t("these words")}
             </span>
             <Toggle
               on={dmTriggerEnabled}
@@ -735,13 +736,13 @@ export default function CampaignBuilder({ mode, campaignId }: CampaignBuilderPro
           {dmTriggerEnabled && (
             <p className="text-xs text-muted">
               {matchMode === "any"
-                ? "Every DM to this account gets the reply below — use with care."
-                : "A DM containing any of these words gets the same reply, no comment needed."}
+                ? t("Every DM to this account gets the reply below — use with care.")
+                : t("A DM containing any of these words gets the same reply, no comment needed.")}
             </p>
           )}
           <div className="flex items-center justify-between rounded-lg border border-border px-3 py-2.5">
             <span className="text-sm text-foreground">
-              reply to their comments under the post
+              {t("reply to their comments under the post")}
             </span>
             <Toggle
               on={publicReplyEnabled}
@@ -759,7 +760,7 @@ export default function CampaignBuilder({ mode, campaignId }: CampaignBuilderPro
                         prev.map((m, idx) => (idx === i ? e.target.value : m))
                       )
                     }
-                    placeholder="Sent you a DM! 📩"
+                    placeholder={t("Sent you a DM! 📩")}
                     maxLength={1000}
                     className="w-full rounded-lg border border-border bg-surface px-3 py-2 text-sm text-foreground placeholder:text-zinc-500 focus:border-accent/40 focus:outline-none"
                   />
@@ -772,7 +773,7 @@ export default function CampaignBuilder({ mode, campaignId }: CampaignBuilderPro
                         )
                       }
                       className="shrink-0 px-2 text-muted hover:text-error"
-                      aria-label="Remove reply"
+                      aria-label={t("Remove reply")}
                     >
                       ✕
                     </button>
@@ -787,21 +788,20 @@ export default function CampaignBuilder({ mode, campaignId }: CampaignBuilderPro
                   }
                   className="text-xs font-medium text-accent hover:underline"
                 >
-                  + Add another reply
+                  {t("+ Add another reply")}
                 </button>
               )}
               <p className="text-xs text-muted">
-                One is picked at random each time, so replies don&apos;t look
-                identical.
+                {t("One is picked at random each time, so replies don't look identical.")}
               </p>
             </div>
           )}
         </Section>
 
-        <Section title="They will get">
+        <Section title={t("They will get")}>
           <div className="rounded-lg border border-border p-3">
             <div className="flex items-center justify-between">
-              <span className="text-sm text-foreground">an opening DM</span>
+              <span className="text-sm text-foreground">{t("an opening DM")}</span>
               <Toggle
                 on={openingDmEnabled}
                 onToggle={() => setOpeningDmEnabled(!openingDmEnabled)}
@@ -812,7 +812,7 @@ export default function CampaignBuilder({ mode, campaignId }: CampaignBuilderPro
                 <textarea
                   value={openingDmMessage}
                   onChange={(e) => setOpeningDmMessage(e.target.value)}
-                  placeholder="Hey there! I'm so happy you're here 😊"
+                  placeholder={t("Hey there! I'm so happy you're here 😊")}
                   rows={3}
                   className="w-full rounded-lg border border-border bg-surface px-3 py-2 text-sm text-foreground placeholder:text-zinc-500 focus:border-accent/40 focus:outline-none resize-none"
                   maxLength={1000}
@@ -820,7 +820,7 @@ export default function CampaignBuilder({ mode, campaignId }: CampaignBuilderPro
                 <input
                   value={openingDmButtonLabel}
                   onChange={(e) => setOpeningDmButtonLabel(e.target.value)}
-                  placeholder="Send me the link"
+                  placeholder={t("Send me the link")}
                   className="w-full rounded-lg border border-border bg-surface px-3 py-2 text-sm text-foreground placeholder:text-zinc-500 focus:border-accent/40 focus:outline-none"
                   maxLength={64}
                 />
@@ -830,7 +830,7 @@ export default function CampaignBuilder({ mode, campaignId }: CampaignBuilderPro
           <div className="mt-3 rounded-lg border border-border p-3">
             <div className="flex items-center justify-between">
               <span className="text-sm text-foreground">
-                a follow requirement first
+                {t("a follow requirement first")}
               </span>
               <Toggle
                 on={requireFollow}
@@ -842,7 +842,7 @@ export default function CampaignBuilder({ mode, campaignId }: CampaignBuilderPro
                 <textarea
                   value={followPromptMessage}
                   onChange={(e) => setFollowPromptMessage(e.target.value)}
-                  placeholder="quick favor before i send your link. i don't make any money from this, it's free. if you want to support me, just don't unfollow after, and star the repo on github if it helps you. tap the button once you're following and i'll send it over"
+                  placeholder={t("quick favor before i send your link. i don't make any money from this, it's free. if you want to support me, just don't unfollow after, and star the repo on github if it helps you. tap the button once you're following and i'll send it over")}
                   rows={3}
                   className="w-full rounded-lg border border-border bg-surface px-3 py-2 text-sm text-foreground placeholder:text-zinc-500 focus:border-accent/40 focus:outline-none resize-none"
                   maxLength={1000}
@@ -850,27 +850,25 @@ export default function CampaignBuilder({ mode, campaignId }: CampaignBuilderPro
                 <input
                   value={followPromptButtonLabel}
                   onChange={(e) => setFollowPromptButtonLabel(e.target.value)}
-                  placeholder="i'm following"
+                  placeholder={t("i'm following")}
                   className="w-full rounded-lg border border-border bg-surface px-3 py-2 text-sm text-foreground placeholder:text-zinc-500 focus:border-accent/40 focus:outline-none"
                   maxLength={20}
                 />
                 <p className="text-xs text-muted">
-                  We send the link only after they tap the button and Instagram
-                  confirms the follow. If it can&apos;t be verified, we send it
-                  anyway.
+                  {t("We send the link only after they tap the button and Instagram confirms the follow. If it can't be verified, we send it anyway.")}
                 </p>
               </div>
             )}
           </div>
         </Section>
 
-        <Section title="And then, they will get">
+        <Section title={t("And then, they will get")}>
           <div className="rounded-lg border border-border p-3 space-y-2">
-            <span className="text-sm text-foreground">a DM with a link</span>
+            <span className="text-sm text-foreground">{t("a DM with a link")}</span>
             <textarea
               value={dmMessage}
               onChange={(e) => setDmMessage(e.target.value)}
-              placeholder="Write a message"
+              placeholder={t("Write a message")}
               rows={3}
               className="w-full rounded-lg border border-border bg-surface px-3 py-2 text-sm text-foreground placeholder:text-zinc-500 focus:border-accent/40 focus:outline-none resize-none"
               maxLength={1000}
@@ -887,7 +885,7 @@ export default function CampaignBuilder({ mode, campaignId }: CampaignBuilderPro
                 <input
                   value={linkButtonLabel}
                   onChange={(e) => setLinkButtonLabel(e.target.value)}
-                  placeholder="Button label (e.g. Open link)"
+                  placeholder={t("Button label (e.g. Open link)")}
                   maxLength={20}
                   className="w-full rounded-lg border border-border bg-surface px-3 py-2 text-sm text-foreground placeholder:text-zinc-500 focus:border-accent/40 focus:outline-none"
                 />
@@ -902,7 +900,7 @@ export default function CampaignBuilder({ mode, campaignId }: CampaignBuilderPro
                     <input
                       value={secondaryButtonLabel}
                       onChange={(e) => setSecondaryButtonLabel(e.target.value)}
-                      placeholder="Second button label"
+                      placeholder={t("Second button label")}
                       maxLength={20}
                       className="w-full rounded-lg border border-border bg-surface px-3 py-2 text-sm text-foreground placeholder:text-zinc-500 focus:border-accent/40 focus:outline-none"
                     />
@@ -913,7 +911,7 @@ export default function CampaignBuilder({ mode, campaignId }: CampaignBuilderPro
                     onClick={() => setSecondLinkOpen(true)}
                     className="w-full rounded-lg border border-border py-2 text-sm text-muted hover:text-foreground"
                   >
-                    + Add A Second Link
+                    {t("+ Add A Second Link")}
                   </button>
                 )}
               </div>
@@ -923,17 +921,17 @@ export default function CampaignBuilder({ mode, campaignId }: CampaignBuilderPro
                 onClick={() => setLinkOpen(true)}
                 className="w-full rounded-lg border border-border py-2 text-sm text-muted hover:text-foreground"
               >
-                + Add A Link
+                {t("+ Add A Link")}
               </button>
             )}
             <p className="text-xs text-muted">
-              {"{link}"} inserts the tracked link; {"{username}"} personalizes.
+              {"{link}"} {t("inserts the tracked link;")} {"{username}"} {t("personalizes.")}
             </p>
           </div>
           <div className="mt-3 rounded-lg border border-border p-3">
             <div className="flex items-center justify-between">
               <span className="text-sm text-foreground">
-                a follow-up thank-you message
+                {t("a follow-up thank-you message")}
               </span>
               <Toggle
                 on={followUpEnabled}
@@ -945,13 +943,13 @@ export default function CampaignBuilder({ mode, campaignId }: CampaignBuilderPro
                 <textarea
                   value={followUpMessage}
                   onChange={(e) => setFollowUpMessage(e.target.value)}
-                  placeholder="Btw just wanted to say thanks for following me, I appreciate the support 🙌"
+                  placeholder={t("Btw just wanted to say thanks for following me, I appreciate the support 🙌")}
                   rows={3}
                   className="w-full rounded-lg border border-border bg-surface px-3 py-2 text-sm text-foreground placeholder:text-zinc-500 focus:border-accent/40 focus:outline-none resize-none"
                   maxLength={1000}
                 />
                 <div className="flex flex-wrap items-center gap-2 text-sm text-foreground">
-                  <span className="text-xs text-muted">Send it</span>
+                  <span className="text-xs text-muted">{t("Send it")}</span>
                   <input
                     type="number"
                     min={0}
@@ -965,15 +963,14 @@ export default function CampaignBuilder({ mode, campaignId }: CampaignBuilderPro
                     className="w-20 rounded-lg border border-border bg-surface px-2 py-1 text-sm text-foreground focus:border-accent/40 focus:outline-none"
                   />
                   <span className="text-xs text-muted">
-                    minutes after the link
+                    {t("minutes after the link")}
                   </span>
                 </div>
                 <p className="text-xs text-muted">
                   {followUpDelayMinutes > 0
-                    ? `Sent ${followUpDelayMinutes} min after they tap through.`
-                    : "Sent right after they tap through."}
-                  {" {username}"} personalizes it. Max 24 hours, to stay inside
-                  Instagram&apos;s messaging window.
+                    ? t("Sent {minutes} min after they tap through.", { minutes: followUpDelayMinutes })
+                    : t("Sent right after they tap through.")}
+                  {" {username}"} {t("personalizes it. Max 24 hours, to stay inside Instagram's messaging window.")}
                 </p>
               </div>
             )}
@@ -983,7 +980,7 @@ export default function CampaignBuilder({ mode, campaignId }: CampaignBuilderPro
 
       {/* Right: preview */}
       <div>
-        <p className="mb-4 text-sm text-muted">Preview</p>
+        <p className="mb-4 text-sm text-muted">{t("Preview")}</p>
         <div className="flex min-w-0 justify-center lg:sticky lg:top-6 lg:block">
           <CampaignPreview
             tab={previewTab}
diff --git a/components/campaign-preview.tsx b/components/campaign-preview.tsx
index e3b15eb81..2bdc04a4f 100644
--- a/components/campaign-preview.tsx
+++ b/components/campaign-preview.tsx
@@ -1,5 +1,8 @@
 "use client";
 
+import { useI18n } from "@/lib/i18n/provider";
+
+
 /* eslint-disable @next/next/no-img-element */
 
 /**
@@ -92,7 +95,7 @@ const Ico = {
 
 /* ----------------------------- helpers ----------------------------- */
 
-function renderMessage(text: string, hasLink: boolean, linkUrl?: string) {
+function renderMessage(text: string, hasLink: boolean, linkUrl: string | undefined, linkPlaceholder: string) {
   const withName = text.replace(/\{username\}/g, SAMPLE_USER);
   return withName.split(/(\{link\})/g).map((part, i) =>
     part === "{link}" ? (
@@ -105,7 +108,7 @@ function renderMessage(text: string, hasLink: boolean, linkUrl?: string) {
         }
       >
         {/* Show the actual link being sent, not a placeholder token. */}
-        {linkUrl || (hasLink ? "your link" : "{link}")}
+        {linkUrl || (hasLink ? linkPlaceholder : "{link}")}
       </span>
     ) : (
       <span key={i}>{part}</span>
@@ -189,6 +192,7 @@ function PostScreen({
   postThumb: string | null;
   caption: string;
 }) {
+  const { t } = useI18n();
   return (
     <div className="flex h-full flex-col text-white">
       <StatusBar />
@@ -196,7 +200,7 @@ function PostScreen({
         <span className="w-6">{Ico.back("h-5 w-5")}</span>
         <div className="flex-1 text-center">
           <p className="text-[9px] uppercase tracking-wide text-zinc-400">{username}</p>
-          <p className="text-sm font-semibold">Posts</p>
+          <p className="text-sm font-semibold">{t("Posts")}</p>
         </div>
         <span className="w-6" />
       </div>
@@ -220,10 +224,10 @@ function PostScreen({
         <p className="line-clamp-2">
           <span className="font-semibold">{username}</span>{" "}
           <span className="text-zinc-200">
-            {caption || "Applications close rly soon!!"}
+            {caption || t("Applications close rly soon!!")}
           </span>
         </p>
-        <p className="mt-1 text-zinc-500">View all comments</p>
+        <p className="mt-1 text-zinc-500">{t("View all comments")}</p>
       </div>
       <div className="flex shrink-0 items-center justify-around border-t border-zinc-800 px-2 py-3 text-white">
         {Ico.home("h-6 w-6")}
@@ -249,6 +253,7 @@ function CommentsScreen({
   publicReplyEnabled: boolean;
   publicReplyMessage: string;
 }) {
+  const { t } = useI18n();
   const reactions = ["❤️", "🙌", "🔥", "👏", "😢", "😍", "😮", "😂"];
   return (
     <div className="flex h-full flex-col text-white">
@@ -256,17 +261,17 @@ function CommentsScreen({
       <div className="h-20 bg-zinc-800/70" />
       <div className="flex flex-1 flex-col rounded-t-2xl bg-[#0b0b0b] px-4 pt-3">
         <div className="mx-auto mb-3 h-1 w-9 rounded-full bg-zinc-600" />
-        <p className="text-center text-sm font-semibold">Comments</p>
+        <p className="text-center text-sm font-semibold">{t("Comments")}</p>
 
         <div className="mt-5 flex gap-3">
           <Avatar url={null} size={32} />
           <div className="flex-1">
             <p className="text-xs">
               <span className="font-semibold">{SAMPLE_USER}</span>{" "}
-              <span className="text-zinc-500">Now</span>
+              <span className="text-zinc-500">{t("Now")}</span>
             </p>
             <p className="text-sm">{sampleComment || "yc"}</p>
-            <p className="mt-0.5 text-xs text-zinc-500">Reply</p>
+            <p className="mt-0.5 text-xs text-zinc-500">{t("Reply")}</p>
           </div>
           <span className="mt-1">{Ico.heart("h-3.5 w-3.5 text-zinc-500")}</span>
         </div>
@@ -277,10 +282,10 @@ function CommentsScreen({
             <div className="flex-1">
               <p className="text-xs">
                 <span className="font-semibold">{username}</span>{" "}
-                <span className="text-zinc-500">Now</span>
+                <span className="text-zinc-500">{t("Now")}</span>
               </p>
-              <p className="text-sm">{publicReplyMessage || "Sent you a DM! 📩"}</p>
-              <p className="mt-0.5 text-xs text-zinc-500">Reply</p>
+              <p className="text-sm">{publicReplyMessage || t("Sent you a DM! 📩")}</p>
+              <p className="mt-0.5 text-xs text-zinc-500">{t("Reply")}</p>
             </div>
             <span className="mt-1">{Ico.heart("h-3.5 w-3.5 text-zinc-500")}</span>
           </div>
@@ -295,7 +300,7 @@ function CommentsScreen({
           <div className="mb-3 flex items-center gap-2">
             <Avatar url={avatarUrl} size={28} />
             <div className="flex-1 rounded-full bg-zinc-800 px-3 py-2 text-xs text-zinc-500">
-              Add a comment for {username}…
+              {t("Add a comment for")} {username}…
             </div>
           </div>
         </div>
@@ -344,6 +349,7 @@ function DmScreen({
   // Present on the keyword-trigger thread: the DM the user sends to start it.
   inboundMessage?: string;
 }) {
+  const { t } = useI18n();
   return (
     <div className="flex h-full flex-col text-white">
       <StatusBar />
@@ -361,7 +367,7 @@ function DmScreen({
         {inboundMessage !== undefined && (
           <div className="flex justify-end">
             <div className="max-w-[80%] rounded-2xl rounded-br-md bg-accent px-3 py-2 text-sm">
-              {inboundMessage || "their message"}
+              {inboundMessage || t("their message")}
             </div>
           </div>
         )}
@@ -370,15 +376,15 @@ function DmScreen({
             <div className="flex items-end gap-2">
               <Avatar url={avatarUrl} size={24} />
               <div className="max-w-[80%] overflow-hidden rounded-2xl rounded-bl-md bg-zinc-800">
-                <p className="whitespace-pre-wrap px-3 py-2 text-sm">{openingDmMessage || "Your opening message…"}</p>
+                <p className="whitespace-pre-wrap px-3 py-2 text-sm">{openingDmMessage || t("Your opening message…")}</p>
                 <div className="mx-1.5 mb-1.5 rounded-xl bg-zinc-700 px-4 py-1.5 text-center text-sm font-medium text-white">
-                  {openingDmButtonLabel || "Button label"}
+                  {openingDmButtonLabel || t("Button label")}
                 </div>
               </div>
             </div>
             <div className="flex justify-end">
               <div className="rounded-2xl rounded-br-md bg-accent px-3 py-2 text-sm">
-                {openingDmButtonLabel || "Button label"}
+                {openingDmButtonLabel || t("Button label")}
               </div>
             </div>
           </>
@@ -418,10 +424,10 @@ function DmScreen({
                 {(!showCard || bodyText) && (
                   <p className="whitespace-pre-wrap px-3 py-2 text-sm">
                     {!revealMessage
-                      ? "Write a message"
+                      ? t("Write a message")
                       : showCard
                         ? bodyText
-                        : renderMessage(revealMessage, hasLink, linkUrl)}
+                        : renderMessage(revealMessage, hasLink, linkUrl, t("your link"))}
                   </p>
                 )}
                 {showCard && (
@@ -444,7 +450,7 @@ function DmScreen({
           <>
             {followUpDelayMinutes > 0 && (
               <p className="py-1 text-center text-[11px] text-zinc-500">
-                {followUpDelayMinutes} min later
+                {followUpDelayMinutes} {t("min later")}
               </p>
             )}
             <div className="flex items-end gap-2">
@@ -453,7 +459,7 @@ function DmScreen({
                 <p className="whitespace-pre-wrap text-sm">
                   {followUpMessage.trim()
                     ? followUpMessage.replace(/\{username\}/g, SAMPLE_USER)
-                    : "Btw just wanted to say thanks for following me, I appreciate the support 🙌"}
+                    : t("Btw just wanted to say thanks for following me, I appreciate the support 🙌")}
                 </p>
               </div>
             </div>
@@ -465,7 +471,7 @@ function DmScreen({
         <span className="grid h-8 w-8 shrink-0 place-items-center rounded-full bg-accent text-white">
           {Ico.camera("h-4 w-4")}
         </span>
-        <div className="flex-1 rounded-full bg-zinc-800 px-3 py-2 text-xs text-zinc-500">Message…</div>
+        <div className="flex-1 rounded-full bg-zinc-800 px-3 py-2 text-xs text-zinc-500">{t("Message…")}</div>
       </div>
     </div>
   );
@@ -474,13 +480,14 @@ function DmScreen({
 /* ----------------------------- root ----------------------------- */
 
 export default function CampaignPreview(props: CampaignPreviewProps) {
+  const { t } = useI18n();
   const { tab, onTabChange } = props;
   const tabs: { key: PreviewTab; label: string }[] = [
-    { key: "post", label: "Post" },
-    { key: "comments", label: "Comments" },
+    { key: "post", label: t("Post") },
+    { key: "comments", label: t("Comments") },
     { key: "dm", label: "DM" },
     ...(props.dmTriggerEnabled
-      ? [{ key: "dmTrigger" as const, label: "DM trigger" }]
+      ? [{ key: "dmTrigger" as const, label: t("DM trigger") }]
       : []),
   ];
 
diff --git a/components/demo-notice.tsx b/components/demo-notice.tsx
index b55deca0d..81a0137db 100644
--- a/components/demo-notice.tsx
+++ b/components/demo-notice.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { useI18n } from "@/lib/i18n/provider";
 import { useSyncExternalStore } from "react";
 import { DEMO_HOST } from "@/lib/env";
 
@@ -53,6 +54,7 @@ function dismiss() {
 }
 
 export function DemoNotice({ variant }: { variant: "banner" | "panel" }) {
+  const { t } = useI18n();
   const visible = useSyncExternalStore(
     subscribe,
     getSnapshot,
@@ -65,23 +67,21 @@ export function DemoNotice({ variant }: { variant: "banner" | "panel" }) {
     return (
       <div className="relative border-b border-orange-200 bg-orange-50">
         <p className="mx-auto w-full max-w-6xl px-10 py-2 text-center text-xs leading-5 text-zinc-700 sm:px-14 sm:text-sm">
-          <span className="font-bold text-zinc-900">{DEMO_HOST}</span> is a
-          demo. OpenReply is self-hosted — signing in here will not send DMs for
-          your account.{" "}
+          <span className="font-bold text-zinc-900">{DEMO_HOST}</span> {t("is a demo. OpenReply is self-hosted — signing in here will not send DMs for your account.")}{" "}
           <a
             href={SETUP_DOCS_URL}
             target="_blank"
             rel="noreferrer"
             className="font-bold text-orange-700 underline underline-offset-2 transition hover:text-orange-800"
           >
-            Deploy your own copy
+            {t("Deploy your own copy")}
           </a>
           .
         </p>
         <button
           type="button"
           onClick={dismiss}
-          aria-label="Dismiss demo notice"
+          aria-label={t("Dismiss demo notice")}
           className="absolute right-2 top-1/2 -translate-y-1/2 p-2 text-zinc-500 transition hover:text-zinc-900 sm:right-4"
         >
           <DismissIcon />
@@ -93,24 +93,22 @@ export function DemoNotice({ variant }: { variant: "banner" | "panel" }) {
   return (
     <div className="relative mb-5 rounded border border-warning/30 bg-warning/10 px-4 py-3 pr-10">
       <p className="text-sm leading-6 text-foreground">
-        <span className="font-semibold">{DEMO_HOST} is a demo instance.</span>{" "}
-        Signing in here will not send DMs for your Instagram account. OpenReply
-        is self-hosted, so it only works on a deployment you run yourself, with
-        your own Meta app and your own domain.{" "}
+        <span className="font-semibold">{DEMO_HOST} {t("is a demo instance.")}</span>{" "}
+        {t("Signing in here will not send DMs for your Instagram account. OpenReply is self-hosted, so it only works on a deployment you run yourself, with your own Meta app and your own domain.")}{" "}
         <a
           href={SETUP_DOCS_URL}
           target="_blank"
           rel="noreferrer"
           className="font-semibold text-warning underline underline-offset-2"
         >
-          Read the setup guide
+          {t("Read the setup guide")}
         </a>
         .
       </p>
       <button
         type="button"
         onClick={dismiss}
-        aria-label="Dismiss demo notice"
+        aria-label={t("Dismiss demo notice")}
         className="absolute right-1 top-1 p-2 text-muted transition hover:text-foreground"
       >
         <DismissIcon />
diff --git a/components/follower-chart.tsx b/components/follower-chart.tsx
index 8d4af5f15..38d04c570 100644
--- a/components/follower-chart.tsx
+++ b/components/follower-chart.tsx
@@ -12,6 +12,8 @@
  * already running then.
  */
 
+import type { Locale } from "@/lib/i18n";
+import { useI18n } from "@/lib/i18n/provider";
 import { useState } from "react";
 import {
   CartesianGrid,
@@ -35,22 +37,22 @@ const SERIES_COLOR = "#f97316";
 const GRID_COLOR = "#e4e4e7";
 const AXIS_TEXT = "#71717a";
 
-function formatCompact(n: number): string {
+function formatCompact(n: number, locale: Locale): string {
   if (Math.abs(n) >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
   if (Math.abs(n) >= 1_000) return `${(n / 1_000).toFixed(1)}K`;
-  return n.toLocaleString();
+  return n.toLocaleString(locale);
 }
 
-function formatDay(iso: string): string {
-  return new Date(`${iso}T00:00:00Z`).toLocaleDateString(undefined, {
+function formatDay(iso: string, locale: Locale): string {
+  return new Date(`${iso}T00:00:00Z`).toLocaleDateString(locale, {
     month: "short",
     day: "numeric",
     timeZone: "UTC",
   });
 }
 
-function formatSigned(n: number): string {
-  return `${n > 0 ? "+" : ""}${n.toLocaleString()}`;
+function formatSigned(n: number, locale: Locale): string {
+  return `${n > 0 ? "+" : ""}${n.toLocaleString(locale)}`;
 }
 
 function ChartTooltip({
@@ -60,18 +62,19 @@ function ChartTooltip({
   active?: boolean;
   payload?: Array<{ payload: FollowerChartPoint }>;
 }) {
+  const { t, locale } = useI18n();
   if (!active || !payload?.length) return null;
   const point = payload[0].payload;
 
   return (
     <div className="rounded border border-border bg-surface px-3 py-2 text-xs shadow-lg">
-      <p className="text-muted">{formatDay(point.date)}</p>
+      <p className="text-muted">{formatDay(point.date, locale)}</p>
       <p className="mt-1 font-semibold text-foreground">
-        {point.followers.toLocaleString()} followers
+        {point.followers.toLocaleString(locale)} {t("followers")}
       </p>
       {point.delta !== null && point.delta !== 0 && (
         <p className={point.delta > 0 ? "text-success" : "text-error"}>
-          {formatSigned(point.delta)} that day
+          {formatSigned(point.delta, locale)} {t("that day")}
         </p>
       )}
     </div>
@@ -85,6 +88,7 @@ export default function FollowerChart({
   data: FollowerChartPoint[];
   followers: number | null;
 }) {
+  const { t, locale } = useI18n();
   const [showTable, setShowTable] = useState(false);
 
   const current = followers ?? data.at(-1)?.followers ?? null;
@@ -99,19 +103,19 @@ export default function FollowerChart({
       <div className="flex flex-wrap items-start justify-between gap-4">
         <div className="min-w-0">
           <h2 className="text-sm font-semibold text-foreground">
-            Followers over time
+            {t("Followers over time")}
           </h2>
           <p className="mt-1 text-sm text-muted">
             {current === null
-              ? "Follower count unavailable"
-              : `${current.toLocaleString()} now`}
+              ? t("Follower count unavailable")
+              : t("{count} now", { count: current.toLocaleString(locale) })}
             {net !== null && (
               <>
                 {" · "}
                 <span className={net >= 0 ? "text-success" : "text-error"}>
-                  {formatSigned(net)}
+                  {formatSigned(net, locale)}
                 </span>{" "}
-                over {data.length} days
+                {t("over {count} days", { count: data.length })}
               </>
             )}
           </p>
@@ -122,20 +126,19 @@ export default function FollowerChart({
             onClick={() => setShowTable((v) => !v)}
             className="rounded border border-border px-3 py-1.5 text-xs font-medium text-muted transition-colors hover:border-border-hover hover:text-foreground"
           >
-            {showTable ? "Show chart" : "Show table"}
+            {showTable ? t("Show chart") : t("Show table")}
           </button>
         )}
       </div>
 
       {data.length < 2 ? (
         <div className="mt-6 rounded border border-border bg-surface/60 p-6 text-center">
-          <p className="text-sm text-foreground">Collecting follower history</p>
+          <p className="text-sm text-foreground">{t("Collecting follower history")}</p>
           <p className="mt-1 text-sm text-muted">
             {data.length === 0
-              ? "No snapshots recorded yet."
-              : "One day recorded so far."}{" "}
-            A point is added daily — the chart appears once there are at least
-            two.
+              ? t("No snapshots recorded yet.")
+              : t("One day recorded so far.")}{" "}
+            {t("A point is added daily — the chart appears once there are at least two.")}
           </p>
         </div>
       ) : showTable ? (
@@ -143,22 +146,22 @@ export default function FollowerChart({
           <table className="w-full text-sm">
             <thead>
               <tr className="border-b border-border text-left text-xs uppercase tracking-wide text-zinc-500">
-                <th className="py-2 pr-4 font-medium">Date</th>
-                <th className="py-2 px-3 font-medium text-right">Followers</th>
-                <th className="py-2 pl-3 font-medium text-right">Change</th>
+                <th className="py-2 pr-4 font-medium">{t("Date")}</th>
+                <th className="py-2 px-3 font-medium text-right">{t("Followers")}</th>
+                <th className="py-2 pl-3 font-medium text-right">{t("Change")}</th>
               </tr>
             </thead>
             <tbody>
               {[...data].reverse().map((p) => (
                 <tr key={p.date} className="border-b border-border last:border-0">
                   <td className="py-2 pr-4 text-foreground">
-                    {formatDay(p.date)}
+                    {formatDay(p.date, locale)}
                   </td>
                   <td className="py-2 px-3 text-right text-muted">
-                    {p.followers.toLocaleString()}
+                    {p.followers.toLocaleString(locale)}
                   </td>
                   <td className="py-2 pl-3 text-right text-muted">
-                    {p.delta === null ? "—" : formatSigned(p.delta)}
+                    {p.delta === null ? "—" : formatSigned(p.delta, locale)}
                   </td>
                 </tr>
               ))}
@@ -179,14 +182,14 @@ export default function FollowerChart({
               />
               <XAxis
                 dataKey="date"
-                tickFormatter={formatDay}
+                tickFormatter={(value) => formatDay(value, locale)}
                 tick={{ fill: AXIS_TEXT, fontSize: 12 }}
                 stroke={GRID_COLOR}
                 tickLine={false}
                 minTickGap={24}
               />
               <YAxis
-                tickFormatter={formatCompact}
+                tickFormatter={(value) => formatCompact(value, locale)}
                 tick={{ fill: AXIS_TEXT, fontSize: 12 }}
                 stroke={GRID_COLOR}
                 tickLine={false}
diff --git a/components/instagram-connect-notice.tsx b/components/instagram-connect-notice.tsx
index 922edc0dc..1b2b4f0b7 100644
--- a/components/instagram-connect-notice.tsx
+++ b/components/instagram-connect-notice.tsx
@@ -1,5 +1,7 @@
 "use client";
 
+import type { StaticMessageKey } from "@/lib/i18n";
+import { useI18n } from "@/lib/i18n/provider";
 import { useSearchParams } from "next/navigation";
 
 type Tone = "error" | "warning" | "success";
@@ -10,7 +12,7 @@ const TONE_CLASSES: Record<Tone, string> = {
   success: "border-success/20 bg-success/10 text-success",
 };
 
-const MESSAGES: Record<string, { tone: Tone; title: string; detail: string }> = {
+const MESSAGES: Record<string, { tone: Tone; title: StaticMessageKey; detail: StaticMessageKey }> = {
   denied: {
     tone: "warning",
     title: "Instagram connection cancelled",
@@ -38,6 +40,7 @@ const MESSAGES: Record<string, { tone: Tone; title: string; detail: string }> =
 };
 
 export function InstagramConnectNotice() {
+  const { t } = useI18n();
   const searchParams = useSearchParams();
   const status = searchParams.get("instagram");
 
@@ -49,13 +52,13 @@ export function InstagramConnectNotice() {
       .filter(Boolean);
 
     return (
-      <Notice tone="error" title="Instagram app not configured">
+      <Notice tone="error" title={t("Instagram app not configured")}>
         <p>
-          Set{" "}
+          {t("Set")}{" "}
           {missing.length > 0
-            ? "these environment variables"
-            : "the required environment variables"}{" "}
-          and restart the server:
+            ? t("these environment variables")
+            : t("the required environment variables")}{" "}
+          {t("and restart the server:")}
         </p>
         {missing.length > 0 && (
           <ul className="mt-2 space-y-1">
@@ -67,10 +70,8 @@ export function InstagramConnectNotice() {
           </ul>
         )}
         <p className="mt-2">
-          See <span className="font-mono text-xs">docs/setup.md</span> for how to
-          obtain each value. Note that{" "}
-          <span className="font-mono text-xs">ENCRYPTION_KEY</span> must be a
-          64-character hex string.
+          {t("See")} <span className="font-mono text-xs">docs/setup.md</span> {t("for how to obtain each value. Note that")}{" "}
+          <span className="font-mono text-xs">ENCRYPTION_KEY</span> {t("must be a 64-character hex string.")}
         </p>
       </Notice>
     );
@@ -80,11 +81,9 @@ export function InstagramConnectNotice() {
     const reason = searchParams.get("reason");
 
     return (
-      <Notice tone="error" title="Instagram connection failed">
+      <Notice tone="error" title={t("Instagram connection failed")}>
         <p>
-          Instagram accepted the login but the connection could not be
-          completed. This is usually a mismatched redirect URI or an app that is
-          missing the required permissions.
+          {t("Instagram accepted the login but the connection could not be completed. This is usually a mismatched redirect URI or an app that is missing the required permissions.")}
         </p>
         {reason && (
           <p className="mt-2 font-mono text-xs break-words opacity-80">
@@ -99,8 +98,8 @@ export function InstagramConnectNotice() {
   if (!known) return null;
 
   return (
-    <Notice tone={known.tone} title={known.title}>
-      <p>{known.detail}</p>
+    <Notice tone={known.tone} title={t(known.title)}>
+      <p>{t(known.detail)}</p>
     </Notice>
   );
 }
diff --git a/components/invitation-accept-card.tsx b/components/invitation-accept-card.tsx
index c6c67b5c1..827d96820 100644
--- a/components/invitation-accept-card.tsx
+++ b/components/invitation-accept-card.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { useI18n } from "@/lib/i18n/provider";
 import { useState } from "react";
 
 interface InvitationAcceptCardProps {
@@ -13,6 +14,7 @@ export default function InvitationAcceptCard({
   isSignedIn,
   invitedEmail,
 }: InvitationAcceptCardProps) {
+  const { t } = useI18n();
   const [busy, setBusy] = useState(false);
   const [message, setMessage] = useState<string | null>(null);
 
@@ -29,7 +31,7 @@ export default function InvitationAcceptCard({
       window.location.assign("/dashboard");
       return;
     }
-    setMessage(payload.error ?? "Could not accept invitation");
+    setMessage(payload.error ?? t("Could not accept invitation"));
     setBusy(false);
   }
 
@@ -39,7 +41,7 @@ export default function InvitationAcceptCard({
         href="/login"
         className="inline-flex items-center justify-center rounded-xl bg-accent px-5 py-3 text-sm font-semibold text-white transition hover:bg-accent-hover"
       >
-        Sign in to accept
+        {t("Sign in to accept")}
       </a>
     );
   }
@@ -52,11 +54,11 @@ export default function InvitationAcceptCard({
         disabled={busy}
         className="inline-flex items-center justify-center rounded-xl bg-accent px-5 py-3 text-sm font-semibold text-white transition hover:bg-accent-hover disabled:opacity-50"
       >
-        {busy ? "Accepting..." : "Accept invitation"}
+        {busy ? t("Accepting...") : t("Accept invitation")}
       </button>
       {message && <p className="text-sm text-error">{message}</p>}
       <p className="text-xs text-muted">
-        Use the magic link account for {invitedEmail}.
+        {t("Use the magic link account for")} {invitedEmail}.
       </p>
     </div>
   );
diff --git a/components/keyword-input.tsx b/components/keyword-input.tsx
index 1b1207e78..d73054325 100644
--- a/components/keyword-input.tsx
+++ b/components/keyword-input.tsx
@@ -6,6 +6,7 @@
  * Tag-style input for adding/removing keywords.
  */
 
+import { useI18n } from "@/lib/i18n/provider";
 import { useState, type KeyboardEvent } from "react";
 
 interface KeywordInputProps {
@@ -15,6 +16,7 @@ interface KeywordInputProps {
 }
 
 export default function KeywordInput({ keywords, onChange, max = 10 }: KeywordInputProps) {
+  const { t } = useI18n();
   const [input, setInput] = useState("");
 
   function addKeyword(value: string) {
@@ -52,10 +54,10 @@ export default function KeywordInput({ keywords, onChange, max = 10 }: KeywordIn
             <button
               type="button"
               onClick={() => removeKeyword(keyword)}
-              aria-label={`Remove ${keyword}`}
+              aria-label={t("Remove {keyword}", { keyword })}
               className="text-muted hover:text-error"
             >
-              Remove
+              {t("Remove")}
             </button>
           </span>
         ))}
@@ -64,12 +66,12 @@ export default function KeywordInput({ keywords, onChange, max = 10 }: KeywordIn
           value={input}
           onChange={(e) => setInput(e.target.value)}
           onKeyDown={handleKeyDown}
-          placeholder={keywords.length === 0 ? "Type keyword and press Enter..." : ""}
+          placeholder={keywords.length === 0 ? t("Type keyword and press Enter...") : ""}
           className="flex-1 min-w-[120px] bg-transparent text-sm text-foreground placeholder:text-zinc-500 outline-none"
         />
       </div>
       <p className="text-xs text-muted">
-        {keywords.length}/{max} keywords · Press Enter or comma to add
+        {keywords.length}/{max} {t("keywords · Press Enter or comma to add")}
       </p>
     </div>
   );
diff --git a/components/language-switcher.tsx b/components/language-switcher.tsx
new file mode 100644
index 000000000..a62bea1db
--- /dev/null
+++ b/components/language-switcher.tsx
@@ -0,0 +1,48 @@
+"use client";
+
+import { useState, useTransition } from "react";
+import { setLocale } from "@/lib/i18n/actions";
+import { useI18n } from "@/lib/i18n/provider";
+
+export default function LanguageSwitcher() {
+  const { locale, t } = useI18n();
+  const [pending, startTransition] = useTransition();
+  const [failed, setFailed] = useState(false);
+
+  return (
+    <div className="space-y-1">
+      <label className="inline-flex items-center gap-2 text-sm text-muted">
+        <span>{t("Language")}</span>
+        <select
+          value={locale}
+          disabled={pending}
+          aria-busy={pending}
+          onChange={(event) => {
+            const nextLocale = event.target.value;
+            setFailed(false);
+            startTransition(async () => {
+              try {
+                await setLocale(nextLocale);
+              } catch {
+                setFailed(true);
+              }
+            });
+          }}
+          className="min-h-9 rounded border border-border bg-surface px-2 text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent disabled:opacity-60"
+        >
+          <option value="en" lang="en">
+            English
+          </option>
+          <option value="zh-TW" lang="zh-TW">
+            繁體中文
+          </option>
+        </select>
+      </label>
+      {failed && (
+        <p role="alert" className="text-xs text-error">
+          {t("Could not change language. Please try again.")}
+        </p>
+      )}
+    </div>
+  );
+}
diff --git a/components/localized-layout.tsx b/components/localized-layout.tsx
new file mode 100644
index 000000000..4fde69df8
--- /dev/null
+++ b/components/localized-layout.tsx
@@ -0,0 +1,20 @@
+import { I18nProvider } from "@/lib/i18n/provider";
+import { getI18n } from "@/lib/i18n/server";
+import LanguageSwitcher from "@/components/language-switcher";
+
+// Keep request cookies below the root layout so marketing pages stay static.
+export default async function LocalizedLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const { locale } = await getI18n();
+  return (
+    <I18nProvider locale={locale}>
+      <div className="flex justify-end px-5 pt-4">
+        <LanguageSwitcher />
+      </div>
+      {children}
+    </I18nProvider>
+  );
+}
diff --git a/components/post-picker.tsx b/components/post-picker.tsx
index e55858aaa..647eeb20a 100644
--- a/components/post-picker.tsx
+++ b/components/post-picker.tsx
@@ -9,6 +9,7 @@
  * Fetches from /api/instagram/posts.
  */
 
+import { useI18n } from "@/lib/i18n/provider";
 import { useEffect, useState } from "react";
 import { readCache, writeCache } from "@/lib/client-cache";
 
@@ -43,6 +44,7 @@ export default function PostPicker({
   usedPostIds,
   onSelect,
 }: PostPickerProps) {
+  const { t } = useI18n();
   const [limitations, setLimitations] = useState<string[]>([]);
   const [posts, setPosts] = useState<InstagramPost[]>([]);
   const [loading, setLoading] = useState(true);
@@ -113,8 +115,8 @@ export default function PostPicker({
   if (error) {
     return (
       <div className="text-center py-8">
-        <p className="text-sm text-muted">{error}</p>
-        <p className="text-xs text-zinc-500 mt-1">Connect your Instagram account first</p>
+        <p className="text-sm text-muted">{error === "Failed to load posts" ? t("Failed to load posts") : error}</p>
+        <p className="text-xs text-zinc-500 mt-1">{t("Connect your Instagram account first")}</p>
       </div>
     );
   }
@@ -122,7 +124,7 @@ export default function PostPicker({
   if (posts.length === 0) {
     return (
       <div className="text-center py-8">
-        <p className="text-sm text-muted">No posts found</p>
+        <p className="text-sm text-muted">{t("No posts found")}</p>
       </div>
     );
   }
@@ -149,21 +151,21 @@ export default function PostPicker({
             // cleared, which is the case this whole change exists to avoid.
             setShown(PAGE_SIZE);
           }}
-          placeholder="Search your posts by caption…"
+          placeholder={t("Search your posts by caption…")}
           className="w-full rounded-lg border border-border bg-surface px-3 py-2 text-sm text-foreground placeholder:text-zinc-500 focus:border-accent/40 focus:outline-none"
         />
         <span className="shrink-0 text-xs text-muted">{posts.length}</span>
       </div>
       {visible.length === 0 ? (
         <p className="py-6 text-center text-sm text-muted">
-          No posts match &ldquo;{query}&rdquo;
+          {t("No posts match “")}{query}{t("”")}
         </p>
       ) : (
         <>
           {usedPostIds && Object.keys(usedPostIds).length > 0 && (
             <p className="flex items-center gap-1.5 px-1 text-[11px] text-muted">
               <span className="inline-block h-2.5 w-2.5 rounded-sm border border-warning/50" />
-              Already used
+              {t("Already used")}
             </p>
           )}
           {/* auto-rows-min + content-start keep each row at its natural height.
@@ -188,7 +190,7 @@ export default function PostPicker({
               setHoveredId((cur) => (cur === post.id ? null : cur))
             }
             aria-pressed={isSelected}
-            title={isUsed ? `Already used by "${usedByName}"` : undefined}
+            title={isUsed && usedByName ? t("Already used by \"{name}\"", { name: usedByName }) : undefined}
             className={`
               relative aspect-square rounded overflow-hidden border-2
               ${
@@ -203,14 +205,14 @@ export default function PostPicker({
             {thumb ? (
               <img
                 src={thumb}
-                alt={post.caption?.slice(0, 50) ?? "Instagram post"}
+                alt={post.caption?.slice(0, 50) ?? t("Instagram post")}
                 loading="lazy"
                 decoding="async"
                 className={`w-full h-full object-cover ${isUsed ? "opacity-75" : ""}`}
               />
             ) : (
               <div className="w-full h-full bg-surface flex items-center justify-center">
-                <span className="text-xs text-muted">No image</span>
+                <span className="text-xs text-muted">{t("No image")}</span>
               </div>
             )}
             {showVideo && (
@@ -229,7 +231,7 @@ export default function PostPicker({
             )}
             {isSelected && (
               <span className="absolute bottom-0 inset-x-0 bg-accent text-white text-xs py-1">
-                Selected
+                {t("Selected")}
               </span>
             )}
           </button>
@@ -242,7 +244,7 @@ export default function PostPicker({
               onClick={() => setShown((n) => n + PAGE_SIZE)}
               className="w-full rounded-lg border border-border py-2 text-sm text-muted hover:text-foreground"
             >
-              Show {Math.min(PAGE_SIZE, remaining)} more
+              {t("Show")} {Math.min(PAGE_SIZE, remaining)} {t("more")}
             </button>
           )}
         </>
diff --git a/components/sidebar.tsx b/components/sidebar.tsx
index 2b17c5431..f092209de 100644
--- a/components/sidebar.tsx
+++ b/components/sidebar.tsx
@@ -6,6 +6,8 @@
  * Text-only nav with active state and workspace section.
  */
 
+import LanguageSwitcher from "@/components/language-switcher";
+import { useI18n } from "@/lib/i18n/provider";
 import Link from "next/link";
 import Image from "next/image";
 import { zernioLink } from "@/lib/zernio-links";
@@ -19,7 +21,7 @@ const navItems = [
   { label: "DM Logs", href: "/logs" },
   { label: "Settings", href: "/settings" },
   { label: "Diagnostics", href: "/diagnostics" },
-];
+] as const;
 
 interface SidebarProps {
   isOpen: boolean;
@@ -32,6 +34,7 @@ export default function Sidebar({
   onClose,
   workspaceName,
 }: SidebarProps) {
+  const { t } = useI18n();
   const pathname = usePathname();
 
   return (
@@ -82,22 +85,23 @@ export default function Sidebar({
                   }
                 `}
               >
-                {item.label}
+                {t(item.label)}
               </Link>
             );
           })}
         </nav>
 
         <div className="px-5 py-4 border-t border-border">
+          <div className="mb-4"><LanguageSwitcher /></div>
           <p className="text-sm text-foreground truncate">{workspaceName}</p>
-          <p className="text-xs text-muted">Self-hosted</p>
+          <p className="text-xs text-muted">{t("Self-hosted")}</p>
           <a
             href={zernioLink({ placement: "sidebar" })}
             target="_blank"
             rel="sponsored noopener noreferrer"
             className="mt-4 flex items-center gap-3 text-xs text-muted hover:text-foreground"
           >
-            <span>Supported by</span>
+            <span>{t("Supported by")}</span>
             <Image
               src="/brand/zernio-primary.svg"
               alt="Zernio"
diff --git a/components/stat-card.tsx b/components/stat-card.tsx
index fe8a7e26c..88f15295e 100644
--- a/components/stat-card.tsx
+++ b/components/stat-card.tsx
@@ -1,3 +1,8 @@
+"use client";
+
+import { useI18n } from "@/lib/i18n/provider";
+
+
 /**
  * Stat Card
  *
@@ -12,13 +17,14 @@ interface StatCardProps {
 }
 
 export default function StatCard({ label, value, trend, trendUp }: StatCardProps) {
+  const { t } = useI18n();
   return (
     <div className="panel rounded p-4">
       <p className="text-sm text-muted">{label}</p>
       <p className="text-2xl font-semibold text-foreground mt-1">{value}</p>
       {trend && (
         <p className={`text-xs mt-1 ${trendUp ? "text-success" : "text-error"}`}>
-          {trendUp ? "Up" : "Down"} {trend}
+          {trendUp ? "Up" : t("Down")} {trend}
         </p>
       )}
     </div>
diff --git a/components/status-badge.tsx b/components/status-badge.tsx
index 9804852ac..b43c37aaa 100644
--- a/components/status-badge.tsx
+++ b/components/status-badge.tsx
@@ -1,8 +1,12 @@
+"use client";
+
+import type { StaticMessageKey } from "@/lib/i18n";
+import { useI18n } from "@/lib/i18n/provider";
 /**
  * Status label for DM status. Plain text; color carries the state.
  */
 
-const statusConfig: Record<string, { text: string; label: string }> = {
+const statusConfig: Record<string, { text: string; label: StaticMessageKey }> = {
   SENT: { text: "text-success", label: "Sent" },
   FAILED: { text: "text-error", label: "Failed" },
   PENDING: { text: "text-warning", label: "Pending" },
@@ -17,11 +21,12 @@ interface StatusBadgeProps {
 }
 
 export default function StatusBadge({ status }: StatusBadgeProps) {
+  const { t } = useI18n();
   const config = statusConfig[status] ?? statusConfig.PENDING;
 
   return (
     <span className={`shrink-0 whitespace-nowrap text-sm ${config.text}`}>
-      {config.label}
+      {t(config.label)}
     </span>
   );
 }
diff --git a/components/top-bar.tsx b/components/top-bar.tsx
index 234cbacbf..8275bfd11 100644
--- a/components/top-bar.tsx
+++ b/components/top-bar.tsx
@@ -6,10 +6,15 @@
  * Page title, mobile hamburger, and connection status.
  */
 
+import type { StaticMessageKey } from "@/lib/i18n";
+import { useI18n } from "@/lib/i18n/provider";
 import { usePathname } from "next/navigation";
 
-const pageTitles: Record<string, string> = {
+const pageTitles: Record<string, StaticMessageKey> = {
   "/dashboard": "Dashboard",
+  "/overview": "Overview",
+  "/inbox": "Inbox",
+  "/campaigns/import": "Import campaigns",
   "/campaigns": "Campaigns",
   "/campaigns/new": "New Campaign",
   "/automations": "Campaigns",
@@ -30,8 +35,12 @@ export default function TopBar({
   instagramUsername,
   instagramAccountCount,
 }: TopBarProps) {
+  const { t } = useI18n();
   const pathname = usePathname();
-  const title = pageTitles[pathname] ?? "Dashboard";
+  const title: StaticMessageKey = pageTitles[pathname] ?? (
+    pathname.endsWith("/edit") ? "Edit campaign"
+      : pathname.startsWith("/campaigns/") ? "Campaign details" : "Dashboard"
+  );
 
   return (
     <header
@@ -48,17 +57,17 @@ export default function TopBar({
         <button
           onClick={onMenuClick}
           className="lg:hidden shrink-0 px-2.5 py-1.5 rounded border border-border text-sm text-muted hover:text-foreground"
-          aria-label="Toggle sidebar"
+          aria-label={t("Toggle sidebar")}
         >
-          Menu
+          {t("Menu")}
         </button>
-        <h1 className="truncate text-base font-semibold sm:text-lg">{title}</h1>
+        <h1 className="truncate text-base font-semibold sm:text-lg">{t(title)}</h1>
       </div>
 
       {instagramAccountCount > 0 ? (
         <p className="shrink-0 truncate text-sm text-muted">
           {instagramAccountCount > 1
-            ? `${instagramAccountCount} accounts`
+            ? t("{count} accounts", { count: instagramAccountCount })
             : `@${instagramUsername}`}
         </p>
       ) : (
@@ -67,8 +76,8 @@ export default function TopBar({
           className="shrink-0 whitespace-nowrap text-sm font-medium px-3 py-1.5 rounded bg-accent text-white hover:bg-accent-hover"
         >
           {/* Full label needs more room than a 360px header has to spare. */}
-          <span className="sm:hidden">Connect</span>
-          <span className="hidden sm:inline">Connect Instagram</span>
+          <span className="sm:hidden">{t("Connect")}</span>
+          <span className="hidden sm:inline">{t("Connect Instagram")}</span>
         </a>
       )}
     </header>
diff --git a/components/zernio-connection.tsx b/components/zernio-connection.tsx
index 4d99f00bb..ab93098af 100644
--- a/components/zernio-connection.tsx
+++ b/components/zernio-connection.tsx
@@ -1,5 +1,8 @@
+"use client";
+
 'use client';
 
+import { useI18n } from "@/lib/i18n/provider";
 import { useCallback, useEffect, useState } from 'react';
 import Image from 'next/image';
 import { zernioLink } from '@/lib/zernio-links';
@@ -11,6 +14,7 @@ type ConnectionData = {
 };
 
 export function ZernioConnection({ canManage }: { canManage: boolean }) {
+  const { t } = useI18n();
   const [data, setData] = useState<ConnectionData | null>(null);
   const [apiKey, setApiKey] = useState('');
   const [profileId, setProfileId] = useState('');
@@ -28,7 +32,7 @@ export function ZernioConnection({ canManage }: { canManage: boolean }) {
       void fetch('/api/zernio/settings', { cache: 'no-store' }).then(r => r.json()).then(result => {
         if (!result.success) throw new Error(result.error);
         setData(result.data); setProfileId(result.data.profileId ?? '');
-      }).catch(e => setError(e instanceof Error ? e.message : 'Could not load connection.'));
+      }).catch(e => setError(e instanceof Error ? e.message : "Could not load connection."));
     }
   }, [canManage, refresh]);
 
@@ -42,40 +46,40 @@ export function ZernioConnection({ canManage }: { canManage: boolean }) {
       if (result.data?.authUrl) { window.location.assign(result.data.authUrl); return; }
       if (path === 'accounts') { window.location.reload(); return; }
       await refresh();
-    } catch (e) { setError(e instanceof Error ? e.message : 'Could not update connection.'); }
+    } catch (e) { setError(e instanceof Error ? e.message : t("Could not update connection.")); }
     finally { setBusy(false); }
   }
 
   return (
     <section className="zernio-sponsor rounded-xl border p-5 sm:p-6" aria-labelledby="zernio-heading">
       <div className="flex flex-wrap items-center justify-between gap-4">
-        <div><h2 id="zernio-heading" className="text-base font-semibold">Easier Instagram setup</h2><p className="mt-1 text-sm">Optional connection provider</p></div>
-        <a href={zernioLink({ placement: 'settings-logo' })} target="_blank" rel="noopener noreferrer" aria-label="Zernio, OpenReply sponsor"><Image src="/brand/zernio-primary.svg" alt="Zernio" width={106} height={32} className="h-auto" /></a>
+        <div><h2 id="zernio-heading" className="text-base font-semibold">{t("Easier Instagram setup")}</h2><p className="mt-1 text-sm">{t("Optional connection provider")}</p></div>
+        <a href={zernioLink({ placement: 'settings-logo' })} target="_blank" rel="noopener noreferrer" aria-label={t("Zernio, OpenReply sponsor")}><Image src="/brand/zernio-primary.svg" alt="Zernio" width={106} height={32} className="h-auto" /></a>
       </div>
-      <p className="mt-4 text-sm leading-6">Connect Instagram without creating your own Meta developer app. Zernio is a paid service and an OpenReply sponsor. Your campaigns and hosting stay in OpenReply.</p>
-      <p className="mt-2 flex flex-wrap gap-x-4 gap-y-2 text-sm"><a className="underline underline-offset-4" href={zernioLink({ path: '/signup', placement: 'settings-signup' })} target="_blank" rel="noopener noreferrer">Get a Zernio API key</a><a className="underline underline-offset-4" href={zernioLink({ path: '/pricing', placement: 'settings-pricing' })} target="_blank" rel="noopener noreferrer">View pricing</a></p>
-      {!canManage ? <p className="mt-4 text-sm">Ask your workspace owner or admin to configure Zernio.</p> : <>
-        {error && <p role="alert" className="mt-4 rounded border border-error/30 bg-white p-3 text-sm text-error">{error}</p>}
+      <p className="mt-4 text-sm leading-6">{t("Connect Instagram without creating your own Meta developer app. Zernio is a paid service and an OpenReply sponsor. Your campaigns and hosting stay in OpenReply.")}</p>
+      <p className="mt-2 flex flex-wrap gap-x-4 gap-y-2 text-sm"><a className="underline underline-offset-4" href={zernioLink({ path: '/signup', placement: 'settings-signup' })} target="_blank" rel="noopener noreferrer">{t("Get a Zernio API key")}</a><a className="underline underline-offset-4" href={zernioLink({ path: '/pricing', placement: 'settings-pricing' })} target="_blank" rel="noopener noreferrer">{t("View pricing")}</a></p>
+      {!canManage ? <p className="mt-4 text-sm">{t("Ask your workspace owner or admin to configure Zernio.")}</p> : <>
+        {error && <p role="alert" className="mt-4 rounded border border-error/30 bg-white p-3 text-sm text-error">{error === "Could not load connection." ? t("Could not load connection.") : error}</p>}
         {!data?.configured ? <form className="mt-5 space-y-3" onSubmit={e => { e.preventDefault(); void act({ method: 'POST', body: { apiKey } }); }}>
-          <label className="block text-sm font-medium" htmlFor="zernio-api-key">Zernio API key</label>
+          <label className="block text-sm font-medium" htmlFor="zernio-api-key">{t("Zernio API key")}</label>
           <input id="zernio-api-key" type="password" autoComplete="off" value={apiKey} onChange={e => setApiKey(e.target.value)} required className="w-full rounded-lg border border-zernio-border bg-white px-3 py-2 text-sm" />
-          <p className="text-xs leading-5">Use an unrestricted, read-write key with Inbox access. OpenReply registers a webhook for this workspace. The key is encrypted and never shown again.</p>
-          <button disabled={busy || !apiKey} className="zernio-action rounded-xl px-4 py-3 text-sm font-medium disabled:opacity-50">{busy ? 'Saving…' : 'Save API key'}</button>
+          <p className="text-xs leading-5">{t("Use an unrestricted, read-write key with Inbox access. OpenReply registers a webhook for this workspace. The key is encrypted and never shown again.")}</p>
+          <button disabled={busy || !apiKey} className="zernio-action rounded-xl px-4 py-3 text-sm font-medium disabled:opacity-50">{busy ? t("Saving…") : t("Save API key")}</button>
         </form> : <div className="mt-5 space-y-4">
-          <p className="text-sm">API key saved securely.</p>
+          <p className="text-sm">{t("API key saved securely.")}</p>
           <form className="space-y-3" onSubmit={e => { e.preventDefault(); void act({ method: 'PUT', body: { profileId } }); }}>
-            <label htmlFor="zernio-profile" className="block text-sm font-medium">Zernio profile</label>
-            <select id="zernio-profile" value={profileId} onChange={e => setProfileId(e.target.value)} required className="w-full rounded-lg border border-zernio-border bg-white px-3 py-2 text-sm"><option value="">Select a profile</option>{data.profiles.map(p => <option key={p.id} value={p.id}>{p.name}</option>)}</select>
-            {!data.profiles.length && <p className="text-sm">Create a profile in Zernio, then refresh this page.</p>}
-            <button disabled={busy || !profileId} className="zernio-action rounded-xl px-4 py-3 text-sm font-medium disabled:opacity-50">{busy ? 'Configuring…' : data.webhookReady && profileId === data.profileId ? 'Repair webhook connection' : 'Save profile and configure webhook'}</button>
+            <label htmlFor="zernio-profile" className="block text-sm font-medium">{t("Zernio profile")}</label>
+            <select id="zernio-profile" value={profileId} onChange={e => setProfileId(e.target.value)} required className="w-full rounded-lg border border-zernio-border bg-white px-3 py-2 text-sm"><option value="">{t("Select a profile")}</option>{data.profiles.map(p => <option key={p.id} value={p.id}>{p.name}</option>)}</select>
+            {!data.profiles.length && <p className="text-sm">{t("Create a profile in Zernio, then refresh this page.")}</p>}
+            <button disabled={busy || !profileId} className="zernio-action rounded-xl px-4 py-3 text-sm font-medium disabled:opacity-50">{busy ? t("Configuring…") : data.webhookReady && profileId === data.profileId ? t("Repair webhook connection") : t("Save profile and configure webhook")}</button>
           </form>
           {data.webhookReady && <div className="space-y-3 border-t border-zernio-border pt-4">
-            <p className="text-sm">Webhook configured. Choose an Instagram account for OpenReply:</p>
-            {data.accounts.map(a => <div key={a.id} className="flex flex-wrap items-center justify-between gap-3 text-sm"><span>@{a.username}</span><button disabled={busy || a.connected} onClick={() => void act({ path: 'accounts', method: 'POST', body: { accountId: a.id } })} className="rounded-lg border border-zernio-border bg-white px-3 py-2 disabled:opacity-50">{a.connected ? 'Connected' : 'Use in OpenReply'}</button></div>)}
-            <button disabled={busy} onClick={() => void act({ path: 'connect', method: 'POST' })} className="rounded-lg border border-zernio-border bg-white px-3 py-2 text-sm disabled:opacity-50">Connect another Instagram account</button>
-            <p className="text-xs leading-5">After connecting Instagram, return here and select it for OpenReply. Keep Zernio automations off for these campaigns to avoid sending twice.</p>
+            <p className="text-sm">{t("Webhook configured. Choose an Instagram account for OpenReply:")}</p>
+            {data.accounts.map(a => <div key={a.id} className="flex flex-wrap items-center justify-between gap-3 text-sm"><span>@{a.username}</span><button disabled={busy || a.connected} onClick={() => void act({ path: 'accounts', method: 'POST', body: { accountId: a.id } })} className="rounded-lg border border-zernio-border bg-white px-3 py-2 disabled:opacity-50">{a.connected ? t("Connected") : t("Use in OpenReply")}</button></div>)}
+            <button disabled={busy} onClick={() => void act({ path: 'connect', method: 'POST' })} className="rounded-lg border border-zernio-border bg-white px-3 py-2 text-sm disabled:opacity-50">{t("Connect another Instagram account")}</button>
+            <p className="text-xs leading-5">{t("After connecting Instagram, return here and select it for OpenReply. Keep Zernio automations off for these campaigns to avoid sending twice.")}</p>
           </div>}
-          <button disabled={busy} onClick={() => { if (confirm('Remove the Zernio key and this OpenReply webhook? Disconnect its Instagram accounts from OpenReply first.')) void act({ method: 'DELETE' }); }} className="text-xs underline underline-offset-4 disabled:opacity-50">Remove Zernio connection</button>
+          <button disabled={busy} onClick={() => { if (confirm(t("Remove the Zernio key and this OpenReply webhook? Disconnect its Instagram accounts from OpenReply first."))) void act({ method: 'DELETE' }); }} className="text-xs underline underline-offset-4 disabled:opacity-50">{t("Remove Zernio connection")}</button>
         </div>}
       </>}
     </section>
diff --git a/docs/localization.md b/docs/localization.md
new file mode 100644
index 000000000..665d0295f
--- /dev/null
+++ b/docs/localization.md
@@ -0,0 +1,56 @@
+# Interface languages
+
+OpenReply defaults to English. Choose **English** or **繁體中文** in the dashboard
+sidebar, under **Settings → Interface language**, or on the sign-in screen.
+The choice is stored in a browser cookie for one year and applies to the
+dashboard, sign-in screens, workspace invitations, and shared campaign reports.
+
+Changing the interface language does not translate campaign names, keywords,
+outgoing messages, button text, imported CSV data, or Instagram content. An
+unsaved campaign stays in the editor when switching languages. Default outgoing
+message content retains its original values in both languages.
+
+Public marketing, template playbooks, legal pages, authentication emails, and
+raw API/provider error details remain in English. Those are outside this
+interface translation's scope.
+
+## Adding or changing copy
+
+- `lib/i18n/zh-TW.json` maps English source copy to Traditional Chinese. Use
+  complete sentences with named placeholders when word order can vary.
+- Client components use `useI18n()`; server components use `await getI18n()`.
+  `t("Hello, {name}!", { name })` checks both the message key and required
+  placeholders at compile time. Never pass user content as a translation key.
+- `label(value)` translates known status, role, and weekday display labels.
+  Unknown values pass through; stored values and API filters stay unchanged.
+- Format dates and numbers with the selected `locale`. Translate input hints,
+  not values already entered by the user.
+- Remove unused catalog entries when removing UI copy. The catalog tests check
+  that translations retain their interpolation fields and contain plain text.
+
+## Rendering and persistence
+
+The locale cookie is validated on the server; missing or unsupported values
+fall back to English. A server action saves it and re-renders the current route
+without remounting the editor. The action sets a same-site, HTTP-only cookie,
+with the secure flag in production. There is no translation dependency, new
+database column, or change to the sending worker.
+
+Providers live in the localized route layouts, below the root layout. This
+keeps the public marketing and template pages statically rendered. Localized
+content has a server-rendered `lang` attribute; the provider also updates the
+document language while mounted and restores it when leaving these routes.
+
+## Validation
+
+Run the contribution checks in `CONTRIBUTING.md`. The locale unit tests cover
+preference validation, persistence, English fallback, interpolation, and status
+labels. For browser verification:
+
+1. Start with no locale cookie: sign-in should display English.
+2. Switch to Traditional Chinese, reload, and navigate to another localized
+   route: the selected language, labels, and dates should remain consistent.
+3. In the campaign editor, change a message and toggle an option without saving.
+   Switch languages: both draft values and the selected post should remain.
+4. Switch back to English, including on a narrow viewport using the sidebar.
+5. Visit a public marketing page: it should remain English.
diff --git a/lib/i18n/actions.ts b/lib/i18n/actions.ts
new file mode 100644
index 000000000..193e87a69
--- /dev/null
+++ b/lib/i18n/actions.ts
@@ -0,0 +1,16 @@
+"use server";
+
+import { cookies } from "next/headers";
+import { isLocale, LOCALE_COOKIE } from "./index";
+
+export async function setLocale(value: string) {
+  if (!isLocale(value)) throw new Error("Unsupported locale");
+  const cookieStore = await cookies();
+  cookieStore.set(LOCALE_COOKIE, value, {
+    path: "/",
+    maxAge: 60 * 60 * 24 * 365,
+    sameSite: "lax",
+    httpOnly: true,
+    secure: process.env.NODE_ENV === "production",
+  });
+}
diff --git a/lib/i18n/index.ts b/lib/i18n/index.ts
new file mode 100644
index 000000000..77fcba3eb
--- /dev/null
+++ b/lib/i18n/index.ts
@@ -0,0 +1,71 @@
+import zhTW from "./zh-TW.json";
+
+export const LOCALE_COOKIE = "openreply-locale";
+export type Locale = "en" | "zh-TW";
+export type MessageKey = keyof typeof zhTW;
+
+export function isLocale(value: unknown): value is Locale {
+  return value === "en" || value === "zh-TW";
+}
+
+export function resolveLocale(value: unknown): Locale {
+  return isLocale(value) ? value : "en";
+}
+
+type Placeholders<S extends string> =
+  S extends `${string}{${infer Name}}${infer Rest}`
+    ? Name | Placeholders<Rest>
+    : never;
+export type StaticMessageKey = {
+  [K in MessageKey]: [Placeholders<K>] extends [never] ? K : never;
+}[MessageKey];
+type MessageArgs<K extends MessageKey> = [Placeholders<K>] extends [never]
+  ? []
+  : [values: Record<Placeholders<K>, string | number>];
+
+// English is the source language. Only application-owned copy belongs here;
+// campaign messages, account names and API values are never translation keys.
+const labels: Record<string, StaticMessageKey> = {
+  ALL: "All",
+  SENT: "Sent",
+  FAILED: "Failed",
+  PENDING: "Pending",
+  SKIPPED_RATE_LIMIT: "Rate limited",
+  SKIPPED_PLAN_LIMIT: "Plan limit",
+  SKIPPED_DEDUP: "Dedup",
+  OWNER: "Owner",
+  ADMIN: "Admin",
+  MEMBER: "Member",
+  all: "All",
+  active: "Active",
+  paused: "Paused",
+  waiting: "Waiting",
+  delayed: "Delayed",
+  failed: "Failed",
+  Mon: "Mon",
+  Tue: "Tue",
+  Wed: "Wed",
+  Thu: "Thu",
+  Fri: "Fri",
+  Sat: "Sat",
+  Sun: "Sun",
+};
+
+export function createI18n(locale: Locale) {
+  function t<K extends MessageKey>(key: K, ...args: MessageArgs<K>): string {
+    const message = locale === "zh-TW" ? zhTW[key] : key;
+    const values = args[0] as Record<string, string | number> | undefined;
+    return message.replace(/\{(\w+)\}/g, (placeholder, name: string) =>
+      values?.[name] === undefined ? placeholder : String(values[name]),
+    );
+  }
+
+  return {
+    locale,
+    t,
+    label: (value: string) =>
+      Object.hasOwn(labels, value) ? t(labels[value]) : value,
+  };
+}
+
+export type I18n = ReturnType<typeof createI18n>;
diff --git a/lib/i18n/provider.tsx b/lib/i18n/provider.tsx
new file mode 100644
index 000000000..a6c2a945e
--- /dev/null
+++ b/lib/i18n/provider.tsx
@@ -0,0 +1,37 @@
+"use client";
+
+import { createContext, useContext, useEffect, useMemo } from "react";
+import { createI18n, type Locale } from "./index";
+
+// Shared components on the English marketing pages work without a provider.
+const I18nContext = createContext(createI18n("en"));
+
+export function I18nProvider({
+  locale,
+  children,
+}: {
+  locale: Locale;
+  children: React.ReactNode;
+}) {
+  const value = useMemo(() => createI18n(locale), [locale]);
+
+  useEffect(() => {
+    const previous = document.documentElement.lang;
+    document.documentElement.lang = locale;
+    return () => {
+      document.documentElement.lang = previous;
+    };
+  }, [locale]);
+
+  return (
+    <I18nContext.Provider value={value}>
+      <div lang={locale} className="contents">
+        {children}
+      </div>
+    </I18nContext.Provider>
+  );
+}
+
+export function useI18n() {
+  return useContext(I18nContext);
+}
diff --git a/lib/i18n/server.ts b/lib/i18n/server.ts
new file mode 100644
index 000000000..9c7630471
--- /dev/null
+++ b/lib/i18n/server.ts
@@ -0,0 +1,8 @@
+import { cache } from "react";
+import { cookies } from "next/headers";
+import { createI18n, LOCALE_COOKIE, resolveLocale } from "./index";
+
+export const getI18n = cache(async () => {
+  const cookieStore = await cookies();
+  return createI18n(resolveLocale(cookieStore.get(LOCALE_COOKIE)?.value));
+});
diff --git a/lib/i18n/zh-TW.json b/lib/i18n/zh-TW.json
new file mode 100644
index 000000000..f86ef55dc
--- /dev/null
+++ b/lib/i18n/zh-TW.json
@@ -0,0 +1,450 @@
+{
+  " (capped at {count})": "（最多顯示 {count} 則）",
+  "% CTR": "% 點擊率",
+  "(no text)": "（無文字內容）",
+  "(optional)": "（選填）",
+  "+ Add A Link": "+ 新增連結",
+  "+ Add A Second Link": "+ 新增第二個連結",
+  "+ Add another reply": "+ 新增另一則回覆",
+  ". Keywords go in one cell, separated by commas. Use": "。多個關鍵字請放在同一個儲存格，以逗號分隔。訊息中可使用",
+  ". Optional:": "。選填欄位：",
+  "2 links": "2 個連結",
+  "A DM containing any of these words gets the same reply, no comment needed.": "收到含有任一關鍵字的私訊時，也會傳送相同回覆。",
+  "A point is added daily — the chart appears once there are at least two.": "每天記錄一次，累積至少兩天後即可顯示圖表。",
+  "A sign-in link was sent to your email.": "登入連結已寄到你的電子信箱。",
+  "A specific post or reel": "指定貼文或 Reels",
+  "API key saved securely.": "API 金鑰已安全儲存。",
+  "Accept Workspace Invitation - OpenReply": "接受工作區邀請 - OpenReply",
+  "Accept invitation": "接受邀請",
+  "Accepting...": "正在接受邀請…",
+  "Account": "帳號",
+  "Account already connected": "此帳號已連線",
+  "Accounts": "帳號",
+  "Active": "啟用中",
+  "Active Campaigns": "啟用中的活動",
+  "Active campaign": "活動啟用中",
+  "Add a comment for": "新增留言給",
+  "Add at least one keyword, or switch to any word.": "請新增至少一個關鍵字，或改為「任何文字」。",
+  "Add the DM with the link.": "請填寫要傳送的私訊與連結。",
+  "Admin": "管理員",
+  "After connecting Instagram, return here and select it for OpenReply. Keep Zernio automations off for these campaigns to avoid sending twice.": "連接 Instagram 後，請回到此頁選取帳號。請關閉 Zernio 中對應的自動化，以免重複傳送。",
+  "All": "全部",
+  "All accounts": "全部帳號",
+  "All time": "全部期間",
+  "All-time": "全部",
+  "Already used": "已用於其他活動",
+  "Already used by \"{name}\"": "已用於「{name}」",
+  "Also replies when someone DMs": "收到私訊時也回覆",
+  "And then, they will get": "接著傳送",
+  "And then, they will get a DM": "接著傳送私訊",
+  "And this comment has": "且留言符合以下條件",
+  "Any comment": "任何留言",
+  "Any post or reel": "任何貼文或 Reels",
+  "Applications close rly soon!!": "留言即可收到詳細資訊！",
+  "Ask your workspace owner or admin to configure Zernio.": "請聯絡工作區擁有者或管理員設定 Zernio。",
+  "Back": "返回",
+  "Back to campaigns": "返回活動列表",
+  "Back to conversations": "返回對話列表",
+  "Back to sign in": "返回登入頁",
+  "Btw just wanted to say thanks for following me, I appreciate the support 🙌": "謝謝你的追蹤與支持 🙌",
+  "Built with OpenReply, the Instagram comment-to-DM campaign OS.": "使用 OpenReply 建立 Instagram 留言自動私訊活動。",
+  "Button": "按鈕",
+  "Button label": "按鈕文字",
+  "Button label (e.g. Open link)": "按鈕文字（例如：開啟連結）",
+  "CTR": "點擊率",
+  "Campaign": "活動",
+  "Campaign DM Failures And Skips": "私訊失敗與略過紀錄",
+  "Campaign Setup": "活動設定",
+  "Campaign details": "活動詳情",
+  "Campaign name": "活動名稱",
+  "Campaign not found.": "找不到此活動。",
+  "Campaign post": "活動貼文",
+  "Campaign reel": "活動 Reels",
+  "Campaigns": "自動回覆活動",
+  "Cancel": "取消",
+  "Change": "變化",
+  "Check your email": "請查看電子郵件",
+  "Check your email - OpenReply": "請查看電子郵件 - OpenReply",
+  "Clicks": "連結點擊",
+  "Clicks divided by sent replies.": "連結點擊次數除以已傳送私訊數。",
+  "Client campaign report": "活動成效報表",
+  "Clone it yourself": "自行部署",
+  "Close": "關閉",
+  "Collecting follower history": "正在累積追蹤人數紀錄",
+  "Comment": "留言",
+  "Comment webhooks and private replies depend on this connection.": "接收留言事件與自動私訊需要此連線。",
+  "Commenter": "留言者",
+  "Comments": "留言",
+  "Configuring…": "設定中…",
+  "Connect": "連接",
+  "Connect Instagram": "連接 Instagram",
+  "Connect Instagram without creating your own Meta developer app. Zernio is a paid service and an OpenReply sponsor. Your campaigns and hosting stay in OpenReply.": "使用 Zernio 可省去自行建立 Meta 開發者應用程式的步驟。Zernio 是付費服務，也是 OpenReply 的贊助商；活動與網站仍由 OpenReply 管理。",
+  "Connect an Instagram account first.": "請先連接 Instagram 帳號。",
+  "Connect an Instagram professional account to launch campaigns.": "請連接 Instagram 專業帳號以啟用活動。",
+  "Connect another Instagram account": "連接另一個 Instagram 帳號",
+  "Connect using your own Meta app": "使用自己的 Meta 應用程式連線",
+  "Connect your Instagram account first": "請先連接 Instagram 帳號",
+  "Connected": "已連線",
+  "Connected via Zernio": "透過 Zernio 連線",
+  "Conversations": "對話",
+  "Copied!": "已複製！",
+  "Copy": "複製",
+  "Copy URL": "複製網址",
+  "Could not accept invitation": "無法接受邀請",
+  "Could not change language. Please try again.": "無法切換語言，請再試一次。",
+  "Could not invite member": "無法邀請成員",
+  "Could not load connection.": "無法載入連線狀態。",
+  "Could not stage the import in this browser.": "無法在此瀏覽器準備匯入資料。",
+  "Could not update connection.": "無法更新連線。",
+  "Create Campaign": "建立活動",
+  "Create a profile in Zernio, then refresh this page.": "請先在 Zernio 建立設定檔，再重新整理此頁。",
+  "Create your first comment-to-DM campaign to turn a post or reel into a measurable conversation flow.": "建立第一個留言自動私訊活動，設定觸發貼文、關鍵字與回覆內容。",
+  "Created": "建立時間",
+  "DM Logs": "私訊紀錄",
+  "DM trigger": "私訊觸發",
+  "DMs Sent": "已傳送私訊",
+  "DMs sent": "已傳送私訊",
+  "DMs sent this month": "本月已傳送私訊",
+  "DMs — Last 7 Days": "最近 7 天的私訊",
+  "Dashboard": "儀表板",
+  "Date": "日期",
+  "Dedup": "重複略過",
+  "Delayed": "延遲中",
+  "Delete": "刪除",
+  "Delete this campaign? This cannot be undone.": "確定要刪除此活動嗎？刪除後無法復原。",
+  "Deploy your own copy": "部署自己的版本",
+  "Details unavailable": "無法取得詳細資料",
+  "Diagnostics": "系統診斷",
+  "Disconnect": "中斷連線",
+  "Disconnect Instagram? Campaigns for this account will stop sending DMs.": "確定要中斷 Instagram 連線嗎？此帳號的活動將停止傳送私訊。",
+  "Disconnecting...": "正在中斷連線…",
+  "Dismiss demo notice": "關閉示範網站提示",
+  "Down": "下降",
+  "Duplicate": "複製活動",
+  "Duplicates, limits, or no-send outcomes.": "因重複、限制或其他條件而未傳送。",
+  "Easier Instagram setup": "更簡便的 Instagram 連線方式",
+  "Edit": "編輯",
+  "Edit campaign": "編輯活動",
+  "Email me a magic link": "寄送登入連結",
+  "Enter a word or multiple": "輸入一個或多個關鍵字",
+  "Every DM to this account gets the reply below — use with care.": "此帳號收到的每則私訊都會觸發以下回覆，請確認適用範圍。",
+  "Failed": "失敗",
+  "Failed to load conversations": "無法載入對話",
+  "Failed to load overview": "無法載入帳號總覽",
+  "Failed to load posts": "無法載入貼文",
+  "Failed to save campaign": "活動儲存失敗",
+  "Failed to send message": "訊息傳送失敗",
+  "Fields are prefilled from your CSV. Pick the reel, edit anything, and save to load the next one — or Skip if you don’t want this one.": "已從 CSV 帶入欄位。選擇 Reels 並調整內容，儲存後即可檢查下一筆，也可以略過此筆。",
+  "Fill with a sample": "填入範例",
+  "Follow gate": "先追蹤再傳送",
+  "Follower count unavailable": "無法取得追蹤人數",
+  "Followers": "追蹤人數",
+  "Followers over time": "追蹤人數趨勢",
+  "Fri": "週五",
+  "Generated": "產生時間",
+  "Get a Zernio API key": "取得 Zernio API 金鑰",
+  "Go Live": "啟用活動",
+  "Health, queues, webhook failures, billing events, and worker alerts.": "查看服務健康狀態、佇列、Webhook 錯誤與背景處理器警示。",
+  "Healthy": "正常",
+  "Hello, {name}!": "你好，{name}！",
+  "Hey there! I'm so happy you're here 😊": "嗨，很高興你來了 😊",
+  "Import": "匯入",
+  "Import campaigns": "匯入活動",
+  "Importing {current} of {total}.": "正在匯入第 {current} / {total} 筆。",
+  "Inbox": "收件匣",
+  "Insights": "成效分析",
+  "Instagram Connection": "Instagram 連線",
+  "Instagram accepted the login but the connection could not be completed. This is usually a mismatched redirect URI or an app that is missing the required permissions.": "Instagram 已接受登入，但連線未完成。通常是回呼網址不符，或應用程式缺少必要權限。",
+  "Instagram account": "Instagram 帳號",
+  "Instagram app not configured": "Instagram 應用程式尚未設定",
+  "Instagram connection cancelled": "已取消 Instagram 連線",
+  "Instagram connection expired": "Instagram 連線已逾時",
+  "Instagram connection failed": "Instagram 連線失敗",
+  "Instagram could not load the details of this conversation. Other conversations are still available. You can check this chat in Instagram.": "Instagram 無法載入此對話的詳細內容，其他對話仍可使用。你可以到 Instagram 查看此對話。",
+  "Instagram could not load this conversation.": "Instagram 無法載入這段對話。",
+  "Instagram post": "Instagram 貼文",
+  "Instagram webhook": "Instagram Webhook",
+  "Interface language": "介面語言",
+  "Invite": "邀請",
+  "Inviting...": "邀請中…",
+  "Join {workspace}": "加入 {workspace}",
+  "Keywords": "關鍵字",
+  "LIVE": "啟用中",
+  "Language": "語言",
+  "Last 100": "最近 100 則",
+  "Last 25": "最近 25 則",
+  "Last 50": "最近 50 則",
+  "Last 7 Days": "最近 7 天",
+  "Last heartbeat {seconds}s ago": "{seconds} 秒前收到狀態回報",
+  "Last send:": "最近傳送：",
+  "Likes": "按讚數",
+  "Link clicks": "連結點擊",
+  "Loading…": "載入中…",
+  "Login - OpenReply": "登入 - OpenReply",
+  "Member": "成員",
+  "Menu": "選單",
+  "Message…": "訊息…",
+  "Mon": "週一",
+  "More actions": "更多操作",
+  "Needs attention": "需要處理",
+  "New Campaign": "新增活動",
+  "New campaign": "新增活動",
+  "Next": "下一頁",
+  "No DM failures or skips.": "目前沒有失敗或略過的私訊。",
+  "No activity yet": "尚無動態",
+  "No campaigns match your search.": "找不到符合搜尋條件的活動。",
+  "No campaigns yet": "尚未建立活動",
+  "No conversations yet.": "尚無對話。",
+  "No failed webhook events.": "目前沒有 Webhook 接收錯誤。",
+  "No heartbeat found": "尚未收到背景處理器的狀態回報",
+  "No image": "無圖片",
+  "No keyword matches yet": "尚無關鍵字符合紀錄",
+  "No keywords": "未設定關鍵字",
+  "No logs found": "尚無符合條件的紀錄",
+  "No match": "未符合條件",
+  "No matched keyword data yet.": "尚無關鍵字統計。",
+  "No messages.": "尚無訊息。",
+  "No operational events recorded.": "目前沒有系統事件。",
+  "No posts found": "找不到貼文",
+  "No posts match “": "找不到符合「",
+  "No sends yet": "尚未傳送",
+  "No snapshots recorded yet.": "尚無追蹤人數紀錄。",
+  "No token refresh failures.": "目前沒有權杖更新錯誤。",
+  "No worker alerts recorded.": "目前沒有背景處理器警示。",
+  "None": "無",
+  "Not attached": "未指定",
+  "Not connected": "尚未連線",
+  "Not permitted": "權限不足",
+  "Now": "剛剛",
+  "One day recorded so far.": "目前已有一天的紀錄。",
+  "One is picked at random each time, so replies don't look identical.": "每次隨機選擇一則，讓回覆內容有所變化。",
+  "Only workspace owners and admins can connect an Instagram account.": "只有工作區擁有者與管理員可以連接 Instagram 帳號。",
+  "Open on Instagram": "在 Instagram 開啟",
+  "OpenReply - Open source Instagram comment-to-DM automation": "OpenReply｜Instagram 留言自動私訊",
+  "Opening message": "開場訊息",
+  "Operational Event Timeline": "系統事件紀錄",
+  "Optional connection provider": "選用的連線服務",
+  "Overview": "帳號總覽",
+  "Owner": "擁有者",
+  "PAUSED": "已暫停",
+  "Paste a CSV with a header row and at least one campaign.": "請貼上包含標題列與至少一筆活動的 CSV。",
+  "Paste a CSV with one row per campaign. Each row opens in the builder prefilled and editable, so you can review it and pick the reel before saving. Required columns are": "貼上 CSV，每一列代表一個活動。匯入後可逐筆檢查、編輯內容並選擇 Reels，再儲存活動。必填欄位為",
+  "Paused": "已暫停",
+  "Paused campaign": "活動已暫停",
+  "Pending": "待處理",
+  "Pending invites": "待接受的邀請",
+  "Pick a post or reel to trigger the campaign.": "請選擇觸發此活動的貼文或 Reels。",
+  "Plan limit": "用量限制",
+  "Play reel preview": "播放 Reels 預覽",
+  "Post": "貼文",
+  "Posts": "貼文",
+  "Powered by OpenReply": "由 OpenReply 提供",
+  "Preview": "預覽",
+  "Previous": "上一頁",
+  "Private replies successfully sent.": "成功傳送的私訊。",
+  "Production Diagnostics": "正式環境診斷",
+  "Public reply under the post": "在貼文下公開回覆",
+  "Queue": "佇列",
+  "Range": "範圍",
+  "Rate limited": "頻率限制",
+  "Reach": "觸及人數",
+  "Read the setup guide": "閱讀設定指南",
+  "Read-only Instagram comment-to-DM campaign report for {name}.": "「{name}」的 Instagram 留言自動私訊成效報表（唯讀）。",
+  "Recent": "最近",
+  "Recent Activity": "最近動態",
+  "Recent Worker Alerts": "最近的背景處理器警示",
+  "Reconnect Instagram": "重新連接 Instagram",
+  "Reconnect your account to grant it — likes and comments are shown in the meantime.": "請重新連線以授予權限，目前仍可查看按讚與留言數。",
+  "Refresh": "重新整理",
+  "Remove": "移除",
+  "Remove Zernio connection": "移除 Zernio 連線",
+  "Remove reply": "移除此回覆",
+  "Remove the Zernio key and this OpenReply webhook? Disconnect its Instagram accounts from OpenReply first.": "確定要移除 Zernio 金鑰與此 OpenReply Webhook 嗎？請先中斷相關 Instagram 帳號的連線。",
+  "Remove {keyword}": "移除 {keyword}",
+  "Repair webhook connection": "修復 Webhook 連線",
+  "Replies that need operational review.": "需要檢查原因的回覆。",
+  "Reply": "回覆",
+  "Report Not Found": "找不到報表",
+  "Resume": "重新啟用",
+  "Review and import": "檢查並匯入",
+  "Revoke": "撤銷",
+  "Row {row} is missing keywords or a message.": "第 {row} 列缺少關鍵字或私訊內容。",
+  "Sat": "週六",
+  "Save API key": "儲存 API 金鑰",
+  "Save changes": "儲存變更",
+  "Save profile and configure webhook": "儲存設定檔並設定 Webhook",
+  "Saved": "收藏次數",
+  "Saved in this browser. Campaign messages stay unchanged.": "在此瀏覽器記住選擇，活動訊息內容不會改變。",
+  "Saving…": "儲存中…",
+  "Search campaigns by name, keyword, or message…": "搜尋活動名稱、關鍵字或訊息…",
+  "Search your posts by caption…": "依貼文內容搜尋…",
+  "Second button label": "第二個按鈕文字",
+  "See": "請參閱",
+  "See activity": "查看紀錄",
+  "Select a conversation to read and reply.": "選擇對話以查看及回覆訊息。",
+  "Select a profile": "選擇設定檔",
+  "Selected": "已選取",
+  "Self-hosted": "自架版本",
+  "Self-hosted — no plan limits.": "自架版本，無方案用量限制。",
+  "Send": "傳送",
+  "Send it": "傳送時間：連結送出",
+  "Send me the link": "傳送連結給我",
+  "Sending…": "傳送中…",
+  "Sends": "傳送次數",
+  "Sent": "已傳送",
+  "Sent replies": "已傳送私訊",
+  "Sent replies and tracked clicks by day.": "每日私訊傳送與連結點擊次數。",
+  "Sent right after the link.": "傳送連結後立即寄出。",
+  "Sent right after they tap through.": "對方點擊後立即傳送。",
+  "Sent you a DM! 📩": "已私訊給你囉！📩",
+  "Sent {minutes} min after the link.": "傳送連結 {minutes} 分鐘後寄出。",
+  "Sent {minutes} min after they tap through.": "對方點擊 {minutes} 分鐘後傳送。",
+  "Set": "請設定",
+  "Settings": "設定",
+  "Shares": "分享次數",
+  "Show": "顯示",
+  "Show chart": "顯示圖表",
+  "Show table": "顯示表格",
+  "Showing {start}–{end} of {total}": "顯示第 {start}–{end} 筆，共 {total} 筆",
+  "Sign in by email, then connect your Instagram professional account.": "使用電子郵件登入，再連接你的 Instagram 專業帳號。",
+  "Sign in to accept": "登入以接受邀請",
+  "Sign in to manage Instagram comment-to-DM campaigns.": "登入以管理 Instagram 留言自動私訊活動。",
+  "Sign in to use the {name} template.": "登入以使用「{name}」範本。",
+  "Sign-in is off on this demo": "示範網站未開放登入",
+  "Signing in here will not send DMs for your Instagram account. OpenReply is self-hosted, so it only works on a deployment you run yourself, with your own Meta app and your own domain.": "在此登入不會替你的 Instagram 帳號傳送私訊。請自行部署 OpenReply，並設定自己的 Meta 應用程式與網域。",
+  "Skip": "略過",
+  "Skip & finish": "略過並結束",
+  "Skipped": "已略過",
+  "Source post": "觸發貼文",
+  "Status": "狀態",
+  "Stop": "暫停",
+  "Sun": "週日",
+  "Supported by": "贊助商",
+  "Team": "團隊成員",
+  "Template selected": "已選擇範本",
+  "That Instagram account is connected to another workspace. Disconnect it there first, or connect a different account.": "此 Instagram 帳號已連接至其他工作區。請先在原工作區中斷連線，或改用另一個帳號。",
+  "The exact link sent": "實際傳送的連結",
+  "The login link was missing or older than 10 minutes. Click Connect Instagram to start a fresh attempt.": "登入連結缺失或已超過 10 分鐘。請點選「連接 Instagram」重新開始。",
+  "Then a follow-up message": "接著傳送後續訊息",
+  "They must follow first": "先要求追蹤帳號",
+  "They will get": "先傳送",
+  "They will get an opening DM": "先傳送開場私訊",
+  "This campaign does not have a tracked link.": "此活動尚未設定追蹤連結。",
+  "This invitation has expired. Ask the workspace owner to resend it.": "此邀請已過期，請聯絡工作區擁有者重新寄送。",
+  "This is the public demo — it doesn’t create real accounts or send DMs. To use OpenReply for real, clone it and run your own instance with your own Meta app and domain.": "這是公開示範網站，不會建立真實帳號或傳送私訊。若要使用 OpenReply，請自行部署，並設定自己的 Meta 應用程式與網域。",
+  "Thu": "週四",
+  "Time": "時間",
+  "Toggle sidebar": "切換側邊選單",
+  "Token Refresh Failures": "權杖更新錯誤",
+  "Token expires": "權杖到期日：",
+  "Top Keywords": "熱門關鍵字",
+  "Tracked Links": "追蹤連結",
+  "Tracked link visits from replies.": "透過回覆中的追蹤連結造訪的次數。",
+  "Tue": "週二",
+  "Type keyword and press Enter...": "輸入關鍵字後按 Enter…",
+  "Unknown error": "未知錯誤",
+  "Unknown member": "未知成員",
+  "Untitled campaign": "未命名活動",
+  "Usage": "使用量",
+  "Use an unrestricted, read-write key with Inbox access. OpenReply registers a webhook for this workspace. The key is encrypted and never shown again.": "請使用具備收件匣存取權、可讀寫且未限制範圍的金鑰。OpenReply 會為此工作區註冊 Webhook，並加密保存金鑰。",
+  "Use commas to separate words": "多個關鍵字請以逗號分隔",
+  "Use in OpenReply": "在 OpenReply 使用",
+  "Use the magic link account for": "請使用以下信箱的登入連結：",
+  "View Instagram post": "查看 Instagram 貼文",
+  "View all comments": "查看全部留言",
+  "View pricing": "查看費用",
+  "Views": "觀看次數",
+  "Views, reach, saved and shares need the insights permission.": "觀看、觸及、收藏與分享數需要洞察報告權限。",
+  "Waiting": "等待中",
+  "Waiting for next reel": "等待下一則 Reels",
+  "We send the link only after they tap the button and Instagram confirms the follow. If it can't be verified, we send it anyway.": "對方點擊按鈕且 Instagram 確認已追蹤後，才傳送連結。若無法驗證追蹤狀態，仍會傳送連結。",
+  "We sent you a secure sign-in link. Open it on this device to continue.": "安全登入連結已寄到你的信箱，請在這台裝置上開啟。若未看到郵件，請檢查垃圾郵件資料夾。",
+  "Webhook Failures": "Webhook 接收錯誤",
+  "Webhook configured. Choose an Instagram account for OpenReply:": "Webhook 已設定，請選擇要在 OpenReply 使用的 Instagram 帳號：",
+  "Webhook pending": "Webhook 尚未就緒",
+  "Webhook ready": "Webhook 已就緒",
+  "Wed": "週三",
+  "When someone comments on": "當有人在以下內容留言",
+  "Work email": "電子郵件",
+  "Worker health": "背景處理器狀態",
+  "Workspace": "工作區",
+  "Workspace invitation": "工作區邀請",
+  "Write a message": "輸入訊息內容",
+  "Write a reply…  (Enter to send, Shift+Enter for a new line)": "輸入回覆…（Enter 傳送，Shift+Enter 換行）",
+  "You declined the permission prompt on Instagram. Start again and accept all requested permissions.": "你未同意 Instagram 的權限要求。請重新連線並允許所需權限。",
+  "You were invited as {role} for {email}.": "已邀請 {email} 以「{role}」身分加入。",
+  "You: ": "你：",
+  "Your next reel": "下一則 Reels",
+  "Your opening DM needs a message and a button label.": "請填寫開場私訊內容與按鈕文字。",
+  "Your opening message…": "輸入開場訊息…",
+  "Zernio API key": "Zernio API 金鑰",
+  "Zernio profile": "Zernio 設定檔",
+  "Zernio, OpenReply sponsor": "Zernio，OpenReply 贊助商",
+  "a DM with a link": "含有連結的私訊",
+  "a follow requirement first": "先要求追蹤帳號",
+  "a follow-up thank-you message": "後續感謝訊息",
+  "a specific post or reel": "指定貼文或 Reels",
+  "a specific word or words": "指定關鍵字",
+  "also reply when someone DMs": "收到私訊時也回覆",
+  "an opening DM": "開場私訊",
+  "and": "與",
+  "and restart the server:": "並重新啟動伺服器：",
+  "any post or reel": "任何貼文或 Reels",
+  "any word": "任何文字",
+  "anything": "任何內容",
+  "clicks": "次點擊",
+  "e.g. YC referral": "例如：留言領取 AI 工具",
+  "failed": "則失敗",
+  "followers": "位追蹤者",
+  "for how to obtain each value. Note that": "了解各項設定值的取得方式。",
+  "from @": "，帳號 @",
+  "i'm following": "我已追蹤",
+  "in the message to insert the tracked link.": "插入追蹤連結。",
+  "inserts the tracked link;": "會插入追蹤連結；",
+  "is a demo instance.": "是示範網站。",
+  "is a demo. OpenReply is self-hosted — signing in here will not send DMs for your account.": "是示範網站。OpenReply 需自行部署，在此登入不會替你的帳號傳送私訊。",
+  "keywords · Press Enter or comma to add": "個關鍵字 · 按 Enter 或逗號新增",
+  "min later": "分鐘後",
+  "minutes after the link": "分鐘後",
+  "more": "更多",
+  "must be a 64-character hex string.": "必須是 64 字元的十六進位字串。",
+  "next post or reel": "下一則貼文或 Reels",
+  "nice!": "想了解！",
+  "not available": "無資料",
+  "over {count} days": "過去 {count} 天",
+  "personalizes it. Max 24 hours, to stay inside Instagram's messaging window.": "會帶入對方帳號名稱。最長延遲 24 小時，以符合 Instagram 的訊息傳送期限。",
+  "personalizes.": "會帶入對方的帳號名稱。",
+  "quick favor before i send your link. i don't make any money from this, it's free. if you want to support me, just don't unfollow after, and star the repo on github if it helps you. tap the button once you're following and i'll send it over": "傳送連結前，請先追蹤我的帳號。這份資源免費提供，如果對你有幫助，也歡迎在 GitHub 給專案一顆星。完成追蹤後，點擊下方按鈕即可收到連結。",
+  "redirects to": "轉址至",
+  "reply to their comments under the post": "同時在貼文下公開回覆留言",
+  "runs": "次觸發",
+  "sent": "則已傳送",
+  "skipped": "則已略過",
+  "that day": "當天變化",
+  "the required environment variables": "必要的環境變數",
+  "their message": "對方的訊息",
+  "there": "朋友",
+  "these environment variables": "以下環境變數",
+  "these words": "這些關鍵字",
+  "your link": "你的連結",
+  "{count} accounts": "{count} 個帳號",
+  "{count} campaign": "{count} 個活動",
+  "{count} campaigns": "{count} 個活動",
+  "{count} clicks": "{count} 次點擊",
+  "{count} connected": "{count} 個已連線",
+  "{count} connected Instagram profile": "已連接 {count} 個 Instagram 帳號",
+  "{count} connected Instagram profiles": "已連接 {count} 個 Instagram 帳號",
+  "{count} connected account": "已連接 {count} 個帳號",
+  "{count} connected accounts": "已連接 {count} 個帳號",
+  "{count} contact": "{count} 位聯絡人",
+  "{count} contacts": "{count} 位聯絡人",
+  "{count} now": "目前 {count} 位",
+  "{count} of {total} campaigns": "顯示 {count} / {total} 個活動",
+  "{count} post": "{count} 則貼文",
+  "{count} posts": "{count} 則貼文",
+  "{count} sent": "{count} 則已傳送",
+  "{name} Campaign Report": "{name} 活動報表",
+  "{type} post": "{type} 貼文",
+  "”": "」",
+  "← Campaigns": "← 返回活動列表"
+}
diff --git a/lib/reports/data.ts b/lib/reports/data.ts
index 5eabe98c8..71b5479f4 100644
--- a/lib/reports/data.ts
+++ b/lib/reports/data.ts
@@ -1,4 +1,5 @@
 import { prisma } from "@/lib/db/client";
+import type { Locale } from "@/lib/i18n";
 import {
   calculateCtr,
   normalizeTopKeywords,
@@ -26,7 +27,7 @@ function getDayWindow(daysAgo: number) {
   return { start, end };
 }
 
-export async function getCampaignReportBySlug(shareSlug: string) {
+export async function getCampaignReportBySlug(shareSlug: string, locale: Locale = "en") {
   const automation = await prisma.automation.findFirst({
     where: {
       reportShareSlug: shareSlug,
@@ -140,7 +141,7 @@ export async function getCampaignReportBySlug(shareSlug: string) {
       ]);
 
       return {
-        date: start.toLocaleDateString("en-US", {
+        date: start.toLocaleDateString(locale, {
           month: "short",
           day: "numeric",
         }),