diff --git a/Step.Model/Constants.cs b/Step.Model/Constants.cs
index b7224876..3206f32e 100644
--- a/Step.Model/Constants.cs
+++ b/Step.Model/Constants.cs
@@ -5,7 +5,7 @@ namespace Step.Model
 {
     public static class Constants
     {
-        public static bool IS_BETA = true; 
+        public static bool IS_BETA = true;   
         public static string NOT_FOUND_ALARM_MESSAGE = "Alarm_id_{0} : Message not found";
         public static string NOT_CONFIGURATED_ALARM_MESSAGE = "Alarm_id_{0} : Message not configurated";
 
diff --git a/Step/wwwroot/assets/styles/base/head.less b/Step/wwwroot/assets/styles/base/head.less
index d5e42a33..9bf7d009 100644
--- a/Step/wwwroot/assets/styles/base/head.less
+++ b/Step/wwwroot/assets/styles/base/head.less
@@ -117,6 +117,11 @@
         }
     }
 
+    .detailBoxOpened {
+        background-color: @color-clear-blue-30;
+
+    }
+
     .tool-box,
     .load-box,
     .abrasive,
@@ -189,100 +194,107 @@
         }
       }
   }
-  
-  .smooth-enter-active, .smooth-leave-active {
-    height:94px;
-    transition: height .5s;
-    overflow: hidden;
-  }
-  .smooth-enter-active-to {
-    height:94px;
-  }
-  
   .detail-box {
-    height:94px;
-    border-top: 2px solid #979797;
-    width: 100%;
+    background-color: white;
+    height: 104px;
+    width: 416px;
     display: flex;
+    position: absolute;
+    right: 154px;
     span {
+        width: 156px;
         font-size: 18px;
         line-height: 20px;
         font-weight: 600;
     }
   }
