diff --git a/.changeset/connector-i18n.md b/.changeset/connector-i18n.md
new file mode 100644
index 000000000..f98c1e449
--- /dev/null
+++ b/.changeset/connector-i18n.md
@@ -0,0 +1,12 @@
+---
+"@ckb-ccc/connector": minor
+"@ckb-ccc/connector-react": minor
+---
+
+feat(connector): add localization support
+
+- New `locale` property on `<ccc-connector>` and `ccc.Provider`; English by default, `zh-Hans` built in. The value must be an exact built-in tag; anything else falls back to English.
+- `ccc.connectorLocales` lists the built-in language tags at runtime.
+- Fee rate options are selected by a stable id instead of their display label.
+- Errors raised by the connector itself (camera access, Khie pairing) are translated at render time via `ConnectorError`.
+
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index be2768bdf..b9d3e3c67 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -129,6 +129,18 @@ To help your pull request get accepted, please consider the following:
 - Follow our existing style.
 - Write a good commit message.
 
+### Contributing a connector language
+
+The connector UI (`@ckb-ccc/connector`) ships its translations in `packages/connector/src/i18n/locales/` as a flat key-value map. `en.ts` is the source of truth and `types.ts` documents the naming rules. To add a language:
+
+1. Copy `en.ts` to `<bcp47-tag>.ts` (for example `ja-JP.ts`) and translate every value. Keep `{name}`-style placeholders and leave wallet / chain brand names untranslated.
+2. Register it in `locales/index.ts`; `ConnectorLocale` (`keyof typeof locales`) picks it up automatically. Compilation fails if any key is missing or extra.
+3. Run `pnpm test` in `packages/connector`; the locale test verifies the key set and placeholders match `en`.
+4. Run `pnpm build` and `pnpm lint` in `packages/connector` to make sure it compiles and lints cleanly.
+5. Verify in the app: run `pnpm dev` in `packages/app`, open the dev server in a browser, and check the language dropdown in the header — the new language shows up automatically because the list is built from `ccc.connectorLocales`, which is derived from the `locales` registry. Then select it and walk through the connect, connected, fee rate and Khie pairing dialogs to check for overflow.
+
+To fix a wrong translation, edit the value in the locale file directly; never reuse a key for a different meaning — add a new key instead.
+
 ### Publishing a Canary Release (for maintainers)
 
 Maintainers can publish a canary release to npm by commenting `/canary` on a pull request. This will trigger a workflow that builds and publishes a new version to npm with the `canary` tag.
