diff --git a/README.md b/README.md
index 25132f28..bc888aad 100644
--- a/README.md
+++ b/README.md
@@ -12,7 +12,7 @@
       <strong>Take a look at the Documentation &raquo</strong>
     </a>
     <br><br>
-    <a href="http://falko.surge.sh/#/">Visit Falko</a>
+    <a href="http://falko.solutions">Visit Falko</a>
     &middot;
     <a href="https://github.com/falko-org/Falko-API">API Repository</a>
     &middot;
diff --git a/package.json b/package.json
index c9b5423b..17a6e86c 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,7 @@
     "vue-router": "^2.8.1",
     "vue-windows": "^0.1.3",
     "vuedraggable": "^2.23.2",
-    "vuetify": "^1.5.18",
+    "vuetify": "^2.1.1",
     "vuex": "^3.1.1",
     "vuex-persist": "^0.3.0"
   },
diff --git a/src/App.vue b/src/App.vue
index 21fcc1b7..91a9b854 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -41,17 +41,10 @@ export default {
 </script>
 
 <style>
-input {
-  border: none;
-  border-radius: 0;
-  border-bottom: solid #c0c0c0 thin;
-  padding-left: 0;
-  color: #333;
-  width: 100%;  
-}
 
-input:focus {
-  outline: 0;
+.v-label {
+  left: 0px !important;
+  right: auto !important;
 }
 
 #app {
diff --git a/src/components/Authentication/Login.vue b/src/components/Authentication/Login.vue
index a562ca21..02855c72 100644
--- a/src/components/Authentication/Login.vue
+++ b/src/components/Authentication/Login.vue
@@ -23,25 +23,18 @@
       </div>
 
       <form id="loginForm"  @submit.prevent="() => login()" name="wrong-credentials">
-        <div class="form-group">
-          <input  type="email"
-          class="form-control"
-          placeholder="Email"
-          name="email"
-          v-model="email"
-          v-validate="'email'" >
-          <p class="text-danger" v-if="errors.has('email')">{{ errors.first('email') }}</p>
-        </div>
+          <v-text-field
+            label="Email"
+            v-model="email"
+            :rules="[rules.required, rules.validEmail]"
+          ></v-text-field>
 
-        <div class="form-group">
-          <input  type="password"
-          class="form-control"
-          placeholder="Password"
-          name="password"
-          v-model="password"
-          v-validate="'required|min:6'">
-          <p class="text-danger" v-if="errors.has('password')">{{ errors.first('password') }}</p>
-        </div>
+          <v-text-field
+            label="Password"
+            v-model="password"
+            :type="'password'"
+            :rules="[rules.required, rules.min]"
+          ></v-text-field>
 
         <div class="text-center">
           <button type="submit" class="btn btn-primary falko-button" id="loginButton" >Log In</button>
@@ -64,7 +57,13 @@ export default {
     return {
       email: '',
       password: '',
-      alert: false
+      alert: false,
+      rules: {
+        required: value => !!value || 'Required.',
+        min: v => v.length >= 6 || 'Min 6 characters',
+        emailMatch: () => ('Incorrect email or password'),
+        validEmail: v => /.+@.+/.test(v) || 'E-mail must be valid',
+      }
     };
   },
 
@@ -98,13 +97,6 @@ export default {
   max-width: 20em;
 }
 
-#loginForm input {
-  border: none;
-  border-radius: 0;
-  border-bottom: solid #c0c0c0 thin;
-  padding-left: 0;
-}
-
 #falkoLogoLogin {
   width: 11em;
   margin: 2.5em 0;
diff --git a/src/components/Authentication/Register.vue b/src/components/Authentication/Register.vue
index 9bb41e83..a5344991 100644
--- a/src/components/Authentication/Register.vue
+++ b/src/components/Authentication/Register.vue
@@ -4,45 +4,36 @@
       <img src="../../assets/logo.png" class="rounded mx-auto d-block img-fluid" id="falkoLogoRegister">
       <form id="registerForm" @submit.prevent="register()"  data-vv-scope="form-register">
         <div class="form-group">
-          <input  type="text"
-                  class="form-control"
-                  aria-describedby="userHelp"
-                  placeholder="Username"
-                  name="username"
-                  v-validate="'required|min:3'"
-                  v-model="username">
-          <p class="text-danger" v-if="errors.has('form-register.username')">{{ errors.first('form-register.username') }}</p>
+          <v-text-field
+            label="Username"
+            v-model="username"
+            :rules="[rules.required, rules.minName]"
+          ></v-text-field>
           <p class="text-danger" v-if="errors.has('name-taken')">{{ errors.first('name-taken') }}</p>
         </div>
         <div class="form-group">
-          <input  type="email"
-                  class="form-control"
-                  aria-describedby="emailHelp"
-                  name="email"
-                  placeholder="Enter email"
-                  v-model="email"
-                  v-validate="'required|email'">
-          <p class="text-danger" v-if="errors.has('form-register.email')">{{ errors.first('form-register.email') }}</p>
+          <v-text-field
+            label="Enter Email"
+            v-model="email"
+            :rules="[rules.required, rules.validEmail]"
+          ></v-text-field>
           <p class="text-danger" v-if="errors.has('email-taken')">{{ errors.first('email-taken') }}</p>
         </div>
         <div class="form-group">
-          <input  type="password"
-                  class="form-control"
-                  placeholder="Password"
-                  ref="password"
-                  v-model="password"
-                  name="password"
-                  v-validate="'required|min:6'">
-          <p class="text-danger" v-if="errors.has('form-register.password')">{{ errors.first('form-register.password') }}</p>
+          <v-text-field
+            label="Password"
+            v-model="password"
+            :type="'password'"
+            :rules="[rules.required, rules.minPassword]"
+          ></v-text-field>
         </div>
         <div class="form-group">
-          <input  type="password"
-                  class="form-control"
-                  placeholder="Confirm Password"
-                  v-model="password_confirmation"
-                  name="password"
-                  v-validate="'confirmed:password'">
-          <p class="text-danger" v-if="errors.has('form-register.password_confirmation')">{{ errors.first('form-register.password_confirmation') }}</p>
+          <v-text-field
+            label="Confirm Password"
+            v-model="password_confirmation"
+            :type="'password'"
+            :rules="[rules.required, rules.minPassword, rules.confirmPasswordMatch]"
+          ></v-text-field>
         </div>
         <div class="text-center">
           <button type="submit" :disabled="disableRegisterButton()" class="btn btn-primary falko-button" id="">Register</button>
@@ -63,6 +54,14 @@ export default {
       username: '',
       password: '',
       password_confirmation: '',
+      rules: {
+        required: value => !!value || 'Required.',
+        minPassword: v => v.length >= 6 || 'Min 6 characters',
+        minName: v => v.length >= 3 || 'Min 3 characters',
+        emailMatch: () => ('Incorrect email or password'),
+        validEmail: v => /.+@.+/.test(v) || 'E-mail must be valid',
+        confirmPasswordMatch: () => (this.password === this.password_confirmation) || "Passwords doesn't match"
+      }
     };
   },
 
