From 7e000bf00de0fa2d002102cfefeb5327e53518b4 Mon Sep 17 00:00:00 2001
From: shokouhi <fhshokouhi@gmail.com>
Date: Tue, 21 Jul 2020 10:41:40 +0430
Subject: [PATCH] new changes

---
 resources/js/show/views/Item/ShowItem.vue     | 30 +++++++-------
 .../js/show/views/Package/ShowPackage.vue     | 16 ++++----
 .../show/views/TestResult/ShowTestResult.vue  | 40 +++++++++----------
 .../js/vue/components/material/Cards.vue      |  2 +-
 .../js/vue/components/modal/item/show.vue     | 33 +++++++--------
 .../js/vue/components/modal/package/Show.vue  | 18 ++++-----
 .../vue/components/modal/testresult/Show.vue  |  6 +--
 resources/js/vue/styles/css/Assets/Main.scss  | 19 +++------
 resources/js/vue/views/Cycle/List.vue         | 14 ++++---
 resources/js/vue/views/Item/List.vue          | 18 +++++----
 resources/js/vue/views/Label/List.vue         | 21 ++++------
 resources/js/vue/views/Package/List.vue       | 24 ++++++++---
 resources/js/vue/views/TestResult/List.vue    | 30 ++++++++++----
 resources/js/vue/views/TestResult/Show.vue    | 20 +++++-----
 resources/js/vue/views/TestType/List.vue      | 26 ++++++------
 resources/js/vue/views/Tickets/List.vue       |  2 +-
 resources/js/vue/views/User/List.vue          |  8 ++--
 resources/js/vue/views/User/MyInfo.vue        |  4 +-
 18 files changed, 174 insertions(+), 157 deletions(-)

diff --git a/resources/js/show/views/Item/ShowItem.vue b/resources/js/show/views/Item/ShowItem.vue
index 61548cce..edb32203 100644
--- a/resources/js/show/views/Item/ShowItem.vue
+++ b/resources/js/show/views/Item/ShowItem.vue
@@ -2,58 +2,58 @@
     <v-container grid-list-xs>
         <material-card color="black" title="Show Item">
             <v-layout align-left id="printMe" justify-left wrap class="px-5 my-3">
-                <h3 class="ml-3"> Item - {{ MedicalCenter }}</h3>
+                <h3 class="ml-3 CSSD-font"> Item - {{ MedicalCenter }}</h3>
                 <v-flex xs12>
                     <hr class="v-divider theme--light">
                 </v-flex>
                 <v-layout row wrap class="ml-4">
                     <v-flex xs12 md6 sm6>
                         <div class>
-                            <span class="title">Item ID :</span>
-                            <span class="headline ml-1" style="letter-spacing:0 !important">{{ data.id }}</span>
+                            <span class="title CSSD-font">Item 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">Name :</span>
-                            <span class="headline ml-1" style="letter-spacing:0 !important">{{ data.name }}</span>
+                            <span class="title CSSD-font">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">Size :</span>
-                            <span class="headline ml-1" style="letter-spacing:0 !important">{{ data.size }}</span>
+                            <span class="title CSSD-font">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">Specific :</span>
-                            <span class="headline ml-1" style="letter-spacing:0 !important">{{ data.specific }}</span>
+                            <span class="title CSSD-font">Specific :</span>
+                            <span class="headline ml-1 CSSD-font" style="letter-spacing:0 !important">{{ data.specific }}</span>
                         </div>
                     </v-flex>
                     <v-flex xs12 md6 sm6>
                         <div class>
-                            <span class="title">Register User :</span>
-                            <span class="headline ml-2" style="letter-spacing:0 !important">{{ data.user ? data.user.name : '' }}</span>
+                            <span class="title CSSD-font">Register User :</span>
+                            <span class="headline ml-2 CSSD-font" style="letter-spacing:0 !important">{{ data.user ? data.user.name : '' }}</span>
                         </div>
                     </v-flex>
                     <v-flex xs12 md6 sm6>
                         <div class>
-                            <span class="title">Date Register:</span>
-                            <span class="headline ml-2" style="letter-spacing:0 !important">{{ data.created_at }}</span>
+                            <span class="title CSSD-font">Date Register:</span>
+                            <span class="headline ml-2 CSSD-font" style="letter-spacing:0 !important">{{ data.created_at }}</span>
                         </div>
                     </v-flex>
 
                 </v-layout>
                 <v-layout align-left justify-left wrap class="px-5 my-3">
-                    <h3 class="ml-3">Barcode And QRCode Image</h3>
+                    <h3 class="ml-3 CSSD-font">Barcode And QRCode Image</h3>
                     <v-flex xs12>
                         <hr class="v-divider theme--light">
                     </v-flex>
                     <v-layout row wrap class="ml-4">
                         <v-flex xs12 md6 sm6 v-if="barcodeimg">
                             <img :src="barcodeimg" class="WM-Width-350"><br />
-                            <span>Item ID : {{data.id}}</span>
+                            <span class="CSSD-font">Item ID : {{data.id}}</span>
                         </v-flex>
                     </v-layout>
                     <v-layout row wrap class="ml-4">
diff --git a/resources/js/show/views/Package/ShowPackage.vue b/resources/js/show/views/Package/ShowPackage.vue
index 7fae6fd8..70771972 100644
--- a/resources/js/show/views/Package/ShowPackage.vue
+++ b/resources/js/show/views/Package/ShowPackage.vue
@@ -2,7 +2,7 @@
     <v-container grid-list-xs>
         <material-card color="black"  title="Show Package">
             <v-layout id="printMe" align-left justify-left wrap class="px-5 my-3">
-                <h3 class="ml-3">Package - {{ MedicalCenter }}</h3>
+                <h3 class="ml-3 CSSD-font">Package - {{ MedicalCenter }}</h3>
                 <v-flex xs12>
                     <hr class="v-divider theme--light">
                 </v-flex>
@@ -10,37 +10,37 @@
                     <v-flex xs12 md6 sm6>
                         <div class="WM-d-flex">
                             <v-icon class="WMi-info"></v-icon>
-                            <span class="headline ml-1" style="letter-spacing:0 !important">{{ data.name }}</span>
+                            <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="WM-d-flex">
                             <v-icon class="WMi-Industry"></v-icon>
