diff --git a/public/index.html b/public/index.html
index deb2389..4123528 100644
--- a/public/index.html
+++ b/public/index.html
@@ -6,7 +6,6 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= htmlWebpackPlugin.options.title %></title>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
   </head>
   <body>
     <noscript>
diff --git a/src/abstraction/repository/authRepository.js b/src/abstraction/repository/authRepository.js
index fa21772..71cdf0e 100644
--- a/src/abstraction/repository/authRepository.js
+++ b/src/abstraction/repository/authRepository.js
@@ -16,7 +16,6 @@ export default class AuthRepository {
             return true;
         }
     }
-
     async register(data) {
         let json = setData(data);
         let response = await axios.post(url("register"), json);
@@ -24,6 +23,11 @@ export default class AuthRepository {
             return response.data;
         }
     }
+    async forgetPassword(data) {
+        let json = setData(data);
+        let response = await axios.post(url("forgetPassword"), json);
+        return getJson(response.data.data)
+    }
     async resetPassword(data) {
         let json = setData(data);
         let response = await axios.post(url("resetPassword"), json);
diff --git a/src/components/Global/Header/Name.vue b/src/components/Global/Header/Name.vue
index f5862e7..b13b875 100644
--- a/src/components/Global/Header/Name.vue
+++ b/src/components/Global/Header/Name.vue
@@ -2,14 +2,34 @@
   <div class="wa__admin">
     <div class="wa__admin--name">
       <template>
-        <h6 class="text-uppercase">patrich james</h6>
-        <div class="wa__link">
+        <h6 class="text-uppercase">{{ first_name }} {{ last_name }}</h6>
+        <div class="wa__link" @click="doLogout">
           <i class="WMi-off"></i>
         </div>
       </template>
     </div>
   </div>
 </template>
+<script>
+import { UserStorage } from "@/utils/storage";
+import { mapActions } from "vuex";
+export default {
+  name: "name",
+  data: () => ({
+    first_name: UserStorage.get() ? UserStorage.get().first_name : null,
+    last_name: UserStorage.get() ? UserStorage.get().last_name : null,
+  }),
+  methods: {
+    ...mapActions("auth", ["logout"]),
+    async doLogout() {
+      const response = await this.logout();
+      if (response) {
+        this.$router.push({ name: "login" });
+      }
+    },
+  },
+};
+</script>
 <style scoped>
 .wa__link a {
   text-decoration: none;
diff --git a/src/components/Global/Input/DateInput.vue b/src/components/Global/Input/DateInput.vue
index e847e1e..858e5b9 100644
--- a/src/components/Global/Input/DateInput.vue
+++ b/src/components/Global/Input/DateInput.vue
@@ -14,7 +14,7 @@
           v-model="date"
           :label="label"
           :placeholder="placeholder || label"
-          prepend-inner-icon="mdi-calendar"
+          prepend-inner-icon="WMi-calendar-alt"
           readonly
           :color="color"
           v-bind="attrs"
diff --git a/src/components/Global/Input/ImageCropper.vue b/src/components/Global/Input/ImageCropper.vue
index 8de6db6..bb26e01 100644
--- a/src/components/Global/Input/ImageCropper.vue
+++ b/src/components/Global/Input/ImageCropper.vue
@@ -24,7 +24,7 @@
         <v-file-input
           accept="image/png, image/jpeg, image/bmp"
           placeholder="Pick an Image"
-          prepend-icon="mdi-camera"
+          prepend-icon="WMi-camera"
           :label="label"
           @change="changeImage"
           ref="fileInput"
diff --git a/src/components/Global/Input/TimeInput.vue b/src/components/Global/Input/TimeInput.vue
index 62676ae..9359344 100644
--- a/src/components/Global/Input/TimeInput.vue
+++ b/src/components/Global/Input/TimeInput.vue
@@ -14,7 +14,7 @@
           v-model="time"
           :label="label"
           :placeholder="placeholder || label"
-          prepend-inner-icon="mdi-calendar"
+          prepend-inner-icon="WMi-calendar-alt"
           readonly
           :color="color"
           v-bind="attrs"
diff --git a/src/router/index.js b/src/router/index.js
index 1e4a11b..6b5450b 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -10,7 +10,9 @@
 import Vue from "vue";
 import Router from "vue-router";
 import Meta from "vue-meta";
-import Paths from "./path"
+import Paths from "./path";
+import { TokenStorage, UserStorage } from "../utils/storage";
+
 Vue.use(Router);
 Vue.use(Meta);
 
@@ -41,6 +43,7 @@ function create() {
 }
 
 function route(options) {
+    // console.log('options', options);
     let path = options.path;
     let view = options.view;
     let name = options.name;
@@ -59,24 +62,20 @@ function route(options) {
 function beforeLoad() {
     router.beforeEach((to, from, next) => {
         setTitle(to);
-
-        //         const auth = to.meta && to.meta.auth ? to.meta.auth : false;
-        //         const types = to.meta && to.meta.types ? to.meta.types : false;
-
-
-        //         const loggedIn = !!TokenStorage.getToken();
-
-        //         if (auth && !loggedIn) {
-        //             router.push({ name: 'login', query: { redirect: to.fullPath } });
-        //         }
-
-        //         if (loggedIn && types && Array.isArray(types)) {
-        //             const ownType = UserStorage.get() ? UserStorage.get().type : '';
-        //             if (!types.includes(ownType)) {
-        //                 router.push({ name: 'dashboard'});
-        //             }
-        //         }
-
+        const auth = to.meta && to.meta.auth ? to.meta.auth : false;
+        const roles = to.meta && to.meta.roles ? to.meta.roles : false;
+
+        const loggedIn = !!TokenStorage.getToken();
+        if (auth && !loggedIn) {
+            router.push({ name: 'login', query: { redirect: to.fullPath } });
+        }
+
+        if (loggedIn && roles && Array.isArray(roles)) {
+            const ownType = UserStorage.get() ? UserStorage.get().role : '';
+            if (!roles.includes(ownType)) {
+                router.push({ name: 'dashboard' });
+            }
+        }
 
         next();
     });
diff --git a/src/router/path.js b/src/router/path.js
index c1c8aec..b16a61a 100644
--- a/src/router/path.js
+++ b/src/router/path.js
@@ -17,20 +17,11 @@ export default [
     {
         path: '/',
         view: 'Dashboard',
-        name: 'dashboard'
+        name: 'dashboard',
+        meta: { auth: true }
     },
     {
-        path: '/admin-trainee',
-        view: 'AdminTrainee',
-        name: 'dashboardTrainee'
-    },
-    {
-        path: '/admin-trainer',
-        view: 'AdminTrainer',
-        name: 'dashboardTrainer'
-    },
-    {
-        path: '/admin-users',
+        path: '/users',
         view: 'Users',
         name: 'users'
     },
diff --git a/src/router/url.js b/src/router/url.js
index b314628..8735150 100644
--- a/src/router/url.js
+++ b/src/router/url.js
@@ -4,7 +4,7 @@ const urls = {
   // authentication
   login: "auth/login",
   register: "auth/register",
-  resetPassword: "auth/forget-password",
+  forgetPassword: "auth/forget-password",
   logout: "auth/logout",
   // programs
   indexProgram: "admin/courses",