@@ -129,13 +128,6 @@ export default {
   max-width: 20em;
 }
 
-#registerForm input {
-  border: none;
-  border-radius: 0;
-  border-bottom: solid #c0c0c0 thin;
-  padding-left: 0;
-}
-
 #falkoLogoRegister {
   width: 11em;
   margin: 1.3em 0;
diff --git a/src/components/Issues/AddIssue.vue b/src/components/Issues/AddIssue.vue
index 693b6122..a4ab9c6c 100644
--- a/src/components/Issues/AddIssue.vue
+++ b/src/components/Issues/AddIssue.vue
@@ -17,14 +17,24 @@
 						</div>
 						<div class=" row modal-body">
               <div class="col">
-                <p><label>Name</label></p>
-                <p><input type="text" v-model="name" id="issueName" placeholder="Issue Title" name="name" v-validate="'required'">
-									<p class="text-danger" v-if="errors.has('name')">{{ errors.first('name') }}</p>
-								</input><br></p>
-                <p><label>Body</label></p>
-                <input type="text" v-model="body" placeholder="Issue Body..." name="body" v-validate="'required'">
-								<p class="text-danger" v-if="errors.has('body')">{{ errors.first('body') }}</p>
-							</input><br>
+				<v-text-field
+					label="Name"
+					v-model="name"
+					:rules="[rules.required]"
+				></v-text-field>
+				<p class="text-danger" v-if="errors.has('name')">{{ errors.first('name') }}</p>
+				<br>
+				
+				<v-textarea
+					name="input-7-4"
+					v-model="body"
+					label="Issue Body"
+					rows="2"
+					row-height="20"
+					:rules="[rules.required]"
+				></v-textarea>
+				<p class="text-danger" v-if="errors.has('body')">{{ errors.first('body') }}</p>
+				<br>
               </div>
 						</div>
 						<div class="modal-footer">
