diff --git a/Thermo.Active/wwwroot/assets/styles/base/circlegantt.less b/Thermo.Active/wwwroot/assets/styles/base/circlegantt.less
deleted file mode 100644
index 83f1a351..00000000
--- a/Thermo.Active/wwwroot/assets/styles/base/circlegantt.less
+++ /dev/null
@@ -1,92 +0,0 @@
-// out: false, sourceMap: false, main: ../style.less
-@import "grid-system.less";
-@import "colors.less";
-@import "fonts.less";
-
-.circle-gantt{
-    height: 70px;
-
-    .specific{
-
-        div{
-
-            &:first-of-type{
-                display: flex;
-                flex-direction: column;
-                justify-content: flex-end;
-                height: 70px;
-                object-fit: contain;
-                border-radius: 2px;
-                background-color: #57636b;
-
-                label{
-                    margin-left: 37%;
-                }
-
-            }
-
-            &:last-of-type{
-                display: flex;
-                flex-direction: column;
-                justify-content: center;
-                margin-top: -66px;
-                height: 40px;
-                object-fit: contain;
-                border-radius: 2px;
-                background-color: #c0c7cc;
-
-                label{
-                    margin-left: 25%;
-                }
-
-            }
-
-        }
-
-        &:first-of-type{
-
-            div{
-
-                &:first-of-type{
-                    display: flex;
-                    flex-direction: column;
-                    justify-content: flex-end;
-                    width: 34px;
-                    height: 70px;
-                    object-fit: contain;
-                    border-radius: 2px;
-                    background-color: #57636b;
-
-                    label{
-                        margin-left: 25%;
-                    }
-
-                }
-
-                &:last-of-type{
-                    display: flex;
-                    flex-direction: column;
-                    justify-content: flex-end;
-                    margin-top: -66px;
-                    width: 34px;
-                    height: 40px;
-                    object-fit: contain;
-                    border-radius: 2px;
-                    background-color: #c0c7cc;
-
-                    img{
-                        margin-left: 25%;
-                        flex-shrink: 0;
-                        width: 20px;
-                        height: 20px;
-                    }
-
-                }
-
-            }
-
-        }
-
-    }
-
-}
\ 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 9035b496..2dde21a9 100644
--- a/Thermo.Active/wwwroot/assets/styles/base/layout.less
+++ b/Thermo.Active/wwwroot/assets/styles/base/layout.less
@@ -9,13 +9,11 @@
 @import "slider.less";
 @import "tastierino.less";
 @import "preriscaldo-dashboard.less";
-@import "circlegantt.less";
 @import "paddle.less";
 @import "arch-interface.less";
 @import "avvio-prod.less";
 @import "processo.less";
 @import "progrprerisc.less";
-@import "opzioni.less";
 @import "imbutitura.less";
 @import "popups.less";
 @import "grid-system.less";
diff --git a/Thermo.Active/wwwroot/assets/styles/base/opzioni.less b/Thermo.Active/wwwroot/assets/styles/base/opzioni.less
deleted file mode 100644
index d0adbb1e..00000000
--- a/Thermo.Active/wwwroot/assets/styles/base/opzioni.less
+++ /dev/null
@@ -1,91 +0,0 @@
-// out: false, sourceMap: false, main: ../style.less
-@import "grid-system.less";
-@import "colors.less";
-@import "fonts.less";
-
-.modal.opzioni-info {
-
-
-  hr {
-    width: 2px;
-    height: 830px;
-    background-color: #979797;
-    margin: 0;
-  }
-
-  section.body {
-
-    section {
-      padding: 0px;
-
-      .specific {
-
-        &:last-of-type {
-          margin-left: 100px;
-          width: 471px;
-        }
-
-        &:first-of-type {
-
-          .box-color {
-            background-color: #ffffff;
-          }
-
-          button {
-            background-color: #dddddd;
-            display: block;
-            color: #000000;
-            padding: 22px 16px;
-            width: 550px;
-            height: 64px;
-            border: none;
-            text-align: left;
-            cursor: pointer;
-            font-size: 17px;
-          }
-
-          .active {
-            background-color: rgba(23, 145, 255, 0.75);
-            color: #ffffff;
-          }
-
-          label {
-            font-size: 14px;
-            width: 60px;
-            margin-left: 5px;
-            margin-right: 30px;
-          }
-
-        }
-
-      }
-
-      aside {
-
-        button {
-          display: block;
-          background-color: #bbbcbc;
-          color: #002680;
-          padding: 22px 16px;
-          margin: 2px 0;
-          width: 547px;
-          height: 70px;
-          border: none;
-          text-align: left;
-          cursor: pointer;
-          font-size: 17px;
-        }
-
-        .active {
-          background-color: #fff;
-          font-weight: bold;
-          border-top: 2px solid #002680;
-        }
-
-      }
-
-    }
-
-  }
-
-}
\ No newline at end of file
diff --git a/Thermo.Active/wwwroot/assets/styles/style.css b/Thermo.Active/wwwroot/assets/styles/style.css
index 6b4ccfb9..facfb28b 100644
--- a/Thermo.Active/wwwroot/assets/styles/style.css
+++ b/Thermo.Active/wwwroot/assets/styles/style.css
@@ -4708,64 +4708,6 @@ article .box .body {
   text-align: center;
   color: #4b4b4b;
 }
