diff --git a/Step/wwwroot/assets/styles/base/alarms.less b/Step/wwwroot/assets/styles/base/alarms.less
index eeadd9c0..0400f213 100644
--- a/Step/wwwroot/assets/styles/base/alarms.less
+++ b/Step/wwwroot/assets/styles/base/alarms.less
@@ -740,108 +740,104 @@
                     table-layout: fixed;
                     width: 100%;
                     border-collapse: collapse;
-                  }
-                  thead{
+                }
+                thead{
                     border-bottom: solid 2px @color-label-grey;
-                  }
-                  thead tr{
+                }
+                thead tr{
                     width: 1225px;
-                  }
-                  thead tr th{
-                      height: 46px;
-                  }
-                  tr:nth-child(even) {background: #dddddd}
-                        tr:nth-child(odd) {background: #FFF}
+                }
+                thead tr th{
+                    height: 46px;
+                }
+                tr:nth-child(even) {background: #dddddd}
+                tr:nth-child(odd) {background: #FFF}
 
-                        th:nth-child(1), td:nth-child(1){
-                            width:50px;
-                            max-width: 50px;
-                            text-align: left;
-                            padding-left: 5px;
-                        }
+                th:nth-child(1), td:nth-child(1){
+                    width:50px;
+                    max-width: 50px;
+                    text-align: left;
+                    padding-left: 5px;
+                }
 
-                        th:nth-child(2), td:nth-child(2){
-                            width:50px;
-                            max-width:50px;
-                        }
-                        th:nth-child(3), td:nth-child(3){
-                            width:300px;
-                            max-width:300px;
-                        }
-                        th:nth-child(4), td:nth-child(4){
-                            width:300px;
-                            max-width:300px;
-                        }
-                        th:nth-child(5),td:nth-child(5){
-                            width:100px;
-                            max-width:100px;
-                        }
-                        th:nth-child(6), td:nth-child(6){
-                            width:100px;
-                            max-width: 100px;
-                        }
-                        th, td{
-                            overflow: hidden;
-                            div{
-                                overflow: hidden;
+                th:nth-child(2), td:nth-child(2){
+                    width:50px;
+                    max-width:50px;
+                }
+                th:nth-child(3), td:nth-child(3){
+                    width:300px;
+                    max-width:300px;
+                }
+                th:nth-child(4), td:nth-child(4){
+                    width:300px;
+                    max-width:300px;
+                }
+                th:nth-child(5),td:nth-child(5){
+                    width:100px;
+                    max-width:100px;
+                }
+                th:nth-child(6), td:nth-child(6){
+                    width:100px;
+                    max-width: 100px;
+                }
+                th, td{
+                    overflow: hidden;
+                    div{
+                        overflow: hidden;
                                 max-height: 64px;
-                            }
+                    }
+                }
+                tbody{
+                    display: block;
+                    height: 597px;
+                    width: 1241px;
+                    tr{
+                        cursor: pointer;
+                        height:  64px;
+                        padding: 10px;
+                        td{
+                            text-align: center;
                         }
-                        tbody{
-                            display: block;
-                            height: 631px;
-                            width: 1241px;
-                            tr{
-                                cursor: pointer;
-                                height:  64px;
-                                padding: 10px;
-                                td{
-                                    text-align: center;
-                                }
-                                &.selected{
-                                    background-color: rgba(23, 145, 255, 0.75);
-                                    color: @color-white;
-                                }
-                            }
+                        &.selected{
+                            background-color: rgba(23, 145, 255, 0.75);
+                            color: @color-white;
                         }
-                        tr{
-                            width: 100%;
-                            display: table;
-                        }
-                //   thead{
-                //     width: 1241px;
-                //   }
-                //   tbody{
-                //       width: 1241px;
-                //       min-height: 680px;
-                //   }
-                //   tr{
-                //       min-height: 64px;
-                //   }
-                //   td, th {
-                //       text-align: center;
-                //       // padding: 8px;
-                //       height: 64px;
-                //       font-size: 14px;
-                //       line-height: 1.43;
-                //       color: @color-greyish-brown;
-                //   }
-                //   td{
-                //       min-height: 64px;
-                //   }
-                //   thead tr th{
-                //       font-size: 14px;
-                //       line-height: 1.43;
-                //       font-weight: 600;
-                //       color: @color-greyish-brown;
-                //       background-color: @color-background-white;
-                //   }
-                //   tr:nth-child(even) {
-                //       background-color: @color-white4;
-                //   }
-                //   tr:nth-child(odd){
-                //       background-color: @color-clear-blue-30;
-                //   }
+                    }
+                }
+                tr{
+                    width: 100%;
+                    display: table;
+                }
+                .pagination {
+                    display: inline-block;
+                }
+                  
+                .pagination button {
+                    padding: 0;
+                    border: none;
+                    background: none;
+                    color: @color-black-40;
+                    float: left;
+                    padding: 8px 16px;
+                    text-decoration: none;
+                    border: 1px solid @color-whitegrey;
+                    margin: 0 4px;
+                }
+                .pagination button:first-child {
+                    border-top-left-radius: 5px;
+                    border-bottom-left-radius: 5px;
+                }
+                  
+                .pagination button:last-child {
+                    border-top-right-radius: 5px;
+                    border-bottom-right-radius: 5px;
+                }
+                .pagination button.active {
+                    background-color: @color-warm-grey;
+                    color: @color-white;
+                }
+                  
+                .pagination button:hover:not(.active) {background-color: @color-whitegrey;}
             }
         }
 
diff --git a/Step/wwwroot/assets/styles/style.css b/Step/wwwroot/assets/styles/style.css
index 6888e377..4bf2a1b8 100644
--- a/Step/wwwroot/assets/styles/style.css
+++ b/Step/wwwroot/assets/styles/style.css
@@ -4308,7 +4308,7 @@ footer .container button.big:before {
 }
 .alarm-history-container .alarm-history-body .alarm-history-body-left .alarm-history-table tbody {
   display: block;
-  height: 631px;
+  height: 597px;
   width: 1241px;
 }
 .alarm-history-container .alarm-history-body .alarm-history-body-left .alarm-history-table tbody tr {
@@ -4327,6 +4327,35 @@ footer .container button.big:before {
   width: 100%;
   display: table;
 }
+.alarm-history-container .alarm-history-body .alarm-history-body-left .alarm-history-table .pagination {
+  display: inline-block;
+}
+.alarm-history-container .alarm-history-body .alarm-history-body-left .alarm-history-table .pagination button {
+  padding: 0;
+  border: none;
+  background: none;
+  color: rgba(0, 0, 0, 0.4);
+  float: left;
+  padding: 8px 16px;
+  text-decoration: none;
+  border: 1px solid #dddddd;
+  margin: 0 4px;
+}
+.alarm-history-container .alarm-history-body .alarm-history-body-left .alarm-history-table .pagination button:first-child {
+  border-top-left-radius: 5px;
+  border-bottom-left-radius: 5px;
+}
+.alarm-history-container .alarm-history-body .alarm-history-body-left .alarm-history-table .pagination button:last-child {
+  border-top-right-radius: 5px;
+  border-bottom-right-radius: 5px;
+}
+.alarm-history-container .alarm-history-body .alarm-history-body-left .alarm-history-table .pagination button.active {
+  background-color: #878787;
+  color: #fff;
+}
+.alarm-history-container .alarm-history-body .alarm-history-body-left .alarm-history-table .pagination button:hover:not(.active) {
+  background-color: #dddddd;
+}
 .alarm-history-container .alarm-history-body .alarm-disable-box-right {
   width: 496px;
   height: 760px;
diff --git a/Step/wwwroot/src/app_modules/alarms/components/alarm-history.ts b/Step/wwwroot/src/app_modules/alarms/components/alarm-history.ts
index fc5852b3..d366e599 100644
--- a/Step/wwwroot/src/app_modules/alarms/components/alarm-history.ts
+++ b/Step/wwwroot/src/app_modules/alarms/components/alarm-history.ts
@@ -68,6 +68,7 @@ export default class AlarmHistory extends Vue {
   newAttach: any = null;
   newNote: any = {};
   enableModifyNote = true;
+  selectedPage = 1;
   // get filteredAttaches() {
   //   return this.attaches.filter((v, idx) => idx < this.limitationList);
   // }
@@ -108,6 +109,8 @@ export default class AlarmHistory extends Vue {
     })
 
     this.data = await alarmsService.getAlarms(this.filter.title, arraySourceFilter, arrayUserFilter, from, to, 0, 100);
+    this.paginationData = await alarmsService.getAlarmsData();
+    console.log(this.paginationData);
   }
 
   async mounted() {
@@ -115,6 +118,7 @@ export default class AlarmHistory extends Vue {
     this.users = await loginService.getAllUsers();
     this.users.unshift({id: -1, username: this.$options.filters.localize("alarm_history_users_not_user", "Nessun utente")});
     this.paginationData = await alarmsService.getAlarmsData();
+    console.log(this.paginationData);
   }
 
   async onChange(e) {
@@ -283,4 +287,7 @@ export default class AlarmHistory extends Vue {
     else
       $('.checkboxesU').removeClass('checkboxesViewUser');
   }
+  public selectPage(page) {
+    this.selectedPage = page;
+  }
 }
diff --git a/Step/wwwroot/src/app_modules/alarms/components/alarm-history.vue b/Step/wwwroot/src/app_modules/alarms/components/alarm-history.vue
index cbf4e613..2eac2ae5 100644
--- a/Step/wwwroot/src/app_modules/alarms/components/alarm-history.vue
+++ b/Step/wwwroot/src/app_modules/alarms/components/alarm-history.vue
@@ -122,6 +122,13 @@
                 </tr>
               </tbody>
             </table>
+            <div class="pagination">
+              <button><i class="fa fa-angle-double-left"></i></button>
+              <button class="page" :class="{active: selectedPage == 1}" @click="selectPage(1)">1</button>
+              <button class="page" :class="{active: selectedPage == 2}" @click="selectPage(2)">2</button>
+              <button class="page" :class="{active: selectedPage == 3}" @click="selectPage(3)">3</button>
+              <button><i class="fa fa-angle-double-right"></i></button>
+            </div>
           </div>
         </div>
         <div class="alarm-history-body-right">