diff --git a/GrossesMitaines/grosses-mitaines-ui/src/pages/Invoices.js b/GrossesMitaines/grosses-mitaines-ui/src/pages/Invoices.js
index eccb20b..4b11d8a 100644
--- a/GrossesMitaines/grosses-mitaines-ui/src/pages/Invoices.js
+++ b/GrossesMitaines/grosses-mitaines-ui/src/pages/Invoices.js
@@ -24,7 +24,7 @@ const Invoices = () => {
                 var json = await response.json();
                 setInvoices(json);
             }
-            else{
+            else {
                 console.log("Erreur lors de la requête des invoices");
             }
         });
@@ -47,10 +47,17 @@ const Invoices = () => {
                     credentials: 'include'
                 }).then(async (response) => {
                     if (response.ok) {
-                        const deletedId = await response.json();
-                        setInvoices(invoices.filter((invoice) => invoice.id !== deletedId));
+                        const deletedInvoice = await response.json();
+                        var newInvoice = invoices.find(x => x.id == deletedInvoice.id);
+                        console.log(newInvoice);
+                        newInvoice.status = deletedInvoice.status;
+                        setInvoices([...(invoices.filter(x => x.id !== newInvoice.id)), { ...newInvoice }].sort((a, b) => a.id - b.id));
 
-                        onShowAlert('Annulation de la commande avec succès!', 2000);
+                        mySwal.fire({
+                            title: `Commande annulée...`,
+                            text: `La commande a été annulée!`,
+                            icon: 'success',
+                        });
                     }
                     else {
                         mySwal.fire({
diff --git a/GrossesMitaines/grosses-mitaines-ui/src/pages/MyInvoices.js b/GrossesMitaines/grosses-mitaines-ui/src/pages/MyInvoices.js
index 6d62068..6ba10f8 100644
--- a/GrossesMitaines/grosses-mitaines-ui/src/pages/MyInvoices.js
+++ b/GrossesMitaines/grosses-mitaines-ui/src/pages/MyInvoices.js
@@ -7,9 +7,9 @@ import withReactContent from "sweetalert2-react-content";
 const MyInvoices = () => {
 
     const [invoices, setInvoices] = useState([]);
-    
+
     const mySwal = withReactContent(Swal);
-    
+
     useEffect(() => {
         fetch(`https://localhost:7292/api/Invoice`, {
             method: 'GET',
@@ -20,7 +20,7 @@ const MyInvoices = () => {
                 var json = await response.json();
                 setInvoices(json);
             }
-            else{
+            else {
                 console.log("Erreur lors de la requête des invoices");
             }
         });
@@ -43,8 +43,11 @@ const MyInvoices = () => {
                     credentials: 'include'
                 }).then(async (response) => {
                     if (response.ok) {
-                        const deletedId = await response.json();
-                        setInvoices(invoices.filter((invoice) => invoice.id !== deletedId));
+                        const deletedInvoice = await response.json();
+                        var newInvoice = invoices.find(x => x.id == deletedInvoice.id);
+                        console.log(newInvoice);
+                        newInvoice.status = deletedInvoice.status;
+                        setInvoices([...(invoices.filter(x => x.id !== newInvoice.id)), { ...newInvoice }].sort((a, b) => a.id - b.id));
 
                         mySwal.fire({
                             title: `Commande annulée...`,
diff --git a/GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css b/GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css
index d82ca7e..b1504b5 100644
--- a/GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css
+++ b/GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css
@@ -758,6 +758,7 @@ a {
     width: 50%;
     margin: auto;
     margin-top: 10px;
+    margin-right: 10px;
 }
 
 .invoice-item-products {