diff --git a/packages/app/src/app/dropdown.module.css b/packages/app/src/app/dropdown.module.css
new file mode 100644
index 000000000..94edcca64
--- /dev/null
+++ b/packages/app/src/app/dropdown.module.css
@@ -0,0 +1,140 @@
+/* Shares the visual language of the activity console: monospace uppercase
+   labels, hairline borders, gridded dark panel and the mechanical easing. */
+
+.root {
+  position: relative;
+  display: inline-flex;
+}
+
+.trigger {
+  display: flex;
+  min-height: 28px;
+  align-items: center;
+  gap: 6px;
+  padding: 0 9px;
+  border: 1px solid var(--line);
+  color: var(--muted);
+  background: transparent;
+  font:
+    700 10px/1 "Courier New",
+    monospace;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  white-space: nowrap;
+  cursor: pointer;
+  transition:
+    border-color 160ms ease,
+    color 160ms ease;
+}
+
+.trigger:hover,
+.trigger:focus-visible,
+.isOpen .trigger {
+  border-color: var(--signal);
+  color: var(--signal);
+}
+
+.trigger:focus-visible {
+  outline: none;
+}
+
+.trigger svg {
+  width: 14px;
+  height: 14px;
+  flex: 0 0 auto;
+  stroke-width: 2;
+}
+
+.chevron {
+  transition: transform 300ms var(--easing-mechanical);
+}
+
+.isOpen .chevron {
+  transform: rotate(180deg);
+}
+
+.menu {
+  position: absolute;
+  z-index: 30;
+  top: calc(100% + 6px);
+  right: 0;
+  min-width: max(100%, 180px);
+  margin: 0;
+  padding: 6px 0;
+  border: 1px solid var(--line-dark);
+  background-color: rgb(17 24 28 / 98%);
+  background-image:
+    linear-gradient(90deg, rgb(230 238 242 / 2%) 1px, transparent 1px),
+    linear-gradient(rgb(230 238 242 / 2%) 1px, transparent 1px);
+  background-position: center;
+  background-size: 18px 18px;
+  list-style: none;
+  opacity: 0;
+  transform: translateY(-6px);
+  pointer-events: none;
+  transition:
+    opacity 160ms ease,
+    transform 300ms var(--easing-mechanical);
+}
+
+.menu.alignStart {
+  right: auto;
+  left: 0;
+}
+
+.isOpen .menu {
+  opacity: 1;
+  transform: none;
+  pointer-events: auto;
+}
+
+.option {
+  display: grid;
+  min-height: 32px;
+  align-items: center;
+  grid-template-columns: 14px minmax(0, 1fr) auto;
+  gap: 10px;
+  padding: 7px 14px 7px 12px;
+  border-left: 2px solid transparent;
+  color: var(--ink);
+  font:
+    400 11px/1.45 "Courier New",
+    monospace;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.option.isActive {
+  background: rgb(230 238 242 / 3%);
+}
+
+.option.isSelected {
+  border-left-color: var(--signal);
+}
+
+.check {
+  display: grid;
+  width: 14px;
+  height: 14px;
+  place-items: center;
+  color: var(--signal);
+}
+
+.check svg {
+  width: 12px;
+  height: 12px;
+  stroke-width: 2.5;
+}
+
+.optionLabel {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.optionHint {
+  color: var(--muted);
+  font-size: 9px;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
diff --git a/packages/app/src/app/dropdown.tsx b/packages/app/src/app/dropdown.tsx
new file mode 100644
index 000000000..1f0ad6bbf
--- /dev/null
+++ b/packages/app/src/app/dropdown.tsx
@@ -0,0 +1,195 @@
+"use client";
+
+import { Check, ChevronDown } from "lucide-react";
+import {
+  useCallback,
+  useEffect,
+  useId,
+  useRef,
+  useState,
+  type KeyboardEvent,
+  type ReactNode,
+} from "react";
+import styles from "./dropdown.module.css";
+
+export type DropdownOption<T extends string> = {
+  value: T;
+  label: string;
+  /** Small muted text shown at the right of the option, e.g. a code. */
+  hint?: string;
+};
+
+export function Dropdown<T extends string>({
+  align = "end",
+  className,
+  icon,
+  label,
+  onChange,
+  options,
+  value,
+}: {
+  /** Which edge of the trigger the menu aligns to. */
+  align?: "start" | "end";
+  className?: string;
+  /** Optional leading icon rendered inside the trigger. */
+  icon?: ReactNode;
+  /** Accessible name of the control; also used as the tooltip. */
+  label: string;
+  onChange: (value: T) => void;
+  options: readonly DropdownOption<T>[];
+  value: T;
+}) {
+  const id = useId();
+  const rootRef = useRef<HTMLDivElement>(null);
+  const [open, setOpen] = useState(false);
+  const [active, setActive] = useState(() =>
+    Math.max(
+      0,
+      options.findIndex((option) => option.value === value),
+    ),
+  );
+  const selected = options.find((option) => option.value === value);
+
+  const close = useCallback(() => setOpen(false), []);
+  const openMenu = useCallback(() => {
+    setActive(
+      Math.max(
+        0,
+        options.findIndex((option) => option.value === value),
+      ),
+    );
+    setOpen(true);
+  }, [options, value]);
+
+  const select = useCallback(
+    (index: number) => {
+      const option = options[index];
+      if (option && option.value !== value) {
+        onChange(option.value);
+      }
+      close();
+    },
+    [close, onChange, options, value],
+  );
+
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+    const onPointerDown = (event: PointerEvent) => {
+      if (!rootRef.current?.contains(event.target as Node)) {
+        close();
+      }
+    };
+    document.addEventListener("pointerdown", onPointerDown);
+    return () => document.removeEventListener("pointerdown", onPointerDown);
+  }, [close, open]);
+
+  const onKeyDown = (event: KeyboardEvent<HTMLElement>) => {
+    const last = options.length - 1;
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault();
+        if (!open) {
+          openMenu();
+        } else {
+          setActive((index) => Math.min(last, index + 1));
+        }
+        break;
+      case "ArrowUp":
+        event.preventDefault();
+        if (!open) {
+          openMenu();
+        } else {
+          setActive((index) => Math.max(0, index - 1));
+        }
+        break;
+      case "Home":
+        if (open) {
+          event.preventDefault();
+          setActive(0);
+        }
+        break;
+      case "End":
+        if (open) {
+          event.preventDefault();
+          setActive(last);
+        }
+        break;
+      case "Enter":
+      case " ":
+        event.preventDefault();
+        if (open) {
+          select(active);
+        } else {
+          openMenu();
+        }
+        break;
+      case "Escape":
+        if (open) {
+          event.preventDefault();
+          close();
+        }
+        break;
+      case "Tab":
+        close();
+        break;
+    }
+  };
+
+  return (
+    <div
+      className={`${styles.root} ${open ? styles.isOpen : ""} ${className ?? ""}`}
+      ref={rootRef}
+      onKeyDown={onKeyDown}
+    >
+      <button
+        type="button"
+        className={styles.trigger}
+        role="combobox"
+        title={label}
+        aria-label={label}
+        aria-haspopup="listbox"
+        aria-expanded={open}
+        aria-controls={`${id}-listbox`}
+        aria-activedescendant={open ? `${id}-option-${active}` : undefined}
+        onClick={() => (open ? close() : openMenu())}
+      >
+        {icon}
+        <span className={styles.value}>{selected?.label ?? value}</span>
+        <ChevronDown className={styles.chevron} aria-hidden="true" />
+      </button>
+
+      <ul
+        id={`${id}-listbox`}
+        role="listbox"
+        aria-label={label}
+        aria-hidden={!open}
+        className={`${styles.menu} ${align === "start" ? styles.alignStart : ""}`}
+      >
+        {options.map((option, index) => {
+          const isSelected = option.value === value;
+          return (
+            <li
+              key={option.value}
+              id={`${id}-option-${index}`}
+              role="option"
+              aria-selected={isSelected}
+              className={`${styles.option} ${isSelected ? styles.isSelected : ""} ${index === active ? styles.isActive : ""}`}
+              onPointerMove={() => setActive(index)}
+              onClick={() => select(index)}
+            >
+              <span className={styles.check} aria-hidden="true">
+                {isSelected ? <Check /> : null}
+              </span>
+              <span className={styles.optionLabel}>{option.label}</span>
+              {option.hint ? (
+                <span className={styles.optionHint}>{option.hint}</span>
+              ) : null}
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+}
diff --git a/packages/app/src/app/header-links.module.css b/packages/app/src/app/header-links.module.css
index 0dfe29b15..9bd306ac6 100644
--- a/packages/app/src/app/header-links.module.css
+++ b/packages/app/src/app/header-links.module.css
@@ -34,13 +34,3 @@
   fill: currentColor;
   stroke: none;
 }
-
-@media (max-width: 680px) {
-  .root {
-    gap: 1px;
-  }
-
-  .link {
-    width: 25px;
-  }
-}
diff --git a/packages/app/src/app/header-links.tsx b/packages/app/src/app/header-links.tsx
index 6b7935525..c66645093 100644
--- a/packages/app/src/app/header-links.tsx
+++ b/packages/app/src/app/header-links.tsx
@@ -1,7 +1,9 @@
 import type { ccc } from "@ckb-ccc/connector-react";
-import { Droplets, Search, SquareTerminal } from "lucide-react";
+import { Droplets, Languages, Search, SquareTerminal } from "lucide-react";
 import type { ReactNode } from "react";
+import { Dropdown } from "./dropdown";
 import styles from "./header-links.module.css";
+import { CONNECTOR_LOCALES, useConnectorLocale } from "./provider";
 
 export function HeaderLinks({ client }: { client: ccc.Client }) {
   const explorer =
@@ -31,10 +33,30 @@ export function HeaderLinks({ client }: { client: ccc.Client }) {
       <HeaderLink href={explorer} label="CKB Explorer">
         <Search />
       </HeaderLink>
+      <LocaleToggle />
     </nav>
   );
 }
 
+function LocaleToggle() {
+  const { locale, setLocale } = useConnectorLocale();
+
+  return (
+    <Dropdown
+      className={styles.locale}
+      label="Connector language"
+      icon={<Languages aria-hidden="true" />}
+      value={locale}
+      options={CONNECTOR_LOCALES.map(({ value, label }) => ({
+        value,
+        label,
+        hint: value,
+      }))}
+      onChange={setLocale}
+    />
+  );
+}
+
 function HeaderLink({
   children,
   href,
diff --git a/packages/app/src/app/provider.tsx b/packages/app/src/app/provider.tsx
index 321bfc84c..61ce65c99 100644
--- a/packages/app/src/app/provider.tsx
+++ b/packages/app/src/app/provider.tsx
@@ -1,11 +1,54 @@
 "use client";
 
 import { ccc } from "@ckb-ccc/connector-react";
-import { useEffect, useState, type ReactNode } from "react";
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useState,
+  type ReactNode,
+} from "react";
+
+/** Native name of a language tag, e.g. `"zh-Hans"` → `"简体中文"`. */
+function localeDisplayName(locale: ccc.ConnectorLocale): string {
+  try {
+    return (
+      new Intl.DisplayNames([locale], { type: "language" }).of(locale) ?? locale
+    );
+  } catch {
+    return locale;
+  }
+}
+
+/**
+ * Connector languages offered by the header dropdown, read from the
+ * connector's built-in locale list. Contributing a new connector language
+ * (see CONTRIBUTING.md) makes it show up here automatically.
+ */
+export const CONNECTOR_LOCALES: readonly {
+  value: ccc.ConnectorLocale;
+  label: string;
+}[] = ccc.connectorLocales.map((value) => ({
+  value,
+  label: localeDisplayName(value),
+}));
+
+export type AppConnectorLocale = ccc.ConnectorLocale;
+
+const LocaleContext = createContext<{
+  locale: AppConnectorLocale;
+  setLocale: (locale: AppConnectorLocale) => void;
+}>({ locale: "en", setLocale: () => {} });
+
+/** Locale of the connector UI, switchable at runtime from the header. */
+export function useConnectorLocale() {
+  return useContext(LocaleContext);
+}
 
 export function AppProvider({ children }: { children: ReactNode }) {
   const [clientOptions, setClientOptions] =
     useState<{ name: string; client: ccc.Client }[]>();
+  const [locale, setLocale] = useState<AppConnectorLocale>("en");
 
   useEffect(() => {
     const owner = ccc.OwnerAggregated.from([
@@ -30,6 +73,7 @@ export function AppProvider({ children }: { children: ReactNode }) {
     <ccc.Provider
       name="CCC App"
       icon="/logo.svg"
+      locale={locale}
       clientOptions={clientOptions}
       connectorProps={{
         style: {
@@ -50,7 +94,9 @@ export function AppProvider({ children }: { children: ReactNode }) {
         } as React.CSSProperties,
       }}
     >
-      {children}
+      <LocaleContext.Provider value={{ locale, setLocale }}>
+        {children}
+      </LocaleContext.Provider>
     </ccc.Provider>
   );
 }
diff --git a/packages/connector-react/src/hooks/useCcc.tsx b/packages/connector-react/src/hooks/useCcc.tsx
index b918caa5d..10eb105ab 100644
--- a/packages/connector-react/src/hooks/useCcc.tsx
+++ b/packages/connector-react/src/hooks/useCcc.tsx
@@ -71,6 +71,7 @@ export function Provider({
   signersController,
   defaultClient,
   clientOptions,
+  locale,
 }: {
   children: ReactNode;
   connectorProps?: HTMLAttributes<{}>;
@@ -86,6 +87,11 @@ export function Provider({
   signersController?: ccc.SignersController;
   defaultClient?: ccc.Client;
   clientOptions?: { icon?: string; client: ccc.Client; name: string }[];
+  /**
+   * Language of the connector UI, one of `ccc.connectorLocales`, e.g.
+   * `"zh-Hans"`. Defaults to `"en"`. Map app languages to it yourself.
+   */
+  locale?: ccc.ConnectorLocale;
 }) {
   const [ref, setRef] = useState<ccc.WebComponentConnector | null>(null);
   const connectionOwner = useRef<
@@ -195,6 +201,7 @@ export function Provider({
         onClose={close}
         onConnection={onConnection}
         clientOptions={clientOptions}
+        locale={locale}
         {...{
           ...connectorProps,
           style: {
diff --git a/packages/connector/package.json b/packages/connector/package.json
index 6bf7ae436..b38b51cc3 100644
--- a/packages/connector/package.json
+++ b/packages/connector/package.json
@@ -22,6 +22,8 @@
     "./advanced": "./dist/advanced.js"
   },
   "scripts": {
+    "test": "vitest",
+    "test:ci": "vitest run",
     "build": "tsc",
     "lint": "eslint ./src",
     "format": "prettier --write . && eslint --fix ./src"
@@ -35,7 +37,8 @@
     "prettier-plugin-organize-imports": "^4.3.0",
     "@typescript/native": "npm:typescript@^7.0.2",
     "typescript": "npm:@typescript/typescript6@^6.0.2",
-    "typescript-eslint": "^8.61.1"
+    "typescript-eslint": "^8.61.1",
+    "vitest": "^4.1.9"
   },
   "publishConfig": {
     "access": "public"
diff --git a/packages/connector/src/barrel.ts b/packages/connector/src/barrel.ts
index 120a23f07..db140a56a 100644
--- a/packages/connector/src/barrel.ts
+++ b/packages/connector/src/barrel.ts
@@ -1,6 +1,7 @@
 export * from "@ckb-ccc/ccc/barrel";
 export * from "./connector/index.js";
 export * from "./events/external.js";
+export { connectorLocales, type ConnectorLocale } from "./i18n/index.js";
 
 import "./components/index.js";
 import "./scenes/index.js";
diff --git a/packages/connector/src/components/connecting.ts b/packages/connector/src/components/connecting.ts
index 8133cf972..81e71c451 100644
--- a/packages/connector/src/components/connecting.ts
+++ b/packages/connector/src/components/connecting.ts
@@ -1,6 +1,7 @@
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { RETRY_SVG } from "../assets/retry.svg.js";
+import { I18n } from "../i18n/index.js";
 
 @customElement("ccc-connecting")
 export class Connecting extends LitElement {
@@ -10,6 +11,7 @@ export class Connecting extends LitElement {
   @property()
   public icon!: string;
 
+  /** Already formatted for display; see `displayError`. */
   @property()
   public error?: string;
 
@@ -19,10 +21,14 @@ export class Connecting extends LitElement {
   @property({ attribute: false })
   public onRetry?: () => unknown;
 
+  @property({ attribute: false })
+  public i18n = new I18n();
+
   render() {
-    const title = this.error
-      ? `Failed to open ${this.name}`
-      : `Opening ${this.name}...`;
+    const title = this.i18n.t(
+      this.error ? "failedToOpenWallet" : "openingWallet",
+      { name: this.name },
+    );
 
     return html`
       <img
@@ -39,7 +45,7 @@ export class Connecting extends LitElement {
               class="retry"
               @click=${() => this.onRetry?.()}
             >
-              ${RETRY_SVG} Try again
+              ${RETRY_SVG} ${this.i18n.t("tryAgain")}
             </ccc-button-pill>`
           : undefined
       }
diff --git a/packages/connector/src/components/copy-button.ts b/packages/connector/src/components/copy-button.ts
index ce8dc2f7f..04724ec2b 100644
--- a/packages/connector/src/components/copy-button.ts
+++ b/packages/connector/src/components/copy-button.ts
@@ -6,6 +6,12 @@ import { CHECK_SVG } from "../assets/check.svg.js";
 export class CopyButton extends LitElement {
   @property()
   public value?: string;
+  /** `aria-label` of the copy icon. */
+  @property()
+  public copyLabel = "Copy";
+  /** `aria-label` of the copied icon. */
+  @property()
+  public copiedLabel = "Copied";
 
   @state()
   private isCopied = false;
@@ -72,11 +78,16 @@ export class CopyButton extends LitElement {
       <slot></slot>
       ${
         this.isCopied
-          ? html`<span class="check" role="img" aria-label="Copied"
+          ? html`<span class="check" role="img" aria-label=${this.copiedLabel}
               >${CHECK_SVG}</span
             >`
           : html`
-              <svg class="copy" viewBox="0 0 24 24" alt="copy">
+              <svg
+                class="copy"
+                viewBox="0 0 24 24"
+                role="img"
+                aria-label=${this.copyLabel}
+              >
                 <path
                   d="M19 13.5657V6.10526C19 5.49737 18.5091 5 17.9091 5H10.5454C9.94543 5 9.45452 5.49737 9.45452 6.10526V13.5657C9.45452 14.1736 9.94543 14.671 10.5454 14.671H17.9091C18.5091 14.671 19 14.1736 19 13.5657Z"
                 />
diff --git a/packages/connector/src/components/qr-scanner.ts b/packages/connector/src/components/qr-scanner.ts
index 2d013aae6..99f4d1200 100644
--- a/packages/connector/src/components/qr-scanner.ts
+++ b/packages/connector/src/components/qr-scanner.ts
@@ -1,6 +1,7 @@
 import { css, html, LitElement } from "lit";
 import { customElement, query } from "lit/decorators.js";
 import type { QRCamera, QRCanvas } from "qr/dom.js";
+import { ConnectorError } from "../scenes/error.js";
 
 const SCAN_INTERVAL_MS = 100;
 
@@ -35,10 +36,16 @@ export async function createBarcodeDetector(): Promise<
 
 function assertCameraAvailable() {
   if (!window.isSecureContext) {
-    throw new Error("Camera access requires HTTPS or localhost");
+    throw new ConnectorError(
+      "camera-https-required",
+      "Camera access requires HTTPS or localhost",
+    );
   }
   if (!navigator.mediaDevices?.getUserMedia) {
-    throw new Error("Camera access is not supported by this browser");
+    throw new ConnectorError(
+      "camera-not-supported",
+      "Camera access is not supported by this browser",
+    );
   }
 }
 
@@ -142,7 +149,12 @@ export class QrScanner extends LitElement {
   private async start() {
     const video = this.video;
     if (!video) {
-      this.fail(new Error("Camera preview is not available"));
+      this.fail(
+        new ConnectorError(
+          "camera-preview-unavailable",
+          "Camera preview is not available",
+        ),
+      );
       return;
     }
 
diff --git a/packages/connector/src/connector/index.ts b/packages/connector/src/connector/index.ts
index 1535d8818..933027c52 100644
--- a/packages/connector/src/connector/index.ts
+++ b/packages/connector/src/connector/index.ts
@@ -13,6 +13,7 @@ import {
   ConnectedEvent,
   FeeRateSelectedEvent,
 } from "../events/internal.js";
+import { type ConnectorLocale, I18n } from "../i18n/index.js";
 import { SignersController } from "../signers/index.js";
 import { ClientWithFeeRate } from "./client.js";
 
@@ -47,6 +48,15 @@ export class WebComponentConnector extends LitElement {
   /** Default Relay multiaddr shown and used by the Khie connection flow. */
   @property({ attribute: "khie-relay-address" })
   public khieRelayAddress?: string;
+  /**
+   * Language of the UI, one of `connectorLocales`, e.g. `"zh-Hans"`.
+   * Matching is exact; any other value (e.g. from an HTML attribute) falls
+   * back to `"en"`.
+   */
+  @property()
+  public locale?: ConnectorLocale;
+  @state()
+  private i18n = new I18n();
   @property({ attribute: false })
   public signersController = new ccc.SignersController();
   @state()
@@ -124,6 +134,9 @@ export class WebComponentConnector extends LitElement {
   }
 
   willUpdate(changedProperties: PropertyValues): void {
+    if (changedProperties.has("locale")) {
+      this.i18n = new I18n(this.locale);
+    }
     // Named selections are rebuilt by the controller refresh below. Direct
     // connections have no lookup key, so changing Client invalidates them.
     if (
@@ -307,6 +320,7 @@ export class WebComponentConnector extends LitElement {
                     .signer=${this.signer.signer}
                     .feeRate=${feeRate}
                     .clientOptions=${this.clientOptions}
+                    .i18n=${this.i18n}
                     @disconnect=${() =>
                       this.close(() => {
                         this.disconnect();
@@ -321,6 +335,7 @@ export class WebComponentConnector extends LitElement {
                       .appName=${this.appName}
                       .client=${this.client}
                       .defaultRelayAddress=${this.khieRelayAddress}
+                      .i18n=${this.i18n}
                       @back=${() => (this.pairingKhie = false)}
                       @connection=${this.handleKhieConnected}
                     ></ccc-khie-connect-scene>
@@ -329,6 +344,7 @@ export class WebComponentConnector extends LitElement {
                     <ccc-selecting-scene
                       .hideKhie=${this.hideKhie}
                       .wallets=${this.signersControllerInner.wallets}
+                      .i18n=${this.i18n}
                       @select-khie=${() => (this.pairingKhie = true)}
                       @connected=${this.handleConnected}
                     ></ccc-selecting-scene>
diff --git a/packages/connector/src/i18n/index.test.ts b/packages/connector/src/i18n/index.test.ts
new file mode 100644
index 000000000..1e6dad193
--- /dev/null
+++ b/packages/connector/src/i18n/index.test.ts
@@ -0,0 +1,120 @@
+import { describe, expect, it } from "vitest";
+import {
+  connectorLocales,
+  I18n,
+  interpolate,
+  locales,
+  resolveConnectorLocale,
+} from "./index.js";
+import type { MessageKey } from "./types.js";
+
+const messageKeys = Object.keys(locales.en) as MessageKey[];
+
+describe("locales", () => {
+  it("connectorLocales lists every built-in locale in registration order", () => {
+    expect(connectorLocales).toEqual(Object.keys(locales));
+    expect(Object.isFrozen(connectorLocales)).toBe(true);
+  });
+
+  it("every built-in locale has exactly the keys of en", () => {
+    const expected = [...messageKeys].sort();
+    for (const [name, messages] of Object.entries(locales)) {
+      expect(Object.keys(messages).sort(), name).toEqual(expected);
+    }
+  });
+
+  it("no built-in locale has an empty message", () => {
+    for (const [name, messages] of Object.entries(locales)) {
+      for (const key of messageKeys) {
+        expect(messages[key], `${name}:${key}`).not.toBe("");
+      }
+    }
+  });
+
+  it("every locale keeps the placeholders of en", () => {
+    const placeholders = (text: string) =>
+      (text.match(/\{\w+\}/g) ?? []).sort();
+    for (const [name, messages] of Object.entries(locales)) {
+      for (const key of messageKeys) {
+        expect(placeholders(messages[key]), `${name}:${key}`).toEqual(
+          placeholders(locales.en[key]),
+        );
+      }
+    }
+  });
+
+  it("every locale has exactly one {link} in khieHelp", () => {
+    for (const [name, messages] of Object.entries(locales)) {
+      expect(messages.khieHelp.split("{link}").length, name).toBe(2);
+    }
+  });
+
+  it("every registry key is a canonical BCP 47 tag", () => {
+    for (const key of Object.keys(locales)) {
+      expect(Intl.getCanonicalLocales(key)[0], key).toBe(key);
+    }
+  });
+
+  it("includes English, the final fallback", () => {
+    expect(Object.keys(locales)).toContain("en");
+  });
+});
+
+describe("resolveConnectorLocale", () => {
+  it("returns every built-in tag as is", () => {
+    for (const locale of connectorLocales) {
+      expect(resolveConnectorLocale(locale)).toBe(locale);
+    }
+  });
+
+  it("falls back to English for anything that is not an exact built-in tag", () => {
+    expect(resolveConnectorLocale("zh-hans")).toBe("en");
+    expect(resolveConnectorLocale("zh-CN")).toBe("en");
+    expect(resolveConnectorLocale("zh")).toBe("en");
+    expect(resolveConnectorLocale("en-US")).toBe("en");
+    expect(resolveConnectorLocale("")).toBe("en");
+    expect(resolveConnectorLocale(null)).toBe("en");
+    expect(resolveConnectorLocale(undefined)).toBe("en");
+  });
+});
+
+describe("interpolate", () => {
+  it("replaces known placeholders and keeps unknown ones", () => {
+    expect(interpolate("Opening {name}... {other}", { name: "JoyID" })).toBe(
+      "Opening JoyID... {other}",
+    );
+    expect(interpolate("{n} items", { n: 3 })).toBe("3 items");
+  });
+
+  it("ignores inherited properties such as {toString}", () => {
+    expect(interpolate("{toString}", {})).toBe("{toString}");
+  });
+});
+
+describe("I18n", () => {
+  it("defaults to English", () => {
+    const i18n = new I18n();
+    expect(i18n.locale).toBe("en");
+    expect(i18n.messages).toBe(locales.en);
+    expect(i18n.t("connectWallet")).toBe("Connect Wallet");
+  });
+
+  it("treats null like no locale", () => {
+    expect(new I18n(null).locale).toBe("en");
+  });
+
+  it("switches locale", () => {
+    expect(new I18n("zh-Hans").t("connectWallet")).toBe("连接钱包");
+  });
+
+  it("uses English for unknown tags", () => {
+    expect(new I18n("zh-CN").locale).toBe("en");
+    expect(new I18n("zh-CN").t("connectWallet")).toBe("Connect Wallet");
+  });
+
+  it("interpolates variables", () => {
+    expect(new I18n().t("openingWallet", { name: "JoyID" })).toBe(
+      "Opening JoyID...",
+    );
+  });
+});
diff --git a/packages/connector/src/i18n/index.ts b/packages/connector/src/i18n/index.ts
new file mode 100644
index 000000000..87b599730
--- /dev/null
+++ b/packages/connector/src/i18n/index.ts
@@ -0,0 +1,39 @@
+import { resolveConnectorLocale, type ConnectorLocale } from "./locale.js";
+import { locales } from "./locales/index.js";
+import type { ConnectorMessages, MessageKey } from "./types.js";
+
+// Package-internal entry. The public barrel re-exports the types only.
+export {
+  connectorLocales,
+  resolveConnectorLocale,
+  type ConnectorLocale,
+} from "./locale.js";
+export { locales } from "./locales/index.js";
+export type { ConnectorMessages, MessageKey } from "./types.js";
+
+/** Replaces `{name}` placeholders. Unknown placeholders are left untouched. */
+export function interpolate(
+  template: string,
+  vars: Record<string, string | number>,
+): string {
+  return template.replace(/\{(\w+)\}/g, (match, name: string) =>
+    Object.hasOwn(vars, name) ? String(vars[name]) : match,
+  );
+}
+
+/** Resolved messages for one connector instance. */
+export class I18n {
+  /** The built-in locale actually in use (already resolved). */
+  readonly locale: ConnectorLocale;
+  readonly messages: ConnectorMessages;
+
+  constructor(locale?: string | null) {
+    this.locale = resolveConnectorLocale(locale);
+    this.messages = locales[this.locale];
+  }
+
+  t(key: MessageKey, vars?: Record<string, string | number>): string {
+    const template = this.messages[key];
+    return vars ? interpolate(template, vars) : template;
+  }
+}
diff --git a/packages/connector/src/i18n/locale.ts b/packages/connector/src/i18n/locale.ts
new file mode 100644
index 000000000..556779b77
--- /dev/null
+++ b/packages/connector/src/i18n/locale.ts
@@ -0,0 +1,19 @@
+import { locales } from "./locales/index.js";
+
+/** Language tags the connector ships translations for. */
+export type ConnectorLocale = keyof typeof locales;
+
+/** Language tags the connector ships translations for, in registration order. */
+export const connectorLocales: readonly ConnectorLocale[] = Object.freeze(
+  Object.keys(locales) as ConnectorLocale[],
+);
+
+/**
+ * Returns `locale` if it is exactly a built-in tag, otherwise English.
+ * Mapping app languages (e.g. `zh-CN`) to a built-in tag is up to the app.
+ */
+export function resolveConnectorLocale(
+  locale: string | null | undefined,
+): ConnectorLocale {
+  return connectorLocales.find((key) => key === locale) ?? "en";
+}
diff --git a/packages/connector/src/i18n/locales/en.ts b/packages/connector/src/i18n/locales/en.ts
new file mode 100644
index 000000000..7b0cb33ed
--- /dev/null
+++ b/packages/connector/src/i18n/locales/en.ts
@@ -0,0 +1,73 @@
+import type { ConnectorMessages } from "../types.js";
+
+/** Source of truth. Every other locale must have exactly the same keys. */
+export const en: ConnectorMessages = {
+  // Common actions / states
+  connect: "Connect",
+  disconnect: "Disconnect",
+  connecting: "Connecting...",
+  reconnect: "Reconnect",
+  tryAgain: "Try again",
+  manage: "Manage",
+  copy: "Copy",
+  copied: "Copied",
+  or: "or",
+  advancedSettings: "Advanced settings",
+  poweredBy: "Powered by CCC",
+
+  // Wallet / chain / network
+  connectWallet: "Connect Wallet",
+  selectChain: "Select a Chain",
+  selectNetwork: "Select Network",
+  mainnet: "Mainnet",
+  testnet: "Testnet",
+  confirmInWallet: "Confirm connection in the wallet",
+  openingWallet: "Opening {name}...",
+  failedToOpenWallet: "Failed to open {name}",
+
+  // Fee rate
+  feeRate: "Fee Rate",
+  selectFeeRate: "Select Fee Rate",
+  feeRateHint: "Fee rate is measured in shannons per 1,000 bytes.",
+  feeRateAuto: "Auto",
+  feeRateEconomy: "Economy",
+  feeRateCustom: "Custom",
+  feeRateEconomyHint: "Lower cost, confirmation may take longer",
+  feeRateAutoHint: "Based on recent network activity",
+  feeRateLoading: "Loading network fee rate...",
+  feeRateUnit: "shannons/KB",
+
+  // Khie pairing
+  khieConnectWallet: "Connect a Wallet via Khie",
+  khieLoading: "Loading Khie...",
+  khieEstablishingConnection: "Establishing secure connection...",
+  khieApproveInWallet: "Approve the connection in Khie to continue",
+  khieLetWalletScan: "Let a wallet scan this",
+  khiePairingCode: "Pairing QR code",
+  khieCopyPairingCode: "Tap to copy pairing code",
+  khieOpenWallet: "Open Wallet",
+  khieOpenWalletHint:
+    "If the wallet app doesn't open, install a wallet that supports Khie or pair manually.",
+  khieConnectingRelay: "Connecting relay...",
+  khieScanWalletCode: "Scan wallet code",
+  khieWalletPairingCode: "Wallet pairing code",
+  khiePastePairingCode: "Or paste pairing code",
+  khieHelp:
+    "Khie is a peer-to-peer protocol that connects wallets and applications. {link}, where you can also connect a local wallet from the device where it is available.",
+  khieHelpLink: "Learn more about Khie here",
+  khieRelayMultiaddr: "Relay multiaddr",
+  khieConnectRelay: "Connect relay",
+  khieIncompatiblePairingCode: "This is not a compatible Khie pairing code",
+  khieIncompatiblePairingCodeHint: "Scan a pairing code from a wallet.",
+  khieLearnMore: "Go here to learn more.",
+
+  // Errors raised by the connector itself
+  errorUnknownConnectionStatus: "Unknown connection status",
+  errorUnknownBrowser: "Unknown browser error",
+  errorKhieWalletUnpaired: "The wallet unpaired. Go back and pair again.",
+  errorKhieSignerNotConnected: "Khie signer did not connect",
+  errorKhieScanFailed: "Unable to scan pairing code: {error}",
+  errorCameraRequiresSecureContext: "Camera access requires HTTPS or localhost",
+  errorCameraNotSupported: "Camera access is not supported by this browser",
+  errorCameraPreviewUnavailable: "Camera preview is not available",
+};
diff --git a/packages/connector/src/i18n/locales/index.ts b/packages/connector/src/i18n/locales/index.ts
new file mode 100644
index 000000000..1e5bd7b23
--- /dev/null
+++ b/packages/connector/src/i18n/locales/index.ts
@@ -0,0 +1,12 @@
+import type { ConnectorMessages } from "../types.js";
+import { en } from "./en.js";
+import { zhHans } from "./zh-Hans.js";
+
+/**
+ * Built-in locales, keyed by BCP 47 tag. To add one, copy `en.ts`, then
+ * register it here: `ConnectorLocale` updates automatically.
+ */
+export const locales = {
+  en,
+  "zh-Hans": zhHans,
+} satisfies Record<string, ConnectorMessages>;
diff --git a/packages/connector/src/i18n/locales/zh-Hans.ts b/packages/connector/src/i18n/locales/zh-Hans.ts
new file mode 100644
index 000000000..d33826627
--- /dev/null
+++ b/packages/connector/src/i18n/locales/zh-Hans.ts
@@ -0,0 +1,72 @@
+import type { ConnectorMessages } from "../types.js";
+
+export const zhHans: ConnectorMessages = {
+  // Common actions / states
+  connect: "连接",
+  disconnect: "断开连接",
+  connecting: "正在连接...",
+  reconnect: "重新连接",
+  tryAgain: "重试",
+  manage: "管理",
+  copy: "复制",
+  copied: "已复制",
+  or: "或",
+  advancedSettings: "高级设置",
+  poweredBy: "Powered by CCC",
+
+  // Wallet / chain / network
+  connectWallet: "连接钱包",
+  selectChain: "选择链",
+  selectNetwork: "选择网络",
+  mainnet: "主网",
+  testnet: "测试网",
+  confirmInWallet: "请在钱包中确认连接",
+  openingWallet: "正在打开 {name}...",
+  failedToOpenWallet: "打开 {name} 失败",
+
+  // Fee rate
+  feeRate: "费率",
+  selectFeeRate: "选择费率",
+  feeRateHint: "费率单位为每 1,000 字节所需的 shannon 数。",
+  feeRateAuto: "自动",
+  feeRateEconomy: "经济",
+  feeRateCustom: "自定义",
+  feeRateEconomyHint: "费用更低，可能需要更长时间方可上链",
+  feeRateAutoHint: "基于近期网络的交易情况",
+  feeRateLoading: "正在加载网络费率...",
+  feeRateUnit: "shannons/KB",
+
+  // Khie pairing
+  khieConnectWallet: "通过 Khie 连接钱包",
+  khieLoading: "正在加载 Khie...",
+  khieEstablishingConnection: "正在建立安全连接...",
+  khieApproveInWallet: "请在 Khie 中确认连接",
+  khieLetWalletScan: "让钱包扫描此码",
+  khiePairingCode: "配对码",
+  khieCopyPairingCode: "点击复制配对码",
+  khieOpenWallet: "打开钱包",
+  khieOpenWalletHint:
+    "如果钱包应用没有打开，请安装支持 Khie 的钱包，或手动配对。",
+  khieConnectingRelay: "正在连接中继...",
+  khieScanWalletCode: "扫描钱包配对码",
+  khieWalletPairingCode: "钱包配对码",
+  khiePastePairingCode: "或粘贴配对码",
+  khieHelp:
+    "Khie 是一个连接钱包与应用的点对点协议。{link}，你也可以在钱包所在的设备上直接连接本地钱包。",
+  khieHelpLink: "点击此处了解更多",
+  khieRelayMultiaddr: "中继地址（Multiaddr 格式）",
+  khieConnectRelay: "连接中继",
+  khieIncompatiblePairingCode: "这不是兼容的 Khie 配对码",
+  khieIncompatiblePairingCodeHint: "请扫描来自钱包的配对码。",
+  khieLearnMore: "点击此处了解更多。",
+
+  // Errors raised by the connector itself
+  errorUnknownConnectionStatus: "未知的连接状态",
+  errorUnknownBrowser: "未知的浏览器错误",
+  errorKhieWalletUnpaired: "钱包已取消配对，请返回并重新配对。",
+  errorKhieSignerNotConnected: "Khie 签名器未能连接",
+  errorKhieScanFailed: "无法扫描配对码：{error}",
+  errorCameraRequiresSecureContext: "访问摄像头需要 HTTPS 或 localhost",
+  errorCameraNotSupported: "当前浏览器不支持访问摄像头",
+  errorCameraPreviewUnavailable: "摄像头预览不可用",
+};
diff --git a/packages/connector/src/i18n/types.ts b/packages/connector/src/i18n/types.ts
new file mode 100644
index 000000000..4a7ea5522
--- /dev/null
+++ b/packages/connector/src/i18n/types.ts
@@ -0,0 +1,146 @@
+/**
+ * Every user-facing message of the connector UI as a flat key-value map.
+ *
+ * Naming rules:
+ * - A key describes what the text means, never where it is rendered.
+ * - Prefixes are stable domain nouns only (`feeRate`, `khie`, `camera`,
+ *   `error`), never scene or component names.
+ * - One key per meaning: identical meaning is shared, identical English with
+ *   a different meaning is split.
+ * - Placeholders use single braces (`{name}`) and are documented per key.
+ * - Wallet and chain brand names are never translated.
+ *
+ * `en` is the source of truth; every built-in locale must have exactly the
+ * same keys, which the compiler enforces.
+ */
+export interface ConnectorMessages {
+  // ── Common actions / states ─────────────────────────────────────────────
+  /** → "Connect" */
+  connect: string;
+  /** → "Disconnect" */
+  disconnect: string;
+  /** → "Connecting..." */
+  connecting: string;
+  /** → "Reconnect" */
+  reconnect: string;
+  /** → "Try again" */
+  tryAgain: string;
+  /** → "Manage" */
+  manage: string;
+  /** → "Copy" (screen-reader only) */
+  copy: string;
+  /** → "Copied" (screen-reader only) */
+  copied: string;
+  /** → "or" */
+  or: string;
+  /** → "Advanced settings" */
+  advancedSettings: string;
+  /** → "Powered by CCC" */
+  poweredBy: string;
+
+  // ── Wallet / chain / network ────────────────────────────────────────────
+  /** → "Connect Wallet" */
+  connectWallet: string;
+  /** → "Select a Chain" */
+  selectChain: string;
+  /** → "Select Network" */
+  selectNetwork: string;
+  /** → "Mainnet" */
+  mainnet: string;
+  /** → "Testnet" */
+  testnet: string;
+  /** → "Confirm connection in the wallet" */
+  confirmInWallet: string;
+  /** `{name}` wallet or signer brand name. → "Opening {name}..." */
+  openingWallet: string;
+  /** `{name}` wallet or signer brand name. → "Failed to open {name}" */
+  failedToOpenWallet: string;
+
+  // ── Fee rate ────────────────────────────────────────────────────────────
+  /** → "Fee Rate" */
+  feeRate: string;
+  /** → "Select Fee Rate" */
+  selectFeeRate: string;
+  /** → "Fee rate is measured in shannons per 1,000 bytes." */
+  feeRateHint: string;
+  /** Display label only; selection logic uses `FeeRateOptionId`. → "Auto" */
+  feeRateAuto: string;
+  /** Display label only; selection logic uses `FeeRateOptionId`. → "Economy" */
+  feeRateEconomy: string;
+  /** → "Custom" */
+  feeRateCustom: string;
+  /** → "Lower cost, confirmation may take longer" */
+  feeRateEconomyHint: string;
+  /** → "Based on recent network activity" */
+  feeRateAutoHint: string;
+  /** → "Loading network fee rate..." */
+  feeRateLoading: string;
+  /** → "shannons/KB" */
+  feeRateUnit: string;
+
+  // ── Khie pairing ────────────────────────────────────────────────────────
+  /** → "Connect a Wallet via Khie" */
+  khieConnectWallet: string;
+  /** → "Loading Khie..." */
+  khieLoading: string;
+  /** → "Establishing secure connection..." */
+  khieEstablishingConnection: string;
+  /** → "Approve the connection in Khie to continue" */
+  khieApproveInWallet: string;
+  /** → "Let a wallet scan this" */
+  khieLetWalletScan: string;
+  /** → "Pairing QR code" */
+  khiePairingCode: string;
+  /** → "Copy pairing code" */
+  khieCopyPairingCode: string;
+  /** → "Open Wallet" */
+  khieOpenWallet: string;
+  /** → "If the wallet app doesn't open, install a wallet that supports Khie or pair manually." */
+  khieOpenWalletHint: string;
+  /** → "Connecting relay..." */
+  khieConnectingRelay: string;
+  /** → "Scan wallet code" */
+  khieScanWalletCode: string;
+  /** → "Wallet pairing code" */
+  khieWalletPairingCode: string;
+  /** → "Or paste pairing code" */
+  khiePastePairingCode: string;
+  /**
+   * Help sentence. `{link}` is replaced by the link text (`khieHelpLink`);
+   * keep exactly one `{link}` and move it wherever the target language needs.
+   * → "Khie is a peer-to-peer protocol that connects wallets and applications. {link}, where you can also connect a local wallet from the device where it is available."
+   */
+  khieHelp: string;
+  /** Text of the link inside `khieHelp`. → "Learn more about Khie here" */
+  khieHelpLink: string;
+  /** → "Relay multiaddr" */
+  khieRelayMultiaddr: string;
+  /** → "Connect relay" */
+  khieConnectRelay: string;
+  /** → "This is not a compatible Khie pairing code" */
+  khieIncompatiblePairingCode: string;
+  /** → "Scan a pairing code from a wallet." */
+  khieIncompatiblePairingCodeHint: string;
+  /** → "Go here to learn more." */
+  khieLearnMore: string;
+
+  // ── Errors raised by the connector itself ───────────────────────────────
+  /** → "Unknown connection status" */
+  errorUnknownConnectionStatus: string;
+  /** → "Unknown browser error" */
+  errorUnknownBrowser: string;
+  /** → "The wallet unpaired. Go back and pair again." */
+  errorKhieWalletUnpaired: string;
+  /** → "Khie signer did not connect" */
+  errorKhieSignerNotConnected: string;
+  /** `{error}` underlying error text. → "Unable to scan pairing code: {error}" */
+  errorKhieScanFailed: string;
+  /** → "Camera access requires HTTPS or localhost" */
+  errorCameraRequiresSecureContext: string;
+  /** → "Camera access is not supported by this browser" */
+  errorCameraNotSupported: string;
+  /** → "Camera preview is not available" */
+  errorCameraPreviewUnavailable: string;
+}
+
+export type MessageKey = keyof ConnectorMessages;
diff --git a/packages/connector/src/scenes/connected.ts b/packages/connector/src/scenes/connected.ts
index 68da8d615..29266f608 100644
--- a/packages/connector/src/scenes/connected.ts
+++ b/packages/connector/src/scenes/connected.ts
@@ -8,6 +8,7 @@ import { FEE_SVG } from "../assets/fee.svg.js";
 import { SWAP_SVG } from "../assets/swap.svg.js";
 import { USER_SVG } from "../assets/user.svg.js";
 import { SelectClientEvent } from "../events/external.js";
+import { I18n } from "../i18n/index.js";
 import { signerTypeToIcon } from "./selecting/signers.js";
 
 export function formatString(
@@ -33,6 +34,8 @@ export class ConnectedScene extends LitElement {
   public feeRate?: ccc.Num;
   @property()
   public clientOptions?: { icon?: string; client: ccc.Client; name: string }[];
+  @property({ attribute: false })
+  public i18n = new I18n();
 
   @state()
   private recommendedAddress?: string;
@@ -116,6 +119,7 @@ export class ConnectedScene extends LitElement {
     if (!wallet || !signer) {
       return html`<div></div>`;
     }
+    const t: I18n["t"] = (key, vars) => this.i18n.t(key, vars);
 
     const body = (() => {
       if (this.selectingFeeRate) {
@@ -123,6 +127,7 @@ export class ConnectedScene extends LitElement {
           <ccc-fee-rate-scene
             .client=${signer.client}
             .feeRate=${this.feeRate}
+            .i18n=${this.i18n}
           ></ccc-fee-rate-scene>
         `;
       }
@@ -144,7 +149,9 @@ export class ConnectedScene extends LitElement {
           </div>
 
           <ccc-copy-button
-            value=${recommendedAddress}
+            .value=${recommendedAddress}
+            .copyLabel=${t("copy")}
+            .copiedLabel=${t("copied")}
             class="address-copy text-bold fs-xl mt-2"
           >
             ${formatString(recommendedAddress)}
@@ -153,7 +160,9 @@ export class ConnectedScene extends LitElement {
             ${ccc.fixedPointToString(balance ?? ccc.Zero)} CKB
           </div>
           <ccc-copy-button
-            value=${internalAddress}
+            .value=${internalAddress}
+            .copyLabel=${t("copy")}
+            .copiedLabel=${t("copied")}
             class="address-copy text-bold text-tip fs-md"
             style="margin-top: 0.5rem"
           >
@@ -165,12 +174,12 @@ export class ConnectedScene extends LitElement {
             @click=${() => (this.selectingFeeRate = true)}
           >
             ${FEE_SVG}
-            <span>Fee Rate</span>
+            <span>${t("feeRate")}</span>
             <span class="fee-rate-value">
               ${
                 this.feeRate == null
-                  ? "Auto"
-                  : `${this.feeRate.toString()} shannons/KB`
+                  ? t("feeRateAuto")
+                  : `${this.feeRate.toString()} ${t("feeRateUnit")}`
               }
             </span>
           </ccc-button>
@@ -179,20 +188,20 @@ export class ConnectedScene extends LitElement {
             class="mt-1"
             @click=${() => window.open("https://nervdao.com/", "_blank")}
           >
-            ${USER_SVG} Manage
+            ${USER_SVG} ${t("manage")}
           </ccc-button>
 
           <ccc-button
             class="mt-1"
             @click=${() => this.dispatchEvent(new Event("disconnect"))}
           >
-            ${DISCONNECT_SVG} Disconnect
+            ${DISCONNECT_SVG} ${t("disconnect")}
           </ccc-button>
 
           ${
             this.hideMark == null
               ? html`<a href="https://github.com/ckb-devrel/ccc" class="mark"
-                  >Powered by CCC</a
+                  >${t("poweredBy")}</a
                 >`
               : ""
           }
@@ -206,7 +215,11 @@ export class ConnectedScene extends LitElement {
             <div class="switch-line"></div>
             <div class="switch-content ml-2 mr-2 fs-sm">
               <img class="sm-chain-logo" src=${CKB_SVG} alt="Nervos Network" />
-              ${signer.client.addressPrefix === "ckb" ? "Mainnet" : "Testnet"}
+              ${
+                signer.client.addressPrefix === "ckb"
+                  ? t("mainnet")
+                  : t("testnet")
+              }
               ${
                 ["ckb", "ckt"].includes(signer.client.addressPrefix)
                   ? ""
@@ -238,9 +251,9 @@ export class ConnectedScene extends LitElement {
       <ccc-dialog
         header=${
           this.selectingFeeRate
-            ? "Select Fee Rate"
+            ? t("selectFeeRate")
             : this.selectingClient
-              ? "Select Network"
+              ? t("selectNetwork")
               : undefined
         }
         ?canBack=${this.selectingFeeRate || this.selectingClient}
diff --git a/packages/connector/src/scenes/error.test.ts b/packages/connector/src/scenes/error.test.ts
new file mode 100644
index 000000000..cfa47e967
--- /dev/null
+++ b/packages/connector/src/scenes/error.test.ts
@@ -0,0 +1,75 @@
+import { describe, expect, it, vi } from "vitest";
+import { I18n, locales } from "../i18n/index.js";
+import { ConnectorError, displayError, errorMessage } from "./error.js";
+
+describe("ConnectorError", () => {
+  it("keeps the English message for logs", () => {
+    const error = new ConnectorError(
+      "camera-https-required",
+      "Camera access requires HTTPS or localhost",
+    );
+    expect(errorMessage(error)).toBe(
+      "Camera access requires HTTPS or localhost",
+    );
+  });
+
+  it("is translated from its kind when displayed", () => {
+    const error = new ConnectorError(
+      "peer-unpaired",
+      "The wallet unpaired. Go back and pair again.",
+    );
+    expect(displayError(error, new I18n())).toBe(
+      locales.en.errorKhieWalletUnpaired,
+    );
+    expect(displayError(error, new I18n("zh-Hans"))).toBe(
+      locales["zh-Hans"].errorKhieWalletUnpaired,
+    );
+  });
+
+  it("interpolates the nested cause", () => {
+    const error = new ConnectorError("scan-failed", "Unable to scan", {
+      cause: new Error("NotAllowedError"),
+    });
+    expect(displayError(error, new I18n())).toBe(
+      "Unable to scan pairing code: NotAllowedError",
+    );
+    expect(displayError(error, new I18n("zh-Hans"))).toBe(
+      "无法扫描配对码：NotAllowedError",
+    );
+  });
+
+  it("unwraps ErrorEvent", () => {
+    class FakeErrorEvent extends Event {
+      constructor(public readonly error: unknown) {
+        super("error");
+      }
+    }
+    vi.stubGlobal("ErrorEvent", FakeErrorEvent);
+    try {
+      const error = new ConnectorError("camera-not-supported", "x");
+      expect(displayError(new FakeErrorEvent(error), new I18n())).toBe(
+        locales.en.errorCameraNotSupported,
+      );
+    } finally {
+      vi.unstubAllGlobals();
+    }
+  });
+});
+
+describe("displayError", () => {
+  it("shows third-party errors as-is", () => {
+    expect(displayError(new Error("User rejected"), new I18n("zh-Hans"))).toBe(
+      "User rejected",
+    );
+    expect(displayError("plain string", new I18n("zh-Hans"))).toBe(
+      "plain string",
+    );
+  });
+
+  it("translates the unknown-error fallback", () => {
+    expect(displayError({}, new I18n())).toBe("Unknown browser error");
+    expect(displayError({}, new I18n("zh-Hans"))).toBe(
+      locales["zh-Hans"].errorUnknownBrowser,
+    );
+  });
+});
diff --git a/packages/connector/src/scenes/error.ts b/packages/connector/src/scenes/error.ts
index 480aaafc0..c5643dce7 100644
--- a/packages/connector/src/scenes/error.ts
+++ b/packages/connector/src/scenes/error.ts
@@ -1,4 +1,49 @@
-export function errorMessage(cause: unknown): string {
+import type { I18n, MessageKey } from "../i18n/index.js";
+
+export type ConnectorErrorKind =
+  | "unknown-connection-status"
+  | "peer-unpaired"
+  | "signer-not-connected"
+  | "camera-https-required"
+  | "camera-not-supported"
+  | "camera-preview-unavailable"
+  | "scan-failed";
+
+const CONNECTOR_ERROR_MESSAGE_KEYS = {
+  "unknown-connection-status": "errorUnknownConnectionStatus",
+  "peer-unpaired": "errorKhieWalletUnpaired",
+  "signer-not-connected": "errorKhieSignerNotConnected",
+  "camera-https-required": "errorCameraRequiresSecureContext",
+  "camera-not-supported": "errorCameraNotSupported",
+  "camera-preview-unavailable": "errorCameraPreviewUnavailable",
+  "scan-failed": "errorKhieScanFailed",
+} as const satisfies Record<ConnectorErrorKind, MessageKey>;
+
+/**
+ * An error raised by the connector itself that is shown to the user.
+ *
+ * `message` stays English so logs and non-UI consumers keep working; the UI
+ * translates from `kind` at render time so it follows locale switches.
+ */
+export class ConnectorError extends Error {
+  constructor(
+    public readonly kind: ConnectorErrorKind,
+    message: string,
+    options?: ErrorOptions,
+  ) {
+    super(message, options);
+    this.name = "ConnectorError";
+  }
+}
+
+export function errorMessage(
+  cause: unknown,
+  fallback = "Unknown browser error",
+): string {
+  if (cause instanceof ConnectorError) {
+    return cause.message;
+  }
+
   if (cause instanceof Error) {
     const message = cause.message || cause.name;
     return cause.name && cause.name !== "Error"
@@ -15,7 +60,7 @@ export function errorMessage(cause: unknown): string {
     cause instanceof ErrorEvent &&
     cause.error !== undefined
   ) {
-    return errorMessage(cause.error);
+    return errorMessage(cause.error, fallback);
   }
 
   if (typeof cause === "object" && cause !== null) {
@@ -40,7 +85,27 @@ export function errorMessage(cause: unknown): string {
   }
 
   const message = String(cause);
-  return message && message !== "[object Object]"
-    ? message
-    : "Unknown browser error";
+  return message && message !== "[object Object]" ? message : fallback;
+}
+
+/**
+ * Message to display for an error. Connector errors are translated; errors
+ * from wallet extensions and other third parties are shown as-is.
+ */
+export function displayError(cause: unknown, i18n: I18n): string {
+  if (cause instanceof ConnectorError) {
+    return i18n.t(CONNECTOR_ERROR_MESSAGE_KEYS[cause.kind], {
+      error: cause.cause === undefined ? "" : displayError(cause.cause, i18n),
+    });
+  }
+
+  if (
+    typeof ErrorEvent !== "undefined" &&
+    cause instanceof ErrorEvent &&
+    cause.error !== undefined
+  ) {
+    return displayError(cause.error, i18n);
+  }
+
+  return errorMessage(cause, i18n.t("errorUnknownBrowser"));
 }
diff --git a/packages/connector/src/scenes/fee-rate.test.ts b/packages/connector/src/scenes/fee-rate.test.ts
new file mode 100644
index 000000000..846bb9fa6
--- /dev/null
+++ b/packages/connector/src/scenes/fee-rate.test.ts
@@ -0,0 +1,50 @@
+import { describe, expect, it } from "vitest";
+import { FeeRateSelectedEvent } from "../events/internal.js";
+import { I18n } from "../i18n/index.js";
+import { FeeRateOptionId, FeeRateScene } from "./fee-rate.js";
+
+type FeeRateSceneInternals = Pick<
+  FeeRateScene,
+  "feeRate" | "i18n" | "addEventListener"
+> & {
+  options: { id: FeeRateOptionId; label: string }[];
+  selectedOptionId: FeeRateOptionId | undefined;
+  selectOption(id: FeeRateOptionId, feeRate: bigint): void;
+  recommendedFeeRate?: bigint;
+};
+
+function createScene(locale = "en") {
+  const scene = new FeeRateScene() as unknown as FeeRateSceneInternals;
+  scene.i18n = new I18n(locale);
+  return scene;
+}
+
+describe("FeeRateScene", () => {
+  it("derives the selected option from the fee rate, not the label", () => {
+    const scene = createScene("zh-Hans");
+    scene.recommendedFeeRate = 1234n;
+
+    expect(scene.options.map(({ id }) => id)).toEqual(["economy", "auto"]);
+    expect(scene.options.map(({ label }) => label)).toEqual(["经济", "自动"]);
+
+    scene.feeRate = undefined;
+    expect(scene.selectedOptionId).toBe("auto");
+    scene.feeRate = 1000n;
+    expect(scene.selectedOptionId).toBe("economy");
+    scene.feeRate = 5000n;
+    expect(scene.selectedOptionId).toBeUndefined();
+  });
+
+  it("dispatches an undefined fee rate for the auto option in any locale", () => {
+    const scene = createScene("zh-Hans");
+    const received: (bigint | undefined)[] = [];
+    scene.addEventListener("fee-rate-selected", (event) => {
+      received.push((event as FeeRateSelectedEvent).feeRate);
+    });
+
+    scene.selectOption("auto", 1234n);
+    scene.selectOption("economy", 1000n);
+
+    expect(received).toEqual([undefined, 1000n]);
+  });
+});
diff --git a/packages/connector/src/scenes/fee-rate.ts b/packages/connector/src/scenes/fee-rate.ts
index 9a2b6bc57..89728f1fb 100644
--- a/packages/connector/src/scenes/fee-rate.ts
+++ b/packages/connector/src/scenes/fee-rate.ts
@@ -2,8 +2,13 @@ import { ccc } from "@ckb-ccc/ccc";
 import { css, html, LitElement, PropertyValues } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { FeeRateSelectedEvent } from "../events/internal.js";
+import { I18n } from "../i18n/index.js";
+
+/** Stable identifier used for selection logic; never compare on `label`. */
+export type FeeRateOptionId = "auto" | "economy";
 
 type FeeRateOption = {
+  id: FeeRateOptionId;
   description: string;
   feeRate?: ccc.Num;
   label: string;
@@ -22,6 +27,9 @@ export class FeeRateScene extends LitElement {
   @property({ attribute: false })
   public feeRate?: ccc.NumLike;
 
+  @property({ attribute: false })
+  public i18n = new I18n();
+
   @state()
   private recommendedFeeRate?: ccc.Num;
   @state()
@@ -67,23 +75,28 @@ export class FeeRateScene extends LitElement {
   }
 
   private get options(): FeeRateOption[] {
+    const { t } = this;
     return [
       {
-        label: "Economy",
-        description: "Lower cost, confirmation may take longer",
+        id: "economy",
+        label: t("feeRateEconomy"),
+        description: t("feeRateEconomyHint"),
         feeRate: MIN_FEE_RATE,
       },
       {
-        label: "Auto",
+        id: "auto",
+        label: t("feeRateAuto"),
         description:
           this.recommendedFeeRate == null
-            ? "Loading network fee rate..."
-            : "Based on recent network activity",
+            ? t("feeRateLoading")
+            : t("feeRateAutoHint"),
         feeRate: this.recommendedFeeRate,
       },
     ];
   }
 
+  private t: I18n["t"] = (key, vars) => this.i18n.t(key, vars);
+
   private selectCustomFeeRate(value: string) {
     this.customFeeRate = value;
     const feeRate = this.feeRateFromInput(value);
@@ -113,34 +126,35 @@ export class FeeRateScene extends LitElement {
     );
   }
 
-  private get selectedOption(): "Auto" | "Economy" | undefined {
+  private get selectedOptionId(): FeeRateOptionId | undefined {
     if (this.feeRate == null) {
-      return "Auto";
+      return "auto";
     }
-    return ccc.numFrom(this.feeRate) === MIN_FEE_RATE ? "Economy" : undefined;
+    return ccc.numFrom(this.feeRate) === MIN_FEE_RATE ? "economy" : undefined;
   }
 
-  private selectOption(label: string, feeRate: ccc.Num) {
+  private selectOption(id: FeeRateOptionId, feeRate: ccc.Num) {
     this.customFeeRate = feeRate.toString();
     this.dispatchEvent(
-      new FeeRateSelectedEvent(label === "Auto" ? undefined : feeRate),
+      new FeeRateSelectedEvent(id === "auto" ? undefined : feeRate),
     );
   }
 
   render() {
+    const { t } = this;
     return html`
-      <p class="tip">Fee rate is measured in shannons per 1,000 bytes.</p>
+      <p class="tip">${t("feeRateHint")}</p>
 
       <div class="options">
         ${this.options.map(
-          ({ description, feeRate, label }) => html`
+          ({ id, description, feeRate, label }) => html`
             <ccc-button
               class="fee-rate-option"
-              ?selected=${this.selectedOption === label}
+              ?selected=${this.selectedOptionId === id}
               ?disabled=${feeRate == null}
               @click=${() => {
                 if (feeRate != null) {
-                  this.selectOption(label, feeRate);
+                  this.selectOption(id, feeRate);
                 }
               }}
             >
@@ -156,10 +170,10 @@ export class FeeRateScene extends LitElement {
           <ccc-button
             as="div"
             class="fee-rate-option"
-            ?selected=${this.selectedOption == null}
+            ?selected=${this.selectedOptionId == null}
           >
             <span>
-              <strong>Custom</strong>
+              <strong>${t("feeRateCustom")}</strong>
               <small>
                 ${MIN_FEE_RATE.toString()}–${MAX_FEE_RATE.toString()}
               </small>
@@ -168,7 +182,7 @@ export class FeeRateScene extends LitElement {
               class="fee-rate-input"
               inputmode="numeric"
               type="text"
-              placeholder="shannons/KB"
+              placeholder=${t("feeRateUnit")}
               .value=${this.customFeeRate}
               @focus=${() => this.selectCustomMode()}
               @input=${(event: InputEvent) =>
diff --git a/packages/connector/src/scenes/khie/connect.ts b/packages/connector/src/scenes/khie/connect.ts
index 6d6da4204..39ea3a919 100644
--- a/packages/connector/src/scenes/khie/connect.ts
+++ b/packages/connector/src/scenes/khie/connect.ts
@@ -1,7 +1,8 @@
 import { ccc } from "@ckb-ccc/ccc";
 import { css, html, LitElement } from "lit";
 import { customElement, property, query, state } from "lit/decorators.js";
-import { errorMessage } from "../error.js";
+import { I18n } from "../../i18n/index.js";
+import { displayError } from "../error.js";
 import type { KhiePairing } from "./pairing.js";
 import { KHIE_WALLET_NAME, khieSignerIcon } from "./wallet.js";
 
@@ -18,10 +19,13 @@ export class KhieConnectScene extends LitElement {
   @property({ attribute: false })
   public defaultRelayAddress?: string;
 
+  @property({ attribute: false })
+  public i18n = new I18n();
+
   @state()
   private status: KhieLoadStatus = "loading";
   @state()
-  private error?: string;
+  private error?: { cause: unknown };
 
   @query("ccc-khie-pairing")
   private khiePairing?: KhiePairing;
@@ -40,7 +44,7 @@ export class KhieConnectScene extends LitElement {
 
   render() {
     return html`<ccc-dialog
-      header="Connect a Wallet via Khie"
+      header=${this.i18n.t("khieConnectWallet")}
       ?canBack=${true}
       @back=${this.back}
     >
@@ -54,14 +58,16 @@ export class KhieConnectScene extends LitElement {
         .appName=${this.appName}
         .client=${this.client}
         .defaultRelayAddress=${this.defaultRelayAddress}
+        .i18n=${this.i18n}
       ></ccc-khie-pairing>`;
     }
 
     return html`<ccc-connecting
       .name=${KHIE_WALLET_NAME}
       .icon=${khieSignerIcon(undefined)}
-      .error=${this.error}
-      hint="Loading Khie…"
+      .error=${this.error && displayError(this.error.cause, this.i18n)}
+      .hint=${this.i18n.t("khieLoading")}
+      .i18n=${this.i18n}
       .onRetry=${this.status === "error" ? () => this.loadKhie() : undefined}
     ></ccc-connecting>`;
   }
@@ -83,7 +89,7 @@ export class KhieConnectScene extends LitElement {
       }
     } catch (cause) {
       if (loadId === this.loadId) {
-        this.error = errorMessage(cause);
+        this.error = { cause };
         this.status = "error";
       }
     }
diff --git a/packages/connector/src/scenes/khie/pairing.ts b/packages/connector/src/scenes/khie/pairing.ts
index d761f67e9..15d01597e 100644
--- a/packages/connector/src/scenes/khie/pairing.ts
+++ b/packages/connector/src/scenes/khie/pairing.ts
@@ -8,7 +8,8 @@ import { SCAN_SVG } from "../../assets/scan.svg.js";
 import type { QrScannedEvent } from "../../components/qr-scanner.js";
 import { ConnectorConnectionEvent } from "../../events/external.js";
 import { CloseRequestEvent } from "../../events/internal.js";
-import { errorMessage } from "../error.js";
+import { I18n } from "../../i18n/index.js";
+import { ConnectorError, displayError, errorMessage } from "../error.js";
 import { CONNECTOR_ENDPOINT_URL, DEFAULT_RELAY_ADDRESS } from "./node.js";
 import { KhiePairingSession } from "./session.js";
 import { KHIE_WALLET_NAME, khieSignerIcon } from "./wallet.js";
@@ -24,6 +25,9 @@ export class KhiePairing extends LitElement {
   @property({ attribute: false })
   public defaultRelayAddress?: string;
 
+  @property({ attribute: false })
+  public i18n = new I18n();
+
   @state()
   private relayAddressOverride?: string;
   @state()
@@ -35,7 +39,7 @@ export class KhiePairing extends LitElement {
   @state()
   private hasAttemptedToOpenApp = false;
   @state()
-  private localError?: string;
+  private localError?: { cause: unknown };
 
   private session!: KhiePairingSession;
 
@@ -128,10 +132,20 @@ export class KhiePairing extends LitElement {
   };
 
   private scannerError = (event: ErrorEvent) => {
-    this.localError = `Unable to scan pairing code: ${errorMessage(event.error)}`;
+    this.localError = {
+      cause: new ConnectorError(
+        "scan-failed",
+        `Unable to scan pairing code: ${errorMessage(event.error)}`,
+        { cause: event.error },
+      ),
+    };
     this.isScanning = false;
   };
 
+  private setLocalError = (event: ErrorEvent) => {
+    this.localError = { cause: event.error };
+  };
+
   render() {
     const {
       appEndpoint,
@@ -143,7 +157,16 @@ export class KhiePairing extends LitElement {
       relayState,
       signer,
     } = this.session.state;
-    const error = this.localError ?? sessionError;
+    const t: I18n["t"] = (key, vars) => this.i18n.t(key, vars);
+    const [khieHelpBefore, khieHelpAfter = ""] = t("khieHelp").split("{link}");
+    const hasError =
+      this.localError !== undefined || sessionError !== undefined;
+    const error = hasError
+      ? displayError(
+          this.localError ? this.localError.cause : sessionError,
+          this.i18n,
+        )
+      : undefined;
 
     if (phase === "pairing" || phase === "connecting") {
       return html`<ccc-connecting
@@ -151,10 +174,9 @@ export class KhiePairing extends LitElement {
         .icon=${khieSignerIcon(signer?.icon)}
         .error=${error}
         .hint=${
-          signer
-            ? "Approve the connection in Khie to continue"
-            : "Establishing secure connection…"
+          signer ? t("khieApproveInWallet") : t("khieEstablishingConnection")
         }
+        .i18n=${this.i18n}
         .onRetry=${
           signer
             ? () => {
@@ -175,34 +197,31 @@ export class KhiePairing extends LitElement {
     return html`
       <div class="pairing-layout">
         <section class="field pairing-side own-side">
-          <label>Let a wallet scan this</label>
+          <label>${t("khieLetWalletScan")}</label>
           <div class="endpoint-pair">
             <ccc-qr-code
               class="qr-code"
               .value=${ownEndpoint}
-              alt="Connector pairing code"
-              @error=${(event: ErrorEvent) => {
-                this.localError = errorMessage(event.error);
-              }}
+              alt=${t("khiePairingCode")}
+              @error=${this.setLocalError}
             ></ccc-qr-code>
             ${
               relayState === "failed"
                 ? html`<ccc-button-pill @click=${() => this.connectRelay()}>
-                    ${RETRY_SVG} Try again
+                    ${RETRY_SVG} ${t("tryAgain")}
                   </ccc-button-pill>`
                 : ownEndpoint
                   ? html`<div class="endpoint-details">
                       <div class="endpoint-actions">
                         <ccc-copy-button
                           .value=${ownEndpoint}
+                          .copyLabel=${t("copy")}
+                          .copiedLabel=${t("copied")}
                           class="endpoint-copy"
-                          title="Tap to copy pairing code"
-                          aria-label="Copy connector pairing code"
-                          @error=${(event: ErrorEvent) => {
-                            this.localError = errorMessage(event.error);
-                          }}
+                          aria-label=${t("khieCopyPairingCode")}
+                          @error=${this.setLocalError}
                         >
-                          <span>Tap to copy pairing code</span>
+                          <span>${t("khieCopyPairingCode")}</span>
                         </ccc-copy-button>
                         ${
                           appEndpoint
@@ -212,7 +231,7 @@ export class KhiePairing extends LitElement {
                                 @click=${() => {
                                   this.hasAttemptedToOpenApp = true;
                                 }}
-                                >Open Wallet</a
+                                >${t("khieOpenWallet")}</a
                               >`
                             : undefined
                         }
@@ -220,33 +239,34 @@ export class KhiePairing extends LitElement {
                       ${
                         this.hasAttemptedToOpenApp && appEndpoint
                           ? html`<span class="open-app-status" role="status"
-                              >If the wallet app doesn't open, install a wallet
-                              that supports Khie or pair manually.</span
+                              >${t("khieOpenWalletHint")}</span
                             >`
                           : undefined
                       }
                     </div>`
                   : html`<span class="endpoint-pending"
-                      >Connecting relay…</span
+                      >${t("khieConnectingRelay")}</span
                     >`
             }
           </div>
         </section>
 
-        <div class="divider" aria-hidden="true"><span>or</span></div>
+        <div class="divider" aria-hidden="true">
+          <span>${t("or")}</span>
+        </div>
 
         <section class="field pairing-side remote-side">
-          <label>Scan wallet code</label>
+          <label>${t("khieScanWalletCode")}</label>
           <div class="remote-actions">
             <ccc-button @click=${() => this.startScanner()}>
-              ${SCAN_SVG} Scan wallet code
+              ${SCAN_SVG} ${t("khieScanWalletCode")}
             </ccc-button>
             <div class="endpoint-control">
               <ccc-input
                 class="endpoint-input"
                 .value=${this.khieEndpoint}
-                aria-label="Wallet pairing code"
-                placeholder="Or paste pairing code"
+                aria-label=${t("khieWalletPairingCode")}
+                placeholder=${t("khiePastePairingCode")}
                 spellcheck="false"
                 @input=${(event: InputEvent) => {
                   this.khieEndpoint = (
@@ -261,8 +281,8 @@ export class KhiePairing extends LitElement {
               ></ccc-input>
               <button
                 class="endpoint-submit"
-                aria-label="Connect"
-                title="Connect"
+                aria-label=${t("connect")}
+                title=${t("connect")}
                 ?disabled=${!canPair || !this.khieEndpoint.trim()}
                 @click=${() => this.pair()}
               >
@@ -270,15 +290,12 @@ export class KhiePairing extends LitElement {
               </button>
             </div>
             <p class="khie-help">
-              Khie is a peer-to-peer protocol that connects wallets and
-              applications.
-              <a
+              ${khieHelpBefore}<a
                 href=${ownEndpoint || CONNECTOR_ENDPOINT_URL}
                 target="_blank"
                 rel="noopener noreferrer"
-                >Learn more about Khie here</a
-              >, where you can also connect a local wallet from the device where
-              it is available.
+                >${t("khieHelpLink")}</a
+              >${khieHelpAfter}
             </p>
           </div>
 
@@ -290,7 +307,7 @@ export class KhiePairing extends LitElement {
               this.isAdvancedSettingsOpen = !this.isAdvancedSettingsOpen;
             }}
           >
-            <span>Advanced settings</span>
+            <span>${t("advancedSettings")}</span>
             <span class="settings-chevron">${LEFT_SVG}</span>
           </button>
         </section>
@@ -301,12 +318,12 @@ export class KhiePairing extends LitElement {
                 class="field advanced-settings"
                 id="khie-advanced-settings"
               >
-                <label>Relay multiaddr</label>
+                <label>${t("khieRelayMultiaddr")}</label>
                 <div class="relay-control">
                   <ccc-input
                     class="relay-input"
                     .value=${this.relayAddress}
-                    aria-label="Relay multiaddr"
+                    aria-label=${t("khieRelayMultiaddr")}
                     placeholder="/dns4/relay.example/tcp/443/wss"
                     spellcheck="false"
                     @input=${(event: InputEvent) => {
@@ -325,10 +342,10 @@ export class KhiePairing extends LitElement {
                   >
                     ${
                       relayState === "connecting"
-                        ? "Connecting…"
+                        ? t("connecting")
                         : relayState === "connected"
-                          ? "Reconnect"
-                          : "Connect relay"
+                          ? t("reconnect")
+                          : t("khieConnectRelay")
                     }
                   </button>
                 </div>
@@ -339,16 +356,16 @@ export class KhiePairing extends LitElement {
       ${
         error && !this.localError && errorKind === "incompatible-peer"
           ? html`<div class="compatibility-help" role="alert">
-              <strong>This is not a compatible Khie pairing code</strong>
+              <strong>${t("khieIncompatiblePairingCode")}</strong>
               <span>
-                Scan a pairing code from a wallet.
+                ${t("khieIncompatiblePairingCodeHint")}
                 ${
                   this.khieEndpoint
                     ? html`<a
                         href=${this.khieEndpoint}
                         target="_blank"
                         rel="noopener noreferrer"
-                        >Go here to learn more.</a
+                        >${t("khieLearnMore")}</a
                       >`
                     : undefined
                 }
diff --git a/packages/connector/src/scenes/khie/session.ts b/packages/connector/src/scenes/khie/session.ts
index 593ec6571..0f8592b2f 100644
--- a/packages/connector/src/scenes/khie/session.ts
+++ b/packages/connector/src/scenes/khie/session.ts
@@ -2,7 +2,7 @@ import { ccc } from "@ckb-ccc/ccc";
 import { Libp2p } from "@ckb-ccc/libp2p";
 import type { PeerId } from "@libp2p/interface";
 import type { ConnectorConnection } from "../../events/external.js";
-import { errorMessage } from "../error.js";
+import { ConnectorError } from "../error.js";
 import { KhieConnectionController } from "./connection.js";
 import {
   CONNECTOR_ENDPOINT_URL,
@@ -19,7 +19,8 @@ export type KhieRelayState = "connected" | "connecting" | "failed" | "idle";
 export type KhiePairingSessionState = Readonly<{
   appEndpoint: string;
   canPair: boolean;
-  error?: string;
+  /** Raw cause; the UI formats it with `displayError` so it follows the locale. */
+  error?: unknown;
   errorKind?: "incompatible-peer";
   ownEndpoint: string;
   phase: KhiePairingPhase;
@@ -122,7 +123,7 @@ export class KhiePairingSession {
   ) {
     this.update({
       ...patch,
-      error: errorMessage(cause),
+      error: cause,
       errorKind: isIncompatiblePeerError(cause)
         ? "incompatible-peer"
         : undefined,
@@ -347,7 +348,10 @@ export class KhiePairingSession {
 
       if (this.resources?.pendingSigner?.signer === signer) {
         this.updateError(
-          new Error("The wallet unpaired. Go back and pair again."),
+          new ConnectorError(
+            "peer-unpaired",
+            "The wallet unpaired. Go back and pair again.",
+          ),
           { signer: undefined },
         );
       }
@@ -377,7 +381,10 @@ export class KhiePairingSession {
     try {
       await signer.connect();
       if (!(await signer.isConnected())) {
-        throw new Error("Khie signer did not connect");
+        throw new ConnectorError(
+          "signer-not-connected",
+          "Khie signer did not connect",
+        );
       }
       signal.throwIfAborted();
 
diff --git a/packages/connector/src/scenes/selecting/index.ts b/packages/connector/src/scenes/selecting/index.ts
index 02321888d..afd57ca12 100644
--- a/packages/connector/src/scenes/selecting/index.ts
+++ b/packages/connector/src/scenes/selecting/index.ts
@@ -2,7 +2,8 @@ import { ccc } from "@ckb-ccc/ccc";
 import { css, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { CloseRequestEvent, ConnectedEvent } from "../../events/internal.js";
-import { errorMessage } from "../error.js";
+import { I18n } from "../../i18n/index.js";
+import { ConnectorError, displayError } from "../error.js";
 import { generateSignersScene } from "./signers.js";
 import { generateWalletsScene } from "./wallets.js";
 
@@ -14,12 +15,15 @@ export class SelectingScene extends LitElement {
   @property()
   public wallets?: ccc.WalletWithSigners[];
 
+  @property({ attribute: false })
+  public i18n = new I18n();
+
   @state()
   private selectedWallet?: ccc.WalletWithSigners;
   @state()
   private selectedSigner?: ccc.SignerInfo;
   @state()
-  private connectingError?: string;
+  private connectingError?: { cause: unknown };
 
   render() {
     const [title, body] = this.renderContent();
@@ -52,12 +56,17 @@ export class SelectingScene extends LitElement {
           this.selectedWallet = selectedWallet;
         },
         this.signerSelectedHandler,
+        this.i18n,
       );
     }
 
     const signer = this.selectedSigner;
     if (!signer) {
-      return generateSignersScene(wallet, this.signerSelectedHandler);
+      return generateSignersScene(
+        wallet,
+        this.signerSelectedHandler,
+        this.i18n,
+      );
     }
 
     return [
@@ -65,8 +74,12 @@ export class SelectingScene extends LitElement {
       html`<ccc-connecting
         .name=${wallet.name}
         .icon=${wallet.icon}
-        .error=${this.connectingError}
-        hint="Confirm connection in the wallet"
+        .error=${
+          this.connectingError &&
+          displayError(this.connectingError.cause, this.i18n)
+        }
+        .hint=${this.i18n.t("confirmInWallet")}
+        .i18n=${this.i18n}
         .onRetry=${() => this.signerSelectedHandler(wallet, signer)}
       ></ccc-connecting>`,
     ];
@@ -98,11 +111,16 @@ export class SelectingScene extends LitElement {
       await signer.connect();
 
       if (!(await signer.isConnected())) {
-        this.connectingError = "Unknown connection status";
+        this.connectingError = {
+          cause: new ConnectorError(
+            "unknown-connection-status",
+            "Unknown connection status",
+          ),
+        };
         return;
       }
     } catch (cause) {
-      this.connectingError = errorMessage(cause);
+      this.connectingError = { cause };
       return;
     }
 
diff --git a/packages/connector/src/scenes/selecting/signers.ts b/packages/connector/src/scenes/selecting/signers.ts
index 2166e5812..a2572bcd5 100644
--- a/packages/connector/src/scenes/selecting/signers.ts
+++ b/packages/connector/src/scenes/selecting/signers.ts
@@ -8,6 +8,7 @@ import {
   ETH_SVG,
   NOSTR_SVG,
 } from "../../assets/chains/index.js";
+import type { I18n } from "../../i18n/index.js";
 
 export function signerTypeToIcon(type: ccc.SignerType): string {
   return {
@@ -25,9 +26,10 @@ export function generateSignersScene(
     wallet: ccc.WalletWithSigners,
     signer: ccc.SignerInfo,
   ) => unknown,
+  i18n: I18n,
 ) {
   return [
-    "Select a Chain",
+    i18n.t("selectChain"),
 
     html`
       <img class="wallet-icon" src=${wallet.icon} alt=${wallet.name} />
diff --git a/packages/connector/src/scenes/selecting/wallets.ts b/packages/connector/src/scenes/selecting/wallets.ts
index 69559d663..1ffe2f8ce 100644
--- a/packages/connector/src/scenes/selecting/wallets.ts
+++ b/packages/connector/src/scenes/selecting/wallets.ts
@@ -2,6 +2,7 @@ import { ccc } from "@ckb-ccc/ccc";
 import { html } from "lit";
 import { repeat } from "lit/directives/repeat.js";
 import { KHIE_SVG } from "../../assets/khie.svg.js";
+import type { I18n } from "../../i18n/index.js";
 
 export function generateWalletsScene(
   wallets: ccc.WalletWithSigners[],
@@ -11,9 +12,10 @@ export function generateWalletsScene(
     wallet: ccc.WalletWithSigners,
     signer: ccc.SignerInfo,
   ) => unknown,
+  i18n: I18n,
 ) {
   return [
-    "Connect Wallet",
+    i18n.t("connectWallet"),
     html`
       ${
         hideKhie
diff --git a/packages/docs/content/docs/guides/connect-wallets.mdx b/packages/docs/content/docs/guides/connect-wallets.mdx
index 5d18fd2b2..35675d1c7 100644
--- a/packages/docs/content/docs/guides/connect-wallets.mdx
+++ b/packages/docs/content/docs/guides/connect-wallets.mdx
@@ -137,6 +137,7 @@ The fastest way to ship a working Connect Wallet flow. Two pieces:
 | `signersController` | `ccc.SignersController`                                                | Custom signers controller instance               |
 | `defaultClient`     | `ccc.Client`                                                           | Default CKB client (testnet or mainnet)          |
 | `clientOptions`     | `{ icon?: string; client: ccc.Client; name: string }[]`                | Network switching options shown in the connector |
+| `locale`            | `ccc.ConnectorLocale`                                                  | UI language (a built-in tag, e.g. `"zh-Hans"`), default `"en"` |
 
 ## Hooks reference
 
@@ -185,6 +186,28 @@ const address = await signer?.getRecommendedAddress();
 
 `ccc.SignerType` values: `CKB`, `EVM`, `BTC`, `Nostr`, `Doge`.
 
+## Localization
+
+**Use this when:** your app is multilingual and the connector modal should follow it.
+
+The connector UI is English by default. Pass a `locale` to switch languages; re-render the `Provider` with a new value and the modal updates immediately.
+
+```tsx
+<ccc.Provider locale="zh-Hans">{children}</ccc.Provider>
+```
+
+Built-in locales: `en`, `zh-Hans` (available at runtime as `ccc.connectorLocales`). `locale` must be exactly one of them; any other value falls back to English. Map your app's own language to a built-in tag yourself, e.g. `zh-CN` / `zh-TW` → `zh-Hans`. Wallet and chain names (`MetaMask`, `JoyID`, `BTC`, …) are brand names and are never translated.
+
+Plain Web Component usage works the same way:
+
+```html
+<ccc-connector locale="zh-Hans"></ccc-connector>
+```
+
+Translations ship inside the connector and are not overridable per app. This keeps every app rendering correctly whenever you upgrade CCC, even if the UI changes. If a translation is wrong, please [open an issue](https://github.com/ckb-devrel/ccc/issues/new); to add a language, see the [contributing guide](https://github.com/ckb-devrel/ccc/blob/master/CONTRIBUTING.md#contributing-a-connector-language).
+
+Locale is not auto-detected from the browser. If you want that, map `navigator.language` to a built-in tag and pass it yourself.
+
 ## Choose a wallet network
 
 Wallet integrations expose a separate signer for every compatible network they can switch to, such as `BTC`, `BTC Testnet`, and `BTC Signet`. The user selects the network directly in the connector; `connect()` then asks the wallet to switch when necessary. CKB mainnet clients only show mainnet-compatible signers.
diff --git a/packages/docs/content/docs/guides/connect-wallets.zh.mdx b/packages/docs/content/docs/guides/connect-wallets.zh.mdx
index 4772ae0e3..3e36c99c6 100644
--- a/packages/docs/content/docs/guides/connect-wallets.zh.mdx
+++ b/packages/docs/content/docs/guides/connect-wallets.zh.mdx
@@ -135,6 +135,7 @@ icon: Wallet
 | `signersController` | `ccc.SignersController`                                                | 自定义 `SignersController` 实例             |
 | `defaultClient`     | `ccc.Client`                                                           | 默认 CKB Client（测试网或主网）               |
 | `clientOptions`     | `{ icon?: string; client: ccc.Client; name: string }[]`                | 连接器中展示的网络切换选项                     |
+| `locale`            | `ccc.ConnectorLocale`                                                  | 界面语言（内置语言标签，如 `"zh-Hans"`），默认 `"en"` |
 
 ## Hooks 参考
 
@@ -183,6 +184,28 @@ const address = await signer?.getRecommendedAddress();
 
 `ccc.SignerType` 可选值：`CKB`、`EVM`、`BTC`、`Nostr`、`Doge`。
 
+## 多语言
+
+**适用场景：** 你的应用是多语言的，希望连接器弹窗跟随应用语言。
+
+连接器界面默认英文。传入 `locale` 即可切换语言；重新渲染 `Provider` 并传入新值，弹窗立即跟随。
+
+```tsx
+<ccc.Provider locale="zh-Hans">{children}</ccc.Provider>
+```
+
+内置语言：`en`、`zh-Hans`（运行时可通过 `ccc.connectorLocales` 获取）。`locale` 必须与其中之一完全一致，其他值一律回退到英文。请在应用侧自行把应用语言映射为内置语言标签，例如 `zh-CN` / `zh-TW` → `zh-Hans`。钱包与链名（`MetaMask`、`JoyID`、`BTC` 等）是品牌名，不做翻译。
+
+直接使用 Web Component 时用法相同：
+
+```html
+<ccc-connector locale="zh-Hans"></ccc-connector>
+```
+
+翻译内置于连接器中，不支持应用层覆盖。这样无论连接器界面如何迭代，应用升级 CCC 后都能保证展示正确。如果发现翻译有误，请[提交 issue](https://github.com/ckb-devrel/ccc/issues/new)；如需新增语言，请参考[贡献指南](https://github.com/ckb-devrel/ccc/blob/master/CONTRIBUTING.md#contributing-a-connector-language)。
+
+连接器不会自动检测浏览器语言。如果需要，请自行将 `navigator.language` 映射为内置语言标签后传入。
+
 ## 选择钱包网络
 
 钱包集成会为每个兼容的可切换网络分别提供 Signer，例如 `BTC`、`BTC Testnet` 和 `BTC Signet`。用户直接在连接器中选择网络；必要时，`connect()` 会请求钱包切换网络。CKB 主网 Client 只展示与主网兼容的 Signer。
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8ca71dc18..525f543e4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -348,6 +348,9 @@ importers:
       typescript-eslint:
         specifier: ^8.61.1
         version: 8.70.0(@typescript/typescript6@6.0.2)(eslint@10.10.0(jiti@2.7.0))
+      vitest:
+        specifier: ^4.1.9
+        version: 4.1.11(@types/node@26.6.2)(@vitest/coverage-v8@4.1.11)(vite@7.3.5(@types/node@26.6.2)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.51.2)(tsx@4.23.13)(yaml@2.9.1))
 
   packages/connector-react:
     dependencies: