diff --git a/index.html b/index.html
index a313ce9..d9d0259 100644
--- a/index.html
+++ b/index.html
@@ -6,7 +6,8 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <!-- <link href="https://fonts.googleapis.com/css?family=Nunito,700%7CMaterial+Icons" rel="stylesheet"> -->
     <!-- <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500i,800|Material+Icons&display=swap" rel="stylesheet"> -->
-    <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,700,800|Material+Icons&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,700,800|Material+Icons&display=swap"
+        rel="stylesheet">
     <title>School Management</title>
     <link rel="shortcut icon" href="/static/logo.png" type="image/x-icon">
     <meta name="description" content="School Management">
@@ -14,6 +15,11 @@
     <script src='https://meet.jit.si/external_api.js'></script>
     <link href="./static/css/custom.css" rel="stylesheet" />
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+
+    <!-- reduce icon loading time -->
+    <link rel="preconnect" href="//fonts.googleapis.com">
+    <link rel="preconnect" href="//fonts.gstatic.com">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
     <!-- <style>
         [v-cloak] {
             display: none;
diff --git a/src/pages/Students/students.vue b/src/pages/Students/students.vue
index 3bc5b38..6ec99ca 100644
--- a/src/pages/Students/students.vue
+++ b/src/pages/Students/students.vue
@@ -1,32 +1,45 @@
 <template>
   <v-container fluid class="body-color">
     <!-- ****** EDITS  STUDENTS DETAILS ****** -->
-    <v-dialog v-model="editStudentDialog" max-width="1700px" scrollable persistent>
+    <v-dialog
+      v-model="editStudentDialog"
+      max-width="1700px"
+      scrollable
+      persistent
+    >
       <v-card flat class="Card-style pa-2">
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Edit Student Details</label>
-            <v-icon size="24" class="right" @click="editStudentDialog = false">cancel</v-icon>
+            <v-icon size="24" class="right" @click="editStudentDialog = false"
+              >cancel</v-icon
+            >
           </v-flex>
         </v-layout>
         <v-card-text>
           <v-form ref="form">
             <v-container fluid>
               <v-layout>
-                <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center">
-                  <v-avatar size="100px" v-if="!editedItem.profilePicUrl && !editImageUrl">
+                <v-flex
+                  xs12
+                  class="text-xs-center text-sm-center text-md-center text-lg-center"
+                >
+                  <v-avatar
+                    size="100px"
+                    v-if="!editedItem.profilePicUrl && !editImageUrl"
+                  >
                     <img src="/static/icon/user.png" />
                   </v-avatar>
                   <img
                     :src="editedItem.profilePicUrl"
                     v-else-if="editedItem.profilePicUrl && !editImageUrl"
                     height="150"
-                    style="border-radius:50%; width:150px"
+                    style="border-radius: 50%; width: 150px"
                   />
                   <img
                     v-if="editImageUrl"
                     :src="editImageUrl"
-                    style="border-radius:50%; width:150px;height:150px"
+                    style="border-radius: 50%; width: 150px; height: 150px"
                   />
                   <input
                     type="file"
@@ -41,8 +54,13 @@
                 <v-flex xs12 sm4>
                   <v-layout>
                     <v-flex xs4 class="pt-4 subheading">
-                      <label class="right hidden-xs-only hidden-sm-only">Select Class:</label>
-                      <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label>
+                      <label class="right hidden-xs-only hidden-sm-only"
+                        >Select Class:</label
+                      >
+                      <label
+                        class="right hidden-lg-only hidden-md-only hidden-xl-only"
+                        >Class:</label
+                      >
                     </v-flex>
                     <v-flex xs8 class="ml-3">
                       <v-select
@@ -61,8 +79,13 @@
                 <v-flex xs12 sm4>
                   <v-layout>
                     <v-flex xs4 class="pt-4 subheading">
-                      <label class="right hidden-xs-only hidden-sm-only">Select Section:</label>
-                      <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Section:</label>
+                      <label class="right hidden-xs-only hidden-sm-only"
+                        >Select Section:</label
+                      >
+                      <label
+                        class="right hidden-lg-only hidden-md-only hidden-xl-only"
+                        >Section:</label
+                      >
                     </v-flex>
                     <v-flex xs8 class="ml-3">
                       <v-select
@@ -80,8 +103,13 @@
                 <v-flex xs12 sm4>
                   <v-layout>
                     <v-flex xs4 class="pt-4 subheading">
-                      <label class="right hidden-xs-only hidden-sm-only">Full Name:</label>
-                      <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Name:</label>
+                      <label class="right hidden-xs-only hidden-sm-only"
+                        >Full Name:</label
+                      >
+                      <label
+                        class="right hidden-lg-only hidden-md-only hidden-xl-only"
+                        >Name:</label
+                      >
                     </v-flex>
                     <v-flex xs8 class="ml-3">
                       <v-text-field
@@ -99,8 +127,13 @@
                 <v-flex xs12 sm4>
                   <v-layout>
                     <v-flex xs4 class="pt-4 subheading">
-                      <label class="right hidden-xs-only hidden-sm-only">Email Id:</label>
-                      <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Email:</label>
+                      <label class="right hidden-xs-only hidden-sm-only"
+                        >Email Id:</label
+                      >
+                      <label
+                        class="right hidden-lg-only hidden-md-only hidden-xl-only"
+                        >Email:</label
+                      >
                     </v-flex>
                     <v-flex xs8 class="ml-3">
                       <v-text-field
@@ -116,8 +149,13 @@
                 <v-flex xs12 sm4>
                   <v-layout>
                     <v-flex xs4 class="pt-4 subheading">
-                      <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label>
-                      <label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label>
+                      <label class="right hidden-sm-only hidden-xs-only"
+                        >Date of Birth:</label
+                      >
+                      <label
+                        class="right hidden-lg-only hidden-xl-only hidden-md-only"
+                        >D.O.B:</label
+                      >
                     </v-flex>
                     <v-flex xs8 class="ml-3">
                       <v-menu
@@ -168,8 +206,13 @@
                 <v-flex xs12 sm4>
                   <v-layout>
                     <v-flex xs4 class="pt-4 subheading">
-                      <label class="right hidden-xs-only hidden-sm-only">Blood Group:</label>
-                      <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Blood:</label>
+                      <label class="right hidden-xs-only hidden-sm-only"
+                        >Blood Group:</label
+                      >
+                      <label
+                        class="right hidden-lg-only hidden-md-only hidden-xl-only"
+                        >Blood:</label
+                      >
                     </v-flex>
                     <v-flex xs8 class="ml-3">
                       <v-text-field
@@ -247,8 +290,13 @@
                 <v-flex xs12 sm4>
                   <v-layout>
                     <v-flex xs4 class="pt-4 subheading">
-                      <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label>
-                      <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod:</label>
+                      <label class="right hidden-xs-only hidden-sm-only"
+                        >Uplaod Image:</label
+                      >
+                      <label
+                        class="right hidden-lg-only hidden-md-only hidden-xl-only"
+                        >Uplaod:</label
+                      >
                     </v-flex>
                     <v-flex xs8 class="ml-3">
                       <v-text-field
@@ -298,13 +346,21 @@
                 <v-flex xs12 sm4>
                   <v-layout>
                     <v-flex xs4 class="pt-4 subheading">
-                      <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label>
-                      <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Mobile:</label>
+                      <label class="right hidden-xs-only hidden-sm-only"
+                        >Mobile No:</label
+                      >
+                      <label
+                        class="right hidden-lg-only hidden-md-only hidden-xl-only"
+                        >Mobile:</label
+                      >
                     </v-flex>
                     <v-flex xs8 class="ml-3">
                       <v-layout row wrap>
                         <v-flex xs3 class="mt-3">
-                          <vue-country-code @onSelect="editStudentMobileCode" class="black--text"></vue-country-code>
+                          <vue-country-code
+                            @onSelect="editStudentMobileCode"
+                            class="black--text"
+                          ></vue-country-code>
                         </v-flex>
                         <v-flex xs9>
                           <v-text-field
@@ -324,8 +380,13 @@
                 <v-flex xs12 sm4>
                   <v-layout>
                     <v-flex xs4 class="pt-4 subheading">
-                      <label class="right hidden-xs-only hidden-sm-only">Select Country:</label>
-                      <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Country:</label>
+                      <label class="right hidden-xs-only hidden-sm-only"
+                        >Select Country:</label
+                      >
+                      <label
+                        class="right hidden-lg-only hidden-md-only hidden-xl-only"
+                        >Country:</label
+                      >
                     </v-flex>
                     <v-flex xs8 class="ml-3">
                       <v-autocomplete
@@ -340,8 +401,13 @@
                 <v-flex xs12 sm4 class="hidden-xs-only hidden-sm-only">
                   <v-layout>
                     <v-flex xs4 class="pt-4 subheading">
-                      <label class="right hidden-xs-only hidden-sm-only">Roll Number:</label>
-                      <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Roll No:</label>
+                      <label class="right hidden-xs-only hidden-sm-only"
+                        >Roll Number:</label
+                      >
+                      <label
+                        class="right hidden-lg-only hidden-md-only hidden-xl-only"
+                        >Roll No:</label
+                      >
                     </v-flex>
                     <v-flex xs8 class="ml-3">
                       <v-text-field
@@ -355,10 +421,13 @@
                 <v-flex xs12 sm4 class="hidden-xs-only hidden-sm-only">
                   <v-layout>
                     <v-flex xs4 sm4 class="pt-4 subheading">
-                      <label class="right hidden-xs-only hidden-sm-only">Permanent Address:</label>
+                      <label class="right hidden-xs-only hidden-sm-only"
+                        >Permanent Address:</label
+                      >
                       <label
                         class="right hidden-lg-only hidden-md-only hidden-xl-only"
-                      >Permanent Address:</label>
+                        >Permanent Address:</label
+                      >
                     </v-flex>
                     <v-flex xs12 sm8 class="ml-3">
                       <v-text-field
@@ -374,10 +443,13 @@
                 <v-flex xs12 sm4>
                   <v-layout>
                     <v-flex xs4 class="pt-4 subheading">
-                      <label class="right hidden-xs-only hidden-sm-only">Present Address:</label>
+                      <label class="right hidden-xs-only hidden-sm-only"
+                        >Present Address:</label
+                      >
                       <label
                         class="right hidden-lg-only hidden-md-only hidden-xl-only"
-                      >Present Address:</label>
+                        >Present Address:</label
+                      >
                     </v-flex>
                     <v-flex xs8 class="ml-3">
                       <v-text-field
@@ -389,12 +461,20 @@
                   </v-layout>
                 </v-flex>
               </v-layout>
-              <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only" wrap>
+              <v-layout
+                class="hidden-lg-only hidden-md-only hidden-xl-only"
+                wrap
+              >
                 <v-flex xs12 sm12>
                   <v-layout>
                     <v-flex xs4 class="pt-4 subheading">
-                      <label class="right hidden-xs-only hidden-sm-only">Roll Number:</label>
-                      <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Roll No:</label>
+                      <label class="right hidden-xs-only hidden-sm-only"
+                        >Roll Number:</label
+                      >
+                      <label
+                        class="right hidden-lg-only hidden-md-only hidden-xl-only"
+                        >Roll No:</label
+                      >
                     </v-flex>
                     <v-flex xs8 class="ml-3">
                       <v-text-field
@@ -406,7 +486,10 @@
                   </v-layout>
                 </v-flex>
               </v-layout>
-              <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only" wrap>
+              <v-layout
+                class="hidden-lg-only hidden-md-only hidden-xl-only"
+                wrap
+              >
                 <v-flex xs12 sm12>
                   <v-layout>
                     <v-flex xs12 sm3 class="pt-4 subheading text-xs-center">
@@ -425,7 +508,11 @@
                 </v-flex>
                 <v-flex xs12 sm12>
                   <v-layout>
-                    <v-flex xs12 sm3 class="pt-4 pr-4 subheading text-xs-center addressForm">
+                    <v-flex
+                      xs12
+                      sm3
+                      class="pt-4 pr-4 subheading text-xs-center addressForm"
+                    >
                       <label>Permanent addr:</label>
                     </v-flex>
                   </v-layout>
@@ -444,7 +531,14 @@
               <v-layout>
                 <v-flex xs12 sm12>
                   <v-layout class="right">
-                    <v-btn @click="save" round dark :loading="editLoading" class="add-button">Save</v-btn>
+                    <v-btn
+                      @click="save"
+                      round
+                      dark
+                      :loading="editLoading"
+                      class="add-button"
+                      >Save</v-btn
+                    >
                   </v-layout>
                 </v-flex>
               </v-layout>
@@ -456,19 +550,41 @@
 
     <!-- ****** PROFILE VIEW STUDENTS DEATILS ******  -->
 
-    <v-dialog v-model="profileStudentDialog" max-width="1000px" scrollable persistent>
+    <v-dialog
+      v-model="profileStudentDialog"
+      max-width="1000px"
+      scrollable
+      persistent
+    >
       <v-card flat class="Card-style pa-3">
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">View Student Details</label>
-            <v-icon size="24" class="right" @click="profileStudentDialog = false">cancel</v-icon>
+            <v-icon
+              size="24"
+              class="right"
+              @click="profileStudentDialog = false"
+              >cancel</v-icon
+            >
           </v-flex>
         </v-layout>
         <v-card-text>
-          <v-flex align-center justify-center layout text-xs-center class="mt-3">
+          <v-flex
+            align-center
+            justify-center
+            layout
+            text-xs-center
+            class="mt-3"
+          >
             <v-avatar size="100px">
-              <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl" />
-              <img :src="editedItem.profilePicUrl" v-else-if="editedItem.profilePicUrl" />
+              <img
+                src="/static/icon/user.png"
+                v-if="!editedItem.profilePicUrl"
+              />
+              <img
+                :src="editedItem.profilePicUrl"
+                v-else-if="editedItem.profilePicUrl"
+              />
             </v-avatar>
           </v-flex>
           <v-container grid-list-md>
@@ -782,7 +898,10 @@
                 </v-layout>
               </v-flex>
             </v-layout>
-            <v-layout wrap class="hidden-sm-only hidden-md-only hidden-lg-only hidden-xl-only">
+            <v-layout
+              wrap
+              class="hidden-sm-only hidden-md-only hidden-lg-only hidden-xl-only"
+            >
               <v-flex xs12 sm5>
                 <v-layout wrap>
                   <v-flex xs12 sm6>
@@ -829,7 +948,7 @@
         <v-icon dark>add</v-icon>
       </v-btn>
       <v-btn
-        v-if="role != 'TEACHER' "
+        v-if="role != 'TEACHER'"
         round
         class="open-dialog-button hidden-sm-only hidden-xs-only"
         dark
@@ -877,7 +996,8 @@
         dark
         :loading="loading"
         class="open-dialog-button hidden-xs-only hidden-sm-only"
-      >Find</v-btn>
+        >Find</v-btn
+      >
       <v-card-title class="body-1" v-show="show">
         <v-btn icon large flat @click="displaySearch">
           <v-avatar size="27">
@@ -945,7 +1065,8 @@
               dark
               :loading="loading"
               class="add-button"
-            >Find</v-btn>
+              >Find</v-btn
+            >
           </v-flex>
         </v-layout>
       </v-flex>
@@ -958,29 +1079,37 @@
     >
       <template slot="items" slot-scope="props">
         <tr class="tr">
-          <td class="text-xs-center td td-row">{{ props.item.rollNo}}</td>
+          <td class="text-xs-center td td-row">{{ props.item.rollNo }}</td>
           <td class="text-xs-center td td-row">
             <v-avatar size="40">
-              <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />
-              <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" />
+              <img
+                :src="props.item.profilePicUrl"
+                v-if="props.item.profilePicUrl"
+              />
+              <img
+                src="/static/icon/user.png"
+                v-else-if="!props.item.profilePicUrl"
+              />
             </v-avatar>
           </td>
-          <td class="text-xs-center td td-row">{{ props.item.name}}</td>
+          <td class="text-xs-center td td-row">{{ props.item.name }}</td>
           <td class="text-xs-center td td-row">{{ props.item.gender }}</td>
-          <td
-            class="text-xs-center td td-row"
-          >{{ props.item.parentId ? props.item.parentId.fatherName: '-' }}</td>
-          <td
-            class="text-xs-center td td-row"
-          >{{ props.item.parentId ? props.item.parentId.motherName: '-' }}</td>
-          <td class="text-xs-center td td-row">{{ props.item.establishmentYear }}</td>
+          <td class="text-xs-center td td-row">
+            {{ props.item.parentId ? props.item.parentId.fatherName : "-" }}
+          </td>
+          <td class="text-xs-center td td-row">
+            {{ props.item.parentId ? props.item.parentId.motherName : "-" }}
+          </td>
+          <td class="text-xs-center td td-row">
+            {{ props.item.establishmentYear }}
+          </td>
           <!-- <td class="text-xs-center td td-row">{{ props.item.mobile}}</td> -->
           <td class="text-xs-center td td-row">
             <v-switch
               class="pl-3"
               :disabled="role === 'TEACHER'"
               v-model="props.item.status"
-              @change="suspendStudentStatus(props.item.status,props.item._id)"
+              @change="suspendStudentStatus(props.item.status, props.item._id)"
             ></v-switch>
           </td>
           <td class="text-xs-center td td-row">
@@ -988,27 +1117,27 @@
               <v-tooltip top>
                 <img
                   slot="activator"
-                  style="cursor:pointer; width:25px; height:25px; "
+                  style="cursor: pointer; width: 25px; height: 25px"
                   class="mr-3"
                   @click="profile(props.item)"
                   src="/static/icon/view.png"
                 />
                 <span>View</span>
               </v-tooltip>
-              <v-tooltip top v-if="role != 'TEACHER' ">
+              <v-tooltip top v-if="role != 'TEACHER'">
                 <img
                   slot="activator"
-                  style="cursor:pointer; width:20px; height:18px; "
+                  style="cursor: pointer; width: 20px; height: 18px"
                   class="mr-3"
                   @click="editItem(props.item)"
                   src="/static/icon/edit.png"
                 />
                 <span>Edit</span>
               </v-tooltip>
-              <v-tooltip top v-if="role != 'TEACHER' ">
+              <v-tooltip top v-if="role != 'TEACHER'">
                 <img
                   slot="activator"
-                  style="cursor:pointer; width:20px; height:20px; "
+                  style="cursor: pointer; width: 20px; height: 20px"
                   class="mr-3"
                   @click="deleteItem(props.item)"
                   src="/static/icon/delete.png"
@@ -1019,15 +1148,17 @@
           </td>
         </tr>
       </template>
-      <v-alert
-        slot="no-results"
-        :value="true"
-        color="error"
-        icon="warning"
-      >Your search for "{{ search }}" found no results.</v-alert>
+      <v-alert slot="no-results" :value="true" color="error" icon="warning"
+        >Your search for "{{ search }}" found no results.</v-alert
+      >
     </v-data-table>
     <!-- DIALOG -- ADD STUDENTS DETAILS -->
-    <v-dialog v-model="addStudentDialog" max-width="1280" v-if="addStudentDialog" persistent>
+    <v-dialog
+      v-model="addStudentDialog"
+      max-width="1280"
+      v-if="addStudentDialog"
+      persistent
+    >
       <v-card flat class="Card-style pa-2">
         <v-layout>
           <v-flex xs12>
@@ -1035,8 +1166,17 @@
             <v-icon
               size="24"
               class="right"
-              @click="$refs.parentForm.reset();$refs.parentFormLgScr.reset();$refs.form.reset();e2 = 1;addStudentDialog = false"
-            >cancel</v-icon>
+              @click="
+                $refs.parentForm.reset();
+                $refs.parentFormLgScr.reset();
+                $refs.form.reset();
+                e2 = 1;
+                addStudentDialog = false;
+                showNext = false;
+                showParent = true;
+              "
+              >cancel</v-icon
+            >
           </v-flex>
         </v-layout>
         <v-container fluid>
@@ -1044,25 +1184,36 @@
             <v-flex xs12>
               <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-stepper-step :complete="e2 > 1" step="1"
+                    >Fill parent Details</v-stepper-step
+                  >
                   <v-divider></v-divider>
                   <v-stepper-step step="2">Fill Student Details</v-stepper-step>
                 </v-stepper-header>
                 <v-stepper-items>
                   <v-stepper-content step="1">
                     <v-container fluid class>
-                      <v-flex xs12 sm12 class="hidden-md-only hidden-lg-only hidden-xl-only">
-                        <v-form ref="parentForm" v-model="valid" lazy-validation>
+                      <!-- FILL PARENT DETAILS - hidden md,lg,xl-->
+                      <v-flex
+                        xs12
+                        sm12
+                        class="hidden-md-only hidden-lg-only hidden-xl-only"
+                      >
+                        <v-form
+                          ref="parentForm"
+                          v-model="valid"
+                          lazy-validation
+                        >
                           <v-layout wrap>
+                            <!-- FATHER CELL NUMBER hidden md,lg,xl -->
                             <v-flex xs12 sm6>
-                              <!-- FATHER CELL NUMBER visible only on xs and sm screen -->
                               <v-layout wrap>
                                 <v-flex xs12 class="pt-4 subheading">
                                   <label>Father Cell No:</label>
                                 </v-flex>
                                 <v-flex xs12>
                                   <v-layout row wrap xs12>
-                                    <v-flex sm3 class="mt-3">
+                                    <v-flex sm3 class="mt-3" v-if="!showNext">
                                       <vue-country-code
                                         @onSelect="addFatherCellCode"
                                         class="black--text"
@@ -1071,6 +1222,7 @@
 
                                     <v-flex sm9>
                                       <v-text-field
+                                        :disabled="showNext"
                                         v-model.trim="parentData.fatherCellNo"
                                         placeholder="fill your father Cell Number"
                                         type="number"
@@ -1084,6 +1236,7 @@
                                 </v-flex>
                               </v-layout>
                             </v-flex>
+                            <!-- PARENT EMAIL ID - hidden md,lg,xl -->
                             <v-flex xs12 sm6>
                               <v-layout wrap>
                                 <v-flex xs12 class="pt-4 subheading">
@@ -1091,6 +1244,7 @@
                                 </v-flex>
                                 <v-flex xs12>
                                   <v-text-field
+                                    :disabled="showNext"
                                     placeholder="fill Parent email"
                                     v-model="parentData.email"
                                     type="text"
@@ -1100,7 +1254,9 @@
                               </v-layout>
                             </v-flex>
                           </v-layout>
+
                           <v-layout wrap>
+                            <!-- FATHER NAME - hidden md,lg,xl -->
                             <v-flex xs12 sm6>
                               <v-layout wrap>
                                 <v-flex xs12 class="pt-4 subheading">
@@ -1108,6 +1264,7 @@
                                 </v-flex>
                                 <v-flex xs12>
                                   <v-text-field
+                                    :disabled="showNext"
                                     v-model="parentData.fatherName"
                                     placeholder="Fill your father Name"
                                     required
@@ -1115,6 +1272,7 @@
                                 </v-flex>
                               </v-layout>
                             </v-flex>
+                            <!-- MOTHER NAME - hidden md,lg,xl -->
                             <v-flex xs12 sm6>
                               <v-layout wrap>
                                 <v-flex xs12 class="pt-4 subheading">
@@ -1122,6 +1280,7 @@
                                 </v-flex>
                                 <v-flex xs12>
                                   <v-text-field
+                                    :disabled="showNext"
                                     v-model="parentData.motherName"
                                     placeholder="fill your Mother Name"
                                     type="text"
@@ -1131,8 +1290,9 @@
                               </v-layout>
                             </v-flex>
                           </v-layout>
+
                           <v-layout wrap>
-                            <!-- MOTHER CELL NUMBER - VISIBLE ONLY ON xs and sm screen-->
+                            <!-- MOTHER CELL NUMBER - - hidden md,lg,xl -->
                             <v-flex xs12 sm6>
                               <v-layout wrap>
                                 <v-flex xs12 class="pt-4 subheading">
@@ -1140,11 +1300,15 @@
                                 </v-flex>
                                 <v-flex xs12>
                                   <v-layout row wrap>
-                                    <v-flex sm3 class="mt-3">
-                                      <vue-country-code @onSelect="onSelect" class="black--text"></vue-country-code>
+                                    <v-flex sm3 class="mt-3" v-if="!showNext">
+                                      <vue-country-code
+                                        @onSelect="onSelect"
+                                        class="black--text"
+                                      ></vue-country-code>
                                     </v-flex>
                                     <v-flex sm9>
                                       <v-text-field
+                                        :disabled="showNext"
                                         v-model="parentData.motherCellNo"
                                         placeholder="Mother Cell Number"
                                         type="number"
@@ -1155,6 +1319,7 @@
                                 </v-flex>
                               </v-layout>
                             </v-flex>
+                            <!-- FATHER PROFESSION - hidden md,lg,xl -->
                             <v-flex xs12 sm6>
                               <v-layout wrap>
                                 <v-flex xs12 class="pt-4 subheading">
@@ -1162,6 +1327,7 @@
                                 </v-flex>
                                 <v-flex xs12>
                                   <v-text-field
+                                    :disabled="showNext"
                                     v-model="parentData.fatherProfession"
                                     placeholder="fill your father profession"
                                   ></v-text-field>
@@ -1169,7 +1335,9 @@
                               </v-layout>
                             </v-flex>
                           </v-layout>
+
                           <v-layout wrap>
+                            <!-- MOTHER PROFESSION - hidden md,lg,xl -->
                             <v-flex xs12 sm6>
                               <v-layout wrap>
                                 <v-flex xs12 class="pt-4 subheading">
@@ -1177,12 +1345,14 @@
                                 </v-flex>
                                 <v-flex xs12>
                                   <v-text-field
+                                    :disabled="showNext"
                                     v-model="parentData.motherProfession"
                                     placeholder="fill your mother profession"
                                   ></v-text-field>
                                 </v-flex>
                               </v-layout>
                             </v-flex>
+                            <!-- PASSWORD - hidden md,lg,xl -->
                             <v-flex xs12 sm6>
                               <v-layout wrap>
                                 <v-flex xs12 class="pt-4 subheading">
@@ -1190,6 +1360,7 @@
                                 </v-flex>
                                 <v-flex xs12>
                                   <v-text-field
+                                    :disabled="showNext"
                                     v-model="parentData.password"
                                     placeholder="Enter Your Password"
                                   ></v-text-field>
@@ -1197,7 +1368,8 @@
                               </v-layout>
                             </v-flex>
                           </v-layout>
-                          <v-flex sm12 class="hidden-xs-only">
+                          <!-- visible sm only above  -->
+                          <!-- <v-flex sm12 class="hidden-xs-only">
                             <v-card-actions>
                               <v-spacer></v-spacer>
                               <v-btn
@@ -1205,43 +1377,76 @@
                                 round
                                 dark
                                 :loading="loading"
-                                v-show="showParent"
+                                v-if="showParent"
                                 class="add-button"
-                              >Add</v-btn>
+                                >Add</v-btn
+                              >
                               <v-btn
-                                v-show="showNext"
+                                v-if="showNext"
                                 @click="e2 = 2"
                                 round
                                 dark
                                 class="add-button"
-                              >Next</v-btn>
+                                >Next</v-btn
+                              >
+                              <v-btn
+                                v-if="showNext"
+                                @click="
+                                  showNext = false;
+                                  showParent = true;
+                                  $refs.parentForm.reset();
+                                "
+                                round
+                                dark
+                                class="add-button"
+                                >Change No</v-btn
+                              >
                             </v-card-actions>
-                          </v-flex>
+                          </v-flex> -->
+                          <!-- visible xs only -->
                           <v-flex
-                            xs6
-                            class="hidden-md-only hidden-sm-only hidden-lg-only hidden-xl-only mx-auto mt-2"
+                            xs12
+                            class="hidden-md-only hidden-lg-only hidden-xl-only mx-auto mt-2"
                           >
                             <v-btn
                               @click="submitParentDetails"
                               round
                               dark
                               :loading="loading"
-                              v-show="showParent"
+                              v-if="showParent"
                               class="add-button"
-                            >Add</v-btn>
+                              >Add</v-btn
+                            >
                             <v-btn
-                              v-show="showNext"
+                              v-if="showNext"
                               @click="e2 = 2"
                               round
                               dark
                               class="add-button"
-                            >Next</v-btn>
+                              >Next</v-btn
+                            >
+                            <v-btn
+                              v-if="showNext"
+                              @click="
+                                showNext = false;
+                                showParent = true;
+                                $refs.parentForm.reset();
+                              "
+                              round
+                              dark
+                              class="add-button"
+                              >Change No</v-btn
+                            >
                           </v-flex>
                         </v-form>
                       </v-flex>
                       <!-- FATHER CELL NUMBER - HIDDEN xs and sm screen -->
                       <v-flex xs12 sm12 class="hidden-xs-only hidden-sm-only">
-                        <v-form ref="parentFormLgScr" v-model="valid" lazy-validation>
+                        <v-form
+                          ref="parentFormLgScr"
+                          v-model="valid"
+                          lazy-validation
+                        >
                           <v-layout wrap>
                             <v-flex xs12 sm6>
                               <v-layout>
@@ -1250,7 +1455,7 @@
                                 </v-flex>
                                 <v-flex xs8 class="ml-3">
                                   <v-layout row wrap>
-                                    <v-flex md3 class="mt-3">
+                                    <v-flex md3 class="mt-3" v-if="!showNext">
                                       <vue-country-code
                                         @onSelect="addFatherCellCode"
                                         class="black--text"
@@ -1258,6 +1463,7 @@
                                     </v-flex>
                                     <v-flex md9>
                                       <v-text-field
+                                        :disabled="showNext"
                                         v-model.trim="parentData.fatherCellNo"
                                         placeholder="fill your father Cell Number"
                                         type="number"
@@ -1271,6 +1477,7 @@
                                 </v-flex>
                               </v-layout>
                             </v-flex>
+                            <!-- PARENT EMAIL ID - HIDDEN xs and sm screen -->
                             <v-flex xs12 sm6>
                               <v-layout>
                                 <v-flex xs4 class="pt-4 subheading">
@@ -1278,6 +1485,7 @@
                                 </v-flex>
                                 <v-flex xs8 class="ml-3">
                                   <v-text-field
+                                    :disabled="showNext"
                                     placeholder="fill Parent email"
                                     v-model="parentData.email"
                                     type="text"
@@ -1288,6 +1496,7 @@
                             </v-flex>
                           </v-layout>
                           <v-layout wrap>
+                            <!--FATHER NAME HIDDEN xs and sm -->
                             <v-flex xs12 sm6>
                               <v-layout>
                                 <v-flex xs4 class="pt-4 subheading">
@@ -1295,6 +1504,7 @@
                                 </v-flex>
                                 <v-flex xs8 class="ml-3">
                                   <v-text-field
+                                    :disabled="showNext"
                                     v-model="parentData.fatherName"
                                     placeholder="Fill your father Name"
                                     required
@@ -1302,6 +1512,7 @@
                                 </v-flex>
                               </v-layout>
                             </v-flex>
+                            <!-- MOTHER NAME HIDDDEN xs and sm screen -->
                             <v-flex xs12 sm6>
                               <v-layout>
                                 <v-flex xs4 class="pt-4 subheading">
@@ -1309,6 +1520,7 @@
                                 </v-flex>
                                 <v-flex xs8 class="ml-3">
                                   <v-text-field
+                                    :disabled="showNext"
                                     v-model="parentData.motherName"
                                     placeholder="fill your Mother Name"
                                     type="text"
@@ -1327,11 +1539,15 @@
                                 </v-flex>
                                 <v-flex xs8 class="ml-3">
                                   <v-layout row wrap>
-                                    <v-flex md3 class="mt-3">
-                                      <vue-country-code @onSelect="onSelect" class="black--text"></vue-country-code>
+                                    <v-flex md3 class="mt-3" v-if="!showNext">
+                                      <vue-country-code
+                                        @onSelect="onSelect"
+                                        class="black--text"
+                                      ></vue-country-code>
                                     </v-flex>
                                     <v-flex md9>
                                       <v-text-field
+                                        :disabled="showNext"
                                         v-model="parentData.motherCellNo"
                                         placeholder="fill your  Mother Cell Number"
                                         type="number"
@@ -1342,13 +1558,17 @@
                                 </v-flex>
                               </v-layout>
                             </v-flex>
+                            <!-- FATHER PROFESSION HIDDEN XS AND SM SCREEN -->
                             <v-flex xs12 sm6>
                               <v-layout>
                                 <v-flex xs4 class="pt-4 subheading">
-                                  <label class="right">Father Profession:</label>
+                                  <label class="right"
+                                    >Father Profession:</label
+                                  >
                                 </v-flex>
                                 <v-flex xs8 class="ml-3">
                                   <v-text-field
+                                    :disabled="showNext"
                                     v-model="parentData.fatherProfession"
                                     placeholder="fill your father profession"
                                   ></v-text-field>
@@ -1357,13 +1577,17 @@
                             </v-flex>
                           </v-layout>
                           <v-layout wrap>
+                            <!-- MOTHERS PROFESSION HIDDEN XS AND SM SCREEN -->
                             <v-flex xs12 sm6>
                               <v-layout>
                                 <v-flex xs4 class="pt-4 subheading">
-                                  <label class="right">Mother Profession:</label>
+                                  <label class="right"
+                                    >Mother Profession:</label
+                                  >
                                 </v-flex>
                                 <v-flex xs8 class="ml-3">
                                   <v-text-field
+                                    :disabled="showNext"
                                     v-model="parentData.motherProfession"
                                     placeholder="fill your mother profession"
                                   ></v-text-field>
@@ -1377,7 +1601,9 @@
                                 </v-flex>
                                 <v-flex xs8 class="ml-3">
                                   <v-text-field
-                                    :append-icon="e1 ? 'visibility_off' : 'visibility'"
+                                    :append-icon="
+                                      e1 ? 'visibility_off' : 'visibility'
+                                    "
                                     :append-icon-cb="() => (e1 = !e1)"
                                     :type="e1 ? 'password' : 'text'"
                                     :rules="password"
@@ -1400,17 +1626,31 @@
                                 :loading="loading"
                                 v-show="showParent"
                                 class="add-button"
-                              >Add</v-btn>
+                                >Add</v-btn
+                              >
                               <v-btn
                                 v-show="showNext"
                                 @click="e2 = 2"
                                 round
                                 dark
                                 class="add-button"
-                              >Next</v-btn>
+                                >Next</v-btn
+                              >
+                              <v-btn
+                                v-if="showNext"
+                                @click="
+                                  showNext = false;
+                                  showParent = true;
+                                  $refs.parentFormLgScr.reset();
+                                "
+                                round
+                                dark
+                                class="add-button"
+                                >Change No</v-btn
+                              >
                             </v-card-actions>
                           </v-flex>
-                          <v-flex
+                          <!-- <v-flex
                             xs6
                             class="hidden-md-only hidden-sm-only hidden-lg-only hidden-xl-only mx-auto mt-2"
                           >
@@ -1421,15 +1661,29 @@
                               :loading="loading"
                               v-show="showParent"
                               class="add-button"
-                            >Add</v-btn>
+                              >Add</v-btn
+                            >
                             <v-btn
                               v-show="showNext"
                               @click="e2 = 2"
                               round
                               dark
                               class="add-button"
-                            >Next</v-btn>
-                          </v-flex>
+                              >Next</v-btn
+                            >
+                            <v-btn
+                              v-if="showNext"
+                              @click="
+                                showNext = false;
+                                showParent = true;
+                                $refs.parentFormLgScr.reset();
+                              "
+                              round
+                              dark
+                              class="add-button"
+                              >Change No</v-btn
+                            >
+                          </v-flex> -->
                         </v-form>
                       </v-flex>
                     </v-container>
@@ -1443,7 +1697,10 @@
                             class="text-xs-center text-sm-center text-md-center text-lg-center"
                           >
                             <v-avatar size="100px">
-                              <img src="/static/icon/user.png" v-if="!imageUrl" />
+                              <img
+                                src="/static/icon/user.png"
+                                v-if="!imageUrl"
+                              />
                             </v-avatar>
                             <input
                               type="file"
@@ -1456,7 +1713,7 @@
                               :src="imageData.imageUrl"
                               height="150"
                               v-if="imageUrl"
-                              style="border-radius:50%; width:200px"
+                              style="border-radius: 50%; width: 200px"
                             />
                           </v-flex>
                         </v-layout>
@@ -1464,10 +1721,14 @@
                           <v-flex xs12 sm6>
                             <v-layout>
                               <v-flex x4 sm4 class="pt-4 subheading">
-                                <label class="right hidden-xs-only hidden-sm-only">Select Class:</label>
+                                <label
+                                  class="right hidden-xs-only hidden-sm-only"
+                                  >Select Class:</label
+                                >
                                 <label
                                   class="right hidden-lg-only hidden-md-only hidden-xl-only"
-                                >Class:</label>
+                                  >Class:</label
+                                >
                               </v-flex>
                               <v-flex xs8 sm8 class="ml-3">
                                 <v-select
@@ -1487,10 +1748,14 @@
                           <v-flex xs12 sm6>
                             <v-layout>
                               <v-flex xs4 class="pt-4 subheading">
-                                <label class="right hidden-xs-only hidden-sm-only">Select Section:</label>
+                                <label
+                                  class="right hidden-xs-only hidden-sm-only"
+                                  >Select Section:</label
+                                >
                                 <label
                                   class="right hidden-lg-only hidden-md-only hidden-xl-only"
-                                >Section:</label>
+                                  >Section:</label
+                                >
                               </v-flex>
                               <v-flex xs8 class="ml-3">
                                 <v-select
@@ -1511,10 +1776,14 @@
                           <v-flex xs12 sm6>
                             <v-layout>
                               <v-flex xs4 sm4 class="pt-4 subheading">
-                                <label class="right hidden-xs-only hidden-sm-only">Full Name:</label>
+                                <label
+                                  class="right hidden-xs-only hidden-sm-only"
+                                  >Full Name:</label
+                                >
                                 <label
                                   class="right hidden-lg-only hidden-md-only hidden-xl-only"
-                                >Name:</label>
+                                  >Name:</label
+                                >
                               </v-flex>
                               <v-flex xs8 sm8 class="ml-3">
                                 <v-text-field
@@ -1549,10 +1818,14 @@
                           <v-flex xs12 sm6>
                             <v-layout>
                               <v-flex xs4 sm4 class="pt-4 subheading">
-                                <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label>
+                                <label
+                                  class="right hidden-sm-only hidden-xs-only"
+                                  >Date of Birth:</label
+                                >
                                 <label
                                   class="right hidden-lg-only hidden-xl-only hidden-md-only"
-                                >D.O.B:</label>
+                                  >D.O.B:</label
+                                >
                               </v-flex>
                               <v-flex xs8 sm8 class="ml-3">
                                 <v-menu
@@ -1575,7 +1848,9 @@
                                   <v-date-picker
                                     ref="picker"
                                     v-model="addStudents.date"
-                                    :max="new Date().toISOString().substr(0, 10)"
+                                    :max="
+                                      new Date().toISOString().substr(0, 10)
+                                    "
                                     min="1950-01-01"
                                     @input="menu = false"
                                   ></v-date-picker>
@@ -1641,10 +1916,14 @@
                           <v-flex xs12 sm6>
                             <v-layout>
                               <v-flex xs4 class="pt-4 subheading">
-                                <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label>
+                                <label
+                                  class="right hidden-xs-only hidden-sm-only"
+                                  >Mobile No:</label
+                                >
                                 <label
                                   class="right hidden-lg-only hidden-md-only hidden-xl-only"
-                                >Mobile:</label>
+                                  >Mobile:</label
+                                >
                               </v-flex>
                               <v-flex xs8 class="ml-3">
                                 <v-layout row wrap>
@@ -1669,10 +1948,14 @@
                           <v-flex xs12 sm6>
                             <v-layout>
                               <v-flex xs4 class="pt-4 subheading">
-                                <label class="right hidden-xs-only hidden-sm-only">Select Country:</label>
+                                <label
+                                  class="right hidden-xs-only hidden-sm-only"
+                                  >Select Country:</label
+                                >
                                 <label
                                   class="right hidden-lg-only hidden-md-only hidden-xl-only"
-                                >Country:</label>
+                                  >Country:</label
+                                >
                               </v-flex>
                               <v-flex xs8 class="ml-3">
                                 <v-autocomplete
@@ -1706,10 +1989,14 @@
                           <v-flex xs12 sm6>
                             <v-layout>
                               <v-flex xs4 class="pt-4 subheading">
-                                <label class="right hidden-xs-only hidden-sm-only">Blood Group:</label>
+                                <label
+                                  class="right hidden-xs-only hidden-sm-only"
+                                  >Blood Group:</label
+                                >
                                 <label
                                   class="right hidden-lg-only hidden-md-only hidden-xl-only"
-                                >Blood:</label>
+                                  >Blood:</label
+                                >
                               </v-flex>
                               <v-flex xs8 class="ml-3">
                                 <v-text-field
@@ -1725,10 +2012,14 @@
                           <v-flex xs12 sm6>
                             <v-layout>
                               <v-flex xs4 class="pt-4 subheading">
-                                <label class="right hidden-xs-only hidden-sm-only">Roll Number:</label>
+                                <label
+                                  class="right hidden-xs-only hidden-sm-only"
+                                  >Roll Number:</label
+                                >
                                 <label
                                   class="right hidden-lg-only hidden-md-only hidden-xl-only"
-                                >Roll No:</label>
+                                  >Roll No:</label
+                                >
                               </v-flex>
                               <v-flex xs8 class="ml-3">
                                 <v-text-field
@@ -1743,10 +2034,14 @@
                           <v-flex xs12 sm6>
                             <v-layout>
                               <v-flex xs4 class="pt-4 subheading">
-                                <label class="right hidden-xs-only hidden-sm-only">Medical Notes:</label>
+                                <label
+                                  class="right hidden-xs-only hidden-sm-only"
+                                  >Medical Notes:</label
+                                >
                                 <label
                                   class="right hidden-lg-only hidden-md-only hidden-xl-only"
-                                >Medical:</label>
+                                  >Medical:</label
+                                >
                               </v-flex>
                               <v-flex xs8 class="ml-3">
                                 <v-text-field
@@ -1792,10 +2087,14 @@
                           <v-flex xs12 sm6>
                             <v-layout>
                               <v-flex xs4 class="pt-4 subheading">
-                                <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label>
+                                <label
+                                  class="right hidden-xs-only hidden-sm-only"
+                                  >Uplaod Image:</label
+                                >
                                 <label
                                   class="right hidden-lg-only hidden-md-only hidden-xl-only"
-                                >Uplaod :</label>
+                                  >Uplaod :</label
+                                >
                               </v-flex>
                               <v-flex xs8 class="ml-3">
                                 <v-text-field
@@ -1810,10 +2109,14 @@
                           <v-flex xs12 sm6>
                             <v-layout>
                               <v-flex xs4 class="pt-4 subheading">
-                                <label class="right hidden-xs-only hidden-sm-only">Academic Year:</label>
+                                <label
+                                  class="right hidden-xs-only hidden-sm-only"
+                                  >Academic Year:</label
+                                >
                                 <label
                                   class="right hidden-lg-only hidden-md-only hidden-xl-only"
-                                >Year:</label>
+                                  >Year:</label
+                                >
                               </v-flex>
                               <v-flex xs8 class="ml-3">
                                 <v-text-field
@@ -1846,7 +2149,11 @@
                           </v-flex>
                           <v-flex xs12 sm6>
                             <v-layout>
-                              <v-flex xs4 sm4 class="pt-4 subheading addressForm">
+                              <v-flex
+                                xs4
+                                sm4
+                                class="pt-4 subheading addressForm"
+                              >
                                 <label class="right">Permanent Address:</label>
                               </v-flex>
                               <v-flex xs12 sm8 class="ml-3">
@@ -1862,7 +2169,11 @@
                         <v-layout class="hidden-xs-only hidden-sm-only">
                           <v-flex xs12 sm6>
                             <v-layout>
-                              <v-flex xs4 sm4 class="pt-4 subheading addressForm">
+                              <v-flex
+                                xs4
+                                sm4
+                                class="pt-4 subheading addressForm"
+                              >
                                 <label class="right">Permanent Address:</label>
                               </v-flex>
                               <v-flex xs12 sm8 class="ml-3">
@@ -1875,10 +2186,17 @@
                             </v-layout>
                           </v-flex>
                         </v-layout>
-                        <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only" wrap>
+                        <v-layout
+                          class="hidden-lg-only hidden-md-only hidden-xl-only"
+                          wrap
+                        >
                           <v-flex xs12 sm12>
                             <v-layout>
-                              <v-flex xs12 sm12 class="pt-4 subheading text-xs-center">
+                              <v-flex
+                                xs12
+                                sm12
+                                class="pt-4 subheading text-xs-center"
+                              >
                                 <label class>Present Address:</label>
                               </v-flex>
                             </v-layout>
@@ -1921,7 +2239,13 @@
                           <v-flex xs12 sm12>
                             <v-layout class="right">
                               <!-- <v-flex xs6> -->
-                              <v-btn round dark @click="e2 = 1" class="clear-button">Back</v-btn>
+                              <v-btn
+                                round
+                                dark
+                                @click="e2 = 1"
+                                class="clear-button"
+                                >Back</v-btn
+                              >
                               <!-- </v-flex>
                               <v-flex xs6>-->
                               <v-btn
@@ -1930,7 +2254,8 @@
                                 dark
                                 :loading="loading"
                                 class="add-button"
-                              >Add</v-btn>
+                                >Add</v-btn
+                              >
                               <!-- </v-flex> -->
                             </v-layout>
                           </v-flex>
@@ -1952,7 +2277,8 @@
       :vertical="mode === 'vertical'"
       v-model="snackbar"
       :color="color"
-    >{{ text }}</v-snackbar>
+      >{{ text }}</v-snackbar
+    >
     <div class="loader" v-if="showLoader">
       <v-progress-circular indeterminate color="white"></v-progress-circular>
     </div>
@@ -2510,13 +2836,13 @@ export default {
             if (this.text === "Data not found!") {
               this.showNext = false;
               this.showParent = true;
-              this.parentData.email = "";
-              this.parentData.fatherName = "";
-              this.parentData.motherName = "";
-              this.parentData.motherCellNo = "";
-              this.parentData.fatherProfession = "";
-              this.parentData.motherProfession = "";
-              this.parentData.password = "";
+              // this.parentData.email = "";
+              // this.parentData.fatherName = "";
+              // this.parentData.motherName = "";
+              // this.parentData.motherCellNo = "";
+              // this.parentData.fatherProfession = "";
+              // this.parentData.motherProfession = "";
+              // this.parentData.password = "";
             }
             this.showLoader = false;
           });
