diff --git a/src/views/Cycle/List.vue b/src/views/Cycle/List.vue
index b699fc6..5226f91 100644
--- a/src/views/Cycle/List.vue
+++ b/src/views/Cycle/List.vue
@@ -3,46 +3,46 @@
         <v-container fluid>
             <material-card class color="black" title="All Cycles" text>
                 <v-layout align-center wrap class="px-5 my-3">
-                    <v-flex xs12 md2 sm3 class="WM-FlexCenter">
-                        <v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"></v-icon>
+                    <v-flex xs12 sm6 md6 lg3 xl2 class="WM-FlexCenter">
+                        <v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"/>
                         <v-text-field class="py-3 pr-3" v-model="filter.cycle_id" label="Cycle ID"
-                            color="black"></v-text-field>
+                            color="black"/>
                     </v-flex>
-                    <v-flex xs12 md2 sm3 class="WM-FlexCenter pl-3">
-                        <v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"></v-icon>
+                    <v-flex xs12 sm6 md6 lg3 xl2 class="WM-FlexCenter pl-3">
+                        <v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"/>
                         <v-text-field class="py-3 pr-3" v-model="filter.sterilizer_id" label="Sterilizer ID"
-                            color="black"></v-text-field>
+                            color="black"/>
                     </v-flex>
-                    <v-flex xs12 md2 sm3 class="WM-FlexCenter pl-3">
-                        <v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"></v-icon>
+                    <v-flex xs12 sm6 md6 lg3 xl2 class="WM-FlexCenter pl-3">
+                        <v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"/>
                         <v-text-field class="py-3 pr-3" v-model="filter.cycle_number" label="Cycle Number"
-                            color="black"></v-text-field>
+                            color="black"/>
                     </v-flex>
-                    <v-flex xs12 md3 sm3 class="WM-FlexCenter pl-3" v-if="$hasRole('Admin')">
-                        <v-icon class="fa fa-hospital-o mr-2 WM-Margin-B-8"></v-icon>
+                    <v-flex xs12 sm6 md6 lg3 xl2 class="WM-FlexCenter pl-3" v-if="$hasRole('Admin')">
+                        <v-icon class="fa fa-hospital-o mr-2 WM-Margin-B-8"/>
                         <v-autocomplete class="py-3 pr-3" v-model="filter.medical_center_id" item-text="name"
                             item-value="id" label="Hospital" color="black" :items="medicalCenters"
-                            :clearable="true"></v-autocomplete>
+                            :clearable="true"/>
                     </v-flex>
-                    <v-flex xs12 sm2 md2 class="WM-FlexCenter pl-3">
-                        <v-icon class="far fa-calendar-alt mr-2 WM-Margin-B-8"></v-icon>
+                    <v-flex xs12 sm6 md6 lg3 xl2 class="WM-FlexCenter pl-3">
+                        <v-icon class="far fa-calendar-alt mr-2 WM-Margin-B-8"/>
                         <v-menu lazy :close-on-content-click="true" transition="v-scale-transition" offset-y
                             v-model="Menu">
                             <v-text-field style="padding-top:0 !important" required slot="activator" label="Date"
                                 color="black" class="" v-model="filter.date">
                             </v-text-field>
                             <v-date-picker color="pink" no-title v-model="filter.date"
-                                :date-format="date => new Date(date).toDateString()"></v-date-picker>
+                                :date-format="date => new Date(date).toDateString()"/>
                         </v-menu>
                     </v-flex>
-                    <v-flex class xs12 md2 sm3>
-                        <v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px" @click="load()">
+                    <v-spacer/>
+                    <v-flex class xs12 sm6 md6 lg2 xl1>
+                        <v-btn class="WM-CyanBlueGradient-BG" style="padding:9px 30px" @click="load()">
                             <v-icon class="white--text mr-2 caption">fas fa-search</v-icon>
                             <span class="white--text">Filter</span>
                         </v-btn>
                     </v-flex>
-                    <v-spacer></v-spacer>
-                    <v-flex xs12 md2 sm2 class="text-xs-right">
+                    <v-flex xs12 sm6 md6 lg1 xl1 class="text-xs-right">
                         <router-link :to="{ name: 'AddCycle' }">
                             <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black">
                                 <v-icon class="black--text mr-2 caption">fas fa-plus</v-icon>
@@ -52,7 +52,7 @@
                     </v-flex>
                 </v-layout>
                 <v-layout class="px-4 my-3">
-                    <v-divider></v-divider>
+                    <v-divider/>
                 </v-layout>
                 <v-layout align-center wrap class="px-5 my-3">
                     <v-flex md12>
@@ -118,10 +118,10 @@
                         </v-data-table>
                     </v-flex>
                 </v-layout>
-                <v-divider></v-divider>
+                <v-divider/>
                 <div class="text-xs-center mt-2" v-if="lastPage > 1">
                     <v-pagination color="black" v-model="currentPage" :length="lastPage"
-                        :total-visible="6"></v-pagination>
+                        :total-visible="6"/>
                 </div>
                 <v-layout row wrap align-center justify-center class="mt-3">
                     <router-link to="/dashboard">
diff --git a/src/views/Item/AddEdit.vue b/src/views/Item/AddEdit.vue
index 7764e62..6c052c5 100644
--- a/src/views/Item/AddEdit.vue
+++ b/src/views/Item/AddEdit.vue
@@ -1,138 +1,141 @@
 <template>
-  <v-form ref="form">
-    <v-container grid-list-xs fluid>
-      <material-card color="black" title="Add Instrument">
-        <v-layout align-center justify-center wrap class="px-5 my-3">
-          <v-flex xs12 md4 sm4 class="WM-FlexCenter">
-            <v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"></v-icon>
-            <v-text-field name="name" label="Name" color="black" v-model="formData.name" :rules="[rules.required]"
-              class="py-3 pr-3"></v-text-field>
-          </v-flex>
-          <!-- <v-flex xs12 md3 sm3 class="WM-FlexCenter pl-3">
-            <v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"></v-icon>
-            <v-text-field
-              name="unique_id"
-              label="Item ID"
-              color="black"
-              v-model="formData.unique_id"
-              :rules="[rules.required]"
-              class="py-3 pr-3"
-            ></v-text-field>
-          </v-flex> -->
-          <v-flex xs12 md4 sm4 class="WM-FlexCenter pl-3">
-            <v-icon class="fas fa-check mr-2 WM-Margin-B-8"></v-icon>
-            <v-text-field name="size" label="Size" color="black" v-model="formData.size" class="py-3 pr-3"></v-text-field>
-          </v-flex>
-          <v-flex xs12 md4 sm4 class="WM-FlexCenter pl-3">
-            <v-icon class="fas fa-check mr-2 WM-Margin-B-8"></v-icon>
-            <v-text-field name="specific" label="Specific" color="black" v-model="formData.specific"
-              class="py-3 pr-3"></v-text-field>
-          </v-flex>
-        </v-layout>
-        <v-layout class="px-5 mb-3">
-          <v-flex xs12 md4 sm4 class="WM-FlexCenter">
-            <v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"></v-icon>
-            <v-text-field name="UDI" label="UDI" color="black" v-model="formData.udi" :rules="[rules.required]"
-              class="py-3 pr-3"></v-text-field>
-          </v-flex>
-          <v-flex xs12 md8 sm8 class="WM-FlexCenter" v-if="galleryDataLoaded">
-            <wm-Dropzone class="w-100" :Images="galleries" :BatchID="file_batch_id" :ModelID="$route.params.Item"
-              ModelType="Item"></wm-Dropzone>
-          </v-flex>
-        </v-layout>
-        <v-layout align-center wrap class="px-5 mb-3">
-          <v-flex xs12 sm12 md12>
-            <v-textarea color="black" v-model="formData.note" class="pa-2" name="address">
-              <template v-slot:label>
-                <div>description</div>
-              </template>
-            </v-textarea>
-          </v-flex>
-        </v-layout>
-        <v-layout row wrap justify-center align-center>
-          <v-flex xs12 md2 sm2 class="text-md-center text-xs-center">
-            <v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px" @click="submitForm()">
-              <v-icon class="white--text mr-2 caption">fas fa-check</v-icon>
-              <span class="white--text">SAVE</span>
-            </v-btn>
-          </v-flex>
-          <v-flex xs12 md2 sm2 class="text-md-center text-sm-center text-xs-center">
-            <router-link :to="{ name: 'AllItem' }">
-              <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black">
-                <v-icon class="black--text">keyboard_arrow_left</v-icon>
-                <span class="black--text">Back</span>
-              </v-btn>
-            </router-link>
-          </v-flex>
-        </v-layout>
-      </material-card>
-    </v-container>
-  </v-form>
+    <v-form ref="form">
+        <v-container grid-list-xs fluid>
+            <material-card color="black" title="Add Instrument">
+                <v-layout align-center justify-center wrap class="px-5 my-3">
+                    <v-flex xs12 sm6 md6 lg3 class="WM-FlexCenter">
+                        <v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"></v-icon>
+                        <v-text-field name="name" label="Name" color="black" v-model="formData.name"
+                                      :rules="[rules.required]"
+                                      class="py-3 pr-3"></v-text-field>
+                    </v-flex>
+                    <!-- <v-flex xs12 md3 sm3 class="WM-FlexCenter pl-3">
+                      <v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"></v-icon>
+                      <v-text-field
+                        name="unique_id"
+                        label="Item ID"
+                        color="black"
+                        v-model="formData.unique_id"
+                        :rules="[rules.required]"
+                        class="py-3 pr-3"
+                      ></v-text-field>
+                    </v-flex> -->
+                    <v-flex xs12 sm6 md6 lg3 class="WM-FlexCenter pl-3">
+                        <v-icon class="fas fa-check mr-2 WM-Margin-B-8"></v-icon>
+                        <v-text-field name="size" label="Size" color="black" v-model="formData.size"
+                                      class="py-3 pr-3"></v-text-field>
+                    </v-flex>
+                    <v-flex xs12 sm6 md6 lg3 class="WM-FlexCenter pl-3">
+                        <v-icon class="fas fa-check mr-2 WM-Margin-B-8"></v-icon>
+                        <v-text-field name="specific" label="Specific" color="black" v-model="formData.specific"
+                                      class="py-3 pr-3"></v-text-field>
+                    </v-flex>
+                    <v-flex xs12 sm6 md6 lg3 class="WM-FlexCenter">
+                        <v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"></v-icon>
+                        <v-text-field name="UDI" label="UDI" color="black" v-model="formData.udi"
+                                      :rules="[rules.required]"
+                                      class="py-3 pr-3"></v-text-field>
+                    </v-flex>
+                    <v-flex xs12 sm12 class="WM-FlexCenter" v-if="galleryDataLoaded">
+                        <wm-Dropzone class="w-100" :Images="galleries" :BatchID="file_batch_id"
+                                     :ModelID="$route.params.Item"
+                                     ModelType="Item"></wm-Dropzone>
+                    </v-flex>
+                </v-layout>
+                <v-layout align-center wrap class="px-5 mb-3">
+                    <v-flex xs12 sm12 md12>
+                        <v-textarea color="black" v-model="formData.note" class="pa-2" name="address">
+                            <template v-slot:label>
+                                <div>description</div>
+                            </template>
+                        </v-textarea>
+                    </v-flex>
+                </v-layout>
+                <v-layout row wrap justify-center align-center>
+                    <v-flex xs12 md2 sm2 class="text-md-center text-sm-center text-xs-center">
+                        <router-link :to="{ name: 'AllItem' }">
+                            <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black">
+                                <v-icon class="black--text">keyboard_arrow_left</v-icon>
+                                <span class="black--text">Back</span>
+                            </v-btn>
+                        </router-link>
+                    </v-flex>
+                    <v-flex xs12 md2 sm2 class="text-md-center text-xs-center">
+                        <v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px" @click="submitForm()">
+                            <v-icon class="white--text mr-2 caption">fas fa-check</v-icon>
+                            <span class="white--text">SAVE</span>
+                        </v-btn>
+                    </v-flex>
+
+                </v-layout>
+            </material-card>
+        </v-container>
+    </v-form>
 </template>
 
 <script>
