diff --git a/src/components/automations/email-action-config.tsx b/src/components/automations/email-action-config.tsx
index 124f45a..c76d0a8 100644
--- a/src/components/automations/email-action-config.tsx
+++ b/src/components/automations/email-action-config.tsx
@@ -46,24 +46,24 @@ type EmailActionConfigProps = {
   agents: Agent[]
 }
 
-// Variaveis disponiveis para interpolacao
+// Variáveis disponíveis para interpolação
 const EMAIL_VARIABLES = [
-  { key: "ticket.reference", label: "Referencia", description: "Numero do chamado (ex: #1234)" },
-  { key: "ticket.subject", label: "Assunto", description: "Titulo do chamado" },
+  { key: "ticket.reference", label: "Referência", description: "Número do chamado (ex: #1234)" },
+  { key: "ticket.subject", label: "Assunto", description: "Título do chamado" },
   { key: "ticket.status", label: "Status", description: "Status atual do chamado" },
-  { key: "ticket.priority", label: "Prioridade", description: "Nivel de prioridade" },
+  { key: "ticket.priority", label: "Prioridade", description: "Nível de prioridade" },
   { key: "company.name", label: "Empresa", description: "Nome da empresa do solicitante" },
   { key: "requester.name", label: "Solicitante", description: "Nome de quem abriu o chamado" },
-  { key: "assignee.name", label: "Responsavel", description: "Nome do agente responsavel" },
+  { key: "assignee.name", label: "Responsável", description: "Nome do agente responsável" },
 ] as const
 
 type EmailVariable = (typeof EMAIL_VARIABLES)[number]
 
 const CLEAR_SELECT_VALUE = "__clear__"
 
-// Estilos do badge de variavel (cyan para consistencia com o projeto)
+// Estilos do badge de variável (fundo preto com texto branco)
 const VARIABLE_BADGE_CLASSES =
