diff --git a/dashboard/src/components/agent-manager/AgentFormModal.tsx b/dashboard/src/components/agent-manager/AgentFormModal.tsx
index 6fa96bf16..6e78b3f5c 100644
--- a/dashboard/src/components/agent-manager/AgentFormModal.tsx
+++ b/dashboard/src/components/agent-manager/AgentFormModal.tsx
@@ -311,10 +311,11 @@ export default function AgentFormModal({
             )}
             <div className="grid grid-cols-[72px_minmax(0,1fr)] gap-2 md:grid-cols-[72px_minmax(0,1fr)_minmax(0,1fr)]">
               <div>
-                <label className="block text-xs mb-1.5 font-medium" style={{ color: "var(--th-text-secondary)" }}>
+                <label htmlFor="agent-emoji-picker" className="block text-xs mb-1.5 font-medium" style={{ color: "var(--th-text-secondary)" }}>
                   {tr("이모지", "Emoji")}
                 </label>
                 <EmojiPicker
+                  id="agent-emoji-picker"
                   value={formValues.avatar_emoji}
                   onChange={(emoji) => setValue("avatar_emoji", emoji, { shouldDirty: true, shouldValidate: true })}
                   aria-label={
diff --git a/dashboard/src/components/agent-manager/DepartmentFormModal.tsx b/dashboard/src/components/agent-manager/DepartmentFormModal.tsx
index c17e3848c..d5e0df57c 100644
--- a/dashboard/src/components/agent-manager/DepartmentFormModal.tsx
+++ b/dashboard/src/components/agent-manager/DepartmentFormModal.tsx
@@ -312,10 +312,11 @@ export default function DepartmentFormModal({
             <div className="space-y-4">
               <div className="flex items-start gap-3">
                 <div>
-                  <label className="block text-xs mb-1.5 font-medium" style={{ color: "var(--th-text-secondary)" }}>
+                  <label htmlFor="dept-icon-picker" className="block text-xs mb-1.5 font-medium" style={{ color: "var(--th-text-secondary)" }}>
                     {tr("아이콘", "Icon")}
                   </label>
                   <EmojiPicker
+                    id="dept-icon-picker"
                     value={form.icon}
                     onChange={(emoji) => setValue("icon", emoji, { shouldDirty: true, shouldValidate: true })}
                     aria-label={
@@ -353,9 +354,9 @@ export default function DepartmentFormModal({
               </div>
 
               <div role="radiogroup" aria-labelledby="dept-theme-color-label">
-                <label id="dept-theme-color-label" className="block text-xs mb-1.5 font-medium" style={{ color: "var(--th-text-secondary)" }}>
+                <div id="dept-theme-color-label" className="block text-xs mb-1.5 font-medium" style={{ color: "var(--th-text-secondary)" }}>
                   {tr("테마 색상", "Theme Color")}
-                </label>
+                </div>
                 <div className="flex gap-2 flex-wrap">
                   {DEPT_COLORS.map((c, index) => (
                     <button
diff --git a/dashboard/src/components/agent-manager/EmojiPicker.tsx b/dashboard/src/components/agent-manager/EmojiPicker.tsx
index 1f22498ee..166d5aa12 100644
--- a/dashboard/src/components/agent-manager/EmojiPicker.tsx
+++ b/dashboard/src/components/agent-manager/EmojiPicker.tsx
@@ -33,12 +33,14 @@ export function StackedSpriteIcon({ sprites }: { sprites: [number, number] }) {
 }
 
 export default function EmojiPicker({
+  id,
   value,
   onChange,
   size = "md",
   "aria-label": ariaLabel,
   dialogLabel,
 }: {
+  id?: string;
   value: string;
   onChange: (emoji: string) => void;
   size?: "sm" | "md";
@@ -86,6 +88,7 @@ export default function EmojiPicker({
   return (
     <div className="relative" ref={ref}>
       <button
+        id={id}
         ref={buttonRef}
         type="button"
         onClick={() => setOpen(!open)}