diff --git a/frontend/src/components/TablaTitulares.tsx b/frontend/src/components/TablaTitulares.tsx
index 42e84fb..3ffb112 100644
--- a/frontend/src/components/TablaTitulares.tsx
+++ b/frontend/src/components/TablaTitulares.tsx
@@ -1,7 +1,7 @@
 // frontend/src/components/TablaTitulares.tsx
 
 import { useState } from 'react';
-import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper, Chip, IconButton, Typography, Link, TextField } from '@mui/material';
+import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper, Chip, IconButton, Typography, Link, TextField, Tooltip } from '@mui/material'; // <-- Añadir Tooltip
 import DeleteIcon from '@mui/icons-material/Delete';
 import DragHandleIcon from '@mui/icons-material/DragHandle';
 import EditIcon from '@mui/icons-material/Edit';
@@ -49,11 +49,24 @@ const SortableRow = ({ titular, onDelete, onSave, onEdit }: SortableRowProps) =>
   }
 
   return (
-    <TableRow ref={setNodeRef} style={style} {...attributes} sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
-      <TableCell sx={{ cursor: 'grab', verticalAlign: 'middle' }} {...listeners}>
-        <DragHandleIcon sx={{ color: 'text.secondary' }} />
+    <TableRow
+      ref={setNodeRef}
+      style={style}
+      {...attributes}
+      sx={{
+        '&:hover': {
+          backgroundColor: 'action.hover'
+        },
+        // Oculta el borde de la última fila
+        '&:last-child td, &:last-child th': { border: 0 },
+      }}
+    >
+      <TableCell sx={{ padding: '8px 16px', cursor: 'grab', verticalAlign: 'middle' }} {...listeners}>
+        <Tooltip title="Arrastrar para reordenar" placement="top">
+          <DragHandleIcon sx={{ color: 'text.secondary' }} />
+        </Tooltip>
       </TableCell>
-      <TableCell sx={{ verticalAlign: 'middle' }} onClick={() => setIsEditing(true)}>
+      <TableCell sx={{ padding: '8px 16px', verticalAlign: 'middle' }} onClick={() => setIsEditing(true)}>
         {isEditing ? (
           <TextField
             fullWidth
@@ -69,10 +82,10 @@ const SortableRow = ({ titular, onDelete, onSave, onEdit }: SortableRowProps) =>
           <Typography variant="body2">{titular.texto}</Typography>
         )}
       </TableCell>
-      <TableCell sx={{ verticalAlign: 'middle' }}>
+      <TableCell sx={{ padding: '8px 16px', verticalAlign: 'middle' }}>
         <Chip label={titular.tipo || 'Scraped'} color={getChipColor(titular.tipo)} size="small" />
       </TableCell>
-      <TableCell sx={{ verticalAlign: 'middle' }}>
+      <TableCell sx={{ padding: '8px 16px', verticalAlign: 'middle' }}>
         {titular.urlFuente ? (
           <Link href={titular.urlFuente} target="_blank" rel="noopener noreferrer" underline="hover" color="primary.light">
             {formatFuente(titular.fuente)}
@@ -81,13 +94,17 @@ const SortableRow = ({ titular, onDelete, onSave, onEdit }: SortableRowProps) =>
           formatFuente(titular.fuente)
         )}
       </TableCell>
-      <TableCell sx={{ verticalAlign: 'middle', textAlign: 'right' }}>
-        <IconButton size="small" onClick={(e) => { e.stopPropagation(); onEdit(titular); }}>
-          <EditIcon fontSize="small" />
-        </IconButton>
-        <IconButton size="small" onClick={(e) => { e.stopPropagation(); onDelete(titular.id); }} sx={{ color: '#ef4444' }}>
-          <DeleteIcon />
-        </IconButton>
+      <TableCell sx={{ padding: '8px 16px', verticalAlign: 'middle', textAlign: 'right' }}>
+        <Tooltip title="Editar viñeta" placement="top">
+          <IconButton size="small" onClick={(e) => { e.stopPropagation(); onEdit(titular); }}>
+            <EditIcon fontSize="small" />
+          </IconButton>
+        </Tooltip>
+        <Tooltip title="Eliminar titular" placement="top">
+          <IconButton size="small" onClick={(e) => { e.stopPropagation(); onDelete(titular.id); }} sx={{ color: '#ef4444' }}>
+            <DeleteIcon />
+          </IconButton>
+        </Tooltip>
       </TableCell>
     </TableRow>
   );
@@ -128,7 +145,7 @@ const TablaTitulares = ({ titulares, onReorder, onDelete, onEdit, onSave }: Tabl
           <SortableContext items={titulares.map(t => t.id)} strategy={verticalListSortingStrategy}>
             <Table>
               <TableHead>
-                <TableRow sx={{ '& .MuiTableCell-root': { borderBottom: '1px solid rgba(255, 255, 255, 0.12)' } }}>
+                <TableRow sx={{ '& .MuiTableCell-root': { padding: '6px 16px', borderBottom: '1px solid rgba(255, 255, 255, 0.12)' } }}>
                   <TableCell sx={{ width: 50 }} />
                   <TableCell sx={{ textTransform: 'uppercase', color: 'text.secondary', letterSpacing: '0.05em' }}>Texto del Titular</TableCell>
                   <TableCell sx={{ textTransform: 'uppercase', color: 'text.secondary', letterSpacing: '0.05em' }}>Tipo</TableCell>
@@ -136,7 +153,7 @@ const TablaTitulares = ({ titulares, onReorder, onDelete, onEdit, onSave }: Tabl
                   <TableCell sx={{ textTransform: 'uppercase', color: 'text.secondary', letterSpacing: '0.05em', textAlign: 'right' }}>Acciones</TableCell>
                 </TableRow>
               </TableHead>
-              <TableBody>
+              <TableBody sx={{ '& .MuiTableRow-root:nth-of-type(odd)': { backgroundColor: 'action.focus' } }}>
                 {titulares.map((titular) => (
                   <SortableRow key={titular.id} titular={titular} onDelete={onDelete} onEdit={onEdit} onSave={onSave} />
                 ))}