diff --git a/src/components/chat/chat-widget.tsx b/src/components/chat/chat-widget.tsx
index 37d2d80..bc0b004 100644
--- a/src/components/chat/chat-widget.tsx
+++ b/src/components/chat/chat-widget.tsx
@@ -1,5 +1,6 @@
 "use client"
 
+import Image from "next/image"
 import { useCallback, useEffect, useRef, useState } from "react"
 import { useAction, useMutation, useQuery } from "convex/react"
 import type { Id } from "@/convex/_generated/dataModel"
@@ -30,6 +31,8 @@ import {
   Image as ImageIcon,
   Download,
   ExternalLink,
+  Eye,
+  Check,
 } from "lucide-react"
 
 const MAX_MESSAGE_LENGTH = 4000
@@ -122,9 +125,17 @@ function MessageAttachment({ attachment }: { attachment: ChatAttachment }) {
   }, [attachment.storageId, getFileUrl])
 
   const isImage = attachment.type?.startsWith("image/")
+  const [downloading, setDownloading] = useState(false)
+  const [downloaded, setDownloaded] = useState(false)
+
+  const handleView = () => {
+    if (!url) return
+    window.open(url, "_blank", "noopener,noreferrer")
+  }
 
   const handleDownload = async () => {
-    if (!url) return
+    if (!url || downloading) return
+    setDownloading(true)
     try {
       const response = await fetch(url)
       const blob = await response.blob()
@@ -136,8 +147,12 @@ function MessageAttachment({ attachment }: { attachment: ChatAttachment }) {
       a.click()
       document.body.removeChild(a)
       URL.revokeObjectURL(downloadUrl)
+      setDownloaded(true)
+      setTimeout(() => setDownloaded(false), 2000)
     } catch (error) {
       toast.error("Erro ao baixar arquivo")
+    } finally {
+      setDownloading(false)
     }
   }
 
@@ -151,31 +166,67 @@ function MessageAttachment({ attachment }: { attachment: ChatAttachment }) {
 
   if (isImage && url) {
     return (
-      <button
-        onClick={handleDownload}
-        className="group relative overflow-hidden rounded-lg border border-slate-200"
-      >
+      <div className="group relative overflow-hidden rounded-lg border border-slate-200">
+        {/* eslint-disable-next-line @next/next/no-img-element */}
         <img
           src={url}
           alt={attachment.name}
-          className="size-16 object-cover"
+          className="size-16 cursor-pointer object-cover"
+          onClick={handleView}
         />
-        <div className="absolute inset-0 flex items-center justify-center bg-black/50 opacity-0 transition-opacity group-hover:opacity-100">
-          <Download className="size-4 text-white" />
+        <div className="absolute inset-0 flex items-center justify-center gap-1 bg-black/50 opacity-0 transition-opacity group-hover:opacity-100">
+          <button
+            onClick={handleView}
+            className="flex size-6 items-center justify-center rounded-full bg-white/20 hover:bg-white/30"
+            title="Visualizar"
+          >
+            <Eye className="size-3.5 text-white" />
+          </button>
+          <button
+            onClick={handleDownload}
+            disabled={downloading}
+            className="flex size-6 items-center justify-center rounded-full bg-white/20 hover:bg-white/30"
+            title="Baixar"
+          >
+            {downloading ? (
+              <Spinner className="size-3 text-white" />
+            ) : downloaded ? (
+              <Check className="size-3.5 text-emerald-400" />
+            ) : (
+              <Download className="size-3.5 text-white" />
+            )}
+          </button>
         </div>
-      </button>
+      </div>
     )
   }
 
   return (
-    <button
-      onClick={handleDownload}
-      className="flex items-center gap-2 rounded-lg border border-slate-200 bg-slate-50 px-2 py-1.5 text-xs hover:bg-slate-100"
-    >
+    <div className="flex items-center gap-1.5 rounded-lg border border-slate-200 bg-slate-50 px-2 py-1.5 text-xs">
       <FileText className="size-4 text-slate-500" />
       <span className="max-w-[80px] truncate text-slate-700">{attachment.name}</span>
-      <Download className="size-3 text-slate-400" />
-    </button>
+      <button
+        onClick={handleView}
+        className="rounded p-0.5 hover:bg-slate-200"
+        title="Visualizar"
+      >
+        <Eye className="size-3 text-slate-400" />
+      </button>
+      <button
+        onClick={handleDownload}
+        disabled={downloading}
+        className="rounded p-0.5 hover:bg-slate-200"
+        title="Baixar"
+      >
+        {downloading ? (
+          <Spinner className="size-3 text-slate-400" />
+        ) : downloaded ? (
+          <Check className="size-3 text-emerald-500" />
+        ) : (
+          <Download className="size-3 text-slate-400" />
+        )}
+      </button>
+    </div>
   )
 }
 
@@ -598,6 +649,7 @@ export function ChatWidget() {
               {attachments.map((file, index) => (
                 <div key={index} className="group relative">
                   {file.type?.startsWith("image/") && file.previewUrl ? (
+                    /* eslint-disable-next-line @next/next/no-img-element */
                     <img
                       src={file.previewUrl}
                       alt={file.name}
diff --git a/src/components/tickets/ticket-chat-history.tsx b/src/components/tickets/ticket-chat-history.tsx
index 2fb41ea..abd9c26 100644
--- a/src/components/tickets/ticket-chat-history.tsx
+++ b/src/components/tickets/ticket-chat-history.tsx
@@ -16,7 +16,6 @@ import {
   ChevronDown,
   ChevronRight,
   User,
-  Headphones,
   Clock,
   Download,
   FileText,
@@ -183,10 +182,10 @@ function ChatSessionCard({ session, isExpanded, onToggle }: { session: ChatSessi
                       <div
                         className={cn(
                           "flex size-7 shrink-0 items-center justify-center rounded-full",
-                          isAgent ? "bg-primary/10 text-primary" : "bg-slate-200 text-slate-600"
+                          isAgent ? "bg-slate-100 text-slate-600" : "bg-slate-200 text-slate-600"
                         )}
                       >
-                        {isAgent ? <Headphones className="size-3.5" /> : <User className="size-3.5" />}
+                        {isAgent ? <MessageCircle className="size-3.5" /> : <User className="size-3.5" />}
                       </div>
                       <div
                         className={cn(
@@ -277,9 +276,9 @@ export function TicketChatHistory({ ticketId }: ChatHistoryProps) {
       <CardHeader className="border-b border-slate-100 bg-slate-50/50 px-4 py-3">
         <CardTitle className="flex items-center gap-2 text-base font-semibold text-slate-900">
           <MessageCircle className="size-4" />
-          Historico de Chat
+          Histórico de chat
           <span className="ml-auto text-xs font-normal text-slate-500">
-            {chatHistory.sessions.length} {chatHistory.sessions.length === 1 ? "sessao" : "sessoes"} - {chatHistory.totalMessages} mensagens
+            {chatHistory.sessions.length} {chatHistory.sessions.length === 1 ? "sessão" : "sessões"} - {chatHistory.totalMessages} mensagens
           </span>
         </CardTitle>
       </CardHeader>
diff --git a/src/components/tickets/ticket-timeline.tsx b/src/components/tickets/ticket-timeline.tsx
index 211014f..658f8ee 100644
--- a/src/components/tickets/ticket-timeline.tsx
+++ b/src/components/tickets/ticket-timeline.tsx
@@ -58,6 +58,9 @@ const timelineIcons: Record<string, ComponentType<{ className?: string }>> = {
 
 const timelineLabels: Record<string, string> = TICKET_TIMELINE_LABELS
 
+// Tipos de eventos que não devem aparecer na timeline
+const HIDDEN_EVENT_TYPES = ["CHAT_MESSAGE_ADDED"]
+
 interface TicketTimelineProps {
   ticket: TicketWithDetails
 }
@@ -82,9 +85,6 @@ export function TicketTimeline({ ticket }: TicketTimelineProps) {
 
   const [page, setPage] = useState(1)
 
-  // Tipos de eventos que não devem aparecer na timeline
-  const HIDDEN_EVENT_TYPES = ["CHAT_MESSAGE_ADDED"]
-
   const sortedTimeline = useMemo(
     () => [...ticket.timeline]
       .filter((event) => !HIDDEN_EVENT_TYPES.includes(event.type))