diff --git a/ui/admin/app/components/agent/DeleteAgent.tsx b/ui/admin/app/components/agent/DeleteAgent.tsx
new file mode 100644
index 000000000..55105768b
--- /dev/null
+++ b/ui/admin/app/components/agent/DeleteAgent.tsx
@@ -0,0 +1,48 @@
+import { TrashIcon } from "lucide-react";
+import { toast } from "sonner";
+import { mutate } from "swr";
+
+import { AgentService } from "~/lib/service/api/agentService";
+
+import { ConfirmationDialog } from "~/components/composed/ConfirmationDialog";
+import { Button } from "~/components/ui/button";
+import {
+    Tooltip,
+    TooltipContent,
+    TooltipTrigger,
+} from "~/components/ui/tooltip";
+import { useAsync } from "~/hooks/useAsync";
+
+export function DeleteAgent({ id }: { id: string }) {
+    const deleteAgent = useAsync(AgentService.deleteAgent, {
+        onSuccess: () => {
+            toast.success("Agent deleted");
+            mutate(AgentService.getAgents.key());
+        },
+        onError: () => toast.error("Failed to delete agent"),
+    });
+
+    return (
+        <Tooltip>
+            <TooltipContent>Delete Agent</TooltipContent>
+
+            <ConfirmationDialog
+                title="Delete Agent?"
+                description="This action cannot be undone."
+                onConfirm={() => deleteAgent.execute(id)}
+                confirmProps={{ variant: "destructive" }}
+            >
+                <TooltipTrigger asChild>
+                    <Button
+                        variant="ghost"
+                        size="icon"
+                        disabled={deleteAgent.isLoading}
+                        loading={deleteAgent.isLoading}
+                    >
+                        <TrashIcon />
+                    </Button>
+                </TooltipTrigger>
+            </ConfirmationDialog>
+        </Tooltip>
+    );
+}
diff --git a/ui/admin/app/routes/_auth.agents._index.tsx b/ui/admin/app/routes/_auth.agents._index.tsx
index 60428bf73..d0fcd0dff 100644
--- a/ui/admin/app/routes/_auth.agents._index.tsx
+++ b/ui/admin/app/routes/_auth.agents._index.tsx
@@ -1,7 +1,7 @@
 import { PlusIcon } from "@radix-ui/react-icons";
 import { Link, useNavigate } from "@remix-run/react";
 import { ColumnDef, createColumnHelper } from "@tanstack/react-table";
-import { SquarePen, Trash } from "lucide-react";
+import { SquarePen } from "lucide-react";
 import { useMemo } from "react";
 import { $path } from "remix-routes";
 import useSWR, { mutate, preload } from "swr";
@@ -13,6 +13,7 @@ import { generateRandomName } from "~/lib/service/nameGenerator";
 import { timeSince } from "~/lib/utils";
 
 import { TypographyH2, TypographyP } from "~/components/Typography";
+import { DeleteAgent } from "~/components/agent/DeleteAgent";
 import { DataTable } from "~/components/composed/DataTable";
 import { Button } from "~/components/ui/button";
 import {
@@ -20,7 +21,6 @@ import {
     TooltipContent,
     TooltipTrigger,
 } from "~/components/ui/tooltip";
-import { useAsync } from "~/hooks/useAsync";
 
 export async function clientLoader() {
     mutate(AgentService.getAgents.key(), ThreadsService.getThreads.key());
@@ -56,13 +56,6 @@ export default function Agents() {
 
     const agents = getAgents.data || [];
 
-    const deleteAgent = useAsync(AgentService.deleteAgent, {
-        onSuccess: () => {
-            AgentService.revalidateAgents();
-            ThreadsService.revalidateThreads();
-        },
-    });
-
     return (
         <div>
             <div className="h-full p-8 flex flex-col gap-4">
@@ -177,23 +170,7 @@ export default function Agents() {
                             </TooltipContent>
                         </Tooltip>
 
-                        <Tooltip>
-                            <TooltipTrigger asChild>
-                                <Button
-                                    variant="ghost"
-                                    size="icon"
-                                    onClick={() =>
-                                        deleteAgent.execute(row.original.id)
-                                    }
-                                >
-                                    <Trash />
-                                </Button>
-                            </TooltipTrigger>
-
-                            <TooltipContent>
-                                <p>Delete Agent</p>
-                            </TooltipContent>
-                        </Tooltip>
+                        <DeleteAgent id={row.original.id} />
                     </div>
                 ),
             }),