diff --git a/Step/wwwroot/assets/styles/base/modals.less b/Step/wwwroot/assets/styles/base/modals.less
index 49826083..ecea6d95 100644
--- a/Step/wwwroot/assets/styles/base/modals.less
+++ b/Step/wwwroot/assets/styles/base/modals.less
@@ -15,6 +15,8 @@ sans-serif;
 @modal-header-height: 64px;
 @modal-login-height: 560px;
 @modal-login-width: 600px;
+@modal-info-equipment-box-height: 680px;
+@modal-info-equipment-box-width: 896px;
 @modal-user-info-height: 610px;
 @modal-login-top: @modal-login-height /2;
 @modal-login-left: @modal-login-width /2;
@@ -469,6 +471,25 @@ sans-serif;
     height: 680px;
     border-radius: 2px;
     background-color: @color-background-white;
+    top: calc(~'50%' - @modal-info-equipment-box-height /2);
+    left: calc(~'50%' - @modal-info-equipment-box-width /2);
+    button.close {
+        position: absolute;
+        width: 28px;
+        height: 28px;
+        border-radius: 50%;
+        border: none;
+        background-color: @color-darkish-blue;
+        color: #fff;
+        top: calc(50% - 20px);
+        right: 14px;
+        font-size: 16px;
+        cursor: pointer;
+    }
+    button.close:active {
+        background-color: @color-clear-blue ;
+        color: #fff;
+    }
     // .info-equipment-header{
     //     width: 100%;
     //     height: 50px;
diff --git a/Step/wwwroot/assets/styles/style.css b/Step/wwwroot/assets/styles/style.css
index 3b71bcae..c66039ff 100644
--- a/Step/wwwroot/assets/styles/style.css
+++ b/Step/wwwroot/assets/styles/style.css
@@ -452,6 +452,25 @@
   height: 680px;
   border-radius: 2px;
   background-color: #fff;
+  top: calc(50% - 340px);
+  left: calc(50% - 448px);
+}
+.modal.info-equipment-box button.close {
+  position: absolute;
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  border: none;
+  background-color: #002680;
+  color: #fff;
+  top: calc(30%);
+  right: 14px;
+  font-size: 16px;
+  cursor: pointer;
+}
+.modal.info-equipment-box button.close:active {
+  background-color: #1791ff;
+  color: #fff;
 }
 .modal.info-equipment-box .info-equipment-body {
   height: calc(100% - 52px);
diff --git a/Step/wwwroot/src/components/depot.ts b/Step/wwwroot/src/components/depot.ts
index 902a1f44..362b25af 100644
--- a/Step/wwwroot/src/components/depot.ts
+++ b/Step/wwwroot/src/components/depot.ts
@@ -8,6 +8,8 @@ import VueDraggable from 'vuedraggable'
 import { depotBL } from "../business-logic/depot-bl";
 import { ToolingService } from "../services/toolingService";
 import { Watch } from "vue-property-decorator";
+import { ModalHelper } from "../modules/base-components";
+import { InfoEquipment } from  "src/components/tooling/index.js";
 
 declare let $: any;
 
@@ -77,6 +79,8 @@ export default class depot extends Vue {
     }
   }
 
+
+
   public returnChildId(elem) {
 
     if (elem.childTool) {
@@ -112,6 +116,6 @@ export default class depot extends Vue {
   }
 
   public test(){
-    console.log("test");
+    ModalHelper.ShowModal(InfoEquipment);
   }
 }
diff --git a/Step/wwwroot/src/components/info-equipment.ts b/Step/wwwroot/src/components/info-equipment.ts
index b798c18b..0da24eff 100644
--- a/Step/wwwroot/src/components/info-equipment.ts
+++ b/Step/wwwroot/src/components/info-equipment.ts
@@ -2,7 +2,12 @@ import Vue from "vue";
 import Component from "vue-class-component";
 import { Watch } from "vue-property-decorator";
 import { Modal, ModalHelper } from "../modules/base-components";
+import { Factory, MessageService, awaiter } from "src/_base";
 
 @Component({ name: "infoEquipment", components: { modal: Modal } })
 export default class InfoEquipment extends Vue {
+    public close(){
+        Factory.Get(MessageService).deleteChannel("esc_pressed");
+        ModalHelper.HideModal();
+    }
 }
\ No newline at end of file
diff --git a/Step/wwwroot/src/components/info-equipment.vue b/Step/wwwroot/src/components/info-equipment.vue
index 70f7419c..a4fcd019 100644
--- a/Step/wwwroot/src/components/info-equipment.vue
+++ b/Step/wwwroot/src/components/info-equipment.vue
@@ -1,5 +1,6 @@
 <template>
-<modal type="info-equipment-box">
+<modal type="info-equipment-box" :title="title">
+    <button class="close" slot="header-buttons" @click="close()"><i class="fa fa-remove"></i></button>
       <!-- <section class="info-equipment-box"> -->
           <!-- <div class="info-equipment-header">
               <i class="fa fa-times-circle"></i>
diff --git a/Step/wwwroot/src/components/tooling-shanks.ts b/Step/wwwroot/src/components/tooling-shanks.ts
index b2d150f3..2dcab6a1 100644
--- a/Step/wwwroot/src/components/tooling-shanks.ts
+++ b/Step/wwwroot/src/components/tooling-shanks.ts
@@ -149,6 +149,7 @@ export default class toolingShanks extends Vue {
       // this.enableParameters = false;
       // this.enableAddToolToShank = true;
       this.selectTab(obj);
+      this.toolSelected = response.tools[0];
     });
     // this.disableList = true;
     // this.enableModify = true;
diff --git a/Step/wwwroot/src/components/tooling/index.js b/Step/wwwroot/src/components/tooling/index.js
index e6237099..6228cb9b 100644
--- a/Step/wwwroot/src/components/tooling/index.js
+++ b/Step/wwwroot/src/components/tooling/index.js
@@ -3,5 +3,6 @@ import assistedTooling2 from "./assisted-toolingtwo.vue";
 import assistedTooling3 from "./assisted-toolingthree.vue";
 import assistedTooling4 from "./assisted-toolingfour.vue";
 import assistedTooling5 from "./assisted-toolingfive.vue";
+import InfoEquipment from "../info-equipment.vue";
 
-export { assistedTooling1, assistedTooling2, assistedTooling3, assistedTooling4, assistedTooling5 }
\ No newline at end of file
+export { assistedTooling1, assistedTooling2, assistedTooling3, assistedTooling4, assistedTooling5, InfoEquipment }
\ No newline at end of file