diff --git a/front/MyINPulse-front/index.html b/front/MyINPulse-front/index.html
index 9e5fc8f..a678cb5 100644
--- a/front/MyINPulse-front/index.html
+++ b/front/MyINPulse-front/index.html
@@ -1,13 +1,13 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="">
-  <head>
-    <meta charset="UTF-8">
-    <link rel="icon" href="/favicon.ico">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Vite App</title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.ts"></script>
-  </body>
+    <head>
+        <meta charset="UTF-8" />
+        <link rel="icon" href="/favicon.ico" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Vite App</title>
+    </head>
+    <body>
+        <div id="app"></div>
+        <script type="module" src="/src/main.ts"></script>
+    </body>
 </html>
diff --git a/front/MyINPulse-front/src/ApiClasses/SectionCell.ts b/front/MyINPulse-front/src/ApiClasses/SectionCell.ts
index 1b346d1..e5fa52e 100644
--- a/front/MyINPulse-front/src/ApiClasses/SectionCell.ts
+++ b/front/MyINPulse-front/src/ApiClasses/SectionCell.ts
@@ -43,6 +43,15 @@ class SectionCell {
     set modificationDate(value: string | undefined) {
         this._modificationDate = value;
     }
+
+    toPlainObject() {
+        return {
+            idSectionCell: this._idSectionCell,
+            sectionId: this._sectionId,
+            contentSectionCell: this._contentSectionCell,
+            modificationDate: this._modificationDate,
+        };
+    }
 }
 
 export default SectionCell;