diff --git a/src/pages/Teachers/teachers.vue b/src/pages/Teachers/teachers.vue
index 348c352..4fa1012 100644
--- a/src/pages/Teachers/teachers.vue
+++ b/src/pages/Teachers/teachers.vue
@@ -1,36 +1,49 @@
 <template>
   <v-container fluid class="body-color">
     <!-- ****** EDIT TEACHERS DETAILS ****** -->
-    <v-dialog v-model="editTeacherDialog" max-width="1160px" scrollable persistent>
+    <v-dialog
+      v-model="editTeacherDialog"
+      max-width="1160px"
+      scrollable
+      persistent
+    >
       <v-card flat class="Card-style pa-3">
         <v-card-text>
           <v-layout>
             <v-flex xs12>
               <label class="title text-xs-center">Edit Teacher Details</label>
-              <v-icon size="24" class="right" @click="editTeacherDialog = false">cancel</v-icon>
+              <v-icon size="24" class="right" @click="editTeacherDialog = false"
+                >cancel</v-icon
+              >
             </v-flex>
           </v-layout>
           <v-container fluid>
             <v-layout>
-              <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center my-4">
-                <v-avatar size="100px" v-if="!editedItem.profilePicUrl && !imageUrl">
+              <v-flex
+                xs12
+                class="text-xs-center text-sm-center text-md-center text-lg-center my-4"
+              >
+                <v-avatar
+                  size="100px"
+                  v-if="!editedItem.profilePicUrl && !imageUrl"
+                >
                   <img src="/static/icon/user.png" />
                 </v-avatar>
                 <img
                   :src="editedItem.profilePicUrl"
                   v-else-if="editedItem.profilePicUrl && !imageUrl"
                   height="150"
