diff --git a/Thermo.Active/wwwroot/config.development.json b/Thermo.Active/wwwroot/config.development.json
index 75f97ae3..58460cb5 100644
--- a/Thermo.Active/wwwroot/config.development.json
+++ b/Thermo.Active/wwwroot/config.development.json
@@ -2,7 +2,7 @@
   "env": "development",
   "api": {
     "enabled": true,
-    "apiServerUrl": "http://95.236.130.105:9000/"
+    "apiServerUrl": "http://seriate.steamware.net:9000/"
   },
   "allUIVisible": false
 }
\ No newline at end of file
diff --git a/Thermo.Active/wwwroot/index.html b/Thermo.Active/wwwroot/index.html
index 6966f3ba..f018a3b8 100644
--- a/Thermo.Active/wwwroot/index.html
+++ b/Thermo.Active/wwwroot/index.html
@@ -13,7 +13,7 @@
   <script src="Scripts/jquery.mousewheel.js"></script>
   <script src="Scripts/jquery.signalR-2.2.2.min.js"></script>
   <script src="Scripts/raphael-2.1.4.min.js"></script>
-  <script src="http://95.236.130.105:9000/signalr/hubs" async></script>
+  <script src="http://seriate.steamware.net:9000//signalr/hubs" async></script>
 
   <link href="assets/styles/style.css" rel="stylesheet" />
 </head>
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/sotto-cofano/Assi/components/tables/assi-table/assi-table.less b/Thermo.Active/wwwroot/src/app_modules_thermo/sotto-cofano/Assi/components/tables/assi-table/assi-table.less
index b172d8df..8dd0121b 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/sotto-cofano/Assi/components/tables/assi-table/assi-table.less
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/sotto-cofano/Assi/components/tables/assi-table/assi-table.less
@@ -1,9 +1,5 @@
 @import "../../../../variable.less";
 
-span {
-  display: inline-block;
-}
-
 .log-assi-table {
   width: 1384px;
   height: 886px;
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/sotto-cofano/InputOutput/components/io/io.less b/Thermo.Active/wwwroot/src/app_modules_thermo/sotto-cofano/InputOutput/components/io/io.less
index 2e1f861e..ea8d48d5 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/sotto-cofano/InputOutput/components/io/io.less
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/sotto-cofano/InputOutput/components/io/io.less
@@ -1,7 +1,5 @@
 @import "../../../variable.less";
-span {
-  display: inline-block;
-}
+
 
 .column-page-header {
   width: 672px;
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/sotto-cofano/InputOutput/components/io/io.ts b/Thermo.Active/wwwroot/src/app_modules_thermo/sotto-cofano/InputOutput/components/io/io.ts
index 7afce795..893e02e3 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/sotto-cofano/InputOutput/components/io/io.ts
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/sotto-cofano/InputOutput/components/io/io.ts
@@ -23,4 +23,8 @@ export default class IO extends Vue {
     return store.state.underTheHood.ioChannelsConfig;
   }
 
+  scrollto(key) {
+    document.getElementById(key).scrollIntoView();
+  }
+
 }
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/sotto-cofano/InputOutput/components/io/io.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/sotto-cofano/InputOutput/components/io/io.vue
index e90fdb5d..3c39ae32 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/sotto-cofano/InputOutput/components/io/io.vue
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/sotto-cofano/InputOutput/components/io/io.vue
@@ -6,6 +6,7 @@
 				<a href>Pinned</a>
 				<template v-for="(group, idx) in ['di','ai']">
 					<a
+						@click="scrollto(`input-${group}`)"
 						class="upper"
 						v-for="(inputid, idx2) in config[group]"
 						:key="`h-${idx}-${idx2}`"
@@ -21,6 +22,7 @@
 				<a href>Pinned</a>
 				<template v-for="(group, idx) in ['do','ao']">
 					<a
+						@click="scrollto(`output-${group}`)"
 						class="upper"
 						v-for="(inputid, idx2) in config[group]"
 						:key="`h-${idx}-${idx2}`"
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/sotto-cofano/InputOutput/components/tables/inputTab/input.less b/Thermo.Active/wwwroot/src/app_modules_thermo/sotto-cofano/InputOutput/components/tables/inputTab/input.less
index 98b9e663..fb694084 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/sotto-cofano/InputOutput/components/tables/inputTab/input.less
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/sotto-cofano/InputOutput/components/tables/inputTab/input.less
@@ -16,7 +16,8 @@ td {
   }
 }
 
