diff --git a/apps/desktop/src/main.tsx b/apps/desktop/src/main.tsx
index 4a3b00c..7922c22 100644
--- a/apps/desktop/src/main.tsx
+++ b/apps/desktop/src/main.tsx
@@ -607,10 +607,14 @@ function App() {
               )}
             </div>
             {validatedCompany ? (
-              <div className="rounded-lg border border-emerald-200 bg-emerald-50 px-3 py-2 text-xs text-emerald-700">
-                <div className="text-sm font-semibold text-emerald-800">{validatedCompany.name}</div>
-                <div>Tenant:&nbsp;<span className="font-mono text-emerald-800">{validatedCompany.tenantId}</span></div>
-                <div>Slug:&nbsp;<span className="font-mono text-emerald-800">{validatedCompany.slug}</span></div>
+              <div className="flex items-start gap-3 rounded-lg border border-emerald-200 bg-emerald-50 px-3 py-2 text-sm text-emerald-700">
+                <span className="mt-1 inline-flex size-2 rounded-full bg-emerald-500" aria-hidden="true" />
+                <div className="space-y-1">
+                  <span className="block text-sm font-semibold text-emerald-800">{validatedCompany.name}</span>
+                  <span className="text-xs text-emerald-700/80">
+                    Código reconhecido. Esta máquina será vinculada automaticamente à empresa informada.
+                  </span>
+                </div>
               </div>
             ) : null}
             <div className="grid gap-2">
