diff --git a/front/MyINPulse-front/src/components/Appointments.vue b/front/MyINPulse-front/src/components/Appointments.vue
new file mode 100644
index 0000000..f534ed4
--- /dev/null
+++ b/front/MyINPulse-front/src/components/Appointments.vue
@@ -0,0 +1,169 @@
+<template>
+    <div>
+      <h2>Ajouter / Modifier un Rapport pour un Rendez-vous</h2>
+  
+      <form @submit.prevent="submitReport">
+        <div>
+          <label for="appointmentId">ID du rendez-vous :</label>
+          <div style="display: flex; align-items: center; gap: 0.5rem;">
+            <button type="button" @click="decrementId">-</button>
+            <input
+              type="number"
+              id="appointmentId"
+              v-model.number="appointmentId"
+              min="1"
+              style="width: 60px; text-align: center;"
+            />
+            <button type="button" @click="incrementId">+</button>
+          </div>
+        </div>
+  
+        <div>
+          <label for="reportContent">Contenu du rapport :</label>
+          <textarea
+            id="reportContent"
+            v-model="reportContent"
+            required
+          ></textarea>
+        </div>
+  
+        <button type="submit">{{ isUpdate ? "Mettre à jour" : "Créer" }} le rapport</button>
+      </form>
+  
+      <p v-if="responseMessage">{{ responseMessage }}</p>
+    </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      appointmentId: 1, // Valeur initiale par défaut
+      reportContent: "",
+      responseMessage: "",
+      isUpdate: false, // Détermine si l'on fait une mise à jour ou une création
+    };
+  },
+  methods: {
+    incrementId() {
+      this.appointmentId++;
+    },
+    decrementId() {
+      if (this.appointmentId > 1) {
+        this.appointmentId--;
+      }
+    },
+    async submitReport() {
+      const reportData = {
+        reportContent: this.reportContent,
+      };
+
+      let url = `/admin/appointments/report/${this.appointmentId}`;
+      let method = this.isUpdate ? "PUT" : "POST";
+      
+      try {
+        const response = await this.$axios({
+          method,
+          url,
+          data: reportData,
+        });
+
+        if (response.status === 201 || response.status === 200) {
+          this.responseMessage = "Rapport " + (this.isUpdate ? "mis à jour" : "créé") + " avec succès.";
+        }
+      } catch (error) {
+        if (error.response && error.response.status === 400) {
+          this.responseMessage = "Requête invalide. Vérifiez les informations.";
+        } else if (error.response && error.response.status === 401) {
+          this.responseMessage = "Vous n'êtes pas autorisé à effectuer cette action.";
+        } else {
+          this.responseMessage = "Une erreur est survenue. Veuillez réessayer.";
+        }
+      }
+    },
+  },
+  watch: {
+    appointmentId(newVal) {
+      if (newVal) {
+        this.isUpdate = true;
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+/* Centrer le formulaire */
+div {
+  max-width: 600px;
+  margin: 0 auto;
+  padding: 1rem;
+  background-color: #f9f9f9;
+  border-radius: 8px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+/* Titre */
+h2 {
+  text-align: center;
+  color: #333;
+  margin-bottom: 1rem;
+}
+
+/* Formulaire */
+form {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+/* Boutons */
+button {
+  padding: 0.5rem 1rem;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
+button:hover {
+  background-color: #0056b3;
+}
+
+/* Input et Textarea */
+input[type="number"],
+textarea {
+  width: 100%;
+  padding: 0.5rem;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  font-size: 1rem;
+}
+
+textarea {
+  height: 120px;
+  resize: none;
+}
+
+/* Message de réponse */
+p {
+  text-align: center;
+  font-weight: bold;
+  color: green;
+}
+
+/* Boutons d'incrémentation/décrémentation */
+div[style*="display: flex"] button {
+  background-color: #6c757d;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  padding: 0.5rem;
+}
+
+div[style*="display: flex"] button:hover {
+  background-color: #5a6268;
+}
+</style>
diff --git a/front/MyINPulse-front/src/components/canvas/CanvasItem.vue b/front/MyINPulse-front/src/components/canvas/CanvasItem.vue
index 9ee1554..a106e74 100755
--- a/front/MyINPulse-front/src/components/canvas/CanvasItem.vue
+++ b/front/MyINPulse-front/src/components/canvas/CanvasItem.vue
@@ -261,6 +261,7 @@ const startEditing = (index: number) => {
 };
 
 /*
+//FOR LOCAL HOST
 const saveEdit = async (index: number) => {
   try {
     const id = index + 1; // À adapter selon l'ID réel des données
diff --git a/front/MyINPulse-front/src/components/canvas/LeanCanvas.vue b/front/MyINPulse-front/src/components/canvas/LeanCanvas.vue
index 1c84fd7..1e72fcb 100644
--- a/front/MyINPulse-front/src/components/canvas/LeanCanvas.vue
+++ b/front/MyINPulse-front/src/components/canvas/LeanCanvas.vue
@@ -14,7 +14,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { ref } from "vue";
 import CanvasItem from "@/components/canvas/CanvasItem.vue";
 
 const props = defineProps<{
@@ -87,6 +87,7 @@ const items = ref([
     },
 ]);
 
+/*
 onMounted(() => {
     const bootstrapCss = document.createElement("link");
     bootstrapCss.rel = "stylesheet";
@@ -105,6 +106,7 @@ onMounted(() => {
     bootstrapJs.crossOrigin = "anonymous";
     document.body.appendChild(bootstrapJs);
 });
+*/
 </script>
 
 <style scoped>
diff --git a/front/MyINPulse-front/src/views/JoinOrCreatProjectForEntrep.vue b/front/MyINPulse-front/src/views/JoinOrCreatProjectForEntrep.vue
index cd8d494..dd7affa 100644
--- a/front/MyINPulse-front/src/views/JoinOrCreatProjectForEntrep.vue
+++ b/front/MyINPulse-front/src/views/JoinOrCreatProjectForEntrep.vue
@@ -33,7 +33,7 @@
 
         <div v-if="choix === 'joindre'" class="message-indispo">
             <h2>Joindre un projet</h2>
-            <p>⚠️ Cette fonctionnalité n'est pas encore disponible.</p>
+            <p>Cette fonctionnalité n'est pas encore disponible.</p>
         </div>
     </div>
 </template>
@@ -54,7 +54,6 @@ const validerCreation = () => {
         return;
     }
     alert(`Projet "${nomProjet.value}" créé avec succès !`);
-    // Tu peux ensuite naviguer ou faire un POST ici
 };
 </script>