diff --git a/templates/admin.html b/templates/admin.html
index 3fd7ec0..1b17aae 100644
--- a/templates/admin.html
+++ b/templates/admin.html
@@ -92,6 +92,86 @@ <h1 class="text-left">Templates de VMs</h1>
     <hr>
 
     <script>
+        function showLoadingCardModal(id) {
+            $("#" + id + "-loading-modal").css("display", "block");
+        }
+
+        function hideLoadingCardModal(id) {
+            $("#" + id + "-loading-modal").css("display", "none");
+        }
+
+        function createLdsDefaultContainer(id) {
+            var ldsDefaultContainer = $('<div>').addClass('lds-default-container');
+            var ldsDefaultSpinner = createLdsDefaultSpinner(id);
+            ldsDefaultContainer.append(ldsDefaultSpinner);
+            return ldsDefaultContainer;
+        }
+
+        function createLdsDefaultSpinner(id) {
+            var ldsDefaultSpinner = $('<div>').addClass('lds-default').attr('id', id + '-loading-modal');
+            for (var i = 0; i < 12; i++) {
+                var childDiv = $('<div>');
+                ldsDefaultSpinner.append(childDiv);
+            }
+            return ldsDefaultSpinner;
+        }
+
+        function checkIfVmAlive(id) {
+            return new Promise(function (resolve, reject) {
+                showLoadingCardModal(id);   
+                $.ajax({
+                    type: 'GET',
+                    url: 'https://api.insa-cvl.com/vm/status/template/' + id,
+                    contentType: 'application/json;charset=UTF-8',
+                    xhrFields: {
+                        withCredentials: true
+                    },
+                    success: function (response) {
+                        console.log("VM: " + id + ": STATE: " + response.vm_state + " STATUS: " + response.status);
+                        if (response.vm_state == "1" && response.status == "ACTIVE") {
+                            hideLoadingCardModal(id);
+                            resolve(1); 
+                        } else {
+                            hideLoadingCardModal(id);
+                            resolve(0);
+                        }
+                    },
+                    error: function (error) {
+                        reject("Erreur d'obtention d'informations de la VM");
+                    }
+                });
+            });
+        }
+
+        async function deleteVm(id) {
+            try {
+                var output = await checkIfVmAlive(id);
+                if (output == 1) {
+                    showLoadingModal();
+                    $.ajax({
+                        type: 'DELETE',
+                        url: 'https://api.insa-cvl.com/vm/delete_admin',
+                        contentType: 'application/json;charset=UTF-8',
+                        data: JSON.stringify({ template_id: id }),
+                        xhrFields: {
+                            withCredentials: true
+                        },
+                        success: function (response) {
+                            hideLoadingModal();
+                            location.reload();
+                        },
+                        error: function (error) {
+                            alert('Erreur de suppression de la VM');
+                            hideLoadingModal(); 
+                        }
+                    });
+                }
+            } catch (error) {
+                alert(error);
+                hideLoadingModal(); 
+            }
+        }
+        
         function getVms() {
             $.ajax({
                 type: 'GET',
@@ -133,7 +213,8 @@ <h1 class="text-left">Templates de VMs</h1>
                 $('<p>').addClass('card-text').text('User ID: ' + vm.users_id),
                 $('<p>').addClass('card-text').text('Date de création: ' + vm.creationDate),
                 $('<button>').addClass('btn btn-danger').text('Supprimer').on('click', function () {
-                    deleteVm(vm.id);
+                    // deleteVm(vm.id);
+                    console.log('suppression de la VM ' + vm.id);
                 })
             );
             return form;
@@ -149,7 +230,8 @@ <h1 class="text-left">Templates de VMs</h1>
         function createVmCardBody(vm) {
             var cardBody = $('<div>').addClass('card-body bg-dark text-white');
             var form = createVmForm(vm);
-            cardBody.append(form);
+            var ldsDefaultContainer = createLdsDefaultContainer(vm.id);
+            cardBody.append(form, ldsDefaultContainer);
             return cardBody;
         }
 
@@ -223,6 +305,7 @@ <h1 class="text-left">Templates de VMs</h1>
         }
 
         $(document).ready(function () {
+            getVms();
             getTemplates();
             getUsers();
             $('#addTemplateCard').on('click', function () {