-                  style="border-radius:50%; width:150px"
+                  style="border-radius: 50%; width: 150px"
                 />
                 <img
                   v-if="imageUrl"
                   :src="imageUrl"
                   height="150"
-                  style="border-radius:50%; width:150px"
+                  style="border-radius: 50%; width: 150px"
                 />
                 <input
                   type="file"
-                  style="display:none"
+                  style="display: none"
                   ref="image"
                   accept="image/*"
                   @change="onFilePicked"
@@ -41,8 +54,13 @@
               <v-flex xs12 sm6>
                 <v-layout>
                   <v-flex xs4 class="pt-4 subheading">
-                    <label class="right hidden-xs-only hidden-sm-only">Full Name:</label>
-                    <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Name:</label>
+                    <label class="right hidden-xs-only hidden-sm-only"
+                      >Full Name:</label
+                    >
+                    <label
+                      class="right hidden-lg-only hidden-md-only hidden-xl-only"
+                      >Name:</label
+                    >
                   </v-flex>
                   <v-flex xs8 class="ml-3">
                     <v-text-field
@@ -74,8 +92,13 @@
               <v-flex xs12 sm6>
                 <v-layout>
                   <v-flex xs4 class="pt-4 subheading">
-                    <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label>
-                    <label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label>
+                    <label class="right hidden-sm-only hidden-xs-only"
+                      >Date of Birth:</label
+                    >
+                    <label
+                      class="right hidden-lg-only hidden-xl-only hidden-md-only"
+                      >D.O.B:</label
+                    >
                   </v-flex>
                   <v-flex xs8 class="ml-3">
                     <v-menu
