diff --git a/src/components/core/Toolbar.vue b/src/components/core/Toolbar.vue
index c2096ec..3e71866 100644
--- a/src/components/core/Toolbar.vue
+++ b/src/components/core/Toolbar.vue
@@ -148,7 +148,15 @@ export default {
     text-transform: uppercase;
     letter-spacing: 1.5rem;
 }
-
+@media screen and (max-width: 1440px) {
+    .title-home {
+        font-family: "Montserrat-Regular";
+        font-weight: 400;
+        font-size: 25px !important;
+        text-transform: uppercase;
+        letter-spacing: 12px;
+    }
+}
 .Pointer {
     cursor: pointer;
 }
diff --git a/src/components/modal/item/show.vue b/src/components/modal/item/show.vue
index d32a862..e1c208f 100644
--- a/src/components/modal/item/show.vue
+++ b/src/components/modal/item/show.vue
@@ -10,25 +10,33 @@
                     <v-flex xs12 md6 sm6>
                         <div class>
                             <span class="title CSSD-font">Item ID :</span>
-                            <span class="headline ml-1 CSSD-font" style="letter-spacing:0 !important">{{
-                                    data.id
-                                }}</span>
+                            <span class="headline ml-1 CSSD-font" style="letter-spacing:0 !important">
+                                {{ data.id }}
+                            </span>
                         </div>
                     </v-flex>
                     <v-flex xs12 md6 sm6>
                         <div class>
                             <span class="title CSSD-font">Name :</span>
-                            <span class="headline ml-1 CSSD-font" style="letter-spacing:0 !important">{{
-                                    data.name
-                                }}</span>
+                            <span class="headline ml-1 CSSD-font" style="letter-spacing:0 !important">
+                                {{ data.name }}
+                            </span>
                         </div>
                     </v-flex>
                     <v-flex xs12 md6 sm6>
                         <div class>
                             <span class="title CSSD-font">Size :</span>
-                            <span class="headline ml-1 CSSD-font" style="letter-spacing:0 !important">{{
-                                    data.size
-                                }}</span>
+                            <span class="headline ml-1 CSSD-font" style="letter-spacing:0 !important">
+                                {{ data.size }}
+                            </span>
+                        </div>
+                    </v-flex>
+                    <v-flex xs12 md6 sm6>
+                        <div class>
+                            <span class="title CSSD-font">UDI :</span>
+                            <span class="headline ml-1 CSSD-font" style="letter-spacing:0 !important">
+                                {{ data.udi }}
+                            </span>
                         </div>
                     </v-flex>
                     <v-flex xs12 md6 sm6>
@@ -55,6 +63,26 @@
                     </v-flex>
 
                 </v-layout>
+                <v-layout align-left justify-left wrap class="my-3" v-if="data.files.length">
+                    <h3 class="CSSD-font">Image</h3>
+                    <v-flex xs12>
+                        <hr class="v-divider theme--light"/>
+                    </v-flex>
+                    <v-layout row wrap class="">
+                        <!-- <LightBox :media="data.images.map(img => ({thumb: img.path, src: img.path}))" style="width: 20%"></LightBox> -->
+                        <v-flex xs6 md2 sm2 v-for="(file, key) in data.files" :key="key">
+                            <template v-if="file.file_type == 'document'">
+                                <a target="_blank" :href="'/'+file.thumbnail">
+                                    <v-icon class="mr-2 caption">fas fa-check</v-icon>
+                                    {{ file.file_name }}</a>
+                            </template>
+
+                            <template v-else>
+                                <img :src="file.thumbnail" style="width: 100%"/>
+                            </template>
+                        </v-flex>
+                    </v-layout>
+                </v-layout>
                 <v-layout align-left justify-left wrap class="my-3">
                     <h3 class="CSSD-font">Barcode And QRCode Image</h3>
                     <v-flex xs12>
@@ -101,6 +129,7 @@
 import {mapGetters, mapMutations} from "vuex";
 import {ApiService} from "@/services";
 import {urls} from "@/config/urls";
