diff --git a/Step/wwwroot/assets/styles/base/report.less b/Step/wwwroot/assets/styles/base/report.less
index f470e0a4..059544da 100644
--- a/Step/wwwroot/assets/styles/base/report.less
+++ b/Step/wwwroot/assets/styles/base/report.less
@@ -91,6 +91,7 @@
                     flex-flow: row;
                     margin-top: 18px;
                     border-right: solid 2px @color-whitegrey;
+                    position: relative;
                     .mx-datepicker-range{
                       width: 170px;
                       height: 70px;
@@ -179,6 +180,7 @@
                         font-size: 18px;
                         line-height: 1;
                         color: @color-darkish-blue;
+                        cursor: pointer;
                         span{
                           text-decoration-line: underline;
                           text-decoration-color: @color-darkish-blue;
@@ -186,6 +188,92 @@
                         }
                       }
                     }
+                    div.advanced-filters{
+                      z-index: 100;
+                      height: 80px;
+                      width: 100%;
+                      display: flex;
+                      flex-flow: row;
+                      background-color: @color-background-white;
+                      position: absolute;
+                      top: 80px;
+                      > div {
+                        display: flex;
+                        flex-flow: column;
+                        height: 70px;
+                        margin-right: 24px;
+                        label.intervaldate{
+                          width: 253px;
+                        }
+                        select{
+                          width: 192px;
+                          height: 48px;
+                          border-radius: 2px;
+                          box-shadow: 0 1px 2px 0 @color-black-40;
+                          border: solid 1px @color-silver;                     
+                          font-size: 18px;
+                          line-height: 1.11;
+                          color: @color-greyish-brown;
+                          padding-left: 16px; 
+                        }
+                        div.interval-time{
+                          display: flex;
+                          flex-flow: row;
+                          input[type="time"]{
+                            width: 112px;
+                            height: 48px;
+                            border-radius: 2px;
+                            box-shadow: inset 0 1px 3px 0 @color-black-50;
+                            font-size: 18px;
+                            line-height: 1.11;
+                            color: @color-silver;
+                          }
+                          input[type="time"]:first-child{
+                            margin-right: 16px;
+                          }
+                          input[type="time"]::-webkit-inner-spin-button {
+                            -webkit-appearance: none;
+                            display: none;
+                          }
+                        }
+                        input.program{
+                          width: 256px;
+                          height: 48px;
+                          border-radius: 2px;
+                          box-shadow: inset 0 1px 3px 0 @color-black-50;
+                          font-size: 18px;
+                          line-height: 1.11;
+                          color: @color-silver;
+                          padding-left: 16px;
+                        }
+                        .reports-select-operator{
+                          width: 192px;
+                          height: 48px;
+                          border-radius: 2px;
+                          box-shadow: 0 1px 2px 0 @color-black-40;
+                          font-size: 18px;
+                          line-height: 1.11;
+                          color: @color-greyish-brown;
+                        }
+                        .reports-select-shift{
+                          width: 144px;
+                          height: 48px;
+                          border-radius: 2px;
+                          box-shadow: 0 1px 2px 0 @color-black-40;
+                        }
+                        label.label_advanced_filters{
+                          margin-top: 35px; 
+                          font-size: 18px;
+                          line-height: 1;
+                          color: @color-darkish-blue;
+                          span{
+                            text-decoration-line: underline;
+                            text-decoration-color: @color-darkish-blue;
+                            text-decoration-style: solid;
+                          }
+                        }
+                      }
+                    }
                 }
                 .body-left-center {
                   width: 1448px;
@@ -282,13 +370,10 @@
                     max-width:97px;
                     text-align: center;
                   }
-                  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:last-child{
+                    font-size: 23px;
+                    font-weight: bold;
+                    cursor: pointer;
                   }
                   th, td{
                       overflow: hidden;
@@ -318,6 +403,9 @@
                                 color: @color-scarlet;
                               }
                           }
+                          td:last-child{
+                            width: 10px;
+                          }
                           &.selected{
                               background-color: rgba(23, 145, 255, 0.75);
                               color: @color-white;
@@ -350,12 +438,13 @@
                       box-shadow: 0 1px 2px 0 @color-black-40;
                       background-image: linear-gradient(to bottom,@color-white2, @color-silver);
                     }
