From aa8fc5033006b14a028fc691916f24cd5f8ff014 Mon Sep 17 00:00:00 2001
From: Neeraj Sharma <neeraj.sharma@viithiisys.com>
Date: Mon, 4 Nov 2019 17:18:19 +0530
Subject: [PATCH] implenment all page are responsive view in mobile

---
 src/pages/Account/editInvoice.vue          |   28 +-
 src/pages/Account/expense.vue              |    3 +-
 src/pages/Account/income.vue               |   13 +-
 src/pages/Account/viewInvoice.vue          |   17 +-
 src/pages/Attendence/studentAttendence.vue |    3 +-
 src/pages/Class/addclass.vue               |   82 +-
 src/pages/Event/event.vue                  |    6 +-
 src/pages/Gallery/gallery.vue              |   34 +-
 src/pages/Holiday/holiday.vue              |   12 +-
 src/pages/News/news.vue                    |   28 +-
 src/pages/NoticeBoard/noticeBoard.vue      |    6 +-
 src/pages/Notification/notification.vue    |    4 +-
 src/pages/Parent/parents.vue               |   10 +-
 src/pages/Section/section.vue              |  140 ++--
 src/pages/Students/students.vue            | 1251 ++++++++++++++++------------
 src/pages/Subjects/subjects.vue            |   18 +-
 src/pages/Teachers/teachers.vue            |  246 ++++--
 src/pages/TimeTable/timeTable.vue          |   34 +-
 src/pages/User/user.vue                    |   58 +-
 src/pages/socialMedia/socialMedia.vue      |   18 +-
 static/css/custom.css                      |   24 +-
 21 files changed, 1231 insertions(+), 804 deletions(-)

diff --git a/src/pages/Account/editInvoice.vue b/src/pages/Account/editInvoice.vue
index ddb53df..6f41300 100644
--- a/src/pages/Account/editInvoice.vue
+++ b/src/pages/Account/editInvoice.vue
@@ -12,7 +12,7 @@
       >{{ text }}</v-snackbar>
       <v-flex xs12 sm12>
         <v-container fluid>
-          <v-layout>
+          <v-layout wrap>
             <v-flex xs12 sm12 md5 class="mt-4">
               <v-card flat>
                 <v-toolbar dark class="fixcolors" flat>
@@ -25,7 +25,8 @@
                 <v-form ref="form" v-model="valid" lazy-validation class="py-4">
                   <v-layout>
                     <v-flex xs4 class="pt-4 subheading">
-                      <label class="right">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>
                     </v-flex>
                     <v-flex xs6 class="ml-3">
                       <v-select
@@ -40,7 +41,8 @@
                   </v-layout>
                   <v-layout>
                     <v-flex xs4 class="pt-4 subheading">
-                      <label class="right">Select Student:</label>
+                      <label class="right hidden-xs-only hidden-sm-only">Select Student:</label>
+                      <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Student:</label>
                     </v-flex>
                     <v-flex xs6 class="ml-3">
                       <v-select
@@ -83,7 +85,8 @@
                   </v-layout>
                   <v-layout>
                     <v-flex xs4 class="pt-4 subheading">
-                      <label class="right">Payment Status:</label>
+                      <label class="right hidden-xs-only hidden-sm-only">Payment Status:</label>
+                      <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Payment:</label>
                     </v-flex>
                     <v-flex xs6 class="ml-3">
                       <v-select
@@ -130,10 +133,10 @@
                   <v-spacer></v-spacer>
                 </v-toolbar>
                 <v-layout>
-                  <v-flex xs2 class="mt-4">
+                  <v-flex xs4 sm2 class="mt-4">
                     <label class="right title">Fee Type:</label>
                   </v-flex>
-                  <v-flex xs4>
+                  <v-flex xs4 sm4>
                     <v-select
                       :items="feeTypes"
                       v-model="feeType.feeTypeName"
@@ -142,11 +145,11 @@
                       label="Select Fee Type"
                     ></v-select>
                   </v-flex>
-                  <v-flex xs6>
+                  <v-flex xs4 sm6>
                     <v-btn color="black" dark class="right mt-3" @click="selectFeeType">ADD</v-btn>
                   </v-flex>
                 </v-layout>
-                <table class="feeTypeTable">
+                <table class="feeTypeTable tableRsponsive">
                   <tr class="info white--text">
                     <th>#</th>
                     <th>Fee Type</th>
@@ -531,4 +534,11 @@ table.feeTypeTable {
   table-layout: auto !important;
   width: 100% !important;
 }
-</style>
\ No newline at end of file
+@media screen and (max-width: 380px) {
+    .tableRsponsive {
+        display: block;
+        position: relative;
+        overflow: scroll;
+    }
+}
+</style> 
\ No newline at end of file
diff --git a/src/pages/Account/expense.vue b/src/pages/Account/expense.vue
index 7c2b5b8..90dcfa5 100644
--- a/src/pages/Account/expense.vue
+++ b/src/pages/Account/expense.vue
@@ -125,7 +125,8 @@
                     <v-flex xs12>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
-                          <label class="right">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>
                         </v-flex>
                         <v-flex xs6 class="ml-3">
                           <v-text-field
diff --git a/src/pages/Account/income.vue b/src/pages/Account/income.vue
index f081676..cd528f4 100644
--- a/src/pages/Account/income.vue
+++ b/src/pages/Account/income.vue
@@ -66,7 +66,7 @@
                         <v-flex xs4 class="pt-4 subheading">
                           <label class="right">Name:</label>
                         </v-flex>
-                        <v-flex xs6 class="ml-3">
+                        <v-flex xs8 sm6 class="ml-3">
                           <v-text-field
                             v-model="editedItem.name"
                             placeholder="fill your full Name"
@@ -84,7 +84,7 @@
                         <v-flex xs4 class="pt-4 subheading">
                           <label class="right">Date:</label>
                         </v-flex>
-                        <v-flex xs6 class="ml-3">
+                        <v-flex xs8 sm6 class="ml-3">
                           <v-menu
                             ref="menu"
                             :close-on-content-click="false"
@@ -116,7 +116,7 @@
                           <v-flex xs4 class="pt-4 subheading">
                             <label class="right">Amount:</label>
                           </v-flex>
-                          <v-flex xs6 class="ml-3">
+                          <v-flex xs8 sm6 class="ml-3">
                             <v-text-field v-model="editedItem.amount" required></v-text-field>
                           </v-flex>
                         </v-layout>
@@ -125,9 +125,10 @@
                     <v-flex xs12>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
-                          <label class="right">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>
                         </v-flex>
-                        <v-flex xs6 class="ml-3">
+                        <v-flex xs8 sm6  class="ml-3">
                           <v-text-field
                             label="Select Image"
                             @click="pickFile"
@@ -142,7 +143,7 @@
                         <v-flex xs4 class="pt-4 subheading">
                           <label class="right">Note:</label>
                         </v-flex>
-                        <v-flex xs6 class="ml-3">
+                        <v-flex xs8 sm6  class="ml-3">
                           <v-textarea
                             name="input-7-1"
                             v-model="editedItem.note"
diff --git a/src/pages/Account/viewInvoice.vue b/src/pages/Account/viewInvoice.vue
index b873d02..e083d6c 100644
--- a/src/pages/Account/viewInvoice.vue
+++ b/src/pages/Account/viewInvoice.vue
@@ -6,7 +6,7 @@
         <v-layout wrap>
                   <v-flex 12>
                     <br />
-                    <v-layout>
+                    <v-layout wrap> 
                       <v-flex xs12 sm6>
                     <v-layout>
                       <v-flex xs6 sm2>
@@ -47,7 +47,7 @@
                           <b>Roll No:</b>
                         </h5>
                       </v-flex>
-                      <v-flex sm6 xs8>
+                      <v-flex sm6 xs6>
                         <h5 class="my-1">{{ invoiceParticularData.studentId.rollNo }}</h5>
                       </v-flex>
                     </v-layout>
@@ -57,7 +57,7 @@
                           <b>email:</b>
                         </h5>
                       </v-flex>
-                      <v-flex sm6 xs8>
+                      <v-flex sm6 xs6>
                          <h5 class="my-1">{{ invoiceParticularData.studentId.email }}</h5>
                       </v-flex>
                     </v-layout>
@@ -67,7 +67,7 @@
                           <b>Status :</b>
                         </h5>
                       </v-flex>
-                      <v-flex sm6 xs8>
+                      <v-flex sm6 xs6>
                         <h5 class="my-1">{{ invoiceParticularData.paymentStatus }}</h5>
                       </v-flex>
                     </v-layout>
@@ -76,7 +76,7 @@
                   </v-flex>
                 </v-layout>
              </v-card>
-                <table class="feeTypeTable">
+                <table class="feeTypeTable tableRsponsive">
                   <tr class="info white--text">
                     <th>#</th>
                     <th>Fee Type</th>
@@ -237,4 +237,11 @@ table.feeTypeTable {
   table-layout: auto !important;
   width: 100% !important;
 }
+@media screen and (max-width: 380px) {
+    .tableRsponsive {
+        display: block;
+        position: relative;
+        overflow: scroll;
+    }
+}
 </style>
\ No newline at end of file
diff --git a/src/pages/Attendence/studentAttendence.vue b/src/pages/Attendence/studentAttendence.vue
index 1196b92..980e68e 100644
--- a/src/pages/Attendence/studentAttendence.vue
+++ b/src/pages/Attendence/studentAttendence.vue
@@ -12,9 +12,10 @@
     <!-- ****** EXISTING STUDENTS TABLE ****** -->
 
     <v-card flat>
+     <h4 class="text-xs-center pt-4 ml-2  hidden-lg-only hidden-xl-only hidden-md-only">Student Attendence</h4>
       <v-card-actions>
         <v-layout>
-          <h3 class="right mt-2 ml-2">Student Attendence</h3>
+          <h3 class="right mt-2 ml-2  hidden-sm-only hidden-xs-only">Student Attendence</h3>
         </v-layout>
         <v-spacer></v-spacer>
         <v-flex xs12 sm2>
diff --git a/src/pages/Class/addclass.vue b/src/pages/Class/addclass.vue
index 511eb80..e62078f 100644
--- a/src/pages/Class/addclass.vue
+++ b/src/pages/Class/addclass.vue
@@ -28,43 +28,41 @@
           color="success"
         >{{ text }}</v-snackbar>
         <v-dialog v-model="dialog" max-width="500px">
-          <v-toolbar color="grey lighten-2">
-            <v-spacer></v-spacer>
-            <v-toolbar-title>
-              <h3>Edit Class</h3>
-            </v-toolbar-title>
-            <v-spacer></v-spacer>
-          </v-toolbar>
-          <v-card>
-            <v-card-text>
-              <v-container>
-                <v-layout wrap justify-center>
-                  <v-flex xs12 sm9>
-                    <v-form ref="form" v-model="valid" lazy-validation>
-                      <v-layout style="position:relative;">
-                        <v-flex xs4 lg2 class="pt-4 subheading">
-                          <label>Class:</label>
-                        </v-flex>
-                        <v-flex xs10>
-                          <v-autocomplete
-                            v-model="editedItem.classNum"
-                            :label="editedItem.classNum"
-                            :items="classList"
-                            :rules="nameRules"
-                          ></v-autocomplete>
-                        </v-flex>
-                      </v-layout>
-                      <v-card-actions>
-                        <v-btn round dark @click.native="close">Cancel</v-btn>
-                        <v-spacer></v-spacer>
-                        <v-btn round dark @click="save">Save</v-btn>
-                      </v-card-actions>
-                    </v-form>
-                  </v-flex>
-                </v-layout>
-              </v-container>
-            </v-card-text>
-          </v-card>
+          <v-flex xs12 sm12 class>
+            <v-toolbar color="grey lighten-2">
+              <v-spacer></v-spacer>
+              <v-toolbar-title>
+                <h3>Edit Class</h3>
+              </v-toolbar-title>
+              <v-spacer></v-spacer>
+            </v-toolbar>
+            <v-card>
+                <v-container fluid>
+                  <v-layout justify-center>
+                    <v-flex xs12 sm9>
+                        <v-layout style="position:relative;">
+                          <v-flex xs4 lg2 class="pt-4 subheading">
+                            <label>Class:</label>
+                          </v-flex>
+                          <v-flex xs10>
+                            <v-autocomplete
+                              v-model="editedItem.classNum"
+                              :label="editedItem.classNum"
+                              :items="classList"
+                              :rules="nameRules"
+                            ></v-autocomplete>
+                          </v-flex>
+                        </v-layout>
+                        <v-card-actions>
+                          <v-btn round dark @click.native="close">Cancel</v-btn>
+                          <v-spacer></v-spacer>
+                          <v-btn round dark @click="save">Save</v-btn>
+                        </v-card-actions>
+                    </v-flex>
+                  </v-layout>
+                </v-container>
+            </v-card>
+          </v-flex>
         </v-dialog>
 
         <!-- ****** PROFILE VIEW STUDENTS ******  -->
@@ -84,7 +82,9 @@
                   <v-flex>
                     <v-layout>
                       <v-flex xs6 sm6>
-                        <h5 class="right my-1"><b>Class Name:</b></h5>
+                        <h5 class="right my-1">
+                          <b>Class Name:</b>
+                        </h5>
                       </v-flex>
                       <v-flex sm6 xs6>
                         <h5 class="my-1">{{ editedItem.classNum }}</h5>
@@ -120,19 +120,19 @@
               <span>
                 <img
                   style="cursor:pointer; width:25px; height:18px; "
-                  class="mr-5"
+                  class="mr5"
                   @click="profile(props.item)"
                   src="/static/icon/eye1.png"
                 />
                 <img
                   style="cursor:pointer; width:20px; height:18px; "
-                  class="mr-5"
+                  class="mr5"
                   @click="editItem(props.item)"
                   src="/static/icon/edit1.png"
                 />
                 <img
                   style="cursor:pointer; width:20px; height:20px; "
-                  class="mr-5"
+                  class="mr5"
                   @click="deleteItem(props.item)"
                   src="/static/icon/delete1.png"
                 />
diff --git a/src/pages/Event/event.vue b/src/pages/Event/event.vue
index d9408bf..2876d18 100644
--- a/src/pages/Event/event.vue
+++ b/src/pages/Event/event.vue
@@ -68,7 +68,7 @@
                       <v-flex xs4 class="pt-4 subheading">
                         <label class="right">Title:</label>
                       </v-flex>
-                      <v-flex xs5 class="ml-3">
+                      <v-flex xs8 sm5 class="ml-3">
                         <v-text-field
                           v-model="editedItem.title"
                           placeholder="fill your Title"
@@ -83,7 +83,7 @@
                       <v-flex xs4 class="pt-4 subheading">
                         <label class="right">Date:</label>
                       </v-flex>
-                      <v-flex xs5 class="ml-3">
+                      <v-flex xs8 sm5  class="ml-3">
                         <v-menu
                           ref="menu"
                           :close-on-content-click="false"
