diff --git a/Thermo.Active/wwwroot/assets/icons/png/bg.png b/Thermo.Active/wwwroot/assets/icons/png/bg.png
new file mode 100644
index 00000000..8ff9db1b
Binary files /dev/null and b/Thermo.Active/wwwroot/assets/icons/png/bg.png differ
diff --git a/Thermo.Active/wwwroot/assets/icons/png/bg@2x.png b/Thermo.Active/wwwroot/assets/icons/png/bg@2x.png
new file mode 100644
index 00000000..cfd380a7
Binary files /dev/null and b/Thermo.Active/wwwroot/assets/icons/png/bg@2x.png differ
diff --git a/Thermo.Active/wwwroot/assets/icons/png/bg@3x.png b/Thermo.Active/wwwroot/assets/icons/png/bg@3x.png
new file mode 100644
index 00000000..b862a621
Binary files /dev/null and b/Thermo.Active/wwwroot/assets/icons/png/bg@3x.png differ
diff --git a/Thermo.Active/wwwroot/assets/icons/png/inv.png b/Thermo.Active/wwwroot/assets/icons/png/inv.png
new file mode 100644
index 00000000..a672f1ac
Binary files /dev/null and b/Thermo.Active/wwwroot/assets/icons/png/inv.png differ
diff --git a/Thermo.Active/wwwroot/assets/icons/png/inv@2x.png b/Thermo.Active/wwwroot/assets/icons/png/inv@2x.png
new file mode 100644
index 00000000..d34a723f
Binary files /dev/null and b/Thermo.Active/wwwroot/assets/icons/png/inv@2x.png differ
diff --git a/Thermo.Active/wwwroot/assets/icons/png/inv@3x.png b/Thermo.Active/wwwroot/assets/icons/png/inv@3x.png
new file mode 100644
index 00000000..a316d0b2
Binary files /dev/null and b/Thermo.Active/wwwroot/assets/icons/png/inv@3x.png differ
diff --git a/Thermo.Active/wwwroot/assets/styles/base/dashboard.less b/Thermo.Active/wwwroot/assets/styles/base/dashboard.less
new file mode 100644
index 00000000..65e87ec6
--- /dev/null
+++ b/Thermo.Active/wwwroot/assets/styles/base/dashboard.less
@@ -0,0 +1,21 @@
+// out: false, sourceMap: false, main: ../style.less
+@import "grid-system.less";
+@import "colors.less";
+@import "fonts.less";
+@modal: modal;
+.dashboard{
+    height: 100%;
+    width: 100%;
+    background-image: url("../../assets/icons/png/bg.png");
+        section{
+            display: flex;
+            .specific{
+                display: flex;
+                flex-direction: column;
+                div{
+                    display: flex;
+                }
+            }
+        }
+    
+}
\ No newline at end of file
diff --git a/Thermo.Active/wwwroot/assets/styles/base/layout.less b/Thermo.Active/wwwroot/assets/styles/base/layout.less
index e7f95591..8826bd99 100644
--- a/Thermo.Active/wwwroot/assets/styles/base/layout.less
+++ b/Thermo.Active/wwwroot/assets/styles/base/layout.less
@@ -1,6 +1,7 @@
 // out: false, sourceMap: false, main: ../style.less
 @import "colors.less";
 @import "modals.less";
+@import "dashboard.less";
 @import "pirometro.less";
 @import "riscaldi.less";
 @import "formato.less";
diff --git a/Thermo.Active/wwwroot/assets/styles/style.css b/Thermo.Active/wwwroot/assets/styles/style.css
index b3896cf5..8668a83d 100644
--- a/Thermo.Active/wwwroot/assets/styles/style.css
+++ b/Thermo.Active/wwwroot/assets/styles/style.css
@@ -3670,6 +3670,21 @@
   box-sizing: border-box;
   resize: none;
 }
