diff --git a/Thermo.Active/wwwroot/assets/styles/base/dashboard.less b/Thermo.Active/wwwroot/assets/styles/base/dashboard.less
index 2f06f8a9..e1eb9b40 100644
--- a/Thermo.Active/wwwroot/assets/styles/base/dashboard.less
+++ b/Thermo.Active/wwwroot/assets/styles/base/dashboard.less
@@ -17,29 +17,36 @@
         section{
             display: flex;
             justify-content: flex-end;
+            padding-right: 15px;
+            padding-bottom: 50px;
 
             .specific{
                 display: flex;
                 flex-direction: column;
+                justify-content: flex-end;
 
                 div{
                     display: flex;
                 }
 
+                //inizio sezione style del primo specific
                 &:first-of-type{
+                    //mettere qui margin
+                    margin-right: 15%;
 
                     div{
 
                         &:first-of-type{
 
                             img{
+                                flex-shrink: 0;
                                 width: 41px;
                                 height: 41px;
                                 object-fit: contain;
                             }
 
                             label{
-                           
+                                flex-shrink: 0;
                                 font-size: 54px;
                                 font-weight: normal;
                                 font-stretch: normal;
@@ -53,8 +60,10 @@
                         }
 
                         &:last-of-type{
+                            margin: unset;
 
                             button{
+                                flex-shrink: 0;
                                 width: 65px;
                                 height: 65px;
                                 box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.5);
@@ -67,6 +76,7 @@
                             }
 
                             label{
+                                flex-shrink: 0;
 
                                 &:first-of-type{
                             
@@ -100,7 +110,9 @@
 
                 }
 
+                //inizio sezione style del secondo specific
                 label{
+                    flex-shrink: 0;
 
                     &:first-of-type{
                    
@@ -128,14 +140,18 @@
 
                 }
 
+                //inizio sezione style del terzo specific
                 &:last-of-type{
+                    //mettere qui margin
+                    margin-left: 15%;
 
                     div{
                         width: 542px;
                         height: 71px;
                         background-color: rgba(0, 0, 0, 0.5);
+                    }
 
-                        &:first-of-type{
+                        .actual{
                             background-color: unset;
                             width: unset;
                             height: unset;
@@ -144,11 +160,12 @@
                                 background-color: unset;
                                 width: unset;
                                 height: unset;
+                                margin: unset;
 
                                 label{
+                                    flex-shrink: 0;
 
                                     &:first-of-type{
-                                  
                                         font-size: 26px;
                                         font-weight: 500;
                                         font-stretch: normal;
@@ -160,7 +177,6 @@
                                     }
 
                                     &:last-of-type{
-                                
                                         font-size: 120px;
                                         font-weight: 300;
                                         font-stretch: normal;
@@ -177,29 +193,42 @@
 
                         }
 
-                        &:last-of-type{
-                            width: 641px;
-                            height: 84px;
-                        }
-
-                    }
-
-                    
                     aside{
                         width: 641px;
                         height: 310px;
+                        overflow-x: hidden;
 
                         .component{
                             width: 621px;
+                            height: 77px;
                         }
 
                     }
 
                     .component{
+                        width: 641px;
+                        height: 84px;
                         background-color: #e8e8e8;
+                        flex-direction: column;
+                        justify-content: flex-end;
 
+                        div{
+                            margin:auto;
+                            padding: 0px 15px;
+                            width: unset;
+                            height: unset;
+                            background-color: unset; 
+                        }
+
+                        span{
+                            flex-shrink: 0;
+                            width: 100%;
+                            height: 1px;
+                            background-color: #676767;
+                        }
+                    
                         label{
-                        
+                            flex-shrink: 0;
                             font-size: 54px;
                             font-weight: 500;
                             font-stretch: normal;
@@ -214,11 +243,12 @@
                             height: unset;
                             width: unset;
                             background-color: unset;
+                            margin: unset;
 
                             label{
+                                flex-shrink: 0;
 
                                 &:first-of-type{
-                           
                                     font-size: 12px;
                                     font-weight: 500;
                                     font-stretch: normal;
@@ -230,7 +260,6 @@
                                 }
 
                                 &:last-of-type{
-                                
                                     font-size: 25px;
                                     font-weight: 500;
                                     font-stretch: normal;
diff --git a/Thermo.Active/wwwroot/assets/styles/style.css b/Thermo.Active/wwwroot/assets/styles/style.css
index 1928cec1..4a67fdf5 100644
--- a/Thermo.Active/wwwroot/assets/styles/style.css
+++ b/Thermo.Active/wwwroot/assets/styles/style.css
@@ -4048,20 +4048,28 @@
 .dashboard section {
   display: flex;
   justify-content: flex-end;
+  padding-right: 15px;
+  padding-bottom: 50px;
 }
 .dashboard section .specific {
   display: flex;
   flex-direction: column;
+  justify-content: flex-end;
 }
 .dashboard section .specific div {
   display: flex;
 }
+.dashboard section .specific:first-of-type {
+  margin-right: 15%;
+}
 .dashboard section .specific:first-of-type div:first-of-type img {
+  flex-shrink: 0;
   width: 41px;
   height: 41px;
   object-fit: contain;
 }
 .dashboard section .specific:first-of-type div:first-of-type label {
+  flex-shrink: 0;
   font-size: 54px;
   font-weight: normal;
   font-stretch: normal;
@@ -4071,7 +4079,11 @@
   text-align: right;
   color: #4b4b4b;
 }
+.dashboard section .specific:first-of-type div:last-of-type {
+  margin: unset;
+}
 .dashboard section .specific:first-of-type div:last-of-type button {
+  flex-shrink: 0;
   width: 65px;
   height: 65px;
   box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.5);
@@ -4082,6 +4094,9 @@
   font-size: 50px;
   text-align: center;
 }
+.dashboard section .specific:first-of-type div:last-of-type label {
+  flex-shrink: 0;
+}
 .dashboard section .specific:first-of-type div:last-of-type label:first-of-type {
   font-size: 12px;
   font-weight: 500;
@@ -4102,6 +4117,9 @@
   text-align: center;
   color: #4b4b4b;
 }
+.dashboard section .specific label {
+  flex-shrink: 0;
+}
 .dashboard section .specific label:first-of-type {
   font-size: 26px;
   font-weight: 500;
@@ -4122,22 +4140,29 @@
   text-align: center;
   color: #4b4b4b;
 }
+.dashboard section .specific:last-of-type {
+  margin-left: 15%;
+}
 .dashboard section .specific:last-of-type div {
   width: 542px;
   height: 71px;
   background-color: rgba(0, 0, 0, 0.5);
 }
-.dashboard section .specific:last-of-type div:first-of-type {
+.dashboard section .specific:last-of-type .actual {
   background-color: unset;
   width: unset;
   height: unset;
 }
-.dashboard section .specific:last-of-type div:first-of-type .specific {
+.dashboard section .specific:last-of-type .actual .specific {
   background-color: unset;
   width: unset;
   height: unset;
+  margin: unset;
 }
-.dashboard section .specific:last-of-type div:first-of-type .specific label:first-of-type {
+.dashboard section .specific:last-of-type .actual .specific label {
+  flex-shrink: 0;
+}
+.dashboard section .specific:last-of-type .actual .specific label:first-of-type {
   font-size: 26px;
   font-weight: 500;
   font-stretch: normal;
@@ -4147,7 +4172,7 @@
   text-align: center;
   color: #4b4b4b;
 }
-.dashboard section .specific:last-of-type div:first-of-type .specific label:last-of-type {
+.dashboard section .specific:last-of-type .actual .specific label:last-of-type {
   font-size: 120px;
   font-weight: 300;
   font-stretch: normal;
@@ -4157,21 +4182,37 @@
   text-align: center;
   color: #4b4b4b;
 }
-.dashboard section .specific:last-of-type div:last-of-type {
-  width: 641px;
-  height: 84px;
-}
 .dashboard section .specific:last-of-type aside {
   width: 641px;
   height: 310px;
+  overflow-x: hidden;
 }
 .dashboard section .specific:last-of-type aside .component {
   width: 621px;
+  height: 77px;
 }
 .dashboard section .specific:last-of-type .component {
+  width: 641px;
+  height: 84px;
   background-color: #e8e8e8;
+  flex-direction: column;
+  justify-content: flex-end;
+}
+.dashboard section .specific:last-of-type .component div {
+  margin: auto;
+  padding: 0px 15px;
+  width: unset;
+  height: unset;
+  background-color: unset;
+}
+.dashboard section .specific:last-of-type .component span {
+  flex-shrink: 0;
+  width: 100%;
+  height: 1px;
+  background-color: #676767;
 }
 .dashboard section .specific:last-of-type .component label {
+  flex-shrink: 0;
   font-size: 54px;
   font-weight: 500;
   font-stretch: normal;
@@ -4185,6 +4226,10 @@
   height: unset;
   width: unset;
   background-color: unset;
+  margin: unset;
+}
+.dashboard section .specific:last-of-type .component .specific label {
+  flex-shrink: 0;
 }
 .dashboard section .specific:last-of-type .component .specific label:first-of-type {
   font-size: 12px;
diff --git a/Thermo.Active/wwwroot/package-lock.json b/Thermo.Active/wwwroot/package-lock.json
index d1cff7d8..7555c3aa 100644
--- a/Thermo.Active/wwwroot/package-lock.json
+++ b/Thermo.Active/wwwroot/package-lock.json
@@ -15816,6 +15816,11 @@
                 "has-flag": "^3.0.0"
             }
         },
+        "svg-gauge": {
+            "version": "1.0.6",
+            "resolved": "https://registry.npmjs.org/svg-gauge/-/svg-gauge-1.0.6.tgz",
+            "integrity": "sha512-gRkznVhtS18eOM/GMPDXAvrLZOpqzNVDg4bFAPAEjiDKd1tZHFIe8Bwt3G6TFg/H+pFboetPPI+zoV+bOL26QQ=="
+        },
         "svg-tags": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/svg-tags/-/svg-tags-1.0.0.tgz",
diff --git a/Thermo.Active/wwwroot/package.json b/Thermo.Active/wwwroot/package.json
index f0bb4d3a..d6f02da1 100644
--- a/Thermo.Active/wwwroot/package.json
+++ b/Thermo.Active/wwwroot/package.json
@@ -31,7 +31,8 @@
         "vue-smooth-dnd": "0.8.1",
         "vue2-ace-editor": "0.0.15",
         "vue2-datepicker": "3.4.1",
-        "vuex": "3.1.3"
+        "vuex": "3.1.3",
+        "svg-gauge": "1.0.6"
     },
     "devDependencies": {
         "@babel/plugin-proposal-export-default-from": "7.8.3",
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/dashboard/base-components/componente.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/dashboard/base-components/componente.vue
index 67f05901..f0fad60c 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/dashboard/base-components/componente.vue
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/dashboard/base-components/componente.vue
@@ -1,5 +1,6 @@
 <template>
     <div class="component">
+        <div>
         <label>(num)</label>
         <div class="specific">
             <label>TEMPO RISCALDO</label>
@@ -13,6 +14,8 @@
             <label>TEMPO CICLO NETTO</label>
             <label>2'51''</label>
         </div>
+        </div>
+        <span></span>
     </div>
 </template>
 
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/dashboard/dashboard.ts b/Thermo.Active/wwwroot/src/app_modules_thermo/dashboard/dashboard.ts
index bd8b7a02..b07aa6ed 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/dashboard/dashboard.ts
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/dashboard/dashboard.ts
@@ -2,11 +2,13 @@ import Vue from 'vue';
 import Component from 'vue-class-component';
 import {Prop} from 'vue-property-decorator';
 import Componente from "./base-components/componente.vue";
+import Gauge from "svg-gauge";
 @Component({
     components:{
         componente:Componente
     }
 })
 export default class Dashboard extends Vue{
-
+    @Prop({ default: 9 })
+    components: number;
 }
\ 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
index 7ab93867..1bc0f713 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/dashboard/dashboard.vue
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/dashboard/dashboard.vue
@@ -20,7 +20,7 @@
                     <label>5:18:40</label>
                 </div>
                 <div class="specific">
-                    <div>
+                    <div class="actual">
                         <div class="specific">
                             <label>PEZZI/ORA</label>
                             <label>18,2</label>
@@ -30,20 +30,10 @@
                             <label>3'12''</label>
                         </div>
                     </div>
-                    <div></div>
+                    <div>GRAFICO</div>
                     <componente></componente>
                     <aside class="scrollable">
-                        <componente></componente>
-                        <componente></componente>
-                        <componente></componente>
-                        <componente></componente>
-                        <componente></componente>
-                        <componente></componente>
-                        <componente></componente>
-                        <componente></componente>
-                        <componente></componente>
-                        <componente></componente>
-                        <componente></componente>
+                        <componente v-for="iter in components" :key="iter"></componente>
                     </aside>
                 </div>
             </section>
diff --git a/Thermo.Active/wwwroot/src/components/app-ribbon.ts b/Thermo.Active/wwwroot/src/components/app-ribbon.ts
index e69de29b..e5883c48 100644
--- a/Thermo.Active/wwwroot/src/components/app-ribbon.ts
+++ b/Thermo.Active/wwwroot/src/components/app-ribbon.ts
@@ -0,0 +1,88 @@
+import Vue from 'vue';
+import {Prop,Watch} from 'vue-property-decorator';
+import { alarmsModelActions } from "src/store";
+import {  messageService } from "src/_base";
+import Component from 'vue-class-component';
+
+@Component({})
+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;
+  
+    @Watch('hasService')
+    hasServiceChanged(oldV,newV) {
+      this.serviceExpanded = !this.expanded;      
+    };
+
+    @Watch('opened')
+    openedChanged(){
+        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')
+    serviceOpenedChanged(){
+        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);
+        }
+    };
+  
+  
+      serviceExpanded:boolean= false;
+  
+    get opened() {
+
+      return this.$store.state.alarms.opened;
+    };
+
+    get serviceOpened() {
+
+      return this.$store.state.alarms.serviceOpened;
+    };
+
+    get 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/components/app-ribbon.vue b/Thermo.Active/wwwroot/src/components/app-ribbon.vue
index 4adab300..5e1487bd 100644
--- a/Thermo.Active/wwwroot/src/components/app-ribbon.vue
+++ b/Thermo.Active/wwwroot/src/components/app-ribbon.vue
@@ -20,84 +20,6 @@
   </div>
 </div>
 </template>
-<script>
-import { alarmsModelActions } from "src/store";
-import { Factory, MessageService, messageService } from "src/_base";
-
-export default {
-  props: {
-    showExpander: { default: false },
-    status: { default: null },
-    expanded: { default: false },
-    hasService: { default: false }
-  },
-  watch: {
-    hasService: function(oldV,newV) {
-      this.serviceExpanded = !this.expanded;      
-    },
-    opened:function(){
-        if(this.$store.state.alarms.opened || this.$store.state.alarms.serviceOpened)
-          messageService.publishToChannel("HMI-show-alarms");
-        else
-          messageService.publishToChannel("HMI-hide-alarms",300);
-
-    },
-    serviceOpened:function(){
-        if(this.$store.state.alarms.opened || this.$store.state.alarms.serviceOpened)
-          messageService.publishToChannel("HMI-show-alarms");
-        else
-          messageService.publishToChannel("HMI-hide-alarms",300);
-
-    }
-  },
-  methods: {
-    // 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);
-        }
-    }
-  },
-  data: function() {
-    return {
-      serviceExpanded: false
-    };
-  },
-  computed: {
-    opened: function() {
-
-      return this.$store.state.alarms.opened;
-    },
-    serviceOpened: function() {
-
-      return this.$store.state.alarms.serviceOpened;
-    },
-    mainExpanded: function() {
-      if (!this.hasService) return this.expanded;
-
-      return !this.serviceExpanded && this.expanded;
-    }
-  }
-};
+<script lang="ts" src="./app-ribbon.ts">
 </script>