diff --git a/.rnd b/.rnd
index 6a9ba040..d2fab28b 100644
Binary files a/.rnd and b/.rnd differ
diff --git a/package.json b/package.json
index 0e447544..9923a097 100644
--- a/package.json
+++ b/package.json
@@ -61,7 +61,10 @@
         "vuelidate": "^0.7.4",
         "vuetify": "^1.2.5",
         "vuex": "^3.0.1",
-        "vuex-router-sync": "^5.0.0"
+        "vuex-router-sync": "^5.0.0",
+        "vue2-dropzone": "^3.6.0",
+        "vue-image-lightbox": "^7.1.0",
+        "vue-lazyload": "^1.3.3"
     },
     "dependencies": {
         "vue-html-to-paper": "^1.1.0",
diff --git a/resources/js/show/views/TestResult/ShowTestResult.vue b/resources/js/show/views/TestResult/ShowTestResult.vue
index 31c6fa02..8cc97bf6 100644
--- a/resources/js/show/views/TestResult/ShowTestResult.vue
+++ b/resources/js/show/views/TestResult/ShowTestResult.vue
@@ -8,7 +8,7 @@
                     <hr class="v-divider theme--light" />
                 </v-flex>
                 <v-layout row wrap class="ml-4">
-                    <v-flex xs12 md6 sm6>
+                    <v-flex xs12 md12 sm12>
                         <div class>
                             <span class="title">{{ data.device_label || 'AutoclaveID' }} :</span>
                             <span
@@ -17,7 +17,7 @@
                             >{{ data.device_id }}</span>
                         </div>
                     </v-flex>
-                    <v-flex xs12 md6 sm6>
+                    <v-flex xs12 md12 sm12>
                         <div class>
                             <span class="title">Result :</span>
                             <v-icon class="green--text ml-2 caption">fas fa-check</v-icon>
@@ -27,7 +27,7 @@
                             >{{ data.result }}</span>
                         </div>
                     </v-flex>
-                    <v-flex xs12 md6 sm6>
+                    <v-flex xs12 md12 sm12>
                         <div class>
                             <span class="title">verify :</span>
                             <v-icon class="pink--text ml-2 caption">fas fa-times</v-icon>
@@ -37,7 +37,7 @@
                             >{{ data.verified }}</span>
                         </div>
                     </v-flex>
-                    <v-flex xs12 md6 sm6>
+                    <v-flex xs12 md12 sm12>
                         <div class>
                             <span class="title">Register User :</span>
                             <span
@@ -46,7 +46,7 @@
                             >{{ User }}</span>
                         </div>
                     </v-flex>
-                    <v-flex xs12 md6 sm6>
+                    <v-flex xs12 md12 sm12>
                         <div class>
                             <span class="title">Date :</span>
                             <span
@@ -55,7 +55,7 @@
                             >{{ data.created_at }}</span>
                         </div>
                     </v-flex>
-                    <v-flex xs12 md6 sm6>
+                    <v-flex xs12 md6 sm12>
                         <div class>
                             <span class="title">Medical Center :</span>
                             <span
@@ -139,14 +139,13 @@
                     <hr class="v-divider theme--light" />
                 </v-flex>
                 <v-layout row wrap class="ml-4">
-                    <v-flex xs12 md6 sm6 v-for="(img, key) in data.title_image" :key="key">
+                    <v-flex xs6 md2 sm2 v-for="(img, key) in data.title_image" :key="key">
                         <img :src="'/'+img.path" style="width: 100%" />
                     </v-flex>
                 </v-layout>
             </v-layout>
-
-            <v-layout row wrap align-center justify-center>
-                <v-flex class xs12 md2 sm2>
+            <v-layout row wrap style="text-align:center">
+                <v-flex class xs12 md2 sm12>
                     <v-btn
                         class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Gray"
                         @click="print"
@@ -221,7 +220,6 @@ export default {
         if (this.$route.params.id) {
 			this.load(this.$route.params.id);
 		}
-
     },
 
 };
diff --git a/resources/js/vue/components/modal/cycle/Show.vue b/resources/js/vue/components/modal/cycle/Show.vue
index 3bd4833d..aa6567ec 100644
--- a/resources/js/vue/components/modal/cycle/Show.vue
+++ b/resources/js/vue/components/modal/cycle/Show.vue
@@ -8,39 +8,38 @@
                     <hr class="v-divider theme--light">
                 </v-flex>
                 <v-layout row wrap class="ml-4">
-                    <v-flex xs12 md6 sm6>
-                        <div class="WM-d-flex">
+                    <v-flex xs12 md3 sm3>
+                         <!-- class="WM-d-flex" -->
+                        <div>
                             <span class="title">Cycle ID :</span>
                             <span class="headline ml-1" style="letter-spacing:0 !important">{{ data.id }}</span>
                         </div>
                     </v-flex>