@@ -46,7 +56,10 @@ export default {
   data () {
     return {
       name: '',
-      body : ''
+	  body : '',
+	  rules: {
+        required: value => !!value || 'Required.',
+      }
     }
 	},
 
diff --git a/src/components/Issues/EditIssue.vue b/src/components/Issues/EditIssue.vue
index c5f1c98d..cd22404e 100644
--- a/src/components/Issues/EditIssue.vue
+++ b/src/components/Issues/EditIssue.vue
@@ -15,22 +15,26 @@
           </div>
           <div class="modal-body row">
             <div class="col">
-              <p><label> Name </label></p>
-              <input type = "text" v-model="name" placeholder="Name" name="name" v-validate="'required'">
+              <v-text-field
+                label="Name"
+                v-model="name"
+                :rules="[rules.required]"
+              ></v-text-field>
               <p class="text-danger" v-if="errors.has('name')">{{ errors.first('name') }}</p>
-            </input><br>
-              <p><label> Description </label></p>
-              <input type = "text" v-model="body" placeholder="Description" name="body" v-validate="'required'">
+              <br>
+              <v-text-field
+                label="Description"
+                v-model="body"
+                :rules="[rules.required]"
+              ></v-text-field>
               <p class="text-danger" v-if="errors.has('body')">{{ errors.first('body') }}</p>
-            </input><br>
+              <br>
             </div>
             <div class="col">
-                <div class="row justify-content-center">
-                  <p><label> Assignees </label></p>
-                </div>
-                <div class="row">
-                  <input type="text" v-model="search" placeholder="search...">
-                </div>
+              <v-text-field
+                label="Assignees"
+                v-model="search"
+              ></v-text-field>
               <div class="col" v-if="search != ''">
                 <div class="row" v-for="contributor in filteredContribs">
                 <label class="custom-control custom-checkbox">
@@ -66,7 +70,10 @@ export default {
       number: "",
       contributors: [],
       selectedContribs: [],
-      search: ""
+      search: "",
+      rules: {
+        required: value => !!value || 'Required.',
+      }
     }
   },
 
diff --git a/src/components/Projects/AddProject.vue b/src/components/Projects/AddProject.vue
index 38da4b2d..a652c3f1 100644
--- a/src/components/Projects/AddProject.vue
+++ b/src/components/Projects/AddProject.vue
@@ -15,19 +15,18 @@
             </button>
           </div>
           <div class="modal-body" data-vv-scope="modal-project">
-            <p><label>Name</label></p>
-            <p><input type = "text"
-                      name="name"
-                      v-validate="'required'"
-                      v-model="name">
-                <p class="text-danger" v-if="errors.has('name')">{{ errors.first('name') }}</p>
-                <br>
-            </p>
-            <p><label>Description</label></p>
-            <input type = "text"
-                   name = "description"
-                   v-validate="'required'"
-                   v-model="description">
+            <v-text-field
+              label="Name"
+              v-model="name"
+              :rules="[rules.required]"
+            ></v-text-field>
+            <p class="text-danger" v-if="errors.has('name')">{{ errors.first('name') }}</p>
+            <br>
+            <v-text-field
+              label="Description"
+              v-model="description"
+              :rules="[rules.required]"
+            ></v-text-field>
             <p class="text-danger" v-if="errors.has('description')">{{ errors.first('description') }}</p>
             <br>
           </div>
@@ -52,6 +51,9 @@ export default {
     return {
       name: '',
       description: '',
+      rules: {
+        required: value => !!value || 'Required.',
+      }
     };
   },
 
diff --git a/src/components/Projects/EditProject.vue b/src/components/Projects/EditProject.vue
index ddd7a517..1705e074 100644
--- a/src/components/Projects/EditProject.vue
+++ b/src/components/Projects/EditProject.vue
@@ -16,21 +16,20 @@
             <div class="col">
               <div class="row">
                 <div class="col">
-                  <p><label > Name </label></p>
-                  <p><input type = "text"
-                            name="name"
-                            v-validate="'required'"
-                            v-model="name">
-                      <p class="text-danger" v-if="errors.has('name')">{{ errors.first('name') }}</p>
-                      <br>
-                  </p>
+                    <v-text-field
+                      label="Name"
+                      v-model="name"
+                      :rules="[rules.required]"
+                    ></v-text-field>
+                    <p class="text-danger" v-if="errors.has('name')">{{ errors.first('name') }}</p>
+                    <br>
                 </div>
                 <div class="col">
