diff --git a/Step/wwwroot/assets/styles/base/card.less b/Step/wwwroot/assets/styles/base/card.less
index 1dcabeb0..0938c30f 100644
--- a/Step/wwwroot/assets/styles/base/card.less
+++ b/Step/wwwroot/assets/styles/base/card.less
@@ -334,12 +334,22 @@
         display: flex;
         flex-flow: row;
         .card-tool-depot-image{
+            position: relative;
             margin-top: 20px;
-            margin-left: 18px;
+            margin-left: 10px;
             img{
                 max-width: 104px;
                 max-height: 104px;
-
+            }
+            i{
+                position: absolute;
+                right: 0;
+                bottom: 10px;
+                font-size: 28px;
+                cursor: pointer;
+            }
+            i.fa{
+                color: @color-darkish-blue;
             }
         }
         .card-tool-depot-title{
@@ -348,7 +358,7 @@
             min-width: calc(~'100% - 164px');
             flex-flow: column;
             justify-content: center;
-            margin-left: 10px;
+            margin-left: 20px;
             font-size: 18px;
             line-height: 1.11;
             color: @color-greyish-brown;
diff --git a/Step/wwwroot/assets/styles/style.css b/Step/wwwroot/assets/styles/style.css
index 8c26cc30..1b83a0db 100644
--- a/Step/wwwroot/assets/styles/style.css
+++ b/Step/wwwroot/assets/styles/style.css
@@ -3354,20 +3354,31 @@ footer .container button.big:before {
   flex-flow: row;
 }
 .card-tool-depot .card-tool-depot-body .card-tool-depot-image {
+  position: relative;
   margin-top: 20px;
-  margin-left: 18px;
+  margin-left: 10px;
 }
 .card-tool-depot .card-tool-depot-body .card-tool-depot-image img {
   max-width: 104px;
   max-height: 104px;
 }
+.card-tool-depot .card-tool-depot-body .card-tool-depot-image i {
+  position: absolute;
+  right: 0;
+  bottom: 10px;
+  font-size: 28px;
+  cursor: pointer;
+}
+.card-tool-depot .card-tool-depot-body .card-tool-depot-image i.fa {
+  color: #002680;
+}
 .card-tool-depot .card-tool-depot-body .card-tool-depot-title {
   display: flex;
   height: 100%;
   min-width: calc(100% - 164px);
   flex-flow: column;
   justify-content: center;
-  margin-left: 10px;
+  margin-left: 20px;
   font-size: 18px;
   line-height: 1.11;
   color: #4b4b4b;
diff --git a/Step/wwwroot/src/modules/base-components/cards/card-tool-depot.vue b/Step/wwwroot/src/modules/base-components/cards/card-tool-depot.vue
index b0d3a32e..979ac65d 100644
--- a/Step/wwwroot/src/modules/base-components/cards/card-tool-depot.vue
+++ b/Step/wwwroot/src/modules/base-components/cards/card-tool-depot.vue
@@ -4,6 +4,7 @@
         <div class="card-tool-depot-body">
             <div class="card-tool-depot-image">
                 <img :src="imgSource" alt="">
+                <i @click="onClick" class="fa fa-info-circle"></i>
             </div>
             <div class="card-tool-depot-title">
                 <div>{{code}}</div>