diff --git a/src/pages/Academic/assignment.vue b/src/pages/Academic/assignment.vue
index dc8dea8..a7e2219 100644
--- a/src/pages/Academic/assignment.vue
+++ b/src/pages/Academic/assignment.vue
@@ -2,7 +2,7 @@
   <v-container fluid class="body-color">
     <!-- ****** EDIT  Assignment ****** -->
     <v-dialog v-model="editAssignmentDialog" max-width="400px" persistent>
-      <v-card flat class="card-style pa-2" dark>
+      <v-card flat class="Card-style pa-2">
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Edit Assignment</label>
@@ -142,7 +142,7 @@
 
     <!-- ****** VIEW PROFIL NOTICE BOARD ******  -->
     <v-dialog v-model="viewAssignmentDialog" max-width="500px" persistent>
-      <v-card flat class="card-style pa-3" dark>
+      <v-card flat class="Card-style pa-3">
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">View Attendence</label>
@@ -330,7 +330,7 @@
       :color="color"
     >{{ text }}</v-snackbar>
     <v-dialog v-model="addAssignmentDialog" max-width="400px" v-if="addAssignmentDialog" persistent>
-      <v-card flat class="card-style pa-2" dark>
+      <v-card flat class="Card-style pa-2">
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Add Assignment</label>
diff --git a/src/pages/Academic/routine.vue b/src/pages/Academic/routine.vue
index ad67de1..3d945b4 100644
--- a/src/pages/Academic/routine.vue
+++ b/src/pages/Academic/routine.vue
@@ -2,7 +2,7 @@
   <v-container fluid class="body-color">
     <!-- ****** EDIT  Subject ****** -->
     <v-dialog v-model="editRoutineDialog" max-width="600px" persistent>
-      <v-card flat class="card-style pa-2" dark>
+      <v-card flat class="Card-style pa-2">
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Edit Routine</label>
@@ -374,7 +374,7 @@
     >{{ text }}</v-snackbar>
     <v-dialog v-model="addRoutineDialog" max-width="600px" v-if="addRoutineDialog" persistent>
       v-if="addRoutineDialog"
-      <v-card flat class="card-style pa-2" dark>
+      <v-card flat class="Card-style pa-2">
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Add Routine</label>
diff --git a/src/pages/Academic/subject.vue b/src/pages/Academic/subject.vue
index 6d3d925..3cad04f 100644
--- a/src/pages/Academic/subject.vue
+++ b/src/pages/Academic/subject.vue
@@ -2,7 +2,7 @@
   <v-container fluid class="body-color">
     <!-- ****** EDIT  Subject ****** -->
     <v-dialog v-model="editSubjectDialog" max-width="600px" persistent>
-      <v-card flat class="card-style pa-2" dark>
+      <v-card flat class="Card-style pa-2">
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Edit Subject</label>
@@ -150,7 +150,7 @@
     <!-- ****** VIEW PROFIL NOTICE BOARD ******  -->
 
     <v-dialog v-model="viewSubjectDialog" max-width="500px" persistent>
-      <v-card flat class="card-style pa-3" dark>
+      <v-card flat class="Card-style pa-3">
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">View Subject</label>
@@ -174,7 +174,7 @@
                 <v-layout>
                   <v-flex xs6 sm4>
                     <h5 class="right my-1">
-                      <b>Subject Author:</b>
+                      <b>Sub Author:</b>
                     </h5>
                   </v-flex>
                   <v-flex sm8 xs6>
@@ -366,7 +366,7 @@
       :color="color"
     >{{ text }}</v-snackbar>
     <v-dialog v-model="addSubjectDialog" max-width="600px" v-if="addSubjectDialog" persistent>
-      <v-card flat class="card-style pa-2" dark>
+      <v-card flat class="Card-style pa-2">
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Add Subject</label>
diff --git a/src/pages/Academic/syllabus.vue b/src/pages/Academic/syllabus.vue
index 773b20d..6ec9643 100644
--- a/src/pages/Academic/syllabus.vue
+++ b/src/pages/Academic/syllabus.vue
@@ -2,7 +2,7 @@
   <v-container fluid class="body-color">
     <!-- ****** EDIT  Syllabus ****** -->
     <v-dialog v-model="editSyllabusDialog" max-width="400px" persistent>
-      <v-card flat class="card-style pa-2" dark>
+      <v-card flat class="Card-style pa-2">
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Edit Syllabus</label>
@@ -263,7 +263,7 @@
       :color="color"
     >{{ text }}</v-snackbar>
     <v-dialog v-model="addSyllabusDialog" max-width="400px" v-if="addSyllabusDialog" persistent>
-      <v-card flat class="card-style pa-2" dark>
+      <v-card flat class="Card-style pa-2">
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Add Syllabus</label>
diff --git a/src/pages/Account/editInvoice.vue b/src/pages/Account/editInvoice.vue
index e5e5fe5..134f033 100644
--- a/src/pages/Account/editInvoice.vue
+++ b/src/pages/Account/editInvoice.vue
@@ -122,7 +122,7 @@
                         round
                         dark
                         :loading="loading"
-                        class="add-button"
+                        class="cancel-btn"
                       >Update</v-btn>
                     </v-card-actions>
                   </v-flex>
diff --git a/src/pages/Account/expense.vue b/src/pages/Account/expense.vue
index 253ee77..45d7a06 100644
--- a/src/pages/Account/expense.vue
+++ b/src/pages/Account/expense.vue
@@ -2,7 +2,7 @@
   <v-container fluid class="body-color">
     <!-- ****** EDIT EXPENSE  ****** -->
     <v-dialog v-model="editExpenseDialog" max-width="600px" scrollable persistent>
-      <v-card flat class="card-style pa-2" dark>
+      <v-card flat class="Card-style pa-2">
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Edit Expense Profile</label>
@@ -157,7 +157,7 @@
     <!-- ****** PROFILE VIEW EXPENSE DETAILS ******  -->
 
     <v-dialog v-model="viewExpenseDialog" max-width="600px" scrollable persistent>
-      <v-card flat class="card-style pa-3" dark>
+      <v-card flat class="Card-style pa-3">
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">View Expense</label>
@@ -325,7 +325,7 @@
 
     <!-- ****** Add Expense Data ****** -->
     <v-dialog v-model="addExpenseDialog" max-width="600px" v-if="addExpenseDialog" persistent>
-      <v-card flat class="card-style pa-2" dark>
+      <v-card flat class="Card-style pa-2">
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Add Expense</label>
diff --git a/src/pages/Account/feeTypes.vue b/src/pages/Account/feeTypes.vue
index dba3f86..cded829 100644
--- a/src/pages/Account/feeTypes.vue
+++ b/src/pages/Account/feeTypes.vue
@@ -2,7 +2,7 @@
   <v-container fluid class="body-color">
     <!-- ****** EDIT  SECTION  ****** -->
     <v-dialog v-model="editFeeTypeDialog" max-width="600px" persistent>
-      <v-card flat class="card-style pa-2" dark>
+      <v-card flat class="Card-style pa-2">
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Edit Fee Type</label>
@@ -58,7 +58,7 @@
     <!-- ****** PROFILE VIEW FEE TYPE DATA ******  -->
 
     <v-dialog v-model="viewFeeTypeDialog" max-width="400px" persistent>
-      <v-card flat class="card-style pa-3" dark>
+      <v-card flat class="Card-style pa-3">
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">View Fee Type</label>
@@ -193,7 +193,7 @@
 
     <!-- ****** ADD Fee Type ****** -->
     <v-dialog v-model="addFeeTypeDialog" max-width="500px" v-if="addFeeTypeDialog" persistent>
-      <v-card flat class="card-style pa-2" dark>
+      <v-card flat class="Card-style pa-2">
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Add Fee Type</label>
diff --git a/src/pages/Account/income.vue b/src/pages/Account/income.vue
index 5471d57..18a9006 100644
--- a/src/pages/Account/income.vue
+++ b/src/pages/Account/income.vue
@@ -2,7 +2,7 @@
   <v-container fluid class="body-color">
     <!-- ****** EDIT Income DETAILS ****** -->
     <v-dialog v-model="editIncomeDialog" max-width="600px" scrollable persistent>