+.dashboard {
+  height: 100%;
+  width: 100%;
+  background-image: url("../../assets/icons/png/bg.png");
+}
+.dashboard section {
+  display: flex;
+}
+.dashboard section .specific {
+  display: flex;
+  flex-direction: column;
+}
+.dashboard section .specific div {
+  display: flex;
+}
 .modal.pirometro-info {
   width: 1820px;
   height: 980px;
diff --git a/Thermo.Active/wwwroot/src/App.vue b/Thermo.Active/wwwroot/src/App.vue
index 12f90cab..73ca5028 100644
--- a/Thermo.Active/wwwroot/src/App.vue
+++ b/Thermo.Active/wwwroot/src/App.vue
@@ -1,7 +1,7 @@
 <template>
    <div class="container">
     <div id="app">
-      <app-header :class="{'blur':applyBlur}"></app-header>
+      <app-header :blurHeader="applyBlur"></app-header>
       <alarm-list :applyBlur="applyBlur"></alarm-list>
 
       <under-the-hood :class="{'blur':(applyBlur || applyBlurNc)}"></under-the-hood>
diff --git a/Thermo.Active/wwwroot/src/addMockData.ts b/Thermo.Active/wwwroot/src/addMockData.ts
index 9cbba751..08efd96e 100644
--- a/Thermo.Active/wwwroot/src/addMockData.ts
+++ b/Thermo.Active/wwwroot/src/addMockData.ts
@@ -216,31 +216,31 @@ function addMockData(){
         reps: 12324
     }
 
-    alarm={
-        id:1,
-        guid:"ILYGYFC",
-        source:"PLC",
-        message:"allarmeprove1",
-        Message:"allarmeprova1",
-        dateTime:null,
-        DateTime:null,
-        isWarning:false,
-        restorationIsEnabled:false,
-        process:1
-        }
+    // alarm={
+    //     id:1,
+    //     guid:"ILYGYFC",
+    //     source:"PLC",
+    //     message:"allarmeprove1",
+    //     Message:"allarmeprova1",
+    //     dateTime:null,
+    //     DateTime:null,
+    //     isWarning:false,
+    //     restorationIsEnabled:false,
+    //     process:1
+    //     }
 
-        alarm2={
-            id:2,
-            guid:"VKYCOLUV",
-            source:"PLC",
-            message:"allarmeprova2",
-            Message:"allarmeprova2",
-            dateTime:null,
-            DateTime:null,
-            isWarning:false,
-            restorationIsEnabled:false,
-            process:2
-            }
+    //     alarm2={
+    //         id:2,
+    //         guid:"VKYCOLUV",
+    //         source:"PLC",
+    //         message:"allarmeprova2",
+    //         Message:"allarmeprova2",
+    //         dateTime:null,
+    //         DateTime:null,
+    //         isWarning:false,
+    //         restorationIsEnabled:false,
+    //         process:2
+    //         }
 
     processModelActions.addProcess(store,process);
     machineInfoActions.updateMachineInfo(store,machineInfo);
diff --git a/Thermo.Active/wwwroot/src/app.business-logic.ts b/Thermo.Active/wwwroot/src/app.business-logic.ts
index 0ea51ce9..b074e1d6 100644
--- a/Thermo.Active/wwwroot/src/app.business-logic.ts
+++ b/Thermo.Active/wwwroot/src/app.business-logic.ts
@@ -16,6 +16,7 @@ import ShowEstrazioneInfo from "@/app_modules_thermo/setup/estrazione/components
 import ShowVuotoInfo from "@/app_modules_thermo/setup/vuoto/show-vuoto-info.vue";
 import ShowImbutituraInfo from "@/app_modules_thermo/setup/imbutitura/show-imbutitura-info.vue";
 import ShowOpzioniInfo from "@/app_modules_thermo/setup/opzioni/show-opzioni-info.vue";
+import Dashboard from "@/app_modules_thermo/dashboard/dashboard.vue";
 import ShowArretramentoRiscaldiInfo from "@/app_modules_thermo/processo/arretramento-riscaldi/show-arretramento-riscladi-info.vue";
 // import { DataService } from "./services/dataService";
 // import { ToolingService } from "./services/toolingService";
@@ -51,6 +52,7 @@ let HMIScreenshotInterval;
 let HMIprodTimeout;
 let RerenderInterval;
 
+messageService.subscribeToChannel("show-dashboard-info", () => { ModalHelper.ShowModal(Dashboard); });
 messageService.subscribeToChannel("show-arretramento-riscaldi-info", () => { ModalHelper.ShowModal(ShowArretramentoRiscaldiInfo); });
 messageService.subscribeToChannel("show-opzioni-info", () => { ModalHelper.ShowModal(ShowOpzioniInfo); });
 messageService.subscribeToChannel("show-vuoto-info", () => { ModalHelper.ShowModal(ShowVuotoInfo); });
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/dashboard/dashboard.ts b/Thermo.Active/wwwroot/src/app_modules_thermo/dashboard/dashboard.ts
new file mode 100644
index 00000000..b927f873
--- /dev/null
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/dashboard/dashboard.ts
@@ -0,0 +1,60 @@
+import Vue from 'vue';
+import Component from 'vue-class-component';
+import {Prop} from 'vue-property-decorator';
+import { messageService } from '@/_base';
+import { ModalHelper } from '@/components/modals';
+import AppRibbon from "@/components/app-ribbon.vue";
+import { AppModel } from '@/store';
+
+@Component({
+  components: {
+    appRibbon: AppRibbon
+  }
+})
+export default class Dashboard extends Vue{
+
+  $store: any;
+
+  public get state() { return this.$store.state.machineStatus; };
+  public get isMainViewLiftedUp() { return this.$store.state.isMainViewLiftedUp; }
+  public get mainStatus() { return this.$store.getters.mainStatus; };
+  public get powerOnStatus() { return this.$store.getters.powerOnAlarms; };
+
+
+
+  public get ribbonStatus(): ribbonStatusEnum {
+
+    // Controllo se ci sono allarmi
+    let s = this.$store.state as AppModel;
+
+    if (s.alarms.alarms.length > 0) return ribbonStatusEnum.Alarm;
+    if (s.alarms.warnings.length > 0) return ribbonStatusEnum.Warning;
+    if (s.process.running) return ribbonStatusEnum.Working;
+    return ribbonStatusEnum.Idle;
+
+  }
+
+  public get showDetails(): boolean {
+    let s = this.$store.state as AppModel;
+    switch (this.ribbonStatus) {
+      case ribbonStatusEnum.Warning:
+        return s.alarms.warnings.length == 1;
+      case ribbonStatusEnum.Alarm:
+        return s.alarms.alarms.length == 1;
+      default: return false;
+    }
+  }
+    
+    close() {
+        messageService.deleteChannel("esc_pressed");
+        ModalHelper.HideModal();
+      };  
+
+}
+
+enum ribbonStatusEnum {
+  Idle = 0,
+  Working = 1,
+  Warning = 2,
+  Alarm = 3
+}
\ No newline at end of file
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/dashboard/dashboard.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/dashboard/dashboard.vue
new file mode 100644
index 00000000..771c7aa7
--- /dev/null
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/dashboard/dashboard.vue
@@ -0,0 +1,80 @@
+<template>
+    <div class="dashboard">
+        <!-- <div class="header">
+        	<div slot="header-buttons">
+				<button class="modal-close" @click="close()">
+					<i class="fa fa-remove"></i>
+				</button>
+            </div>
+		</div> -->
+        	<div slot="header-buttons">
+				<button class="modal-close" @click="close()">
+					<i class="fa fa-remove"></i>
+				</button>
+            </div>
+<!-- 
+            <app-ribbon :status="{'alarm': ribbonStatus == 3, 'working': ribbonStatus == 1, 'warning': ribbonStatus == 2}"
+                        :expanded="ribbonStatus>1"
+                        :show-expander="ribbonStatus>1"
+                        :has-service="serviceRequired">
+                <i class="fa fa-check" slot="icon" :title="'header_tooltip_nc_idle' | localize('Nc in Idle state')"></i>
+                    <div slot="content" class="content" v-if="ribbonStatus>1" :title="'header_tooltip_nc_error' | localize('Open/Close alarm list')">
+                        <strong v-if="!showDetails">{{alarmTitle | localize(alarmTitle,alarmCount)}}</strong>
+                        <strong v-if="showDetails && alarms[0].title">{{alarms[0].title}}</strong>
+                        <strong v-if="showDetails && !alarms[0].title">{{'alarm_'+ alarms[0].id | localize('alarm_'+ alarms[0].id)}}</strong>
+                        <div v-if="showDetails">
+                        <span class="processes">{{alarms[0].source}}</span>
+                        <span class="processes" v-if="alarms[0].source === 'PLC' && alarms[0].process.length>0">
+                                <span v-for="p in alarms[0].process" :key="p" >{{ p }} </span>
+                        </span>
+                        <span class="processes" v-if="alarms[0].source !== 'PLC' && alarms[0].process">{{ alarms[0].process }}</span>
+                        </div>
+                    </div>
+
+                    <div slot="service" class="content" v-if="serviceRequired">
+                        <strong>{{'header_maintainance_request' | localize('Effettuare manutenzione')}}</strong>
+                        <span>{{'header_maintainance_request_explanation' | localize('C\'è una procedura da effettuare')}}</span>
+                    </div>
+            </app-ribbon> -->
+            <!-- <app-header :class="{'blur':applyBlur}"></app-header> -->
+
+            <!-- <section>
+                <div class="specific">
+                    <div>
+                        <img src="assets/icons/png/inv.png">
+                        <label>(temperatura)</label>
+                    </div>
+                    <div>
+                        <button>-</button>
+                        <div class="specific">
+                            <label>setpoint</label>
+                            <label>(temperatura)</label>
+                        </div>
+                        <button>+</button>
+                    </div>
+                </div>
+                <div class="specific">
+                    <label>TEMPO RESTANTE</label>
+                    <label>(tempo)</label>
+                </div>
+                <div class="specific">
+                    <div>
+                        <div class="specific">
+                            <label>PEZZI/ORA</label>
+                            <label>(rapporto)</label>
+                        </div>
+                        <div class="specific">
+                            <label>TEMPO/CICLO</label>
+                            <label>(rapporto)</label>
+                        </div>
+                    </div>
+                    <div></div>
+                    <aside class="scrollable">
+
+                    </aside>
+                </div>
+            </section> -->
+    </div>
+</template> 
+
+<script lang="ts" src="./dashboard.ts"></script>
\ No newline at end of file
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/components/setup.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/components/setup.vue
index 12f254ff..88dd9aed 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/components/setup.vue
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/components/setup.vue
@@ -80,7 +80,7 @@
                 ></setup-button>
 
                 <div class="setup-play">
-                    <img class="dim" src="assets/icons/svg/setup-play.svg" />
+                    <img class="dim" src="assets/icons/svg/setup-play.svg" @click="sendMessage('show-dashboard-info')"/>  
                 </div>
             </div>
         </modal>
diff --git a/Thermo.Active/wwwroot/src/components/app-ribbon.ts b/Thermo.Active/wwwroot/src/components/app-ribbon.ts
index e69de29b..3104fa4c 100644
--- a/Thermo.Active/wwwroot/src/components/app-ribbon.ts
+++ b/Thermo.Active/wwwroot/src/components/app-ribbon.ts
@@ -0,0 +1,85 @@
+// import Vue from "vue";
+// import { alarmsModelActions } from "src/store";
+// import { Factory, messageService } from "src/_base";
+// import { Prop, Watch } from "vue-property-decorator";
+
+
+// export default class AppRibbon extends Vue {
+
+//     @Prop({ default: false })
+//     showExpander: boolean;
+//     @Prop({ default: null })
+//     status;
+//     @Prop({ default: false })
+//     expanded: boolean;
+//     @Prop({ default: false })
+//     hasService: boolean;
+
+//     serviceExpanded: boolean = false;
+
+
+//     @Watch("hasService")
+//     hasServiceChanged(oldV,newV) {
+//       this.serviceExpanded = !this.expanded;      
+//     }
+//     @Watch("opened")
+//     hasOpened(){
+//         if(this.$store.state.alarms.opened || this.$store.state.alarms.serviceOpened)
+//           messageService.publishToChannel("HMI-show-alarms");
+//         else
+//           messageService.publishToChannel("HMI-hide-alarms",300);
+
+//     }
+//     @Watch("serviceOpened")
+//     hasServiceOpened(){
+//         if(this.$store.state.alarms.opened || this.$store.state.alarms.serviceOpened)
+//           messageService.publishToChannel("HMI-show-alarms");
+//         else
+//           messageService.publishToChannel("HMI-hide-alarms",300);
+
+//     }
+
+
+//     // hasService() {
+//     //   return !this.$slots["service"];
+//     // },
+//     toggleServiceExpanded() {
+//       if(this.$store.state.alarms.opened && !this.serviceExpanded)
+//         alarmsModelActions.toggleServiceOpened(this.$store,true);
+//       else if(this.serviceExpanded)
+//         alarmsModelActions.toggleServiceOpened(this.$store,!this.$store.state.alarms.serviceOpened);
+
+//       this.serviceExpanded = true;
+//       alarmsModelActions.toggleOpened(this.$store, false);
+
+//     }
+
+//     toggleExpanded() {
+//        if(this.status.alarm || this.status.warning)
+//        {
+//         if(this.$store.state.alarms.serviceOpened && this.serviceExpanded)
+//           alarmsModelActions.toggleOpened(this.$store,true);
+//         else if(!this.serviceExpanded)
+//           alarmsModelActions.toggleOpened(this.$store,!this.$store.state.alarms.opened);
+
+//         this.serviceExpanded = false;
+//         alarmsModelActions.toggleServiceOpened(this.$store, false);
+//         }
+//     }
+
+
+
+//     opened() {
+//       return this.$store.state.alarms.opened;
+//     }
+
+//     serviceOpened() {
+//       return this.$store.state.alarms.serviceOpened;
+//     }
+
+//     mainExpanded() {
+//       if (!this.hasService) return this.expanded;
+//         return !this.serviceExpanded && this.expanded;
+//     }
+
+// };
\ No newline at end of file
diff --git a/Thermo.Active/wwwroot/src/modules/app-header.ts b/Thermo.Active/wwwroot/src/modules/app-header.ts
index bbbbd315..02fc9717 100644
--- a/Thermo.Active/wwwroot/src/modules/app-header.ts
+++ b/Thermo.Active/wwwroot/src/modules/app-header.ts
@@ -7,6 +7,7 @@ import { /*Factory,*/ messageService } from "@/_base";
 //import { Watch } from "vue-property-decorator";
 import AppRibbon from "@/components/app-ribbon.vue";
 import UserInfo from "@/app_modules/machine/components/user-info.vue";
+import { Prop } from "vue-property-decorator";
 
 
 declare let $: any;
@@ -20,6 +21,9 @@ declare let $: any;
 export default class AppHeader extends Vue {
   $store: any;
 
+  @Prop({ default:false })
+  blurHeader:boolean;
+
   public get state() { return this.$store.state.machineStatus; };
   public get isMainViewLiftedUp() { return this.$store.state.isMainViewLiftedUp; }
   public get mainStatus() { return this.$store.getters.mainStatus; };
diff --git a/Thermo.Active/wwwroot/src/modules/app-header.vue b/Thermo.Active/wwwroot/src/modules/app-header.vue
index 2bc89f89..fe7e1c21 100644
--- a/Thermo.Active/wwwroot/src/modules/app-header.vue
+++ b/Thermo.Active/wwwroot/src/modules/app-header.vue
@@ -3,7 +3,8 @@
     <app-ribbon :status="{'alarm': ribbonStatus == 3, 'working': ribbonStatus == 1, 'warning': ribbonStatus == 2}"
                 :expanded="ribbonStatus>1"
                 :show-expander="ribbonStatus>1"
-                :has-service="serviceRequired">
+                :has-service="serviceRequired"
+                >
        <i class="fa fa-check" slot="icon" v-if="ribbonStatus == 0" :title="'header_tooltip_nc_idle' | localize('Nc in Idle state')"></i>
        <i class="fa fa-play" slot="icon" v-if="ribbonStatus == 1" :title="'header_tooltip_nc_running' | localize('Nc in Running state')"></i>
        <i class="fa fa-exclamation" slot="icon" v-if="ribbonStatus >1" :title="'header_tooltip_nc_error' | localize('Open/Close alarm list')"></i>
@@ -17,7 +18,7 @@
                 <span v-for="p in alarms[0].process" :key="p" >{{ p }} </span>
           </span>
           <span class="processes" v-if="alarms[0].source !== 'PLC' && alarms[0].process">{{ alarms[0].process }}</span>
-        </div>
+        </div> 
       </div>
       <div slot="service" class="content" v-if="serviceRequired">
         <strong>{{'header_maintainance_request' | localize('Effettuare manutenzione')}}</strong>
@@ -25,43 +26,49 @@
       </div>
     </app-ribbon>
     <button class="unclickable over"
-            :class="{ red: mainStatus, blue: !mainStatus}"
+            :class="{ red: mainStatus, blue: !mainStatus, blur: blurHeader}"
             :title=" mainStatus ? $options.filters.localize('header_tooltip_mainstat_ko','Machine Hardware not Ready') : $options.filters.localize('header_tooltip_mainstat_ok','Machine Hardware is running correctly') " >
       <img class="h-24" src="assets/icons/png/switch-icon@2x.png">
     </button>
     <button class="power-on unclickable over"
             :title="'header_tooltip_power-on' | localize('Power On')"
             :disabled="!state.powerOnAlarm.clickable || checkSecurityDisabled('startupIcons')"
-            v-if=" state.powerOnAlarm && state.powerOnAlarm.active" @click="manageClick(state.powerOnAlarm)"><img src="assets/icons/png/control-icon-error@2x.png"></button>
+            v-if=" state.powerOnAlarm && state.powerOnAlarm.active" @click="manageClick(state.powerOnAlarm)"
+            :class="{'blur':blurHeader}"><img src="assets/icons/png/control-icon-error@2x.png"></button>
 
     <button class="airflow unclickable over"
             :title="'header_tooltip_air-flow' | localize('Air Flow')"
             :disabled="!state.airPressureAlarm.clickable || checkSecurityDisabled('startupIcons')"
-            v-if=" state.airPressureAlarm && state.airPressureAlarm.active" @click="manageClick(state.airPressureAlarm)"><img src="assets/icons/png/air-icon@2x.png"></button>
+            v-if=" state.airPressureAlarm && state.airPressureAlarm.active" @click="manageClick(state.airPressureAlarm)"
+            :class="{'blur':blurHeader}"><img src="assets/icons/png/air-icon@2x.png"></button>
 
     <button class="protections unclickable over"
             :title="'header_tooltip_protections' | localize('Protections')"
             :disabled="!state.protectionsAlarm.clickable || checkSecurityDisabled('startupIcons')"
-            v-if=" state.protectionsAlarm && state.protectionsAlarm.active" @click="manageClick(state.protectionsAlarm)"><img src="assets/icons/png/lock-icon-error@2x.png"></button>
+            v-if=" state.protectionsAlarm && state.protectionsAlarm.active" @click="manageClick(state.protectionsAlarm)"
+            :class="{'blur':blurHeader}"><img src="assets/icons/png/lock-icon-error@2x.png"></button>
 
     <button class="emergency unclickable over"
             :title="'header_tooltip_emergency' | localize('Emergency')"
             :disabled="!state.emergencyAlarm.clickable || checkSecurityDisabled('startupIcons')"
-            v-if=" state.emergencyAlarm && state.emergencyAlarm.active" @click="manageClick(state.emergencyAlarm)"><img src="assets/icons/png/refresh-icon-error@2x.png"></button>
+            v-if=" state.emergencyAlarm && state.emergencyAlarm.active" @click="manageClick(state.emergencyAlarm)"
+            :class="{'blur':blurHeader}"><img src="assets/icons/png/refresh-icon-error@2x.png"></button>
 
     <button class="settings-mode unclickable over"
             :title="'header_tooltip_settings-mode' | localize('Settings Mode')"
             :disabled="!state.settingsModeAlarm.clickable || checkSecurityDisabled('startupIcons')"
-            v-if=" state.settingsModeAlarm && state.settingsModeAlarm.active" @click="manageClick(state.settingsModeAlarm)"><img src="assets/icons/png/no-settings@2x.png"></button>
+            v-if=" state.settingsModeAlarm && state.settingsModeAlarm.active" @click="manageClick(state.settingsModeAlarm)"
+            :class="{'blur':blurHeader}"><img src="assets/icons/png/no-settings@2x.png"></button>
 
     <button class="key unclickable over"
             :title="'header_tooltip_key' | localize('Startup')"
             :disabled="!state.keyReadyAlarm.clickable || checkSecurityDisabled('startupIcons')"
-            v-if=" state.keyReadyAlarm && state.keyReadyAlarm.active" @click="manageClick(state.keyReadyAlarm)"><img src="assets/icons/png/key-icon-error@2x.png"></button>
+            v-if=" state.keyReadyAlarm && state.keyReadyAlarm.active" @click="manageClick(state.keyReadyAlarm)"
+            :class="{'blur':blurHeader}"><img src="assets/icons/png/key-icon-error@2x.png"></button>
 
     <button class="unclickable over"
             :title=" powerOnStatus ? $options.filters.localize('header_tooltip_powstat_ko','Machine Not Ready to work') : $options.filters.localize('header_tooltip_powstat_ok','Machine Is Ready to worky') "
-            :class="{ red: powerOnStatus, blue: !powerOnStatus}">
+            :class="{ red: powerOnStatus, blue: !powerOnStatus, blur: blurHeader }">
       <img src="assets/icons/png/ok-white.png" class="h-20" v-if="!powerOnStatus">
       <img src="assets/icons/png/not-ok-white.png" class="h-20" v-if="powerOnStatus">
       </button>
@@ -69,23 +76,26 @@
             :disabled="!state.resetAxesAlarm.clickable || checkSecurityDisabled('startupIcons')"
             v-if=" state.resetAxesAlarm && state.resetAxesAlarm.active"
             :title="'header_tooltip_zeroing' | localize('Make Zero Axes')"
+            :class="{'blur':blurHeader}"
             @click="manageClick(state.resetAxesAlarm)"><img src="assets/icons/png/taratura-icon-error@2x.png"></button>
     <button class="key over"
             :disabled="!state.waterJet1Alarm.clickable || checkSecurityDisabled('startupIcons')"
             v-if=" state.waterJet1Alarm && state.waterJet1Alarm.active"
+            :class="{'blur':blurHeader}"
             @click="manageClick(state.waterJet1Alarm)"></button>
     <button class="key over"
             :disabled="!state.waterJet2Alarm.clickable || checkSecurityDisabled('startupIcons')"
             v-if=" state.waterJet2Alarm && state.waterJet2Alarm.active"
+            :class="{'blur':blurHeader}"
             @click="manageClick(state.waterJet2Alarm)"></button>
-    <div class="process-container over" v-for="p in processes" :key="p.id">
+    <div class="process-container over" v-for="p in processes" :key="p.id" :class="{'blur':blurHeader}">
       <process-info :counter="p.reps" :status="p.status" :id="p.id">
         <strong v-if="p.visible && !mainStatus">{{p.partProgramName}}</strong>
       </process-info>
        <button v-if="p.visible && !mainStatus" class="save-circle"></button>
       <button v-if="p.visible && !mainStatus" class="dot-circle"></button>
     </div>
-        <user-info></user-info> 
+        <user-info :class="{'blur':blurHeader}"></user-info> 
   </header>
 
 </template>