diff --git a/Step/wwwroot/src/modules/nc-softkeys.vue b/Step/wwwroot/src/modules/nc-softkeys.vue
index 8d0c4317..13366581 100644
--- a/Step/wwwroot/src/modules/nc-softkeys.vue
+++ b/Step/wwwroot/src/modules/nc-softkeys.vue
@@ -1,42 +1,42 @@
 <template>
 <div id="nc-softkeys-container">
-  <div v-if="machineInfo.isFanuc ">
-    <button @click="ncClick(1)" class="soft icon"><img src="assets/icons/under-hood-png/automatic-blue@2x.png">{{'nc_softkey_auto' |localize("Auto") }}</button>
-    <button @click="ncClick(2)" class="soft icon"><img src="assets/icons/under-hood-png/edit-blue@2x.png">{{'nc_softkey_edit' |localize("Edit") }}</button>
-    <button @click="ncClick(3)" class="soft icon"><img src="assets/icons/under-hood-png/MDI-blue@2x.png">{{'nc_softkey_mdi' |localize("MDI") }}</button>
-    <button @click="ncClick(4)" class="soft icon"><img src="assets/icons/under-hood-png/dnc-blue@2x.png">{{'nc_softkey_dnc' |localize("DNC") }}</button>
-    <button @click="ncClick(9)" class="soft icon"><img src="assets/icons/under-hood-png/teach-blue@2x.png">{{'nc_softkey_teach' |localize("Teach") }}</button>
-    <button @click="ncClick(8)" class="soft icon"><img src="assets/icons/under-hood-png/restart-blue@2x.png">{{'nc_softkey_restart' |localize("Restart") }}</button>
-    <button @click="ncClick(5)" class="soft icon"><img src="assets/icons/under-hood-png/ref-blue@2x.png">{{'nc_softkey_ref' |localize("Ref") }}</button>
-    <button @click="ncClick(6)" class="soft icon"><img src="assets/icons/under-hood-png/jog-blue@2x.png">{{'nc_softkey_jog' |localize("Jog") }}</button>
-    <button @click="ncClick(7)" class="soft icon"><img src="assets/icons/under-hood-png/jog-inc-blue@2x.png">{{'nc_softkey_joginc' |localize("Jog Inc") }}</button>
-    <button @click="ncClick(13)" class="soft icon"><img src="assets/icons/under-hood-png/reset-blue@2x.png">{{'nc_softkey_reset' |localize("Reset") }}</button>
-    <button @click="ncClick(10)" class="soft icon"><img src="assets/icons/under-hood-png/retract-blue@2x.png">{{'nc_softkey_retract' |localize("Retract") }}</button>
-    <button @click="ncClick(12)" class="soft icon"><img src="assets/icons/under-hood-png/handle-blue@2x.png">{{'nc_softkey_handle' |localize("Handle") }}</button>
+  <div v-if="machineInfo.isFanuc || isDemo ">
+    <button @click="ncClick(1)" :disabled="!isKeyActive(1)" :class="{active:isKeySelected(1)}" class="soft icon"><img src="assets/icons/under-hood-png/automatic-blue@2x.png">{{'nc_softkey_auto' |localize("Auto") }}</button>
+    <button @click="ncClick(2)" :disabled="!isKeyActive(2)" :class="{active:isKeySelected(2)}" class="soft icon"><img src="assets/icons/under-hood-png/edit-blue@2x.png">{{'nc_softkey_edit' |localize("Edit") }}</button>
+    <button @click="ncClick(3)" :disabled="!isKeyActive(3)" :class="{active:isKeySelected(3)}" class="soft icon"><img src="assets/icons/under-hood-png/MDI-blue@2x.png">{{'nc_softkey_mdi' |localize("MDI") }}</button>
+    <button @click="ncClick(4)" :disabled="!isKeyActive(4)" :class="{active:isKeySelected(4)}" class="soft icon"><img src="assets/icons/under-hood-png/dnc-blue@2x.png">{{'nc_softkey_dnc' |localize("DNC") }}</button>
+    <button @click="ncClick(9)" :disabled="!isKeyActive(9)" :class="{active:isKeySelected(9)}" class="soft icon"><img src="assets/icons/under-hood-png/teach-blue@2x.png">{{'nc_softkey_teach' |localize("Teach") }}</button>
+    <button @click="ncClick(8)" :disabled="!isKeyActive(8)" :class="{active:isKeySelected(8)}" class="soft icon"><img src="assets/icons/under-hood-png/restart-blue@2x.png">{{'nc_softkey_restart' |localize("Restart") }}</button>
+    <button @click="ncClick(5)" :disabled="!isKeyActive(5)" :class="{active:isKeySelected(5)}" class="soft icon"><img src="assets/icons/under-hood-png/ref-blue@2x.png">{{'nc_softkey_ref' |localize("Ref") }}</button>
+    <button @click="ncClick(6)" :disabled="!isKeyActive(6)" :class="{active:isKeySelected(6)}" class="soft icon"><img src="assets/icons/under-hood-png/jog-blue@2x.png">{{'nc_softkey_jog' |localize("Jog") }}</button>
+    <button @click="ncClick(7)" :disabled="!isKeyActive(7)" :class="{active:isKeySelected(7)}" class="soft icon"><img src="assets/icons/under-hood-png/jog-inc-blue@2x.png">{{'nc_softkey_joginc' |localize("Jog Inc") }}</button>
+    <button @click="ncClick(13)" :disabled="!isKeyActive(13)" :class="{active:isKeySelected(13)}" class="soft icon"><img src="assets/icons/under-hood-png/reset-blue@2x.png">{{'nc_softkey_reset' |localize("Reset") }}</button>
+    <button @click="ncClick(10)" :disabled="!isKeyActive(10)" :class="{active:isKeySelected(10)}" class="soft icon"><img src="assets/icons/under-hood-png/retract-blue@2x.png">{{'nc_softkey_retract' |localize("Retract") }}</button>
+    <button @click="ncClick(12)" :disabled="!isKeyActive(12)" :class="{active:isKeySelected(12)}" class="soft icon"><img src="assets/icons/under-hood-png/handle-blue@2x.png">{{'nc_softkey_handle' |localize("Handle") }}</button>
   </div>