@@ -158,13 +181,21 @@
               <v-flex xs12 sm6>
                 <v-layout>
                   <v-flex xs4 class="pt-4 subheading">
-                    <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label>
-                    <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Mobile:</label>
+                    <label class="right hidden-xs-only hidden-sm-only"
+                      >Mobile No:</label
+                    >
+                    <label
+                      class="right hidden-lg-only hidden-md-only hidden-xl-only"
+                      >Mobile:</label
+                    >
                   </v-flex>
                   <v-flex xs8 class="ml-3">
                     <v-layout row wrap>
                       <v-flex xs3 class="mt-3">
-                        <vue-country-code @onSelect="editMobileCode" class="black--text"></vue-country-code>
+                        <vue-country-code
+                          @onSelect="editMobileCode"
+                          class="black--text"
+                        ></vue-country-code>
                       </v-flex>
                       <v-flex xs9>
                         <v-text-field
@@ -181,8 +212,13 @@
               <v-flex xs12 sm6>
                 <v-layout>
                   <v-flex xs4 class="pt-4 subheading">
-                    <label class="right hidden-xs-only hidden-sm-only">Select Country:</label>
-                    <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Country:</label>
+                    <label class="right hidden-xs-only hidden-sm-only"
+                      >Select Country:</label
+                    >
+                    <label
+                      class="right hidden-lg-only hidden-md-only hidden-xl-only"
+                      >Country:</label
+                    >
                   </v-flex>
                   <v-flex xs8 sm8 class="ml-3">
                     <v-autocomplete
