diff --git a/components/admin/guide-section-editor.tsx b/components/admin/guide-section-editor.tsx
index 84a002c..76c0632 100644
--- a/components/admin/guide-section-editor.tsx
+++ b/components/admin/guide-section-editor.tsx
@@ -68,6 +68,12 @@ import {
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { Checkbox } from "@/components/ui/checkbox";
+import {
+  ColorPicker,
+  ColorPickerEyeDropper,
+  ColorPickerHue,
+  ColorPickerSelection,
+} from "@/components/ui/color-picker";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import {
   Card,
@@ -105,6 +111,7 @@ import {
   FieldSet,
 } from "@/components/ui/field";
 import { Input } from "@/components/ui/input";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import {
   Select,
   SelectContent,
@@ -4894,53 +4901,66 @@ function ExtraEditor({ guide, extraSectionId, initial, characters, weapons, arti
                           ) || undefined}
                         >
                           <FieldLabel>สีพื้นหลัง</FieldLabel>
-                          <Input
-                            type="color"
-                            value={row.backgroundColor ?? DEFAULT_EXTRA_BACKGROUND_COLOR}
-                            aria-invalid={extraIssue(
-                              "sections",
-                              sectionIndex,
-                              "rows",
-                              rowIndex,
-                              "backgroundColor",
-                            )}
-                            onClick={() => {
-                              if (row.backgroundColor !== null) return;
-                              setSections(
-                                sections.map((item, index) =>
-                                  index === sectionIndex
-                                    ? {
-                                        ...item,
-                                        rows: item.rows.map((candidate, inner) =>
-                                          inner === rowIndex
-                                            ? {
-                                                ...candidate,
-                                                backgroundColor: DEFAULT_EXTRA_BACKGROUND_COLOR,
-                                              }
-                                            : candidate,
-                                        ),
-                                      }
-                                    : item,
-                                ),
-                              );
-                            }}
-                            onChange={(event) =>
-                              setSections(
-                                sections.map((item, index) =>
-                                  index === sectionIndex
-                                    ? {
-                                        ...item,
-                                        rows: item.rows.map((candidate, inner) =>
-                                          inner === rowIndex
-                                            ? { ...candidate, backgroundColor: event.target.value }
-                                            : candidate,
-                                        ),
-                                      }
-                                    : item,
-                                ),
-                              )
-                            }
-                          />
+                          <Popover>
+                            <PopoverTrigger
+                              render={
+                                <Button
+                                  type="button"
+                                  variant="outline"
+                                  size="icon"
+                                  aria-label="เลือกสีพื้นหลังการ์ด"
+                                  aria-invalid={extraIssue(
+                                    "sections",
+                                    sectionIndex,
+                                    "rows",
+                                    rowIndex,
+                                    "backgroundColor",
+                                  )}
+                                >
+                                  <span
+                                    className="size-5 rounded-sm border"
+                                    style={{
+                                      backgroundColor:
+                                        row.backgroundColor ?? DEFAULT_EXTRA_BACKGROUND_COLOR,
+                                    }}
+                                  />
+                                </Button>
+                              }
+                            />
+                            <PopoverContent align="start" className="w-64">
+                              <ColorPicker
+                                value={row.backgroundColor ?? DEFAULT_EXTRA_BACKGROUND_COLOR}
+                                className="h-auto"
+                                onChange={(color) => {
+                                  if (!Array.isArray(color)) return;
+                                  const backgroundColor = `#${color
+                                    .slice(0, 3)
+                                    .map((channel) =>
+                                      Math.round(channel).toString(16).padStart(2, "0"),
+                                    )
+                                    .join("")}`.toUpperCase();
+                                  setSections(
+                                    sections.map((item, index) =>
+                                      index === sectionIndex
+                                        ? {
+                                            ...item,
+                                            rows: item.rows.map((candidate, inner) =>
+                                              inner === rowIndex
+                                                ? { ...candidate, backgroundColor }
+                                                : candidate,
+                                            ),
+                                          }
+                                        : item,
+                                    ),
+                                  );
+                                }}
+                              >
+                                <ColorPickerSelection className="h-32" />
+                                <ColorPickerHue />
+                                <ColorPickerEyeDropper aria-label="ดูดสีจากหน้าจอ" />
+                              </ColorPicker>
+                            </PopoverContent>
+                          </Popover>
                         </Field>
                         <Button
                           type="button"
diff --git a/components/admin/guide-visibility-control.tsx b/components/admin/guide-visibility-control.tsx
index 2355f36..65be126 100644
--- a/components/admin/guide-visibility-control.tsx
+++ b/components/admin/guide-visibility-control.tsx
@@ -19,7 +19,6 @@ import {
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Spinner } from "@/components/ui/spinner";
-import { Textarea } from "@/components/ui/textarea";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { cn } from "@/lib/utils";
 
@@ -39,7 +38,6 @@ export function GuideVisibilityControl({
   const router = useRouter();
   const [pending, startTransition] = useTransition();
   const [open, setOpen] = useState(false);
-  const [publicationNote, setPublicationNote] = useState("");
   const [error, setError] = useState<string | null>(null);
 
   const updateVisibility = (nextPublic: boolean) => {
@@ -48,7 +46,6 @@ export function GuideVisibilityControl({
       const result = await setStructuredGuideVisibility(guideId, {
         isPublic: nextPublic,
         expectedVersion: version,
-        publicationNote,
       });
       if (result.status !== "saved") {
         const message = result.message ?? "เปลี่ยนสถานะ Guide ไม่สำเร็จ";
@@ -91,15 +88,6 @@ export function GuideVisibilityControl({
                 : "Guide จะแสดงบนหน้าเว็บไซต์และทุกคนจะเปิดดูผ่านลิงก์สาธารณะได้"}
             </AlertDialogDescription>
           </AlertDialogHeader>
-          {!isPublic ? (
-            <Textarea
-              value={publicationNote}
-              onChange={(event) => setPublicationNote(event.target.value)}
-              maxLength={500}
-              placeholder="สรุปสิ่งที่อัปเดต (ไม่บังคับ)"
-              aria-label="สรุปสิ่งที่อัปเดต"
-            />
-          ) : null}
           {error ? (
             <Alert variant="destructive">
               <AlertTitle>ยังเผยแพร่ไม่ได้</AlertTitle>