@@ -116,7 +116,7 @@
                       <v-flex xs4 class="pt-4 subheading">
                         <label class="right">Description:</label>
                       </v-flex>
-                      <v-flex xs5 class="ml-3">
+                      <v-flex xs8 sm5 class="ml-3">
                         <v-text-field
                           placeholder="fill your Description"
                           v-model="editedItem.description"
diff --git a/src/pages/Gallery/gallery.vue b/src/pages/Gallery/gallery.vue
index 1040ea6..16578e1 100644
--- a/src/pages/Gallery/gallery.vue
+++ b/src/pages/Gallery/gallery.vue
@@ -94,7 +94,7 @@
                         <v-flex xs4 class="pt-4 subheading">
                           <label class="right">Title:</label>
                         </v-flex>
-                        <v-flex xs5 class="ml-3">
+                        <v-flex xs8 sm5 class="ml-3">
                           <v-text-field
                             v-model="editedItem.title"
                             placeholder="fill your Title"
@@ -110,7 +110,7 @@
                         <v-flex xs4 class="pt-4 subheading">
                           <label class="right">Description:</label>
                         </v-flex>
-                        <v-flex xs5 class="ml-3">
+                        <v-flex xs8 sm5 class="ml-3">
                           <v-text-field
                             placeholder="fill your Description"
                             v-model="editedItem.description"
@@ -123,9 +123,10 @@
                     </v-flex>
                     <v-layout>
                       <v-flex xs4 class="pt-4 subheading">
-                        <label class="right">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>
                       </v-flex>
-                      <v-flex xs5 class="ml-3">
+                      <v-flex xs8 sm5 class="ml-3">
                         <v-select
                           :items="addclass"
                           label="Select Class"
@@ -140,9 +141,10 @@
                     <v-flex xs12>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
-                          <label class="right">Add New Images:</label>
+                          <label class="right hidden-xs-only hidden-sm-only">Add New Images:</label>
+                        <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Upload:</label>
                         </v-flex>
-                        <v-flex xs5 class="ml-3">
+                        <v-flex xs8 sm5 class="ml-3">
                           <v-text-field
                             label="Select Image"
                             @click="editPickFile"
@@ -164,7 +166,7 @@
                         <v-flex xs4 class="pt-4 subheading">
                           <label class="right">You Tube Link Url:</label>
                         </v-flex>
-                        <v-flex xs5 class="ml-3">
+                        <v-flex xs8 sm5 class="ml-3">
                           <v-text-field
                             v-model="editImage.youTubeLink"
                             type="text"
@@ -302,7 +304,7 @@
           :search="search"
         >
           <template slot="items" slot-scope="props">
-            <td class="text-xs-center">{{ props.index  + 1}}</td>
+            <td class="text-xs-center">{{ props.index + 1}}</td>
             <td id="td" class="text-xs-center">
               <span v-for="(image,_id) in props.item.imageUrl" class="pa-2">
                 <img :src="image.imageLink" alt="newsImage" width="100" height="70" />
@@ -390,7 +392,7 @@
                       <v-flex xs4 class="pt-4 subheading">
                         <label class="right">Title:</label>
                       </v-flex>
-                      <v-flex xs4 class="ml-3">
+                      <v-flex xs8 sm4 class="ml-3">
                         <v-text-field
                           v-model="addGallery.title"
                           placeholder="fill your Title"
@@ -407,7 +409,7 @@
                       <v-flex xs4 class="pt-4 subheading">
                         <label class="right">Description:</label>
                       </v-flex>
-                      <v-flex xs4 class="ml-3">
+                      <v-flex xs8 sm4 class="ml-3">
                         <v-text-field
                           placeholder="fill your Description"
                           :rules="descriptionRules"
@@ -422,9 +424,10 @@
                   <v-flex xs12>
                     <v-layout>
                       <v-flex xs4 class="pt-4 subheading">
-                        <label class="right">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>
                       </v-flex>
-                      <v-flex xs4 class="ml-3">
+                      <v-flex xs8 sm4 class="ml-3">
                         <v-select
                           :items="addclass"
                           label="Select Class"
@@ -440,9 +443,10 @@
                   <v-flex xs12>
                     <v-layout>
                       <v-flex xs4 class="pt-4 subheading">
-                        <label class="right">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>
                       </v-flex>
-                      <v-flex xs4 class="ml-3">
+                      <v-flex xs8 sm4 class="ml-3">
                         <v-text-field
                           label="Select Image"
                           @click="pickFile"
@@ -460,7 +464,7 @@
                           <v-flex xs4 class="pt-4 subheading">
                             <label class="right">You Tube Link Url:</label>
                           </v-flex>
-                          <v-flex xs4 class="ml-3">
+                          <v-flex xs8 sm4 class="ml-3">
                             <v-text-field
                               placeholder="fill your youtube link"
                               v-model="youTubeLink.value"
diff --git a/src/pages/Holiday/holiday.vue b/src/pages/Holiday/holiday.vue
index a30255a..1683203 100644
--- a/src/pages/Holiday/holiday.vue
+++ b/src/pages/Holiday/holiday.vue
@@ -45,7 +45,7 @@
                       <v-flex xs4 class="pt-4 subheading">
                         <label class="right">Occasion:</label>
                       </v-flex>
-                      <v-flex xs5 class="ml-3">
+                      <v-flex xs8 sm5  class="ml-3">
                         <v-text-field
                           v-model="editedItem.occasion"
                           placeholder="fill your Occasion"
@@ -60,7 +60,7 @@
                       <v-flex xs4 class="pt-4 subheading">
                         <label class="right">Date:</label>
                       </v-flex>
-                      <v-flex xs5 class="ml-3">
+                      <v-flex xs8 sm5 class="ml-3">
                         <v-menu
                           ref="menu"
                           :close-on-content-click="false"
@@ -122,7 +122,7 @@
                 <v-layout wrap>
                   <v-flex>
                     <v-layout>
-                      <v-flex xs5 sm6>
+                      <v-flex xs4 sm6>
                         <h5 class="right my-1">
                           <b>Occasion:</b>
                         </h5>
@@ -132,7 +132,7 @@
                       </v-flex>
                     </v-layout>
                     <v-layout>
-                      <v-flex xs5 sm6>
+                      <v-flex xs4 sm6>
                         <h5 class="right my-1">
                           <b>Date:</b>
                         </h5>
@@ -222,7 +222,7 @@
                       <v-flex xs4 class="pt-4 subheading">
                         <label class="right">Occasion:</label>
                       </v-flex>
-                      <v-flex xs4 class="ml-3">
+                      <v-flex xs8 sm4 class="ml-3">
                         <v-text-field
                           v-model="addHoliday.occasion"
                           placeholder="fill your Occasion"
@@ -238,7 +238,7 @@
                       <v-flex xs4 class="pt-4 subheading">
                         <label class="right">Date:</label>
                       </v-flex>
-                      <v-flex xs4 class="ml-3">
+                      <v-flex xs8 sm4 class="ml-3">
                         <v-menu
                           ref="menu1"
                           :close-on-content-click="false"
diff --git a/src/pages/News/news.vue b/src/pages/News/news.vue
index 6f16707..12af9ce 100644
--- a/src/pages/News/news.vue
+++ b/src/pages/News/news.vue
@@ -94,7 +94,7 @@
                         <v-flex xs4 class="pt-4 subheading">
                           <label class="right">Title:</label>
                         </v-flex>
-                        <v-flex xs5 class="ml-3">
+                        <v-flex sm5 xs8 class="ml-3">
                           <v-text-field
                             v-model="editedItem.title"
                             placeholder="fill your Title"
@@ -110,7 +110,7 @@
                         <v-flex xs4 class="pt-4 subheading">
                           <label class="right">Description:</label>
                         </v-flex>
-                        <v-flex xs5 class="ml-3">
+                        <v-flex sm5 xs8 class="ml-3">
                           <v-text-field
                             placeholder="fill your Description"
                             v-model="editedItem.description"
@@ -124,9 +124,10 @@
                     <v-flex xs12>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
-                          <label class="right">Add New Images:</label>
+                          <label class="right hidden-xs-only hidden-sm-only">Add New Images:</label>
+                        <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod :</label>
                         </v-flex>
-                        <v-flex xs5 class="ml-3">
+                        <v-flex sm5 xs8 class="ml-3">
                           <v-text-field
                             label="Select Image"
                             @click="pickFile"
@@ -221,7 +222,7 @@
           :search="search"
         >
           <template slot="items" slot-scope="props">
-            <td class="text-xs-center">{{ props.index  + 1}}</td>
+            <td class="text-xs-center">{{ props.index + 1}}</td>
             <td id="td" class="text-xs-center">
               <span v-for="(image,_id) in props.item.newsImageUrl" class="pa-2">
                 <img :src="image.imageUrl" alt="newsImage" width="100" height="70" />
@@ -306,10 +307,10 @@
                   </v-layout>
                   <v-flex xs12>
                     <v-layout>
-                      <v-flex xs4 class="pt-4 subheading">
+                      <v-flex xs4 sm4 class="pt-4 subheading">
                         <label class="right">Title:</label>
                       </v-flex>
-                      <v-flex xs4 class="ml-3">
+                      <v-flex sm4 xs8 class="ml-3">
                         <v-text-field
                           v-model="addNews.title"
                           placeholder="fill your Title"
@@ -326,7 +327,7 @@
                       <v-flex xs4 class="pt-4 subheading">
                         <label class="right">Description:</label>
                       </v-flex>
-                      <v-flex xs4 class="ml-3">
+                      <v-flex sm4 xs8 class="ml-3">
                         <v-text-field
                           placeholder="fill your Description"
                           :rules="descriptionRules"
@@ -341,9 +342,10 @@
                   <v-flex xs12>
                     <v-layout>
                       <v-flex xs4 class="pt-4 subheading">
-                        <label class="right">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>
                       </v-flex>
-                      <v-flex xs4 class="ml-3">
+                      <v-flex xs8 sm4 class="ml-3">
                         <v-text-field
                           label="Select Image"
                           @click="pickFile"