-                            <span class="headline ml-2" style="letter-spacing:0 !important">{{ data.created_at }}</span>
+                            <span class="headline ml-2 CSSD-font" style="letter-spacing:0 !important">{{ data.created_at }}</span>
                         </div>
                     </v-flex>
                     <v-flex xs12 md6 sm6>
                         <div class="WM-d-flex">
                             <v-icon class="WMi-user"></v-icon>
-                            <span class="headline ml-2" style="letter-spacing:0 !important">{{ data.user ? data.user.name : '' }}</span>
+                            <span class="headline ml-2 CSSD-font" style="letter-spacing:0 !important">{{ data.user ? data.user.name : '' }}</span>
                         </div>
                     </v-flex>
                     <v-flex xs12 md6 sm6>
                         <div class="WM-d-flex">
                             <v-icon class="WMi-pencil"></v-icon>
-                            <span class="headline ml-1" style="letter-spacing:0 !important">{{ data.note }}</span>
+                            <span class="headline ml-1 CSSD-font" style="letter-spacing:0 !important">{{ data.note }}</span>
                         </div>
                     </v-flex>
                 </v-layout>
                 <v-layout align-left justify-left wrap class="px-5 my-3">
-                    <h3 class="ml-3">Barcode And QRCode Image</h3>
+                    <h3 class="ml-3 CSSD-font">Barcode And QRCode Image</h3>
                     <v-flex xs12>
                         <hr class="v-divider theme--light">
                     </v-flex>
                     <v-layout row wrap class="ml-4">
                         <v-flex xs12 md6 sm6 v-if="barcodeimg">
                             <img :src="barcodeimg" class="WM-Width-350"><br />
-                            <span>Package ID : {{data.id}}</span>
+                            <span class="CSSD-font">Package ID : {{data.id}}</span>
                         </v-flex>
                     </v-layout>
                     <v-layout row wrap class="ml-4">
@@ -52,7 +52,7 @@
 
             </v-layout>
             <v-layout align-left justify-left wrap class="px-5 my-3">
-                <h3 class="ml-3">Items</h3>
+                <h3 class="ml-3 CSSD-font">Items</h3>
                 <v-flex xs12>
                     <hr class="v-divider theme--light">
                 </v-flex>
diff --git a/resources/js/show/views/TestResult/ShowTestResult.vue b/resources/js/show/views/TestResult/ShowTestResult.vue
index bf7ec45f..e00a872c 100644
--- a/resources/js/show/views/TestResult/ShowTestResult.vue
+++ b/resources/js/show/views/TestResult/ShowTestResult.vue
@@ -3,33 +3,33 @@
     <v-container grid-list-xs>
         <material-card color="black" title="Show Test Result" id="printMe">
             <v-layout align-left justify-left wrap class="px-5 my-3">
-                <h3 class="ml-3">Test Type : {{ TestType }}</h3>
+                <h3 class="ml-3 CSSD-font">Test Type : {{ TestType }}</h3>
                 <v-flex xs12>
                     <hr class="v-divider theme--light" />
                 </v-flex>
                 <v-layout row wrap class="ml-4">
                     <v-flex xs12 md12 sm12>
                         <div class>
-                            <span class="title">{{ data.device_label || 'AutoclaveID' }} :</span>
+                            <span class="title CSSD-font">{{ data.device_label || 'AutoclaveID' }} :</span>
                             <span
-                                class="headline ml-2"
+                                class="headline ml-2 CSSD-font"
                                 style="letter-spacing:0 !important"
                             >{{ data.device_id }}</span>
                         </div>
                     </v-flex>
                     <v-flex xs12 md12 sm12>
                         <div class>
-                            <span class="title">Result :</span>
+                            <span class="title CSSD-font">Result :</span>
                             <v-icon class="green--text ml-2 caption">fas fa-check</v-icon>
                             <span
-                                class="headline ml-1"
+                                class="headline ml-1 CSSD-font"
                                 style="letter-spacing:0 !important"
                             >{{ data.result }}</span>
                         </div>
                     </v-flex>
                     <v-flex xs12 md12 sm12>
                         <div class>
-                            <span class="title">verify :</span>
+                            <span class="title CSSD-font">verify :</span>
                             <v-icon class="pink--text ml-2 caption">fas fa-times</v-icon>
                             <span
                                 class="headline ml-1"
@@ -39,16 +39,16 @@
                     </v-flex>
                     <v-flex xs12 md12 sm12>
                         <div class>
-                            <span class="title">Register User :</span>
+                            <span class="title CSSD-font">Register User :</span>
                             <span
-                                class="headline ml-2"
+                                class="headline ml-2 CSSD-font"
                                 style="letter-spacing:0 !important"
                             >{{ User }}</span>
                         </div>
                     </v-flex>
                     <v-flex xs12 md12 sm12>
                         <div class>
-                            <span class="title">Date :</span>
+                            <span class="title CSSD-font">Date :</span>
                             <span
                                 class="headline ml-2"
                                 style="letter-spacing:0 !important"
@@ -57,9 +57,9 @@
                     </v-flex>
                     <v-flex xs12 md6 sm12>
                         <div class>
-                            <span class="title">Medical Center :</span>
+                            <span class="title CSSD-font">Medical Center :</span>
                             <span
-                                class="headline ml-2"
+                                class="headline ml-2 CSSD-font"
                                 style="letter-spacing:0 !important"
                             >{{ MedicalCenter }}</span>
                         </div>
@@ -67,7 +67,7 @@
                 </v-layout>
             </v-layout>
             <v-layout align-left justify-left wrap class="px-5 my-3">
-                <h3 class="ml-3">Special Info</h3>
+                <h3 class="ml-3 CSSD-font">Special Info</h3>
                 <v-flex xs12>
                     <hr class="v-divider theme--light" />
                 </v-flex>
@@ -82,7 +82,7 @@
                         >
                             <span class="title">{{keyInputs}} :</span>
                             <span
-                                class="headline ml-2"
+                                class="headline ml-2 CSSD-font"
                                 style="letter-spacing:0 !important"
                             >{{inputData}}</span>
                         </v-flex>
@@ -95,10 +95,10 @@
                             v-for="(optionData, keyOptions) in data.options"
                             :key="keyOptions"
                         >