-                  <p><label> Description </label></p>
-                  <input type = "text"
-                         name = "description"
-                         v-validate="'required'"
-                         v-model="description">
+                  <v-text-field
+                    label="Description"
+                    v-model="description"
+                    :rules="[rules.required]"
+                  ></v-text-field>
                   <p class="text-danger" v-if="errors.has('description')">{{ errors.first('description') }}</p>
                   <br>
                 </div>
@@ -69,6 +68,9 @@ export default{
       name: '',
       description: '',
       isScoring: '',
+      rules: {
+        required: value => !!value || 'Required.',
+      }
     };
   },
   computed: {
diff --git a/src/components/Releases/AddRelease.vue b/src/components/Releases/AddRelease.vue
index b486b6fb..d52168d5 100644
--- a/src/components/Releases/AddRelease.vue
+++ b/src/components/Releases/AddRelease.vue
@@ -24,21 +24,27 @@
           </div>
           <div class="row modal-body align-content-end">
             <div class="col-6">
-              <label>Name</label>
-              <input type="text" v-model="name" id="releaseName" placeholder="Release Name" name="name" v-validate="'required'">
-                <p class="text-danger" v-if="errors.has('name')">{{ errors.first('name') }}</p>
-              </input>
+              <v-text-field
+                label="Name"
+                v-model="name"
+                :rules="[rules.required]"
+              ></v-text-field>
+              <p class="text-danger" v-if="errors.has('name')">{{ errors.first('name') }}</p>
               <br>
 
-              <label>Description</label>
-              <input type="text" v-model="description" placeholder="Release description..." name="description" v-validate="'required'">
+              <v-text-field
+                label="Release description"
+                v-model="description"
+                :rules="[rules.required]"
+              ></v-text-field>
               <p class="text-danger" v-if="errors.has('description')">{{ errors.first('description') }}</p>
-            </input><br>
+              <br>
             </div>
             <div class="col-6">
               
               <label>Initial Date</label>
               <input type="date" v-model="initialDate" name="Initial Date" ref="Initial Date" min="2" v-validate="'date_format:YYYY-MM-DD'"/><br>
+
               <label>Final Date</label>
               <input type="date" v-model="finalDate" v-bind:min="this.initialDate" name="Final Date" v-validate="'date_format:YYYY-MM-DD|after:Initial Date'">
               <p class="text-danger" v-if="errors.has('Final Date')">{{ errors.first('Final Date') }}</p>
@@ -68,6 +74,9 @@ export default {
       initialDate: '',
       finalDate: '',
       amount_of_sprints: 0,
+      rules: {
+        required: value => !!value || 'Required.',
+      }
     };
   },
   computed: {
diff --git a/src/components/Releases/EditRelease.vue b/src/components/Releases/EditRelease.vue
index 8fff3773..5269e974 100644
--- a/src/components/Releases/EditRelease.vue
+++ b/src/components/Releases/EditRelease.vue
@@ -15,16 +15,20 @@
           </div>
           <div class="row modal-body">
             <div class="col-6">
-              <label>Name</label>
-              <input type="text" v-model="name" id="releaseName" placeholder="Release Name" name="name" v-validate="'required'">
-                <p class="text-danger" v-if="errors.has('name')">{{ errors.first('name') }}</p>
-              </input>
+              <v-text-field
+                label="Release Name"
+                v-model="name"
+                :rules="[rules.required]"
+              ></v-text-field>
+              <p class="text-danger" v-if="errors.has('name')">{{ errors.first('name') }}</p>
               <br>
-
-              <label>Description</label>
-              <input type="text" v-model="description" placeholder="Release description..." name="description" v-validate="'required'">
+              <v-text-field
+                label="Release Description"
+                v-model="description"
+                :rules="[rules.required]"
+              ></v-text-field>
               <p class="text-danger" v-if="errors.has('description')">{{ errors.first('description') }}</p>
-            </input><br>
+              <br>
             </div>
             <div class="col-6">
               
@@ -60,6 +64,9 @@ export default {
       description: '',
       initialDate: '',
       finalDate: '',
+      rules: {
+        required: value => !!value || 'Required.',
+      }
     };
   },
   computed: {
diff --git a/src/components/Retrospective/AddRetrospective.vue b/src/components/Retrospective/AddRetrospective.vue
index 99174389..ff8b67e9 100644
--- a/src/components/Retrospective/AddRetrospective.vue
+++ b/src/components/Retrospective/AddRetrospective.vue
@@ -22,10 +22,13 @@
             <list parent="PositivePoints" v-on:listUpdated="updateList"></list>
             <list parent="NegativePoints" v-on:listUpdated="updateList"></list>
             <list parent="Improvements" v-on:listUpdated="updateList"></list>
-            <textarea class="text-justify"
-            placeholder="Input your sprint report..."
-            v-model="sprintReport"
-            />
+            <v-textarea
+              name="input-7-4"
+              v-model="sprintReport"
+              label="Sprint Report"
+              rows="2"
+              row-height="20"
+            ></v-textarea>
           </div>
           <div class="modal-footer">
             <button class="btn btn-info btn-md falko-button"
@@ -53,10 +56,13 @@
                   <list parent="PositivePoints" v-on:listUpdated="updateList"></list>
                   <list parent="NegativePoints" v-on:listUpdated="updateList"></list>
                   <list parent="Improvements" v-on:listUpdated="updateList"></list>
-                  <textarea class="text-justify"
-                  placeholder="Input your sprint report..."
-                  v-model="sprintReport"
-                  />
+                  <v-textarea
+                    name="input-7-4"
+                    v-model="sprintReport"
+                    label="Sprint Report"
+                    rows="2"
+                    row-height="20"
+                  ></v-textarea>
                 </div>
                 <div class="modal-footer">
                   <button class="btn btn-info btn-md falko-button"
@@ -155,15 +161,6 @@ export default {
 
 <style scoped>
 
-textarea {
-  width: 100%;
-  height: 15em;
-  padding: 1em;
-  background-color: white;
-  border: 1px solid rgba(0, 0, 0, 0.25);
-  color: #444;
-}
-
 input::placeholder {
   color: #777;
 }
diff --git a/src/components/Retrospective/EditRetrospective.vue b/src/components/Retrospective/EditRetrospective.vue
index 7f86c7ea..807dedbf 100644
--- a/src/components/Retrospective/EditRetrospective.vue
+++ b/src/components/Retrospective/EditRetrospective.vue
@@ -22,10 +22,13 @@
             <list parent="PositivePoints" v-on:listUpdated="updateList"></list>
             <list parent="NegativePoints" v-on:listUpdated="updateList"></list>
             <list parent="Improvements" v-on:listUpdated="updateList"></list>
-            <textarea class="text-justify"
-            placeholder="Input your sprint report..."
-            v-model="sprintReport"
-            />
+            <v-textarea
+              name="input-7-4"
+              v-model="sprintReport"
+              label="Sprint Report"
+              rows="2"
+              row-height="20"
+            ></v-textarea>
           </div>
           <div class="modal-footer">
             <button class="btn btn-info btn-md falko-button" v-on:click="editRetrospective()" data-dismiss="modal">Save</button>
@@ -105,14 +108,14 @@ export default {
 
 <style scoped>
 
-textarea {
+/* textarea {
   width: 100%;
   height: 15em;
   padding: 1em;
   background-color: white;
   border: 1px solid rgba(0, 0, 0, 0.25);
   color: #444;
-}
+} */
 
 input::placeholder {
   color: #777;
diff --git a/src/components/Retrospective/List.vue b/src/components/Retrospective/List.vue
index a4cf51a2..ee19f6df 100644
--- a/src/components/Retrospective/List.vue
+++ b/src/components/Retrospective/List.vue
@@ -72,13 +72,6 @@ export default {
 </script>
 
 <style scoped>
-input {
-  width: 100%;
-  padding: 1em;
-  background-color: #86B1B1;
-  border: none;
-  color: white;
-}
 
 input::placeholder {
   color: rgba(255, 255, 255, 0.7);
diff --git a/src/components/Revision/ListRevision.vue b/src/components/Revision/ListRevision.vue
index 117e34f3..4d567d09 100644
--- a/src/components/Revision/ListRevision.vue
+++ b/src/components/Revision/ListRevision.vue
@@ -66,13 +66,6 @@ export default {
 </script>
 
 <style scoped>
-input {
-  width: 100%;
-  padding: 1em;
-  background-color: #86B1B1;
-  border: none;
-  color: white;
-}
 
 input::placeholder {
   color: rgba(255, 255, 255, 0.7);
diff --git a/src/components/Sprints/AddSprint.vue b/src/components/Sprints/AddSprint.vue
index 9fb1a5a4..4bcb82ed 100644
--- a/src/components/Sprints/AddSprint.vue
+++ b/src/components/Sprints/AddSprint.vue
@@ -1,9 +1,13 @@
 <template>
   <div>
     <div>
-      <button type="button" class="btn btn-info btn-md falko-button" id="addButton" data-toggle="modal" data-target="#addSprintModal">
-        Add a Sprint
-      </button>
+      <button
+        type="button"
+        class="btn btn-info btn-md falko-button"
+        id="addButton"
+        data-toggle="modal"
+        data-target="#addSprintModal"
+      >Add a Sprint</button>
     </div>
 
     <div class="modal fade" id="addSprintModal" role="dialog">
@@ -17,33 +21,52 @@
           </div>
           <div class="row modal-body">
             <div class="col-6">
-              <label>Name</label>
-              <input type="text" placeholder="Sprint name..." v-model="name" name="name" v-validate="'required'"/>
+              <v-text-field label="Name" v-model="name" name="name" :rules="[rules.required]" />
 
-              <label>Description</label>
-              <input type="text" placeholder="Sprint description..." v-model="description"/>
+              <v-text-field label="Description" v-model="description" />
             </div>
 
             <div class="col-6">
               <label>Initial Date</label>
-              <input type="date" name="Initial Date" ref="Initial Date" v-model="sprintInitialDate" 
-                     v-bind:min="this.releaseInitialDate" v-bind:max="this.releaseFinalDate"
-                     v-validate="'required|date_format:YYYY-MM-DD|'"
+              <input
+                type="date"
+                name="Initial Date"
+                ref="Initial Date"
+                v-model="sprintInitialDate"
+                v-bind:min="this.releaseInitialDate"
+                v-bind:max="this.releaseFinalDate"
+                v-validate="'required|date_format:YYYY-MM-DD|'"
               />
 
               <label>Final Date</label>
-              <input type="date" name="Final Date" v-model="sprintFinalDate" v-bind:min="this.sprintInitialDate"
-                     v-bind:max="this.releaseFinalDate" required v-validate="'date_format:YYYY-MM-DD|after:Initial Date'"
+              <input
+                type="date"
+                name="Final Date"
+                v-model="sprintFinalDate"
+                v-bind:min="this.sprintInitialDate"
+                v-bind:max="this.releaseFinalDate"
+                required
+                v-validate="'date_format:YYYY-MM-DD|after:Initial Date'"
               />
-              <p class="text-danger" v-if="errors.has('Final Date')">{{ errors.first('Final Date') }}</p>
+              <p
+                class="text-danger"
+                v-if="errors.has('Final Date')"
+              >{{ errors.first('Final Date') }}</p>
             </div>
           </div>
           <div class="modal-footer">
-            <button type="button" :disabled="errors.has('name') || errors.has('Initial Date') || errors.has('Final Date')" 
-                    class="btn btn-info btn-md falko-button" v-on:click="addSprint" data-dismiss="modal">
-              Save
-            </button>
-            <button type="button" class="btn btn-info btn-md falko-button-grey" data-dismiss="modal" >Close</button>
+            <button
+              type="button"
+              :disabled="errors.has('name') || errors.has('Initial Date') || errors.has('Final Date')"
+              class="btn btn-info btn-md falko-button"
+              v-on:click="addSprint"
+              data-dismiss="modal"
+            >Save</button>
+            <button
+              type="button"
+              class="btn btn-info btn-md falko-button-grey"
+              data-dismiss="modal"
+            >Close</button>
           </div>
         </div>
       </div>
@@ -52,19 +75,22 @@
 </template>
 
 <script>
-import { mapState } from 'vuex';
-import { EventBus } from '../../event-bus';
-import { HTTP } from '../../http-common';
+import { mapState } from "vuex";
+import { EventBus } from "../../event-bus";
+import { HTTP } from "../../http-common";
 
 export default {
-  name: 'addSprintBody',
+  name: "addSprintBody",
 
   data() {
     return {
-      name: '',
-      description: '',
-      sprintInitialDate: '',
-      sprintFinalDate: '',
+      rules: {
+        required: value => !!value || "Required."
+      },
+      name: "",
+      description: "",
+      sprintInitialDate: "",
+      sprintFinalDate: ""
     };
   },
 
@@ -73,8 +99,8 @@ export default {
       token: state => state.auth.token,
       releaseId: state => state.clientStatus.releaseId,
       releaseInitialDate: state => state.clientStatus.releaseInitialDate,
-      releaseFinalDate: state => state.clientStatus.releaseFinalDate,
-    }),
+      releaseFinalDate: state => state.clientStatus.releaseFinalDate
+    })
   },
 
   methods: {
@@ -82,27 +108,31 @@ export default {
       const _this = this;
       const headers = { Authorization: this.token };
 
-      HTTP.post(`releases/${this.releaseId}/sprints`, {
-        sprint: {
-          name: this.name,
-          description: this.description,
-          initial_date: this.sprintInitialDate,
-          final_date: this.sprintFinalDate,
-          release_id: this.releaseId,
+      HTTP.post(
+        `releases/${this.releaseId}/sprints`,
+        {
+          sprint: {
+            name: this.name,
+            description: this.description,
+            initial_date: this.sprintInitialDate,
+            final_date: this.sprintFinalDate,
+            release_id: this.releaseId
+          }
         },
-      }, { headers })
+        { headers }
+      )
         .then(() => {
-          this.name = '';
-          this.description = '';
-          this.sprintInitialDate = '';
-          this.sprintFinalDate = '';
-          EventBus.$emit('added-sprint', 1);
+          this.name = "";
+          this.description = "";
+          this.sprintInitialDate = "";
+          this.sprintFinalDate = "";
+          EventBus.$emit("added-sprint", 1);
         })
-        .catch((e) => {
-          _this.errors.add('wrong-credentials', 'Problem with credentials');
+        .catch(e => {
+          _this.errors.add("wrong-credentials", "Problem with credentials");
         });
-    },
-  },
+    }
+  }
 };
 </script>
 
@@ -111,7 +141,7 @@ export default {
   margin-top: 2em;
 }
 
-.modal-body{
+.modal-body {
   position: relative;
   top: 5px;
 }
diff --git a/src/components/Sprints/EditSprint.vue b/src/components/Sprints/EditSprint.vue
index db277958..0ea80986 100644
--- a/src/components/Sprints/EditSprint.vue
+++ b/src/components/Sprints/EditSprint.vue
@@ -1,10 +1,14 @@
 <template>
-  <div class = "editSprintBody">
-    <button type="button" class="btn btn-info btn-md falko-button" id="editbutton" data-toggle="modal" data-target="#editSprintModal">
-      Edit
-    </button>
+  <div class="editSprintBody">
+    <button
+      type="button"
+      class="btn btn-info btn-md falko-button"
+      id="editbutton"
+      data-toggle="modal"
+      data-target="#editSprintModal"
+    >Edit</button>
 
-    <div class="modal fade" id ="editSprintModal" role="dialog">
+    <div class="modal fade" id="editSprintModal" role="dialog">
       <div class="modal-dialog">
         <div class="modal-content">
           <div class="modal-header">
@@ -15,33 +19,58 @@
           </div>
           <div class="row modal-body">
             <div class="col-6">
-              <label>Name</label>
-              <input type="text" placeholder="Sprint name..." v-model="name" name="name" v-validate="'required'"/>
+              <v-text-field
+                label="Name"
+                type="text"
+                v-model="name"
+                name="name"
+                :rules="[rules.required]"
+              />
 
-              <label>Description</label>
-              <input type="text" placeholder="Sprint description..." v-model="description"/>
+              <v-text-field label="Description" type="text" v-model="description" />
             </div>
 
             <div class="col-6">
               <label>Initial Date</label>
-              <input type="date" name="Initial Date" ref="Initial Date" v-model="sprintInitialDate" 
-                     v-bind:min="this.releaseInitialDate" v-bind:max="this.releaseFinalDate"
-                     v-validate="'required|date_format:YYYY-MM-DD|'"
+              <input
+                type="date"
+                name="Initial Date"
+                ref="Initial Date"
+                v-model="sprintInitialDate"
+                v-bind:min="this.releaseInitialDate"
+                v-bind:max="this.releaseFinalDate"
+                v-validate="'required|date_format:YYYY-MM-DD|'"
               />
 
               <label>Final Date</label>
-              <input type="date" name="Final Date" v-model="sprintFinalDate" v-bind:min="this.sprintInitialDate"
-                     v-bind:max="this.releaseFinalDate" required v-validate="'date_format:YYYY-MM-DD|after:Initial Date'"
+              <input
+                type="date"
+                name="Final Date"
+                v-model="sprintFinalDate"
+                v-bind:min="this.sprintInitialDate"
+                v-bind:max="this.releaseFinalDate"
+                required
+                v-validate="'date_format:YYYY-MM-DD|after:Initial Date'"
               />
-              <p class="text-danger" v-if="errors.has('Final Date')">{{ errors.first('Final Date') }}</p>
+              <p
+                class="text-danger"
+                v-if="errors.has('Final Date')"
+              >{{ errors.first('Final Date') }}</p>
             </div>
           </div>
           <div class="modal-footer">
-            <button type="button" :disabled="errors.has('name') || errors.has('Initial Date') || errors.has('Final Date')" 
-                    class="btn btn-info btn-md falko-button" v-on:click="editSprint" data-dismiss="modal">
-              Save
-            </button>
-            <button type="button" class="btn btn-info btn-md falko-button-grey" data-dismiss="modal" >Close</button>
+            <button
+              type="button"
+              :disabled="errors.has('name') || errors.has('Initial Date') || errors.has('Final Date')"
+              class="btn btn-info btn-md falko-button"
+              v-on:click="editSprint"
+              data-dismiss="modal"
+            >Save</button>
+            <button
+              type="button"
+              class="btn btn-info btn-md falko-button-grey"
+              data-dismiss="modal"
+            >Close</button>
           </div>
         </div>
       </div>
@@ -50,42 +79,49 @@
 </template>
 
 <script>
-import { mapState } from 'vuex';
-import { HTTP } from '../../http-common';
+import { mapState } from "vuex";
+import { HTTP } from "../../http-common";
 
-export default{
-  name: 'editSprintBody',
+export default {
+  name: "editSprintBody",
   data() {
     return {
-      name: '',
-      description: '',
-      sprintInitialDate: '',
-      sprintFinalDate: '',
+      rules: {
+        required: value => !!value || "Required."
+      },
+      name: "",
+      description: "",
+      sprintInitialDate: "",
+      sprintFinalDate: ""
     };
   },
   computed: {
     ...mapState({
       token: state => state.auth.token,
       releaseInitialDate: state => state.clientStatus.releaseInitialDate,
-      releaseFinalDate: state => state.clientStatus.releaseFinalDate,
-    }),
+      releaseFinalDate: state => state.clientStatus.releaseFinalDate
+    })
   },
   methods: {
     editSprint() {
       const _this = this;
       const headers = { Authorization: this.token };
 
-      HTTP.put(`sprints/${this.$route.params.id}`, {
-        name: this.name,
-        description: this.description,
-        initial_date: this.sprintInitialDate,
-        final_date: this.sprintFinalDate,
-      }, { headers })
+      HTTP.put(
+        `sprints/${this.$route.params.id}`,
+        {
+          name: this.name,
+          description: this.description,
+          initial_date: this.sprintInitialDate,
+          final_date: this.sprintFinalDate
+        },
+        { headers }
+      )
         .then(() => {
-          this.$emit('edited-sprint');
+          this.$emit("edited-sprint");
         })
-        .catch((e) => {
-          _this.errors.add('wrong-credentials', 'Problem with credentials');
+        .catch(e => {
+          _this.errors.add("wrong-credentials", "Problem with credentials");
         });
     },
 
@@ -93,20 +129,20 @@ export default{
       const headers = { Authorization: this.token };
 
       HTTP.get(`sprints/${this.$route.params.id}`, { headers })
-        .then((response) => {
+        .then(response => {
           this.name = response.data.name;
           this.description = response.data.description;
           this.sprintInitialDate = response.data.initial_date;
           this.sprintFinalDate = response.data.final_date;
         })
-        .catch((e) => {
+        .catch(e => {
           this.errors.push(e);
         });
-    },
+    }
   },
   created() {
     this.getSprintInformation();
-  },
+  }
 };
 </script>
 
diff --git a/src/components/Users/EditUserProfile.vue b/src/components/Users/EditUserProfile.vue
index 152d4fbb..57d103de 100644
--- a/src/components/Users/EditUserProfile.vue
+++ b/src/components/Users/EditUserProfile.vue
@@ -15,12 +15,18 @@
           </div>
           <div class="row modal-body">
             <div class="col-md-6">
-              <p><label > Name </label></p>
-              <p><input type="text" placeholder="User name..." v-model="name"></input><br></p>
+              <v-text-field
+                label="Username"
+                v-model="name"
+                :rules="[rules.required]"
+              ></v-text-field>
             </div>
             <div class="col-md-6">
-              <p><label> E-mail </label></p>
-              <p><input type="text" placeholder="Email..." v-model="email"></input><br></p>
+              <v-text-field
+                label="Email"
+                v-model="email"
+                :rules="[rules.required, rules.validEmail]"
+              ></v-text-field>
             </div>
           </div>
           <div class="modal-footer">
@@ -45,6 +51,10 @@ export default {
       name: '',
       email: '',
       is_github_authenticated: false,
+      rules: {
+        required: value => !!value || 'Required.',
+        validEmail: v => /.+@.+/.test(v) || 'E-mail must be valid',
+      }
     };
   },