diff --git a/app/admin/[character]/[page]/page.tsx b/app/admin/[character]/[page]/page.tsx
index 5b58451..49bdeac 100644
--- a/app/admin/[character]/[page]/page.tsx
+++ b/app/admin/[character]/[page]/page.tsx
@@ -24,6 +24,8 @@ const sections = [
   "extra",
 ] as const;
 
+export const instant = false;
+
 export default async function StructuredEditorPage({
   params,
 }: {
diff --git a/components/admin/editor-presence.tsx b/components/admin/editor-presence.tsx
index 4e47898..dad118b 100644
--- a/components/admin/editor-presence.tsx
+++ b/components/admin/editor-presence.tsx
@@ -12,7 +12,7 @@ export function EditorPresence({ guideId }: { guideId: string }) {
     <div className="flex flex-wrap items-center gap-1" aria-live="polite">
       <Badge variant="secondary">
         <UsersIcon data-icon="inline-start" />
-        Editing {editors.length || (presence ? 0 : "—")}
+        Editing {editors.length || (presence ? 0 : "")}
       </Badge>
       {editors.map((editor) => (
         <Badge key={editor.userId} variant="outline">{editor.name}</Badge>
diff --git a/components/admin/extra-sheet-editor.tsx b/components/admin/extra-sheet-editor.tsx
index b5d9d4a..8e77684 100644
--- a/components/admin/extra-sheet-editor.tsx
+++ b/components/admin/extra-sheet-editor.tsx
@@ -8,10 +8,11 @@ import {
   Columns3Icon,
   PlusIcon,
   PencilIcon,
+  PaletteIcon,
   Rows3Icon,
   Trash2Icon,
 } from "lucide-react";
-import Spreadsheet, { type ColumnIndicatorProps, type DataEditorProps, type Point } from "react-spreadsheet";
+import Spreadsheet, { type ColumnIndicatorProps, type DataEditorProps, type Point, type Selection } from "react-spreadsheet";
 import { useCallback, useEffect, useMemo, useState } from "react";
 
 import { DeleteConfirmationDialog } from "@/components/admin/delete-confirmation-dialog";
@@ -48,16 +49,21 @@ import {
   moveExtraSheetRow,
   nextExtraSheetColumnLabel,
   updateExtraSheetCell,
+  updateExtraSheetCells,
   type ExtraSheet,
   type ExtraSheetMatrix,
 } from "@/lib/guides/extra-sheet";
 import { normalizeExtraRichText } from "@/lib/rich-text";
 
 type DeleteTarget = "column" | "row" | null;
+const DEFAULT_CELL_BACKGROUND = "#16A34A";
 
-function LiteralDataViewer({ cell }: { cell?: { value?: unknown } }) {
+function LiteralDataViewer({ cell }: { cell?: { value?: unknown; backgroundColor?: string } }) {
   return (
-    <div className="Spreadsheet__data-viewer Spreadsheet__data-viewer--preserve-breaks">
+    <div
+      className="Spreadsheet__data-viewer Spreadsheet__data-viewer--preserve-breaks size-full"
+      style={cell?.backgroundColor ? { backgroundColor: cell.backgroundColor } : undefined}
+    >
       <RichTextContent html={normalizeExtraRichText(String(cell?.value ?? ""))} />
     </div>
   );
@@ -119,6 +125,7 @@ export function ExtraSheetEditor({
   const [removeOpen, setRemoveOpen] = useState(false);
   const [cellDialogOpen, setCellDialogOpen] = useState(false);
   const [cellDraft, setCellDraft] = useState("");
+  const [selection, setSelection] = useState<Selection | null>(null);
   const matrix = useMemo(() => extraSheetToMatrix(value), [value]);
   const activeColumn = value.columns[active.column];
   const activeRow = value.rows[active.row];
@@ -127,6 +134,11 @@ export function ExtraSheetEditor({
     index !== (renaming ? active.column : -1) &&
     column.label.toLocaleLowerCase() === normalizedLabel,
   );
+  const selectedPoints = useCallback(() => {
+    const range = selection?.toRange(matrix);
+    return range ? Array.from(range) : [active];
+  }, [active, matrix, selection]);
+  const selectedCount = selectedPoints().length;
 
   const openAddColumn = () => {
     setRenaming(false);
@@ -200,7 +212,30 @@ export function ExtraSheetEditor({
         </Button>
         <Button type="button" variant="outline" size="sm" onClick={openActiveCellEditor}>
           <PencilIcon data-icon="inline-start" />
-          แก้ไขเซลล์
+          แก้ไข {selectedCount > 1 ? `${selectedCount} เซลล์` : "เซลล์"}
+        </Button>
+        <label className="relative">
+          <Button type="button" variant="outline" size="sm" render={<span />} nativeButton={false}>
+            <PaletteIcon data-icon="inline-start" />
+            สีพื้นหลัง {selectedCount > 1 ? `${selectedCount} เซลล์` : "เซลล์"}
+          </Button>
+          <input
+            type="color"
+            aria-label="เลือกสีพื้นหลังเซลล์"
+            className="absolute inset-0 cursor-pointer opacity-0"
+            value={activeRow?.backgrounds[activeColumn?.id ?? ""] ?? DEFAULT_CELL_BACKGROUND}
+            onChange={(event) => onChange(updateExtraSheetCells(value, selectedPoints(), {
+              backgroundColor: event.target.value,
+            }))}
+          />
+        </label>
+        <Button
+          type="button"
+          variant="ghost"
+          size="sm"
+          onClick={() => onChange(updateExtraSheetCells(value, selectedPoints(), { backgroundColor: null }))}
+        >
+          ล้างสีพื้นหลัง
         </Button>
         <DropdownMenu>
           <DropdownMenuTrigger
@@ -300,6 +335,7 @@ export function ExtraSheetEditor({
           DataViewer={LiteralDataViewer}
           DataEditor={dataEditor}
           onActivate={setActive}
+          onSelect={setSelection}
           onChange={(next) => onChange(matrixToExtraSheet(
             value,
             next as ExtraSheetMatrix,
@@ -313,13 +349,17 @@ export function ExtraSheetEditor({
           <DialogHeader>
             <DialogTitle>แก้ไขเซลล์</DialogTitle>
             <DialogDescription>
-              แถว {active.row + 1} · {activeColumn?.label ?? "คอลัมน์"}
+              {selectedCount > 1
+                ? `นำข้อความเดียวกันไปใช้กับ ${selectedCount} เซลล์ที่เลือก`
+                : `แถว ${active.row + 1} · ${activeColumn?.label ?? "คอลัมน์"}`}
             </DialogDescription>
           </DialogHeader>
           <RichTextEditor value={cellDraft} onChange={setCellDraft} showBubbleMenu={false} />
           <DialogFooter showCloseButton>
             <Button type="button" onClick={() => {
-              onChange(updateExtraSheetCell(value, active.row, active.column, cellDraft));
+              onChange(selectedCount > 1
+                ? updateExtraSheetCells(value, selectedPoints(), { value: cellDraft })
+                : updateExtraSheetCell(value, active.row, active.column, cellDraft));
               setCellDialogOpen(false);
             }}>บันทึกเซลล์</Button>
           </DialogFooter>
diff --git a/components/admin/glossary-manager.tsx b/components/admin/glossary-manager.tsx
index 8f1f4e9..f24f9fd 100644
--- a/components/admin/glossary-manager.tsx
+++ b/components/admin/glossary-manager.tsx
@@ -16,8 +16,10 @@ import { Input } from "@/components/ui/input";
 import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Spinner } from "@/components/ui/spinner";
 import type { GlossaryKind } from "@/lib/glossary";
+import { rarityGradientClass } from "@/lib/catalog/rarity";
+import { cn } from "@/lib/utils";
 
-type CatalogItem = { key: string; name: string; imageUrl: string };
+type CatalogItem = { key: string; name: string; imageUrl: string; rarity?: number | null };
 type Alias = { id: string; kind: string; catalogKey: string; alias: string };
 
 const kindLabels: Record<GlossaryKind, string> = {
@@ -101,7 +103,10 @@ export function GlossaryManager({
                   <ComboboxList>
                     {(catalogItem) => (
                       <ComboboxItem key={catalogItem.key} value={catalogItem}>
-                        <span className="relative size-8 shrink-0 overflow-hidden rounded-md bg-muted">
+                        <span className={cn(
+                          "relative size-8 shrink-0 overflow-hidden rounded-md bg-muted",
+                          rarityGradientClass(catalogItem.rarity),
+                        )}>
                           <Image src={catalogItem.imageUrl} alt="" fill className="object-contain" />
                         </span>
                         {catalogItem.name}
diff --git a/components/admin/guide-visibility-control.tsx b/components/admin/guide-visibility-control.tsx
index 85dbe96..4cca262 100644
--- a/components/admin/guide-visibility-control.tsx
+++ b/components/admin/guide-visibility-control.tsx
@@ -89,7 +89,7 @@ export function GuideVisibilityControl({
           onClick={() => updateVisibility(true)}
         >
           {pending ? <Spinner data-icon="inline-start" /> : <EyeIcon data-icon="inline-start" />}
-          Publish
+          Make Publish
         </Button>
       )}
     </div>
diff --git a/components/public/structured-guide.tsx b/components/public/structured-guide.tsx
index 6b757c5..a166afb 100644
--- a/components/public/structured-guide.tsx
+++ b/components/public/structured-guide.tsx
@@ -1285,7 +1285,13 @@ function ExtraSectionContent({
                     {row.sheet.rows.map((sheetRow) => (
                       <TableRow key={sheetRow.id}>
                         {row.sheet!.columns.map((column) => (
-                          <TableCell key={column.id} className="border-l first:border-l-0 whitespace-normal">
+                          <TableCell
+                            key={column.id}
+                            className="border-l first:border-l-0 whitespace-normal"
+                            style={sheetRow.backgrounds[column.id]
+                              ? { backgroundColor: sheetRow.backgrounds[column.id] }
+                              : undefined}
+                          >
                             <RichTextContent html={normalizeExtraRichText(sheetRow.cells[column.id] ?? "")} />
                           </TableCell>
                         ))}
diff --git a/components/public/visitor-presence.tsx b/components/public/visitor-presence.tsx
index 689588e..66feba5 100644
--- a/components/public/visitor-presence.tsx
+++ b/components/public/visitor-presence.tsx
@@ -11,11 +11,11 @@ export function VisitorPresence({ guideId }: { guideId?: string }) {
     <div className="flex items-center gap-1" aria-live="polite">
       <Badge variant="secondary" title="ผู้เข้าชมทั้งหมดที่กำลังออนไลน์">
         <UsersIcon data-icon="inline-start" />
-        ทั้งหมด {counts?.global ?? "—"}
+        ทั้งหมด {counts?.global ?? ""}
       </Badge>
       {guideId ? (
         <Badge variant="outline" title="ผู้เข้าชม Guide นี้ที่กำลังออนไลน์">
-          Guide นี้ {counts?.guide ?? "—"}
+          Guide นี้ {counts?.guide ?? ""}
         </Badge>
       ) : null}
     </div>
diff --git a/lib/guides/extra-sheet.test.ts b/lib/guides/extra-sheet.test.ts
index 48c97fa..dcabf7a 100644
--- a/lib/guides/extra-sheet.test.ts
+++ b/lib/guides/extra-sheet.test.ts
@@ -13,6 +13,7 @@ import {
   moveExtraSheetRow,
   normalizeExtraSheetRichText,
   updateExtraSheetCell,
+  updateExtraSheetCells,
 } from "@/lib/guides/extra-sheet";
 
 function idFactory() {
@@ -26,8 +27,8 @@ describe("Extra sheet", () => {
     expect(extraSheetSchema.safeParse(sheet).success).toBe(true);
     expect(sheet.columns.map((column) => column.label)).toEqual(["คอลัมน์ 1", "คอลัมน์ 2"]);
     expect(extraSheetToMatrix(sheet)).toEqual([
-      [{ value: "" }, { value: "" }],
-      [{ value: "" }, { value: "" }],
+      [{ value: "", backgroundColor: undefined }, { value: "", backgroundColor: undefined }],
+      [{ value: "", backgroundColor: undefined }, { value: "", backgroundColor: undefined }],
     ]);
   });
 
@@ -42,8 +43,8 @@ describe("Extra sheet", () => {
 
     const moved = moveExtraSheetRow(moveExtraSheetColumn(sheet, 0, 1), 0, 1);
     expect(extraSheetToMatrix(moved)).toEqual([
-      [{ value: "" }, { value: "C" }],
-      [{ value: "B" }, { value: "A" }],
+      [{ value: "", backgroundColor: undefined }, { value: "C", backgroundColor: undefined }],
+      [{ value: "B", backgroundColor: undefined }, { value: "A", backgroundColor: undefined }],
     ]);
   });
 
@@ -60,7 +61,10 @@ describe("Extra sheet", () => {
 
     const reduced = deleteExtraSheetColumn(expanded, 2);
     expect(reduced.rows.every((row) => !(columnId in row.cells))).toBe(true);
-    expect(deleteExtraSheetRow(reduced, 2).rows).toHaveLength(2);
+    const secondRowId = reduced.rows[1].id;
+    const withoutFirstRow = deleteExtraSheetRow(reduced, 0);
+    expect(withoutFirstRow.rows).toHaveLength(2);
+    expect(withoutFirstRow.rows[0].id).toBe(secondRowId);
   });
 
   it("expands rows and columns when a pasted matrix is larger", () => {
@@ -102,4 +106,20 @@ describe("Extra sheet", () => {
       "<p><strong>safe</strong></p>",
     );
   });
+
+  it("updates rich text and backgrounds across a cell selection", () => {
+    const sheet = createExtraSheet(idFactory());
+    const updated = updateExtraSheetCells(sheet, [
+      { row: 0, column: 0 },
+      { row: 1, column: 1 },
+    ], { value: "<p>Shared</p>", backgroundColor: "#16A34A" });
+
+    expect(extraSheetToMatrix(updated)).toEqual([
+      [{ value: "<p>Shared</p>", backgroundColor: "#16A34A" }, { value: "", backgroundColor: undefined }],
+      [{ value: "", backgroundColor: undefined }, { value: "<p>Shared</p>", backgroundColor: "#16A34A" }],
+    ]);
+    expect(extraSheetSchema.safeParse(updated).success).toBe(true);
+    expect(updateExtraSheetCells(updated, [{ row: 0, column: 0 }], { backgroundColor: null })
+      .rows[0].backgrounds).toEqual({});
+  });
 });
diff --git a/lib/guides/extra-sheet.ts b/lib/guides/extra-sheet.ts
index 2f06559..c456d7f 100644
--- a/lib/guides/extra-sheet.ts
+++ b/lib/guides/extra-sheet.ts
@@ -12,6 +12,7 @@ export const extraSheetSchema = z.strictObject({
   rows: z.array(z.strictObject({
     id: extraSheetId,
     cells: z.record(z.string(), z.string().max(10_000)),
+    backgrounds: z.record(z.string(), z.string().regex(/^#[0-9A-Fa-f]{6}$/)).default({}),
   })).min(1),
 }).superRefine((sheet, context) => {
   const columnIds = new Set(sheet.columns.map((column) => column.id));
@@ -27,7 +28,7 @@ export const extraSheetSchema = z.strictObject({
     context.addIssue({ code: "custom", path: ["rows"], message: "รหัสแถวต้องไม่ซ้ำกัน" });
   }
   sheet.rows.forEach((row, rowIndex) => {
-    Object.keys(row.cells).forEach((columnId) => {
+    [...Object.keys(row.cells), ...Object.keys(row.backgrounds)].forEach((columnId) => {
       if (!columnIds.has(columnId)) {
         context.addIssue({
           code: "custom",
@@ -41,8 +42,9 @@ export const extraSheetSchema = z.strictObject({
 
 export type ExtraSheet = z.output<typeof extraSheetSchema>;
 
-export type ExtraSheetCell = { value: string };
+export type ExtraSheetCell = { value: string; backgroundColor?: string };
 export type ExtraSheetMatrix = Array<Array<ExtraSheetCell | undefined>>;
+type SheetPoint = { row: number; column: number };
 
 export function nextExtraSheetColumnLabel(columns: ExtraSheet["columns"]): string {
   const labels = new Set(columns.map((column) => column.label.toLocaleLowerCase()));
@@ -61,13 +63,17 @@ export function createExtraSheet(createId: (prefix: string) => string): ExtraShe
     rows: [1, 2].map(() => ({
       id: createId("extra-sheet-row"),
       cells: Object.fromEntries(columns.map((column) => [column.id, ""])),
+      backgrounds: {},
     })),
   };
 }
 
 export function extraSheetToMatrix(sheet: ExtraSheet): ExtraSheetMatrix {
   return sheet.rows.map((row) =>
-    sheet.columns.map((column) => ({ value: row.cells[column.id] ?? "" })),
+    sheet.columns.map((column) => ({
+      value: row.cells[column.id] ?? "",
+      backgroundColor: row.backgrounds[column.id],
+    })),
   );
 }
 
@@ -94,6 +100,11 @@ export function matrixToExtraSheet(
       column.id,
       String(matrix[rowIndex]?.[columnIndex]?.value ?? ""),
     ])),
+    backgrounds: Object.fromEntries(columns.flatMap((column, columnIndex) => {
+      const backgroundColor = matrix[rowIndex]?.[columnIndex]?.backgroundColor
+        ?? sheet.rows[rowIndex]?.backgrounds[column.id];
+      return backgroundColor ? [[column.id, backgroundColor]] : [];
+    })),
   }));
   return { columns, rows };
 }
@@ -115,6 +126,7 @@ export function addExtraSheetRow(sheet: ExtraSheet, id: string): ExtraSheet {
     rows: [...sheet.rows, {
       id,
       cells: Object.fromEntries(sheet.columns.map((column) => [column.id, ""])),
+      backgrounds: {},
     }],
   };
 }
@@ -152,6 +164,7 @@ export function deleteExtraSheetColumn(sheet: ExtraSheet, index: number): ExtraS
     rows: sheet.rows.map((row) => ({
       ...row,
       cells: Object.fromEntries(Object.entries(row.cells).filter(([key]) => key !== columnId)),
+      backgrounds: Object.fromEntries(Object.entries(row.backgrounds).filter(([key]) => key !== columnId)),
     })),
   };
 }
@@ -178,6 +191,28 @@ export function updateExtraSheetCell(
   };
 }
 
+export function updateExtraSheetCells(
+  sheet: ExtraSheet,
+  points: Iterable<SheetPoint>,
+  update: { value?: string; backgroundColor?: string | null },
+): ExtraSheet {
+  const selected = new Set(Array.from(points, ({ row, column }) => `${row}:${column}`));
+  return {
+    ...sheet,
+    rows: sheet.rows.map((row, rowIndex) => {
+      const cells = { ...row.cells };
+      const backgrounds = { ...row.backgrounds };
+      sheet.columns.forEach((column, columnIndex) => {
+        if (!selected.has(`${rowIndex}:${columnIndex}`)) return;
+        if (update.value !== undefined) cells[column.id] = update.value;
+        if (update.backgroundColor === null) delete backgrounds[column.id];
+        else if (update.backgroundColor !== undefined) backgrounds[column.id] = update.backgroundColor;
+      });
+      return { ...row, cells, backgrounds };
+    }),
+  };
+}
+
 export function normalizeExtraSheetRichText(sheet: ExtraSheet): ExtraSheet {
   return {
     ...sheet,