-
-
-                    <v-flex xs12 md6 sm6>
+                    <v-flex xs12 md3 sm3>
                         <div>
                             <span class="title">Sterilizer ID :</span>
                             <span class="headline ml-1" style="letter-spacing:0 !important">{{ data.sterilizer_id }}</span>
                         </div>
                     </v-flex>
-                    <v-flex xs12 md6 sm6>
+                    <v-flex xs12 md3 sm3>
                         <div class="WM-d-flex">
                             <v-icon class="WMi-user"></v-icon>
                             <span class="headline ml-2" style="letter-spacing:0 !important">{{ data.user ? data.user.name : '' }}</span>
                         </div>
                     </v-flex>
-                    <v-flex xs12 md6 sm6>
-                        <div class="WM-d-flex">
+                    <v-flex xs12 md3 sm3>
+                        <div>
                             <span class="title">Cycle Number :</span>
                             <span class="headline ml-2" style="letter-spacing:0 !important">{{ data.cycle_number }}</span>
                         </div>
                     </v-flex>
-                    <v-flex xs12 md6 sm6>
+                    <v-flex xs12 md3 sm3>
                         <div class="WM-d-flex">
                             <v-icon class="WMi-Industry"></v-icon>
                             <span class="headline ml-2" style="letter-spacing:0 !important">{{ data.date }}</span>
                         </div>
                     </v-flex>
-                    <v-flex xs12 md6 sm6>
+                    <v-flex xs12 md3 sm3>
                         <div class="WM-d-flex">
                             <v-icon class="WMi-pencil"></v-icon>
                             <span class="headline ml-1" style="letter-spacing:0 !important">{{ data.note }}</span>
diff --git a/resources/js/vue/components/modal/package/Show.vue b/resources/js/vue/components/modal/package/Show.vue
index f131575d..40f58f7c 100644
--- a/resources/js/vue/components/modal/package/Show.vue
+++ b/resources/js/vue/components/modal/package/Show.vue
@@ -8,25 +8,25 @@
                     <hr class="v-divider theme--light">
                 </v-flex>
                 <v-layout row wrap class="ml-4">
-                    <v-flex xs12 md6 sm6>
+                    <v-flex xs12 md3 sm3>
                         <div class="WM-d-flex">
                             <v-icon class="WMi-info"></v-icon>
                             <span class="headline ml-1" style="letter-spacing:0 !important">{{ data.name }}</span>
                         </div>
                     </v-flex>
-                    <v-flex xs12 md6 sm6>
+                    <v-flex xs12 md3 sm3>
                         <div class="WM-d-flex">
                             <v-icon class="WMi-Industry"></v-icon>
                             <span class="headline ml-2" style="letter-spacing:0 !important">{{ data.created_at }}</span>
                         </div>
                     </v-flex>
-                    <v-flex xs12 md6 sm6>
+                    <v-flex xs12 md3 sm3>
                         <div class="WM-d-flex">
                             <v-icon class="WMi-user"></v-icon>
                             <span class="headline ml-2" style="letter-spacing:0 !important">{{ data.user ? data.user.name : '' }}</span>
                         </div>
                     </v-flex>
-                    <v-flex xs12 md6 sm6>
+                    <v-flex xs12 md3 sm3>
                         <div class="WM-d-flex">
                             <v-icon class="WMi-pencil"></v-icon>
                             <span class="headline ml-1" style="letter-spacing:0 !important">{{ data.note }}</span>
diff --git a/resources/js/vue/components/modal/testresult/Show.vue b/resources/js/vue/components/modal/testresult/Show.vue
index 6670b052..b479aa57 100644
--- a/resources/js/vue/components/modal/testresult/Show.vue
+++ b/resources/js/vue/components/modal/testresult/Show.vue
@@ -17,7 +17,7 @@
                             >{{ data.device_id }}</span>
                         </div>
                     </v-flex> -->
-                    <v-flex xs6 md6 sm6>
+                    <v-flex xs3 md3 sm3>
                         <div class>
                             <span class="subtitle-1">Result :</span>
                             <v-icon class="green--text ml-2 caption">fas fa-check</v-icon>
@@ -27,7 +27,7 @@
                             >{{ data.result }}</span>
                         </div>
                     </v-flex>
-                    <v-flex xs6 md6 sm6>
+                    <v-flex xs3 md3 sm3>
                         <div class>
                             <span class="subtitle-1">verify :</span>
                             <v-icon class="pink--text ml-2 caption">fas fa-times</v-icon>
@@ -37,7 +37,7 @@
                             >{{ data.verified }}</span>
                         </div>
                     </v-flex>
-                    <v-flex xs6 md6 sm6>
+                    <v-flex xs3 md3 sm3>
                         <div class>
                             <span class="subtitle-1">Register User :</span>
                             <span