diff --git a/front/MyINPulse-front/src/api_tmp.ts b/front/MyINPulse-front/src/api_tmp.ts
index 222915f..3399062 100644
--- a/front/MyINPulse-front/src/api_tmp.ts
+++ b/front/MyINPulse-front/src/api_tmp.ts
@@ -636,12 +636,12 @@ function requestProjectCreation(
 }
 
 function addSectionCell(
-    sectionCellDetails: SectionCell, // Replace 'any' with a proper type for section cell details if available
+    sectionCellDetails: SectionCell,
     onSuccessHandler?: (response: AxiosResponse) => void,
     onErrorHandler?: (error: AxiosError) => void
 ): void {
     axiosInstance
-        .post("/entrepreneur/sectionCells", sectionCellDetails)
+        .post("/entrepreneur/sectionCells", sectionCellDetails.toPlainObject())  // <-- Ici
         .then((response) => {
             if (onSuccessHandler) {
                 onSuccessHandler(response);
diff --git a/front/MyINPulse-front/src/components/canvas/CanvasItem.vue b/front/MyINPulse-front/src/components/canvas/CanvasItem.vue
index a106e74..4bcdc33 100755
--- a/front/MyINPulse-front/src/components/canvas/CanvasItem.vue
+++ b/front/MyINPulse-front/src/components/canvas/CanvasItem.vue
@@ -6,37 +6,32 @@
 
         <template v-if="expanded">
             <div class="explain">
-                <p>
-                    {{ description }}
-                </p>
+                <p>{{ description }}</p>
             </div>
         </template>
 
         <div class="description-wrapper custom-flow">
             <div
                 v-for="(desc, index) in currentDescriptions"
-                :key="index"
+                :key="desc.idSectionCell || index"
                 :class="[
                     'section-bloc',
                     index % 2 === 0 ? 'from-left' : 'from-right',
                 ]"
-                class="section-bloc"
             >
                 <!-- ADMIN -------------------------------------------------------------------------------------------->
-
                 <template v-if="IS_ADMIN">
                     <div class="description">
-                        <p class="m-0">{{ desc }}</p>
+                        <p class="m-0">{{ desc.contentSectionCell }}</p>
                     </div>
                 </template>
 
                 <!-- ENTREP ------------------------------------------------------------------------------------------->
-
-                <template v-if="!IS_ADMIN">
+                <template v-else>
                     <!-- Mode affichage -->
                     <template v-if="!isEditing[index]">
                         <div class="description">
-                            <p class="m-0">{{ desc }}</p>
+                            <p class="m-0">{{ desc.contentSectionCell }}</p>
                         </div>
                         <div class="button-container">
                             <button
@@ -53,7 +48,9 @@
                     <template v-else>
                         <div class="edit-row">
                             <textarea
-                                v-model="editedDescriptions[index]"
+                                v-model="
+                                    editedDescriptions[index].contentSectionCell
+                                "
                                 class="edit-input"
                             ></textarea>
                             <div class="button-container">
@@ -74,7 +71,7 @@
                     </template>
                 </template>
             </div>
-            <!---------------------------------------------------------------------------------------------------->
+
             <template v-if="expanded">
                 <div class="canvas-exit-hint">
                     Cliquez n'importe où pour quitter le canvas (terminez
@@ -87,10 +84,10 @@
 
 <script setup lang="ts">
 import { ref, defineProps, onMounted } from "vue";
-import axios from "axios";
-import { axiosInstance } from "@/services/api.ts";
-
-const IS_MOCK_MODE = true;
+import { getSectionCellsByDate } from "@/api_tmp.ts";
+import SectionCell from "@/ApiClasses/SectionCell.ts";
+import { addSectionCell } from "@/api_tmp.ts";
+import type { AxiosResponse, AxiosError } from "axios";
 
 const props = defineProps<{
     projectId: number;
@@ -100,86 +97,125 @@ const props = defineProps<{
     isAdmin: number;
 }>();
 
+const IS_MOCK_MODE = false;
 const IS_ADMIN = props.isAdmin;
 
 const expanded = ref(false);
-const currentDescriptions = ref<string[]>([]);
-currentDescriptions.value[0] = props.description;
-const editedDescriptions = ref<string[]>([]);
+const currentDescriptions = ref<SectionCell[]>([]);
+const editedDescriptions = ref<SectionCell[]>([]);
 const isEditing = ref<boolean[]>([]);
 
+function getCurrentFormattedDate(): string {
+  const now = new Date();
+  const year = now.getFullYear();
+  const month = String(now.getMonth() + 1).padStart(2, '0'); // +1 car janvier = 0
+  const day = String(now.getDate()).padStart(2, '0');
+  const hours = String(now.getHours()).padStart(2, '0');
+  const minutes = String(now.getMinutes()).padStart(2, '0');
+
+  return `${year}-${month}-${day} ${hours}:${minutes}`;
+}
+
 onMounted(() => {
-    fetchData(props.projectId, props.title, "NaN", IS_MOCK_MODE);
+    fetchData(props.projectId, props.title, getCurrentFormattedDate(), IS_MOCK_MODE);
 });
 
-/* FOR LOCAL DATABASE
-const fetchData = async () => {
-  try {
-    const response = await axios.get("http://localhost:5000/data"); // Met à jour l'URL
-    if (response.data.length > 0) {
-      currentDescription.value = response.data[0].canva_data;
-      editedDescription.value = response.data[0].canva_data;
-    } else {
-      console.warn("Aucune donnée reçue.");
-    }
-  } catch (error) {
-    console.error("Erreur lors de la récupération des données :", error);
-  }
+// Fonctions
+const startEditing = (index: number) => {
+    isEditing.value[index] = true;
 };
-*/
 
-// Fonction fetchData avec possibilité d'utiliser le mock
-/* FOR FETCHING WITH AXIOS DIRECTLY
-const fetchData = async (projectId: number, title: number, date: string, useMock = false) => {
-  try {
-    const responseData = useMock
-      ? await mockFetch(projectId, title, date)
-      : (await axios.get<{ txt: string }[]>(
-          `http://localhost:5000/shared/projects/lcsection/${projectId}/${title}/${date}`
-        )).data;
-    if (responseData.length > 0) {
-      currentDescriptions.value = responseData.map((item) => item.txt);
-      editedDescriptions.value = [...currentDescriptions.value];
-      isEditing.value = Array(responseData.length).fill(false);
-    } else {
-      console.warn("Aucune donnée reçue.");
-    }
-  } catch (error) {
-    console.error("Erreur lors de la récupération des données :", error);
-  }
+const cancelEdit = (index: number) => {
+    editedDescriptions.value[index].contentSectionCell =
+        currentDescriptions.value[index].contentSectionCell;
+    isEditing.value[index] = false;
 };
-*/
 
-// Fonction fetchData avec possibilité d'utiliser le mock
-const fetchData = async (
-    projectId: number,
-    title: number,
-    date: string,
-    useMock = false
-) => {
+const saveEdit = (index: number) => {
+    currentDescriptions.value[index].contentSectionCell =
+        editedDescriptions.value[index].contentSectionCell;
+    isEditing.value[index] = false;
+
+    if (!IS_MOCK_MODE){
+        addSectionCell(currentDescriptions.value[index],
+            (response) => {
+                console.log("Modification enregistrée avec succès :", response.data);
+            },
+            (error) => {
+                console.error("Erreur lors de l'enregistrement :", error);
+            }
+        );
+    }
+};
+
+
+const handleClick = () => {
+    if (expanded.value) {
+        const editingInProgress = isEditing.value.some((edit) => edit);
+        if (!editingInProgress) {
+            expanded.value = false;
+        }
+    } else {
+        expanded.value = true;
+    }
+};
+
+// fetchData
+const handleFetchSuccess = (sectionCells: SectionCell[]) => {
+    currentDescriptions.value = sectionCells;
+    editedDescriptions.value = sectionCells.map(
+        (cell) => new SectionCell({
+                    idSectionCell: cell.idSectionCell,
+                    sectionId: cell.sectionId,
+                    contentSectionCell: cell.contentSectionCell,
+                    modificationDate: cell.modificationDate, })
+    );
+    isEditing.value = Array(sectionCells.length).fill(false);
+};
+
+const handleFetchError = (error: unknown) => {
+    console.error("Erreur lors de la récupération des données :", error);
+};
+
+const fetchData = async ( projectId: number, title: number, date: string, useMock = false ) => {
     try {
-        const responseData = useMock
-            ? await mockFetch(projectId, title, date)
-            : (
-                  await axiosInstance.get<{ txt: string }[]>(
-                      `/shared/projects/lcsection/${projectId}/${title}/${date}`
-                  )
-              ).data;
-
-        if (responseData.length > 0) {
-            currentDescriptions.value = responseData.map((item) => item.txt);
-            editedDescriptions.value = [...currentDescriptions.value];
-            isEditing.value = Array(responseData.length).fill(false);
+        if (useMock) {
+            const responseData = await mockFetch(projectId, title, date);
+            handleFetchSuccess(responseData);
         } else {
-            console.warn("Aucune donnée reçue.");
+            await new Promise<void>((resolve, reject) => {
+                getSectionCellsByDate( projectId, title, date,
+                    (response: AxiosResponse) => {
+                        const data = response.data;
+
+                        if (Array.isArray(data) && data.length > 0) {
+                            const sectionCells = data.map((cellData) => new SectionCell({
+                                                    idSectionCell: cellData.idSectionCell,
+                                                    sectionId: cellData.sectionId,
+                                                    contentSectionCell: cellData.contentSectionCell,
+                                                    modificationDate:
+                                                    cellData.modificationDate, })
+                            );
+                            handleFetchSuccess(sectionCells);
+                        } else {
+                            console.warn( "Aucune donnée reçue ou format inattendu :", data);
+                        }
+
+                        resolve();
+                    },
+                    (error: AxiosError) => {
+                        handleFetchError(error);
+                        reject(error);
+                    }
+                );
+            });
         }
     } catch (error) {
-        console.error("Erreur lors de la récupération des données :", error);
+        handleFetchError(error);
     }
 };
 
-// Fonction de simulation de l'API
-const mockFetch = async (projectId: number, title: number, date: string) => {
+const mockFetch = async ( projectId: number, title: number, date: string ): Promise<SectionCell[]> => {
     console.log(
         `Mock fetch pour projectId: ${projectId}, title: ${title}, date: ${date}`
     );
@@ -233,95 +269,16 @@ const mockFetch = async (projectId: number, title: number, date: string) => {
     // On extrait les descriptions pour la section demandée
     const section = leanCanvasData[title] || ["Aucune donnée disponible."];
 
-    // On garde tous les éléments, dans l'ordre
-    const result = section.map((txt) => ({ txt }));
+    // On crée des instances de SectionCell
+    const result = section.map(
+        (txt, index) => new SectionCell({ idSectionCell: index + 1, sectionId: title,
+                                    contentSectionCell: txt, modificationDate: date, })
+    );
 
-    return new Promise<{ txt: string }[]>((resolve) => {
+    return new Promise<SectionCell[]>((resolve) => {
         setTimeout(() => resolve(result), 500);
     });
 };
-
-// Utilisation du mock dans handleClick pour tester sans serveur
-const handleClick = async () => {
-    if (!expanded.value) {
-        await fetchData(props.projectId, props.title, "NaN", IS_MOCK_MODE);
-    } else if (!isEditing.value.includes(true)) {
-        // Réinitialiser les descriptions si aucune édition n'est en cours
-        //currentDescriptions.value = [props.description];
-        editedDescriptions.value = [props.description];
-    }
-
-    if (!isEditing.value.includes(true)) {
-        expanded.value = !expanded.value;
-    }
-};
-
-const startEditing = (index: number) => {
-    isEditing.value[index] = true;
-};
-
-/*
-//FOR LOCAL HOST
-const saveEdit = async (index: number) => {
-  try {
-    const id = index + 1; // À adapter selon l'ID réel des données
-    await axios.put(`http://localhost:5000/data/${id}`, {
-      canva_data: editedDescriptions.value[index]
-    });
-
-    // Mettre à jour l'affichage local après la mise à jour réussie
-    currentDescriptions.value[index] = editedDescriptions.value[index];
-    isEditing.value[index] = false;
-  } catch (error) {
-    console.error("Erreur lors de la mise à jour des données :", error);
-  }
-};
-*/
-
-const saveEdit = async (index: number) => {
-    if (IS_MOCK_MODE) {
-        await mockSaveEdit(index);
-    } else {
-        try {
-            const id = index + 1;
-            await axios.put(`http://localhost:5000/data/${id}`, {
-                canva_data: editedDescriptions.value[index],
-            });
-
-            // Mettre à jour l'affichage local après la mise à jour réussie
-            currentDescriptions.value[index] = editedDescriptions.value[index];
-            isEditing.value[index] = false;
-        } catch (error) {
-            console.error("Erreur lors de la mise à jour des données :", error);
-        }
-    }
-};
-
-// Fonction de mock pour l'enregistrement
-const mockSaveEdit = async (index: number) => {
-    try {
-        const id = index + 1;
-        console.log(
-            `Mock save pour l'ID ${id} avec la description : ${editedDescriptions.value[index]}`
-        );
-
-        await new Promise((resolve) => setTimeout(resolve, 500)); // Simulation de délai réseau
-
-        // Mettre à jour l'affichage local après la mise à jour réussie
-        currentDescriptions.value[index] = editedDescriptions.value[index];
-        isEditing.value[index] = false;
-    } catch (error) {
-        console.error(
-            "Erreur lors de la mise à jour des données mockées :",
-            error
-        );
-    }
-};
-
-const cancelEdit = (index: number) => {
-    editedDescriptions.value[index] = currentDescriptions.value[index];
-    isEditing.value[index] = false;
-};
 </script>
 
 <style scoped>
diff --git a/front/MyINPulse-front/src/components/canvas/HeaderCanvas.vue b/front/MyINPulse-front/src/components/canvas/HeaderCanvas.vue
index b8966e4..37caabb 100644
--- a/front/MyINPulse-front/src/components/canvas/HeaderCanvas.vue
+++ b/front/MyINPulse-front/src/components/canvas/HeaderCanvas.vue
@@ -154,16 +154,6 @@ const contactSingle = (email: string) => {
         });
 };
 
-/*
-const copyToClipboard = (email: string) => {
-  navigator.clipboard.writeText(email).then(() => {
-    alert(`Adresse copiée : ${email}`);
-  }).catch(err => {
-    console.error("Erreur lors de la copie :", err);
-  });
-};
-*/
-
 // Cacher le menu si on clique en dehors
 const handleClickOutside = (event: MouseEvent) => {
     if (