-  <div v-if="machineInfo.isSiemens ">
-    <button @click="ncClick(1)" class="soft icon"><img src="assets/icons/under-hood-png/automatic-blue@2x.png">{{'nc_softkey_auto' |localize("Auto") }}</button>
-    <button @click="ncClick(3)" class="soft icon"><img src="assets/icons/under-hood-png/MDI-blue@2x.png">{{'nc_softkey_mdi' |localize("MDI") }}</button>
+  <div v-if="machineInfo.isSiemens">
+    <button @click="ncClick(1)" :disabled="!isKeyActive(1)" :class="{active:isKeySelected(1)}" class="soft icon"><img src="assets/icons/under-hood-png/automatic-blue@2x.png">{{'nc_softkey_auto' |localize("Auto") }}</button>
+    <button @click="ncClick(3)" :disabled="!isKeyActive(3)" :class="{active:isKeySelected(3)}" class="soft icon"><img src="assets/icons/under-hood-png/MDI-blue@2x.png">{{'nc_softkey_mdi' |localize("MDI") }}</button>
     <div class="empty-space"></div>
-    <button @click="ncClick(11)" class="soft icon"><img src="assets/icons/under-hood-png/wcsmcs-blue@2x.png">{{'nc_softkey_wcsmcs' |localize("WcsMcs") }}</button>
-    <button @click="ncClick(9)" class="soft icon"><img src="assets/icons/under-hood-png/teach-blue@2x.png">{{'nc_softkey_teach' |localize("Teach") }}</button>
+    <button @click="ncClick(11)" :disabled="!isKeyActive(11)" :class="{active:isKeySelected(11)}"  class="soft icon"><img src="assets/icons/under-hood-png/wcsmcs-blue@2x.png">{{'nc_softkey_wcsmcs' |localize("WcsMcs") }}</button>
+    <button @click="ncClick(9)" :disabled="!isKeyActive(9)" :class="{active:isKeySelected(9)}"  class="soft icon"><img src="assets/icons/under-hood-png/teach-blue@2x.png">{{'nc_softkey_teach' |localize("Teach") }}</button>
     <div class="empty-space"></div>