-  .smooth-enter, .smooth-leave-to {
-    height: 0;
-    transition: height .5s;
+  
+  .detailBoxTransition-enter-active, .detailBoxTransition-leave-active {
+    width: 416px;
+    transition: width .5s;
+    overflow: hidden;
   }
 
-  .row {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    width: 100%;
-    justify-content: space-between;
-    align-items: center;
-    flex:1;
-    span{
-        margin-left: 5px;
-    }
-    .number {
-        color: #4b4b4b;
-        width: 70px;
-        height: 25px;
-        border-radius: 2px;
-        display: flex;
-        justify-content: flex-end;
-        align-items: center;
-        margin-right: 8px;
-        color: #4b4b4b;
-        padding-right: 8px;
-        font-size: 20px;
-    }
+  .detailBoxTransition-enter-active-to {
+    width: 416px;
   }
-    
-  .row:nth-child(odd) .number {
-      background-color: @color-white4;
-    }
-
-    .row:nth-child(even) .number {
-      background-color: @color-clear-blue-30;
-    }
-
-  .column{
-    flex:1;
-    text-align: center;
-    width: 100%;
+  
+  .detailBoxTransition-enter, .detailBoxTransition-leave-to {
+    width: 0;
+    transition: width .5s;
   }
   
   .column-left {
     display: flex;
     flex-direction: column;
-    width: 70%;
+    width: 247px;
     border-right: 2px solid #979797;
+
+    .row {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        width: 247px;
+        justify-content: space-between;
+        align-items: center;
+        flex:1;
+
+        span{
+            margin-left: 5px;
+        }
+
+        .number {
+            color: #4b4b4b;
+            width: 70px;
+            height: 25px;
+            border-radius: 2px;
+            display: flex;
+            justify-content: flex-end;
+            align-items: center;
+            margin-right: 8px;
+            color: #4b4b4b;
+            padding-right: 8px;
+            font-size: 20px;
+        }
+    }
+    
+    .row:nth-child(odd) .number {
+      background-color: @color-white4;
+    }
+
+    .row:nth-child(even) .number {
+        background-color: @color-clear-blue-30;
+    }
   }
 
   .column-right {
     display: flex;
-    flex-direction: column;
-    width: 30%;
-  }
-  
-  .column-bottom-line {
-    display: flex;
-    flex-direction: column;
-    flex-basis: 100%;
-    flex: 1;
+    flex-direction: row;
+    width: 167px;
+    box-shadow: inset -7px 0 9px -7px rgba(0,0,0,0.5);
+    justify-content: center;
+    align-items: center;
+    
+    .column {
+        font-size: 45px;
+        flex:1;
+        text-align: center;
+        flex-direction: column;
+        width: 100%;
+
+        img {
+            opacity: 0.2;
+            width: 45px;
+            height: auto;
+        }
+
+        .iconActive {
+            opacity: 1;
+            color: #f1f1f1;
+        }
+    }
   }
 
-  .toolError{
-    background-image: linear-gradient(to bottom, #ff4d63, #a10518);
-    color: #f1f1f1;
-  }
-  .measured{
-    color: #f1f1f1;
-    background-image: linear-gradient(to bottom, #1791ff, #005e94);
-  }
 }
 
 .head-place-holder{
diff --git a/Step/wwwroot/assets/styles/style.css b/Step/wwwroot/assets/styles/style.css
index 775adfef..fca34264 100644
--- a/Step/wwwroot/assets/styles/style.css
+++ b/Step/wwwroot/assets/styles/style.css
@@ -6451,6 +6451,11 @@ footer .container button.big:before {
   font-size: 14px;
   line-height: 18px;
 }
+.head-spindle .detailBoxOpened,
+.head-production .detailBoxOpened,
+.head-awj .detailBoxOpened {
+  background-color: rgba(23, 145, 255, 0.3);
+}
 .head-spindle .tool-box,
 .head-production .tool-box,
 .head-awj .tool-box,
@@ -6603,64 +6608,75 @@ footer .container button.big:before {
   border-color: #fff !important;
   color: #fff;
 }
-.head-spindle .smooth-enter-active,
-.head-production .smooth-enter-active,
-.head-awj .smooth-enter-active,
-.head-spindle .smooth-leave-active,
-.head-production .smooth-leave-active,
-.head-awj .smooth-leave-active {
-  height: 94px;
-  transition: height .5s;
-  overflow: hidden;
-}
-.head-spindle .smooth-enter-active-to,
-.head-production .smooth-enter-active-to,
-.head-awj .smooth-enter-active-to {
-  height: 94px;
-}
 .head-spindle .detail-box,
 .head-production .detail-box,
 .head-awj .detail-box {
-  height: 94px;
-  border-top: 2px solid #979797;
-  width: 100%;
+  background-color: white;
+  height: 104px;
+  width: 416px;
   display: flex;
+  position: absolute;
+  right: 154px;
 }
 .head-spindle .detail-box span,
 .head-production .detail-box span,
 .head-awj .detail-box span {
+  width: 156px;
   font-size: 18px;
   line-height: 20px;
   font-weight: 600;
 }
-.head-spindle .smooth-enter,
-.head-production .smooth-enter,
-.head-awj .smooth-enter,
-.head-spindle .smooth-leave-to,
-.head-production .smooth-leave-to,
-.head-awj .smooth-leave-to {
-  height: 0;
-  transition: height .5s;
+.head-spindle .detailBoxTransition-enter-active,
+.head-production .detailBoxTransition-enter-active,
+.head-awj .detailBoxTransition-enter-active,
+.head-spindle .detailBoxTransition-leave-active,
+.head-production .detailBoxTransition-leave-active,
+.head-awj .detailBoxTransition-leave-active {
+  width: 416px;
+  transition: width .5s;
+  overflow: hidden;
 }
-.head-spindle .row,
-.head-production .row,
-.head-awj .row {
+.head-spindle .detailBoxTransition-enter-active-to,
+.head-production .detailBoxTransition-enter-active-to,
+.head-awj .detailBoxTransition-enter-active-to {
+  width: 416px;
+}
+.head-spindle .detailBoxTransition-enter,
+.head-production .detailBoxTransition-enter,
+.head-awj .detailBoxTransition-enter,
+.head-spindle .detailBoxTransition-leave-to,
+.head-production .detailBoxTransition-leave-to,
+.head-awj .detailBoxTransition-leave-to {
+  width: 0;
+  transition: width .5s;
+}
+.head-spindle .column-left,
+.head-production .column-left,
+.head-awj .column-left {
+  display: flex;
+  flex-direction: column;
+  width: 247px;
+  border-right: 2px solid #979797;
+}
+.head-spindle .column-left .row,
+.head-production .column-left .row,
+.head-awj .column-left .row {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
-  width: 100%;
+  width: 247px;
   justify-content: space-between;
   align-items: center;
   flex: 1;
 }
-.head-spindle .row span,
-.head-production .row span,
-.head-awj .row span {
+.head-spindle .column-left .row span,
+.head-production .column-left .row span,
+.head-awj .column-left .row span {
   margin-left: 5px;
 }
-.head-spindle .row .number,
-.head-production .row .number,
-.head-awj .row .number {
+.head-spindle .column-left .row .number,
+.head-production .column-left .row .number,
+.head-awj .column-left .row .number {
   width: 70px;
   height: 25px;
   border-radius: 2px;
@@ -6672,57 +6688,47 @@ footer .container button.big:before {
   padding-right: 8px;
   font-size: 20px;
 }
-.head-spindle .row:nth-child(odd) .number,
-.head-production .row:nth-child(odd) .number,
-.head-awj .row:nth-child(odd) .number {
+.head-spindle .column-left .row:nth-child(odd) .number,
+.head-production .column-left .row:nth-child(odd) .number,
+.head-awj .column-left .row:nth-child(odd) .number {
   background-color: #f3f3f3;
 }
-.head-spindle .row:nth-child(even) .number,
-.head-production .row:nth-child(even) .number,
-.head-awj .row:nth-child(even) .number {
+.head-spindle .column-left .row:nth-child(even) .number,
+.head-production .column-left .row:nth-child(even) .number,
+.head-awj .column-left .row:nth-child(even) .number {
   background-color: rgba(23, 145, 255, 0.3);
 }
-.head-spindle .column,
-.head-production .column,
-.head-awj .column {
-  flex: 1;
-  text-align: center;
-  width: 100%;
-}
-.head-spindle .column-left,
-.head-production .column-left,
-.head-awj .column-left {
-  display: flex;
-  flex-direction: column;
-  width: 70%;
-  border-right: 2px solid #979797;
-}
 .head-spindle .column-right,
 .head-production .column-right,
 .head-awj .column-right {
   display: flex;
-  flex-direction: column;
-  width: 30%;
+  flex-direction: row;
+  width: 167px;
+  box-shadow: inset -7px 0 9px -7px rgba(0, 0, 0, 0.5);
+  justify-content: center;
+  align-items: center;
 }
-.head-spindle .column-bottom-line,
-.head-production .column-bottom-line,
-.head-awj .column-bottom-line {
-  display: flex;
-  flex-direction: column;
-  flex-basis: 100%;
+.head-spindle .column-right .column,
+.head-production .column-right .column,
+.head-awj .column-right .column {
+  font-size: 45px;
   flex: 1;
+  text-align: center;
+  flex-direction: column;
+  width: 100%;
 }
-.head-spindle .toolError,
-.head-production .toolError,
-.head-awj .toolError {
-  background-image: linear-gradient(to bottom, #ff4d63, #a10518);
-  color: #f1f1f1;
+.head-spindle .column-right .column img,
+.head-production .column-right .column img,
+.head-awj .column-right .column img {
+  opacity: 0.2;
+  width: 45px;
+  height: auto;
 }
-.head-spindle .measured,
-.head-production .measured,
-.head-awj .measured {
+.head-spindle .column-right .column .iconActive,
+.head-production .column-right .column .iconActive,
+.head-awj .column-right .column .iconActive {
+  opacity: 1;
   color: #f1f1f1;
-  background-image: linear-gradient(to bottom, #1791ff, #005e94);
 }
 .head-place-holder {
   width: 240px;
diff --git a/Step/wwwroot/src/app_modules/production/components/head-production.vue b/Step/wwwroot/src/app_modules/production/components/head-production.vue
index 516d6722..ab6fa0a9 100644
--- a/Step/wwwroot/src/app_modules/production/components/head-production.vue
+++ b/Step/wwwroot/src/app_modules/production/components/head-production.vue
@@ -45,7 +45,7 @@
          <span>{{vacuum.toFixed(2)}}</span>
          <small>{{'head_label_bar' | localize("bar")}}</small>
     </div>
-    <div class="tool-box" @click="toggleDetail" v-if="type == 'SPINDLE'">
+    <div class="tool-box" @click="toggleDetail" :class="{detailBoxOpened: detailBox}" v-if="type == 'SPINDLE'">
       <label>{{'head_label_tool' | localize("Tool")}}</label>
       <span v-if="!isSiemens() || (isSiemens() && !toolMounted())">{{tool}}</span>
       <span v-if="!isSiemens() && tool">
@@ -56,7 +56,6 @@
       <span class="tool-duplo" v-if="isSiemens() && toolMounted()" :title="toolName">{{'tooling_tool_abbreviation' | localize('DP%d', toolDuplo)}}</span>
     </div>
     <div class="tool-box" v-if="type == 'WJ' ">
-      
     </div>
     <div class="tool-box" v-if="type == 'AWJ' " :class="{disabled:!abrasiveIsActive}"  :title="'heads_tooltip_abrasive' | localize('Actual Abrasive Quantity')">
         <label>{{'head_label_abrasive' | localize("Abrasive")}}</label>
@@ -64,7 +63,7 @@
         <small>{{'head_label_gmin' | localize("g/min")}}</small>
     </div>
     
-  <transition v-if="toolData" name="smooth">
+  <transition v-if="toolData" name="detailBoxTransition">
       <div class="detail-box" v-if="detailBox">
         <div class="column-left">
           <div class="row">
@@ -72,7 +71,7 @@
             <div class="number">{{toolData.residualLife}}</div>
           </div>
           <div class="row">
-            <span>{{'tooling_equipment_param_maxLoad' | localize("Max load")}}:</span>
+            <span>{{'tooling_family_param_maxLoad' | localize("Max load")}}:</span>
             <div class="number">{{toolData.maxLoad}}</div>
           </div>
           <div class="row">
@@ -81,9 +80,9 @@
           </div>
         </div>
         <div class="column-right">
-          <span class="row" :class="{toolError: toolData.disabled}">{{'tooling_equipment_param_disabled' | localize("Disabled")}}</span>
-          <span class="row" :class="{toolError: toolData.broken, measured: !toolData.broken}">{{'tooling_equipment_param_broken' | localize("Broken")}}</span>
-          <span class="row" :class="{measured: toolData.measured}">{{'tooling_equipment_param_measured' | localize("Measured")}}</span>
+          <div class="column"><img :class="{iconActive: toolData.measured}" src="assets/icons/Tools/ToolMeasured.png"/></div>
+          <div class="column"><img :class="{iconActive: toolData.broken}" src="assets/icons/Tools/ToolBroken.png"/></div>
+          <div class="column"><img :class="{iconActive: toolData.disabled}" src="assets/icons/Tools/ToolDisabled.png"/></div>
         </div>
       </div>
     </transition>