-.circle-gantt {
-  height: 70px;
-}
-.circle-gantt .specific div:first-of-type {
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-end;
-  height: 70px;
-  object-fit: contain;
-  border-radius: 2px;
-  background-color: #57636b;
-}
-.circle-gantt .specific div:first-of-type label {
-  margin-left: 37%;
-}
-.circle-gantt .specific div:last-of-type {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  margin-top: -66px;
-  height: 40px;
-  object-fit: contain;
-  border-radius: 2px;
-  background-color: #c0c7cc;
-}
-.circle-gantt .specific div:last-of-type label {
-  margin-left: 25%;
-}
-.circle-gantt .specific:first-of-type div:first-of-type {
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-end;
-  width: 34px;
-  height: 70px;
-  object-fit: contain;
-  border-radius: 2px;
-  background-color: #57636b;
-}
-.circle-gantt .specific:first-of-type div:first-of-type label {
-  margin-left: 25%;
-}
-.circle-gantt .specific:first-of-type div:last-of-type {
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-end;
-  margin-top: -66px;
-  width: 34px;
-  height: 40px;
-  object-fit: contain;
-  border-radius: 2px;
-  background-color: #c0c7cc;
-}
-.circle-gantt .specific:first-of-type div:last-of-type img {
-  margin-left: 25%;
-  flex-shrink: 0;
-  width: 20px;
-  height: 20px;
-}
 .container #app nav {
   position: absolute;
   right: 0;
@@ -5215,62 +5157,6 @@ article .box .body {
   letter-spacing: normal;
   color: #002680;
 }
