diff --git a/package-lock.json b/package-lock.json
index 87c5180..0f391e3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3743,6 +3743,11 @@
       "integrity": "sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=",
       "dev": true
     },
+    "deepmerge": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.2.1.tgz",
+      "integrity": "sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA=="
+    },
     "default-require-extensions": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/default-require-extensions/-/default-require-extensions-1.0.0.tgz",
@@ -13643,6 +13648,11 @@
       "integrity": "sha512-vFwSUfQvqybiICwZY5+DAWIPLKsWO31Q91JSKl3UYv+K5c2QRPzn0qzec6QPu1Qc9eHYItiP3NdJqNVqetYAww==",
       "dev": true
     },
+    "shvl": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/shvl/-/shvl-1.3.1.tgz",
+      "integrity": "sha512-+rRPP46hloYUAEImJcqprUgXu+05Ikqr4h4V+w5i2zJy37nAqtkQKufs3+3S2fDq6JNRrHMIQhB/Vaex+jgAAw=="
+    },
     "sigmund": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/sigmund/-/sigmund-1.0.1.tgz",
@@ -15472,6 +15482,20 @@
       "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-1.1.0-alpha.5.tgz",
       "integrity": "sha512-wrAaJ9GZNbERFoTwrEmhRvfUCBY5dyx1FSK+Bcx9M9LuH8UTFGA7tcj7hAwl756KRGu3Xt56Z00X5RPzgK75ww=="
     },
+    "vuex": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.0.1.tgz",
+      "integrity": "sha512-wLoqz0B7DSZtgbWL1ShIBBCjv22GV5U+vcBFox658g6V0s4wZV9P4YjCNyoHSyIBpj1f29JBoNQIqD82cR4O3w=="
+    },
+    "vuex-persistedstate": {
+      "version": "2.5.4",
+      "resolved": "https://registry.npmjs.org/vuex-persistedstate/-/vuex-persistedstate-2.5.4.tgz",
+      "integrity": "sha512-XYJhKIwO+ZVlTaXyxKxnplrJ88Fnvk5aDw753bxzRw5/yMKLQ6lq9CDCBex2fwZaQcLibhtgJOxGCHjy9GLSlQ==",
+      "requires": {
+        "deepmerge": "^2.1.0",
+        "shvl": "^1.3.0"
+      }
+    },
     "w3c-hr-time": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.1.tgz",
diff --git a/package.json b/package.json
index 40b2056..907ea52 100644
--- a/package.json
+++ b/package.json
@@ -27,7 +27,9 @@
     "vue-quill-editor": "^3.0.6",
     "vue-resize": "^0.4.4",
     "vue-router": "^3.0.1",
