diff --git a/front/MyINPulse-front/src/components/canvas/CanvasItem.vue b/front/MyINPulse-front/src/components/canvas/CanvasItem.vue
index 729fef2..3e504e8 100644
--- a/front/MyINPulse-front/src/components/canvas/CanvasItem.vue
+++ b/front/MyINPulse-front/src/components/canvas/CanvasItem.vue
@@ -5,7 +5,9 @@
     <!-- Mode affichage -->
     <template v-if="!isEditing">
       <p>{{ currentDescription }}</p>
-      <button v-if="expanded" @click.stop="startEditing" class="edit-button">Éditer</button>
+      <div class="button-container">
+        <button v-if="expanded" @click.stop="startEditing" class="edit-button">Éditer</button>
+      </div>
     </template>
 
     <!-- Mode édition -->
@@ -64,9 +66,20 @@ const startEditing = () => {
   isEditing.value = true;
 };
 
-const saveEdit = () => {
-  currentDescription.value = editedDescription.value;
-  isEditing.value = false;
+const saveEdit = async () => {
+  try {
+    const id = 1; // Mets l'ID ici (dans ton cas, l'unique entrée)
+    
+    await axios.put(`http://localhost:5000/data/${id}`, {
+      canva_data: editedDescription.value
+    });
+
+    // Mettre à jour l'affichage local après la mise à jour réussie
+    currentDescription.value = editedDescription.value;
+    isEditing.value = false;
+  } catch (error) {
+    console.error("Erreur lors de la mise à jour des données :", error);
+  }
 };
 
 const cancelEdit = () => {
@@ -135,8 +148,8 @@ const cancelEdit = () => {
 
 .button-container {
   position: absolute;
-  bottom: 20px;
-  right: 20px;
+  bottom: 40px;
+  right: 40px;
   display: flex;
   gap: 10px;
 }