@@ -232,8 +268,13 @@
               <v-flex xs12 sm6>
                 <v-layout>
                   <v-flex xs4 class="pt-4 subheading">
-                    <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label>
-                    <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod :</label>
+                    <label class="right hidden-xs-only hidden-sm-only"
+                      >Uplaod Image:</label
+                    >
+                    <label
+                      class="right hidden-lg-only hidden-md-only hidden-xl-only"
+                      >Uplaod :</label
+                    >
                   </v-flex>
                   <v-flex xs8 sm8 class="ml-3">
                     <v-text-field
@@ -298,7 +339,11 @@
               </v-flex>
               <v-flex xs12 sm12>
                 <v-layout>
-                  <v-flex xs12 sm3 class="pt-4 pr-4 subheading text-xs-center addressForm">
+                  <v-flex
+                    xs12
+                    sm3
+                    class="pt-4 pr-4 subheading text-xs-center addressForm"
+                  >
                     <label>Permanent Address:</label>
                   </v-flex>
                 </v-layout>
@@ -318,7 +363,14 @@
               <v-flex xs12 sm12>
                 <v-flex xs12 sm12>
                   <v-layout class="right">
-                    <v-btn @click="save" round dark :loading="loading" class="add-button">Save</v-btn>
+                    <v-btn
+                      @click="save"
+                      round
+                      dark
+                      :loading="loading"
+                      class="add-button"
+                      >Save</v-btn
+                    >
                   </v-layout>
                 </v-flex>
               </v-flex>