-  "inline-flex items-center gap-1 rounded-md bg-cyan-50/60 border border-cyan-200/60 px-1.5 py-0.5 text-xs font-mono text-cyan-700 whitespace-nowrap"
+  "inline-flex items-center gap-1 rounded-md bg-neutral-900 border border-neutral-700 px-1.5 py-0.5 text-xs font-mono text-white whitespace-nowrap"
 
 // Extensao TipTap para variaveis de e-mail
 const EmailVariableMentionExtension = Mention.extend({
@@ -280,7 +280,7 @@ function EmailVariableList({ items, command, onRegister }: EmailVariableListProp
           type="button"
           className={cn(
             "flex w-full flex-col gap-0.5 rounded-md px-3 py-2 text-left transition",
-            index === selectedIndex ? "bg-cyan-50/60" : "hover:bg-slate-50"
+            index === selectedIndex ? "bg-neutral-100" : "hover:bg-slate-50"
           )}
           onMouseEnter={() => setSelectedIndex(index)}
           onMouseDown={(e) => {
@@ -288,7 +288,7 @@ function EmailVariableList({ items, command, onRegister }: EmailVariableListProp
             selectItem(index)
           }}
         >
-          <span className="font-mono text-sm text-cyan-700">{`{{${item.key}}}`}</span>
+          <span className="font-mono text-sm text-neutral-900">{`{{${item.key}}}`}</span>
           <span className="text-xs text-muted-foreground">{item.description}</span>
         </button>
       ))}
@@ -440,11 +440,11 @@ export function EmailActionConfig({ action, onChange, onRemove, agents }: EmailA
 
   return (
     <div className="space-y-4">
-      {/* Header com tipo e botao de remover */}
+      {/* Header com tipo e botão de remover */}
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-2">
-          <div className="flex size-8 items-center justify-center rounded-lg bg-cyan-50/60">
-            <Braces className="size-4 text-cyan-600" />
+          <div className="flex size-8 items-center justify-center rounded-lg bg-neutral-900">
+            <Braces className="size-4 text-white" />
           </div>
           <span className="font-medium text-neutral-900">Enviar e-mail</span>
         </div>
@@ -454,7 +454,7 @@ export function EmailActionConfig({ action, onChange, onRemove, agents }: EmailA
           size="icon"
           onClick={onRemove}
           className="h-8 w-8 text-slate-500 hover:bg-red-50 hover:text-red-700"
-          title="Remover acao"
+          title="Remover ação"
         >
           <Trash2 className="size-4" />
         </Button>
@@ -486,10 +486,10 @@ export function EmailActionConfig({ action, onChange, onRemove, agents }: EmailA
         </div>
       </div>
 
-      {/* Paleta de variaveis */}
+      {/* Paleta de variáveis */}
       <div className="space-y-2">
         <Label className="text-xs text-muted-foreground">
-          Variaveis disponiveis (clique para inserir no {activeField === "subject" ? "assunto" : "corpo"})
+          Variáveis disponíveis (arraste ou clique para inserir no {activeField === "subject" ? "assunto" : "corpo"})
         </Label>
         <div className="flex flex-wrap gap-1.5">
           {EMAIL_VARIABLES.map((variable) => (
@@ -497,10 +497,15 @@ export function EmailActionConfig({ action, onChange, onRemove, agents }: EmailA
               <TooltipTrigger asChild>
                 <button
                   type="button"
+                  draggable
                   onClick={() => handleInsertVariable(variable)}
+                  onDragStart={(e) => {
+                    e.dataTransfer.setData("text/plain", `{{${variable.key}}}`)
+                    e.dataTransfer.effectAllowed = "copy"
+                  }}
                   className={cn(
                     VARIABLE_BADGE_CLASSES,
-                    "cursor-pointer transition hover:bg-cyan-100/60 hover:border-cyan-300/60"
+                    "cursor-grab transition hover:bg-neutral-800 active:cursor-grabbing"
                   )}
                 >
                   {`{{${variable.key}}}`}
@@ -514,9 +519,9 @@ export function EmailActionConfig({ action, onChange, onRemove, agents }: EmailA
         </div>
       </div>
 
-      {/* Destinatarios */}
+      {/* Destinatários */}
       <div className="space-y-3 rounded-lg border border-slate-200 bg-slate-50/50 p-4">
-        <Label className="text-sm font-medium">Destinatarios</Label>
+        <Label className="text-sm font-medium">Destinatários</Label>
 
         <div className="flex flex-wrap gap-4">
           <label className="flex items-center gap-2 text-sm text-neutral-700">
@@ -531,13 +536,13 @@ export function EmailActionConfig({ action, onChange, onRemove, agents }: EmailA
               checked={action.toAssignee}
               onCheckedChange={(checked) => handleChange("toAssignee", Boolean(checked))}
             />
-            Responsavel do ticket
+            Responsável do ticket
           </label>
         </div>
 
         <div className="grid gap-3 sm:grid-cols-2">
           <div className="space-y-1.5">
-            <Label className="text-xs text-muted-foreground">Agente especifico (opcional)</Label>
+            <Label className="text-xs text-muted-foreground">Agente específico (opcional)</Label>
             <Select
               value={action.toUserId}
               onValueChange={(value) => {
@@ -551,8 +556,8 @@ export function EmailActionConfig({ action, onChange, onRemove, agents }: EmailA
               <SelectContent className="rounded-xl">
                 {agents.length === 0 ? (
                   <SelectEmptyState
-                    message="Nenhum agente disponivel"
-                    createLabel="Gerenciar usuarios"
+                    message="Nenhum agente disponível"
+                    createLabel="Gerenciar usuários"
                     createHref="/admin/users"
                   />
                 ) : (
@@ -581,10 +586,10 @@ export function EmailActionConfig({ action, onChange, onRemove, agents }: EmailA
         </div>
       </div>
 
-      {/* Botao do e-mail */}
+      {/* Botão do e-mail */}
       <div className="grid gap-3 sm:grid-cols-2">
         <div className="space-y-1.5">
-          <Label className="text-xs text-muted-foreground">Link do botao</Label>
+          <Label className="text-xs text-muted-foreground">Link do botão</Label>
           <Select
             value={action.ctaTarget}
             onValueChange={(value) => handleChange("ctaTarget", value as EmailCtaTarget)}
@@ -601,7 +606,7 @@ export function EmailActionConfig({ action, onChange, onRemove, agents }: EmailA
         </div>
 
         <div className="space-y-1.5">
-          <Label className="text-xs text-muted-foreground">Texto do botao</Label>
+          <Label className="text-xs text-muted-foreground">Texto do botão</Label>
           <Input
             value={action.ctaLabel}
             onChange={(e) => handleChange("ctaLabel", e.target.value)}