@@ -441,7 +443,7 @@ export default {
     defaultItem: {
       title: "",
       description: ""
-    },
+    }
   }),
   methods: {
     getSections(_id) {
@@ -521,7 +523,7 @@ export default {
         .catch(err => {
           // console.log("err====>", err);
           this.showLoader = false;
-           if (error.response.status === 401) {
+          if (error.response.status === 401) {
             this.$router.replace({ path: "/" });
             this.$store.dispatch("setToken", null);
             this.$store.dispatch("Id", null);
@@ -671,7 +673,7 @@ export default {
         .catch(error => {
           // console.log(error);
         });
-    },
+    }
   },
   mounted() {
     this.getNewsList();
diff --git a/src/pages/NoticeBoard/noticeBoard.vue b/src/pages/NoticeBoard/noticeBoard.vue
index 3477a06..e3d1b28 100644
--- a/src/pages/NoticeBoard/noticeBoard.vue
+++ b/src/pages/NoticeBoard/noticeBoard.vue
@@ -107,7 +107,8 @@
                     <v-flex xs12>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
-                          <label class="right">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>
                         </v-flex>
                         <v-flex xs6 class="ml-3">
                           <v-text-field
@@ -307,7 +308,8 @@
                       </v-layout>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
-                          <label class="right">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>
                         </v-flex>
                         <v-flex xs6 class="ml-3">
                           <v-text-field
diff --git a/src/pages/Notification/notification.vue b/src/pages/Notification/notification.vue
index 316fd94..27d0e73 100644
--- a/src/pages/Notification/notification.vue
+++ b/src/pages/Notification/notification.vue
@@ -68,7 +68,7 @@
                       <v-flex xs4 class="pt-4 subheading">
                         <label class="right">Title:</label>
                       </v-flex>
-                      <v-flex xs5 class="ml-3">
+                      <v-flex xs8 sm5  class="ml-3">
                         <v-text-field
                           v-model="editedItem.title"
                           placeholder="fill your Title"
@@ -83,7 +83,7 @@
                       <v-flex xs4 class="pt-4 subheading">
                         <label class="right">Description:</label>
                       </v-flex>
-                      <v-flex xs5 class="ml-3">
+                      <v-flex xs8 sm5 class="ml-3">
                         <v-text-field
                           placeholder="fill your Description"
                           v-model="editedItem.description"
diff --git a/src/pages/Parent/parents.vue b/src/pages/Parent/parents.vue
index 2c7158d..47e0648 100644
--- a/src/pages/Parent/parents.vue
+++ b/src/pages/Parent/parents.vue
@@ -145,7 +145,7 @@
               <v-spacer></v-spacer>
               <v-icon @click="close1">close</v-icon>
             </v-toolbar>
-            <v-card-text style="height: 300px;">
+            <!-- <v-card-text style="height: 300px;"> -->
               <!-- <v-flex align-center justify-center layout text-xs-center class="mt-3">
                 <v-avatar size="160px">
                   <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl" />
@@ -154,7 +154,7 @@
               </v-flex>-->
               <v-container grid-list-md>
                 <v-layout wrap>
-                  <v-flex>
+                  <v-flex xs12>
                     <v-layout>
                       <v-flex xs12 sm12>
                         <v-layout>
@@ -164,7 +164,7 @@
                             </h5>
                           </v-flex>
                           <v-flex xs6>
-                            <h5 class="my-1 left">{{ editedItem.email }}</h5>
+                            <h5 class="my-1">{{ editedItem.email }}</h5>
                           </v-flex>
                         </v-layout>
                       </v-flex>
@@ -236,7 +236,7 @@
                   </v-flex>
                 </v-layout>
               </v-container>
-            </v-card-text>
+            <!-- </v-card-text> -->
           </v-card>
         </v-dialog>
 
@@ -293,7 +293,7 @@
       <v-tab-item>
         <v-container fluid class="mt-5">
           <v-layout align-center justify-center fill-height>
-            <v-flex xs12 sm8 md7 lg8>
+            <v-flex xs12 sm12 md10 lg11>
               <v-card>
                 <v-container fluid class>
                   <v-layout>
diff --git a/src/pages/Section/section.vue b/src/pages/Section/section.vue
index cf57d1e..d625db6 100644
--- a/src/pages/Section/section.vue
+++ b/src/pages/Section/section.vue
@@ -36,62 +36,61 @@
             <v-spacer></v-spacer>
           </v-toolbar>
           <v-card>
-            <v-card-text>
-              <v-container>
-                <v-layout wrap justify-center>
-                  <v-flex xs12 sm9>
-                    <v-form>
-                      <v-layout style="position:relative;">
-                        <v-flex xs4 class="pt-4 subheading pl-3">
-                          <label>Class Name:</label>
-                        </v-flex>
-                        <v-flex xs8>
-                          <v-select
-                            :items="addclass"
-                            :label="editedItem.classData.classNum"
-                            v-model="editItem.classId"
-                            item-text="classNum"
-                            item-value="_id"
-                            name="Select Class"
-                          ></v-select>
-                        </v-flex>
-                      </v-layout>
-                      <v-layout style="position:relative;">
-                        <v-flex xs4 class="pt-4 subheading">
-                          <label>Section Name:</label>
-                        </v-flex>
-                        <v-flex xs8>
-                          <v-autocomplete
-                            v-model="editedItem.name"
-                            placeholder="fill your Section Name"
-                            :items="SectionName"
-                          ></v-autocomplete>
-                        </v-flex>
-                      </v-layout>
-                      <v-layout style="position:relative;">
-                        <v-flex xs4 class="pt-4 subheading">
-                          <label>Class Incharge:</label>
-                        </v-flex>
-                        <v-flex xs8>
-                          <v-select
-                            :items="teacherList"
-                            v-model="editedItem.classInchargeId"
-                            :label="editedItem.teacherData[0].name"
-                            item-text="name"
-                            item-value="_id"
-                          ></v-select>
-                        </v-flex>
-                      </v-layout>
-                      <v-card-actions>
-                        <v-btn round dark @click.native="close">Cancel</v-btn>
-                        <v-spacer></v-spacer>
-                        <v-btn round dark @click="save">Save</v-btn>
-                      </v-card-actions>
-                    </v-form>
-                  </v-flex>
-                </v-layout>
-              </v-container>
-            </v-card-text>
+            <v-container>
+              <v-layout wrap justify-center>
+                <v-flex xs12 sm9>
+                  <v-form>
+                    <v-layout style="position:relative;">
+                      <v-flex xs5 sm4 class="pt-4 subheading pl-3">
+                        <label class="right hidden-xs-only hidden-sm-only">Class Name:</label>
+                        <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label>
+                      </v-flex>
+                      <v-flex xs9 sm8>
+                        <v-select
+                          :items="addclass"
+                          :label="editedItem.classData.classNum"
+                          v-model="editItem.classId"
+                          item-text="classNum"
+                          item-value="_id"
+                          name="Select Class"
+                        ></v-select>
+                      </v-flex>
+                    </v-layout>
+                    <v-layout style="position:relative;">
+                      <v-flex xs5 sm4 class="pt-4 subheading">
+                        <label>Section Name:</label>
+                      </v-flex>
+                      <v-flex xs7 sm8>
+                        <v-autocomplete
+                          v-model="editedItem.name"
+                          placeholder="fill your Section Name"
+                          :items="SectionName"
+                        ></v-autocomplete>
+                      </v-flex>
+                    </v-layout>
+                    <v-layout style="position:relative;">
+                      <v-flex xs5 sm4 class="pt-4 subheading">
+                        <label>Class Incharge:</label>
+                      </v-flex>
+                      <v-flex xs7 sm8>
+                        <v-select
+                          :items="teacherList"
+                          v-model="editedItem.classInchargeId"
+                          :label="editedItem.teacherData[0].name"
+                          item-text="name"
+                          item-value="_id"
+                        ></v-select>
+                      </v-flex>
+                    </v-layout>
+                    <v-card-actions>
+                      <v-btn round dark @click.native="close">Cancel</v-btn>
+                      <v-spacer></v-spacer>
+                      <v-btn round dark @click="save">Save</v-btn>
+                    </v-card-actions>
+                  </v-form>
+                </v-flex>
+              </v-layout>
+            </v-container>
           </v-card>
         </v-dialog>
 
@@ -119,42 +118,45 @@
                     <br />
                     <br />
                     <v-layout>
-                      <v-flex xs5 sm6>
-                        <h5 class="right my-1">
+                      <v-flex xs7 sm6>
+                        <h5 class="right my-1  hidden-xs-only hidden-sm-only">
                           <b>Class Name:</b>
                         </h5>
+                        <h5 class="right my-1  hidden-lg-only hidden-md-only hidden-xl-only">
+                          <b>Class:</b>
+                        </h5>
                       </v-flex>
-                      <v-flex sm6 xs8>
+                      <v-flex sm6 xs5>
                         <h5 class="my-1">{{ editedItem.classData.classNum }}</h5>
                       </v-flex>
                     </v-layout>
                     <v-layout>
-                      <v-flex xs5 sm6>
+                      <v-flex xs7 sm6>
                         <h5 class="right my-1">
                           <b>Section Name:</b>
                         </h5>
                       </v-flex>
-                      <v-flex sm6 xs8>
+                      <v-flex sm6 xs5>
                         <h5 class="my-1">{{ editedItem.name }}</h5>
                       </v-flex>
                     </v-layout>
                     <v-layout>
-                      <v-flex xs5 sm6>
+                      <v-flex xs7 sm6>
                         <h5 class="right my-1">
                           <b>Class Incharge:</b>
                         </h5>
                       </v-flex>
-                      <v-flex sm6 xs8>
+                      <v-flex sm6 xs5>
                         <h5 class="my-1">{{ editedItem.teacherData[0].name }}</h5>
                       </v-flex>
                     </v-layout>
                     <v-layout>
-                      <v-flex xs5 sm6>
+                      <v-flex xs7 sm6>
                         <h5 class="right my-1">
                           <b>Session:</b>
                         </h5>
                       </v-flex>
-                      <v-flex sm6 xs8>
+                      <v-flex sm6 xs5>
                         <h5 class="my-1">{{ editedItem.session }}</h5>
                       </v-flex>
                     </v-layout>
@@ -183,7 +185,7 @@
           :search="search"
         >
           <template slot="items" slot-scope="props">
-            <td id="td" class="text-xs-center">{{ props.index  + 1}}</td>
+            <td id="td" class="text-xs-center">{{ props.index + 1}}</td>
             <td id="td" class="text-xs-center">{{ props.item.classData.classNum}}</td>
             <td id="td" class="text-xs-center">{{ props.item.name}}</td>
             <td id="td" class="text-xs-center">{{ props.item.session}}</td>
@@ -192,19 +194,19 @@
               <span>
                 <img
                   style="cursor:pointer; width:25px; height:18px; "
-                  class="mr-5"
+                  class="mr5"
                   @click="profile(props.item)"
                   src="/static/icon/eye1.png"
                 />
                 <img
                   style="cursor:pointer; width:20px; height:18px; "
-                  class="mr-5"
+                  class="mr5"
                   @click="editItem(props.item)"
                   src="/static/icon/edit1.png"
                 />
                 <img
                   style="cursor:pointer; width:20px; height:20px; "
-                  class="mr-5"
+                  class="mr5"
                   @click="deleteItem(props.item)"
                   src="/static/icon/delete1.png"
                 />
diff --git a/src/pages/Students/students.vue b/src/pages/Students/students.vue
index 15e803c..48aafb7 100644
--- a/src/pages/Students/students.vue
+++ b/src/pages/Students/students.vue
@@ -28,8 +28,8 @@
           v-model="snackbar"
           color="success"
         >{{ text }}</v-snackbar>
-        <v-dialog v-model="dialog" max-width="1300px" scrollable>
-          <v-card flat style="height: 800px;">
+        <v-dialog v-model="dialog" max-width="1500px" scrollable>
+          <v-card flat style="height: 586px;" class="mx-2">
             <v-toolbar color="grey lighten-2" flat>
               <v-spacer></v-spacer>
               <v-toolbar-title>
@@ -74,7 +74,8 @@
                     <v-flex xs12 sm4>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
-                          <label class="right">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>
                         </v-flex>
                         <v-flex xs8 class="ml-3">
                           <v-select
@@ -93,7 +94,8 @@
                     <v-flex xs12 sm4>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
-                          <label class="right">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>
                         </v-flex>
                         <v-flex xs8 class="ml-3">
                           <v-select
@@ -111,7 +113,8 @@
                     <v-flex xs12 sm4>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
-                          <label class="right">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>
                         </v-flex>
                         <v-flex xs8 class="ml-3">
                           <v-text-field
@@ -145,7 +148,8 @@
                     <v-flex xs12 sm4>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
-                          <label class="right">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>
                         </v-flex>
                         <v-flex xs8 class="ml-3">
                           <v-menu
@@ -196,7 +200,8 @@
                     <v-flex xs12 sm4>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
-                          <label class="right">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>
                         </v-flex>
                         <v-flex xs8 class="ml-3">
                           <v-text-field
@@ -275,7 +280,8 @@
                     <v-flex xs12 sm4>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
-                          <label class="right">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>
                         </v-flex>
                         <v-flex xs8 class="ml-3">
                           <v-text-field
@@ -324,7 +330,8 @@
                     <v-flex xs12 sm4>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
-                          <label class="right">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>
                         </v-flex>
                         <v-flex xs8 class="ml-3">
                           <v-text-field
@@ -342,7 +349,8 @@
                     <v-flex xs12 sm4>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
-                          <label class="right">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>
                         </v-flex>
                         <v-flex xs8 class="ml-3">
                           <v-autocomplete
@@ -372,7 +380,8 @@
                     <v-flex xs12 sm4>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
-                          <label class="right">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>
                         </v-flex>
                         <v-flex xs8 class="ml-3">
                           <v-text-field
@@ -385,7 +394,7 @@
                       </v-layout>
                     </v-flex>
                   </v-layout>
-                  <v-layout>
+                  <!-- <v-layout>
                     <v-flex xs12>
                       <v-layout>
                         <v-flex
@@ -425,14 +434,85 @@
                         </v-flex>
                       </v-layout>
                     </v-flex>
+                  </v-layout>-->
+                  <v-layout class="hidden-xs-only hidden-sm-only">
+                    <v-flex xs12 sm12>
+                      <v-layout>
+                        <v-flex xs4 sm2 class="pt-4 subheading ml-5">
+                          <label class="right pr-4">Present Address:</label>
+                        </v-flex>
+                        <v-flex xs8 sm12>
+                          <v-text-field
+                            name="input-4-3"
+                            v-model="editedItem.presentAddress"
+                            placeholder="fill Your present Address"
+                            required
+                          ></v-text-field>
+                        </v-flex>
+                      </v-layout>
+                    </v-flex>
+                    <v-flex xs12 sm12>
+                      <v-layout>
+                        <v-flex xs4 sm2 class="pt-4 subheading ml-5 addressForm">
+                          <label class>Permanent Address:</label>
+                        </v-flex>
+                        <v-flex xs12 sm12>
+                          <v-text-field
+                            name="input-4-3"
+                            v-model="editedItem.permanentAddress"
+                            placeholder="fill Your Permanent Address"
+                            required
+                          ></v-text-field>
+                        </v-flex>
+                      </v-layout>
+                    </v-flex>
+                  </v-layout>
+                  <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only">
+                    <v-flex xs12 sm12>
+                      <v-layout>
+                        <v-flex xs12 sm3 class="pt-4 subheading text-xs-center">
+                          <label class>Present Address :</label>
+                        </v-flex>
+                      </v-layout>
+                      <v-layout>
+                        <v-flex xs12 sm12>
+                          <v-textarea
+                            name="input-4-3"
+                            v-model="editedItem.presentAddress"
+                            placeholder="fill Your present Address"
+                            required
+                          ></v-textarea>
+                        </v-flex>
+                      </v-layout>
+                    </v-flex>
+                    <v-flex xs12 sm12>
+                      <v-layout>
+                        <v-flex xs12 sm3 class="pt-4 pr-4 subheading text-xs-center addressForm">
+                          <label>Permanent addr:</label>
+                        </v-flex>
+                      </v-layout>
+                      <v-layout>
+                        <v-flex xs12 sm12>
+                          <v-textarea
+                            name="input-4-3"
+                            v-model="editedItem.permanentAddress"
+                            placeholder="fill Your Permanent Address"
+                            required
+                          ></v-textarea>
+                        </v-flex>
+                      </v-layout>
+                    </v-flex>
                   </v-layout>
                   <v-layout>
                     <v-flex xs12 sm12>
-                      <v-card-actions>
-                        <v-btn round dark @click.native="close">Cancel</v-btn>
-                        <v-spacer></v-spacer>
-                        <v-btn round dark @click="save">Save</v-btn>
-                      </v-card-actions>
+                      <v-layout>
+                        <v-flex xs6>
+                           <v-btn round dark @click.native="close">Cancel</v-btn>
+                        </v-flex>
+                        <v-flex xs6>
+                          <v-btn @click="save" round dark :loading="loading" class="right">Save</v-btn>
+                        </v-flex>
+                      </v-layout>
                     </v-flex>
                   </v-layout>
                 </v-container>
@@ -444,7 +524,7 @@
         <!-- ****** PROFILE VIEW STUDENTS DEATILS ******  -->
 
         <v-dialog v-model="dialog1" max-width="1100px" scrollable>
-          <v-card style="height: 700px;">
+          <v-card style="height: 700px;" class="mx-2">
             <v-toolbar color="grey lighten-2" flat>
               <v-spacer></v-spacer>
               <v-toolbar-title>Student Profile</v-toolbar-title>
@@ -460,8 +540,8 @@
               </v-flex>
               <v-container grid-list-md>
                 <v-layout wrap>
-                  <v-flex>
-                    <v-layout>
+                  <v-flex xs12>
+                    <v-layout wrap>
                       <v-flex xs12 sm6>
                         <v-layout>
                           <v-flex xs6 sm5>
@@ -476,268 +556,268 @@
                       </v-flex>
                       <v-flex xs12 sm6>
                         <v-layout>
-                          <v-flex xs4 sm4>
+                          <v-flex xs6 sm4>
                             <h5 class="right my-1">
                               <b>Email:</b>
                             </h5>
                           </v-flex>
-                          <v-flex sm8 xs8>
+                          <v-flex sm8 xs6>
                             <h5 class="my-1 left">{{ editedItem.email }}</h5>
                           </v-flex>
                         </v-layout>
                       </v-flex>
                     </v-layout>
-                    <v-layout>
-                      <v-flex xs6 sm6>
+                    <v-layout wrap>
+                      <v-flex xs12 sm6>
                         <v-layout>
-                          <v-flex xs4 sm5>
+                          <v-flex xs6 sm5>
                             <b>
                               <h5 class="right my-1">
                                 <b>Gender:</b>
                               </h5>
                             </b>
                           </v-flex>
-                          <v-flex sm7 xs8>
+                          <v-flex sm7 xs6>
                             <h5 class="my-1 left">{{ editedItem.gender }}</h5>
                           </v-flex>
                         </v-layout>
                       </v-flex>
-                      <v-flex xs6 sm6>
+                      <v-flex xs12 sm6>
                         <v-layout>
-                          <v-flex xs4 sm4>
+                          <v-flex xs6 sm4>
                             <b>
                               <h5 class="right my-1">
                                 <b>D.O.B:</b>
                               </h5>
                             </b>
                           </v-flex>
-                          <v-flex sm7 xs8>
+                          <v-flex sm7 xs6>
                             <h5 class="my-1">{{ dates(editedItem.dob) }}</h5>
                           </v-flex>
                         </v-layout>
                       </v-flex>
                     </v-layout>
-                    <v-layout>
-                      <v-flex xs6 sm6>
+                    <v-layout wrap>
+                      <v-flex xs12 sm6>
                         <v-layout>
-                          <v-flex xs4 sm5>
+                          <v-flex xs6 sm5>
                             <b>
                               <h5 class="right my-1">
                                 <b>Blood Group:</b>
                               </h5>
                             </b>
                           </v-flex>
-                          <v-flex sm7 xs8>
+                          <v-flex sm7 xs6>
                             <h5 class="my-1 left">{{ editedItem.bloodGroup }}</h5>
                           </v-flex>
                         </v-layout>
                       </v-flex>
-                      <v-flex xs6 sm6>
+                      <v-flex xs12 sm6>
                         <v-layout>
-                          <v-flex xs4 sm4>
+                          <v-flex xs6 sm4>
                             <b>
                               <h5 class="right my-1">
                                 <b>Allergies:</b>
                               </h5>
                             </b>
                           </v-flex>
-                          <v-flex sm8 xs8>
+                          <v-flex sm8 xs6>
                             <h5 class="my-1">{{ editedItem.allergies }}</h5>
                           </v-flex>
                         </v-layout>
                       </v-flex>
                     </v-layout>
-                    <v-layout>
-                      <v-flex xs6 sm6>
+                    <v-layout wrap>
+                      <v-flex xs12 sm6>
                         <v-layout>
-                          <v-flex xs4 sm5>
+                          <v-flex xs6 sm5>
                             <b>
                               <h5 class="right my-1">
                                 <b>Height:</b>
                               </h5>
                             </b>
                           </v-flex>
-                          <v-flex sm7 xs8>
+                          <v-flex sm7 xs6>
                             <h5 class="my-1 left">{{ editedItem.height }}</h5>
                           </v-flex>
                         </v-layout>
                       </v-flex>
-                      <v-flex xs6 sm6>
+                      <v-flex xs12 sm6>
                         <v-layout>
-                          <v-flex xs4 sm4>
+                          <v-flex xs6 sm4>
                             <b>
                               <h5 class="right my-1">
                                 <b>Weight:</b>
                               </h5>
                             </b>
                           </v-flex>
-                          <v-flex sm8 xs8>
+                          <v-flex sm8 xs6>
                             <h5 class="my-1">{{ editedItem.weight }}</h5>
                           </v-flex>
                         </v-layout>
                       </v-flex>
                     </v-layout>
-                    <v-layout>
-                      <v-flex xs6 sm6>
+                    <v-layout wrap>
+                      <v-flex xs12 sm6>
                         <v-layout>
-                          <v-flex xs4 sm5>
+                          <v-flex xs6 sm5>
                             <b>
                               <h5 class="right my-1">
                                 <b>City:</b>
                               </h5>
                             </b>
                           </v-flex>
-                          <v-flex sm7 xs8>
+                          <v-flex sm7 xs6>
                             <h5 class="my-1 left">{{ editedItem.city }}</h5>
                           </v-flex>
                         </v-layout>
                       </v-flex>
-                      <v-flex xs6 sm6>
+                      <v-flex xs12 sm6>
                         <v-layout>
-                          <v-flex xs4 sm4>
+                          <v-flex xs6 sm4>
                             <b>
                               <h5 class="right my-1">
                                 <b>State:</b>
                               </h5>
                             </b>
                           </v-flex>
-                          <v-flex sm8 xs8>
+                          <v-flex sm8 xs6>
                             <h5 class="my-1">{{ editedItem.state }}</h5>
                           </v-flex>
                         </v-layout>
                       </v-flex>
                     </v-layout>
-                    <v-layout>
-                      <v-flex xs6 sm6>
+                    <v-layout wrap>
+                      <v-flex xs12 sm6>
                         <v-layout>
-                          <v-flex xs4 sm5>
+                          <v-flex xs6 sm5>
                             <b>
                               <h5 class="right my-1">
                                 <b>Pincode:</b>
                               </h5>
                             </b>
                           </v-flex>
-                          <v-flex sm7 xs8>
+                          <v-flex sm7 xs6>
                             <h5 class="my-1">{{ editedItem.pincode }}</h5>
                           </v-flex>
                         </v-layout>
                       </v-flex>
-                      <v-flex xs5 sm5>
+                      <v-flex xs12 sm5>
                         <v-layout>
-                          <v-flex xs4 sm5>
+                          <v-flex xs6 sm5>
                             <b>
                               <h5 class="right my-1">
                                 <b>Country:</b>
                               </h5>
                             </b>
                           </v-flex>
-                          <v-flex sm7 xs8>
+                          <v-flex sm7 xs6>
                             <h5 class="my-1">{{ editedItem.country }}</h5>
                           </v-flex>
                         </v-layout>
                       </v-flex>
                     </v-layout>
-                    <v-layout>
-                      <v-flex xs5 sm6>
+                    <v-layout wrap>
+                      <v-flex xs12 sm6>
                         <v-layout>
-                          <v-flex sm5 xs8>
+                          <v-flex sm5 xs6>
                             <b>
                               <h5 class="right my-1">
                                 <b>Mobile No:</b>
                               </h5>
                             </b>
                           </v-flex>
-                          <v-flex sm6 xs8>
+                          <v-flex sm6 xs6>
                             <h5 class="my-1">{{ editedItem.mobile }}</h5>
                           </v-flex>
                         </v-layout>
                       </v-flex>
-                      <v-flex xs5 sm6>
+                      <v-flex xs12 sm6>
                         <v-layout>
-                          <v-flex xs5 sm4>
+                          <v-flex xs6 sm4>
                             <b>
                               <h5 class="right my-1">
                                 <b>Fahter Name:</b>
                               </h5>
                             </b>
                           </v-flex>
-                          <v-flex sm8 xs8>
+                          <v-flex sm8 xs6>
                             <h5 class="my-1">{{ editedItem.fatherName }}</h5>
                           </v-flex>
                         </v-layout>
                       </v-flex>
                     </v-layout>
-                    <v-layout>
-                      <v-flex xs6 sm5>
+                    <v-layout wrap>
+                      <v-flex xs12 sm5>
                         <v-layout>
-                          <v-flex xs4 sm6>
+                          <v-flex xs6 sm6>
                             <b>
                               <h5 class="right my-1">
                                 <b>Mother Name:</b>
                               </h5>
                             </b>
                           </v-flex>
-                          <v-flex sm6 xs8>
+                          <v-flex sm6 xs6>
                             <h5 class="my-1">{{ editedItem.motherName }}</h5>
                           </v-flex>
                         </v-layout>
                       </v-flex>
-                      <v-flex xs6 sm6>
+                      <v-flex xs12 sm6>
                         <v-layout>
-                          <v-flex xs4 sm6>
+                          <v-flex xs6 sm6>
                             <b>
                               <h5 class="right my-1">
                                 <b>Father Cell No:</b>
                               </h5>
                             </b>
                           </v-flex>
-                          <v-flex sm6 xs8>
+                          <v-flex sm6 xs6>
                             <h5 class="my-1">{{ editedItem.fatherCellNo }}</h5>
                           </v-flex>
                         </v-layout>
                       </v-flex>
                     </v-layout>
-                    <v-layout>
-                      <v-flex xs6 sm5>
+                    <v-layout wrap>
+                      <v-flex xs12 sm5>
                         <v-layout>
-                          <v-flex xs4 sm6>
+                          <v-flex xs6 sm6>
                             <b>
                               <h5 class="right my-1">
                                 <b>Mother Cell No:</b>
                               </h5>
                             </b>
                           </v-flex>
-                          <v-flex sm6 xs8>
+                          <v-flex sm6 xs6>
                             <h5 class="my-1">{{ editedItem.motherCellNo }}</h5>
                           </v-flex>
                         </v-layout>
                       </v-flex>
-                      <v-flex xs6 sm6>
+                      <v-flex xs12 sm6>
                         <v-layout>
-                          <v-flex xs5 sm6>
+                          <v-flex xs6 sm6>
                             <b>
                               <h5 class="my-1 right">
                                 <b>Academic Year:</b>
                               </h5>
                             </b>
                           </v-flex>
-                          <v-flex sm5 xs8>
+                          <v-flex sm5 xs6>
                             <h5 class="my-1">{{ editedItem.establishmentYear }}</h5>
                           </v-flex>
                         </v-layout>
                       </v-flex>
                     </v-layout>
-                    <v-layout>
-                      <v-flex xs6 sm5>
+                    <v-layout wrap>
+                      <v-flex xs12 sm5>
                         <v-layout>
-                          <v-flex xs5 sm6>
+                          <v-flex xs6 sm6>
                             <b>
                               <h5 class="my-1 right">
                                 <b>Medical Notes:</b>
                               </h5>
                             </b>
                           </v-flex>
-                          <v-flex sm5 xs8>
+                          <v-flex sm5 xs6>
                             <h5 class="my-1">{{ editedItem.medicalNotes }}</h5>
                           </v-flex>
                         </v-layout>
@@ -747,7 +827,7 @@
                           <v-flex xs6 sm6>
                             <b>
                               <h5 class="right my-1">
-                                <b>Roll Number:</b>
+                                <b>Roll No. :</b>
                               </h5>
                             </b>
                           </v-flex>
@@ -757,17 +837,17 @@
                         </v-layout>
                       </v-flex>
                     </v-layout>
-                    <v-layout>
-                      <v-flex xs6 sm5>
+                    <v-layout wrap>
+                      <v-flex xs12 sm5>
                         <v-layout>
-                          <v-flex xs5 sm6>
+                          <v-flex xs6 sm6>
                             <b>
                               <h5 class="my-1 right">
                                 <b>present Address:</b>
                               </h5>
                             </b>
                           </v-flex>
-                          <v-flex sm5 xs8>
+                          <v-flex sm5 xs6>
                             <h5 class="my-1">{{ editedItem.presentAddress }}</h5>
                           </v-flex>
                         </v-layout>
@@ -819,7 +899,7 @@
 
         <!-- ****** EXISTING-USERS STUDENTS TABLE ****** -->
         <v-card flat>
-          <v-card-actions>
+          <v-card-actions class="hidden-xs-only hidden-sm-only">
             <v-layout>
               <label class="right mt-4 ml-5">Select Class:</label>
               <v-select
@@ -850,6 +930,48 @@
             <v-spacer></v-spacer>
             <v-btn @click="findStudents()" round dark :loading="loading" class="left">Find</v-btn>
           </v-card-actions>
+          <v-flex class="hidden-xl-only hidden-lg-only hidden-md-only">
+            <v-layout>
+              <v-flex xs4>
+                <label class="right mt-4">Select Class:</label>
+              </v-flex>
+              <v-flex xs8>
+                <v-select
+                  :items="addclass"
+                  label="Select Class"
+                  v-model="selectStudents.select"
+                  item-text="classNum"
+                  item-value="_id"
+                  name="Select Class"
+                  :rules="classRules"
+                  @change="getSections(selectStudents.select)"
+                  class="px-2"
+                  required
+                ></v-select>
+              </v-flex>
+            </v-layout>
+            <v-layout>
+              <v-flex xs4>
+                <label class="right mt-4">Select Section:</label>
+              </v-flex>
+              <v-flex xs8>
+                <v-select
+                  :items="addSection"
+                  label="Select Section"
+                  v-model="selectStudents.selectSection"
+                  item-text="name"
+                  item-value="_id"
+                  name="Select Section"
+                  :rules="sectionRules"
+                  class="px-2"
+                  required
+                ></v-select>
+              </v-flex>
+            </v-layout>
+            <!-- <v-layout> -->
+            <v-btn @click="findStudents()" round block dark :loading="loading">Find</v-btn>
+            <!-- </v-layout> -->
+          </v-flex>
         </v-card>
         <v-data-table
           :headers="headers"
@@ -910,7 +1032,7 @@
       <v-tab-item>
         <v-container fluid>
           <v-layout align-center justify-center fill-height>
-            <v-flex xs12 sm8 md7 lg8>
+            <v-flex xs12 sm12 md10 lg11>
               <div>
                 <v-app>
                   <v-stepper v-model="e2">
@@ -1046,438 +1168,527 @@
                         </v-container>
                       </v-stepper-content>
                       <v-stepper-content step="2">
-                        <v-container fluid>
-                          <v-snackbar
-                            :timeout="timeout"
-                            :top="y === 'top'"
-                            :right="x === 'right'"
-                            :vertical="mode === 'vertical'"
-                            v-model="snackbar"
-                            color="success"
-                          >{{ text }}</v-snackbar>
-                          <v-flex xs12 sm12>
-                            <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 mr-4"
-                                  >
-                                    <v-avatar size="100px">
-                                      <img src="/static/icon/user.png" v-if="!imageUrl" />
-                                    </v-avatar>
-                                    <input
-                                      type="file"
-                                      style="display: none"
-                                      ref="image"
-                                      accept="image/*"
-                                      @change="onFilePicked"
-                                    />
-                                    <img
-                                      :src="imageData.imageUrl"
-                                      height="150"
-                                      v-if="imageUrl"
-                                      style="border-radius:50%; width:200px"
-                                    />
-                                  </v-flex>
-                                </v-layout>
-                                <v-layout>
-                                  <v-flex xs12 sm6>
-                                    <v-layout>
-                                      <v-flex xs4 class="pt-4 subheading">
-                                        <label class="right">Select Class:</label>
-                                      </v-flex>
-                                      <v-flex xs8 class="ml-3">
-                                        <v-select
-                                          :items="addclass"
-                                          label="Select Class"
-                                          v-model="addStudents.select"
-                                          item-text="classNum"
-                                          item-value="_id"
-                                          name="Select Class"
-                                          :rules="classRules"
-                                          @change="getSection(addStudents.select)"
-                                          required
-                                        ></v-select>
-                                      </v-flex>
-                                    </v-layout>
-                                  </v-flex>
-                                  <v-flex xs12 sm6>
-                                    <v-layout>
-                                      <v-flex xs4 class="pt-4 subheading">
-                                        <label class="right">Select Section:</label>
-                                      </v-flex>
-                                      <v-flex xs8 class="ml-3">
-                                        <v-select
-                                          :items="addSection"
-                                          label="Select Section"
-                                          v-model="addStudents.selectSection"
-                                          item-text="name"
-                                          item-value="_id"
-                                          name="Select Section"
-                                          :rules="sectionRules"
-                                          required
-                                        ></v-select>
-                                      </v-flex>
-                                    </v-layout>
-                                  </v-flex>
-                                </v-layout>
-                                <v-layout>
-                                  <v-flex xs12 sm6>
-                                    <v-layout>
-                                      <v-flex xs4 class="pt-4 subheading">
-                                        <label class="right">Full Name:</label>
-                                      </v-flex>
-                                      <v-flex xs8 class="ml-3">
-                                        <v-text-field
-                                          v-model="addStudents.name"
-                                          placeholder="fill your full Name"
-                                          name="name"
-                                          type="text"
-                                          :rules="nameRules"
-                                          required
-                                        ></v-text-field>
-                                      </v-flex>
-                                    </v-layout>
-                                  </v-flex>
-                                  <v-flex xs12 sm6>
-                                    <v-layout>
-                                      <v-flex xs4 class="pt-4 subheading">
-                                        <label class="right">Email ID:</label>
-                                      </v-flex>
-                                      <v-flex xs8 class="ml-3">
-                                        <v-text-field
-                                          placeholder="fill your email"
-                                          :rules="emailRules"
-                                          v-model="addStudents.email"
-                                          type="text"
-                                          name="email"
-                                          required
-                                        ></v-text-field>
-                                      </v-flex>
-                                    </v-layout>
-                                  </v-flex>
-                                </v-layout>
-                                <v-layout>
-                                  <v-flex xs12 sm6>
-                                    <v-layout>
-                                      <v-flex xs4 class="pt-4 subheading">
-                                        <label class="right">Date of Birth:</label>
-                                      </v-flex>
-                                      <v-flex xs8 class="ml-3">
-                                        <v-menu
-                                          ref="menu"
-                                          :close-on-content-click="false"
-                                          v-model="menu"
-                                          :nudge-right="40"
-                                          lazy
-                                          transition="scale-transition"
-                                          offset-y
-                                          full-width
-                                          min-width="290px"
-                                        >
-                                          <v-text-field
-                                            slot="activator"
-                                            :rules="dateRules"
-                                            v-model="addStudents.date"
-                                            placeholder="Select date"
-                                          ></v-text-field>
-                                          <v-date-picker
-                                            ref="picker"
-                                            v-model="addStudents.date"
-                                            :max="new Date().toISOString().substr(0, 10)"
-                                            min="1950-01-01"
-                                            @input="menu = false"
-                                          ></v-date-picker>
-                                        </v-menu>
-                                      </v-flex>
-                                    </v-layout>
-                                  </v-flex>
-                                  <v-flex xs12 sm6>
-                                    <v-layout>
-                                      <v-flex xs4 class="pt-4 subheading">
-                                        <label class="right">City:</label>
-                                      </v-flex>
-                                      <v-flex xs8 class="ml-3">
-                                        <v-text-field
-                                          v-model="addStudents.city"
-                                          placeholder="fill your City Name"
-                                          name="City"
-                                          type="text"
-                                          :rules="cityRules"
-                                          required
-                                        ></v-text-field>
-                                      </v-flex>
-                                    </v-layout>
-                                  </v-flex>
-                                </v-layout>
-                                <v-layout>
-                                  <v-flex xs12 sm6>
-                                    <v-layout>
-                                      <v-flex xs4 class="pt-4 subheading">
-                                        <label class="right">State:</label>
-                                      </v-flex>
-                                      <v-flex xs8 class="ml-3">
-                                        <v-text-field
-                                          v-model="addStudents.state"
-                                          placeholder="fill your State Name"
-                                          name="state"
-                                          type="text"
-                                          :rules="stateRules"
-                                          required
-                                        ></v-text-field>
-                                      </v-flex>
-                                    </v-layout>
-                                  </v-flex>
-                                  <v-flex xs12 sm6>
-                                    <v-layout>
-                                      <v-flex xs4 class="pt-4 subheading">
-                                        <label class="right">Pincode:</label>
-                                      </v-flex>
-                                      <v-flex xs8 class="ml-3">
-                                        <v-text-field
-                                          v-model="addStudents.pincode"
-                                          placeholder="fill your pincode"
-                                          name="pincode"
-                                          type="number"
-                                          :rules="pincode"
-                                          required
-                                        ></v-text-field>
-                                      </v-flex>
-                                    </v-layout>
-                                  </v-flex>
-                                </v-layout>
-                                <v-layout>
-                                  <v-flex xs12 sm6>
-                                    <v-layout>
-                                      <v-flex xs4 class="pt-4 subheading">
-                                        <label class="right">Mobile No:</label>
-                                      </v-flex>
-                                      <v-flex xs8 class="ml-3">
-                                        <v-text-field
-                                          v-model="addStudents.mobile"
-                                          placeholder="fill your MobileNo"
-                                          name="mobileNo"
-                                          type="number"
-                                          :rules="mobileNoRules"
-                                          required
-                                        ></v-text-field>
-                                      </v-flex>
-                                    </v-layout>
-                                  </v-flex>
-                                  <v-flex xs12 sm6>
-                                    <v-layout>
-                                      <v-flex xs4 class="pt-4 subheading">
-                                        <label class="right">Select Country:</label>
-                                      </v-flex>
-                                      <v-flex xs8 class="ml-3">
-                                        <v-autocomplete
-                                          v-model="addStudents.country"
-                                          :rules="country"
-                                          :items="countries"
-                                          placeholder="Select Country Name"
-                                          required
-                                        ></v-autocomplete>
-                                      </v-flex>
-                                    </v-layout>
-                                  </v-flex>
-                                </v-layout>
-                                <v-layout>
-                                  <v-flex xs12 sm6>
-                                    <v-layout>
-                                      <v-flex xs4 class="pt-4 subheading">
-                                        <label class="right">Gender:</label>
-                                      </v-flex>
-                                      <v-flex xs8 class="ml-3">
-                                        <v-select
-                                          :items="gender"
-                                          v-model="addStudents.gender"
-                                          :rules="genderRules"
-                                          label="Select Gender"
-                                          required
-                                        ></v-select>
-                                      </v-flex>
-                                    </v-layout>
-                                  </v-flex>
-                                  <v-flex xs12 sm6>
-                                    <v-layout>
-                                      <v-flex xs4 class="pt-4 subheading">
-                                        <label class="right">Blood Group:</label>
-                                      </v-flex>
-                                      <v-flex xs8 class="ml-3">
-                                        <v-text-field
-                                          v-model="addStudents.bloodGroup"
-                                          placeholder="Fill your Blood Group"
-                                          required
-                                        ></v-text-field>
-                                      </v-flex>
-                                    </v-layout>
-                                  </v-flex>
-                                </v-layout>
-                                <v-layout>
-                                  <v-flex xs12 sm6>
-                                    <v-layout>
-                                      <v-flex xs4 class="pt-4 subheading">
-                                        <label class="right">Allergies:</label>
-                                      </v-flex>
-                                      <v-flex xs8 class="ml-3">
-                                        <v-text-field
-                                          v-model="addStudents.allergies"
-                                          placeholder="Fill your Allergies"
-                                          required
-                                        ></v-text-field>
-                                      </v-flex>
-                                    </v-layout>
-                                  </v-flex>
-                                  <v-flex xs12 sm6>
-                                    <v-layout>
-                                      <v-flex xs4 class="pt-4 subheading">
-                                        <label class="right">Medical Notes:</label>
-                                      </v-flex>
-                                      <v-flex xs8 class="ml-3">
-                                        <v-text-field
-                                          v-model="addStudents.medicalNotes"
-                                          placeholder="Fill your Medical Notes"
-                                          required
-                                        ></v-text-field>
-                                      </v-flex>
-                                    </v-layout>
-                                  </v-flex>
-                                </v-layout>
-                                <v-layout>
-                                  <v-flex xs12 sm6>
-                                    <v-layout>
-                                      <v-flex xs4 class="pt-4 subheading">
-                                        <label class="right">Height:</label>
-                                      </v-flex>
-                                      <v-flex xs8 class="ml-3">
-                                        <v-text-field
-                                          v-model="addStudents.height"
-                                          placeholder="Fill your Height"
-                                          required
-                                        ></v-text-field>
-                                      </v-flex>
-                                    </v-layout>
-                                  </v-flex>
-                                  <v-flex xs12 sm6>
-                                    <v-layout>
-                                      <v-flex xs4 class="pt-4 subheading">
-                                        <label class="right">Weight:</label>
-                                      </v-flex>
-                                      <v-flex xs8 class="ml-3">
-                                        <v-text-field
-                                          v-model="addStudents.weight"
-                                          placeholder="Fill your Weight"
-                                          required
-                                        ></v-text-field>
-                                      </v-flex>
-                                    </v-layout>
-                                  </v-flex>
-                                </v-layout>
-                                <v-layout>
-                                  <v-flex xs12 sm6>
-                                    <v-layout>
-                                      <v-flex xs4 class="pt-4 subheading">
-                                        <label class="right">Uplaod Image:</label>
-                                      </v-flex>
-                                      <v-flex xs8 class="ml-3">
-                                        <v-text-field
-                                          label="Select Image"
-                                          @click="pickFile"
-                                          v-model="imageName"
-                                          append-icon="attach_file"
-                                        ></v-text-field>
-                                      </v-flex>
-                                    </v-layout>
-                                  </v-flex>
-                                  <v-flex xs12 sm6>
-                                    <v-layout>
-                                      <v-flex xs4 class="pt-4 subheading">
-                                        <label class="right">Academic Year:</label>
-                                      </v-flex>
-                                      <v-flex xs8 class="ml-3">
-                                        <v-text-field
-                                          v-model="addStudents.establishmentYear"
-                                          placeholder="fill your Academic Year"
-                                          name="state"
-                                          type="number"
-                                          :rules="establishmentYearRules"
-                                          required
-                                        ></v-text-field>
-                                      </v-flex>
-                                    </v-layout>
-                                  </v-flex>
-                                </v-layout>
-                                <v-layout>
-                                  <v-flex xs12 sm6>
-                                    <v-layout>
-                                      <v-flex xs4 class="pt-4 subheading">
-                                        <label class="right">Roll Number:</label>
-                                      </v-flex>
-                                      <v-flex xs8 class="ml-3">
-                                        <v-text-field
-                                          v-model="addStudents.rollNo"
-                                          placeholder="Fill your Roll Number"
-                                          required
-                                        ></v-text-field>
-                                      </v-flex>
-                                    </v-layout>
-                                  </v-flex>
-                                </v-layout>
-                                <v-layout>
-                                  <v-flex xs12 sm12>
-                                    <v-layout>
-                                      <v-flex
-                                        xs3
-                                        class="pt-4 subheading pl-4"
-                                        style="max-width: 17%;"
+                        <!-- <v-container fluid> -->
+                        <v-snackbar
+                          :timeout="timeout"
+                          :top="y === 'top'"
+                          :right="x === 'right'"
+                          :vertical="mode === 'vertical'"
+                          v-model="snackbar"
+                          color="success"
+                        >{{ text }}</v-snackbar>
+                        <v-flex xs12 sm12>
+                          <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 mr-4"
+                                >
+                                  <v-avatar size="100px">
+                                    <img src="/static/icon/user.png" v-if="!imageUrl" />
+                                  </v-avatar>
+                                  <input
+                                    type="file"
+                                    style="display: none"
+                                    ref="image"
+                                    accept="image/*"
+                                    @change="onFilePicked"
+                                  />
+                                  <img
+                                    :src="imageData.imageUrl"
+                                    height="150"
+                                    v-if="imageUrl"
+                                    style="border-radius:50%; width:200px"
+                                  />
+                                </v-flex>
+                              </v-layout>
+                              <v-layout>
+                                <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-lg-only hidden-md-only hidden-xl-only"
+                                      >Class:</label>
+                                    </v-flex>
+                                    <v-flex xs8 sm8 class="ml-3">
+                                      <v-select
+                                        :items="addclass"
+                                        label="Select Class"
+                                        v-model="addStudents.select"
+                                        item-text="classNum"
+                                        item-value="_id"
+                                        name="Select Class"
+                                        :rules="classRules"
+                                        @change="getSection(addStudents.select)"
+                                        required
+                                      ></v-select>
+                                    </v-flex>
+                                  </v-layout>
+                                </v-flex>
+                                <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-lg-only hidden-md-only hidden-xl-only"
+                                      >Section:</label>
+                                    </v-flex>
+                                    <v-flex xs8 class="ml-3">
+                                      <v-select
+                                        :items="addSection"
+                                        label="Select Section"
+                                        v-model="addStudents.selectSection"
+                                        item-text="name"
+                                        item-value="_id"
+                                        name="Select Section"
+                                        :rules="sectionRules"
+                                        required
+                                      ></v-select>
+                                    </v-flex>
+                                  </v-layout>
+                                </v-flex>
+                              </v-layout>
+                              <v-layout>
+                                <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-lg-only hidden-md-only hidden-xl-only"
+                                      >Name:</label>
+                                    </v-flex>
+                                    <v-flex xs8 sm8 class="ml-3">
+                                      <v-text-field
+                                        v-model="addStudents.name"
+                                        placeholder="fill your full Name"
+                                        name="name"
+                                        type="text"
+                                        :rules="nameRules"
+                                        required
+                                      ></v-text-field>
+                                    </v-flex>
+                                  </v-layout>
+                                </v-flex>
+                                <v-flex xs12 sm6>
+                                  <v-layout>
+                                    <v-flex xs4 sm4 class="pt-4 subheading">
+                                      <label class="right">Email ID:</label>
+                                    </v-flex>
+                                    <v-flex xs8 sm8 class="ml-3">
+                                      <v-text-field
+                                        placeholder="fill your email"
+                                        :rules="emailRules"
+                                        v-model="addStudents.email"
+                                        type="text"
+                                        name="email"
+                                        required
+                                      ></v-text-field>
+                                    </v-flex>
+                                  </v-layout>
+                                </v-flex>
+                              </v-layout>
+                              <v-layout>
+                                <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>
+                                    </v-flex>
+                                    <v-flex xs8 sm8 class="ml-3">
+                                      <v-menu
+                                        ref="menu"
+                                        :close-on-content-click="false"
+                                        v-model="menu"
+                                        :nudge-right="40"
+                                        lazy
+                                        transition="scale-transition"
+                                        offset-y
+                                        full-width
+                                        min-width="290px"
                                       >
-                                        <label class>Present Address:</label>
-                                      </v-flex>
-                                      <v-flex xs12>
-                                        <v-text-field
-                                          name="input-4-3"
-                                          v-model="addStudents.presentAddress"
-                                          :rules="presentAddress"
-                                          placeholder="fill Your present Address"
-                                          required
-                                        ></v-text-field>
-                                      </v-flex>
-                                    </v-layout>
-                                  </v-flex>
-                                  <v-flex xs12 sm12>
-                                    <v-layout>
-                                      <v-flex xs3 class="pt-4 subheading" style="max-width: 17%;">
-                                        <label>Permanent Address:</label>
-                                      </v-flex>
-                                      <v-flex xs12>
                                         <v-text-field
-                                          name="input-4-3"
-                                          v-model="addStudents.permanentAddress"
-                                          :rules="permanentAddress"
-                                          placeholder="fill Your Permanent Address"
-                                          required
+                                          slot="activator"
+                                          :rules="dateRules"
+                                          v-model="addStudents.date"
+                                          placeholder="Select date"
                                         ></v-text-field>
-                                      </v-flex>
-                                    </v-layout>
-                                  </v-flex>
-                                </v-layout>
-                                <v-layout>
-                                  <v-flex xs12 sm12>
-                                    <v-card-actions>
-                                      <!-- <v-btn @click="clear" round dark>clear</v-btn> -->
-                                      <v-btn round dark @click="e2 = 1">
-                                        <v-icon dark left>arrow_back</v-icon>Back
-                                      </v-btn>
-                                      <v-spacer></v-spacer>
-                                      <v-btn @click="submit" round dark :loading="loading">Add</v-btn>
-                                    </v-card-actions>
-                                  </v-flex>
-                                </v-layout>
-                              </v-container>
-                            </v-form>
-                          </v-flex>
-                        </v-container>
+                                        <v-date-picker
+                                          ref="picker"
+                                          v-model="addStudents.date"
+                                          :max="new Date().toISOString().substr(0, 10)"
+                                          min="1950-01-01"
+                                          @input="menu = false"
+                                        ></v-date-picker>
+                                      </v-menu>
+                                    </v-flex>
+                                  </v-layout>
+                                </v-flex>
+                                <v-flex xs12 sm6>
+                                  <v-layout>
+                                    <v-flex xs4 class="pt-4 subheading">
+                                      <label class="right">City:</label>
+                                    </v-flex>
+                                    <v-flex xs8 class="ml-3">
+                                      <v-text-field
+                                        v-model="addStudents.city"
+                                        placeholder="fill your City Name"
+                                        name="City"
+                                        type="text"
+                                        :rules="cityRules"
+                                        required
+                                      ></v-text-field>
+                                    </v-flex>
+                                  </v-layout>
+                                </v-flex>
+                              </v-layout>
+                              <v-layout>
+                                <v-flex xs12 sm6>
+                                  <v-layout>
+                                    <v-flex xs4 class="pt-4 subheading">
+                                      <label class="right">State:</label>
+                                    </v-flex>
+                                    <v-flex xs8 class="ml-3">
+                                      <v-text-field
+                                        v-model="addStudents.state"
+                                        placeholder="fill your State Name"
+                                        name="state"
+                                        type="text"
+                                        :rules="stateRules"
+                                        required
+                                      ></v-text-field>
+                                    </v-flex>
+                                  </v-layout>
+                                </v-flex>
+                                <v-flex xs12 sm6>
+                                  <v-layout>
+                                    <v-flex xs4 class="pt-4 subheading">
+                                      <label class="right">Pincode:</label>
+                                    </v-flex>
+                                    <v-flex xs8 class="ml-3">
+                                      <v-text-field
+                                        v-model="addStudents.pincode"
+                                        placeholder="fill your pincode"
+                                        name="pincode"
+                                        type="number"
+                                        :rules="pincode"
+                                        required
+                                      ></v-text-field>
+                                    </v-flex>
+                                  </v-layout>
+                                </v-flex>
+                              </v-layout>
+                              <v-layout>
+                                <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>
+                                    </v-flex>
+                                    <v-flex xs8 class="ml-3">
+                                      <v-text-field
+                                        v-model="addStudents.mobile"
+                                        placeholder="fill your MobileNo"
+                                        name="mobileNo"
+                                        type="number"
+                                        :rules="mobileNoRules"
+                                        required
+                                      ></v-text-field>
+                                    </v-flex>
+                                  </v-layout>
+                                </v-flex>
+                                <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>
+                                    </v-flex>
+                                    <v-flex xs8 class="ml-3">
+                                      <v-autocomplete
+                                        v-model="addStudents.country"
+                                        :rules="country"
+                                        :items="countries"
+                                        placeholder="Select Country Name"
+                                        required
+                                      ></v-autocomplete>
+                                    </v-flex>
+                                  </v-layout>
+                                </v-flex>
+                              </v-layout>
+                              <v-layout>
+                                <v-flex xs12 sm6>
+                                  <v-layout>
+                                    <v-flex xs4 class="pt-4 subheading">
+                                      <label class="right">Gender:</label>
+                                    </v-flex>
+                                    <v-flex xs8 class="ml-3">
+                                      <v-select
+                                        :items="gender"
+                                        v-model="addStudents.gender"
+                                        :rules="genderRules"
+                                        label="Select Gender"
+                                        required
+                                      ></v-select>
+                                    </v-flex>
+                                  </v-layout>
+                                </v-flex>
+                                <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-lg-only hidden-md-only hidden-xl-only"
+                                      >Blood:</label>
+                                    </v-flex>
+                                    <v-flex xs8 class="ml-3">
+                                      <v-text-field
+                                        v-model="addStudents.bloodGroup"
+                                        placeholder="Fill your Blood Group"
+                                        required
+                                      ></v-text-field>
+                                    </v-flex>
+                                  </v-layout>
+                                </v-flex>
+                              </v-layout>
+                              <v-layout>
+                                <v-flex xs12 sm6>
+                                  <v-layout>
+                                    <v-flex xs4 class="pt-4 subheading">
+                                      <label class="right">Allergies:</label>
+                                    </v-flex>
+                                    <v-flex xs8 class="ml-3">
+                                      <v-text-field
+                                        v-model="addStudents.allergies"
+                                        placeholder="Fill your Allergies"
+                                        required
+                                      ></v-text-field>
+                                    </v-flex>
+                                  </v-layout>
+                                </v-flex>
+                                <v-flex xs12 sm6>
+                                  <v-layout>
+                                    <v-flex xs4 class="pt-4 subheading">
+                                      <label class="right">Medical Notes:</label>
+                                    </v-flex>
+                                    <v-flex xs8 class="ml-3">
+                                      <v-text-field
+                                        v-model="addStudents.medicalNotes"
+                                        placeholder="Fill your Medical Notes"
+                                        required
+                                      ></v-text-field>
+                                    </v-flex>
+                                  </v-layout>
+                                </v-flex>
+                              </v-layout>
+                              <v-layout>
+                                <v-flex xs12 sm6>
+                                  <v-layout>
+                                    <v-flex xs4 class="pt-4 subheading">
+                                      <label class="right">Height:</label>
+                                    </v-flex>
+                                    <v-flex xs8 class="ml-3">
+                                      <v-text-field
+                                        v-model="addStudents.height"
+                                        placeholder="Fill your Height"
+                                        required
+                                      ></v-text-field>
+                                    </v-flex>
+                                  </v-layout>
+                                </v-flex>
+                                <v-flex xs12 sm6>
+                                  <v-layout>
+                                    <v-flex xs4 class="pt-4 subheading">
+                                      <label class="right">Weight:</label>
+                                    </v-flex>
+                                    <v-flex xs8 class="ml-3">
+                                      <v-text-field
+                                        v-model="addStudents.weight"
+                                        placeholder="Fill your Weight"
+                                        required
+                                      ></v-text-field>
+                                    </v-flex>
+                                  </v-layout>
+                                </v-flex>
+                              </v-layout>
+                              <v-layout>
+                                <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>
+                                    </v-flex>
+                                    <v-flex xs8 class="ml-3">
+                                      <v-text-field
+                                        label="Select Image"
+                                        @click="pickFile"
+                                        v-model="imageName"
+                                        append-icon="attach_file"
+                                      ></v-text-field>
+                                    </v-flex>
+                                  </v-layout>
+                                </v-flex>
+                                <v-flex xs12 sm6>
+                                  <v-layout>
+                                    <v-flex xs4 class="pt-4 subheading">
+                                      <label class="right">Academic Year:</label>
+                                    </v-flex>
+                                    <v-flex xs8 class="ml-3">
+                                      <v-text-field
+                                        v-model="addStudents.establishmentYear"
+                                        placeholder="fill your Academic Year"
+                                        name="state"
+                                        type="number"
+                                        :rules="establishmentYearRules"
+                                        required
+                                      ></v-text-field>
+                                    </v-flex>
+                                  </v-layout>
+                                </v-flex>
+                              </v-layout>
+                              <v-layout>
+                                <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-lg-only hidden-md-only hidden-xl-only"
+                                      >Roll No:</label>
+                                    </v-flex>
+                                    <v-flex xs8 class="ml-3">
+                                      <v-text-field
+                                        v-model="addStudents.rollNo"
+                                        placeholder="Fill your Roll Number"
+                                        required
+                                      ></v-text-field>
+                                    </v-flex>
+                                  </v-layout>
+                                </v-flex>
+                              </v-layout>
+                              <v-layout class="hidden-xs-only hidden-sm-only">
+                                <v-flex xs12 sm12>
+                                  <v-layout>
+                                    <v-flex xs4 sm2 class="pt-4 subheading ml-5">
+                                      <label class="right pr-4">Present Address:</label>
+                                    </v-flex>
+                                    <v-flex xs8 sm12>
+                                      <v-text-field
+                                        name="input-4-3"
+                                        v-model="addStudents.presentAddress"
+                                        :rules="presentAddress"
+                                        placeholder="fill Your present Address"
+                                        required
+                                      ></v-text-field>
+                                    </v-flex>
+                                  </v-layout>
+                                </v-flex>
+                                <v-flex xs12 sm12>
+                                  <v-layout>
+                                    <v-flex xs4 sm2 class="pt-4 subheading ml-5 addressForm">
+                                      <label class>Permanent Address:</label>
+                                    </v-flex>
+                                    <v-flex xs12 sm12>
+                                      <v-text-field
+                                        name="input-4-3"
+                                        v-model="addStudents.permanentAddress"
+                                        :rules="permanentAddress"
+                                        placeholder="fill Your Permanent Address"
+                                        required
+                                      ></v-text-field>
+                                    </v-flex>
+                                  </v-layout>
+                                </v-flex>
+                              </v-layout>
+                              <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only">
+                                <v-flex xs12 sm12>
+                                  <v-layout>
+                                    <v-flex xs12 sm3 class="pt-4 subheading text-xs-center">
+                                      <label class>Present Address :</label>
+                                    </v-flex>
+                                  </v-layout>
+                                  <v-layout>
+                                    <v-flex xs12 sm12>
+                                      <v-textarea
+                                        name="input-4-3"
+                                        v-model="addStudents.presentAddress"
+                                        :rules="presentAddress"
+                                        placeholder="fill Your present Address"
+                                        required
+                                      ></v-textarea>
+                                    </v-flex>
+                                  </v-layout>
+                                </v-flex>
+                                <v-flex xs12 sm12>
+                                  <v-layout>
+                                    <v-flex
+                                      xs12
+                                      sm3
+                                      class="pt-4 pr-4 subheading text-xs-center addressForm"
+                                    >
+                                      <label>Permanent addr:</label>
+                                    </v-flex>
+                                  </v-layout>
+                                  <v-layout>
+                                    <v-flex xs12 sm12>
+                                      <v-textarea
+                                        name="input-4-3"
+                                        v-model="addStudents.permanentAddress"
+                                        :rules="permanentAddress"
+                                        placeholder="fill Your Permanent Address"
+                                        required
+                                      ></v-textarea>
+                                    </v-flex>
+                                  </v-layout>
+                                </v-flex>
+                              </v-layout>
+                              <v-layout>
+                                <v-flex xs12 sm12>
+                                  <!-- <v-card-actions> -->
+                                  <!-- <v-btn @click="clear" round dark>clear</v-btn> -->
+                                  <v-layout>
+                                    <v-flex xs6>
+                                      <v-btn round dark @click="e2 = 1">Back</v-btn>
+                                    </v-flex>
+                                    <!-- <v-spacer></v-spacer> -->
+                                    <v-flex xs6>
+                                      <v-btn
+                                        @click="submit"
+                                        round
+                                        dark
+                                        :loading="loading"
+                                        class="right"
+                                      >Add</v-btn>
+                                    </v-flex>
+                                  </v-layout>
+                                  <!-- </v-card-actions> -->
+                                </v-flex>
+                              </v-layout>
+                            </v-container>
+                          </v-form>
+                        </v-flex>
+                        <!-- </v-container> -->
                       </v-stepper-content>
                     </v-stepper-items>
                   </v-stepper>
@@ -1860,7 +2071,7 @@ export default {
       role: "STUDENT",
       name: "",
       email: ""
-    },
+    }
   }),
   watch: {
     menu(val) {
@@ -2218,7 +2429,7 @@ export default {
         this.$router.replace({ path: "/" });
       });
   },
- created() {
+  created() {
     this.$root.$on("app:search", search => {
       this.search = search;
     });
diff --git a/src/pages/Subjects/subjects.vue b/src/pages/Subjects/subjects.vue
index 0f1b1a8..e5cd778 100644
--- a/src/pages/Subjects/subjects.vue
+++ b/src/pages/Subjects/subjects.vue
@@ -38,7 +38,6 @@
               <v-spacer></v-spacer>
             </v-toolbar>
             <v-card flat>
-              <v-form ref="form">
                 <v-container fluid>
                   <v-layout>
                     <v-flex xs4 class="pt-4 subheading">
@@ -79,7 +78,6 @@
                     </v-card-actions>
                   </v-flex>
                 </v-container>
-              </v-form>
             </v-card>
           </v-flex>
         </v-dialog>
@@ -101,12 +99,12 @@
                 <v-layout wrap>
                   <v-flex>
                     <v-layout>
-                      <v-flex xs5 sm6>
+                      <v-flex xs7 sm6>
                         <h5 class="right my-1">
                           <b>Subject Name:</b>
                         </h5>
                       </v-flex>
-                      <v-flex sm6 xs8>
+                      <v-flex sm6 xs5>
                         <h5 class="my-1">{{ editedItem.subjectName }}</h5>
                       </v-flex>
                     </v-layout>
@@ -130,10 +128,10 @@
         <v-card flat>
           <v-card-actions>
             <v-layout>
-              <v-flex xs1>
+              <v-flex xs4 sm1>
                 <label class="right mt-4">Select Class:</label>
               </v-flex>
-              <v-flex xs3>
+              <v-flex xs8 sm3 >
                 <v-select
                   :items="classList"
                   label="Select Class"
@@ -221,10 +219,10 @@
                         </v-flex>
                       </v-layout>
                       <v-layout>
-                        <v-flex xs4 class="pt-4 subheading">
+                        <v-flex xs4 sm4 class="pt-4 subheading">
                           <label class="right">Class:</label>
                         </v-flex>
-                        <v-flex xs6 class="ml-3">
+                        <v-flex xs8 sm6 class="ml-3">
                           <v-select
                             v-model="addSubject.classId"
                             label="Select your class"
@@ -238,10 +236,10 @@
                         </v-flex>
                       </v-layout>
                       <v-layout>
-                        <v-flex xs4 class="pt-4 subheading">
+                        <v-flex xs4 sm4 class="pt-4 subheading">
                           <label class="right">Subject:</label>
                         </v-flex>
-                        <v-flex xs6 class="ml-3">
+                        <v-flex xs8 sm6 class="ml-3">
                           <v-text-field
                             v-model="addSubject.subjectName"
                             placeholder="fill your Subject Name"
diff --git a/src/pages/Teachers/teachers.vue b/src/pages/Teachers/teachers.vue
index 76dca82..81474f1 100644
--- a/src/pages/Teachers/teachers.vue
+++ b/src/pages/Teachers/teachers.vue
@@ -69,10 +69,11 @@
                   <v-layout>
                     <v-flex xs12 sm6>
                       <v-layout>
-                        <v-flex xs4 class="pt-4 subheading">
-                          <label class="right">Full Name:</label>
+                        <v-flex xs4 sm4 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>
                         </v-flex>
-                        <v-flex xs8 class="ml-3">
+                        <v-flex xs8 sm8 class="ml-3">
                           <v-text-field
                             v-model="editedItem.name"
                             placeholder="fill your full Name"
@@ -85,10 +86,10 @@
                     </v-flex>
                     <v-flex xs12 sm6>
                       <v-layout>
-                        <v-flex xs4 class="pt-4 subheading">
+                        <v-flex xs4 sm4 class="pt-4 subheading">
                           <label class="right">Email ID:</label>
                         </v-flex>
-                        <v-flex xs8 class="ml-3">
+                        <v-flex xs8 sm8 class="ml-3">
                           <v-text-field
                             placeholder="fill your email"
                             v-model="editedItem.email"
@@ -103,10 +104,11 @@
                   <v-layout>
                     <v-flex xs12 sm6>
                       <v-layout>
-                        <v-flex xs4 class="pt-4 subheading">
-                          <label class="right">Date of Birth:</label>
+                        <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>
                         </v-flex>
-                        <v-flex xs8 class="ml-3">
+                        <v-flex xs8 sm8 class="ml-3">
                           <v-menu
                             ref="menu"
                             :close-on-content-click="false"
@@ -189,7 +191,8 @@
                     <v-flex xs12 sm6>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
-                          <label class="right">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>
                         </v-flex>
                         <v-flex xs8 class="ml-3">
                           <v-text-field
@@ -205,7 +208,8 @@
                     <v-flex xs12 sm6>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
-                          <label class="right">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>
                         </v-flex>
                         <v-flex xs8 class="ml-3">
                           <v-autocomplete
@@ -255,7 +259,8 @@
                     <v-flex xs12 sm6>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
-                          <label class="right">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>
                         </v-flex>
                         <v-flex xs8 class="ml-3">
                           <v-text-field
@@ -268,13 +273,13 @@
                       </v-layout>
                     </v-flex>
                   </v-layout>
-                  <v-layout>
+                  <v-layout class="hidden-xs-only hidden-sm-only">
                     <v-flex xs12 sm12>
                       <v-layout>
-                        <v-flex xs3 class="pt-4 subheading pl-3" style="max-width: 17%;">
-                          <label class>Present Address:</label>
+                        <v-flex xs4 sm2 class="pt-4 subheading ml-5">
+                          <label class="right pr-4">Present Address:</label>
                         </v-flex>
-                        <v-flex xs12>
+                        <v-flex xs8 sm12>
                           <v-text-field
                             name="input-4-3"
                             v-model="editedItem.presentAddress"
@@ -286,10 +291,10 @@
                     </v-flex>
                     <v-flex xs12 sm12>
                       <v-layout>
-                        <v-flex xs3 class="pt-4 subheading" style="max-width: 17%;">
-                          <label>Permanent Address:</label>
+                        <v-flex xs4 sm2 class="pt-4 subheading ml-5 addressForm">
+                          <label class>Permanent Address:</label>
                         </v-flex>
-                        <v-flex xs12>
+                        <v-flex xs12 sm12>
                           <v-text-field
                             name="input-4-3"
                             v-model="editedItem.permanentAddress"
@@ -300,13 +305,52 @@
                       </v-layout>
                     </v-flex>
                   </v-layout>
-                  <v-layout>
+                  <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only">
+                    <v-flex xs12 sm12>
+                      <v-layout>
+                        <v-flex xs12 sm3 class="pt-4 subheading text-xs-center">
+                          <label class>Present Address :</label>
+                        </v-flex>
+                      </v-layout>
+                      <v-layout>
+                        <v-flex xs12 sm12>
+                          <v-textarea
+                            name="input-4-3"
+                            v-model="editedItem.presentAddress"
+                            placeholder="fill Your present Address"
+                            required
+                          ></v-textarea>
+                        </v-flex>
+                      </v-layout>
+                    </v-flex>
+                    <v-flex xs12 sm12>
+                      <v-layout>
+                        <v-flex xs12 sm3 class="pt-4 pr-4 subheading text-xs-center addressForm">
+                          <label>Permanent addr:</label>
+                        </v-flex>
+                      </v-layout>
+                      <v-layout>
+                        <v-flex xs12 sm12>
+                          <v-textarea
+                            name="input-4-3"
+                            v-model="editedItem.permanentAddress"
+                            placeholder="fill Your Permanent Address"
+                            required
+                          ></v-textarea>
+                        </v-flex>
+                      </v-layout>
+                    </v-flex>
+                  </v-layout>
+                   <v-layout>
                     <v-flex xs12 sm12>
-                      <v-card-actions>
-                        <v-btn round dark @click.native="close">Cancel</v-btn>
-                        <v-spacer></v-spacer>
-                        <v-btn round dark :loading="loading" @click="save">Save</v-btn>
-                      </v-card-actions>
+                      <v-layout>
+                        <v-flex xs6>
+                           <v-btn round dark @click.native="close">Cancel</v-btn>
+                        </v-flex>
+                        <v-flex xs6>
+                          <v-btn @click="save" round dark :loading="loading" class="right">Save</v-btn>
+                        </v-flex>
+                      </v-layout>
                     </v-flex>
                   </v-layout>
                 </v-container>
@@ -339,7 +383,9 @@
                     </v-flex>
                     <v-layout>
                       <v-flex xs5 sm6>
-                        <h5 class="right my-1"><b>Full Name:</b></h5>
+                        <h5 class="right my-1">
+                          <b>Full Name:</b>
+                        </h5>
                       </v-flex>
                       <v-flex sm6 xs8>
                         <h5 class="my-1">{{ editedItem.name }}</h5>
@@ -347,7 +393,9 @@
                     </v-layout>
                     <v-layout>
                       <v-flex xs5 sm6>
-                        <h5 class="right my-1"><b>Email:</b></h5>
+                        <h5 class="right my-1">
+                          <b>Email:</b>
+                        </h5>
                       </v-flex>
                       <v-flex sm6 xs8>
                         <h5 class="my-1">{{ editedItem.email }}</h5>
@@ -355,7 +403,9 @@
                     </v-layout>
                     <v-layout>
                       <v-flex xs5 sm6>
-                        <h5 class="right my-1"><b>City:</b></h5>
+                        <h5 class="right my-1">
+                          <b>City:</b>
+                        </h5>
                       </v-flex>
                       <v-flex sm6 xs8>
                         <h5 class="my-1">{{ editedItem.city }}</h5>
@@ -363,7 +413,9 @@
                     </v-layout>
                     <v-layout>
                       <v-flex xs5 sm6>
-                        <h5 class="right my-1"><b>State:</b></h5>
+                        <h5 class="right my-1">
+                          <b>State:</b>
+                        </h5>
                       </v-flex>
                       <v-flex sm6 xs8>
                         <h5 class="my-1">{{ editedItem.state }}</h5>
@@ -371,7 +423,9 @@
                     </v-layout>
                     <v-layout>
                       <v-flex xs5 sm6>
-                        <h5 class="right my-1"><b>Country:</b></h5>
+                        <h5 class="right my-1">
+                          <b>Country:</b>
+                        </h5>
                       </v-flex>
                       <v-flex sm6 xs8>
                         <h5 class="my-1">{{ editedItem.country }}</h5>
@@ -379,7 +433,9 @@
                     </v-layout>
                     <v-layout>
                       <v-flex xs5 sm6>
-                        <h5 class="right my-1"><b>Pincode:</b></h5>
+                        <h5 class="right my-1">
+                          <b>Pincode:</b>
+                        </h5>
                       </v-flex>
                       <v-flex sm6 xs8>
                         <h5 class="my-1">{{ editedItem.pincode }}</h5>
@@ -387,7 +443,9 @@
                     </v-layout>
                     <v-layout>
                       <v-flex xs5 sm6>
-                        <h5 class="right my-1"><b>Mobile No:</b></h5>
+                        <h5 class="right my-1">
+                          <b>Mobile No:</b>
+                        </h5>
                       </v-flex>
                       <v-flex sm6 xs8>
                         <h5 class="my-1">{{ editedItem.mobileNo }}</h5>
@@ -395,7 +453,9 @@
                     </v-layout>
                     <v-layout>
                       <v-flex xs5 sm6>
-                        <h5 class="right my-1"><b>Join Date:</b></h5>
+                        <h5 class="right my-1">
+                          <b>Join Date:</b>
+                        </h5>
                       </v-flex>
                       <v-flex sm6 xs8>
                         <h5 class="my-1">{{ dates(editedItem.joinDate) }}</h5>
@@ -403,7 +463,9 @@
                     </v-layout>
                     <v-layout>
                       <v-flex xs5 sm6>
-                        <h5 class="right my-1"><b>Date Of Birth:</b></h5>
+                        <h5 class="right my-1">
+                          <b>D.O.B :</b>
+                        </h5>
                       </v-flex>
                       <v-flex sm6 xs8>
                         <h5 class="my-1">{{ dates(editedItem.dob) }}</h5>
@@ -411,7 +473,9 @@
                     </v-layout>
                     <v-layout>
                       <v-flex xs6 sm6>
-                        <h5 class="right my-1"><b>Permanent Address:</b></h5>
+                        <h5 class="right my-1">
+                          <b>Permanent Address:</b>
+                        </h5>
                       </v-flex>
                       <v-flex sm6 xs8>
                         <h5 class="my-1">{{ editedItem.permanentAddress }}</h5>
@@ -419,7 +483,9 @@
                     </v-layout>
                     <v-layout>
                       <v-flex xs6 sm6>
-                        <h5 class="right my-1"><b>present Address:</b></h5>
+                        <h5 class="right my-1">
+                          <b>present Address:</b>
+                        </h5>
                       </v-flex>
                       <v-flex sm6 xs8>
                         <h5 class="my-1">{{ editedItem.presentAddress }}</h5>
@@ -449,7 +515,7 @@
           :search="search"
         >
           <template slot="items" slot-scope="props">
-            <td id="td" class="text-xs-center">{{ props.index  + 1}}</td>
+            <td id="td" class="text-xs-center">{{ props.index + 1}}</td>
             <td id="td" class="text-xs-center">
               <v-avatar>
                 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />
@@ -495,7 +561,7 @@
 
       <!-- ****** Add Teachers Data****** -->
       <v-tab-item>
-        <v-container>
+        <v-container fluid>
           <v-snackbar
             :timeout="timeout"
             :top="y === 'top'"
@@ -563,8 +629,9 @@
                   <v-layout>
                     <v-flex xs12 sm6>
                       <v-layout>
-                        <v-flex xs4 class="pt-4 subheading">
-                          <label class="right">Date of Birth:</label>
+                        <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>
                         </v-flex>
                         <v-flex xs8 class="ml-3">
                           <v-menu
@@ -653,7 +720,8 @@
                     <v-flex xs12 sm6>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
-                          <label class="right">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>
                         </v-flex>
                         <v-flex xs8 class="ml-3">
                           <v-text-field
@@ -670,7 +738,8 @@
                     <v-flex xs12 sm6>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
-                          <label class="right">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>
                         </v-flex>
                         <v-flex xs8 class="ml-3">
                           <v-autocomplete
@@ -722,7 +791,8 @@
                     <v-flex xs12 sm6>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
-                          <label class="right">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>
                         </v-flex>
                         <v-flex xs8 class="ml-3">
                           <v-text-field
@@ -742,7 +812,7 @@
                       </v-layout>
                     </v-flex>
                   </v-layout>
-                  <v-layout>
+                  <!-- <v-layout>
                     <v-flex xs12 sm12>
                       <v-layout>
                         <v-flex xs3 class="pt-4 subheading pl-4" style="max-width: 17%;">
@@ -775,14 +845,89 @@
                         </v-flex>
                       </v-layout>
                     </v-flex>
+                  </v-layout>-->
+                  <v-layout class="hidden-xs-only hidden-sm-only">
+                    <v-flex xs12 sm12>
+                      <v-layout>
+                        <v-flex xs4 sm2 class="pt-4 subheading ml-5">
+                          <label class="right pr-4">Present Address:</label>
+                        </v-flex>
+                        <v-flex xs8 sm12>
+                          <v-text-field
+                            name="input-4-3"
+                            v-model="addTeachers.presentAddress"
+                            :rules="presentAddress"
+                            placeholder="fill Your present Address"
+                            required
+                          ></v-text-field>
+                        </v-flex>
+                      </v-layout>
+                    </v-flex>
+                    <v-flex xs12 sm12>
+                      <v-layout>
+                        <v-flex xs4 sm2 class="pt-4 subheading ml-5 addressForm">
+                          <label class>Permanent Address:</label>
+                        </v-flex>
+                        <v-flex xs12 sm12>
+                          <v-text-field
+                            name="input-4-3"
+                            v-model="addTeachers.permanentAddress"
+                            :rules="permanentAddress"
+                            placeholder="fill Your Permanent Address"
+                            required
+                          ></v-text-field>
+                        </v-flex>
+                      </v-layout>
+                    </v-flex>
                   </v-layout>
-                  <v-layout>
+                  <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only">
+                    <v-flex xs12 sm12>
+                      <v-layout>
+                        <v-flex xs12 sm3 class="pt-4 subheading text-xs-center">
+                          <label class>Present Address :</label>
+                        </v-flex>
+                      </v-layout>
+                      <v-layout>
+                        <v-flex xs12 sm12>
+                          <v-textarea
+                            name="input-4-3"
+                            v-model="addTeachers.presentAddress"
+                            :rules="presentAddress"
+                            placeholder="fill Your present Address"
+                            required
+                          ></v-textarea>
+                        </v-flex>
+                      </v-layout>
+                    </v-flex>
+                    <v-flex xs12 sm12>
+                      <v-layout>
+                        <v-flex xs12 sm3 class="pt-4 pr-4 subheading text-xs-center addressForm">
+                          <label>Permanent addr:</label>
+                        </v-flex>
+                      </v-layout>
+                      <v-layout>
+                        <v-flex xs12 sm12>
+                          <v-textarea
+                            name="input-4-3"
+                            v-model="addTeachers.permanentAddress"
+                            :rules="permanentAddress"
+                            placeholder="fill Your Permanent Address"
+                            required
+                          ></v-textarea>
+                        </v-flex>
+                      </v-layout>
+                    </v-flex>
+                  </v-layout>
+                  <v-layout class="mx-2">
                     <v-flex xs12 sm12>
-                      <v-card-actions>
-                        <v-btn @click="clear" round dark>clear</v-btn>
-                        <v-spacer></v-spacer>
-                        <v-btn @click="submit" round dark :loading="loading">Add</v-btn>
-                      </v-card-actions>
+                      <v-layout>
+                        <v-flex xs6>
+                          <v-btn @click="clear" round dark>clear</v-btn>
+                        </v-flex>
+                        <v-flex xs6>
+                          <v-btn @click="submit" round dark :loading="loading" class="right">Add</v-btn>
+                        </v-flex>
+                      </v-layout>
                     </v-flex>
                   </v-layout>
                 </v-container>
@@ -1122,7 +1267,7 @@ export default {
       role: "TEACHER",
       name: "",
       email: ""
-    },
+    }
   }),
   watch: {
     menu(val) {
@@ -1359,7 +1504,6 @@ export default {
 };
 </script>
 <style scoped>
-
 .active {
   background-color: gray;
   color: white !important;
diff --git a/src/pages/TimeTable/timeTable.vue b/src/pages/TimeTable/timeTable.vue
index a6ef236..a9b3338 100644
--- a/src/pages/TimeTable/timeTable.vue
+++ b/src/pages/TimeTable/timeTable.vue
@@ -83,7 +83,8 @@
                   <v-flex xs12 sm12>
                     <v-layout>
                       <v-flex xs4 class="pt-4 subheading">
-                        <label class="right">Section Name:</label>
+                        <label class="right hidden-xs-only hidden-sm-only">Section Name:</label>
+                        <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Section:</label>
                       </v-flex>
                       <v-flex xs5 class="ml-3">
                         <v-select
@@ -128,7 +129,8 @@
                   <v-flex xs12 sm12 class="py-3">
                     <v-layout>
                       <v-flex xs4 class="pt-4 subheading">
-                        <label class="right">Select Day:</label>
+                        <label class="right hidden-xs-only hidden-sm-only">Select Day:</label>
+                        <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Day:</label>
                       </v-flex>
                       <v-flex xs12 sm5 class="ml-3">
                         <v-select
@@ -493,7 +495,7 @@
                 style="cursor: pointer;"
                 @click="getTimeTable(props.item), props.expanded = !props.expanded"
               >
-                <td class="text-xs-center">{{ props.index  + 1}}</td>
+                <td class="text-xs-center">{{ props.index + 1}}</td>
                 <td class="text-xs-center">{{ props.item.classData.classNum}}</td>
                 <td class="text-xs-center">{{ props.item.sectionData.name }}</td>
                 <td class="text-xs-center">
@@ -621,9 +623,10 @@
                   <v-flex xs12>
                     <v-layout>
                       <v-flex xs4 class="pt-4 subheading">
-                        <label class="right">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>
                       </v-flex>
-                      <v-flex xs4 class="ml-3">
+                      <v-flex xs8 sm4 class="ml-3">
                         <v-select
                           :items="addclass"
                           label="Select Class"
@@ -639,9 +642,10 @@
                   <v-flex xs12>
                     <v-layout>
                       <v-flex xs4 class="pt-4 subheading">
-                        <label class="right">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>
                       </v-flex>
-                      <v-flex xs4 class="ml-3">
+                      <v-flex sm4 xs8 class="ml-3">
                         <v-select
                           :items="addSection"
                           label="Select Section"
@@ -656,9 +660,10 @@
                   <v-flex xs12>
                     <v-layout>
                       <v-flex xs4 class="pt-4 subheading">
-                        <label class="right">Select Teacher:</label>
+                        <label class="right hidden-xs-only hidden-sm-only">Select Teacher:</label>
+                        <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Teacher:</label>
                       </v-flex>
-                      <v-flex xs4 class="ml-3">
+                      <v-flex xs8 sm4 class="ml-3">
                         <v-select
                           :items="addTeachers"
                           label="Select Teacher"
@@ -675,7 +680,7 @@
                       <v-flex xs4 class="pt-4 subheading">
                         <label class="right">Select Day:</label>
                       </v-flex>
-                      <v-flex xs4 class="ml-3">
+                      <v-flex xs8 sm4 class="ml-3">
                         <v-select
                           :items="addOneDay"
                           label="Select Day"
@@ -690,9 +695,10 @@
                   <v-flex xs12>
                     <v-layout>
                       <v-flex xs4 class="pt-4 subheading">
-                        <label class="right">Subject Name:</label>
+                        <label class="right hidden-xs-only hidden-sm-only">Subject Name:</label>
+                        <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Subject:</label>
                       </v-flex>
-                      <v-flex xs4 class="ml-3">
+                      <v-flex xs8 sm4 class="ml-3">
                         <v-text-field
                           placeholder="fill your Subject Name"
                           :rules="subjectNameRules"
@@ -708,7 +714,7 @@
                       <v-flex xs4 class="pt-4 subheading">
                         <label class="right">Time In:</label>
                       </v-flex>
-                      <v-flex xs4 class="ml-3">
+                      <v-flex xs8 sm4 class="ml-3">
                         <v-menu
                           ref="menuA"
                           :close-on-content-click="false"
@@ -741,7 +747,7 @@
                       <v-flex xs4 class="pt-4 subheading">
                         <label class="right">Time Out:</label>
                       </v-flex>
-                      <v-flex xs4 class="ml-3">
+                      <v-flex xs8 sm4 class="ml-3">
                         <v-menu
                           ref="menu"
                           :close-on-content-click="false"
diff --git a/src/pages/User/user.vue b/src/pages/User/user.vue
index 5311346..3b7f670 100644
--- a/src/pages/User/user.vue
+++ b/src/pages/User/user.vue
@@ -104,7 +104,8 @@
                     <v-flex xs12 sm6>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
-                          <label class="right">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>
                         </v-flex>
                         <v-flex xs8 class="ml-3">
                           <v-menu
@@ -222,7 +223,8 @@
                     <v-flex xs12 sm6>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
-                          <label class="right">Select Role:</label>
+                          <label class="right hidden-sm-only hidden-xs-only">Select Role:</label>
+                          <label class="right hidden-lg-only hidden-xl-only hidden-md-only">Role:</label>
                         </v-flex>
                         <v-flex xs8 class="ml-3">
                           <v-autocomplete
@@ -241,7 +243,8 @@
                     <v-flex xs12 sm6>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
-                          <label class="right">Uplaod Image:</label>
+                           <label class="right hidden-sm-only hidden-xs-only">Uplaod Image:</label>
+                          <label class="right hidden-lg-only hidden-xl-only hidden-md-only">Uplaod:</label>
                         </v-flex>
                         <v-flex xs8 class="ml-3">
                           <v-text-field
@@ -307,7 +310,7 @@
                       </v-avatar>
                     </v-flex>
                     <v-layout>
-                      <v-flex xs5 sm6>
+                      <v-flex xs4 sm6>
                         <h5 class="right my-1">
                           <b>Name:</b>
                         </h5>
@@ -317,7 +320,7 @@
                       </v-flex>
                     </v-layout>
                     <v-layout>
-                      <v-flex xs5 sm6>
+                      <v-flex xs4 sm6>
                         <h5 class="right my-1">
                           <b>Email:</b>
                         </h5>
@@ -327,9 +330,9 @@
                       </v-flex>
                     </v-layout>
                     <v-layout>
-                      <v-flex xs5 sm6>
+                      <v-flex xs4 sm6>
                         <h5 class="right my-1">
-                          <b>Gender</b>
+                          <b>Gender:</b>
                         </h5>
                       </v-flex>
                       <v-flex sm6 xs8>
@@ -337,7 +340,7 @@
                       </v-flex>
                     </v-layout>
                     <v-layout>
-                      <v-flex xs5 sm6>
+                      <v-flex xs4 sm6>
                         <h5 class="right my-1">
                           <b>Religion:</b>
                         </h5>
@@ -347,7 +350,7 @@
                       </v-flex>
                     </v-layout>
                     <v-layout>
-                      <v-flex xs5 sm6>
+                      <v-flex xs4 sm6>
                         <h5 class="right my-1">
                           <b>Role:</b>
                         </h5>
@@ -357,7 +360,7 @@
                       </v-flex>
                     </v-layout>
                     <v-layout>
-                      <v-flex xs5 sm6>
+                      <v-flex xs4 sm6>
                         <h5 class="right my-1">
                           <b>Phone:</b>
                         </h5>
@@ -367,7 +370,7 @@
                       </v-flex>
                     </v-layout>
                     <v-layout>
-                      <v-flex xs5 sm6>
+                      <v-flex xs4 sm6>
                         <h5 class="right my-1">
                           <b>Joining Date:</b>
                         </h5>
@@ -377,9 +380,14 @@
                       </v-flex>
                     </v-layout>
                     <v-layout>
-                      <v-flex xs5 sm6>
+                      <v-flex xs4 sm6>
                         <h5 class="right my-1">
-                          <b>Date Of Birth:</b>
+                          <label class="right hidden-sm-only hidden-xs-only">
+                            <b>Date of Birth:</b>
+                          </label>
+                          <label class="right hidden-lg-only hidden-xl-only hidden-md-only">
+                            <b>D.O.B:</b>
+                          </label>
                         </h5>
                       </v-flex>
                       <v-flex sm6 xs8>
@@ -387,7 +395,7 @@
                       </v-flex>
                     </v-layout>
                     <v-layout>
-                      <v-flex xs6 sm6>
+                      <v-flex xs4 sm6>
                         <h5 class="right my-1">
                           <b>Address:</b>
                         </h5>
@@ -535,7 +543,8 @@
                     <v-flex xs12 sm6>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
-                          <label class="right">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>
                         </v-flex>
                         <v-flex xs8 class="ml-3">
                           <v-menu
@@ -657,7 +666,8 @@
                     <v-flex xs12 sm6>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
-                          <label class="right">Select Role:</label>
+                          <label class="right hidden-sm-only hidden-xs-only">Select Role:</label>
+                          <label class="right hidden-lg-only hidden-xl-only hidden-md-only">Role:</label>
                         </v-flex>
                         <v-flex xs8 class="ml-3">
                           <v-autocomplete
@@ -710,7 +720,8 @@
                     <v-flex xs12 sm6>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
-                          <label class="right">Uplaod Image:</label>
+                          <label class="right hidden-sm-only hidden-xs-only">Uplaod Image:</label>
+                          <label class="right hidden-lg-only hidden-xl-only hidden-md-only">Image:</label>
                         </v-flex>
                         <v-flex xs8 class="ml-3">
                           <v-text-field
@@ -748,11 +759,14 @@
                   </v-layout>
                   <v-layout>
                     <v-flex xs12 sm12>
-                      <v-card-actions>
-                        <v-btn @click="clear" round dark>clear</v-btn>
-                        <v-spacer></v-spacer>
-                        <v-btn @click="submit" round dark :loading="loading">Add</v-btn>
-                      </v-card-actions>
+                      <v-layout>
+                        <v-flex xs6>
+                          <v-btn @click="clear" round class="ml-3" dark>clear</v-btn>
+                        </v-flex>
+                        <v-flex xs6>
+                          <v-btn @click="submit" round dark :loading="loading" class="right">Add</v-btn>
+                        </v-flex>
+                      </v-layout>
                     </v-flex>
                   </v-layout>
                 </v-container>
diff --git a/src/pages/socialMedia/socialMedia.vue b/src/pages/socialMedia/socialMedia.vue
index 38fcb43..84af1d4 100644
--- a/src/pages/socialMedia/socialMedia.vue
+++ b/src/pages/socialMedia/socialMedia.vue
@@ -68,7 +68,7 @@
                       <v-flex xs4 class="pt-4 subheading">
                         <label class="right">Title:</label>
                       </v-flex>
-                      <v-flex xs5 class="ml-3">
+                      <v-flex xs8 sm5 class="ml-3">
                         <v-select
                           v-model="editedItem.type"
                           placeholder="fill your Title"
@@ -86,7 +86,7 @@
                       <v-flex xs4 class="pt-4 subheading">
                         <label class="right">Description:</label>
                       </v-flex>
-                      <v-flex xs5 class="ml-3">
+                      <v-flex xs8 sm5 class="ml-3">
                         <v-text-field
                           placeholder="fill your Description"
                           v-model="editedItem.linkUrl"
@@ -135,7 +135,9 @@
                     <br />
                     <v-layout>
                       <v-flex xs5 sm6>
-                        <h5 class="right my-1"><b>Title:</b></h5>
+                        <h5 class="right my-1">
+                          <b>Title:</b>
+                        </h5>
                       </v-flex>
                       <v-flex sm6 xs8>
                         <h5 class="my-1">{{ editedItem.type }}</h5>
@@ -143,7 +145,9 @@
                     </v-layout>
                     <v-layout>
                       <v-flex xs5 sm6>
-                        <h5 class="right my-1"><b>Description:</b></h5>
+                        <h5 class="right my-1">
+                          <b>Description:</b>
+                        </h5>
                       </v-flex>
                       <v-flex sm6 xs8>
                         <h5 class="my-1">{{ editedItem.linkUrl }}</h5>
@@ -173,7 +177,7 @@
           :search="search"
         >
           <template slot="items" slot-scope="props">
-            <td id="tabeleData" class="text-xs-center">{{ props.index  + 1}}</td>
+            <td id="tabeleData" class="text-xs-center">{{ props.index + 1}}</td>
             <td id="tabeleData" class="text-xs-center">{{ props.item.type}}</td>
             <td id="tabeleData" class="text-xs-center">{{ props.item.linkUrl}}</td>
 
@@ -253,7 +257,7 @@
                       <v-flex xs4 class="pt-4 subheading">
                         <label class="right">Type:</label>
                       </v-flex>
-                      <v-flex xs4 class="ml-3">
+                      <v-flex xs8 sm4 class="ml-3">
                         <v-select
                           v-model="socialMedia.type"
                           :items="socialLink"
@@ -272,7 +276,7 @@
                       <v-flex xs4 class="pt-4 subheading">
                         <label class="right">Link Url:</label>
                       </v-flex>
-                      <v-flex xs4 class="ml-3">
+                      <v-flex xs8 sm4 class="ml-3">
                         <v-text-field
                           placeholder="fill your link url"
                           :rules="linkUrlnRules"
diff --git a/static/css/custom.css b/static/css/custom.css
index 89b3d03..756ef53 100644
--- a/static/css/custom.css
+++ b/static/css/custom.css
@@ -161,6 +161,14 @@ h4 {
     font-size: 22px !important;
 }
 
+.mr5 {
+    margin-right: 48px !important;
+}
+
+.addressForm {
+    max-width: 17%;
+}
+
 @media screen and (max-width: 769px) {
     .top {
         margin-top: 0 !important;
@@ -217,6 +225,17 @@ h4 {
     .name {
         font-size: 15px !important;
     }
+    .mr5 {
+        margin-right: 14px !important;
+    }
+    .addressForm {
+        max-width: 0;
+    }
+    .tableRsponsive {
+        display: block;
+        position: relative;
+        overflow: scroll;
+    }
 }
 
 @media screen and (max-width: 600px) {
@@ -224,7 +243,8 @@ h4 {
         /* position: absolute; */
         top: 13px;
         left: 10px;
-        height: 34px;
-        width: 120px;
+        height: 33px;
+        width: 33px;
+        margin-top: 5px;
     }
 }
\ No newline at end of file
-- 
2.0.0