@@ -335,7 +387,12 @@
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">View Teacher</label>
-            <v-icon size="24" class="right" @click="viewTeacherProfileDialog = false">cancel</v-icon>
+            <v-icon
+              size="24"
+              class="right"
+              @click="viewTeacherProfileDialog = false"
+              >cancel</v-icon
+            >
           </v-flex>
         </v-layout>
         <v-card-text>
@@ -344,8 +401,14 @@
               <v-flex>
                 <v-flex align-center justify-center layout text-xs-center>
                   <v-avatar size="80">
-                    <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl" />
-                    <img :src="editedItem.profilePicUrl" v-else-if="editedItem.profilePicUrl" />
+                    <img
+                      src="/static/icon/user.png"
+                      v-if="!editedItem.profilePicUrl"
+                    />
+                    <img
+                      :src="editedItem.profilePicUrl"
+                      v-else-if="editedItem.profilePicUrl"
+                    />
                   </v-avatar>
                 </v-flex>
                 <v-layout>
@@ -476,7 +539,7 @@
         <v-icon dark>add</v-icon>
       </v-btn>
       <v-btn
-        v-if="role != 'TEACHER' "
+        v-if="role != 'TEACHER'"
         round
         class="open-dialog-button hidden-sm-only hidden-xs-only"
         dark