-.modal.opzioni-info hr {
-  width: 2px;
-  height: 830px;
-  background-color: #979797;
-  margin: 0;
-}
-.modal.opzioni-info section.body section {
-  padding: 0px;
-}
-.modal.opzioni-info section.body section .specific:last-of-type {
-  margin-left: 100px;
-  width: 471px;
-}
-.modal.opzioni-info section.body section .specific:first-of-type .box-color {
-  background-color: #ffffff;
-}
-.modal.opzioni-info section.body section .specific:first-of-type button {
-  background-color: #dddddd;
-  display: block;
-  color: #000000;
-  padding: 22px 16px;
-  width: 550px;
-  height: 64px;
-  border: none;
-  text-align: left;
-  cursor: pointer;
-  font-size: 17px;
-}
-.modal.opzioni-info section.body section .specific:first-of-type .active {
-  background-color: rgba(23, 145, 255, 0.75);
-  color: #ffffff;
-}
-.modal.opzioni-info section.body section .specific:first-of-type label {
-  font-size: 14px;
-  width: 60px;
-  margin-left: 5px;
-  margin-right: 30px;
-}
-.modal.opzioni-info section.body section aside button {
-  display: block;
-  background-color: #bbbcbc;
-  color: #002680;
-  padding: 22px 16px;
-  margin: 2px 0;
-  width: 547px;
-  height: 70px;
-  border: none;
-  text-align: left;
-  cursor: pointer;
-  font-size: 17px;
-}
-.modal.opzioni-info section.body section aside .active {
-  background-color: #fff;
-  font-weight: bold;
-  border-top: 2px solid #002680;
-}
 .modal.imbutitura-info section .specific {
   padding-left: 5px;
   justify-content: flex-end;
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/processo/arretramento-riscaldi/show-arretramento-riscladi-info.ts b/Thermo.Active/wwwroot/src/app_modules_thermo/processo/arretramento-riscaldi/show-arretramento-riscladi-info.ts
deleted file mode 100644
index 1622cbc3..00000000
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/processo/arretramento-riscaldi/show-arretramento-riscladi-info.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import Vue from 'vue';
-import Component from 'vue-class-component';
-import {Prop} from 'vue-property-decorator';
-import Slider from "@/app_modules_thermo/components/slider.vue";
-import { Modal, ModalHelper } from "@/components/modals";
-import { Factory, messageService, awaiter } from "@/_base";
-
-@Component({components:{slider:Slider,modal:Modal}})
-export default class ArretramentoRiscaldi extends Vue{
-
-    @Prop({default:0})
-    ritardo:number;
-
-    mock_ritardo:number=this.ritardo;
-
-    annulla(){
-        ModalHelper.HideModal();
-      };
-  
-      conferma(){
-        ModalHelper.HideModal();
-      };
-  
-      async beforeMount() {
-          // this.contactInfo = await awaiter(new machineService().getContactConfiguration());
-          messageService.subscribeToChannel("esc_pressed", args => {
-            this.close();
-          });
-        }
-      
-        beforeDestroy() {
-          messageService.deleteChannel("esc_pressed");
-        }
-      
-        close() {
-          messageService.deleteChannel("esc_pressed");
-          ModalHelper.HideModal();
-        }
-  
-
-}
\ No newline at end of file
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/processo/arretramento-riscaldi/show-arretramento-riscladi-info.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/processo/arretramento-riscaldi/show-arretramento-riscladi-info.vue
deleted file mode 100644
index c77d3c4a..00000000
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/processo/arretramento-riscaldi/show-arretramento-riscladi-info.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<template>
-    <div class="setup">
-		<modal type="arretramento-riscaldi-info" :title="'arretramentoriscaldiinfo_lbl_title' | localize('Arretramento riscaldi')">
-			<div slot="header-buttons">
-				<button class="modal-close" @click="close()">
-					<i class="fa fa-remove"></i>
-				</button>
-			</div>
-            <section>
-                <div class="specific">
-                    <div class="input-area">
-                        <img src="assets/icons/png/clessidra.png" />
-                        <label>Ritardo</label>
-						<input class="rect" v-model="mock_ritardo">
-                    </div>
-                    <slider :min="0" :max="10" v-model="mock_ritardo"></slider>
-                </div>
-            </section>
-            <footer>
-				<button class="btn" @click="annulla()">
-					Annulla
-				</button>
-				<button class="btn btn-success" @click="conferma()">
-					Conferma
-				</button>
-			</footer>
-		</modal>
-	</div>
-</template>
-
-<script lang="ts" src="./show-arretramento-riscladi-info.ts"></script>
\ No newline at end of file
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/processo/circles-gantt/circle-gantt.ts b/Thermo.Active/wwwroot/src/app_modules_thermo/processo/circles-gantt/circle-gantt.ts
deleted file mode 100644
index fa85e600..00000000
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/processo/circles-gantt/circle-gantt.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import Vue from 'vue';
-import Component from 'vue-class-component';
-import {Prop} from 'vue-property-decorator';
-
-@Component({name:"circlegantt"})
-export default class CircleGantt extends Vue{
-
-    @Prop({default:2})
-    value:number;
-    @Prop({default:0})
-    late:number;
-    @Prop({default:'s'})
-    unit:string;
-    @Prop({default:'Discesa cornice'})
-    title:string;
-
-}
\ No newline at end of file
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/processo/circles-gantt/circle-gantt.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/processo/circles-gantt/circle-gantt.vue
deleted file mode 100644
index e8f71421..00000000
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/processo/circles-gantt/circle-gantt.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<template>
-    <section class="circle-gantt">
-        <div class="specific">
-            <div>
-                <label>{{late}}s</label>
-            </div>
-            <div>
-                <img src="assets/icons/png/clessidra.png">
-            </div>
-        </div>
-        <div class="specific">
-            <div>
-                <label>{{value}}{{unit}}</label>
-            </div>
-            <div>
-                <label>{{title}}</label>
-            </div>
-        </div>
-        <!-- <div class="specific" v-if>
-
-        </div> parte finale variabile-->
-    </section>
-</template>
-
-<script lang="ts" src="./circle-gantt.ts"></script>
\ No newline at end of file
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/processo/components/processo.ts b/Thermo.Active/wwwroot/src/app_modules_thermo/processo/components/processo.ts
index 383243d1..fc9dfea1 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/processo/components/processo.ts
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/processo/components/processo.ts
@@ -1,24 +1,22 @@
 import Vue from 'vue';
 import Component from 'vue-class-component';
-import {Prop} from 'vue-property-decorator';
+import { Prop } from 'vue-property-decorator';
 import { messageService } from "@/_base/messageService";
 import { Modal, ModalHelper } from "@/components/modals";
-import CircleGantt from "../circles-gantt/circle-gantt.vue"
 
 @Component({
-    components: {
-        modal: Modal,
-        circlegantt: CircleGantt
-    }
+  components: {
+    modal: Modal,
+  }
 })
-export default class Processo extends Vue{
+export default class Processo extends Vue {
 
-    @Prop({default:25})
-    actual:number;
-    @Prop({default:145})
-    tot:number;
+  @Prop({ default: 25 })
+  actual: number;
+  @Prop({ default: 145 })
+  tot: number;
 
-    public sendMessage(name: string) {
-        messageService.publishToChannel(name);
-    }
+  public sendMessage(name: string) {
+    messageService.publishToChannel(name);
+  }
 }
\ No newline at end of file
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/processo/components/processo.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/processo/components/processo.vue
index b29965a1..7b9059b2 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/processo/components/processo.vue
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/processo/components/processo.vue
@@ -1,17 +1,38 @@
 <template>
-    <div class="container">
-        <modal type="processo-info" :title="'processo_lbl_title' | localize('Attività attuale (es. attesa spostamento assi)')">
-            <div class="tab-header" slot="header-buttons">
-				<button> <img src="assets/icons/png/star.png"> <span>Opzioni di lavorazione</span> </button>
-				<button> <img src="assets/icons/png/star.png"> <span>Pirometro</span> </button>
-				<button> <img src="assets/icons/png/star.png"> <span>Attivazione riscaldi</span> </button>
-                <button> <img src="assets/icons/png/star.png"> <span>Riscaldo +10 secondi</span> </button>
-                <button> <img src="assets/icons/png/star.png"> <span>Risclado -10 secondi</span> </button>
-                <button> <img src="assets/icons/png/star.png"> <span>Label pulsante opzionale</span></button>
-                <label>{{actual}}/{{tot}}</label>
+	<div class="container">
+		<modal
+			type="processo-info"
+			:title="'processo_lbl_title' | localize('Attività attuale (es. attesa spostamento assi)')"
+		>
+			<div class="tab-header" slot="header-buttons">
+				<button>
+					<img src="assets/icons/png/star.png" />
+					<span>Opzioni di lavorazione</span>
+				</button>
+				<button>
+					<img src="assets/icons/png/star.png" />
+					<span>Pirometro</span>
+				</button>
+				<button>
+					<img src="assets/icons/png/star.png" />
+					<span>Attivazione riscaldi</span>
+				</button>
+				<button>
+					<img src="assets/icons/png/star.png" />
+					<span>Riscaldo +10 secondi</span>
+				</button>
+				<button>
+					<img src="assets/icons/png/star.png" />
+					<span>Risclado -10 secondi</span>
+				</button>
+				<button>
+					<img src="assets/icons/png/star.png" />
+					<span>Label pulsante opzionale</span>
+				</button>
+				<label>{{actual}}/{{tot}}</label>
 			</div>
-        </modal>
-    </div>
+		</modal>
+	</div>
 </template>
 
 <script lang="ts" src="./processo.ts"></script>
\ No newline at end of file
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/opzioni/components/base-components/inputSottosquadra.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/opzioni/components/base-components/inputSottosquadra.vue
index 7e05a1d8..a0c47325 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/opzioni/components/base-components/inputSottosquadra.vue
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/opzioni/components/base-components/inputSottosquadra.vue
@@ -1,33 +1,33 @@
 <template>
 	<div class="box transparent box-500 center">
 		<div class="body">
-			<template v-if="recipe.modalita.status.visible">
-			<div class="input-area">
-				<label>{{'options_undercutmould__mode'|localize('Modalità')}}</label>
-				<select class="form-control" v-model="modalita"></select>
-			</div>
+			<template v-if="modalita.status.visible">
+				<div class="input-area">
+					<label>{{'options_undercutmould__mode'|localize('Modalità')}}</label>
+					<select class="form-control" v-model="modalita"></select>
+				</div>
 			</template>
-			<template v-if="recipe.quota.status.visible">
-			<div class="input-area">
-				<img src="assets/icons/png/quota.png" />
-				<label>{{'options_undercutupperplate__position'|localize('Quota')}}</label>
-				<numeric v-model="quota" />
-			</div>
-			<slider v-model="quota"></slider>
+			<template v-if="quota.status.visible">
+				<div class="input-area">
+					<img src="assets/icons/png/quota.png" />
+					<label>{{'options_undercutupperplate__position'|localize('Quota')}}</label>
+					<numeric v-model="quota" />
+				</div>
+				<slider v-model="quota"></slider>
 			</template>
-			<template v-if="recipe.ritardoAtt.status.visible">
-			<div class="input-area">
-				<label>{{'options_undercutupperplate__delay_acti'|localize('Ritardo attivazione')}}</label>
-				<numeric v-model="ritardoAtt" />
-			</div>
-			<slider v-model="ritardoAtt"></slider>
+			<template v-if="ritardoAtt.status.visible">
+				<div class="input-area">
+					<label>{{'options_undercutupperplate__delay_acti'|localize('Ritardo attivazione')}}</label>
+					<numeric v-model="ritardoAtt" />
+				</div>
+				<slider v-model="ritardoAtt"></slider>
 			</template>
-			<template v-if="recipe.ritardoDisatt.status.visible">
-			<div class="input-area">
-				<label>{{'options_undercutupperplate__delay_dis'|localize('Ritardo disattivazione')}}</label>
-				<numeric v-model="ritardoDisatt" />
-			</div>
-			<slider v-model="ritardoDisatt"></slider>
+			<template v-if="ritardoDisatt.status.visible">
+				<div class="input-area">
+					<label>{{'options_undercutupperplate__delay_dis'|localize('Ritardo disattivazione')}}</label>
+					<numeric v-model="ritardoDisatt" />
+				</div>
+				<slider v-model="ritardoDisatt"></slider>
 			</template>
 		</div>
 	</div>
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/opzioni/components/base-components/inputTermo.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/opzioni/components/base-components/inputTermo.vue
index ad9b4862..e86f383e 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/opzioni/components/base-components/inputTermo.vue
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/opzioni/components/base-components/inputTermo.vue
@@ -1,18 +1,18 @@
 <template>
 	<div class="box box-500 transparent center">
 		<div class="body">
-			<template v-if="recipe.abilitazione.status.visible">
-			<div class="input-area">
-				<label>{{'options_thermoregulator__enabled'|localize('Abilitazione')}}</label>
-				<toggle-button v-model="abilitazione.status.enabled"></toggle-button>
-			</div>
+			<template v-if="abilitazione.status.visible">
+				<div class="input-area">
+					<label>{{'options_thermoregulator__enabled'|localize('Abilitazione')}}</label>
+					<toggle-button v-model="abilitazione.status.enabled"></toggle-button>
+				</div>
 			</template>
-			<template v-if="recipe.setpoint.status.visible">
-			<div class="input-area">
-				<label>{{'options_thermoregulator__setpoint'|localize('Setpoint')}}</label>
-				<numeric v-model="setpoint" />
-			</div>
-			<slider v-model="setpoint"></slider>
+			<template v-if="setpoint.status.visible">
+				<div class="input-area">
+					<label>{{'options_thermoregulator__setpoint'|localize('Setpoint')}}</label>
+					<numeric v-model="setpoint" />
+				</div>
+				<slider v-model="setpoint"></slider>
 			</template>
 		</div>
 	</div>
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/opzioni/components/base-components/setupSottosquadra.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/opzioni/components/base-components/setupSottosquadra.vue
index 037b06ac..54333c5c 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/opzioni/components/base-components/setupSottosquadra.vue
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/opzioni/components/base-components/setupSottosquadra.vue
@@ -2,17 +2,17 @@
 	<div class="section">
 		<label>{{numSottoSq}}</label>
 		<label>{{status}}</label>
-		<template v-if="recipe.modalita.status.visible">
-		<select class="form-control" v-model="modalita"></select>
+		<template v-if="modalita.status.visible">
+			<select class="form-control" v-model="modalita"></select>
 		</template>
-		<template v-if="recipe.quota.status.visible">
-		<label>{{quota.setpointHMI}} mm</label>
+		<template v-if="quota.status.visible">
+			<label>{{quota.setpointHMI}} mm</label>
 		</template>
-		<template v-if="recipe.ritardoAtt.status.visible">
-		<label>{{ritardoAtt.setpointHMI}} s</label>
+		<template v-if="ritardoAtt.status.visible">
+			<label>{{ritardoAtt.setpointHMI}} s</label>
 		</template>
-		<template v-if="recipe.ritardoDisatt.status.visible">
-		<label>{{ritardoDisatt.setpointHMI}} s</label>
+		<template v-if="ritardoDisatt.status.visible">
+			<label>{{ritardoDisatt.setpointHMI}} s</label>
 		</template>
 	</div>
 </template>
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/opzioni/components/base-components/setupTermo.ts b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/opzioni/components/base-components/setupTermo.ts
index aff147ed..b863afc2 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/opzioni/components/base-components/setupTermo.ts
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/opzioni/components/base-components/setupTermo.ts
@@ -5,11 +5,11 @@ import { Prop } from "vue-property-decorator";
 @Component({})
 export default class setupTermo extends Vue {
 
-  @Prop({default:""})
+  @Prop({ default: "" })
   numTermo: string;
 
   @Prop()
-  status: Recipe.IValue;
+  status: Recipe.IStatus;
 
   @Prop()
   setpoint: Recipe.IValue;
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/opzioni/components/base-components/setupTermo.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/opzioni/components/base-components/setupTermo.vue
index 30a5dd2c..44e36fe3 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/opzioni/components/base-components/setupTermo.vue
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/opzioni/components/base-components/setupTermo.vue
@@ -1,12 +1,17 @@
 <template>
-	<div class="section">
+	<div class="option-row" @click="$emit('click')">
 		<label>{{numTermo}}</label>
-		<template v-if="recipe.status.status.visible">
-		<label>{{status.enabled}}</label>
+		<template v-if="status.visible">
+			<label>{{status.enabled}}</label>
 		</template>
-		<template v-if="recipe.setpoint.status.visible">
-		<label>{{setpoint.setpointHMI}} °C</label>
+		<template v-if="setpoint.status.visible">
+			<label>{{setpoint.setpointHMI}} °C</label>
 		</template>
 	</div>
 </template>
+<style scoped>
+label {
+	text-align: center;
+}
+</style>
 <script src="./setupTermo.ts" lang="ts"></script>
\ No newline at end of file
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/opzioni/components/termoregolatori.ts b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/opzioni/components/termoregolatori.ts
index 82f7a7e5..fbb868a9 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/opzioni/components/termoregolatori.ts
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/opzioni/components/termoregolatori.ts
@@ -1,19 +1,20 @@
 import Vue from 'vue';
 import Component from 'vue-class-component';
-import {Prop} from 'vue-property-decorator';
+import { Prop } from 'vue-property-decorator';
 import SetupTermo from "./base-components/setupTermo.vue";
 import InputTermo from "./base-components/inputTermo.vue";
 
-@Component({name:'termoregolatori',
-    components: {
+@Component({
+  name: 'termoregolatori',
+  components: {
     setupTermo: SetupTermo,
     inputTermo: InputTermo
-    }
+  }
 })
 export default class Termoragolatori extends Vue {
 
-    @Prop()
-    recipe:Recipe.IRecipe;
+  @Prop()
+  recipe: Recipe.IRecipe;
 
-    showTermo: string = "termo-1";
+  selectedItem: number = 1;
 }
\ No newline at end of file
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/opzioni/components/termoregolatori.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/opzioni/components/termoregolatori.vue
index 461ede7ee..6ba35321 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/opzioni/components/termoregolatori.vue
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/opzioni/components/termoregolatori.vue
@@ -1,163 +1,55 @@
 <template>
-	<section>
-		<div class="specific">
-			<button :class="{'active':showTermo == 'termo-1'}" @click="showTermo='termo-1'">
-				<setup-termo
-					:numTermo="1"
-					:status="recipe.options_thermoregulator_1_enabled.status"
-					:setpoint="recipe.options_thermoregulator_1_setpoint"
-				></setup-termo>
-			</button>
-			<button
-				:class="{'active':showTermo == 'termo-2'}"
-				@click="showTermo='termo-2'"
-				class="box-color"
-			>
-				<setup-termo
-					:numTermo="2"
-					:status="recipe.options_thermoregulator_2_enabled.status"
-					:setpoint="recipe.options_thermoregulator_2_setpoint"
-				></setup-termo>
-			</button>
-			<button :class="{'active':showTermo == 'termo-3'}" @click="showTermo='termo-3'">
-				<setup-termo
-					:numTermo="3"
-					:status="recipe.options_thermoregulator_3_enabled.status"
-					:setpoint="recipe.options_thermoregulator_3_setpoint"
-				></setup-termo>
-			</button>
-			<button
-				:class="{'active':showTermo == 'termo-4'}"
-				@click="showTermo='termo-4'"
-				class="box-color"
-			>
-				<setup-termo
-					:numTermo="4"
-					:status="recipe.options_thermoregulator_4_enabled.status"
-					:setpoint="recipe.options_thermoregulator_4_setpoint"
-				></setup-termo>
-			</button>
-			<button :class="{'active':showTermo == 'termo-5'}" @click="showTermo='termo-5'">
-				<setup-termo
-					:numTermo="5"
-					:status="recipe.options_thermoregulator_5_enabled.status"
-					:setpoint="recipe.options_thermoregulator_5_setpoint"
-				></setup-termo>
-			</button>
-			<button
-				:class="{'active':showTermo == 'termo-6'}"
-				@click="showTermo='termo-6'"
-				class="box-color"
-			>
-				<setup-termo
-					:numTermo="6"
-					:status="recipe.options_thermoregulator_6_enabled.status"
-					:setpoint="recipe.options_thermoregulator_6_setpoint"
-				></setup-termo>
-			</button>
-			<button :class="{'active':showTermo == 'termo-7'}" @click="showTermo='termo-7'">
-				<setup-termo
-					:numTermo="7"
-					:status="recipe.options_thermoregulator_7_enabled.status"
-					:setpoint="recipe.options_thermoregulator_7_setpoint"
-				></setup-termo>
-			</button>
-			<button
-				:class="{'active':showTermo == 'termo-8'}"
-				@click="showTermo='termo-8'"
-				class="box-color"
-			>
-				<setup-termo
-					:numTermo="8"
-					:status="recipe.options_thermoregulator_8_enabled.status"
-					:setpoint="recipe.options_thermoregulator_8_setpoint"
-				></setup-termo>
-			</button>
-			<button :class="{'active':showTermo == 'termo-9'}" @click="showTermo='termo-9'">
-				<setup-termo
-					:numTermo="9"
-					:status="recipe.options_thermoregulator_9_enabled.status"
-					:setpoint="recipe.options_thermoregulator_9_setpoint"
-				></setup-termo>
-			</button>
-			<button
-				:class="{'active':showTermo == 'termo-10'}"
-				@click="showTermo='termo-10'"
-				class="box-color"
-			>
-				<setup-termo
-					:numTermo="10"
-					:status="recipe.options_thermoregulator_10_enabled.status"
-					:setpoint="recipe.options_thermoregulator_10_setpoint"
-				></setup-termo>
-			</button>
+	<div class="termoregolatori">
+		<div class="list">
+			<setup-termo
+				:class="{'active': selectedItem == i}"
+				v-for="i in 10"
+				:key="i"
+				@click="selectedItem=i"
+				:numTermo="i"
+				:status="recipe[`options_thermoregulator_${selectedItem}_enabled`].status"
+				:setpoint="recipe[`options_thermoregulator_${i}_setpoint`]"
+			></setup-termo>
 		</div>
 
-		<hr />
-
-		<div class="specific">
-			<div v-if="showTermo=='termo-1'">
-				<input-termo
-					:setpoint="recipe.options_thermoregulator_1_setpoint"
-					:abilitazione="recipe.options_thermoregulator_1_enabled"
-				></input-termo>
-			</div>
-			<div v-if="showTermo=='termo-2'">
-				<input-termo
-					:setpoint="recipe.options_thermoregulator_2_setpoint"
-					:abilitazione="recipe.options_thermoregulator_2_enabled"
-				></input-termo>
-			</div>
-			<div v-if="showTermo=='termo-3'">
-				<input-termo
-					:setpoint="recipe.options_thermoregulator_3_setpoint"
-					:abilitazione="recipe.options_thermoregulator_3_enabled"
-				></input-termo>
-			</div>
-			<div v-if="showTermo=='termo-4'">
-				<input-termo
-					:setpoint="recipe.options_thermoregulator_4_setpoint"
-					:abilitazione="recipe.options_thermoregulator_4_enabled"
-				></input-termo>
-			</div>
-			<div v-if="showTermo=='termo-5'">
-				<input-termo
-					:setpoint="recipe.options_thermoregulator_5_setpoint"
-					:abilitazione="recipe.options_thermoregulator_5_enabled"
-				></input-termo>
-			</div>
-			<div v-if="showTermo=='termo-6'">
-				<input-termo
-					:setpoint="recipe.options_thermoregulator_6_setpoint"
-					:abilitazione="recipe.options_thermoregulator_6_enabled"
-				></input-termo>
-			</div>
-			<div v-if="showTermo=='termo-7'">
-				<input-termo
-					:setpoint="recipe.options_thermoregulator_7_setpoint"
-					:abilitazione="recipe.options_thermoregulator_7_enabled"
-				></input-termo>
-			</div>
-			<div v-if="showTermo=='termo-8'">
-				<input-termo
-					:setpoint="recipe.options_thermoregulator_8_setpoint"
-					:abilitazione="recipe.options_thermoregulator_8_enabled"
-				></input-termo>
-			</div>
-			<div v-if="showTermo=='termo-9'">
-				<input-termo
-					:setpoint="recipe.options_thermoregulator_9_setpoint"
-					:abilitazione="recipe.options_thermoregulator_9_enabled"
-				></input-termo>
-			</div>
-			<div v-if="showTermo=='termo-10'">
-				<input-termo
-					:setpoint="recipe.options_thermoregulator_10_setpoint"
-					:abilitazione="recipe.options_thermoregulator_10_enabled"
-				></input-termo>
-			</div>
+		<div>
+			<input-termo
+				:setpoint="recipe[`options_thermoregulator_${selectedItem}_setpoint`]"
+				:abilitazione="recipe[`options_thermoregulator_${selectedItem}_enabled`]"
+			></input-termo>
 		</div>
-	</section>
+	</div>
 </template>
+<style scoped>
+.termoregolatori {
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	align-items: flex-start;
+	width: 100%;
+	height: 100%;
+}
 
+.list {
+	border-right: 2px solid #979797;
+	height: 100%;
+}
+
+.option-row {
+	display: grid;
+	grid-template-columns: 1fr 1fr 1fr;
+	align-items: center;
+	justify-content: space-around;
+	height: 64px;
+	cursor: pointer;
+}
+
+.option-row:nth-child(odd) {
+	background-color: #ddd;
+}
+
+.option-row.active {
+	background-color: rgba(23, 145, 255, 0.75);
+	color: #fff;
+}
+</style>
 <script lang="ts" src="./termoregolatori.ts"></script>
\ No newline at end of file
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/opzioni/show-opzioni-info.ts b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/opzioni/show-opzioni-info.ts
index 48050618..f9785d8c 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/opzioni/show-opzioni-info.ts
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/opzioni/show-opzioni-info.ts
@@ -23,7 +23,7 @@ import { recipeService } from "@/services/recipeService";
 })
 export default class ShowOpzioniInfo extends Vue {
 
-  recipe: Recipe.IRecipe = this.$store.getters.getCurrent();
+  get recipe(): Recipe.IRecipe { return this.$store.getters.getCurrent(); }
   showOpzioni: string = "TR";
 
   @Prop()