diff --git a/components/Agents/AgentEditDialog.tsx b/components/Agents/AgentEditDialog.tsx
index 703151aaa..d96ac363b 100644
--- a/components/Agents/AgentEditDialog.tsx
+++ b/components/Agents/AgentEditDialog.tsx
@@ -10,10 +10,11 @@ import {
 import { Button } from "@/components/ui/button";
 import { Pencil } from "lucide-react";
 import CreateAgentForm from "./CreateAgentForm";
-import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { useUserProvider } from "@/providers/UserProvder";
 import type { AgentTemplateRow } from "@/types/AgentTemplates";
 import { useState, useEffect } from "react";
+import { type CreateAgentFormData } from "./schemas";
+import { useAgentForm } from "@/hooks/useAgentForm";
+import { useEditAgentTemplate } from "@/hooks/useEditAgentTemplate";
 
 interface AgentEditDialogProps {
   agent: AgentTemplateRow;
@@ -21,68 +22,45 @@ interface AgentEditDialogProps {
 
 const AgentEditDialog: React.FC<AgentEditDialogProps> = ({ agent }) => {
   const [open, setOpen] = useState(false);
-  const { userData } = useUserProvider();
-  const queryClient = useQueryClient();
-  const [currentSharedEmails, setCurrentSharedEmails] = useState<string[]>(agent.shared_emails || []);
-
-  const editTemplate = useMutation({
-    mutationFn: async (values: {
-      title?: string;
-      description?: string;
-      prompt?: string;
-      tags?: string[];
-      isPrivate?: boolean;
-      shareEmails?: string[];
-    }) => {
-      // Combine existing emails (after removals) with new emails
-      const finalShareEmails = values.shareEmails && values.shareEmails.length > 0
-        ? [...currentSharedEmails, ...values.shareEmails]
-        : currentSharedEmails;
-
-      const res = await fetch("/api/agent-templates", {
-        method: "PATCH",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          id: agent.id,
-          userId: userData?.id,
-          title: values.title,
-          description: values.description,
-          prompt: values.prompt,
-          tags: values.tags,
-          isPrivate: values.isPrivate,
-          shareEmails: finalShareEmails,
-        }),
-      });
-      if (!res.ok) throw new Error("Failed to update template");
-      return res.json();
-    },
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["agent-templates"] });
-      setOpen(false);
-    },
+  const [currentSharedEmails, setCurrentSharedEmails] = useState<string[]>(
+    agent.shared_emails || []
+  );
+  const form = useAgentForm({
+    title: agent.title,
+    description: agent.description,
+    prompt: agent.prompt,
+    tags: agent.tags ?? [],
+    isPrivate: agent.is_private,
+    shareEmails: [],
+  });
+  const editTemplate = useEditAgentTemplate({
+    agent,
+    currentSharedEmails,
+    onSuccess: () => setOpen(false),
   });
-
-  const onSubmit = (values: {
-    title: string;
-    description: string;
-    prompt: string;
-    tags: string[];
-    isPrivate: boolean;
-    shareEmails?: string[];
-  }) => {
-    editTemplate.mutate(values);
-  };
 
   const handleExistingEmailsChange = (emails: string[]) => {
     setCurrentSharedEmails(emails);
   };
 
-  // Reset current shared emails when dialog opens or agent changes
+  // Reset form state when the dialog opens for a specific agent, but do not
+  // clobber in-progress edits on background refetches.
   useEffect(() => {
     if (open) {
       setCurrentSharedEmails(agent.shared_emails || []);
+      form.reset({
+        title: agent.title,
+        description: agent.description,
+        prompt: agent.prompt,
+        tags: agent.tags ?? [],
+        isPrivate: agent.is_private,
+        shareEmails: [],
+      });
     }
-  }, [open, agent.shared_emails]);
+    // Reset only when the dialog opens for a different agent identity.
+    // Depending on all agent fields would wipe in-progress edits on background refetch.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open, agent.id, form]);
 
   return (
     <Dialog open={open} onOpenChange={setOpen}>
@@ -97,16 +75,9 @@ const AgentEditDialog: React.FC<AgentEditDialogProps> = ({ agent }) => {
           <DialogDescription>Update the agent template details.</DialogDescription>
         </DialogHeader>
         <CreateAgentForm
-          onSubmit={onSubmit}
+          form={form}
+          onSubmit={(values: CreateAgentFormData) => editTemplate.mutate(values)}
           isSubmitting={editTemplate.isPending}
-          initialValues={{
-            title: agent.title,
-            description: agent.description,
-            prompt: agent.prompt,
-            tags: agent.tags ?? [],
-            isPrivate: agent.is_private,
-            shareEmails: [],
-          }}
           existingSharedEmails={currentSharedEmails}
           onExistingEmailsChange={handleExistingEmailsChange}
           submitLabel="Save changes"
@@ -117,5 +88,3 @@ const AgentEditDialog: React.FC<AgentEditDialogProps> = ({ agent }) => {
 };
 
 export default AgentEditDialog;
-
-
diff --git a/components/Agents/AgentVisibilityControl.tsx b/components/Agents/AgentVisibilityControl.tsx
new file mode 100644
index 000000000..6872dcdb5
--- /dev/null
+++ b/components/Agents/AgentVisibilityControl.tsx
@@ -0,0 +1,39 @@
+import { UseFormReturn } from "react-hook-form";
+import { Switch } from "@/components/ui/switch";
+import { CreateAgentFormData } from "./schemas";
+
+interface AgentVisibilityControlProps {
+  form: UseFormReturn<CreateAgentFormData>;
+}
+
+const AgentVisibilityControl = ({ form }: AgentVisibilityControlProps) => {
+  const isPrivate = form.watch("isPrivate");
+
+  return (
+    <div className="flex flex-wrap items-center gap-3">
+      <span
+        className={`text-sm ${!isPrivate ? "text-foreground" : "text-muted-foreground"}`}
+      >
+        Public
+      </span>
+      <Switch
+        id="isPrivate"
+        checked={isPrivate}
+        aria-label={isPrivate ? "Private agent" : "Public agent"}
+        onCheckedChange={(checked) =>
+          form.setValue("isPrivate", checked, {
+            shouldDirty: true,
+            shouldValidate: true,
+          })
+        }
+      />
+      <span
+        className={`text-sm ${isPrivate ? "text-foreground" : "text-muted-foreground"}`}
+      >
+        Private
+      </span>
+    </div>
+  );
+};
+
+export default AgentVisibilityControl;
diff --git a/components/Agents/Agents.tsx b/components/Agents/Agents.tsx
index f9f12c672..a6e8be113 100644
--- a/components/Agents/Agents.tsx
+++ b/components/Agents/Agents.tsx
@@ -6,8 +6,8 @@ import { useAgentData } from "./useAgentData";
 import { useAgentToggleFavorite } from "./useAgentToggleFavorite";
 import type { Agent } from "./useAgentData";
 import CreateAgentButton from "./CreateAgentButton";
-import { Switch } from "@/components/ui/switch";
 import AgentsSkeleton from "./AgentsSkeleton";
+import AgentsVisibilityFilter from "./AgentsVisibilityFilter";
 
 const Agents = () => {
   const { push } = useRouter();
@@ -35,12 +35,10 @@ const Agents = () => {
           Agents
         </h1>
         <div className="flex items-center gap-4">
-          <div className="flex items-center gap-2">
-            <span className="text-sm text-muted-foreground dark:text-muted-foreground">
-              {isPrivate ? "Private" : "Public"}
-            </span>
-            <Switch checked={isPrivate} onCheckedChange={() => togglePrivate()} />
-          </div>
+          <AgentsVisibilityFilter
+            isPrivate={isPrivate}
+            togglePrivate={togglePrivate}
+          />
           <CreateAgentButton />
         </div>
       </div>
diff --git a/components/Agents/AgentsVisibilityFilter.tsx b/components/Agents/AgentsVisibilityFilter.tsx
new file mode 100644
index 000000000..f3905ad46
--- /dev/null
+++ b/components/Agents/AgentsVisibilityFilter.tsx
@@ -0,0 +1,52 @@
+import { cn } from "@/lib/utils";
+
+interface AgentsVisibilityFilterProps {
+  isPrivate: boolean;
+  togglePrivate: () => void;
+}
+
+const AgentsVisibilityFilter = ({
+  isPrivate,
+  togglePrivate,
+}: AgentsVisibilityFilterProps) => {
+  return (
+    <div
+      role="group"
+      aria-label="Agent visibility filter"
+      className="inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground"
+    >
+      <button
+        type="button"
+        aria-pressed={!isPrivate}
+        onClick={() => {
+          if (isPrivate) togglePrivate();
+        }}
+        className={cn(
+          "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium transition-all cursor-pointer",
+          !isPrivate
+            ? "bg-background text-foreground shadow"
+            : "text-muted-foreground hover:text-foreground"
+        )}
+      >
+        Public
+      </button>
+      <button
+        type="button"
+        aria-pressed={isPrivate}
+        onClick={() => {
+          if (!isPrivate) togglePrivate();
+        }}
+        className={cn(
+          "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium transition-all cursor-pointer",
+          isPrivate
+            ? "bg-background text-foreground shadow"
+            : "text-muted-foreground hover:text-foreground"
+        )}
+      >
+        Private
+      </button>
+    </div>
+  );
+};
+
+export default AgentsVisibilityFilter;
diff --git a/components/Agents/CreateAgentDialog.tsx b/components/Agents/CreateAgentDialog.tsx
index bbcac6a10..c406ad264 100644
--- a/components/Agents/CreateAgentDialog.tsx
+++ b/components/Agents/CreateAgentDialog.tsx
@@ -7,10 +7,11 @@ import {
   DialogTrigger,
 } from "@/components/ui/dialog";
 import CreateAgentForm from "./CreateAgentForm";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { type CreateAgentFormData } from "./schemas";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { useUserProvider } from "@/providers/UserProvder";
+import { useAgentForm } from "@/hooks/useAgentForm";
 
 interface CreateAgentDialogProps {
   children: React.ReactNode;
@@ -20,6 +21,7 @@ const CreateAgentDialog = ({ children }: CreateAgentDialogProps) => {
   const [open, setOpen] = useState(false);
   const { userData } = useUserProvider();
   const queryClient = useQueryClient();
+  const form = useAgentForm();
 
   const createTemplate = useMutation({
     mutationFn: async (values: CreateAgentFormData) => {
@@ -44,6 +46,12 @@ const CreateAgentDialog = ({ children }: CreateAgentDialogProps) => {
     createTemplate.mutate(values);
   };
 
+  useEffect(() => {
+    if (!open) {
+      form.reset();
+    }
+  }, [form, open]);
+
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>{children}</DialogTrigger>
@@ -56,7 +64,11 @@ const CreateAgentDialog = ({ children }: CreateAgentDialogProps) => {
             Create a new intelligent agent to help manage your roster tasks.
           </DialogDescription>
         </DialogHeader>
-        <CreateAgentForm onSubmit={onSubmit} isSubmitting={createTemplate.isPending} />
+        <CreateAgentForm
+          form={form}
+          onSubmit={onSubmit}
+          isSubmitting={createTemplate.isPending}
+        />
       </DialogContent>
     </Dialog>
   );
diff --git a/components/Agents/CreateAgentForm.tsx b/components/Agents/CreateAgentForm.tsx
index 03ceb38b4..8a48f21f5 100644
--- a/components/Agents/CreateAgentForm.tsx
+++ b/components/Agents/CreateAgentForm.tsx
@@ -1,45 +1,27 @@
-import { useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useEffect } from "react";
-import { createAgentSchema, type CreateAgentFormData } from "./schemas";
+import { UseFormReturn } from "react-hook-form";
+import { type CreateAgentFormData } from "./schemas";
 import FormFields from "./FormFields";
 import TagSelector from "./TagSelector";
 import PrivacySection from "./PrivacySection";
 import SubmitButton from "./SubmitButton";
 
 interface CreateAgentFormProps {
+  form: UseFormReturn<CreateAgentFormData>;
   onSubmit: (values: CreateAgentFormData) => void;
   isSubmitting?: boolean;
-  initialValues?: Partial<CreateAgentFormData>;
   submitLabel?: string;
   existingSharedEmails?: string[];
   onExistingEmailsChange?: (emails: string[]) => void;
 }
 
-const CreateAgentForm = ({ onSubmit, isSubmitting, initialValues, submitLabel, existingSharedEmails, onExistingEmailsChange }: CreateAgentFormProps) => {
-  const form = useForm<CreateAgentFormData>({
-    resolver: zodResolver(createAgentSchema),
-    defaultValues: {
-      title: initialValues?.title ?? "",
-      description: initialValues?.description ?? "",
-      prompt: initialValues?.prompt ?? "",
-      tags: initialValues?.tags ?? [],
-      isPrivate: initialValues?.isPrivate ?? false,
-      shareEmails: initialValues?.shareEmails ?? [],
-    },
-  });
-
-  const isPrivate = form.watch("isPrivate");
-
-  // Ensure shareEmails is initialized when private is toggled
-  useEffect(() => {
-    if (!isPrivate) {
-      form.setValue("shareEmails", []);
-    } else if (!form.getValues("shareEmails")) {
-      form.setValue("shareEmails", []);
-    }
-  }, [isPrivate, form]);
-
+const CreateAgentForm = ({
+  form,
+  onSubmit,
+  isSubmitting,
+  submitLabel,
+  existingSharedEmails,
+  onExistingEmailsChange,
+}: CreateAgentFormProps) => {
   return (
     <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
       <FormFields form={form} />
diff --git a/components/Agents/EmailShareInput.tsx b/components/Agents/EmailShareInput.tsx
index 90196d4f1..e2e9ca7ac 100644
--- a/components/Agents/EmailShareInput.tsx
+++ b/components/Agents/EmailShareInput.tsx
@@ -57,6 +57,10 @@ const EmailShareInput = ({ emails, existingSharedEmails = [], onEmailsChange, on
   return (
     <div className="space-y-2">
       <Label htmlFor="share-emails">Share with (email addresses)</Label>
+      <p className="text-sm text-muted-foreground">
+        Add email addresses for the people who should be able to view this
+        private agent.
+      </p>
       <Input
         id="share-emails"
         type="email"
diff --git a/components/Agents/PrivacySection.tsx b/components/Agents/PrivacySection.tsx
index 8b6a64141..21a6d5c2a 100644
--- a/components/Agents/PrivacySection.tsx
+++ b/components/Agents/PrivacySection.tsx
@@ -1,8 +1,8 @@
 import { UseFormReturn } from "react-hook-form";
 import { Label } from "@/components/ui/label";
-import { Switch } from "@/components/ui/switch";
 import { CreateAgentFormData } from "./schemas";
 import EmailShareInput from "./EmailShareInput";
+import AgentVisibilityControl from "./AgentVisibilityControl";
 
 interface PrivacySectionProps {
   form: UseFormReturn<CreateAgentFormData>;
@@ -14,27 +14,25 @@ const PrivacySection = ({ form, existingSharedEmails = [], onExistingEmailsChang
   const isPrivate = form.watch("isPrivate");
 
   return (
-    <>
-      <div className="flex items-center space-x-2">
-        <Switch
-          id="isPrivate"
-          checked={isPrivate}
-          onCheckedChange={(checked) => form.setValue("isPrivate", checked)}
-        />
-        <Label htmlFor="isPrivate">Private</Label>
+    <div className="space-y-3">
+      <div className="flex flex-wrap items-center justify-between gap-3">
+        <Label className="text-sm font-medium text-foreground">
+          Visibility
+        </Label>
+        <AgentVisibilityControl form={form} />
       </div>
 
       {isPrivate && (
         <EmailShareInput
-          emails={form.watch("shareEmails") ?? []}
-          existingSharedEmails={existingSharedEmails}
-          onEmailsChange={(emails) => {
-            form.setValue("shareEmails", emails, { shouldDirty: true, shouldValidate: true });
-          }}
-          onExistingEmailsChange={onExistingEmailsChange}
-        />
+            emails={form.watch("shareEmails") ?? []}
+            existingSharedEmails={existingSharedEmails}
+            onEmailsChange={(emails) => {
+              form.setValue("shareEmails", emails, { shouldDirty: true, shouldValidate: true });
+            }}
+            onExistingEmailsChange={onExistingEmailsChange}
+          />
       )}
-    </>
+    </div>
   );
 };
 
diff --git a/components/Agents/TagSelector.tsx b/components/Agents/TagSelector.tsx
index 70190e640..18c371899 100644
--- a/components/Agents/TagSelector.tsx
+++ b/components/Agents/TagSelector.tsx
@@ -10,6 +10,7 @@ interface TagSelectorProps {
 
 const TagSelector = ({ form }: TagSelectorProps) => {
   const { tags } = useAgentData();
+  const availableTags = tags.filter((tag) => tag !== "Recommended");
   const selectedTags = form.watch("tags") ?? [];
 
   const toggleTag = (tag: string) => {
@@ -24,7 +25,7 @@ const TagSelector = ({ form }: TagSelectorProps) => {
     <div className="space-y-2">
       <Label htmlFor="tags">Category</Label>
       <div className="flex flex-wrap gap-2" id="tags">
-        {tags.filter((t) => t !== "Recommended").map((tag) => {
+        {availableTags.map((tag) => {
           const isSelected = selectedTags.includes(tag);
           return (
             <Badge
diff --git a/hooks/useAgentForm.ts b/hooks/useAgentForm.ts
new file mode 100644
index 000000000..31a128ced
--- /dev/null
+++ b/hooks/useAgentForm.ts
@@ -0,0 +1,33 @@
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import {
+  createAgentSchema,
+  type CreateAgentFormData,
+} from "@/components/Agents/schemas";
+
+export function useAgentForm(initialValues?: Partial<CreateAgentFormData>) {
+  const form = useForm<CreateAgentFormData>({
+    resolver: zodResolver(createAgentSchema),
+    defaultValues: {
+      title: initialValues?.title ?? "",
+      description: initialValues?.description ?? "",
+      prompt: initialValues?.prompt ?? "",
+      tags: initialValues?.tags ?? [],
+      isPrivate: initialValues?.isPrivate ?? false,
+      shareEmails: initialValues?.shareEmails ?? [],
+    },
+  });
+
+  const isPrivate = form.watch("isPrivate");
+
+  useEffect(() => {
+    if (!isPrivate) {
+      form.setValue("shareEmails", []);
+    } else if (!form.getValues("shareEmails")) {
+      form.setValue("shareEmails", []);
+    }
+  }, [isPrivate, form]);
+
+  return form;
+}
diff --git a/hooks/useEditAgentTemplate.ts b/hooks/useEditAgentTemplate.ts
new file mode 100644
index 000000000..fcc7fcb66
--- /dev/null
+++ b/hooks/useEditAgentTemplate.ts
@@ -0,0 +1,52 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useUserProvider } from "@/providers/UserProvder";
+import type { AgentTemplateRow } from "@/types/AgentTemplates";
+import type { CreateAgentFormData } from "@/components/Agents/schemas";
+
+interface UseEditAgentTemplateOptions {
+  agent: AgentTemplateRow;
+  currentSharedEmails: string[];
+  onSuccess: () => void;
+}
+
+export function useEditAgentTemplate({
+  agent,
+  currentSharedEmails,
+  onSuccess,
+}: UseEditAgentTemplateOptions) {
+  const { userData } = useUserProvider();
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (values: CreateAgentFormData) => {
+      const finalShareEmails = values.isPrivate
+        ? [...currentSharedEmails, ...(values.shareEmails ?? [])]
+        : [];
+
+      const res = await fetch("/api/agent-templates", {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          id: agent.id,
+          userId: userData?.id,
+          title: values.title,
+          description: values.description,
+          prompt: values.prompt,
+          tags: values.tags,
+          isPrivate: values.isPrivate,
+          shareEmails: finalShareEmails,
+        }),
+      });
+
+      if (!res.ok) {
+        throw new Error("Failed to update template");
+      }
+
+      return res.json();
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["agent-templates"] });
+      onSuccess();
+    },
+  });
+}