@@ -46,7 +46,7 @@
                             >{{ data.user.name }}</span>
                         </div>
                     </v-flex>
-                    <v-flex xs6 md6 sm6>
+                    <v-flex xs3 md3 sm3>
                         <div class>
                             <span class="subtitle-1">Date :</span>
                             <span
@@ -55,7 +55,7 @@
                             >{{ data.created_at }}</span>
                         </div>
                     </v-flex>
-                    <v-flex xs6 md6 sm6>
+                    <v-flex xs3 md3 sm3>
                         <div class>
                             <span class="subtitle-1">Medical Center :</span>
                             <span
@@ -74,9 +74,9 @@
                 <v-layout row wrap class="ml-4">
                     <template v-if="data.inputs">
                         <v-flex
-                            xs12
-                            md12
-                            sm12
+                            xs3
+                            md3
+                            sm3
                             v-for="(inputData, keyInputs) in data.inputs"
                             :key="keyInputs"
                         >
@@ -89,9 +89,9 @@
                     </template>
                     <template v-if="data.options">
                         <v-flex
-                            xs6
-                            md6
-                            sm6
+                            xs3
+                            md3
+                            sm3
                             v-for="(optionData, keyOptions) in data.options"
                             :key="keyOptions"
                         >
@@ -105,16 +105,22 @@
                         </v-flex>
                     </template>
                     <template v-if="data.children">
+                        <v-layout row wrap class="WM-Width-Full">
                         <v-flex class="mt-4 pb-4" style="border-left:3px solid #32c5d2;border-bottom:1px solid #ddd"
-                            xs6
+                            xs3
                             md6
                             sm6
                             v-for="(formData, keyForm) in data.children"
                             :key="keyForm"
                         >
                             <h4 class="ml-3 headline font-weight-bold">{{keyForm}}</h4>
-                            <div v-for="(childData, keyChild) in formData" :key="keyChild">
-                                <div class="ml-4">
+                            <v-layout row wrap>
+                            <v-layout row wrap v-for="(childData, keyChild) in formData" :key="keyChild">
+                                    <v-flex
+                                            xs12
+                                            md12
+                                            sm12
+                                            class="ml-4">
                                     <span class="subtitle-1">{{keyChild}} :</span>
                                     <template v-if="Array.isArray(childData)">
                                         <span
@@ -127,9 +133,11 @@
                                     <template v-else>
                                         <span class="headline ml-2">{{childData}}</span>
                                     </template>
-                                </div>
-                            </div>
+                                    </v-flex>
+                                </v-layout>
+                            </v-layout>
                         </v-flex>
+                        </v-layout>
                     </template>
                 </v-layout>
             </v-layout>
@@ -139,7 +147,8 @@
                     <hr class="v-divider theme--light" />
                 </v-flex>
                 <v-layout row wrap class="ml-4">
-                    <v-flex xs12 md6 sm6 v-for="(img, key) in data.images" :key="key">
+                    <!-- <LightBox :media="data.images.map(img => ({thumb: img.path, src: img.path}))" style="width: 20%"></LightBox> -->
+                    <v-flex xs6 md2 sm2 v-for="(img, key) in data.images" :key="key">  
                         <img :src="'/'+img.path" style="width: 100%" />
                     </v-flex>
                 </v-layout>
@@ -148,10 +157,10 @@
         <material-card> -->
             <v-layout row wrap align-center justify-center class="px-5 my-3" v-if="$hasRole('Admin|Supervisor')">
                 <v-flex
-                    class="mr-4"
+                    class="WM-Align-R mr-1"
                     xs12
-                    md2
-                    sm2
+                    md3
+                    sm3
                     v-if="data.verified == 'NotVerified'"
                     @click="verify(data.id)"
                 >
@@ -160,7 +169,7 @@
                         <span class="white--text">Verify</span>
                     </v-btn>
                 </v-flex>
-                <v-flex class xs12 md2 sm2 v-else>
+                <v-flex class="WM-Align-R" xs6 md3 sm3 v-else>
                     <v-btn
                         class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Gray"
                         @click="verify(data.id)"
@@ -170,9 +179,19 @@
                     </v-btn>
                 </v-flex>
 
+                <v-flex xs6 md2 sm2>
+                    <a :href="'/Show/TestResult/'+data.id">
+                        <v-btn
+                            class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Gray"
+                        >
+                            <v-icon class="black--text mr-2 caption">fas fa-print</v-icon>
+                            <span class="black--text">Go to Print Page</span>
+                        </v-btn>
+                        </a>
+                    </v-flex>
             </v-layout>
                 <v-layout row wrap align-center justify-center class="px-5 my-3" >
-                    <v-flex class xs12 md2 sm2>
+                    <!-- <v-flex class xs6 md2 sm2>
                         <v-btn
                             class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Gray"
                             @click="print"