+import toast from "@/services/global/toast.service";
 
 export default {
     data: () => ({
@@ -110,11 +139,16 @@ export default {
     }),
     methods: {
         ...mapMutations("modal", ["closeModal", "setResultModal", "changeCurrentModal"]),
-        async generateBarcode(itemId) {
-            const result = await ApiService.post(urls.Barcode(itemId, 'Item'));
-            if (result && result.status == 200) {
-                this.QRCodeimg = result.data.data.QRCode ? result.data.data.QRCode : null;
-                this.barcodeimg = result.data.data.Barcode ? result.data.data.Barcode : null;
+        async generateBarcode(item) {
+            let code = item.udi;
+            if (code) {
+                const result = await ApiService.post(urls.Barcode(code, 'Item'));
+                if (result && result.status == 200) {
+                    this.QRCodeimg = result.data.data.QRCode ? result.data.data.QRCode : null;
+                    this.barcodeimg = result.data.data.Barcode ? result.data.data.Barcode : null;
+                }
+            } else {
+                toast.error('An error occurred while generating the barcode . please first set UDI');
             }
         },
         print() {
@@ -158,7 +192,7 @@ export default {
         ...mapGetters("modal", ["getModalProperties"])
     },
     mounted() {
-        this.generateBarcode(this.data.id);
+        this.generateBarcode(this.data);
     }
 };
 </script>
diff --git a/src/styles/css/Assets/Main.scss b/src/styles/css/Assets/Main.scss
index 5ebe30a..11205c0 100644
--- a/src/styles/css/Assets/Main.scss
+++ b/src/styles/css/Assets/Main.scss
@@ -26,25 +26,11 @@
   src: url('../../fonts/Montserrat-Light.ttf') format('truetype');
 }
 
-body,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-.h1,
-.h2,
-.h3,
-.h4,
-.title,
-.display-1 {
+body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .title, .display-1 {
   font-family: 'Montserrat-Regular' !important;
 }
 
-.CSSD-font,
-.headline.CSSD-font,
-h3.CSSD-font {
+.CSSD-font, .headline.CSSD-font, h3.CSSD-font {
   font-family: 'Montserrat-Regular' !important;
 }
 
@@ -86,8 +72,7 @@ h3.CSSD-font {
   vertical-align: sub !important;
 }
 
-.fa,
-.fas {
+.fa, .fas {
   font-size: 20px;
 }
 
@@ -107,6 +92,15 @@ h3.CSSD-font {
   border-left: 3px solid;
 }
 
+.cyan{
+  background-color: #32c5d2 !important;
+  border-color: #32c5d2 !important;
+}
+
+.light-gray {
+  background-color: #eeeeee !important;
+  border-color: #eeeeee !important;
+}
 .WM-LightGray-BG {
   background-color: #eee !important;
 }
diff --git a/src/styles/css/Assets/WM-ModernTheme.scss b/src/styles/css/Assets/WM-ModernTheme.scss
index c235f4e..b7a97fd 100644
--- a/src/styles/css/Assets/WM-ModernTheme.scss
+++ b/src/styles/css/Assets/WM-ModernTheme.scss
@@ -3,392 +3,496 @@
 -------------------------------------------------------- */
 
 .En-Raleway {
-    font-family: 'Raleway', sans-serif;
+  font-family: 'Raleway', sans-serif;
 }
+
 .WM-SubText {
-    display: inline-block;
-    padding: 10px 25px 10px 25px;
-    color: #fff;
-    border-radius: 5px;
-    margin: 3px 0px 10px 0px;
+  display: inline-block;
+  padding: 10px 25px 10px 25px;
+  color: #fff;
+  border-radius: 5px;
+  margin: 3px 0px 10px 0px;
 }
+
 .WM-SubText.SmallPad {
-    padding: 5px 15px 5px 15px;
+  padding: 5px 15px 5px 15px;
 }
+
 .WM-SubText.XS {
-    padding: 3px 15px 1px 15px;
+  padding: 3px 15px 1px 15px;
 }
 
 .WM-LetterSpacing-5 {
-    letter-spacing: 5px;
+  letter-spacing: 5px;
 }
+
 .WM-LetterSpacing-10 {
-    letter-spacing: 10px;
+  letter-spacing: 10px;
 }
+
 .WM-LetterSpacing-15 {
-    letter-spacing: 15px;
+  letter-spacing: 15px;
 }
+
 .wow {
-    visibility: hidden;
+  visibility: hidden;
 }
+
 .RotateX {
-    transform: rotate(180deg);
-    webkit-transform: rotate(180deg);
+  transform: rotate(180deg);
+  webkit-transform: rotate(180deg);
 }
+
 .Material-Shoadow-SM {
-    box-shadow: 0 8px 10px rgba(0,0,0,0.30), 0 4px 3px rgba(0,0,0,0.22);
+  box-shadow: 0 8px 10px rgba(0, 0, 0, 0.30), 0 4px 3px rgba(0, 0, 0, 0.22);
 }
+
 .InlineBlock {
-    display: inline-block;
+  display: inline-block;
 }
+
 .CubeTransition {
-    transition-property: all;
-    transition-duration: .5s;
-    transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
+  transition-property: all;
+  transition-duration: .5s;
+  transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
 }
+
 .WhiteTheme .WM-SubText {
-    background-color: #fff !important;
-    color: #000;
+  background-color: #fff !important;
+  color: #000;
 }
+
 .WhiteTheme .Notification {
-    background-color: transparent !important;
+  background-color: transparent !important;
 }
+
 .WM-Height-90 {
-    height: 90px;
+  height: 90px;
 }
+
 .WM-Height-110 {
-    height: 110px;
+  height: 110px;
 }
+
 .WM-Height-130 {
-    height: 130px;
+  height: 130px;
 }
+
 .WM-Width-220 {
-    width: 220px;
+  width: 220px;
 }
+
 .WM-Width-Full {
-    width: 100%;
+  width: 100%;
 }
+
 .WM-Height-Full {
-    height: 100%;
+  height: 100%;
 }
+
 .WM-Absolute {
-    position: absolute;
+  position: absolute;
 }
+
 .WM-Relative {
-    position: relative;
+  position: relative;
 }
+
 .WM-Block {
-    display: block;
+  display: block;
 }
+
 .WM-InlineBlock {
-    display: inline-block;
+  display: inline-block;
 }
 
 [class^='WM-Hover'], [class*='WM-Hover'] {
-    transition: 0.2s;
+  transition: 0.2s;
 }
+
 /* --------------------------------------------------------
                         Align & Floats :: Begin
 -------------------------------------------------------- */
 .WM-Align-C {
-    text-align: center;
+  text-align: center;
 }
+
 .WM-Align-R {
-    text-align: right;
+  text-align: right;
 }
+
 .WM-Align-L {
-    text-align: left;
+  text-align: left;
 }
+
 .WM-Float-R {
-    float: right;
+  float: right;
 }
+
 .WM-Float-L {
-    float: left;
+  float: left;
 }
+
 /* --------------------------------------------------------
                         Direction :: Begin
 -------------------------------------------------------- */
 .WM-RTL {
-    direction: rtl;
+  direction: rtl;
 }
+
 /* --------------------------------------------------------
                         Fonts :: Begin
 -------------------------------------------------------- */
 .WM-Font-12 {
   font-size: 12px;
 }
+
 .WM-Font-14 {
   font-size: 14px;
 }
+
 .WM-Font-16 {
   font-size: 16px;
 }
+
 .WM-Font-18 {
   font-size: 18px;
 }
+
 .WM-Font-20 {
   font-size: 20px;
 }
+
 .WM-Font-22 {
   font-size: 22px;
 }
+
 .WM-Font-24 {
   font-size: 24px;
 }
+
 .WM-Font-30 {
   font-size: 30px;
 }
+
 .WM-Font-36 {
   font-size: 36px;
 }
+
 .WM-Font-48 {
   font-size: 48px;
 }
+
 .WM-Font-52 {
   font-size: 52px;
 }
 
 
-
 /* --------------------------------------------------------
                         Inputs :: Begin
 -------------------------------------------------------- */
 
 .WM-Input {
-    outline: none;
-    border: none;
+  outline: none;
+  border: none;
 }
 
 .WM-TextArea {
-    outline: none;
-    border: none;
+  outline: none;
+  border: none;
 }
 
 .WM-TextArea:focus, .WM-Input:focus {
-    border-color: transparent !important;
+  border-color: transparent !important;
 }
 
 .WM-Input:focus::-webkit-input-placeholder {
-    color:transparent;
+  color: transparent;
 }
 
-.WM-Input:focus::-webkit-input-placeholder { color:transparent; }
-.WM-Input:focus:-moz-placeholder { color:transparent; }
-.WM-Input:focus::-moz-placeholder { color:transparent; }
-.WM-Input:focus:-ms-input-placeholder { color:transparent; }
+.WM-Input:focus::-webkit-input-placeholder {
+  color: transparent;
+}
 
-.WM-TextArea:focus::-webkit-input-placeholder { color:transparent; }
-.WM-TextArea:focus:-moz-placeholder { color:transparent; }
-.WM-TextArea:focus::-moz-placeholder { color:transparent; }
-.WM-TextArea:focus:-ms-input-placeholder { color:transparent; }
+.WM-Input:focus:-moz-placeholder {
+  color: transparent;
+}
+
+.WM-Input:focus::-moz-placeholder {
+  color: transparent;
+}
+
+.WM-Input:focus:-ms-input-placeholder {
+  color: transparent;
+}
+
+.WM-TextArea:focus::-webkit-input-placeholder {
+  color: transparent;
+}
+
+.WM-TextArea:focus:-moz-placeholder {
+  color: transparent;
+}
+
+.WM-TextArea:focus::-moz-placeholder {
+  color: transparent;
+}
+
+.WM-TextArea:focus:-ms-input-placeholder {
+  color: transparent;
+}
 
 .WM-Input::-webkit-input-placeholder {
-    color: #555555;
+  color: #555555;
 }
+
 .WM-Input:-moz-placeholder {
-    color: #555555;
+  color: #555555;
 }
+
 .WM-Input::-moz-placeholder {
-    color: #555555;
+  color: #555555;
 }
+
 .WM-Input:-ms-input-placeholder {
-    color: #555555;
+  color: #555555;
 }
 
 .WM-TextArea::-webkit-input-placeholder {
-    color: #555555;
+  color: #555555;
 }
+
 .WM-TextArea:-moz-placeholder {
-    color: #555555;
+  color: #555555;
 }
+
 .WM-TextArea::-moz-placeholder {
-    color: #555555;
+  color: #555555;
 }
+
 .WM-TextArea:-ms-input-placeholder {
-    color: #555555;
+  color: #555555;
 }
 
 .WM-InputWrapper {
-    width: 100%;
-    position: relative;
-    border-bottom: 2px solid #d9d9d9;
-    padding-bottom: 0px;
-    margin-bottom: 35px;
+  width: 100%;
+  position: relative;
+  border-bottom: 2px solid #d9d9d9;
+  padding-bottom: 0px;
+  margin-bottom: 35px;
 }
 
 .WM-InputLabel {
-    font-size: 15px;
-    color: #999999;
-    line-height: 1.5;
-    padding-left: 5px;
+  font-size: 15px;
+  color: #999999;
+  line-height: 1.5;
+  padding-left: 5px;
 }
 
 .WM-Input100 {
-    display: block;
-    width: 100%;
-    background: transparent;
-    font-size: 18px;
-    color: #555555;
-    line-height: 1.2;
+  display: block;
+  width: 100%;
+  background: transparent;
+  font-size: 18px;
+  color: #555555;
+  line-height: 1.2;
 }
 
 .WM-Input100-Focus {
-    position: absolute;
-    display: block;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-    pointer-events: none;
+  position: absolute;
+  display: block;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  pointer-events: none;
 }
 
 .WM-Input100-Focus::before {
-    content: "";
-    display: block;
-    position: absolute;
-    bottom: -2px;
-    left: 0;
-    width: 0;
-    height: 2px;
-    -webkit-transition: all 0.4s;
-    -o-transition: all 0.4s;
-    -moz-transition: all 0.4s;
-    transition: all 0.4s;
-    background: #ff4b5a;
-}
-.WM-Input.WM-Red + .WM-Input100-Focus::before {
-    background: #ee3552;
-}
-.WM-Input.WM-Orange + .WM-Input100-Focus::before {
-    background: #FF6B57;
-}
-.WM-Input.WM-Purple + .WM-Input100-Focus::before {
-    background: #ac3773;
-}
-.WM-Input.WM-Cyan + .WM-Input100-Focus::before {
-    background: #32c5d2;
-}
-.WM-Input.WM-Green + .WM-Input100-Focus::before {
-    background: #0d7e00;
-}
-.WM-Input.WM-Blue + .WM-Input100-Focus::before {
-    background: #3498DB;
-}
-.WM-Input.WM-Black + .WM-Input100-Focus::before {
-    background: #000;
+  content: "";
+  display: block;
+  position: absolute;
+  bottom: -2px;
+  left: 0;
+  width: 0;
+  height: 2px;
+  -webkit-transition: all 0.4s;
+  -o-transition: all 0.4s;
+  -moz-transition: all 0.4s;
+  transition: all 0.4s;
+  background: #ff4b5a;
 }
 
+.WM-Input.WM-Red + .WM-Input100-Focus::before {
+  background: #ee3552;
+}
+
+.WM-Input.WM-Orange + .WM-Input100-Focus::before {
+  background: #FF6B57;
+}
+
+.WM-Input.WM-Purple + .WM-Input100-Focus::before {
+  background: #ac3773;
+}
+
+.WM-Input.WM-Cyan + .WM-Input100-Focus::before {
+  background: #32c5d2;
+}
+
+.WM-Input.WM-Green + .WM-Input100-Focus::before {
+  background: #0d7e00;
+}
+
+.WM-Input.WM-Blue + .WM-Input100-Focus::before {
+  background: #3498DB;
+}
+
+.WM-Input.WM-Black + .WM-Input100-Focus::before {
+  background: #000;
+}
 
 
 .WM-Input.WM-Input100 {
-    height: 40px;
+  height: 40px;
 }
+
 .WM-InputWrapper input:disabled {
-    cursor: not-allowed;
+  cursor: not-allowed;
 }
 
 .WM-TextArea.WM-Input100 {
-    min-height: 110px;
-    padding-top: 9px;
-    padding-bottom: 13px;
+  min-height: 110px;
+  padding-top: 9px;
+  padding-bottom: 13px;
 }
 
 
 .WM-Input100:focus + .WM-Input100-Focus::before {
-    width: 100%;
+  width: 100%;
 }
 
 
 .WM-Select {
-    background-color: transparent !important;
-    -webkit-appearance: none;
+  background-color: transparent !important;
+  -webkit-appearance: none;
 }
 
 /* --------------------------------------------------------
                         Margins :: Begin
 -------------------------------------------------------- */
 .WM-Margin-T-5 {
-    margin-top: 5px;
+  margin-top: 5px;
 }
+
 .WM-Margin-T-15 {
-    margin-top: 15px;
+  margin-top: 15px;
 }
+
 .WM-Margin-T-20 {
-    margin-top: 20px;
+  margin-top: 20px;
 }
+
 .WM-Margin-T-45 {
-    margin-top: 45px;
+  margin-top: 45px;
 }
+
 .WM-Margin-T-55 {
-    margin-top: 55px;
+  margin-top: 55px;
 }
+
 .WM-Margin-T-100 {
-    margin-top: 100px;
+  margin-top: 100px;
 }
+
 .WM-Margin-L-10 {
-    margin-left: 10px;
+  margin-left: 10px;
 }
+
 .WM-Margin-L-0 {
-    margin-left: 0 !important;
+  margin-left: 0 !important;
 }
+
 .WM-Margin-R-10 {
-    margin-right: 10px;
+  margin-right: 10px;
 }
+
 .WM-Margin-R-40 {
-    margin-right: 40px;
+  margin-right: 40px;
 }
+
 .WM-Margin-BT-20 {
-    margin-top: 20px;
-    margin-bottom: 20px;
+  margin-top: 20px;
+  margin-bottom: 20px;
 }
+
 .WM-Margin-BT-5 {
-    margin-top: 5px;
-    margin-bottom: 5px;
+  margin-top: 5px;
+  margin-bottom: 5px;
 }
+
+.WM-Margin-BT-0 {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
 .WM-Margin-B-10 {
-    margin-bottom: 10px;
+  margin-bottom: 10px;
 }
+
 .WM-Margin-B-30 {
-    margin-bottom: 30px;
+  margin-bottom: 30px;
 }
+
 .WM-Margin-RL-15 {
-    margin-left: 15px;
-    margin-right: 15px;
+  margin-left: 15px;
+  margin-right: 15px;
+}
+
+.WM-Margin-RL-0 {
+  margin-left: 0;
+  margin-right: 0;
 }
 
 /* --------------------------------------------------------
                         Paddings :: Begin
 -------------------------------------------------------- */
 .WM-Padding-10 {
-    padding: 10px;
+  padding: 10px;
 }
+
 .WM-Padding-5 {
-    padding: 5px;
+  padding: 5px;
 }
+
 .WM-Padding-T-10 {
-    padding-top: 10px;
+  padding-top: 10px;
 }
 
 /* --------------------------------------------------------
                         Borders :: Begin
 -------------------------------------------------------- */
 .WM-Border {
-    border: 1px solid;
+  border: 1px solid;
 }
+
 .WM-Border-2x {
-    border: 2px solid;
+  border: 2px solid;
 }
+
 .WM-Border-R {
-    border-right: 1px solid;
+  border-right: 1px solid;
 }
+
 .WM-Border-L {
-    border-left: 1px solid;
+  border-left: 1px solid;
 }
+
 .WM-Border-T {
-    border-top: 1px solid;
+  border-top: 1px solid;
 }
+
 .WM-Border-B {
-    border-bottom: 1px solid;
+  border-bottom: 1px solid;
 }
 
 
@@ -397,171 +501,177 @@
 -------------------------------------------------------- */
 
 .WM-Btn {
-    outline: none !important;
-    border: none;
-    background: transparent;
-    display: -webkit-box;
-    display: -webkit-flex;
-    display: -moz-box;
-    display: -ms-flexbox;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 0 20px;
-    min-width: 160px;
-    height: 50px;
-    border-radius: 25px;
-    font-size: 16px;
-    color: #fff;
-    /* line-height: 1.2; */
-    line-height: 0;
-    -webkit-transition: all 0.4s;
-    -o-transition: all 0.4s;
-    -moz-transition: all 0.4s;
-    transition: all 0.4s;
+  outline: none !important;
+  border: none;
+  background: transparent;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0 20px;
+  min-width: 160px;
+  height: 50px;
+  border-radius: 25px;
+  font-size: 16px;
+  color: #fff;
+  /* line-height: 1.2; */
+  line-height: 0;
+  -webkit-transition: all 0.4s;
+  -o-transition: all 0.4s;
+  -moz-transition: all 0.4s;
+  transition: all 0.4s;
 
 }
 
 .WM-Btn-Red {
-    background-color: #ee3552;
-    box-shadow: 0 10px 30px 0px rgba(255, 75, 90, 0.5);
-    -moz-box-shadow: 0 10px 30px 0px rgba(255, 75, 90, 0.5);
-    -webkit-box-shadow: 0 10px 30px 0px rgba(255, 75, 90, 0.5);
-    -o-box-shadow: 0 10px 30px 0px rgba(255, 75, 90, 0.5);
-    -ms-box-shadow: 0 10px 30px 0px rgba(255, 75, 90, 0.5);
+  background-color: #ee3552;
+  box-shadow: 0 10px 30px 0px rgba(255, 75, 90, 0.5);
+  -moz-box-shadow: 0 10px 30px 0px rgba(255, 75, 90, 0.5);
+  -webkit-box-shadow: 0 10px 30px 0px rgba(255, 75, 90, 0.5);
+  -o-box-shadow: 0 10px 30px 0px rgba(255, 75, 90, 0.5);
+  -ms-box-shadow: 0 10px 30px 0px rgba(255, 75, 90, 0.5);
 }
 
 .WM-Btn-Orange {
-    background-color: #FF6B57;
-    box-shadow: 0 10px 30px 0px rgba(255, 107, 87, 0.5);
-    -moz-box-shadow: 0 10px 30px 0px rgba(255, 107, 87, 0.5);
-    -webkit-box-shadow: 0 10px 30px 0px rgba(255, 107, 87, 0.5);
-    -o-box-shadow: 0 10px 30px 0px rgba(255, 107, 87, 0.5);
-    -ms-box-shadow: 0 10px 30px 0px rgba(255, 107, 87, 0.5);
+  background-color: #FF6B57;
+  box-shadow: 0 10px 30px 0px rgba(255, 107, 87, 0.5);
+  -moz-box-shadow: 0 10px 30px 0px rgba(255, 107, 87, 0.5);
+  -webkit-box-shadow: 0 10px 30px 0px rgba(255, 107, 87, 0.5);
+  -o-box-shadow: 0 10px 30px 0px rgba(255, 107, 87, 0.5);
+  -ms-box-shadow: 0 10px 30px 0px rgba(255, 107, 87, 0.5);
 }
 
 
 .WM-Btn-Cyan {
-    background-color: #32c5d2;
-    box-shadow: 0 10px 30px 0px rgba(250, 197, 210, 0.5);
-    -moz-box-shadow: 0 10px 30px 0px rgba(50, 197, 210, 0.5);
-    -webkit-box-shadow: 0 10px 30px 0px rgba(50, 197, 210, 0.5);
-    -o-box-shadow: 0 10px 30px 0px rgba(50, 197, 210, 0.5);
-    -ms-box-shadow: 0 10px 30px 0px rgba(50, 197, 210, 0.5);
+  background-color: #32c5d2;
+  box-shadow: 0 10px 30px 0px rgba(250, 197, 210, 0.5);
+  -moz-box-shadow: 0 10px 30px 0px rgba(50, 197, 210, 0.5);
+  -webkit-box-shadow: 0 10px 30px 0px rgba(50, 197, 210, 0.5);
+  -o-box-shadow: 0 10px 30px 0px rgba(50, 197, 210, 0.5);
+  -ms-box-shadow: 0 10px 30px 0px rgba(50, 197, 210, 0.5);
 }
 
 .WM-Btn-Yellow {
-    background-color: #ffd63a;
-    color: #000;
-    box-shadow: 0 10px 30px 0px rgba(234, 223, 131, 0.5);
-    -moz-box-shadow: 0 10px 30px 0px rgba(234, 223, 131, 0.5);
-    -webkit-box-shadow: 0 10px 30px 0px rgba(234, 223, 131, 0.5);
-    -o-box-shadow: 0 10px 30px 0px rgba(234, 223, 131, 0.5);
-    -ms-box-shadow: 0 10px 30px 0px rgba(234, 223, 131, 0.5);
+  background-color: #ffd63a;
+  color: #000;
+  box-shadow: 0 10px 30px 0px rgba(234, 223, 131, 0.5);
+  -moz-box-shadow: 0 10px 30px 0px rgba(234, 223, 131, 0.5);
+  -webkit-box-shadow: 0 10px 30px 0px rgba(234, 223, 131, 0.5);
+  -o-box-shadow: 0 10px 30px 0px rgba(234, 223, 131, 0.5);
+  -ms-box-shadow: 0 10px 30px 0px rgba(234, 223, 131, 0.5);
 }
 
 .WM-Btn-Purple {
-    background-color: #ac3773;
-    color: #fff;
-    box-shadow: 0 10px 30px 0px rgba(172, 55, 115, 0.5);
-    -moz-box-shadow: 0 10px 30px 0px rgba(172, 55, 115, 0.5);
-    -webkit-box-shadow: 0 10px 30px 0px rgba(172, 55, 115, 0.5);
-    -o-box-shadow: 0 10px 30px 0px rgba(172, 55, 115, 0.5);
-    -ms-box-shadow: 0 10px 30px 0px rgba(172, 55, 115, 0.5);
+  background-color: #ac3773;
+  color: #fff;
+  box-shadow: 0 10px 30px 0px rgba(172, 55, 115, 0.5);
+  -moz-box-shadow: 0 10px 30px 0px rgba(172, 55, 115, 0.5);
+  -webkit-box-shadow: 0 10px 30px 0px rgba(172, 55, 115, 0.5);
+  -o-box-shadow: 0 10px 30px 0px rgba(172, 55, 115, 0.5);
+  -ms-box-shadow: 0 10px 30px 0px rgba(172, 55, 115, 0.5);
 }
 
 
 .WM-Btn-Black {
-    background-color: #000;
-    box-shadow: 0 10px 30px 0px rgba(0, 0, 0, 0.5);
-    -moz-box-shadow: 0 10px 30px 0px rgba(0, 0, 0, 0.5);
-    -webkit-box-shadow: 0 10px 30px 0px rgba(0, 0, 0, 0.5);
-    -o-box-shadow: 0 10px 30px 0px rgba(0, 0, 0, 0.5);
-    -ms-box-shadow: 0 10px 30px 0px rgba(0, 0, 0, 0.5);
+  background-color: #000;
+  box-shadow: 0 10px 30px 0px rgba(0, 0, 0, 0.5);
+  -moz-box-shadow: 0 10px 30px 0px rgba(0, 0, 0, 0.5);
+  -webkit-box-shadow: 0 10px 30px 0px rgba(0, 0, 0, 0.5);
+  -o-box-shadow: 0 10px 30px 0px rgba(0, 0, 0, 0.5);
+  -ms-box-shadow: 0 10px 30px 0px rgba(0, 0, 0, 0.5);
 }
 
 .WM-Btn-White {
-    background-color: #fff;
-    color: #000;
-    box-shadow: 0 10px 30px 0px rgba(255, 255, 255, 0.2);
-    -moz-box-shadow: 0 10px 30px 0px rgba(255, 255, 255, 0.2);
-    -webkit-box-shadow: 0 10px 30px 0px rgba(255, 255, 255, 0.2);
-    -o-box-shadow: 0 10px 30px 0px rgba(255, 255, 255, 0.2);
-    -ms-box-shadow: 0 10px 30px 0px rgba(255, 255, 255, 0.2);
+  background-color: #fff;
+  color: #000;
+  box-shadow: 0 10px 30px 0px rgba(255, 255, 255, 0.2);
+  -moz-box-shadow: 0 10px 30px 0px rgba(255, 255, 255, 0.2);
+  -webkit-box-shadow: 0 10px 30px 0px rgba(255, 255, 255, 0.2);
+  -o-box-shadow: 0 10px 30px 0px rgba(255, 255, 255, 0.2);
+  -ms-box-shadow: 0 10px 30px 0px rgba(255, 255, 255, 0.2);
 }
 
 .WM-Btn-Green {
-    background-color: #0d7e00;
-    box-shadow: 0 10px 30px 0px rgba(13, 126, 0, 0.5);
-    -moz-box-shadow: 0 10px 30px 0px rgba(13, 126, 0, 0.5);
-    -webkit-box-shadow: 0 10px 30px 0px rgba(13, 126, 0, 0.5);
-    -o-box-shadow: 0 10px 30px 0px rgba(13, 126, 0, 0.5);
-    -ms-box-shadow: 0 10px 30px 0px rgba(13, 126, 0, 0.5);
+  background-color: #0d7e00;
+  box-shadow: 0 10px 30px 0px rgba(13, 126, 0, 0.5);
+  -moz-box-shadow: 0 10px 30px 0px rgba(13, 126, 0, 0.5);
+  -webkit-box-shadow: 0 10px 30px 0px rgba(13, 126, 0, 0.5);
+  -o-box-shadow: 0 10px 30px 0px rgba(13, 126, 0, 0.5);
+  -ms-box-shadow: 0 10px 30px 0px rgba(13, 126, 0, 0.5);
 }
 
 .WM-Btn-Blue {
-    background-color: #3498DB;
-    box-shadow: 0 10px 30px 0px rgba(52, 152, 219, 0.5);
-    -moz-box-shadow: 0 10px 30px 0px rgba(52, 152, 219, 0.5);
-    -webkit-box-shadow: 0 10px 30px 0px rgba(52, 152, 219, 0.5);
-    -o-box-shadow: 0 10px 30px 0px rgba(52, 152, 219, 0.5);
-    -ms-box-shadow: 0 10px 30px 0px rgba(52, 152, 219, 0.5);
+  background-color: #3498DB;
+  box-shadow: 0 10px 30px 0px rgba(52, 152, 219, 0.5);
+  -moz-box-shadow: 0 10px 30px 0px rgba(52, 152, 219, 0.5);
+  -webkit-box-shadow: 0 10px 30px 0px rgba(52, 152, 219, 0.5);
+  -o-box-shadow: 0 10px 30px 0px rgba(52, 152, 219, 0.5);
+  -ms-box-shadow: 0 10px 30px 0px rgba(52, 152, 219, 0.5);
 }
+
 .WM-Btn-Gray {
-    background-color: #797979;
-    box-shadow: 0 10px 30px 0px rgba(82, 104, 119, 0.5);
-    -moz-box-shadow: 0 10px 30px 0px rgba(82, 104, 119, 0.5);
-    -webkit-box-shadow: 0 10px 30px 0px rgba(82, 104, 119, 0.5);
-    -o-box-shadow: 0 10px 30px 0px rgba(82, 104, 119, 0.5);
-    -ms-box-shadow: 0 10px 30px 0px rgba(82, 104, 119, 0.5);
+  background-color: #797979;
+  box-shadow: 0 10px 30px 0px rgba(82, 104, 119, 0.5);
+  -moz-box-shadow: 0 10px 30px 0px rgba(82, 104, 119, 0.5);
+  -webkit-box-shadow: 0 10px 30px 0px rgba(82, 104, 119, 0.5);
+  -o-box-shadow: 0 10px 30px 0px rgba(82, 104, 119, 0.5);
+  -ms-box-shadow: 0 10px 30px 0px rgba(82, 104, 119, 0.5);
 }
 
 
 .WM-Btn i {
-    margin-left: 5px;
-    -webkit-transition: all 0.4s;
-    -o-transition: all 0.4s;
-    -moz-transition: all 0.4s;
-    transition: all 0.4s;
+  margin-left: 5px;
+  -webkit-transition: all 0.4s;
+  -o-transition: all 0.4s;
+  -moz-transition: all 0.4s;
+  transition: all 0.4s;
 }
 
 .WM-Btn:hover {
-    background-color: #333333;
-    cursor: pointer;
-    color: #fff;
-    box-shadow: 0 10px 30px 0px rgba(51, 51, 51, 0.5);
-    -moz-box-shadow: 0 10px 30px 0px rgba(51, 51, 51, 0.5);
-    -webkit-box-shadow: 0 10px 30px 0px rgba(51, 51, 51, 0.5);
-    -o-box-shadow: 0 10px 30px 0px rgba(51, 51, 51, 0.5);
-    -ms-box-shadow: 0 10px 30px 0px rgba(51, 51, 51, 0.5);
+  background-color: #333333;
+  cursor: pointer;
+  color: #fff;
+  box-shadow: 0 10px 30px 0px rgba(51, 51, 51, 0.5);
+  -moz-box-shadow: 0 10px 30px 0px rgba(51, 51, 51, 0.5);
+  -webkit-box-shadow: 0 10px 30px 0px rgba(51, 51, 51, 0.5);
+  -o-box-shadow: 0 10px 30px 0px rgba(51, 51, 51, 0.5);
+  -ms-box-shadow: 0 10px 30px 0px rgba(51, 51, 51, 0.5);
 }
+
 .WM-Btn-RedHover:hover {
-    background-color: #ee3552;
-    cursor: pointer;
-    color: #fff;
-    box-shadow: 0 10px 30px 0px rgba(255, 75, 90, 0.5);
-    -moz-box-shadow: 0 10px 30px 0px rgba(255, 75, 90, 0.5);
-    -webkit-box-shadow: 0 10px 30px 0px rgba(255, 75, 90, 0.5);
-    -o-box-shadow: 0 10px 30px 0px rgba(255, 75, 90, 0.5);
-    -ms-box-shadow: 0 10px 30px 0px rgba(255, 75, 90, 0.5);
+  background-color: #ee3552;
+  cursor: pointer;
+  color: #fff;
+  box-shadow: 0 10px 30px 0px rgba(255, 75, 90, 0.5);
+  -moz-box-shadow: 0 10px 30px 0px rgba(255, 75, 90, 0.5);
+  -webkit-box-shadow: 0 10px 30px 0px rgba(255, 75, 90, 0.5);
+  -o-box-shadow: 0 10px 30px 0px rgba(255, 75, 90, 0.5);
+  -ms-box-shadow: 0 10px 30px 0px rgba(255, 75, 90, 0.5);
 }
 
 .WM-Btn-SM {
-    min-width: 50px;
-    padding: 0 10px;
+  min-width: 50px;
+  padding: 0 10px;
 }
+
 .WM-Btn-SM i {
-    margin-left: 0px;
+  margin-left: 0px;
 }
+
 .WM-Btn-XS {
-    min-width: 40px;
-    padding: 0 10px;
-    line-height: 1 !important;
-    height: 40px !important;
+  min-width: 40px;
+  padding: 0 10px;
+  line-height: 1 !important;
+  height: 40px !important;
 }
+
 .WM-Btn-XS i {
-    margin-left: 0px;
+  margin-left: 0px;
 }
+
 /* .WM-Btn:hover i {
     -webkit-transform: translateX(10px);
     -moz-transform: translateX(10px);
@@ -571,110 +681,119 @@
 } */
 
 
-
 /* --------------------------------------------------------
                         Headers :: Begin
 -------------------------------------------------------- */
 
-  .WM-SH-Container {
-      width: 100%;
-      position: relative;
-      text-align: right;
-  }
-  .WM-SH-TextFa {
-      margin-bottom: 15px;
-      font-size: 25px;
-      color: #000;
-  }
-  .WM-SH-Line {
-      width: 100%;
-      height: 1px;
-      background-color: #000;
-      overflow: hidden;
-  }
-  .WM-SH-TextEn-Container {
-      top: -12px;
-      position: relative;
-      display: inline-block;
-      z-index: 14;
-      overflow: visible;
-      padding: 0 0px;
-      background-color: #fff;
-  }
-  .WM-SH-TextEn {
-      background-color: #000;
-      padding: 5px 20px 5px 20px;
-      color: #fff;
-      z-index: 9;
-      overflow: visible;
-      font-size: 14px;
-      margin: 0px 0px 0px 20px;
-      border-radius: 3px;
-  }
-  .WM-SH-Description {
-      margin-top: -7px;
-      font-size: 14px;
-  }
+.WM-SH-Container {
+  width: 100%;
+  position: relative;
+  text-align: right;
+}
 
+.WM-SH-TextFa {
+  margin-bottom: 15px;
+  font-size: 25px;
+  color: #000;
+}
+
+.WM-SH-Line {
+  width: 100%;
+  height: 1px;
+  background-color: #000;
+  overflow: hidden;
+}
+
+.WM-SH-TextEn-Container {
+  top: -12px;
+  position: relative;
+  display: inline-block;
+  z-index: 14;
+  overflow: visible;
+  padding: 0 0px;
+  background-color: #fff;
+}
+
+.WM-SH-TextEn {
+  background-color: #000;
+  padding: 5px 20px 5px 20px;
+  color: #fff;
+  z-index: 9;
+  overflow: visible;
+  font-size: 14px;
+  margin: 0px 0px 0px 20px;
+  border-radius: 3px;
+}
+
+.WM-SH-Description {
+  margin-top: -7px;
+  font-size: 14px;
+}
 
 
 /* --------------------------------------------------------
                         Links :: Begin
 -------------------------------------------------------- */
 .WM-Link {
-    display: inline-block;
-    color: #000;
-    direction: rtl;
-    text-decoration: none;
+  display: inline-block;
+  color: #000;
+  direction: rtl;
+  text-decoration: none;
 }
+
 .WM-Link::after {
-    content: '';
-    display: block;
-    width: 0;
-    height: 2px;
-    background: #000;
-    transition: width .3s;
-    margin-top: 2px;
+  content: '';
+  display: block;
+  width: 0;
+  height: 2px;
+  background: #000;
+  transition: width .3s;
+  margin-top: 2px;
 }
+
 .WM-Link:hover::after, .WM-Link.WM-Selected::after {
-    width: 100%;
+  width: 100%;
 }
 
 .WM-Link-Red:hover, .WM-Link-Red.WM-Selected {
-    color: #ee3552 !important;
+  color: #ee3552 !important;
 }
+
 .WM-Link-Red::after {
-    background: #ee3552;
+  background: #ee3552;
 }
 
 .WM-Link-Green:hover, .WM-Link-Green.WM-Selected {
-    color: #32c5d2 !important;
+  color: #32c5d2 !important;
 }
+
 .WM-Link-Green::after {
-    background: #32c5d2;
+  background: #32c5d2;
 }
 
 .WM-Link-Dark:hover, .WM-Link-Dark.WM-Selected {
-    color: #000 !important;
+  color: #000 !important;
 }
+
 .WM-Link-Dark::after {
-    background: #000;
+  background: #000;
 }
 
 .WM-Link-Purple:hover, .WM-Link-Purple.WM-Selected {
-    color: #ac3773 !important;
+  color: #ac3773 !important;
 }
+
 .WM-Link-Purple::after {
-    background: #ac3773;
+  background: #ac3773;
 }
 
 .WM-Link-Orange:hover, .WM-Link-Orange.WM-Selected {
-    color: #FF6B57 !important;
-}
-.WM-Link-Orange::after {
-    background: #FF6B57;
+  color: #FF6B57 !important;
 }
 
+.WM-Link-Orange::after {
+  background: #FF6B57;
+}
 
 
 /* --------------------------------------------------------
@@ -840,7 +959,7 @@
 .WM-BG-White, .WM-Link-White::after, .WM-Input.WM-White + .WM-Input100-Focus::before {
   //background-color: #fff;
   color: #000;
-    background: linear-gradient(90deg, #fff 20.5625%, #fff 20.5625%, #fff 80.5625%);
+  background: linear-gradient(90deg, #fff 20.5625%, #fff 20.5625%, #fff 80.5625%);
 }
 
 .WM-Color-White, .WM-Link-White:hover, .WM-Link-White.WM-Selected, .WM-Link-White.WM-Active {
@@ -854,7 +973,7 @@
 /* ---------------------------AutoMatic Generate--------------------------- */
 
 .WM-BG-LightGray, .WM-BG-Gold {
-    color: #000 !important;
+  color: #000 !important;
 }
 
 
@@ -862,37 +981,54 @@
                         Hover :: Grayscale
 -------------------------------------------------------- */
 .WM-CategoryItem {
-    display:block;
-    overflow:hidden;
-    position:relative;
-}
-.WM-Hover-Grayscale {
-    cursor: pointer;
-    -webkit-transition: all 1s ease !important;
-    -moz-transition: all 1s ease !important;
-    -o-transition: all 1s ease !important;
-    -ms-transition: all 1s ease !important;
-    transition: all 1s ease !important;
-}
-.WM-Hover-Grayscale:hover {
-    -webkit-filter: grayscale(100%) !important;
+  display: block;
+  overflow: hidden;
+  position: relative;
 }
 
-.WM-Width-120{
-    width:120px;
+.WM-Hover-Grayscale {
+  cursor: pointer;
+  -webkit-transition: all 1s ease !important;
+  -moz-transition: all 1s ease !important;
+  -o-transition: all 1s ease !important;
+  -ms-transition: all 1s ease !important;
+  transition: all 1s ease !important;
 }
-.WM-Width-150{
-    width:150px;
+
+.WM-Hover-Grayscale:hover {
+  -webkit-filter: grayscale(100%) !important;
 }
-.WM-Width-300{
-    width:300px;
+
+.WM-Width-120 {
+  width: 120px;
 }
-.WM-Width-350{
-    width:350px;
+
+.WM-Width-150 {
+  width: 150px;
 }
-.WM-Width-500{
-    width:500px;
+
+.WM-Width-300 {
+  width: 300px;
 }
-.WM-Width-400{
-    width:400px;
+
+.WM-Width-350 {
+  width: 350px;
 }
+
+.WM-Width-500 {
+  width: 500px;
+}
+
+.WM-Width-400 {
+  width: 400px;
+}
+
+.WM-Tooltip-Btn {
+  min-width: 40px;
+  padding: 0;
+  line-height: 40px;
+  height: 40px;
+  text-align: center;
+  justify-content: center;
+  align-items: center;
+}
\ No newline at end of file
diff --git a/src/views/Cycle/List.vue b/src/views/Cycle/List.vue
index 9f9ec73..33f639a 100644
--- a/src/views/Cycle/List.vue
+++ b/src/views/Cycle/List.vue
@@ -2,32 +2,32 @@
     <div class>
         <v-container fluid>
             <material-card class color="black" title="All Cycles" text>
-                <v-layout align-center wrap class="px-3 my-3">
-                    <v-flex xs12 sm6 md6 lg3 xl2 class="WM-FlexCenter">
+                <v-layout align-center wrap class="px-3">
+                    <v-flex xs12 sm4 lg2 xl1 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"
+                        <v-text-field class="pt-3 pr-3" v-model="filter.cycle_id" label="Cycle ID"
                                       color="black"/>
                     </v-flex>
-                    <v-flex xs12 sm6 md6 lg3 xl2 class="WM-FlexCenter pl-3">
+                    <v-flex xs12 sm4 lg2 xl1 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.sterilizer_id" label="Sterilizer ID"
+                        <v-text-field class="pt-3 pr-3" v-model="filter.sterilizer_id" label="Sterilizer ID"
                                       color="black"/>
                     </v-flex>
-                    <v-flex xs12 sm6 md6 lg3 xl2 class="WM-FlexCenter pl-3">
+                    <v-flex xs12 sm4 lg2 xl1 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.cycle_number" label="Cycle Number"
+                        <v-text-field class="pt-3 pr-3" v-model="filter.cycle_number" label="Cycle Number"
                                       color="black"/>
                     </v-flex>
-                    <v-flex xs12 sm6 md6 lg3 xl2 class="WM-FlexCenter pl-3" v-if="$hasRole('Admin')">
+                    <v-flex xs12 sm6 lg3 xl2 class="WM-FlexCenter" 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"
+                        <v-autocomplete class="pt-3 pr-3" v-model="filter.medical_center_id" item-text="name"
                                         item-value="id" label="Hospital" color="black" :items="medicalCenters"
                                         :clearable="true"/>
                     </v-flex>
-                    <v-flex xs12 sm6 md6 lg3 xl2 class="WM-FlexCenter pl-3">
+                    <v-flex xs12 sm6 lg3 xl2 class="WM-FlexCenter">
                         <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-menu class="pt-3 pr-3" lazy :close-on-content-click="true" transition="v-scale-transition"
+                                offset-y v-model="Menu" style="width: 100%;">
                             <v-text-field style="padding-top:0 !important" required slot="activator" label="Date"
                                           color="black" class="" v-model="filter.date">
                             </v-text-field>
@@ -36,17 +36,25 @@
                         </v-menu>
                     </v-flex>
                     <v-spacer/>
-                    <v-flex class xs12 sm6 md6 lg2 xl1>
-                        <v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 30px" @click="load()">
-                            <v-icon class="white--text mr-2 caption">fas fa-search</v-icon>
-                            <span class="white--text">Filter</span>
+                    <v-flex xs12 sm12 md12 lg12 xl3 class="WM-Align-R">
+                        <v-tooltip bottom open-on-hover>
+                            <template v-slot:activator="{ on, attrs }">
+                                <v-btn v-bind="attrs" v-on="on" color="WM-Tooltip-Btn WM-Outline-Btn WM-Border WM-Margin-BT-0 WM-Border-Black mr-2" @click="load()">
+                                    <v-icon class="black--text caption">fas fa-search</v-icon>
+                                </v-btn>
+                            </template>
+                            <span>Filter</span>
+                        </v-tooltip>
+
+                        <v-btn class="WM-Outline-Btn WM-Border mr-2 WM-Margin-BT-0 WM-Border-Black" style="padding: 10px 30px;">
+                            <v-icon class="black--text mr-2 caption">fas fa-share-square</v-icon>
+                            <span class="black--text">EXPORT</span>
                         </v-btn>
-                    </v-flex>
-                    <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>
-                                <span class="black--text">Add</span>
+                            <v-btn class="WM-CyanBlueGradient-BG WM-Margin-BT-0" style="padding:10px 30px">
+                                <v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>
+                                <span class="white--text">Add</span>
                             </v-btn>
                         </router-link>
                     </v-flex>
@@ -77,20 +85,32 @@
                                 <td class="text-xs-right FlexBtn Height-MD-60 justify-self-end">
                                     <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"
+                                            <v-btn v-bind="attrs" v-on="on" color="light-gray" class="mr-2"
                                                    @click="show(item.id)">
-                                                <v-icon class="white--text mr-1 caption">fas fa-eye</v-icon>
+                                                <v-icon class="black--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 }">
+                                            <v-btn v-bind="attrs" v-on="on" color="light-gray" class="mr-2"
+                                                   @click="generateBarcode(item.id, 'Cycle')">
+                                                <v-icon class="black--text mr-1 caption">fas fa-barcode</v-icon>
+                                                <span>Generate Barcode</span>
+                                            </v-btn>
+                                        </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: 'EditCycle', params: { cycle: item.id } }">
-                                                <v-btn v-bind="attrs" v-on="on" color="orange" class="mr-2">
+                                                <v-btn v-bind="attrs" v-on="on" color="black" class="mr-2">
                                                     <v-icon class="white--text mr-1 caption">fas fa-pen</v-icon>
                                                     <span>Edit</span>
                                                 </v-btn>
@@ -98,9 +118,10 @@
                                         </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"
+                                            <v-btn v-bind="attrs" v-on="on" color="red" class="WM-ActionButton mr-2"
                                                    @click="removeModal(item.id)"
                                                    v-if="$hasRole('Admin') || item.user_id == $store.state.user.id">
                                                 <v-icon class="white--text mr-2 caption">fas fa-trash</v-icon>
@@ -109,16 +130,6 @@
                                         </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>
@@ -163,7 +174,7 @@ export default {
             {sortable: false, text: "Label IDs", value: "Label IDs"},
             {sortable: false, text: "Cycle Number", value: "Cycle Number"},
             {sortable: false, text: "Date", value: "date"},
-            {sortable: false, text: "Action", value: "action", align: "center",width:'10%'}
+            {sortable: false, text: "Action", value: "action", align: "center", width: '10%'}
         ],
         filter: {},
         Menu: false,
diff --git a/src/views/Item/List.vue b/src/views/Item/List.vue
index 9c4f921..bdb9210 100644
--- a/src/views/Item/List.vue
+++ b/src/views/Item/List.vue
@@ -2,43 +2,53 @@
     <div class>
         <v-container fluid>
             <material-card class color="black" title="All Items" text>
-                <v-layout align-center wrap class="my-3 px-3">
-                    <v-flex xs12 sm4 md4 lg2 xl2 class="WM-FlexCenter">
+                <v-layout align-center wrap class="px-3">
+                    <v-flex xs12 sm4 md4 lg2 xl1 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.item_id" label="Item ID"
+                        <v-text-field class="pt-3 pr-3" v-model="filter.item_id" label="Item ID"
                                       color="black"/>
                     </v-flex>
                     <v-flex xs12 sm4 md4 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.name" label="Name" color="black"/>
+                        <v-text-field class="pt-3 pr-3" v-model="filter.name" label="Name" color="black"/>
                     </v-flex>
                     <v-flex xs12 sm4 md4 lg3 xl2 class="WM-FlexCenter" 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"
+                        <v-autocomplete class="pt-3 pr-3" v-model="filter.medical_center_id" item-text="name"
                                         item-value="id" label="Hospital" color="black" :items="medicalCenters"
                                         :clearable="true"/>
                     </v-flex>
-                    <v-flex xs12 sm4 md4 lg2 xl2 class="WM-FlexCenter">
+                    <v-flex xs12 sm3 md3 lg2 xl1 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.size" label="Size" color="black"/>
+                        <v-text-field class="pt-3 pr-3" v-model="filter.size" label="Size" color="black"/>
                     </v-flex>
-                    <v-flex xs12 sm4 md3 lg2 xl2 class="WM-FlexCenter">
+                    <v-flex xs12 sm3 md3 lg2 xl1 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.udi" label="UDI" color="black"/>
+                        <v-text-field class="pt-3 pr-3" v-model="filter.udi" label="UDI" color="black"/>
                     </v-flex>
                     <!--btn-->
                     <v-spacer/>
-                    <v-flex class xs12 sm6 md6 lg2 xl1>
-                        <v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 30px" @click="load()">
-                            <v-icon class="white--text mr-2 caption">fas fa-search</v-icon>
-                            <span class="white--text">Filter</span>
+                    <v-flex xs12 sm6 md6 lg12 xl3 class="WM-Align-R">
+                        <v-tooltip bottom open-on-hover>
+                            <template v-slot:activator="{ on, attrs }">
+                                <v-btn v-bind="attrs" v-on="on"
+                                       color="WM-Tooltip-Btn WM-Outline-Btn WM-Border WM-Margin-BT-0 WM-Border-Black mr-2"
+                                       @click="load()">
+                                    <v-icon class="black--text caption">fas fa-search</v-icon>
+                                </v-btn>
+                            </template>
+                            <span>Filter</span>
+                        </v-tooltip>
+
+                        <v-btn class="WM-Outline-Btn WM-Border mr-2 WM-Margin-BT-0 WM-Border-Black" style="padding: 10px 30px;">
+                            <v-icon class="black--text mr-2 caption">fas fa-share-square</v-icon>
+                            <span class="black--text">EXPORT</span>
                         </v-btn>
-                    </v-flex>
-                    <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">Add</span>
+                            <v-btn class="WM-CyanBlueGradient-BG WM-Margin-BT-0" style="padding:10px 30px">
+                                <v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>
+                                <span class="white--text">Add</span>
                             </v-btn>
                         </router-link>
                     </v-flex>
@@ -74,7 +84,7 @@
                                                 <v-btn :color="status.color" class="mr-2"
                                                        @click="changeStatus(item, status.status)" v-bind="attrs"
                                                        v-on="on">
-                                                    <v-icon class="white--text mr-1 caption">
+                                                    <v-icon :class="`${status.font_color}--text mr-1 caption`">
                                                         fas {{ status.icon }}
                                                     </v-icon>
                                                     <span>{{ status.label }}</span>
@@ -85,20 +95,30 @@
                                     </template>
                                     <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"
+                                            <v-btn v-bind="attrs" v-on="on" color="light-gray" class="mr-2"
                                                    @click="show(item.id)">
-                                                <v-icon class="white--text mr-1 caption">fas fa-eye</v-icon>
+                                                <v-icon class="black--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 }">
+                                            <v-btn class="mr-2" v-bind="attrs" v-on="on" color="light-gray"
+                                                   @click="generateBarcode(item, 'Item')">
+                                                <v-icon class="black--text mr-2 caption">fas fa-barcode</v-icon>
+                                                <span class="CSSD-font">Generate Barcode</span>
+                                            </v-btn>
+                                        </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|Supervisor') ||( item.user_id == $store.state.user.id && !['approved', 'rejected'].includes(item.status))"
                                                          :to="{ name: 'EditItem', params: { Item: item.id } }">
-                                                <v-btn v-bind="attrs" v-on="on" color="orange" class="mr-2">
+                                                <v-btn v-bind="attrs" v-on="on" color="black" class="mr-2">
                                                     <v-icon class="white--text mr-1 caption">fas fa-pen</v-icon>
                                                     <span>Edit</span>
                                                 </v-btn>
@@ -108,7 +128,7 @@
                                     </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"
+                                            <v-btn v-bind="attrs" v-on="on" color="red" class="WM-ActionButton mr-2"
                                                    @click="removeModal(item.id)"
                                                    v-if="$hasRole('Admin|Supervisor') ||( item.user_id == $store.state.user.id && !['approved', 'rejected'].includes(item.status))">
                                                 <v-icon class="white--text mr-2 caption">fas fa-trash</v-icon>
@@ -117,16 +137,6 @@
                                         </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, 'Item')">
-                                                <v-icon class="white--text mr-2 caption">fas fa-barcode</v-icon>
-                                                <span class="CSSD-font">Generate Barcode</span>
-                                            </v-btn>
-                                        </template>
-                                        <span>Generate Barcode</span>
-                                    </v-tooltip>
                                 </td>
                             </template>
                         </v-data-table>
@@ -209,12 +219,17 @@ export default {
             this.loadMedicalCenters();
         },
         async generateBarcode(item, type = null) {
-            const result = await ApiService.post(urls.Barcode(item.id, type));
-            if (result && result.status == 200) {
-                this.changeCurrentModal({
-                    modal: "modal-barcode-barcode",
-                    properties: {result, item},
-                });
+            let code = item.udi;
+            if (code) {
+                const result = await ApiService.post(urls.Barcode(item.id, type));
+                if (result && result.status == 200) {
+                    this.changeCurrentModal({
+                        modal: "modal-barcode-barcode",
+                        properties: {result, item},
+                    });
+                }
+            } else {
+                toast.error('An error occurred while generating the barcode . please first set UDI');
             }
         },
         async show(id) {
@@ -252,8 +267,8 @@ export default {
         getStatus(item) {
             if (item.status === 'pending') {
                 return [
-                    {status: 'rejected', label: 'reject', color: 'red', icon: 'fa-close'},
-                    {status: 'approved', label: 'approve', color: 'green', icon: 'fa-check'}
+                    {status: 'approved', label: 'approve', color: 'cyan', font_color : 'white', icon: 'fa-check'},
+                    {status: 'rejected', label: 'reject', color: 'light-gray',font_color : 'black',  icon: 'fa-close'},
                 ]
             } else {
                 const nextStatus = item.status === 'rejected' ? 'approved' : 'rejected'
@@ -261,7 +276,8 @@ export default {
                     {
                         status: nextStatus,
                         label: nextStatus === 'approved' ? 'approve' : 'reject',
-                        color: nextStatus === 'approved' ? 'green' : 'red',
+                        color: nextStatus === 'approved' ? 'cyan' : 'light-gray',
+                        font_color: nextStatus === 'approved' ? 'white' : 'black',
                         icon: nextStatus === 'approved' ? 'fa-check' : 'fa-close'
                     }
                 ]
@@ -284,17 +300,3 @@ export default {
     }
 };
 </script>
-<style>
-.v-btn--floating {
-    padding: 0 !important;
-}
-
-.theme--light.v-btn.v-btn--flat {
-    color: rgba(0, 0, 0, .87) !important;
-}
-
-.v-btn--floating,
-.v-btn--icon:before {
-    border-radius: 50% !important;
-}
-</style>
diff --git a/src/views/Label/List.vue b/src/views/Label/List.vue
index f645327..061718a 100644
--- a/src/views/Label/List.vue
+++ b/src/views/Label/List.vue
@@ -2,17 +2,26 @@
     <div class>
         <v-container fluid>
             <material-card class color="black" title="All Labels" text>
-                <v-layout align-center wrap class="px-3 my-3">
-                    <v-flex xs12 sm6 md6 lg3 xl2 class="WM-FlexCenter">
+                <v-layout align-center wrap class="px-3">
+                    <v-flex xs12 sm4 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" v-model="filter.label_id" label="Label ID"
+                        <v-text-field class="pt-3 pr-3" v-model="filter.label_id" label="Label ID"
                                       color="black"/>
                     </v-flex>
-
-                    <v-flex xs12 sm6 md6 lg3 xl2 class="WM-FlexCenter pl-3" v-if="$hasRole('Admin')">
+                    <v-flex xs12 sm4 md4 lg3 xl2 class="WM-FlexCenter">
+                        <v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"/>
+                        <v-text-field class="pt-3 pr-3" v-model="filter.sterilizer_id" label="Sterilizer ID"
+                                      color="black"/>
+                    </v-flex>
+                    <v-flex xs12 sm4 md4 lg3 xl2 class="WM-FlexCenter">
+                        <v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"/>
+                        <v-text-field class="pt-3 pr-3" v-model="filter.cycle_number" label="Cycle Number"
+                                      color="black"/>
+                    </v-flex>
+                    <v-flex xs12 sm6 md6 lg3 xl2 class="WM-FlexCenter" v-if="$hasRole('Admin')">
                         <v-icon class="fa fa-hospital-o mr-2 WM-Margin-B-8"/>
                         <v-autocomplete
-                                class="py-3 pr-3"
+                                class="pt-3 pr-3"
                                 v-model="filter.medical_center_id"
                                 @change="fillUsers"
                                 item-text="name"
@@ -23,28 +32,26 @@
                                 :clearable="true"
                         />
                     </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" v-model="filter.sterilizer_id" label="Sterilizer ID"
-                                      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" v-model="filter.cycle_number" label="Cycle Number"
-                                      color="black"/>
-                    </v-flex>
                     <v-spacer/>
-                    <v-flex xs12 sm6 md6 lg2 xl1 class="">
-                        <v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 30px" @click="load()">
-                            <v-icon class="white--text mr-2 caption">fas fa-search</v-icon>
-                            <span class="white--text">Filter</span>
+                    <v-flex xs12 sm6 md6 lg12 xl3 class="WM-Align-R">
+                        <v-tooltip bottom open-on-hover>
+                            <template v-slot:activator="{ on, attrs }">
+                                <v-btn v-bind="attrs" v-on="on" color="WM-Tooltip-Btn WM-Outline-Btn WM-Border WM-Margin-BT-0 WM-Border-Black mr-2" @click="load()">
+                                    <v-icon class="black--text caption">fas fa-search</v-icon>
+                                </v-btn>
+                            </template>
+                            <span>Filter</span>
+                        </v-tooltip>
+
+                        <v-btn class="WM-Outline-Btn WM-Border mr-2 WM-Margin-BT-0 WM-Border-Black" style="padding: 10px 30px;">
+                            <v-icon class="black--text mr-2 caption">fas fa-share-square</v-icon>
+                            <span class="black--text">EXPORT</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>
+
+                        <router-link :to="{ name: 'AddLabel' }">
+                            <v-btn class="WM-CyanBlueGradient-BG WM-Margin-BT-0" style="padding:10px 30px">
+                                <v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>
+                                <span class="white--text">Add</span>
                             </v-btn>
                         </router-link>
                     </v-flex>
@@ -71,21 +78,33 @@
                                 <td class="text-xs-right FlexBtn Height-MD-60 justify-self-end">
                                     <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"
+                                            <v-btn v-bind="attrs" v-on="on" color="light-gray" class="mr-2"
                                                    @click="show(item.id)">
-                                                <v-icon class="white--text mr-1 caption">fas fa-eye</v-icon>
+                                                <v-icon class="black--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 }">
+                                            <v-btn v-bind="attrs" v-on="on" color="light-gray" class="mr-2"
+                                                   @click="generateBarcode(item.id, 'Label')">
+                                                <v-icon class="black--text mr-1 caption">fas fa-barcode</v-icon>
+                                                <span>Generate Barcode</span>
+                                            </v-btn>
+                                        </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: 'EditLabel', params: {label: item.id}}">
-                                                <v-btn v-bind="attrs" v-on="on" color="orange" class="mr-2">
+                                                <v-btn v-bind="attrs" v-on="on" color="black" class="mr-2">
                                                     <v-icon class="white--text mr-1 caption">fas fa-pen</v-icon>
                                                     <span>Edit</span>
                                                 </v-btn>
@@ -93,11 +112,12 @@
                                         </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"
+                                                    color="red"
                                                     class="WM-ActionButton mr-2"
                                                     @click="removeModal(item.id)"
                                                     v-if="$hasRole('Admin') || item.user_id == $store.state.user.id">
@@ -107,16 +127,6 @@
                                         </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>
@@ -161,7 +171,7 @@ export default {
             {sortable: false, text: "Cycle Number", value: "Cycle Number"},
             {sortable: false, text: "Sterilizer ID", value: "Sterilizer ID"},
             {sortable: false, text: "Package ID", value: "Package ID"},
-            {sortable: false, text: "Action", value: "action", align: "center",width:'10%'}
+            {sortable: false, text: "Action", value: "action", align: "center", width: '10%'}
         ],
         filter: {},
         items: [],
diff --git a/src/views/MedicalCenter/List.vue b/src/views/MedicalCenter/List.vue
index 4bd4ed5..b57a89c 100644
--- a/src/views/MedicalCenter/List.vue
+++ b/src/views/MedicalCenter/List.vue
@@ -1,31 +1,34 @@
 <template>
     <v-container fluid>
         <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-layout wrap class="px-3 align-center">
+                <v-flex xs12 sm6 md6 lg3 xl2>
+                    <v-text-field class="pt-3 pr-3" 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:10px 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">
+                <v-flex xs12 sm6 md6 lg3 xl3 class="WM-Align-R">
+                    <v-tooltip bottom open-on-hover>
+                        <template v-slot:activator="{ on, attrs }">
+                            <v-btn v-bind="attrs" v-on="on" color="WM-Tooltip-Btn WM-Outline-Btn WM-Border WM-Margin-BT-0 WM-Border-Black mr-2" @click="load()">
+                                <v-icon class="black--text caption">fas fa-search</v-icon>
+                            </v-btn>
+                        </template>
+                        <span>Filter</span>
+                    </v-tooltip>
+
                     <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 class="WM-CyanBlueGradient-BG WM-Margin-BT-0" style="padding:10px 30px">
+                            <v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>
+                            <span class="white--text">Add</span>
                         </v-btn>
                     </router-link>
                 </v-flex>
             </v-layout>
-            <v-layout class="px-4 my-3">
+            <v-layout class="px-3 my-3">
                 <v-divider/>
             </v-layout>
-            <v-layout align-center justify-center wrap class="px-5 mt-3">
-                <v-flex md12>
+            <v-layout align-center justify-center wrap class="px-3 mt-3">
+                <v-flex xs12>
                     <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"/>
@@ -35,11 +38,25 @@
                             <td class="title font-weight-light">{{ $d(new Date(item.created_at), 'long') }}</td>
                             <td class="title font-weight-light">{{ item.users_count }} Operator</td>
                             <td class="text-xs-right FlexBtn Height-MD-80 Height-SM-48 justify-self-end">
+                                <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="light-gray"
+                                                   class="mr-2 WM-ActionButton">
+                                                <v-icon class="black--text mr-2 caption">fas fa-user</v-icon>
+                                                <span>Operator</span>
+                                            </v-btn>
+                                        </router-link>
+                                    </template>
+                                    <span>Operator</span>
+                                </v-tooltip>
+
                                 <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-btn v-bind="attrs" v-on="on" color="black" class="mr-2 WM-ActionButton">
                                                 <v-icon class="white--text mr-2 caption">fas fa-pen</v-icon>
                                                 <span>Edit</span>
                                             </v-btn>
@@ -47,22 +64,10 @@
                                     </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>
-                                    </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="removeModal(item.id)"
+                                        <v-btn v-bind="attrs" v-on="on" color="red" @click="removeModal(item.id)"
                                                class="WM-ActionButton">
                                             <v-icon class="white--text mr-2 caption">fas fa-trash</v-icon>
                                             <span>Remove</span>
diff --git a/src/views/MyItem/List.vue b/src/views/MyItem/List.vue
index 1310ddf..6fdbdd7 100644
--- a/src/views/MyItem/List.vue
+++ b/src/views/MyItem/List.vue
@@ -2,47 +2,51 @@
     <div class>
         <v-container fluid>
             <material-card class color="black" title="My Items" text>
-                <v-layout align-center wrap class="my-3 px-3">
-                    <v-flex xs12 sm4 md4 lg2 xl2 class="WM-FlexCenter">
+                <v-layout align-center wrap class="px-3">
+                    <v-flex xs12 sm4 md4 lg2 xl1 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="getFilters.item_id"
-                                      @input="updateFilter('item_id', getFilters.item_id)" label="Item ID"
+                        <v-text-field class="pt-3 pr-3" v-model="filter.item_id" label="Item ID"
                                       color="black"/>
                     </v-flex>
-                    <v-flex xs12 sm4 md4 lg2 xl2 class="WM-FlexCenter pl-3">
+                    <v-flex xs12 sm4 md4 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="getFilters.name"
-                                      @input="updateFilter('name', getFilters.name)" label="Name" color="black"/>
+                        <v-text-field class="pt-3 pr-3" v-model="filter.name" label="Name" color="black"/>
                     </v-flex>
-                    <v-flex xs12 sm4 md4 lg2 xl2 class="WM-FlexCenter pl-3" v-if="$hasRole('Admin')">
+                    <v-flex xs12 sm4 md4 lg3 xl2 class="WM-FlexCenter" 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="getFilters.medical_center_id" item-text="name"
-                                        item-value="id"
-                                        @input="updateFilter('medical_center_id', getFilters.medical_center_id)"
-                                        label="Hospital" color="black" :items="medicalCenters" :clearable="true"/>
+                        <v-autocomplete class="pt-3 pr-3" v-model="filter.medical_center_id" item-text="name"
+                                        item-value="id" label="Hospital" color="black" :items="medicalCenters"
+                                        :clearable="true"/>
                     </v-flex>
-                    <v-flex xs12 sm4 md4 lg2 xl2 class="WM-FlexCenter pl-3">
+                    <v-flex xs12 sm4 md4 lg2 xl1 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="getFilters.size"
-                                      @input="updateFilter('size', getFilters.size)" label="Size" color="black"/>
+                        <v-text-field class="pt-3 pr-3" v-model="filter.size" label="Size" color="black"/>
                     </v-flex>
-                    <v-flex xs12 sm4 md4 lg2 xl2 class="WM-FlexCenter pl3">
+                    <v-flex xs12 sm4 md3 lg2 xl1 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="getFilters.udi"
-                                      @input="updateFilter('udi', getFilters.udi)" label="UDI" color="black"/>
+                        <v-text-field class="pt-3 pr-3" v-model="filter.udi" label="UDI" color="black"/>
                     </v-flex>
+                    <!--btn-->
                     <v-spacer/>
-                    <v-flex class xs12 sm6 md6 lg2 xl1>
-                        <v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 30px" @click="onFilterClick()">
-                            <v-icon class="white--text mr-2 caption">fas fa-search</v-icon>
-                            <span class="white--text">Filter</span>
+                    <v-flex xs12 sm6 md6 lg2 xl3 class="WM-Align-R">
+                        <v-tooltip bottom open-on-hover>
+                            <template v-slot:activator="{ on, attrs }">
+                                <v-btn v-bind="attrs" v-on="on" color="WM-Tooltip-Btn WM-Outline-Btn WM-Border WM-Margin-BT-0 WM-Border-Black mr-2" @click="load()">
+                                    <v-icon class="black--text caption">fas fa-search</v-icon>
+                                </v-btn>
+                            </template>
+                            <span>Filter</span>
+                        </v-tooltip>
+
+                        <v-btn class="WM-Outline-Btn WM-Border mr-2 WM-Margin-BT-0 WM-Border-Black" style="padding: 10px 30px;">
+                            <v-icon class="black--text mr-2 caption">fas fa-share-square</v-icon>
+                            <span class="black--text">EXPORT</span>
                         </v-btn>
-                    </v-flex>
-                    <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">Add</span>
+                            <v-btn class="WM-CyanBlueGradient-BG WM-Margin-BT-0" style="padding:10px 30px">
+                                <v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>
+                                <span class="white--text">Add</span>
                             </v-btn>
                         </router-link>
                     </v-flex>
@@ -75,7 +79,7 @@
                                                 <v-btn :color="status.color" class="mr-2"
                                                        @click="changeStatus(item, status.status)" v-bind="attrs"
                                                        v-on="on">
-                                                    <v-icon class="white--text mr-1 caption">
+                                                    <v-icon :class="`${status.font_color}--text mr-1 caption`">
                                                         fas {{ status.icon }}
                                                     </v-icon>
                                                     <span>{{ status.label }}</span>
@@ -86,20 +90,40 @@
                                     </template>
                                     <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"
+                                            <v-btn v-bind="attrs" v-on="on" color="light-gray" class="mr-2"
                                                    @click="show(item.id)">
-                                                <v-icon class="white--text mr-1 caption">fas fa-eye</v-icon>
+                                                <v-icon class="black--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 }">
+                                            <v-btn class="mr-2" v-bind="attrs" v-on="on" color="light-gray"
+                                                   @click="generateBarcode(item, 'Item')">
+                                                <v-icon class="black--text mr-2 caption">fas fa-barcode</v-icon>
+                                                <span class="CSSD-font">Generate Barcode</span>
+                                            </v-btn>
+                                        </template>
+                                        <span>Generate Barcode</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="light-gray"
+                                                   @click="transfer(item)">
+                                                <v-icon class="black--text mr-2 caption">fas fa-arrows-alt</v-icon>
+                                                <span class="CSSD-font">Transfer</span>
+                                            </v-btn>
+                                        </template>
+                                        <span>Transfer</span>
+                                    </v-tooltip>
                                     <v-tooltip bottom open-on-hover>
                                         <template v-slot:activator="{ on, attrs }">
                                             <router-link class="LinkBtn"
                                                          v-if="$hasRole('Admin|Supervisor') ||( item.user_id == $store.state.user.id && !['approved', 'rejected'].includes(item.status))"
                                                          :to="{ name: 'EditItem', params: { Item: item.id } }">
-                                                <v-btn v-bind="attrs" v-on="on" color="orange" class="mr-2">
+                                                <v-btn v-bind="attrs" v-on="on" color="black" class="mr-2">
                                                     <v-icon class="white--text mr-1 caption">fas fa-pen</v-icon>
                                                     <span>Edit</span>
                                                 </v-btn>
@@ -109,7 +133,7 @@
                                     </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"
+                                            <v-btn v-bind="attrs" v-on="on" color="red" class="WM-ActionButton mr-2"
                                                    @click="removeModal(item.id)"
                                                    v-if="$hasRole('Admin|Supervisor') ||( item.user_id == $store.state.user.id && !['approved', 'rejected'].includes(item.status))">
                                                 <v-icon class="white--text mr-2 caption">fas fa-trash</v-icon>
@@ -118,26 +142,6 @@
                                         </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, 'Item')">
-                                                <v-icon class="white--text mr-2 caption">fas fa-barcode</v-icon>
-                                                <span class="CSSD-font">Generate Barcode</span>
-                                            </v-btn>
-                                        </template>
-                                        <span>Generate Barcode</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="pink darken-1"
-                                                   @click="transfer(item)">
-                                                <v-icon class="white--text mr-2 caption">fas fa-arrows-alt</v-icon>
-                                                <span class="CSSD-font">Transfer</span>
-                                            </v-btn>
-                                        </template>
-                                        <span>Transfer</span>
-                                    </v-tooltip>
                                 </td>
 
                             </template>
@@ -196,6 +200,7 @@ export default {
     }),
     async created() {
         this.loadMyItem();
+        this.loadMedicalCenters();
     },
     computed: {
         ...mapGetters('myItems', ["getFilters", 'getMyItems', 'getCurrentPage', 'getLastPage']),
@@ -226,12 +231,17 @@ export default {
             });
         },
         async generateBarcode(item, type = null) {
-            const result = await ApiService.post(urls.Barcode(item.id, type));
-            if (result && result.status == 200) {
-                this.changeCurrentModal({
-                    modal: "modal-barcode-barcode",
-                    properties: {result, item},
-                });
+            let code = item.udi;
+            if (code) {
+                const result = await ApiService.post(urls.Barcode(item.id, type));
+                if (result && result.status == 200) {
+                    this.changeCurrentModal({
+                        modal: "modal-barcode-barcode",
+                        properties: {result, item},
+                    });
+                }
+            } else {
+                toast.error('An error occurred while generating the barcode . please first set UDI');
             }
         },
         async show(testResultId) {
@@ -271,8 +281,8 @@ export default {
         getStatus(item) {
             if (item.status === 'pending') {
                 return [
-                    {status: 'rejected', label: 'reject', color: 'red', icon: 'fa-close'},
-                    {status: 'approved', label: 'approve', color: 'green', icon: 'fa-check'}
+                    {status: 'approved', label: 'approve', color: 'cyan', font_color : 'white', icon: 'fa-check'},
+                    {status: 'rejected', label: 'reject', color: 'light-gray',font_color : 'black', icon: 'fa-close'},
                 ]
             } else {
                 const nextStatus = item.status === 'rejected' ? 'approved' : 'rejected'
@@ -280,7 +290,8 @@ export default {
                     {
                         status: nextStatus,
                         label: nextStatus === 'approved' ? 'approve' : 'reject',
-                        color: nextStatus === 'approved' ? 'green' : 'red',
+                        color: nextStatus === 'approved' ? 'cyan' : 'light-gray',
+                        font_color: nextStatus === 'approved' ? 'white' : 'black',
                         icon: nextStatus === 'approved' ? 'fa-check' : 'fa-close'
                     }
                 ]
diff --git a/src/views/MyPackage/List.vue b/src/views/MyPackage/List.vue
index d640a6d..607256f 100644
--- a/src/views/MyPackage/List.vue
+++ b/src/views/MyPackage/List.vue
@@ -2,38 +2,45 @@
     <div class>
         <v-container fluid>
             <material-card class color="black" title="My Packages" text>
-                <v-layout align-center wrap class="mt-3 px-3">
-                    <v-flex xs12 sm6 md4 lg3 xl2 class="WM-FlexCenter">
+                <v-layout align-center wrap class="px-3">
+                    <v-flex xs12 sm6 md6 lg2 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"
+                        <v-text-field class="pt-3 pr-3" v-model="filter.package_id" label="Package ID"
                                       color="black"/>
                     </v-flex>
-                    <v-flex xs12 sm6 md4 lg3 xl2 class="WM-FlexCenter pl-3">
+                    <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.name" label="Name" color="black"/>
+                        <v-text-field class="pt-3 pr-3" v-model="filter.name" label="Name" color="black"/>
                     </v-flex>
-                    <v-flex xs12 sm6 md4 lg3 xl2 class="WM-FlexCenter pl-3" v-if="$hasRole('Admin')">
+                    <v-flex xs12 sm6 md6 lg3 xl2 class="WM-FlexCenter" 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"
+                        <v-autocomplete class="pt-3 pr-3" v-model="filter.medical_center_id" item-text="name"
                                         item-value="id" label="Hospital" color="black" :items="medicalCenters"
                                         :clearable="true"/>
                     </v-flex>
                     <v-spacer/>
-                    <v-flex class xs12 sm6 md6 lg2 xl1>
-                        <v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 30px" @click="load()">
-                            <v-icon class="white--text mr-2 caption">fas fa-search</v-icon>
-                            <span class="white--text">Filter</span>
+                    <v-flex xs12 sm6 md6 lg4 xl3 class="WM-Align-R">
+                        <v-tooltip bottom open-on-hover>
+                            <template v-slot:activator="{ on, attrs }">
+                                <v-btn v-bind="attrs" v-on="on" color="WM-Tooltip-Btn WM-Outline-Btn WM-Border WM-Margin-BT-0 WM-Border-Black mr-2" @click="load()">
+                                    <v-icon class="black--text caption">fas fa-search</v-icon>
+                                </v-btn>
+                            </template>
+                            <span>Filter</span>
+                        </v-tooltip>
+
+                        <v-btn class="WM-Outline-Btn WM-Border mr-2 WM-Margin-BT-0 WM-Border-Black" style="padding: 10px 30px;">
+                            <v-icon class="black--text mr-2 caption">fas fa-share-square</v-icon>
+                            <span class="black--text">EXPORT</span>
                         </v-btn>
-                    </v-flex>
-                    <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>
-                                <span class="black--text">Add</span>
+                            <v-btn class="WM-CyanBlueGradient-BG WM-Margin-BT-0" style="padding:10px 30px">
+                                <v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>
+                                <span class="white--text">Add</span>
                             </v-btn>
                         </router-link>
                     </v-flex>
-
                 </v-layout>
                 <v-layout class="px-3 my-3">
                     <v-divider/>
@@ -62,7 +69,8 @@
                                                 <v-btn :color="status.color" class="mr-2"
                                                        @click="changeStatus(item, status.status)" v-bind="attrs"
                                                        v-on="on">
-                                                    <v-icon class="white--text mr-1 caption">fas {{ status.icon }}
+                                                    <v-icon :class="`${status.font_color}--text mr-1 caption`">
+                                                        fas {{ status.icon }}
                                                     </v-icon>
                                                     <span>{{ status.label }}</span>
                                                 </v-btn>
@@ -73,21 +81,43 @@
 
                                     <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"
+                                            <v-btn v-bind="attrs" v-on="on" color="light-gray" class="mr-2"
                                                    @click="show(item.id)">
-                                                <v-icon class="white--text mr-1 caption">fas fa-eye</v-icon>
+                                                <v-icon class="black--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 }">
+                                            <v-btn class="mr-2" v-bind="attrs" v-on="on" color="light-gray"
+                                                   @click="generateBarcode(item.id, 'Package')">
+                                                <v-icon class="black--text mr-1 caption">fas fa-barcode</v-icon>
+                                                <span>Generate Barcode</span>
+                                            </v-btn>
+                                        </template>
+                                        <span>Generate Barcode</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="light-gray"
+                                                   @click="transfer(item)">
+                                                <v-icon class="black--text mr-2 caption">fas fa-arrows-alt</v-icon>
+                                                <span class="CSSD-font">Transfer</span>
+                                            </v-btn>
+                                        </template>
+                                        <span>Transfer</span>
+                                    </v-tooltip>
+
                                     <v-tooltip bottom open-on-hover>
                                         <template v-slot:activator="{ on, attrs }">
                                             <router-link class="LinkBtn"
                                                          v-if="$hasRole('Admin|Supervisor') ||( item.user_id == $store.state.user.id && !['approved', 'rejected'].includes(item.status))"
                                                          :to="{ name: 'EditPackage', params: { package: item.id } }">
-                                                <v-btn v-bind="attrs" v-on="on" color="orange" class="mr-2">
+                                                <v-btn v-bind="attrs" v-on="on" color="black" class="mr-2">
                                                     <v-icon class="white--text mr-1 caption">fas fa-pen</v-icon>
                                                     <span>Edit</span>
                                                 </v-btn>
@@ -98,7 +128,7 @@
 
                                     <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"
+                                            <v-btn v-bind="attrs" v-on="on" color="red" class="WM-ActionButton mr-2"
                                                    @click="removeModal(item.id)"
                                                    v-if="$hasRole('Admin|Supervisor') ||( item.user_id == $store.state.user.id && !['approved', 'rejected'].includes(item.status))">
                                                 <v-icon class="white--text mr-2 caption">fas fa-trash</v-icon>
@@ -107,26 +137,6 @@
                                         </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>
-                                    <v-tooltip bottom open-on-hover>
-                                        <template v-slot:activator="{ on, attrs }">
-                                            <v-btn class="mr-2" v-bind="attrs" v-on="on" color="pink darken-1"
-                                                   @click="transfer(item)">
-                                                <v-icon class="white--text mr-2 caption">fas fa-arrows-alt</v-icon>
-                                                <span class="CSSD-font">Transfer</span>
-                                            </v-btn>
-                                        </template>
-                                        <span>Transfer</span>
-                                    </v-tooltip>
                                 </td>
 
                             </template>
@@ -245,8 +255,8 @@ export default {
         getStatus(item) {
             if (item.status === 'pending') {
                 return [
-                    {status: 'rejected', label: 'reject', color: 'red', icon: 'fa-close'},
-                    {status: 'approved', label: 'approve', color: 'green', icon: 'fa-check'}
+                    {status: 'approved', label: 'approve', color: 'cyan' , font_color : 'white', icon: 'fa-check'},
+                    {status: 'rejected', label: 'reject', color: 'light-gray' ,font_color : 'black', icon: 'fa-close'},
                 ]
             } else {
                 const nextStatus = item.status === 'rejected' ? 'approved' : 'rejected'
@@ -254,7 +264,8 @@ export default {
                     {
                         status: nextStatus,
                         label: nextStatus === 'approved' ? 'approve' : 'reject',
-                        color: nextStatus === 'approved' ? 'green' : 'red',
+                        color: nextStatus === 'approved' ? 'cyan' : 'light-gray',
+                        font_color: nextStatus === 'approved' ? 'white' : 'black',
                         icon: nextStatus === 'approved' ? 'fa-check' : 'fa-close'
                     }
                 ]
diff --git a/src/views/Package/List.vue b/src/views/Package/List.vue
index 6b03e95..05b5fa8 100644
--- a/src/views/Package/List.vue
+++ b/src/views/Package/List.vue
@@ -2,46 +2,45 @@
     <div class>
         <v-container fluid>
             <material-card class color="black" title="All Packages" text>
-                <v-layout align-center wrap class="mt-3 px-3">
-                    <v-flex xs12 sm6 md4 lg3 xl2 class="WM-FlexCenter">
+                <v-layout align-center wrap class="px-3">
+                    <v-flex xs12 sm6 md6 lg2 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"
+                        <v-text-field class="pt-3 pr-3" v-model="filter.package_id" label="Package ID"
                                       color="black"/>
                     </v-flex>
-                    <v-flex xs12 sm6 md4 lg3 xl2 class="WM-FlexCenter pl-3">
+                    <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.name" label="Name" color="black"/>
+                        <v-text-field class="pt-3 pr-3" v-model="filter.name" label="Name" color="black"/>
                     </v-flex>
-                    <v-flex xs12 sm6 md4 lg3 xl2 class="WM-FlexCenter pl-3" v-if="$hasRole('Admin')">
+                    <v-flex xs12 sm6 md6 lg3 xl2 class="WM-FlexCenter" 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"
+                        <v-autocomplete class="pt-3 pr-3" v-model="filter.medical_center_id" item-text="name"
                                         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 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-spacer/>
-                    <v-flex class xs12 sm6 md6 lg2 xl1>
-                        <v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 30px" @click="load()">
-                            <v-icon class="white--text mr-2 caption">fas fa-search</v-icon>
-                            <span class="white--text">Filter</span>
+                    <v-flex xs12 sm6 md6 lg4 xl3 class="WM-Align-R">
+                        <v-tooltip bottom open-on-hover>
+                            <template v-slot:activator="{ on, attrs }">
+                                <v-btn v-bind="attrs" v-on="on" color="WM-Tooltip-Btn WM-Outline-Btn WM-Border WM-Margin-BT-0 WM-Border-Black mr-2" @click="load()">
+                                    <v-icon class="black--text caption">fas fa-search</v-icon>
+                                </v-btn>
+                            </template>
+                            <span>Filter</span>
+                        </v-tooltip>
+
+                        <v-btn class="WM-Outline-Btn WM-Border mr-2 WM-Margin-BT-0 WM-Border-Black" style="padding: 10px 30px;">
+                            <v-icon class="black--text mr-2 caption">fas fa-share-square</v-icon>
+                            <span class="black--text">EXPORT</span>
                         </v-btn>
-                    </v-flex>
-                    <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>
-                                <span class="black--text">Add</span>
+                            <v-btn class="WM-CyanBlueGradient-BG WM-Margin-BT-0" style="padding:10px 30px">
+                                <v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>
+                                <span class="white--text">Add</span>
                             </v-btn>
                         </router-link>
                     </v-flex>
-
                 </v-layout>
                 <v-layout class="px-3 my-3">
                     <v-divider/>
@@ -73,9 +72,8 @@
                                                 <v-btn :color="status.color" class="mr-2"
                                                        @click="changeStatus(item, status.status)" v-bind="attrs"
                                                        v-on="on">
-                                                    <v-icon class="white--text mr-1 caption">fas {{
-                                                            status.icon
-                                                        }}
+                                                    <v-icon :class="`${status.font_color}--text mr-1 caption`">
+                                                        fas {{status.icon}}
                                                     </v-icon>
                                                     <span>{{ status.label }}</span>
                                                 </v-btn>
@@ -86,21 +84,44 @@
 
                                     <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"
+                                            <v-btn v-bind="attrs" v-on="on" color="light-gray" class="mr-2"
                                                    @click="show(item.id)">
-                                                <v-icon class="white--text mr-1 caption">fas fa-eye</v-icon>
+                                                <v-icon class="black--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 }">
+                                            <v-btn class="mr-2" v-bind="attrs" v-on="on" color="light-gray"
+                                                   @click="generateBarcode(item.id, 'Package')">
+                                                <v-icon class="black--text mr-1 caption">fas fa-barcode</v-icon>
+                                                <span>Generate Barcode</span>
+                                            </v-btn>
+                                        </template>
+                                        <span>Generate Barcode</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="light-gray"
+                                                   v-if="$hasRole('Admin|Supervisor') ||( item.user_id == $store.state.user.id)"
+                                                   @click="transfer(item)">
+                                                <v-icon class="black--text mr-2 caption">fas fa-arrows-alt</v-icon>
+                                                <span class="CSSD-font">Transfer</span>
+                                            </v-btn>
+                                        </template>
+                                        <span>Transfer</span>
+                                    </v-tooltip>
+
                                     <v-tooltip bottom open-on-hover>
                                         <template v-slot:activator="{ on, attrs }">
                                             <router-link class="LinkBtn"
                                                          v-if="$hasRole('Admin|Supervisor') ||( item.user_id == $store.state.user.id && !['approved', 'rejected'].includes(item.status))"
                                                          :to="{ name: 'EditPackage', params: { package: item.id } }">
-                                                <v-btn v-bind="attrs" v-on="on" color="orange" class="mr-2">
+                                                <v-btn v-bind="attrs" v-on="on" color="black" class="mr-2">
                                                     <v-icon class="white--text mr-1 caption">fas fa-pen</v-icon>
                                                     <span>Edit</span>
                                                 </v-btn>
@@ -111,7 +132,7 @@
 
                                     <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"
+                                            <v-btn v-bind="attrs" v-on="on" color="red" class="WM-ActionButton mr-2"
                                                    @click="removeModal(item.id)"
                                                    v-if="$hasRole('Admin|Supervisor') ||( item.user_id == $store.state.user.id && !['approved', 'rejected'].includes(item.status))">
                                                 <v-icon class="white--text mr-2 caption">fas fa-trash</v-icon>
@@ -120,16 +141,6 @@
                                         </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>
@@ -192,7 +203,7 @@ export default {
         this.load();
     },
     methods: {
-        ...mapMutations("modal", ["changeCurrentModal",'closeModal']),
+        ...mapMutations("modal", ["changeCurrentModal", 'closeModal']),
         async load(page = 1) {
             let filter = '?';
             for (const key in this.filter) {
@@ -256,8 +267,8 @@ export default {
         getStatus(item) {
             if (item.status === 'pending') {
                 return [
-                    {status: 'rejected', label: 'reject', color: 'red', icon: 'fa-close'},
-                    {status: 'approved', label: 'approve', color: 'green', icon: 'fa-check'}
+                    {status: 'approved', label: 'approve', color: 'cyan', font_color : 'white', icon: 'fa-check'},
+                    {status: 'rejected', label: 'reject', color: 'light-gray',font_color : 'black', icon: 'fa-close'},
                 ]
             } else {
                 const nextStatus = item.status === 'rejected' ? 'approved' : 'rejected'
@@ -265,13 +276,19 @@ export default {
                     {
                         status: nextStatus,
                         label: nextStatus === 'approved' ? 'approve' : 'reject',
-                        color: nextStatus === 'approved' ? 'green' : 'red',
+                        color: nextStatus === 'approved' ? 'cyan' : 'light-gray',
+                        font_color: nextStatus === 'approved' ? 'white' : 'black',
                         icon: nextStatus === 'approved' ? 'fa-check' : 'fa-close'
                     }
                 ]
             }
         },
-
+        async transfer(data) {
+            this.changeCurrentModal({
+                modal: "modal-user-list",
+                properties: {data},
+            });
+        },
         async changeStatus(item, status) {
             const result = await ApiService.post(urls.changePackageStatus(item.id), {status})
 
diff --git a/src/views/TestResult/List.vue b/src/views/TestResult/List.vue
index cd723c4..8f264de 100644
--- a/src/views/TestResult/List.vue
+++ b/src/views/TestResult/List.vue
@@ -2,39 +2,39 @@
     <div class>
         <v-container fluid>
             <material-card class color="black" title="All Test Result" text>
-                <v-layout align-center wrap class="px-3 my-3">
+                <v-layout align-center wrap class="px-3">
                     <v-flex xs12 sm4 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.device_id" label="ID"
+                        <v-text-field class="pt-3 pr-3" v-model="filter.device_id" label="ID"
                                       color="black"/>
                     </v-flex>
-                    <v-flex xs12 sm4 md4 lg3 xl2 class="WM-FlexCenter pl-3">
+                    <v-flex xs12 sm4 md4 lg3 xl2 class="WM-FlexCenter">
                         <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"
+                                        v-model="filter.device_label" label="ID Label" color="black" class="pt-3 pr-3"
                                         :clearable="true"/>
                     </v-flex>
-                    <v-flex xs12 sm4 md4 lg3 xl2 class="WM-FlexCenter pl-3">
+                    <v-flex xs12 sm4 md4 lg3 xl2 class="WM-FlexCenter">
                         <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"
+                        <v-autocomplete class="pt-3 pr-3" v-model="filter.testType_id" label="TestType Name"
                                         color="black" :items="testTypes" item-text="name" item-value="id"/>
                     </v-flex>
-                    <v-flex xs12 sm4 md4 lg3 xl2 class="WM-FlexCenter pl-3">
+                    <v-flex xs12 sm4 md4 lg3 xl2 class="WM-FlexCenter">
                         <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"
+                        <v-autocomplete class="pt-3 pr-3" v-model="filter.medicalCenter_id" label="Hospital"
                                         color="black" :items="medicalCenters" item-text="name" item-value="id"
                                         :clearable="true"/>
                     </v-flex>
-                    <v-flex xs12 sm4 md4 lg3 xl2 class="WM-FlexCenter pl-3">
+                    <v-flex xs12 sm4 md4 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.user_name" label="User Name"
+                        <v-text-field class="pt-3 pr-3" v-model="filter.user_name" label="User Name"
                                       color="black"/>
                     </v-flex>
-                    <v-flex xs12 sm4 md4 lg3 xl2 class="WM-FlexCenter pl-3">
+                    <v-flex xs12 sm4 md4 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-menu class="pr-3" lazy :close-on-content-click="true" transition="v-scale-transition" offset-y
                                 v-model="fromMenu" style="width: 100%">
-                            <v-text-field class="py-3 pr-3" required slot="activator" label="FromDate"
+                            <v-text-field class="pt-3 pr-3" 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()"/>
@@ -42,27 +42,29 @@
                     </v-flex>
                     <v-flex xs12 sm4 md4 lg3 xl2 class="WM-FlexCenter" 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-menu class="pr-3" lazy :close-on-content-click="true" transition="v-scale-transition" offset-y
                                 v-model="upToMenu" style="width: 100%">
-                            <v-text-field class="py-3 pr-3" required slot="activator" label="UpToDate" color="black"
+                            <v-text-field class="pt-3 pr-3" required slot="activator" label="UpToDate" color="black"
                                           v-model="filter.upToPicker"/>
                             <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-spacer/>
-                    <v-flex class xs12 sm6 md6 lg2 xl1>
-                        <v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 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-flex xs12 sm6 md6 lg1 xl1 class="text-xs-right">
+                    <v-flex xs12 sm6 md6 lg12 xl3 class="WM-Align-R">
+                        <v-tooltip bottom open-on-hover>
+                            <template v-slot:activator="{ on, attrs }">
+                                <v-btn v-bind="attrs" v-on="on" color="WM-Tooltip-Btn WM-Outline-Btn WM-Border WM-Margin-BT-0 WM-Border-Black mr-2" @click="load(null, null)">
+                                    <v-icon class="black--text caption">fas fa-search</v-icon>
+                                </v-btn>
+                            </template>
+                            <span>Filter</span>
+                        </v-tooltip>
+
                         <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 class="WM-CyanBlueGradient-BG WM-Margin-BT-0" style="padding:10px 30px">
+                                <v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>
+                                <span class="white--text">Add</span>
                             </v-btn>
                         </router-link>
                     </v-flex>
diff --git a/src/views/TestType/List.vue b/src/views/TestType/List.vue
index 9ea4644..815288f 100644
--- a/src/views/TestType/List.vue
+++ b/src/views/TestType/List.vue
@@ -1,22 +1,22 @@
 <template>
     <v-container fluid>
-        <material-card class color="black" title="TestType List" text>
-            <v-layout wrap class="px-3 mb-3">
-                <v-flex xs12 sm6 md6 lg3 xl2 class="WM-FlexCenter pl-3">
+        <material-card color="black" title="TestType List" text>
+            <v-layout wrap align-center class="px-3">
+                <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" label="Name" v-model="filter.name" color="black"/>
+                    <v-text-field class="pt-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-flex xs12 sm6 md6 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" label="UniqueId" v-model="filter.unique_id" color="black"/>
+                    <v-text-field class="pt-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-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" label="UserName" v-model="filter.user_name" color="black"/>
+                    <v-text-field class="pt-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-flex xs12 sm6 md6 lg3 xl2 class="WM-FlexCenter">
                     <v-icon class="far fa-calendar-alt mr-2"/>
-                    <v-menu
+                    <v-menu class="pt-3 pr-3"
                             lazy
                             :close-on-content-click="true"
                             transition="v-scale-transition"
@@ -35,9 +35,9 @@
                                 :date-format="date => new Date(date).toDateString()"/>
                     </v-menu>
                 </v-flex>
-                <v-flex xs12 sm6 md6 lg3 xl2 class="WM-FlexCenter pl-3">
+                <v-flex xs12 sm6 md6 lg3 xl2 class="WM-FlexCenter">
                     <v-icon class="far fa-calendar-alt mr-2"></v-icon>
-                    <v-menu
+                    <v-menu class="pt-3 pr-3"
                             lazy
                             :close-on-content-click="true"
                             transition="v-scale-transition"
@@ -56,19 +56,22 @@
                                 :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:10px 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-spacer/>
+                <v-flex xs12 sm6 md6 lg6 xl2 class="WM-Align-R">
+                    <v-tooltip bottom open-on-hover>
+                        <template v-slot:activator="{ on, attrs }">
+                            <v-btn v-bind="attrs" v-on="on" color="WM-Tooltip-Btn WM-Outline-Btn WM-Border WM-Margin-BT-0 WM-Border-Black mr-2" @click="load()">
+                                <v-icon class="black--text caption">fas fa-search</v-icon>
+                            </v-btn>
+                        </template>
+                        <span>Filter</span>
+                    </v-tooltip>
+
+                    <router-link :to="{ name: 'AddTestType' }">
+                        <v-btn class="WM-CyanBlueGradient-BG WM-Margin-BT-0" style="padding:10px 30px">
+                            <v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>
+                            <span class="white--text">Add</span>
                         </v-btn>
                     </router-link>
                 </v-flex>
@@ -88,13 +91,36 @@
                             <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 justify-self-end">
+                                <v-tooltip bottom open-on-hover>
+                                    <template v-slot:activator="{ on, attrs }">
+                                        <v-btn color="light-gray" class="mr-2"
+                                               @click="generateBarcode(item.unique_code, 'TestType')" v-bind="attrs"
+                                               v-on="on">
+                                            <v-icon class="black--text mr-1 caption">fas fa-barcode</v-icon>
+                                            <span>Generate Barcode</span>
+                                        </v-btn>
+                                    </template>
+                                    <span>Generate Barcode</span>
+                                </v-tooltip>
+
+                                <v-tooltip bottom open-on-hover>
+                                    <template v-slot:activator="{ on, attrs }">
+                                        <v-btn color="light-gray" class="mr-2" @click="remove(item.id)" v-bind="attrs"
+                                               v-on="on">
+                                            <v-icon class="black--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 }">
                                         <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-btn color="black" class="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>
@@ -102,27 +128,8 @@
                                     </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>
diff --git a/src/views/User/List.vue b/src/views/User/List.vue
index f88e087..d867d8f 100644
--- a/src/views/User/List.vue
+++ b/src/views/User/List.vue
@@ -1,32 +1,30 @@
 <template>
     <v-container grid-list-xs>
         <material-card color="black" title="Member List">
-            <v-layout align-center justify-center wrap class="px-3 mb-3">
+            <v-layout align-center wrap class="px-3">
                 <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-text-field class="pt-3 pr-3" color="black" name="name" label="Name"
                                   v-model="filter.name"/>
                 </v-flex>
-                <v-flex xs12 sm6 md6 lg3 xl2 class="WM-FlexCenter pl-3">
+                <v-flex xs12 sm6 md6 lg3 xl2 class="WM-FlexCenter">
                     <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"
+                    <v-autocomplete class="pt-3 pr-3" v-model="filter.medical_center_id" label="Hospital" color="black"
                                     :items="medicalCenters" item-text="name" item-value="id"/>
                 </v-flex>
-                <v-flex xs12 sm6 md6 lg3 xl2 class="WM-FlexCenter pl-3">
+                <v-flex xs12 sm6 md6 lg3 xl2 class="WM-FlexCenter">
                     <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-text-field class="pt-3 pr-3" color="black" name="CellPhone" label="CellPhone"
                                   v-model="filter.cell_number"/>
                 </v-flex>
-                <v-flex xs12 sm6 md6 lg3 xl2 class="WM-FlexCenter pl-3">
+                <v-flex xs12 sm6 md6 lg3 xl2 class="WM-FlexCenter">
                     <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-select class="pt-3 pr-3" color="black" name="role" label="Role" :items="roles"
                               v-model="filter.role"/>
                 </v-flex>
-                <!--            </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-menu class="pt-3 pr-3" 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" color="black"
                                       v-model="filter.fromPicker"/>
@@ -34,9 +32,9 @@
                                        :date-format="date => new Date(date).toDateString()"/>
                     </v-menu>
                 </v-flex>
-                <v-flex xs12 sm6 md6 lg3 xl2 class="WM-FlexCenter pl-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-menu class="pt-3 pr-3" 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" color="black"
                                       v-model="filter.upToPicker"/>
@@ -45,11 +43,15 @@
                     </v-menu>
                 </v-flex>
                 <v-spacer/>
-                <v-flex wrap xs12 sm12 class="WM-Align-R ml-4">
-                    <v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 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 xs12 sm12 md12 lg3 xl12 class="WM-Align-R">
+                    <v-tooltip bottom open-on-hover>
+                        <template v-slot:activator="{ on, attrs }">
+                            <v-btn v-bind="attrs" v-on="on" color="WM-Tooltip-Btn WM-Outline-Btn WM-Border WM-Margin-BT-0 WM-Border-Black mr-2" @click="load()">
+                                <v-icon class="black--text caption">fas fa-search</v-icon>
+                            </v-btn>
+                        </template>
+                        <span>Filter</span>
+                    </v-tooltip>
                 </v-flex>
 
             </v-layout>
@@ -76,7 +78,7 @@
                                 <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'"
+                                               :color="item.status == 'Active' ? 'cyan' : 'light-gray'"
                                                @click="changeStatus(item.id)" class="mr-2 WM-ActionButton"
                                                v-if="$hasRole('Admin|Supervisor')">
                                             <template v-if="item.status == 'Active'">
@@ -84,7 +86,7 @@
                                                 <span v-if="item.status == 'Active'">Suspended</span>
                                             </template>
                                             <template v-else>
-                                                <v-icon class="white--text mr-2 caption">fa fa-pause</v-icon>
+                                                <v-icon class="black--text mr-2 caption">fa fa-pause</v-icon>
                                                 <span>Active</span>
                                             </template>
                                         </v-btn>
@@ -94,10 +96,10 @@
                                 </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"
+                                        <v-btn v-bind="attrs" v-on="on" color="light-gray"
                                                @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>
+                                            <v-icon class="black--text mr-2 caption">fas fa-user-tag</v-icon>
                                             <span>Role</span>
                                         </v-btn>
                                     </template>
@@ -105,7 +107,7 @@
                                 </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')"
+                                        <v-btn v-bind="attrs" v-on="on" color="red" v-if="$hasRole('Admin')"
                                                class="WM-ActionButton" @click="removeModal(item.id)">
                                             <v-icon class="white--text mr-2 caption">fas fa-trash</v-icon>
                                             <span>Remove</span>