diff --git a/Step/wwwroot/assets/styles/base/assisted-tooling.less b/Step/wwwroot/assets/styles/base/assisted-tooling.less
index 72016f22..18e79deb 100644
--- a/Step/wwwroot/assets/styles/base/assisted-tooling.less
+++ b/Step/wwwroot/assets/styles/base/assisted-tooling.less
@@ -22,11 +22,28 @@
                 font-size: 20px;
                 padding: 19px 0 0 24px;
             }
-            >.fa{
-                float: right;
-                font-size: 28px;
+            button.close{
+                display: flex;
+                width: 28px;
+                height: 28px;
+                border-radius: 50%;
+                border: none;
+                background-color: #002680;
+                color:  #fff;
                 margin-top: 15px;
                 margin-right: 14px;
+                font-size: 16px;
+                float: right;
+                cursor: pointer;
+                .fa{
+                    display: flex;
+                    margin-left: auto;
+                    margin-right: auto;
+                }
+            }
+            button.close:active {            
+                background-color: @color-clear-blue ;
+                color: #fff;
             }
         }
         .assisted-tooling-body{
diff --git a/Step/wwwroot/assets/styles/base/card.less b/Step/wwwroot/assets/styles/base/card.less
index 00e4c689..46fda0d2 100644
--- a/Step/wwwroot/assets/styles/base/card.less
+++ b/Step/wwwroot/assets/styles/base/card.less
@@ -202,3 +202,49 @@
       }
   }
 }
+
+
+
+.card-utilities{
+    width: 288px;
+    height: 216px;
+    border-radius: 2px;
+    background-color: @color-white2;
+    box-shadow: 0 1px 2px 0 @color-black-40;
+    .card-utilities-header{
+        height: 64px;
+        width: 100%;
+        border-bottom: solid 2px @color-white;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 18px;
+        color: @color-darkish-blue;
+    }
+    .card-utilities-body{
+        height: calc(~'100% - 66px');
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        button{
+            width: 272px;
+            height: 136px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background: @color-white2;
+        }
+        .card-utilities-body-label{
+            width: 104px;
+            height: 104px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background-color: @color-background-white;
+            font-size: 48px;
+            font-weight: 600;
+            color: @color-darkish-blue;
+        }
+    }
+}
diff --git a/Step/wwwroot/assets/styles/base/colors.less b/Step/wwwroot/assets/styles/base/colors.less
index 0a54211c..2f535826 100644
--- a/Step/wwwroot/assets/styles/base/colors.less
+++ b/Step/wwwroot/assets/styles/base/colors.less
@@ -16,9 +16,9 @@
 @color-white3: #dfdfdf;
 @color-white4:#f3f3f3;
 @color-whitegrey: #dddddd;
+@color-whitethree: #e7e7e7;
 @color-silver: #bbbcbc;
 @color-battleship-grey: #657178;
-
 @color-nice-blue: #1756ad;
 @color-slate-gray:#5c656b;
 @color-gunmetal: #4e585e;
diff --git a/Step/wwwroot/assets/styles/base/depot.less b/Step/wwwroot/assets/styles/base/depot.less
index 1ab811dd..fe80fd66 100644
--- a/Step/wwwroot/assets/styles/base/depot.less
+++ b/Step/wwwroot/assets/styles/base/depot.less
@@ -14,12 +14,20 @@
         border-radius: 2px;
         background-color: @color-background-white;
         box-shadow: 0 1px 2px 0 @color-black-40;