@@ -180,7 +199,7 @@
                             <v-icon class="black--text mr-2 caption">fas fa-print</v-icon>
                             <span class="black--text">Print</span>
                         </v-btn>
-                    </v-flex>
+                    </v-flex> -->
                 </v-layout>
         </material-card>
     </v-container>
@@ -196,8 +215,13 @@ export default {
 import { mapGetters, mapMutations } from "vuex";
 import { ApiService } from "@/services";
 import { urls } from "@/config/urls";
+import LightBox from 'vue-image-lightbox';
+import 'vue-image-lightbox/dist/vue-image-lightbox.min.css'
 export default {
     data: () => ({}),
+    components:{
+		LightBox
+	},
     methods: {
         ...mapMutations("modal", ["closeModal", "setResultModal"]),
         async verify(id) {
@@ -243,7 +267,7 @@ export default {
     },
     created() {
         this.data = this.getModalProperties.result.data.data;
-        console.log(this.data);
+        console.log(this.data.images.map(img => img.path));
 
     },
     computed: {
diff --git a/resources/js/vue/main.js b/resources/js/vue/main.js
index a6382f03..2a96f718 100644
--- a/resources/js/vue/main.js
+++ b/resources/js/vue/main.js
@@ -1,5 +1,6 @@
 import 'font-awesome/css/font-awesome.min.css'
 import Vue from 'vue'
+
 // Components
 import './components'
 
@@ -17,8 +18,8 @@ import App from './App.vue'
 import i18n from '@/i18n'
 import router from '@/router'
 import store from '@/store'
-
-
+import VueLazyLoad from 'vue-lazyload';
+Vue.use(VueLazyLoad)
 import { ApiService, TokenService } from '@/services'
 // Sync store with router
 sync(store, router)
diff --git a/resources/js/vue/styles/css/Assets/Main.scss b/resources/js/vue/styles/css/Assets/Main.scss
index faa1446d..496ca139 100644
--- a/resources/js/vue/styles/css/Assets/Main.scss
+++ b/resources/js/vue/styles/css/Assets/Main.scss
@@ -124,12 +124,154 @@
 .theme--light.v-pagination .v-pagination__item:focus {
   outline: 0 !important;
 }
-@media screen and(max-width : 1536px) {
-  .WM-WidthScreen-SM {
-    flex-basis:35% !important;
-    max-width: 35% !important;
+table.v-table tbody td.Height-MD-60 {
+  height: 60px;
+}
+table.v-table tbody td.Height-MD-80 {
+  height: 80px;
+}
+.FlexBtn {
+  display: flex;
+  flex-wrap: nowrap;
+  padding: 10px 8px !important;
+  justify-content: flex-start;
+}
+td.FlexBtn .theme--light.v-btn {
+  padding: 21px 20px;
+}
+td.FlexBtn a.LinkBtn .theme--light.v-btn  {
+  padding: 12px 10px;
+}
+.ResultMsg {
+  font-size: 10px;
+  color: #fff;
+  padding: 3px 10px;
+  border-radius: 5px;
+} 
+.ResultMsg.Reject{
+  background: #ee3552;
+}
+.ResultMsg.Accept{
+  background: #1DE6B8;;
+}
+.theme--light.v-icon.Verified {
+  font-size: 15px !important;
+  color: #1DE6B8;
+}
+.theme--light.v-icon.NotVerified {
+  font-size: 15px !important;
+  color: #ee3552;
+}
+
+
+table.v-table tbody td.FlexBtn:not(:first-child) {
+  padding: 12px 8px;
+}
+td.FlexBtn .v-btn {
+  margin-top: 5px;
+}
+.WM-WidthScreen-SM {
+  flex-basis:35% !important;
+  max-width: 35% !important;
+}
+table.v-table tbody td.Height-SM-48 {
+  height: 48px;
+}
+.v-card .title {
+  font-size: .9rem !important;
+}
+.headline {
+  font-size: .9rem !important;
+}
+.FlexBtn {
+  padding: 10px 8px !important;
+}
+td.FlexBtn span {
+  display: none;
+}
+td.FlexBtn .theme--light.v-btn {
+  min-width: 30px;
+  padding: 15px 10px;
+  margin-right: 1 !important;
+  
+} 
+td.FlexBtn a.LinkBtn .theme--light.v-btn  {
+  padding: 9px 10px;
+}
+td.FlexBtn .theme--light.v-icon {
+  margin-right: 0 !important;
+}
+
+@media screen and (min-width : 1900px) {
+  .WM-XL-Align-L {
+    text-align: left !important;
   }
 }
+@media screen and(max-width : 1536px) {
+  // table.v-table tbody td.FlexBtn:not(:first-child) {
+  //   padding: 12px 8px;
+  // }
+  // td.FlexBtn .v-btn {
+  //   margin-top: 5px;
+  // }
+  // .WM-WidthScreen-SM {
+  //   flex-basis:35% !important;
+  //   max-width: 35% !important;
+  // }
+
+
+
+//   .theme--light.v-btn.WM-ActBtn:not(.v-btn--icon):not(.v-btn--flat) {
+//     margin: 5px;
+//     padding: 10px;
+//     min-width: 30px;
+//     display: inline-block;
+// }
+// .theme--light.v-btn.WM-ActBtn:not(.v-btn--icon):not(.v-btn--flat) span {
+//     display: none;
+// }
+// .v-btn.WM-ActBtn__content .v-icon.mr-2 {
+//     margin-right: 0 !important;
+// }
+table.v-table tbody td.Height-SM-48 {
+  height: 48px;
+}
+.v-card .title {
+  font-size: .9rem !important;
+}
+.headline {
+  font-size: .9rem !important;
+}
+.FlexBtn {
+  padding: 10px 8px !important;
+}
+td.FlexBtn span {
+  display: none;
+}
+td.FlexBtn .theme--light.v-btn {
+  min-width: 30px;
+  padding: 15px 10px;
+  margin-right: 1 !important;
+  
+} 
+td.FlexBtn a.LinkBtn .theme--light.v-btn  {
+  padding: 9px 10px;
+}
+td.FlexBtn .theme--light.v-icon {
+  margin-right: 0 !important;
+}
+
+}
+@media screen and(max-width : 1366px) {
+  .FlexBtn {
+    // padding: 10px 8px !important;
+    padding: 20px 8px !important;
+  }
+  td.FlexBtn .v-btn {
+    margin-top: -5px;
+  }
+}
+
 @media screen and(max-width : 1024px) {
   .WM-WidthScreen-XS {
     flex-basis:60% !important;
diff --git a/resources/js/vue/views/Cycle/List.vue b/resources/js/vue/views/Cycle/List.vue
index 18235ce2..5b06058f 100644
--- a/resources/js/vue/views/Cycle/List.vue
+++ b/resources/js/vue/views/Cycle/List.vue
@@ -98,33 +98,58 @@
                                 <td class="title font-weight-light">{{ item.sterilizer_id }}</td>
                                 <td class="title font-weight-light">{{ item.cycle_number }}</td>
                                 <td class="title font-weight-light">{{ item.date }}</td>
-                                <td class="text-xs-right">
-                                    <v-btn color="cyan" class="mr-2" @click="show(item.id)">
+                                <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: 'EditCycle', params: {cycle: item.id}}"
                                     >
-                                        <v-btn color="orange" class="mr-2">
+                                        <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"
+                                        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>
-                                    <v-btn color="orange darken-1" @click="generateBarcode(item.id, 'Cycle')">
+                                    </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" 
+                                    @click="generateBarcode(item.id, 'Cycle')">
                                         <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>
diff --git a/resources/js/vue/views/Item/List.vue b/resources/js/vue/views/Item/List.vue
index e99b4481..a0e304f4 100644
--- a/resources/js/vue/views/Item/List.vue
+++ b/resources/js/vue/views/Item/List.vue
@@ -73,33 +73,54 @@
                                 <!-- <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.size }}</td>
-                                <td class="text-xs-right">
-                                    <v-btn color="cyan" class="mr-2" @click="show(item.id)">
+                                <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>
-                                    <router-link
+                                    </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: 'EditItem', params: {Item: item.id}}"
                                     >
-                                        <v-btn color="orange" class="mr-2">
+                                        <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"
+                                        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>
-                                    <v-btn color="orange darken-1" @click="generateBarcode(item.id, 'Item')">
-                                        <v-icon class="white--text mr-1 caption">fas fa-barcode</v-icon>
+                                    </template>
+                                    <span>Remove</span>
+                                    </v-tooltip>
+                                    <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.id, 'Item')">
+                                        <v-icon class="white--text mr-2 caption">fas fa-barcode</v-icon>
                                         <span>Generate Barcode</span>
                                     </v-btn>
+                                    </template>
+                                    <span>Generate Barcode</span>
+                                    </v-tooltip>
                                 </td>
                             </template>
                         </v-data-table>
diff --git a/resources/js/vue/views/Label/List.vue b/resources/js/vue/views/Label/List.vue
index 416326c9..f3894bab 100644
--- a/resources/js/vue/views/Label/List.vue
+++ b/resources/js/vue/views/Label/List.vue
@@ -38,7 +38,7 @@
 						<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 class xs12 md2 sm3>
+					<v-flex xs12 md2 sm3 class="ml-3">
 						<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>
@@ -69,33 +69,55 @@
 								<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">
-									<v-btn color="cyan" class="mr-2" @click="show(item.id)">
+								<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 color="orange" class="mr-2">
+										<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"
+										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>
-									<v-btn color="orange darken-1" @click="generateBarcode(item.id, 'Label')">
+									</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>
                                         <span>Generate Barcode</span>
                                     </v-btn>
+									</template>
+                                    <span>Generate Barcode</span>
+                                    </v-tooltip>
 								</td>
 							</template>
 						</v-data-table>
diff --git a/resources/js/vue/views/MedicalCenter/List.vue b/resources/js/vue/views/MedicalCenter/List.vue
index 25a8216d..052cce7c 100644
--- a/resources/js/vue/views/MedicalCenter/List.vue
+++ b/resources/js/vue/views/MedicalCenter/List.vue
@@ -37,23 +37,38 @@
               <td class="headline font-weight-light WM-NoLetterSpacing">{{ item.name }}</td>
               <td class="title font-weight-light">{{ item.created_at }}</td>
               <td class="title font-weight-light">{{ item.users_count }} Operator</td>
-              <td class="text-xs-right">
-                <router-link :to="{name : 'EditMedicalCenter', params : {medicalCenter : item.id}}">
-                  <v-btn color="cyan" class="mr-2 WM-ActionButton">
+              <td class="text-xs-right FlexBtn Height-MD-80 Height-SM-48">
+                <v-tooltip bottom open-on-hover>
+                <template v-slot:activator="{ on, attrs }">
+                <router-link class="LinkBtn" :to="{name : 'EditMedicalCenter', params : {medicalCenter : item.id}}">
+                  <v-btn v-bind="attrs" v-on="on" color="cyan" class="mr-2 WM-ActionButton">
                     <v-icon class="white--text mr-2 caption">fas fa-pen</v-icon>
                     <span>Edit</span>
                   </v-btn>
                 </router-link>
-                <router-link :to="{name : 'OperatorList', params : {medicalCenter : item.id}}">
-                  <v-btn color="orange darken-1" class="mr-2 WM-ActionButton">
+                </template>
+                <span>Edit</span>
+                </v-tooltip>
+                <v-tooltip bottom open-on-hover>
+                <template v-slot:activator="{ on, attrs }">
+                <router-link class="LinkBtn" :to="{name : 'OperatorList', params : {medicalCenter : item.id}}">
+                  <v-btn v-bind="attrs" v-on="on" color="orange darken-1" class="mr-2 WM-ActionButton">
                     <v-icon class="white--text mr-2 caption">fas fa-user</v-icon>
                     <span>Operator</span>
                   </v-btn>
                 </router-link>
-                <v-btn color="pink" @click="remove(item.id)" class="WM-ActionButton">
+                </template>
+                <span>Operator</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" @click="remove(item.id)" class="WM-ActionButton">
                   <v-icon class="white--text mr-2 caption">fas fa-times</v-icon>
                   <span>Remove</span>
                 </v-btn>
+                </template>
+                <span>Remove</span>
+                </v-tooltip>
               </td>
             </template>
           </v-data-table>
diff --git a/resources/js/vue/views/Package/List.vue b/resources/js/vue/views/Package/List.vue
index def989e8..314853f0 100644
--- a/resources/js/vue/views/Package/List.vue
+++ b/resources/js/vue/views/Package/List.vue
@@ -33,7 +33,6 @@
                         :items="medicalCenters"
                       ></v-autocomplete>
                     </v-flex>
-
                     <v-flex class 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>
@@ -41,7 +40,7 @@
                         </v-btn>
                     </v-flex>
                     <v-spacer></v-spacer>
-                    <v-flex xs12 md2 sm2 class="text-xs-right">
+                    <v-flex xs12 md2 sm2 class="text-xs-left ml-3">
                         <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>
@@ -49,6 +48,7 @@
                             </v-btn>
                         </router-link>
                     </v-flex>
+                    
                 </v-layout>
                 <v-divider></v-divider>
                 <v-layout align-center wrap class="my-3">
@@ -66,33 +66,55 @@
                                 <td class="title font-weight-light">{{ item.name }}</td>
                                 <td class="title font-weight-light">{{ item.user ? item.user.name : '' }}</td>
                                 <td class="title font-weight-light">{{ item.description }}</td>
-                                <td class="text-xs-right">
-                                    <v-btn color="cyan" class="mr-2" @click="show(item.id)">
+                                <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: 'EditPackage', params: {package: item.id}}"
                                     >
-                                        <v-btn color="orange" class="mr-2">
+                                        <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>
-                                    <v-btn
+                                    </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"
+                                        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>
-                                    <v-btn color="orange darken-1" @click="generateBarcode(item.id, 'Package')">
+                                    </template>
+                                    <span>Remove</span>
+                                    </v-tooltip>
+                                    <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.id, 'Package')">
                                         <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>
diff --git a/resources/js/vue/views/TestResult/List.vue b/resources/js/vue/views/TestResult/List.vue
index 598b4253..7caf8c43 100644
--- a/resources/js/vue/views/TestResult/List.vue
+++ b/resources/js/vue/views/TestResult/List.vue
@@ -48,7 +48,7 @@
                             item-value="id"
                         ></v-autocomplete>
                     </v-flex>
-                    <v-flex xs12 md2 sm3 class="WM-FlexCenter pl-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-text-field
                             class="py-3 pr-3"
@@ -107,15 +107,15 @@
                             ></v-date-picker>
                         </v-menu>
                     </v-flex>
-                    <v-spacer></v-spacer>
-                    <v-flex class xs12 md2 sm2 class="WM-Align-R">
+                    <!-- <v-spacer></v-spacer> -->
+                    <v-flex class xs12 md3 sm3 class="WM-XL-Align-L text-lg-center">
                         <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">
+                    <v-flex wrap xs12 md1 sm1 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>
@@ -127,6 +127,17 @@
                 <v-layout class="px-4 my-3">
                     <v-divider></v-divider>
                 </v-layout>
+                <!-- <v-tooltip bottom open-on-hover>
+                                    <template #activator>
+                                        <v-btn
+                                        color="primary"
+                                        dark
+                                        v-bind="attrs"
+                                        v-on="on"
+                                        >Button</v-btn>
+                                    </template>
+                                    <span>Tooltip</span>
+                                    </v-tooltip> -->
                 <v-layout align-center wrap class="px-5 my-2">
                     <v-flex md12>
                         <v-data-table :headers="headers" :items="items" hide-actions>
@@ -145,36 +156,76 @@
                                     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">{{ item.result }}</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>
+                                </td>
                                 <td class="title font-weight-light">{{ item.created_at }}</td>
-                                <td class="title font-weight-light">{{ item.verified }}</td>
-                                <td class="text-xs-right">
-                                    <v-btn color="cyan" class="mr-2" @click="show(item.id)">
+                                <td class="title font-weight-light">
+                                    <span v-if="item.verified == 'NotVerified'" class="NotVerified">
+                                        <v-icon class="caption fa fa-times NotVerified"></v-icon>
+                                    </span>
+                                    <span v-if="item.verified == 'Verified'" class="">
+                                        <v-icon class="caption fa fa-check Verified"></v-icon>
+                                    </span>
+                                    <!-- {{ item.verified }} -->
+                                </td>
+                                <td class="text-xs-right FlexBtn">
+                                    <v-tooltip bottom open-on-hover>
+                                    <template v-slot:activator="{ on, attrs }">
+                                    <v-btn color="cyan" class="mr-2" @click="show(item.id)" v-bind="attrs"
+                                        v-on="on">
                                         <v-icon class="white--text mr-1 caption">fas fa-eye</v-icon>
                                         <span>Show</span>
                                     </v-btn>
-                                    <v-btn color="orange" class="mr-2" @click="generateBarcode(item.id, 'TestResult')">
-                                        <v-icon class="white--text mr-1 caption">fas fa-eye</v-icon>
+                                    </template>
+                                    <span>Show</span>
+                                    </v-tooltip>
+                                    <v-tooltip bottom open-on-hover>
+                                    <template v-slot:activator="{ on, attrs }">
+                                    <v-btn color="orange" class="mr-2" @click="generateBarcode(item.id, 'TestResult')" v-bind="attrs"
+                                        v-on="on">
+                                        <v-icon class="white--text mr-1 caption">fa fa-bars</v-icon>
                                         <span>generate Barcode</span>
                                     </v-btn>
-                                    <router-link
+                                    </template>
+                                    <span>generate Barcode</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: 'EditTestResult', params: {testResult: item.id}}"
                                     >
-                                        <v-btn color="orange" class="mr-2">
+                                        <v-btn color="orange" class="mr-2" v-bind="attrs"
+                                        v-on="on">
                                             <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
                                         color="pink"
                                         class="WM-ActionButton"
                                         @click="remove(item.id)"
-                                        v-if="$hasRole('Admin') || item.user_id == $store.state.user.id"
+                                        v-if="$hasRole('Admin') || item.user_id == $store.state.user.id" 
+                                        v-bind="attrs"
+                                        v-on="on"
                                     >
                                         <v-icon class="white--text mr-2 caption">fas fa-times</v-icon>
                                         <span>Remove</span>
                                     </v-btn>
+                                    </template>
+                                    <span>Remove</span>
+                                    </v-tooltip>
                                 </td>
                             </template>
                         </v-data-table>
@@ -380,4 +431,36 @@ export default {
 .v-btn--floating, .v-btn--icon:before {
     border-radius: 50%!important;
 }
+/* .FlexBtn {
+    display: flex;
+    flex-wrap: nowrap;
+    padding: 10px 8px !important;
+}
+td.FlexBtn .theme--light.v-btn {
+    padding: 21px 20px;
+}
+td.FlexBtn a.LinkBtn .theme--light.v-btn  {
+    padding: 12px 10px;
+}    
+@media screen and (max-width:1536px) {
+.FlexBtn {
+    padding: 30px 8px !important;
+}
+td.FlexBtn span {
+    display: none;
+}
+td.FlexBtn .theme--light.v-btn {
+    min-width: 30px;
+    padding: 15px 10px;
+    margin-right: 1 !important;
+    
+} 
+td.FlexBtn a.LinkBtn .theme--light.v-btn  {
+    padding: 9px 10px;
+}
+td.FlexBtn .theme--light.v-icon {
+    margin-right: 0 !important;
+}
+} */
+
 </style>
diff --git a/resources/js/vue/views/TestResult/Show.vue b/resources/js/vue/views/TestResult/Show.vue
index c28cbb18..6cbc4f12 100644
--- a/resources/js/vue/views/TestResult/Show.vue
+++ b/resources/js/vue/views/TestResult/Show.vue
@@ -102,9 +102,10 @@
 					<hr class="v-divider theme--light" />
 				</v-flex>
 				<v-layout row wrap class="ml-4">
-					<v-flex xs12 md6 sm6 v-for="(img, key) in data.title_image" :key="key">
-						<img :src="'/'+img.path" style="width: 100%" />
-					</v-flex>
+					<!-- <LightBox :media="data.title_image.map(img => img.path)"></LightBox> -->
+					<!-- <v-flex xs12 md6 sm6 v-for="(img, key) in data.title_image" :key="key">
+						<img :src="'/'+img.path" style="width: 20%;height:auto" />
+					</v-flex> -->
 				</v-layout>
 			</v-layout>
 		</material-card>
@@ -121,13 +122,6 @@
 	</v-container>
 </template>
 <script>
-export default {
-	data: () => ({
-		data: {}
-	})
-};
-</script>
-<script>
 import { mapGetters, mapMutations } from "vuex";
 import { ApiService } from "@/services";
 import { urls } from "@/config/urls";
diff --git a/resources/js/vue/views/TestType/List.vue b/resources/js/vue/views/TestType/List.vue
index 6656781d..2012096d 100644
--- a/resources/js/vue/views/TestType/List.vue
+++ b/resources/js/vue/views/TestType/List.vue
@@ -102,24 +102,42 @@
                            <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">{{ item.created_at }}</td>
-                           <td class="text-xs-right">
-                               <router-link
+                           <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-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>
-                               <v-btn color="black" class="mr-2" @click="remove(item.id)">
+                               </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>
-                               <v-btn color="orange darken-1" @click="generateBarcode(item.unique_code, 'TestType')">
+                               </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>
diff --git a/resources/js/vue/views/User/List.vue b/resources/js/vue/views/User/List.vue
index 9624c6c6..8e8d035d 100644
--- a/resources/js/vue/views/User/List.vue
+++ b/resources/js/vue/views/User/List.vue
@@ -132,23 +132,32 @@
                                 <span v-for="(role, key) in item.roles" :key="key">{{ role.name }}</span>
                             </td>
                             <td class="title font-weight-light">{{item.medical_center.name}}</td>
-                            <td class="text-xs-right">
-                                <v-btn
-                                    :color="item.status == 'Active' ? 'red' : 'green'"
-                                    @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">fas fa-user-tag</v-icon>
-                                        <span v-if="item.status == 'Active'">Susspended</span>
-                                    </template>
-                                    <template v-else>
-                                        <v-icon class="white--text mr-2 caption">fas fa-user-tag</v-icon>
-                                        <span>Active</span>
-                                    </template>
-                                </v-btn>
+                            <td class="text-xs-right FlexBtn">
+                                <v-tooltip bottom open-on-hover>
+                                <template v-slot:activator="{ on, attrs }">
+                                    <v-btn
+                                        v-bind="attrs" v-on="on"
+                                        :color="item.status == 'Active' ? 'red' : 'green'"
+                                        @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'">Susspended</span>
+                                        </template>
+                                        <template v-else>
+                                            <v-icon class="white--text mr-2 caption">fa fa-pause</v-icon>
+                                            <span>Active</span>
+                                        </template>
+                                    </v-btn>
+                                </template>
+                                <span>Active</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"
                                     @click="changeRoleModal(item)"
                                     class="mr-2 WM-ActionButton"
@@ -157,7 +166,13 @@
                                     <v-icon class="white--text mr-2 caption">fas fa-user-tag</v-icon>
                                     <span>Role</span>
                                 </v-btn>
+                                </template>
+                                <span>Role</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"
                                     v-if="$hasRole('Admin')"
                                     class="WM-ActionButton"
@@ -166,6 +181,9 @@
                                     <v-icon class="white--text mr-2 caption">fas fa-times</v-icon>
                                     <span>Remove</span>
                                 </v-btn>
+                                </template>
+                                <span>Remove</span>
+                                </v-tooltip>
                             </td>
                         </template>
                     </v-data-table>