-                            <span class="title">{{keyOptions}} :</span>
+                            <span class="title CSSD-font">{{keyOptions}} :</span>
                             <span
                                 style="letter-spacing:0 !important"
-                                class="headline ml-2"
+                                class="headline ml-2 CSSD-font"
                                 v-for="(data, dataKey) in optionData"
                                 :key="dataKey"
                             >{{data}},</span>
@@ -112,20 +112,20 @@
                             v-for="(formData, keyForm) in data.children"
                             :key="keyForm"
                         >
-                            <h3 class="ml-3">{{keyForm}}</h3>
+                            <h3 class="ml-3 CSSD-font">{{keyForm}}</h3>
                             <div v-for="(childData, keyChild) in formData" :key="keyChild">
                                 <div class="ml-4">
-                                    <span class="title">{{keyChild}} :</span>
+                                    <span class="title CSSD-font">{{keyChild}} :</span>
                                     <template v-if="Array.isArray(childData)">
                                         <span
                                             style="letter-spacing:0 !important"
-                                            class="headline ml-2"
+                                            class="headline ml-2 CSSD-font"
                                             v-for="(data, dataKey) in childData"
                                             :key="dataKey"
                                         >{{data}},</span>
                                     </template>
                                     <template v-else>
-                                        <span class="headline ml-2">{{childData}}</span>
+                                        <span class="headline ml-2 CSSD-font">{{childData}}</span>
                                     </template>
                                 </div>
                             </div>
@@ -134,7 +134,7 @@
                 </v-layout>
             </v-layout>
             <v-layout align-left justify-left wrap class="px-5 my-3">
-                <h3 class="ml-3">Image</h3>
+                <h3 class="ml-3 CSSD-font">Image</h3>
                 <v-flex xs12>
                     <hr class="v-divider theme--light" />
                 </v-flex>
diff --git a/resources/js/vue/components/material/Cards.vue b/resources/js/vue/components/material/Cards.vue
index 3d4b53e5..0737dbc3 100644
--- a/resources/js/vue/components/material/Cards.vue
+++ b/resources/js/vue/components/material/Cards.vue
@@ -77,7 +77,7 @@ export default {
     letter-spacing: 2px !important;
    }
   .subheading {
-    font-size : 11px !important;
+    font-size : 14px !important;
   }
 }
 </style>
\ No newline at end of file
diff --git a/resources/js/vue/components/modal/item/show.vue b/resources/js/vue/components/modal/item/show.vue
index ced94ea4..dd6239f1 100644
--- a/resources/js/vue/components/modal/item/show.vue
+++ b/resources/js/vue/components/modal/item/show.vue
@@ -3,58 +3,58 @@
     <v-container grid-list-xs>
         <material-card color="black" title="Show Item">
             <v-layout align-left id="printMe" justify-left wrap class="px-5 my-3">
-                <h3 class="ml-3"> Item - {{ data.user.medical_center.name }}</h3>
+                <h3 class="ml-3 CSSD-font"> Item - {{ data.user.medical_center.name }}</h3>
                 <v-flex xs12>
                     <hr class="v-divider theme--light">
                 </v-flex>
                 <v-layout row wrap class="ml-4">
                     <v-flex xs12 md6 sm6>
                         <div class>
-                            <span class="title">Item ID :</span>
-                            <span class="headline ml-1" style="letter-spacing:0 !important">{{ data.id }}</span>
+                            <span class="title CSSD-font">Item 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">Name :</span>
-                            <span class="headline ml-1" style="letter-spacing:0 !important">{{ data.name }}</span>
+                            <span class="title CSSD-font">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">Size :</span>
-                            <span class="headline ml-1" style="letter-spacing:0 !important">{{ data.size }}</span>
+                            <span class="title CSSD-font">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">Specific :</span>
-                            <span class="headline ml-1" style="letter-spacing:0 !important">{{ data.specific }}</span>
+                            <span class="title CSSD-font">Specific :</span>
+                            <span class="headline ml-1 CSSD-font" style="letter-spacing:0 !important">{{ data.specific }}</span>
                         </div>
                     </v-flex>
                     <v-flex xs12 md6 sm6>
                         <div class>
-                            <span class="title">Register User :</span>
-                            <span class="headline ml-2" style="letter-spacing:0 !important">{{ (typeof data.user != 'undefined') ? data.user.name : '' }}</span>
+                            <span class="title CSSD-font">Register User :</span>
+                            <span class="headline ml-2 CSSD-font" style="letter-spacing:0 !important">{{ (typeof data.user != 'undefined') ? data.user.name : '' }}</span>
                         </div>
                     </v-flex>
                     <v-flex xs12 md6 sm6>
                         <div class>
-                            <span class="title">Date Register:</span>
-                            <span class="headline ml-2" style="letter-spacing:0 !important">{{ data.created_at }}</span>
+                            <span class="title CSSD-font">Date Register:</span>
+                            <span class="headline ml-2 CSSD-font" style="letter-spacing:0 !important">{{ data.created_at }}</span>
                         </div>
                     </v-flex>
 
                 </v-layout>
                 <v-layout align-left justify-left wrap class="my-3">
-                    <h3 class="ml-3">Barcode And QRCode Image</h3>
+                    <h3 class="ml-3 CSSD-font">Barcode And QRCode Image</h3>
                     <v-flex xs12>
                         <hr class="v-divider theme--light">
                     </v-flex>
                     <v-layout row wrap class="ml-4">
                         <v-flex xs12 md6 sm6 v-if="barcodeimg">
                             <img :src="barcodeimg" class="WM-Width-350"><br />
-                            <span>Item ID : {{data.id}}</span>
+                            <span class="CSSD-font">Item ID : {{data.id}}</span>
                         </v-flex>
                     </v-layout>
                     <v-layout row wrap class="ml-4">
@@ -67,8 +67,9 @@
             <v-layout row wrap align-center justify-center>
                 <v-flex class xs12 md2 sm2 @click="print" >
                     <v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px">
+                        <!-- <v-icon class="white--text mr-2 caption">fas fa-print</v-icon> -->
                         <v-icon class="white--text mr-2 caption">fas fa-print</v-icon>