-import { ApiService } from "@/services";
-import { urls } from "@/config/urls";
-import { mapMutations } from 'vuex';
+import {ApiService} from "@/services";
+import {urls} from "@/config/urls";
+import {mapMutations} from 'vuex';
 import Dropzone from '@/components/core/Dropzone'
 
 export default {
-  components: {
-    'wm-Dropzone': Dropzone,
-  },
-  data() {
-    return {
-      galleries: [],
-      galleryDataLoaded: false,
-      file_batch_id: Math.floor(Math.random() * 9000000000) + 1000000000,
-      formData: {
-        name: "",
-        unique_id: "",
-        result: "",
-        note: "",
-      },
-      result: ["Pass", "Fail"],
-      rules: {
-        required: value => !!value || "Required.",
-        counter: value =>
-          !value || value.length == 0 || value.length >= 5 || "Min 5 characters",
-      }
-    };
-  },
-  created() {
-    if (this.$route.params.Item) {
-      this.load(this.$route.params.Item);
-    } else {
-      this.galleryDataLoaded = true;
-    }
-  },
-  methods: {
-    async load(id) {
-      const result = await ApiService.get(urls.editItem(id));
-      if (result.status == 200) {
-        this.galleries = result.data.data.filesPath;
-        this.galleryDataLoaded = true;  
-        this.formData = result.data.data;
-      }
+    components: {
+        'wm-Dropzone': Dropzone,
     },
-    async submitForm() {
-      let result;
-      this.formData['file_batch_id'] = this.file_batch_id;
-      if (this.$route.params.Item) {
-        result = await ApiService.put(urls.updateItem(this.$route.params.Item), this.formData);
-      } else {
-        result = await ApiService.post(urls.storeItem, this.formData);
-      }
+    data() {
+        return {
+            galleries: [],
+            galleryDataLoaded: false,
+            file_batch_id: Math.floor(Math.random() * 9000000000) + 1000000000,
+            formData: {
+                name: "",
+                unique_id: "",
+                result: "",
+                note: "",
+            },
+            result: ["Pass", "Fail"],
+            rules: {
+                required: value => !!value || "Required.",
+                counter: value =>
+                        !value || value.length == 0 || value.length >= 5 || "Min 5 characters",
+            }
+        };
+    },
+    created() {
+        if (this.$route.params.Item) {
+            this.load(this.$route.params.Item);
+        } else {
+            this.galleryDataLoaded = true;
+        }
+    },
+    methods: {
+        async load(id) {
+            const result = await ApiService.get(urls.editItem(id));
+            if (result.status == 200) {
+                this.galleries = result.data.data.filesPath;
+                this.galleryDataLoaded = true;
+                this.formData = result.data.data;
+            }
+        },
+        async submitForm() {
+            let result;
+            this.formData['file_batch_id'] = this.file_batch_id;
+            if (this.$route.params.Item) {
+                result = await ApiService.put(urls.updateItem(this.$route.params.Item), this.formData);
+            } else {
+                result = await ApiService.post(urls.storeItem, this.formData);
+            }
 
-      if (result && result.status == 200) {
-        this.$router.push({ name: 'AllItem' })
-      }
-    },
-  }
+            if (result && result.status == 200) {
+                this.$router.push({name: 'AllItem'})
+            }
+        },
+    }
 };
 </script>
 <style>
 .w-100 {
-  width: 100%;
+    width: 100%;
 }
 </style>
\ No newline at end of file
diff --git a/src/views/Item/List.vue b/src/views/Item/List.vue
index a822eae..9256cea 100644
--- a/src/views/Item/List.vue
+++ b/src/views/Item/List.vue
@@ -27,21 +27,23 @@
                         <v-text-field class="py-3 pr-3" v-model="filter.udi" label="UDI" color="black"/>
                     </v-flex>
                     <!--btn-->
-                    <v-flex xs12 sm4 md4 lg3 xl1 class="WM-FlexCenter">
+                    <v-spacer/>
+                    <v-flex class xs12 sm6 md6 lg2 xl1>
                         <v-btn class="WM-CyanBlueGradient-BG" style="padding:9px 30px" @click="load()">
                             <v-icon class="white--text mr-2 caption">fas fa-search</v-icon>
-                            <span class="white--text CSSD-font">Filter</span>
+                            <span class="white--text">Filter</span>
                         </v-btn>
                     </v-flex>
-                    <v-spacer/>
-                    <v-flex xs12 sm12 md4 lg3 xl1 class="text-xs-right">
+                    <v-flex xs12 sm6 md6 lg1 xl1 class="text-xs-right">
                         <router-link :to="{ name: 'AddItem' }">
                             <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black">
                                 <v-icon class="black--text mr-2 caption">fas fa-plus</v-icon>
-                                <span class="black--text CSSD-font">Add</span>
+                                <span class="black--text">Add</span>
                             </v-btn>
                         </router-link>
                     </v-flex>
+
+
                 </v-layout>
                 <v-layout class="px-4 my-3">
                     <v-divider/>
diff --git a/src/views/Label/AddEdit.vue b/src/views/Label/AddEdit.vue
index 59e243b..374c3d7 100644
--- a/src/views/Label/AddEdit.vue
+++ b/src/views/Label/AddEdit.vue
@@ -3,7 +3,6 @@
 		<v-container grid-list-xs fluid>
 			<material-card color="black" title="Add Label on Set ">
 				<v-layout wrap class="px-5 my-3">
-
 					<v-flex xs12 sm6 md4 lg3 class="WM-FlexCenter pl-3">
 						<v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"/>
 						<v-text-field name="sterilizerId" label="Sterilizer ID" color="black"
@@ -25,11 +24,11 @@
 						<v-autocomplete color="black" :items="items" item-text="name" v-model="formData.package_id"
 							item-value="id" label="Package ID" class="py-3 pr-3" :filter="customFilter">
 							<template v-slot:chip="{ item }">
-								{{ item.name }} - {{ item.udi }}
+								{{ item.name }} - {{ item.id }}
 							</template>
 
 							<template v-slot:item="{ item }">
-								{{ item.name }} - {{ item.udi }}
+								{{ item.name }} - {{ item.id }}
 							</template>
 						</v-autocomplete>
 					</v-flex>
@@ -80,7 +79,6 @@
 <script>
 import { ApiService } from "@/services";
 import { urls } from "@/config/urls";
-import { mapMutations } from "vuex";
 export default {
 	data() {
 		return {
diff --git a/src/views/Label/List.vue b/src/views/Label/List.vue
index d787094..6bc8be2 100644
--- a/src/views/Label/List.vue
+++ b/src/views/Label/List.vue
@@ -1,284 +1,292 @@
 <template>
-	<div class>
-		<v-container fluid>
-			<material-card class color="black" title="All Labels" text>
-				<v-layout align-center wrap class="px-5 my-3">
-					<v-flex xs12 md3 sm3 class="WM-FlexCenter">
-						<v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"></v-icon>
-						<v-text-field class="py-3" v-model="filter.label_id" label="Label ID" color="black"></v-text-field>
-					</v-flex>
+    <div class>
+        <v-container fluid>
+            <material-card class color="black" title="All Labels" text>
+                <v-layout align-center wrap class="px-5 my-3">
+                    <v-flex xs12 sm6 md6 lg3 xl2 class="WM-FlexCenter">
+                        <v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"></v-icon>
+                        <v-text-field class="py-3" v-model="filter.label_id" label="Label ID"
+                                      color="black"></v-text-field>
+                    </v-flex>
 
-					<v-flex xs12 md3 sm3 class="WM-FlexCenter pl-3" v-if="$hasRole('Admin')">
-						<v-icon class="fa fa-hospital-o mr-2 WM-Margin-B-8"></v-icon>
-						<v-autocomplete
-							class="py-3 pr-3"
-							v-model="filter.medical_center_id"
-                            @change="fillUsers"
-							item-text="name"
-							item-value="id"
-							label="Hospital"
-							color="black"
-							:items="medicalCenters"
-							:clearable="true"
-						></v-autocomplete>
-					</v-flex>
-					<v-flex xs12 md3 sm3 class="WM-FlexCenter pl-3">
-						<v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"></v-icon>
-						<v-text-field class="py-3" v-model="filter.sterilizer_id" label="Sterilizer ID" color="black"></v-text-field>
-					</v-flex>
-					<v-flex xs12 md3 sm3 class="WM-FlexCenter pl-3">
-						<v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"></v-icon>
-						<v-text-field class="py-3" v-model="filter.cycle_number" label="Cycle Number" color="black"></v-text-field>
-					</v-flex>
-					<v-flex xs12 md2 sm3>
-						<v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px" @click="load()">
-							<v-icon class="white--text mr-2 caption">fas fa-search</v-icon>
-							<span class="white--text">Filter</span>
-						</v-btn>
-					</v-flex>
-					<v-spacer></v-spacer>
-					<v-flex xs12 md2 sm2 class="text-xs-right">
-						<router-link :to="{name: 'AddLabel'}">
-							<v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black">
-								<v-icon class="black--text mr-2 caption">fas fa-plus</v-icon>
-								<span class="black--text">Add</span>
-							</v-btn>
-						</router-link>
-					</v-flex>
-				</v-layout>
-				<v-layout class="px-4 my-3">
-                	<v-divider></v-divider>
-            	</v-layout>
-				<v-layout align-center wrap class="px-5 my-3">
-					<v-flex md12>
-						<v-data-table :headers="headers" :items="items" hide-actions>
-							<template slot="headerCell" slot-scope="{ header }">
-								<span class="subheading font-weight-light text-white text--darken-3" v-text="header.text" />
-							</template>
-							<template slot="items" slot-scope="{ item }">
-								<td class="title font-weight-light">{{ item.id }}</td>
-								<td
-									class="title font-weight-light"
-								>{{ (item.user && item.user.medical_center) ? item.user.medical_center.name : '' }}</td>
-								<td class="title font-weight-light">{{ item.user ? item.user.name : '' }}</td>
-								<td class="title font-weight-light">{{ item.cycle_number }}</td>
-								<td class="title font-weight-light">{{ item.sterilizer_id }}</td>
-								<td class="text-xs-right FlexBtn Height-MD-60">
-									<v-tooltip bottom open-on-hover>
-                                    <template v-slot:activator="{ on, attrs }">
-									<v-btn v-bind="attrs" v-on="on" color="cyan" class="mr-2" @click="show(item.id)">
-										<v-icon class="white--text mr-1 caption">fas fa-eye</v-icon>
-										<span>Show</span>
-									</v-btn>
-									</template>
-                                    <span>Show</span>
+                    <v-flex xs12 sm6 md6 lg3 xl2 class="WM-FlexCenter pl-3" v-if="$hasRole('Admin')">
+                        <v-icon class="fa fa-hospital-o mr-2 WM-Margin-B-8"></v-icon>
+                        <v-autocomplete
+                                class="py-3 pr-3"
+                                v-model="filter.medical_center_id"
+                                @change="fillUsers"
+                                item-text="name"
+                                item-value="id"
+                                label="Hospital"
+                                color="black"
+                                :items="medicalCenters"
+                                :clearable="true"
+                        ></v-autocomplete>
+                    </v-flex>
+                    <v-flex xs12 sm6 md6 lg3 xl2 class="WM-FlexCenter pl-3">
+                        <v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"></v-icon>
+                        <v-text-field class="py-3" v-model="filter.sterilizer_id" label="Sterilizer ID"
+                                      color="black"></v-text-field>
+                    </v-flex>
+                    <v-flex xs12 sm6 md6 lg3 xl2 class="WM-FlexCenter pl-3">
+                        <v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"></v-icon>
+                        <v-text-field class="py-3" v-model="filter.cycle_number" label="Cycle Number"
+                                      color="black"></v-text-field>
+                    </v-flex>
+                    <v-spacer/>
+                    <v-flex xs12 sm6 md6 lg2 xl1 class="">
+                        <v-btn class="WM-CyanBlueGradient-BG" style="padding:9px 30px" @click="load()">
+                            <v-icon class="white--text mr-2 caption">fas fa-search</v-icon>
+                            <span class="white--text">Filter</span>
+                        </v-btn>
+                    </v-flex>
+                    <v-flex xs12 sm6 md6 lg1 xl1 class="text-xs-right">
+                        <router-link :to="{name: 'AddLabel'}">
+                            <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black">
+                                <v-icon class="black--text mr-2 caption">fas fa-plus</v-icon>
+                                <span class="black--text">Add</span>
+                            </v-btn>
+                        </router-link>
+                    </v-flex>
+                </v-layout>
+                <v-layout class="px-4 my-3">
+                    <v-divider/>
+                </v-layout>
+                <v-layout align-center wrap class="px-5 my-3">
+                    <v-flex md12>
+                        <v-data-table :headers="headers" :items="items" hide-actions>
+                            <template slot="headerCell" slot-scope="{ header }">
+                                <span class="subheading font-weight-light text-white text--darken-3"
+                                      v-text="header.text"/>
+                            </template>
+                            <template slot="items" slot-scope="{ item }">
+                                <td class="title font-weight-light">{{ item.id }}</td>
+                                <td class="title font-weight-light">
+                                    {{ (item.user && item.user.medical_center) ? item.user.medical_center.name : '' }}
+                                </td>
+                                <td class="title font-weight-light">{{ item.user ? item.user.name : '' }}</td>
+                                <td class="title font-weight-light">{{ item.cycle_number }}</td>
+                                <td class="title font-weight-light">{{ item.sterilizer_id }}</td>
+                                <td class="text-xs-right FlexBtn Height-MD-60">
+                                    <v-tooltip bottom open-on-hover>
+                                        <template v-slot:activator="{ on, attrs }">
+                                            <v-btn v-bind="attrs" v-on="on" color="cyan" class="mr-2"
+                                                   @click="show(item.id)">
+                                                <v-icon class="white--text mr-1 caption">fas fa-eye</v-icon>
+                                                <span>Show</span>
+                                            </v-btn>
+                                        </template>
+                                        <span>Show</span>
                                     </v-tooltip>
-									<v-tooltip bottom open-on-hover>
-                                    <template v-slot:activator="{ on, attrs }">
-									<router-link
-										class="LinkBtn"
-										v-if="$hasRole('Admin') || item.user_id == $store.state.user.id"
-										:to="{name: 'EditLabel', params: {label: item.id}}"
-									>
-										<v-btn v-bind="attrs" v-on="on" color="orange" class="mr-2">
-											<v-icon class="white--text mr-1 caption">fas fa-pen</v-icon>
-											<span>Edit</span>
-										</v-btn>
-									</router-link>
-									</template>
-                                    <span>Edit</span>
+                                    <v-tooltip bottom open-on-hover>
+                                        <template v-slot:activator="{ on, attrs }">
+                                            <router-link
+                                                    class="LinkBtn"
+                                                    v-if="$hasRole('Admin') || item.user_id == $store.state.user.id"
+                                                    :to="{name: 'EditLabel', params: {label: item.id}}">
+                                                <v-btn v-bind="attrs" v-on="on" color="orange" class="mr-2">
+                                                    <v-icon class="white--text mr-1 caption">fas fa-pen</v-icon>
+                                                    <span>Edit</span>
+                                                </v-btn>
+                                            </router-link>
+                                        </template>
+                                        <span>Edit</span>
                                     </v-tooltip>
-									<v-tooltip bottom open-on-hover>
-                                    <template v-slot:activator="{ on, attrs }">
-									<v-btn
-										v-bind="attrs" v-on="on"
-										color="pink"
-										class="WM-ActionButton mr-2"
-										@click="remove(item.id)"
-										v-if="$hasRole('Admin') || item.user_id == $store.state.user.id"
-									>
-										<v-icon class="white--text mr-2 caption">fas fa-times</v-icon>
-										<span>Remove</span>
-									</v-btn>
-									</template>
-                                    <span>Remove</span>
+                                    <v-tooltip bottom open-on-hover>
+                                        <template v-slot:activator="{ on, attrs }">
+                                            <v-btn
+                                                    v-bind="attrs" v-on="on"
+                                                    color="pink"
+                                                    class="WM-ActionButton mr-2"
+                                                    @click="remove(item.id)"
+                                                    v-if="$hasRole('Admin') || item.user_id == $store.state.user.id">
+                                                <v-icon class="white--text mr-2 caption">fas fa-times</v-icon>
+                                                <span>Remove</span>
+                                            </v-btn>
+                                        </template>
+                                        <span>Remove</span>
                                     </v-tooltip>
-									<v-tooltip bottom open-on-hover>
-                                    <template v-slot:activator="{ on, attrs }">
-									<v-btn v-bind="attrs" v-on="on" color="orange darken-1 mr-2" @click="generateBarcode(item.id, 'Label')">
-                                        <v-icon class="white--text mr-1 caption">fas fa-barcode</v-icon>
+                                    <v-tooltip bottom open-on-hover>
+                                        <template v-slot:activator="{ on, attrs }">
+                                            <v-btn v-bind="attrs" v-on="on" color="orange darken-1 mr-2"
+                                                   @click="generateBarcode(item.id, 'Label')">
+                                                <v-icon class="white--text mr-1 caption">fas fa-barcode</v-icon>
+                                                <span>Generate Barcode</span>
+                                            </v-btn>
+                                        </template>
                                         <span>Generate Barcode</span>
-                                    </v-btn>
-									</template>
-                                    <span>Generate Barcode</span>
                                     </v-tooltip>
-								</td>
-							</template>
-						</v-data-table>
-					</v-flex>
-				</v-layout>
-				<v-divider></v-divider>
-				<div class="text-xs-center" v-if="lastPage > 1">
-					<v-pagination color="black" v-model="currentPage" :length="lastPage" :total-visible="6"></v-pagination>
-				</div>
-				<v-layout row wrap align-center justify-center class="mt-3">
-					<router-link to="/dashboard">
-						<v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black ml-5">
-							<v-icon class="black--text mr-2 caption">fas fa-chevron-left</v-icon>
-							<span class="black--text">Back</span>
-						</v-btn>
-					</router-link>
-				</v-layout>
-			</material-card>
-		</v-container>
-	</div>
+                                </td>
+                            </template>
+                        </v-data-table>
+                    </v-flex>
+                </v-layout>
+                <v-divider/>
+                <div class="text-xs-center" v-if="lastPage > 1">
+                    <v-pagination color="black" v-model="currentPage" :length="lastPage"
+                                  :total-visible="6"/>
+                </div>
+                <v-layout row wrap align-center justify-center class="mt-3">
+                    <router-link to="/dashboard">
+                        <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black ml-5">
+                            <v-icon class="black--text mr-2 caption">fas fa-chevron-left</v-icon>
+                            <span class="black--text">Back</span>
+                        </v-btn>
+                    </router-link>
+                </v-layout>
+            </material-card>
+        </v-container>
+    </div>
 </template>
 
 <script>
-import { ApiService } from "@/services";
-import { urls } from "@/config/urls";
-import { mapMutations, mapGetters } from "vuex";
+import {ApiService} from "@/services";
+import {urls} from "@/config/urls";
+import {mapMutations, mapGetters} from "vuex";
+
 export default {
-	data: () => ({
-		headers: [
-			{
-				sortable: true,
-				text: "Label ID",
-				value: "Label ID"
-			},
-			{
-				sortable: true,
-				text: "Hospital",
-				value: "Hospital"
-			},
-			{
-				sortable: false,
-				text: "User",
-				value: "User"
-			},
-			{
-				sortable: false,
-				text: "Cycle Number",
-				value: "Cycle Number"
-			},
-			{
-				sortable: false,
-				text: "SterilizerID",
-				value: "SterilizerID"
-			},
-			{
-				sortable: false,
-				text: "Action",
-				value: "action",
-				align: "left"
-			}
-		],
-		filter: {},
-		items: [],
-		medicalCenters: [],
-		users: [],
-		currentPage: 1,
-		lastPage: 1
-	}),
-	created() {
-		this.load();
-	},
-	methods: {
-		...mapMutations("modal", ["changeCurrentModal"]),
-		async load(page = 1) {
-			let filter = "?";
-			for (const key in this.filter) {
-				if (this.filter.hasOwnProperty(key)) {
-					filter += `${key}=${this.filter[key]}&`;
-				}
-			}
-			filter += page ? `page=${page}` : `page=1`;
-			const result = await ApiService.get(urls.listLabel(filter));
-			if (result && result.status == 200) {
-				const { data, meta } = result.data;
+    data: () => ({
+        headers: [
+            {
+                sortable: true,
+                text: "Label ID",
+                value: "Label ID"
+            },
+            {
+                sortable: true,
+                text: "Hospital",
+                value: "Hospital"
+            },
+            {
+                sortable: false,
+                text: "Owner",
+                value: "User"
+            },
+            {
+                sortable: false,
+                text: "Cycle Number",
+                value: "Cycle Number"
+            },
+            {
+                sortable: false,
+                text: "SterilizerID",
+                value: "SterilizerID"
+            },
+            {
+                sortable: false,
+                text: "Action",
+                value: "action",
+                align: "left"
+            }
+        ],
+        filter: {},
+        items: [],
+        medicalCenters: [],
+        users: [],
+        currentPage: 1,
+        lastPage: 1
+    }),
+    created() {
+        this.load();
+    },
+    methods: {
+        ...mapMutations("modal", ["changeCurrentModal"]),
+        async load(page = 1) {
+            let filter = "?";
+            for (const key in this.filter) {
+                if (this.filter.hasOwnProperty(key)) {
+                    filter += `${key}=${this.filter[key]}&`;
+                }
+            }
+            filter += page ? `page=${page}` : `page=1`;
+            const result = await ApiService.get(urls.listLabel(filter));
+            if (result && result.status == 200) {
+                const {data, meta} = result.data;
                 this.items = data;
                 this.currentPage = meta.current_page;
                 this.lastPage = meta.last_page;
-			}
-			this.loadMedicalCenters();
-		},
-		async loadMedicalCenters() {
-			const result = await ApiService.get(urls.listFilterItemsTestResult);
-			if (result && result.status == 200) {
-				this.medicalCenters = result.data.data.MedicalCenters;
-			}
-		},
-		async fillUsers() {
-			const result = await ApiService.get(
-				urls.listOpertorMedicalCenter(this.form.medicalCenterId)
-			);
-			if (result && result.status == 200) {
-				this.users = result.data.data.users;
-			}
-		},
-		async show(testResultId) {
-			const result = await ApiService.get(urls.showLabel(testResultId));
-			if (result && result.status == 200) {
-				this.changeCurrentModal({
-					modal: "modal-label-show",
-					properties: { result, width :40 }
-				});
-			}
-		},
-		async remove(testResultId) {
-			const result = await ApiService.delete(
-				urls.removeLabel(testResultId)
-			);
-			if (result && result.status == 200) {
-				for (const key in this.items) {
-					if (
-						this.items.hasOwnProperty(key) &&
-						this.items[key].id == testResultId
-					) {
-						this.items.splice(key, 1);
-					}
-				}
-			}
-		},
-		async generateBarcode(code, type) {
+            }
+            this.loadMedicalCenters();
+        },
+        async loadMedicalCenters() {
+            const result = await ApiService.get(urls.listFilterItemsTestResult);
+            if (result && result.status == 200) {
+                this.medicalCenters = result.data.data.MedicalCenters;
+            }
+        },
+        async fillUsers() {
+            const result = await ApiService.get(
+                    urls.listOpertorMedicalCenter(this.form.medicalCenterId)
+            );
+            if (result && result.status == 200) {
+                this.users = result.data.data.users;
+            }
+        },
+        async show(testResultId) {
+            const result = await ApiService.get(urls.showLabel(testResultId));
+            if (result && result.status == 200) {
+                this.changeCurrentModal({
+                    modal: "modal-label-show",
+                    properties: {result, width: 40}
+                });
+            }
+        },
+        async remove(testResultId) {
+            const result = await ApiService.delete(
+                    urls.removeLabel(testResultId)
+            );
+            if (result && result.status == 200) {
+                for (const key in this.items) {
+                    if (
+                            this.items.hasOwnProperty(key) &&
+                            this.items[key].id == testResultId
+                    ) {
+                        this.items.splice(key, 1);
+                    }
+                }
+            }
+        },
+        async generateBarcode(code, type) {
             const result = await ApiService.post(urls.Barcode(code, type));
             if (result && result.status == 200) {
                 this.changeCurrentModal({
                     modal: "modal-barcode-barcode",
-                    properties: { result }
+                    properties: {result}
                 });
             }
         }
-	},
-	computed: {
-		...mapGetters("modal", ["getModalResult"])
-	},
-	watch: {
-		currentPage(page) {
-			this.load(page);
-		},
-		getModalResult(testResult) {
-			for (const key in this.items) {
-				if (
-					this.items.hasOwnProperty(key) &&
-					this.items[key].id == testResult.id
-				) {
-					this.items[key] = testResult;
-				}
-			}
-		}
-	}
+    },
+    computed: {
+        ...mapGetters("modal", ["getModalResult"])
+    },
+    watch: {
+        currentPage(page) {
+            this.load(page);
+        },
+        getModalResult(testResult) {
+            for (const key in this.items) {
+                if (
+                        this.items.hasOwnProperty(key) &&
+                        this.items[key].id == testResult.id
+                ) {
+                    this.items[key] = testResult;
+                }
+            }
+        }
+    }
 };
 </script>
 <style>
 .v-btn--floating {
-	padding: 0 !important;
+    padding: 0 !important;
 }
+
 .theme--light.v-btn.v-btn--flat {
-	color: rgba(0, 0, 0, 0.87) !important;
+    color: rgba(0, 0, 0, 0.87) !important;
 }
+
 .v-btn--floating,
 .v-btn--icon:before {
-	border-radius: 50% !important;
+    border-radius: 50% !important;
 }
 </style>
diff --git a/src/views/MedicalCenter/List.vue b/src/views/MedicalCenter/List.vue
index a89092f..570e93a 100644
--- a/src/views/MedicalCenter/List.vue
+++ b/src/views/MedicalCenter/List.vue
@@ -3,23 +3,23 @@
     <material-card class color="black" title="Medical Centers List" text>
       <v-layout wrap class="px-5 mb-3">
         <v-flex xs12 md3 sm3 class="pr-3">
-          <v-text-field label="Name" v-model="filter.name" color="black"></v-text-field>
-        </v-flex>
-        <v-flex xs12 md2 sm2 class="text-xs-right">
-          <v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px" @click="load">
-            <v-icon class="white--text mr-2 caption">fas fa-search</v-icon>
-            <span class="white--text">Filter</span>
-          </v-btn>
-        </v-flex>
-        <v-spacer></v-spacer>
-        <v-flex xs12 md2 sm2 class="text-xs-right">
-          <router-link :to="{ name: 'AddMedicalCenter' }">
-            <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black">
-              <v-icon class="black--text mr-2 caption">fas fa-plus</v-icon>
-              <span class="black--text">Add</span>
-            </v-btn>
-          </router-link>
+          <v-text-field label="Name" v-model="filter.name" color="black"/>
         </v-flex>
+          <v-spacer/>
+          <v-flex class xs12 sm6 md6 lg2 xl1>
+              <v-btn class="WM-CyanBlueGradient-BG" style="padding:9px 30px" @click="load()">
+                  <v-icon class="white--text mr-2 caption">fas fa-search</v-icon>
+                  <span class="white--text">Filter</span>
+              </v-btn>
+          </v-flex>
+          <v-flex xs12 sm6 md6 lg1 xl1 class="text-xs-right">
+              <router-link :to="{ name: 'AddMedicalCenter' }">
+                  <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black">
+                      <v-icon class="black--text mr-2 caption">fas fa-plus</v-icon>
+                      <span class="black--text">Add</span>
+                  </v-btn>
+              </router-link>
+          </v-flex>
       </v-layout>
       <v-layout class="px-4 my-3">
         <v-divider></v-divider>
diff --git a/src/views/MedicalCenter/OperatorList.vue b/src/views/MedicalCenter/OperatorList.vue
index 374c442..6ea6846 100644
--- a/src/views/MedicalCenter/OperatorList.vue
+++ b/src/views/MedicalCenter/OperatorList.vue
@@ -12,7 +12,7 @@
           <v-select :items="roles" name="roles" v-model="filter.role"  label="Roles" class="pa-2" color="black"></v-select>
         </v-flex>
         <v-flex xs12 md2 sm2 class="text-xs-right">
-          <v-btn class="WM-CyanBlueGradient-BG" @click="load" style="padding:10px 60px">
+          <v-btn class="WM-CyanBlueGradient-BG" @click="load" style="padding:9px 30px">
             <v-icon class="white--text mr-2 caption">fas fa-search</v-icon>
             <span class="white--text">Filter</span>
           </v-btn>
diff --git a/src/views/Package/AddEdit.vue b/src/views/Package/AddEdit.vue
index d3c0ba5..2fc37b4 100644
--- a/src/views/Package/AddEdit.vue
+++ b/src/views/Package/AddEdit.vue
@@ -1,253 +1,233 @@
 <template>
-  <v-form ref="form">
-    <v-container grid-list-xs fluid>
-      <material-card color="black" title="Add Package">
-        <v-layout wrap class="px-5 my-3">
-          <v-flex xs12 md3 sm3 class="WM-FlexCenter">
-            <v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"></v-icon>
-            <v-text-field
-              name="name"
-              label="Name"
-              color="black"
-              v-model="formData.name"
-              :rules="[rules.required, rules.counter]"
-              class="py-3 pr-3"
-            ></v-text-field>
-          </v-flex>
-          <!-- <v-flex xs12 md3 sm3 class="WM-FlexCenter">
-							<v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"></v-icon>
-							<v-text-field
-								name="unique_id"
-								label="Package ID"
-								color="black"
-								v-model="formData.unique_id"
-								:rules="[rules.required, rules.counter]"
-								class="py-3 pr-3"
-							></v-text-field>
-					</v-flex> -->
-          <v-flex xs12 md12 sm12></v-flex>
-          <!-- <v-row style="position: relative" v-for="(item, key) in formData.items" :key="key"> -->
-          <v-flex
-            xs12
-            md3
-            sm3
-            class="WM-FlexCenter WM-DuplicateInput"
-            style="position: relative"
-            v-for="(item, key) in formData.items"
-            :key="key"
-          >
-            <div class="Inner">
-              <v-icon class="fas fa-check mr-2 WM-Margin-B-8"></v-icon>
-              <v-autocomplete
-                @keydown.enter.native.prevent="duplicateForm(key)"
-                :ref="`selectItem-${key}`"
-                class="py-3 pr-3"
-                :items="items"
-                item-text="name"
-                v-model="item.id"
-                item-value="id"
-                label="Select Items For Package"
-                color="black"
-                :filter="customFilter"
-              >
-                <template v-slot:selection="{ item }">
-                  {{ item.name }} - {{ item.udi }}
-                </template>
+    <v-form ref="form">
+        <v-container grid-list-xs fluid>
+            <material-card color="black" title="Add Package">
+                <v-layout wrap class="px-5 my-3">
+                    <v-flex xs12 md3 sm3 class="WM-FlexCenter">
+                        <v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"/>
+                        <v-text-field
+                                name="name"
+                                label="Name"
+                                color="black"
+                                v-model="formData.name"
+                                :rules="[rules.required, rules.counter]"
+                                class="py-3 pr-3"
+                        />
+                    </v-flex>
+                    <!-- <v-flex xs12 md3 sm3 class="WM-FlexCenter">
+                                      <v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"></v-icon>
+                                      <v-text-field
+                                          name="unique_id"
+                                          label="Package ID"
+                                          color="black"
+                                          v-model="formData.unique_id"
+                                          :rules="[rules.required, rules.counter]"
+                                          class="py-3 pr-3"
+                                      />
+                              </v-flex> -->
+                    <!--            <v-flex xs3 class="WM-FlexCenter">
+                                    <v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"></v-icon>
+                                    <v-text-field
+                                            name="UDI"
+                                            label="UDI"
+                                            color="black"
+                                            v-model="formData.udi"
+                                            :rules="[rules.required]"
+                                            class="py-3"
+                                    />
+                                </v-flex>-->
+                    <v-flex xs12 md12 sm12></v-flex>
+                    <!-- <v-row style="position: relative" v-for="(item, key) in formData.items" :key="key"> -->
+                    <v-flex xs12 md3 sm3 class="WM-FlexCenter WM-DuplicateInput"
+                            style="position: relative" v-for="(item, key) in formData.items" :key="key">
+                        <div class="Inner">
+                            <v-icon class="fas fa-check mr-2 WM-Margin-B-8"/>
+                            <v-autocomplete
+                                    @keydown.enter.native.prevent="duplicateForm(key)"
+                                    :ref="`selectItem-${key}`"
+                                    class="py-3 pr-3"
+                                    :items="items"
+                                    item-text="name"
+                                    v-model="item.id"
+                                    item-value="id"
+                                    label="Select Items For Package"
+                                    color="black"
+                                    :filter="customFilter">
+                                <template v-slot:selection="{ item }">
+                                    {{ item.name }} - {{ item.udi }}
+                                </template>
 
-                <template v-slot:item="{ item }">
-                  {{ item.name }} - {{ item.udi }}
-                </template>
-              </v-autocomplete>
+                                <template v-slot:item="{ item }">
+                                    {{ item.name }} - {{ item.udi }}
+                                </template>
+                            </v-autocomplete>
 
-              <v-btn
-                absolute
-                small
-                right
-                bottom
-                color="cyan"
-                @click="duplicateForm(key)"
-              >
-                <v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>ADD
-              </v-btn>
-              <v-btn
-                v-if="key > 0"
-                absolute
-                small
-                right
-                top
-                color="pink"
-                @click="removeForm(key)"
-              >
-                <v-icon class="white--text mr-2 caption">fas fa-remove</v-icon
-                >REMOVE
-              </v-btn>
-            </div>
-          </v-flex>
-          <v-flex xs3 class="WM-FlexCenter">
-            <v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"></v-icon>
-            <v-text-field
-              name="UDI"
-              label="UDI"
-              color="black"
-              v-model="formData.udi"
-              :rules="[rules.required]"
-              class="py-3"
-            ></v-text-field>
-          </v-flex>
-          <!-- </v-row> -->
-          <v-spacer></v-spacer>
-          <v-flex xs12>
-            <hr
-              class="v-divider theme--light"
-              style="margin-top: 30px !important"
-            />
-          </v-flex>
-        </v-layout>
-        <v-layout align-center justify-center wrap class="px-5 mb-3">
-          <v-flex xs12 sm12 md12>
-            <v-textarea
-              color="black"
-              v-model="formData.note"
-              class="pa-2"
-              name="address"
-            >
-              <template v-slot:label>
-                <div>description</div>
-              </template>
-            </v-textarea>
-          </v-flex>
-        </v-layout>
-        <v-layout row wrap justify-center align-center>
-          <v-flex xs12 md2 sm2 class="text-md-center text-xs-center">
-            <v-btn
-              class="WM-CyanBlueGradient-BG"
-              style="padding: 10px 60px"
-              @click="submitForm()"
-            >
-              <v-icon class="white--text mr-2 caption">fas fa-check</v-icon>
-              <span class="white--text">SAVE</span>
-            </v-btn>
-          </v-flex>
-          <v-flex
-            xs12
-            md2
-            sm2
-            class="text-md-center text-sm-center text-xs-center"
-          >
-            <router-link :to="{ name: 'AllPackage' }">
-              <v-btn
-                class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black"
-              >
-                <v-icon class="black--text">keyboard_arrow_left</v-icon>
-                <span class="black--text">Back</span>
-              </v-btn>
-            </router-link>
-          </v-flex>
-        </v-layout>
-      </material-card>
-    </v-container>
-  </v-form>
+                            <v-btn
+                                    absolute
+                                    small
+                                    right
+                                    bottom
+                                    color="cyan"
+                                    @click="duplicateForm(key)">
+                                <v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>
+                                ADD
+                            </v-btn>
+                            <v-btn
+                                    v-if="key > 0"
+                                    absolute
+                                    small
+                                    right
+                                    top
+                                    color="pink"
+                                    @click="removeForm(key)"
+                            >
+                                <v-icon class="white--text mr-2 caption">fas fa-remove
+                                </v-icon
+                                >
+                                REMOVE
+                            </v-btn>
+                        </div>
+                    </v-flex>
+                    <!-- </v-row> -->
+                    <v-spacer/>
+                    <v-flex xs12>
+                        <hr class="v-divider theme--light" style="margin-top: 30px !important"/>
+                    </v-flex>
+                </v-layout>
+                <v-layout align-center justify-center wrap class="px-5 mb-3">
+                    <v-flex xs12 sm12 md12>
+                        <v-textarea
+                                color="black"
+                                v-model="formData.note"
+                                class="pa-2"
+                                name="address">
+                            <template v-slot:label>
+                                <div>description</div>
+                            </template>
+                        </v-textarea>
+                    </v-flex>
+                </v-layout>
+                <v-layout row wrap justify-center align-center>
+                    <v-flex xs12 md2 sm2 class="text-md-center text-sm-center text-xs-center">
+                        <router-link :to="{ name: 'AllPackage' }">
+                            <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black">
+                                <v-icon class="black--text">keyboard_arrow_left</v-icon>
+                                <span class="black--text">Back</span>
+                            </v-btn>
+                        </router-link>
+                    </v-flex>
+                    <v-flex xs12 md2 sm2 class="text-md-center text-xs-center">
+                        <v-btn class="WM-CyanBlueGradient-BG" style="padding: 10px 60px" @click="submitForm()">
+                            <v-icon class="white--text mr-2 caption">fas fa-check</v-icon>
+                            <span class="white--text">SAVE</span>
+                        </v-btn>
+                    </v-flex>
+                </v-layout>
+            </material-card>
+        </v-container>
+    </v-form>
 </template>
 
 <script>
-import { ApiService } from "@/services";
-import { urls } from "@/config/urls";
-import { mapMutations } from "vuex";
+import {ApiService} from "@/services";
+import {urls} from "@/config/urls";
+import {mapMutations} from "vuex";
+
 export default {
-  data() {
-    return {
-      formData: {
-        name: "",
-        result: "",
-        note: "",
-        items: [
-          {
-            name: "",
-          },
-        ],
-      },
-      items: [],
-      result: ["Pass", "Fail"],
-      rules: {
-        required: (value) => !!value || "Required.",
-        counter: (value) =>
-          !value ||
-          value.length == 0 ||
-          value.length >= 5 ||
-          "Min 5 characters",
-      },
-    };
-  },
-  created() {
-    if (this.$route.params.package) {
-      this.load(this.$route.params.package);
-    }
-    this.loadItems();
-  },
-  methods: {
-    customFilter(item, queryText) {
-      const name = item.name.toLowerCase();
-      const udi = item.udi ? item.udi.toLowerCase() : null;
-      const searchText = queryText.toLowerCase();
-      if (udi) {
-        return name.indexOf(searchText) > -1 || udi.indexOf(searchText) > -1;
-      }
-      return name.indexOf(searchText) > -1;
+    data() {
+        return {
+            formData: {
+                name: "",
+                result: "",
+                note: "",
+                items: [
+                    {
+                        name: "",
+                    },
+                ],
+            },
+            items: [],
+            result: ["Pass", "Fail"],
+            rules: {
+                required: (value) => !!value || "Required.",
+                counter: (value) =>
+                        !value ||
+                        value.length == 0 ||
+                        value.length >= 5 ||
+                        "Min 5 characters",
+            },
+        };
     },
-    async load(id) {
-      const result = await ApiService.get(urls.editPackage(id));
-      if (result.status == 200) {
-        this.formData = result.data.data;
-      }
+    created() {
+        if (this.$route.params.package) {
+            this.load(this.$route.params.package);
+        }
+        this.loadItems();
     },
-    async loadItems() {
-      const result = await ApiService.get(urls.listAllItem());
-      if (result.status == 200) {
-      	this.items = result.data.data;
-      }
-    //   this.items = [
-    //     { name: "test", udi: "23" },
-    //     { name: "saj", udi: "43" },
-    //   ];
-    },
-    async submitForm() {
-      let result;
-      if (this.$route.params.package) {
-        result = await ApiService.put(
-          urls.updatePackage(this.$route.params.package),
-          this.formData
-        );
-      } else {
-        result = await ApiService.post(urls.storePackage, this.formData);
-      }
+    methods: {
+        customFilter(item, queryText) {
+            const name = item.name.toLowerCase();
+            const udi = item.udi ? item.udi.toLowerCase() : null;
+            const searchText = queryText.toLowerCase();
+            if (udi) {
+                return name.indexOf(searchText) > -1 || udi.indexOf(searchText) > -1;
+            }
+            return name.indexOf(searchText) > -1;
+        },
+        async load(id) {
+            const result = await ApiService.get(urls.editPackage(id));
+            if (result.status == 200) {
+                this.formData = result.data.data;
+            }
+        },
+        async loadItems() {
+            const result = await ApiService.get(urls.listAllItem());
+            if (result.status == 200) {
+                this.items = result.data.data;
+            }
+            //   this.items = [
+            //     { name: "test", udi: "23" },
+            //     { name: "saj", udi: "43" },
+            //   ];
+        },
+        async submitForm() {
+            let result;
+            if (this.$route.params.package) {
+                result = await ApiService.put(
+                        urls.updatePackage(this.$route.params.package),
+                        this.formData
+                );
+            } else {
+                result = await ApiService.post(urls.storePackage, this.formData);
+            }
 
-      if (result && result.status == 200) {
-        this.$router.push({ name: "AllPackage" });
-      }
-    },
+            if (result && result.status == 200) {
+                this.$router.push({name: "AllPackage"});
+            }
+        },
 
-    duplicateForm(infoIndex) {
-      this.formData.items.push({
-        name: "",
-      });
-      console.log(this.$refs[`selectItem-1`], infoIndex);
-      this.$refs[`selectItem-${infoIndex}`][0].focus();
+        duplicateForm(infoIndex) {
+            this.formData.items.push({
+                name: "",
+            });
+            console.log(this.$refs[`selectItem-1`], infoIndex);
+            this.$refs[`selectItem-${infoIndex}`][0].focus();
+        },
+        removeForm(infoIndex) {
+            this.formData.items.splice(infoIndex, 1);
+        },
     },
-    removeForm(infoIndex) {
-      this.formData.items.splice(infoIndex, 1);
-    },
-  },
 };
 </script>
 <style media="screen">
 .WM-DuplicateInput {
-  margin: 15px 0;
+    margin: 15px 0;
 }
 
 .WM-DuplicateInput .Inner {
-  padding: 15px 20px !important;
-  margin: 0 10px 0 0;
-  width: 100%;
-  border: 1px solid rgba(0, 0, 0, 0.2);
+    padding: 15px 20px !important;
+    margin: 0 10px 0 0;
+    width: 100%;
+    border: 1px solid rgba(0, 0, 0, 0.2);
 }
 </style>
diff --git a/src/views/Package/List.vue b/src/views/Package/List.vue
index ab151d9..9b531cd 100644
--- a/src/views/Package/List.vue
+++ b/src/views/Package/List.vue
@@ -3,40 +3,37 @@
         <v-container fluid>
             <material-card class color="black" title="All Packages" text>
                 <v-layout align-center wrap class="mt-3 px-5">
-                    <v-flex xs12 md3 sm3 class="WM-FlexCenter">
+                    <v-flex xs12 sm6 md4 lg3 xl2 class="WM-FlexCenter">
                         <v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"/>
                         <v-text-field class="py-3 pr-3" v-model="filter.package_id" label="Package ID"
-                            color="black"/>
+                                      color="black"/>
                     </v-flex>
-                    <v-flex xs12 md3 sm3 class="WM-FlexCenter pl-3">
+                    <v-flex xs12 sm6 md4 lg3 xl2 class="WM-FlexCenter pl-3">
                         <v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"/>
                         <v-text-field class="py-3 pr-3" v-model="filter.name" label="Name" color="black"/>
                     </v-flex>
-                    <v-flex xs12 md3 sm3 class="WM-FlexCenter pl-3" v-if="$hasRole('Admin')">
+                    <v-flex xs12 sm6 md4 lg3 xl2 class="WM-FlexCenter pl-3" v-if="$hasRole('Admin')">
                         <v-icon class="fa fa-hospital-o mr-2 WM-Margin-B-8"/>
                         <v-autocomplete class="py-3 pr-3" v-model="filter.medical_center_id" item-text="name"
-                            item-value="id" label="Hospital" color="black" :items="medicalCenters"
-                            :clearable="true"/>
+                                        item-value="id" label="Hospital" color="black" :items="medicalCenters"
+                                        :clearable="true"/>
                     </v-flex>
                     <!-- <v-flex class xs12 md2 sm3>
-                        <v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px" @click="load()">
+                        <v-btn class="WM-CyanBlueGradient-BG" style="padding:9px 30px" @click="load()">
                             <v-icon class="white--text mr-2 caption">fas fa-search</v-icon>
                             <span class="white--text">Filter</span>
                         </v-btn>
                     </v-flex>
                     <v-spacer></v-spacer> -->
                     <!-- <v-spacer></v-spacer> -->
-
-                </v-layout>
-                <v-layout align-center wrap class="mb-3 px-5">
-                    <v-flex class xs12 md2 sm3>
-                        <v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px" @click="load()">
+                    <v-spacer/>
+                    <v-flex class xs12 sm6 md6 lg2 xl1>
+                        <v-btn class="WM-CyanBlueGradient-BG" style="padding:9px 30px" @click="load()">
                             <v-icon class="white--text mr-2 caption">fas fa-search</v-icon>
                             <span class="white--text">Filter</span>
                         </v-btn>
                     </v-flex>
-                    <v-spacer/>
-                    <v-flex xs12 md2 sm2 class="text-xs-right ml-3">
+                    <v-flex xs12 sm6 md6 lg1 xl1 class="text-xs-right">
                         <router-link :to="{ name: 'AddPackage' }">
                             <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black">
                                 <v-icon class="black--text mr-2 caption">fas fa-plus</v-icon>
@@ -44,6 +41,7 @@
                             </v-btn>
                         </router-link>
                     </v-flex>
+
                 </v-layout>
                 <v-layout class="px-4 my-3">
                     <v-divider/>
@@ -52,15 +50,20 @@
                     <v-flex md12>
                         <v-data-table :headers="headers" :items="items" hide-actions>
                             <template slot="headerCell" slot-scope="{ header }">
-                                <span class="subheading font-weight-light text-white text--darken-3" v-text="header.text" />
+                                <span class="subheading font-weight-light text-white text--darken-3"
+                                      v-text="header.text"/>
                             </template>
                             <template slot="items" slot-scope="{ item }">
                                 <td class="title font-weight-light">{{ item.id }}</td>
                                 <!-- <td class="title font-weight-light">{{ item.unique_id }}</td> -->
                                 <td class="title font-weight-light">{{ item.name }}</td>
-                                <td class="title font-weight-light">{{ (item.user && item.user.medical_center) ?
-                                    item.user.medical_center.name : '' }}</td>
-                                <td class="title font-weight-light">{{ item.user ? item.user.name : '' | text_20_letter }}</td>
+                                <td class="title font-weight-light">
+                                    {{ (item.user && item.user.medical_center) ? item.user.medical_center.name : '' }}
+                                </td>
+                                <td class="title font-weight-light">{{
+                                        item.user ? item.user.name : '' | text_20_letter
+                                    }}
+                                </td>
                                 <td class="title font-weight-light">{{ item.udi | text_20_letter }}</td>
                                 <td class="title font-weight-light">{{ item.description }}</td>
                                 <td class="title font-weight-light">{{ item.status }}</td>
@@ -68,22 +71,27 @@
                                     <v-tooltip bottom open-on-hover v-if="$hasRole('Admin|Supervisor')">
                                         <template v-slot:activator="{ on, attrs }">
                                             <v-btn :color="!['suspended', 'rejected'].includes(item.status) ? 'red' : 'green'"
-                                                    class="mr-2" @click="changeStatus(item)" v-bind="attrs" v-on="on">
+                                                   class="mr-2" @click="changeStatus(item)" v-bind="attrs" v-on="on">
                                                 <v-icon class="white--text mr-1 caption">
-                                                    fas {{!['suspended', 'rejected'].includes(item.status) ? 'fa-close' : 'fa-check' }}
+                                                    fas {{
+                                                        !['suspended', 'rejected'].includes(item.status) ? 'fa-close' : 'fa-check'
+                                                    }}
                                                 </v-icon>
                                                 <span>
-                                                    {{ !['suspended', 'rejected'].includes(item.status) ? 'reject' : 'approve' }}
+                                                    {{
+                                                        !['suspended', 'rejected'].includes(item.status) ? 'reject' : 'approve'
+                                                    }}
                                                 </span>
                                             </v-btn>
                                         </template>
-                                        <span>{{ !['suspended', 'rejected'].includes(item.status) ? 'reject' : 'approve'
+                                        <span>{{
+                                                !['suspended', 'rejected'].includes(item.status) ? 'reject' : 'approve'
                                             }}</span>
                                     </v-tooltip>
                                     <v-tooltip bottom open-on-hover>
                                         <template v-slot:activator="{ on, attrs }">
                                             <v-btn v-bind="attrs" v-on="on" color="cyan" class="mr-2"
-                                                @click="show(item.id)">
+                                                   @click="show(item.id)">
                                                 <v-icon class="white--text mr-1 caption">fas fa-eye</v-icon>
                                                 <span>Show</span>
                                             </v-btn>
@@ -93,8 +101,8 @@
                                     <v-tooltip bottom open-on-hover>
                                         <template v-slot:activator="{ on, attrs }">
                                             <router-link class="LinkBtn"
-                                                v-if="$hasRole('Admin') || item.user_id == $store.state.user.id"
-                                                :to="{ name: 'EditPackage', params: { package: item.id } }">
+                                                         v-if="$hasRole('Admin') || item.user_id == $store.state.user.id"
+                                                         :to="{ name: 'EditPackage', params: { package: item.id } }">
                                                 <v-btn v-bind="attrs" v-on="on" color="orange" class="mr-2">
                                                     <v-icon class="white--text mr-1 caption">fas fa-pen</v-icon>
                                                     <span>Edit</span>
@@ -106,8 +114,8 @@
                                     <v-tooltip bottom open-on-hover>
                                         <template v-slot:activator="{ on, attrs }">
                                             <v-btn v-bind="attrs" v-on="on" color="pink" class="WM-ActionButton mr-2"
-                                                @click="remove(item.id)"
-                                                v-if="$hasRole('Admin') || item.user_id == $store.state.user.id">
+                                                   @click="remove(item.id)"
+                                                   v-if="$hasRole('Admin') || item.user_id == $store.state.user.id">
                                                 <v-icon class="white--text mr-2 caption">fas fa-times</v-icon>
                                                 <span>Remove</span>
                                             </v-btn>
@@ -117,7 +125,7 @@
                                     <v-tooltip bottom open-on-hover>
                                         <template v-slot:activator="{ on, attrs }">
                                             <v-btn class="mr-2" v-bind="attrs" v-on="on" color="orange darken-1"
-                                                @click="generateBarcode(item, 'Package')">
+                                                   @click="generateBarcode(item, 'Package')">
                                                 <v-icon class="white--text mr-1 caption">fas fa-barcode</v-icon>
                                                 <span>Generate Barcode</span>
                                             </v-btn>
@@ -131,7 +139,8 @@
                 </v-layout>
                 <v-divider/>
                 <div class="text-xs-center" v-if="lastPage > 1">
-                    <v-pagination color="black" v-model="currentPage" :length="lastPage" :total-visible="6"></v-pagination>
+                    <v-pagination color="black" v-model="currentPage" :length="lastPage"
+                                  :total-visible="6"></v-pagination>
                 </div>
                 <v-layout row wrap align-center justify-center class="mt-3">
                     <router-link to="/dashboard">
@@ -147,9 +156,9 @@
 </template>
 
 <script>
-import { ApiService } from "@/services";
-import { urls } from "@/config/urls";
-import { mapMutations, mapGetters } from "vuex";
+import {ApiService} from "@/services";
+import {urls} from "@/config/urls";
+import {mapMutations, mapGetters} from "vuex";
 import toast from "@/services/global/toast.service";
 
 export default {
@@ -226,10 +235,10 @@ export default {
             }
             filter += (page) ? `page=${page}` : `page=1`;
             const result = await ApiService.get(
-                urls.listPackage(filter)
+                    urls.listPackage(filter)
             );
             if (result && result.status == 200) {
-                const { data, meta } = result.data;
+                const {data, meta} = result.data;
                 this.items = data;
                 this.currentPage = meta.current_page;
                 this.lastPage = meta.last_page;
@@ -238,24 +247,24 @@ export default {
         },
         async show(testResultId) {
             const result = await ApiService.get(
-                urls.showPackage(testResultId)
+                    urls.showPackage(testResultId)
             );
             if (result && result.status == 200) {
                 this.changeCurrentModal({
                     modal: "modal-package-show",
-                    properties: { result }
+                    properties: {result}
                 });
             }
         },
         async remove(testResultId) {
             const result = await ApiService.delete(
-                urls.removePackage(testResultId)
+                    urls.removePackage(testResultId)
             );
             if (result && result.status == 200) {
                 for (const key in this.items) {
                     if (
-                        this.items.hasOwnProperty(key) &&
-                        this.items[key].id == testResultId
+                            this.items.hasOwnProperty(key) &&
+                            this.items[key].id == testResultId
                     ) {
                         this.items.splice(key, 1);
                     }
@@ -269,7 +278,7 @@ export default {
                 if (result && result.status == 200) {
                     this.changeCurrentModal({
                         modal: "modal-barcode-barcode",
-                        properties: { result }
+                        properties: {result}
                     });
                 }
             } else {
@@ -312,8 +321,8 @@ export default {
         getModalResult(testResult) {
             for (const key in this.items) {
                 if (
-                    this.items.hasOwnProperty(key) &&
-                    this.items[key].id == testResult.id
+                        this.items.hasOwnProperty(key) &&
+                        this.items[key].id == testResult.id
                 ) {
                     this.items[key] = testResult;
                 }
diff --git a/src/views/TestResult/AddEdit.vue b/src/views/TestResult/AddEdit.vue
index 62f9e06..7749489 100644
--- a/src/views/TestResult/AddEdit.vue
+++ b/src/views/TestResult/AddEdit.vue
@@ -1,675 +1,682 @@
 <template>
-	<v-form ref="form">
-		<v-container grid-list-xs>
-			<material-card color="black" title="Submit Test Result">
-				<v-layout  wrap class="px-5 my-3" v-if="!$route.params.testResult">
-					<v-flex xs12 md2 sm3 class="WM-FlexCenter">
-						<v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"></v-icon>
-						<v-autocomplete
-							:search-input.sync="searchInput"
-							:items="testTypeNames"
-							v-model="filter.name"
-							label="Choose Test Type"
-							color="black"
-							class="py-3 pr-3"
-						></v-autocomplete>
-					</v-flex>
-					<v-flex xs12 md2 sm3 class="WM-FlexCenter ml-3">
-							<v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"></v-icon>
-						<v-text-field
-							name="testcode"
-							v-model="filter.unique_code"
-							label="Or Enter Test Unique Code"
-							color="black"
-							class="py-3 pr-3"
-						></v-text-field>
-					</v-flex>
-
-					<!-- <v-spacer></v-spacer> -->
-					<v-flex xs12 md2 sm2 class="text-xs-center text-sm-center text-md-center">
-						<v-btn
-							class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black"
-							@click="selectTestType"
-							style="padding:10px 60px;"
-						>
-							<v-icon class="black--text mr-2 caption">fas fa-chevron-right</v-icon>
-							<span class="black--text">Select Test Result</span>
-						</v-btn>
-					</v-flex>
-				</v-layout>
-				<v-layout row wrap class="px-5 my-3" v-if="!$route.params.testResult && form.length">
-					<v-divider></v-divider>
-				</v-layout>
-				<v-layout wrap class="px-5 my-3" v-if="form.length">
-					<v-flex xs12 sm12 md12>
-						<h3 class="WM-BorderLeftTitle">{{testTypeNameSelected}}</h3>
-					</v-flex>
-					<!-- <v-flex xs12 sm3 md3>
-						<v-text-field
-							name="id"
-							v-model="formData.device_id"
-							:label="device_label[formData.device_label]"
-							color="black"
-							class="pa-2"
-							prepend-icon="fas fa-sort-numeric-up"
-						></v-text-field>
-					</v-flex> -->
-					<v-flex xs12 sm2 md2>
-						<v-menu
-							lazy
-							:close-on-content-click="true"
-							transition="v-scale-transition"
-							offset-y
-							v-model="menu"
-							class="pa-2"
-						>
-							<v-text-field style="padding-top:0 !important"
-								prepend-icon="far fa-calendar-alt"
-								required
-								slot="activator"
-								label="Date"
-								v-model="formData.date"
-
-								color="black"
-							></v-text-field>
-							<v-date-picker
-							min="2020-01-01"
-								color="pink"
-								no-title
-								v-model="formData.date"
-								:date-format="date => new Date(formData.date).toDateString()"
-							></v-date-picker>
-						</v-menu>
-					</v-flex>
-					<v-flex xs12 sm2 md2>
-						<v-switch color="light-green accent-3" v-model="result" :label="'Result: ' + formData.result"></v-switch>
-					</v-flex>
-					<v-spacer></v-spacer>
-					<v-flex xs12 sm12 md12>
-
-						<template v-if="galleryDataLoaded">
-							<wm-Dropzone :Images="galleries" :BatchID="file_batch_id" :ModelID="$route.params.testResult" ModelType="TestResult"></wm-Dropzone>
-						</template>
-
-					</v-flex>
-					</v-layout>
+    <v-form ref="form">
+        <v-container grid-list-xs>
+            <material-card color="black" title="Submit Test Result">
+                <v-layout wrap class="px-5 my-3" v-if="!$route.params.testResult">
+                    <v-flex xs12 sm6 md4 lg3 xl2 class="WM-FlexCenter">
+                        <v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"/>
+                        <v-autocomplete
+                                :search-input.sync="searchInput"
+                                :items="testTypeNames"
+                                v-model="filter.name"
+                                label="Choose Test Type"
+                                color="black"
+                                class="py-3 pr-3"
+                        />
+                    </v-flex>
+                    <v-flex xs12 sm6 md4 lg3 xl2 class="WM-FlexCenter ml-3">
+                        <v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"/>
+                        <v-text-field
+                                name="testcode"
+                                v-model="filter.unique_code"
+                                label="Or Enter Test Unique Code"
+                                color="black"
+                                class="py-3 pr-3"
+                        />
+                    </v-flex>
+                    <v-spacer/>
+                    <v-flex xs12 sm4 md4 lg3 xl2 class="text-xs-center text-sm-center text-md-center">
+                        <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black"
+                               @click="selectTestType"
+                               style="padding:10px 60px;">
+                            <v-icon class="black--text mr-2 caption">fas fa-chevron-right</v-icon>
+                            <span class="black--text">Select Test Result</span>
+                        </v-btn>
+                    </v-flex>
+                </v-layout>
+                <v-layout row wrap class="px-5 my-3" v-if="!$route.params.testResult && form.length">
+                    <v-divider/>
+                </v-layout>
+                <v-layout wrap class="px-5 my-3" v-if="form.length">
+                    <v-flex xs12 sm12 md12>
+                        <h3 class="WM-BorderLeftTitle">{{ testTypeNameSelected }}</h3>
+                    </v-flex>
+                    <!-- <v-flex xs12 sm3 md3>
+                        <v-text-field
+                            name="id"
+                            v-model="formData.device_id"
+                            :label="device_label[formData.device_label]"
+                            color="black"
+                            class="pa-2"
+                            prepend-icon="fas fa-sort-numeric-up"
+                        />
+                    </v-flex> -->
+                    <v-flex xs12 sm2 md2>
+                        <v-menu
+                                lazy
+                                :close-on-content-click="true"
+                                transition="v-scale-transition"
+                                offset-y
+                                v-model="menu"
+                                class="pa-2">
+                            <v-text-field style="padding-top:0 !important"
+                                          prepend-icon="far fa-calendar-alt"
+                                          required
+                                          slot="activator"
+                                          label="Date"
+                                          v-model="formData.date"
+                                          color="black"/>
+                            <v-date-picker
+                                    min="2020-01-01"
+                                    color="pink"
+                                    no-title
+                                    v-model="formData.date"
+                                    :date-format="date => new Date(formData.date).toDateString()"/>
+                        </v-menu>
+                    </v-flex>
+                    <v-flex xs12 sm2 md2>
+                        <v-switch color="light-green accent-3" v-model="result" :label="'Result: ' + formData.result"/>
+                    </v-flex>
+                    <v-spacer/>
+                    <v-flex xs12 sm12 md12>
+                        <template v-if="galleryDataLoaded">
+                            <wm-Dropzone :Images="galleries" :BatchID="file_batch_id"
+                                         :ModelID="$route.params.testResult" ModelType="TestResult"/>
+                        </template>
+                    </v-flex>
+                </v-layout>
 
 
-					<!--______________________  DynamicComponent :: Began  _______________________-->
+                <!--______________________  DynamicComponent :: Began  _______________________-->
 
-					<v-layout wrap class="px-5 my-3">
-					<v-flex :class="['pa-2', item.size]" v-for="(item, key) in form" :key="key">
-						<v-container row md-12 sm-12 xs-12 v-if="item.type == 'Temperature'">
-							<v-layout row wrap>
-								<h3 class="WM-BorderLeftTitle">{{ item.name }}</h3>
-							</v-layout>
-							<v-layout row wrap>
-								<v-container fluid class="WM-Padding-LR-0">
-									<v-flex xs12>
-										<v-slider
-											step="0.1"
-											prepend-icon="fas fa-temperature-high"
-											v-model="formData[item.name+'_'+item.id]"
-											min="0"
-											max="200"
-											thumb-label="always"
-										></v-slider>
-									</v-flex>
-								</v-container>
-							</v-layout>
-						</v-container>
-						<v-container row md-12 sm-12 xs-12 v-if="item.type == 'Text'">
-							<v-layout row wrap>
-								<h3 class="WM-BorderLeftTitle">{{ item.name }}</h3>
-							</v-layout>
-							<v-layout row wrap>
-								<v-container fluid class="WM-Padding-LR-0">
-									<v-text-field
-										v-model="formData[item.name+'_'+item.id]"
-										:label="item.name"
-										color="black"
-										prepend-icon="fa fa-align-left"
-									></v-text-field>
-								</v-container>
-							</v-layout>
-						</v-container>
-						<v-container row md-12 sm-12 xs-12 v-if="item.type == 'Pressure'">
-							<v-layout row wrap>
-								<h3 class="WM-BorderLeftTitle">{{ item.name }}</h3>
-							</v-layout>
-							<v-layout row wrap>
-								<v-container fluid class="WM-Padding-LR-0">
-									<v-flex xs12>
-										<v-slider
-											prepend-icon="fa fa-flask"
-											step="0.01"
-											v-model="formData[item.name+'_'+item.id]"
-											min="-1"
-											max="3"
-											thumb-label="always"
-										></v-slider>
-									</v-flex>
-								</v-container>
-							</v-layout>
-						</v-container>
-						<v-container row md-12 sm-12 xs-12 v-if="item.type == 'Select'">
-							<v-layout row wrap>
-								<h3 class="WM-BorderLeftTitle">{{ item.name }}</h3>
-							</v-layout>
-							<v-layout row wrap>
-								<v-container fluid class="WM-Padding-LR-0">
-									<v-flex xs12>
-										<v-select
-											multiple
-											prepend-icon="fa fa-check"
-											:items="item.options"
-											v-model="formData[item.name+'_'+item.id]"
-											:label="item.name"
-											color="black"
-											item-text="title"
-											item-value="id"
-										></v-select>
-								</v-flex>
-							</v-container>
-						</v-layout>
-					</v-container>
-					<v-container row md-12 sm-12 xs-12 v-if="item.type == 'Checkbox'">
-						<v-layout row wrap>
-							<h3 class="WM-BorderLeftTitle">{{ item.name }}</h3>
-						</v-layout>
-						<v-layout row wrap>
-							<v-container fluid class="WM-Padding-LR-0">
-								<v-flex xs12 class="WM-FlexWrap mr-3">
-									<v-checkbox
-										v-for="(optionValue, keyOption) in item.options"
-										:key="keyOption"
-										:label="optionValue.title"
-										v-model="formData[item.name+'_'+item.id]"
-										:value="optionValue.id"
-									></v-checkbox>
-							</v-flex>
-						</v-container>
-					</v-layout>
-				</v-container>
-				<v-container row md-12 sm-12 xs-12 v-if="item.type == 'Radiobutton'">
-					<v-layout row wrap>
-						<h3 class="WM-BorderLeftTitle">{{ item.name }}</h3>
-					</v-layout>
-					<v-layout row wrap>
-						<v-container fluid class="WM-Padding-LR-0">
-							<v-flex xs12 class="WM-FlexWrap">
-								<v-radio-group v-model="formData[item.name+'_'+item.id]">
-									<v-radio
-										v-for="(optionValue, keyOption) in item.options"
-										:key="keyOption"
-										:label="optionValue.title"
-										:value="optionValue.id"
-									></v-radio>
-								</v-radio-group>
-						</v-flex>
-					</v-container>
-				</v-layout>
-			</v-container>
-			<v-container row md-12 sm-12 xs-12 v-if="item.type == 'Switch'">
-				<v-layout row wrap>
-					<h3 class="WM-BorderLeftTitle">{{ item.name }}</h3>
-				</v-layout>
-				<v-layout row wrap>
-					<v-container fluid class="WM-Padding-LR-0">
-						<v-flex xs12>
-							<v-switch
-								color="light-green accent-3"
-								v-model="formData[item.name+'_'+item.id]"
-								:label="item.name + ': ' + formData[item.name+'_'+item.id].toString()"
-							></v-switch>
-							</v-flex>
-						</v-container>
-					</v-layout>
-			</v-container>
-			<v-container row md-12 sm-12 xs-12 v-if="item.type == 'Range'">
-				<v-layout row wrap>
-					<h3 class="WM-BorderLeftTitle">{{ item.name }}</h3>
-				</v-layout>
-				<v-layout row wrap>
-				<v-container fluid class="WM-Padding-LR-0">
-				<v-flex xs12>
-					<v-slider
-						v-model="formData[item.name+'_'+item.id]"
-						:min="item.options[0].title"
-						:max="item.options[1].title"
-						thumb-label="always"
-						color="black"
-						prepend-icon="fa fa-sliders"
-					></v-slider>
-				</v-flex>
-				</v-container>
-			</v-layout>
-			</v-container>
-			<v-container row md-12 sm-12 xs-12 v-if="item.type == 'Time'">
-				<v-layout row wrap>
-					<h3 class="WM-BorderLeftTitle">{{ item.name }}</h3>
-				</v-layout>
-				<v-layout row wrap>
-					<v-container fluid class="WM-Padding-LR-0">
-						<v-flex xs12>
-							<v-text-field
-								v-model="formData[item.name+'_'+item.id]"
-								:label="item.name"
-								class="WM-Font-30"
-								mask="##:##"
-								color="black"
-								prepend-icon="fa fa-clock-o"
-							></v-text-field>
-						</v-flex>
-					</v-container>
-			</v-layout>
-			</v-container>
-			<!-- <v-layout row wrap>
-			<template v-if="item.type == 'Form'"> -->
-				<v-container row md-12 sm-12 xs-12 class="WM-Border WM-Border-LightGray WM-Padding-10 WM-BorderRadius-5" v-if="item.type == 'Form'">
-					<v-layout row wrap>
-						<h3 class="WM-BorderLeftTitle">{{ item.name }}</h3>
-					</v-layout>
-					<v-layout row wrap>
-						<v-flex
-							:class="['pa-2', children.size]"
-							v-for="(children, keyChildren) in item.children"
-							:key="keyChildren"
-						>
-							<v-container fluid v-if="children.type == 'Text'" class="WM-Padding-LR-0">
-								<p>{{ children.name }}</p>
-									<v-flex xs12>
-										<v-text-field
-											prepend-icon="fa fa-align-left"
-											v-model="formData[children.name+'_'+children.id]"
-											:label="children.name"
-											color="black"
-										></v-text-field>
-									</v-flex>
-							</v-container>
-							<v-container fluid v-if="children.type == 'Temperature'" class="WM-Padding-LR-0">
-								<p>{{ children.name }}</p>
-								<v-flex xs12>
-									<v-slider
-										prepend-icon="fas fa-temperature-high"
-										step="0.1"
-										v-model="formData[children.name+'_'+children.id]"
-										min="0"
-										max="200"
-										thumb-label="always"
-									></v-slider>
-								</v-flex>
-							</v-container>
-							<v-container fluid v-if="children.type == 'Pressure'" class="WM-Padding-LR-0">
-								<p>{{ children.name }}</p>
-								<v-flex xs12>
-									<v-slider
-										prepend-icon="fa fa-flask"
-										v-model="formData[children.name+'_'+children.id]"
-										min="-1"
-										step="0.01"
-										max="3"
-										thumb-label="always"
-									></v-slider>
-								</v-flex>
-							</v-container>
-							<v-container fluid v-if="children.type == 'Select'" class="WM-Padding-LR-0">
-								<p>{{ children.name }}</p>
-									<v-flex xs12>
-										<v-select
-											multiple
-											prepend-icon="fa fa-check"
-											:items="children.options"
-											v-model="formData[children.name+'_'+children.id]"
-											:label="children.name"
-											color="black"
-											item-text="title"
-											item-value="id"
-										></v-select>
-								</v-flex>
-							</v-container>
-							<v-container fluid v-if="children.type == 'Checkbox'" class="WM-Padding-LR-0">
-								<p>{{ children.name }}</p>
-									<v-flex xs12 class="WM-FlexWrap mr-3">
-										<v-checkbox
-											v-for="(optionValue, keyOption) in children.options"
-											:key="keyOption"
-											:label="optionValue.title"
-											v-model="formData[children.name+'_'+children.id]"
-											:value="optionValue.id"
-										></v-checkbox>
-									</v-flex>
-							</v-container>
-							<v-container fluid v-if="children.type == 'Radiobutton'" class="WM-Padding-LR-0">
-								<p>{{ children.name }}</p>
-									<v-flex xs12 class="WM-FlexWrap">
-										<v-radio-group v-model="formData[children.name+'_'+children.id]">
-											<v-radio
-												v-for="(optionValue, keyOption) in children.options"
-												:key="keyOption"
-												:label="optionValue.title"
-												:value="optionValue.id"
-											></v-radio>
-										</v-radio-group>
-									</v-flex>
-							</v-container>
-							<v-container fluid v-if="children.type == 'Switch'" class="WM-Padding-LR-0">
-								<p>{{ children.name }}</p>
-									<v-flex xs12>
-										<v-switch
-											color="light-green accent-3"
-											v-model="formData[children.name+'_'+children.id]"
-											:label="children.name + ': ' + formData[children.name+'_'+children.id].toString()"
-										></v-switch>
-								</v-flex>
-							</v-container>
-							<v-container fluid v-if="children.type == 'Range'" class="WM-Padding-LR-0">
-								<p>{{ item.name }}</p>
-								<v-flex xs12>
-									<v-slider
-										v-model="formData[children.name+'_'+children.id]"
-										:min="children.options[0].title"
-										:max="children.options[1].title"
-										thumb-label="always"
-										prepend-icon="fa fa-check"
-									></v-slider>
-								</v-flex>
-							</v-container>
-							<v-container fluid v-if="children.type == 'Time'" class="WM-Padding-LR-0">
-								<p>{{ children.name }}</p>
-									<v-flex xs12>
-										<v-text-field
-											v-model="formData[children.name+'_'+children.id]"
-											:label="children.name"
-											class="WM-Font-30"
-											mask="##:##"
-											prepend-icon="fa fa-clock-o"
-										></v-text-field>
-								</v-flex>
-							</v-container>
-						</v-flex>
-					</v-layout>
-				</v-container>
-			<!-- </template>
-			</v-layout> -->
-					</v-flex>
-				</v-layout>
-				<v-layout row wrap class="px-5 my-3">
-					<v-divider></v-divider>
-				</v-layout>
-				<v-layout align-center justify-center wrap class="px-5 mt-2">
-					<v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px" @click="submitForm">
-						<v-icon class="white--text mr-2 caption">fas fa-check</v-icon>
-						<span class="white--text">SAVE</span>
-					</v-btn>
-					<router-link :to="{name: 'AllResultTest'}">
-						<v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black ml-5">
-							<v-icon class="black--text mr-2 caption">fas fa-chevron-left</v-icon>
-							<span class="black--text">Back</span>
-						</v-btn>
-					</router-link>
-				</v-layout>
-			</material-card>
-		</v-container>
-	</v-form>
+                <v-layout wrap class="px-5 my-3">
+                    <v-flex :class="['pa-2', item.size]" v-for="(item, key) in form" :key="key">
+                        <v-container row md-12 sm-12 xs-12 v-if="item.type == 'Temperature'">
+                            <v-layout row wrap>
+                                <h3 class="WM-BorderLeftTitle">{{ item.name }}</h3>
+                            </v-layout>
+                            <v-layout row wrap>
+                                <v-container fluid class="WM-Padding-LR-0">
+                                    <v-flex xs12>
+                                        <v-slider
+                                                step="0.1"
+                                                prepend-icon="fas fa-temperature-high"
+                                                v-model="formData[item.name+'_'+item.id]"
+                                                min="0"
+                                                max="200"
+                                                thumb-label="always"
+                                        />
+                                    </v-flex>
+                                </v-container>
+                            </v-layout>
+                        </v-container>
+                        <v-container row md-12 sm-12 xs-12 v-if="item.type == 'Text'">
+                            <v-layout row wrap>
+                                <h3 class="WM-BorderLeftTitle">{{ item.name }}</h3>
+                            </v-layout>
+                            <v-layout row wrap>
+                                <v-container fluid class="WM-Padding-LR-0">
+                                    <v-text-field
+                                            v-model="formData[item.name+'_'+item.id]"
+                                            :label="item.name"
+                                            color="black"
+                                            prepend-icon="fa fa-align-left"
+                                    />
+                                </v-container>
+                            </v-layout>
+                        </v-container>
+                        <v-container row md-12 sm-12 xs-12 v-if="item.type == 'Pressure'">
+                            <v-layout row wrap>
+                                <h3 class="WM-BorderLeftTitle">{{ item.name }}</h3>
+                            </v-layout>
+                            <v-layout row wrap>
+                                <v-container fluid class="WM-Padding-LR-0">
+                                    <v-flex xs12>
+                                        <v-slider
+                                                prepend-icon="fa fa-flask"
+                                                step="0.01"
+                                                v-model="formData[item.name+'_'+item.id]"
+                                                min="-1"
+                                                max="3"
+                                                thumb-label="always"
+                                        />
+                                    </v-flex>
+                                </v-container>
+                            </v-layout>
+                        </v-container>
+                        <v-container row md-12 sm-12 xs-12 v-if="item.type == 'Select'">
+                            <v-layout row wrap>
+                                <h3 class="WM-BorderLeftTitle">{{ item.name }}</h3>
+                            </v-layout>
+                            <v-layout row wrap>
+                                <v-container fluid class="WM-Padding-LR-0">
+                                    <v-flex xs12>
+                                        <v-select
+                                                multiple
+                                                prepend-icon="fa fa-check"
+                                                :items="item.options"
+                                                v-model="formData[item.name+'_'+item.id]"
+                                                :label="item.name"
+                                                color="black"
+                                                item-text="title"
+                                                item-value="id"
+                                        />
+                                    </v-flex>
+                                </v-container>
+                            </v-layout>
+                        </v-container>
+                        <v-container row md-12 sm-12 xs-12 v-if="item.type == 'Checkbox'">
+                            <v-layout row wrap>
+                                <h3 class="WM-BorderLeftTitle">{{ item.name }}</h3>
+                            </v-layout>
+                            <v-layout row wrap>
+                                <v-container fluid class="WM-Padding-LR-0">
+                                    <v-flex xs12 class="WM-FlexWrap mr-3">
+                                        <v-checkbox
+                                                v-for="(optionValue, keyOption) in item.options"
+                                                :key="keyOption"
+                                                :label="optionValue.title"
+                                                v-model="formData[item.name+'_'+item.id]"
+                                                :value="optionValue.id"
+                                        />
+                                    </v-flex>
+                                </v-container>
+                            </v-layout>
+                        </v-container>
+                        <v-container row md-12 sm-12 xs-12 v-if="item.type == 'Radiobutton'">
+                            <v-layout row wrap>
+                                <h3 class="WM-BorderLeftTitle">{{ item.name }}</h3>
+                            </v-layout>
+                            <v-layout row wrap>
+                                <v-container fluid class="WM-Padding-LR-0">
+                                    <v-flex xs12 class="WM-FlexWrap">
+                                        <v-radio-group v-model="formData[item.name+'_'+item.id]">
+                                            <v-radio
+                                                    v-for="(optionValue, keyOption) in item.options"
+                                                    :key="keyOption"
+                                                    :label="optionValue.title"
+                                                    :value="optionValue.id"
+                                            />
+                                        </v-radio-group>
+                                    </v-flex>
+                                </v-container>
+                            </v-layout>
+                        </v-container>
+                        <v-container row md-12 sm-12 xs-12 v-if="item.type == 'Switch'">
+                            <v-layout row wrap>
+                                <h3 class="WM-BorderLeftTitle">{{ item.name }}</h3>
+                            </v-layout>
+                            <v-layout row wrap>
+                                <v-container fluid class="WM-Padding-LR-0">
+                                    <v-flex xs12>
+                                        <v-switch
+                                                color="light-green accent-3"
+                                                v-model="formData[item.name+'_'+item.id]"
+                                                :label="item.name + ': ' + formData[item.name+'_'+item.id].toString()"
+                                        />
+                                    </v-flex>
+                                </v-container>
+                            </v-layout>
+                        </v-container>
+                        <v-container row md-12 sm-12 xs-12 v-if="item.type == 'Range'">
+                            <v-layout row wrap>
+                                <h3 class="WM-BorderLeftTitle">{{ item.name }}</h3>
+                            </v-layout>
+                            <v-layout row wrap>
+                                <v-container fluid class="WM-Padding-LR-0">
+                                    <v-flex xs12>
+                                        <v-slider
+                                                v-model="formData[item.name+'_'+item.id]"
+                                                :min="item.options[0].title"
+                                                :max="item.options[1].title"
+                                                thumb-label="always"
+                                                color="black"
+                                                prepend-icon="fa fa-sliders"
+                                        />
+                                    </v-flex>
+                                </v-container>
+                            </v-layout>
+                        </v-container>
+                        <v-container row md-12 sm-12 xs-12 v-if="item.type == 'Time'">
+                            <v-layout row wrap>
+                                <h3 class="WM-BorderLeftTitle">{{ item.name }}</h3>
+                            </v-layout>
+                            <v-layout row wrap>
+                                <v-container fluid class="WM-Padding-LR-0">
+                                    <v-flex xs12>
+                                        <v-text-field
+                                                v-model="formData[item.name+'_'+item.id]"
+                                                :label="item.name"
+                                                class="WM-Font-30"
+                                                mask="##:##"
+                                                color="black"
+                                                prepend-icon="fa fa-clock-o"
+                                        />
+                                    </v-flex>
+                                </v-container>
+                            </v-layout>
+                        </v-container>
+                        <!-- <v-layout row wrap>
+                        <template v-if="item.type == 'Form'"> -->
+                        <v-container row md-12 sm-12 xs-12
+                                     class="WM-Border WM-Border-LightGray WM-Padding-10 WM-BorderRadius-5"
+                                     v-if="item.type == 'Form'">
+                            <v-layout row wrap>
+                                <h3 class="WM-BorderLeftTitle">{{ item.name }}</h3>
+                            </v-layout>
+                            <v-layout row wrap>
+                                <v-flex
+                                        :class="['pa-2', children.size]"
+                                        v-for="(children, keyChildren) in item.children"
+                                        :key="keyChildren">
+                                    <v-container fluid v-if="children.type == 'Text'" class="WM-Padding-LR-0">
+                                        <p>{{ children.name }}</p>
+                                        <v-flex xs12>
+                                            <v-text-field
+                                                    prepend-icon="fa fa-align-left"
+                                                    v-model="formData[children.name+'_'+children.id]"
+                                                    :label="children.name"
+                                                    color="black"
+                                            />
+                                        </v-flex>
+                                    </v-container>
+                                    <v-container fluid v-if="children.type == 'Temperature'" class="WM-Padding-LR-0">
+                                        <p>{{ children.name }}</p>
+                                        <v-flex xs12>
+                                            <v-slider
+                                                    prepend-icon="fas fa-temperature-high"
+                                                    step="0.1"
+                                                    v-model="formData[children.name+'_'+children.id]"
+                                                    min="0"
+                                                    max="200"
+                                                    thumb-label="always"
+                                            />
+                                        </v-flex>
+                                    </v-container>
+                                    <v-container fluid v-if="children.type == 'Pressure'" class="WM-Padding-LR-0">
+                                        <p>{{ children.name }}</p>
+                                        <v-flex xs12>
+                                            <v-slider
+                                                    prepend-icon="fa fa-flask"
+                                                    v-model="formData[children.name+'_'+children.id]"
+                                                    min="-1"
+                                                    step="0.01"
+                                                    max="3"
+                                                    thumb-label="always"
+                                            />
+                                        </v-flex>
+                                    </v-container>
+                                    <v-container fluid v-if="children.type == 'Select'" class="WM-Padding-LR-0">
+                                        <p>{{ children.name }}</p>
+                                        <v-flex xs12>
+                                            <v-select
+                                                    multiple
+                                                    prepend-icon="fa fa-check"
+                                                    :items="children.options"
+                                                    v-model="formData[children.name+'_'+children.id]"
+                                                    :label="children.name"
+                                                    color="black"
+                                                    item-text="title"
+                                                    item-value="id"
+                                            />
+                                        </v-flex>
+                                    </v-container>
+                                    <v-container fluid v-if="children.type == 'Checkbox'" class="WM-Padding-LR-0">
+                                        <p>{{ children.name }}</p>
+                                        <v-flex xs12 class="WM-FlexWrap mr-3">
+                                            <v-checkbox
+                                                    v-for="(optionValue, keyOption) in children.options"
+                                                    :key="keyOption"
+                                                    :label="optionValue.title"
+                                                    v-model="formData[children.name+'_'+children.id]"
+                                                    :value="optionValue.id"
+                                            />
+                                        </v-flex>
+                                    </v-container>
+                                    <v-container fluid v-if="children.type == 'Radiobutton'" class="WM-Padding-LR-0">
+                                        <p>{{ children.name }}</p>
+                                        <v-flex xs12 class="WM-FlexWrap">
+                                            <v-radio-group v-model="formData[children.name+'_'+children.id]">
+                                                <v-radio
+                                                        v-for="(optionValue, keyOption) in children.options"
+                                                        :key="keyOption"
+                                                        :label="optionValue.title"
+                                                        :value="optionValue.id"
+                                                />
+                                            </v-radio-group>
+                                        </v-flex>
+                                    </v-container>
+                                    <v-container fluid v-if="children.type == 'Switch'" class="WM-Padding-LR-0">
+                                        <p>{{ children.name }}</p>
+                                        <v-flex xs12>
+                                            <v-switch
+                                                    color="light-green accent-3"
+                                                    v-model="formData[children.name+'_'+children.id]"
+                                                    :label="children.name + ': ' + formData[children.name+'_'+children.id].toString()"
+                                            />
+                                        </v-flex>
+                                    </v-container>
+                                    <v-container fluid v-if="children.type == 'Range'" class="WM-Padding-LR-0">
+                                        <p>{{ item.name }}</p>
+                                        <v-flex xs12>
+                                            <v-slider
+                                                    v-model="formData[children.name+'_'+children.id]"
+                                                    :min="children.options[0].title"
+                                                    :max="children.options[1].title"
+                                                    thumb-label="always"
+                                                    prepend-icon="fa fa-check"
+                                            />
+                                        </v-flex>
+                                    </v-container>
+                                    <v-container fluid v-if="children.type == 'Time'" class="WM-Padding-LR-0">
+                                        <p>{{ children.name }}</p>
+                                        <v-flex xs12>
+                                            <v-text-field
+                                                    v-model="formData[children.name+'_'+children.id]"
+                                                    :label="children.name"
+                                                    class="WM-Font-30"
+                                                    mask="##:##"
+                                                    prepend-icon="fa fa-clock-o"
+                                            />
+                                        </v-flex>
+                                    </v-container>
+                                </v-flex>
+                            </v-layout>
+                        </v-container>
+                        <!-- </template>
+                        </v-layout> -->
+                    </v-flex>
+                </v-layout>
+                <v-layout row wrap class="px-5 my-3">
+                    <v-divider/>
+                </v-layout>
+                <v-layout align-center justify-center wrap class="px-5 mt-2">
+                    <v-flex class xs12 sm4 md3>
+                        <router-link :to="{name: 'AllResultTest'}">
+                            <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black ml-5">
+                                <v-icon class="black--text mr-2 caption">fas fa-chevron-left</v-icon>
+                                <span class="black--text">Back</span>
+                            </v-btn>
+                        </router-link>
+                    </v-flex>
+                    <v-flex class xs12 sm4 md3>
+                        <v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px" @click="submitForm">
+                            <v-icon class="white--text mr-2 caption">fas fa-check</v-icon>
+                            <span class="white--text">SAVE</span>
+                        </v-btn>
+                    </v-flex>
+                </v-layout>
+            </material-card>
+        </v-container>
+    </v-form>
 </template>
 <script>
 import Dropzone from '@/components/core/Dropzone'
-import { ApiService } from "@/services";
-import { urls } from "@/config/urls";
+import {ApiService} from "@/services";
+import {urls} from "@/config/urls";
+
 export default {
-	components : {
-    'wm-Dropzone' : Dropzone,
-  },
-	data: () => ({
-		galleryDataLoaded: false,
-		galleries: [],
-		file_batch_id: Math.floor(Math.random() * 9000000000) + 1000000000,
-		testTypeNames: [],
-		testTypeNameSelected: "",
-		searchInput: "",
-		form: [],
-		filter: {
-			test_result_id: "",
-			name: "",
-			unique_code: "",
-		},
-		result: false,
-		formData: {
-			// device_id: "",
-			device_label: "ID",
-			result: "Reject",
-			img: null,
-			test_type_id: "",
-			date : "2020-01-01"
-		},
-		images: [],
-		menu: "",
-		device_label: {
-			WasherID: "Washer ID",
-			AutoclaveID: "Autoclave ID",
-			SterilizerID: "Sterilizer ID",
-			WasherMachineID: "WasherMachine ID",
-			SealMachineID: "SealMachine ID",
-			PatientID: "Patient ID",
-			"Set/PackID": "Set/Pack ID",
-			MDID: "MD ID",
-			ORID: "OR ID",
-			PersonalID: "Personal ID",
-			InstrumentID: "Instrument ID",
-			ID: "ID"
-		}
-	}),
-	created() {
-		if (this.$route.params.testResult) {
-			this.filter.test_result_id = this.$route.params.testResult;
-			this.selectTestType();
-		}
-		else{
-			this.galleryDataLoaded= true;
-		}
-		this.load();
-	},
-	methods: {
-		async load() {
-			const result = await ApiService.get(urls.listTestTypeName);
-			this.testTypeNames = result.data.data;
-		},
-		async selectTestType() {
-			const result = await ApiService.post(urls.getInputs, this.filter);
-			if (result && result.status == 200) {
-				this.testTypeNameSelected = result.data.data.testType.name;
+    components: {
+        'wm-Dropzone': Dropzone,
+    },
+    data: () => ({
+        galleryDataLoaded: false,
+        galleries: [],
+        file_batch_id: Math.floor(Math.random() * 9000000000) + 1000000000,
+        testTypeNames: [],
+        testTypeNameSelected: "",
+        searchInput: "",
+        form: [],
+        filter: {
+            test_result_id: "",
+            name: "",
+            unique_code: "",
+        },
+        result: false,
+        formData: {
+            // device_id: "",
+            device_label: "ID",
+            result: "Reject",
+            img: null,
+            test_type_id: "",
+            date: "2020-01-01"
+        },
+        images: [],
+        menu: "",
+        device_label: {
+            WasherID: "Washer ID",
+            AutoclaveID: "Autoclave ID",
+            SterilizerID: "Sterilizer ID",
+            WasherMachineID: "WasherMachine ID",
+            SealMachineID: "SealMachine ID",
+            PatientID: "Patient ID",
+            "Set/PackID": "Set/Pack ID",
+            MDID: "MD ID",
+            ORID: "OR ID",
+            PersonalID: "Personal ID",
+            InstrumentID: "Instrument ID",
+            ID: "ID"
+        }
+    }),
+    created() {
+        if (this.$route.params.testResult) {
+            this.filter.test_result_id = this.$route.params.testResult;
+            this.selectTestType();
+        } else {
+            this.galleryDataLoaded = true;
+        }
+        this.load();
+    },
+    methods: {
+        async load() {
+            const result = await ApiService.get(urls.listTestTypeName);
+            this.testTypeNames = result.data.data;
+        },
+        async selectTestType() {
+            const result = await ApiService.post(urls.getInputs, this.filter);
+            if (result && result.status == 200) {
+                this.testTypeNameSelected = result.data.data.testType.name;
 
-				this.form = result.data.data.inputs;
-				this.formData.test_type_id = result.data.data.testType.id;
-				this.formData.device_label =
-					result.data.data.testType.device_label;
-				for (const key in result.data.data.inputs) {
-					if (result.data.data.inputs.hasOwnProperty(key)) {
-						if (result.data.data.inputs[key].type == "Form") {
-							for (const keyForm in result.data.data.inputs[key]
-								.children) {
-								if (
-									result.data.data.inputs[
-										key
-									].children.hasOwnProperty(keyForm)
-								) {
-									if (
-										result.data.data.inputs[key].children[
-											keyForm
-										].type == "Checkbox" ||
-										result.data.data.inputs[key].children[
-											keyForm
-										].type == "Select"
-									) {
-										this.formData[
-											result.data.data.inputs[key]
-												.children[keyForm].name +
-												"_" +
-												result.data.data.inputs[key]
-													.children[keyForm].id
-										] = [];
-									} else {
-										this.formData[
-											result.data.data.inputs[key]
-												.children[keyForm].name +
-												"_" +
-												result.data.data.inputs[key]
-													.children[keyForm].id
-										] = "";
-									}
-								}
-							}
-						} else if (
-							result.data.data.inputs[key].type == "Checkbox" ||
-							result.data.data.inputs[key].type == "Select"
-						) {
-							this.formData[
-								result.data.data.inputs[key].name +
-									"_" +
-									result.data.data.inputs[key].id
-							] = [];
-						} else {
-							this.formData[
-								result.data.data.inputs[key].name +
-									"_" +
-									result.data.data.inputs[key].id
-							] = "";
-						}
-					}
-				}
-				if (this.$route.params.testResult) {
-					const result = await ApiService.get(
-						urls.editTestResult(this.$route.params.testResult)
-					);
-					if (result && result.status == 200) {
-						this.formData = result.data.data;
-						for (const key in result.data.data.imagesPath) {
-							if (result.data.data.imagesPath.hasOwnProperty(key)) {
-								result.data.data.imagesPath[key] =
-									result.data.data.imagesPath[key];
-							}
-						}
-						// this.images = result.data.data.imagesPath;
-						this.galleries = result.data.data.filesPath;
-						this.galleryDataLoaded = true;
-					}
-				}
-			}
-		},
-		async submitForm() {
-			let result;
-			this.formData['file_batch_id'] = this.file_batch_id;
-			if (this.$route.params.testResult) {
-				result = await ApiService.put(
-					urls.updateTestResult(this.$route.params.testResult),
-					this.formData
-				);
-			} else {
-				result = await ApiService.post(
-					urls.storeTestResult,
-					this.formData
-				);
-			}
+                this.form = result.data.data.inputs;
+                this.formData.test_type_id = result.data.data.testType.id;
+                this.formData.device_label =
+                        result.data.data.testType.device_label;
+                for (const key in result.data.data.inputs) {
+                    if (result.data.data.inputs.hasOwnProperty(key)) {
+                        if (result.data.data.inputs[key].type == "Form") {
+                            for (const keyForm in result.data.data.inputs[key]
+                                    .children) {
+                                if (
+                                        result.data.data.inputs[
+                                                key
+                                                ].children.hasOwnProperty(keyForm)
+                                ) {
+                                    if (
+                                            result.data.data.inputs[key].children[
+                                                    keyForm
+                                                    ].type == "Checkbox" ||
+                                            result.data.data.inputs[key].children[
+                                                    keyForm
+                                                    ].type == "Select"
+                                    ) {
+                                        this.formData[
+                                        result.data.data.inputs[key]
+                                                .children[keyForm].name +
+                                        "_" +
+                                        result.data.data.inputs[key]
+                                                .children[keyForm].id
+                                                ] = [];
+                                    } else {
+                                        this.formData[
+                                        result.data.data.inputs[key]
+                                                .children[keyForm].name +
+                                        "_" +
+                                        result.data.data.inputs[key]
+                                                .children[keyForm].id
+                                                ] = "";
+                                    }
+                                }
+                            }
+                        } else if (
+                                result.data.data.inputs[key].type == "Checkbox" ||
+                                result.data.data.inputs[key].type == "Select"
+                        ) {
+                            this.formData[
+                            result.data.data.inputs[key].name +
+                            "_" +
+                            result.data.data.inputs[key].id
+                                    ] = [];
+                        } else {
+                            this.formData[
+                            result.data.data.inputs[key].name +
+                            "_" +
+                            result.data.data.inputs[key].id
+                                    ] = "";
+                        }
+                    }
+                }
+                if (this.$route.params.testResult) {
+                    const result = await ApiService.get(
+                            urls.editTestResult(this.$route.params.testResult)
+                    );
+                    if (result && result.status == 200) {
+                        this.formData = result.data.data;
+                        for (const key in result.data.data.imagesPath) {
+                            if (result.data.data.imagesPath.hasOwnProperty(key)) {
+                                result.data.data.imagesPath[key] =
+                                        result.data.data.imagesPath[key];
+                            }
+                        }
+                        // this.images = result.data.data.imagesPath;
+                        this.galleries = result.data.data.filesPath;
+                        this.galleryDataLoaded = true;
+                    }
+                }
+            }
+        },
+        async submitForm() {
+            let result;
+            this.formData['file_batch_id'] = this.file_batch_id;
+            if (this.$route.params.testResult) {
+                result = await ApiService.put(
+                        urls.updateTestResult(this.$route.params.testResult),
+                        this.formData
+                );
+            } else {
+                result = await ApiService.post(
+                        urls.storeTestResult,
+                        this.formData
+                );
+            }
 
-			if (result && result.status == 200) {
-				this.$router.push({ name: "AllResultTest" });
-			}
-		},
-		onFileChange(e) {
-			var files = e.target.files || e.dataTransfer.files;
-			if (!files.length) return;
-			for (const key in files) {
-				if (files.hasOwnProperty(key)) {
-					this.createImage(files[key], key);
-				}
-			}
-		},
-		createImage(file, index) {
-			var image = new Image();
-			var reader = new FileReader();
-			var vm = this;
+            if (result && result.status == 200) {
+                this.$router.push({name: "AllResultTest"});
+            }
+        },
+        onFileChange(e) {
+            var files = e.target.files || e.dataTransfer.files;
+            if (!files.length) return;
+            for (const key in files) {
+                if (files.hasOwnProperty(key)) {
+                    this.createImage(files[key], key);
+                }
+            }
+        },
+        createImage(file, index) {
+            var image = new Image();
+            var reader = new FileReader();
+            var vm = this;
 
-			reader.onload = e => {
-				vm.images.push(e.target.result);
-			};
+            reader.onload = e => {
+                vm.images.push(e.target.result);
+            };
 
-			reader.readAsDataURL(file);
-		},
-		removeImage(index) {
-			this.images.splice(index, 1);
-		}
-	},
-	watch: {
-		images(img) {
-			this.formData.imgs = img;
-		},
-		result(value) {
-			if (value) {
-				this.formData.result = "Accept";
-			} else {
-				this.formData.result = "Reject";
-			}
-		},
-		formData(value) {
-			if (value.result == "Accept") {
-				this.result = true;
-			} else {
-				this.result = false;
-			}
-		}
-	}
+            reader.readAsDataURL(file);
+        },
+        removeImage(index) {
+            this.images.splice(index, 1);
+        }
+    },
+    watch: {
+        images(img) {
+            this.formData.imgs = img;
+        },
+        result(value) {
+            if (value) {
+                this.formData.result = "Accept";
+            } else {
+                this.formData.result = "Reject";
+            }
+        },
+        formData(value) {
+            if (value.result == "Accept") {
+                this.result = true;
+            } else {
+                this.result = false;
+            }
+        }
+    }
 };
 </script>
-<style >
+<style>
 .WM-Font-30 input {
-	font-size: 30px !important;
+    font-size: 30px !important;
 }
 
 .v-input--switch__track:not(.light-green--text) {
-	/* color: #F44336 !important; */
-	color: #ed1c24;
+    /* color: #F44336 !important; */
+    color: #ed1c24;
 }
 
 .v-input--switch__thumb:not(.light-green--text) {
-	/* background-color: #F44336 !important; */
-	background-color: #ed1c24;
+    /* background-color: #F44336 !important; */
+    background-color: #ed1c24;
 }
 
 .v-btn--floating {
-	padding: 0 !important;
+    padding: 0 !important;
 }
+
 .theme--light.v-btn.v-btn--flat {
-	color: rgba(0, 0, 0, 0.87) !important;
+    color: rgba(0, 0, 0, 0.87) !important;
 }
+
 .v-btn--floating,
 .v-btn--icon:before {
-	border-radius: 50% !important;
+    border-radius: 50% !important;
 }
+
 .v-input--selection-controls__input {
-	margin-right :0;
+    margin-right: 0;
 }
+
 .v-input--radio-group--column .v-radio:not(:last-child):not(:only-child) {
-	margin-bottom : 0;
+    margin-bottom: 0;
 }
+
 .v-input--radio-group--column .v-input--radio-group__input {
-	flex-direction: row;
+    flex-direction: row;
 }
+
 .v-input--selection-controls .v-input__control {
-	margin-right: 12px;
+    margin-right: 12px;
 }
+
 .v-input--selection-controls__input {
-	margin-right: 7px;
+    margin-right: 7px;
 }
+
 .accent--text {
-	color: #E91E63 !important;
-	caret-color: #E91E63 !important;
+    color: #E91E63 !important;
+    caret-color: #E91E63 !important;
 }
+
 .WM-Padding-LR-0 {
-	padding:24px 0;
+    padding: 24px 0;
 }
+
 .WM-BorderLeftTitle {
-	border-left: 1px solid;
-	padding-left: 5px;
+    border-left: 1px solid;
+    padding-left: 5px;
 }
 </style>
diff --git a/src/views/TestResult/List.vue b/src/views/TestResult/List.vue
index 4b505c7..04ee64e 100644
--- a/src/views/TestResult/List.vue
+++ b/src/views/TestResult/List.vue
@@ -2,62 +2,63 @@
     <div class>
         <v-container fluid>
             <material-card class color="black" title="All Test Result" text>
-                <v-layout align-center wrap class="px-5 mb-3 my-3">
-                    <v-flex xs12 md2 sm3 class="WM-FlexCenter">
-                        <v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"></v-icon>
+                <v-layout align-center wrap class="px-5 my-3">
+                    <v-flex xs12 sm6 md6 lg2 class="WM-FlexCenter pl-3">
+                        <v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"/>
                         <v-text-field class="py-3 pr-3" v-model="filter.device_id" label="ID"
-                            color="black"></v-text-field>
+                            color="black"/>
                     </v-flex>
-                    <v-flex xs12 md3 sm3 class="WM-FlexCenter pl-3">
-                        <v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"></v-icon>
+                    <v-flex xs12 sm6 md6 lg3 class="WM-FlexCenter pl-3">
+                        <v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"/>
                         <v-autocomplete :items="deviceLabels" item-text="name" item-value="id"
                             v-model="filter.device_label" label="ID Label" color="black" class="py-3 pr-3"
-                            :clearable="true"></v-autocomplete>
+                            :clearable="true"/>
                     </v-flex>
-                    <v-flex xs12 md3 sm3 class="WM-FlexCenter pl-3">
-                        <v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"></v-icon>
+                    <v-flex xs12 sm6 md6 lg3 class="WM-FlexCenter pl-3">
+                        <v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"/>
                         <v-autocomplete class="py-3 pr-3" v-model="filter.testType_id" label="TestType Name"
-                            color="black" :items="testTypes" item-text="name" item-value="id"></v-autocomplete>
+                            color="black" :items="testTypes" item-text="name" item-value="id"/>
                     </v-flex>
-                    <v-flex xs12 md3 sm3 class="WM-FlexCenter pl-3">
-                        <v-icon class="fa fa-hospital-o mr-2 WM-Margin-B-8"></v-icon>
+                    <v-flex xs12 sm6 md6 lg3 class="WM-FlexCenter pl-3">
+                        <v-icon class="fa fa-hospital-o mr-2 WM-Margin-B-8"/>
                         <v-autocomplete class="py-3 pr-3" v-model="filter.medicalCenter_id" label="Hospital"
                             color="black" :items="medicalCenters" item-text="name" item-value="id"
-                            :clearable="true"></v-autocomplete>
+                            :clearable="true"/>
                     </v-flex>
-                    <v-flex xs12 md2 sm3 class="WM-FlexCenter">
-                        <v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"></v-icon>
+                    <v-flex xs12 sm6 md6 lg3 class="WM-FlexCenter pl-3">
+                        <v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"/>
                         <v-text-field class="py-3 pr-3" v-model="filter.user_name" label="User Name"
-                            color="black"></v-text-field>
+                            color="black"/>
                     </v-flex>
-                    <v-flex xs12 sm6 md2 pl-3 class="WM-FlexCenter">
-                        <v-icon class="far fa-calendar-alt mr-2"></v-icon>
+                    <v-flex xs12 sm6 md6 lg3 class="WM-FlexCenter pl-3">
+                        <v-icon class="far fa-calendar-alt mr-2"/>
                         <v-menu lazy :close-on-content-click="true" transition="v-scale-transition" offset-y
-                            v-model="fromMenu">
+                            v-model="fromMenu" style="width: 100%">
                             <v-text-field class="py-3 pr-3" required slot="activator" label="FromDate"
-                                v-model="filter.fromPicker" color="black"></v-text-field>
+                                v-model="filter.fromPicker" color="black"/>
                             <v-date-picker color="pink" no-title v-model="filter.fromPicker"
-                                :date-format="date => new Date(date).toDateString()"></v-date-picker>
+                                :date-format="date => new Date(date).toDateString()"/>
                         </v-menu>
                     </v-flex>
-                    <v-flex xs12 sm6 md2 pl-3 style="display: flex;align-items: center;">
-                        <v-icon class="far fa-calendar-alt mr-2"></v-icon>
+                    <v-flex xs12 sm6 md6 lg3 style="display: flex;align-items: center;">
+                        <v-icon class="far fa-calendar-alt mr-2"/>
                         <v-menu lazy :close-on-content-click="true" transition="v-scale-transition" offset-y
-                            v-model="upToMenu">
+                            v-model="upToMenu" style="width: 100%">
                             <v-text-field class="py-3 pr-3" required slot="activator" label="UpToDate" color="black"
-                                v-model="filter.upToPicker"></v-text-field>
+                                v-model="filter.upToPicker"/>
                             <v-date-picker color="pink" no-title v-model="filter.upToPicker"
-                                :date-format="date => new Date(date).toDateString()"></v-date-picker>
+                                :date-format="date => new Date(date).toDateString()"/>
                         </v-menu>
                     </v-flex>
-                    <v-flex xs12 md3 sm3 class="WM-XL-Align-L text-lg-left">
-                        <v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px" @click="load(null, null)">
+                    <v-spacer/>
+                    <v-spacer/>
+                    <v-flex class xs12 sm6 md6 lg2 xl1>
+                        <v-btn class="WM-CyanBlueGradient-BG" style="padding:9px 30px"  @click="load(null, null)">
                             <v-icon class="white--text mr-2 caption">fas fa-search</v-icon>
                             <span class="white--text">Filter</span>
                         </v-btn>
                     </v-flex>
-                    <v-spacer></v-spacer>
-                    <v-flex wrap xs12 md2 sm2 class="WM-Align-R">
+                    <v-flex xs12 sm6 md6 lg1 xl1 class="text-xs-right">
                         <router-link :to="{ name: 'SubmitTestResult' }">
                             <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black">
                                 <v-icon class="black--text mr-2 caption">fas fa-plus</v-icon>
@@ -66,25 +67,25 @@
                         </router-link>
                     </v-flex>
                 </v-layout>
-                <v-layout wrap class="px-5 mb-3 my-3">
-                    <!-- <v-flex class xs12 md3 sm3 class="WM-XL-Align-L text-lg-left">
-                        <v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px" @click="load(null, null)">
-                            <v-icon class="white--text mr-2 caption">fas fa-search</v-icon>
-                            <span class="white--text">Filter</span>
-                        </v-btn>
-                    </v-flex>
-                    <v-spacer></v-spacer>
-                    <v-flex wrap xs12 md2 sm2 class="WM-Align-R">
-                        <router-link :to="{name: 'SubmitTestResult'}">
-                            <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black">
-                                <v-icon class="black--text mr-2 caption">fas fa-plus</v-icon>
-                                <span class="black--text">Add</span>
-                            </v-btn>
-                        </router-link>
-                    </v-flex> -->
-                </v-layout>
+                <!--<v-layout wrap class="px-5 mb-3 my-3">
+                   <v-flex class xs12 md3 sm3 class="WM-XL-Align-L text-lg-left">
+                       <v-btn class="WM-CyanBlueGradient-BG" style="padding:9px 30px" @click="load(null, null)">
+                           <v-icon class="white--text mr-2 caption">fas fa-search</v-icon>
+                           <span class="white--text">Filter</span>
+                       </v-btn>
+                   </v-flex>
+                   <v-spacer></v-spacer>
+                   <v-flex wrap xs12 md2 sm2 class="WM-Align-R">
+                       <router-link :to="{name: 'SubmitTestResult'}">
+                           <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black">
+                               <v-icon class="black--text mr-2 caption">fas fa-plus</v-icon>
+                               <span class="black--text">Add</span>
+                           </v-btn>
+                       </router-link>
+                   </v-flex>
+               </v-layout>-->
                 <v-layout class="px-4 my-3">
-                    <v-divider></v-divider>
+                    <v-divider/>
                 </v-layout>
                 <v-layout align-center wrap class="px-5 my-2">
                     <v-flex md12>
@@ -99,20 +100,16 @@
                                 <td class="title font-weight-light">{{ item.user.medical_center.name }}</td>
                                 <td class="title font-weight-light">{{ item.user.name }}</td>
                                 <td class="title font-weight-light">
-                                    <span v-if="item.result == 'Reject'" class="ResultMsg Reject">
-                                        {{ item.result }}
-                                    </span>
-                                    <span v-else-if="item.result == 'Accept'" class="ResultMsg Accept">
-                                        {{ item.result }}
-                                    </span>
+                                    <span v-if="item.result == 'Reject'" class="ResultMsg Reject">{{ item.result }}</span>
+                                    <span v-else-if="item.result == 'Accept'" class="ResultMsg Accept">{{ item.result }}</span>
                                 </td>
                                 <td class="title font-weight-light">{{ $d(new Date(item.created_at), 'long') }}</td>
                                 <td class="title font-weight-light">
                                     <span v-if="item.verified == 'NotVerified'" class="NotVerified">
-                                        <v-icon class="caption fa fa-times NotVerified"></v-icon>
+                                        <v-icon class="caption fa fa-times NotVerified"/>
                                     </span>
                                     <span v-if="item.verified == 'Verified'" class="">
-                                        <v-icon class="caption fa fa-check Verified"></v-icon>
+                                        <v-icon class="caption fa fa-check Verified"/>
                                     </span>
                                     <!-- {{ item.verified }} -->
                                 </td>
@@ -169,7 +166,7 @@
                         </v-data-table>
                     </v-flex>
                 </v-layout>
-                <v-divider></v-divider>
+                <v-divider/>
                 <div class="text-xs-center mt-2" v-if="lastPage > 1">
                     <v-pagination color="black" v-model="currentPage" :length="lastPage"
                         :total-visible="6"></v-pagination>
diff --git a/src/views/TestType/List.vue b/src/views/TestType/List.vue
index dec6833..66bf1b2 100644
--- a/src/views/TestType/List.vue
+++ b/src/views/TestType/List.vue
@@ -1,274 +1,262 @@
 <template>
-   <v-container fluid>
-       <material-card class color="black" title="TestType List" text>
-           <v-layout wrap class="px-5 mb-3">
-               <v-flex xs12 md3 sm3 class="WM-FlexCenter">
-                   <v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"></v-icon>
-                   <v-text-field class="py-3 pr-3" label="Name" v-model="filter.name" color="black"></v-text-field>
-               </v-flex>
-               <v-flex xs12 md3 sm3 class="WM-FlexCenter pl-3">
-                   <v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"></v-icon>
-                   <v-text-field class="py-3 pr-3" label="UniqueId" v-model="filter.unique_id" color="black"></v-text-field>
-               </v-flex>
-               <v-flex xs12 md36 sm3 class="WM-FlexCenter pl-3">
-                   <v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"></v-icon>
-                   <v-text-field class="py-3 pr-3" label="UserName" v-model="filter.user_name" color="black"></v-text-field>
-               </v-flex>
-           </v-layout>
-           <v-layout wrap class="px-5 mb-3">
-               <v-flex xs12 sm6 md2 class="WM-FlexCenter">
-                   <v-icon class="far fa-calendar-alt mr-2"></v-icon>
-                   <v-menu
-                       lazy
-                       :close-on-content-click="true"
-                       transition="v-scale-transition"
-                       offset-y
-                       v-model="fromMenu"
-                   >
-                       <v-text-field
-                           required
-                           slot="activator"
-                           label="FromDate"
-                           v-model="filter.fromPicker"
-                           color="black"
-                       ></v-text-field>
-                       <v-date-picker
-                           color="pink"
-                           no-title
-                           v-model="filter.fromPicker"
-                           :date-format="date => new Date(date).toDateString()"
-                       ></v-date-picker>
-                   </v-menu>
-               </v-flex>
-               <v-flex xs12 sm6 md2 class="WM-FlexCenter pl-3">
-                   <v-icon class="far fa-calendar-alt mr-2"></v-icon>
-                   <v-menu
-                       lazy
-                       :close-on-content-click="true"
-                       transition="v-scale-transition"
-                       offset-y
-                       v-model="upToMenu"
-                   >
-                       <v-text-field
-                           required
-                           slot="activator"
-                           label="UpToDate"
-                           v-model="filter.upToPicker"
-                           color="black"
-                       ></v-text-field>
-                       <v-date-picker
-                           color="pink"
-                           no-title
-                           v-model="filter.upToPicker"
-                           :date-format="date => new Date(date).toDateString()"
-                       ></v-date-picker>
-                   </v-menu>
-               </v-flex>
-               
-               <v-flex xs12 md2 sm2 class="text-xs-right ml-4">
-                   <v-btn
-                       class="WM-CyanBlueGradient-BG"
-                       style="padding:10px 60px"
-                       @click="load(undefined)"
-                   >
-                       <v-icon class="white--text mr-2 caption">fas fa-search</v-icon>
-                       <span class="white--text">Filter</span>
-                   </v-btn>
-               </v-flex>
-               <v-spacer></v-spacer>
-               <v-flex xs12 md2 sm2 class="text-xs-right">
-                   <router-link :to="{name: 'AddTestType'}">
-                       <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black">
-                           <v-icon class="black--text mr-2 caption">fas fa-plus</v-icon>
-                           <span class="black--text">Add</span>
-                       </v-btn>
-                   </router-link>
-               </v-flex>
-           </v-layout>
-           <v-layout class="px-4 my-3">
-               <v-divider></v-divider>
-           </v-layout>
-           <v-layout align-center justify-center wrap class="px-5 mt-3">
-               <v-flex md12>
-                   <v-data-table :headers="headers" :items="items" hide-actions>
-                       <template slot="headerCell" slot-scope="{ header }">
-                           <span
-                               class="subheading font-weight-light text-white text--darken-3"
-                               v-text="header.text"
-                           />
-                       </template>
-                       <template slot="items" slot-scope="{ item }">
-                           <td class="headline font-weight-light">{{ item.name }}</td>
-                           <td class="title font-weight-light">{{ item.unique_code }}</td>
-                           <td class="title font-weight-light">{{ item.user.name }}</td>
-                           <td class="title font-weight-light">{{ $d(new Date(item.created_at), 'long') }}</td>
-                           <td class="text-xs-right FlexBtn">
-                               <v-tooltip bottom open-on-hover>
-                               <template v-slot:activator="{ on, attrs }">
-                               <router-link class="LinkBtn"
-                                   v-if="item.test_results_count == 0"
-                                   :to="{name : 'EditTestType', params : {testType : item.id}}"
-                               >
-                                   <v-btn color="cyan" class="mr-2 WM-ActionButton" v-bind="attrs"
-                                        v-on="on">
-                                       <v-icon class="white--text mr-2 caption">fas fa-pen</v-icon>
-                                       <span>Edit</span>
-                                   </v-btn>
-                               </router-link>
-                               </template>
-                               <span>Edit</span>
-                               </v-tooltip>
-                               <v-tooltip bottom open-on-hover>
-                               <template v-slot:activator="{ on, attrs }">
-                               <v-btn color="black" class="mr-2" @click="remove(item.id)" v-bind="attrs"
-                                        v-on="on">
-                                   <v-icon class="white--text mr-1 caption">fas fa-folder</v-icon>
-                                   <span>Archive</span>
-                               </v-btn>
-                               </template>
-                               <span>Archive</span>
-                               </v-tooltip>
-                               <v-tooltip bottom open-on-hover>
-                               <template v-slot:activator="{ on, attrs }">
-                               <v-btn color="orange darken-1" @click="generateBarcode(item.unique_code, 'TestType')" v-bind="attrs"
-                                        v-on="on">
-                                   <v-icon class="white--text mr-1 caption">fas fa-barcode</v-icon>
-                                   <span>Generate Barcode</span>
-                               </v-btn>
-                               </template>
-                               <span>Generate Barcode</span>
-                               </v-tooltip>
-                           </td>
-                       </template>
-                   </v-data-table>
-               </v-flex>
-           </v-layout>
-           <v-divider></v-divider>
-           <div class="text-xs-center mt-2" v-if="lastPage > 1">
-               <v-pagination color="black" v-model="currentPage" :length="lastPage" :total-visible="6"></v-pagination>
-           </div>
-           <v-layout row wrap align-center justify-center class="mt-3">
-               <router-link to="/dashboard">
-                   <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black ml-5">
-                       <v-icon class="black--text mr-2 caption">fas fa-chevron-left</v-icon>
-                       <span class="black--text">Back</span>
-                   </v-btn>
-               </router-link>
-           </v-layout>
-       </material-card>
-   </v-container>
+    <v-container fluid>
+        <material-card class color="black" title="TestType List" text>
+            <v-layout wrap class="px-5 mb-3">
+                <v-flex xs12 sm6 md6 lg3 xl2 class="WM-FlexCenter pl-3">
+                    <v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"/>
+                    <v-text-field class="py-3 pr-3" label="Name" v-model="filter.name" color="black"/>
+                </v-flex>
+                <v-flex xs12 sm6 md6 lg3 xl2 class="WM-FlexCenter pl-3">
+                    <v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"/>
+                    <v-text-field class="py-3 pr-3" label="UniqueId" v-model="filter.unique_id" color="black"/>
+                </v-flex>
+                <v-flex xs12 sm6 md6 lg3 xl2 class="WM-FlexCenter pl-3">
+                    <v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"/>
+                    <v-text-field class="py-3 pr-3" label="UserName" v-model="filter.user_name" color="black"/>
+                </v-flex>
+                <v-flex xs12 sm6 md6 lg3 xl2 class="WM-FlexCenter pl-3">
+                    <v-icon class="far fa-calendar-alt mr-2"/>
+                    <v-menu
+                            lazy
+                            :close-on-content-click="true"
+                            transition="v-scale-transition"
+                            offset-y
+                            v-model="fromMenu" style="width: 100%">
+                        <v-text-field
+                                required
+                                slot="activator"
+                                label="FromDate"
+                                v-model="filter.fromPicker"
+                                color="black"/>
+                        <v-date-picker
+                                color="pink"
+                                no-title
+                                v-model="filter.fromPicker"
+                                :date-format="date => new Date(date).toDateString()"/>
+                    </v-menu>
+                </v-flex>
+                <v-flex xs12 sm6 md6 lg3 xl2 class="WM-FlexCenter pl-3">
+                    <v-icon class="far fa-calendar-alt mr-2"></v-icon>
+                    <v-menu
+                            lazy
+                            :close-on-content-click="true"
+                            transition="v-scale-transition"
+                            offset-y
+                            v-model="upToMenu" style="width: 100%">
+                        <v-text-field
+                                required
+                                slot="activator"
+                                label="UpToDate"
+                                v-model="filter.upToPicker"
+                                color="black"/>
+                        <v-date-picker
+                                color="pink"
+                                no-title
+                                v-model="filter.upToPicker"
+                                :date-format="date => new Date(date).toDateString()"/>
+                    </v-menu>
+                </v-flex>
+
+                <v-spacer/>
+                <v-flex class xs12 sm6 md6 lg2 xl1>
+                    <v-btn class="WM-CyanBlueGradient-BG" style="padding:9px 30px" @click="load(undefined)">
+                        <v-icon class="white--text mr-2 caption">fas fa-search</v-icon>
+                        <span class="white--text">Filter</span>
+                    </v-btn>
+                </v-flex>
+                <v-flex xs12 sm6 md6 lg1 xl1 class="text-xs-right">
+                    <router-link :to="{name: 'AddTestType'}">
+                        <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black">
+                            <v-icon class="black--text mr-2 caption">fas fa-plus</v-icon>
+                            <span class="black--text">Add</span>
+                        </v-btn>
+                    </router-link>
+                </v-flex>
+            </v-layout>
+            <v-layout class="px-4 my-3">
+                <v-divider/>
+            </v-layout>
+            <v-layout align-center justify-center wrap class="px-5 mt-3">
+                <v-flex md12>
+                    <v-data-table :headers="headers" :items="items" hide-actions>
+                        <template slot="headerCell" slot-scope="{ header }">
+                            <span class="subheading font-weight-light text-white text--darken-3" v-text="header.text"/>
+                        </template>
+                        <template slot="items" slot-scope="{ item }">
+                            <td class="headline font-weight-light">{{ item.name }}</td>
+                            <td class="title font-weight-light">{{ item.unique_code }}</td>
+                            <td class="title font-weight-light">{{ item.user.name }}</td>
+                            <td class="title font-weight-light">{{ $d(new Date(item.created_at), 'long') }}</td>
+                            <td class="text-xs-right FlexBtn">
+                                <v-tooltip bottom open-on-hover>
+                                    <template v-slot:activator="{ on, attrs }">
+                                        <router-link
+                                                class="LinkBtn"
+                                                v-if="item.test_results_count == 0"
+                                                :to="{name : 'EditTestType', params : {testType : item.id}}">
+                                            <v-btn color="cyan" class="mr-2 WM-ActionButton" v-bind="attrs" v-on="on">
+                                                <v-icon class="white--text mr-2 caption">fas fa-pen</v-icon>
+                                                <span>Edit</span>
+                                            </v-btn>
+                                        </router-link>
+                                    </template>
+                                    <span>Edit</span>
+                                </v-tooltip>
+                                <v-tooltip bottom open-on-hover>
+                                    <template v-slot:activator="{ on, attrs }">
+                                        <v-btn color="black" class="mr-2" @click="remove(item.id)" v-bind="attrs"
+                                               v-on="on">
+                                            <v-icon class="white--text mr-1 caption">fas fa-folder</v-icon>
+                                            <span>Archive</span>
+                                        </v-btn>
+                                    </template>
+                                    <span>Archive</span>
+                                </v-tooltip>
+                                <v-tooltip bottom open-on-hover>
+                                    <template v-slot:activator="{ on, attrs }">
+                                        <v-btn color="orange darken-1"
+                                               @click="generateBarcode(item.unique_code, 'TestType')" v-bind="attrs"
+                                               v-on="on">
+                                            <v-icon class="white--text mr-1 caption">fas fa-barcode</v-icon>
+                                            <span>Generate Barcode</span>
+                                        </v-btn>
+                                    </template>
+                                    <span>Generate Barcode</span>
+                                </v-tooltip>
+                            </td>
+                        </template>
+                    </v-data-table>
+                </v-flex>
+            </v-layout>
+            <v-divider/>
+            <div class="text-xs-center mt-2" v-if="lastPage > 1">
+                <v-pagination color="black" v-model="currentPage" :length="lastPage" :total-visible="6"/>
+            </div>
+            <v-layout row wrap align-center justify-center class="mt-3">
+                <router-link to="/dashboard">
+                    <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black ml-5">
+                        <v-icon class="black--text mr-2 caption">fas fa-chevron-left</v-icon>
+                        <span class="black--text">Back</span>
+                    </v-btn>
+                </router-link>
+            </v-layout>
+        </material-card>
+    </v-container>
 </template>
 
 <script>
-import { ApiService } from "@/services";
-import { urls } from "@/config/urls";
-import { mapMutations, mapGetters } from "vuex";
+import {ApiService} from "@/services";
+import {urls} from "@/config/urls";
+import {mapMutations, mapGetters} from "vuex";
 
 export default {
-   data: () => ({
-       headers: [
-           {
-               sortable: false,
-               text: "TestType Name",
-               value: "name"
-           },
-           {
-               sortable: false,
-               text: "TestType UniqueId",
-               value: "uniqueId"
-           },
-           {
-               sortable: false,
-               text: "Register TestType",
-               value: "users"
-           },
-           {
-               sortable: false,
-               text: "Date",
-               value: "date"
-           },
-           {
-               sortable: false,
-               text: "Action",
-               value: "action",
-               align: "right"
-           }
-       ],
-       items: [],
-       filter: {
-           name: "",
-           unique_id: "",
-           user_name: "",
-           fromPicker: "",
-           upToPicker: ""
-       },
-       fromMenu: "",
-       upToMenu: "",
-       currentPage: 1,
-       lastPage: 1
-   }),
-   created() {
-       this.load();
-   },
-   methods: {
-       ...mapMutations("modal", ["changeCurrentModal"]),
-       async load(page = 1) {
-           let filter = "?";
-           for (const key in this.filter) {
-               if (this.filter.hasOwnProperty(key)) {
-                   filter += `${key}=${this.filter[key]}&`;
-               }
-           }
-           filter += page ? `page=${page}` : `page=1`;
-           const result = await ApiService.get(urls.listTestType(filter));
-           if (result && result.status == 200) {
-               this.items = result.data.data.data;
-               this.currentPage = result.data.data.current_page;
-               this.lastPage = result.data.data.last_page;
-           }
-       },
-       async remove(id) {
-           const result = await ApiService.delete(urls.deleteTestType(id));
-           if (result.status == 200) {
-               for (const key in this.items) {
-                   if (
-                       this.items.hasOwnProperty(key) &&
-                       this.items[key].id == id
-                   ) {
-                       this.items.splice(key, 1);
-                   }
-               }
-           }
-       },
-       async generateBarcode(code, type) {
-           const result = await ApiService.post(urls.Barcode(code, type));
-           if (result && result.status == 200) {
-               this.changeCurrentModal({
-                   modal: "modal-barcode-barcode",
-                   properties: { result }
-               });
-           }
-       }
-   },
-   watch: {
-       currentPage(page) {
-           this.load(page);
-       }
-   }
+    data: () => ({
+        headers: [
+            {
+                sortable: false,
+                text: "TestType Name",
+                value: "name"
+            },
+            {
+                sortable: false,
+                text: "TestType UniqueId",
+                value: "uniqueId"
+            },
+            {
+                sortable: false,
+                text: "Register TestType",
+                value: "users"
+            },
+            {
+                sortable: false,
+                text: "Date",
+                value: "date"
+            },
+            {
+                sortable: false,
+                text: "Action",
+                value: "action",
+                align: "right"
+            }
+        ],
+        items: [],
+        filter: {
+            name: "",
+            unique_id: "",
+            user_name: "",
+            fromPicker: "",
+            upToPicker: ""
+        },
+        fromMenu: "",
+        upToMenu: "",
+        currentPage: 1,
+        lastPage: 1
+    }),
+    created() {
+        this.load();
+    },
+    methods: {
+        ...mapMutations("modal", ["changeCurrentModal"]),
+        async load(page = 1) {
+            let filter = "?";
+            for (const key in this.filter) {
+                if (this.filter.hasOwnProperty(key)) {
+                    filter += `${key}=${this.filter[key]}&`;
+                }
+            }
+            filter += page ? `page=${page}` : `page=1`;
+            const result = await ApiService.get(urls.listTestType(filter));
+            if (result && result.status == 200) {
+                this.items = result.data.data.data;
+                this.currentPage = result.data.data.current_page;
+                this.lastPage = result.data.data.last_page;
+            }
+        },
+        async remove(id) {
+            const result = await ApiService.delete(urls.deleteTestType(id));
+            if (result.status == 200) {
+                for (const key in this.items) {
+                    if (
+                            this.items.hasOwnProperty(key) &&
+                            this.items[key].id == id
+                    ) {
+                        this.items.splice(key, 1);
+                    }
+                }
+            }
+        },
+        async generateBarcode(code, type) {
+            const result = await ApiService.post(urls.Barcode(code, type));
+            if (result && result.status == 200) {
+                this.changeCurrentModal({
+                    modal: "modal-barcode-barcode",
+                    properties: {result}
+                });
+            }
+        }
+    },
+    watch: {
+        currentPage(page) {
+            this.load(page);
+        }
+    }
 };
 </script>
 
 <style lang="css" scoped>
 .WM-ActionButton {
-   padding: 8px 22px;
+    padding: 8px 22px;
 }
+
 .v-btn--floating {
-   padding: 0!important;
+    padding: 0 !important;
 }
+
 .theme--light.v-btn.v-btn--flat {
-   color: rgba(0,0,0,.87)!important;
+    color: rgba(0, 0, 0, .87) !important;
 }
+
 .v-btn--floating, .v-btn--icon:before {
-   border-radius: 50%!important;
+    border-radius: 50% !important;
 }
 </style>
diff --git a/src/views/User/List.vue b/src/views/User/List.vue
index c7be827..1640551 100644
--- a/src/views/User/List.vue
+++ b/src/views/User/List.vue
@@ -2,51 +2,51 @@
     <v-container grid-list-xs>
         <material-card color="black" title="Member List">
             <v-layout align-center justify-center wrap class="px-5 mb-3">
-                <v-flex xs12 md3 sm3 class="WM-FlexCenter">
-                    <v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"></v-icon>
+                <v-flex xs12 sm6 md6 lg3 xl2 class="WM-FlexCenter">
+                    <v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"/>
                     <v-text-field class="py-3 pr-3" color="black" name="name" label="Name"
-                        v-model="filter.name"></v-text-field>
+                                  v-model="filter.name"/>
                 </v-flex>
-                <v-flex xs12 md3 sm3 class="WM-FlexCenter pl-3">
-                    <v-icon class="fa fa-hospital-o mr-2 WM-Margin-B-8"></v-icon>
+                <v-flex xs12 sm6 md6 lg3 xl2 class="WM-FlexCenter pl-3">
+                    <v-icon class="fa fa-hospital-o mr-2 WM-Margin-B-8"/>
                     <v-autocomplete class="py-3 pr-3" v-model="filter.medical_center_id" label="Hospital" color="black"
-                        :items="medicalCenters" item-text="name" item-value="id"></v-autocomplete>
+                                    :items="medicalCenters" item-text="name" item-value="id"/>
                 </v-flex>
-                <v-flex xs12 md3 sm3 class="WM-FlexCenter pl-3">
-                    <v-icon class="fa fa-phone mr-2 WM-Margin-B-8"></v-icon>
+                <v-flex xs12 sm6 md6 lg3 xl2 class="WM-FlexCenter pl-3">
+                    <v-icon class="fa fa-phone mr-2 WM-Margin-B-8"/>
                     <v-text-field class="py-3 pr-3" color="black" name="CellPhone" label="CellPhone"
-                        v-model="filter.cell_number"></v-text-field>
+                                  v-model="filter.cell_number"/>
                 </v-flex>
-                <v-flex xs12 md3 sm3 class="WM-FlexCenter pl-3">
-                    <v-icon class="fa fa-check mr-2 WM-Margin-B-8"></v-icon>
+                <v-flex xs12 sm6 md6 lg3 xl2 class="WM-FlexCenter pl-3">
+                    <v-icon class="fa fa-check mr-2 WM-Margin-B-8"/>
                     <v-select class="py-3 pr-3" color="black" name="role" label="Role" :items="roles"
-                        v-model="filter.role"></v-select>
+                              v-model="filter.role"/>
                 </v-flex>
-            </v-layout>
-            <v-layout class="px-5 mb-3">
-                <v-flex xs12 sm12 md2 class="WM-FlexCenter">
-                    <v-icon class="far fa-calendar-alt mr-2"></v-icon>
+<!--            </v-layout>
+            <v-layout class="px-5 mb-3">-->
+                <v-flex xs12 sm6 md6 lg3 xl2 class="WM-FlexCenter">
+                    <v-icon class="far fa-calendar-alt mr-2"/>
                     <v-menu lazy :close-on-content-click="true" transition="v-scale-transition" offset-y
-                        v-model="fromMenu">
+                            v-model="fromMenu" style="width: 100%">
                         <v-text-field required slot="activator" label="FromDate" color="black"
-                            v-model="filter.fromPicker"></v-text-field>
+                                      v-model="filter.fromPicker"/>
                         <v-date-picker color="pink" no-title v-model="filter.fromPicker"
-                            :date-format="date => new Date(date).toDateString()"></v-date-picker>
+                                       :date-format="date => new Date(date).toDateString()"/>
                     </v-menu>
                 </v-flex>
-                <v-flex xs12 sm12 md2 class="WM-FlexCenter pl-3">
-                    <v-icon class="far fa-calendar-alt mr-2"></v-icon>
+                <v-flex xs12 sm6 md6 lg3 xl2 class="WM-FlexCenter pl-3">
+                    <v-icon class="far fa-calendar-alt mr-2"/>
                     <v-menu lazy :close-on-content-click="true" transition="v-scale-transition" offset-y
-                        v-model="upToMenu">
+                            v-model="upToMenu" style="width: 100%">
                         <v-text-field required slot="activator" label="UpToDate" color="black"
-                            v-model="filter.upToPicker"></v-text-field>
+                                      v-model="filter.upToPicker"/>
                         <v-date-picker color="pink" no-title v-model="filter.upToPicker"
-                            :date-format="date => new Date(date).toDateString()"></v-date-picker>
+                                       :date-format="date => new Date(date).toDateString()"/>
                     </v-menu>
                 </v-flex>
-                <!-- <v-spacer></v-spacer> -->
-                <v-flex wrap xs12 md2 sm12 class="WM-Align-R ml-4">
-                    <v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px" @click="load(undefined)">
+                 <v-spacer/>
+                <v-flex wrap xs12 sm12 class="WM-Align-R ml-4">
+                    <v-btn class="WM-CyanBlueGradient-BG" style="padding:9px 30px" @click="load(undefined)">
                         <v-icon class="white--text mr-2 caption">fas fa-search</v-icon>
                         <span class="white--text">Filter</span>
                     </v-btn>
@@ -54,13 +54,13 @@
 
             </v-layout>
             <v-layout class="px-4 my-3">
-                <v-divider></v-divider>
+                <v-divider/>
             </v-layout>
             <v-layout align-center justify-center wrap class="px-5 my-2">
                 <v-flex xs12 md12 sm12>
                     <v-data-table :headers="headers" :items="items" hide-actions>
                         <template slot="headerCell" slot-scope="{ header }">
-                            <span class="subheading font-weight-light text-white text--darken-3" v-text="header.text" />
+                            <span class="subheading font-weight-light text-white text--darken-3" v-text="header.text"/>
                         </template>
                         <template slot="items" slot-scope="{ item }">
                             <td class="headline font-weight-light">
@@ -77,9 +77,9 @@
                                 <v-tooltip bottom open-on-hover>
                                     <template v-slot:activator="{ on, attrs }">
                                         <v-btn v-bind="attrs" v-on="on"
-                                            :color="item.status == 'Active' ? 'green' : 'red'"
-                                            @click="changeStatus(item.id)" class="mr-2 WM-ActionButton"
-                                            v-if="$hasRole('Admin|Supervisor')">
+                                               :color="item.status == 'Active' ? 'green' : 'red'"
+                                               @click="changeStatus(item.id)" class="mr-2 WM-ActionButton"
+                                               v-if="$hasRole('Admin|Supervisor')">
                                             <template v-if="item.status == 'Active'">
                                                 <v-icon class="white--text mr-2 caption">fa fa-pause</v-icon>
                                                 <span v-if="item.status == 'Active'">Suspended</span>
@@ -96,8 +96,8 @@
                                 <v-tooltip bottom open-on-hover>
                                     <template v-slot:activator="{ on, attrs }">
                                         <v-btn v-bind="attrs" v-on="on" color="orange darken-1"
-                                            @click="changeRoleModal(item)" class="mr-2 WM-ActionButton"
-                                            v-if="$hasRole('Admin')">
+                                               @click="changeRoleModal(item)" class="mr-2 WM-ActionButton"
+                                               v-if="$hasRole('Admin')">
                                             <v-icon class="white--text mr-2 caption">fas fa-user-tag</v-icon>
                                             <span>Role</span>
                                         </v-btn>
@@ -107,7 +107,7 @@
                                 <v-tooltip bottom open-on-hover>
                                     <template v-slot:activator="{ on, attrs }">
                                         <v-btn v-bind="attrs" v-on="on" color="pink" v-if="$hasRole('Admin')"
-                                            class="WM-ActionButton" @click="remove(item.id)">
+                                               class="WM-ActionButton" @click="remove(item.id)">
                                             <v-icon class="white--text mr-2 caption">fas fa-times</v-icon>
                                             <span>Remove</span>
                                         </v-btn>
@@ -120,10 +120,10 @@
                 </v-flex>
             </v-layout>
             <v-layout class="px-4 my-3">
-                <v-divider></v-divider>
+                <v-divider/>
             </v-layout>
             <div class="text-xs-center mt-2" v-if="lastPage > 1">
-                <v-pagination color="black" v-model="currentPage" :length="lastPage" :total-visible="6"></v-pagination>
+                <v-pagination color="black" v-model="currentPage" :length="lastPage" :total-visible="6"/>
             </div>
             <v-layout row wrap align-center justify-center class="mt-3">
                 <router-link :to="{ name: 'Dashboard' }">
@@ -138,10 +138,11 @@
 </template>
 
 <script>
-import { urls } from "@/config/urls";
-import { ApiService } from "@/services";
-import { mapMutations, mapGetters } from "vuex";
-import { roles } from "@/config/utils";
+import {urls} from "@/config/urls";
+import {ApiService} from "@/services";
+import {mapMutations, mapGetters} from "vuex";
+import {roles} from "@/config/utils";
+
 export default {
     data: () => ({
         headers: [
@@ -207,7 +208,7 @@ export default {
                 this.currentPage = result.data.data.current_page;
                 this.lastPage = result.data.data.last_page;
             } else {
-                this.$router.push({ name: `Dashboard` });
+                this.$router.push({name: `Dashboard`});
             }
         },
         async changeStatus(userId) {
@@ -219,14 +220,14 @@ export default {
                     }
                 }
             } else {
-                this.$router.push({ name: `Dashboard` });
+                this.$router.push({name: `Dashboard`});
             }
         },
         ...mapMutations("modal", ["changeCurrentModal", "closeModal"]),
         changeRoleModal(user) {
             this.changeCurrentModal({
                 modal: "modal-user-role",
-                properties: { user }
+                properties: {user}
             });
         },
         async remove(userId) {
@@ -242,7 +243,7 @@ export default {
                     if (result && result.status == 200) {
                         for (const key in this.items) {
                             if (
-                                this.items[key].id == userId
+                                    this.items[key].id == userId
                             ) {
                                 this.items.splice(key, 1);
                             }
diff --git a/src/views/User/MyInfo.vue b/src/views/User/MyInfo.vue
index 9831012..c996bb8 100644
--- a/src/views/User/MyInfo.vue
+++ b/src/views/User/MyInfo.vue
@@ -1,146 +1,143 @@
 <template>
-  <v-form ref="form">
-    <v-container grid-list-xs fluid>
-      <material-card color="black" title="My Info">
-        <v-layout align-center justify-center wrap class="px-5 my-3">
-          <v-flex xs12 md4 sm4 class="WM-FlexCenter">
-            <v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"></v-icon>
-            <v-text-field
-              name="name"
-              label="Name"
-              color="black"
-              v-model="user.name"
-              :rules="[rules.required, rules.counter]"
-              class="py-3 pr-3"
-            ></v-text-field>
-          </v-flex>
-          <v-flex xs12 sm4 md4 class="WM-FlexCenter pl-3">
-            <v-icon class="fa fa-male mr-2 WM-Margin-B-8"></v-icon>
-            <v-select
-              :items="items"
-              label="Gender"
-              name="gender"
-              v-model="user.gender"
-              single-line
-              :rules="[rules.required]"
-              class="py-3 pr-3"
-              color="black"
-            ></v-select>
-          </v-flex>
-          <v-flex xs12 sm4 md4 class="WM-FlexCenter pl-3">
-            <v-icon class="fa fa-phone mr-2 WM-Margin-B-8"></v-icon>
-            <v-text-field
-              name="cellnumber"
-              label="Cell Number"
-              v-model="user.cell_number"
-              color="black"
-              class="py-3 pr-3"
-              disabled
-            ></v-text-field>
-          </v-flex>
-        </v-layout>
-        <v-layout align-center justify-center wrap class="px-5 mb-3">
-          <v-flex xs12 sm4 md4 class="WM-FlexCenter pl-3">
-            <v-icon class="fa fa-envelope mr-2 WM-Margin-B-8" style="margin-top:70px"></v-icon>
-            <v-text-field
-              name="emailaddress"
-              label="Email Address"
-              v-model="user.email"
-              :rules="[rules.email]"
-              class="px-2"
-              color="black"
-              style="margin-top:72px"
-            ></v-text-field>
-          </v-flex>
-          <v-flex xs12 sm8 md8>
-            <v-textarea
-              prepend-icon="fa fa-sort-amount-desc"
-              color="black"
-              :rules="[rules.counter]"
-              v-model="user.address"
-              class="pa-2"
-              name="address"
-            >
-              <template v-slot:label>
-                <div>Address</div>
-              </template>
-            </v-textarea>
-          </v-flex>
-        </v-layout>
-        <v-layout row wrap justify-center align-center>
-          <v-flex xs12 md2 sm2 class="text-md-center text-xs-center">
-            <v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px" @click="saveInfo()">
-              <v-icon class="white--text mr-2 caption">fas fa-check</v-icon>
-              <span class="white--text">SAVE</span>
-            </v-btn>
-          </v-flex>
-          <v-flex xs12 md3 sm3 class="text-md-center text-sm-center text-xs-center">
-              <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black" @click="changePassword">
-                <v-icon class="black--text mr-1">fas fa-refresh</v-icon>
-                <span class="black--text"> Change Password </span>
-              </v-btn>
-          </v-flex>
-          <v-flex xs12 md1 sm1 class="text-md-center text-sm-center text-xs-center">
-            <router-link :to="{name: 'Dashboard'}">
-              <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black">
-                <v-icon class="black--text">keyboard_arrow_left</v-icon>
-                <span class="black--text">Back</span>
-              </v-btn>
-            </router-link>
-          </v-flex>
-        </v-layout>
-      </material-card>
-    </v-container>
-  </v-form>
+    <v-form ref="form">
+        <v-container grid-list-xs fluid>
+            <material-card color="black" title="My Info">
+                <v-layout align-center justify-center wrap class="px-5 my-3">
+                    <v-flex xs12 sm6 md6 lg3 class="WM-FlexCenter">
+                        <v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"/>
+                        <v-text-field
+                                name="name"
+                                label="Name"
+                                color="black"
+                                v-model="user.name"
+                                :rules="[rules.required, rules.counter]"
+                                class="py-3 pr-3"
+                        />
+                    </v-flex>
+                    <v-flex xs12 sm6 md6 lg3 class="WM-FlexCenter pl-3">
+                        <v-icon class="fa fa-male mr-2 WM-Margin-B-8"/>
+                        <v-select
+                                :items="items"
+                                label="Gender"
+                                name="gender"
+                                v-model="user.gender"
+                                single-line
+                                :rules="[rules.required]"
+                                class="py-3 pr-3"
+                                color="black"
+                        />
+                    </v-flex>
+                    <v-flex xs12 sm6 md6 lg3 class="WM-FlexCenter pl-3">
+                        <v-icon class="fa fa-phone mr-2 WM-Margin-B-8"/>
+                        <v-text-field
+                                name="cellnumber"
+                                label="Cell Number"
+                                v-model="user.cell_number"
+                                color="black"
+                                class="py-3 pr-3"
+                                disabled
+                        />
+                    </v-flex>
+                    <v-flex xs12 sm6 md6 lg3 class="WM-FlexCenter pl-3">
+                        <v-icon class="fa fa-envelope mr-2 WM-Margin-B-8"/>
+                        <v-text-field
+                                name="emailaddress"
+                                label="Email Address"
+                                v-model="user.email"
+                                :rules="[rules.email]"
+                                class="px-2"
+                                color="black"
+                        />
+                    </v-flex>
+                    <v-flex xs12 sm12 md12>
+                        <v-textarea
+                                prepend-icon="fa fa-sort-amount-desc"
+                                color="black" rows="1"
+                                :rules="[rules.counter]"
+                                v-model="user.address"
+                                class="pa-2"
+                                name="address">
+                            <template v-slot:label>
+                                <div>Address</div>
+                            </template>
+                        </v-textarea>
+                    </v-flex>
+                </v-layout>
+                <v-layout row wrap justify-center align-center>
+                    <v-flex xs12 sm4 md4 lg2 class="text-md-center text-sm-center text-xs-center">
+                        <router-link :to="{name: 'Dashboard'}">
+                            <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black">
+                                <v-icon class="black--text">keyboard_arrow_left</v-icon>
+                                <span class="black--text">Back</span>
+                            </v-btn>
+                        </router-link>
+                    </v-flex>
+                    <v-flex xs12 sm4 md4 lg3 class="text-md-center text-sm-center text-xs-center">
+                        <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black" @click="changePassword">
+                            <v-icon class="black--text mr-1">fas fa-refresh</v-icon>
+                            <span class="black--text"> Change Password </span>
+                        </v-btn>
+                    </v-flex>
+                    <v-flex xs12 sm4 md4 lg2 class="text-md-center text-xs-center">
+                        <v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px" @click="saveInfo()">
+                            <v-icon class="white--text mr-2 caption">fas fa-check</v-icon>
+                            <span class="white--text">SAVE</span>
+                        </v-btn>
+                    </v-flex>
+                </v-layout>
+            </material-card>
+        </v-container>
+    </v-form>
 </template>
 
 <script>
-import { ApiService } from "@/services";
-import { urls } from "@/config/urls";
-import { mapMutations } from 'vuex';
+import {ApiService} from "@/services";
+import {urls} from "@/config/urls";
+import {mapMutations} from 'vuex';
+
 export default {
-  data() {
-    return {
-      user: {
-        cell_number: "",
-        gender: "",
-        name: "",
-        email: "",
-        address: ""
-      },
-      items: ["Male", "FeMale"],
-      rules: {
-        required: value => !!value || "Required.",
-        counter: value =>
-          !value || value.length == 0 || value.length >= 5 || "Min 5 characters",
-        email: value => {
-          if (value && value.length > 0) {
-            const pattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
-            return pattern.test(value) || "Invalid e-mail.";
-          } else{
-            return true;
-          }
-        }
-      }
-    };
-  },
-  created() {
-    this.user = this.$store.state.user;
-  },
-  methods: {
-    async saveInfo() {
-      if (this.$refs.form.validate()) {
-        const result = await ApiService.post(urls.updateInfo, this.user);
-        if (result && result.status == 200) {
-          this.$store.dispatch("info", {}, { root: true });
-          this.$router.push({ name: `Dashboard` });
-        }
-      }
+    data() {
+        return {
+            user: {
+                cell_number: "",
+                gender: "",
+                name: "",
+                email: "",
+                address: ""
+            },
+            items: ["Male", "FeMale"],
+            rules: {
+                required: value => !!value || "Required.",
+                counter: value =>
+                        !value || value.length == 0 || value.length >= 5 || "Min 5 characters",
+                email: value => {
+                    if (value && value.length > 0) {
+                        const pattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+                        return pattern.test(value) || "Invalid e-mail.";
+                    } else {
+                        return true;
+                    }
+                }
+            }
+        };
     },
-    ...mapMutations('modal',['changeCurrentModal']),
-    changePassword() {
-      this.changeCurrentModal({ modal: "modal-auth-change-password" });
+    created() {
+        this.user = this.$store.state.user;
+    },
+    methods: {
+        async saveInfo() {
+            if (this.$refs.form.validate()) {
+                const result = await ApiService.post(urls.updateInfo, this.user);
+                if (result && result.status == 200) {
+                    this.$store.dispatch("info", {}, {root: true});
+                    this.$router.push({name: `Dashboard`});
+                }
+            }
+        },
+        ...mapMutations('modal', ['changeCurrentModal']),
+        changePassword() {
+            this.changeCurrentModal({modal: "modal-auth-change-password"});
+        }
     }
-  }
 };
 </script>