@@ -513,23 +576,31 @@
     >
       <template slot="items" slot-scope="props">
         <tr class="tr">
-          <td class="td td-row">{{ props.index + 1}}</td>
+          <td class="td td-row">{{ props.index + 1 }}</td>
           <td class="td td-row text-xs-center">
             <v-avatar size="40">
-              <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />
-              <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" />
+              <img
+                :src="props.item.profilePicUrl"
+                v-if="props.item.profilePicUrl"
+              />
+              <img
+                src="/static/icon/user.png"
+                v-else-if="!props.item.profilePicUrl"
+              />
             </v-avatar>
           </td>
-          <td class="td td-row text-xs-center">{{ props.item.name}}</td>
+          <td class="td td-row text-xs-center">{{ props.item.name }}</td>
           <td class="td td-row text-xs-center">{{ props.item.email }}</td>
           <td class="td td-row text-xs-center">{{ dates(props.item.dob) }}</td>
-          <td class="td td-row text-xs-center">{{ dates(props.item.joinDate)}}</td>
+          <td class="td td-row text-xs-center">
+            {{ dates(props.item.joinDate) }}
+          </td>
           <td class="td td-row text-xs-center">{{ props.item.mobileNo }}</td>
           <td class="td td-row text-xs-center">
             <v-switch
               class="pl-3"
               v-model="props.item.status"