-      <v-card flat class="card-style pa-2" dark>
+      <v-card flat class="Card-style pa-2">
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Edit Income</label>
@@ -153,7 +153,7 @@
 
     <!-- ****** PROFILE VIEW INCOME DETAILS ******  -->
     <v-dialog v-model="profileIncomeDialog" max-width="400px" persistent>
-      <v-card flat class="card-style pa-3" dark>
+      <v-card flat class="Card-style pa-3">
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">View Income</label>
@@ -322,7 +322,7 @@
 
     <!-- ****** Add Income Data****** -->
     <v-dialog v-model="addIncomeDialog" max-width="600px" v-if="addIncomeDialog" persistent>
-      <v-card flat class="card-style pa-2" dark>
+      <v-card flat class="Card-style pa-2">
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Add Income</label>
diff --git a/src/pages/Account/invoice.vue b/src/pages/Account/invoice.vue
index a0f0a20..d88d898 100644
--- a/src/pages/Account/invoice.vue
+++ b/src/pages/Account/invoice.vue
@@ -2,11 +2,11 @@
   <v-container fluid class="body-color">
     <!-- ****** Edit INVOICE ****** -->
     <v-dialog v-model="editInvoiceDialog" persistent>
-      <v-card flat class="text-xs-center white--text">
+      <v-card flat class="text-xs-center">
         <v-layout>
-          <v-flex xs12 class="card-styles pa-2">
+          <v-flex xs12 class="Card-style pa-2">
             <label class="title text-xs-center">Edit Invoice</label>
-            <v-icon size="24" class="right white--text" @click="editInvoiceDialog = false">cancel</v-icon>
+            <v-icon size="24" class="right" @click="editInvoiceDialog = false">cancel</v-icon>
           </v-flex>
         </v-layout>
         <editInvoice :editData="editData" @update-editInvoice="updateDoneInvoice" />
@@ -15,11 +15,11 @@
 
     <!-- ****PAYMENT INVOICE DIALOG -->
     <v-dialog v-model="paymentInvoiceDialog" persistent>
-      <v-card flat class="text-xs-center white--text">
+      <v-card flat class="text-xs-center">
         <v-layout>
-          <v-flex xs12 class="card-styles pa-2">
+          <v-flex xs12 class="Card-style pa-2">
             <label class="title text-xs-center">Payment Template</label>
-            <v-icon size="24" class="right white--text" @click="paymentInvoiceDialog = false">cancel</v-icon>
+            <v-icon size="24" class="right" @click="paymentInvoiceDialog = false">cancel</v-icon>
           </v-flex>
         </v-layout>
         <paymentTemplate :editPayment="editPayment" @update-Payment="updatePayment" />
@@ -29,11 +29,11 @@
     <!-- ****** PROFILE VIEW SECTION DATA ******  -->
 
     <v-dialog v-model="dialog1" max-width="800px" persistent>
-      <v-card flat class="text-xs-center white--text">
+      <v-card flat class="text-xs-center">
         <v-layout>
-          <v-flex xs12 class="card-style pa-2">
+          <v-flex xs12 class="Card-style pa-2">
             <label class="title text-xs-center">View Payments</label>
-            <v-icon size="24" class="right" color="white" @click="dialog1 = false">cancel</v-icon>
+            <v-icon size="24" class="right" @click="dialog1 = false">cancel</v-icon>
           </v-flex>
         </v-layout>
         <table class="feeTypeTable tableRsponsive">
@@ -262,11 +262,11 @@
       :color="color"
     >{{ text }}</v-snackbar>
     <v-dialog v-model="addInvoiceDialog" v-if="addInvoiceDialog" persistent>
-      <v-card flat class="text-xs-center white--text">
+      <v-card flat class="text-xs-center">
         <v-layout>
-          <v-flex xs12 class="card-styles pa-2">
+          <v-flex xs12 class="Card-style pa-2">
             <label class="title text-xs-center">Add Invoice</label>
-            <v-icon size="24" class="right white--text" @click="closeAddInvoiceModel">cancel</v-icon>
+            <v-icon size="24" class="right" @click="closeAddInvoiceModel">cancel</v-icon>
           </v-flex>
         </v-layout>
         <v-flex xs12 sm12>
@@ -1137,7 +1137,7 @@ table.feeTypeTable {
   text-align: center !important;
   padding-top: 10px !important;
 }
