diff --git a/Step/wwwroot/assets/styles/base/alarms.less b/Step/wwwroot/assets/styles/base/alarms.less
index 382be506..5a6a8f86 100644
--- a/Step/wwwroot/assets/styles/base/alarms.less
+++ b/Step/wwwroot/assets/styles/base/alarms.less
@@ -325,7 +325,7 @@
           .all-message-box{
               max-height: 310px;
               .message-box{
-                  width: 408px;
+                  width: 390px;
                   min-height: 96px;
                   display: flex;
                   flex-flow: column;
@@ -341,7 +341,7 @@
                       textarea{
                           border: none;
                           resize: none;
-                          background-color: transparent;
+                          // background-color: transparent;
                           padding: 3px;
                           box-sizing: border-box;
                           cursor: pointer;
diff --git a/Step/wwwroot/assets/styles/style.css b/Step/wwwroot/assets/styles/style.css
index 25ad51c5..8aeba641 100644
--- a/Step/wwwroot/assets/styles/style.css
+++ b/Step/wwwroot/assets/styles/style.css
@@ -3828,7 +3828,7 @@ footer .container button.big:before {
   max-height: 310px;
 }
 .accordion section .dropdown .all-message-box .message-box {
-  width: 408px;
+  width: 390px;
   min-height: 96px;
   display: flex;
   flex-flow: column;
@@ -3846,7 +3846,6 @@ footer .container button.big:before {
 .accordion section .dropdown .all-message-box .message-box .message-box-header textarea {
   border: none;
   resize: none;
-  background-color: transparent;
   padding: 3px;
   box-sizing: border-box;
   cursor: pointer;
diff --git a/Step/wwwroot/src/app_modules/alarms/components/alarm-detail.ts b/Step/wwwroot/src/app_modules/alarms/components/alarm-detail.ts
index 38eb77cd..c66919c4 100644
--- a/Step/wwwroot/src/app_modules/alarms/components/alarm-detail.ts
+++ b/Step/wwwroot/src/app_modules/alarms/components/alarm-detail.ts
@@ -6,6 +6,8 @@ import Component from "vue-class-component";
 import { Prop } from "vue-property-decorator";
 import { alarmsService } from "src/services/alarmsService";
 import { ModalHelper } from "src/components/modals";
+import { getColorFromName, isDarkColor } from "src/_base/utils";
+import moment from "moment";
 
 @Component({ components: { accordion: Accordion } })
 export default class AlarmDetail extends Vue {
@@ -16,8 +18,11 @@ export default class AlarmDetail extends Vue {
   attaches = [];
   notes = [];
   newAttach: any = null;
-  selectedAttachMaintenance: any = null;
+  newNote: any = {};
+  selectedAttach: any = null;
+  selectedNote: any = null;
   limitationList: number = 3;
+  enableModifyNote = true;
 
   get currentUser() {
     return this.$store.state.currentUser;
@@ -39,6 +44,10 @@ export default class AlarmDetail extends Vue {
     return this.attaches.filter((v, idx) => idx < this.limitationList);
   }
 
+  get filteredNotes() {
+    return this.notes.filter((v, idx) => idx < this.limitationList);
+  }
+
   async mounted() {
     this.attaches = await alarmsService.getAttachments(this.alarm.id);
     this.notes = await alarmsService.getNote(this.alarm.id);
@@ -52,12 +61,11 @@ export default class AlarmDetail extends Vue {
     // new MaintenanceService().uploadFile(this.selectedMaintenance, this.state.file);
   }
 
-  updateLimitation(limitationList) {
-    if (this.limitationList == this.attaches.length) {
-      this.limitationList = 3;
-    } else {
-      this.limitationList = this.attaches.length;
-    }
+  updateLimitation() {
+    if (this.limitationList > 3)
+      this.limitationList == 3;
+    else
+      this.limitationList = Math.max(this.attaches.length, this.notes.length, 3);
   }
 
   isimage(name) {
@@ -86,8 +94,43 @@ export default class AlarmDetail extends Vue {
     }
   }
 
+  deselectNote() {
+    if (!this.enableModifyNote) return;
+    this.selectedNote = {};
+  }
+
   onClickSelectAttach(attach) {
-    this.selectedAttachMaintenance = attach;
+    this.selectedAttach = attach;
+  }
+
+  onClickSelectNote(note) {
+    this.selectedNote = note;
+  }
+
+  onClickModifyNote(note) {
+    if (this.selectedNote == note) {
+      this.enableModifyNote = false;
+      this.isDisabled(note);
+    }
+    this.enableModifyNote = false;
+    this.selectedNote = note;
+  }
+  onClickCancelModifyNote() {
+    this.enableModifyNote = true;
+  }
+  getColor(nome, cognome) {
+    return getColorFromName(nome, cognome);
+  }
+  isDarkColor(color) {
+    return isDarkColor(color);
+  }
+  isDisabled(note) {
+    if (this.selectedNote && this.selectedNote.id == note.id && !this.enableModifyNote) {
+      return false;
+    }
+    else {
+      return true;
+    }
   }
 
   async openAttach(attach) {
@@ -95,4 +138,18 @@ export default class AlarmDetail extends Vue {
       await alarmsService.OpenModal(attach, this.isimage(attach.fileName));
     }
   }
+  async saveNote(note) {
+    if (!note) return;
+
+    let result = await alarmsService.postNote(this.alarm.id, note.message);
+    this.notes.push(result);
+    this.newNote = {};
+
+  }
+  convertDate(date) {
+    return moment(date).format('L');
+  }
+  convertDateToTime(date) {
+    return moment(date).format('LT');
+  }
 };
diff --git a/Step/wwwroot/src/app_modules/alarms/components/alarm-detail.vue b/Step/wwwroot/src/app_modules/alarms/components/alarm-detail.vue
index 8228d335..6bb0dfd2 100644
--- a/Step/wwwroot/src/app_modules/alarms/components/alarm-detail.vue
+++ b/Step/wwwroot/src/app_modules/alarms/components/alarm-detail.vue
@@ -46,34 +46,65 @@
 
     <accordion :title="'Allegati'" :counter="attaches.length">
       <div class="dropdown">
-        <div class="filename" v-for="a in filteredAttaches" :key="a.id" :class="{selected: selectedAttachMaintenance == a}" @click="onClickSelectAttach(a)">
+        <div class="filename" v-for="a in filteredAttaches" :key="a.id" :class="{selected: selectedAttach == a}" @click="onClickSelectAttach(a)">
             <i class="fa fa-file-text-o" v-if="!isimage(a.fileName) && !ispdf(a.fileName)"></i>
             <i class="fa fa-file-image-o" v-if="isimage(a.fileName)"></i>
             <i class="fa fa-file-pdf-o" v-if="ispdf(a.fileName)"></i>
             <span>{{a.fileName}}</span>
             <div class="right">
-                <button class="btn-hidden" v-if="selectedAttachMaintenance == a" @click="openAttach(a)"><i class="fa fa-file-o"></i></button>
-                <button class="btn-hidden" v-if="selectedAttachMaintenance == a && a.userId == currentUser.id" @click="deleteAttach(a)"><i class="fa fa-trash" ></i></button>
+                <button class="btn-hidden" v-if="selectedAttach == a" @click="openAttach(a)"><i class="fa fa-file-o"></i></button>
+                <button class="btn-hidden" v-if="selectedAttach == a && a.userId == currentUser.id" @click="deleteAttach(a)"><i class="fa fa-trash" ></i></button>
             </div>
         </div>
         <div class="allattach" v-if="attaches.length>3">
             <button class="btn-hidden" @click="updateLimitation(limitationList)">
-                <span v-if="limitationList == attaches.length">{{'maintenance_card_btn_hide_all_attach' | localize("Nascondi tutti gli allegati")}}</span>
-                <span v-if="limitationList != attaches.length">{{'maintenance_card_btn_view_all_attach' | localize("Mostra tutti gli allegati")}}</span>
+                <span v-if="limitationList > 3">{{'maintenance_card_btn_hide_all_attach' | localize("Nascondi tutti gli allegati")}}</span>
+                <span v-if="limitationList < attaches.length">{{'maintenance_card_btn_view_all_attach' | localize("Mostra tutti gli allegati")}}</span>
             </button>
         </div>
         <div class="addattach">
           <div class="group-button-add-attach"><label for="input">{{'alarm_btn_add_attach' | localize("Aggiungi un allegato")}}<label for="input" class="btn"><i class="fa fa-plus"><input id="input" type="file" accept="application/pdf,image/jpeg,image/png" @change="onChange" style="display: none"/></i></label></label></div>
         </div>
       </div>
-      <!-- <div class="item text-success">
-        <div class="group-button-add-attach"><label for="input">{{'alarm_btn_add_attach' | localize("Aggiungi un allegato")}}<label for="input" class="btn"><span class="button btn text-22"><i class="fa fa-plus"><input id="input" type="file" accept="application/pdf,image/jpeg,image/png" @change="onChange" style="display: none"/></i></span></label></label></div>
-      </div> -->
     </accordion>
 
     <accordion :title="'Note'" :counter="notes.length">
-      <div class="item text-success">
-        <strong> Aggiungi una nota</strong> <button class="btn text-22"><i class="fa fa-plus"></i></button>
+      <div class="dropdown">
+        <div class="all-message-box scrollable_auto">
+          <div class="message-box" v-for="(n, index) in filteredNotes" :key="index"  @click="onClickSelectNote(n)">
+            <div class="message-box-header">
+              <div v-if="currentUser && n.user.username != currentUser.username" :class="{'colorWhite':isDarkColor(getColor(n.user.lastName,n.user.firstName))}" :style="{'background-color':getColor(n.user.lastName,n.user.firstName) }" class="avatar">{{n.user.firstName.split(' ').map(function (s) { return s.charAt(0); }).join('')}}{{n.user.lastName.split(' ').map(function (s) { return s.charAt(0); }).join('')}}</div>
+              <textarea :disabled="isDisabled(n)" class="text-message" v-model="n.message"></textarea>
+              <div v-if="currentUser && n.user.username == currentUser.username" :class="{'colorWhite':isDarkColor(getColor(n.user.lastName,n.user.firstName))}" :style="{'background-color':getColor(n.user.lastName,n.user.firstName) }" class="avatar"> {{n.user.firstName.split(' ').map(function (s) { return s.charAt(0); }).join('')}}{{n.user.lastName.split(' ').map(function (s) { return s.charAt(0); }).join('')}}</div>
+            </div>
+            <div  class="message-box-body" :class="{'my':(currentUser && n.user.username == currentUser.username)}">
+              <label class="text-date">{{'maintenance_card_label_date_timestamp' | localize("Aggiunta il %s alle %s",convertDate(n.dateTime),convertDateToTime(n.dateTime))}}</label>
+            </div>
+            <div class="groupbutton" :class="{'enablemodify':!enableModifyNote}">
+              <button class="btn-hidden" v-if="selectedNote == n && enableModifyNote && currentUser && n.user.username == currentUser.username" @click="onClickModifyNote(n)"><i class="fa fa-pencil-square-o"></i></button>
+              <button class="btn-hidden" v-if="selectedNote == n && enableModifyNote && currentUser && n.user.username == currentUser.username" @click="onClickDeleteNote(n)"><i class="fa fa-trash" ></i></button>
+              <div class="modify-padding">
+                <button class="btn" v-if="selectedNote == n && !enableModifyNote" @click="onClickCancelModifyNote">{{'maintenance_card_btn_cancel_modify_note' | localize("Cancel")}}</button>
+                <button class="btn" v-if="selectedNote == n && !enableModifyNote" @click="onClickModifyNoteMaintenance(n)">{{'maintenance_card_btn_save_modify_note' | localize("Save")}}</button>
+             </div>
+            </div>
+          </div>
+        </div>
+        <div class="allnotes">
+          <button class="btn-hidden" @click="updateLimitation(limitationList)">
+              <span v-if="limitationList > 3">{{'maintenance_card_btn_hide_all_note' | localize("Nascondi tutte le note")}}</span>
+              <span v-if="limitationList < notes.length">{{'maintenance_card_btn_view_all_note' | localize("Mostra tutte le note")}}</span>
+          </button>
+        </div>
+       <div class="addnote" @click="deselectNote()">
+          <div class="addnote-header">
+            <textarea @focus="deselectNote()" v-validate.initial="{required: true}" class="text-add-note" v-model="newNote.message" :disabled="!enableModifyNote"></textarea>
+            <div class="avatar" v-if="currentUser" :class="{'colorWhite':isDarkColor(getColor(currentUser.lastName,currentUser.firstName))}" :style="{'background-color':getColor(currentUser.lastName,currentUser.firstName) }" >{{currentUser.firstName.split(' ').map(function (s) { return s.charAt(0); }).join('')}}{{currentUser.lastName.split(' ').map(function (s) { return s.charAt(0); }).join('')}}</div>
+          </div>
+          <div class="addnote-buttons">
+            <button class="btn" :disabled="!enableModifyNote" @click="saveNote(newNote)">{{'maintenance_card_btn_save_note' | localize("Save")}}</button>
+          </div>
+        </div>
       </div>
     </accordion>
   <button class="btn btn-back" @click="close()">