diff --git a/Step/wwwroot/src/components/depot.ts b/Step/wwwroot/src/components/depot.ts
index 3ae340c9..770b288c 100644
--- a/Step/wwwroot/src/components/depot.ts
+++ b/Step/wwwroot/src/components/depot.ts
@@ -166,13 +166,13 @@ export default class depot extends Vue {
   }
 
   public openInfoShank(item) {
-    InfoEquipment.enableModalShank = true;
-    InfoEquipment.currentShank = item;
+    ModalHelper.infoEquipmentModal.enableModalShank = true;
+    ModalHelper.infoEquipmentModal.currentShank = item;
     ModalHelper.ShowModal(InfoEquipment);
   }
   public openInfoEquipment(item) {
-    InfoEquipment.enableModalShank = false;
-    InfoEquipment.currentEquipment = item;
+    ModalHelper.infoEquipmentModal.enableModalShank = false;
+    ModalHelper.infoEquipmentModal.currentEquipment = item;
     ModalHelper.ShowModal(InfoEquipment);
   }
 
diff --git a/Step/wwwroot/src/components/info-equipment.ts b/Step/wwwroot/src/components/info-equipment.ts
index 76f46164..303549ae 100644
--- a/Step/wwwroot/src/components/info-equipment.ts
+++ b/Step/wwwroot/src/components/info-equipment.ts
@@ -6,7 +6,7 @@ import { Factory, MessageService, awaiter } from "src/_base";
 import { ToolingService } from "../services/toolingService";
 import { AppModel } from "src/store";
 
-@Component({ name: "infoEquipment", components: { modal: Modal } })
+@Component({ name: "InfoEquipment", components: { modal: Modal } })
 export default class InfoEquipment extends Vue {
     public title: string = "";
 
@@ -40,12 +40,13 @@ export default class InfoEquipment extends Vue {
         return Array.from(cat.values());
       }
 
-    public shankConfiguration: server.ShankConfiguration[] = null;
+    public get shankConfiguration(): server.ShankConfiguration[] {
+        return (this.$store.state as AppModel).tooling.shankConfiguration;
+    }
     public toolsConfiguration: server.ToolsConfiguration[] = null;
 
     async mounted(){
         await new ToolingService().GetToolsConfiguration();
-        this.shankConfiguration = (this.$store.state as AppModel).tooling.shankConfiguration;
         this.toolsConfiguration = (this.$store.state as AppModel).tooling.toolsConfiguration;
         if(InfoEquipment.enableModalShank){
             this.selectedTool = InfoEquipment.currentShank;
diff --git a/Step/wwwroot/src/components/info-equipment.vue b/Step/wwwroot/src/components/info-equipment.vue
index a5af5753..45935e7e 100644
--- a/Step/wwwroot/src/components/info-equipment.vue
+++ b/Step/wwwroot/src/components/info-equipment.vue
@@ -15,7 +15,7 @@
                       <tbody>
                           <div class="" v-for="c in categoriesShank" :key="c" v-if="enableModals">
                             <div class="info-equipment-category">{{'info-equipment_category_' + c | localize(c)}}</div>
-                            <tr v-for="s in shankConfiguration" :key="s.name" v-if="s.name != '' && s.category == c">
+                            <tr v-for="s in shankConfiguration" :key="s.name">
                                 <td class="columnleft"><span>{{s.name}}</span></td>
                                 <td class="columnright"><span>{{selectedTool[s.name]}}</span></td>
                             </tr>
@@ -34,4 +34,76 @@
       <!-- </section> -->
   </modal>
 </template>
-<script src="./info-equipment.ts" lang="ts"></script>
+<script>
+import Modal from "../modules/base-components/modal.vue";
+import { ModalHelper } from "../modules/base-components/ModalHelper.ts";
+import { store, AppModel } from "src/store";
+import { DepotService } from '../services/depotService';
+import { ToolingService } from "../services/toolingService";
+import { Factory, MessageService } from '../_base';
+
+export default {
+  name: "infoEquipment",
+  components: { modal: Modal },
+  props:{
+
+  },
+  data: function(){
+    return {
+      title: "",
+      imgSource: "",
+      selectedTool: null,
+      toolsConfiguration: [],
+      
+    }
+  },
+  computed: {
+    shankConfiguration: function(){
+        return this.$store.state.tooling.shankConfiguration;
+    },
+    categoriesShank: function() {
+        debugger
+        let cat = new Set();
+        if(this.shankConfiguration.length != 0){
+            for (const key in this.shankConfiguration) {
+                let t = this.shankConfiguration[key];
+                cat.add(t.category);
+            }
+            return Array.from(cat.values());
+        }
+    },
+    categoriesTools: function(){
+        let cat = [];
+        for (const key in this.toolsConfiguration) {
+          let t = this.toolsConfiguration[key];
+          cat.add(t.category);
+        }
+        return Array.from(cat.values());
+    },
+    enableModals(){
+        return ModalHelper.infoEquipmentModal.enableModalShank;
+    }
+  },
+  async beforeCreate(){
+      debugger
+      await new ToolingService().GetToolsConfiguration();
+  },
+  methods: {
+    getInfoEquipmentIcon() {
+        if(!this.enableModals){
+            if(this.selectedTool && (this.selectedTool.toolType==151 || this.selectedTool.toolType==700))
+                return "../assets/icons/Tools/Saw.png";
+            else  
+                return "../assets/icons/Tools/Tools.png";
+        }
+        else
+            return "../assets/icons/Tools/Shanks.png";
+    },
+    close(){
+        Factory.Get(MessageService).deleteChannel("esc_pressed");
+        ModalHelper.HideModal();
+    }
+  }
+};
+</script>
+
diff --git a/Step/wwwroot/src/modules/base-components/ModalHelper.ts b/Step/wwwroot/src/modules/base-components/ModalHelper.ts
index 3f1a3b3a..023a618b 100644
--- a/Step/wwwroot/src/modules/base-components/ModalHelper.ts
+++ b/Step/wwwroot/src/modules/base-components/ModalHelper.ts
@@ -7,6 +7,11 @@ export class ModalHelper {
     positionId: 0,
     magazineId: 0
   };
+  public static infoEquipmentModal = {
+    currentShank: null,
+    currentEquipment: null,
+    enableModalShank: false
+  };
   private static _modalData = {
     title: "",
     content: "",