diff --git a/templates/assets/app/components/generation/GenerationResults.tsx b/templates/assets/app/components/generation/GenerationResults.tsx
index 8a1b0d0fa6..19df0edfa2 100644
--- a/templates/assets/app/components/generation/GenerationResults.tsx
+++ b/templates/assets/app/components/generation/GenerationResults.tsx
@@ -1,13 +1,22 @@
 import {
   readClientAppState,
-  sendToAgentChat,
+  setAgentChatContextItem,
   useActionMutation,
   useActionQuery,
   useT,
 } from "@agent-native/core/client";
-import { IconMessageCircle, IconPhoto, IconTrash } from "@tabler/icons-react";
+import {
+  IconChevronLeft,
+  IconChevronRight,
+  IconDeviceFloppy,
+  IconMessageCircle,
+  IconPhoto,
+  IconTrash,
+  IconX,
+} from "@tabler/icons-react";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { useEffect, useMemo, useRef, useState } from "react";
+import { Link } from "react-router";
 import { toast } from "sonner";
 
 import {
@@ -22,7 +31,20 @@ import {
 } from "@/components/ui/alert-dialog";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogTitle,
+} from "@/components/ui/dialog";
 import { Spinner } from "@/components/ui/spinner";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 import { assetPreviewSources } from "@/lib/asset-preview-sources";
 
 import type {
@@ -34,6 +56,8 @@ type LibraryListResult = {
   libraries?: ImageLibrarySummary[];
 };
 
+type VariantSlot = AssetVariantState["slots"][number];
+
 function variantStateKey(threadId: string | null) {
   return threadId ? `asset-variants:${threadId}` : "asset-variants";
 }
@@ -46,15 +70,13 @@ function variantStateKey(threadId: string | null) {
 // its finished image arrives.
 const STALE_PENDING_RUN_MS = 10 * 60 * 1000;
 
-function slotTime(slot: AssetVariantState["slots"][number]): number {
+function slotTime(slot: VariantSlot): number {
   const raw = slot.createdAt ?? slot.updatedAt ?? "";
   const time = Date.parse(raw);
   return Number.isNaN(time) ? 0 : time;
 }
 
-function stalePendingRunId(
-  slot: AssetVariantState["slots"][number],
-): string | null {
+function stalePendingRunId(slot: VariantSlot): string | null {
   if (slot.status !== "pending") return null;
   if (!slot.runId) return null;
   const timestamp = slotTime(slot);
@@ -66,6 +88,7 @@ export function GenerationResults({ threadId }: { threadId: string | null }) {
   const t = useT();
   const queryClient = useQueryClient();
   const [clearAllOpen, setClearAllOpen] = useState(false);
+  const [previewSlotId, setPreviewSlotId] = useState<string | null>(null);
   const stateKey = variantStateKey(threadId);
   const stateQueryKey = useMemo(() => ["app-state", stateKey], [stateKey]);
   const { data: variants } = useQuery({
@@ -137,6 +160,11 @@ export function GenerationResults({ threadId }: { threadId: string | null }) {
     );
   }, [belongsToThread, queryClient, refreshGeneration, slots, stateQueryKey]);
 
+  const previewSlot = useMemo(
+    () => slots.find((slot) => slot.slotId === previewSlotId) ?? null,
+    [previewSlotId, slots],
+  );
+
   if (!belongsToThread || !variants) return null;
   if (slots.length === 0) return null;
 
@@ -169,6 +197,65 @@ export function GenerationResults({ threadId }: { threadId: string | null }) {
     );
   }
 
+  function saveSlot(slot: VariantSlot, onDone?: () => void) {
+    if (!slot.assetId && !slot.slotId) return;
+    saveGenerated.mutate(
+      {
+        ...(slot.assetId ? { assetId: slot.assetId } : {}),
+        ...(slot.slotId ? { slotId: slot.slotId } : {}),
+        threadId,
+      },
+      {
+        onSuccess: () => {
+          toast.success(t("library.savedGeneratedAsset"));
+          void queryClient.invalidateQueries({ queryKey: stateQueryKey });
+          void queryClient.invalidateQueries({
+            queryKey: ["action", "get-library"],
+          });
+          onDone?.();
+        },
+        onError: (error) =>
+          toast.error(error.message || t("library.couldNotSaveCandidate")),
+      },
+    );
+  }
+
+  function dismissSlotById(slot: VariantSlot, onDone?: () => void) {
+    dismissSlot.mutate(
+      { slotId: slot.slotId, threadId },
+      {
+        onSuccess: () => {
+          void queryClient.invalidateQueries({ queryKey: stateQueryKey });
+          onDone?.();
+        },
+        onError: (error) =>
+          toast.error(error.message || t("library.couldNotDismissCandidate")),
+      },
+    );
+  }
+
+  function refineSlot(slot: VariantSlot, variantNumber: number) {
+    if (!slot.assetId) return;
+    const variantLabel = t("library.variantWithNumber", {
+      number: variantNumber,
+    });
+    setAgentChatContextItem({
+      key: "refine-asset:" + slot.assetId,
+      title: t("library.refine") + " : " + variantLabel,
+      context: [
+        "## Assets candidate",
+        `Asset ID: ${slot.assetId}`,
+        `Run ID: ${slot.runId ?? "unknown"}`,
+        `Prompt: ${variants?.prompt ?? ""}`,
+        libraryTitle ? `Brand kit: ${libraryTitle}` : "",
+        "Use refine-image with assetId when the user describes the change.",
+      ]
+        .filter(Boolean)
+        .join("\n"),
+      openSidebar: true,
+    });
+  }
+
   return (
     <>
       <AlertDialog open={clearAllOpen} onOpenChange={setClearAllOpen}>
@@ -206,6 +293,27 @@ export function GenerationResults({ threadId }: { threadId: string | null }) {
         </AlertDialogContent>
       </AlertDialog>
 
+      <GenerationPreviewDialog
+        slot={previewSlot}
+        slots={slots}
+        prompt={variants.prompt}
+        libraryTitle={libraryTitle}
+        isSaving={saveGenerated.isPending}
+        isDismissing={dismissSlot.isPending}
+        onOpenChange={(open) => {
+          if (!open) setPreviewSlotId(null);
+        }}
+        onSelect={setPreviewSlotId}
+        onSave={(slot) => saveSlot(slot, () => setPreviewSlotId(null))}
+        onRefine={(slot, variantNumber) => {
+          refineSlot(slot, variantNumber);
+          setPreviewSlotId(null);
+        }}
+        onDismiss={(slot) =>
+          dismissSlotById(slot, () => setPreviewSlotId(null))
+        }
+      />
+
       <section className="mx-auto mb-4 w-full max-w-[760px] px-4">
         <div className="overflow-hidden rounded-xl border border-border bg-card shadow-sm">
           <div className="flex items-start justify-between gap-3 border-b border-border/80 px-3 py-3">
@@ -244,64 +352,18 @@ export function GenerationResults({ threadId }: { threadId: string | null }) {
           </div>
 
           <div className="max-h-[min(640px,52vh)] overflow-y-auto p-3">
-            <div
-              className={
-                slots.length === 1
-                  ? "grid grid-cols-1 gap-3"
-                  : "grid grid-cols-1 gap-3 sm:grid-cols-2"
-              }
-            >
+            <div className="assets-library-grid grid grid-cols-2 gap-3 sm:grid-cols-3">
               {slots.map((slot, index) => (
-                <GenerationResultItem
+                <GenerationDraftCard
                   key={slot.slotId}
                   slot={slot}
-                  index={index}
-                  prompt={variants.prompt}
-                  libraryTitle={libraryTitle}
+                  variantNumber={index + 1}
                   isSaving={saveGenerated.isPending}
                   isDismissing={dismissSlot.isPending}
-                  onSave={() => {
-                    if (!slot.assetId && !slot.slotId) return;
-                    saveGenerated.mutate(
-                      {
-                        ...(slot.assetId ? { assetId: slot.assetId } : {}),
-                        ...(slot.slotId ? { slotId: slot.slotId } : {}),
-                        threadId,
-                      },
-                      {
-                        onSuccess: () => {
-                          toast.success(t("library.savedGeneratedAsset"));
-                          void queryClient.invalidateQueries({
-                            queryKey: stateQueryKey,
-                          });
-                          void queryClient.invalidateQueries({
-                            queryKey: ["action", "get-library"],
-                          });
-                        },
-                        onError: (error) =>
-                          toast.error(
-                            error.message || t("library.couldNotSaveCandidate"),
-                          ),
-                      },
-                    );
-                  }}
-                  onDismiss={() => {
-                    dismissSlot.mutate(
-                      { slotId: slot.slotId, threadId },
-                      {
-                        onSuccess: () => {
-                          void queryClient.invalidateQueries({
-                            queryKey: stateQueryKey,
-                          });
-                        },
-                        onError: (error) =>
-                          toast.error(
-                            error.message ||
-                              t("library.couldNotDismissCandidate"),
-                          ),
-                      },
-                    );
-                  }}
+                  onPreview={() => setPreviewSlotId(slot.slotId)}
+                  onSave={() => saveSlot(slot)}
+                  onRefine={() => refineSlot(slot, index + 1)}
+                  onDismiss={() => dismissSlotById(slot)}
                 />
               ))}
             </div>
@@ -312,117 +374,315 @@ export function GenerationResults({ threadId }: { threadId: string | null }) {
   );
 }
 
-function GenerationResultItem({
+function GenerationDraftCard({
   slot,
-  index,
-  prompt,
-  libraryTitle,
+  variantNumber,
   isSaving,
   isDismissing,
+  onPreview,
   onSave,
+  onRefine,
   onDismiss,
 }: {
-  slot: AssetVariantState["slots"][number];
-  index: number;
-  prompt: string;
-  libraryTitle: string | null;
+  slot: VariantSlot;
+  variantNumber: number;
   isSaving: boolean;
   isDismissing: boolean;
+  onPreview: () => void;
   onSave: () => void;
+  onRefine: () => void;
   onDismiss: () => void;
 }) {
-  const ready = slot.status === "ready" && Boolean(slot.assetId);
   const t = useT();
+  const ready = slot.status === "ready" && Boolean(slot.assetId);
+  const variantLabel = t("library.variantWithNumber", {
+    number: variantNumber,
+  });
   return (
-    <article className="overflow-hidden rounded-lg border border-border/80 bg-background/70">
-      <div className="relative aspect-[16/10] overflow-hidden bg-muted/40">
-        <GenerationSlotPreview slot={slot} />
-        <div className="absolute left-2 top-2 flex items-center gap-1 rounded-full border border-border/70 bg-background/90 px-2 py-1 text-[11px] font-medium shadow-sm">
-          {slot.status === "pending" ? <Spinner className="h-3 w-3" /> : null}
-          <span>
-            {slot.status === "pending"
-              ? t("library.generating")
-              : slot.status === "ready"
-                ? t("library.candidateWithNumber", { number: index + 1 })
-                : t("library.failed")}
-          </span>
-        </div>
-      </div>
-      <div className="space-y-2 p-2.5">
-        <div className="min-w-0 text-xs">
-          <div className="truncate font-medium">
-            {slot.status === "ready"
-              ? t("library.readyToSave")
-              : slot.status === "pending"
-                ? t("library.stillRendering")
-                : t("library.generationFailed")}
+    <div className="overflow-hidden rounded-lg border border-border/80 bg-background transition hover:border-foreground/25 hover:bg-muted/10">
+      <div className="group relative">
+        <button
+          type="button"
+          aria-label={t("library.selectAsset", { title: variantLabel })}
+          title={variantLabel}
+          onClick={() => {
+            if (ready) onPreview();
+          }}
+          className="block w-full text-left focus-visible:outline-none"
+        >
+          <div className="aspect-[4/3] bg-muted/40">
+            <GenerationSlotPreview slot={slot} />
           </div>
-          <div className="mt-0.5 truncate text-muted-foreground">
-            {libraryTitle || t("library.noBrandKit")}
-            {prompt ? ` / ${prompt}` : null}
+        </button>
+
+        {slot.status !== "ready" ? (
+          <div className="absolute left-2 top-2 z-10 flex items-center gap-1 rounded-full border border-border/70 bg-background/90 px-2 py-1 text-[11px] font-medium shadow-sm">
+            {slot.status === "pending" ? <Spinner className="h-3 w-3" /> : null}
+            <span>
+              {slot.status === "pending"
+                ? t("library.generating")
+                : t("library.failed")}
+            </span>
           </div>
-        </div>
-        <div className="flex flex-wrap items-center gap-1.5">
-          <Button
-            size="sm"
-            className="h-7 px-2 text-xs"
-            disabled={!ready || isSaving}
-            onClick={onSave}
-          >
-            {isSaving ? <Spinner className="h-3 w-3" /> : t("library.save")}
-          </Button>
-          <Button
-            variant="outline"
-            size="sm"
-            className="h-7 gap-1 px-2 text-xs"
-            disabled={!slot.assetId}
-            onClick={() =>
-              sendToAgentChat({
-                message: `Refine generated asset ${slot.assetId}: `,
-                context: [
-                  "## Assets candidate",
-                  `Asset ID: ${slot.assetId}`,
-                  `Run ID: ${slot.runId ?? "unknown"}`,
-                  `Prompt: ${prompt}`,
-                  libraryTitle ? `Brand kit: ${libraryTitle}` : "",
-                  "Use refine-image with assetId when the user describes the change.",
-                ]
-                  .filter(Boolean)
-                  .join("\n"),
-                submit: false,
-                openSidebar: true,
-              })
-            }
-          >
-            <IconMessageCircle className="h-3.5 w-3.5" />
-            {t("library.refine")}
-          </Button>
-          <Button
-            variant="ghost"
-            size="icon"
-            className="h-7 w-7 text-muted-foreground hover:bg-destructive/10 hover:text-destructive"
-            disabled={isDismissing}
-            onClick={onDismiss}
+        ) : null}
+
+        {ready ? (
+          <TooltipProvider>
+            <div className="absolute right-2 top-2 z-10 flex items-center gap-1.5 opacity-0 transition group-hover:opacity-100 focus-within:opacity-100">
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <button
+                    type="button"
+                    aria-label={t("library.save")}
+                    disabled={isSaving}
+                    onClick={(event) => {
+                      event.stopPropagation();
+                      onSave();
+                    }}
+                    className="inline-flex h-8 w-8 items-center justify-center rounded-full bg-background/90 text-foreground shadow-sm transition hover:bg-primary hover:text-primary-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-60"
+                  >
+                    {isSaving ? (
+                      <Spinner className="h-4 w-4" />
+                    ) : (
+                      <IconDeviceFloppy className="h-4 w-4" />
+                    )}
+                  </button>
+                </TooltipTrigger>
+                <TooltipContent>{t("library.save")}</TooltipContent>
+              </Tooltip>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <button
+                    type="button"
+                    aria-label={t("library.refine")}
+                    onClick={(event) => {
+                      event.stopPropagation();
+                      onRefine();
+                    }}
+                    className="inline-flex h-8 w-8 items-center justify-center rounded-full bg-background/90 text-foreground shadow-sm transition hover:bg-primary hover:text-primary-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                  >
+                    <IconMessageCircle className="h-4 w-4" />
+                  </button>
+                </TooltipTrigger>
+                <TooltipContent>{t("library.refine")}</TooltipContent>
+              </Tooltip>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <button
+                    type="button"
+                    aria-label={t("library.deleteCandidate")}
+                    disabled={isDismissing}
+                    onClick={(event) => {
+                      event.stopPropagation();
+                      onDismiss();
+                    }}
+                    className="inline-flex h-8 w-8 items-center justify-center rounded-full bg-background/90 text-foreground shadow-sm transition hover:bg-destructive hover:text-destructive-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-60"
+                  >
+                    <IconTrash className="h-4 w-4" />
+                  </button>
+                </TooltipTrigger>
+                <TooltipContent>{t("library.deleteCandidate")}</TooltipContent>
+              </Tooltip>
+            </div>
+          </TooltipProvider>
+        ) : (
+          <button
+            type="button"
             aria-label={t("library.deleteCandidate")}
+            disabled={isDismissing}
+            onClick={(event) => {
+              event.stopPropagation();
+              onDismiss();
+            }}
+            className="absolute right-2 top-2 z-10 inline-flex h-8 w-8 items-center justify-center rounded-full bg-background/90 text-muted-foreground shadow-sm transition hover:bg-destructive hover:text-destructive-foreground focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-60"
           >
-            <IconTrash className="h-3.5 w-3.5" />
-          </Button>
-        </div>
+            <IconTrash className="h-4 w-4" />
+          </button>
+        )}
+      </div>
+      <div className="px-2 py-1.5 text-center text-xs font-medium text-muted-foreground">
+        {variantLabel}
       </div>
-    </article>
+    </div>
   );
 }
 
-function GenerationSlotPreview({
+function GenerationPreviewDialog({
   slot,
+  slots,
+  prompt,
+  libraryTitle,
+  isSaving,
+  isDismissing,
+  onOpenChange,
+  onSelect,
+  onSave,
+  onRefine,
+  onDismiss,
 }: {
-  slot: AssetVariantState["slots"][number];
+  slot: VariantSlot | null;
+  slots: VariantSlot[];
+  prompt: string;
+  libraryTitle: string | null;
+  isSaving: boolean;
+  isDismissing: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSelect: (slotId: string) => void;
+  onSave: (slot: VariantSlot) => void;
+  onRefine: (slot: VariantSlot, variantNumber: number) => void;
+  onDismiss: (slot: VariantSlot) => void;
 }) {
+  const t = useT();
+  const previewableSlots = useMemo(
+    () =>
+      slots.filter((item) => item.status === "ready" && Boolean(item.assetId)),
+    [slots],
+  );
+  const previewIndex = slot
+    ? previewableSlots.findIndex((item) => item.slotId === slot.slotId)
+    : -1;
+  const hasPrev = previewIndex > 0;
+  const hasNext =
+    previewIndex >= 0 && previewIndex < previewableSlots.length - 1;
+  const showPreviousSlot = () => {
+    if (hasPrev) onSelect(previewableSlots[previewIndex - 1].slotId);
+  };
+  const showNextSlot = () => {
+    if (hasNext) onSelect(previewableSlots[previewIndex + 1].slotId);
+  };
+  const sources = slot ? assetPreviewSources(slot, "preview") : [];
+  const src = sources[0];
+  const variantNumber = slot
+    ? slots.findIndex((item) => item.slotId === slot.slotId) + 1
+    : 0;
+  const variantLabel = t("library.variantWithNumber", {
+    number: variantNumber,
+  });
+  return (
+    <Dialog open={Boolean(slot)} onOpenChange={onOpenChange}>
+      {slot ? (
+        <DialogContent
+          hideClose
+          onKeyDown={(event) => {
+            if (event.key === "ArrowLeft") showPreviousSlot();
+            if (event.key === "ArrowRight") showNextSlot();
+          }}
+          className="flex max-h-[85vh] w-[calc(100vw-24px)] max-w-4xl flex-col gap-0 overflow-hidden p-0"
+        >
+          <DialogTitle className="sr-only">{variantLabel}</DialogTitle>
+          <DialogDescription className="sr-only">
+            {prompt || t("library.readyToSave")}
+          </DialogDescription>
+
+          <div className="flex shrink-0 items-center justify-between gap-3 border-b border-border/80 px-4 py-3">
+            <p className="min-w-0 truncate text-sm font-medium">
+              {variantLabel}
+            </p>
+            <div className="flex shrink-0 items-center gap-2">
+              <Button
+                size="sm"
+                disabled={isSaving || !slot.assetId}
+                onClick={() => onSave(slot)}
+              >
+                {isSaving ? <Spinner className="h-4 w-4" /> : t("library.save")}
+              </Button>
+              <Button
+                variant="outline"
+                size="sm"
+                className="gap-1"
+                disabled={!slot.assetId}
+                onClick={() => onRefine(slot, variantNumber)}
+              >
+                <IconMessageCircle className="h-4 w-4" />
+                {t("library.refine")}
+              </Button>
+              {slot.assetId ? (
+                <Button asChild variant="outline" size="sm">
+                  <Link
+                    to={`/asset/${encodeURIComponent(slot.assetId)}`}
+                    onClick={() => onOpenChange(false)}
+                  >
+                    {t("library.viewDetails")}
+                  </Link>
+                </Button>
+              ) : null}
+              <Button
+                variant="outline"
+                size="icon"
+                className="h-8 w-8 text-muted-foreground hover:bg-destructive/10 hover:text-destructive"
+                disabled={isDismissing}
+                onClick={() => onDismiss(slot)}
+                aria-label={t("library.deleteCandidate")}
+              >
+                {isDismissing ? (
+                  <Spinner className="h-4 w-4" />
+                ) : (
+                  <IconTrash className="h-4 w-4" />
+                )}
+              </Button>
+              <DialogClose
+                aria-label={t("library.closePreview")}
+                className="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-muted-foreground transition hover:bg-accent hover:text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              >
+                <IconX className="h-4 w-4" />
+              </DialogClose>
+            </div>
+          </div>
+
+          <div className="flex min-h-0 flex-1 items-center justify-center overflow-auto bg-muted/20 p-4 sm:p-6">
+            {src ? (
+              <img
+                src={src}
+                alt={prompt || ""}
+                className="max-h-full max-w-full rounded-lg bg-black object-contain"
+              />
+            ) : (
+              <div className="flex h-64 w-full items-center justify-center rounded-lg bg-muted">
+                <IconPhoto className="h-8 w-8 text-muted-foreground" />
+              </div>
+            )}
+          </div>
+
+          {hasPrev || hasNext ? (
+            <div className="flex shrink-0 items-center justify-center gap-2 border-t border-border/80 py-3">
+              <button
+                type="button"
+                aria-label={t("library.previousImage")}
+                onClick={showPreviousSlot}
+                disabled={!hasPrev}
+                className="inline-flex h-9 w-9 items-center justify-center rounded-full text-foreground transition hover:bg-accent focus:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-40"
+              >
+                <IconChevronLeft className="h-5 w-5" />
+              </button>
+              <button
+                type="button"
+                aria-label={t("library.nextImage")}
+                onClick={showNextSlot}
+                disabled={!hasNext}
+                className="inline-flex h-9 w-9 items-center justify-center rounded-full text-foreground transition hover:bg-accent focus:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-40"
+              >
+                <IconChevronRight className="h-5 w-5" />
+              </button>
+            </div>
+          ) : null}
+        </DialogContent>
+      ) : null}
+    </Dialog>
+  );
+}
+
+function GenerationSlotPreview({ slot }: { slot: VariantSlot }) {
   const t = useT();
   const sources = assetPreviewSources(slot, "thumbnail");
   const src = sources[0];
   if (src) {
-    return <img src={src} alt="" className="h-full w-full object-contain" />;
+    return (
+      <img
+        src={src}
+        alt=""
+        className="h-full w-full object-contain transition group-hover:scale-[1.02]"
+      />
+    );
   }
   if (slot.status === "failed") {
     return (
diff --git a/templates/assets/app/i18n-data.ts b/templates/assets/app/i18n-data.ts
index 66d589713c..2f083278f4 100644
--- a/templates/assets/app/i18n-data.ts
+++ b/templates/assets/app/i18n-data.ts
@@ -812,6 +812,7 @@ const enUS = {
     candidates: "Candidates",
     candidateActions: "Candidate actions",
     candidateWithNumber: "Candidate {{number}}",
+    variantWithNumber: "Variant {{number}}",
     checkingImageLibraries: "Checking image libraries...",
     checking: "Checking",
     checkingUpload: "Checking upload",
diff --git a/templates/assets/app/i18n/zh-TW.ts b/templates/assets/app/i18n/zh-TW.ts
index 28754acb62..6d4b9497a9 100644
--- a/templates/assets/app/i18n/zh-TW.ts
+++ b/templates/assets/app/i18n/zh-TW.ts
@@ -774,6 +774,7 @@ const messages = {
     candidates: "候選項",
     candidateActions: "候選項操作",
     candidateWithNumber: "候選項 {{number}}",
+    variantWithNumber: "變體 {{number}}",
     checkingImageLibraries: "正在檢查圖片資料庫...",
     checking: "正在檢查",
     checkingUpload: "正在檢查上傳",