diff --git a/Step/wwwroot/assets/styles/base/colors.less b/Step/wwwroot/assets/styles/base/colors.less
index da1df6b6..c46b1960 100644
--- a/Step/wwwroot/assets/styles/base/colors.less
+++ b/Step/wwwroot/assets/styles/base/colors.less
@@ -31,6 +31,7 @@
 @color-darkish-blue: #002680;
 @color-darkish-blue-two: #004990;
 @color-clear-blue: #1791ff;
+@color-perrywinkle: #8eb5e2;
 @color-white: #fff;
 @color-input-light: #4b4b4b;
 @color-warm-grey: #878787;
diff --git a/Step/wwwroot/assets/styles/base/modals.less b/Step/wwwroot/assets/styles/base/modals.less
index 903df3ef..86e6fded 100644
--- a/Step/wwwroot/assets/styles/base/modals.less
+++ b/Step/wwwroot/assets/styles/base/modals.less
@@ -259,6 +259,9 @@ sans-serif;
     top: calc(~'50%' - @modal-create-maintenance-height /2);
     left: calc(~'50%' - @modal-create-maintenance-width /2);
     header{
+        font-size: 20px;
+        color: @color-cyan-blue;
+        padding-left: 23px;
         button.close {
             position: absolute;
             width: 28px;
@@ -288,7 +291,170 @@ sans-serif;
             color: @color-warm-grey;
         }
         .radiobutton{
-            
+            margin-top: 17px;
+            font-size: 18px;
+            label[for=datefixed]{
+                margin-right: 209px;
+            }
+            [type="radio"]:checked,
+            [type="radio"]:not(:checked) {
+                visibility: hidden;
+            }
+            [type="radio"]:checked + label,
+            [type="radio"]:not(:checked) + label
+            {
+                position: relative;
+                padding-left: 45px;
+                cursor: pointer;
+                line-height: 25px;
+                display: inline-block;
+                color: @color-cyan-blue;
+            }
+            [type="radio"]:checked + label:before,
+            [type="radio"]:not(:checked) + label:before {
+                content: '';
+                position: absolute;
+                left: 0;
+                top: 0;
+                width: 24px;
+                height: 24px;
+                border: 1px solid #ddd;
+                border-radius: 100%;
+                background: #fff;
+            }
+            [type="radio"]:checked + label:after,
+            [type="radio"]:not(:checked) + label:after {
+                content: '';
+                width: 18px;
+                height: 18px;
+                background: @color-perrywinkle;
+                position: absolute;
+                top: 4px;
+                left: 4px;
+                border-radius: 100%;
+                -webkit-transition: all 0.2s ease;
+                transition: all 0.2s ease;
+            }
+            [type="radio"]:checked + label{
+                font-weight: 600;
+            }
+            [type="radio"]:not(:checked) + label:after {
+                opacity: 0;
+                -webkit-transform: scale(0);
+                transform: scale(0);
+            }
+            [type="radio"]:checked + label:after {
+                opacity: 1;
+                -webkit-transform: scale(1);
+                transform: scale(1);
+            }
+        }
+    }
+    .title, .description{
+        display: flex;
+        flex-flow: column;
+        .title_lbl, .description_lbl{
+            margin-top: 22px;
+            margin-left: 24px;
+            font-size: 14px;
+            color: @color-warm-grey;
+            margin-bottom: 4px;
+        }
+        input{
+            font-size: 18px;
+            width: 416px;
+            height: 48px;
+            margin-left: 24px;
+            border-radius: 2px;
+            box-shadow: inset 0 1px 3px 0 @color-black-50;
+            border: solid 1px @color-silver;
+        }
+        textarea{
+            border-radius: 2px;
+            width: 808px;
+            height: 97px;
+            margin-left: 24px;
+            box-shadow: inset 0 1px 3px 0 @color-black-50;
+            border: solid 1px @color-silver;
+        }
+    }
+    .time{
+        display: flex;
+        flex-flow: row;
+        .date, .end_time{
+            display: flex;
+            flex-flow: column;
+            .date_lbl, .end_time_lbl{
+                margin-top: 22px;
+                margin-left: 24px;
+                font-size: 14px;
+                color: @color-warm-grey;
+                margin-bottom: 4px;
+            }
+            input[type=date], input[type=time]{
+                width: 209px;
+                height: 48px;
+                font-size: 18px;
+                margin-left: 24px;
+                border-radius: 2px;
+                box-shadow: inset 0 1px 3px 0 @color-black-50;
+                border: solid 1px @color-silver;
+            }
+            input[type="date"]::-webkit-inner-spin-button{
+                display: none;
+            }
+            input[type="date"]::-webkit-calendar-picker-indicator {
+                color: rgba(0, 0, 0, 0);
+                opacity: 1;
+                display: block;
+                background: url(/assets/icons/_png/calendar-25x25.png) no-repeat;
+                width: 20px;
+                height: 20px;
+                border-width: thin;
+            }
+            input[type=time]{
+                width: 112px;
+            }
+            input[type=time]::-webkit-inner-spin-button, 
+            input[type=time]::-webkit-outer-spin-button { 
+                display: none;
+            }
+        }
+    }
+    .repeat{
+        display: flex;
+        flex-flow: column;
+        .repeat_lbl{
+            margin-top: 22px;
+            margin-left: 24px;
+            font-size: 14px;
+            color: @color-warm-grey;
+            margin-bottom: 4px;
+        }
+        .repeat_input{
+            display: flex;
+            flex-flow: row;
+            input[type=text], select{
+                width: 56px;
+                height: 48px;
+                font-size: 18px;
+                margin-left: 24px;
+                border-radius: 2px;
+                box-shadow: inset 0 1px 3px 0 @color-black-50;
+                border: solid 1px @color-silver;
+            }
+            select{
+                width: 144px;
+                box-shadow: 0 1px 2px 0 @color-black-40;
+                margin-left: 16px;
+                padding-left: 16px;
+            }
+            select {
+                -webkit-appearance: none;
+                -moz-appearance: none;
+                appearance: none;
+                background: url(/assets/icons/_png/carets-up-down-blu-25x25.png) no-repeat 99% 50%;
+            }
         }
     }
 