-                    button:active{
+                    button.active{
                       width: 48px;
                       height: 48px;
                       border-radius: 2px;
                       box-shadow: inset 0 1px 3px 0 @color-black-40;
                       background-image: linear-gradient(to bottom, @color-silver, @color-white2 );
+                      color: @color-clear-blue;
                     }
                   }
                   .body-right-header-right {
diff --git a/Step/wwwroot/assets/styles/style.css b/Step/wwwroot/assets/styles/style.css
index caed356a..4bcedf8f 100644
--- a/Step/wwwroot/assets/styles/style.css
+++ b/Step/wwwroot/assets/styles/style.css
@@ -14828,6 +14828,7 @@ footer .container button.big:before {
   flex-flow: row;
   margin-top: 18px;
   border-right: solid 2px #dddddd;
+  position: relative;
 }
 .reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header .mx-datepicker-range {
   width: 170px;
@@ -14918,12 +14919,99 @@ footer .container button.big:before {
   font-size: 18px;
   line-height: 1;
   color: #002680;
+  cursor: pointer;
 }
 .reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header > div label.label_advanced_filters span {
   text-decoration-line: underline;
   text-decoration-color: #002680;
   text-decoration-style: solid;
 }
+.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header div.advanced-filters {
+  z-index: 100;
+  height: 80px;
+  width: 100%;
+  display: flex;
+  flex-flow: row;
+  background-color: #fff;
+  position: absolute;
+  top: 80px;
+}
+.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header div.advanced-filters > div {
+  display: flex;
+  flex-flow: column;
+  height: 70px;
+  margin-right: 24px;
+}
+.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header div.advanced-filters > div label.intervaldate {
+  width: 253px;
+}
+.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header div.advanced-filters > div select {
+  width: 192px;
+  height: 48px;
+  border-radius: 2px;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
+  border: solid 1px #bbbcbc;
+  font-size: 18px;
+  line-height: 1.11;
+  color: #4b4b4b;
+  padding-left: 16px;
+}
+.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header div.advanced-filters > div div.interval-time {
+  display: flex;
+  flex-flow: row;
+}
+.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header div.advanced-filters > div div.interval-time input[type="time"] {
+  width: 112px;
+  height: 48px;
+  border-radius: 2px;
+  box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5);
+  font-size: 18px;
+  line-height: 1.11;
+  color: #bbbcbc;
+}
+.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header div.advanced-filters > div div.interval-time input[type="time"]:first-child {
+  margin-right: 16px;
+}
+.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header div.advanced-filters > div div.interval-time input[type="time"]::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  display: none;
+}
+.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header div.advanced-filters > div input.program {
+  width: 256px;
+  height: 48px;
+  border-radius: 2px;
+  box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5);
+  font-size: 18px;
+  line-height: 1.11;
+  color: #bbbcbc;
+  padding-left: 16px;
+}
+.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header div.advanced-filters > div .reports-select-operator {
+  width: 192px;
+  height: 48px;
+  border-radius: 2px;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
+  font-size: 18px;
+  line-height: 1.11;
+  color: #4b4b4b;
+}
+.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header div.advanced-filters > div .reports-select-shift {
+  width: 144px;
+  height: 48px;
+  border-radius: 2px;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
+}
+.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header div.advanced-filters > div label.label_advanced_filters {
+  margin-top: 35px;
+  font-size: 18px;
+  line-height: 1;
+  color: #002680;
+}
+.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header div.advanced-filters > div label.label_advanced_filters span {
+  text-decoration-line: underline;
+  text-decoration-color: #002680;
+  text-decoration-style: solid;
+}
 .reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center {
   width: 1448px;
   max-height: 681px;
@@ -15031,15 +15119,10 @@ footer .container button.big:before {
   max-width: 97px;
   text-align: center;
 }
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center th:nth-child(5),
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center td:nth-child(5) {
-  width: 100px;
-  max-width: 100px;
-}
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center th:nth-child(6),
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center td:nth-child(6) {
-  width: 100px;
-  max-width: 100px;
+.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center th:last-child {
+  font-size: 23px;
+  font-weight: bold;
+  cursor: pointer;
 }
 .reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center th,
 .reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center td {
@@ -15073,6 +15156,9 @@ footer .container button.big:before {
 .reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center tbody tr td.red {
   color: #d0021b;
 }
+.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center tbody tr td:last-child {
+  width: 10px;
+}
 .reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center tbody tr.selected {
   background-color: rgba(23, 145, 255, 0.75);
   color: #fff;
@@ -15104,12 +15190,13 @@ footer .container button.big:before {
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
   background-image: linear-gradient(to bottom, #f1f1f1, #bbbcbc);
 }
-.reports-container .reports-box .reports-box-body .reports-box-body-right .body-right-header .body-right-header-left button:active {
+.reports-container .reports-box .reports-box-body .reports-box-body-right .body-right-header .body-right-header-left button.active {
   width: 48px;
   height: 48px;
   border-radius: 2px;
   box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.4);
   background-image: linear-gradient(to bottom, #bbbcbc, #f1f1f1);
+  color: #1791ff;
 }
 .reports-container .reports-box .reports-box-body .reports-box-body-right .body-right-header .body-right-header-right {
   width: calc(100% - 158px);
diff --git a/Step/wwwroot/src/app_modules/reports/components/reports.ts b/Step/wwwroot/src/app_modules/reports/components/reports.ts
index fb6fea1c..02675e4f 100644
--- a/Step/wwwroot/src/app_modules/reports/components/reports.ts
+++ b/Step/wwwroot/src/app_modules/reports/components/reports.ts
@@ -24,6 +24,9 @@ export default class Reports extends Vue {
     
 
     public selectedTab: string = "Production";
+    selectDiagram: boolean = false;
+    selectMoreFilter: boolean = false;
+    selectTable: boolean = true;
 
     public selectTab(value){
         this.selectedTab = value;
@@ -31,4 +34,33 @@ export default class Reports extends Vue {
     timeformat() {
         return (moment() as any)._locale._longDateFormat.LT;
     }
+
+    viewDiagram(){
+        if(!this.selectDiagram){
+            this.selectDiagram = true;
+            this.selectTable = false;
+        }
+        console.log("Diagram active");
+    }
+
+    viewTable(){
+        if(!this.selectTable){
+            this.selectDiagram = false;
+            this.selectTable = true;
+        }
+        console.log("Diagram active");
+    }
+
+    viewMoreFilter(){
+        if(!this.selectMoreFilter){
+            this.selectMoreFilter = true;
+        }
+        else{
+            this.selectMoreFilter = false;
+        }
+    }
+
+    openModalSelectField(){
+        console.log("Modal");
+    }
 }
\ No newline at end of file
diff --git a/Step/wwwroot/src/app_modules/reports/components/reports.vue b/Step/wwwroot/src/app_modules/reports/components/reports.vue
index eb3c55c8..96a60c39 100644
--- a/Step/wwwroot/src/app_modules/reports/components/reports.vue
+++ b/Step/wwwroot/src/app_modules/reports/components/reports.vue
@@ -21,15 +21,50 @@
           </div>
           <div class="reports-box-body" v-if="selectedTab == 'Production'">
               <div class="reports-box-body-left">
-                  <div class="body-left-header">
+                  <div class="body-left-header" v-if="selectDiagram">
+                    <div>
+                        <label class="intervaldate">{{'reports_body_header_date_range' | localize("Intervallo date")}}</label>
+                        <date-picker v-model="filter.interval" range type="daterange" :lang="lang"></date-picker>
+                    </div>
+                    <div>
+                        <label>{{'reports_body_header_axes_x' | localize("Asse X")}}</label>
+                        <select><option>{{'reports_body_header_option_axes_x_program_name' | localize("Nome Programma")}}</option></select>
+                    </div>
+                    <div>
+                        <label>{{'reports_body_header_axes_y' | localize("Asse Y")}}</label>
+                        <select><option>{{'reports_body_header_option_axes_y_frequency' | localize("Frequenza")}}</option></select>
+                    </div>
+                    <div>
+                        <label class="label_advanced_filters" @click="viewMoreFilter()" v-if="!selectMoreFilter"><span>{{'reports_body_header_diagram_label_advanced_filters' | localize("Mostra filtri avanzati")}}</span> <i class="fa fa-caret-down"></i></label>
+                        <label class="label_advanced_filters" @click="viewMoreFilter()" v-if="selectMoreFilter"><span>{{'reports_body_header_diagram_label_hide_advanced_filters' | localize("Nascondi filtri avanzati")}}</span> <i class="fa fa-caret-up"></i></label>
+                    </div>
+                    <div class="advanced-filters" v-if="selectMoreFilter">
+                        <div>
+                            <label>{{'reports_body_header_label_hour' | localize("Intervallo orario")}}</label>
+                            <div class="interval-time">
+                                <input type="time"/>
+                                <input type="time"/>
+                            </div>
+                        </div>
+                        <div>
+                            <label>{{'reports_body_header_label_program' | localize("Programma")}}</label>
+                            <input type="text" class="program" :placeholder="'reports_body_header_placeholder_program' | localize('Nome del programma')" />
+                        </div>
+                        <div>
+                            <label>{{'reports_body_header_label_operator' | localize("Operatore")}}</label>
+                            <select class="reports-select-operator"><option>{{'reports_body_header_option_operator_all' | localize("tutti")}}</option></select>
+                        </div>
+                        <div>
+                            <label>{{'reports_body_header_label_shift' | localize("Turno")}}</label>
+                            <select class="reports-select-shift"><option>{{'reports_body_header_option_shift_first' | localize("1°")}}</option></select>
+                        </div>
+                    </div>
+                  </div>
+                  <div class="body-left-header" v-if="!selectDiagram">
                     <div>
                         <label class="intervaldate">{{'reports_body_header_date_range' | localize("Intervallo date")}}</label>
                         <date-picker v-model="filter.interval" range type="daterange" :lang="lang"></date-picker>
                     </div>
-                    <!-- <div>
-                        <label>{{'reports_body_header_label_date' | localize("Intervallo date")}}</label>
-                        <select class="reports-select-interval-date"><option>{{'reports_body_header_option_date_lastmonth' | localize("Ultimo mese")}}</option></select>
-                    </div> -->
                     <div>
                         <label>{{'reports_body_header_label_hour' | localize("Intervallo orario")}}</label>
                         <div class="interval-time">
@@ -70,6 +105,7 @@
                                     <th>{{'reports_table_quality' | localize("Qualità")}}</th>
                                     <th>{{'reports_table_operator_name' | localize("Nome operatore")}}</th>
                                     <th>{{'reports_table_shift' | localize("Turno")}}</th>
+                                    <th @click="openModalSelectField()"><i class="fa fa-angle-double-right"></i></th>
                                 </tr>
                             </thead>
                             <tbody>
@@ -87,6 +123,7 @@
                                     <td colspan="1">Buono</td>
                                     <td colspan="1">Nome utente</td>
                                     <td colspan="1">1°</td>
+                                    <td></td>
                                 </tr>
                                 <tr>
                                     <td colspan="1">Finestra02.pgm</td>
@@ -102,6 +139,7 @@
                                     <td colspan="1">Buono</td>
                                     <td colspan="1">Nome utente</td>
                                     <td colspan="1">1°</td>
+                                    <td></td>
                                 </tr>
                                 <tr>
                                     <td colspan="1">Finestra02.pgm</td>
@@ -117,6 +155,7 @@
                                     <td colspan="1">Buono</td>
                                     <td colspan="1">Nome utente</td>
                                     <td colspan="1">1°</td>
+                                    <td></td>
                                 </tr>
                                 <tr>
                                     <td colspan="1">Finestra02.pgm</td>
@@ -132,6 +171,7 @@
                                     <td colspan="1">Buono</td>
                                     <td colspan="1">Nome utente</td>
                                     <td colspan="1">1°</td>
+                                    <td></td>
                                 </tr>
                                 <tr>
                                     <td colspan="1">Finestra02.pgm</td>
@@ -147,6 +187,7 @@
                                     <td colspan="1">Buono</td>
                                     <td colspan="1">Nome utente</td>
                                     <td colspan="1">1°</td>
+                                    <td></td>
                                 </tr>
                                 <tr>
                                     <td colspan="1">Finestra02.pgm</td>
@@ -162,6 +203,7 @@
                                     <td colspan="1">Buono</td>
                                     <td colspan="1">Nome utente</td>
                                     <td colspan="1">1°</td>
+                                    <td></td>
                                 </tr>
                                 <tr>
                                     <td colspan="1">Finestra02.pgm</td>
@@ -177,6 +219,7 @@
                                     <td colspan="1">Buono</td>
                                     <td colspan="1">Nome utente</td>
                                     <td colspan="1">1°</td>
+                                    <td></td>
                                 </tr>
                                 <tr>
                                     <td colspan="1">Finestra02.pgm</td>
@@ -192,6 +235,7 @@
                                     <td colspan="1">Buono</td>
                                     <td colspan="1">Nome utente</td>
                                     <td colspan="1">1°</td>
+                                    <td></td>
                                 </tr>
                                 <tr>
                                     <td colspan="1">Finestra02.pgm</td>
@@ -207,6 +251,7 @@
                                     <td colspan="1">Buono</td>
                                     <td colspan="1">Nome utente</td>
                                     <td colspan="1">1°</td>
+                                    <td></td>
                                 </tr>
                                 <tr>
                                     <td colspan="1">Finestra02.pgm</td>
@@ -222,6 +267,7 @@
                                     <td colspan="1">Buono</td>
                                     <td colspan="1">Nome utente</td>
                                     <td colspan="1">1°</td>
+                                    <td></td>
                                 </tr>
                                 <tr>
                                     <td colspan="1">Finestra02.pgm</td>
@@ -237,6 +283,7 @@
                                     <td colspan="1">Buono</td>
                                     <td colspan="1">Nome utente</td>
                                     <td colspan="1">1°</td>
+                                    <td></td>
                                 </tr>
                                 <tr>
                                     <td colspan="1">Finestra02.pgm</td>
@@ -252,6 +299,7 @@
                                     <td colspan="1">Buono</td>
                                     <td colspan="1">Nome utente</td>
                                     <td colspan="1">1°</td>
+                                    <td></td>
                                 </tr>
                                 <tr>
                                     <td colspan="1">Finestra02.pgm</td>
@@ -267,6 +315,7 @@
                                     <td colspan="1">Buono</td>
                                     <td colspan="1">Nome utente</td>
                                     <td colspan="1">1°</td>
+                                    <td></td>
                                 </tr>
                                 <tr>
                                     <td colspan="1">Finestra02.pgm</td>
@@ -282,6 +331,7 @@
                                     <td colspan="1">Buono</td>
                                     <td colspan="1">Nome utente</td>
                                     <td colspan="1">1°</td>
+                                    <td></td>
                                 </tr>
                                 <tr>
                                     <td colspan="1">Finestra02.pgm</td>
@@ -297,6 +347,7 @@
                                     <td colspan="1">Buono</td>
                                     <td colspan="1">Nome utente</td>
                                     <td colspan="1">1°</td>
+                                    <td></td>
                                 </tr>
                                 <!-- <tr v-for="(row,index) in data" :key="index" @click="selectAlarm(row)" :class="{selected: selectedAlarm == row}">
                                 <td colspan="1">{{row.id}}</td>
@@ -319,8 +370,8 @@
               <div class="reports-box-body-right">
                 <div class="body-right-header">
                     <div class="body-right-header-left">
-                        <button><i class="fa fa-bars fa-2x"></i></button>
-                        <button><i class="fa fa-signal fa-2x"></i></button>
+                        <button :class="{'active': selectTable}"><i class="fa fa-bars fa-2x" @click="viewTable()"></i></button>
+                        <button :class="{'active': selectDiagram}"><i class="fa fa-signal fa-2x" @click="viewDiagram()"></i></button>
                     </div>
                     <div class="body-right-header-right">
                         <button><i class="fa fa-print fa-2x"></i></button>
@@ -415,12 +466,6 @@
               </div>
           </div>
           <div class="reports-box-body" v-if="selectedTab == 'Alarms'">
-              <div class="reports-box-body-left">
-                
-              </div>
-              <div class="reports-box-body-right">
-
-              </div>
               <div class="reports-box-body-left">
                   <div class="body-left-header">
                     <div>
@@ -455,7 +500,7 @@
                     </div>
                   </div>
                   <div class="body-left-center">
-                      Events
+                      Alarms
                   </div>
               </div>
               <div class="reports-box-body-right">