-              @change="suspendStatus(props.item.status,props.item._id)"
+              @change="suspendStatus(props.item.status, props.item._id)"
             ></v-switch>
           </td>
           <td class="text-xs-center td td-row">
@@ -537,17 +608,17 @@
               <v-tooltip top>
                 <img
                   slot="activator"
-                  style="cursor:pointer; width:25px; height:25px; "
+                  style="cursor: pointer; width: 25px; height: 25px"
                   class="mr-3"
                   @click="profile(props.item)"
                   src="/static/icon/view.png"
                 />
                 <span>View</span>
               </v-tooltip>
-              <v-tooltip top v-if="role != 'TEACHER' ">
+              <v-tooltip top v-if="role != 'TEACHER'">
                 <img
                   slot="activator"
-                  style="cursor:pointer; width:20px; height:18px; "
+                  style="cursor: pointer; width: 20px; height: 18px"
                   class="mr-3"
                   @click="editItem(props.item)"
                   src="/static/icon/edit.png"
@@ -568,16 +639,18 @@
           </td>
         </tr>
       </template>
-      <v-alert
-        slot="no-results"
-        :value="true"
-        color="error"
-        icon="warning"
-      >Your search for "{{ search }}" found no results.</v-alert>
+      <v-alert slot="no-results" :value="true" color="error" icon="warning"
+        >Your search for "{{ search }}" found no results.</v-alert
+      >
     </v-data-table>
 
     <!-- ****** DIALOG BOX - Add Teachers Data****** -->
-    <v-dialog v-model="addTeacherDialog" max-width="1160" v-if="addTeacherDialog" persistent>
+    <v-dialog
+      v-model="addTeacherDialog"
+      max-width="1160"
+      v-if="addTeacherDialog"
+      persistent
+    >
       <v-card flat class="Card-style pa-2">
         <v-layout>
           <v-flex xs12 class="pa-0">
@@ -585,14 +658,21 @@
             <v-icon
               size="24"
               class="right"
-              @click="$refs.form.reset();addTeacherDialog = false"
-            >cancel</v-icon>
+              @click="
+                $refs.form.reset();
+                addTeacherDialog = false;
+              "
+              >cancel</v-icon
+            >
           </v-flex>
         </v-layout>
         <v-form ref="form" v-model="valid" lazy-validation>
           <v-container fluid>
             <v-layout>
-              <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center my-4">
+              <v-flex
+                xs12
+                class="text-xs-center text-sm-center text-md-center text-lg-center my-4"
+              >
                 <v-avatar size="120px">
                   <img src="/static/icon/user.png" v-if="!imageUrl" />
                 </v-avatar>
@@ -600,7 +680,7 @@
                   :src="imageUrl"
                   height="150"
                   v-if="imageUrl"
-                  style="border-radius:50%; width:150px"
+                  style="border-radius: 50%; width: 150px"
                 />
               </v-flex>
             </v-layout>
@@ -608,8 +688,13 @@
               <v-flex xs12 sm6>
                 <v-layout>
                   <v-flex xs4 class="pt-4 subheading">
-                    <label class="right hidden-sm-only hidden-xs-only">Full Name:</label>
-                    <label class="right hidden-lg-only hidden-xl-only hidden-md-only">Full Name</label>
+                    <label class="right hidden-sm-only hidden-xs-only"
+                      >Full Name:</label
+                    >
+                    <label
+                      class="right hidden-lg-only hidden-xl-only hidden-md-only"
+                      >Full Name</label
+                    >
                   </v-flex>
                   <v-flex xs8 class="ml-3">
                     <v-text-field
@@ -644,8 +729,13 @@
               <v-flex xs12 sm6>
                 <v-layout>
                   <v-flex xs4 sm4 class="pt-4 subheading">
-                    <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label>
-                    <label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label>
+                    <label class="right hidden-sm-only hidden-xs-only"
+                      >Date of Birth:</label
+                    >
+                    <label
+                      class="right hidden-lg-only hidden-xl-only hidden-md-only"
+                      >D.O.B:</label
+                    >
                   </v-flex>
                   <v-flex xs8 class="ml-3">
                     <v-menu
@@ -735,13 +825,21 @@
               <v-flex xs12 sm6>
                 <v-layout>
                   <v-flex xs4 class="pt-4 subheading">
-                    <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label>
-                    <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Mobile:</label>
+                    <label class="right hidden-xs-only hidden-sm-only"
+                      >Mobile No:</label
+                    >
+                    <label
+                      class="right hidden-lg-only hidden-md-only hidden-xl-only"
+                      >Mobile:</label
+                    >
                   </v-flex>
                   <v-flex xs8 class="ml-3">
                     <v-layout row wrap>
                       <v-flex xs3 class="mt-3">
-                        <vue-country-code @onSelect="addTeacherMobileCode" class="black--text"></vue-country-code>
+                        <vue-country-code
+                          @onSelect="addTeacherMobileCode"
+                          class="black--text"
+                        ></vue-country-code>
                       </v-flex>
                       <v-flex xs9>
                         <v-text-field
@@ -760,8 +858,13 @@
               <v-flex xs12 sm6>
                 <v-layout>
                   <v-flex xs4 class="pt-4 subheading">
-                    <label class="right hidden-xs-only hidden-sm-only">Select Country:</label>
-                    <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Country:</label>
+                    <label class="right hidden-xs-only hidden-sm-only"
+                      >Select Country:</label
+                    >
+                    <label
+                      class="right hidden-lg-only hidden-md-only hidden-xl-only"
+                      >Country:</label
+                    >
                   </v-flex>
                   <v-flex xs8 class="ml-3">
                     <v-autocomplete
@@ -813,8 +916,13 @@
               <v-flex xs12 sm6>
                 <v-layout>
                   <v-flex xs4 class="pt-4 subheading">
-                    <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label>
-                    <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod:</label>
+                    <label class="right hidden-xs-only hidden-sm-only"
+                      >Uplaod Image:</label
+                    >
+                    <label
+                      class="right hidden-lg-only hidden-md-only hidden-xl-only"
+                      >Uplaod:</label
+                    >
                   </v-flex>
                   <v-flex xs8 class="ml-3">
                     <v-text-field
@@ -825,7 +933,7 @@
                     ></v-text-field>
                     <input
                       type="file"
-                      style="display:none"
+                      style="display: none"
                       ref="image"
                       accept="image/*"
                       @change="onFilePicked"
@@ -905,7 +1013,11 @@
               </v-flex>
               <v-flex xs12 sm12>
                 <v-layout>
-                  <v-flex xs12 sm12 class="pt-4 pr-4 subheading text-xs-center addressForm">
+                  <v-flex
+                    xs12
+                    sm12
+                    class="pt-4 pr-4 subheading text-xs-center addressForm"
+                  >
                     <label>Permanent Address:</label>
                   </v-flex>
                 </v-layout>
@@ -925,8 +1037,17 @@
             <v-layout>
               <v-flex xs12 sm12>
                 <v-layout class="right">
-                  <v-btn @click="clear" round dark class="clear-button">Clear</v-btn>
-                  <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn>
+                  <v-btn @click="clear" round dark class="clear-button"
+                    >Clear</v-btn
+                  >
+                  <v-btn
+                    @click="submit"
+                    round
+                    dark
+                    :loading="loading"
+                    class="add-button"
+                    >Add</v-btn
+                  >
                 </v-layout>
               </v-flex>
             </v-layout>
@@ -934,6 +1055,15 @@
         </v-form>
       </v-card>
     </v-dialog>
+    <v-snackbar
+      :timeout="timeout"
+      :top="y === 'top'"
+      :right="x === 'right'"
+      :vertical="mode === 'vertical'"
+      v-model="snackbar"
+      :color="color"
+      >{{ text }}</v-snackbar
+    >
     <div class="loader" v-if="showLoader">
       <v-progress-circular indeterminate color="white"></v-progress-circular>
     </div>