-                        <span class="white--text">Print</span>
+                        <span class="white--text CSSD-font">Print</span>
                     </v-btn>
                 </v-flex>
             </v-layout>
diff --git a/resources/js/vue/components/modal/package/Show.vue b/resources/js/vue/components/modal/package/Show.vue
index 40f58f7c..d0490d83 100644
--- a/resources/js/vue/components/modal/package/Show.vue
+++ b/resources/js/vue/components/modal/package/Show.vue
@@ -3,7 +3,7 @@
     <v-container grid-list-xs>
         <material-card color="black"  title="Show Package">
             <v-layout id="printMe" align-left justify-left wrap class="px-5 my-3">
-                <h3 class="ml-3">Package - {{ (data.user != null && data.user.medical_center != null) ? data.user.medical_center.name : ''}}</h3>
+                <h3 class="ml-3 CSSD-font">Package - {{ (data.user != null && data.user.medical_center != null) ? data.user.medical_center.name : ''}}</h3>
                 <v-flex xs12>
                     <hr class="v-divider theme--light">
                 </v-flex>
@@ -11,37 +11,37 @@
                     <v-flex xs12 md3 sm3>
                         <div class="WM-d-flex">
                             <v-icon class="WMi-info"></v-icon>
-                            <span class="headline ml-1" style="letter-spacing:0 !important">{{ data.name }}</span>
+                            <span class="headline ml-1 CSSD-font" style="letter-spacing:0 !important">{{ data.name }}</span>
                         </div>
                     </v-flex>
                     <v-flex xs12 md3 sm3>
                         <div class="WM-d-flex">
                             <v-icon class="WMi-Industry"></v-icon>
-                            <span class="headline ml-2" style="letter-spacing:0 !important">{{ data.created_at }}</span>
+                            <span class="headline ml-2 CSSD-font" style="letter-spacing:0 !important">{{ data.created_at }}</span>
                         </div>
                     </v-flex>
                     <v-flex xs12 md3 sm3>
                         <div class="WM-d-flex">
                             <v-icon class="WMi-user"></v-icon>
-                            <span class="headline ml-2" style="letter-spacing:0 !important">{{ data.user ? data.user.name : '' }}</span>
+                            <span class="headline ml-2 CSSD-font" style="letter-spacing:0 !important">{{ data.user ? data.user.name : '' }}</span>
                         </div>
                     </v-flex>
                     <v-flex xs12 md3 sm3>
                         <div class="WM-d-flex">
                             <v-icon class="WMi-pencil"></v-icon>
-                            <span class="headline ml-1" style="letter-spacing:0 !important">{{ data.note }}</span>
+                            <span class="headline ml-1 CSSD-font" style="letter-spacing:0 !important">{{ data.note }}</span>
                         </div>
                     </v-flex>
                 </v-layout>
                 <v-layout align-left justify-left wrap class="my-3">
-                    <h3 class="ml-3">Barcode And QRCode Image</h3>
+                    <h3 class="ml-3 CSSD-font">Barcode And QRCode Image</h3>
                     <v-flex xs12>
                         <hr class="v-divider theme--light">
                     </v-flex>
                     <v-layout row wrap class="ml-4">
                         <v-flex xs12 md6 sm6 v-if="barcodeimg">
                             <img :src="barcodeimg" class="WM-Width-350"><br />
-                            <span>Package ID : {{data.id}}</span>
+                            <span class="CSSD-font">Package ID : {{data.id}}</span>
                         </v-flex>
                     </v-layout>
                     <v-layout row wrap class="ml-4">
@@ -53,7 +53,7 @@
 
             </v-layout>
             <v-layout align-left justify-left wrap class="px-5 my-3">
-                <h3 class="ml-3">Items</h3>
+                <h3 class="ml-3 CSSD-font">Items</h3>
                 <v-flex xs12>
                     <hr class="v-divider theme--light">
                 </v-flex>
@@ -64,7 +64,7 @@
                           v-for="(item, key) in data.items" :key="key"
                         >
                           <template v-slot:header>
-                            <div>{{ key+1 + ": " + item.name }} ({{ item.pivot.count }})</div>
+                            <div class="CSSD-font">{{ key+1 + ": " + item.name }} ({{ item.pivot.count }})</div>
                           </template>
                           <v-card>
                             <v-card-text>note : {{ item.note }}</v-card-text>
diff --git a/resources/js/vue/components/modal/testresult/Show.vue b/resources/js/vue/components/modal/testresult/Show.vue
index cdf45da0..297bcdf1 100644
--- a/resources/js/vue/components/modal/testresult/Show.vue
+++ b/resources/js/vue/components/modal/testresult/Show.vue
@@ -67,7 +67,7 @@
                 </v-layout>
             </v-layout>
             <v-layout align-left justify-left wrap class="px-5 my-3">
-                <h4 class="ml-4 headline font-weight-bold">Special Info</h4>
+                <h4 class="ml-4 headline CSSD-font font-weight-bold">Special Info</h4>
                 <v-flex xs12>
                     <hr class="v-divider theme--light" />
                 </v-flex>
@@ -113,7 +113,7 @@
                             v-for="(formData, keyForm) in data.children"
                             :key="keyForm"
                         >
-                            <h4 class="ml-4 headline font-weight-bold">{{keyForm}}</h4>
+                            <h4 class="ml-4 headline CSSD-font font-weight-bold">{{keyForm}}</h4>
                             <v-layout row wrap>
                             <v-layout row wrap v-for="(childData, keyChild) in formData" :key="keyChild">
                                     <v-flex
@@ -142,7 +142,7 @@
                 </v-layout>
             </v-layout>
             <v-layout align-left justify-left wrap class="px-5 my-3">
-                <h4 class="ml-4 headline font-weight-bold">Image</h4>
+                <h4 class="ml-4 headline CSSD-font font-weight-bold">Image</h4>
                 <v-flex xs12>
                     <hr class="v-divider theme--light" />
                 </v-flex>
diff --git a/resources/js/vue/styles/css/Assets/Main.scss b/resources/js/vue/styles/css/Assets/Main.scss
index 42b6a5aa..4460d3da 100644
--- a/resources/js/vue/styles/css/Assets/Main.scss
+++ b/resources/js/vue/styles/css/Assets/Main.scss
@@ -19,8 +19,8 @@
 body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4,.title,.display-1 {
   font-family: 'Montserrat-Regular' !important;
 }