-    "vuetify": "^1.1.0-alpha.5"
+    "vuetify": "^1.1.0-alpha.5",
+    "vuex": "^3.0.1",
+    "vuex-persistedstate": "^2.5.4"
   },
   "devDependencies": {
     "autoprefixer": "^7.1.2",
diff --git a/src/Services/http.js b/src/Services/http.js
new file mode 100644
index 0000000..cf9e8ce
--- /dev/null
+++ b/src/Services/http.js
@@ -0,0 +1,11 @@
+import axios from 'axios'
+import store from '@/store/store'
+
+export default () => {
+    return axios.create({
+        baseURL:'http://18.208.28.55:3000/v1',
+        headers: {
+            Authorization: `Bearer ${store.state.token}`
+          }
+    })
+}
diff --git a/src/api/menu.js b/src/api/menu.js
index 6e05838..ac89bd7 100644
--- a/src/api/menu.js
+++ b/src/api/menu.js
@@ -24,26 +24,26 @@ const Menu =  [
     title: 'User',
     // group: '',
     name: 'Dashboard',
-    icon: '',
+    icon: 'face',
   },
 
   {
     title: 'Health Care Provider',
     // group: 'apps',
     name: 'Provider',
-    icon: '',
+    icon: 'local_hospital',
   },
   {
     title: 'Notification',
     // group: 'apps',
     name: 'notification',
-    icon: '',
+    icon: 'add_alert',
   },
   {
     title: 'Forum Questions',
     // group: 'apps',
     name: 'questions',
-    icon: '',
+    icon: 'live_help',
   },
   // {
   //   title: 'Widgets',
diff --git a/src/components/AppDrawer.vue b/src/components/AppDrawer.vue
index 9060486..588e28f 100644
--- a/src/components/AppDrawer.vue
+++ b/src/components/AppDrawer.vue
@@ -11,7 +11,6 @@
     <v-toolbar color="grey lighten" >
       <img v-bind:src="computeLogo" height="36" alt="ana">
      <v-toolbar-title class="ml-0 pl-3">
-       <!-- <span class="hidden-sm-and-down">Vue Material</span>-->
       </v-toolbar-title>        
     </v-toolbar>
     <vue-perfect-scrollbar class="drawer-menu--scroll" :settings="scrollSettings">
@@ -135,5 +134,21 @@ export default {
   .drawer-menu--scroll
     height: calc(100vh - 48px)
     overflow: auto
-
+.v-list--dense .v-list__tile:not(.v-list__tile--avatar) {
+    height: 60px;
+    font-size:17px;
+}
+.v-list__tile__action {
+  min-width:36px;
+}
+.v-list__tile.primary--text {
+    color:black !important;
+    border-left: 4px solid black;
+    border-radius: 4px;
+}
+@media screen and (max-width: 420px) { 
+.v-list--dense .v-list__tile:not(.v-list__tile--avatar) {
+    font-size: 14px;
+}
+}
 </style>
diff --git a/src/components/AppToolbar.vue b/src/components/AppToolbar.vue
index 4b1ff60..be500d0 100644
--- a/src/components/AppToolbar.vue
+++ b/src/components/AppToolbar.vue
@@ -4,9 +4,9 @@
     fixed
     app
   >
-    <!-- <v-toolbar-title class="ml-0 pl-3">
-    <v-toolbar-side-icon @click.stop="handleDrawerToggle"></v-toolbar-side-icon>
-    </v-toolbar-title> -->
+    <v-toolbar-title class="ml-0 pl-3">
+    <v-toolbar-side-icon @click.stop="handleDrawerToggle" class="hide"></v-toolbar-side-icon>
+    </v-toolbar-title>
       <!-- <v-text-field
         flat
         prepend-icon="search"
@@ -22,7 +22,6 @@
      <v-btn icon large flat slot="activator">
           <v-avatar size="40px">
            <img src="/static/icon/user.png"/>
-          
           </v-avatar>
       </v-btn>
         <v-list class="pa-0">
@@ -39,22 +38,22 @@
   </v-toolbar>
 </template>
 <script>
-import NotificationList from '@/components/widgets/list/NotificationList';
-import Util from '@/util';
+import NotificationList from "@/components/widgets/list/NotificationList";
+import Util from "@/util";
 export default {
-  search: '',
-  name: 'app-toolbar',
+  search: "",
+  name: "app-toolbar",
   components: {
     NotificationList
   },
   data: () => ({
-    search: '',
+    search: "",
     items: [
       {
         // icon: 'account_circle',
-        href: '/changepassword',
-        title: 'Change Password',
-        click: (e) => {
+        href: "/changepassword",
+        title: "Change Password",
+        click: e => {
           console.log(e);
         }
       },
@@ -68,26 +67,43 @@ export default {
       // },
       {
         // icon: 'fullscreen_exit',
-        href: '#',
-        title: 'Logout',
-        click: (e) => {
-          window.getApp.$emit('APP_LOGOUT');
+        href: "#",
+        title: "Logout",
+        click: e => {
+          window.getApp.$emit("APP_LOGOUT");
+       //   this.$store.dispatch("setToken", null);
         }
       }
-    ],
+    ]
   }),
   computed: {
-    toolbarColor () {
+    toolbarColor() {
       return this.$vuetify.options.extra.mainNav;
     }
   },
   methods: {
-    handleDrawerToggle () {
-      window.getApp.$emit('APP_DRAWER_TOGGLED');
+    handleDrawerToggle() {
+      window.getApp.$emit("APP_DRAWER_TOGGLED");
     },
-    handleFullScreen () {
+    handleFullScreen() {
       Util.toggleFullScreen();
     }
   }
 };
 </script>
+<style>
+.v-icon{
+  font-size:30px;
+}
+@media screen and (min-width: 1270px){
+.hide{
+  display: none;
+}
+}
+@media screen and (max-width: 420px) { 
+.v-list__tile {
+  font-size:14px;
+  padding: 0 10px;
+}
+}
+</style>
diff --git a/src/components/ThemeSettings.vue b/src/components/ThemeSettings.vue
index ddfadd5..28f2aaf 100644
--- a/src/components/ThemeSettings.vue
+++ b/src/components/ThemeSettings.vue
@@ -1,4 +1,4 @@
-<template>
+<!--<template>
 <div id="themeSetting">
   <v-toolbar color="blue" dark>
     <v-toolbar-title>
@@ -49,157 +49,157 @@
 </template>
 
 <script>
-import colors from 'vuetify/es5/util/colors';
-export default {
-  data () {
-    return {
-      themeColor: 'indigo',
-      sideBarOption: 'light',
-      colors: colors
-    };
-  },
-  computed: {
-    themeColorOptions () {
-      return [
-        {
-          key: 'blue',
-          value: {
-            sideNav: 'blue',
-            mainNav: 'blue',
-            sideManu: 'white'
-          }
-        },
-        // {
-        //   key: 'lightBlue',
-        //   value: {
-        //     sideNav: 'blue',
-        //     mainNav: 'white',
-        //     sideManu: 'blue lighten-1'
-        //   }
-        // },
-        {
-          key: 'teal',
-          value: {
-            sideNav: 'teal',
-            mainNav: 'teal',
-            sideManu: 'white'
-          }
-        },
-        {
-          key: 'red',
-          value: {
-            sideNav: 'red',
-            mainNav: 'red',
-            sideManu: 'white'
-          }
-        },
-        {
-          key: 'orange',
-          value: {
-            sideNav: 'orange',
-            mainNav: 'orange',
-            sideManu: 'white'
-          }
-        },
-        {
-          key: 'purple',
-          value: {
-            sideNav: 'purple',
-            mainNav: 'purple',
-            sideManu: 'white'
-          }
-        },
-        {
-          key: 'indigo',
-          value: {
-            sideNav: 'indigo',
-            mainNav: 'indigo',
-            sideManu: 'white'
-          }
-        },
-        {
-          key: 'cyan',
-          value: {
-            sideNav: 'cyan',
-            mainNav: 'cyan',
-            sideManu: 'white'
-          }
-        },
-        {
-          key: 'pink',
-          value: {
-            sideNav: 'pink',
-            mainNav: 'pink',
-            sideManu: 'white'
-          }
-        },
-        {
-          key: 'green',
-          value: {
-            sideNav: 'green',
-            mainNav: 'green',
-            sideManu: 'white'
-          }
-        }
-      ];
-    }
-  },  
-  watch: {
-    themeColor: {
-      handler (val) {
-        this.$vuetify.theme.primary = this.colors[val].base;
+// import colors from 'vuetify/es5/util/colors';
+// export default {
+//   data () {
+//     return {
+//       themeColor: 'indigo',
+//       sideBarOption: 'light',
+//       colors: colors
+//     };
+//   },
+//   computed: {
+//     themeColorOptions () {
+//       return [
+//         {
+//           key: 'blue',
+//           value: {
+//             sideNav: 'blue',
+//             mainNav: 'blue',
+//             sideManu: 'white'
+//           }
+//         },
+//         // {
+//         //   key: 'lightBlue',
+//         //   value: {
+//         //     sideNav: 'blue',
+//         //     mainNav: 'white',
+//         //     sideManu: 'blue lighten-1'
+//         //   }
+//         // },
+//         {
+//           key: 'teal',
+//           value: {
+//             sideNav: 'teal',
+//             mainNav: 'teal',
+//             sideManu: 'white'
+//           }
+//         },
+//         {
+//           key: 'red',
+//           value: {
+//             sideNav: 'red',
+//             mainNav: 'red',
+//             sideManu: 'white'
+//           }
+//         },
+//         {
+//           key: 'orange',
+//           value: {
+//             sideNav: 'orange',
+//             mainNav: 'orange',
+//             sideManu: 'white'
+//           }
+//         },
+//         {
+//           key: 'purple',
+//           value: {
+//             sideNav: 'purple',
+//             mainNav: 'purple',
+//             sideManu: 'white'
+//           }
+//         },
+//         {
+//           key: 'indigo',
+//           value: {
+//             sideNav: 'indigo',
+//             mainNav: 'indigo',
+//             sideManu: 'white'
+//           }
+//         },
+//         {
+//           key: 'cyan',
+//           value: {
+//             sideNav: 'cyan',
+//             mainNav: 'cyan',
+//             sideManu: 'white'
+//           }
+//         },
+//         {
+//           key: 'pink',
+//           value: {
+//             sideNav: 'pink',
+//             mainNav: 'pink',
+//             sideManu: 'white'
+//           }
+//         },
+//         {
+//           key: 'green',
+//           value: {
+//             sideNav: 'green',
+//             mainNav: 'green',
+//             sideManu: 'white'
+//           }
+//         }
+//       ];
+//     }
+//   },  
+//   watch: {
+//     themeColor: {
+//       handler (val) {
+//         this.$vuetify.theme.primary = this.colors[val].base;
         
-      },
-      immediate: true
-    },
-    sideBarOption: {
-      handler (val) {
-        this.$vuetify.dark = (val === 'dark');
-      },
-      immediate: true      
-    }
-  },  
+//       },
+//       immediate: true
+//     },
+//     sideBarOption: {
+//       handler (val) {
+//         this.$vuetify.dark = (val === 'dark');
+//       },
+//       immediate: true      
+//     }
+//   },  
 
-};
-</script>
-<style lang="stylus" scoped>
-.color-option
-  &--label
-    position: relative
-    display: block
-    cursor: pointer  
-    & input[type="radio"] 
-      display:none
-      &+span 
-        position: relative
-        &>.overlay
-          display: none;
-          position: absolute
-          top: 0;
-          bottom: 0;
-          right: 0;
-          left: 0;
-          width: 100%;
-          height: 100%;
-          background-color: rgba(0,0,0,.3);
-          text-align: center;
-          line-height: 30px;
-          color: #fff;                
-      &:checked+span>.overlay
-        display:block  
-    & .bg        
-      background-color: #f1f1f1
-  &--item
-    overflow: hidden;
-    display: block;
-    box-shadow: 0 0 2px rgba(0,0,0,.1);
-    margin-bottom: 15px;      
-    &--header
-      height: 10px
-    &>span 
-      display: block;
-      float: left;
-      width: 50%;
-      height: 20px;          
-</style>
+// };
+// </script>
+// <style lang="stylus" scoped>
+// .color-option
+//   &--label
+//     position: relative
+//     display: block
+//     cursor: pointer  
+//     & input[type="radio"] 
+//       display:none
+//       &+span 
+//         position: relative
+//         &>.overlay
+//           display: none;
+//           position: absolute
+//           top: 0;
+//           bottom: 0;
+//           right: 0;
+//           left: 0;
+//           width: 100%;
+//           height: 100%;
+//           background-color: rgba(0,0,0,.3);
+//           text-align: center;
+//           line-height: 30px;
+//           color: #fff;                
+//       &:checked+span>.overlay
+//         display:block  
+//     & .bg        
+//       background-color: #f1f1f1
+//   &--item
+//     overflow: hidden;
+//     display: block;
+//     box-shadow: 0 0 2px rgba(0,0,0,.1);
+//     margin-bottom: 15px;      
+//     &--header
+//       height: 10px
+//     &>span 
+//       display: block;
+//       float: left;
+//       width: 50%;
+//       height: 20px;          
+// </style>
 
diff --git a/src/event.js b/src/event.js
index 83a0224..58cba0a 100644
--- a/src/event.js
+++ b/src/event.js
@@ -13,6 +13,7 @@ export default [
         color: 'green',
         text: 'Logout successfully.'
       };
+      this.$store.dispatch('setToken', null)
       this.$router.replace({ path: '/' });
     }
   },
diff --git a/src/main.js b/src/main.js
index 88b6d54..f711fd8 100644
--- a/src/main.js
+++ b/src/main.js
@@ -10,8 +10,13 @@ import VeeValidate from 'vee-validate';
 import colors from 'vuetify/es5/util/colors';
 import Truncate from 'lodash.truncate';
 Vue.config.productionTip = false;
+// import axios from 'axios';
+// import VueAxios from 'vue-axios';
+import store from '@/store/store'
+
 // Helpers
 // Global filters
+// Vue.use(VueAxios, axios);
 Vue.filter('truncate', Truncate);
 Vue.use(VeeValidate, { fieldsBagName: 'formFields' });
 Vue.use(Vuetify, {
@@ -42,6 +47,7 @@ Vue.use(Vuetify, {
 new Vue({
   el: '#app',
   router,
+  store,
   components: { App },
   template: '<App/>'
 });
diff --git a/src/pages/Dashboard.vue b/src/pages/Dashboard.vue
index eb05b44..ea54b49 100644
--- a/src/pages/Dashboard.vue
+++ b/src/pages/Dashboard.vue
@@ -1,297 +1,416 @@
 <template>
-<v-tabs
- grow
- slider-color="black"
->
-
-  <v-tab ripple @click="activeTab('existing')" v-bind:class="{ active: isActive }" id="tab">
-    Existing user
-  </v-tab>
-  
-  <v-tab ripple @click="activeTab('new')" v-bind:class="{ active: newActive }" id="tab1">
-    Add New Users
-  </v-tab>
-
-  <v-tab-item>
-     <v-dialog v-model="dialog" max-width="500px">
-       <v-toolbar color="white">
-       <v-spacer></v-spacer>
-       <v-toolbar-title>Edit Profile</v-toolbar-title>
-       <v-spacer></v-spacer>
-       </v-toolbar>
-       <v-card>
-       <v-flex align-center justify-center layout text-xs-center>
-       <v-avatar size="50px" style="position:absolute; top:10px; "> 
-       <img src="/static/icon/user.png"/></v-avatar> 
-     </v-flex>  
+<v-app id="pages-dasboard">
+  <v-tabs grow slider-color="black">
+    <v-tab
+      ripple
+      @click="activeTab('existing')"
+      v-bind:class="{ active: isActive }"
+      id="tab"
+      class="subheading"
+    >Existing user</v-tab>
+    <v-tab
+      ripple
+      @click="activeTab('new')"
+      v-bind:class="{ active: newActive }"
+      id="tab1"
+      class="subheading"
+    >Add New Users</v-tab>
+   <!-- EDIT USERS Patient Dtails-->
+    <v-tab-item>
+      <v-snackbar
+        :timeout="timeout"
+        :top="y === 'top'"
+        :right="x === 'right'"
+        :vertical="mode === 'vertical'"
+        v-model="snackbar"
+        color="success"
+      >{{ text }}</v-snackbar>
+      <v-dialog v-model="dialog" max-width="500px">
+        <v-toolbar color="white">
+          <v-spacer></v-spacer>
+          <v-toolbar-title>Edit Profile</v-toolbar-title>
+          <v-spacer></v-spacer>
+        </v-toolbar>
+        <v-card>
+          <v-flex align-center justify-center layout text-xs-center>
+            <v-avatar size="50px" style="position:absolute; top:10px; ">
+              <img src="/static/icon/user.png">
+            </v-avatar>
+          </v-flex>
           <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; top:15px;">
-      <v-flex xs4 class="pt-4 subheading">
-      <label>First Name: </label>
-      </v-flex>
-      <v-flex xs8>
-      <v-text-field
-      v-model="editedItem.Name"
-      v-validate="'required'"
-      :rules="nameRules"
-      data-vv-name="Name"
-      required
-      ></v-text-field></v-flex></v-layout>
-      <v-layout>
-      <v-flex xs4 class="pt-4 subheading">
-      <label>Last Name: </label>
-      </v-flex>
-      <v-flex xs8>
-      <v-text-field
-      v-model="editedItem.LName"
-      v-validate="'required'"
-      :rules="lnameRules"
-      data-vv-name="Name"
-      required
-      ></v-text-field></v-flex></v-layout>
-     
-     <v-layout>
-      <v-flex xs4 class="pt-4 subheading">
-      <label>Email ID: </label>
-      </v-flex>
-      <v-flex xs8>
-      <v-text-field
-      v-model="editedItem.Email"
-      v-validate="'required|email'"
-      :rules="emailRules"
-      data-vv-name="E-mail"
-      required
-      ></v-text-field></v-flex></v-layout>
-       <v-layout>
-      <v-flex xs4 class="pt-4 subheading">
-      <label>Date of Birth: </label>
-      </v-flex>
-      <v-flex xs8>
-      <v-text-field
-      v-model="editedItem.DOB"
-     :rules="[rules.required, rules.min]"
-      ></v-text-field></v-flex></v-layout>
-    <v-card-actions>
+            <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; top:15px;">
+                      <v-flex xs4      date: new Date().toISOString().substr(0, 10), class="pt-4 subheading">
+                        <label>First Name:</label>
+                      </v-flex>
+                      <v-flex xs8>
+                        <v-text-field
+                          v-model="editedItem.name"
+                          v-validate="'required'"
+                          :rules="nameRules"
+                          data-vv-name="Name"
+                          required
+                        ></v-text-field>
+                      </v-flex>
+                    </v-layout>
+                    <v-layout>
+                      <v-flex xs4 class="pt-4 subheading">
+                        <label>Last Name:</label>
+                      </v-flex>
+                      <v-flex xs8>
+                        <v-text-field
+                          v-model="editedItem.lastname"
+                          v-validate="'required'"
+                          :rules="lastnameRules"
+                          data-vv-name="Name"
+                          required
+                        ></v-text-field>
+                      </v-flex>
+                    </v-layout>
 
-      <v-btn round dark @click.native="close">Cancel</v-btn>
-      <v-spacer></v-spacer>
-      <v-btn round dark @click.native="save">Save</v-btn>
-     
-      </v-card-actions>
-      </v-form>
-      </v-flex>
-</v-layout>
-</v-container>
-</v-card-text>
-</v-card>
-</v-dialog>
-
-<v-dialog v-model="dialog1" max-width="500px">
-       <v-toolbar color="white">
-       <v-spacer></v-spacer>
-       <v-toolbar-title>Profile</v-toolbar-title>
-       <v-spacer></v-spacer>
-       <v-icon @click="close1">close</v-icon>
-       </v-toolbar>
-       
-
-      <v-card>
-      <v-flex align-center justify-center layout text-xs-center>
-      <v-avatar size="50px" style="position:absolute; top:20px;"> 
-      <img src="/static/icon/user.png"/> </v-avatar> 
-     </v-flex>  
- <v-card-text>
-    <v-container grid-list-md>
-      <v-layout wrap justify-center>
-        <v-flex offset-xs3 id="flex">
-          
-          <br><br>
-          <table style="position:absolute; top:110px;">
-            <th>
-              <tr><h5><b>First Name:</b></h5></tr><br>
-              <tr><h5><b>Last Name:</b></h5></tr><br>
-              <tr><h5><b>Email:</b></h5></tr><br>
-              <tr><h5><b>Date Of Birth:</b></h5></tr>
-            </th>
-            <th>
-             <tr><td><h5><b>{{ editedItem.Name }}</b></h5></td></tr><br>
-            <tr> <td><h5><b>{{ editedItem.LName }}</b></h5></td></tr><br>
-            <tr><td><h5><b>{{ editedItem.Email }}</b></h5></td></tr><br>
-            <tr><td><h5><b>{{ editedItem.DOB }}</b></h5></td></tr>
-            </th>
-            
-        
-          </table>
-        </v-flex>
-      </v-layout>
-    </v-container>
-    </v-card-text>
-    </v-card>
-</v-dialog>
+                    <v-layout>
+                      <v-flex xs4 class="pt-4 subheading">
+                        <label>Email ID:</label>
+                      </v-flex>
+                      <v-flex xs8>
+                        <v-text-field
+                          v-model="editedItem.email"
+                          v-validate="'required|email'"
+                          :rules="emailRules"
+                          data-vv-name="E-mail"
+                          required
+                        ></v-text-field>
+                      </v-flex>
+                    </v-layout>
+                     <v-layout>
+                       <v-flex xs4 class="pt-4 subheading">
+                        <label>Date of Birth:</label>
+                      </v-flex>
+                      <v-flex xs8>
+                        <v-menu
+                        :close-on-content-click="false"
+                        v-model="modaledit"
+                        :nudge-right="20"
+                        lazy
+                        transition="scale-transition"
+                        persistent
+                        full-width
+                        max-width="290px"
+                      >
+                        <v-text-field
+                          slot="activator"
+                          v-model="editedItem.dob.slice(0,10)"
+                          name="dob"
+                        ></v-text-field>
+                        <v-date-picker v-model="editedItem.dob" @input="modaledit = false"></v-date-picker>
+                      </v-menu>
+                      </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-dialog>
 
-<v-dialog v-model="dialog2" width="700px">
-  <v-card>
-     <div id="dialog">
-     <h4><b> Report </b> </h4>
-     <h5 id="name"><b>Patient Name:</b> {{ editedItem.Name+' '+editedItem.LName }}</h5>
-     <h5 id="m">Select Month:</h5>
-     <v-btn color="grey darken-3" id="G" v-on:click="component='report-generate'">Generate</v-btn>
-   <v-spacer></v-spacer>
-       <v-icon id="icon" @click="close2">close</v-icon>
-      
-       <span id="bt">
-        
-         <v-btn color="grey darken-2" v-on:click="component='one-month' , activebtn('existing')" v-bind:class="{ activebtn: isActivebtn }" flat>1 month</v-btn>
-         <v-btn color="grey darken-2" v-on:click="component='three-month' , activebtn('new')" v-bind:class="{ activebtn: Activebtn1 }" flat>3 Month</v-btn>
-         <v-btn color="grey darken-2" v-on:click="component='six-month' , activebtn('new1')" v-bind:class="{ activebtn: Activebtn2 }" flat>6 Month</v-btn>
-         <v-btn color="grey darken-2" v-on:click="component='nine-month' , activebtn('new2')" v-bind:class="{ activebtn: Activebtn3 }" flat>9 Month</v-btn>
-         <img id="e" @click="mail" src="/static/icon/email1.png"/>
-         <img id="d" @click="download" src="/static/icon/download1.png"/>
-       </span>
-         <component v-bind:is="component"></component>
+      <!-- PROFILE VIEW pateints Details-->
+      <v-dialog v-model="dialog1" max-width="600px">
+        <v-toolbar color="white">
+          <v-spacer></v-spacer>
+          <v-toolbar-title>Profile</v-toolbar-title>
+          <v-spacer></v-spacer>
+          <v-icon @click="close1">close</v-icon>
+        </v-toolbar>
+        <v-card>
+          <v-flex align-center justify-center layout text-xs-center>
+            <v-avatar size="50px" style="position:absolute; top:20px;">
+              <img src="/static/icon/user.png">
+            </v-avatar>
+          </v-flex>
+          <v-card-text>
+            <v-container grid-list-md>
+              <v-layout wrap>
+                <v-flex><br><br>
+                   <v-layout>
+                     <v-flex xs5 sm6>
+                     <h5 class="right">First Name:</h5>
+                    </v-flex>
+                    <v-flex sm6 xs8>
+                    <h5>{{ editedItem.name }}</h5>
+                  </v-flex>
+                 </v-layout>
+                  <v-layout>
+                     <v-flex xs5 sm6>
+                     <h5 class="right my-3">Last Name:</h5>
+                    </v-flex>
+                    <v-flex sm5 xs8>
+                     <h5 class="my-3">{{ editedItem.name }}</h5>
+                  </v-flex>
+                 </v-layout>
+                  <v-layout>
+                     <v-flex xs5 sm6>
+                     <h5 class="right">Email:</h5>
+                    </v-flex>
+                    <v-flex  sm6 xs8>
+                     <h5>{{ editedItem.email }}</h5>
+                  </v-flex>
+                 </v-layout>
+                  <v-layout>
+                     <v-flex xs6 sm6 >
+                     <h5 class="right my-3">Date Of Birth:</h5>
+                    </v-flex>
+                    <v-flex sm6 xs8>
+                    <h5 class="my-3">{{ editedItem.dob }}</h5>
+                  </v-flex>
+                 </v-layout>
+                </v-flex>
+              </v-layout>
+            </v-container>
+          </v-card-text>
+        </v-card>
+      </v-dialog>
 
-      
-       </div>
-    </v-card>
-</v-dialog>
+      <v-dialog v-model="dialog2" width="700px">
+        <v-card>
+          <div id="dialog">
+            <h4>
+              <b>Report</b>
+            </h4>
+            <h5 id="name">
+              <b>Patient Name:</b>
+              {{ editedItem.name+' '+editedItem.lastName }}
+            </h5>
+            <h5 id="m">Select Month:</h5>
+            <v-btn color="grey darken-3" id="G" v-on:click="component='report-generate'">Generate</v-btn>
+            <v-spacer></v-spacer>
+            <v-icon id="icon" @click="close2">close</v-icon>
 
-      <v-data-table
-        :headers="headers"
-        :items="desserts"
-        :pagination.sync="pagination"
+            <span id="bt">
+              <v-btn
+                color="grey darken-2"
+                v-on:click="component='one-month' , activebtn('existing')"
+                v-bind:class="{ activebtn: isActivebtn }"
+                flat
+              >1 month</v-btn>
+              <v-btn
+                color="grey darken-2"
+                v-on:click="component='three-month' , activebtn('new')"
+                v-bind:class="{ activebtn: Activebtn1 }"
+                flat
+              >3 Month</v-btn>
+              <v-btn
+                color="grey darken-2"
+                v-on:click="component='six-month' , activebtn('new1')"
+                v-bind:class="{ activebtn: Activebtn2 }"
+                flat
+              >6 Month</v-btn>
+              <v-btn
+                color="grey darken-2"
+                v-on:click="component='nine-month' , activebtn('new2')"
+                v-bind:class="{ activebtn: Activebtn3 }"
+                flat
+              >9 Month</v-btn>
+              <img id="e" @click="mail" src="/static/icon/email1.png">
+              <img id="d" @click="download" src="/static/icon/download1.png">
+            </span>
+            <component v-bind:is="component"></component>
+          </div>
+        </v-card>
+      </v-dialog>
+      <v-snackbar
+        :timeout="timeout"
+        :top="y === 'top'"
+        :right="x === 'right'"
+        :vertical="mode === 'vertical'"
+        v-model="snackbar"
+        color="success"
+      >{{ text }}</v-snackbar>
+      <!-- EXISTING-USERS PatientList-->
+      <v-data-table 
+      :headers="headers" 
+      :items="desserts" 
+      :pagination.sync="pagination"
       >
         <template slot="items" slot-scope="props">
-          <td id="td" class="text-xs-center">{{ props.item.No }}</td>
-          <td id="td" class="text-xs-center">{{ props.item.Name+' '+props.item.LName }}</td>
-          <td id="td" class="text-xs-center">{{ props.item.Email }}</td>
-          
-      
+          <td id="td" class="text-xs-center">{{ props.index}}</td>
+          <td id="td" class="text-xs-center">{{ props.item.name}}</td>
+          <td id="td" class="text-xs-center">{{ props.item.email }}</td>
+
           <td class="text-xs-center">
-          
-           <span>
-          <img style="cursor:pointer; height:20px; " class="mr-5" @click="report(props.item)" src="/static/icon/List1.png"/>
-          <img style="cursor:pointer; width:25px; height:18px; " class="mr-5" @click="profile(props.item)" src="/static/icon/eye1.png"/>
-          <img style="cursor:pointer; width:20px; height:18px; " class="mr-5" @click="editItem(props.item)" src="/static/icon/edit1.png"/>
-          <img style="cursor:pointer; height:20px; " class="mr-2" @click="deleteItem(props.item)" src="/static/icon/delete1.png"/>
-          </span>
+            <span>
+              <img
+                style="cursor:pointer; height:20px; "
+                class="mr-5"
+                @click="report(props.item)"
+                src="/static/icon/List1.png"
+              >
+              <img
+                style="cursor:pointer; width:25px; height:18px; "
+                class="mr-5"
+                @click="profile(props.item)"
+                src="/static/icon/eye1.png"
+              >
+              <img
+                style="cursor:pointer; width:20px; height:18px; "
+                class="mr-5"
+                @click="editItem(props.item)"
+                src="/static/icon/edit1.png"
+              >
+              <img
+                style="cursor:pointer; height:20px; "
+                class="mr-5"
+                @click="deleteItem(props.item)"
+                src="/static/icon/delete1.png"
+              >
+            </span>
           </td>
-          
         </template>
-        
       </v-data-table>
-  </v-tab-item>
-  <v-tab-item>
-       <v-flex xs12 sm6 offset-sm3>
- 
- 
-<v-card flat>
-  <v-container fluid fill-height>
-    <v-layout align-center>
-      <v-flex xs12 sm8 offset-sm2> 
-       <v-flex offset-sm5>
-        <v-avatar size="55px"> 
-        <img src="/static/icon/user.png"/> </v-avatar> 
-      </v-flex>
-<v-form ref="form" v-model="valid" lazy-validation>
-    <v-layout>
-      <v-flex xs4 class="pt-4 subheading">
-      <label>First Name: </label>
-      </v-flex>
-      <v-flex xs8>
-      <v-text-field
-        v-model="AddUsercredentials.firstName"
-        :rules="nameRules"
-        required
-      ></v-text-field>
-      </v-flex>
-    </v-layout>
-    <v-layout>
-    <v-flex xs4 class="pt-4 subheading">
-    <label>Last Name: </label>
-    </v-flex>
-    <v-flex xs8>
-    <v-text-field
-      :rules="lnameRules"
-      v-model="AddUsercredentials.lastName"
-      required
-      ></v-text-field>
-      </v-flex>
-      </v-layout>
-      <v-layout>
-    <v-flex xs4 class="pt-4 subheading">
-    <label>Email ID: </label>
-    </v-flex>
-    <v-flex xs8>
-    <v-text-field
-      :rules="emailRules"
-      v-model="AddUsercredentials.email"
-      required
-      ></v-text-field>
-      </v-flex>
-      </v-layout>
-    
-     <v-layout>
-    <v-flex xs4 class="pt-4 subheading">
-    <label>Date of Birth: </label>
-    </v-flex>
-    <v-flex xs8>
-    <v-text-field
-      :rules="[rules.required, rules.min]"
-      v-model="AddUsercredentials.dob"
-      required
-      ></v-text-field>
-      </v-flex>
-      </v-layout>
- <v-card-actions>
-    <v-btn @click="clear" round dark>clear</v-btn>
-        <v-spacer></v-spacer>
-    <v-btn @click="submit" round dark> Add </v-btn>
-
-</v-card-actions>
-  </v-form>
-</v-flex>
-</v-layout>
-</v-container>
-    </v-card>
-       </v-flex>
-  </v-tab-item> 
-</v-tabs>
+    </v-tab-item>
+    <!-- ADD USER PATIENT -->
+    <v-tab-item>
+      <v-snackbar
+        :timeout="timeout"
+        :top="y === 'top'"
+        :right="x === 'right'"
+        :vertical="mode === 'vertical'"
+        v-model="snackbar"
+        color="success"
+      >{{ text }}</v-snackbar>
+      <v-container>
+      <v-flex xs12 sm8 offset-sm2 class="top">
+        <v-card flat>
+          <v-container fluid fill-height>
+            <v-layout align-center>
+              <v-flex xs12>
+                <v-flex offset-xs5>
+                  <v-avatar size="55px">
+                    <img src="/static/icon/user.png">
+                  </v-avatar>
+                </v-flex>
+                <v-form ref="form" v-model="valid" lazy-validation>
+                  <v-layout>
+                    <v-flex xs4 class="pt-4 subheading">
+                      <label class="right">First Name:</label>
+                    </v-flex>
+                    <v-flex xs6 class="ml-3">
+                      <v-text-field
+                        v-model="editedItem.name"
+                        name="name"
+                        :rules="nameRules"
+                        required
+                      ></v-text-field>
+                    </v-flex>
+                  </v-layout>
+                  <v-layout>
+                    <v-flex xs4 class="pt-4 subheading">
+                      <label class="right">Last Name:</label>
+                    </v-flex>
+                    <v-flex xs6  class="ml-3">
+                      <v-text-field
+                        :rules="lastnameRules"
+                        v-model="editedItem.lastname"
+                        name="lastname"
+                        required
+                      ></v-text-field>
+                    </v-flex>
+                  </v-layout>
+                  <v-layout>
+                    <v-flex xs4 class="pt-4 subheading">
+                      <label class="right">Email ID:</label>
+                    </v-flex>
+                    <v-flex xs6 class="ml-3">
+                      <v-text-field
+                        :rules="emailRules"
+                        v-model="editedItem.email"
+                        name="email"
+                        required
+                      ></v-text-field>
+                    </v-flex>
+                  </v-layout>
 
- 
+                  <v-layout>
+                    <v-flex xs4 class="pt-4 subheading">
+                      <label class="right">Date of Birth:</label>
+                    </v-flex>
+                    <v-flex xs6 class="ml-3">
+                      <v-menu
+                        :close-on-content-click="false"
+                        v-model="modal"
+                        :nudge-right="20"
+                        lazy
+                        transition="scale-transition"
+                        persistent
+                        full-width
+                        max-width="290px"
+                      >
+                        <v-text-field
+                          slot="activator"
+                          v-model="editedItem.dob"
+                          name="dob"
+                        ></v-text-field>
+                        <v-date-picker v-model="editedItem.dob" @input="modal = false"></v-date-picker>
+                      </v-menu>
+                    </v-flex>
+                  </v-layout>
+                  <v-layout>
+                    <v-flex xs12 sm9 offset-sm2>
+                  <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-flex>
+                  </v-layout>
+                </v-form>
+              </v-flex>
+            </v-layout>
+          </v-container>
+        </v-card>
+      </v-flex>
+     </v-container>
+   </v-tab-item>
+  </v-tabs>
+</v-app>
 </template>
 
 <script>
-import onemonth from '@/components/report/onemonth.vue';
-import threemonth from '@/components/report/threemonth.vue'; 
-import sixmonth from '@/components/report/sixmonth.vue';
-import ninemonth from '@/components/report/ninemonth.vue';
-import generatereport from '@/components/report/generatereport.vue';
-import axios from 'axios';
+import onemonth from "@/components/report/onemonth.vue";
+import threemonth from "@/components/report/threemonth.vue";
+import sixmonth from "@/components/report/sixmonth.vue";
+import ninemonth from "@/components/report/ninemonth.vue";
+import generatereport from "@/components/report/generatereport.vue";
+import http from "@/Services/http.js";
+
 export default {
   components: {
-    'one-month': onemonth,
-    'three-month': threemonth,
-    'six-month': sixmonth,
-    'nine-month': ninemonth,
-    'report-generate': generatereport,
+    "one-month": onemonth,
+    "three-month": threemonth,
+    "six-month": sixmonth,
+    "nine-month": ninemonth,
+    "report-generate": generatereport
   },
   data: () => ({
-    component: 'report-generate',
-    No: '',
-    Name: '',
-    LName: '',
-    Email: '',
-    DOB: '',
-    search: '',
-    firstName: '',
-    lastName: '',
-    email: '',
-    dob: '',
+    component: "report-generate",
+    snackbar: false,
+    y: "top",
+    x: "right",
+    mode: "",
+    timeout: 3000,
+    text: "",
+    loading: false,
+    search: "",
+    modal: false,
+    modaledit:false,
     dialog: false,
     dialog1: false,
     dialog2: false,
@@ -307,65 +426,53 @@ export default {
     loading2: false,
     loading3: false,
     loading4: false,
-
+    details: [],
     AddUsercredentials: {},
     pagination: {
-      rowsPerPage: 10
+      rowsPerPage: 15
     },
     rules: {
-      required: value => !!value || 'Date of Birth is Required.',
+      required: value => !!value || "Date of Birth is Required.",
       min: v =>
         (/^(0?[1-9]|[12][0-9]|3[01])[\/\-](0?[1-9]|1[012])[\/\-]\d{4}$/.test(
           v
         ) &&
           v.length > 0) ||
-        'Please enter a date in the format dd/mm/yyyy'
+        "Please enter a date in the format dd/mm/yyyy"
     },
-    nameRules: [v => !!v || ' First Name is required'],
+    nameRules: [v => !!v || " First Name is required"],
     emailRules: [
-      v => !!v || 'E-mail is required',
-      v => /.+@.+/.test(v) || 'E-mail must be valid'
+      v => !!v || "E-mail is required",
+      v => /.+@.+/.test(v) || "E-mail must be valid"
     ],
-    lnameRules: [v => !!v || ' Last Name is required'],
+    lastnameRules: [v => !!v || " Last Name is required"],
     headers: [
       {
-        text: 'No',
-        align: 'center',
+        text: "No",
+        align: "center",
         sortable: false,
-        value: 'No'
-      },
-      { text: 'Name', value: 'Name', sortable: false, align: 'center' },
-      { text: 'Email', value: 'Email', sortable: false, align: 'center' },
-      { text: '', value: '', sortable: false, align: 'center' }
-    ],
-    desserts: [
-      {
-        No: 1,
-        Name: 'Amit',
-        LName: 'goyal',
-        Email: 'jsi@gmail.com',
-        DOB: '22/09/1996'
+        value: "No"
       },
-      {
-        No: 2,
-        Name: 'Sumit',
-        LName: 'kumar',
-        Email: 'aasi@gmail.com',
-        DOB: '16/09/1997'
-      }
+      { text: "Name", value: "name", sortable: false, align: "center" },
+      { text: "Email", value: "email", sortable: false, align: "center" },
+      { text: "", value: "", sortable: false, align: "center" }
     ],
+    desserts: [],
     editedIndex: -1,
     editedItem: {
-      No: '',
-      Name: '',
-      LName: '',
-      Email: ''
+      No: "",
+      name: "",
+      lastName: "",
+      email: "",
+      dob: '',
+      country: "India"
     },
     defaultItem: {
-      No: '',
-      Name: '',
-      LName: '',
-      Email: ''
+      No: "",
+      name: "",
+      lastname: "",
+      email: "",
+      dob: ""
     }
   }),
   // computed: {
@@ -377,39 +484,54 @@ export default {
   //   }
   // },
   methods: {
-    getPatientList(){
-      var token = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjViZWQyYTRkMDRlZGE3ZTBiNzcwYjg5YiIsImVtYWlsIjoiYWRtaW5AZ21haWwuY29tIiwiaWF0IjoxNTQyMzQzNzg3LCJleHAiOjE1NDIzNDM5MDd9.diDjMkhRXvpdpXxibfsE9EmIb5G-39Bcy3qdzA0rREg"
-       axios.get('http://18.208.28.55:3000/v1/patientList',{headers: {Authorization: 'Bearer '+token}})
+    getPatientList() {
+      var token = this.$store.state.token;
+      http()
+        .get("/patientList", { 
+          headers: { Authorization: "Bearer " + token } 
+         })
         .then(response => {
-          console.log("response=====>",response.data);
-       }).catch(err => {
-           console.log("err====>",err);
-       })
+          this.desserts = response.data.data.existingUser;
+        })
+        .catch(err => {
+          console.log("err====>", err);
+        });
     },
-    editItem (item) {
+    editItem(item) {
       this.editedIndex = this.desserts.indexOf(item);
       this.editedItem = Object.assign({}, item);
       this.dialog = true;
     },
-    profile (item) {
+    profile(item) {
       this.editedIndex = this.desserts.indexOf(item);
       this.editedItem = Object.assign({}, item);
       this.dialog1 = true;
     },
-    report (item) {
+    report(item) {
       this.editedIndex = this.desserts.indexOf(item);
       this.editedItem = Object.assign({}, item);
       this.dialog2 = true;
     },
 
-    deleteItem (item) {
-      const index = this.desserts.indexOf(item);
-      confirm('Are you sure you want to delete this item?') &&
-        this.desserts.splice(index, 1);
+    deleteItem(item) {
+      let addUsers = {
+        userId: item.userId
+      };
+      http()
+        .post("/deletePatient", addUsers)
+        .then(response => {
+          if ((this.snackbar = true)) {
+            this.text = "Successfully delete Existing User";
+        }
+          this.getPatientList();
+        })
+        .catch(error => {
+          console.log(error);
+        });
     },
-    activeTab (type) {
+    activeTab(type) {
       switch (type) {
-        case 'existing':
+        case "existing":
           this.newActive = false;
           this.isActive = true;
           break;
@@ -420,21 +542,21 @@ export default {
           break;
       }
     },
-    activebtn (type) {
+    activebtn(type) {
       switch (type) {
-        case 'existing':
+        case "existing":
           this.Activebtn3 = false;
           this.Activebtn2 = false;
           this.Activebtn1 = false;
           this.isActivebtn = true;
           break;
-        case 'new':
+        case "new":
           this.Activebtn3 = false;
           this.Activebtn2 = false;
           this.Activebtn1 = true;
           this.isActivebtn = false;
           break;
-        case 'new1':
+        case "new1":
           this.Activebtn3 = false;
           this.Activebtn2 = true;
           this.Activebtn1 = false;
@@ -448,56 +570,83 @@ export default {
           break;
       }
     },
-    close () {
+    close() {
       this.dialog = false;
       setTimeout(() => {
         this.editedItem = Object.assign({}, this.defaultItem);
         this.editedIndex = -1;
       }, 300);
     },
-    close1 () {
+    close1() {
       this.dialog1 = false;
     },
-    close2 () {
+    close2() {
       this.dialog2 = false;
     },
-    submit () {
+    submit() {
       if (this.$refs.form.validate()) {
-        console.log('=clicked==', this.AddUsercredentials);
-      var token ="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjViZWQyYTRkMDRlZGE3ZTBiNzcwYjg5YiIsImVtYWlsIjoiamF0aW5kZXIuc2luZ2hAdmlpdGhpaXN5cy5jb20iLCJpYXQiOjE1NDIzNjE2NjAsImV4cCI6MTU0MjM2MTc4MH0.SLGvEfihgMLqI1It3r76I2aLaA15fIhCvF_OgQwjxTw"
-      var userdata = {
-      "name":this.AddUsercredentials.name,
-      // "name":this.AddUsercredentials.userName,
-        "email":this.AddUsercredentials.email,
-        "dob":this.AddUsercredentials.dob
-      }
+        let addUsers = {
+          name: this.editedItem.name + this.editedItem.lastname,
+          dob: this.editedItem.dob,
+          email: this.editedItem.email,
+          country: this.editedItem.country
+        };
+        http()
+          .post("/patient", addUsers)
+          .then(response => {
+            this.clear();
+            this.getPatientList();
+            if ((this.snackbar = true)) {
+              this.text = "Successfully Add New User";
+            }
+          })
+          .catch(error => {
+            console.log(error);
+          });
+        $("input[name='name']").val("");
+        $("input[name='lastname']").val("");
+        $("input[name='email']").val("");
+        $("input[name='dob']").val("");
       }
     },
-    mail () {
+    mail() {
       // this.editedIndex = this.desserts.indexOf();
     },
-    download () {
+    download() {
       // this.editedIndex = this.desserts.indexOf();
-    
     },
-    clear () {
+    clear() {
       this.$refs.form.reset();
     },
-    save () {
-      if (this.$refs.form.validate()) {
-        console.log('editedItem', this.editedItem);
-        if (this.editedIndex > -1) {
-          Object.assign(this.desserts[this.editedIndex], this.editedItem);
-        } else {
-          this.desserts.push(this.editedItem);
-        }
-        this.close();
-      }
+    save() {
+      let editUsers = {
+        name: this.editedItem.name + this.editedItem.lastname,
+        dob: this.editedItem.dob,
+        email: this.editedItem.email,
+        userId: this.editedItem.userId
+      };
+      http()
+        .post("/patientDetail", editUsers)
+        .then(response => {
+          if ((this.snackbar = true)) {
+            this.text = "Successfully Edit Existing User";
+          }
+            this.getPatientList();
+        })
+        .catch(error => {
+           console.log(error);
+        });
+      this.close();
     }
   },
-  mounted(){
+  mounted() {
     this.getPatientList();
   }
+  //computed:{
+  //   color(){
+  //     return this.loading ? 'success' : ''
+  // }
+  //}
 };
 </script>
 <style scoped>
@@ -558,7 +707,6 @@ h4 {
 }
 #dialog {
   height: 550px;
- 
 }
 .active {
   background-color: black;
@@ -567,7 +715,33 @@ h4 {
 .activebtn {
   color: black !important;
 }
-#flex{
-height: 300px;
+#flex {
+  height: 300px;
+}
+.top{
+  margin-top:100px;
+}
+.v-tabs__item a{
+  font-size:16px !important; 
+}
+@media screen and (max-width: 380px) {
+.right {
+    float: none !important;
+}
+.subheading {
+    font-size: 14px !important;
+}
+.v-card__actions .v-btn{
+    margin: 0 0px;
+    min-width: 100px;
+}
+}
+@media screen and (max-width: 380px) {
+.subheading {
+    font-size: 12px !important;
+}  
+h5 {
+    font-size: 13px;
+}
 }
 </style>
\ No newline at end of file
diff --git a/src/pages/Login.vue b/src/pages/Login.vue
index cba13a4..57c9be8 100644
--- a/src/pages/Login.vue
+++ b/src/pages/Login.vue
@@ -1,149 +1,182 @@
 <template>
- 
- <v-app id="login">
+  <v-app id="login">
     <v-toolbar color="grey lighten">
       <v-toolbar-items>
-         <img src="/static/ana@2x.png" height="36" alt="ana">
-    </v-toolbar-items>
-  </v-toolbar>
-  
+        <img src="/static/ana@2x.png" height="36" alt="ana">
+      </v-toolbar-items>
+    </v-toolbar>
+
     <v-content>
       <v-container fluid fill-height>
+        <v-snackbar
+          :timeout="timeout"
+          :top="y === 'top'"
+          :right="x === 'right'"
+          :vertical="mode === 'vertical'"
+          v-model="snackbar"
+          :color="color"
+        >{{ text }}</v-snackbar>
         <v-layout align-center justify-center>
-          <v-flex xs12 sm8 md6 lg5>
-          <v-toolbar color="black" dark>
-          <v-spacer></v-spacer>
-          <v-toolbar-title>Admin Login</v-toolbar-title>
-          <v-spacer></v-spacer>
-        </v-toolbar>
-         
+          <v-flex xs12 sm10 md6 lg4>
+            <v-toolbar color="black" dark>
+              <v-spacer></v-spacer>
+              <v-toolbar-title>Admin Login</v-toolbar-title>
+              <v-spacer></v-spacer>
+            </v-toolbar>
+
             <v-card class="elevation-1 pa-1">
-               <v-card-text>
-               <v-flex xs12 sm8 md8 lg8 offset-xs2>   
-                 <v-form ref="form" v-model="valid" lazy-validation>                           
-                 <v-text-field
-                 v-model="userLogincredentials.userName"
-                 :rules="nameRules"
-                 label="Username"
-                 required
-                 ></v-text-field>
-              <v-text-field
-                :rules="[rules.required, rules.min]"
-                v-model="userLogincredentials.password"
-                :append-icon="e1 ? 'visibility_off' : 'visibility'"
-                :append-icon-cb="() => (e1 = !e1)"
-                :type="e1 ? 'password' : 'text'"
-                name="input-10-1"
-                label="Password"
-                counter
-                
-              ></v-text-field>
-    
-              </v-form></v-flex>
-            </v-card-text>
-            <v-flex xs12 sm8 md8 lg8 offset-xs2>  
-            
-             <v-checkbox 
-                :label="`Remember me`" 
-                v-model="remember"
-              ></v-checkbox>
-          
-                <h5 id="fp"> <router-link to="/forgetpassword">Forget Password</router-link></h5>
-              
-            </v-flex>
-            
-             <v-flex class="mt-3 text-md-center">
-                <v-btn round color="black" dark large @click="login" :loading="loading">Login</v-btn>
+              <v-card-text>
+                <v-flex xs12 sm12 md12 lg12>
+                  <v-form ref="form" v-model="valid" lazy-validation>
+                    <v-text-field
+                      v-model="userLogincredentials.userName"
+                      :rules="nameRules"
+                      label="Username"
+                      required
+                    ></v-text-field>
+                    <v-text-field
+                      :rules="[rules.required, rules.min]"
+                      v-model="userLogincredentials.password"
+                      :append-icon="e1 ? 'visibility_off' : 'visibility'"
+                      :append-icon-cb="() => (e1 = !e1)"
+                      :type="e1 ? 'password' : 'text'"
+                      name="input-10-1"
+                      label="Password"
+                      counter
+                    ></v-text-field>
+                  </v-form>
+                   <v-layout row wrap>
+                  <v-flex xs6>
+                      <v-checkbox :label="`Remember me`" v-model="remember"></v-checkbox>
+                    </v-flex>
+                    <v-flex xs6>
+                     <h5  class="right mt-4"> <router-link class="link" to="/forgetpassword">Forget Password</router-link></h5>
+                  </v-flex>
+                   </v-layout>
                 </v-flex>
+              </v-card-text>
+              <v-layout>
+              </v-layout>
+              <v-layout>
+              <v-flex sm12 class="my-3">
+                <v-btn style="margin: auto;display: block;" round color="black" dark large @click="login" :loading="loading">Login</v-btn>           
+              </v-flex>
+               </v-layout>
             </v-card>
           </v-flex>
         </v-layout>
       </v-container>
     </v-content>
-  <v-footer class="pa-4" color="grey darken-2">
-</v-footer>
-</v-app>
+    <v-footer class="pa-4" color="grey darken-2"></v-footer>
+  </v-app>
 </template>
 
 <script>
-import axios from 'axios';
+import http from "@/Services/http.js";
 export default {
-  data () {
+  data() {
     return {
+      snackbar: false,
+      y: "top",
+      x: "right",
+      mode: "",
+      timeout: 3000,
+      text: "",
       e1: true,
       loading: false,
       remember: false,
       valid: false,
       userLogincredentials: {},
-      username: '',
+      username: "",
       nameRules: [
-        v => !!v || 'Username is required',
-      //  v => v.length >0 
+        v => !!v || "Username is required"
+        //  v => v.length >0
       ],
       // email: '',
       // erules: {
-      //   required: value => !!value || 'This email field is Required.', 
-      //   em: v => (v.length > 0 && /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) || 'Email must be valid') 
+      //   required: value => !!value || 'This email field is Required.',
+      //   em: v => (v.length > 0 && /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) || 'Email must be valid')
       // },
-      password: '',
+      password: "",
       rules: {
-        required: value => !!value || 'password is Required.',
-        min: v => (/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*])(?=.{8,})/).test(v) && v.length >= 8 || 'Min 8 characters upper case lower case symbol required'
-        
-      } 
+        required: value => !!value || "password is Required.",
+        min: v =>
+          (/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*])(?=.{8,})/.test(
+            v
+          ) &&
+            v.length >= 8) ||
+          "Min 8 characters upper case lower case symbol required"
+      }
     };
   },
   methods: {
-    login () {
+    login() {
       var userdata = {
-        "userName":this.userLogincredentials.userName,
-        "password":this.userLogincredentials.password
-      }
-      axios.post('http://18.208.28.55:3000/v1/adminLogin',userdata)
+        userName: this.userLogincredentials.userName,
+        password: this.userLogincredentials.password
+      };
+      http()
+        .post("/adminLogin", userdata)
         .then(response => {
-            window.localStorage.setItem("value1", true);
-          console.log("response=====>",response.data.data);
-       }).catch(err => {
-           console.log("err====>",err);
-       })
-      // this.loading = true;
-      // setTimeout(() => {
-      //   this.$router.push('/dashboard');
-      // }, 1000);
+          this.$store.dispatch("setToken", response.data.data.token);
+          this.loading = true;
+          if ((this.snackbar = true)) {
+            this.text = "Successfully Login";
+          }
+          setTimeout(() => {
+            this.$router.push("/dashboard");
+          }, 2000);
+        })
+        .catch(err => {
+          this.text = "Email or Password not matched !!";
+          this.snackbar = true;
+          this.loading = false;
+        });
+    }
+  },
+  computed: {
+    color() {
+      return this.loading ? "success" : "error";
     }
   }
 };
 </script>
 
 <style scoped lang="css">
-  #login{
-    width: 100%;
-    position: absolute;
-    top: 0;
-    left: 0;
-    content: "";
-    z-index: 0;
-  }
+#login {
+  width: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  content: "";
+  z-index: 0;
+}
 </style>
 <style scoped>
-img{
-position:absolute;
-top:13px;
-left:50px;
+img {
+  position: absolute;
+  top: 13px;
+  left: 50px;
 }
 .v-btn--large {
-    padding: 0px 84px;
+  padding: 0px 84px;
 }
-#fp{
-  position: absolute;
-  top: 193px;
-  right: 128px;
-  color: black;
+.link{ 
+  text-decoration:none;
 }
-a{
-color: #696969;
+a {
+  color: #696969;
+}
+ .forget{
+  margin-top:20px;
+} 
+.mt-4 {
+    margin-top: 21px !important;
+}
+@media screen and (max-width: 600px) {
+ .forget{
+  margin-top:none;
+  margin-left:18px;
+}  
 }
-
-
-
 </style>
\ No newline at end of file
diff --git a/src/pages/Provider.vue b/src/pages/Provider.vue
index f1c5e85..9b951fb 100644
--- a/src/pages/Provider.vue
+++ b/src/pages/Provider.vue
@@ -1,11 +1,14 @@
 <template>
-<v-container grid-list-md>
-<v-flex>
+<!-- <v-container fluid> -->
+<v-flex xs12>
   <v-card>
     <v-card-title>
-      <b><h5> Healthcare Providers </h5></b>
+      <v-flex xs12 lg2 md3 sm4>
+      <h4 class="text-xs-center"> Healthcare Providers </h4>
+      </v-flex>
       <v-spacer></v-spacer>
-      <v-flex xs6 sm4>
+  <!-- SEARCH ALL HEALTH PROVIDER -->
+      <v-flex xs8 sm4 lg3>
       <v-text-field justify-right
         prepend-icon="search" 
         v-model="search"
@@ -13,9 +16,17 @@
         color="black"
       ></v-text-field></v-flex>
     </v-card-title>
-
-   <v-dialog v-model="dialog" max-width="500px">
-       <v-toolbar color="white">
+<!-- EDIT HEALTH PROVIDER -->
+    <v-snackbar
+           :timeout="timeout"
+           :top="y === 'top'"
+           :right="x === 'right'"
+           :vertical="mode === 'vertical'"
+           v-model="snackbar"
+           color="success"
+         >{{ text }}</v-snackbar>
+    <v-dialog v-model="dialog" max-width="500px">
+      <v-toolbar color="white">
        <v-spacer></v-spacer>
        <v-toolbar-title>Edit Profile</v-toolbar-title>
        <v-spacer></v-spacer>
@@ -36,7 +47,7 @@
       </v-flex>
       <v-flex xs8>
       <v-text-field
-      v-model="editedItem.Name"
+      v-model="editedItem.name"
       :rules="nameRules"
       required
       ></v-text-field>
@@ -48,8 +59,7 @@
       </v-flex>
       <v-flex xs8>
       <v-text-field
-      v-model="editedItem.LName"
-      :rules="lnameRules"
+      v-model="editedItem.lastname"
       required
       ></v-text-field>
       </v-flex>
@@ -60,20 +70,11 @@
       </v-flex>
       <v-flex xs8>
       <v-text-field
-      v-model="editedItem.Email"
+      v-model="editedItem.email"
       :rules="emailRules"
       data-vv-name="E-mail"
       required
       ></v-text-field></v-flex></v-layout>
-      <v-layout>
-      <v-flex xs4 class="pt-4 subheading">
-      <label>Date of Birth: </label>
-      </v-flex>
-      <v-flex xs8>
-      <v-text-field
-      v-model="editedItem.DOB"
-     :rules="[rules.required, rules.min]"
-      ></v-text-field></v-flex></v-layout>
       <v-card-actions>
       <v-btn round dark @click.native="close">Cancel</v-btn>
       <v-spacer></v-spacer>
@@ -87,48 +88,53 @@
 </v-card-text>
 </v-card>
 </v-dialog>
-
-<v-dialog v-model="dialog1" max-width="500px">
+<!-- VIEW PROFILE PRVIDE LIST -->
+<v-dialog v-model="dialog1" max-width="700px" >
        <v-toolbar color="white">
        <v-spacer></v-spacer>
        <v-toolbar-title>Profile</v-toolbar-title>
        <v-spacer></v-spacer>
        <v-icon @click="close1">close</v-icon>
        </v-toolbar>
-       
-
       <v-card>
       <v-flex align-center justify-center layout text-xs-center>
-      <v-avatar size="50px" style="position:absolute; top:10px;"> 
+      <v-avatar size="60px" style="position:absolute; top:10px;"> 
       <img src="/static/icon/user.png"/> </v-avatar> 
      </v-flex>  
  <v-card-text>
-    <v-container grid-list-md>
-      <v-layout wrap justify-center>
-        <v-flex offset-xs3>
-          
-          <br><br>
-          <table>
-            <th>
-              <tr><h5><b>First Name:</b></h5></tr><br>
-              <tr><h5><b>Last Name:</b></h5></tr><br>
-              <tr><h5><b>Email:</b></h5></tr><br>
-              <tr><h5><b>Date Of Birth:</b></h5></tr>
-            </th>
-            <th>
-              <tr><td><h5><b>{{ editedItem.Name }}</b></h5></td></tr><br>
-              <tr> <td><h5><b>{{ editedItem.LName }}</b></h5></td></tr><br>
-              <tr><td><h5><b>{{ editedItem.Email }}</b></h5></td></tr><br>
-              <tr><td><h5><b>{{ editedItem.DOB }}</b></h5></td></tr>
-            </th>
-            
-        
-          </table>
-        </v-flex>
-      </v-layout>
-    </v-container>
+     <v-container grid-list-md>
+              <v-layout wrap justify-center>
+                <v-flex sm12 offset-sm3><br><br>
+                   <v-layout>
+                     <v-flex xs4>
+                     <h5 class="right">First Name:</h5>
+                    </v-flex>
+                    <v-flex xs8>
+                    <h5 class="left">{{ editedItem.name }}</h5>
+                  </v-flex>
+                 </v-layout>
+                  <v-layout>
+                     <v-flex xs4>
+                     <h5 class="right my-3">Last Name:</h5>
+                    </v-flex>
+                    <v-flex xs8>
+                     <h5 class="my-3 left" >{{ editedItem.name }}</h5>
+                  </v-flex>
+                 </v-layout>
+                  <v-layout>
+                     <v-flex xs4 >
+                     <h5 class="right">Email:</h5>
+                    </v-flex>
+                    <v-flex xs8>
+                     <h5 class="left">{{ editedItem.email }}</h5>
+                  </v-flex>
+                 </v-layout>
+                </v-flex>
+              </v-layout>
+            </v-container>
     </v-card-text>
   </v-card>
+<!-- PROVIDER DATA TABLE PROVIDER DEATILS -->
 </v-dialog>
     <v-data-table
       :headers="headers"
@@ -137,18 +143,26 @@
       class="elevation-1"
       :pagination.sync="pagination"
     >
-    
-      <template slot="items" slot-scope="props">
-        <td id="td" class="text-xs-center">{{ props.item.No }}</td>
-        <td id="td" class="text-xs-center">{{ props.item.Name+' '+props.item.LName }}</td>
-        <td id="td" class="text-xs-center">{{ props.item.Email }}</td>
-        <td id="td" class="text-xs-center">
-          <v-flex xs6 sm6>
+     <template slot="items" slot-scope="props">
+        <v-snackbar
+           :timeout="timeout"
+           :top="y === 'top'"
+           :right="x === 'right'"
+           :vertical="mode === 'vertical'"
+           v-model="statussnackbar"
+           color="success"
+         >{{ text }}</v-snackbar>
+          <td id="td" class="text-xs-center">{{ props.index }}</td>
+          <td id="td" class="text-xs-center">{{ props.item.name}}</td>
+          <td id="td" class="text-xs-center">{{ props.item.email }}</td>
+          <td id="td" class="text-xs-center">
+            <v-flex xs12 sm12>
             <v-select
-            :items="status"
+            :items="statusList"
+            @change="changeswitch(props.item)"
             v-model="props.item.e1"
             menu-props="auto"
-            label="Select"
+            :label="props.item.verified"
             hide-details
             single-line
             ></v-select>
@@ -158,7 +172,7 @@
           <span>
           <img style="cursor:pointer; width:25px; height:18px; " class="mr-5" @click="profile(props.item)" src="/static/icon/eye1.png"/>
           <img style="cursor:pointer; width:20px; height:18px; " class="mr-5" @click="editItem(props.item)" src="/static/icon/edit1.png"/>
-          <img style="cursor:pointer; height:20px; " class="mr-2" @click="deleteItem(props.item)" src="/static/icon/delete1.png"/>
+          <img style="cursor:pointer; height:20px; " class="mr-5" @click="deleteItem(props.item)" src="/static/icon/delete1.png"/>
           </span>
     </td>
        
@@ -167,20 +181,24 @@
 
 </v-card>
 </v-flex>
-</v-container>
+<!-- </v-container> -->
 </template>
 <script>
-import axios from 'axios';
+import http from '@/Services/http.js';
 export default {
   data: () => ({
-    Name: '',
-    LName: '',
-    DOB: '',
-    email: '',
+    snackbar: false,
+    statussnackbar:false,
+    y: "top",
+    x: "right",
+    mode: "",
+    timeout: 3000,
+    text: "",
     valid: '',
+    modaledit:false,
     dialog: false,
     dialog1: false,
-    status: ['Pending', 'Approved', 'Declined'],
+    statusList: ["APPROVED","DECLINED"],
     search: '',
     e1: '',
     rules: {
@@ -188,13 +206,13 @@ export default {
       min: v => (/^(0?[1-9]|[12][0-9]|3[01])[\/\-](0?[1-9]|1[012])[\/\-]\d{4}$/).test(v) && v.length > 0 || 'Please enter a date in the format dd/mm/yyyy'
     },
     nameRules: [v => !!v || ' First Name is required'],
-    lnameRules: [v => !!v || ' Last Name is required'],
+    // lnameRules: [v => !!v || ' Last Name is required'],
     emailRules: [
       v => !!v || 'E-mail is required',
       v => /.+@.+/.test(v) || 'E-mail must be valid'
     ],
     pagination: {
-      rowsPerPage: 10,
+      rowsPerPage: 13,
   
     },
     headers: [
@@ -204,9 +222,9 @@ export default {
         sortable: false,
         value: 'no'
       },
-      { text: 'Name', value: 'Name', sortable: false, align: 'center' },
-      { text: 'Email', value: 'Email', sortable: false, align: 'center' },
-      { text: 'Status', value: 'Status', sortable: false, align: 'center' },
+      { text: 'Name', value: 'name', sortable: false, align: 'center' },
+      { text: 'Email', value: 'email', sortable: false, align: 'center' },
+      { text: 'Status', value: 'verified', sortable: false, align: 'center' },
       { text: '', value: '', sortable: false },
 
     ],
@@ -215,14 +233,16 @@ export default {
     editedItem: {
       No: '',
       Name: '',
-      LName: '',
+      lastname: '',
       Email: '',
+      dob:''
     },
     defaultItem: {
       No: '',
       Name: '',
-      LName: '',
+      lastname: '',
       Email: '',
+      dob:''
     },
   }),
   watch: {
@@ -239,32 +259,16 @@ export default {
   },
   methods: {
      getProviderList(){
-      var token = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjViZWQyYTRkMDRlZGE3ZTBiNzcwYjg5YiIsImVtYWlsIjoiYWRtaW5AZ21haWwuY29tIiwiaWF0IjoxNTQyMzQzNzg3LCJleHAiOjE1NDIzNDM5MDd9.diDjMkhRXvpdpXxibfsE9EmIb5G-39Bcy3qdzA0rREg"
-       axios.get('http://18.208.28.55:3000/v1/provider-list',{headers: {Authorization: 'Bearer '+ token}})
+      var token = this.$store.state.token
+       http().get('/provider-list',{headers: {Authorization: 'Bearer '+ token}})
         .then(response => {
-          console.log("response=====>",response.data);
+          this.desserts = response.data.data.providerList;
        }).catch(err => {
            console.log("err====>",err);
        })
     },
     initialize () {
-      this.desserts = [
-        {
-          No: 1,
-          Name: 'Amit',
-          LName: 'goyal',
-          Email: 'jsi@gmail.com',
-          DOB: '22/09/1996'
-        },
-        {
-          No: 2,
-          Name: 'Sumit',
-          LName: 'kumar',
-          Email: 'aasi@gmail.com',
-          DOB: '16/09/1997'
-        }
-        
-      ];
+      this.desserts = [];
     },
 
     editItem (item) {
@@ -277,11 +281,36 @@ export default {
       this.editedItem = Object.assign({}, item);
       this.dialog1 = true;
     },
-
+    changeswitch(item){
+      let addStatus = {
+       userId:item.userId,
+       status:item.e1
+      };
+        http().post("/approve-decline", addStatus)
+        .then(response => {
+          if ((this.statussnackbar = true)) {
+            this.text = "Successfully change your status is" +  " "  + item.e1;
+          }
+          this.getProviderList();
+        })
+        .catch(error => {
+          console.log(error);
+        });
+    },
     deleteItem (item) {
-      const index = this.desserts.indexOf(item);
-      confirm('Are you sure you want to delete this item?') &&
-        this.desserts.splice(index, 1);
+      let addUsers = {
+       userId:item.userId
+      };
+        http().post("/deleteProvider", addUsers)
+        .then(response => {
+           if ((this.snackbar = true)) {
+            this.text = "Successfully delete Health Care Priovider";
+        }
+          this.getProviderList();
+        })
+        .catch(error => {
+          console.log(error);
+        });
     },
 
     close () {
@@ -296,15 +325,23 @@ export default {
     },
 
     save () {
-      if (this.$refs.form.validate()) {
-        console.log('editedItem', this.editedItem);
-        if (this.editedIndex > -1) {
-          Object.assign(this.desserts[this.editedIndex], this.editedItem);
-        } else {
-          this.desserts.push(this.editedItem);
-        }
-        this.close();
-      }
+     let editUsers = {
+        name:  this.editedItem.name +this.editedItem.lastname,
+        dob:   this.editedItem.dob,
+        email: this.editedItem.email,
+        userId: this.editedItem.userId
+     };
+        http().post("/provider-detail", editUsers)
+        .then(response => {
+           if ((this.snackbar = true)) {
+            this.text = "Successfully Edit Health Care Priovider";
+          }
+          this.getProviderList();
+        })
+        .catch(error => {
+          console.log(error);
+        });
+       this.close();
     }
   }, 
 };
@@ -318,5 +355,32 @@ min-width: 120px;
     border: 1px solid #dddddd;
     padding: 8px;
 }
+#flex{
+height: 300px;
+}
+.v-select_selctions.v-select_slot.v-select_selection{
+  color: black !important;
+}
+@media screen and (max-width:476px){
+.flex.xs4 {
+    flex-basis: 55.666667%;
+    max-width: 71.666667%;
+}
+}
+@media screen and (max-width: 402px) {  
+h5 {
+    font-size: 13px;
+}
+/* .right{
+  float:none !important;
+} */
+.left{
+  float:none !important;
+}
+
+}
+
+</style>
+
+
 
-</style>
\ No newline at end of file
diff --git a/src/pages/changepassword.vue b/src/pages/changepassword.vue
index 7143768..4e8c125 100644
--- a/src/pages/changepassword.vue
+++ b/src/pages/changepassword.vue
@@ -48,19 +48,16 @@
                 :loading="loading"
                 @click="reset">Reset Password</v-btn></v-flex>
                 </v-card-actions>
-                <v-snackbar
-                 :timeout="timeout"
-                 v-model="snackbar"
-                 color="green"
-                  >
-                 {{ text }}
-              <v-icon
-              flat
-              @click="snackbar = false" 
-            >
-              close
-               </v-icon>
-               </v-snackbar>
+               <v-snackbar
+               :timeout="timeout"
+               :top="y === 'top'"
+               :right="x === 'right'"
+               :vertical="mode === 'vertical'"
+               v-model="snackbar"
+               :color= color
+               >
+               {{ text }}
+             </v-snackbar>
             </v-card>
           </v-flex>
         </v-layout>
@@ -72,16 +69,21 @@
   </v-app>
 </template>
 <script>
-import axios from 'axios';
+import http from '@/Services/http.js';
+
 export default {
   data () {
     return {
+      snackbar: false,
+      y: 'top',
+      x: 'right',
+      mode: '',
+      timeout: 4000,
+      text: '',
       adminChangePasswordcredentials: {},
       e1: true,
       e2: true,
       e3: true,
-      snackbar: false,
-      timeout: 1000,
       loading: false,
       valid: false,
       text: 'Password Changed',
@@ -96,33 +98,35 @@ export default {
   },
   methods: {
     reset () {
-      var token ="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjViZWQyYTRkMDRlZGE3ZTBiNzcwYjg5YiIsImVtYWlsIjoiamF0aW5kZXIuc2luZ2hAdmlpdGhpaXN5cy5jb20iLCJpYXQiOjE1NDIzNjE2NjAsImV4cCI6MTU0MjM2MTc4MH0.SLGvEfihgMLqI1It3r76I2aLaA15fIhCvF_OgQwjxTw"
-
-      console.log("this.adminChangePasswordcredentials.confirmPassword",this.adminChangePasswordcredentials.confirmPassword)
-      console.log(this.adminChangePasswordcredentials.newPassword,"=======",this.adminChangePasswordcredentials.currentPassword)
+      var token = this.$store.state.token;
       var userdata = {
         "currentPassword":this.adminChangePasswordcredentials.currentPassword,
         "newPassword":this.adminChangePasswordcredentials.newPassword,
         "confirmPassword":this.adminChangePasswordcredentials.confirmPassword
       }
-      axios.post('http://18.208.28.55:3000/v1/adminChangePassword',userdata,{headers: {Authorization: 'Bearer '+token}})
+      http().post('/adminChangePassword',userdata,{headers: {Authorization: 'Bearer '+token}})
         .then(response => {
-            window.localStorage.setItem("value1", true);
-          console.log("response=====>",response.data.data);
+          this.loading = true;
+           if(this.snackbar=true){
+              this.text= "Successfully changed password !!"              
+              console.log("snackbar",response.data.message)
+            }
+            setTimeout(() => {
+            this.$router.push('/dashboard');
+        }, 2000);
        }).catch(err => {
-           console.log("err====>",err);
-       })
-      // console.log('=clicked==', this.adminChangePasswordcredentials);
-      // this.loading = true;
-      // this.snackbar = true;
-      // setTimeout(() => {
-        
-      //   this.$router.push('/dashboard');
-        
-      // }, 2000);
-      
+          // console.log("err====>",err);
+           this.text="User Not Found or Incorrect currentPassword"
+           this.snackbar= true;
+           this.loading = false;
+       })    
     }
-  }
+  },
+  computed:{
+  color(){
+    return this.loading ? 'success' : 'error'
+}
+}
 };
 </script>
 <style scoped>
diff --git a/src/pages/forgetpassword.vue b/src/pages/forgetpassword.vue
index 482bf30..9038252 100644
--- a/src/pages/forgetpassword.vue
+++ b/src/pages/forgetpassword.vue
@@ -8,98 +8,96 @@
     <v-content>
       <v-container fluid fill-height>
         <v-layout align-center justify-center>
-          <v-flex xs12 sm8 md6 lg6>
+          <v-flex xs12 sm8 md7 lg5>
           <v-toolbar color="black" dark>
           <v-spacer></v-spacer>
-          
           <v-toolbar-title>Forget Password</v-toolbar-title>
-          <v-spacer></v-spacer>
-          
+          <v-spacer></v-spacer>  
         </v-toolbar>
             <v-card class="elevation-1 pa-1">
               <v-card-text>
-               
-                <h5 class="text-md-center"> Not to Worry! Enter to your registered Email ID. </h5>
-                <h5 class="text-md-center"> We'll send you a reset.</h5>
-                <v-flex xs12 sm8 md6 lg6 offset-xs3>                           
+                <h5 class="text-xs-center"> Not to Worry! Enter to your registered Email ID. </h5>
+                <h5 class="text-xs-center"> We'll send you a reset.</h5>
+                <v-flex lg4 sm6 xs10 offset-sm3 offset-xs1 offset-lg4>                           
                 <v-form class="mt-4">
                 <div class="custom-input-align">
                 <v-text-field 
                   class="text-md-center"
                   v-validate="'required|email'" 
-                  v-model="userForgotPasswordcredentials.email" 
+                  v-model="changePassword" 
                   :error-messages="errors.collect('email')" 
                   label="Enter Your email ID" 
                   data-vv-name="email" 
                   required>
                 </v-text-field>
-                </div>
-                  
-              </v-form></v-flex>
-              </v-card-text>
-              <v-card-actions>
-              
-
-                
-                <v-flex text-sm-center>
-                  
+                </div>  
+                </v-form></v-flex>
+                </v-card-text>
+                <v-card-actions>
+                <v-flex text-xs-center>
                 <v-btn round class="mt-1" color="black" dark large @click="reset">Send Request</v-btn></v-flex>
                 </v-card-actions>
                 <v-snackbar
                  :timeout="timeout"
+                 :top="y === 'top'"
+                 :right="x === 'right'"
+                 :vertical="mode === 'vertical'"
                  v-model="snackbar"
-                 color="green"
-                  >
-                 {{ text }}
-              <v-icon
-               flat
-               @click="snackbar = false"
-              >
-              close
-              </v-icon>
+                 :color= color
+                 >
+                  {{ text }}
+               </v-snackbar>
               </v-snackbar>
             </v-card>
           </v-flex>
         </v-layout>
       </v-container>
     </v-content>
-  <v-footer class="pa-4" color="grey darken-2">
-  
+  <v-footer class="pa-4" color="grey darken-2"> 
   </v-footer>
   </v-app>
 </template>
 <script>
-import axios from 'axios';
+import http from '@/Services/http.js';
+
 export default {
   data: () => ({
-    userForgotPasswordcredentials: {},
-    text: 'Link send to your Email address',
+    changePassword:'',
     snackbar: false,
-    timeout: 1000,
+    y: 'top',
+    x: 'right',
+    mode: '',
+    timeout: 4000,
+    text: '',
     loading: false,
     email: ''
   }),
 
   methods: {
     reset () {
-      var userdata = {
-        "email":this.userForgotPasswordcredentials.email,
-      }
-      axios.post('http://18.208.28.55:3000/v1/adminForgotPassword',userdata)
+
+      http().get('/adminForgotPassword?email='+ this.changePassword)
         .then(response => {
-            window.localStorage.setItem("value1", true);
-          console.log("response=====>",response.data.data);
+          console.log("response=====>",response);
+          this.loading = true;
+          if(this.snackbar=true){
+              this.text= "Please check your email and Copy your password!"              
+          }
+          setTimeout(() => {
+          this.$router.push('/');
+       }, 1000);
        }).catch(err => {
-           console.log("err====>",err);
+           this.text="User Not Found or Incorrect Email"
+           this.snackbar= true;
+           this.loading = false;
        })
-    //  console.log('=clicked==', this.userForgotPasswordcredentials);
-    //   this.loading = true;
-    //   this.snackbar = true;
-    //   setTimeout(() => {
-    //     this.$router.push('/');
-    //   }, 1000);
     }
-  }
+  },
+  computed:{
+  color(){
+    return this.loading ? 'success' : 'error'
+}
+}
 
 };
 </script>
@@ -121,4 +119,13 @@ left:50px;
 .v-btn--large {
     padding: 0px 74px;
 }
+@media screen and (max-width: 472px) {
+.v-btn--large {
+    padding:0px 20px !important;
+    font-size:13px;
+}
+h5 {
+    font-size: 11px;
+}
+}
 </style>
\ No newline at end of file
diff --git a/src/pages/questions.vue b/src/pages/questions.vue
index 673ea8b..5bcb95f 100644
--- a/src/pages/questions.vue
+++ b/src/pages/questions.vue
@@ -1,6 +1,5 @@
 <template>
-<v-container grid-list-xl>
-    <v-flex>
+ <v-flex>
   <v-card>
     <v-toolbar flat color="white">
       <v-card-title>
@@ -23,9 +22,8 @@
       
     </v-toolbar>
     <component v-bind:is="component"></component>
-  </v-card></v-flex> 
-
-  </v-container>
+  </v-card>
+  </v-flex> 
 </template>
 <script>
 import axios from 'axios';
diff --git a/src/services/api.js b/src/services/api.js
deleted file mode 100644
index e69de29..0000000
diff --git a/src/store/store.js b/src/store/store.js
new file mode 100644
index 0000000..ab2798f
--- /dev/null
+++ b/src/store/store.js
@@ -0,0 +1,57 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+import createPersistedState from 'vuex-persistedstate'
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+    strict:true,
+    plugins:[
+        createPersistedState() 
+    ],
+    state: {
+        token: null,
+        data: null,
+        isUserLoggedIn: false,
+        username: null,
+        password: null
+    },
+    // serve as the one and only way to change the state of the data in the state object
+    mutations: {
+        setToken (state, token) {
+            state.token = token
+            //state.isUserLoggedIn = !!(token)
+        if (token != null) {
+            state.isUserLoggedIn = true
+           } else {
+            state.isUserLoggedIn = false
+        } 
+        },
+        setUser (state, data) {
+            state.data = data
+        },
+        User (state, username) {
+              state.username = username
+        },
+        password (state, password) {
+            state.password = password
+       }
+    }, 
+    //Action methods are referred to as being "dispatched"
+    actions: {
+        setToken ({commit}, token) {
+            commit('setToken', token)
+        },
+        setUser ({commit}, data) {
+            commit('setUser', data)
+        },
+        User ({commit}, username) {
+            commit('User', username)
+        },
+        password ({commit}, password) {
+            commit('password', password)
+        },
+
+    }
+  
+})
\ No newline at end of file