-        .header{
-            font-size: 20px;
-            color: @color-darkish-blue;
-            height: 81px;
-            display: flex;
-            align-items: center;
+        .depot-header{
+            .depot-header-left, .depot-header-right{
+                height: 81px;
+                display: flex;
+                align-items: center;
+            }
+            .depot-header-left{
+                float:left;
+                font-size: 20px;
+                color: @color-darkish-blue;
+            }
+            .depot-header-right{
+                float: right;
+            }
             .fa{
                 height: 18px;
                 width: 13px;
@@ -78,8 +86,9 @@
             }
             .box-right{
                 height: 100%;
+                width:100%;
                 min-width: calc(~'100% - 440px');
-                max-width: calc(~'100% - 92px');
+                // max-width: calc(~'100% - 92px');
                 display: flex;
                 flex-flow: column;
                 align-items: center;
@@ -106,7 +115,9 @@
                         button{
                             width: 48px;
                             height: 48px;
-                            padding:0;
+                            display: flex;
+                            align-items: center;
+                            justify-content: center;
                         }
                         span{
                             margin: 0 30px 0 30px;
@@ -171,17 +182,80 @@
 
             }
         }
-        .footer{
+        .depot-footer{
             height:80px;
-            float: right;
-            display: flex;
-            align-items: center;
-            button.blue-reverse{
-                background-image: linear-gradient(to bottom,@color-nice-blue,@color-darkish-blue);
-                color: @color-background-white;
-                font-size: 18px;
-                font-weight: 600;
+            width: 100%;
+            .depot-footer-left, .depot-footer-right{
+                height: 100%;
+                display: flex;
+                align-items: center;
             }
+            .depot-footer-left{
+                float: left;
+                input[type=checkbox]{
+                    visibility: hidden;
+                }
+
+                .depot-checkbox {
+                    width: 24px;
+                    height: 24px;
+                    display: flex;
+                    margin-left: 16px;
+                    align-items: center;
+                    position: relative;
+                }
+
+                .depot-checkbox label {
+                    cursor: pointer;
+                    position: absolute;
+                    width: 24px;
+                    height: 24px;
+                    top: 0;
+                    left: 0;
+                    background: #fff;
+                    border:1px solid @color-clear-blue;
+                    border-radius: 2px;
+                }
+
+                .depot-checkbox label:after {
+                    opacity: 0.2;
+                    content: '';
+                    position: absolute;
+                    width: 16px;
+                    height: 9px;
+                    background: transparent;
+                    top: 3px;
+                    left: 2px;
+                    border: 5px solid #1791ff;
+                    border-top: none;
+                    border-right: none;
+                    transform: rotate(-48deg);
+                }
+                .depot-checkbox label:hover::after {
+                    opacity: 0.5;
+                }
+                
+                .depot-checkbox input[type=checkbox]:checked + label:after {
+                    opacity: 1;
+                }
+                .depot-checkbox-label{
+                    display: flex;
+                    margin-left: 8px;
+                    font-size: 18px;
+                    line-height: 1.11;
+                    color: @color-greyish-brown;
+                }
+            }
+            .depot-footer-right{
+                float: right;
+                button.blue-reverse{
+                    background-image: linear-gradient(to bottom,@color-nice-blue,@color-darkish-blue);
+                    color: @color-background-white;
+                    font-size: 18px;
+                    font-weight: 600;
+                }
+            }
+
         }
     }
 }
diff --git a/Step/wwwroot/assets/styles/base/info-equipment.less b/Step/wwwroot/assets/styles/base/info-equipment.less
new file mode 100644
index 00000000..a03de2b3
--- /dev/null
+++ b/Step/wwwroot/assets/styles/base/info-equipment.less
@@ -0,0 +1,89 @@
+// out: false, sourceMap: false, main: ../style.less
+@import "colors.less";
+
+.info-equipment-container{
+    height: 100%;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    .info-equipment-box{
+        width: 896px;
+        height: 680px;
+        border-radius: 2px;
+        background-color: @color-background-white;
+        box-shadow: 0 3px 5px 0 @color-black-40;
+        .info-equipment-header{
+            width: 100%;
+            height: 50px;
+            color: @color-darkish-blue;
+            border-bottom: solid 2px @color-white2;
+            .info-equipment-header-label{
+                font-size: 20px;
+                padding: 16px 0 0 24px;
+            }
+            >.fa{
+                float: right;
+                font-size: 28px;
+                margin-top: 16px;
+                margin-right: 16px;
+            }
+        }
+        .info-equipment-body{
+            height: calc(~'100% - 52px');
+            width: 100%;
+            display: flex;
+            flex-flow: row;
+            .info-equipment-body-left{
+                width: 320px;
+                height: 100%;
+                display: flex;
+                justify-content: center;
+                img{
+                    width: 280px;
+                    height: 280px;
+                    margin-top: 36px;
+                    background-color: @color-whitegrey;
+                }
+            }
+            .info-equipment-body-right{
+                width: calc(~'100% - 320px');
+                height: calc(~'100% - 52px');
+                table{
+                    width: 97%;
+                    height: calc(~'100% - 32px');
+                    overflow-y: auto;
+                    display: flex;
+                    margin-top: 32px;
+                    tbody{
+                        tr{
+                            display: flex;
+                            width:100%;
+                            flex-flow: row;
+                            td.columnleft,td.columnright{
+                                height: 32px;
+                                background-color: @color-white2;
+                                margin: 4px;
+                                font-size: 18px;
+                                line-height: 1.11;
+                                display: flex;
+                                align-items: center;
+                                color: @color-greyish-brown;
+                                span{
+                                    margin-left: 16px;
+                                }
+                            }
+                            td.columnleft{
+                                width: 256px;
+                                font-weight: 600;
+                            }
+                            td.columnright{
+                                width: 216px;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/Step/wwwroot/assets/styles/base/layout.less b/Step/wwwroot/assets/styles/base/layout.less
index 8df1b0cf..992e92c0 100644
--- a/Step/wwwroot/assets/styles/base/layout.less
+++ b/Step/wwwroot/assets/styles/base/layout.less
@@ -15,14 +15,16 @@
 @import "keypad.less";
 @import "back-view.less";
 @import "head.less";
-
 @import "tooling.less";
 @import "card.less";
 @import "depot.less";
 @import "summary-depot.less";
 @import "assisted-tooling.less";
 @import "tooling-equipment.less";
-
+@import "info-equipment.less";
+@import "utilities.less";
+@import "maintenance.less";
+@import "maintenance-progress.less";
 
 @background-color: rgb(216, 216, 216);
 @handle-width: 48px;
diff --git a/Step/wwwroot/assets/styles/base/maintenance-progress.less b/Step/wwwroot/assets/styles/base/maintenance-progress.less
new file mode 100644
index 00000000..36534d0e
--- /dev/null
+++ b/Step/wwwroot/assets/styles/base/maintenance-progress.less
@@ -0,0 +1,43 @@
+// out: false, sourceMap: false, main: ../style.less
+@import "colors.less";
+
+.maintenance-progress{
+    width: 297px;
+    height: 36px;
+    display: flex;
+    flex-flow: row;
+    background-color: @color-background-white;
+    .progress, .yellow, .red{
+        width: 16px;
+        height: 32px;
+        border-radius: 2px;
+        margin: 0 2px 0 2px;
+    }
+    .progress{
+        border: solid 2px #8eb5e2;
+    }
+    .yellow{
+        border: solid 2px @color-squash;
+    }
+    .red{
+        border: solid 2px @color-scarlet;
+    }
+
+    .progress.fill{
+        background-color: #8eb5e2;
+    }
+    .yellow.fill{
+        background-color: @color-squash;
+    }
+    .red.fill{
+        background-color: @color-scarlet;
+    }
+    label{
+        display: flex;
+        align-items: center;
+        font-size: 14px;
+        line-height: 1.29;
+        margin-left: 16px;
+        color: @color-greyish-brown;
+    }
+}
\ No newline at end of file
diff --git a/Step/wwwroot/assets/styles/base/maintenance.less b/Step/wwwroot/assets/styles/base/maintenance.less
new file mode 100644
index 00000000..0650b264
--- /dev/null
+++ b/Step/wwwroot/assets/styles/base/maintenance.less
@@ -0,0 +1,148 @@
+// out: false, sourceMap: false, main: ../style.less
+@import "colors.less";
+
+.maintenance-container{
+    height: 100%;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    padding-top: 104px;
+    .maintenance-box{
+        width: 1808px;
+        height: 872px;
+        border-radius: 2px;
+        background-color: @color-background-white;
+        box-shadow: 0 1px 2px 0 @color-black-40;
+        .maintenance-header{
+            height: 64px;
+            display: flex;
+            align-items: center;
+            border-bottom: solid 2px @color-whitethree;
+            .maintenance-header-label{
+                margin-left: 23px;
+                font-size: 20px;
+                color: @color-darkish-blue;
+            }
+        }
+        .maintenance-body{
+            width: 1808px;
+            height: calc(~'100% - 66px');
+            display: flex;
+            flex-flow: row;
+            align-items: center;
+            justify-content: center;
+            .maintenance-box-left{
+                width: 952px;
+                height: 100%;
+                display: flex;
+                flex-flow: column;
+                margin: 0 24px 0 24px;
+                .maintenance-box-left-head{
+                    display: flex;
+                    flex-flow: row;
+                    margin: 16px 0 16px 0;
+                    > div {
+                        height: 70px;
+                        display: flex;
+                        flex-flow: column;
+                        margin-right: 12px;
+                        label{
+                            font-size: 14px;
+                            line-height: 1.29;
+                            color: @color-warm-grey;
+                            margin-bottom: 4px;
+                        }
+                        select{
+                            border-radius: 2px;
+                            height: 48px;
+                            box-shadow: 0 1px 2px 0 @color-black-40;
+                            border: solid 1px @color-silver;                     
+                            font-size: 18px;
+                            line-height: 1.11;
+                            color: @color-greyish-brown;
+                            padding-left: 16px; 
+                        }
+                        select.maintenance-select-interval-date{
+                            width: 192px;
+                        }
+                        select.maintenance-select-state{
+                            width: 144px;
+                        }
+                        input{
+                            width: 288px;
+                            height: 48px;
+                            border-radius: 2px;
+                            box-shadow: 0 1px 3px 0 @color-black-50;
+                            border: solid 1px @color-silver;
+                            font-size: 18px;
+                            line-height: 1.11;
+                            color: @color-silver;
+                            padding-left: 16px;
+                        }
+
+                    }
+                }
+                .maintenance-box-left-body{
+                    width: 952px;
+                    height: 680px;
+                    border-radius: 2px;
+                    border: solid 1px @color-label-grey;
+                    table{
+                        height: 100%;
+                        width: 100%;
+                        border-collapse: collapse;
+                        thead tr th{
+                            border-bottom: solid 2px @color-label-grey;
+                            height: 46px;
+                        }
+                        tbody{
+                            height: 100%;
+                            tr{
+                                padding: 0;
+                            }
+                        }
+                        tbody tr td{
+                            text-align: center;
+                            div.maintenance-progress{
+                                margin: 0 auto;
+                            }
+                        }
+
+                        tfoot tr td{
+                            height: 64px;
+                            width: 100%;
+                            font-size: 18px;
+                            color: @color-darkish-blue;
+                            border-top: solid 2px @color-silver;
+                            td{
+                                padding: 0;
+                            }
+                            div.group-label-button{
+                                text-align: center;
+                                margin: 8px 0 8px 0;
+                                button{
+                                    background-image: linear-gradient(to bottom,@color-nice-blue,@color-darkish-blue);
+                                    color: @color-white;
+                                    width: 48px;
+                                    height: 48px;
+                                    padding: 0;
+                                    .fa{
+                                        width: 22px;
+                                        height: 22px;
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+            .maintenance-box-right{
+                width: 784px;
+                height: 760px;
+                display: flex;
+                background-color: white;
+                margin-right: 24px;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/Step/wwwroot/assets/styles/base/tooling-equipment.less b/Step/wwwroot/assets/styles/base/tooling-equipment.less
index 500e506c..0f08c5ba 100644
--- a/Step/wwwroot/assets/styles/base/tooling-equipment.less
+++ b/Step/wwwroot/assets/styles/base/tooling-equipment.less
@@ -139,8 +139,21 @@
                     align-items: center;
                     justify-content: center;
                     overflow-y: auto;
-                    div.skill-equipment{
-                        margin: 8px;
+                    .list-skill-equipment-category{
+                        display: flex;
+                        flex-flow: column;
+                        .skill-equipment-category{
+                            display: flex;
+                            align-items: center;
+                            justify-content: center;
+                            margin-top: 32px;
+                            font-size: 18px;
+                            line-height: 1.11;
+                            color: @color-greyish-brown;
+                        }
+                        div.skill-equipment{
+                            margin: 8px;
+                        }
                     }
                 }
             }
diff --git a/Step/wwwroot/assets/styles/base/utilities.less b/Step/wwwroot/assets/styles/base/utilities.less
new file mode 100644
index 00000000..8bee6608
--- /dev/null
+++ b/Step/wwwroot/assets/styles/base/utilities.less
@@ -0,0 +1,40 @@
+// out: false, sourceMap: false, main: ../style.less
+@import "colors.less";
+.utilities-container{
+    height: 100%;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    .utilities-box{
+        height: 759px;
+        width: 1504px;
+        background-color: @color-background-white;
+        border-radius: 2px;
+        box-shadow: 0 1px 2px 0 @color-black-40;
+        .utilities-header{
+            height: 65px;
+            width: 100%;
+            display: flex;
+            align-items: center;
+            span{
+                font-size: 24px;
+                font-weight: 600;
+                color: @color-darkish-blue;
+                margin-left: 24px;
+            }
+        }
+        .utilities-body{
+            height: calc(~'100% - 65px');
+            width: 100%;
+            background-color: @color-silver;
+            display: flex;
+            flex-flow: row;
+
+            .card-utilities{
+                margin-left:24px;
+                margin-top: 35px;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/Step/wwwroot/assets/styles/style.css b/Step/wwwroot/assets/styles/style.css
index ae5551ac..c59692aa 100644
--- a/Step/wwwroot/assets/styles/style.css
+++ b/Step/wwwroot/assets/styles/style.css
@@ -2765,6 +2765,49 @@ footer .container button.big:before {
 .load-equipment .arrow .fa-arrow-down {
   color: #DC4557;
 }
+.card-utilities {
+  width: 288px;
+  height: 216px;
+  border-radius: 2px;
+  background-color: #f1f1f1;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
+}
+.card-utilities .card-utilities-header {
+  height: 64px;
+  width: 100%;
+  border-bottom: solid 2px #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  color: #002680;
+}
+.card-utilities .card-utilities-body {
+  height: calc(100% - 66px);
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.card-utilities .card-utilities-body button {
+  width: 272px;
+  height: 136px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #f1f1f1;
+}
+.card-utilities .card-utilities-body .card-utilities-body-label {
+  width: 104px;
+  height: 104px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #fff;
+  font-size: 48px;
+  font-weight: 600;
+  color: #002680;
+}
 .depot-container {
   height: 100%;
   width: 100%;
@@ -2780,14 +2823,21 @@ footer .container button.big:before {
   background-color: #fff;
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
 }
-.depot-container .depot-box .header {
-  font-size: 20px;
-  color: #002680;
+.depot-container .depot-box .depot-header .depot-header-left,
+.depot-container .depot-box .depot-header .depot-header-right {
   height: 81px;
   display: flex;
   align-items: center;
 }
-.depot-container .depot-box .header .fa {
+.depot-container .depot-box .depot-header .depot-header-left {
+  float: left;
+  font-size: 20px;
+  color: #002680;
+}
+.depot-container .depot-box .depot-header .depot-header-right {
+  float: right;
+}
+.depot-container .depot-box .depot-header .fa {
   height: 18px;
   width: 13px;
   margin: 0 22px 0 29px;
@@ -2845,8 +2895,8 @@ footer .container button.big:before {
 }
 .depot-container .depot-box .depot-boxbody .box-right {
   height: 100%;
+  width: 100%;
   min-width: calc(100% - 440px);
-  max-width: calc(100% - 92px);
   display: flex;
   flex-flow: column;
   align-items: center;
@@ -2875,7 +2925,9 @@ footer .container button.big:before {
 .depot-container .depot-box .depot-boxbody .box-right .single-depot .sd-header button {
   width: 48px;
   height: 48px;
-  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 .depot-container .depot-box .depot-boxbody .box-right .single-depot .sd-header span {
   margin: 0 30px 0 30px;
@@ -2927,13 +2979,72 @@ footer .container button.big:before {
   justify-content: space-between;
   background-color: #002680;
 }
-.depot-container .depot-box .footer {
+.depot-container .depot-box .depot-footer {
   height: 80px;
-  float: right;
+  width: 100%;
+}
+.depot-container .depot-box .depot-footer .depot-footer-left,
+.depot-container .depot-box .depot-footer .depot-footer-right {
+  height: 100%;
   display: flex;
   align-items: center;
 }
-.depot-container .depot-box .footer button.blue-reverse {
+.depot-container .depot-box .depot-footer .depot-footer-left {
+  float: left;
+}
+.depot-container .depot-box .depot-footer .depot-footer-left input[type=checkbox] {
+  visibility: hidden;
+}
+.depot-container .depot-box .depot-footer .depot-footer-left .depot-checkbox {
+  width: 24px;
+  height: 24px;
+  display: flex;
+  margin-left: 16px;
+  align-items: center;
+  position: relative;
+}
+.depot-container .depot-box .depot-footer .depot-footer-left .depot-checkbox label {
+  cursor: pointer;
+  position: absolute;
+  width: 24px;
+  height: 24px;
+  top: 0;
+  left: 0;
+  background: #fff;
+  border: 1px solid #1791ff;
+  border-radius: 2px;
+}
+.depot-container .depot-box .depot-footer .depot-footer-left .depot-checkbox label:after {
+  opacity: 0.2;
+  content: '';
+  position: absolute;
+  width: 16px;
+  height: 9px;
+  background: transparent;
+  top: 3px;
+  left: 2px;
+  border: 5px solid #1791ff;
+  border-top: none;
+  border-right: none;
+  transform: rotate(-48deg);
+}
+.depot-container .depot-box .depot-footer .depot-footer-left .depot-checkbox label:hover::after {
+  opacity: 0.5;
+}
+.depot-container .depot-box .depot-footer .depot-footer-left .depot-checkbox input[type=checkbox]:checked + label:after {
+  opacity: 1;
+}
+.depot-container .depot-box .depot-footer .depot-footer-left .depot-checkbox-label {
+  display: flex;
+  margin-left: 8px;
+  font-size: 18px;
+  line-height: 1.11;
+  color: #4b4b4b;
+}
+.depot-container .depot-box .depot-footer .depot-footer-right {
+  float: right;
+}
+.depot-container .depot-box .depot-footer .depot-footer-right button.blue-reverse {
   background-image: linear-gradient(to bottom, #1756ad, #002680);
   color: #fff;
   font-size: 18px;
@@ -3092,11 +3203,28 @@ footer .container button.big:before {
   font-size: 20px;
   padding: 19px 0 0 24px;
 }
-.assisted-tooling-container .assisted-tooling-box .assisted-tooling-header > .fa {
-  float: right;
-  font-size: 28px;
+.assisted-tooling-container .assisted-tooling-box .assisted-tooling-header button.close {
+  display: flex;
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  border: none;
+  background-color: #002680;
+  color: #fff;
   margin-top: 15px;
   margin-right: 14px;
+  font-size: 16px;
+  float: right;
+  cursor: pointer;
+}
+.assisted-tooling-container .assisted-tooling-box .assisted-tooling-header button.close .fa {
+  display: flex;
+  margin-left: auto;
+  margin-right: auto;
+}
+.assisted-tooling-container .assisted-tooling-box .assisted-tooling-header button.close:active {
+  background-color: #1791ff;
+  color: #fff;
 }
 .assisted-tooling-container .assisted-tooling-box .assisted-tooling-body {
   width: 100%;
@@ -3266,7 +3394,20 @@ footer .container button.big:before {
   justify-content: center;
   overflow-y: auto;
 }
-.tooling-equipment-container .tooling-equipment-box .tooling-equipment-body .box-right .list-skill-equipment div.skill-equipment {
+.tooling-equipment-container .tooling-equipment-box .tooling-equipment-body .box-right .list-skill-equipment .list-skill-equipment-category {
+  display: flex;
+  flex-flow: column;
+}
+.tooling-equipment-container .tooling-equipment-box .tooling-equipment-body .box-right .list-skill-equipment .list-skill-equipment-category .skill-equipment-category {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 32px;
+  font-size: 18px;
+  line-height: 1.11;
+  color: #4b4b4b;
+}
+.tooling-equipment-container .tooling-equipment-box .tooling-equipment-body .box-right .list-skill-equipment .list-skill-equipment-category div.skill-equipment {
   margin: 8px;
 }
 .tooling-equipment-container .tooling-equipment-box .tooling-equipment-footer {
@@ -3281,6 +3422,313 @@ footer .container button.big:before {
   font-size: 18px;
   font-weight: 600;
 }
+.info-equipment-container {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.info-equipment-container .info-equipment-box {
+  width: 896px;
+  height: 680px;
+  border-radius: 2px;
+  background-color: #fff;
+  box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.4);
+}
+.info-equipment-container .info-equipment-box .info-equipment-header {
+  width: 100%;
+  height: 50px;
+  color: #002680;
+  border-bottom: solid 2px #f1f1f1;
+}
+.info-equipment-container .info-equipment-box .info-equipment-header .info-equipment-header-label {
+  font-size: 20px;
+  padding: 16px 0 0 24px;
+}
+.info-equipment-container .info-equipment-box .info-equipment-header > .fa {
+  float: right;
+  font-size: 28px;
+  margin-top: 16px;
+  margin-right: 16px;
+}
+.info-equipment-container .info-equipment-box .info-equipment-body {
+  height: calc(100% - 52px);
+  width: 100%;
+  display: flex;
+  flex-flow: row;
+}
+.info-equipment-container .info-equipment-box .info-equipment-body .info-equipment-body-left {
+  width: 320px;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+}
+.info-equipment-container .info-equipment-box .info-equipment-body .info-equipment-body-left img {
+  width: 280px;
+  height: 280px;
+  margin-top: 36px;
+  background-color: #dddddd;
+}
+.info-equipment-container .info-equipment-box .info-equipment-body .info-equipment-body-right {
+  width: calc(100% - 320px);
+  height: calc(100% - 52px);
+}
+.info-equipment-container .info-equipment-box .info-equipment-body .info-equipment-body-right table {
+  width: 97%;
+  height: calc(100% - 32px);
+  overflow-y: auto;
+  display: flex;
+  margin-top: 32px;
+}
+.info-equipment-container .info-equipment-box .info-equipment-body .info-equipment-body-right table tbody tr {
+  display: flex;
+  width: 100%;
+  flex-flow: row;
+}
+.info-equipment-container .info-equipment-box .info-equipment-body .info-equipment-body-right table tbody tr td.columnleft,
+.info-equipment-container .info-equipment-box .info-equipment-body .info-equipment-body-right table tbody tr td.columnright {
+  height: 32px;
+  background-color: #f1f1f1;
+  margin: 4px;
+  font-size: 18px;
+  line-height: 1.11;
+  display: flex;
+  align-items: center;
+  color: #4b4b4b;
+}
+.info-equipment-container .info-equipment-box .info-equipment-body .info-equipment-body-right table tbody tr td.columnleft span,
+.info-equipment-container .info-equipment-box .info-equipment-body .info-equipment-body-right table tbody tr td.columnright span {
+  margin-left: 16px;
+}
+.info-equipment-container .info-equipment-box .info-equipment-body .info-equipment-body-right table tbody tr td.columnleft {
+  width: 256px;
+  font-weight: 600;
+}
+.info-equipment-container .info-equipment-box .info-equipment-body .info-equipment-body-right table tbody tr td.columnright {
+  width: 216px;
+}
+.utilities-container {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.utilities-container .utilities-box {
+  height: 759px;
+  width: 1504px;
+  background-color: #fff;
+  border-radius: 2px;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
+}
+.utilities-container .utilities-box .utilities-header {
+  height: 65px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+}
+.utilities-container .utilities-box .utilities-header span {
+  font-size: 24px;
+  font-weight: 600;
+  color: #002680;
+  margin-left: 24px;
+}
+.utilities-container .utilities-box .utilities-body {
+  height: calc(100% - 65px);
+  width: 100%;
+  background-color: #bbbcbc;
+  display: flex;
+  flex-flow: row;
+}
+.utilities-container .utilities-box .utilities-body .card-utilities {
+  margin-left: 24px;
+  margin-top: 35px;
+}
+.maintenance-container {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  padding-top: 104px;
+}
+.maintenance-container .maintenance-box {
+  width: 1808px;
+  height: 872px;
+  border-radius: 2px;
+  background-color: #fff;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
+}
+.maintenance-container .maintenance-box .maintenance-header {
+  height: 64px;
+  display: flex;
+  align-items: center;
+  border-bottom: solid 2px #e7e7e7;
+}
+.maintenance-container .maintenance-box .maintenance-header .maintenance-header-label {
+  margin-left: 23px;
+  font-size: 20px;
+  color: #002680;
+}
+.maintenance-container .maintenance-box .maintenance-body {
+  width: 1808px;
+  height: calc(100% - 66px);
+  display: flex;
+  flex-flow: row;
+  align-items: center;
+  justify-content: center;
+}
+.maintenance-container .maintenance-box .maintenance-body .maintenance-box-left {
+  width: 952px;
+  height: 100%;
+  display: flex;
+  flex-flow: column;
+  margin: 0 24px 0 24px;
+}
+.maintenance-container .maintenance-box .maintenance-body .maintenance-box-left .maintenance-box-left-head {
+  display: flex;
+  flex-flow: row;
+  margin: 16px 0 16px 0;
+}
+.maintenance-container .maintenance-box .maintenance-body .maintenance-box-left .maintenance-box-left-head > div {
+  height: 70px;
+  display: flex;
+  flex-flow: column;
+  margin-right: 12px;
+}
+.maintenance-container .maintenance-box .maintenance-body .maintenance-box-left .maintenance-box-left-head > div label {
+  font-size: 14px;
+  line-height: 1.29;
+  color: #878787;
+  margin-bottom: 4px;
+}
+.maintenance-container .maintenance-box .maintenance-body .maintenance-box-left .maintenance-box-left-head > div select {
+  border-radius: 2px;
+  height: 48px;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
+  border: solid 1px #bbbcbc;
+  font-size: 18px;
+  line-height: 1.11;
+  color: #4b4b4b;
+  padding-left: 16px;
+}
+.maintenance-container .maintenance-box .maintenance-body .maintenance-box-left .maintenance-box-left-head > div select.maintenance-select-interval-date {
+  width: 192px;
+}
+.maintenance-container .maintenance-box .maintenance-body .maintenance-box-left .maintenance-box-left-head > div select.maintenance-select-state {
+  width: 144px;
+}
+.maintenance-container .maintenance-box .maintenance-body .maintenance-box-left .maintenance-box-left-head > div input {
+  width: 288px;
+  height: 48px;
+  border-radius: 2px;
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.5);
+  border: solid 1px #bbbcbc;
+  font-size: 18px;
+  line-height: 1.11;
+  color: #bbbcbc;
+  padding-left: 16px;
+}
+.maintenance-container .maintenance-box .maintenance-body .maintenance-box-left .maintenance-box-left-body {
+  width: 952px;
+  height: 680px;
+  border-radius: 2px;
+  border: solid 1px #979797;
+}
+.maintenance-container .maintenance-box .maintenance-body .maintenance-box-left .maintenance-box-left-body table {
+  height: 100%;
+  width: 100%;
+  border-collapse: collapse;
+}
+.maintenance-container .maintenance-box .maintenance-body .maintenance-box-left .maintenance-box-left-body table thead tr th {
+  border-bottom: solid 2px #979797;
+  height: 46px;
+}
+.maintenance-container .maintenance-box .maintenance-body .maintenance-box-left .maintenance-box-left-body table tbody {
+  height: 100%;
+}
+.maintenance-container .maintenance-box .maintenance-body .maintenance-box-left .maintenance-box-left-body table tbody tr {
+  padding: 0;
+}
+.maintenance-container .maintenance-box .maintenance-body .maintenance-box-left .maintenance-box-left-body table tbody tr td {
+  text-align: center;
+}
+.maintenance-container .maintenance-box .maintenance-body .maintenance-box-left .maintenance-box-left-body table tbody tr td div.maintenance-progress {
+  margin: 0 auto;
+}
+.maintenance-container .maintenance-box .maintenance-body .maintenance-box-left .maintenance-box-left-body table tfoot tr td {
+  height: 64px;
+  width: 100%;
+  font-size: 18px;
+  color: #002680;
+  border-top: solid 2px #bbbcbc;
+}
+.maintenance-container .maintenance-box .maintenance-body .maintenance-box-left .maintenance-box-left-body table tfoot tr td td {
+  padding: 0;
+}
+.maintenance-container .maintenance-box .maintenance-body .maintenance-box-left .maintenance-box-left-body table tfoot tr td div.group-label-button {
+  text-align: center;
+  margin: 8px 0 8px 0;
+}
+.maintenance-container .maintenance-box .maintenance-body .maintenance-box-left .maintenance-box-left-body table tfoot tr td div.group-label-button button {
+  background-image: linear-gradient(to bottom, #1756ad, #002680);
+  color: #fff;
+  width: 48px;
+  height: 48px;
+  padding: 0;
+}
+.maintenance-container .maintenance-box .maintenance-body .maintenance-box-left .maintenance-box-left-body table tfoot tr td div.group-label-button button .fa {
+  width: 22px;
+  height: 22px;
+}
+.maintenance-container .maintenance-box .maintenance-body .maintenance-box-right {
+  width: 784px;
+  height: 760px;
+  display: flex;
+  background-color: white;
+  margin-right: 24px;
+}
+.maintenance-progress {
+  width: 297px;
+  height: 36px;
+  display: flex;
+  flex-flow: row;
+  background-color: #fff;
+}
+.maintenance-progress .progress,
+.maintenance-progress .yellow,
+.maintenance-progress .red {
+  width: 16px;
+  height: 32px;
+  border-radius: 2px;
+  margin: 0 2px 0 2px;
+}
+.maintenance-progress .progress {
+  border: solid 2px #8eb5e2;
+}
+.maintenance-progress .yellow {
+  border: solid 2px #f5a623;
+}
+.maintenance-progress .red {
+  border: solid 2px #d0021b;
+}
+.maintenance-progress .progress.fill {
+  background-color: #8eb5e2;
+}
+.maintenance-progress .yellow.fill {
+  background-color: #f5a623;
+}
+.maintenance-progress .red.fill {
+  background-color: #d0021b;
+}
+.maintenance-progress label {
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  line-height: 1.29;
+  margin-left: 16px;
+  color: #4b4b4b;
+}
 .persona {
   height: 88px;
   width: 88px;
diff --git a/Step/wwwroot/src/app.modules.js b/Step/wwwroot/src/app.modules.js
index b3c98cf0..9ab60923 100644
--- a/Step/wwwroot/src/app.modules.js
+++ b/Step/wwwroot/src/app.modules.js
@@ -41,6 +41,21 @@ export const AssistedTooling = () =>
 
 export const ToolingEquipment = () =>
     import ("./components/tooling-equipment.vue");
+export const InfoEquipment = () =>
+    import ("./components/info-equipment.vue");
+
+export const Maintenance = () =>
+    import ("./components/maintenance.vue");
+
+/* Da cancellare dopo sviluppo */
+export const MaintenanceProgress = () =>
+    import ("./modules/base-components/maintenance-progress.vue");
+
+export const Utilities = () =>
+    import ("./components/utilities.vue");
+
+export const CardUtilities = () =>
+    import ("./modules/base-components/cards/card-utilities.vue");
 
 
 // Test pages
diff --git a/Step/wwwroot/src/app.routes.js b/Step/wwwroot/src/app.routes.js
index e3138189..195204a5 100644
--- a/Step/wwwroot/src/app.routes.js
+++ b/Step/wwwroot/src/app.routes.js
@@ -8,6 +8,11 @@ import {
     SummaryDepot,
     AssistedTooling,
     ToolingEquipment,
+    InfoEquipment,
+    Utilities,
+    CardUtilities,
+    Maintenance,
+    MaintenanceProgress
 
 } from "./app.modules";
 
@@ -20,11 +25,18 @@ export let routes = [
     { path: "/summary-depot", component: SummaryDepot, meta: { title: "Step - Summary-Depot", area: "summary-depot" } },
     { path: "/assisted-tooling", component: AssistedTooling, meta: { title: "Step - Assisted-Tooling", area: "assisted-tooling" } },
     { path: "/tooling-equipment", component: ToolingEquipment, meta: { title: "Step - Tooling-Equipment", area: "tooling-equipment" } },
+    { path: "/info-equipment", component: InfoEquipment, meta: { title: "Step - Info-Equipment", area: "info-equipment" } },
+    { path: "/utilities", component: Utilities, meta: { title: "Step - Utilities", area: "utilities" } },
+    { path: "/card-utilities", component: CardUtilities, meta: { title: "Step - Card-Utilities", area: "card-utilities" } },
+
+    /* Da cancellare dopo sviluppo */
+    { path: "/maintenance-progress", component: MaintenanceProgress, meta: { title: "Step - Maintenance-Progress", area: "maintenance-progress" } },
 
     { path: "/report", meta: { title: "Step - Reports", area: "report" } },
     { path: "/alarms", meta: { title: "Step - Alarms", area: "alarms" } },
-    { path: "/maintenance", meta: { title: "Step - Maintenance", area: "maintenance" } },
-    { path: "/utilities", meta: { title: "Step - Utility", area: "utilities" } },
+    { path: "/maintenance", component: Maintenance, meta: { title: "Step - Maintenance", area: "maintenance" } },
+    /* path precedente cosa fare? Non ha il component */
+    // { path: "/utilities", meta: { title: "Step - Utility", area: "utilities" } },
     { path: "/scada", meta: { title: "", area: "scada" } },
     { path: "/test/loader", component: TestLoader, name: "testloader" },
     { path: "/test/empty", component: TestEmpty, name: "testloader" },
diff --git a/Step/wwwroot/src/components/assisted-tooling.vue b/Step/wwwroot/src/components/assisted-tooling.vue
index 445c228e..0aa21099 100644
--- a/Step/wwwroot/src/components/assisted-tooling.vue
+++ b/Step/wwwroot/src/components/assisted-tooling.vue
@@ -2,7 +2,7 @@
   <div class="assisted-tooling-container">
       <div class="assisted-tooling-box">
           <div class="assisted-tooling-header">
-              <i class="fa fa-times-circle"></i>
+              <button class="close"><i class="fa fa-remove"></i></button>
               <div class="assisted-tooling-header-label">Attrezzaggio assistito - Magazzino 1</div>
           </div>
           <div class="assisted-tooling-body">
diff --git a/Step/wwwroot/src/components/depot.vue b/Step/wwwroot/src/components/depot.vue
index 2e983032..bca86325 100644
--- a/Step/wwwroot/src/components/depot.vue
+++ b/Step/wwwroot/src/components/depot.vue
@@ -1,11 +1,16 @@
 <template>
   <div class="depot-container">
       <div class="depot-box">
-          <div class="header">
-              <i class="fa fa-chevron-left"></i>Magazzino 1 - Lineare
+          <div class="depot-header">
+              <div class="depot-header-left">
+                  <i class="fa fa-chevron-left"></i>Magazzino 1 - Lineare
+              </div>
+              <div class="depot-header-right">
+                  <button class="btn" v-if="true">{{'depot_button_assistedtooling' | localize("Attrezzaggio automatico")}}</button>
+              </div>
           </div>
           <div class="depot-boxbody">
-              <div class="list-left">
+              <div class="list-left" v-if="true">
                   <span class="depot-search-label">{{'depot_label_search' | localize("Seleziona un utensile e posizionalo nel magazzino corrispondente:")}}</span>
                   <div class="depot-search">
                     <input type="text">
@@ -32,9 +37,9 @@
               <div class="box-right">
                   <div class="single-depot">
                       <div class="sd-header">
-                          <button class="btn"><i class="fa fa-chevron-left"></i></button>
+                          <button class="btn" :v-if="false"><i class="fa fa-chevron-left"></i></button>
                           <span>Magazzino 1 - Lineare</span>
-                          <button class="btn"><i class="fa fa-chevron-right"></i></button>
+                          <button class="btn" :v-if="false"><i class="fa fa-chevron-right"></i></button>
                       </div>
                       <div class="sd-section scrollable">
                           <detail-card number="2">Inserisci</detail-card>
@@ -56,9 +61,24 @@
 
               </div>
           </div>
-          <div class="footer">
-              <button class="btn">{{'depot_button_cancel' | localize("Annulla")}}</button>
-              <button class="btn blue-reverse">{{'depot_button_save' | localize("Salva")}}</button>
+          <div class="depot-footer">
+              <div class="depot-footer-left">
+                  <!-- <div class="depot-checkbox" >
+                    <input type="checkbox">
+                    <label></label>
+                    {{'depot_checkbox_viewstate_equipment' | localize('Visualizza stato utensili')}}
+                  </div> -->
+                  <div class="depot-checkbox">
+                    <input type="checkbox" value="1" id="depotCheckbox" name="" />
+                    <label for="depotCheckbox"></label>
+                  </div>
+                  <label class="depot-checkbox-label">{{'depot_checkbox_viewstate_equipment' | localize('Visualizza stato utensili')}}</label>
+              </div>
+              <div class="depot-footer-right">
+                    <button class="btn" v-if="true">{{'depot_button_cancel' | localize("Annulla")}}</button>
+                    <button class="btn blue-reverse" v-if="true">{{'depot_button_save' | localize("Salva")}}</button>
+                    <button class="btn" v-if="false">{{'depot_button_modify' | localize("Modifica")}}</button>
+              </div>
           </div>
       </div>
   </div>
@@ -67,6 +87,6 @@
 import tool from "src/modules/base-components/cards/tool.vue";
 import detailCard from "src/modules/base-components/cards/detail-card.vue";
 export default {
-  components:{tool, detailCard}
+  components:{tool, detailCard},
 }
 </script>
diff --git a/Step/wwwroot/src/components/info-equipment.vue b/Step/wwwroot/src/components/info-equipment.vue
new file mode 100644
index 00000000..157d59e4
--- /dev/null
+++ b/Step/wwwroot/src/components/info-equipment.vue
@@ -0,0 +1,48 @@
+<template>
+  <div class="info-equipment-container">
+      <div class="info-equipment-box">
+          <div class="info-equipment-header">
+              <i class="fa fa-times-circle"></i>
+              <div class="info-equipment-header-label">Attrezzaggio assistito - Magazzino 1</div>
+          </div>
+          <div class="info-equipment-body">
+              <div class="info-equipment-body-left">
+                  <img :src="imgSource" alt="">
+              </div>
+              <div class="info-equipment-body-right">
+                  <table class="scrollable">
+                      <tbody>
+                          <tr>
+                              <td class="columnleft"><span>Nome</span></td>
+                              <td class="columnright"><span>Test</span></td>
+                          </tr>
+                          <tr>
+                              <td class="columnleft"><span>Prova</span></td>
+                              <td class="columnright"><span>Test2</span></td>
+                          </tr>
+                          <tr>
+                              <td class="columnleft"><span>Prova</span></td>
+                              <td class="columnright"><span>Test2</span></td>
+                          </tr>
+                          <tr>
+                              <td class="columnleft"><span>Prova</span></td>
+                              <td class="columnright"><span>Test2</span></td>
+                          </tr>
+                          <tr>
+                              <td class="columnleft"><span>Prova</span></td>
+                              <td class="columnright"><span>Test2</span></td>
+                          </tr>
+                      </tbody>
+                  </table>
+              </div>
+          </div>
+      </div>
+  </div>
+</template>
+<script>
+export default {
+    props:{
+        imgSource: {default:"../assets/icons/png/attrezzaggio-BIG@3x.png"}
+    }
+}
+</script>
diff --git a/Step/wwwroot/src/components/maintenance.vue b/Step/wwwroot/src/components/maintenance.vue
new file mode 100644
index 00000000..58926770
--- /dev/null
+++ b/Step/wwwroot/src/components/maintenance.vue
@@ -0,0 +1,74 @@
+<template>
+  <div class="maintenance-container">
+      <div class="maintenance-box">
+          <div class="maintenance-header">
+            <div class="maintenance-header-label">
+              {{'maintenance_header_title' | localize("Manutenzione")}}
+            </div>
+          </div>
+          <div class="maintenance-body">
+            <div class="maintenance-box-left">
+              <div class="maintenance-box-left-head">
+                <div>
+                  <label>{{'maintenance_header_label_date' | localize("Intervallo date")}}</label>
+                  <select class="maintenance-select-interval-date"><option>Ultimo mese</option></select>
+                </div>
+                <div>
+                  <label>{{'maintenance_header_label_procedure' | localize("Nome procedura")}}</label>
+                  <input class="maintenance-input-procedure" type="text" placeholder="Nome della procedura">
+                </div>
+                <div>
+                  <label>{{'maintenance_header_label_state' | localize("Stato")}}</label>
+                  <select class="maintenance-select-state"><option>Tutti</option></select>
+                </div>
+              </div>
+              <div class="maintenance-box-left-body">
+                <table>
+                  <thead>
+                    <tr>
+                      <th>Titolo</th>
+                      <th>Contatore</th>
+                      <th>Scadenza</th>
+                      <th>Stato</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <td>Effettuare la pulizia</td>
+                      <td><maintenanceprogress></maintenanceprogress></td>
+                      <td>7 gg</td>
+                      <td>In scadenza</td>
+                    </tr>
+                  </tbody>
+                  <tfoot>
+                    <tr>
+                      <td colspan="4"><div class="group-label-button">{{'maintenance_label_create_intervention' | localize("Crea un intervento di manutenzione")}}<button class="btn"><i class="fa fa-plus"></i></button></div></td>
+                    </tr>
+                  </tfoot>
+                </table>
+              </div>
+              <div class="maintenance-box-left-footer">
+
+              </div>
+            </div>
+            <div class="maintenance-box-right">
+              <div class="maintenance-box-right-head">
+
+              </div>
+              <div class="maintenance-box-right-body">
+
+              </div>
+              <div class="maintenance-box-right-footer">
+
+              </div>
+            </div>
+          </div>
+      </div>
+  </div>
+</template>
+<script>
+import maintenanceprogress from "src/modules/base-components/maintenance-progress.vue";
+export default {
+  components:{maintenanceprogress}
+}
+</script>
\ No newline at end of file
diff --git a/Step/wwwroot/src/components/tooling-equipment.vue b/Step/wwwroot/src/components/tooling-equipment.vue
index f42937b9..ee4baec3 100644
--- a/Step/wwwroot/src/components/tooling-equipment.vue
+++ b/Step/wwwroot/src/components/tooling-equipment.vue
@@ -32,23 +32,119 @@
                       <div class="group-label-button">{{'tooling_equipment_label_add' | localize("Aggiungi utensile")}}<button class="btn"><i class="fa fa-plus"></i></button></div>
                   </div>
               </div>
-              <div class="box-right">
+              <!-- Siemens -->
+              <div class="box-right" v-if="false">
                   <button class="btn"><i class="fa fa-trash"></i></button>
                   <div class="box-right-label-header">Modifica di E13 utensile XYZ</div>
                   <div class="list-skill-equipment scrollable">
-                    <skillequipment title="Utensile" is-input="true"></skillequipment>
-                    <skillequipment title="Famiglia" is-select="true"></skillequipment>
-                    <skillequipment></skillequipment>
-                    <skillequipment></skillequipment>
-                    <skillequipment></skillequipment>
-                    <skillequipment></skillequipment>
-                    <skillequipment></skillequipment>
-                    <skillequipment></skillequipment>
-                    <skillequipment></skillequipment>
-                    <skillequipment></skillequipment>
-                    <skillequipment></skillequipment>
-                    <skillequipment></skillequipment>
-                    <skillequipment></skillequipment>
+                    <div class="list-skill-equipment-category">
+                        <div class="skill-equipment-category">Generali</div>
+                        <skillequipment title="Id" is-input-number-read-only="true"></skillequipment>
+                        <skillequipment title="Tipo Utensile" is-select="true"></skillequipment>
+                    </div>
+                    <div class="list-skill-equipment-category">
+                        <div class="skill-equipment-category">Famiglia</div>
+                        <skillequipment title="Nome" is-input-read-only="true"></skillequipment>
+                        <skillequipment title="Id Figlio" is-input-number-read-only="true"></skillequipment>
+                    </div>
+                    <div class="list-skill-equipment-category">
+                        <div class="skill-equipment-category">Stato</div>
+                        <skillequipment title="Ut. Attivato" is-toggle="true"></skillequipment>
+                        <skillequipment title="Ut. Inibito" is-toggle="true"></skillequipment>
+                        <skillequipment title="Ut. Misurato" is-toggle="true"></skillequipment>
+                        <skillequipment title="Ut. in Preali" is-toggle="true"></skillequipment>
+                        <skillequipment title="Ut. in CU" is-toggle="true"></skillequipment>
+                        <skillequipment title="Ut. Posto fisso" is-toggle="true"></skillequipment>
+                        <skillequipment title="Ut. in uso" is-toggle="true"></skillequipment>
+                    </div>
+                    <div class="list-skill-equipment-category">
+                        <div class="skill-equipment-category">Testa</div>
+                        <skillequipment title="Rotazione" is-select="true"></skillequipment>
+                    </div>
+                    <div class="list-skill-equipment-category">
+                        <div class="skill-equipment-category"></div>
+                        <skillequipment title="Raffredd 1" is-toggle="true"></skillequipment>
+                        <skillequipment title="Raffredd 2" is-toggle="true"></skillequipment>
+                    </div>
+                    <div class="list-skill-equipment-category">
+                        <div class="skill-equipment-category">Dimensione in magazzino</div>
+                        <skillequipment title="N. Manine Dx" is-toggle="true"></skillequipment>
+                        <skillequipment title="N. Manine Sx" is-toggle="true"></skillequipment>
+                    </div>
+                    <div class="list-skill-equipment-category">
+                        <div class="skill-equipment-category">Generali</div>
+                        <skillequipment title="Id" is-input-number-read-only="true"></skillequipment>
+                    </div>
+                    <div class="list-skill-equipment-category">
+                        <div class="skill-equipment-category">Geometria</div>
+                        <skillequipment title="Parameter 1..N" is-input-number="true"></skillequipment>
+                    </div>
+                    <div class="list-skill-equipment-category">
+                        <div class="skill-equipment-category">Vita Ut.</div>
+                        <skillequipment title="Tipo Vita" is-select="true"></skillequipment>
+                        <skillequipment title="Vita residua" is-input-number="true"></skillequipment>
+                        <skillequipment title="Vita Nominale" is-input-number="true"></skillequipment>
+                        <skillequipment title="Vita Preallarme" is-input-number="true"></skillequipment>
+                    </div>
+                  </div>
+              </div>
+              <!-- Osai - Fanuc -->
+              <div class="box-right" v-if="true">
+                  <button class="btn"><i class="fa fa-trash"></i></button>
+                  <div class="box-right-label-header">Modifica di E13 utensile XYZ</div>
+                  <div class="list-skill-equipment scrollable">
+                    <div class="list-skill-equipment-category">
+                        <div class="skill-equipment-category">Generali</div>
+                        <skillequipment title="Id" is-input-number-read-only="true"></skillequipment>
+                        <skillequipment title="Tipo Utensile" is-select="true"></skillequipment>
+                        <skillequipment title="Ut. Disabilitato" is-toggle="true"></skillequipment>
+                        <skillequipment title="Ut. Rotto" is-toggle="true"></skillequipment>
+                        <skillequipment title="Ut. Misurato" is-toggle="true"></skillequipment>
+                    </div>
+                    <div class="list-skill-equipment-category">
+                        <div class="skill-equipment-category">Famiglia</div>
+                        <skillequipment title="Id" is-input-number-read-only="true"></skillequipment>
+                        <skillequipment title="Descrizione" is-input="true"></skillequipment>
+                        <skillequipment title="Rotazione" is-select="true"></skillequipment>
+                        <skillequipment title="Tcp Associata" is-select="true"></skillequipment>
+                        <skillequipment title="Raffredd 1" is-toggle="true"></skillequipment>
+                        <skillequipment title="Raffredd 2" is-toggle="true"></skillequipment>
+                        <skillequipment title="Raffredd 3" is-toggle="true"></skillequipment>
+                        <skillequipment title="Raffredd 4" is-toggle="true"></skillequipment>
+                        <skillequipment title="Raffredd 5" is-toggle="true"></skillequipment>
+                        <skillequipment title="Raffredd 6" is-toggle="true"></skillequipment>
+                        <skillequipment title="Raffredd 7" is-toggle="true"></skillequipment>
+                        <skillequipment title="Raffredd 8" is-toggle="true"></skillequipment>
+                        <skillequipment title="Vita Nominale" is-input-number="true"></skillequipment>
+                        <skillequipment title="Delta Ravvivat" is-input-number="true"></skillequipment>
+                        <skillequipment title="Inverter Dataset" is-select="true"></skillequipment>
+                        <skillequipment title="Carico Min P.A." is-input-number="true"></skillequipment>
+                        <skillequipment title="Carico Max P.A." is-input-number="true"></skillequipment>
+                        <skillequipment title="Caric Min C Din" is-input-number="true"></skillequipment>
+                        <skillequipment title="Caric Max C Din" is-input-number="true"></skillequipment>
+                        <skillequipment title="N. Manine Dx" is-input-number="true"></skillequipment>
+                        <skillequipment title="N. Manine Sx" is-input-number="true"></skillequipment>
+                    </div>
+                    <div class="list-skill-equipment-category">
+                        <div class="skill-equipment-category">Geometria</div>
+                        <skillequipment title="Id Correttore" is-select="true"></skillequipment>
+                        <skillequipment title="Lunghezza" is-input-number="true"></skillequipment>
+                        <skillequipment title="Raggio" is-input-number="true"></skillequipment>
+                        <skillequipment title="Usura Lungh." is-input-number="true"></skillequipment>
+                        <skillequipment title="Usura Raggio" is-input-number="true"></skillequipment>
+                        <skillequipment title="Ravviv Residua" is-input-number="true"></skillequipment>
+                    </div>
+                    <div class="list-skill-equipment-category">
+                        <div class="skill-equipment-category">Vita Ut.</div>
+                        <skillequipment title="Tipo Vita" is-select="true"></skillequipment>
+                        <skillequipment title="Vita residua" is-input-number="true"></skillequipment>
+                        <skillequipment title="Val Preallarme" is-input-number="true"></skillequipment>
+                    </div>
+                    <div class="list-skill-equipment-category">
+                        <div class="skill-equipment-category">Codolo</div>
+                        <skillequipment title="Tipo man rich" is-select="true"></skillequipment>
+                        <skillequipment title="Pastiglia" is-input-number="true"></skillequipment>
+                    </div>
                   </div>
               </div>
           </div>
diff --git a/Step/wwwroot/src/components/utilities.vue b/Step/wwwroot/src/components/utilities.vue
new file mode 100644
index 00000000..d98efc08
--- /dev/null
+++ b/Step/wwwroot/src/components/utilities.vue
@@ -0,0 +1,21 @@
+<template>
+  <div class="utilities-container">
+      <div class="utilities-box">
+          <div class="utilities-header">
+              <span>{{'utilities_header_label' | localize("Utilities")}}</span>
+          </div>
+          <div class="utilities-body">
+              <cardutilities title="CMS Copy" letters="CC"></cardutilities>
+              <cardutilities title="Presetting Tool" letters="PT"></cardutilities>
+              <cardutilities title="Easystone" letters="ES"></cardutilities>
+              <cardutilities title="Easyglass" letters="EG"></cardutilities>
+          </div>
+      </div>
+  </div>
+</template>
+<script>
+import cardutilities from "src/modules/base-components/cards/card-utilities.vue";
+export default {
+    components:{cardutilities}
+}
+</script>
\ No newline at end of file
diff --git a/Step/wwwroot/src/filters/cnFilter.ts b/Step/wwwroot/src/filters/cnFilter.ts
new file mode 100644
index 00000000..cd5e4d35
--- /dev/null
+++ b/Step/wwwroot/src/filters/cnFilter.ts
@@ -0,0 +1,17 @@
+import Vue from "vue"; 
+Vue.mixin( {
+    methods: {
+        isDemo:function() {
+            return ( ! this.$store.state.machineInfo.isSiemens &&  ! this.$store.state.machineInfo.isFanuc &&  ! this.$store.state.machineInfo.isOsai); 
+        }, 
+        isSiemens:function() {
+            return this.$store.state.machineInfo.isSiemens; 
+        }, 
+        isFanuc:function() {
+            return this.$store.state.machineInfo.isFanuc; 
+        }, 
+        isOsai:function() {
+            return this.$store.state.machineInfo.isOsai; 
+        }
+    }
+}); 
diff --git a/Step/wwwroot/src/main.js b/Step/wwwroot/src/main.js
index c15ad801..abe3fb80 100644
--- a/Step/wwwroot/src/main.js
+++ b/Step/wwwroot/src/main.js
@@ -20,7 +20,7 @@ let router = new VueRouter({ linkActiveClass: "inpath", linkExactActiveClass: "a
 router.addRoutes(routes);
 
 // ATTENZIONE : mettere a true durante lo sviluppo e riportare a false per la pubblicazione
-let developerMode = false;
+let developerMode = true;
 
 // manipulate the title page
 router.beforeEach((to, from, next) => {
@@ -58,6 +58,7 @@ import "./filters/searchFilter";
 import "./filters/localizeFilter";
 import "./filters/dateFilter";
 import "./filters/securityFilter";
+import "./filters/cnFilter";
 
 // polyfills !!
 
diff --git a/Step/wwwroot/src/modules/base-components/cards/card-utilities.vue b/Step/wwwroot/src/modules/base-components/cards/card-utilities.vue
new file mode 100644
index 00000000..8b19c8c2
--- /dev/null
+++ b/Step/wwwroot/src/modules/base-components/cards/card-utilities.vue
@@ -0,0 +1,20 @@
+<template>
+<!-- <div class="test-container"> -->
+    <div class="card-utilities">
+        <div class="card-utilities-header">
+            <span>{{title}}</span>
+        </div>
+        <div class="card-utilities-body">
+            <button class="btn"><div class="card-utilities-body-label">{{letters}}</div></button>
+        </div>
+  </div>
+<!-- </div> -->
+</template>
+<script>
+export default {
+    props:{
+        title: {default:""},
+        letters: {default:""}
+    }
+}
+</script>
\ No newline at end of file
diff --git a/Step/wwwroot/src/modules/base-components/cards/skill-equipment.vue b/Step/wwwroot/src/modules/base-components/cards/skill-equipment.vue
index f6f0626e..915b4c39 100644
--- a/Step/wwwroot/src/modules/base-components/cards/skill-equipment.vue
+++ b/Step/wwwroot/src/modules/base-components/cards/skill-equipment.vue
@@ -6,8 +6,10 @@
           </div>
           <div class="skill-equipment-control">
               <input v-if="isInput">
+              <input v-if="isInputReadOnly" readonly>
               <select class="arrow" v-if="isSelect"></select>
               <input v-if="isInputNumber" v-model.number="number" type="number">
+              <input v-if="isInputNumberReadOnly" v-model.number="number" type="number" readonly>
               <div class="togglebutton" v-if="isToggle"><label>
                 <input type="checkbox" :checked="ischecked" @click="toggleCheck()">
                 <span class="toggle">{{checked ? onLabel : offLabel}}</span>
@@ -23,6 +25,8 @@ export default {
         isInput: {default: false},
         isSelect: {default: false},
         isInputNumber: {default: false},
+        isInputReadOnly: {default: false},
+        isInputNumberReadOnly: {default:false},
         isToggle: {default: false},
         onLabel: { default: "SI" },
         offLabel: { default: "NO" },
diff --git a/Step/wwwroot/src/modules/base-components/maintenance-progress.vue b/Step/wwwroot/src/modules/base-components/maintenance-progress.vue
new file mode 100644
index 00000000..36c7208b
--- /dev/null
+++ b/Step/wwwroot/src/modules/base-components/maintenance-progress.vue
@@ -0,0 +1,33 @@
+<template>
+  <!-- <div class="test-container"> -->
+      <div class="maintenance-progress">
+          <div class="progress" :class="{fill: progress >= 10, yellow: 10 >= warningValue, red: 10 >= alertValue }"></div>
+          <div class="progress" :class="{fill: progress >= 20, yellow: 20 >= warningValue, red: 20 >= alertValue }"></div>
+          <div class="progress" :class="{fill: progress >= 30, yellow: 30 >= warningValue, red: 30>= alertValue }"></div>
+          <div class="progress" :class="{fill: progress >= 40, yellow: 40 >= warningValue, red: 40 >= alertValue }"></div>
+          <div class="progress" :class="{fill: progress >= 50, yellow: 50 >= warningValue, red: 50 >= alertValue }"></div>
+          <div class="progress" :class="{fill: progress >= 60, yellow: 60 >= warningValue, red: 60 >= alertValue }"></div>
+          <div class="progress" :class="{fill: progress >= 70, yellow: 70 >= warningValue, red: 70>= alertValue }"></div>
+          <div class="progress" :class="{fill: progress >= 80, yellow: 80 >= warningValue, red: 80 >= alertValue }"></div>
+          <div class="progress" :class="{fill: progress >= 90, yellow: 90 >= warningValue, red: 90 >= alertValue }"></div>
+          <div class="progress" :class="{fill: progress >= 100,  yellow: 100 >= warningValue, red: 100 >= alertValue }"></div>
+          <label>{{progress}}%</label>
+      </div>
+  <!-- </div> -->
+</template>
+<script>
+export default {
+    props:{
+        warningValue:{default: 50},
+        alertValue:{default: 80},
+        progress: {default: 20}
+    },
+    data(){
+        return{
+            fill: 'fill',
+            yellow: 'yellow',
+            red: 'red',
+        }
+    }
+}
+</script>
\ No newline at end of file