diff --git a/Step/wwwroot/assets/styles/style.css b/Step/wwwroot/assets/styles/style.css
index 0d1beeb6..da851e6f 100644
--- a/Step/wwwroot/assets/styles/style.css
+++ b/Step/wwwroot/assets/styles/style.css
@@ -227,6 +227,11 @@
   top: calc(50% - 348px);
   left: calc(50% - 448px);
 }
+.modal.create-maintenance header {
+  font-size: 20px;
+  color: #002e6e;
+  padding-left: 23px;
+}
 .modal.create-maintenance header button.close {
   position: absolute;
   width: 28px;
@@ -255,6 +260,190 @@
   line-height: 1.29;
   color: #878787;
 }
+.modal.create-maintenance .typology .radiobutton {
+  margin-top: 17px;
+  font-size: 18px;
+}
+.modal.create-maintenance .typology .radiobutton label[for=datefixed] {
+  margin-right: 209px;
+}
+.modal.create-maintenance .typology .radiobutton [type="radio"]:checked,
+.modal.create-maintenance .typology .radiobutton [type="radio"]:not(:checked) {
+  visibility: hidden;
+}
+.modal.create-maintenance .typology .radiobutton [type="radio"]:checked + label,
+.modal.create-maintenance .typology .radiobutton [type="radio"]:not(:checked) + label {
+  position: relative;
+  padding-left: 45px;
+  cursor: pointer;
+  line-height: 25px;
+  display: inline-block;
+  color: #002e6e;
+}
+.modal.create-maintenance .typology .radiobutton [type="radio"]:checked + label:before,
+.modal.create-maintenance .typology .radiobutton [type="radio"]:not(:checked) + label:before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 24px;
+  height: 24px;
+  border: 1px solid #ddd;
+  border-radius: 100%;
+  background: #fff;
+}
+.modal.create-maintenance .typology .radiobutton [type="radio"]:checked + label:after,
+.modal.create-maintenance .typology .radiobutton [type="radio"]:not(:checked) + label:after {
+  content: '';
+  width: 18px;
+  height: 18px;
+  background: #8eb5e2;
+  position: absolute;
+  top: 4px;
+  left: 4px;
+  border-radius: 100%;
+  -webkit-transition: all 0.2s ease;
+  transition: all 0.2s ease;
+}
+.modal.create-maintenance .typology .radiobutton [type="radio"]:checked + label {
+  font-weight: 600;
+}
+.modal.create-maintenance .typology .radiobutton [type="radio"]:not(:checked) + label:after {
+  opacity: 0;
+  -webkit-transform: scale(0);
+  transform: scale(0);
+}
+.modal.create-maintenance .typology .radiobutton [type="radio"]:checked + label:after {
+  opacity: 1;
+  -webkit-transform: scale(1);
+  transform: scale(1);
+}
+.modal.create-maintenance .title,
+.modal.create-maintenance .description {
+  display: flex;
+  flex-flow: column;
+}
+.modal.create-maintenance .title .title_lbl,
+.modal.create-maintenance .description .title_lbl,
+.modal.create-maintenance .title .description_lbl,
+.modal.create-maintenance .description .description_lbl {
+  margin-top: 22px;
+  margin-left: 24px;
+  font-size: 14px;
+  color: #878787;
+  margin-bottom: 4px;
+}
+.modal.create-maintenance .title input,
+.modal.create-maintenance .description input {
+  font-size: 18px;
+  width: 416px;
+  height: 48px;
+  margin-left: 24px;
+  border-radius: 2px;
+  box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5);
+  border: solid 1px #bbbcbc;
+}
+.modal.create-maintenance .title textarea,
+.modal.create-maintenance .description textarea {
+  border-radius: 2px;
+  width: 808px;
+  height: 97px;
+  margin-left: 24px;
+  box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5);
+  border: solid 1px #bbbcbc;
+}
+.modal.create-maintenance .time {
+  display: flex;
+  flex-flow: row;
+}
+.modal.create-maintenance .time .date,
+.modal.create-maintenance .time .end_time {
+  display: flex;
+  flex-flow: column;
+}
+.modal.create-maintenance .time .date .date_lbl,
+.modal.create-maintenance .time .end_time .date_lbl,
+.modal.create-maintenance .time .date .end_time_lbl,
+.modal.create-maintenance .time .end_time .end_time_lbl {
+  margin-top: 22px;
+  margin-left: 24px;
+  font-size: 14px;
+  color: #878787;
+  margin-bottom: 4px;
+}
+.modal.create-maintenance .time .date input[type=date],
+.modal.create-maintenance .time .end_time input[type=date],
+.modal.create-maintenance .time .date input[type=time],
+.modal.create-maintenance .time .end_time input[type=time] {
+  width: 209px;
+  height: 48px;
+  font-size: 18px;
+  margin-left: 24px;
+  border-radius: 2px;
+  box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5);
+  border: solid 1px #bbbcbc;
+}
+.modal.create-maintenance .time .date input[type="date"]::-webkit-inner-spin-button,
+.modal.create-maintenance .time .end_time input[type="date"]::-webkit-inner-spin-button {
+  display: none;
+}
+.modal.create-maintenance .time .date input[type="date"]::-webkit-calendar-picker-indicator,
+.modal.create-maintenance .time .end_time input[type="date"]::-webkit-calendar-picker-indicator {
+  color: rgba(0, 0, 0, 0);
+  opacity: 1;
+  display: block;
+  background: url(/assets/icons/_png/calendar-25x25.png) no-repeat;
+  width: 20px;
+  height: 20px;
+  border-width: thin;
+}
+.modal.create-maintenance .time .date input[type=time],
+.modal.create-maintenance .time .end_time input[type=time] {
+  width: 112px;
+}
+.modal.create-maintenance .time .date input[type=time]::-webkit-inner-spin-button,
+.modal.create-maintenance .time .end_time input[type=time]::-webkit-inner-spin-button,
+.modal.create-maintenance .time .date input[type=time]::-webkit-outer-spin-button,
+.modal.create-maintenance .time .end_time input[type=time]::-webkit-outer-spin-button {
+  display: none;
+}
+.modal.create-maintenance .repeat {
+  display: flex;
+  flex-flow: column;
+}
+.modal.create-maintenance .repeat .repeat_lbl {
+  margin-top: 22px;
+  margin-left: 24px;
+  font-size: 14px;
+  color: #878787;
+  margin-bottom: 4px;
+}
+.modal.create-maintenance .repeat .repeat_input {
+  display: flex;
+  flex-flow: row;
+}
+.modal.create-maintenance .repeat .repeat_input input[type=text],
+.modal.create-maintenance .repeat .repeat_input select {
+  width: 56px;
+  height: 48px;
+  font-size: 18px;
+  margin-left: 24px;
+  border-radius: 2px;
+  box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5);
+  border: solid 1px #bbbcbc;
+}
+.modal.create-maintenance .repeat .repeat_input select {
+  width: 144px;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
+  margin-left: 16px;
+  padding-left: 16px;
+}
+.modal.create-maintenance .repeat .repeat_input select {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background: url(/assets/icons/_png/carets-up-down-blu-25x25.png) no-repeat 99% 50%;
+}
 .row {
   display: flex;
   width: 100%;
diff --git a/Step/wwwroot/src/modules/create-maintenance.ts b/Step/wwwroot/src/modules/create-maintenance.ts
new file mode 100644
index 00000000..40b8ae78
--- /dev/null
+++ b/Step/wwwroot/src/modules/create-maintenance.ts
@@ -0,0 +1,8 @@
+import Vue from "vue";
+import Component from "vue-class-component";
+import { Modal, ModalHelper } from "./base-components";
+
+@Component({ name: "createMaintenance", components: { modal: Modal } })
+export default class CreateMaintenance extends Vue {
+    public test: string = "datefixed";
+}
\ No newline at end of file
diff --git a/Step/wwwroot/src/modules/create-maintenance.vue b/Step/wwwroot/src/modules/create-maintenance.vue
index fad69ac5..ae26e8f8 100644
--- a/Step/wwwroot/src/modules/create-maintenance.vue
+++ b/Step/wwwroot/src/modules/create-maintenance.vue
@@ -4,11 +4,10 @@
     <div class="typology">
         <label class="typology_lbl">{{'create_maintenance_lbl_typology' | localize("Tipologia")}}</label>
         <div class="radiobutton">
-            <label><input type="radio">Evento Macchina</label>
-            <label><input type="radio">Temporale</label>
+            <input type="radio" id="datefixed" name="radio-group" v-model="test" value="datefixed"><label for="datefixed">Data Fissa</label>
+            <input type="radio" id="time" name="radio-group" v-model="test" value="time"><label for="time">Temporale</label>
         </div>
     </div>
-    <div>
         <div class="title">
             <label class="title_lbl">{{'create_maintenance_lbl_title' | localize("Titolo")}}</label>
             <input type="text">
@@ -17,26 +16,23 @@
             <label class="description_lbl">{{'create_maintenance_lbl_description' | localize("Descrizione")}}</label>
             <textarea></textarea>
         </div>
-        <div class="time">
+        <div class="time" v-if="test == 'datefixed'">
             <div class="date">
                 <label class="date_lbl">{{'create_maintenance_lbl_date' | localize("Data")}}</label>
                 <input type="date">
             </div>
-            <div class="start_time">
-                <label class="start_time_lbl">{{'create_maintenance_lbl_start_time' | localize("Ora inizio")}}</label>
-                <input type="time">
-            </div>
             <div class="end_time">
                 <label class="end_time_lbl">{{'create_maintenance_lbl_end_time' | localize("Ora fine")}}</label>
                 <input type="time">
             </div>
         </div>
-        <div class="repeat">
+        <div class="repeat" v-if="test == 'time'">
             <label class="repeat_lbl">{{'create_maintenance_lbl_repeat' | localize("Ripeti ogni")}}</label>
-            <input type="text">
-            <select><option>giorni</option></select>
+            <div class="repeat_input">
+                <input type="text">
+                <select><option>giorni</option></select>
+            </div>
         </div>
-    </div>
     <footer>
       <div class="pull-right">
         <button class="btn">{{'create_maintenance_btn_cancel' | localize("Annulla")}}</button>
@@ -45,9 +41,4 @@
     </footer>
   </modal>
 </template>
-<script>
-import { Modal, ModalHelper } from "./base-components";
-export default {
-  components:{modal: Modal}
-}
-</script>
\ No newline at end of file
+<script src="./create-maintenance.ts" lang="ts"></script>
\ No newline at end of file