diff --git a/Step/wwwroot/assets/styles/base/card.less b/Step/wwwroot/assets/styles/base/card.less
index 46fda0d2..99fd91a9 100644
--- a/Step/wwwroot/assets/styles/base/card.less
+++ b/Step/wwwroot/assets/styles/base/card.less
@@ -129,15 +129,15 @@
   }
 }
 
-.skill-equipment{
-  width: 656px;
+.input-box{
+  width: 100%;
   height: 80px;
   border-radius: 2px;
   display: flex;
   flex-flow: row;
   background-color: @color-background-white;
   box-shadow: 0 1px 1px 0 @color-black-50;
-  .skill-equipment-title{
+  .title{
       font-size: 18px;
       line-height: 1.11;
       color: @color-greyish-brown;
@@ -146,7 +146,7 @@
       align-items: center;
       margin-left: 15px;
   }
-  .skill-equipment-control{
+  .control{
       height: 100%;
       display: flex;
       margin-right: 16px;
diff --git a/Step/wwwroot/assets/styles/base/tooling-equipment.less b/Step/wwwroot/assets/styles/base/tooling-equipment.less
index 0f08c5ba..e40bfd5c 100644
--- a/Step/wwwroot/assets/styles/base/tooling-equipment.less
+++ b/Step/wwwroot/assets/styles/base/tooling-equipment.less
@@ -134,24 +134,25 @@
                 .list-skill-equipment{
                     width: 99%;
                     height: calc(~'100% - 102px');
-                    display: flex;
-                    flex-wrap: wrap;
-                    align-items: center;
-                    justify-content: center;
+                    // display: flex;
+                    // flex-wrap: wrap;
+                    // align-items: center;
+                    // justify-content: center;
                     overflow-y: auto;
+                    // flex-flow: column;
                     .list-skill-equipment-category{
-                        display: flex;
-                        flex-flow: column;
+                        // display: flex;
+                        width:656px;
+                        margin: auto;
+                        // flex-flow: column;
                         .skill-equipment-category{
-                            display: flex;
-                            align-items: center;
-                            justify-content: center;
+                            text-align: center;
                             margin-top: 32px;
                             font-size: 18px;
                             line-height: 1.11;
                             color: @color-greyish-brown;
                         }
-                        div.skill-equipment{
+                        .input-box{
                             margin: 8px;
                         }
                     }
@@ -171,4 +172,4 @@
             }
         }
     }
-}
\ No newline at end of file
+}
diff --git a/Step/wwwroot/assets/styles/style.css b/Step/wwwroot/assets/styles/style.css
index d2472862..4cbe371f 100644
--- a/Step/wwwroot/assets/styles/style.css
+++ b/Step/wwwroot/assets/styles/style.css
@@ -2707,8 +2707,8 @@ footer .container button.big:before {
   width: 145px;
   margin-top: 11px;
 }
-.skill-equipment {
-  width: 656px;
+.input-box {
+  width: 100%;
   height: 80px;
   border-radius: 2px;
   display: flex;
@@ -2716,7 +2716,7 @@ footer .container button.big:before {
   background-color: #fff;
   box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.5);
 }
-.skill-equipment .skill-equipment-title {
+.input-box .title {
   font-size: 18px;
   line-height: 1.11;
   color: #4b4b4b;
@@ -2725,15 +2725,15 @@ footer .container button.big:before {
   align-items: center;
   margin-left: 15px;
 }
-.skill-equipment .skill-equipment-control {
+.input-box .control {
   height: 100%;
   display: flex;
   margin-right: 16px;
   align-items: center;
   margin-left: auto;
 }
-.skill-equipment .skill-equipment-control input,
-.skill-equipment .skill-equipment-control select {
+.input-box .control input,
+.input-box .control select {
   width: 304px;
   height: 48px;
   font-size: 18px;
@@ -3404,26 +3404,20 @@ footer .container button.big:before {
 .tooling-equipment-container .tooling-equipment-box .tooling-equipment-body .box-right .list-skill-equipment {
   width: 99%;
   height: calc(100% - 102px);
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: center;
   overflow-y: auto;
 }
 .tooling-equipment-container .tooling-equipment-box .tooling-equipment-body .box-right .list-skill-equipment .list-skill-equipment-category {
-  display: flex;
-  flex-flow: column;
+  width: 656px;
+  margin: auto;
 }
 .tooling-equipment-container .tooling-equipment-box .tooling-equipment-body .box-right .list-skill-equipment .list-skill-equipment-category .skill-equipment-category {
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  text-align: center;
   margin-top: 32px;
   font-size: 18px;
   line-height: 1.11;
   color: #4b4b4b;
 }
-.tooling-equipment-container .tooling-equipment-box .tooling-equipment-body .box-right .list-skill-equipment .list-skill-equipment-category div.skill-equipment {
+.tooling-equipment-container .tooling-equipment-box .tooling-equipment-body .box-right .list-skill-equipment .list-skill-equipment-category .input-box {
   margin: 8px;
 }
 .tooling-equipment-container .tooling-equipment-box .tooling-equipment-footer {
diff --git a/Step/wwwroot/src/components/tooling-equipment.vue b/Step/wwwroot/src/components/tooling-equipment.vue
index ee4baec3..18d4c41c 100644
--- a/Step/wwwroot/src/components/tooling-equipment.vue
+++ b/Step/wwwroot/src/components/tooling-equipment.vue
@@ -12,8 +12,8 @@
                     </div>
                     <div class="group-btn">
                         <input type="text">
-                        <button class="btn tooling-equipment-btn-search"><i class="fa fa-search"></i></button>
-                        <button class="btn tooling-equipment-btn-search"><i class="fa fa-filter"></i></button>
+                        <button class="btn square"><i class="fa fa-search"></i></button>
+                        <button class="btn square"><i class="fa fa-filter"></i></button>
                     </div>
                   </div>
                   <div class="list-vertical scrollable">
@@ -33,117 +33,117 @@
                   </div>
               </div>
               <!-- Siemens -->
-              <div class="box-right" v-if="false">
+              <div class="box-right" v-if="isSiemens() || isDemo()">
                   <button class="btn"><i class="fa fa-trash"></i></button>
                   <div class="box-right-label-header">Modifica di E13 utensile XYZ</div>
                   <div class="list-skill-equipment scrollable">
                     <div class="list-skill-equipment-category">
                         <div class="skill-equipment-category">Generali</div>
-                        <skillequipment title="Id" is-input-number-read-only="true"></skillequipment>
-                        <skillequipment title="Tipo Utensile" is-select="true"></skillequipment>
+                        <input-box title="Id" type="numeric" :read-only="true"></input-box>
+                        <input-box title="Tipo Utensile" is-select="true"></input-box>
                     </div>
                     <div class="list-skill-equipment-category">
                         <div class="skill-equipment-category">Famiglia</div>
-                        <skillequipment title="Nome" is-input-read-only="true"></skillequipment>
-                        <skillequipment title="Id Figlio" is-input-number-read-only="true"></skillequipment>
+                        <input-box title="Nome" is-input-read-only="true"></input-box>
+                        <input-box title="Id Figlio" is-input-number-read-only="true"></input-box>
                     </div>
                     <div class="list-skill-equipment-category">
                         <div class="skill-equipment-category">Stato</div>
-                        <skillequipment title="Ut. Attivato" is-toggle="true"></skillequipment>
-                        <skillequipment title="Ut. Inibito" is-toggle="true"></skillequipment>
-                        <skillequipment title="Ut. Misurato" is-toggle="true"></skillequipment>
-                        <skillequipment title="Ut. in Preali" is-toggle="true"></skillequipment>
-                        <skillequipment title="Ut. in CU" is-toggle="true"></skillequipment>
-                        <skillequipment title="Ut. Posto fisso" is-toggle="true"></skillequipment>
-                        <skillequipment title="Ut. in uso" is-toggle="true"></skillequipment>
+                        <input-box title="Ut. Attivato" is-toggle="true"></input-box>
+                        <input-box title="Ut. Inibito" is-toggle="true"></input-box>
+                        <input-box title="Ut. Misurato" is-toggle="true"></input-box>
+                        <input-box title="Ut. in Preali" is-toggle="true"></input-box>
+                        <input-box title="Ut. in CU" is-toggle="true"></input-box>
+                        <input-box title="Ut. Posto fisso" is-toggle="true"></input-box>
+                        <input-box title="Ut. in uso" is-toggle="true"></input-box>
                     </div>
                     <div class="list-skill-equipment-category">
                         <div class="skill-equipment-category">Testa</div>
-                        <skillequipment title="Rotazione" is-select="true"></skillequipment>
+                        <input-box title="Rotazione" is-select="true"></input-box>
                     </div>
                     <div class="list-skill-equipment-category">
                         <div class="skill-equipment-category"></div>
-                        <skillequipment title="Raffredd 1" is-toggle="true"></skillequipment>
-                        <skillequipment title="Raffredd 2" is-toggle="true"></skillequipment>
+                        <input-box title="Raffredd 1" is-toggle="true"></input-box>
+                        <input-box title="Raffredd 2" is-toggle="true"></input-box>
                     </div>
                     <div class="list-skill-equipment-category">
                         <div class="skill-equipment-category">Dimensione in magazzino</div>
-                        <skillequipment title="N. Manine Dx" is-toggle="true"></skillequipment>
-                        <skillequipment title="N. Manine Sx" is-toggle="true"></skillequipment>
+                        <input-box title="N. Manine Dx" is-toggle="true"></input-box>
+                        <input-box title="N. Manine Sx" is-toggle="true"></input-box>
                     </div>
                     <div class="list-skill-equipment-category">
                         <div class="skill-equipment-category">Generali</div>
-                        <skillequipment title="Id" is-input-number-read-only="true"></skillequipment>
+                        <input-box title="Id" is-input-number-read-only="true"></input-box>
                     </div>
                     <div class="list-skill-equipment-category">
                         <div class="skill-equipment-category">Geometria</div>
-                        <skillequipment title="Parameter 1..N" is-input-number="true"></skillequipment>
+                        <input-box title="Parameter 1..N" is-input-number="true"></input-box>
                     </div>
                     <div class="list-skill-equipment-category">
                         <div class="skill-equipment-category">Vita Ut.</div>
-                        <skillequipment title="Tipo Vita" is-select="true"></skillequipment>
-                        <skillequipment title="Vita residua" is-input-number="true"></skillequipment>
-                        <skillequipment title="Vita Nominale" is-input-number="true"></skillequipment>
-                        <skillequipment title="Vita Preallarme" is-input-number="true"></skillequipment>
+                        <input-box title="Tipo Vita" is-select="true"></input-box>
+                        <input-box title="Vita residua" is-input-number="true"></input-box>
+                        <input-box title="Vita Nominale" is-input-number="true"></input-box>
+                        <input-box title="Vita Preallarme" is-input-number="true"></input-box>
                     </div>
                   </div>
               </div>
               <!-- Osai - Fanuc -->
-              <div class="box-right" v-if="true">
+              <div class="box-right" v-if="isFanuc() || isOsai()">
                   <button class="btn"><i class="fa fa-trash"></i></button>
                   <div class="box-right-label-header">Modifica di E13 utensile XYZ</div>
                   <div class="list-skill-equipment scrollable">
                     <div class="list-skill-equipment-category">
                         <div class="skill-equipment-category">Generali</div>
-                        <skillequipment title="Id" is-input-number-read-only="true"></skillequipment>
-                        <skillequipment title="Tipo Utensile" is-select="true"></skillequipment>
-                        <skillequipment title="Ut. Disabilitato" is-toggle="true"></skillequipment>
-                        <skillequipment title="Ut. Rotto" is-toggle="true"></skillequipment>
-                        <skillequipment title="Ut. Misurato" is-toggle="true"></skillequipment>
+                        <input-box title="Id" is-input-number-read-only="true"></input-box>
+                        <input-box title="Tipo Utensile" is-select="true"></input-box>
+                        <input-box title="Ut. Disabilitato" is-toggle="true"></input-box>
+                        <input-box title="Ut. Rotto" is-toggle="true"></input-box>
+                        <input-box title="Ut. Misurato" is-toggle="true"></input-box>
                     </div>
                     <div class="list-skill-equipment-category">
                         <div class="skill-equipment-category">Famiglia</div>
-                        <skillequipment title="Id" is-input-number-read-only="true"></skillequipment>
-                        <skillequipment title="Descrizione" is-input="true"></skillequipment>
-                        <skillequipment title="Rotazione" is-select="true"></skillequipment>
-                        <skillequipment title="Tcp Associata" is-select="true"></skillequipment>
-                        <skillequipment title="Raffredd 1" is-toggle="true"></skillequipment>
-                        <skillequipment title="Raffredd 2" is-toggle="true"></skillequipment>
-                        <skillequipment title="Raffredd 3" is-toggle="true"></skillequipment>
-                        <skillequipment title="Raffredd 4" is-toggle="true"></skillequipment>
-                        <skillequipment title="Raffredd 5" is-toggle="true"></skillequipment>
-                        <skillequipment title="Raffredd 6" is-toggle="true"></skillequipment>
-                        <skillequipment title="Raffredd 7" is-toggle="true"></skillequipment>
-                        <skillequipment title="Raffredd 8" is-toggle="true"></skillequipment>
-                        <skillequipment title="Vita Nominale" is-input-number="true"></skillequipment>
-                        <skillequipment title="Delta Ravvivat" is-input-number="true"></skillequipment>
-                        <skillequipment title="Inverter Dataset" is-select="true"></skillequipment>
-                        <skillequipment title="Carico Min P.A." is-input-number="true"></skillequipment>
-                        <skillequipment title="Carico Max P.A." is-input-number="true"></skillequipment>
-                        <skillequipment title="Caric Min C Din" is-input-number="true"></skillequipment>
-                        <skillequipment title="Caric Max C Din" is-input-number="true"></skillequipment>
-                        <skillequipment title="N. Manine Dx" is-input-number="true"></skillequipment>
-                        <skillequipment title="N. Manine Sx" is-input-number="true"></skillequipment>
+                        <input-box title="Id" is-input-number-read-only="true"></input-box>
+                        <input-box title="Descrizione" is-input="true"></input-box>
+                        <input-box title="Rotazione" is-select="true"></input-box>
+                        <input-box title="Tcp Associata" is-select="true"></input-box>
+                        <input-box title="Raffredd 1" is-toggle="true"></input-box>
+                        <input-box title="Raffredd 2" is-toggle="true"></input-box>
+                        <input-box title="Raffredd 3" is-toggle="true"></input-box>
+                        <input-box title="Raffredd 4" is-toggle="true"></input-box>
+                        <input-box title="Raffredd 5" is-toggle="true"></input-box>
+                        <input-box title="Raffredd 6" is-toggle="true"></input-box>
+                        <input-box title="Raffredd 7" is-toggle="true"></input-box>
+                        <input-box title="Raffredd 8" is-toggle="true"></input-box>
+                        <input-box title="Vita Nominale" is-input-number="true"></input-box>
+                        <input-box title="Delta Ravvivat" is-input-number="true"></input-box>
+                        <input-box title="Inverter Dataset" is-select="true"></input-box>
+                        <input-box title="Carico Min P.A." is-input-number="true"></input-box>
+                        <input-box title="Carico Max P.A." is-input-number="true"></input-box>
+                        <input-box title="Caric Min C Din" is-input-number="true"></input-box>
+                        <input-box title="Caric Max C Din" is-input-number="true"></input-box>
+                        <input-box title="N. Manine Dx" is-input-number="true"></input-box>
+                        <input-box title="N. Manine Sx" is-input-number="true"></input-box>
                     </div>
                     <div class="list-skill-equipment-category">
                         <div class="skill-equipment-category">Geometria</div>
-                        <skillequipment title="Id Correttore" is-select="true"></skillequipment>
-                        <skillequipment title="Lunghezza" is-input-number="true"></skillequipment>
-                        <skillequipment title="Raggio" is-input-number="true"></skillequipment>
-                        <skillequipment title="Usura Lungh." is-input-number="true"></skillequipment>
-                        <skillequipment title="Usura Raggio" is-input-number="true"></skillequipment>
-                        <skillequipment title="Ravviv Residua" is-input-number="true"></skillequipment>
+                        <input-box title="Id Correttore" is-select="true"></input-box>
+                        <input-box title="Lunghezza" is-input-number="true"></input-box>
+                        <input-box title="Raggio" is-input-number="true"></input-box>
+                        <input-box title="Usura Lungh." is-input-number="true"></input-box>
+                        <input-box title="Usura Raggio" is-input-number="true"></input-box>
+                        <input-box title="Ravviv Residua" is-input-number="true"></input-box>
                     </div>
                     <div class="list-skill-equipment-category">
                         <div class="skill-equipment-category">Vita Ut.</div>
-                        <skillequipment title="Tipo Vita" is-select="true"></skillequipment>
-                        <skillequipment title="Vita residua" is-input-number="true"></skillequipment>
-                        <skillequipment title="Val Preallarme" is-input-number="true"></skillequipment>
+                        <input-box title="Tipo Vita" is-select="true"></input-box>
+                        <input-box title="Vita residua" is-input-number="true"></input-box>
+                        <input-box title="Val Preallarme" is-input-number="true"></input-box>
                     </div>
                     <div class="list-skill-equipment-category">
                         <div class="skill-equipment-category">Codolo</div>
-                        <skillequipment title="Tipo man rich" is-select="true"></skillequipment>
-                        <skillequipment title="Pastiglia" is-input-number="true"></skillequipment>
+                        <input-box title="Tipo man rich" is-select="true"></input-box>
+                        <input-box title="Pastiglia" is-input-number="true"></input-box>
                     </div>
                   </div>
               </div>
@@ -157,8 +157,8 @@
 </template>
 <script>
 import equipment from "src/modules/base-components/cards/equipment.vue";
-import skillequipment from "src/modules/base-components/cards/skill-equipment.vue";
+import inputBox from "src/modules/base-components/cards/input-box.vue";
 export default {
-  components:{equipment, skillequipment}
+  components:{equipment, inputBox}
 }
 </script>
diff --git a/Step/wwwroot/src/components/under-the-hood.vue b/Step/wwwroot/src/components/under-the-hood.vue
index 859232d8..d5d865fa 100644
--- a/Step/wwwroot/src/components/under-the-hood.vue
+++ b/Step/wwwroot/src/components/under-the-hood.vue
@@ -1,19 +1,19 @@
 <template>
   <div id="back-view">
     <header>
-      <span v-if="isSiemens">Siemens HMI</span>
-      <span v-if="isFanuc">Fanuc HMI</span>
-      <span v-if="isOsai">Osai HMI</span>
-      <span v-if="isDemo">Demo HMI</span>
+      <span v-if="isSiemens()">Siemens HMI</span>
+      <span v-if="isFanuc()">Fanuc HMI</span>
+      <span v-if="isOsai()">Osai HMI</span>
+      <span v-if="isDemo()">Demo HMI</span>
       <button class="close" @click="toggleMainView()">&times;</button>
     </header>
     <div class="hmi-container">
       <process-selection></process-selection>
       <div id="nc-hmi">
-        <img id="nc-hmi-img" src="assets/images/Siemens_Placeholder.jpg" v-if="isSiemens">
-        <img id="nc-hmi-img-fanuc" src="assets/images/Fanuc_Placeholder.jpg" v-if="isFanuc">
-        <img id="nc-hmi-img" src="assets/images/Osai_Placeholder.jpg" v-if="isOsai">
-        <img id="nc-hmi-img" src="assets/images/Demo_Placeholder.jpg" v-if="isDemo">
+        <img id="nc-hmi-img" src="assets/images/Siemens_Placeholder.jpg" v-if="isSiemens()">
+        <img id="nc-hmi-img-fanuc" src="assets/images/Fanuc_Placeholder.jpg" v-if="isFanuc()">
+        <img id="nc-hmi-img" src="assets/images/Osai_Placeholder.jpg" v-if="isOsai()">
+        <img id="nc-hmi-img" src="assets/images/Demo_Placeholder.jpg" v-if="isDemo()">
       </div >
       </div>
       <div class="keys-area">
@@ -47,22 +47,6 @@ export default {
     isMainViewLiftedUp: function() {
       return this.$store.state.isMainViewLiftedUp;
     },
-    isFanuc: function() {
-      return this.$store.state.machineInfo.isFanuc;
-    },
-    isSiemens: function() {
-      return this.$store.state.machineInfo.isSiemens;
-    },
-    isOsai: function() {
-      return this.$store.state.machineInfo.isOsai;
-    },
-    isDemo: function() {
-      return (
-        !this.$store.state.machineInfo.isOsai &&
-        !this.$store.state.machineInfo.isSiemens &&
-        !this.$store.state.machineInfo.isFanuc
-      );
-    },
     showJog: function() {
       let ref = this.$store.getters.getNcSoftKeyStatus(5);
       let jog = this.$store.getters.getNcSoftKeyStatus(6);
diff --git a/Step/wwwroot/src/modules/app-footer.ts b/Step/wwwroot/src/modules/app-footer.ts
index d0ee83a1..c4835276 100644
--- a/Step/wwwroot/src/modules/app-footer.ts
+++ b/Step/wwwroot/src/modules/app-footer.ts
@@ -38,19 +38,4 @@ export default class AppFooter extends Vue {
   isAreaVisible(areaname: string){
     return machineStatusActions.isAreaVisible(store, areaname);
   }
-
-  get isFanuc():boolean{
-    return this.$store.state.machineInfo.isFanuc;
-  }
-  get isSiemens():boolean{
-    return this.$store.state.machineInfo.isSiemens;
-  }
-  get isOsai():boolean{
-    return this.$store.state.machineInfo.isOsai;
-  }
-  get isDemo():boolean{
-    return !this.$store.state.machineInfo.isOsai &&
-           !this.$store.state.machineInfo.isSiemens &&
-           !this.$store.state.machineInfo.isFanuc;
-  }
 }
diff --git a/Step/wwwroot/src/modules/app-footer.vue b/Step/wwwroot/src/modules/app-footer.vue
index 3929c485..f1b2a05c 100644
--- a/Step/wwwroot/src/modules/app-footer.vue
+++ b/Step/wwwroot/src/modules/app-footer.vue
@@ -12,10 +12,10 @@
     </div>
     <div class="machine-area">
       <button class="under" @mouseup="toggleMainView()" :class="{'pressed':state.isMainViewLiftedUp}">
-        <img src="assets/icons/png/siemens-logo.png" v-if="isSiemens">
-        <img src="assets/icons/png/fanuc-logo.png" v-if="isFanuc">
-        <img src="assets/icons/png/osai-logo.png" v-if="isOsai">
-        <span v-if="isDemo" class="btn-demo">DEMO</span>
+        <img src="assets/icons/png/siemens-logo.png" v-if="isSiemens()">
+        <img src="assets/icons/png/fanuc-logo.png" v-if="isFanuc()">
+        <img src="assets/icons/png/osai-logo.png" v-if="isOsai()">
+        <span v-if="isDemo()" class="btn-demo">DEMO</span>
       </button>
     </div>
   </footer>
diff --git a/Step/wwwroot/src/modules/base-components/cards/input-box.vue b/Step/wwwroot/src/modules/base-components/cards/input-box.vue
new file mode 100644
index 00000000..67d7a9e4
--- /dev/null
+++ b/Step/wwwroot/src/modules/base-components/cards/input-box.vue
@@ -0,0 +1,52 @@
+<template>
+      <div class="input-box">
+          <div class="title">
+              {{title}}
+          </div>
+          <div class="control">
+              <input v-if="type=='text'" :readonly="readOnly">
+              <select class="arrow" v-if="type=='select'"></select>
+              <input v-if="type=='numeric'" v-model.number="number" type="number" :readonly="readOnly">
+              <div class="togglebutton" v-if="type=='toggle'">
+                <label>
+                  <input type="checkbox" :checked="ischecked" @click="toggleCheck()">
+                  <span class="toggle">{{checked ? onLabel : offLabel}}</span>
+                </label>
+              </div>
+          </div>
+      </div>
+</template>
+<script>
+export default {
+  props: {
+    title: { default: "" },
+
+    type: { default: "input" }, // text, select, numeric, toggle
+    readOnly: { default: false },
+
+    isInput: { default: false },
+    isSelect: { default: false },
+    isInputNumber: { default: false },
+    isInputReadOnly: { default: false },
+    isInputNumberReadOnly: { default: false },
+    isToggle: { default: false },
+
+    onLabel: { default: "SI" },
+    offLabel: { default: "NO" },
+    checked: { default: false, type: Boolean }
+  },
+  data: function() {
+    return {
+      ischecked: false
+    };
+  },
+  watch: {
+    checked: function(n, o) {
+      this.ischecked = n;
+    }
+  },
+  methods: {
+    toggleCheck() {}
+  }
+};
+</script>
diff --git a/Step/wwwroot/src/modules/base-components/cards/skill-equipment.vue b/Step/wwwroot/src/modules/base-components/cards/skill-equipment.vue
deleted file mode 100644
index 915b4c39..00000000
--- a/Step/wwwroot/src/modules/base-components/cards/skill-equipment.vue
+++ /dev/null
@@ -1,51 +0,0 @@
-<template>
-  <!-- <div class="test-container"> -->
-      <div class="skill-equipment">
-          <div class="skill-equipment-title">
-              {{title}}
-          </div>
-          <div class="skill-equipment-control">
-              <input v-if="isInput">
-              <input v-if="isInputReadOnly" readonly>
-              <select class="arrow" v-if="isSelect"></select>
-              <input v-if="isInputNumber" v-model.number="number" type="number">
-              <input v-if="isInputNumberReadOnly" v-model.number="number" type="number" readonly>
-              <div class="togglebutton" v-if="isToggle"><label>
-                <input type="checkbox" :checked="ischecked" @click="toggleCheck()">
-                <span class="toggle">{{checked ? onLabel : offLabel}}</span>
-              </label></div>
-          </div>
-      </div>
-  <!-- </div> -->
-</template>
-<script>
-export default {
-    props:{
-        title: {default: ""},
-        isInput: {default: false},
-        isSelect: {default: false},
-        isInputNumber: {default: false},
-        isInputReadOnly: {default: false},
-        isInputNumberReadOnly: {default:false},
-        isToggle: {default: false},
-        onLabel: { default: "SI" },
-        offLabel: { default: "NO" },
-        checked: { default: false, type: Boolean },
-    },
-    data: function() {
-        return {
-            ischecked: false
-        };
-    },
-    watch: {
-        checked: function(n, o) {
-            this.ischecked = n;
-        }
-    },
-    methods: {
-        toggleCheck() {
-
-        }
-    }
-}
-</script>
diff --git a/Step/wwwroot/src/modules/nc-softkeys.vue b/Step/wwwroot/src/modules/nc-softkeys.vue
index 0a0adedc..afeb60fb 100644
--- a/Step/wwwroot/src/modules/nc-softkeys.vue
+++ b/Step/wwwroot/src/modules/nc-softkeys.vue
@@ -1,6 +1,6 @@
 <template>
 <div id="nc-softkeys-container">
-  <div v-if="machineInfo.isFanuc">
+  <div v-if="isFanuc()">
     <button @click="ncClick(1)" :disabled="!isKeyActive(1)" :class="{active:isKeySelected(1) , readonly:isReadOnly(1)}" class="soft icon"><img src="assets/icons/under-hood-png/automatic-blue@2x.png">{{name(1)}}</button>
     <button @click="ncClick(2)" :disabled="!isKeyActive(2)" :class="{active:isKeySelected(2) , readonly:isReadOnly(2)}" class="soft icon"><img src="assets/icons/under-hood-png/edit-blue@2x.png">{{name(2)}}</button>
     <button @click="ncClick(3)" :disabled="!isKeyActive(3)" :class="{active:isKeySelected(3) , readonly:isReadOnly(3)}" class="soft icon"><img src="assets/icons/under-hood-png/MDI-blue@2x.png">{{name(3)}}</button>
@@ -14,7 +14,7 @@
     <button @click="ncClick(10)" :disabled="!isKeyActive(10)" :class="{active:isKeySelected(10) , readonly:isReadOnly(10)}" class="soft icon"><img src="assets/icons/under-hood-png/repos2.png">{{name(10)}}</button>
     <button @click="ncClick(12)" :disabled="!isKeyActive(12)" :class="{active:isKeySelected(12) , readonly:isReadOnly(12)}" class="soft icon"><img src="assets/icons/under-hood-png/handle2.png">{{name(12)}}</button>
   </div>
-  <div v-if="machineInfo.isSiemens ">
+  <div v-if="isSiemens() ">
     <button @click="ncClick(1)" :disabled="!isKeyActive(1)" :class="{active:isKeySelected(1) , readonly:isReadOnly(1)}" class="soft icon"><img src="assets/icons/under-hood-png/automatic-blue@2x.png">{{name(1)}}</button>
     <button @click="ncClick(3)" :disabled="!isKeyActive(3)" :class="{active:isKeySelected(3) , readonly:isReadOnly(3)}" class="soft icon"><img src="assets/icons/under-hood-png/MDI-blue@2x.png">{{name(3)}}</button>
     <div class="empty-space"></div>
@@ -28,7 +28,7 @@
     <button @click="ncClick(10)" :disabled="!isKeyActive(10)" :class="{active:isKeySelected(10) , readonly:isReadOnly(10)}" class="soft icon"><img src="assets/icons/under-hood-png/repos2.png">{{name(10)}}</button>
     <button @click="ncClick(12)" :disabled="!isKeyActive(12)" :class="{active:isKeySelected(12) , readonly:isReadOnly(12)}" class="soft icon"><img src="assets/icons/under-hood-png/handle2.png">{{name(12)}}</button>
   </div>
-  <div v-if="machineInfo.isOsai || isDemo" >
+  <div v-if="isOsai() || isDemo()" >
     <button @click="ncClick(1)" :disabled="!isKeyActive(1)" :class="{active:isKeySelected(1) , readonly:isReadOnly(1)}" class="soft icon"><img src="assets/icons/under-hood-png/automatic-blue@2x.png">{{name(1)}}</button>
     <button @click="ncClick(3)" :disabled="!isKeyActive(3)" :class="{active:isKeySelected(3) , readonly:isReadOnly(3)}" class="soft icon"><img src="assets/icons/under-hood-png/MDI-blue@2x.png">{{name(3)}}</button>
     <div class="empty-space"></div>
@@ -52,13 +52,6 @@ export default {
     machineInfo: function() {
       return this.$store.state.machineInfo;
     },
-    isDemo: function() {
-      return (
-        !this.$store.state.machineInfo.isSiemens &&
-        !this.$store.state.machineInfo.isFanuc &&
-        !this.$store.state.machineInfo.isOsai
-      );
-    }
   },
   methods: {
     ncClick(id) {