diff --git a/src/abstraction/repository/authRepository.js b/src/abstraction/repository/authRepository.js
index 71cdf0e..3dc30a3 100644
--- a/src/abstraction/repository/authRepository.js
+++ b/src/abstraction/repository/authRepository.js
@@ -7,6 +7,7 @@ export default class AuthRepository {
         let json = setData(data);
         let response = await axios.post(url("login"), json);
         if (response.status === 200) {
+            response.data.data.user.roles.map(x => console.log(x.name));
             return getJson(response.data.data);
         }
     }
diff --git a/src/abstraction/repository/roleRepository.js b/src/abstraction/repository/roleRepository.js
new file mode 100644
index 0000000..39b62a5
--- /dev/null
+++ b/src/abstraction/repository/roleRepository.js
@@ -0,0 +1,19 @@
+import axios from "axios";
+import url from '@/router/url';
+import { setData, getArray } from '../resources/roleResource';
+import { getJson as getJsonUser } from '../resources/userResource'
+export default class RoleRepository {
+    async index() {
+        let response = await axios.get(url('indexRoles'));
+        if (response.status === 200) {
+            return getArray(response.data)
+        }
+    }
+    async update(data) {
+        let json = setData(data);
+        let response = await axios.post(url("updateRoles", { user: data.userId }), json);
+        if (response.status === 201 || response.status === 200) {
+            return getJsonUser(response.data.data);
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/abstraction/resources/programResource.js b/src/abstraction/resources/programResource.js
index a3b21d5..3c65b56 100644
--- a/src/abstraction/resources/programResource.js
+++ b/src/abstraction/resources/programResource.js
@@ -26,7 +26,8 @@ export const setData = (data, isUpdate = false) => {
         title: data.title,
         description: data.description,
         tags: data.tags,
-        batch_id: data.batch_id
+        batch_id: data.batch_id,
+        period: data.period
     };
     if (isUpdate) {
         formData["_method"] = "put";
diff --git a/src/abstraction/resources/roleResource.js b/src/abstraction/resources/roleResource.js
new file mode 100644
index 0000000..552e45f
--- /dev/null
+++ b/src/abstraction/resources/roleResource.js
@@ -0,0 +1,13 @@
+export const getJson = data => ({
+    id: data.id,
+    name: data.name,
+    permission: data.permission
+});
+
+export const getArray = ({ data }) => {
+    data = data.map(user => getJson(user));
+    return { data };
+};
+export const setData = data => ({
+    roles_id: data.roles_id
+})
\ No newline at end of file
diff --git a/src/abstraction/resources/userResource.js b/src/abstraction/resources/userResource.js
index 0218193..44ac187 100644
--- a/src/abstraction/resources/userResource.js
+++ b/src/abstraction/resources/userResource.js
@@ -1,28 +1,33 @@
 import { SetPagination, SetQueriesObject } from "@/utils/setQueriesObject";
-export const getJson = (data) => ({
-    id: data.id,
-    first_name: data.first_name,
-    last_name: data.last_name,
-    birthday: data.birthday,
-    weight: data.weight,
-    height: data.height,
-    arm_diameter: data.arm_diameter,
-    leg_diameter: data.leg_diameter,
-    details: data.details,
-    profile: data.profile,
-    address: data.address,
-    email: data.email,
-    cell_number: data.cell_number,
-    is_admin: data.is_admin,
-    is_trainer: data.is_trainer,
-    role: data.is_admin
-        ? "admin"
-        : data.is_trainer
-            ? "trainer"
-            : "trainee",
-    created_courses_count: data.created_courses_count,
-    joined_courses_count: data.joined_courses_count
-});
+export const getJson = (data) => {
+    let role_ids = data.roles.map(x => x.id);
+    let type = '';
+    let roles = data.roles.map(x => x.name);
+    roles.includes('manager') ? type = "admin" : roles.includes("trainer") && !roles.includes('manager') ? type = 'trainer' : "trainee"
+    !data.roles.length ? type = "trainee" : false;
+    return ({
+        id: data.id,
+        first_name: data.first_name,
+        last_name: data.last_name,
+        birthday: data.birthday,
+        weight: data.weight,
+        height: data.height,
+        arm_diameter: data.arm_diameter,
+        leg_diameter: data.leg_diameter,
+        details: data.details,
+        profile: data.profile,
+        address: data.address,
+        email: data.email,
+        cell_number: data.cell_number,
+        is_admin: data.is_admin,
+        is_trainer: data.is_trainer,
+        type: type,
+        role: data.roles,
+        role_ids: role_ids,
+        created_courses_count: data.created_courses_count,
+        joined_courses_count: data.joined_courses_count
+    })
+};
 export const getArray = ({ data, meta }) => {
     const pagination = SetPagination(meta);
     data = data.map((user) => getJson(user));
diff --git a/src/components/AddProgram/Main.vue b/src/components/AddProgram/Main.vue
index 7666952..13e5d3b 100644
--- a/src/components/AddProgram/Main.vue
+++ b/src/components/AddProgram/Main.vue
@@ -37,6 +37,17 @@
                 ></v-autocomplete>
               </v-col>
               <v-col cols="8"
+                ><v-text-field
+                  v-model="form.period"
+                  placeholder="period"
+                  label="period"
+                  class="no-error-msg pt-0 mt-0"
+                  dark
+                ></v-text-field
+              ></v-col>
+            </v-row>
+            <v-row>
+              <v-col cols="12"
                 ><v-text-field
                   v-model="form.title"
                   placeholder="a short quote"
diff --git a/src/components/Dashboard/Main.vue b/src/components/Dashboard/Main.vue
index d2b0cab..f61111b 100644
--- a/src/components/Dashboard/Main.vue
+++ b/src/components/Dashboard/Main.vue
@@ -2,9 +2,9 @@
   <div class="h-100">
     <main-back height="100%">
       <!-- admin role -->
-      <div class="px-16 pb-10" v-if="role === 'admin'">
+      <div class="px-16 pb-10" v-if="type === 'admin'">
         <div class="mt-11">
-          <div class="d-flex justify-center"><UserName role="admin" /></div>
+          <div class="d-flex justify-center"><UserName :role="type" /></div>
         </div>
         <v-row class="mt-3">
           <v-col cols="12">
@@ -79,9 +79,9 @@
       </div>
       <!-- /admin role -->
       <!-- trainer role -->
-      <div class="px-16 pb-10" v-if="role === 'trainer'">
+      <div class="px-16 pb-10" v-if="type === 'trainer'">
         <div class="mt-11">
-          <div class="d-flex justify-center"><UserName role="trainer" /></div>
+          <div class="d-flex justify-center"><UserName :role="type" /></div>
         </div>
         <v-row class="mt-3">
           <v-col cols="12">
@@ -145,9 +145,9 @@
       </div>
       <!-- /trainer role -->
       <!-- trainee role -->
-      <div class="px-16 pb-10" v-if="role === 'trainee'">
+      <div class="px-16 pb-10" v-if="type === 'trainee'">
         <div class="mt-11">
-          <div class="d-flex justify-center"><UserName role="trainee" /></div>
+          <div class="d-flex justify-center"><UserName :role="type" /></div>
         </div>
         <v-row class="mt-3">
           <v-col cols="12">
@@ -227,7 +227,7 @@ export default {
     Notification,
   },
   data: () => ({
-    role: UserStorage.get() ? UserStorage.get().role : null,
+    type: UserStorage.get() ? UserStorage.get().type : null,
     statistics: {},
   }),
   methods: {
diff --git a/src/components/Global/Section/SideBar.vue b/src/components/Global/Section/SideBar.vue
index bbe1d85..b382ae1 100644
--- a/src/components/Global/Section/SideBar.vue
+++ b/src/components/Global/Section/SideBar.vue
@@ -3,27 +3,32 @@
     <main-back height="100%">
       <div class="mt-16">
         <ul class="pl-0 ml-0">
-          <template v-if="role === 'admin'">
-            <MenuItem :active="true" text="Home" link="dashboard" />
-            <MenuItem text="my profile" link="profile" />
-            <MenuItem text="my bookmarks" link="bookmarks" />
-            <MenuItem text="programs" link="programs" />
-            <MenuItem text="users" link="users" />
-            <MenuItem text="products" link="products" />
-            <MenuItem text="workouts" link="workouts" />
+          <template v-if="type === 'admin'">
+            <MenuItem
+              v-for="item in sideBar"
+              :key="item.id"
+              :active="item.active"
+              :text="item.text"
+              :link="item.link"
+            />
           </template>
-          <template v-if="role === 'trainee'">
-            <MenuItem :active="true" text="Home" link="dashboard" />
-            <MenuItem text="my profile" link="profile" />
-            <MenuItem text="my programs" link="trainPrograms" />
-            <MenuItem text="my bookmarks" link="bookmarks" />
+          <template v-if="type === 'trainee'">
+            <MenuItem
+              v-for="item in sideBar"
+              :key="item.id"
+              :active="item.active"
+              :text="item.text"
+              :link="item.link"
+            />
           </template>
-          <template v-if="role === 'trainer'">
-            <MenuItem :active="true" text="Home" link="dashboard" />
-            <MenuItem text="my profile" link="profile" />
-            <MenuItem text="my programs" link="trainPrograms" />
-            <MenuItem text="my trainees" link="users" />
-            <MenuItem text="my bookmarks" link="bookmarks" />
+          <template v-if="type === 'trainer'">
+            <MenuItem
+              v-for="item in sideBar"
+              :key="item.id"
+              :active="item.active"
+              :text="item.text"
+              :link="item.link"
+            />
           </template>
         </ul>
       </div>
@@ -38,7 +43,120 @@ export default {
     MenuItem,
   },
   data: () => ({
-    role: UserStorage.get() ? UserStorage.get().role : null,
+    type: UserStorage.get() ? UserStorage.get().type : null,
   }),
+  computed: {
+    sideBar() {
+      var menuItems = [];
+      this.type === "admin"
+        ? (menuItems = [
+            {
+              id: 1,
+              text: "Home",
+              link: "dashboard",
+              active: this.$route.name === "dashboard",
+            },
+            {
+              id: 2,
+              text: "my profile",
+              link: "profile",
+              active: this.$route.name === "profile",
+            },
+            {
+              id: 3,
+              text: "my bookmarks",
+              link: "bookmarks",
+              active: this.$route.name === "bookmarks",
+            },
+            {
+              id: 4,
+              text: "programs",
+              link: "programs",
+              active: this.$route.name === "programs",
+            },
+            {
+              id: 5,
+              text: "users",
+              link: "users",
+              active: this.$route.name === "users",
+            },
+            {
+              id: 6,
+              text: "products",
+              link: "products",
+              active: this.$route.name === "products",
+            },
+            {
+              id: 7,
+              text: "workouts",
+              link: "workouts",
+              active: this.$route.name === "workouts",
+            },
+          ])
+        : this.type === "trainer"
+        ? (menuItems = [
+            {
+              id: 1,
+              text: "Home",
+              link: "dashboard",
+              active: this.$route.name === "dashboard",
+            },
+            {
+              id: 2,
+              text: "my profile",
+              link: "profile",
+              active: this.$route.name === "profile",
+            },
+            {
+              id: 3,
+              text: "my programs",
+              link: "trainPrograms",
+              active: this.$route.name === "trainPrograms",
+            },
+            {
+              id: 4,
+              text: "my trainees",
+              link: "users",
+              active: this.$route.name === "users",
+            },
+            {
+              id: 5,
+              text: "my bookmarks",
+              link: "bookmarks",
+              active: this.$route.name === "bookmarks",
+            },
+          ])
+        : (menuItems = [
+            {
+              id: 1,
+              text: "Home",
+              link: "dashboard",
+              active: this.$route.name === "dashboard",
+            },
+            {
+              id: 2,
+              text: "my profile",
+              link: "profile",
+              active: this.$route.name === "profile",
+            },
+            {
+              id: 3,
+              text: "my programs",
+              link: "trainPrograms",
+              active: this.$route.name === "trainPrograms",
+            },
+            {
+              id: 5,
+              text: "my bookmarks",
+              link: "bookmarks",
+              active: this.$route.name === "bookmarks",
+            },
+          ]);
+      return menuItems;
+    },
+  },
+  created() {
+    console.log(this.$route.name);
+  },
 };
 </script>
\ No newline at end of file
diff --git a/src/components/Users/Item.vue b/src/components/Users/Item.vue
index 91729df..5587770 100644
--- a/src/components/Users/Item.vue
+++ b/src/components/Users/Item.vue
@@ -16,20 +16,20 @@
           <div class="user__role">
             <small>Role:</small>
             <div class="wa__f__m__eb text-uppercase">
-              {{ userRole }}
+              {{ user.type }}
             </div>
           </div>
         </div>
       </v-col>
       <v-col cols="3">
         <div class="d-flex align-center justify-center h-100">
-          <div v-if="userRole == 'trainer'" class="d-flex align-center">
+          <div v-if="user.type == 'trainer'" class="d-flex align-center">
             <div class="user__program--quantity wa__f__m__eb mr-2">
               {{ user.created_courses_count }}
             </div>
             <div class="user__program__text">program created</div>
           </div>
-          <div v-else-if="userRole == 'trainee'" class="d-flex align-center">
+          <div v-else-if="user.type == 'trainee'" class="d-flex align-center">
             <div class="user__program--quantity wa__f__m__eb mr-2">
               {{ user.joined_courses_count }}
             </div>
@@ -45,7 +45,7 @@
             width="48"
             class="ml-1 custom-btn custom-icon"
             icon="WMi-gold-medal"
-            @click.native="$_openModal('changeRole')"
+            @click.native="chageRole"
             size="large"
           />
           <!-- <router-link :to="{ name: 'profile' }"> -->
@@ -79,19 +79,16 @@ export default {
       type: Object,
     },
   },
-  computed: {
-    userRole() {
-      return this.user.is_admin && !this.user.is_trainer
-        ? "admin"
-        : this.user.is_admin && this.user.is_trainer
-        ? "admin & trainer"
-        : this.user.is_trainer
-        ? "trainer"
-        : "trainee";
-    },
-  },
   methods: {
     ...mapActions("users", ["deleteUser"]),
+    chageRole() {
+      this.$emit("userId", this.user.id);
+      // let role = this.user.userRoles.map((role) => role.id);
+      this.$_openModal("changeRole", { role: this.user.role_ids });
+    },
+  },
+  created() {
+    console.log(this.user);
   },
 };
 </script>
diff --git a/src/components/Users/Main.vue b/src/components/Users/Main.vue
index de2bd48..6f6498b 100644
--- a/src/components/Users/Main.vue
+++ b/src/components/Users/Main.vue
@@ -25,7 +25,7 @@
           </div>
         </div>
         <v-row v-for="(user, i) in getUsers" :key="i" class="mt-4">
-          <v-col cols="12"><UserItem :user="user" /></v-col>
+          <v-col cols="12"><UserItem :user="user" @userId="userId" /></v-col>
         </v-row>
       </div>
       <div class="text-center mt-40 mb-5">
@@ -36,7 +36,7 @@
       </div>
     </main-back>
     <div class="text-center">
-      <ChangeRoleModal /><FiltersModal @filter="load" />
+      <ChangeRoleModal :userId="id" /><FiltersModal @filter="load" />
     </div>
   </div>
 </template> 
@@ -56,7 +56,8 @@ export default {
     FiltersModal,
   },
   data: () => ({
-    role: UserStorage.get() ? UserStorage.get().role : null,
+    type: UserStorage.get() ? UserStorage.get().type : null,
+    id: null,
   }),
   computed: {
     ...mapGetters("users", ["getUsers", "getPaginationUser"]),
@@ -71,10 +72,13 @@ export default {
       }
     },
     async load() {
-      this.role === "admin"
+      this.type === "admin"
         ? await this.loadUsers()
         : await this.loadTrainerTrainee();
     },
+    userId(id) {
+      this.id = id;
+    },
   },
   created() {
     this.load();
diff --git a/src/components/Users/Modals/ChangeRoleModal.vue b/src/components/Users/Modals/ChangeRoleModal.vue
index 2c9c5db..e60b1f6 100644
--- a/src/components/Users/Modals/ChangeRoleModal.vue
+++ b/src/components/Users/Modals/ChangeRoleModal.vue
@@ -1,5 +1,5 @@
 <template>
-  <basic-modal width="458" transition="slide-x-transition">
+  <basic-modal @open="openModal" width="458" transition="slide-x-transition">
     <template #header>
       <div class="close__modal">
         <v-icon class="WMi-cancel-1" large @click="$_closeModal()"></v-icon>
@@ -15,14 +15,14 @@
       </div>
       <v-item-group
         class="mt-10 mb-16"
-        mandatory
-        multiple
-        v-model="form.roles"
+        :mandatory="mandatory"
+        :multiple="multiple"
+        v-model="form.roles_id"
         @change="change"
       >
         <v-row>
-          <v-col cols="12" v-for="(role, i) in roles" :key="i" class="py-1">
-            <v-item v-slot="{ active, toggle }" :value="role.text">
+          <v-col cols="12" v-for="(role, i) in getRoles" :key="i" class="py-1">
+            <v-item v-slot="{ active, toggle }" :value="role.id">
               <v-list-item :disabled="role.disabled" class="d-block">
                 <main-back :social="true">
                   <v-card
@@ -35,7 +35,7 @@
                     height="45"
                     @click="toggle"
                   >
-                    <v-card-text class="role">{{ role.text }}</v-card-text>
+                    <v-card-text class="role">{{ role.name }}</v-card-text>
                   </v-card>
                 </main-back>
               </v-list-item>
@@ -61,42 +61,70 @@
           height="29"
           class="btn__modal--confirm custom-btn wa__f__m__eb"
           text="change"
+          @click.native="changeRole"
         />
       </div>
     </template>
   </basic-modal>
 </template>
 <script>
+import { mapActions, mapGetters } from "vuex";
 import SectionTitle from "../../Global/Section/SectionTitle.vue";
 export default {
   name: "modal_changeRole",
   components: { SectionTitle },
+  props: {
+    userId: {},
+  },
   data: () => ({
-    form: {},
-    roles: [
-      {
-        id: 1,
-        text: "trainee",
-        disabled: false,
-      },
-      {
-        id: 2,
-        text: "trainer",
-        disabled: false,
-      },
-      {
-        id: 3,
-        text: "admin",
-        disabled: false,
-      },
-    ],
+    roles_id: [],
+    multiple: true,
+    mandatory: true,
   }),
+  computed: {
+    ...mapGetters("users", ["getRoles"]),
+    form() {
+      return { userId: this.userId };
+    },
+  },
   methods: {
+    ...mapActions("users", ["laodRoles", "updateRole"]),
     change() {
-      this.form.roles.includes("admin") || this.form.roles.includes("admin")
-        ? (this.disabled = true)
-        : (this.disabled = false);
+      let traineeRole = this.getRoles.find((x) => x.id == 0);
+      console.log(this.form.roles_id);
+      if (this.form.roles_id.includes(1) || this.form.roles_id.includes(2)) {
+        this.mandatory = false;
+        traineeRole.disabled = true;
+      }
+      if (this.form.roles_id.includes(0)) {
+        this.mandatory = false;
+        this.form.roles_id.splice(1, traineeRole);
+      }
     },
+    openModal({ role }) {
+      this.roles_id = role;
+      !role.length ? (this.form.roles_id = [0]) : (this.form.roles_id = role);
+    },
+    changeRole() {
+      if (this.roles_id !== this.form.roles_id) {
+        this.updateRole(this.form);
+        this.roles_id = this.form.roles_id;
+      }
+    },
+  },
+  watch: {
+    form: {
+      handler(newVal) {
+        console.log(newVal);
+      },
+    },
+    deep: true,
+  },
+  async created() {
+    await this.laodRoles();
+    this.getRoles.push({ id: 0, name: "trainee", disabled: false });
+    console.log("this.getRoles", this.getRoles);
+    console.log(this.userId);
   },
 };
 </script>
diff --git a/src/router/path.js b/src/router/path.js
index d4f4ad3..3cd0803 100644
--- a/src/router/path.js
+++ b/src/router/path.js
@@ -18,7 +18,7 @@ export default [
         path: '/',
         view: 'Dashboard',
         name: 'dashboard',
-        meta: { auth: true }
+        // meta: { auth: true }
     },
     {
         path: '/users',
diff --git a/src/router/url.js b/src/router/url.js
index 7fd382a..2a4b60c 100644
--- a/src/router/url.js
+++ b/src/router/url.js
@@ -9,9 +9,9 @@ const urls = {
   // programs
   indexProgram: "admin/courses",
   showProgram: "admin/courses/:course",
-  storeProgram: 'trainer/courses',
-  verifyProgram: 'admin/courses/verify-course/:course',
-  destroyProgram: 'admin/courses/:course',
+  storeProgram: "trainer/courses",
+  verifyProgram: "admin/courses/verify-course/:course",
+  destroyProgram: "admin/courses/:course",
   updateProgram: "trainer/courses/:course",
   // user programs
   indexUserProgram: "my-courses",
@@ -47,7 +47,9 @@ const urls = {
   // users
   indexUsers: "admin/users",
   destroyUser: "admin/users/:user",
-  indexTrainerTrainee: 'trainer/trainees',
+  indexTrainerTrainee: "trainer/trainees",
+  indexRoles: "admin/roles",
+  updateRoles: "admin/users/:user/assign-roles",
   // countries
   indexCountries: "countries",
   // profile
@@ -63,8 +65,8 @@ const urls = {
   indexTrainer: "trainer-dashboard-statistic",
   indexTrainee: "trainee-dashboard-statistic",
   // file
-  storeFile: 'media',
-  destroyFile: 'media/:media'
+  storeFile: "media",
+  destroyFile: "media/:media"
 };
 
 export default urlGenerator(urls);
diff --git a/src/store/modules/users/actions.js b/src/store/modules/users/actions.js
index d90511c..99e3af5 100644
--- a/src/store/modules/users/actions.js
+++ b/src/store/modules/users/actions.js
@@ -1,4 +1,5 @@
 import UserRepository from "@/abstraction/repository/userRepository";
+import RoleRepository from "@/abstraction/repository/roleRepository";
 export default {
     async loadUsers({ state, commit }) {
         let data = { pagination: state.pagination, filters: state.filters }
@@ -14,6 +15,17 @@ export default {
         commit("SET_USERS", resource.data);
         commit("SET_PAGINATION", resource.pagination);
     },
+    async laodRoles({ commit }) {
+        let repository = new RoleRepository();
+        const resource = await repository.index();
+        commit("SET_ROLES", resource.data)
+    },
+    async updateRole({ commit }, data) {
+        let repository = new RoleRepository();
+        const resource = await repository.update(data);
+        console.log(resource);
+        commit("UPDATE_USER", resource);
+    },
     async deleteUser({ commit }, userId) {
         let repository = new UserRepository();
         await repository.delete(userId);
diff --git a/src/store/modules/users/getters.js b/src/store/modules/users/getters.js
index 4b848a0..96c6fda 100644
--- a/src/store/modules/users/getters.js
+++ b/src/store/modules/users/getters.js
@@ -1,4 +1,5 @@
 export default {
     getUsers: state => state.users,
+    getRoles: state => state.roles,
     getPaginationUser: state => state.pagination
 };
diff --git a/src/store/modules/users/mutations.js b/src/store/modules/users/mutations.js
index e439837..a4fd4ce 100644
--- a/src/store/modules/users/mutations.js
+++ b/src/store/modules/users/mutations.js
@@ -11,6 +11,14 @@ export default {
         Vue.set(state, "filters", payload);
         state.pagination.page = 1
     },
+    SET_ROLES(state, payload) {
+        Vue.set(state, "roles", payload);
+    },
+    UPDATE_USER(state, payload) {
+        console.log(payload);
+        const index = state.users.findIndex((x) => x.id === payload.id);
+        Vue.set(state.users, index, payload);
+    },
     DELETE_USER(state, userId) {
         const index = state.users.findIndex((x) => x.id === userId);
         // state.users.splice(index, 1);
diff --git a/src/store/modules/users/state.js b/src/store/modules/users/state.js
index 60ddc36..abe4d54 100644
--- a/src/store/modules/users/state.js
+++ b/src/store/modules/users/state.js
@@ -1,5 +1,6 @@
 export default {
     users: [],
+    roles: [],
     pagination: {
         itemsPerPage: 12
     },
diff --git a/src/views/Users.vue b/src/views/Users.vue
index a11e42e..534fa7a 100644
--- a/src/views/Users.vue
+++ b/src/views/Users.vue
@@ -11,7 +11,7 @@
       <div>
         <v-row>
           <v-col cols="2">
-        <SideBar />
+            <SideBar />
           </v-col>
           <v-col cols="10">
             <UsersHome />