diff --git a/ui/src/pages/devis.tsx b/ui/src/pages/devis.tsx
index 1522bfd..d409a01 100644
--- a/ui/src/pages/devis.tsx
+++ b/ui/src/pages/devis.tsx
@@ -65,7 +65,7 @@ export const DevisPage = () => {
   const [dueDateError, setDueDateError] = useState("");
   const [selectedDevis, setSelectedDevis] = useState<Devis | null>(null);
   const [formData, setFormData] = useState(defaultFormData);
-  const [devisToDelete, setDevisToDelete] = useState<Devis | null>(null);
+  const [devisIdToDelete, setDevisIdToDelete] = useState<string | null>(null);
   const [isConfirmDeleteModalOpen, setIsConfirmDeleteModalOpen] =
     useState(false);
 
@@ -141,14 +141,14 @@ export const DevisPage = () => {
   };
 
   const handleDelete = (devis: Devis) => {
-    setDevisToDelete(devis);
+    setDevisIdToDelete(devis.id);
     setIsConfirmDeleteModalOpen(true);
   };
 
   const confirmDeleteAction = () => {
-    if (devisToDelete) {
-      deleteDevis.mutate(devisToDelete.id);
-      setDevisToDelete(null);
+    if (devisIdToDelete) {
+      deleteDevis.mutate(devisIdToDelete);
+      setDevisIdToDelete(null);
       setIsConfirmDeleteModalOpen(false);
     }
   };
@@ -434,7 +434,7 @@ export const DevisPage = () => {
         isDismissable
       >
         <Dialog>
-          <DialogHeader>
+          <DialogHeader slot="title">
             <h2 className="text-xl font-semibold">
               Devis {selectedDevis?.number}
             </h2>
@@ -535,7 +535,7 @@ export const DevisPage = () => {
         isDismissable
       >
         <Dialog>
-          <DialogHeader>
+          <DialogHeader slot="title">
             <h2 className="text-xl font-semibold text-red-600">
               Supprimer le devis
             </h2>