-    <button @click="ncClick(5)" class="soft icon"><img src="assets/icons/under-hood-png/ref-blue@2x.png">{{'nc_softkey_ref' |localize("Ref") }}</button>
-    <button @click="ncClick(6)" class="soft icon"><img src="assets/icons/under-hood-png/jog-blue@2x.png">{{'nc_softkey_jog' |localize("Jog") }}</button>
-    <button @click="ncClick(7)" class="soft icon"><img src="assets/icons/under-hood-png/jog-inc-blue@2x.png">{{'nc_softkey_joginc' |localize("Jog Inc") }}</button>
-    <button @click="ncClick(13)" class="soft icon"><img src="assets/icons/under-hood-png/reset-blue@2x.png">{{'nc_softkey_reset' |localize("Reset") }}</button>
-    <button @click="ncClick(10)" class="soft icon"><img src="assets/icons/under-hood-png/repos-blue@2x.png">{{'nc_softkey_repos' |localize("Repos") }}</button>
-    <button @click="ncClick(12)" class="soft icon"><img src="assets/icons/under-hood-png/handle-blue@2x.png">{{'nc_softkey_handle' |localize("Handle") }}</button>
+    <button @click="ncClick(5)" :disabled="!isKeyActive(5)" :class="{active:isKeySelected(5)}" class="soft icon"><img src="assets/icons/under-hood-png/ref-blue@2x.png">{{'nc_softkey_ref' |localize("Ref") }}</button>
+    <button @click="ncClick(6)" :disabled="!isKeyActive(6)" :class="{active:isKeySelected(6)}" class="soft icon"><img src="assets/icons/under-hood-png/jog-blue@2x.png">{{'nc_softkey_jog' |localize("Jog") }}</button>
+    <button @click="ncClick(7)" :disabled="!isKeyActive(7)" :class="{active:isKeySelected(7)}" class="soft icon"><img src="assets/icons/under-hood-png/jog-inc-blue@2x.png">{{'nc_softkey_joginc' |localize("Jog Inc") }}</button>
+    <button @click="ncClick(13)" :disabled="!isKeyActive(13)" :class="{active:isKeySelected(13)}" class="soft icon"><img src="assets/icons/under-hood-png/reset-blue@2x.png">{{'nc_softkey_reset' |localize("Reset") }}</button>
+    <button @click="ncClick(10)" :disabled="!isKeyActive(10)" :class="{active:isKeySelected(10)}" class="soft icon"><img src="assets/icons/under-hood-png/repos-blue@2x.png">{{'nc_softkey_repos' |localize("Repos") }}</button>
+    <button @click="ncClick(12)" :disabled="!isKeyActive(12)" :class="{active:isKeySelected(12)}" class="soft icon"><img src="assets/icons/under-hood-png/handle-blue@2x.png">{{'nc_softkey_handle' |localize("Handle") }}</button>
   </div>
-  <div v-if="machineInfo.isOsai || isDemo">
-    <button @click="ncClick(1)" class="soft icon"><img src="assets/icons/under-hood-png/automatic-blue@2x.png">{{'nc_softkey_auto' |localize("Auto") }}</button>
-    <button @click="ncClick(3)" class="soft icon"><img src="assets/icons/under-hood-png/MDI-blue@2x.png">{{'nc_softkey_mdi' |localize("MDI") }}</button>
+  <div v-if="machineInfo.isOsai">
+    <button @click="ncClick(1)" :disabled="!isKeyActive(1)" :class="{active:isKeySelected(1)}" class="soft icon"><img src="assets/icons/under-hood-png/automatic-blue@2x.png">{{'nc_softkey_auto' |localize("Auto") }}</button>
+    <button @click="ncClick(3)" :disabled="!isKeyActive(3)" :class="{active:isKeySelected(3)}" class="soft icon"><img src="assets/icons/under-hood-png/MDI-blue@2x.png">{{'nc_softkey_mdi' |localize("MDI") }}</button>
     <div class="empty-space"></div>