diff --git a/convex/tickets.ts b/convex/tickets.ts
index 7dc6708..a604b77 100644
--- a/convex/tickets.ts
+++ b/convex/tickets.ts
@@ -973,6 +973,7 @@ export const changeAssignee = mutation({
     }
     const ticketDoc = ticket as Doc<"tickets">
     const viewer = await requireTicketStaff(ctx, actorId, ticketDoc)
+    const isAdmin = viewer.role === "ADMIN"
     const assignee = (await ctx.db.get(assigneeId)) as Doc<"users"> | null
     if (!assignee || assignee.tenantId !== ticketDoc.tenantId) {
       throw new ConvexError("Responsável inválido")
@@ -980,6 +981,11 @@ export const changeAssignee = mutation({
     if (viewer.role === "MANAGER") {
       throw new ConvexError("Gestores não podem reatribuir chamados")
     }
+    const currentAssigneeId = ticketDoc.assigneeId ?? null
+    if (currentAssigneeId && currentAssigneeId !== actorId && !isAdmin) {
+      throw new ConvexError("Somente o responsável atual pode reatribuir este chamado")
+    }
+
     const now = Date.now();
     await ctx.db.patch(ticketId, { assigneeId, updatedAt: now });
     await ctx.db.insert("ticketEvents", {
@@ -1165,12 +1171,28 @@ export const startWork = mutation({
     if (!ticket) {
       throw new ConvexError("Ticket não encontrado")
     }
-    await requireStaff(ctx, actorId, ticket.tenantId)
-    if (ticket.activeSessionId) {
-      return { status: "already_started", sessionId: ticket.activeSessionId }
+    const ticketDoc = ticket as Doc<"tickets">
+    const viewer = await requireTicketStaff(ctx, actorId, ticketDoc)
+    const isAdmin = viewer.role === "ADMIN"
+    const currentAssigneeId = ticketDoc.assigneeId ?? null
+
+    if (currentAssigneeId && currentAssigneeId !== actorId && !isAdmin) {
+      throw new ConvexError("Somente o responsável atual pode iniciar este chamado")
+    }
+
+    if (ticketDoc.activeSessionId) {
+      return { status: "already_started", sessionId: ticketDoc.activeSessionId }
     }
 
     const now = Date.now()
+    let assigneePatched = false
+
+    if (!currentAssigneeId) {
+      await ctx.db.patch(ticketId, { assigneeId: actorId, updatedAt: now })
+      ticketDoc.assigneeId = actorId
+      assigneePatched = true
+    }
+
     const sessionId = await ctx.db.insert("ticketWorkSessions", {
       ticketId,
       agentId: actorId,
@@ -1184,11 +1206,25 @@ export const startWork = mutation({
       updatedAt: now,
     })
 
-    const actor = (await ctx.db.get(actorId)) as Doc<"users"> | null
+    if (assigneePatched) {
+      await ctx.db.insert("ticketEvents", {
+        ticketId,
+        type: "ASSIGNEE_CHANGED",
+        payload: { assigneeId: actorId, assigneeName: viewer.user.name, actorId },
+        createdAt: now,
+      })
+    }
+
     await ctx.db.insert("ticketEvents", {
       ticketId,
       type: "WORK_STARTED",
-      payload: { actorId, actorName: actor?.name, actorAvatar: actor?.avatarUrl, sessionId, workType: (workType ?? "INTERNAL").toUpperCase() },
+      payload: {
+        actorId,
+        actorName: viewer.user.name,
+        actorAvatar: viewer.user.avatarUrl,
+        sessionId,
+        workType: (workType ?? "INTERNAL").toUpperCase(),
+      },
       createdAt: now,
     })
 
@@ -1208,8 +1244,14 @@ export const pauseWork = mutation({
     if (!ticket) {
       throw new ConvexError("Ticket não encontrado")
     }
-    await requireStaff(ctx, actorId, ticket.tenantId)
-    if (!ticket.activeSessionId) {
+    const ticketDoc = ticket as Doc<"tickets">
+    const viewer = await requireTicketStaff(ctx, actorId, ticketDoc)
+    const isAdmin = viewer.role === "ADMIN"
+    if (ticketDoc.assigneeId && ticketDoc.assigneeId !== actorId && !isAdmin) {
+      throw new ConvexError("Somente o responsável atual pode pausar este chamado")
+    }
+
+    if (!ticketDoc.activeSessionId) {
       return { status: "already_paused" }
     }
 
@@ -1217,7 +1259,7 @@ export const pauseWork = mutation({
       throw new ConvexError("Motivo de pausa inválido")
     }
 
-    const session = await ctx.db.get(ticket.activeSessionId)
+    const session = await ctx.db.get(ticketDoc.activeSessionId)
     if (!session) {
       await ctx.db.patch(ticketId, { activeSessionId: undefined, working: false })
       return { status: "session_missing" }
@@ -1226,7 +1268,7 @@ export const pauseWork = mutation({
     const now = Date.now()
     const durationMs = now - session.startedAt
 
-    await ctx.db.patch(ticket.activeSessionId, {
+    await ctx.db.patch(ticketDoc.activeSessionId, {
       stoppedAt: now,
       durationMs,
       pauseReason: reason,
diff --git a/src/app/portal/profile/page.tsx b/src/app/portal/profile/page.tsx
index 9c613ec..ecc10f2 100644
--- a/src/app/portal/profile/page.tsx
+++ b/src/app/portal/profile/page.tsx
@@ -12,7 +12,9 @@ export const metadata: Metadata = {
 export default async function PortalProfilePage() {
   const session = await requireAuthenticatedSession()
   const role = (session.user.role ?? "").toLowerCase()
-  if (role !== "collaborator" && role !== "manager") {
+  const persona = (session.user.machinePersona ?? "").toLowerCase()
+  const allowed = role === "collaborator" || role === "manager" || persona === "collaborator" || persona === "manager"
+  if (!allowed) {
     redirect("/portal")
   }
 
diff --git a/src/components/admin/machines/admin-machines-overview.tsx b/src/components/admin/machines/admin-machines-overview.tsx
index 40d5d40..0f097e2 100644
--- a/src/components/admin/machines/admin-machines-overview.tsx
+++ b/src/components/admin/machines/admin-machines-overview.tsx
@@ -1962,6 +1962,7 @@ export function MachineDetails({ machine }: MachineDetailsProps) {
                             method: "POST",
                             headers: { "Content-Type": "application/json" },
                             body: JSON.stringify({ machineId: machine.id }),
+                            credentials: "include",
                           })
                           if (!res.ok) throw new Error(`HTTP ${res.status}`)
                           toast.success("Máquina excluída")
diff --git a/src/components/tickets/status-badge.tsx b/src/components/tickets/status-badge.tsx
index e565967..254f626 100644
--- a/src/components/tickets/status-badge.tsx
+++ b/src/components/tickets/status-badge.tsx
@@ -17,7 +17,7 @@ export function TicketStatusBadge({ status, className }: TicketStatusBadgeProps)
   const parsed = ticketStatusSchema.parse(status)
   const styles = statusStyles[parsed]
   return (
-    <Badge className={cn("inline-flex items-center rounded-full px-3 py-0.5 text-xs font-semibold", styles?.className, className)}>
+    <Badge className={cn("inline-flex h-9 items-center gap-2 rounded-full px-3 text-sm font-semibold", styles?.className, className)}>
       {styles?.label ?? parsed}
     </Badge>
   )
diff --git a/src/components/tickets/ticket-comments.rich.tsx b/src/components/tickets/ticket-comments.rich.tsx
index e7997ea..b725175 100644
--- a/src/components/tickets/ticket-comments.rich.tsx
+++ b/src/components/tickets/ticket-comments.rich.tsx
@@ -17,7 +17,7 @@ import { Button } from "@/components/ui/button"
 import { toast } from "sonner"
 import { Dropzone } from "@/components/ui/dropzone"
 import { RichTextEditor, RichTextContent, sanitizeEditorHtml } from "@/components/ui/rich-text-editor"
-import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
+import { Dialog, DialogClose, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
 import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "@/components/ui/select"
 import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "@/components/ui/empty"
@@ -505,15 +505,18 @@ export function TicketComments({ ticket }: TicketCommentsProps) {
           </DialogContent>
         </Dialog>
         <Dialog open={!!preview} onOpenChange={(open) => !open && setPreview(null)}>
-          <DialogContent className="max-w-3xl p-0">
-            <DialogHeader className="sr-only">
-              <DialogTitle>Visualização de anexo</DialogTitle>
+          <DialogContent className="max-w-3xl border border-slate-200 p-0">
+            <DialogHeader className="flex items-center justify-between gap-3 px-4 py-3">
+              <DialogTitle className="text-base font-semibold text-neutral-800">Visualização do anexo</DialogTitle>
+              <DialogClose className="inline-flex size-7 items-center justify-center rounded-full border border-slate-200 bg-white text-neutral-600 transition hover:bg-slate-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-400/30">
+                <X className="size-4" />
+              </DialogClose>
             </DialogHeader>
             {preview ? (
-              <>
+              <div className="rounded-b-2xl">
                 {/* eslint-disable-next-line @next/next/no-img-element */}
-                <img src={preview} alt="Preview" className="h-auto w-full rounded-xl" />
-              </>
+                <img src={preview} alt="Preview do anexo" className="h-auto w-full rounded-b-2xl" />
+              </div>
             ) : null}
           </DialogContent>
         </Dialog>
diff --git a/src/components/tickets/ticket-summary-header.tsx b/src/components/tickets/ticket-summary-header.tsx
index 5556fbb..f774bd9 100644
--- a/src/components/tickets/ticket-summary-header.tsx
+++ b/src/components/tickets/ticket-summary-header.tsx
@@ -89,7 +89,9 @@ function formatDuration(durationMs: number) {
 
 export function TicketSummaryHeader({ ticket }: TicketHeaderProps) {
   const { convexUserId, role, isStaff } = useAuth()
-  const isManager = role === "manager"
+  const normalizedRole = (role ?? "").toLowerCase()
+  const isManager = normalizedRole === "manager"
+  const isAdmin = normalizedRole === "admin"
   useDefaultQueues(ticket.tenantId)
   const changeAssignee = useMutation(api.tickets.changeAssignee)
   const changeQueue = useMutation(api.tickets.changeQueue)
@@ -138,6 +140,8 @@ export function TicketSummaryHeader({ ticket }: TicketHeaderProps) {
       subcategoryId: ticket.subcategory?.id ?? "",
     }
   )
+  const currentAssigneeId = ticket.assignee?.id ?? ""
+  const [assigneeSelection, setAssigneeSelection] = useState(currentAssigneeId)
   const [saving, setSaving] = useState(false)
   const [pauseDialogOpen, setPauseDialogOpen] = useState(false)
   const [pauseReason, setPauseReason] = useState<string>(PAUSE_REASONS[0]?.value ?? "NO_CONTACT")
@@ -159,13 +163,20 @@ export function TicketSummaryHeader({ ticket }: TicketHeaderProps) {
   const isAvulso = Boolean(((ticket.company ?? null) as { isAvulso?: boolean } | null)?.isAvulso ?? false)
   const [queueSelection, setQueueSelection] = useState(currentQueueName)
   const queueDirty = useMemo(() => queueSelection !== currentQueueName, [queueSelection, currentQueueName])
-  const formDirty = dirty || categoryDirty || queueDirty
+  const assigneeDirty = useMemo(() => assigneeSelection !== currentAssigneeId, [assigneeSelection, currentAssigneeId])
+  const formDirty = dirty || categoryDirty || queueDirty || assigneeDirty
   
   const activeCategory = useMemo(
     () => categories.find((category) => category.id === selectedCategoryId) ?? null,
     [categories, selectedCategoryId]
   )
   const secondaryOptions = useMemo(() => activeCategory?.secondary ?? [], [activeCategory])
+  const hasAssignee = Boolean(currentAssigneeId)
+  const isCurrentResponsible = hasAssignee && convexUserId ? currentAssigneeId === convexUserId : false
+  const canControlWork = isAdmin || !hasAssignee || isCurrentResponsible
+  const canPauseWork = isAdmin || isCurrentResponsible
+  const pauseDisabled = !canPauseWork
+  const startDisabled = !canControlWork
 
   async function handleSave() {
     if (!convexUserId || !formDirty) {
@@ -225,6 +236,31 @@ export function TicketSummaryHeader({ ticket }: TicketHeaderProps) {
         setQueueSelection(currentQueueName)
       }
 
+      if (assigneeDirty && !isManager) {
+        if (!assigneeSelection) {
+          toast.error("Selecione um responsável válido.", { id: "assignee" })
+          setAssigneeSelection(currentAssigneeId)
+          throw new Error("invalid-assignee")
+        } else {
+          toast.loading("Atualizando responsável...", { id: "assignee" })
+          try {
+            await changeAssignee({
+              ticketId: ticket.id as Id<"tickets">,
+              assigneeId: assigneeSelection as Id<"users">,
+              actorId: convexUserId as Id<"users">,
+            })
+            toast.success("Responsável atualizado!", { id: "assignee" })
+          } catch (error) {
+            console.error(error)
+            toast.error("Não foi possível atualizar o responsável.", { id: "assignee" })
+            setAssigneeSelection(currentAssigneeId)
+            throw error
+          }
+        }
+      } else if (assigneeDirty && isManager) {
+        setAssigneeSelection(currentAssigneeId)
+      }
+
       if (dirty) {
         toast.loading("Salvando alterações...", { id: "save-header" })
         if (subject !== ticket.subject) {
@@ -259,6 +295,7 @@ export function TicketSummaryHeader({ ticket }: TicketHeaderProps) {
       subcategoryId: currentSubcategoryId,
     })
     setQueueSelection(currentQueueName)
+    setAssigneeSelection(currentAssigneeId)
     setEditing(false)
   }
 
@@ -269,6 +306,7 @@ export function TicketSummaryHeader({ ticket }: TicketHeaderProps) {
       subcategoryId: ticket.subcategory?.id ?? "",
     })
     setQueueSelection(ticket.queue ?? "")
+    setAssigneeSelection(ticket.assignee?.id ?? "")
   }, [editing, ticket.category?.id, ticket.subcategory?.id, ticket.queue])
 
   useEffect(() => {
@@ -387,8 +425,9 @@ export function TicketSummaryHeader({ ticket }: TicketHeaderProps) {
       } else {
         toast.success("Atendimento iniciado", { id: "work" })
       }
-    } catch {
-      toast.error("Não foi possível atualizar o atendimento", { id: "work" })
+    } catch (error) {
+      const message = error instanceof Error ? error.message : "Não foi possível atualizar o atendimento"
+      toast.error(message, { id: "work" })
     }
   }
 
@@ -410,8 +449,9 @@ export function TicketSummaryHeader({ ticket }: TicketHeaderProps) {
         toast.success("Atendimento pausado", { id: "work" })
       }
       setPauseDialogOpen(false)
-    } catch {
-      toast.error("Não foi possível atualizar o atendimento", { id: "work" })
+    } catch (error) {
+      const message = error instanceof Error ? error.message : "Não foi possível atualizar o atendimento"
+      toast.error(message, { id: "work" })
     } finally {
       setPausing(false)
     }
@@ -506,16 +546,41 @@ export function TicketSummaryHeader({ ticket }: TicketHeaderProps) {
           requesterName={ticket.requester?.name ?? ticket.requester?.email ?? null}
         />
             {isPlaying ? (
-              <Button
-                size="sm"
-                className={pauseButtonClass}
-                onClick={() => {
-                  if (!convexUserId) return
-                  setPauseDialogOpen(true)
-                }}
-              >
-                <IconPlayerPause className="size-4 text-white" /> Pausar
-              </Button>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <span className="inline-flex">
+                    <Button
+                      size="sm"
+                      className={pauseButtonClass}
+                      onClick={() => {
+                        if (!convexUserId || pauseDisabled) return
+                        setPauseDialogOpen(true)
+                      }}
+                      disabled={pauseDisabled}
+                    >
+                      <IconPlayerPause className="size-4 text-white" /> Pausar
+                    </Button>
+                  </span>
+                </TooltipTrigger>
+                {pauseDisabled ? (
+                  <TooltipContent className="rounded-lg border border-slate-200 bg-white px-3 py-2 text-xs font-medium text-neutral-700 shadow-lg">
+                    Apenas o responsável atual ou um administrador pode pausar o atendimento.
+                  </TooltipContent>
+                ) : null}
+              </Tooltip>
+            ) : startDisabled ? (
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <span className="inline-flex">
+                    <Button size="sm" className={startButtonClass} disabled>
+                      <IconPlayerPlay className="size-4 text-white" /> Iniciar
+                    </Button>
+                  </span>
+                </TooltipTrigger>
+                <TooltipContent className="rounded-lg border border-slate-200 bg-white px-3 py-2 text-xs font-medium text-neutral-700 shadow-lg">
+                  Apenas o responsável atual ou um administrador pode iniciar este atendimento.
+                </TooltipContent>
+              </Tooltip>
             ) : (
               <DropdownMenu>
                 <DropdownMenuTrigger asChild>
@@ -666,17 +731,10 @@ export function TicketSummaryHeader({ ticket }: TicketHeaderProps) {
           {editing ? (
             <Select
               disabled={isManager}
-              value={ticket.assignee?.id ?? ""}
-              onValueChange={async (value) => {
-                if (!convexUserId) return
+              value={assigneeSelection}
+              onValueChange={(value) => {
                 if (isManager) return
-                toast.loading("Atribuindo responsável...", { id: "assignee" })
-                try {
-                  await changeAssignee({ ticketId: ticket.id as Id<"tickets">, assigneeId: value as Id<"users">, actorId: convexUserId as Id<"users"> })
-                  toast.success("Responsável atualizado!", { id: "assignee" })
-                } catch {
-                  toast.error("Não foi possível atribuir.", { id: "assignee" })
-                }
+                setAssigneeSelection(value)
               }}
             >
               <SelectTrigger className={selectTriggerClass}>
diff --git a/src/components/ui/dropzone.tsx b/src/components/ui/dropzone.tsx
index 21b70b7..07830c3 100644
--- a/src/components/ui/dropzone.tsx
+++ b/src/components/ui/dropzone.tsx
@@ -5,7 +5,7 @@ import { api } from "@/convex/_generated/api";
 import { useCallback, useRef, useState } from "react";
 import { cn } from "@/lib/utils";
 import { Spinner } from "@/components/ui/spinner";
-import { Upload } from "lucide-react";
+import { Upload, Check, X, AlertCircle } from "lucide-react";
 import { Progress } from "@/components/ui/progress";
 
 type Uploaded = { storageId: string; name: string; size?: number; type?: string; previewUrl?: string };
@@ -26,7 +26,9 @@ export function Dropzone({
   const generateUrl = useAction(api.files.generateUploadUrl);
   const inputRef = useRef<HTMLInputElement>(null);
   const [drag, setDrag] = useState(false);
-  const [items, setItems] = useState<Array<{ id: string; name: string; progress: number; status: "idle" | "uploading" | "done" | "error" }>>([]);
+  const [items, setItems] = useState<
+    Array<{ id: string; name: string; progress: number; status: "uploading" | "done" | "error" }>
+  >([]);
 
   const startUpload = useCallback(async (files: FileList | File[]) => {
     const list = Array.from(files).slice(0, maxFiles);
@@ -55,29 +57,25 @@ export function Dropzone({
             const res = JSON.parse(xhr.responseText);
             if (res?.storageId) {
               uploaded.push({ storageId: res.storageId, name: file.name, size: file.size, type: file.type, previewUrl: localPreview });
-              setItems((prev) => prev.map((it) => (it.id === id ? { ...it, progress: 100, status: "done" } : it)));
-              setTimeout(() => {
-                setItems((prev) => prev.filter((it) => it.id !== id));
-              }, 600);
+              setItems((prev) =>
+                prev.map((it) => (it.id === id ? { ...it, progress: 100, status: "done" } : it))
+              );
             } else {
-              setItems((prev) => prev.map((it) => (it.id === id ? { ...it, status: "error" } : it)));
-              setTimeout(() => {
-                setItems((prev) => prev.filter((it) => it.id !== id));
-              }, 1200);
+              setItems((prev) =>
+                prev.map((it) => (it.id === id ? { ...it, status: "error" } : it))
+              );
             }
           } catch {
-            setItems((prev) => prev.map((it) => (it.id === id ? { ...it, status: "error" } : it)));
-            setTimeout(() => {
-              setItems((prev) => prev.filter((it) => it.id !== id));
-            }, 1200);
+            setItems((prev) =>
+              prev.map((it) => (it.id === id ? { ...it, status: "error" } : it))
+            );
           }
           resolve();
         };
         xhr.onerror = () => {
-          setItems((prev) => prev.map((it) => (it.id === id ? { ...it, status: "error" } : it)));
-          setTimeout(() => {
-            setItems((prev) => prev.filter((it) => it.id !== id));
-          }, 1200);
+          setItems((prev) =>
+            prev.map((it) => (it.id === id ? { ...it, status: "error" } : it))
+          );
           resolve();
         };
         xhr.send(file);
@@ -130,15 +128,51 @@ export function Dropzone({
       </div>
       {items.length > 0 && (
         <div className="space-y-2">
-          {items.map((it) => (
-            <div key={it.id} className="flex items-center justify-between gap-3 rounded-md border p-2 text-sm">
-              <span className="truncate">{it.name}</span>
-              <div className="flex min-w-[140px] items-center gap-2">
-                <Progress value={it.progress} className="h-1.5 w-24" />
-                <span className="w-10 text-right text-xs text-neutral-500">{it.progress}%</span>
+          {items.map((it) => {
+            const isUploading = it.status === "uploading";
+            const isDone = it.status === "done";
+            const isError = it.status === "error";
+            return (
+              <div key={it.id} className="flex items-center justify-between gap-3 rounded-md border p-2 text-sm">
+                <div className="flex flex-1 items-center gap-3 overflow-hidden">
+                  <span className="truncate">{it.name}</span>
+                  {isError ? (
+                    <span className="inline-flex items-center gap-1 text-xs text-rose-600">
+                      <AlertCircle className="size-3.5" /> Falhou
+                    </span>
+                  ) : null}
+                </div>
+                <div className="flex items-center gap-2">
+                  {isUploading ? (
+                    <>
+                      <Progress value={it.progress} className="h-1.5 w-24" />
+                      <span className="w-10 text-right text-xs text-neutral-500">{it.progress}%</span>
+                    </>
+                  ) : (
+                    <>
+                      <span
+                        className={cn(
+                          "inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium",
+                          isDone ? "bg-emerald-50 text-emerald-700" : "bg-rose-50 text-rose-700"
+                        )}
+                      >
+                        {isDone ? <Check className="size-3.5" /> : <AlertCircle className="size-3.5" />}
+                        {isDone ? "Pronto" : "Erro"}
+                      </span>
+                      <button
+                        type="button"
+                        className="inline-flex size-7 items-center justify-center rounded-full border border-slate-200 bg-white text-neutral-600 transition hover:bg-slate-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-300"
+                        aria-label="Remover item"
+                        onClick={() => setItems((prev) => prev.filter((item) => item.id !== it.id))}
+                      >
+                        <X className="size-3.5" />
+                      </button>
+                    </>
+                  )}
+                </div>
               </div>
-            </div>
-          ))}
+            )
+          })}
         </div>
       )}
     </div>