-.headline {
-  font-family: 'Montserrat-Medium';
+.CSSD-font, .headline.CSSD-font, h3.CSSD-font {
+  font-family: 'Montserrat-Regular' !important;
 }
 .application {
   font-family: 'Montserrat-Regular';
@@ -118,6 +118,7 @@ body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4,.title,.display-1 {
 .v-btn.WM-NoShadow:not(.v-btn--depressed):not(.v-btn--flat) {
   -webkit-box-shadow: none !important;
   box-shadow: none !important;
+  padding: 8px 30px;
 }
 .inputfile {
 	opacity: 0;
@@ -250,18 +251,8 @@ td.FlexBtn .theme--light.v-icon {
 
 
 
-//   .theme--light.v-btn.WM-ActBtn:not(.v-btn--icon):not(.v-btn--flat) {
-//     margin: 5px;
-//     padding: 10px;
-//     min-width: 30px;
-//     display: inline-block;
-// }
-// .theme--light.v-btn.WM-ActBtn:not(.v-btn--icon):not(.v-btn--flat) span {
-//     display: none;
-// }
-// .v-btn.WM-ActBtn__content .v-icon.mr-2 {
-//     margin-right: 0 !important;
-// }
+
+
 table.v-table tbody td.Height-SM-48 {
   height: 48px;
 }
diff --git a/resources/js/vue/views/Cycle/List.vue b/resources/js/vue/views/Cycle/List.vue
index deb41112..a3c0e2c2 100644
--- a/resources/js/vue/views/Cycle/List.vue
+++ b/resources/js/vue/views/Cycle/List.vue
@@ -2,8 +2,8 @@
     <div class>
         <v-container fluid>
             <material-card class color="black" title="All Cycles" text>
-                <v-layout align-center wrap class="my-3">
-                    <v-flex xs12 md2 sm3 class="WM-FlexCenter pl-3">
+                <v-layout align-center wrap class="px-5 my-3">
+                    <v-flex xs12 md2 sm3 class="WM-FlexCenter">
                         <v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"></v-icon>
                         <v-text-field
                             class="py-3 pr-3"
@@ -67,14 +67,14 @@
           							></v-date-picker>
           						</v-menu>
           					</v-flex>
-                    <v-flex class xs12 md12 sm12>
+                    <v-flex class xs12 md2 sm3>
                         <v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px" @click="load()">
                             <v-icon class="white--text mr-2 caption">fas fa-search</v-icon>
                             <span class="white--text">Filter</span>
                         </v-btn>
                     </v-flex>
                     <v-spacer></v-spacer>
-                    <v-flex xs12 md1 sm2 class="text-xs-right">
+                    <v-flex xs12 md2 sm2 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>
@@ -83,8 +83,10 @@
                         </router-link>
                     </v-flex>
                 </v-layout>
-                <v-divider></v-divider>
-                <v-layout align-center wrap class="my-3">
+                <v-layout class="px-4 my-3">
+                	<v-divider></v-divider>
+            	</v-layout>
+                <v-layout align-center wrap class="px-5 my-3">
                     <v-flex md12>
                         <v-data-table :headers="headers" :items="packages" hide-actions>
                             <template slot="headerCell" slot-scope="{ header }">
diff --git a/resources/js/vue/views/Item/List.vue b/resources/js/vue/views/Item/List.vue
index 7703ca74..e9d3706f 100644
--- a/resources/js/vue/views/Item/List.vue
+++ b/resources/js/vue/views/Item/List.vue
@@ -2,8 +2,8 @@
     <div class>
         <v-container fluid>
             <material-card class color="black" title="All Instrument" text>
-                <v-layout align-center wrap class="my-3">
-                    <v-flex xs12 md3 sm3 class="WM-FlexCenter pl-3">
+                <v-layout align-center wrap class="my-3 px-5">
+                    <v-flex xs12 md3 sm3 class="WM-FlexCenter">
                         <v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"></v-icon>
                         <v-text-field
                             class="py-3 pr-3"
@@ -45,7 +45,7 @@
                     <v-flex class xs12 md2 sm3>
                         <v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px" @click="load()">
                             <v-icon class="white--text mr-2 caption">fas fa-search</v-icon>
-                            <span class="white--text">Filter</span>
+                            <span class="white--text CSSD-font">Filter</span>
                         </v-btn>
                     </v-flex>
                     <v-spacer></v-spacer>
@@ -53,13 +53,15 @@
                         <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>
+                                <span class="black--text CSSD-font">Add</span>
                             </v-btn>
                         </router-link>
                     </v-flex>
                 </v-layout>
-                <v-divider></v-divider>
-                <v-layout align-center wrap class="my-3">
+                <v-layout class="px-4 my-3">
+                    <v-divider></v-divider>
+                </v-layout>
+                <v-layout align-center wrap class="my-3 px-5">
                     <v-flex md12>
                         <v-data-table :headers="headers" :items="items" hide-actions>
                             <template slot="headerCell" slot-scope="{ header }">
@@ -116,7 +118,7 @@
                                     <template v-slot:activator="{ on, attrs }">
                                     <v-btn class="mr-2" v-bind="attrs" v-on="on" color="orange darken-1" @click="generateBarcode(item.id, 'Item')">
                                         <v-icon class="white--text mr-2 caption">fas fa-barcode</v-icon>
-                                        <span>Generate Barcode</span>
+                                        <span class="CSSD-font">Generate Barcode</span>
                                     </v-btn>
                                     </template>
                                     <span>Generate Barcode</span>
@@ -134,7 +136,7 @@
                     <router-link to="/dashboard">
                         <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black ml-5">
                             <v-icon class="black--text mr-2 caption">fas fa-chevron-left</v-icon>
-                            <span class="black--text">Back</span>
+                            <span class="black--text CSSD-font">Back</span>
                         </v-btn>
                     </router-link>
                 </v-layout>
diff --git a/resources/js/vue/views/Label/List.vue b/resources/js/vue/views/Label/List.vue
index 94c121b9..e2a6ccaf 100644
--- a/resources/js/vue/views/Label/List.vue
+++ b/resources/js/vue/views/Label/List.vue
@@ -2,8 +2,8 @@
 	<div class>
 		<v-container fluid>
 			<material-card class color="black" title="All Labels" text>
-				<v-layout align-center wrap class="my-3">
-					<v-flex xs12 md3 sm3 class="WM-FlexCenter pl-3">
+				<v-layout align-center wrap class="px-5 my-3">
+					<v-flex xs12 md3 sm3 class="WM-FlexCenter">
 						<v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"></v-icon>
 						<v-text-field class="py-3" v-model="filter.label_id" label="Label ID" color="black"></v-text-field>
 					</v-flex>
@@ -23,22 +23,13 @@
 					</v-flex>
 					<v-flex xs12 md3 sm3 class="WM-FlexCenter pl-3">
 						<v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"></v-icon>
-						<!-- <v-autocomplete
-							class="py-3 pr-3"
-							v-model="filter.user_id"
-							item-text="name"
-							item-value="id"
-							label="Users"
-							color="black"
-							:items="users"
-						></v-autocomplete> -->
 						<v-text-field class="py-3" v-model="filter.sterilizer_id" label="Sterilizer ID" color="black"></v-text-field>
 					</v-flex>
 					<v-flex xs12 md3 sm3 class="WM-FlexCenter pl-3">
 						<v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"></v-icon>
 						<v-text-field class="py-3" v-model="filter.cycle_number" label="Cycle Number" color="black"></v-text-field>
 					</v-flex>
-					<v-flex xs12 md2 sm3 class="ml-3">
+					<v-flex xs12 md2 sm3>
 						<v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px" @click="load()">
 							<v-icon class="white--text mr-2 caption">fas fa-search</v-icon>
 							<span class="white--text">Filter</span>
@@ -54,8 +45,10 @@
 						</router-link>
 					</v-flex>
 				</v-layout>
-				<v-divider></v-divider>
-				<v-layout align-center wrap class="my-3">
+				<v-layout class="px-4 my-3">
+                	<v-divider></v-divider>
+            	</v-layout>
+				<v-layout align-center wrap class="px-5 my-3">
 					<v-flex md12>
 						<v-data-table :headers="headers" :items="items" hide-actions>
 							<template slot="headerCell" slot-scope="{ header }">
diff --git a/resources/js/vue/views/Package/List.vue b/resources/js/vue/views/Package/List.vue
index c5099d23..d165c75c 100644
--- a/resources/js/vue/views/Package/List.vue
+++ b/resources/js/vue/views/Package/List.vue
@@ -2,8 +2,8 @@
     <div class>
         <v-container fluid>
             <material-card class color="black" title="All Packages" text>
-                <v-layout align-center wrap class="my-3">
-                    <v-flex xs12 md3 sm3 class="WM-FlexCenter pl-3">
+                <v-layout align-center wrap class="mt-3 px-5">
+                    <v-flex xs12 md3 sm3 class="WM-FlexCenter">
                         <v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"></v-icon>
                         <v-text-field
                             class="py-3 pr-3"
@@ -33,6 +33,17 @@
                         :items="medicalCenters"
                       ></v-autocomplete>
                     </v-flex>
+                    <!-- <v-flex class xs12 md2 sm3>
+                        <v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px" @click="load()">
+                            <v-icon class="white--text mr-2 caption">fas fa-search</v-icon>
+                            <span class="white--text">Filter</span>
+                        </v-btn>
+                    </v-flex>
+                    <v-spacer></v-spacer> -->
+                    <!-- <v-spacer></v-spacer> -->
+                    
+                </v-layout>
+                <v-layout align-center wrap class="mb-3 px-5">
                     <v-flex class xs12 md2 sm3>
                         <v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px" @click="load()">
                             <v-icon class="white--text mr-2 caption">fas fa-search</v-icon>
@@ -40,7 +51,7 @@
                         </v-btn>
                     </v-flex>
                     <v-spacer></v-spacer>
-                    <v-flex xs12 md2 sm2 class="text-xs-left ml-3">
+                    <v-flex xs12 md2 sm2 class="text-xs-right ml-3">
                         <router-link :to="{name: 'AddPackage'}">
                             <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black">
                                 <v-icon class="black--text mr-2 caption">fas fa-plus</v-icon>
@@ -48,10 +59,11 @@
                             </v-btn>
                         </router-link>
                     </v-flex>
-                    
                 </v-layout>
-                <v-divider></v-divider>
-                <v-layout align-center wrap class="my-3">
+                <v-layout class="px-4 my-3">
+                    <v-divider></v-divider>
+                </v-layout>
+                <v-layout align-center wrap class="my-3 px-5">
                     <v-flex md12>
                         <v-data-table :headers="headers" :items="items" hide-actions>
                             <template slot="headerCell" slot-scope="{ header }">
diff --git a/resources/js/vue/views/TestResult/List.vue b/resources/js/vue/views/TestResult/List.vue
index 06522607..db545657 100644
--- a/resources/js/vue/views/TestResult/List.vue
+++ b/resources/js/vue/views/TestResult/List.vue
@@ -58,9 +58,7 @@
                             color="black"
                         ></v-text-field>
                     </v-flex>
-                </v-layout>
-                <v-layout wrap class="px-5 mb-3 my-3">
-                    <v-flex xs12 sm6 md2 class="WM-FlexCenter">
+                    <v-flex xs12 sm6 md2 pl-3 class="WM-FlexCenter">
                         <v-icon class="far fa-calendar-alt mr-2"></v-icon>
                         <v-menu
                             lazy
@@ -70,6 +68,7 @@
                             v-model="fromMenu"
                         >
                             <v-text-field
+                                class="py-3 pr-3"
                                 required
                                 slot="activator"
                                 label="FromDate"
@@ -84,7 +83,7 @@
                             ></v-date-picker>
                         </v-menu>
                     </v-flex>
-                    <v-flex xs12 sm6 md2 style="display: flex;align-items: center;">
+                    <v-flex xs12 sm6 md2 pl-3 style="display: flex;align-items: center;">
                         <v-icon class="far fa-calendar-alt mr-2"></v-icon>
                         <v-menu
                             lazy
@@ -94,6 +93,7 @@
                             v-model="upToMenu"
                         >
                             <v-text-field
+                                class="py-3 pr-3"
                                 required
                                 slot="activator"
                                 label="UpToDate"
@@ -108,15 +108,14 @@
                             ></v-date-picker>
                         </v-menu>
                     </v-flex>
-                    <!-- <v-spacer></v-spacer> -->
-                    <v-flex class xs12 md3 sm3 class="WM-XL-Align-L text-lg-center">
+                    <v-flex class xs12 md3 sm3 class="WM-XL-Align-L text-lg-left">
                         <v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px" @click="load(null, null)">
                             <v-icon class="white--text mr-2 caption">fas fa-search</v-icon>
                             <span class="white--text">Filter</span>
                         </v-btn>
                     </v-flex>
                     <v-spacer></v-spacer>
-                    <v-flex wrap xs12 md1 sm1 class="WM-Align-R">
+                    <v-flex wrap xs12 md2 sm2 class="WM-Align-R">
                         <router-link :to="{name: 'SubmitTestResult'}">
                             <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black">
                                 <v-icon class="black--text mr-2 caption">fas fa-plus</v-icon>
@@ -125,6 +124,23 @@
                         </router-link>
                     </v-flex>
                 </v-layout>
+                <v-layout wrap class="px-5 mb-3 my-3">
+                    <!-- <v-flex class xs12 md3 sm3 class="WM-XL-Align-L text-lg-left">
+                        <v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px" @click="load(null, null)">
+                            <v-icon class="white--text mr-2 caption">fas fa-search</v-icon>
+                            <span class="white--text">Filter</span>
+                        </v-btn>
+                    </v-flex>
+                    <v-spacer></v-spacer>
+                    <v-flex wrap xs12 md2 sm2 class="WM-Align-R">
+                        <router-link :to="{name: 'SubmitTestResult'}">
+                            <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black">
+                                <v-icon class="black--text mr-2 caption">fas fa-plus</v-icon>
+                                <span class="black--text">Add</span>
+                            </v-btn>
+                        </router-link>
+                    </v-flex> -->
+                </v-layout>
                 <v-layout class="px-4 my-3">
                     <v-divider></v-divider>
                 </v-layout>
diff --git a/resources/js/vue/views/TestResult/Show.vue b/resources/js/vue/views/TestResult/Show.vue
index 6cbc4f12..15e37d2e 100644
--- a/resources/js/vue/views/TestResult/Show.vue
+++ b/resources/js/vue/views/TestResult/Show.vue
@@ -10,40 +10,40 @@
 					<v-flex xs12 md6 sm6>
 						<div class>
 							<span class="title">{{ data.device_label || 'AutoclaveID' }} :</span>
-							<span class="headline ml-2" style="letter-spacing:0 !important">{{ data.device_id }}</span>
+							<span class="headline SCCD-font ml-2" style="letter-spacing:0 !important">{{ data.device_id }}</span>
 						</div>
 					</v-flex>
 					<v-flex xs12 md6 sm6>
 						<div class>
 							<span class="title">Result :</span>
 							<v-icon class="green--text ml-2 caption">fas fa-check</v-icon>
-							<span class="headline ml-1" style="letter-spacing:0 !important">{{ data.result }}</span>
+							<span class="headline SCCD-font ml-1" style="letter-spacing:0 !important">{{ data.result }}</span>
 						</div>
 					</v-flex>
 					<v-flex xs12 md6 sm6>
 						<div class>
 							<span class="title">verify :</span>
 							<v-icon class="pink--text ml-2 caption">fas fa-times</v-icon>
-							<span class="headline ml-1" style="letter-spacing:0 !important">{{ data.verified }}</span>
+							<span class="headline SCCD-font ml-1" style="letter-spacing:0 !important">{{ data.verified }}</span>
 						</div>
 					</v-flex>
 					<v-flex xs12 md6 sm6>
 						<div class>
 							<span class="title">Register User :</span>
-							<span class="headline ml-2" style="letter-spacing:0 !important">{{ data.user.name }}</span>
+							<span class="headline SCCD-font ml-2" style="letter-spacing:0 !important">{{ data.user.name }}</span>
 						</div>
 					</v-flex>
 					<v-flex xs12 md6 sm6>
 						<div class>
 							<span class="title">Date :</span>
-							<span class="headline ml-2" style="letter-spacing:0 !important">{{ data.created_at }}</span>
+							<span class="headline SCCD-font ml-2" style="letter-spacing:0 !important">{{ data.created_at }}</span>
 						</div>
 					</v-flex>
 					<v-flex xs12 md6 sm6>
 						<div class>
 							<span class="title">Medical Center :</span>
 							<span
-								class="headline ml-2"
+								class="headline SCCD-font ml-2"
 								style="letter-spacing:0 !important"
 							>{{ data.user.medical_center.name }}</span>
 						</div>
@@ -59,7 +59,7 @@
 					<template v-if="data.inputs">
 						<v-flex xs12 md6 sm6 v-for="(inputData, keyInputs) in data.inputs" :key="keyInputs">
 							<span class="title">{{keyInputs}} :</span>
-							<span class="headline ml-2" style="letter-spacing:0 !important">{{inputData}}</span>
+							<span class="headline SCCD-font ml-2" style="letter-spacing:0 !important">{{inputData}}</span>
 						</v-flex>
 					</template>
 					<template v-if="data.options">
@@ -67,7 +67,7 @@
 							<span class="title">{{keyOptions}} :</span>
 							<span
 								style="letter-spacing:0 !important"
-								class="headline ml-2"
+								class="headline SCCD-font ml-2"
 								v-for="(data, dataKey) in optionData"
 								:key="dataKey"
 							>{{data}},</span>
@@ -82,13 +82,13 @@
 									<template v-if="Array.isArray(childData)">
 										<span
 											style="letter-spacing:0 !important"
-											class="headline ml-2"
+											class="headline SCCD-font ml-2"
 											v-for="(data, dataKey) in childData"
 											:key="dataKey"
 										>{{data}},</span>
 									</template>
 									<template v-else>
-										<span class="headline ml-2">{{childData}}</span>
+										<span class="headline SCCD-font ml-2">{{childData}}</span>
 									</template>
 								</div>
 							</div>
diff --git a/resources/js/vue/views/TestType/List.vue b/resources/js/vue/views/TestType/List.vue
index 2012096d..cb87523d 100644
--- a/resources/js/vue/views/TestType/List.vue
+++ b/resources/js/vue/views/TestType/List.vue
@@ -2,7 +2,7 @@
    <v-container fluid>
        <material-card class color="black" title="TestType List" text>
            <v-layout wrap class="px-5 mb-3">
-               <v-flex xs12 md3 sm3 class="WM-FlexCenter pl-3">
+               <v-flex xs12 md3 sm3 class="WM-FlexCenter">
                    <v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"></v-icon>
                    <v-text-field class="py-3 pr-3" label="Name" v-model="filter.name" color="black"></v-text-field>
                </v-flex>
@@ -14,18 +14,9 @@
                    <v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"></v-icon>
                    <v-text-field class="py-3 pr-3" label="UserName" v-model="filter.user_name" color="black"></v-text-field>
                </v-flex>
-               <v-spacer></v-spacer>
-               <v-flex xs12 md2 sm2 class="text-xs-right">
-                   <router-link :to="{name: 'AddTestType'}">
-                       <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black">
-                           <v-icon class="black--text mr-2 caption">fas fa-plus</v-icon>
-                           <span class="black--text">Add</span>
-                       </v-btn>
-                   </router-link>
-               </v-flex>
            </v-layout>
            <v-layout wrap class="px-5 mb-3">
-               <v-flex xs12 sm6 md2 class="WM-FlexCenter pl-3">
+               <v-flex xs12 sm6 md2 class="WM-FlexCenter">
                    <v-icon class="far fa-calendar-alt mr-2"></v-icon>
                    <v-menu
                        lazy
@@ -73,8 +64,8 @@
                        ></v-date-picker>
                    </v-menu>
                </v-flex>
-               <v-spacer></v-spacer>
-               <v-flex xs12 md2 sm2 class="text-xs-right">
+               
+               <v-flex xs12 md2 sm2 class="text-xs-right ml-4">
                    <v-btn
                        class="WM-CyanBlueGradient-BG"
                        style="padding:10px 60px"
@@ -84,6 +75,15 @@
                        <span class="white--text">Filter</span>
                    </v-btn>
                </v-flex>
+               <v-spacer></v-spacer>
+               <v-flex xs12 md2 sm2 class="text-xs-right">
+                   <router-link :to="{name: 'AddTestType'}">
+                       <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black">
+                           <v-icon class="black--text mr-2 caption">fas fa-plus</v-icon>
+                           <span class="black--text">Add</span>
+                       </v-btn>
+                   </router-link>
+               </v-flex>
            </v-layout>
            <v-layout class="px-4 my-3">
                <v-divider></v-divider>
diff --git a/resources/js/vue/views/Tickets/List.vue b/resources/js/vue/views/Tickets/List.vue
index 0cc66d10..62da0d05 100644
--- a/resources/js/vue/views/Tickets/List.vue
+++ b/resources/js/vue/views/Tickets/List.vue
@@ -5,7 +5,7 @@
                 <v-toolbar-title></v-toolbar-title>
                 <v-divider class="mx-2" inset vertical></v-divider>
                 <v-spacer></v-spacer>
-                <v-btn color="black" @click="newmessage" class="WM-ActionButton mb-2">
+                <v-btn color="black" @click="newmessage" class="WM-ActionButton mb-2 mr-4">
                     <v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>
                     <span>New Message</span>
                 </v-btn>
diff --git a/resources/js/vue/views/User/List.vue b/resources/js/vue/views/User/List.vue
index 8e8d035d..b5e1584f 100644
--- a/resources/js/vue/views/User/List.vue
+++ b/resources/js/vue/views/User/List.vue
@@ -2,7 +2,7 @@
     <v-container grid-list-xs>
         <material-card color="black" title="Member List">
             <v-layout align-center justify-center wrap class="px-5 mb-3">
-                <v-flex xs12 md3 sm3 class="WM-FlexCenter pl-3">
+                <v-flex xs12 md3 sm3 class="WM-FlexCenter">
                     <v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"></v-icon>
                     <v-text-field
                         class="py-3 pr-3"
@@ -47,7 +47,7 @@
                 </v-flex>
             </v-layout>
             <v-layout class="px-5 mb-3">
-                <v-flex xs12 sm12 md2 class="WM-FlexCenter pl-3">
+                <v-flex xs12 sm12 md2 class="WM-FlexCenter">
                     <v-icon class="far fa-calendar-alt mr-2"></v-icon>
                     <v-menu
                         lazy
@@ -96,8 +96,8 @@
                         ></v-date-picker>
                     </v-menu>
                 </v-flex>
-                <v-spacer></v-spacer>
-                <v-flex wrap xs12 md2 sm12 class="WM-Align-R">
+                <!-- <v-spacer></v-spacer> -->
+                <v-flex wrap xs12 md2 sm12 class="WM-Align-R ml-4">
                     <v-btn
                         class="WM-CyanBlueGradient-BG"
                         style="padding:10px 60px"
diff --git a/resources/js/vue/views/User/MyInfo.vue b/resources/js/vue/views/User/MyInfo.vue
index 6748cf49..9831012e 100644
--- a/resources/js/vue/views/User/MyInfo.vue
+++ b/resources/js/vue/views/User/MyInfo.vue
@@ -74,13 +74,13 @@
               <span class="white--text">SAVE</span>
             </v-btn>
           </v-flex>
-          <v-flex xs12 md2 sm2 class="text-md-center text-sm-center text-xs-center">
+          <v-flex xs12 md3 sm3 class="text-md-center text-sm-center text-xs-center">
               <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black" @click="changePassword">
                 <v-icon class="black--text mr-1">fas fa-refresh</v-icon>
                 <span class="black--text"> Change Password </span>
               </v-btn>
           </v-flex>
-          <v-flex xs12 md2 sm2 class="text-md-center text-sm-center text-xs-center">
+          <v-flex xs12 md1 sm1 class="text-md-center text-sm-center text-xs-center">
             <router-link :to="{name: 'Dashboard'}">
               <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black">
                 <v-icon class="black--text">keyboard_arrow_left</v-icon>