-.value-button-input-container-off {
+.value-button-input-container-off,
+.value-button-input-container-on {
   width: 48px;
   height: 25px;
   margin: 20px 10px 19px 10px;
@@ -39,20 +40,5 @@ td {
 }
 
 .value-button-input-container-on {
-  width: 48px;
-  height: 25px;
-  margin: 20px 10px 19px 10px;
-  padding: 3px 0;
-  border-radius: 2px;
-  float: right;
   background-color: @clear-blue;
-  &-label {
-    width: 48px;
-    height: 19px;
-    padding: 2px 0 0 0px;
-    text-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
-    font-size: 16px;
-    text-align: center;
-    color: #e8e8e8;
-  }
 }
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/sotto-cofano/LogCicloAutomatico/components/log-ciclo-automatico/log-ciclo-automatico.less b/Thermo.Active/wwwroot/src/app_modules_thermo/sotto-cofano/LogCicloAutomatico/components/log-ciclo-automatico/log-ciclo-automatico.less
index a74c201f..93e93a32 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/sotto-cofano/LogCicloAutomatico/components/log-ciclo-automatico/log-ciclo-automatico.less
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/sotto-cofano/LogCicloAutomatico/components/log-ciclo-automatico/log-ciclo-automatico.less
@@ -1,9 +1,25 @@
 @import "../../../variable.less";
 
-span {
-  display: inline-block;
+
+.button-details {
+  width: 93px;
+  padding: 14px 0px 13px 0px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 2px;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
+  background-image: linear-gradient(to bottom, #818a8f 0%, #42494e 98%);
+  cursor: pointer;
+  > label {
+    font-size: 18px;
+    font-weight: 500;
+    color: @very-light-pink;
+  }
 }
 
+
+
 .log-ciclo-automatico-table {
   tbody tr:nth-child(odd) {
     background-color: @fill-under-grey-3-2;
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/sotto-cofano/LogCicloAutomatico/components/log-ciclo-automatico/log-ciclo-automatico.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/sotto-cofano/LogCicloAutomatico/components/log-ciclo-automatico/log-ciclo-automatico.vue
index 0c7c55b4..9b0acc50 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/sotto-cofano/LogCicloAutomatico/components/log-ciclo-automatico/log-ciclo-automatico.vue
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/sotto-cofano/LogCicloAutomatico/components/log-ciclo-automatico/log-ciclo-automatico.vue
@@ -1,9 +1,7 @@
 <template>
-  <div class="main-container">
-    <div class="column-page">
-      <LogCicloAutomaticoTable></LogCicloAutomaticoTable>
-    </div>
-  </div>
+	<div class="column-page-one-column">
+		<LogCicloAutomaticoTable></LogCicloAutomaticoTable>
+	</div>
 </template>
 <style lang="less">
 @import "log-ciclo-automatico.less";
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/sotto-cofano/LogCicloAutomatico/components/tables/log-ciclo-automatico-table/log-ciclo-automatico-table.less b/Thermo.Active/wwwroot/src/app_modules_thermo/sotto-cofano/LogCicloAutomatico/components/tables/log-ciclo-automatico-table/log-ciclo-automatico-table.less
index bdd38cce..5d0300f8 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/sotto-cofano/LogCicloAutomatico/components/tables/log-ciclo-automatico-table/log-ciclo-automatico-table.less
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/sotto-cofano/LogCicloAutomatico/components/tables/log-ciclo-automatico-table/log-ciclo-automatico-table.less
@@ -1,186 +1,30 @@
 @import "../../../../variable.less";
 
-span {
-  display: inline-block;
+.date {
+    width: 212px;
 }
-
-.log-ciclo-automatico-table {
-  width: 1384px;
-  height: 886px;
-  margin: 20px 20px 0 20px;
-  thead {
-    height: 34px;
-    opacity: 0.5;
-    background-color: @fill-under-grey-1-2;
-  }
-  th {
-    display: inline-block;
-  }
-  tbody {
-    overflow-y: scroll;
-    height: 752px;
-    tr {
-      display: inline-block;
-      width: 1358px;
-      height: 64px;
-      float: left;
-      &-inner {
-        width: 1358px;
-        height: 64px;
-        margin: 34px 26px 0 0;
-        padding: 0 2px 0 10px;
-      }
-    }
-  }
-}
-
-.date-ciclo {
-  width: 63px;
-  height: 12px;
-  margin: 10px 149px 12px 9px;
-
-  font-size: 14px;
-  font-weight: normal;
-  font-stretch: normal;
-  font-style: normal;
-  line-height: 0.86;
-  letter-spacing: normal;
-  color: @white;
-  text-align: left !important;
-  float: left;
-  &-inner {
-    width: 177px;
-    height: 16px;
-    margin: 24px 0px 0px 10px;
-
-    font-size: 14px;
-    font-weight: normal;
-    font-stretch: normal;
-    font-style: normal;
-    line-height: normal;
-    letter-spacing: normal;
-    float: left;
-    text-align: left;
-    color: @very-light-pink;
-  }
-}
-
-.class-ciclo {
-  width: 63px;
-  height: 12px;
-  margin: 10px 36px 12px 0px;
-
-  font-size: 14px;
-  font-weight: normal;
-  font-stretch: normal;
-  font-style: normal;
-  line-height: 0.86;
-  letter-spacing: normal;
-  text-align: center;
-  float: left;
-  color: @white;
-  &-inner {
-    width: 35px;
-    height: 16px;
-    margin: 24px 0px 0px 47px;
-
-    font-size: 14px;
-    font-weight: normal;
-    font-stretch: normal;
-    font-style: normal;
-    line-height: normal;
-    letter-spacing: normal;
-    text-align: center;
-    float: left;
-    color: @very-light-pink;
-  }
-}
-
-.recipe-ciclo {
-  width: 63px;
-  height: 12px;
-  margin: 10px 108px 12px 0px;
-
-  font-size: 14px;
-  font-weight: normal;
-  font-stretch: normal;
-  font-style: normal;
-  line-height: 0.86;
-  letter-spacing: normal;
-  float: left;
-  color: @white;
-  &-inner {
-    width: 121px;
-    height: 16px;
-    margin: 24px 0px 0px 51px;
-
-    font-size: 14px;
-    font-weight: normal;
-    font-stretch: normal;
-    font-style: normal;
-    line-height: normal;
-    letter-spacing: normal;
-    text-align: center;
-    float: left;
-    color: @very-light-pink;
-  }
-}
-
-.message-ciclo {
-  width: 114px;
-  height: 12px;
-  margin: 10px 0px 12px 0px;
-
-  font-size: 14px;
-  font-weight: normal;
-  font-stretch: normal;
-  font-style: normal;
-  line-height: 0.86;
-  letter-spacing: normal;
-  float: left;
-  text-align: left !important;
-  color: @white;
-  &-inner {
+.message {
     width: 751px;
-    height: 64px;
-    margin: 18px 0px 0px 50px;
+}
 
-    font-size: 14px;
-    font-weight: normal;
-    font-stretch: normal;
-    font-style: normal;
-    line-height: normal;
-    letter-spacing: normal;
-    float: left;
-    text-align: initial;
-    color: @very-light-pink;
+th,
+td {
+  &.ciclo-date {
+    width: 212px;
+    max-width: 212px;
+  }
+  &.ciclo-message {
+    width: 751px;
+    max-width: 751px;
+  }
+  &.ciclo-recipe {
+    width: 171px;
+    max-width: 171px;
   }
 }
 
-.button-details {
-  width: 99px;
-  float: right;
-  display: flex;
-  justify-content: center;
-  padding: 14px 0px 13px 0px;
-  margin: 8px 8px 8px 8px;
-  object-fit: contain;
-  border-radius: 2px;
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
-  background-image: linear-gradient(to bottom, #818a8f 0%, #42494e 98%);
-  cursor: pointer;
-  &-label {
-    width: 62px;
-    height: 21px;
-    object-fit: contain;
 
-    font-size: 18px;
-    font-weight: 500;
-    font-stretch: normal;
-    font-style: normal;
-    line-height: normal;
-    letter-spacing: normal;
-    text-align: center;
-    color: @very-light-pink;
-  }
-}
+
+
+
+
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/sotto-cofano/LogCicloAutomatico/components/tables/log-ciclo-automatico-table/log-ciclo-automatico-table.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/sotto-cofano/LogCicloAutomatico/components/tables/log-ciclo-automatico-table/log-ciclo-automatico-table.vue
index 105321a5..42af9788 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/sotto-cofano/LogCicloAutomatico/components/tables/log-ciclo-automatico-table/log-ciclo-automatico-table.vue
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/sotto-cofano/LogCicloAutomatico/components/tables/log-ciclo-automatico-table/log-ciclo-automatico-table.vue
@@ -1,40 +1,29 @@
 <template>
-  <div>
-    <table class="log-ciclo-automatico-table">
+  <div class="one-column-table-container scrollable">
+    <table>
       <thead>
         <tr>
-          <th class="date-ciclo">Date</th>
-          <th class="class-ciclo">Class</th>
-          <th class="recipe-ciclo">Recipe</th>
-          <th class="message-ciclo">Message</th>
+          <th class="ciclo-date">Date</th>
+          <th>Class</th>
+          <th class="ciclo-recipe">Recipe</th>
+          <th class="ciclo-message">Message</th>
+          <th></th>
         </tr>
       </thead>
       <tbody>
-        <tr v-for="(item, i) of rowData" :key="i" class="tr-inner">
-          <td>
-            <span class="date-ciclo-inner">
-              {{ item.date }}
-            </span>
-          </td>
-          <td>
-            <span class="class-ciclo-inner">
-              {{ item.class }}
-            </span>
-          </td>
-          <td>
-            <span class="recipe-ciclo-inner">
-              {{ item.recipe }}
-            </span>
-          </td>
-          <td>
-            <span class="message-ciclo-inner">
-              {{ item.message }}
-            </span>
-            <span class="button-details" @click="goToDetails()">
-              <span class="button-details-label">Details</span>
-            </span>
-          </td>
-        </tr>
+        <template v-for="(item, idx) in rowData">
+          <tr :key="`c-${idx}`">
+            <td>{{ item.date }}</td>
+            <td>{{ item.class }}</td>
+            <td>{{ item.recipe }}</td>
+            <td>{{ item.message }}</td>
+            <td>
+              <span class="button-details">
+                <label>Details</label>
+              </span>
+            </td>
+          </tr>
+        </template>
       </tbody>
     </table>
   </div>
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/sotto-cofano/LogMisurazioni/components/log-misurazioni/log-misurazioni.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/sotto-cofano/LogMisurazioni/components/log-misurazioni/log-misurazioni.vue
index accfddda..672b1256 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/sotto-cofano/LogMisurazioni/components/log-misurazioni/log-misurazioni.vue
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/sotto-cofano/LogMisurazioni/components/log-misurazioni/log-misurazioni.vue
@@ -1,9 +1,7 @@
 <template>
-  <div class="main-container">
-    <div class="column-page">
-      <LogMisurazioniTable></LogMisurazioniTable>
-    </div>
-  </div>
+	<div class="column-page-one-column">
+		<LogMisurazioniTable></LogMisurazioniTable>
+	</div>
 </template>
 <style lang="less">
 @import "log-misurazioni.less";
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/sotto-cofano/LogMisurazioni/components/tables/log-misurazioni-table/log-misurazioni-table.less b/Thermo.Active/wwwroot/src/app_modules_thermo/sotto-cofano/LogMisurazioni/components/tables/log-misurazioni-table/log-misurazioni-table.less
index 3f7c1d92..08251285 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/sotto-cofano/LogMisurazioni/components/tables/log-misurazioni-table/log-misurazioni-table.less
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/sotto-cofano/LogMisurazioni/components/tables/log-misurazioni-table/log-misurazioni-table.less
@@ -1,163 +1,21 @@
 @import "../../../../variable.less";
 
-span {
-  display: inline-block;
-}
-
-.log-misurazioni-table {
-  width: 1384px;
-  height: 886px;
-  margin: 20px 20px 0 20px;
-  thead {
-    height: 34px;
-    opacity: 0.5;
-    background-color: @fill-under-grey-1-2;
+th,
+td {
+  &.misurazioni-value {
+    width: 322px;
+    max-width: 322px;
   }
-  th {
-    display: inline-block;
+  &.misurazioni-recipe {
+    width: 539px;
+    max-width: 539px;
   }
-  tbody tr:nth-child(odd) {
-    background-color: @fill-under-grey-3-2;
+  &.misurazioni-date {
+    width: 313px;
+    max-width: 313px;
   }
-  tbody tr:nth-child(even) {
-    background-color: @fill-under-grey-1-2;
-  }
-  tbody {
-    overflow-y: scroll;
-    height: 752px;
-    tr {
-      display: inline-block;
-      width: 1358px;
-      height: 64px;
-      float: left;
-      &-inner {
-        width: 1358px;
-        height: 64px;
-        margin: 34px 26px 0 0;
-        padding: 0 2px 0 10px;
-      }
-    }
-  }
-}
-
-.date-misurazioni {
-  width: 63px;
-  height: 12px;
-  margin: 10px 0px 12px 9px;
-
-  font-size: 14px;
-  font-weight: normal;
-  font-stretch: normal;
-  font-style: normal;
-  line-height: 0.86;
-  letter-spacing: normal;
-  color: @white;
-  text-align: left !important;
-  float: left;
-  &-inner {
-    width: 164px;
-    height: 16px;
-    margin: 24px 0px 24px 10px;
-
-    font-size: 14px;
-    font-weight: normal;
-    font-stretch: normal;
-    font-style: normal;
-    line-height: normal;
-    letter-spacing: normal;
-    text-align: left !important;
-    float: left;
-    color: @very-light-pink;
-  }
-}
-
-.recipe-misurazioni {
-  width: 63px;
-  height: 12px;
-  margin: 10px 0px 12px 267px;
-
-  font-size: 14px;
-  font-weight: normal;
-  font-stretch: normal;
-  font-style: normal;
-  line-height: 0.86;
-  letter-spacing: normal;
-  text-align: left;
-  float: left;
-  color: @white;
-  &-inner {
-    width: 121px;
-    height: 16px;
-    margin: 24px 0px 24px 139px;
-
-    font-size: 14px;
-    font-weight: normal;
-    font-stretch: normal;
-    font-style: normal;
-    line-height: normal;
-    letter-spacing: normal;
-    text-align: center !important;
-    float: left;
-    color: @very-light-pink;
-  }
-}
-
-.type-misurazioni {
-  width: 63px;
-  height: 12px;
-  margin: 10px 0 12px 448px;
-
-  font-size: 14px;
-  font-weight: normal;
-  font-stretch: normal;
-  font-style: normal;
-  line-height: 0.86;
-  letter-spacing: normal;
-  text-align: left !important;
-  float: left;
-  color: @white;
-  &-inner {
-    width: 48px;
-    height: 16px;
-    margin: 24px 0px 24px 410px;
-
-    font-size: 14px;
-    font-weight: normal;
-    font-stretch: normal;
-    font-style: normal;
-    line-height: normal;
-    letter-spacing: normal;
-    float: left;
-    color: @very-light-pink;
-  }
-}
-
-.value-misurazioni {
-  width: 63px;
-  height: 12px;
-  margin: 10px 268px 12px 124px;
-
-  font-size: 14px;
-  font-weight: normal;
-  font-stretch: normal;
-  font-style: normal;
-  line-height: 0.86;
-  letter-spacing: normal;
-  text-align: left !important;
-  color: @white;
-  &-inner {
-    width: 253px;
-    height: 16px;
-    margin: 24px 69px 24px 142px;
-
-    font-size: 14px;
-    font-weight: normal;
-    font-stretch: normal;
-    font-style: normal;
-    line-height: normal;
-    letter-spacing: normal;
-    float: left;
-    text-align: initial;
-    color: @very-light-pink;
+  &.misurazioni-type {
+    width: 187px;
+    max-width: 187px;
   }
 }
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/sotto-cofano/LogMisurazioni/components/tables/log-misurazioni-table/log-misurazioni-table.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/sotto-cofano/LogMisurazioni/components/tables/log-misurazioni-table/log-misurazioni-table.vue
index 39ac4369..6e5366f8 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/sotto-cofano/LogMisurazioni/components/tables/log-misurazioni-table/log-misurazioni-table.vue
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/sotto-cofano/LogMisurazioni/components/tables/log-misurazioni-table/log-misurazioni-table.vue
@@ -1,33 +1,33 @@
 <template>
-  <div>
-    <table class="log-misurazioni-table">
+  <div class="one-column-table-container scrollable">
+    <table>
       <thead>
         <tr>
-          <th class="date-misurazioni">Date</th>
-          <th class="recipe-misurazioni">Recipe</th>
-          <th class="type-misurazioni">Type</th>
-          <th class="value-misurazioni">Value</th>
+          <th class="misurazioni-date">Date</th>
+          <th class="misurazioni-recipe">Recipe</th>
+          <th class="misurazioni-type">Type</th>
+          <th class="misurazioni-value">Value</th>
         </tr>
       </thead>
       <tbody>
         <tr v-for="(item, i) of rowData" :key="i" class="tr-inner">
           <td>
-            <span class="date-misurazioni-inner">
+            <span>
               {{ item.date }}
             </span>
           </td>
           <td>
-            <span class="recipe-misurazioni-inner">
+            <span>
               {{ item.recipe }}
             </span>
           </td>
           <td>
-            <span class="type-misurazioni-inner">
+            <span>
               {{ item.type }}
             </span>
           </td>
           <td>
-            <span class="value-misurazioni-inner">
+            <span>
               {{ item.value }}
             </span>
           </td>
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/sotto-cofano/Riscaldi/components/riscaldi/riscaldi.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/sotto-cofano/Riscaldi/components/riscaldi/riscaldi.vue
index 466b86e7..4d3f1823 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/sotto-cofano/Riscaldi/components/riscaldi/riscaldi.vue
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/sotto-cofano/Riscaldi/components/riscaldi/riscaldi.vue
@@ -1,9 +1,7 @@
 <template>
-  <div class="main-container">
-    <div class="column-page">
-      <RiscaldiTable></RiscaldiTable>
-    </div>
-  </div>
+	<div class="column-page-one-column">
+		<RiscaldiTable></RiscaldiTable>
+	</div>
 </template>
 <style lang="less">
 @import "riscaldi.less";
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/sotto-cofano/Riscaldi/components/tables/riscaldi-table/riscaldi-table.less b/Thermo.Active/wwwroot/src/app_modules_thermo/sotto-cofano/Riscaldi/components/tables/riscaldi-table/riscaldi-table.less
index b58f7356..571795a0 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/sotto-cofano/Riscaldi/components/tables/riscaldi-table/riscaldi-table.less
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/sotto-cofano/Riscaldi/components/tables/riscaldi-table/riscaldi-table.less
@@ -1,268 +1,71 @@
 @import "../../../../variable.less";
 
-span {
-  display: inline-block;
-}
-
-.riscaldi-table {
-  width: 1384px;
-  height: 886px;
-  margin: 20px 20px 0 20px;
-  thead {
-    height: 34px;
-    opacity: 0.5;
-    background-color: @fill-under-grey-1-2;
+th,
+td {
+  &.riscaldi-status {
+    width: 435px;
+    max-width: 435px;
+    padding: 0 0 0 38px;
   }
-  th {
-    display: inline-block;
+  &.riscaldi-set {
+    width: 378px;
+    max-width: 378px;
   }
-  tbody {
-    overflow-y: scroll;
-    height: 752px;
-    tr:nth-child(odd) {
-      background-color: @fill-under-grey-3-2;
-    }
-    tr {
-      display: inline-block;
-      width: 1358px;
-      height: 64px;
-
-      &-inner {
-        width: 1358px;
-        height: 64px;
-        margin: 34px 26px 0 0;
-        padding: 0 2px 0 10px;
-      }
-    }
+  &.riscaldi-cell-id {
+    width: 254px;
+    max-width: 254px;
+  }
+  &.riscaldi-current {
+    width: 308px;
+    max-width: 308px;
   }
 }
 
-.cell-id {
-  height: 16px;
-  margin: 10px 0px 12px 9px;
-
-  font-size: 14px;
-  font-weight: normal;
-  font-stretch: normal;
-  font-style: normal;
-  line-height: normal;
-  letter-spacing: normal;
-  text-align: left;
-  float: left;
-  color: @very-light-pink;
-  &-inner {
-    width: 6px;
-    height: 16px;
-    margin: 24px 0px 24px 10px;
-
-    font-size: 14px;
-    font-weight: normal;
-    font-stretch: normal;
-    font-style: normal;
-    line-height: normal;
-    letter-spacing: normal;
-    float: left;
-    color: @very-light-pink;
-  }
-}
-
-.current {
-  width: 63px;
-  height: 12px;
-  margin: 10px 0px 12px 173px;
-
-  font-size: 14px;
-  font-weight: normal;
-  font-stretch: normal;
-  font-style: normal;
-  line-height: 0.86;
-  letter-spacing: normal;
-  text-align: center;
-  float: left;
-  color: @white;
-  &-inner {
-    width: 44px;
-    height: 16px;
-    margin: 24px 0px 24px 216px;
-
-    font-size: 14px;
-    font-weight: normal;
-    font-stretch: normal;
-    font-style: normal;
-    line-height: normal;
-    letter-spacing: normal;
-    text-align: center;
-    float: left;
-    color: @very-light-pink;
-  }
-}
-
-.set {
-  width: 63px;
-  height: 12px;
-  margin: 10px 0px 12px 226px;
-
-  font-size: 14px;
-  font-weight: normal;
-  font-stretch: normal;
-  font-style: normal;
-  line-height: 0.86;
-  letter-spacing: normal;
-  text-align: center;
-  float: left;
-  color: @white;
-  &-inner {
-    width: 21px;
-    height: 16px;
-    margin: 24px 0px 24px 260px;
-
-    font-size: 14px;
-    font-weight: normal;
-    font-stretch: normal;
-    font-style: normal;
-    line-height: normal;
-    letter-spacing: normal;
-    text-align: center;
-    color: @very-light-pink;
-  }
-}
-
-.status {
-  width: 63px;
-  height: 12px;
-  margin: 10px 0 12px 325px;
-
-  font-size: 14px;
-  font-weight: normal;
-  font-stretch: normal;
-  font-style: normal;
-  line-height: 0.86;
-  letter-spacing: normal;
-  text-align: center;
-  float: left;
-  color: @white;
-}
-
-.button-details {
-  width: 93px;
-  float: right;
-  padding: 14px 0px 13px 0px;
-  margin: 8px 8px 8px 8px;
-  object-fit: contain;
+.status-buttons {
+  padding: 3px 16px;
   border-radius: 2px;
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
-  background-image: linear-gradient(to bottom, #818a8f 0%, #42494e 98%);
-  cursor: pointer;
-  &-label {
-    width: 62px;
-    height: 21px;
-    object-fit: contain;
+}
 
-    font-size: 18px;
-    font-weight: 500;
-    font-stretch: normal;
-    font-style: normal;
-    line-height: normal;
-    letter-spacing: normal;
-    text-align: center;
-    color: @very-light-pink;
-  }
+label {
+  margin: 3px 16px 3px 16px;
 }
 
 .ok-button {
-  width: 55px;
-  height: 25px;
-  margin: 20px 263px 19px 336px;
-  padding: 3px 16px;
-  border-radius: 2px;
   background-color: @booger;
-  &-label {
-    width: 23px;
-    height: 19px;
+  > label {
     text-shadow: 0 0 4px @black-50;
-    margin: 3px 16px 3px 16px;
-
-    font-size: 16px;
-    font-weight: normal;
-    font-stretch: normal;
-    font-style: normal;
-    line-height: normal;
-    letter-spacing: normal;
-    text-align: center;
     color: @very-light-pink;
   }
 }
 
 .broken-button {
-  width: 87px;
-  height: 25px;
-  margin: 20px 247px 19px 320px;
-  padding: 3px 16px;
-  border-radius: 2px;
   background-color: @scarlet;
-  &-label {
-    width: 55px;
-    height: 19px;
-    margin: 3px 16px 3px 16px;
-    text-shadow: 0 0 4px @black-50;
-
+  > label {
+    text-shadow: 0 0 4px rgb(0 0 0 / 50%);
     font-size: 16px;
-    font-weight: normal;
-    font-stretch: normal;
-    font-style: normal;
-    line-height: normal;
-    letter-spacing: normal;
-    text-align: center;
     color: @very-light-pink;
   }
 }
 
 .error-button {
-  width: 96px;
-  height: 25px;
-  margin: 20px 243px 19px 315px;
-  padding: 3px 16px;
-  border-radius: 2px;
   background-color: @scarlet;
-  &-label {
-    width: 64px;
-    height: 19px;
-    margin: 3px 16px 3px 16px;
+  > label {
     text-shadow: 0 0 4px @black-50;
-
-    font-size: 16px;
-    font-weight: normal;
-    font-stretch: normal;
-    font-style: normal;
-    line-height: normal;
-    letter-spacing: normal;
-    text-align: center;
     color: @very-light-pink;
   }
 }
 
 .warning-button {
-  width: 96px;
-  height: 25px;
-  margin: 20px 243px 19px 315px;
-  padding: 3px 16px;
-  border-radius: 2px;
-  display: flex;
-  justify-content: center;
   background-color: @macaroni-and-cheese;
-  &-label {
-    width: 79px;
-    height: 19px;
+  > label {
     margin: 3px 0px 3px 0px;
     text-shadow: 0 0 4px @black-50;
-
-    font-size: 16px;
-    font-weight: normal;
-    font-stretch: normal;
-    font-style: normal;
-    line-height: normal;
-    letter-spacing: normal;
-    text-align: center;
     color: @very-light-pink;
   }
 }
+
+.status-container {
+  width: 126px;
+  display: flex;
+  justify-content: center;
+}
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/sotto-cofano/Riscaldi/components/tables/riscaldi-table/riscaldi-table.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/sotto-cofano/Riscaldi/components/tables/riscaldi-table/riscaldi-table.vue
index 2496273d..3f1e3c5b 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/sotto-cofano/Riscaldi/components/tables/riscaldi-table/riscaldi-table.vue
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/sotto-cofano/Riscaldi/components/tables/riscaldi-table/riscaldi-table.vue
@@ -1,50 +1,69 @@
 <template>
-  <div>
-    <table class="riscaldi-table">
+  <div class="one-column-table-container scrollable">
+    <table>
       <thead>
         <tr>
-          <th class="cell-id">Cell ID</th>
-          <th class="current">Current</th>
-          <th class="set">Set</th>
-          <th class="status">Status</th>
+          <th class="riscaldi-cell-id">Cell ID</th>
+          <th class="riscaldi-current">Current</th>
+          <th class="riscaldi-set">Set</th>
+          <th class="riscaldi-status">Status</th>
+          <th></th>
         </tr>
       </thead>
       <tbody>
-        <tr v-for="(item, i) of rowData" :key="i" class="tr-inner">
+        <tr v-for="(item, i) of rowData" :key="i">
           <td>
-            <span class="cell-id-inner">
+            <span>
               {{ item.cellId }}
             </span>
           </td>
           <td>
-            <span class="current-inner">
+            <span>
               {{ item.current }}
             </span>
           </td>
           <td>
-            <span class="set-inner">
+            <span>
               {{ item.set }}
             </span>
           </td>
           <td>
-            <span class="status-inner">
-              <span v-if="item.status === 'ok'" class="ok-button status-ok">
-                <span class="ok-button-label">OK</span>
-              </span>
-              <span v-else-if="item.status === 'broken'" class="broken-button">
-                <span class="broken-button-label">Broken</span>
-              </span>
-              <span v-else-if="item.status === 'error 23'" class="error-button">
-                <span class="error-button-label">Error 23</span>
-              </span>
-              <span v-else-if="item.status === 'error 12'" class="error-button">
-                <span class="error-button-label">Error 12</span>
-              </span>
+            <span class="status-container">
               <span
-                v-else-if="item.status === 'warning 3'"
-                class="warning-button"
+                v-if="item.status === 'ok'"
+                class="status-buttons ok-button status-ok"
               >
-                <span class="warning-button-label">Warning 3</span>
+                <label>OK</label>
+              </span>
+            </span>
+            <span>
+              <span class="status-container">
+                <span
+                  v-if="item.status === 'broken'"
+                  class="status-buttons broken-button"
+                >
+                  <label>Broken</label>
+                </span>
+              </span>
+            </span>
+            <span
+              v-if="item.status === 'error 23'"
+              class="status-buttons error-button"
+            >
+              <label>Error 23</label>
+            </span>
+            <span
+              v-if="item.status === 'error 12'"
+              class="status-buttons error-button"
+            >
+              <label>Error 12</label>
+            </span>
+            <span class="status-container">
+              <span
+                v-if="item.status === 'warning 3'"
+                class="status-buttons warning-button"
+              >
+                <label>Warning 3</label>
               </span>
             </span>
           </td>
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/sotto-cofano/menu-sx/menu-sx.less b/Thermo.Active/wwwroot/src/app_modules_thermo/sotto-cofano/menu-sx/menu-sx.less
index 0fecd3ae..d4fe8200 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/sotto-cofano/menu-sx/menu-sx.less
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/sotto-cofano/menu-sx/menu-sx.less
@@ -1,10 +1,11 @@
 @import "../variable.less";
 
 .rettangle {
-  width: calc(~"100% - 72px");
   height: 72px;
-
-  background-color: @fill-under-grey-4-2;
+  background-color: @fill-under-grey-2-2;
+  box-sizing: border-box;
+  border: 1px solid @fill-under-grey-1-2;
+  cursor: pointer;
   display: flex;
   flex-flow: row;
   padding: 0 36px;
@@ -17,11 +18,13 @@
   &.white {
     color: @white;
     font-weight: bold;
+    background-color: @fill-under-grey-4-2;
+    border: none;
   }
 }
 
 .BG-fascia-sx {
-  width: 496px;
+  width: 495px;
   height: 886px;
   background-color: @fill-under-grey-1-2;
 }
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/sotto-cofano/menu-sx/menu-sx.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/sotto-cofano/menu-sx/menu-sx.vue
index 350d9a8c..04dd4708 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/sotto-cofano/menu-sx/menu-sx.vue
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/sotto-cofano/menu-sx/menu-sx.vue
@@ -5,7 +5,7 @@
 			@click="go('io')"
 			:class="{white: this.value == 'io'}"
 		>{{'i-o' | localize("I/O")}}</div>
-		<!-- <div
+		<div
 			class="rettangle"
 			@click="go('log-ciclo-automatico')"
 			:class="{white: this.value == 'log-ciclo-automatico'}"
@@ -15,16 +15,16 @@
 			@click="go('log-misurazioni')"
 			:class="{white: this.value == 'log-misurazioni'}"
 		>{{'log-misurazioni' | localize("Log misurazioni")}}</div>
-		<div
+		<!-- <div
 			class="rettangle"
 			@click="go('assi')"
 			:class="{white: this.value == 'assi'}"
-		>{{'log-assi' | localize('Log assi')}}</div>
+		>{{'log-assi' | localize('Log assi')}}</div>-->
 		<div
 			class="rettangle"
 			@click="go('riscaldi')"
 			:class="{white: this.value == 'riscaldi'}"
-		>{{'riscaldi' | localize("Riscaldi")}}</div>-->
+		>{{'riscaldi' | localize("Riscaldi")}}</div>
 	</div>
 </template>
 <style lang="less">
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/sotto-cofano/sotto-cofano.less b/Thermo.Active/wwwroot/src/app_modules_thermo/sotto-cofano/sotto-cofano.less
index 0f93e72b..0d75fcae 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/sotto-cofano/sotto-cofano.less
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/sotto-cofano/sotto-cofano.less
@@ -128,6 +128,27 @@
   grid-template-columns: repeat(auto-fill, minmax(600px, 1fr));
 }
 
+.column-page-one-column {
+  grid-row: 2;
+  grid-column: 2;
+  width: 1384px;
+  height: 885px;
+  border-top: @white 2px solid;
+  background-color: @fill-under-grey-2-2;
+  display: grid;
+  > table {
+    margin: 20px 0 0 20px;
+  }
+}
+
+.one-column-table-container {
+  height: 750px;
+  margin: 20px 0 0 20px;
+  > table {
+    width: -webkit-fill-available;
+  }
+}
+
 .pointer {
   cursor: pointer;
 }
diff --git a/Thermo.Active/wwwroot/src/modules/app-footer.ts b/Thermo.Active/wwwroot/src/modules/app-footer.ts
index eb7b1b8f..795d1dfb 100644
--- a/Thermo.Active/wwwroot/src/modules/app-footer.ts
+++ b/Thermo.Active/wwwroot/src/modules/app-footer.ts
@@ -39,14 +39,14 @@ export default class AppFooter extends Vue {
 
   openProgram(path: string) {
     this.$router.push(path);
-    //appModelActions.MainViewLiftDown(this.$store);
+    appModelActions.MainViewLiftDown(this.$store);
   }
 
   isInPath(value: string) {
     return this.$route.path.indexOf(value) >= 0;
   }
 
-  isInMainPage(){
+  isInMainPage() {
     return this.$route.path == "/";
   }
 
@@ -76,11 +76,11 @@ export default class AppFooter extends Vue {
 
   async runManual() {
     ModalHelper.AskConfirm(this.$options.filters.localize("modal_confirm_title", "Richiesta di conferma"),
-        this.$options.filters.localize("modal_confirm_mode_manual", "Confermi di voler passare alla modalità manuale?"),
-        () => {
-          prodService.Manual();
-        }, null, "modal");
-    
+      this.$options.filters.localize("modal_confirm_mode_manual", "Confermi di voler passare alla modalità manuale?"),
+      () => {
+        prodService.Manual();
+      }, null, "modal");
+
   }
 
   async runAuto() {
diff --git a/Thermo.Active/wwwroot/src/services/hub.ts b/Thermo.Active/wwwroot/src/services/hub.ts
index 707753f0..f4581892 100644
--- a/Thermo.Active/wwwroot/src/services/hub.ts
+++ b/Thermo.Active/wwwroot/src/services/hub.ts
@@ -29,6 +29,7 @@ import { recipeService } from "./recipeService";
 import { warmersActions, warmersStore } from "@/store/warmers.store";
 import { cmsConnectActions } from "@/store/cmsConnect.store";
 import { warmersService } from "./warmersService";
+import { underTheHoodActions } from "@/store/underTheHood.store";
 
 declare const PRODUCTION;
 
@@ -120,6 +121,7 @@ export class Hub {
     this._hub.client.prodCycleData = Hub.prodCycleData;
     this._hub.client.gaugeData = Hub.gaugeData;
     this._hub.client.axisInfo = Hub.axisInfoData;
+    this._hub.client.channelsIoVal = Hub.channelsIOUpdate;
 
 
 
@@ -160,6 +162,9 @@ export class Hub {
 
   }
 
+  public static channelsIOUpdate(data: server.channels) {
+    underTheHoodActions.UpdateIOChannels(store, data);
+  }
 
   public cmsConnectUpdateActivationData(authData) {
     cmsConnectActions.updateActivationData(store, authData);
@@ -195,7 +200,7 @@ export class Hub {
     recipeActions.setCurrent(store, data, true);
   }
 
-  public static warmersData(data){
+  public static warmersData(data) {
     warmersActions.setChannels(store, data as { [id: number]: Warmers.IChannel });
   }
 
diff --git a/Thermo.Active/wwwroot/src/store/underTheHood.store.ts b/Thermo.Active/wwwroot/src/store/underTheHood.store.ts
index 295ad04e..38a3a2be 100644
--- a/Thermo.Active/wwwroot/src/store/underTheHood.store.ts
+++ b/Thermo.Active/wwwroot/src/store/underTheHood.store.ts
@@ -4,12 +4,14 @@ import { CONFIGURATION } from "@/config";
 export interface UnderTheHoodStoreModel {
   ioChannels: server.channels;
   ioChannelsConfig: { [id: string]: number[] }
+  _channels: Map<string, Map<string | number, any>>
 }
 
 
 export interface UnderTheHoodActions {
   SetIOChannels(context, model: server.channels)
   SetIOChannelsConfig(context, model: { [id: string]: number[] })
+  UpdateIOChannels(context, model: server.channels)
 }
 
 export interface UnderTheHoodGetters {
@@ -20,6 +22,7 @@ export const underTheHoodStore = {
   state: {
     ioChannels: {},
     ioChannelsConfig: {},
+    _channels: new Map<string, Map<string | number, any>>()
   } as UnderTheHoodStoreModel,
 
   getters: {
@@ -29,10 +32,37 @@ export const underTheHoodStore = {
 
     SetIOChannels(state: UnderTheHoodStoreModel, model: server.channels) {
       state.ioChannels = model;
+
+      // reset maps for fast updating 
+      state._channels = new Map<string, Map<string | number, any>>()
+      for (const key in model) {
+        if (Object.prototype.hasOwnProperty.call(model, key)) {
+          const element = model[key];
+          state._channels.set(key, new Map<string | number, any>());
+
+          let g = state._channels.get(key);
+          for (const item of element) {
+            g.set(item.id, item);
+          }
+        }
+      }
     },
     SetIOChannelsConfig(state: UnderTheHoodStoreModel, model: { [id: string]: number[] }) {
       state.ioChannelsConfig = model;
     },
+    UpdateIOChannels(state: UnderTheHoodStoreModel, model: server.channels) {
+      for (const key in model) {
+
+        let g = state._channels.get(key);
+
+        const values = model[key];
+        for (const item of values) {
+
+          let v = g.get(item.id);
+          Object.assign(v, item);
+        }
+      }
+    }
   },
 
   actions: {
@@ -43,6 +73,9 @@ export const underTheHoodStore = {
     async SetIOChannelsConfig(context, model: { [id: string]: number[] }) {
       context.commit("SetIOChannelsConfig", model);
     },
+    async UpdateIOChannels(context, model: server.channels) {
+      context.commit("UpdateIOChannels", model);
+    }
   } as UnderTheHoodActions
 
 }