diff --git a/src/router/index.js b/src/router/index.js
index b9cc42f..fad3f7d 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -11,12 +11,12 @@ import Vue from 'vue'
 // import VueAnalytics from 'vue-analytics'
 import Router from 'vue-router'
 import Meta from 'vue-meta'
-import { TokenService } from '@/services'
+import {TokenService} from '@/services'
 
 // Routes
 import paths from './paths'
 
-function route (options) {
+function route(options) {
     let path = options.path;
     let view = options.view;
     let name = options.name;
@@ -26,8 +26,8 @@ function route (options) {
         path,
         meta,
         component: (resovle) => import(
-          `@/views/${view}.vue`
-        ).then(resovle)
+            `@/views/${view}.vue`
+            ).then(resovle)
     }
 }
 
@@ -35,51 +35,54 @@ Vue.use(Router)
 
 // Create a new router
 const router = new Router({
-  mode: 'history',
-  routes: paths.map(path => route(path)).concat([
-    { path: '*', redirect: '/dashboard' }
-  ]),
-  scrollBehavior (to, from, savedPosition) {
-    if (savedPosition) {
-      return savedPosition
+    mode: 'history',
+    routes: paths.map(path => route(path)).concat([
+        {path: '*', redirect: '/dashboard'}
+    ]),
+    scrollBehavior(to, from, savedPosition) {
+        if (savedPosition) {
+            return savedPosition
+        }
+        if (to.hash) {
+            return {selector: to.hash}
+        }
+        return {x: 0, y: 0}
     }
-    if (to.hash) {
-      return { selector: to.hash }
-    }
-    return { x: 0, y: 0 }
-  }
 })
 
-Vue.use(Meta)
+
+Vue.use(Meta, {
+    refreshOnceOnNavigation: true
+})
 
 import {$hasRole} from '@/services/acl/role';
 
 router.beforeEach((to, from, next) => {
-  const isPublic = to.matched.some(record => record.meta.public);
-  const onlyWhenLoggedOut = to.matched.some(record => record.meta.onlyWhenLoggedOut);
-  const loggedIn = !!TokenService.getToken();
-  const roles = (to.meta && to.meta.roles) ? to.meta.roles : null;
+    const isPublic = to.matched.some(record => record.meta.public);
+    const onlyWhenLoggedOut = to.matched.some(record => record.meta.onlyWhenLoggedOut);
+    const loggedIn = !!TokenService.getToken();
+    const roles = (to.meta && to.meta.roles) ? to.meta.roles : null;
     if (to.meta.title) {
         document.title = to.meta.title;
     }
-  if (!isPublic && !loggedIn) {
-    return next({
-      path:'/login',
-      query: {redirect: to.fullPath}  // Store the full path to redirect the user to after login
-    });
-  }
+    if (!isPublic && !loggedIn) {
+        return next({
+            path: '/login',
+            query: {redirect: to.fullPath}  // Store the full path to redirect the user to after login
+        });
+    }
 
-  // Do not allow user to visit login page or register page if they are logged in
-  if (loggedIn && onlyWhenLoggedOut ) {
-    return next('/')
-  }
+    // Do not allow user to visit login page or register page if they are logged in
+    if (loggedIn && onlyWhenLoggedOut) {
+        return next('/')
+    }
 
-  // Do not allow user to visit Pages then not access roles
-  if (roles && !$hasRole(roles)) {
-    return next('/')
-  }
+    // Do not allow user to visit Pages then not access roles
+    if (roles && !$hasRole(roles)) {
+        return next('/')
+    }
 
-  next();
+    next();
 });
 
 // Bootstrap Analytics
diff --git a/src/router/paths.js b/src/router/paths.js
index 7463583..edac23c 100644
--- a/src/router/paths.js
+++ b/src/router/paths.js
@@ -4,316 +4,316 @@
  * official documentation https://router.vuejs.org/en/
  */
 export default [
-  {
-    path: '/dashboard',
-    name: 'Dashboard',
-    view: 'Dashboard',
-    meta: {
-      title:'CSSD Dashboard'
-    }
-  },
-  {
-    path: '/my-info',
-    name: 'MyInfo',
-    view: 'User/MyInfo',
-    meta: {
-      title:'My Inf | CSSD Dashboard'
-    }
-  },
-  {
-    path: '/manage-users',
-    name: 'ManageUsers',
-    view: 'User/List',
-    meta: {
-      roles: 'Admin|Supervisor',
-      title:'Manage User | CSSD Dashboard'
-    }
-  },
-  {
-    path: '/test-type/create',
-    name: 'AddTestType',
-    view: 'TestType/AddEdit',
-    meta: {
-      title:'Add Test Typ | CSSD Dashboard'
-    }
-  },
-  {
-    path: '/test-type/:testType/edit',
-    name: 'EditTestType',
-    view: 'TestType/AddEdit',
-    meta: {
-      roles: 'Admin',
-      title:'Edit Test Typ | CSSD Dashboard'
-    }
-  },
-  {
-    path: '/test-types',
-    name: 'ListTestType',
-    view: 'TestType/List',
-    meta: {
-      roles: 'Admin',
-      title:'List Test Typ | CSSD Dashboard'
-    }
-  },
-  {
-    path: '/medical-center',
-    name: 'ManageMedicalCenter',
-    view: 'MedicalCenter/List',
-    meta: {
-      title:'Manage Medical Center | CSSD Dashboard',
-      roles: 'Admin'
-    }
-  },
-  {
-    path: '/medical-center/create',
-    name: 'AddMedicalCenter',
-    view: 'MedicalCenter/AddEdit',
-    meta: {
-      title:'Add Medical Center | CSSD Dashboard',
-      roles: 'Admin'
-    }
-  },
-  {
-    path: '/medical-center/:medicalCenter/edit',
-    name: 'EditMedicalCenter',
-    view: 'MedicalCenter/AddEdit',
-    meta: {
-      title:'Edit Medical Center | CSSD Dashboard',
-      roles: 'Admin'
-    }
-  },
-  {
-    path: '/add-operator/:medicalCenter',
-    name: 'AddOperator',
-    view: 'Auth/Register',
-    meta: {
-      title:'Add Operator | CSSD Dashboard',
-      roles: 'Admin'
-    }
-  },
-  {
-    path: '/operator-list/:medicalCenter',
-    name: 'OperatorList',
-    view: 'MedicalCenter/OperatorList',
-    meta: {
-      title:'Operator List | CSSD Dashboard',
-      roles: 'Admin'
-    }
-  },
-  {
-    path: '/login',
-    name: 'Login',
-    view: 'Auth/Login',
-    meta: {
-      title:'Login | CSSD Dashboard',
-        public: true,  // Allow access to even if not logged in
-        onlyWhenLoggedOut: true
-    }
-  },
-  {
-    path: '/register',
-    name: 'Register',
-    view: 'Auth/Register',
-    meta: {
-      title:'Register | CSSD Dashboard',
-        public: true,  // Allow access to even if not logged in
-        onlyWhenLoggedOut: true,
-        roles: 'Admin'
-    }
-  },
-  {
-    path: '/forgot-password',
-    name: 'ForgotPassword',
-    view: 'Auth/ForgotPassword',
-    meta: {
-      title:'Forgot Password | CSSD Dashboard',
-        public: true,  // Allow access to even if not logged in
-        onlyWhenLoggedOut: true
+    {
+        path: '/dashboard',
+        name: 'Dashboard',
+        view: 'Dashboard',
+        meta: {
+            title: 'CSSD Dashboard'
+        }
     },
-  },
-  {
-    path: '/ShowTestResult/:testResult',
-    name: 'ShowTestResult',
-    view: 'TestResult/Show',
-    meta: {
-      title:'Show Test Result | CSSD Dashboard',
-        public: true,
+    {
+        path: '/my-info',
+        name: 'MyInfo',
+        view: 'User/MyInfo',
+        meta: {
+            title: 'My Info | CSSD Dashboard'
+        }
+    },
+    {
+        path: '/manage-users',
+        name: 'ManageUsers',
+        view: 'User/List',
+        meta: {
+            roles: 'Admin|Supervisor',
+            title: 'Manage User | CSSD Dashboard'
+        }
+    },
+    {
+        path: '/test-type/create',
+        name: 'AddTestType',
+        view: 'TestType/AddEdit',
+        meta: {
+            title: 'Add Test Typ | CSSD Dashboard'
+        }
+    },
+    {
+        path: '/test-type/:testType/edit',
+        name: 'EditTestType',
+        view: 'TestType/AddEdit',
+        meta: {
+            roles: 'Admin',
+            title: 'Edit Test Typ | CSSD Dashboard'
+        }
+    },
+    {
+        path: '/test-types',
+        name: 'ListTestType',
+        view: 'TestType/List',
+        meta: {
+            roles: 'Admin',
+            title: 'List Test Typ | CSSD Dashboard'
+        }
+    },
+    {
+        path: '/medical-center',
+        name: 'ManageMedicalCenter',
+        view: 'MedicalCenter/List',
+        meta: {
+            title: 'Manage Medical Center | CSSD Dashboard',
+            roles: 'Admin'
+        }
+    },
+    {
+        path: '/medical-center/create',
+        name: 'AddMedicalCenter',
+        view: 'MedicalCenter/AddEdit',
+        meta: {
+            title: 'Add Medical Center | CSSD Dashboard',
+            roles: 'Admin'
+        }
+    },
+    {
+        path: '/medical-center/:medicalCenter/edit',
+        name: 'EditMedicalCenter',
+        view: 'MedicalCenter/AddEdit',
+        meta: {
+            title: 'Edit Medical Center | CSSD Dashboard',
+            roles: 'Admin'
+        }
+    },
+    {
+        path: '/add-operator/:medicalCenter',
+        name: 'AddOperator',
+        view: 'Auth/Register',
+        meta: {
+            title: 'Add Operator | CSSD Dashboard',
+            roles: 'Admin'
+        }
+    },
+    {
+        path: '/operator-list/:medicalCenter',
+        name: 'OperatorList',
+        view: 'MedicalCenter/OperatorList',
+        meta: {
+            title: 'Operator List | CSSD Dashboard',
+            roles: 'Admin'
+        }
+    },
+    {
+        path: '/login',
+        name: 'Login',
+        view: 'Auth/Login',
+        meta: {
+            title: 'Login | CSSD Dashboard',
+            public: true,  // Allow access to even if not logged in
+            onlyWhenLoggedOut: true
+        }
+    },
+    {
+        path: '/register',
+        name: 'Register',
+        view: 'Auth/Register',
+        meta: {
+            title: 'Register | CSSD Dashboard',
+            public: true,  // Allow access to even if not logged in
+            onlyWhenLoggedOut: true,
+            roles: 'Admin'
+        }
+    },
+    {
+        path: '/forgot-password',
+        name: 'ForgotPassword',
+        view: 'Auth/ForgotPassword',
+        meta: {
+            title: 'Forgot Password | CSSD Dashboard',
+            public: true,  // Allow access to even if not logged in
+            onlyWhenLoggedOut: true
+        },
+    },
+    {
+        path: '/ShowTestResult/:testResult',
+        name: 'ShowTestResult',
+        view: 'TestResult/Show',
+        meta: {
+            title: 'Show Test Result | CSSD Dashboard',
+            public: true,
+        },
+    },
+    {
+        path: '/result-test',
+        name: 'AllResultTest',
+        view: 'TestResult/List',
+        meta: {
+            title: 'All Result Test | CSSD Dashboard',
+        }
+    },
+    {
+        path: '/add-test-result',
+        name: 'SubmitTestResult',
+        view: 'TestResult/AddEdit',
+        meta: {
+            title: 'Submit Test Result | CSSD Dashboard',
+        }
+    },
+    {
+        path: '/test-result/:testResult/edit',
+        name: 'EditTestResult',
+        view: 'TestResult/AddEdit',
+        meta: {
+            title: 'Edit Test Result | CSSD Dashboard',
+        }
+    },
+    {
+        path: '/test-result/NotVerified',
+        name: 'NotVerifyTestResult',
+        view: 'TestResult/List',
+        meta: {
+            title: 'Not Verify Test Resul | CSSD Dashboard'
+        }
+    },
+    {
+        path: '/statistics',
+        name: 'Statistics',
+        view: 'Statistics/Chart',
+        meta: {
+            title: 'Statistics | CSSD Dashboard',
+        }
+    },
+    {
+        path: '/add-package',
+        name: 'AddPackage',
+        view: 'Package/AddEdit',
+        meta: {
+            title: 'Add Package | CSSD Dashboard',
+        }
+    },
+    {
+        path: '/packages',
+        name: 'AllPackage',
+        view: 'Package/List',
+        meta: {
+            title: 'All Package | CSSD Dashboard',
+        }
+    },
+    {
+        path: '/packages/:package/edit',
+        name: 'EditPackage',
+        view: 'Package/AddEdit',
+        meta: {
+            title: 'Edit Package | CSSD Dashboard',
+        }
+    },
+    {
+        path: '/add-label',
+        name: 'AddLabel',
+        view: 'Label/AddEdit',
+        meta: {
+            title: 'Add Label | CSSD Dashboard',
+        }
+    },
+    {
+        path: '/labels',
+        name: 'AllLabels',
+        view: 'Label/List',
+        meta: {
+            title: 'All Labels | CSSD Dashboard',
+        }
+    },
+    {
+        path: '/label/:label/edit',
+        name: 'EditLabel',
+        view: 'Label/AddEdit',
+        meta: {
+            title: 'Edit Label | CSSD Dashboard',
+        }
+    },
+    {
+        path: '/add-cycle',
+        name: 'AddCycle',
+        view: 'Cycle/AddEdit',
+        meta: {
+            title: 'Add Cycle | CSSD Dashboard',
+        }
+    },
+    {
+        path: '/cycles',
+        name: 'AllCycle',
+        view: 'Cycle/List',
+        meta: {
+            title: 'All Cycle | CSSD Dashboard',
+        }
+    },
+    {
+        path: '/cycle/:cycle/edit',
+        name: 'EditCycle',
+        view: 'Cycle/AddEdit',
+        meta: {
+            title: 'Edit Cycle | CSSD Dashboard',
+        }
+    },
+    {
+        path: '/add-Item',
+        name: 'AddItem',
+        view: 'Item/AddEdit',
+        meta: {
+            title: 'Add Item | CSSD Dashboard',
+        }
+    },
+    {
+        path: '/Items',
+        name: 'AllItem',
+        view: 'Item/List',
+        meta: {
+            title: 'All Item | CSSD Dashboard',
+        }
+    },
+    {
+        path: '/Item/:Item/edit',
+        name: 'EditItem',
+        view: 'Item/AddEdit',
+        meta: {
+            title: 'Edit Item | CSSD Dashboard',
+        }
+    },
+    {
+        path: '/my-Items',
+        name: 'MyItem',
+        view: 'MyItem/List',
+        meta: {
+            title: 'My Item | CSSD Dashboard',
+        }
+    },
+    {
+        path: '/my-Package',
+        name: 'MyPackage',
+        view: 'MyPackage/List',
+        meta: {
+            title: 'My Package | CSSD Dashboard',
+        }
+    },
+    {
+        path: '/tickets',
+        name: 'Tickets',
+        view: 'Tickets/List',
+        meta: {
+            title: 'Tickets | CSSD Dashboard',
+        }
+    },
+    /*  {
+        path: '/ShowPackage/:package',
+        name: 'ShowPackage',
+        view: 'Package/ShowPackage',
+        meta:{
+          title:'Show Package | CSSD Dashboard',
+        }
+      },*/
+    {
+        path: '/Intro',
+        name: 'Intro',
+        view: 'Intro/Intro',
+        meta: {
+            title: 'Intro | CSSD Dashboard',
+        }
     },
-  },
-  {
-    path: '/result-test',
-    name: 'AllResultTest',
-    view: 'TestResult/List',
-    meta:{
-      title:'All Result Test | CSSD Dashboard',
-    }
-  },
-  {
-    path: '/add-test-result',
-    name: 'SubmitTestResult',
-    view: 'TestResult/AddEdit',
-    meta:{
-      title:'Submit Test Result | CSSD Dashboard',
-    }
-  },
-  {
-    path: '/test-result/:testResult/edit',
-    name: 'EditTestResult',
-    view: 'TestResult/AddEdit',
-    meta:{
-      title:'Edit Test Result | CSSD Dashboard',
-    }
-  },
-  {
-    path: '/test-result/NotVerified',
-    name: 'NotVerifyTestResult',
-    view: 'TestResult/List',
-  meta:{
-      title:'Not Verify Test Resul | CSSD Dashboard'
-  }
-  },
-  {
-    path: '/statistics',
-    name: 'Statistics',
-    view: 'Statistics/Chart',
-    meta:{
-      title:'Statistics | CSSD Dashboard',
-    }
-  },
-  {
-    path: '/add-package',
-    name: 'AddPackage',
-    view: 'Package/AddEdit',
-    meta:{
-      title:'Add Package | CSSD Dashboard',
-    }
-  },
-  {
-    path: '/packages',
-    name: 'AllPackage',
-    view: 'Package/List',
-    meta:{
-      title:'All Package | CSSD Dashboard',
-    }
-  },
-  {
-    path: '/packages/:package/edit',
-    name: 'EditPackage',
-    view: 'Package/AddEdit',
-    meta:{
-      title:'Edit Package | CSSD Dashboard',
-    }
-  },
-  {
-    path: '/add-label',
-    name: 'AddLabel',
-    view: 'Label/AddEdit',
-    meta:{
-      title:'Add Label | CSSD Dashboard',
-    }
-  },
-  {
-    path: '/labels',
-    name: 'AllLabels',
-    view: 'Label/List',
-    meta:{
-      title:'All Labels | CSSD Dashboard',
-    }
-  },
-  {
-    path: '/label/:label/edit',
-    name: 'EditLabel',
-    view: 'Label/AddEdit',
-    meta:{
-      title:'Edit Label | CSSD Dashboard',
-    }
-  },
-  {
-    path: '/add-cycle',
-    name: 'AddCycle',
-    view: 'Cycle/AddEdit',
-    meta:{
-      title:'Add Cycle | CSSD Dashboard',
-    }
-  },
-  {
-    path: '/cycles',
-    name: 'AllCycle',
-    view: 'Cycle/List',
-    meta:{
-      title:'All Cycle | CSSD Dashboard',
-    }
-  },
-  {
-    path: '/cycle/:cycle/edit',
-    name: 'EditCycle',
-    view: 'Cycle/AddEdit',
-    meta:{
-      title:'Edit Cycle | CSSD Dashboard',
-    }
-  },
-  {
-    path: '/add-Item',
-    name: 'AddItem',
-    view: 'Item/AddEdit',
-    meta:{
-      title:'Add Item | CSSD Dashboard',
-    }
-  },
-  {
-    path: '/Items',
-    name: 'AllItem',
-    view: 'Item/List',
-    meta:{
-      title:'All Item | CSSD Dashboard',
-    }
-  },
-  {
-    path: '/Item/:Item/edit',
-    name: 'EditItem',
-    view: 'Item/AddEdit',
-    meta:{
-      title:'Edit Item | CSSD Dashboard',
-    }
-  },
-  {
-    path: '/my-Items',
-    name: 'MyItem',
-    view: 'MyItem/List',
-    meta:{
-      title:'My Item | CSSD Dashboard',
-    }
-  },
-  {
-    path: '/my-Package',
-    name: 'MyPackage',
-    view: 'MyPackage/List',
-    meta:{
-      title:'My Package | CSSD Dashboard',
-    }
-  },
-  {
-    path: '/tickets',
-    name: 'Tickets',
-    view: 'Tickets/List',
-    meta:{
-      title:'Tickets | CSSD Dashboard',
-    }
-  },
-/*  {
-    path: '/ShowPackage/:package',
-    name: 'ShowPackage',
-    view: 'Package/ShowPackage',
-    meta:{
-      title:'Show Package | CSSD Dashboard',
-    }
-  },*/
-  {
-    path: '/Intro',
-    name: 'Intro',
-    view: 'Intro/Intro',
-    meta:{
-      title:'Intro | CSSD Dashboard',
-    }
-  },
 ]
diff --git a/src/views/Auth/ForgotPassword.vue b/src/views/Auth/ForgotPassword.vue
index 304916e..22c6051 100644
--- a/src/views/Auth/ForgotPassword.vue
+++ b/src/views/Auth/ForgotPassword.vue
@@ -1,70 +1,77 @@
 <template>
-  <v-form ref="form">
-    <v-container grid-list-xs>
-      <v-layout row wrap class="justify-center">
-        <v-flex xs12 md3 sm3 class="WM-WidthScreen-SM WM-WidthScreen-XS">
-          <material-card color="black" title="Login Page">
-            <v-layout row wrap class="px-3">
-              <v-flex xs12 md12 sm12>
-                <v-text-field
-                  v-model="form.cell_number"
-                  name="cellnumber"
-                  label="Cell Number"
-                  color="black"
-                  :rules="[rules.required, rules.cellNumberCounter]"
-                  mask="#### ### ####"
-                ></v-text-field>
-              </v-flex>
+    <v-form ref="form">
+        <v-container grid-list-xs>
+            <v-layout row wrap class="justify-center">
+                <v-flex xs12 md3 sm3 class="WM-WidthScreen-SM WM-WidthScreen-XS">
+                    <material-card color="black" title="Login Page">
+                        <v-layout row wrap class="px-3">
+                            <v-flex xs12 md12 sm12>
+                                <v-text-field
+                                        v-model="form.cell_number"
+                                        name="cellnumber"
+                                        label="Cell Number"
+                                        color="black"
+                                        :rules="[rules.required, rules.cellNumberCounter]"
+                                        mask="#### ### ####"
+                                ></v-text-field>
+                            </v-flex>
+                        </v-layout>
+                        <v-layout row wrap class="px-3">
+                            <v-flex xs12 md6 sm6 class="text-md-left text-sm-center text-xs-center">
+                                <v-btn
+                                        class="WM-CyanBlueGradient-BG"
+                                        style="padding:10px 60px"
+                                        @click="handleSubmit"
+                                >
+                                    <v-icon class="white--text mr-2 caption">fas fa-sign-in-alt</v-icon>
+                                    <span class="white--text">Send</span>
+                                </v-btn>
+                            </v-flex>
+                            <v-flex xs12 md6 sm6 class="text-md-right text-sm-center text-xs-center">
+                                <router-link class="black--text" :to="{name: 'Login'}">
+                                    <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black">
+                                        <v-icon class="black--text mr-2 caption">fas fa-sign-in-alt</v-icon>
+                                        <span class="black--text">Login</span>
+                                    </v-btn>
+                                </router-link>
+                            </v-flex>
+                        </v-layout>
+                    </material-card>
+                </v-flex>
             </v-layout>
-            <v-layout row wrap class="px-3">
-              <v-flex xs12 md6 sm6 class="text-md-left text-sm-center text-xs-center">
-                <v-btn
-                  class="WM-CyanBlueGradient-BG"
-                  style="padding:10px 60px"
-                  @click="handleSubmit"
-                >
-                  <v-icon class="white--text mr-2 caption">fas fa-sign-in-alt</v-icon>
-                  <span class="white--text">Send</span>
-                </v-btn>
-              </v-flex>
-              <v-flex xs12 md6 sm6 class="text-md-right text-sm-center text-xs-center">
-                <router-link class="black--text" :to="{name: 'Login'}">
-                  <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black">
-                    <v-icon class="black--text mr-2 caption">fas fa-sign-in-alt</v-icon>
-                    <span class="black--text">Login</span>
-                  </v-btn>
-                </router-link>
-              </v-flex>
-            </v-layout>
-          </material-card>
-        </v-flex>
-      </v-layout>
-    </v-container>
-  </v-form>
+        </v-container>
+    </v-form>
 </template>
 <script>
-import { mapActions, mapMutations } from "vuex";
-import { ApiService } from "@/services";
-import { urls } from "@/config/urls";
+import {mapActions, mapMutations} from "vuex";
+import {ApiService} from "@/services";
+import {urls} from "@/config/urls";
+
 export default {
-  data() {
-    return {
-      form :{
-        cell_number: ""
-      },
-      rules: {
-        required: value => !!value || "Required.",
-        cellNumberCounter: value => (value && value.length == 11) || "must 11 characters"
-      }
-    };
-  },
-  methods: {
-    ...mapActions("auth", ["forgotPassword"]),
-    async handleSubmit() {
-      if (this.$refs.form.validate()) { 
-        this.forgotPassword({form : this.form});
-      }
+    metaInfo() {
+        return {
+            title: this.$route.meta.title,
+            meta: this.$route.meta.metaTags || []
+        }
+    },
+    data() {
+        return {
+            form: {
+                cell_number: ""
+            },
+            rules: {
+                required: value => !!value || "Required.",
+                cellNumberCounter: value => (value && value.length == 11) || "must 11 characters"
+            }
+        };
+    },
+    methods: {
+        ...mapActions("auth", ["forgotPassword"]),
+        async handleSubmit() {
+            if (this.$refs.form.validate()) {
+                this.forgotPassword({form: this.form});
+            }
+        }
     }
-  }
 };
 </script>
diff --git a/src/views/Auth/Login.vue b/src/views/Auth/Login.vue
index 6a951db..902acdb 100644
--- a/src/views/Auth/Login.vue
+++ b/src/views/Auth/Login.vue
@@ -1,96 +1,104 @@
 <template>
-  <v-form ref="form" >
-    <v-container grid-list-xs>
-      <v-layout row wrap class="justify-center">
-        <v-flex xs12 md3 sm3 class="WM-WidthScreen-SM WM-WidthScreen-XS">
-          <material-card
-          color="black"
-          title="Login Page">
-            <v-layout row wrap class="px-3">
-              <v-flex xs12 md12 sm12>
-                <v-text-field
-                  v-model="cell_number"
-                  name="cellnumber"
-                  label="Cell Number"
-                  color="black"
-                  :rules="[rules.required, rules.cellNumberCounter]"
-                  mask="#### ### ####"
-                ></v-text-field>
-              </v-flex>
+    <v-form ref="form">
+        <v-container grid-list-xs>
+            <v-layout row wrap class="justify-center">
+                <v-flex xs12 md3 sm3 class="WM-WidthScreen-SM WM-WidthScreen-XS">
+                    <material-card
+                            color="black"
+                            title="Login Page">
+                        <v-layout row wrap class="px-3">
+                            <v-flex xs12 md12 sm12>
+                                <v-text-field
+                                        v-model="cell_number"
+                                        name="cellnumber"
+                                        label="Cell Number"
+                                        color="black"
+                                        :rules="[rules.required, rules.cellNumberCounter]"
+                                        mask="#### ### ####"
+                                ></v-text-field>
+                            </v-flex>
+                        </v-layout>
+                        <v-layout row wrap class="px-3">
+                            <v-flex xs12 md12 sm12>
+                                <v-text-field
+                                        name="password"
+                                        label="Password"
+                                        v-model="password"
+                                        :type="show1 ? 'text' : 'password'"
+                                        :append-icon="show1 ? 'visibility' : 'visibility_off'"
+                                        @click:append="show1 = !show1"
+                                        :rules="[rules.required, rules.passCounter]"
+                                        color="black"
+                                        class="pa-2"
+                                ></v-text-field>
+                            </v-flex>
+                        </v-layout>
+                        <v-layout row wrap class="px-3">
+                            <v-flex xs12 md6 sm6 class="text-md-left text-sm-center text-xs-center">
+                                <v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px" @click="handleSubmit">
+                                    <v-icon class="white--text mr-2 caption">fas fa-sign-in-alt</v-icon>
+                                    <span class="white--text">Login</span>
+                                </v-btn>
+                            </v-flex>
+                        </v-layout>
+                        <v-layout row wrap class="text-md-left text-sm-center text-xs-center">
+                            <v-flex xs12 md12 sm12 class="px-4 py-3">
+                                <router-link :to="{name: 'ForgotPassword'}">
+                                    <span class="black--text"
+                                          style="border-bottom:1px solid #000;">Forgot Password ?</span>
+                                </router-link>
+                            </v-flex>
+                        </v-layout>
+                    </material-card>
+                </v-flex>
             </v-layout>
-            <v-layout row wrap class="px-3">
-              <v-flex xs12 md12 sm12>
-              <v-text-field
-                  name="password"
-                  label="Password"
-                  v-model="password"
-                  :type="show1 ? 'text' : 'password'"
-                  :append-icon="show1 ? 'visibility' : 'visibility_off'"
-                  @click:append="show1 = !show1"
-                  :rules="[rules.required, rules.passCounter]"
-                  color="black"
-                  class="pa-2"
-                ></v-text-field>
-              </v-flex>
-            </v-layout>
-            <v-layout row wrap class="px-3">
-              <v-flex xs12 md6 sm6 class="text-md-left text-sm-center text-xs-center">
-                <v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px" @click="handleSubmit">
-                  <v-icon class="white--text mr-2 caption">fas fa-sign-in-alt</v-icon>
-                  <span class="white--text">Login</span>
-                </v-btn>
-              </v-flex>
-            </v-layout>
-            <v-layout row wrap class="text-md-left text-sm-center text-xs-center">
-              <v-flex xs12 md12 sm12 class="px-4 py-3">
-                <router-link :to="{name: 'ForgotPassword'}">
-                  <span class="black--text" style="border-bottom:1px solid #000;">Forgot Password ?</span>
-                </router-link>
-              </v-flex>
-            </v-layout>
-          </material-card>
-        </v-flex>
-      </v-layout>
-    </v-container>
-  </v-form>
+        </v-container>
+    </v-form>
 </template>
 <script>
-import { mapGetters, mapActions } from "vuex";
-export default {
-  data() {
-    return {
-      cell_number: "",
-      password: "",
-      show1: false,
-      rules: {
-        required: value => !!value || "Required.",
-        passCounter: value => (value && value.length >= 8) || "Min 8 characters",
-        cellNumberCounter: value => (value && value.length == 11) || "must 11 characters"
-      }
-    };
-  },
-  computed: {
-      ...mapGetters('auth', [
-          'authenticating',
-          'authenticationError',
-          'authenticationErrorCode'
-      ])
-  },
-  methods: {
-      ...mapActions('auth', [
-          'login'
-      ]),
-      async handleSubmit() {
-          // Perform a simple validation that cell_number and password have been typed in
-        if (this.$refs.form.validate()) {
-          const response = await this.login({cell_number: this.cell_number, password: this.password});
+import {mapGetters, mapActions} from "vuex";
 
-          if (!response.status || response.status !== 200) {
-            this.password = "";
-          }
+export default {
+    metaInfo() {
+        return {
+            title: this.$route.meta.title,
+            meta: this.$route.meta.metaTags || []
         }
-      }
-  }
+    },
+    data() {
+        return {
+            cell_number: "",
+            password: "",
+            show1: false,
+            rules: {
+                required: value => !!value || "Required.",
+                passCounter: value => (value && value.length >= 8) || "Min 8 characters",
+                cellNumberCounter: value => (value && value.length == 11) || "must 11 characters"
+            }
+        };
+    },
+    computed: {
+        ...mapGetters('auth', [
+            'authenticating',
+            'authenticationError',
+            'authenticationErrorCode'
+        ])
+    },
+    methods: {
+        ...mapActions('auth', [
+            'login'
+        ]),
+        async handleSubmit() {
+            // Perform a simple validation that cell_number and password have been typed in
+            if (this.$refs.form.validate()) {
+                const response = await this.login({cell_number: this.cell_number, password: this.password});
+
+                if (!response.status || response.status !== 200) {
+                    this.password = "";
+                }
+            }
+        }
+    }
 };
 </script>
 <style lang="scss" scoped>
diff --git a/src/views/Auth/Register.vue b/src/views/Auth/Register.vue
index f47baa2..5103174 100644
--- a/src/views/Auth/Register.vue
+++ b/src/views/Auth/Register.vue
@@ -1,133 +1,139 @@
 <template>
-  <v-form ref="form">
-    <v-container grid-list-xs>
-      <v-layout row wrap class="justify-center">
-        <v-flex xs12 md3 sm6 class="WM-WidthScreen-SM WM-WidthScreen-XS">
-          <material-card color="black" title="Register Page">
-            <v-layout column>
-              <v-flex xs12 md2 sm2>
-                <v-text-field
-                  name="name"
-                  label="Name"
-                  v-model="form.name"
-                  color="black"
-                  class="pa-2"
-                  :rules="[rules.required, rules.nameCounter]"
-                ></v-text-field>
-              </v-flex>
-              <v-flex xs12 md2 sm2>
-                <v-select
-                  :items="items"
-                  label="Gender"
-                  name="gender"
-                  v-model="form.gender"
-                  single-line
-                  class="pa-2"
-                  color="black"
-                  :rules="[rules.required]"
-                ></v-select>
-              </v-flex>
-             <v-flex xs2 md2 sm2>
-                <v-text-field
-                  v-model="form.country_code"
-                  name="country_code"
-                  label="Country Code"
-                  color="black"
-                  :rules="[rules.required, rules.countryCode]"
-                  mask="####"
-                ></v-text-field>
-              </v-flex>
-              <v-flex xs10 md10 sm10>
-                <v-text-field
-                  v-model="form.cell_number"
-                  name="cellnumber"
-                  label="Cell Number"
-                  color="black"
-                  :rules="[rules.required, rules.cellNumberCounter]"
-                  mask="#### ### ####"
-                ></v-text-field>
-              </v-flex>
-              <v-flex xs12 md2 sm2>
-                <v-text-field
-                  name="password"
-                  label="Password"
-                  v-model="form.password"
-                  :type="show1 ? 'text' : 'password'"
-                  :append-icon="show1 ? 'visibility' : 'visibility_off'"
-                  @click:append="show1 = !show1"
-                  color="black"
-                  class="pa-2"
-                  :rules="[rules.required, rules.passCounter]"
-                ></v-text-field>
-              </v-flex>
+    <v-form ref="form">
+        <v-container grid-list-xs>
+            <v-layout row wrap class="justify-center">
+                <v-flex xs12 md3 sm6 class="WM-WidthScreen-SM WM-WidthScreen-XS">
+                    <material-card color="black" title="Register Page">
+                        <v-layout column>
+                            <v-flex xs12 md2 sm2>
+                                <v-text-field
+                                        name="name"
+                                        label="Name"
+                                        v-model="form.name"
+                                        color="black"
+                                        class="pa-2"
+                                        :rules="[rules.required, rules.nameCounter]"
+                                ></v-text-field>
+                            </v-flex>
+                            <v-flex xs12 md2 sm2>
+                                <v-select
+                                        :items="items"
+                                        label="Gender"
+                                        name="gender"
+                                        v-model="form.gender"
+                                        single-line
+                                        class="pa-2"
+                                        color="black"
+                                        :rules="[rules.required]"
+                                ></v-select>
+                            </v-flex>
+                            <v-flex xs2 md2 sm2>
+                                <v-text-field
+                                        v-model="form.country_code"
+                                        name="country_code"
+                                        label="Country Code"
+                                        color="black"
+                                        :rules="[rules.required, rules.countryCode]"
+                                        mask="####"
+                                ></v-text-field>
+                            </v-flex>
+                            <v-flex xs10 md10 sm10>
+                                <v-text-field
+                                        v-model="form.cell_number"
+                                        name="cellnumber"
+                                        label="Cell Number"
+                                        color="black"
+                                        :rules="[rules.required, rules.cellNumberCounter]"
+                                        mask="#### ### ####"
+                                ></v-text-field>
+                            </v-flex>
+                            <v-flex xs12 md2 sm2>
+                                <v-text-field
+                                        name="password"
+                                        label="Password"
+                                        v-model="form.password"
+                                        :type="show1 ? 'text' : 'password'"
+                                        :append-icon="show1 ? 'visibility' : 'visibility_off'"
+                                        @click:append="show1 = !show1"
+                                        color="black"
+                                        class="pa-2"
+                                        :rules="[rules.required, rules.passCounter]"
+                                ></v-text-field>
+                            </v-flex>
+                        </v-layout>
+                        <v-layout row wrap>
+                            <v-flex xs12 md6 sm6 class="text-md-left text-sm-center text-xs-center">
+                                <v-btn @click="register" class="WM-CyanBlueGradient-BG" style="padding:10px 60px">
+                                    <v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>
+                                    <span class="white--text">Register</span>
+                                </v-btn>
+                            </v-flex>
+                            <v-flex
+                                    v-if="!isLogin"
+                                    xs12
+                                    md6
+                                    sm6
+                                    class="text-md-right text-sm-center text-xs-center"
+                            >
+                                <router-link to="/login">
+                                    <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black">
+                                        <v-icon class="black--text mr-2 caption">fas fa-sign-in-alt</v-icon>
+                                        <span class="black--text">Login</span>
+                                    </v-btn>
+                                </router-link>
+                            </v-flex>
+                        </v-layout>
+                    </material-card>
+                </v-flex>
             </v-layout>
-            <v-layout row wrap>
-              <v-flex xs12 md6 sm6 class="text-md-left text-sm-center text-xs-center">
-                <v-btn @click="register" class="WM-CyanBlueGradient-BG" style="padding:10px 60px">
-                  <v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>
-                  <span class="white--text">Register</span>
-                </v-btn>
-              </v-flex>
-              <v-flex
-                v-if="!isLogin"
-                xs12
-                md6
-                sm6
-                class="text-md-right text-sm-center text-xs-center"
-              >
-                <router-link to="/login">
-                  <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black">
-                    <v-icon class="black--text mr-2 caption">fas fa-sign-in-alt</v-icon>
-                    <span class="black--text">Login</span>
-                  </v-btn>
-                </router-link>
-              </v-flex>
-            </v-layout>
-          </material-card>
-        </v-flex>
-      </v-layout>
-    </v-container>
-  </v-form>
+        </v-container>
+    </v-form>
 </template>
 <script>
-import { TokenService, ApiService } from "@/services";
+import {TokenService, ApiService} from "@/services";
 
 export default {
-  data() {
-    const defaultForm = Object.freeze({
-      cell_number: "",
-      password: "",
-      name: "",
-      gender: "",
-      medical_center_id: this.$route.params.medicalCenter
-        ? this.$route.params.medicalCenter
-        : ''
-    });
-    return {
-      form: Object.assign({}, defaultForm),
-      show1: false,
-      items: ["Male", "FeMale"],
-      isLogin: TokenService.getInfo(),
-      rules: {
-        required: value => !!value || "Required.",
-        nameCounter: value => (value && value.length >= 5) || "Min 5 characters",
-        passCounter: value => (value && value.length >= 8) || "Min 8 characters",
-        cellNumberCounter: value => (value && value.length == 11) || "must 11 characters",
-        countryCode: value => (value && value.length == 4) || "must 4 characters for example (0098)"
-      }
-    };
-  },
-  methods: {
-    async register() {
-      if (this.$refs.form.validate()) {
-        var result = await ApiService.post(`register`, this.form);
-        if (result && result.status == 200) {
-          this.$router.push(
-            {name:`OperatorList`, params: { medicalCenter: this.form.medical_center_id }}
-          );
+    metaInfo() {
+        return {
+            title: this.$route.meta.title,
+            meta: this.$route.meta.metaTags || []
+        }
+    },
+    data() {
+        const defaultForm = Object.freeze({
+            cell_number: "",
+            password: "",
+            name: "",
+            gender: "",
+            medical_center_id: this.$route.params.medicalCenter
+                    ? this.$route.params.medicalCenter
+                    : ''
+        });
+        return {
+            form: Object.assign({}, defaultForm),
+            show1: false,
+            items: ["Male", "FeMale"],
+            isLogin: TokenService.getInfo(),
+            rules: {
+                required: value => !!value || "Required.",
+                nameCounter: value => (value && value.length >= 5) || "Min 5 characters",
+                passCounter: value => (value && value.length >= 8) || "Min 8 characters",
+                cellNumberCounter: value => (value && value.length == 11) || "must 11 characters",
+                countryCode: value => (value && value.length == 4) || "must 4 characters for example (0098)"
+            }
+        };
+    },
+    methods: {
+        async register() {
+            if (this.$refs.form.validate()) {
+                var result = await ApiService.post(`register`, this.form);
+                if (result && result.status == 200) {
+                    this.$router.push(
+                            {name: `OperatorList`, params: {medicalCenter: this.form.medical_center_id}}
+                    );
+                }
+            }
         }
-      }
     }
-  }
 };
 </script>
diff --git a/src/views/Cycle/AddEdit.vue b/src/views/Cycle/AddEdit.vue
index 6fe50da..517322f 100644
--- a/src/views/Cycle/AddEdit.vue
+++ b/src/views/Cycle/AddEdit.vue
@@ -111,6 +111,12 @@ import {urls} from "@/config/urls";
 import {mapMutations} from "vuex";
 
 export default {
+    metaInfo() {
+        return {
+            title: this.$route.meta.title,
+            meta: this.$route.meta.metaTags || []
+        }
+    },
     data() {
         return {
             fromMenuDate: false,
diff --git a/src/views/Cycle/List.vue b/src/views/Cycle/List.vue
index 7917baf..0f2bb9a 100644
--- a/src/views/Cycle/List.vue
+++ b/src/views/Cycle/List.vue
@@ -143,6 +143,12 @@ import {urls} from "@/config/urls";
 import {mapMutations, mapGetters} from "vuex";
 
 export default {
+    metaInfo() {
+        return {
+            title: this.$route.meta.title,
+            meta: this.$route.meta.metaTags || []
+        }
+    },
     data: () => ({
         headers: [
             {sortable: false, text: "ID", value: "Cycle ID"},
diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
index e09c948..0c00023 100644
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -54,6 +54,12 @@
 <script>
 // import { UserService } from '@/services';
 export default {
+    metaInfo() {
+        return {
+            title: this.$route.meta.title,
+            meta: this.$route.meta.metaTags || []
+        }
+    },
     data() {
         return {
             AdminCards: [
diff --git a/src/views/Intro/Intro.vue b/src/views/Intro/Intro.vue
index 3d64568..0cfaf17 100644
--- a/src/views/Intro/Intro.vue
+++ b/src/views/Intro/Intro.vue
@@ -1,178 +1,169 @@
 <template id="">
-  <div class="">
-    <v-toolbar color="white">
-      <v-toolbar-title v-text="title"></v-toolbar-title>
-    </v-toolbar>
-    <!-- _______________ Section 2::Begin _______________ -->
-    <section>
-      <v-parallax src="https://images.squarespace-cdn.com/content/v1/5bf5d5da506fbea76ffa4abe/1547249524951-CQ5U440SQYT23ODKL23G/ke17ZwdGBToddI8pDm48kKAwwdAfKsTlKsCcElEApLR7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QPOohDIaIeljMHgDF5CVlOqpeNLcJ80NK65_fV7S1UegTYNQkRo-Jk4EWsyBNhwKrKLo5CceA1-Tdpfgyxoog5ck0MD3_q0rY3jFJjjoLbQ/yenyi.jpg" height="600">
-        <v-layout
-        column
-        align-center
-        justify-center
-        class="white--text"
-        >
-        <!-- <img src="assets/vuetify.png" alt="Vuetify.js" height="200"> -->
-        <p class="display-4 mb-5">CSSD-DOC</p>
-        <h1 class="white--text mb-2 mt-5 display-1 text-center">Central Sterile Supply Department App & Software</h1>
-        <div class="subheading mb-4 text-center">Management & Traceability & Documentation solution for CSSD / SPD</div>
-      </v-layout>
-    </v-parallax>
-  </section>
-  <section>
-    <v-layout
-    column
-    wrap
-    class="my-12"
-    align-center
-    >
-    <v-flex xs12 sm4 class="my-4">
-      <div class="text-center">
-        <h2 class="headline">-Sterilization process monitoring</h2>
-        <span class="subheading">
+    <div class="">
+        <v-toolbar color="white">
+            <v-toolbar-title v-text="title"></v-toolbar-title>
+        </v-toolbar>
+        <!-- _______________ Section 2::Begin _______________ -->
+        <section>
+            <v-parallax
+                    src="https://images.squarespace-cdn.com/content/v1/5bf5d5da506fbea76ffa4abe/1547249524951-CQ5U440SQYT23ODKL23G/ke17ZwdGBToddI8pDm48kKAwwdAfKsTlKsCcElEApLR7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QPOohDIaIeljMHgDF5CVlOqpeNLcJ80NK65_fV7S1UegTYNQkRo-Jk4EWsyBNhwKrKLo5CceA1-Tdpfgyxoog5ck0MD3_q0rY3jFJjjoLbQ/yenyi.jpg"
+                    height="600">
+                <v-layout
+                        column
+                        align-center
+                        justify-center
+                        class="white--text"
+                >
+                    <!-- <img src="assets/vuetify.png" alt="Vuetify.js" height="200"> -->
+                    <p class="display-4 mb-5">CSSD-DOC</p>
+                    <h1 class="white--text mb-2 mt-5 display-1 text-center">Central Sterile Supply Department App &
+                        Software</h1>
+                    <div class="subheading mb-4 text-center">Management & Traceability & Documentation solution for CSSD
+                        / SPD
+                    </div>
+                </v-layout>
+            </v-parallax>
+        </section>
+        <section>
+            <v-layout
+                    column
+                    wrap
+                    class="my-12"
+                    align-center
+            >
+                <v-flex xs12 sm4 class="my-4">
+                    <div class="text-center">
+                        <h2 class="headline">-Sterilization process monitoring</h2>
+                        <span class="subheading">
           - Sterilizer test records
         </span>
-      </div>
-    </v-flex>
-    <v-flex xs12>
-      <v-container grid-list-xl>
-        <v-layout row wrap align-left>
-          <v-flex xs12 md4>
-            <v-card flat class="transparent">
-              <p v-for="(item , i) in items.items1"  :key="i" class="headline text-left">item</p>
-            </v-card>
-          </v-flex>
-          <v-flex xs12 md4>
-            <v-card flat class="transparent">
-              <p v-for="(item , i) in items.items2"  :key="i" class="headline text-left">item</p>
-            </v-card>
-          </v-flex>
-          <v-flex xs12 md4>
-            <v-card flat class="transparent">
-              <p v-for="(item , i) in items.items3"  :key="i" class="headline text-left" v-text="item"></p>
-            </v-card>
-          </v-flex>
-        </v-layout>
-      </v-container>
-    </v-flex>
-  </v-layout>
-</section>
-<!-- _______________ Section 2::End _______________ -->
+                    </div>
+                </v-flex>
+                <v-flex xs12>
+                    <v-container grid-list-xl>
+                        <v-layout row wrap align-left>
+                            <v-flex xs12 md4>
+                                <v-card flat class="transparent">
+                                    <p v-for="(item , i) in items.items1" :key="i" class="headline text-left">item</p>
+                                </v-card>
+                            </v-flex>
+                            <v-flex xs12 md4>
+                                <v-card flat class="transparent">
+                                    <p v-for="(item , i) in items.items2" :key="i" class="headline text-left">item</p>
+                                </v-card>
+                            </v-flex>
+                            <v-flex xs12 md4>
+                                <v-card flat class="transparent">
+                                    <p v-for="(item , i) in items.items3" :key="i" class="headline text-left"
+                                       v-text="item"></p>
+                                </v-card>
+                            </v-flex>
+                        </v-layout>
+                    </v-container>
+                </v-flex>
+            </v-layout>
+        </section>
+        <!-- _______________ Section 2::End _______________ -->
 
-<!-- _______________ Section 7::Begin _______________ -->
-<section>
-  <v-layout
-  column
-  wrap
-  class="my-12"
-  align-center
-  >
-  <v-flex xs12 sm4 class="my-4">
-    <div class="text-center">
-      <h2 class="headline">Product identification and traceability</h2>
-      <span class="subheading">
+        <!-- _______________ Section 7::Begin _______________ -->
+        <section>
+            <v-layout
+                    column
+                    wrap
+                    class="my-12"
+                    align-center
+            >
+                <v-flex xs12 sm4 class="my-4">
+                    <div class="text-center">
+                        <h2 class="headline">Product identification and traceability</h2>
+                        <span class="subheading">
         Cras facilisis mi vitae nunc
       </span>
-    </div>
-  </v-flex>
-  <v-flex xs12>
-    <v-container grid-list-xl>
-      <v-layout row wrap align-center>
-        <v-flex xs12 md4>
-          <v-card flat class="transparent">
-            <v-card-text class="text-center">
-              <v-icon x-large class="blue--text text--lighten-2">mdi-palette</v-icon>
-            </v-card-text>
-            <v-card-title primary-title class="layout justify-center">
-              <div class="headline text-center">Item</div>
-            </v-card-title>
-            <v-card-text>
-              Define and identify every instrument.
-            </v-card-text>
-          </v-card>
-        </v-flex>
-        <v-flex xs12 md4>
-          <v-card flat class="transparent">
-            <v-card-text class="text-center">
-              <v-icon x-large class="blue--text text--lighten-2">mdi-flash</v-icon>
-            </v-card-text>
-            <v-card-title primary-title class="layout justify-center">
-              <div class="headline">Fast development</div>
-            </v-card-title>
-            <v-card-text>
-              Cras facilisis mi vitae nunc lobortis pharetra. Nulla volutpat tincidunt ornare.
-              Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
-              Nullam in aliquet odio. Aliquam eu est vitae tellus bibendum tincidunt. Suspendisse potenti.
-            </v-card-text>
-          </v-card>
-        </v-flex>
-        <v-flex xs12 md4>
-          <v-card flat class="transparent">
-            <v-card-text class="text-center">
-              <v-icon x-large class="blue--text text--lighten-2">mdi-wrench</v-icon>
-            </v-card-text>
-            <v-card-title primary-title class="layout justify-center">
-              <div class="headline text-center">Completely Open Sourced</div>
-            </v-card-title>
-            <v-card-text>
-              Cras facilisis mi vitae nunc lobortis pharetra. Nulla volutpat tincidunt ornare.
-              Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
-              Nullam in aliquet odio. Aliquam eu est vitae tellus bibendum tincidunt. Suspendisse potenti.
-            </v-card-text>
-          </v-card>
-        </v-flex>
-      </v-layout>
-    </v-container>
-  </v-flex>
-</v-layout>
-</section>
+                    </div>
+                </v-flex>
+                <v-flex xs12>
+                    <v-container grid-list-xl>
+                        <v-layout row wrap align-center>
+                            <v-flex xs12 md4>
+                                <v-card flat class="transparent">
+                                    <v-card-text class="text-center">
+                                        <v-icon x-large class="blue--text text--lighten-2">mdi-palette</v-icon>
+                                    </v-card-text>
+                                    <v-card-title primary-title class="layout justify-center">
+                                        <div class="headline text-center">Item</div>
+                                    </v-card-title>
+                                    <v-card-text>
+                                        Define and identify every instrument.
+                                    </v-card-text>
+                                </v-card>
+                            </v-flex>
+                            <v-flex xs12 md4>
+                                <v-card flat class="transparent">
+                                    <v-card-text class="text-center">
+                                        <v-icon x-large class="blue--text text--lighten-2">mdi-flash</v-icon>
+                                    </v-card-text>
+                                    <v-card-title primary-title class="layout justify-center">
+                                        <div class="headline">Fast development</div>
+                                    </v-card-title>
+                                    <v-card-text>
+                                        Cras facilisis mi vitae nunc lobortis pharetra. Nulla volutpat tincidunt ornare.
+                                        Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac
+                                        turpis egestas.
+                                        Nullam in aliquet odio. Aliquam eu est vitae tellus bibendum tincidunt.
+                                        Suspendisse potenti.
+                                    </v-card-text>
+                                </v-card>
+                            </v-flex>
+                            <v-flex xs12 md4>
+                                <v-card flat class="transparent">
+                                    <v-card-text class="text-center">
+                                        <v-icon x-large class="blue--text text--lighten-2">mdi-wrench</v-icon>
+                                    </v-card-text>
+                                    <v-card-title primary-title class="layout justify-center">
+                                        <div class="headline text-center">Completely Open Sourced</div>
+                                    </v-card-title>
+                                    <v-card-text>
+                                        Cras facilisis mi vitae nunc lobortis pharetra. Nulla volutpat tincidunt ornare.
+                                        Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac
+                                        turpis egestas.
+                                        Nullam in aliquet odio. Aliquam eu est vitae tellus bibendum tincidunt.
+                                        Suspendisse potenti.
+                                    </v-card-text>
+                                </v-card>
+                            </v-flex>
+                        </v-layout>
+                    </v-container>
+                </v-flex>
+            </v-layout>
+        </section>
 
-</div>
+    </div>
 </template>
 <script>
 
 export default {
-  data: () => ({
-    items: [
-      {
-        items1 : [
-          'aaaaa',
-          'aaaaa',
-          'aaaaaa'
-        ],
-      },
-      {
-        items2 : [
-          'aaaaa',
-          'aaaaa',
-          'aaaaaa'
-        ],
-      },
-      {
-        items3 : [
-          'aaaaa',
-          'aaaaa',
-          'aaaaaa'
-        ],
-      },
-    ],
-    disabled: false,
-    dense: false,
-    twoLine: false,
-    threeLine: false,
-    shaped: false,
-    flat: false,
-    subheader: false,
-    inactive: false,
-    subGroup: false,
-    nav: false,
-    avatar: false,
-    rounded: false,
-  }),
-  components: {
 
-  },
-  created(){
-  },
+    data: () => ({
+        items: [
+            {items1: ['aaaaa', 'aaaaa', 'aaaaaa'],},
+            {items2: ['aaaaa', 'aaaaa', 'aaaaaa'],},
+            {items3: ['aaaaa', 'aaaaa', 'aaaaaa'],},
+        ],
+        disabled: false,
+        dense: false,
+        twoLine: false,
+        threeLine: false,
+        shaped: false,
+        flat: false,
+        subheader: false,
+        inactive: false,
+        subGroup: false,
+        nav: false,
+        avatar: false,
+        rounded: false,
+    }),
+    components: {},
+    created() {
+    },
 }
 </script>
diff --git a/src/views/Item/AddEdit.vue b/src/views/Item/AddEdit.vue
index 1da44a4..2fbb3c1 100644
--- a/src/views/Item/AddEdit.vue
+++ b/src/views/Item/AddEdit.vue
@@ -79,6 +79,12 @@ import {mapMutations} from 'vuex';
 import Dropzone from '@/components/core/Dropzone'
 
 export default {
+    metaInfo() {
+        return {
+            title: this.$route.meta.title,
+            meta: this.$route.meta.metaTags || []
+        }
+    },
     components: {
         'wm-Dropzone': Dropzone,
     },
diff --git a/src/views/Item/List.vue b/src/views/Item/List.vue
index 98bd2af..d19bc0d 100644
--- a/src/views/Item/List.vue
+++ b/src/views/Item/List.vue
@@ -157,6 +157,12 @@ import {mapMutations, mapGetters} from "vuex";
 import toast from "@/services/global/toast.service";
 
 export default {
+    metaInfo() {
+        return {
+            title: this.$route.meta.title,
+            meta: this.$route.meta.metaTags || []
+        }
+    },
     data: () => ({
         headers: [
             // {sortable: true,text: "ID",value: "id"},
diff --git a/src/views/Label/AddEdit.vue b/src/views/Label/AddEdit.vue
index c871801..54329ae 100644
--- a/src/views/Label/AddEdit.vue
+++ b/src/views/Label/AddEdit.vue
@@ -1,61 +1,63 @@
 <template>
-	<v-form ref="form">
-		<v-container grid-list-xs fluid>
-			<material-card color="black" title="Add Label on Set ">
-				<v-layout wrap class="px-5 my-3">
-					<v-flex xs12 sm6 md4 lg3 class="WM-FlexCenter pl-3">
-						<v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"/>
-						<v-text-field name="sterilizerId" label="Sterilizer ID" color="black"
-							v-model="formData.sterilizer_id" class="py-3 pr-3"/>
-					</v-flex>
-					<v-flex xs12 sm6 md4 lg3 class="WM-FlexCenter pl-3">
-						<v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"/>
-						<v-text-field name="cycle_number" label="Preferred Cycle Number" color="black" v-model="formData.cycle_number"
-							class="py-3 pr-3"/>
-					</v-flex>
-					<v-flex xs12 sm6 md4 lg3 class="WM-FlexCenter pl-3">
-						<v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"/>
-						<v-text-field name="lot_number" label="Lot Number" color="black" readonly v-model="lotNumber"
-							class="py-3 pr-3"/>
-					</v-flex>
-					<v-spacer/>
-					<v-flex xs12 sm6 md4 lg3 class="WM-FlexCenter">
-						<v-icon class="fas fa-check mr-2 WM-Margin-B-8"/>
-						<v-autocomplete color="black" :items="items" item-text="name" v-model="formData.package_id"
-							item-value="id" label="Package ID" class="py-3 pr-3" :filter="customFilter">
-							<template v-slot:chip="{ item }">
-								{{ item.name }} - {{ item.id }}
-							</template>
+    <v-form ref="form">
+        <v-container grid-list-xs fluid>
+            <material-card color="black" title="Add Label on Set ">
+                <v-layout wrap class="px-5 my-3">
+                    <v-flex xs12 sm6 md4 lg3 class="WM-FlexCenter pl-3">
+                        <v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"/>
+                        <v-text-field name="sterilizerId" label="Sterilizer ID" color="black"
+                                      v-model="formData.sterilizer_id" class="py-3 pr-3"/>
+                    </v-flex>
+                    <v-flex xs12 sm6 md4 lg3 class="WM-FlexCenter pl-3">
+                        <v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"/>
+                        <v-text-field name="cycle_number" label="Preferred Cycle Number" color="black"
+                                      v-model="formData.cycle_number"
+                                      class="py-3 pr-3"/>
+                    </v-flex>
+                    <v-flex xs12 sm6 md4 lg3 class="WM-FlexCenter pl-3">
+                        <v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"/>
+                        <v-text-field name="lot_number" label="Lot Number" color="black" readonly v-model="lotNumber"
+                                      class="py-3 pr-3"/>
+                    </v-flex>
+                    <v-spacer/>
+                    <v-flex xs12 sm6 md4 lg3 class="WM-FlexCenter">
+                        <v-icon class="fas fa-check mr-2 WM-Margin-B-8"/>
+                        <v-autocomplete color="black" :items="items" item-text="name" v-model="formData.package_id"
+                                        item-value="id" label="Package ID" class="py-3 pr-3" :filter="customFilter">
+                            <template v-slot:chip="{ item }">
+                                {{ item.name }} - {{ item.id }}
+                            </template>
 
-							<template v-slot:item="{ item }">
-								{{ item.name }} - {{ item.id }}
-							</template>
-						</v-autocomplete>
-					</v-flex>
-					<v-flex xs12 sm6 md4 lg3 class="WM-FlexCenter pl-3">
-						<v-icon class="far fa-calendar-alt mr-2"/>
-						<v-menu lazy :close-on-content-click="true" transition="v-scale-transition" offset-y
-							v-model="fromMenuSterile" style="width: 100%">
-							<v-text-field required slot="activator" label="Sterile Date" color="black" class="pr-3"
-								v-model="formData.sterile_date"/>
-							<v-date-picker color="pink" :min="today" no-title v-model="formData.sterile_date"
-								:date-format="date => new Date(date).toDateString()"/>
-						</v-menu>
-					</v-flex>
-					<v-flex xs12 sm6 md4 lg3 class="WM-FlexCenter pl-3">
-						<v-icon class="far fa-calendar-alt mr-2"/>
-						<v-menu lazy :close-on-content-click="true" transition="v-scale-transition" offset-y
-							v-model="fromMenuExpire" style="width: 100%">
-							<v-text-field required slot="activator" label="Expire Date" color="black" class="pr-3"
-								v-model="formData.expire_date"/>
-							<v-date-picker :show-current="showCurrent" :min="formData.sterile_date" color="pink" no-title
-								v-model="formData.expire_date"
-								:date-format="date => new Date(date).toDateString()"/>
-						</v-menu>
-					</v-flex>
-				</v-layout>
+                            <template v-slot:item="{ item }">
+                                {{ item.name }} - {{ item.id }}
+                            </template>
+                        </v-autocomplete>
+                    </v-flex>
+                    <v-flex xs12 sm6 md4 lg3 class="WM-FlexCenter pl-3">
+                        <v-icon class="far fa-calendar-alt mr-2"/>
+                        <v-menu lazy :close-on-content-click="true" transition="v-scale-transition" offset-y
+                                v-model="fromMenuSterile" style="width: 100%">
+                            <v-text-field required slot="activator" label="Sterile Date" color="black" class="pr-3"
+                                          v-model="formData.sterile_date"/>
+                            <v-date-picker color="pink" :min="today" no-title v-model="formData.sterile_date"
+                                           :date-format="date => new Date(date).toDateString()"/>
+                        </v-menu>
+                    </v-flex>
+                    <v-flex xs12 sm6 md4 lg3 class="WM-FlexCenter pl-3">
+                        <v-icon class="far fa-calendar-alt mr-2"/>
+                        <v-menu lazy :close-on-content-click="true" transition="v-scale-transition" offset-y
+                                v-model="fromMenuExpire" style="width: 100%">
+                            <v-text-field required slot="activator" label="Expire Date" color="black" class="pr-3"
+                                          v-model="formData.expire_date"/>
+                            <v-date-picker :show-current="showCurrent" :min="formData.sterile_date" color="pink"
+                                           no-title
+                                           v-model="formData.expire_date"
+                                           :date-format="date => new Date(date).toDateString()"/>
+                        </v-menu>
+                    </v-flex>
+                </v-layout>
 
-				<v-layout row wrap justify-center align-center>
+                <v-layout row wrap justify-center align-center>
                     <v-flex xs12 sm6 md4 lg3 class="text-md-center text-sm-center text-xs-center">
                         <router-link :to="{ name: 'AllLabels' }">
                             <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black">
@@ -64,108 +66,115 @@
                             </v-btn>
                         </router-link>
                     </v-flex>
-					<v-flex xs12 sm6 md4 lg3 class="text-md-center text-xs-center">
-						<v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px" @click="submitForm()">
-							<v-icon class="white--text mr-2 caption">fas fa-check</v-icon>
-							<span class="white--text">SAVE</span>
-						</v-btn>
-					</v-flex>
-				</v-layout>
-			</material-card>
-		</v-container>
-	</v-form>
+                    <v-flex xs12 sm6 md4 lg3 class="text-md-center text-xs-center">
+                        <v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px" @click="submitForm()">
+                            <v-icon class="white--text mr-2 caption">fas fa-check</v-icon>
+                            <span class="white--text">SAVE</span>
+                        </v-btn>
+                    </v-flex>
+                </v-layout>
+            </material-card>
+        </v-container>
+    </v-form>
 </template>
 
 <script>
-import { ApiService } from "@/services";
-import { urls } from "@/config/urls";
-export default {
-	data() {
-		return {
-			showCurrent: false,
-			fromMenuSterile: false,
-			fromMenuExpire: false,
-            today: new Date().toISOString().split("T")[0],
-			formData: {
-				result: "",
-				package_id: "",
-				expire_date: null,
-				sterilizer_id: '',
-				cycle_number: '',
-				sterile_date: new Date().toISOString().substr(0, 10)
-			},
-			items: [],
-			rules: {
-				required: value => !!value || "Required.",
-				counter: value =>
-					!value ||
-					value.length == 0 ||
-					value.length >= 5 ||
-					"Min 5 characters"
-			}
-		};
-	},
-	created() {
-		if (this.$route.params.label) {
-			this.load(this.$route.params.label);
-		}
-		this.loadItems();
-	},
-	computed: {
-		lotNumber() {
-			return this.formData.sterilizer_id + ' - ' + this.formData.cycle_number;
-		}
-	},
-	methods: {
-		customFilter(item, queryText) {
-			const name = item.name.toLowerCase();
-			const udi = item.udi ? item.udi.toLowerCase() : null;
-			const searchText = queryText.toLowerCase();
-			if (udi) {
-				return name.indexOf(searchText) > -1 ||
-					udi.indexOf(searchText) > -1
-			}
-			return name.indexOf(searchText) > -1
-		},
-		async load(id) {
-			const result = await ApiService.get(urls.editLabel(id));
-			if (result && result.status == 200) {
-				this.formData = result.data.data;
-			}
-		},
-		async loadItems() {
-			const result = await ApiService.get(urls.listAllPackage());
-			if (result && result.status == 200) {
-				this.items = result.data.data;
-			}
-		},
-		async submitForm() {
-			let result;
-			this.formData['lot_number'] = this.lotNumber;
-			if (this.$route.params.label) {
-				result = await ApiService.put(urls.updateLabel(this.$route.params.label), this.formData);
-			} else {
-				result = await ApiService.post(urls.storeLabel, this.formData);
-			}
+import {ApiService} from "@/services";
+import {urls} from "@/config/urls";
 
-			if (result && result.status == 200) {
-				this.$router.push({ name: 'AllLabels' });
-			}
-		}
-	}
+export default {
+    metaInfo() {
+        return {
+            title: this.$route.meta.title,
+            meta: this.$route.meta.metaTags || []
+        }
+    },
+    data() {
+        return {
+            showCurrent: false,
+            fromMenuSterile: false,
+            fromMenuExpire: false,
+            today: new Date().toISOString().split("T")[0],
+            formData: {
+                result: "",
+                package_id: "",
+                expire_date: null,
+                sterilizer_id: '',
+                cycle_number: '',
+                sterile_date: new Date().toISOString().substr(0, 10)
+            },
+            items: [],
+            rules: {
+                required: value => !!value || "Required.",
+                counter: value =>
+                        !value ||
+                        value.length == 0 ||
+                        value.length >= 5 ||
+                        "Min 5 characters"
+            }
+        };
+    },
+    created() {
+        if (this.$route.params.label) {
+            this.load(this.$route.params.label);
+        }
+        this.loadItems();
+    },
+    computed: {
+        lotNumber() {
+            return this.formData.sterilizer_id + ' - ' + this.formData.cycle_number;
+        }
+    },
+    methods: {
+        customFilter(item, queryText) {
+            const name = item.name.toLowerCase();
+            const udi = item.udi ? item.udi.toLowerCase() : null;
+            const searchText = queryText.toLowerCase();
+            if (udi) {
+                return name.indexOf(searchText) > -1 ||
+                        udi.indexOf(searchText) > -1
+            }
+            return name.indexOf(searchText) > -1
+        },
+        async load(id) {
+            const result = await ApiService.get(urls.editLabel(id));
+            if (result && result.status == 200) {
+                this.formData = result.data.data;
+            }
+        },
+        async loadItems() {
+            const result = await ApiService.get(urls.listAllPackage());
+            if (result && result.status == 200) {
+                this.items = result.data.data;
+            }
+        },
+        async submitForm() {
+            let result;
+            this.formData['lot_number'] = this.lotNumber;
+            if (this.$route.params.label) {
+                result = await ApiService.put(urls.updateLabel(this.$route.params.label), this.formData);
+            } else {
+                result = await ApiService.post(urls.storeLabel, this.formData);
+            }
+
+            if (result && result.status == 200) {
+                this.$router.push({name: 'AllLabels'});
+            }
+        }
+    }
 };
 </script>
 <style>
 .v-btn--floating {
-	padding: 0 !important;
+    padding: 0 !important;
 }
 
 .theme--light.v-btn.v-btn--flat {
-	color: rgba(0, 0, 0, .87) !important;
+    color: rgba(0, 0, 0, .87) !important;
 }
 
 .v-btn--floating,
 .v-btn--icon:before {
-	border-radius: 50% !important;
+    border-radius: 50% !important;
 }
 </style>
diff --git a/src/views/Label/List.vue b/src/views/Label/List.vue
index 023c785..000c8b5 100644
--- a/src/views/Label/List.vue
+++ b/src/views/Label/List.vue
@@ -145,6 +145,12 @@ import {urls} from "@/config/urls";
 import {mapMutations, mapGetters} from "vuex";
 
 export default {
+    metaInfo() {
+        return {
+            title: this.$route.meta.title,
+            meta: this.$route.meta.metaTags || []
+        }
+    },
     data: () => ({
         headers: [
             {sortable: false, text: "ID", value: "Label ID"},
diff --git a/src/views/MedicalCenter/AddEdit.vue b/src/views/MedicalCenter/AddEdit.vue
index 5084ca8..093de14 100644
--- a/src/views/MedicalCenter/AddEdit.vue
+++ b/src/views/MedicalCenter/AddEdit.vue
@@ -71,6 +71,12 @@ import {ApiService} from "@/services";
 import {urls} from "@/config/urls";
 
 export default {
+    metaInfo() {
+        return {
+            title: this.$route.meta.title,
+            meta: this.$route.meta.metaTags || []
+        }
+    },
     data() {
         return {
             medicalCenter: {
diff --git a/src/views/MedicalCenter/List.vue b/src/views/MedicalCenter/List.vue
index 29e1068..b9e478b 100644
--- a/src/views/MedicalCenter/List.vue
+++ b/src/views/MedicalCenter/List.vue
@@ -1,154 +1,164 @@
 <template>
-  <v-container fluid>
-    <material-card class color="black" title="Medical Centers List" text>
-      <v-layout wrap class="px-5 mb-3">
-        <v-flex xs12 md3 sm3 class="pr-3">
-          <v-text-field label="Name" v-model="filter.name" color="black"/>
-        </v-flex>
-          <v-spacer/>
-          <v-flex class xs12 sm6 md6 lg2 xl1>
-              <v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 30px" @click="load()">
-                  <v-icon class="white--text mr-2 caption">fas fa-search</v-icon>
-                  <span class="white--text">Filter</span>
-              </v-btn>
-          </v-flex>
-          <v-flex xs12 sm6 md6 lg1 xl1 class="text-xs-right">
-              <router-link :to="{ name: 'AddMedicalCenter' }">
-                  <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black">
-                      <v-icon class="black--text mr-2 caption">fas fa-plus</v-icon>
-                      <span class="black--text">Add</span>
-                  </v-btn>
-              </router-link>
-          </v-flex>
-      </v-layout>
-      <v-layout class="px-4 my-3">
-        <v-divider/>
-      </v-layout>
-      <v-layout align-center justify-center wrap class="px-5 mt-3">
-        <v-flex md12>
-          <v-data-table :headers="headers" :items="items" hide-actions>
-            <template slot="headerCell" slot-scope="{ header }">
-              <span class="subheading font-weight-light text-white text--darken-3" v-text="header.text" />
-            </template>
-            <template slot="items" slot-scope="{ item }">
-              <td class="title font-weight-light WM-NoLetterSpacing">{{ item.name }}</td>
-              <td class="title font-weight-light">{{ $d(new Date(item.created_at), 'long') }}</td>
-              <td class="title font-weight-light">{{ item.users_count }} Operator</td>
-              <td class="text-xs-right FlexBtn Height-MD-80 Height-SM-48 justify-self-end">
-                <v-tooltip bottom open-on-hover>
-                  <template v-slot:activator="{ on, attrs }">
-                    <router-link class="LinkBtn"
-                      :to="{ name: 'EditMedicalCenter', params: { medicalCenter: item.id } }">
-                      <v-btn v-bind="attrs" v-on="on" color="cyan" class="mr-2 WM-ActionButton">
-                        <v-icon class="white--text mr-2 caption">fas fa-pen</v-icon>
-                        <span>Edit</span>
-                      </v-btn>
-                    </router-link>
-                  </template>
-                  <span>Edit</span>
-                </v-tooltip>
-                <v-tooltip bottom open-on-hover>
-                  <template v-slot:activator="{ on, attrs }">
-                    <router-link class="LinkBtn" :to="{ name: 'OperatorList', params: { medicalCenter: item.id } }">
-                      <v-btn v-bind="attrs" v-on="on" color="orange darken-1" class="mr-2 WM-ActionButton">
-                        <v-icon class="white--text mr-2 caption">fas fa-user</v-icon>
-                        <span>Operator</span>
-                      </v-btn>
-                    </router-link>
-                  </template>
-                  <span>Operator</span>
-                </v-tooltip>
-                <v-tooltip bottom open-on-hover>
-                  <template v-slot:activator="{ on, attrs }">
-                    <v-btn v-bind="attrs" v-on="on" color="pink" @click="remove(item.id)" class="WM-ActionButton">
-                      <v-icon class="white--text mr-2 caption">fas fa-trash</v-icon>
-                      <span>Remove</span>
+    <v-container fluid>
+        <material-card class color="black" title="Medical Centers List" text>
+            <v-layout wrap class="px-5 mb-3">
+                <v-flex xs12 md3 sm3 class="pr-3">
+                    <v-text-field label="Name" v-model="filter.name" color="black"/>
+                </v-flex>
+                <v-spacer/>
+                <v-flex class xs12 sm6 md6 lg2 xl1>
+                    <v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 30px" @click="load()">
+                        <v-icon class="white--text mr-2 caption">fas fa-search</v-icon>
+                        <span class="white--text">Filter</span>
                     </v-btn>
-                  </template>
-                  <span>Remove</span>
-                </v-tooltip>
-              </td>
-            </template>
-          </v-data-table>
-        </v-flex>
-      </v-layout>
-      <v-divider/>
-      <div class="text-xs-center mt-2" v-if="lastPage > 1">
-        <v-pagination color="black" v-model="currentPage" :length="lastPage" :total-visible="6"></v-pagination>
-      </div>
-      <v-layout row wrap align-center justify-center class="mt-3">
-        <router-link :to="{ name: 'Dashboard' }">
-          <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black ml-5">
-            <v-icon class="black--text mr-2 caption">fas fa-chevron-left</v-icon>
-            <span class="black--text">Back</span>
-          </v-btn>
-        </router-link>
-      </v-layout>
-    </material-card>
-  </v-container>
+                </v-flex>
+                <v-flex xs12 sm6 md6 lg1 xl1 class="text-xs-right">
+                    <router-link :to="{ name: 'AddMedicalCenter' }">
+                        <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black">
+                            <v-icon class="black--text mr-2 caption">fas fa-plus</v-icon>
+                            <span class="black--text">Add</span>
+                        </v-btn>
+                    </router-link>
+                </v-flex>
+            </v-layout>
+            <v-layout class="px-4 my-3">
+                <v-divider/>
+            </v-layout>
+            <v-layout align-center justify-center wrap class="px-5 mt-3">
+                <v-flex md12>
+                    <v-data-table :headers="headers" :items="items" hide-actions>
+                        <template slot="headerCell" slot-scope="{ header }">
+                            <span class="subheading font-weight-light text-white text--darken-3" v-text="header.text"/>
+                        </template>
+                        <template slot="items" slot-scope="{ item }">
+                            <td class="title font-weight-light WM-NoLetterSpacing">{{ item.name }}</td>
+                            <td class="title font-weight-light">{{ $d(new Date(item.created_at), 'long') }}</td>
+                            <td class="title font-weight-light">{{ item.users_count }} Operator</td>
+                            <td class="text-xs-right FlexBtn Height-MD-80 Height-SM-48 justify-self-end">
+                                <v-tooltip bottom open-on-hover>
+                                    <template v-slot:activator="{ on, attrs }">
+                                        <router-link class="LinkBtn"
+                                                     :to="{ name: 'EditMedicalCenter', params: { medicalCenter: item.id } }">
+                                            <v-btn v-bind="attrs" v-on="on" color="cyan" class="mr-2 WM-ActionButton">
+                                                <v-icon class="white--text mr-2 caption">fas fa-pen</v-icon>
+                                                <span>Edit</span>
+                                            </v-btn>
+                                        </router-link>
+                                    </template>
+                                    <span>Edit</span>
+                                </v-tooltip>
+                                <v-tooltip bottom open-on-hover>
+                                    <template v-slot:activator="{ on, attrs }">
+                                        <router-link class="LinkBtn"
+                                                     :to="{ name: 'OperatorList', params: { medicalCenter: item.id } }">
+                                            <v-btn v-bind="attrs" v-on="on" color="orange darken-1"
+                                                   class="mr-2 WM-ActionButton">
+                                                <v-icon class="white--text mr-2 caption">fas fa-user</v-icon>
+                                                <span>Operator</span>
+                                            </v-btn>
+                                        </router-link>
+                                    </template>
+                                    <span>Operator</span>
+                                </v-tooltip>
+                                <v-tooltip bottom open-on-hover>
+                                    <template v-slot:activator="{ on, attrs }">
+                                        <v-btn v-bind="attrs" v-on="on" color="pink" @click="remove(item.id)"
+                                               class="WM-ActionButton">
+                                            <v-icon class="white--text mr-2 caption">fas fa-trash</v-icon>
+                                            <span>Remove</span>
+                                        </v-btn>
+                                    </template>
+                                    <span>Remove</span>
+                                </v-tooltip>
+                            </td>
+                        </template>
+                    </v-data-table>
+                </v-flex>
+            </v-layout>
+            <v-divider/>
+            <div class="text-xs-center mt-2" v-if="lastPage > 1">
+                <v-pagination color="black" v-model="currentPage" :length="lastPage" :total-visible="6"></v-pagination>
+            </div>
+            <v-layout row wrap align-center justify-center class="mt-3">
+                <router-link :to="{ name: 'Dashboard' }">
+                    <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black ml-5">
+                        <v-icon class="black--text mr-2 caption">fas fa-chevron-left</v-icon>
+                        <span class="black--text">Back</span>
+                    </v-btn>
+                </router-link>
+            </v-layout>
+        </material-card>
+    </v-container>
 </template>
 
 <script>
-import { ApiService } from "@/services";
-import { urls } from "@/config/urls";
-import { mapMutations } from 'vuex'
+import {ApiService} from "@/services";
+import {urls} from "@/config/urls";
+import {mapMutations} from 'vuex'
+
 export default {
-  data: () => ({
-    headers: [
-      {sortable: false, text: "Hospital Name", value: "name"},
-      {sortable: false, text: "Date", value: "date"},
-      {sortable: false, text: "Operator", value: "operator"},
-      {sortable: false, text: "Action", value: "action", align: "center",}
-    ],
-    filter: {
-      name: ''
+    metaInfo() {
+        return {
+            title: this.$route.meta.title,
+            meta: this.$route.meta.metaTags || []
+        }
     },
-    items: [],
-    currentPage: 1,
-    lastPage: 1
-  }),
-  created() {
-    this.load();
-  },
-  methods: {
-    ...mapMutations("modal", ["changeCurrentModal", "closeModal"]),
-    async load(page = 1) {
-      let filter = `?page=${page}&name=${this.filter.name}`;
-      const result = await ApiService.get(urls.listMedicalCenter(filter));
-      this.items = result.data.data.data;
-      this.currentPage = result.data.data.current_page;
-      this.lastPage = result.data.data.last_page;
+    data: () => ({
+        headers: [
+            {sortable: false, text: "Hospital Name", value: "name"},
+            {sortable: false, text: "Date", value: "date"},
+            {sortable: false, text: "Operator", value: "operator"},
+            {sortable: false, text: "Action", value: "action", align: "center",}
+        ],
+        filter: {
+            name: ''
+        },
+        items: [],
+        currentPage: 1,
+        lastPage: 1
+    }),
+    created() {
+        this.load();
     },
-    async remove(id) {
-      this.changeCurrentModal({
-        modal: "modal-user-confirmation",
-        properties: {
-          width: '30'
+    methods: {
+        ...mapMutations("modal", ["changeCurrentModal", "closeModal"]),
+        async load(page = 1) {
+            let filter = `?page=${page}&name=${this.filter.name}`;
+            const result = await ApiService.get(urls.listMedicalCenter(filter));
+            this.items = result.data.data.data;
+            this.currentPage = result.data.data.current_page;
+            this.lastPage = result.data.data.last_page;
         },
-        success: async () => {
-          const result = await ApiService.delete(urls.deleteMedicalCenter(id));
-          this.closeModal();
-          if (result && result.status == 200) {
-            for (const key in this.items) {
-              if (this.items[key].id == id) {
-                this.items.splice(key, 1);
-              }
-            }
-          }
-        },
-      });
+        async remove(id) {
+            this.changeCurrentModal({
+                modal: "modal-user-confirmation",
+                properties: {
+                    width: '30'
+                },
+                success: async () => {
+                    const result = await ApiService.delete(urls.deleteMedicalCenter(id));
+                    this.closeModal();
+                    if (result && result.status == 200) {
+                        for (const key in this.items) {
+                            if (this.items[key].id == id) {
+                                this.items.splice(key, 1);
+                            }
+                        }
+                    }
+                },
+            });
+        }
+    },
+    watch: {
+        currentPage(page) {
+            this.load(page);
+        }
     }
-  },
-  watch: {
-    currentPage(page) {
-      this.load(page);
-    }
-  }
 };
 </script>
 
 <style lang="css" scoped>
 .WM-ActionButton {
-  padding: 8px 22px;
+    padding: 8px 22px;
 }
 </style>
diff --git a/src/views/MedicalCenter/OperatorList.vue b/src/views/MedicalCenter/OperatorList.vue
index 3390a57..58cd70f 100644
--- a/src/views/MedicalCenter/OperatorList.vue
+++ b/src/views/MedicalCenter/OperatorList.vue
@@ -1,200 +1,189 @@
 <template>
-  <v-container grid-list-xs>
-    <material-card class color="black" :title="`Operator List`" text>
-      <v-layout row wrap class="px-5 mb-3">
-        <v-flex xs12 md3 xs3>
-          <v-text-field name="Name" v-model="filter.name" label="Name" class="pa-2" color="black"></v-text-field>
-        </v-flex>
-        <v-flex xs12 md3 xs3>
-          <v-text-field name="cell_number"  v-model="filter.cell_number" label="Cell Number" class="pa-2" color="black"></v-text-field>
-        </v-flex>
-        <v-flex xs12 md2 xs3>
-          <v-select :items="roles" name="roles" v-model="filter.role"  label="Roles" class="pa-2" color="black"></v-select>
-        </v-flex>
-        <v-flex xs12 md2 sm2 class="text-xs-right">
-          <v-btn class="WM-CyanBlueGradient-BG" @click="load" style="padding:10px 30px">
-            <v-icon class="white--text mr-2 caption">fas fa-search</v-icon>
-            <span class="white--text">Filter</span>
-          </v-btn>
-        </v-flex>
-        <v-spacer></v-spacer>
-        <v-flex xs12 md2 sm2 class="text-xs-right">
-          <router-link :to="`/add-operator/${$route.params.medicalCenter}`">
-            <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black">
-              <v-icon class="black--text mr-2 caption">fas fa-plus</v-icon>
-              <span class="black--text">Add</span>
-            </v-btn>
-          </router-link>
-        </v-flex>
-      </v-layout>
-      <v-layout row align-center justify-center wrap class="px-5 mt-3">
-        <v-flex md12>
-          <v-data-table :headers="headers" :items="items" hide-actions>
-            <template slot="headerCell" slot-scope="{ header }">
+    <v-container grid-list-xs>
+        <material-card class color="black" :title="`Operator List`" text>
+            <v-layout row wrap class="px-5 mb-3">
+                <v-flex xs12 md3 xs3>
+                    <v-text-field name="Name" v-model="filter.name" label="Name" class="pa-2"
+                                  color="black"></v-text-field>
+                </v-flex>
+                <v-flex xs12 md3 xs3>
+                    <v-text-field name="cell_number" v-model="filter.cell_number" label="Cell Number" class="pa-2"
+                                  color="black"></v-text-field>
+                </v-flex>
+                <v-flex xs12 md2 xs3>
+                    <v-select :items="roles" name="roles" v-model="filter.role" label="Roles" class="pa-2"
+                              color="black"></v-select>
+                </v-flex>
+                <v-flex xs12 md2 sm2 class="text-xs-right">
+                    <v-btn class="WM-CyanBlueGradient-BG" @click="load" style="padding:10px 30px">
+                        <v-icon class="white--text mr-2 caption">fas fa-search</v-icon>
+                        <span class="white--text">Filter</span>
+                    </v-btn>
+                </v-flex>
+                <v-spacer></v-spacer>
+                <v-flex xs12 md2 sm2 class="text-xs-right">
+                    <router-link :to="`/add-operator/${$route.params.medicalCenter}`">
+                        <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black">
+                            <v-icon class="black--text mr-2 caption">fas fa-plus</v-icon>
+                            <span class="black--text">Add</span>
+                        </v-btn>
+                    </router-link>
+                </v-flex>
+            </v-layout>
+            <v-layout row align-center justify-center wrap class="px-5 mt-3">
+                <v-flex md12>
+                    <v-data-table :headers="headers" :items="items" hide-actions>
+                        <template slot="headerCell" slot-scope="{ header }">
               <span
-                class="subheading font-weight-light text-white text--darken-3"
-                v-text="header.text"
+                      class="subheading font-weight-light text-white text--darken-3"
+                      v-text="header.text"
               />
-            </template>
-            <template slot="items" slot-scope="{ item }">
-              <td class="headline font-weight-light">{{ item.name }}</td>
-              <td class="title font-weight-light">
-                <span v-for="(role, key) in item.roles" :key="key">{{ role.name }}</span>
-              </td>
-              <td class="title font-weight-light">{{ item.cell_number }}</td>
-              <td class="title font-weight-light">{{ item.status }}</td>
-              <td class="text-xs-right justify-self-end">
-                <v-btn
-                  :color="item.status == 'Active' ? 'red' : 'green'"
-                  @click="changeStatus(item.id)"
-                  class="mr-2 WM-ActionButton"
-                >
-                  <template v-if="item.status == 'Active'">
-                    <v-icon class="white--text mr-2 caption">fas fa-user-tag</v-icon>
-                    <span v-if="item.status == 'Active'">Suspended</span>
-                  </template>
-                  <template v-else>
-                    <v-icon class="white--text mr-2 caption">fas fa-user-tag</v-icon>
-                    <span>Active</span>
-                  </template>
-                </v-btn>
-                <v-btn
-                  color="orange darken-1"
-                  @click="changeRoleModal(item)"
-                  class="mr-2 WM-ActionButton"
-                >
-                  <v-icon class="white--text mr-2 caption">fas fa-user-tag</v-icon>
-                  <span>Role</span>
-                </v-btn>
-                <v-btn color="pink" class="WM-ActionButton" @click="remove(item.id)">
-                  <v-icon class="white--text mr-2 caption">fas fa-times</v-icon>
-                  <span>Remove</span>
-                </v-btn>
-              </td>
-            </template>
-          </v-data-table>
-        </v-flex>
-      </v-layout>
-      <v-divider/>
-      <v-layout row wrap align-center justify-center class="mt-3">
-        <router-link to="/manage-medical-center">
-          <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black ml-5">
-            <v-icon class="black--text mr-2 caption">fas fa-chevron-left</v-icon>
-            <span class="black--text">Back</span>
-          </v-btn>
-        </router-link>
-      </v-layout>
-    </material-card>
-  </v-container>
+                        </template>
+                        <template slot="items" slot-scope="{ item }">
+                            <td class="headline font-weight-light">{{ item.name }}</td>
+                            <td class="title font-weight-light">
+                                <span v-for="(role, key) in item.roles" :key="key">{{ role.name }}</span>
+                            </td>
+                            <td class="title font-weight-light">{{ item.cell_number }}</td>
+                            <td class="title font-weight-light">{{ item.status }}</td>
+                            <td class="text-xs-right justify-self-end">
+                                <v-btn
+                                        :color="item.status == 'Active' ? 'red' : 'green'"
+                                        @click="changeStatus(item.id)"
+                                        class="mr-2 WM-ActionButton"
+                                >
+                                    <template v-if="item.status == 'Active'">
+                                        <v-icon class="white--text mr-2 caption">fas fa-user-tag</v-icon>
+                                        <span v-if="item.status == 'Active'">Suspended</span>
+                                    </template>
+                                    <template v-else>
+                                        <v-icon class="white--text mr-2 caption">fas fa-user-tag</v-icon>
+                                        <span>Active</span>
+                                    </template>
+                                </v-btn>
+                                <v-btn
+                                        color="orange darken-1"
+                                        @click="changeRoleModal(item)"
+                                        class="mr-2 WM-ActionButton"
+                                >
+                                    <v-icon class="white--text mr-2 caption">fas fa-user-tag</v-icon>
+                                    <span>Role</span>
+                                </v-btn>
+                                <v-btn color="pink" class="WM-ActionButton" @click="remove(item.id)">
+                                    <v-icon class="white--text mr-2 caption">fas fa-times</v-icon>
+                                    <span>Remove</span>
+                                </v-btn>
+                            </td>
+                        </template>
+                    </v-data-table>
+                </v-flex>
+            </v-layout>
+            <v-divider/>
+            <v-layout row wrap align-center justify-center class="mt-3">
+                <router-link to="/manage-medical-center">
+                    <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black ml-5">
+                        <v-icon class="black--text mr-2 caption">fas fa-chevron-left</v-icon>
+                        <span class="black--text">Back</span>
+                    </v-btn>
+                </router-link>
+            </v-layout>
+        </material-card>
+    </v-container>
 </template>
 <script>
-import { ApiService } from "@/services";
-import { mapMutations, mapGetters } from "vuex";
-import { urls } from "@/config/urls";
-import { roles } from "@/config/utils";
+import {ApiService} from "@/services";
+import {mapMutations, mapGetters} from "vuex";
+import {urls} from "@/config/urls";
+import {roles} from "@/config/utils";
+
 export default {
-  data: () => ({
-    headers: [
-      {
-        sortable: true,
-        text: "Operator Name",
-        value: "name"
-      },
-      {
-        sortable: false,
-        text: "Role",
-        value: "role"
-      },
-      {
-        sortable: false,
-        text: "Number",
-        value: "number"
-      },
-      {
-        sortable: false,
-        text: "Status",
-        value: "status"
-      },
-      {
-        sortable: false,
-        text: "Action",
-        value: "action",
-        align: "right"
-      }
-    ],
-    filter: {
-      name: '',
-      cell_number: '',
-      role: '',
-    },
-    items: [],
-    name: "",
-    roles,
-  }),
-  created() {
-    if (this.$route.params.medicalCenter) {
-      this.load();
-    }
-  },
-  methods: {
-    async load() {
-      let medicalCenterId = this.$route.params.medicalCenter;
-      let filter = "?";
-      for (const key in this.filter) {
-          if (this.filter.hasOwnProperty(key)) {
-              filter += `${key}=${this.filter[key]}&`;
-          }
-      }
-      const result = await ApiService.get(
-        urls.listOpertorMedicalCenter(medicalCenterId, filter)
-      );
-      if (result && result.status == 200) {
-        this.items = result.data.data.users;
-      } else {
-        this.$router.push({name:`Dashboard`});
-      }
-    },
-    async changeStatus(userId) {
-      const result = await ApiService.post(urls.changeStatusUser(userId));
-      if (result && result.status == 200) {
-        for (let user of this.items) {
-          if (user.id == userId) {
-            user.status = result.data.data.status;
-          }
+    metaInfo() {
+        return {
+            title: this.$route.meta.title,
+            meta: this.$route.meta.metaTags || []
         }
-      } else {
-        this.$router.push({name:`Dashboard`});
-      }
     },
-    ...mapMutations("modal", ["changeCurrentModal"]),
-    changeRoleModal(user) {
-      this.changeCurrentModal({
-        modal: "modal-user-role",
-        properties: { user }
-      });
+    data: () => ({
+        headers: [
+            {sortable: false, text: "Operator Name", value: "name"},
+            {sortable: false, text: "Role", value: "role"},
+            {sortable: false, text: "Number", value: "number"},
+            {sortable: false, text: "Status", value: "status"},
+            {sortable: false, text: "Action", value: "action", align: "right"}
+        ],
+        filter: {
+            name: '',
+            cell_number: '',
+            role: '',
+        },
+        items: [],
+        name: "",
+        roles,
+    }),
+    created() {
+        if (this.$route.params.medicalCenter) {
+            this.load();
+        }
     },
-    async remove(userId) {
-      const result = await ApiService.delete(urls.deleteUser(userId));
-      if (result && result.status == 200) {
-        for (const key in this.items) {
-          if (this.items.hasOwnProperty(key) && this.items[key].id == userId) {
-            this.items.splice(key, 1);
-          }
+    methods: {
+        async load() {
+            let medicalCenterId = this.$route.params.medicalCenter;
+            let filter = "?";
+            for (const key in this.filter) {
+                if (this.filter.hasOwnProperty(key)) {
+                    filter += `${key}=${this.filter[key]}&`;
+                }
+            }
+            const result = await ApiService.get(
+                    urls.listOpertorMedicalCenter(medicalCenterId, filter)
+            );
+            if (result && result.status == 200) {
+                this.items = result.data.data.users;
+            } else {
+                this.$router.push({name: `Dashboard`});
+            }
+        },
+        async changeStatus(userId) {
+            const result = await ApiService.post(urls.changeStatusUser(userId));
+            if (result && result.status == 200) {
+                for (let user of this.items) {
+                    if (user.id == userId) {
+                        user.status = result.data.data.status;
+                    }
+                }
+            } else {
+                this.$router.push({name: `Dashboard`});
+            }
+        },
+        ...mapMutations("modal", ["changeCurrentModal"]),
+        changeRoleModal(user) {
+            this.changeCurrentModal({
+                modal: "modal-user-role",
+                properties: {user}
+            });
+        },
+        async remove(userId) {
+            const result = await ApiService.delete(urls.deleteUser(userId));
+            if (result && result.status == 200) {
+                for (const key in this.items) {
+                    if (this.items.hasOwnProperty(key) && this.items[key].id == userId) {
+                        this.items.splice(key, 1);
+                    }
+                }
+            }
         }
-      }
-    }
-  },
-  computed: {
-    ...mapGetters("modal", ["getModalResult"])
-  },
-  watch: {
-    getModalResult(user) {
-      for (const userList of this.items) {
-        if (userList.id == user.id) {
-          userList.roles = user.roles;
+    },
+    computed: {
+        ...mapGetters("modal", ["getModalResult"])
+    },
+    watch: {
+        getModalResult(user) {
+            for (const userList of this.items) {
+                if (userList.id == user.id) {
+                    userList.roles = user.roles;
+                }
+            }
         }
-      }
     }
-  }
 };
 </script>
\ No newline at end of file
diff --git a/src/views/MyItem/List.vue b/src/views/MyItem/List.vue
index f235470..c3eb2a1 100644
--- a/src/views/MyItem/List.vue
+++ b/src/views/MyItem/List.vue
@@ -167,6 +167,12 @@ import {mapMutations, mapGetters, mapActions} from "vuex";
 import toast from "@/services/global/toast.service";
 
 export default {
+    metaInfo() {
+        return {
+            title: this.$route.meta.title,
+            meta: this.$route.meta.metaTags || []
+        }
+    },
     data: () => ({
         headers: [
             // {sortable: true,text: "ID",value: "id"},
diff --git a/src/views/MyPackage/List.vue b/src/views/MyPackage/List.vue
index 202733e..d21b743 100644
--- a/src/views/MyPackage/List.vue
+++ b/src/views/MyPackage/List.vue
@@ -56,10 +56,16 @@
                                 <td class="title font-weight-light">{{ item.status }}</td>
                                 <td class="text-xs-right FlexBtn Height-MD-60 justify-self-end">
                                     <template v-if="$hasRole('Admin|Supervisor')">
-                                        <v-tooltip v-for="status in getStatus(item)" :key="status.label" bottom open-on-hover>
+                                        <v-tooltip v-for="status in getStatus(item)" :key="status.label" bottom
+                                                   open-on-hover>
                                             <template v-slot:activator="{ on, attrs }">
-                                                <v-btn :color="status.color" class="mr-2" @click="changeStatus(item, status.status)" v-bind="attrs" v-on="on">
-                                                    <v-icon class="white--text mr-1 caption">fas {{ status.icon }}</v-icon>
+                                                <v-btn :color="status.color" class="mr-2"
+                                                       @click="changeStatus(item, status.status)" v-bind="attrs"
+                                                       v-on="on">
+                                                    <v-icon class="white--text mr-1 caption">fas {{
+                                                            status.icon
+                                                        }}
+                                                    </v-icon>
                                                     <span>{{ status.label }}</span>
                                                 </v-btn>
                                             </template>
@@ -154,6 +160,12 @@ import {mapMutations, mapGetters} from "vuex";
 import toast from "@/services/global/toast.service";
 
 export default {
+    metaInfo() {
+        return {
+            title: this.$route.meta.title,
+            meta: this.$route.meta.metaTags || []
+        }
+    },
     data: () => ({
         headers: [
             {sortable: false, text: "ID", value: "Package ID"},
@@ -161,7 +173,7 @@ export default {
             {sortable: false, text: "Hospital", value: "Hospital"},
             {sortable: false, text: "Description", value: "description"},
             {sortable: false, text: "Status", value: "status"},
-            {sortable: false, text: "Action", value: "action", align: "center",width:'20%'}
+            {sortable: false, text: "Action", value: "action", align: "center", width: '20%'}
         ],
         filter: {
             name: '',
@@ -191,8 +203,8 @@ export default {
             if (result && result.status == 200) {
                 const {data, meta} = result.data;
                 this.items = data;
-                this.currentPage = meta? meta.current_page : 1;
-                this.lastPage =meta? meta.last_page : 1;
+                this.currentPage = meta ? meta.current_page : 1;
+                this.lastPage = meta ? meta.last_page : 1;
             }
             this.loadMedicalCenters();
         },
@@ -227,8 +239,8 @@ export default {
         getStatus(item) {
             if (item.status === 'pending') {
                 return [
-                    { status: 'rejected', label: 'reject', color: 'red', icon: 'fa-close' },
-                    { status: 'approved', label: 'approve', color: 'green', icon: 'fa-check' }
+                    {status: 'rejected', label: 'reject', color: 'red', icon: 'fa-close'},
+                    {status: 'approved', label: 'approve', color: 'green', icon: 'fa-check'}
                 ]
             } else {
                 const nextStatus = item.status === 'rejected' ? 'approved' : 'rejected'
@@ -243,7 +255,7 @@ export default {
             }
         },
         async changeStatus(item, status) {
-            const result = await ApiService.post(urls.changePackageStatus(item.id), { status })
+            const result = await ApiService.post(urls.changePackageStatus(item.id), {status})
 
             if (result?.data?.data?.status) {
                 const newStatus = result.data.data.status
diff --git a/src/views/Package/AddEdit.vue b/src/views/Package/AddEdit.vue
index 1d95336..080e8c0 100644
--- a/src/views/Package/AddEdit.vue
+++ b/src/views/Package/AddEdit.vue
@@ -118,6 +118,12 @@ import {urls} from "@/config/urls";
 import {mapMutations} from "vuex";
 
 export default {
+    metaInfo() {
+        return {
+            title: this.$route.meta.title,
+            meta: this.$route.meta.metaTags || []
+        }
+    },
     data() {
         return {
             formData: {
diff --git a/src/views/Package/List.vue b/src/views/Package/List.vue
index d96b8a9..a703193 100644
--- a/src/views/Package/List.vue
+++ b/src/views/Package/List.vue
@@ -160,6 +160,12 @@ import {mapMutations, mapGetters} from "vuex";
 import toast from "@/services/global/toast.service";
 
 export default {
+    metaInfo() {
+        return {
+            title: this.$route.meta.title,
+            meta: this.$route.meta.metaTags || []
+        }
+    },
     data: () => ({
         headers: [
             {sortable: false, text: "ID", value: "Package ID"},
diff --git a/src/views/Statistics/Chart.vue b/src/views/Statistics/Chart.vue
index aa033e5..ceb0097 100644
--- a/src/views/Statistics/Chart.vue
+++ b/src/views/Statistics/Chart.vue
@@ -1,195 +1,212 @@
 <template>
-  <div>
-    <v-form ref="form">
-      <v-container grid-list-xs>
-        <material-card color="black" title="Search Result">
-          <v-layout align-center justify-center wrap class="px-5 my-3">
-            <v-flex xs12 sm4 md4 class="WM-FlexCenter pl-3">
-              <v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"></v-icon>
-              <v-autocomplete :items="medicalCenters" item-text="name" item-value="id" v-model="form.medicalCenterId" @change="fillUsers" label="Hospital" color="black" class="pa-2"></v-autocomplete>
-            </v-flex>
-            <v-flex xs12 sm4 md4 class="WM-FlexCenter pl-3">
-              <v-icon class="fa fa-user mr-2 WM-Margin-B-8"></v-icon>
-              <v-autocomplete :items="users" item-text="name" item-value="id" v-model="form.userId" label="User" color="black" class="py-3 pr-3"></v-autocomplete>
-            </v-flex>
-            <v-flex xs12 sm4 md4 class="WM-FlexCenter pl-3">
-              <v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"></v-icon>
-              <v-autocomplete :items="testTypes" item-text="name" item-value="id" v-model="form.testTypeId" label="TestType" color="black" class="py-3 pr-3"></v-autocomplete>
-            </v-flex>
-            <v-flex xs12 sm4 md4 class="WM-FlexCenter pl-3">
-              <v-icon class="fas fa-angle-right mr-2 WM-Margin-B-8"></v-icon>
-              <v-autocomplete :items="result" v-model="form.result" label="Result" color="black" class="py-3 pr-3"></v-autocomplete>
-            </v-flex>
-            <v-flex xs12 sm4 md4 class="WM-FlexCenter pl-3">
-              <v-icon class="fas fa-angle-right mr-2 WM-Margin-B-8"></v-icon>
-              <v-autocomplete :items="verify" v-model="form.verify" label="Verify" color="black" class="py-3 pr-3"></v-autocomplete>
-            </v-flex>
-            <v-flex xs12 sm4 md4 class="WM-FlexCenter pl-3">
-              <v-icon class="fas fa-line-chart mr-2 WM-Margin-B-8"></v-icon>
-              <v-autocomplete :items="type" v-model="form.type" label="Type" color="black" class="py-3 pr-3"></v-autocomplete>
-            </v-flex>
-            <v-flex xs12 sm6 md2 class="WM-FlexCenter pl-3">
-              <v-icon class="far fa-calendar-alt mr-2"></v-icon>
-              <v-menu
-                lazy
-                :close-on-content-click="true"
-                transition="v-scale-transition"
-                offset-y
-                v-model="fromMenu"
-              >
-                <v-text-field
-                  required
-                  slot="activator"
-                  label="FromDate"
-                  color="black"
-                  v-model="form.fromPicker">
-                </v-text-field>
-                <v-date-picker
-                  color="pink"
-                  no-title
-                  v-model="form.fromPicker"
-                  :date-format="date => new Date(date).toDateString()"
-                ></v-date-picker>
-              </v-menu>
-            </v-flex>
-            <v-flex xs12 sm6 md2 class="WM-FlexCenter pl-3">
-              <v-icon class="far fa-calendar-alt mr-2"></v-icon>
-              <v-menu
-                lazy
-                :close-on-content-click="true"
-                transition="v-scale-transition"
-                offset-y
-                v-model="upToMenu"
-              >
-                <v-text-field
-                  required
-                  slot="activator"
-                  label="UpToDate"
-                  color="black"
-                  v-model="form.upToPicker">
-                </v-text-field>
-                <v-date-picker
-                  color="pink"
-                  no-title
-                  v-model="form.upToPicker"
-                  :date-format="date => new Date(date).toDateString()"
-                ></v-date-picker>
-              </v-menu>
-            </v-flex>
-            <v-spacer></v-spacer>
-            <v-flex xs12 md2 sm2 class="text-xs-center text-sm-center text-md-right">
-              <v-btn
-                class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black"
-                style="padding:10px 60px;"
-                @click="submitForm"
-              >
-                <v-icon class="black--text mr-2 caption">fas fa-chevron-right</v-icon>
-                <span class="black--text">GO</span>
-              </v-btn>
-            </v-flex>
-          </v-layout>
-          <v-layout row wrap class="px-5 my-3" v-if="!$route.params.testResult">
-            <v-divider></v-divider>
-          </v-layout>
-        </material-card>
-      </v-container>
-    </v-form>
-    <div v-if="chart" class="small">
-      <pie-chart v-if="form.type === 'PieChart'" :chart-data="datacollection"></pie-chart>
-      <bar-chart v-else :chart-data="datacollection"></bar-chart>
+    <div>
+        <v-form ref="form">
+            <v-container grid-list-xs>
+                <material-card color="black" title="Search Result">
+                    <v-layout align-center justify-center wrap class="px-5 my-3">
+                        <v-flex xs12 sm4 md4 class="WM-FlexCenter pl-3">
+                            <v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"></v-icon>
+                            <v-autocomplete :items="medicalCenters" item-text="name" item-value="id"
+                                            v-model="form.medicalCenterId" @change="fillUsers" label="Hospital"
+                                            color="black" class="pa-2"></v-autocomplete>
+                        </v-flex>
+                        <v-flex xs12 sm4 md4 class="WM-FlexCenter pl-3">
+                            <v-icon class="fa fa-user mr-2 WM-Margin-B-8"></v-icon>
+                            <v-autocomplete :items="users" item-text="name" item-value="id" v-model="form.userId"
+                                            label="User" color="black" class="py-3 pr-3"></v-autocomplete>
+                        </v-flex>
+                        <v-flex xs12 sm4 md4 class="WM-FlexCenter pl-3">
+                            <v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"></v-icon>
+                            <v-autocomplete :items="testTypes" item-text="name" item-value="id"
+                                            v-model="form.testTypeId" label="TestType" color="black"
+                                            class="py-3 pr-3"></v-autocomplete>
+                        </v-flex>
+                        <v-flex xs12 sm4 md4 class="WM-FlexCenter pl-3">
+                            <v-icon class="fas fa-angle-right mr-2 WM-Margin-B-8"></v-icon>
+                            <v-autocomplete :items="result" v-model="form.result" label="Result" color="black"
+                                            class="py-3 pr-3"></v-autocomplete>
+                        </v-flex>
+                        <v-flex xs12 sm4 md4 class="WM-FlexCenter pl-3">
+                            <v-icon class="fas fa-angle-right mr-2 WM-Margin-B-8"></v-icon>
+                            <v-autocomplete :items="verify" v-model="form.verify" label="Verify" color="black"
+                                            class="py-3 pr-3"></v-autocomplete>
+                        </v-flex>
+                        <v-flex xs12 sm4 md4 class="WM-FlexCenter pl-3">
+                            <v-icon class="fas fa-line-chart mr-2 WM-Margin-B-8"></v-icon>
+                            <v-autocomplete :items="type" v-model="form.type" label="Type" color="black"
+                                            class="py-3 pr-3"></v-autocomplete>
+                        </v-flex>
+                        <v-flex xs12 sm6 md2 class="WM-FlexCenter pl-3">
+                            <v-icon class="far fa-calendar-alt mr-2"></v-icon>
+                            <v-menu
+                                    lazy
+                                    :close-on-content-click="true"
+                                    transition="v-scale-transition"
+                                    offset-y
+                                    v-model="fromMenu"
+                            >
+                                <v-text-field
+                                        required
+                                        slot="activator"
+                                        label="FromDate"
+                                        color="black"
+                                        v-model="form.fromPicker">
+                                </v-text-field>
+                                <v-date-picker
+                                        color="pink"
+                                        no-title
+                                        v-model="form.fromPicker"
+                                        :date-format="date => new Date(date).toDateString()"
+                                ></v-date-picker>
+                            </v-menu>
+                        </v-flex>
+                        <v-flex xs12 sm6 md2 class="WM-FlexCenter pl-3">
+                            <v-icon class="far fa-calendar-alt mr-2"></v-icon>
+                            <v-menu
+                                    lazy
+                                    :close-on-content-click="true"
+                                    transition="v-scale-transition"
+                                    offset-y
+                                    v-model="upToMenu"
+                            >
+                                <v-text-field
+                                        required
+                                        slot="activator"
+                                        label="UpToDate"
+                                        color="black"
+                                        v-model="form.upToPicker">
+                                </v-text-field>
+                                <v-date-picker
+                                        color="pink"
+                                        no-title
+                                        v-model="form.upToPicker"
+                                        :date-format="date => new Date(date).toDateString()"
+                                ></v-date-picker>
+                            </v-menu>
+                        </v-flex>
+                        <v-spacer></v-spacer>
+                        <v-flex xs12 md2 sm2 class="text-xs-center text-sm-center text-md-right">
+                            <v-btn
+                                    class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black"
+                                    style="padding:10px 60px;"
+                                    @click="submitForm"
+                            >
+                                <v-icon class="black--text mr-2 caption">fas fa-chevron-right</v-icon>
+                                <span class="black--text">GO</span>
+                            </v-btn>
+                        </v-flex>
+                    </v-layout>
+                    <v-layout row wrap class="px-5 my-3" v-if="!$route.params.testResult">
+                        <v-divider></v-divider>
+                    </v-layout>
+                </material-card>
+            </v-container>
+        </v-form>
+        <div v-if="chart" class="small">
+            <pie-chart v-if="form.type === 'PieChart'" :chart-data="datacollection"></pie-chart>
+            <bar-chart v-else :chart-data="datacollection"></bar-chart>
+        </div>
     </div>
-  </div>
 </template>
 
 <script>
 import BarChart from "@/plugins/chart/BarChart.js";
 import PieChart from "@/plugins/chart/PieChart.js";
-import { ApiService } from "@/services";
-import { urls } from "@/config/urls";
+import {ApiService} from "@/services";
+import {urls} from "@/config/urls";
 
 export default {
-  components: {
-    BarChart,
-    PieChart
-  },
-  data() {
-    return {
-      datacollection: null,
-      fromMenu: '',
-      upToMenu: '',
-      verify: ['Verified', 'NotVerified'],
-      result: ['Accept', 'Failed'],
-      type: ['BarChart', 'PieChart'],
-      users: [],
-      medicalCenters: [],
-      testTypes: [],
-      form: {
-        medicalCenterId: null,
-        userId: null,
-        testTypeId: null,
-        result: null,
-        verify: null,
-        type: 'PieChart',
-        fromPicker: '',
-        upToPicker: '',
-      },
-      chart: false
-    };
-  },
-  created() {
-    this.load();
-  },
-  methods: {
-    fillData(options) {
-      this.datacollection = {
-        labels: options.labels,
-        // labels: [this.getRandomInt(), this.getRandomInt()],
-        datasets: [
-          {
-            label: "Data One",
-            backgroundColor: ["#f87979", "#ccc"],
-            data: options.data,
-            // data: [this.getRandomInt(), this.getRandomInt()],
-          }
-        ]
-      };
+    metaInfo() {
+        return {
+            title: this.$route.meta.title,
+            meta: this.$route.meta.metaTags || []
+        }
     },
-    async load() {
-      const result = await ApiService.get(urls.listFilterItemsTestResult);
-      if (result && result.status == 200) {
-        this.medicalCenters = result.data.data.MedicalCenters;
-        this.testTypes = result.data.data.TestTypes;
-      }
+    components: {
+        BarChart,
+        PieChart
     },
-    async fillUsers() {
-      const result = await ApiService.get(urls.listOpertorMedicalCenter(this.form.medicalCenterId));
-      if (result && result.status == 200) {
-        this.users = result.data.data.users;
-      }
+    data() {
+        return {
+            datacollection: null,
+            fromMenu: '',
+            upToMenu: '',
+            verify: ['Verified', 'NotVerified'],
+            result: ['Accept', 'Failed'],
+            type: ['BarChart', 'PieChart'],
+            users: [],
+            medicalCenters: [],
+            testTypes: [],
+            form: {
+                medicalCenterId: null,
+                userId: null,
+                testTypeId: null,
+                result: null,
+                verify: null,
+                type: 'PieChart',
+                fromPicker: '',
+                upToPicker: '',
+            },
+            chart: false
+        };
     },
-    async submitForm() {
-      const result = await ApiService.post(urls.statistics, this.form);
-      if (result && result.status == 200) {
-        this.fillData(result.data.data);
-        this.chart = true;
-      }
+    created() {
+        this.load();
     },
-  }
+    methods: {
+        fillData(options) {
+            this.datacollection = {
+                labels: options.labels,
+                // labels: [this.getRandomInt(), this.getRandomInt()],
+                datasets: [
+                    {
+                        label: "Data One",
+                        backgroundColor: ["#f87979", "#ccc"],
+                        data: options.data,
+                        // data: [this.getRandomInt(), this.getRandomInt()],
+                    }
+                ]
+            };
+        },
+        async load() {
+            const result = await ApiService.get(urls.listFilterItemsTestResult);
+            if (result && result.status == 200) {
+                this.medicalCenters = result.data.data.MedicalCenters;
+                this.testTypes = result.data.data.TestTypes;
+            }
+        },
+        async fillUsers() {
+            const result = await ApiService.get(urls.listOpertorMedicalCenter(this.form.medicalCenterId));
+            if (result && result.status == 200) {
+                this.users = result.data.data.users;
+            }
+        },
+        async submitForm() {
+            const result = await ApiService.post(urls.statistics, this.form);
+            if (result && result.status == 200) {
+                this.fillData(result.data.data);
+                this.chart = true;
+            }
+        },
+    }
 };
 </script>
 
 <style>
 .small {
-  max-width: 600px;
-  margin: 150px auto;
+    max-width: 600px;
+    margin: 150px auto;
 }
+
 .v-btn--floating {
-    padding: 0!important;
+    padding: 0 !important;
 }
+
 .theme--light.v-btn.v-btn--flat {
-    color: rgba(0,0,0,.87)!important;
+    color: rgba(0, 0, 0, .87) !important;
 }
+
 .v-btn--floating, .v-btn--icon:before {
-    border-radius: 50%!important;
+    border-radius: 50% !important;
 }
 </style>
diff --git a/src/views/TestResult/AddEdit.vue b/src/views/TestResult/AddEdit.vue
index bcda3e4..653ae3a 100644
--- a/src/views/TestResult/AddEdit.vue
+++ b/src/views/TestResult/AddEdit.vue
@@ -416,6 +416,12 @@ import {ApiService} from "@/services";
 import {urls} from "@/config/urls";
 
 export default {
+    metaInfo() {
+        return {
+            title: this.$route.meta.title,
+            meta: this.$route.meta.metaTags || []
+        }
+    },
     components: {
         'wm-Dropzone': Dropzone,
     },
diff --git a/src/views/TestResult/List.vue b/src/views/TestResult/List.vue
index 4c43e78..c022277 100644
--- a/src/views/TestResult/List.vue
+++ b/src/views/TestResult/List.vue
@@ -186,6 +186,12 @@ import {
 } from "vuex";
 
 export default {
+    metaInfo() {
+        return {
+            title: this.$route.meta.title,
+            meta: this.$route.meta.metaTags || []
+        }
+    },
     data: () => ({
         headers: [
             {sortable: false, text: "ID", value: "name"},
diff --git a/src/views/TestResult/Show.vue b/src/views/TestResult/Show.vue
index 19d991a..0346505 100644
--- a/src/views/TestResult/Show.vue
+++ b/src/views/TestResult/Show.vue
@@ -126,6 +126,12 @@ import { mapGetters, mapMutations } from "vuex";
 import { ApiService } from "@/services";
 import { urls } from "@/config/urls";
 export default {
+    metaInfo() {
+        return {
+            title: this.$route.meta.title,
+            meta: this.$route.meta.metaTags || []
+        }
+    },
 	data: () => ({
 		data: {
 			user: {
diff --git a/src/views/TestType/AddEdit.vue b/src/views/TestType/AddEdit.vue
index ba97448..fdcc1ed 100644
--- a/src/views/TestType/AddEdit.vue
+++ b/src/views/TestType/AddEdit.vue
@@ -266,7 +266,8 @@
                         <v-icon class="white--text mr-2 caption">fas fa-times</v-icon>
                         REMOVE
                     </v-btn>
-                    <v-layout row wrap align-center justify-center class="mt-4" v-if="(form.info.length -1)  == keyForm">
+                    <v-layout row wrap align-center justify-center class="mt-4"
+                              v-if="(form.info.length -1)  == keyForm">
                         <v-btn absolute right bottom small @click="addInput" color="pink" class="mb-2">
                             <v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>
                             <span class="white--text">Add</span>
@@ -301,6 +302,12 @@ import {ApiService} from "@/services";
 import {urls} from "@/config/urls";
 
 export default {
+    metaInfo() {
+        return {
+            title: this.$route.meta.title,
+            meta: this.$route.meta.metaTags || []
+        }
+    },
     data() {
         return {
             form: {
diff --git a/src/views/TestType/List.vue b/src/views/TestType/List.vue
index fc57bdd..20ab8b2 100644
--- a/src/views/TestType/List.vue
+++ b/src/views/TestType/List.vue
@@ -150,6 +150,12 @@ import {urls} from "@/config/urls";
 import {mapMutations, mapGetters} from "vuex";
 
 export default {
+    metaInfo() {
+        return {
+            title: this.$route.meta.title,
+            meta: this.$route.meta.metaTags || []
+        }
+    },
     data: () => ({
         headers: [
             {sortable: false, text: "TestType Name", value: "name"},
diff --git a/src/views/User/List.vue b/src/views/User/List.vue
index 86c62be..f88df0a 100644
--- a/src/views/User/List.vue
+++ b/src/views/User/List.vue
@@ -144,6 +144,12 @@ import {mapMutations, mapGetters} from "vuex";
 import {roles} from "@/config/utils";
 
 export default {
+    metaInfo() {
+        return {
+            title: this.$route.meta.title,
+            meta: this.$route.meta.metaTags || []
+        }
+    },
     data: () => ({
         headers: [
             {
diff --git a/src/views/User/MyInfo.vue b/src/views/User/MyInfo.vue
index c996bb8..957f04f 100644
--- a/src/views/User/MyInfo.vue
+++ b/src/views/User/MyInfo.vue
@@ -96,6 +96,12 @@ import {urls} from "@/config/urls";
 import {mapMutations} from 'vuex';
 
 export default {
+    metaInfo() {
+        return {
+            title: this.$route.meta.title,
+            meta: this.$route.meta.metaTags || []
+        }
+    },
     data() {
         return {
             user: {