-    <button @click="ncClick(5)" class="soft icon"><img src="assets/icons/under-hood-png/ref-blue@2x.png">{{'nc_softkey_ref' |localize("Ref") }}</button>
-    <button @click="ncClick(6)" class="soft icon"><img src="assets/icons/under-hood-png/jog-blue@2x.png">{{'nc_softkey_jog' |localize("Jog") }}</button>
-    <button @click="ncClick(7)" class="soft icon"><img src="assets/icons/under-hood-png/jog-inc-blue@2x.png">{{'nc_softkey_joginc' |localize("Jog Inc") }}</button>
-    <button @click="ncClick(13)" class="soft icon"><img src="assets/icons/under-hood-png/reset-blue@2x.png">{{'nc_softkey_reset' |localize("Reset") }}</button>
-    <button @click="ncClick(10)" class="soft icon"><img src="assets/icons/under-hood-png/retrpof-blue@2x.png">{{'nc_softkey_retrpof' |localize("Retrpof") }}</button>
+    <button @click="ncClick(5)" :disabled="!isKeyActive(5)" :class="{active:isKeySelected(5)}" class="soft icon"><img src="assets/icons/under-hood-png/ref-blue@2x.png">{{'nc_softkey_ref' |localize("Ref") }}</button>
+    <button @click="ncClick(6)" :disabled="!isKeyActive(6)" :class="{active:isKeySelected(6)}" class="soft icon"><img src="assets/icons/under-hood-png/jog-blue@2x.png">{{'nc_softkey_jog' |localize("Jog") }}</button>
+    <button @click="ncClick(7)" :disabled="!isKeyActive(7)" :class="{active:isKeySelected(7)}" class="soft icon"><img src="assets/icons/under-hood-png/jog-inc-blue@2x.png">{{'nc_softkey_joginc' |localize("Jog Inc") }}</button>
+    <button @click="ncClick(13)" :disabled="!isKeyActive(13)" :class="{active:isKeySelected(13)}" class="soft icon"><img src="assets/icons/under-hood-png/reset-blue@2x.png">{{'nc_softkey_reset' |localize("Reset") }}</button>
+    <button @click="ncClick(10)" :disabled="!isKeyActive(10)" :class="{active:isKeySelected(10)}" class="soft icon"><img src="assets/icons/under-hood-png/retrpof-blue@2x.png">{{'nc_softkey_retrpof' |localize("Retrpof") }}</button>
     <div class="empty-space"></div>
     <div class="empty-space"></div>
     <div class="empty-space"></div>
@@ -62,6 +62,14 @@ export default {
   }, methods:{
     ncClick(id){
       Hub.Current.ncSoftKeyClick(id);
+    },
+    isKeyActive(id){
+      let r= this.$store.getters.getNcSoftKeyInfo(id);
+      if(r) return r.isActive;
+      return false;
+    },
+    isKeySelected(id){
+      return false;
     }
   }
 };
diff --git a/Step/wwwroot/src/store/machineInfo.store.ts b/Step/wwwroot/src/store/machineInfo.store.ts
index 324b9f15..0918113a 100644
--- a/Step/wwwroot/src/store/machineInfo.store.ts
+++ b/Step/wwwroot/src/store/machineInfo.store.ts
@@ -55,7 +55,7 @@ export const machineInfoStore = {
 
     softKeys: {},
     ncSoftKeys: {},
-    heads:[],
+    heads: [],
 
     cmsServerVersion: null,
     cmsCoreVersion: null,
@@ -68,6 +68,18 @@ export const machineInfoStore = {
     clientDefaultLanguage: "en"
 
   } as MachineInfoModel,
+  getters: {
+    getNcSoftKeyInfo: state => id => {
+      for (const key in state.ncSoftKeys) {
+        if (state.ncSoftKeys.hasOwnProperty(key)) {
+          const element = state.ncSoftKeys[key];
+          if(element.id == id) return element;
+        }
+      }
+      return null;
+    }
+
+  },
   mutations: {
     UpdateMachineInfo(store, model: MachineInfoModel) {
       for (const key in model) {