diff --git a/Step/wwwroot/assets/styles/base/card.less b/Step/wwwroot/assets/styles/base/card.less
index 3795f5d2..7b636e31 100644
--- a/Step/wwwroot/assets/styles/base/card.less
+++ b/Step/wwwroot/assets/styles/base/card.less
@@ -662,8 +662,8 @@
   }
 
   .card-production-cms{
-      width: 1008px;
-      height: 752px;
+      width: 1024px;
+      height: 768px;
       display: flex;
       background-color: @color-label-grey;
       flex-flow: row;
@@ -682,8 +682,8 @@
   }
 
   .card-queue-production{
-      width: 512px;
-      height: 752px;
+      width: 520px;
+      height: 768px;
       background-color: @color-background-white;
       display: flex;
       flex-flow: column;
@@ -785,8 +785,8 @@
   }
 
   .card-job-production{
-      width: 494px;
-      height: 752px;
+      width: 502px;
+      height: 768px;
       background-color: @color-background-white;
       .card-job-production-header{
         height: 63px;
diff --git a/Step/wwwroot/assets/styles/base/production.less b/Step/wwwroot/assets/styles/base/production.less
index 8aacec45..346be88b 100644
--- a/Step/wwwroot/assets/styles/base/production.less
+++ b/Step/wwwroot/assets/styles/base/production.less
@@ -16,7 +16,7 @@
             flex-flow: row;
             float: left;
             .list-tab-vertical{
-                width: 48px;
+                width: 40px;
                 height: 100%;
                 display: flex;
                 flex-flow: column;
@@ -44,8 +44,9 @@
                     align-items: center;
                     float: left;
                     margin-right: 8px;
+                    margin-left: 8px;
                     .box-header{
-                        width: 1040px;
+                        width: 1034px;
                         height: 67px;
                         display: flex;
                         flex-flow: row;
@@ -87,10 +88,12 @@
                         border: none;
                     }
                     .cms{
-                        width: 1024px;
-                        height: 768px;
+                        width: 1034px;
+                        height: 778px;
                         display: flex;
                         flex-flow: row;
+                        align-items: center;
+                        justify-content: center;
                         background-color: @color-label-grey;
                     }
                 }
@@ -192,19 +195,19 @@
 
 .process-selection-maintenance{
     position: absolute;
-    width: 48px;
+    width: 40px;
     height:100%;
-    z-index: 200;
+    z-index: 0;
     .process{
       font-size: 40px;
       color: @color-darkish-blue;
-      width: 40px;
+      width: 32px;
       height: 168px;
       margin-left: 8px;
       border-bottom-left-radius: 2px;
       border-top-left-radius: 2px;
       background-color: @color-background-white;
-    //   box-shadow: 0 1px 2px 0 @color-black-40;
+      box-shadow: 0 1px 2px 0 @color-black-40;
       box-sizing: border-box;
   
       display: flex;
@@ -215,7 +218,7 @@
       cursor: pointer;
   
       &.selected{
-        width: 48px;
+        width: 40px;
         height: 208px;
         margin:0;
         // box-shadow: 0 1px 2px 0 @color-black-40;
diff --git a/Step/wwwroot/assets/styles/style.css b/Step/wwwroot/assets/styles/style.css
index 5767ac00..c69fd431 100644
--- a/Step/wwwroot/assets/styles/style.css
+++ b/Step/wwwroot/assets/styles/style.css
@@ -3966,8 +3966,8 @@ footer .container button.big:before {
   font-size: 24px;
 }
 .card-production-cms {
-  width: 1008px;
-  height: 752px;
+  width: 1024px;
+  height: 768px;
   display: flex;
   background-color: #979797;
   flex-flow: row;
@@ -3985,8 +3985,8 @@ footer .container button.big:before {
   justify-content: flex-end;
 }
 .card-queue-production {
-  width: 512px;
-  height: 752px;
+  width: 520px;
+  height: 768px;
   background-color: #fff;
   display: flex;
   flex-flow: column;
@@ -4086,8 +4086,8 @@ footer .container button.big:before {
   font-size: 24px;
 }
 .card-job-production {
-  width: 494px;
-  height: 752px;
+  width: 502px;
+  height: 768px;
   background-color: #fff;
 }
 .card-job-production .card-job-production-header {
@@ -9714,7 +9714,7 @@ footer .container button.big:before {
   float: left;
 }
 .production-container .production-box .production-left-box .list-tab-vertical {
-  width: 48px;
+  width: 40px;
   height: 100%;
   display: flex;
   flex-flow: column;
@@ -9742,9 +9742,10 @@ footer .container button.big:before {
   align-items: center;
   float: left;
   margin-right: 8px;
+  margin-left: 8px;
 }
 .production-container .production-box .production-left-box .box-left .box-left-video .box-header {
-  width: 1040px;
+  width: 1034px;
   height: 67px;
   display: flex;
   flex-flow: row;
@@ -9785,10 +9786,12 @@ footer .container button.big:before {
   border: none;
 }
 .production-container .production-box .production-left-box .box-left .box-left-video .cms {
-  width: 1024px;
-  height: 768px;
+  width: 1034px;
+  height: 778px;
   display: flex;
   flex-flow: row;
+  align-items: center;
+  justify-content: center;
   background-color: #979797;
 }
 .production-container .production-box .production-left-box .box-left .settings {
@@ -9884,19 +9887,20 @@ footer .container button.big:before {
 }
 .process-selection-maintenance {
   position: absolute;
-  width: 48px;
+  width: 40px;
   height: 100%;
-  z-index: 200;
+  z-index: 0;
 }
 .process-selection-maintenance .process {
   font-size: 40px;
   color: #002680;
-  width: 40px;
+  width: 32px;
   height: 168px;
   margin-left: 8px;
   border-bottom-left-radius: 2px;
   border-top-left-radius: 2px;
   background-color: #fff;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
   box-sizing: border-box;
   display: flex;
   justify-content: center;
@@ -9905,7 +9909,7 @@ footer .container button.big:before {
   cursor: pointer;
 }
 .process-selection-maintenance .process.selected {
-  width: 48px;
+  width: 40px;
   height: 208px;
   margin: 0;
   border-bottom-left-radius: 2px;
diff --git a/Step/wwwroot/src/modules/axes-softkeys.vue b/Step/wwwroot/src/modules/axes-softkeys.vue
index 8a6c31c0..0cc1066b 100644
--- a/Step/wwwroot/src/modules/axes-softkeys.vue
+++ b/Step/wwwroot/src/modules/axes-softkeys.vue
@@ -19,6 +19,7 @@ export default {
 
   computed: {
     axes: function() {
+      console.log(this.$store.state.process.axes);
       return this.$store.state.process.axes;
     },
     emptySpaces: function() {
diff --git a/Step/wwwroot/src/modules/base-components/cards/card-axes-production.vue b/Step/wwwroot/src/modules/base-components/cards/card-axes-production.vue
index 2520c293..c46bd456 100644
--- a/Step/wwwroot/src/modules/base-components/cards/card-axes-production.vue
+++ b/Step/wwwroot/src/modules/base-components/cards/card-axes-production.vue
@@ -2,15 +2,15 @@
 <!-- <div class="test-container"> -->
   <div class="card-axes-production">
       <div class="first-box-axes">
-          <div class="axes">
+          <div class="axes" v-for="a in axes" :key="a.id">
               <div class="variable">
-                  X
+                  {{a.name}}
               </div>
               <div class="number">
                   {{numberX}}
               </div>
           </div>
-          <div class="axes">
+          <!-- <div class="axes">
               <div class="variable">
                   Y
               </div>
@@ -41,7 +41,7 @@
               <div class="number">
                   {{numberB}}
               </div>
-          </div>
+          </div> -->
       </div>
       <div class="second-box-axes">
           <div class="tabs">
@@ -50,7 +50,7 @@
               <button class="tab" :class="{'active': enableErr}" @click="selectTab('ERR')">ERR</button>
           </div>
           <div class="content-box" v-if="enableOm">
-                        <div class="axes">
+            <div class="axes">
               <div class="variable">
                   X
               </div>
@@ -103,6 +103,7 @@
 
 </template>
 <script>
+import { Hub } from "src/services/hub";
 export default {
     props:{
         numberX: {default: 0},
@@ -118,6 +119,11 @@ export default {
             enableErr: false
         }
     },
+    computed: {
+        axes: function() {
+            return this.$store.state.process.axes;
+        }
+    },
     methods:{
         selectTab(tab){
             if(tab == "OM"){
diff --git a/Step/wwwroot/src/modules/base-components/cards/card-job-production.vue b/Step/wwwroot/src/modules/base-components/cards/card-job-production.vue
index ebdd9e06..01fa29cb 100644
--- a/Step/wwwroot/src/modules/base-components/cards/card-job-production.vue
+++ b/Step/wwwroot/src/modules/base-components/cards/card-job-production.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="test-container">
+<!-- <div class="test-container"> -->
     <div class="card-job-production">        
         <div class="card-job-production-header">
             <div class="title">
@@ -37,7 +37,7 @@
             </div>
         </div>
     </div>
-</div>
+<!-- </div> -->
 </template>
 <script>
 export default {
diff --git a/Step/wwwroot/src/modules/base-components/cards/card-production-cms.vue b/Step/wwwroot/src/modules/base-components/cards/card-production-cms.vue
index d1d0007b..e71a847b 100644
--- a/Step/wwwroot/src/modules/base-components/cards/card-production-cms.vue
+++ b/Step/wwwroot/src/modules/base-components/cards/card-production-cms.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="test-container">
+<!-- <div class="test-container"> -->
     <div class="card-production-cms">
         <div class="card-production-cms-queue">
             <card-queue-production></card-queue-production>
@@ -8,7 +8,7 @@
             <card-job-production></card-job-production>
         </div>
     </div>
-</div>
+<!-- </div> -->
 </template>
 <script>
 import cardQueueProduction from "./card-queue-production.vue";