-.add-button {
+/* .add-button {
   background: #feb83c !important;
   border-color: #feb83c !important;
   text-transform: none !important;
@@ -1150,7 +1150,7 @@ table.feeTypeTable {
   text-transform: none !important;
   -webkit-box-shadow: none !important;
   box-shadow: none !important;
-}
+} */
 .card-styles {
   background: #7f62f8 !important;
   border-color: #7f62f8 !important;
diff --git a/src/pages/Account/paymentHistory.vue b/src/pages/Account/paymentHistory.vue
index 3abc77c..e27e1a5 100644
--- a/src/pages/Account/paymentHistory.vue
+++ b/src/pages/Account/paymentHistory.vue
@@ -2,7 +2,7 @@
   <v-container fluid class="body-color">
     <!-- ****** Edit  Payment History  ****** -->
     <v-dialog v-model="editPaymentDialog" max-width="400px" persistent>
-      <v-card flat class="card-style pa-2" dark>
+      <v-card flat class="Card-style pa-2">
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Edit Payment History</label>
diff --git a/src/pages/Account/paymentTemplate.vue b/src/pages/Account/paymentTemplate.vue
index 76df9eb..094d0a1 100644
--- a/src/pages/Account/paymentTemplate.vue
+++ b/src/pages/Account/paymentTemplate.vue
@@ -98,6 +98,7 @@
                   <v-spacer class="hidden-xs-only"></v-spacer>
                   <v-btn
                     color="open-dialog-button"
+                    round
                     dark
                     class="right add-button"
                     @click="update(editPayment)"
diff --git a/src/pages/Account/viewInvoice.vue b/src/pages/Account/viewInvoice.vue
index 5cf2446..fb8b2b9 100644
--- a/src/pages/Account/viewInvoice.vue
+++ b/src/pages/Account/viewInvoice.vue
@@ -455,7 +455,7 @@ export default {
   text-align: center !important;
   padding-top: 10px !important;
 }
-.add-button {
+/* .add-button {
   background: #feb83c !important;
   border-color: #feb83c !important;
   text-transform: none !important;
@@ -468,7 +468,7 @@ export default {
   text-transform: none !important;
   -webkit-box-shadow: none !important;
   box-shadow: none !important;
-}
+} */
 .card-styles {
   background: #7f62f8 !important;
   border-color: #7f62f8 !important;
diff --git a/src/pages/Administrator/academicYear.vue b/src/pages/Administrator/academicYear.vue
index 6a219db..09d523f 100644
--- a/src/pages/Administrator/academicYear.vue
+++ b/src/pages/Administrator/academicYear.vue
@@ -1,8 +1,8 @@
 <template>
   <v-container fluid class="body-color">
     <!-- ****** EDIT ACADEMIC YEAR ****** -->
-    <v-dialog v-model="editAcademinYearDialog" max-width="600px" persistent >
-      <v-card flat class="card-style pa-2" dark>
+    <v-dialog v-model="editAcademinYearDialog" max-width="600px" persistent>
+      <v-card flat class="Card-style pa-2">
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Edit Academic Year</label>
@@ -125,7 +125,7 @@
     </v-dialog>
     <!-- ****** PROFILE ACADEMIC YEAR DEATILS ******  -->
     <v-dialog v-model="viewAcademinYearDialog" max-width="500px" persistent>
-      <v-card flat class="card-style pa-3" dark>
+      <v-card flat class="Card-style pa-3">
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">View Academic Year</label>
@@ -285,8 +285,13 @@
       >Your search for "{{ search }}" found no results.</v-alert>
     </v-data-table>
     <!-- ****** ADD ACADEMIC YEAR ****** -->
-    <v-dialog v-model="addAcademicYearDialog" max-width="600px" v-if="addAcademicYearDialog" persistent>
-      <v-card flat class="card-style pa-2" dark>
+    <v-dialog
+      v-model="addAcademicYearDialog"
+      max-width="600px"
+      v-if="addAcademicYearDialog"
+      persistent
+    >
+      <v-card flat class="Card-style pa-2">
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Add Academic Year</label>
diff --git a/src/pages/Annoucement/annoucement.vue b/src/pages/Annoucement/annoucement.vue
index f8cbba0..d2379df 100644
--- a/src/pages/Annoucement/annoucement.vue
+++ b/src/pages/Annoucement/annoucement.vue
@@ -2,7 +2,7 @@
   <v-container fluid class="body-color">
     <!-- ****** EDITS COURSES DETAILS ****** -->
     <v-dialog v-model="editStudentDialog" max-width="600px" scrollable persistent>
-      <v-card flat class="card-style pa-2" dark>
+      <v-card flat class="Card-style pa-2">
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Edit Annoucement</label>
@@ -122,7 +122,7 @@
     <!-- ****** PROFILE VIEW STUDENTS DEATILS ******  -->
 
     <v-dialog v-model="profileStudentDialog" max-width="600px" scrollable persistent>
-      <v-card flat class="card-style pa-3" dark>
+      <v-card flat class="Card-style pa-3">
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">View Annoucement</label>
@@ -325,7 +325,7 @@
     </v-data-table>
     <!-- ****** Add Annoucement DETAILS******-->
     <v-dialog v-model="addAnnoucementDialog" max-width="500" v-if="addAnnoucementDialog" persistent>
-      <v-card flat class="card-style pa-2" dark>
+      <v-card flat class="Card-style pa-2">
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Add Annoucement</label>
diff --git a/src/pages/Attendence/teacherAttendence.vue b/src/pages/Attendence/teacherAttendence.vue
index 7b8ebf5..965adc3 100644
--- a/src/pages/Attendence/teacherAttendence.vue
+++ b/src/pages/Attendence/teacherAttendence.vue
@@ -85,7 +85,12 @@
       >Your search for "{{ search }}" found no results.</v-alert>
     </v-data-table>
     <!-- ****** Add Teachers Attendece****** -->
-    <v-dialog v-model="addTeacherAttendenceDialog" width="1600" v-if="addTeacherAttendenceDialog" persistent>
+    <v-dialog
+      v-model="addTeacherAttendenceDialog"
+      width="1600"
+      v-if="addTeacherAttendenceDialog"
+      persistent
+    >
       <v-card flat class="pa-2">
         <v-layout>
           <v-flex xs12>
diff --git a/src/pages/Class/addclass.vue b/src/pages/Class/addclass.vue
index 0255ffb..3a0dcec 100644
--- a/src/pages/Class/addclass.vue
+++ b/src/pages/Class/addclass.vue
@@ -2,7 +2,7 @@
   <v-container fluid class="body-color">
     <!-- ****** EDIT  ClASS  ****** -->
     <v-dialog v-model="editClassDialog" max-width="400px" persistent>
-      <v-card flat class="card-style pa-2" dark>
+      <v-card flat class="Card-style pa-2">
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Edit Class</label>
@@ -28,7 +28,7 @@
 
     <!-- ****** PROFILE VIEW STUDENTS ******  -->
     <v-dialog v-model="profileClassDialog" max-width="400px" persistent>
-      <v-card flat class="card-style pa-3" dark>
+      <v-card flat class="Card-style pa-3">
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">View Class</label>
@@ -148,7 +148,7 @@
 
     <!-- DIALOG BOX - ADD Class  -->
     <v-dialog v-model="addClassDialog" max-width="400px" v-if="addClassDialog" persistent>
-      <v-card flat class="card-style pa-2" dark>
+      <v-card flat class="Card-style pa-2">
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Add Class</label>
@@ -392,6 +392,4 @@ export default {
   //   this.$root.$off("app:search");
   // }
 };
-</script>
-<style>
-</style>
\ No newline at end of file
+</script>
\ No newline at end of file
diff --git a/src/pages/Course/course.vue b/src/pages/Course/course.vue
index 17409ea..df6a496 100644
--- a/src/pages/Course/course.vue
+++ b/src/pages/Course/course.vue
@@ -2,7 +2,7 @@
   <v-container fluid class="body-color">
     <!-- ****** EDITS COURSES DETAILS ****** -->
     <v-dialog v-model="editStudentDialog" max-width="600px" scrollable persistent>
-      <v-card flat class="card-style pa-2" dark>
+      <v-card flat class="Card-style pa-2">
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Edit Course</label>
@@ -102,7 +102,7 @@
     <!-- ****** PROFILE VIEW STUDENTS DEATILS ******  -->
 
     <v-dialog v-model="profileStudentDialog" max-width="600px" scrollable persistent>
-      <v-card flat class="card-style pa-3" dark>
+      <v-card flat class="Card-style pa-3">
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">View Course</label>
@@ -288,7 +288,7 @@
     </v-data-table>
     <!-- ****** Add CourseS DETAILS****** -->
     <v-dialog v-model="addCourseDialog" max-width="500" v-if="addCourseDialog" persistent>
-      <v-card flat class="card-style pa-2" dark>
+      <v-card flat class="Card-style pa-2">
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Add Course</label>
diff --git a/src/pages/Course/courseDetail.vue b/src/pages/Course/courseDetail.vue
index c95cb0e..469c0ad 100644
--- a/src/pages/Course/courseDetail.vue
+++ b/src/pages/Course/courseDetail.vue
@@ -2,7 +2,7 @@
   <v-container fluid class="body-color">
     <!-- ****** Edit Chapter detail  ****** -->
     <v-dialog v-model="editCourseDetailDialog" max-width="1000px" scrollable persistent>
-      <v-card class="card-style pa-2" dark>
+      <v-card class="Card-style pa-2">
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Edit Chapter</label>
@@ -69,7 +69,7 @@
     </v-dialog>
     <!-- DIALOG BOX -  EDIT CHAPTER-->
     <v-dialog v-model="editChapterDetailDialog" max-width="1000px" scrollable persistent>
-      <v-card class="card-style pa-2" dark>
+      <v-card class="Card-style pa-2">
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Edit Chapter</label>
@@ -222,7 +222,7 @@
     </v-dialog>
     <!-- ADD NEW CHAPTER-->
     <v-dialog v-model="addChapterDialog" max-width="1000px" scrollable persistent>
-      <v-card class="card-style pa-2" dark>
+      <v-card class="Card-style pa-2">
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Add Chapter Detail</label>
@@ -348,7 +348,7 @@
     <!-- ****** PROFILE Gallery ******  -->
 
     <v-dialog v-model="viewProfileGallery" max-width="1000" scrollable persistent>
-      <v-card flat class="card-style pa-3" dark>
+      <v-card flat class="Card-style pa-3">
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">View Course Detail</label>
@@ -624,7 +624,7 @@
     </v-data-table>
     <!-- ****** ADD Course Detail  ****** -->
     <v-dialog v-model="addCourseDetailDialog" max-width="600px" persistent>
-      <v-card flat class="card-style pa-2" dark>
+      <v-card flat class="Card-style pa-2">
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Add Course Details</label>
diff --git a/src/pages/Course/courseDiscussion.vue b/src/pages/Course/courseDiscussion.vue
index d7fdf39..1cb4244 100644
--- a/src/pages/Course/courseDiscussion.vue
+++ b/src/pages/Course/courseDiscussion.vue
@@ -1,7 +1,7 @@
 <template>
   <v-container fluid class="body-color">
     <v-dialog v-model="editDialog" max-width="600px" scrollable persistent>
-      <v-card flat class="card-style pa-2" dark>
+      <v-card flat class="Card-style pa-2">
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Edit Course Discussion</label>
diff --git a/src/pages/Exam/exam.vue b/src/pages/Exam/exam.vue
index 677765f..e14c0ad 100644
--- a/src/pages/Exam/exam.vue
+++ b/src/pages/Exam/exam.vue
@@ -2,7 +2,7 @@
   <v-container fluid class="body-color">
     <!-- ****** EDIT EXAM ****** -->
     <v-dialog v-model="editExamDialog" max-width="600px" scrollable persistent>
-      <v-card flat class="card-style pa-2" dark>
+      <v-card flat class="Card-style pa-2">
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Edit Exam</label>
@@ -89,7 +89,7 @@
     <!-- ****** PROFILE VIEW PARTICULAR EXAM  ******  -->
 
     <v-dialog v-model="profileExamDialog" max-width="500px" persistent>
-      <v-card flat class="card-style pa-3" dark>
+      <v-card flat class="Card-style pa-3">
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">View Exam</label>
@@ -235,7 +235,7 @@
 
     <!-- ****** ADD EXAM ****** -->
     <v-dialog v-model="addExamDialog" max-width="500px" v-if="addExamDialog" persistent>
-      <v-card flat class="card-style pa-2" dark>
+      <v-card flat class="Card-style pa-2">
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Add Exam</label>
diff --git a/src/pages/Exam/examAttendence.vue b/src/pages/Exam/examAttendence.vue
index 08515d5..25f1aa8 100644
--- a/src/pages/Exam/examAttendence.vue
+++ b/src/pages/Exam/examAttendence.vue
@@ -135,14 +135,10 @@
     <!-- ****** ADD  Student Attendence ****** -->
     <v-dialog v-model="changeStudentAttendenceDialog" max-width="500px" persistent>
       <v-card flat>
-        <v-layout class="pa-3 card-style white--text">
+        <v-layout class="pa-3 Card-style">
           <v-flex xs12>
             <label class="title text-xs-center">Change Student's Attendence</label>
-            <v-icon
-              size="24"
-              class="right white--text"
-              @click="changeStudentAttendenceDialog = false"
-            >cancel</v-icon>
+            <v-icon size="24" class="right" @click="changeStudentAttendenceDialog = false">cancel</v-icon>
           </v-flex>
         </v-layout>
         <v-container fluid>
@@ -181,10 +177,10 @@
       persistent
     >
       <v-card flat>
-        <v-layout class="pa-3 card-style white--text">
+        <v-layout class="pa-3 Card-style">
           <v-flex xs12>
             <label class="title text-xs-center">Add Exam Attendence</label>
-            <v-icon size="24" class="right white--text" @click="closeAttendenceModel">cancel</v-icon>
+            <v-icon size="24" class="right" @click="closeAttendenceModel">cancel</v-icon>
           </v-flex>
         </v-layout>
         <v-form ref="form" v-model="valid" lazy-validation class="text-xs-center">
diff --git a/src/pages/Exam/examSchedule.vue b/src/pages/Exam/examSchedule.vue
index 38b641c..aacc09c 100644
--- a/src/pages/Exam/examSchedule.vue
+++ b/src/pages/Exam/examSchedule.vue
@@ -2,7 +2,7 @@
   <v-container fluid class="body-color">
     <!-- ****** Edit Exam Schedule****** -->
     <v-dialog v-model="editExamScheduleDialog" max-width="800px" scrollable persistent>
-      <v-card flat class="card-style pa-2" dark>
+      <v-card flat class="Card-style pa-2">
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Edit Exam Schedule</label>
@@ -197,7 +197,7 @@
     <!-- ****** PROFILE VIEW Exam Schedule  DATA ******  -->
 
     <v-dialog v-model="profileExamScheduleDialog" max-width="600px" persistent>
-      <v-card flat class="card-style pa-3" dark>
+      <v-card flat class="Card-style pa-3">
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">View Exam Schedule</label>
@@ -424,7 +424,7 @@
       v-if="addExamScheduleDialog"
       persistent
     >
-      <v-card flat class="card-style pa-2" dark>
+      <v-card flat class="Card-style pa-2">
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Add Exam Schedule</label>
diff --git a/src/pages/Exam/grade.vue b/src/pages/Exam/grade.vue
index 7320fcd..1604db1 100644
--- a/src/pages/Exam/grade.vue
+++ b/src/pages/Exam/grade.vue
@@ -2,7 +2,7 @@
   <v-container fluid class="body-color">
     <!-- ****** EDIT GRADE  ****** -->
     <v-dialog v-model="editGradeDialog" max-width="500px" persistent>
-      <v-card flat class="card-style pa-2" dark>
+      <v-card flat class="Card-style pa-2">
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Edit Grade</label>
@@ -103,7 +103,7 @@
     <!-- ****** PROFILE VIEW PARTICULAR GRDAE DATA ******  -->
 
     <v-dialog v-model="viewGradeDialog" max-width="500px" persistent>
-      <v-card flat class="card-style pa-3" dark>
+      <v-card flat class="Card-style pa-3">
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">View Grade</label>
@@ -270,7 +270,7 @@
     </v-data-table>
     <!-- ****** ADD GRADE ****** -->
     <v-dialog v-model="addGradeDialog" max-width="500px" v-if="addGradeDialog" persistent>
-      <v-card flat class="card-style pa-2" dark>
+      <v-card flat class="Card-style pa-2">
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Add Grade</label>
diff --git a/src/pages/Gallery/gallery.vue b/src/pages/Gallery/gallery.vue
index 32ed344..d9aad8f 100644
--- a/src/pages/Gallery/gallery.vue
+++ b/src/pages/Gallery/gallery.vue
@@ -2,7 +2,7 @@
   <v-container fluid class="body-color">
     <!-- ****** EDITS  Gallery  ****** -->
     <v-dialog v-model="editGalleryDialog" max-width="1000px" scrollable persistent>
-      <v-card class="card-style pa-2" dark>
+      <v-card class="Card-style pa-2">
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Edit Gallery</label>
@@ -195,7 +195,7 @@
     <!-- ****** PROFILE Gallery ******  -->
 
     <v-dialog v-model="viewProfileGallery" max-width="1000" scrollable persistent>
-      <v-card flat class="card-style pa-3" dark>
+      <v-card flat class="Card-style pa-3">
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">View Gallery</label>
@@ -359,7 +359,7 @@
     </v-data-table>
     <!-- ****** ADD Gallery  ****** -->
     <v-dialog v-model="addGalleryDialog" max-width="600px" v-if="addGalleryDialog" persistent>
-      <v-card flat class="card-style pa-2" dark>
+      <v-card flat class="Card-style pa-2">
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Add Gallery</label>
diff --git a/src/pages/Holiday/holiday.vue b/src/pages/Holiday/holiday.vue
index 879cea1..e05be26 100644
--- a/src/pages/Holiday/holiday.vue
+++ b/src/pages/Holiday/holiday.vue
@@ -2,7 +2,7 @@
   <v-container fluid class="body-color">
     <!-- ****** EDIT HOLIDAY  ****** -->
     <v-dialog v-model="editHolidayDialog" max-width="500px" persistent>
-      <v-card flat class="card-style pa-2" dark>
+      <v-card flat class="Card-style pa-2">
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Edit Holiday</label>
@@ -80,7 +80,7 @@
     <!-- ****** PROFILE VIEW Holiday DEATILS ******  -->
 
     <v-dialog v-model="viewHolidayDialog" max-width="500px" persistent>
-      <v-card flat class="card-style pa-3" dark>
+      <v-card flat class="Card-style pa-3">
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">View Holiday</label>
@@ -213,7 +213,7 @@
     </v-data-table>
     <!-- ****** ADD MULTIPLE Holiday ****** -->
     <v-dialog v-model="addHolidayDialog" max-width="400px" v-if="addHolidayDialog" persistent>
-      <v-card flat class="card-style pa-3" dark>
+      <v-card flat class="Card-style pa-3">
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Add Holiday</label>
diff --git a/src/pages/Library/books.vue b/src/pages/Library/books.vue
index c1a9ba9..390d864 100644
--- a/src/pages/Library/books.vue
+++ b/src/pages/Library/books.vue
@@ -2,7 +2,7 @@
   <v-container fluid class="body-color">
     <!-- ****** Edit  Member  ****** -->
     <v-dialog v-model="editBookDialog" max-width="500px" persistent>
-      <v-card flat class="card-style pa-2" dark>
+      <v-card flat class="Card-style pa-2">
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Edit Book</label>
@@ -88,7 +88,7 @@
     <!-- ****** PROFILE VIEW BOOKS DATA ******  -->
 
     <v-dialog v-model="viewBookDialog" max-width="500px" persistent>
-      <v-card flat class="card-style pa-3" dark>
+      <v-card flat class="Card-style pa-3">
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">View Book</label>
@@ -273,7 +273,7 @@
     </v-data-table>
     <!-- ****** ADD BOOK ****** -->
     <v-dialog v-model="addBookDialog" max-width="600px" v-if="addBookDialog" persistent>
-      <v-card flat class="card-style pa-2" dark>
+      <v-card flat class="Card-style pa-2">
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Add Book</label>
diff --git a/src/pages/Library/eBook.vue b/src/pages/Library/eBook.vue
index 10a3c5d..c4c4e25 100644
--- a/src/pages/Library/eBook.vue
+++ b/src/pages/Library/eBook.vue
@@ -2,7 +2,7 @@
   <v-container fluid class="body-color">
     <!-- ****** EDITS EBOOK DETAILS ****** -->
     <v-dialog v-model="editEbookDialog" max-width="600px" persistent>
-      <v-card flat class="card-style pa-2" dark>
+      <v-card flat class="Card-style pa-2">
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Edit E-Book</label>
@@ -138,7 +138,7 @@
     <!-- ****** PROFILE VIEW ALL NEWS DEATILS ******  -->
 
     <v-dialog v-model="viewEbookDialog" max-width="600px" scrollable persistent>
-      <v-card flat class="card-style pa-3" dark>
+      <v-card flat class="Card-style pa-3">
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">View E-book</label>
@@ -298,7 +298,7 @@
     </v-data-table>
     <!-- ****** ADD MULTIPLE E-BOOK ****** -->
     <v-dialog v-model="addEBookDialog" max-width="600px" v-if="addEBookDialog" persistent>
-      <v-card flat class="card-style pa-2" dark>
+      <v-card flat class="Card-style pa-2">
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Add E-Book</label>
diff --git a/src/pages/Library/issue.vue b/src/pages/Library/issue.vue
index 5f155a8..b52bdfe 100644
--- a/src/pages/Library/issue.vue
+++ b/src/pages/Library/issue.vue
@@ -2,7 +2,7 @@
   <v-container fluid class="body-color">
     <!-- ****** EDIT ISSUE  ****** -->
     <v-dialog v-model="editIssueDialog" max-width="600px" scrollable persistent>
-      <v-card flat class="card-style pa-2" dark>
+      <v-card flat class="Card-style pa-2">
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Edit Issue</label>
@@ -150,7 +150,7 @@
     <!-- ****** PROFILE VIEW PARTICULAR ISSUE DATA ******  -->
 
     <v-dialog v-model="viewIssueDialog" max-width="500px" persistent>
-      <v-card flat class="card-style pa-3" dark>
+      <v-card flat class="Card-style pa-3">
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">View Issue</label>
@@ -381,7 +381,7 @@
 
     <!-- ****** ADD Issue ****** -->
     <v-dialog v-model="addIssueDialog" max-width="600px" v-if="addIssueDialog" persistent>
-      <v-card flat class="card-style pa-2" dark>
+      <v-card flat class="Card-style pa-2">
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Add Issue</label>
diff --git a/src/pages/Library/member.vue b/src/pages/Library/member.vue
index 80986bc..03b312c 100644
--- a/src/pages/Library/member.vue
+++ b/src/pages/Library/member.vue
@@ -422,7 +422,7 @@
     <!-- Add Student Library Member Dialog -->
 
     <v-dialog v-model="addLibrary" max-width="600px" v-if="addLibrary" persistent>
-      <v-card flat class="card-style pa-2" dark>
+      <v-card flat class="Card-style pa-2">
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Add Library Member</label>
diff --git a/src/pages/Mark/mark.vue b/src/pages/Mark/mark.vue
index ac18d5b..0ef117d 100644
--- a/src/pages/Mark/mark.vue
+++ b/src/pages/Mark/mark.vue
@@ -169,14 +169,10 @@
     <!-- ****** ADD  Mark Schedule ****** -->
     <v-dialog v-model="addMarkDialog" max-width v-if="addMarkDialog" persistent>
       <v-card flat class>
-        <v-layout class="pa-3 card-style white--text">
+        <v-layout class="pa-3 Card-style">
           <v-flex xs12>
             <label class="title text-xs-center">Add Mark</label>
-            <v-icon
-              size="24"
-              class="right white--text"
-              @click="$refs.form.reset();addMarkDialog = false"
-            >cancel</v-icon>
+            <v-icon size="24" class="right" @click="$refs.form.reset();addMarkDialog = false">cancel</v-icon>
           </v-flex>
         </v-layout>
         <v-form ref="form" v-model="valid" lazy-validation>
@@ -261,7 +257,7 @@
                       round
                       dark
                       :loading="loading"
-                      class="right mt-4 open-dialog-button"
+                      class="right mt-4 add-button"
                     >Mark</v-btn>
                   </v-flex>
                 </v-flex>
diff --git a/src/pages/Mark/markDistribution.vue b/src/pages/Mark/markDistribution.vue
index 2a820c2..cb114ab 100644
--- a/src/pages/Mark/markDistribution.vue
+++ b/src/pages/Mark/markDistribution.vue
@@ -2,7 +2,7 @@
   <v-container fluid class="body-color">
     <!-- ****** EDIT  Mark Distribution ****** -->
     <v-dialog v-model="editMarkDistributionDialog" max-width="500px" persistent>
-      <v-card flat class="card-style pa-2" dark>
+      <v-card flat class="Card-style pa-2">
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Edit Mark Distribution</label>
@@ -123,7 +123,7 @@
     </v-data-table>
     <!-- ****** ADD MULTIPLE REMINDER ****** -->
     <v-dialog v-model="addMarkDistributionDialog" max-width="500px" persistent>
-      <v-card flat class="card-style pa-2" dark>
+      <v-card flat class="Card-style pa-2">
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Add Mark Distribution</label>
diff --git a/src/pages/News/news.vue b/src/pages/News/news.vue
index 31e14b3..32bc88e 100644
--- a/src/pages/News/news.vue
+++ b/src/pages/News/news.vue
@@ -2,7 +2,7 @@
   <v-container fluid class="body-color">
     <!-- ****** EDIT NEWS  ****** -->
     <v-dialog v-model="editNewsDialog" max-width="600px" persistent>
-      <v-card flat class="card-style pa-2" dark>
+      <v-card flat class="Card-style pa-2">
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Edit News</label>
@@ -128,7 +128,7 @@
     </v-dialog>
     <!-- ****** PROFILE  NEWS  ******  -->
     <v-dialog v-model="dialog1" max-width="500px" persistent>
-      <v-card flat class="card-style pa-3" dark>
+      <v-card flat class="Card-style pa-3">
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">View News</label>
@@ -284,7 +284,7 @@
     </v-data-table>
     <!-- ****** ADD  NEWS ****** -->
     <v-dialog v-model="addNewsDialog" max-width="600px" v-if="addNewsDialog" persistent>
-      <v-card flat class="card-style pa-2" dark>
+      <v-card flat class="Card-style pa-2">
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Add News</label>
diff --git a/src/pages/NoticeBoard/noticeBoard.vue b/src/pages/NoticeBoard/noticeBoard.vue
index 2d29694..715ef57 100644
--- a/src/pages/NoticeBoard/noticeBoard.vue
+++ b/src/pages/NoticeBoard/noticeBoard.vue
@@ -2,7 +2,7 @@
   <v-container fluid class="body-color">
     <!-- ****** Edit  Notice Board ****** -->
     <v-dialog v-model="editNoticeBoardDialog" max-width="500px" scrollable persistent>
-      <v-card flat class="card-style pa-2" dark>
+      <v-card flat class="Card-style pa-2">
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Edit Notice Board</label>
@@ -108,7 +108,7 @@
     <!-- ****** VIEW PROFIL NOTICE BOARD ******  -->
 
     <v-dialog v-model="viewNoticeBoardDialog" max-width="600px" scrollable persistent>
-      <v-card flat class="card-style pa-3" dark>
+      <v-card flat class="Card-style pa-3">
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">View Notice Board</label>
@@ -277,7 +277,7 @@
       v-if="addNoticeBoardDialog"
       persistent
     >
-      <v-card flat class="card-style pa-2" dark>
+      <v-card flat class="Card-style pa-2">
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Add Notice Board</label>
diff --git a/src/pages/Notification/notification.vue b/src/pages/Notification/notification.vue
index 4cd4b16..3bbdfdf 100644
--- a/src/pages/Notification/notification.vue
+++ b/src/pages/Notification/notification.vue
@@ -3,7 +3,7 @@
     <!-- ****** EDITS  NOTIFICATION DETAILS ****** -->
     <v-dialog v-model="editNotificationDialog" max-width="500px" persistent>
       <v-flex xs12 sm12>
-        <v-card flat class="card-style pa-3" dark>
+        <v-card flat class="Card-style pa-3">
           <v-layout>
             <v-flex xs12>
               <label class="title text-xs-center">Edit Notification</label>
@@ -55,7 +55,7 @@
     <!-- ****** PROFILE VIEW NOTIFICATION DEATILS ******  -->
 
     <v-dialog v-model="profileNotificationDialog" max-width="400px" persistent>
-      <v-card flat class="card-style pa-3" dark>
+      <v-card flat class="Card-style pa-3">
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">View Notification</label>
@@ -188,8 +188,13 @@
     </v-data-table>
 
     <!-- ****** ADD MULTIPLE NOTIFICATION ****** -->
-    <v-dialog v-model="addNotificationDialog" max-width="480px" v-if="addNotificationDialog" persistent>
-      <v-card flat class="card-style pa-2" dark>
+    <v-dialog
+      v-model="addNotificationDialog"
+      max-width="480px"
+      v-if="addNotificationDialog"
+      persistent
+    >
+      <v-card flat class="Card-style pa-2">
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Add Notification</label>
diff --git a/src/pages/Payroll/hourlyTemplate.vue b/src/pages/Payroll/hourlyTemplate.vue
index e694d91..3b20d91 100644
--- a/src/pages/Payroll/hourlyTemplate.vue
+++ b/src/pages/Payroll/hourlyTemplate.vue
@@ -2,7 +2,7 @@
   <v-container fluid class="body-color">
     <!-- ****** Edit  Hourly Template  ****** -->
     <v-dialog v-model="editHourDialog" max-width="400px" persistent>
-      <v-card flat class="card-style pa-2" dark>
+      <v-card flat class="Card-style pa-2">
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Edit Hourly Template</label>
@@ -140,7 +140,7 @@
 
     <!-- **** Add Hourly Template **** -->
     <v-dialog v-model="addHourDialog" max-width="400px" v-if="addHourDialog" persistent>
-      <v-card flat class="card-style pa-2" dark>
+      <v-card flat class="Card-style pa-2">
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Add Hourly Template</label>
diff --git a/src/pages/Payroll/manageSalary.vue b/src/pages/Payroll/manageSalary.vue
index cd65fe1..db39269 100644
--- a/src/pages/Payroll/manageSalary.vue
+++ b/src/pages/Payroll/manageSalary.vue
@@ -88,16 +88,11 @@
     <!-- ****** PROFILE VIEW  ******  -->
 
     <v-dialog v-model="profileSalaryDialog" persistent>
-      <v-card flat class="text-xs-center white--text">
+      <v-card flat class="text-xs-center">
         <v-layout>
-          <v-flex xs12 class="card-style pa-2">
+          <v-flex xs12 class="Card-style pa-2">
             <label class="title text-xs-center">View Manage Salary</label>
-            <v-icon
-              size="24"
-              color="white"
-              class="right"
-              @click="profileSalaryDialog = false"
-            >cancel</v-icon>
+            <v-icon size="24" class="right" @click="profileSalaryDialog = false">cancel</v-icon>
           </v-flex>
         </v-layout>
         <v-layout wrap>
@@ -431,7 +426,7 @@
 
     <!-- ****** Edit  Hourly Template  ****** -->
     <v-dialog v-model="editSalaryDialog" max-width="400px" persistent>
-      <v-card flat class="card-style pa-2" dark>
+      <v-card flat class="Card-style pa-2">
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Edit Manage Salary</label>
diff --git a/src/pages/Payroll/salaryTemplate.vue b/src/pages/Payroll/salaryTemplate.vue
index 2fa5ff5..e421308 100644
--- a/src/pages/Payroll/salaryTemplate.vue
+++ b/src/pages/Payroll/salaryTemplate.vue
@@ -2,11 +2,11 @@
   <v-container fluid class="body-color" style="box-sizing: border-box;">
     <!-- ****** EDIT SALARY ****** -->
     <v-dialog v-model="editSalaryDialog" persistent>
-      <v-card flat class="text-xs-center white--text">
+      <v-card flat class="text-xs-center">
         <v-layout>
-          <v-flex xs12 class="card-style pa-2">
+          <v-flex xs12 class="Card-style pa-2">
             <label class="title text-xs-center">Edit Salary</label>
-            <v-icon size="24" color="white" class="right" @click="editSalaryDialog = false">cancel</v-icon>
+            <v-icon size="24" class="right" @click="editSalaryDialog = false">cancel</v-icon>
           </v-flex>
         </v-layout>
 
@@ -219,7 +219,7 @@
                     <v-card-actions>
                       <v-spacer class="hidden-xs-only"></v-spacer>
                       <v-btn
-                        color="open-dialog-button"
+                        round
                         dark
                         class="right add-button"
                         @click="save"
@@ -237,16 +237,11 @@
     <!-- ****** PROFILE VIEW  ******  -->
 
     <v-dialog v-model="profileSalaryDialog" persistent>
-      <v-card flat class="text-xs-center white--text">
+      <v-card flat class="text-xs-center">
         <v-layout>
-          <v-flex xs12 class="card-style pa-2">
+          <v-flex xs12 class="Card-style pa-2">
             <label class="title text-xs-center">View Salary</label>
-            <v-icon
-              size="24"
-              color="white"
-              class="right"
-              @click="profileSalaryDialog = false"
-            >cancel</v-icon>
+            <v-icon size="24" class="right" @click="profileSalaryDialog = false">cancel</v-icon>
           </v-flex>
         </v-layout>
 
@@ -532,11 +527,11 @@
 
     <!-- ****** ADD SALARY ****** -->
     <v-dialog v-model="addSalaryDialog" v-if="addSalaryDialog" persistent>
-      <v-card flat class="text-xs-center white--text">
+      <v-card flat class="text-xs-center">
         <v-layout>
-          <v-flex xs12 class="card-style pa-2">
+          <v-flex xs12 class="Card-style pa-2">
             <label class="title text-xs-center">Add Salary</label>
-            <v-icon size="24" color="white" class="right" @click="closeAddSalaryModel">cancel</v-icon>
+            <v-icon size="24" class="right" @click="closeAddSalaryModel">cancel</v-icon>
           </v-flex>
         </v-layout>
 
@@ -754,6 +749,7 @@
                       <v-spacer class="hidden-xs-only"></v-spacer>
                       <v-btn
                         color="open-dialog-button"
+                        round
                         dark
                         class="right add-button"
                         @click="submit"
diff --git a/src/pages/Section/section.vue b/src/pages/Section/section.vue
index 49d40a7..62a5aff 100644
--- a/src/pages/Section/section.vue
+++ b/src/pages/Section/section.vue
@@ -1,7 +1,7 @@
 <template>
   <v-container fluid class="body-color">
     <v-dialog v-model="editSectionDialog" max-width="460px" persistent>
-      <v-card flat class="card-style pa-2" dark>
+      <v-card flat class="Card-style pa-2">
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Edit Section</label>
@@ -59,7 +59,7 @@
                 </v-layout>
                 <v-flex xs12>
                   <v-card-actions>
-                    <v-btn round dark @click.native="closeSectionDialog" class="add-button">Cancel</v-btn>
+                    <v-btn round dark @click.native="closeSectionDialog" class="cancel-btn">Cancel</v-btn>
                     <v-spacer></v-spacer>
                     <v-btn round dark @click="save" :loading="editLoading" class="add-button">Save</v-btn>
                   </v-card-actions>
@@ -74,7 +74,7 @@
     <!-- ****** PROFILE VIEW SECTION DATA ******  -->
 
     <v-dialog v-model="viewSectionDialog" max-width="500px" persistent>
-      <v-card flat class="card-style pa-3" dark>
+      <v-card flat class="Card-style pa-3">
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">View Section</label>
@@ -237,7 +237,7 @@
 
     <!-- DIALOG BOX - ADD Students Dialog box -->
     <v-dialog v-model="addSectionDialog" max-width="400px" v-if="addSectionDialog" persistent>
-      <v-card flat class="card-style pa-2" dark>
+      <v-card flat class="Card-style pa-2">
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Add Section</label>
diff --git a/src/pages/Students/students.vue b/src/pages/Students/students.vue
index e1df868..3bc5b38 100644
--- a/src/pages/Students/students.vue
+++ b/src/pages/Students/students.vue
@@ -2,7 +2,7 @@
   <v-container fluid class="body-color">
     <!-- ****** EDITS  STUDENTS DETAILS ****** -->
     <v-dialog v-model="editStudentDialog" max-width="1700px" scrollable persistent>
-      <v-card flat class="card-style pa-2" dark>
+      <v-card flat class="Card-style pa-2">
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Edit Student Details</label>
@@ -457,7 +457,7 @@
     <!-- ****** PROFILE VIEW STUDENTS DEATILS ******  -->
 
     <v-dialog v-model="profileStudentDialog" max-width="1000px" scrollable persistent>
-      <v-card flat class="card-style pa-3" dark>
+      <v-card flat class="Card-style pa-3">
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">View Student Details</label>
@@ -1028,7 +1028,7 @@
     </v-data-table>
     <!-- DIALOG -- ADD STUDENTS DETAILS -->
     <v-dialog v-model="addStudentDialog" max-width="1280" v-if="addStudentDialog" persistent>
-      <v-card flat class="card-style pa-2" dark>
+      <v-card flat class="Card-style pa-2">
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Add Student</label>
@@ -1042,7 +1042,7 @@
         <v-container fluid>
           <v-layout align-center>
             <v-flex xs12>
-              <v-stepper v-model="e2" flat class="card-style elevation-0" dark>
+              <v-stepper v-model="e2" flat class="Card-style elevation-0">
                 <v-stepper-header>
                   <v-stepper-step :complete="e2 > 1" step="1">Fill parent Details</v-stepper-step>
                   <v-divider></v-divider>
@@ -1971,7 +1971,7 @@ export default {
     editedStudentMobileCode: "",
     /* ADD FATHER CELL */
     addedFatherCellCode: "",
-    addedStudentMobileCode: '',
+    addedStudentMobileCode: "",
     e1: true,
     e2: 0,
     showParent: true,
@@ -2159,8 +2159,8 @@ export default {
     addFatherCellCode({ name, iso2, dialCode }) {
       this.addedFatherCellCode = dialCode;
     },
-    addStudentMobileCode({ name, iso2, dialCode }){
-      this.addedStudentMobileCode =dialCode;
+    addStudentMobileCode({ name, iso2, dialCode }) {
+      this.addedStudentMobileCode = dialCode;
     },
     onSelect({ name, iso2, dialCode }) {
       // console.log("country codes", name, iso2, dialCode);
diff --git a/src/pages/Teachers/teachers.vue b/src/pages/Teachers/teachers.vue
index e632107..348c352 100644
--- a/src/pages/Teachers/teachers.vue
+++ b/src/pages/Teachers/teachers.vue
@@ -2,7 +2,7 @@
   <v-container fluid class="body-color">
     <!-- ****** EDIT TEACHERS DETAILS ****** -->
     <v-dialog v-model="editTeacherDialog" max-width="1160px" scrollable persistent>
-      <v-card flat class="card-style" dark>
+      <v-card flat class="Card-style pa-3">
         <v-card-text>
           <v-layout>
             <v-flex xs12>
@@ -331,7 +331,7 @@
     <!-- ****** PROFILE VIEW TEACHERS DETAILS ******  -->
 
     <v-dialog v-model="viewTeacherProfileDialog" max-width="500px" persistent>
-      <v-card flat class="card-style pa-3" dark>
+      <v-card flat class="Card-style pa-3">
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">View Teacher</label>
@@ -578,7 +578,7 @@
 
     <!-- ****** DIALOG BOX - Add Teachers Data****** -->
     <v-dialog v-model="addTeacherDialog" max-width="1160" v-if="addTeacherDialog" persistent>
-      <v-card flat class="card-style pa-2" dark>
+      <v-card flat class="Card-style pa-2">
         <v-layout>
           <v-flex xs12 class="pa-0">
             <label class="title text-xs-center">Add Teacher</label>
@@ -948,9 +948,9 @@ import countryList from "@/script/country.js";
 export default {
   data: () => ({
     /* EDIT MOBILE CELL */
-    editedMobileCode: '',
+    editedMobileCode: "",
     /* ADD FATHER CELL */
-    addedTeacherMobileCode: '',
+    addedTeacherMobileCode: "",
     component: "report-generate",
     snackbar: false,
     y: "top",
@@ -1085,12 +1085,12 @@ export default {
     onSelect({ name, iso2, dialCode }) {
       // console.log("country codes", name, iso2, dialCode);
     },
-    editMobileCode({ name, iso2, dialCode }){
+    editMobileCode({ name, iso2, dialCode }) {
       // console.log("Edit father cell", name,iso2);
-      this.editedMobileCode = dialCode
+      this.editedMobileCode = dialCode;
     },
-    addTeacherMobileCode({ name, iso2, dialCode }){
-      this.addedTeacherMobileCode = dialCode
+    addTeacherMobileCode({ name, iso2, dialCode }) {
+      this.addedTeacherMobileCode = dialCode;
     },
     save(date) {
       this.$refs.menu.save(date);
diff --git a/src/pages/TimeTable/timeTable.vue b/src/pages/TimeTable/timeTable.vue
index ad48ab8..a58212b 100644
--- a/src/pages/TimeTable/timeTable.vue
+++ b/src/pages/TimeTable/timeTable.vue
@@ -3,7 +3,7 @@
     <!-- ****** EDIT TIME-TABLE****** -->
     <v-dialog v-model="dialog" max-width="600px" persistent>
       <v-flex xs12 sm12>
-        <v-card flat class="card-style pa-2" dark>
+        <v-card flat class="Card-style pa-2">
           <v-layout>
             <v-flex xs12>
               <label class="title text-xs-center">Edit Time Table</label>
@@ -72,7 +72,7 @@
             <v-flex xs12 sm9 offset-sm1>
               <v-card-actions>
                 <v-spacer></v-spacer>
-                <v-btn round dark @click.native="close" class="clear-button">Cancel</v-btn>
+                <v-btn round dark @click.native="close" class="cancel-btn">Cancel</v-btn>
                 <v-btn round dark @click="save" class="add-button">Save</v-btn>
               </v-card-actions>
             </v-flex>
@@ -85,7 +85,7 @@
 
     <v-dialog v-model="dialogSchedule" max-width="600px" persistent>
       <v-flex xs12 sm12>
-        <v-card flat class="card-style pa-2" dark>
+        <v-card flat class="Card-style pa-2">
           <v-layout>
             <v-flex xs12>
               <label class="title text-xs-center">Add Schedule</label>
@@ -129,7 +129,7 @@
 
     <v-dialog v-model="dialogAddLecture" max-width="600px" persistent>
       <v-flex xs12 sm12>
-        <v-card flat class="card-style pa-2" dark>
+        <v-card flat class="Card-style pa-2">
           <v-layout>
             <v-flex xs12>
               <label class="title text-xs-center">Add Lecture</label>
@@ -280,7 +280,7 @@
 
     <v-dialog v-model="dialogUpdateLectures" max-width="600px" persistent>
       <v-flex xs12 sm12 class>
-        <v-card flat class="card-style pa-2" dark>
+        <v-card flat class="Card-style pa-2">
           <v-layout>
             <v-flex xs12>
               <label class="title text-xs-center">Edit Lecture</label>
@@ -680,7 +680,7 @@
 
     <!-- ****** ADD  TIME-TABLE ****** -->
     <v-dialog v-model="addTimeTableDialog" max-width="600px" v-if="addTimeTableDialog" persistent>
-      <v-card flat class="card-style pa-2" dark>
+      <v-card flat class="Card-style pa-2">
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Add Time Table</label>
diff --git a/src/pages/User/user.vue b/src/pages/User/user.vue
index 5d14c51..f87da6d 100644
--- a/src/pages/User/user.vue
+++ b/src/pages/User/user.vue
@@ -2,7 +2,7 @@
   <v-container fluid class="body-color">
     <!-- ****** EDIT USERS DETAILS ****** -->
     <v-dialog v-model="editUserDialog" max-width="1100px" scrollable persistent>
-      <v-card flat class="card-style pa-2" dark>
+      <v-card flat class="Card-style pa-2">
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Edit User</label>
@@ -266,7 +266,7 @@
     </v-dialog>
     <!-- ****** PROFILE User DETAILS ******  -->
     <v-dialog v-model="viewUserDialog" max-width="560px" scrollable persistent>
-      <v-card flat class="card-style pa-3" dark>
+      <v-card flat class="Card-style pa-3">
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">View User</label>
@@ -490,7 +490,7 @@
     </v-data-table>
     <!-- DIALOG BOX - Add User Data -->
     <v-dialog v-model="addUserDialog" max-width="900px" v-if="addUserDialog" persistent>
-      <v-card flat class="card-style pa-2" dark>
+      <v-card flat class="Card-style pa-2">
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Add User</label>
@@ -794,10 +794,10 @@ import _ from "lodash";
 
 export default {
   data: () => ({
-     /* EDIT FATHER CELL */
-    editedPhoneNumberCode: '',
+    /* EDIT FATHER CELL */
+    editedPhoneNumberCode: "",
     /* ADD FATHER CELL */
-    addedPhoneNumberCode: '',
+    addedPhoneNumberCode: "",
     component: "report-generate",
     snackbar: false,
     y: "top",
@@ -933,11 +933,11 @@ export default {
     },
   },
   methods: {
-    editPhoneNumberCode({ name, iso2, dialCode }){
-      this.editedPhoneNumberCode = dialCode
+    editPhoneNumberCode({ name, iso2, dialCode }) {
+      this.editedPhoneNumberCode = dialCode;
     },
-    addPhoneNumberCode({ name, iso2, dialCode }){
-      this.addedPhoneNumberCode = dialCode
+    addPhoneNumberCode({ name, iso2, dialCode }) {
+      this.addedPhoneNumberCode = dialCode;
     },
     // onSelect({ name, iso2, dialCode }) {
     //   console.log("country codes", name, iso2, dialCode);
@@ -1107,7 +1107,7 @@ export default {
         }
       }
       this.editedItem.userId = this.editedItem._id;
-      this.editedItem.countryCode = this.editedPhoneNumberCode
+      this.editedItem.countryCode = this.editedPhoneNumberCode;
       if (this.imageUrl) {
         var str = this.imageUrl;
         const [baseUrl, imageUrl] = str.split(/,/);
diff --git a/src/pages/changeStudents/changeStudents.vue b/src/pages/changeStudents/changeStudents.vue
index f112857..d604262 100644
--- a/src/pages/changeStudents/changeStudents.vue
+++ b/src/pages/changeStudents/changeStudents.vue
@@ -21,7 +21,7 @@
     <v-container fluid fill-height>
       <v-layout>
         <v-flex xs12 sm8 md8 lg5 offset-sm2 offset-lg3 class="mt-5">
-          <v-card flat class="card-style pa-2" dark id="form">
+          <v-card flat class="Card-style pa-2" id="form">
             <v-layout>
               <v-flex xs12>
                 <label class="title text-xs-center">Change Student</label>
diff --git a/src/pages/generalSetting/generalSetting.vue b/src/pages/generalSetting/generalSetting.vue
index 0419949..1564ab9 100644
--- a/src/pages/generalSetting/generalSetting.vue
+++ b/src/pages/generalSetting/generalSetting.vue
@@ -3,7 +3,7 @@
     <v-container>
       <v-layout>
         <v-flex xs12 sm12 md12 lg10 class="mt-5 mx-auto">
-          <v-card flat class="card-style pa-2" dark>
+          <v-card flat class="Card-style pa-2">
             <v-layout>
               <v-flex xs12>
                 <label class="title text-xs-center">General Setting</label>
@@ -165,7 +165,7 @@ export default {
       imageData: {},
       imageName: "",
       imageUrl: "",
-      imageFile: ""
+      imageFile: "",
     };
   },
   mounted() {
@@ -209,16 +209,16 @@ export default {
         this.setting.schoolId = this.$store.state.id;
         http()
           .put("/updateSchool", this.setting, {
-            headers: { Authorization: "Bearer " + this.token }
+            headers: { Authorization: "Bearer " + this.token },
           })
-          .then(response => {
+          .then((response) => {
             this.loading = false;
             this.snackbar = true;
             this.text = response.data.message;
             this.color = "green";
             this.imageUrl = "";
           })
-          .catch(error => {
+          .catch((error) => {
             // console.log("err====>",err);
             this.snackbar = true;
             this.text = error.response.data.message;
@@ -258,15 +258,15 @@ export default {
       http()
         .get("/getParticularSchool", {
           params: {
-            schoolId: this.$store.state.id
+            schoolId: this.$store.state.id,
           },
-          headers: { Authorization: "Bearer " + this.token }
+          headers: { Authorization: "Bearer " + this.token },
         })
-        .then(response => {
+        .then((response) => {
           this.setting = response.data.data;
           this.imageData.imageUrl = response.data.data.schoolLogoUrl;
         })
-        .catch(error => {
+        .catch((error) => {
           this.showLoader = false;
           if (error.response.status === 401) {
             this.$router.replace({ path: "/" });
@@ -274,8 +274,8 @@ export default {
             this.$store.dispatch("Id", null);
           }
         });
-    }
-  }
+    },
+  },
 };
 </script>
 <style scoped>
diff --git a/src/pages/meetingEvent/meetingEvent.vue b/src/pages/meetingEvent/meetingEvent.vue
index f9fd446..f3268da 100644
--- a/src/pages/meetingEvent/meetingEvent.vue
+++ b/src/pages/meetingEvent/meetingEvent.vue
@@ -2,7 +2,7 @@
   <v-container fluid class="body-color">
     <!-- ****** EDITS  EVENT  ****** -->
     <v-dialog v-model="editEventdialog" max-width="500px" persistent>
-      <v-card flat class="card-style pa-2" dark>
+      <v-card flat class="Card-style pa-2">
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Edit Meeting Event</label>
@@ -114,7 +114,7 @@
     </v-dialog>
     <!-- ****** PROFILE VIEW EVENT  ******  -->
     <v-dialog v-model="viewEventdialog" max-width="500px" persistent>
-      <v-card flat class="card-style pa-3" dark>
+      <v-card flat class="Card-style pa-3">
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">View Meeting Event</label>
@@ -298,7 +298,7 @@
     </v-data-table>
     <!-- ****** ADD MULTIPLE EVENT ****** -->
     <v-dialog v-model="meetEventDialog" max-width="500px" persistent v-if="meetEventDialog">
-      <v-card flat class="card-style pa-2" dark>
+      <v-card flat class="Card-style pa-2">
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Add Meeting Event</label>
diff --git a/src/pages/socialMedia/socialMedia.vue b/src/pages/socialMedia/socialMedia.vue
index 82d08c5..08a017f 100644
--- a/src/pages/socialMedia/socialMedia.vue
+++ b/src/pages/socialMedia/socialMedia.vue
@@ -2,7 +2,7 @@
   <v-container fluid class="body-color">
     <!-- ****** EDIT Social Media ****** -->
     <v-dialog v-model="editSocialMediaDialog" max-width="400px" persistent>
-      <v-card flat class="card-style pa-2" dark>
+      <v-card flat class="Card-style pa-2">
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Edit Social Media</label>
@@ -54,7 +54,7 @@
     <!-- ****** PROFILE VIEW Social ******  -->
 
     <v-dialog v-model="profileSocialMediaDialog" max-width="500px" persistent>
-      <v-card flat class="card-style pa-3" dark>
+      <v-card flat class="Card-style pa-3">
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">View Social Media</label>
@@ -182,8 +182,13 @@
       >Your search for "{{ search }}" found no results.</v-alert>
     </v-data-table>
     <!-- ****** ADD MULTIPLE REMINDER ****** -->
-    <v-dialog v-model="addSocialMediaDialog" max-width="400px" v-if="addSocialMediaDialog" persistent>
-      <v-card flat class="card-style pa-2" dark>
+    <v-dialog
+      v-model="addSocialMediaDialog"
+      max-width="400px"
+      v-if="addSocialMediaDialog"
+      persistent
+    >
+      <v-card flat class="Card-style pa-2">
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Add Social Media</label>