diff --git a/src/App.vue b/src/App.vue
index b9909d2..40b99dd 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -12,7 +12,7 @@
 
 <script>
 import BgImage from "./assets/Untitled-1.jpg";
-import { UserStorage } from "@/utils/storage";
+import { UserStorage, TokenStorage } from "@/utils/storage";
 import ProfileRepository from "./abstraction/repository/profileRepository";
 import { getJson } from "./abstraction/resources/userResource";
 export default {
@@ -21,11 +21,12 @@ export default {
     bgImage: BgImage,
   }),
   async created() {
-    let repository = new ProfileRepository();
-    let resource = await repository.show();
-    console.log("resource", resource);
-    let res = getJson(resource);
-    UserStorage.save(res);
+    if (TokenStorage.hasToken()) {
+      let repository = new ProfileRepository();
+      let resource = await repository.show();
+      let res = getJson(resource);
+      UserStorage.save(res);
+    }
   },
 };
 </script>
diff --git a/src/abstraction/repository/bookmarkRepository.js b/src/abstraction/repository/bookmarkRepository.js
index 01cfde4..82434fb 100644
--- a/src/abstraction/repository/bookmarkRepository.js
+++ b/src/abstraction/repository/bookmarkRepository.js
@@ -18,7 +18,6 @@ export default class BookmarkRepository {
         }
     }
     async deleteBookmark(bookmarkId) {
-        console.log(bookmarkId);
         await axios.delete(url("destroyBookmark", { bookmark: bookmarkId }));
     }
 }
\ No newline at end of file
diff --git a/src/components/Dashboard/Main.vue b/src/components/Dashboard/Main.vue
index f61111b..d814e10 100644
--- a/src/components/Dashboard/Main.vue
+++ b/src/components/Dashboard/Main.vue
@@ -10,8 +10,8 @@
           <v-col cols="12">
             <div class="">
               <div class="text-left description">
-                here is dashboard home, feel free navigate from right side menu
-                or choose from shortcuts we prepared for you.
+                here is dashboard home, feel free navigate from right side menu or choose
+                from shortcuts we prepared for you.
               </div>
             </div>
           </v-col>
@@ -25,13 +25,13 @@
               <box text="programs" link="programs" icon="WMi-align-left" />
             </div>
             <div class="mr-5 section">
-              <box text="products" link="dashboard" icon="WMi-brush" />
+              <box text="products" link="products" icon="WMi-brush" />
             </div>
             <div class="mr-5 section">
-              <box text="trainers" link="users" icon=" WMi-account-off" />
+              <box text="trainers" icon="WMi-account-off" @click.native="trainersList" />
             </div>
             <div class="mr-5 section">
-              <box text="trainees" link="users" icon="WMi-users" />
+              <box text="trainees" icon="WMi-users" @click.native="traineesList" />
             </div>
           </div>
         </div>
@@ -40,8 +40,8 @@
           <v-col cols="12">
             <div class="d-flex justify-center pr-16">
               <div class="text-left description">
-                and here is some state we hope it gives you a great overview of
-                your status
+                and here is some state we hope it gives you a great overview of your
+                status
               </div>
             </div>
           </v-col>
@@ -50,30 +50,22 @@
           <v-col cols="12" sm="3"
             ><Notification
               text="total trainees"
-              :quantity="
-                statistics.trainees_count ? statistics.trainees_count : 0
-              "
+              :quantity="statistics.trainees_count ? statistics.trainees_count : 0"
           /></v-col>
           <v-col cols="12" sm="3"
             ><Notification
               text="total trainers"
-              :quantity="
-                statistics.trainers_count ? statistics.trainers_count : 0
-              "
+              :quantity="statistics.trainers_count ? statistics.trainers_count : 0"
           /></v-col>
           <v-col cols="12" sm="3"
             ><Notification
               text="total programs"
-              :quantity="
-                statistics.courses_count ? statistics.courses_count : 0
-              "
+              :quantity="statistics.courses_count ? statistics.courses_count : 0"
           /></v-col>
           <v-col cols="12" sm="3"
             ><Notification
               text="moves defined"
-              :quantity="
-                statistics.workouts_count ? statistics.workouts_count : 0
-              "
+              :quantity="statistics.workouts_count ? statistics.workouts_count : 0"
           /></v-col>
         </v-row>
       </div>
@@ -87,8 +79,8 @@
           <v-col cols="12">
             <div class="">
               <div class="text-left description">
-                here is your dashboard home, feel free navigate from right side
-                menu or choose from shortcuts we prepared for you.
+                here is your dashboard home, feel free navigate from right side menu or
+                choose from shortcuts we prepared for you.
               </div>
             </div>
           </v-col>
@@ -114,8 +106,8 @@
           <v-col cols="12">
             <div class="d-flex justify-center pr-16">
               <div class="text-left description">
-                and here is some stats we hope it gives you a great overview of
-                your status
+                and here is some stats we hope it gives you a great overview of your
+                status
               </div>
             </div>
           </v-col>
@@ -125,9 +117,7 @@
             <div class="mr-16">
               <Notification
                 text="total trainees"
-                :quantity="
-                  statistics.trainees_count ? statistics.trainees_count : 0
-                "
+                :quantity="statistics.trainees_count ? statistics.trainees_count : 0"
               />
             </div>
           </div>
@@ -135,9 +125,7 @@
             <div class="ml-16">
               <Notification
                 text="total programs"
-                :quantity="
-                  statistics.courses_count ? statistics.courses_count : 0
-                "
+                :quantity="statistics.courses_count ? statistics.courses_count : 0"
               />
             </div>
           </div>
@@ -153,8 +141,8 @@
           <v-col cols="12">
             <div class="">
               <div class="text-left description">
-                here is your dashboard home, feel free navigate from right side
-                menu or choose from shortcuts we prepared for you.
+                here is your dashboard home, feel free navigate from right side menu or
+                choose from shortcuts we prepared for you.
               </div>
             </div>
           </v-col>
@@ -165,7 +153,7 @@
               <box text="bookmarks" link="bookmarks" icon="WMi-bookmark" />
             </div>
             <div class="mr-5 section">
-              <box text="programs" link="trainPrograms" icon="WMi-align-left" />
+              <box text="programs" link="trainsPrograms" icon="WMi-align-left" />
             </div>
             <div class="mr-5 section">
               <box text="profile" link="profile" icon="WMi-user" />
@@ -177,8 +165,8 @@
           <v-col cols="12">
             <div class="d-flex justify-center pr-16">
               <div class="text-left description">
-                and here is some stats we hope it gives you a great overview of
-                your status
+                and here is some stats we hope it gives you a great overview of your
+                status
               </div>
             </div>
           </v-col>
@@ -189,9 +177,7 @@
               <Notification
                 text="programs joined"
                 :quantity="
-                  statistics.joined_courses_count
-                    ? statistics.joined_courses_count
-                    : 0
+                  statistics.joined_courses_count ? statistics.joined_courses_count : 0
                 "
               />
             </div>
@@ -201,9 +187,7 @@
               <Notification
                 text="moves done"
                 :quantity="
-                  statistics.total_series_done
-                    ? statistics.total_series_done
-                    : 0
+                  statistics.total_series_done ? statistics.total_series_done : 0
                 "
               />
             </div>
@@ -213,13 +197,14 @@
       <!-- /trainee role -->
     </main-back>
   </div>
-</template> 
+</template>
 <script>
 import Box from "../Global/Section/Box.vue";
 import Notification from "../Global/Section/Notification.vue";
 import UserName from "../Global/Section/UserName.vue";
 import { UserStorage } from "@/utils/storage";
 import StatisticRepository from "@/abstraction/repository/statisticRepository.js";
+import { mapMutations, mapState } from "vuex";
 export default {
   components: {
     UserName,
@@ -230,7 +215,11 @@ export default {
     type: UserStorage.get() ? UserStorage.get().type : null,
     statistics: {},
   }),
+  computed: {
+    ...mapState("users", ["filters"]),
+  },
   methods: {
+    ...mapMutations("users", ["SET_FILTER_USER"]),
     async loadStatistic() {
       let repository = new StatisticRepository();
       this.statistics =
@@ -242,6 +231,36 @@ export default {
           ? await repository.indexTrainee()
           : false;
     },
+    trainersList() {
+      // this.SET_FILTER_USER({});
+      // this.SET_FILTER_USER({
+      //   role_name: {
+      //     type: "in",
+      //     val: "trainer",
+      //   },
+      // });
+      this.$router.push({
+        name: "users",
+        query: {
+          role_name: "trainer",
+        },
+      });
+    },
+    traineesList() {
+      // this.SET_FILTER_USER({});
+      // this.SET_FILTER_USER({
+      //   role_name: {
+      //     type: "in",
+      //     val: "trainee",
+      //   },
+      // });
+      this.$router.push({
+        name: "users",
+        query: {
+          role_name: "trainee",
+        },
+      });
+    },
   },
   created() {
     this.loadStatistic();
@@ -263,4 +282,4 @@ export default {
     margin-left: 0;
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/Global/Section/Box.vue b/src/components/Global/Section/Box.vue
index 77cfc2d..3b8f15e 100644
--- a/src/components/Global/Section/Box.vue
+++ b/src/components/Global/Section/Box.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="wa__link pa-3">
-    <router-link :to="{ name: link }">
+    <router-link :tag="link ? 'a' : 'div'" :to="{ name: link }" :disabled="!link">
       <div class="dark icon"><i :class="icon"></i></div>
       <div class="mt-1 text__link">
         {{ text }}
@@ -32,4 +32,4 @@ export default {
   text-align: center;
   font-size: 21px;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/Global/Section/SideBar.vue b/src/components/Global/Section/SideBar.vue
index b382ae1..f443920 100644
--- a/src/components/Global/Section/SideBar.vue
+++ b/src/components/Global/Section/SideBar.vue
@@ -110,8 +110,8 @@ export default {
             {
               id: 3,
               text: "my programs",
-              link: "trainPrograms",
-              active: this.$route.name === "trainPrograms",
+              link: "trainsPrograms",
+              active: this.$route.name === "trainsPrograms",
             },
             {
               id: 4,
@@ -142,8 +142,8 @@ export default {
             {
               id: 3,
               text: "my programs",
-              link: "trainPrograms",
-              active: this.$route.name === "trainPrograms",
+              link: "trainsPrograms",
+              active: this.$route.name === "trainsPrograms",
             },
             {
               id: 5,
@@ -155,8 +155,5 @@ export default {
       return menuItems;
     },
   },
-  created() {
-    console.log(this.$route.name);
-  },
 };
 </script>
\ No newline at end of file
diff --git a/src/components/Programs/Item.vue b/src/components/Programs/Item.vue
index 636d4a8..9c4b8c6 100644
--- a/src/components/Programs/Item.vue
+++ b/src/components/Programs/Item.vue
@@ -85,9 +85,6 @@ export default {
   methods: {
     ...mapActions("programs", ["verifyProgram", "deleteProgram"]),
   },
-  created() {
-    console.log(this.program);
-  },
 };
 </script>
 <style scoped>
diff --git a/src/components/Programs/Main.vue b/src/components/Programs/Main.vue
index 12c9ea2..0c6d6e1 100644
--- a/src/components/Programs/Main.vue
+++ b/src/components/Programs/Main.vue
@@ -19,7 +19,7 @@
               height="54"
               size="x-large"
               :text-mode="true"
-              text="2"
+              :text="getFilterCount ? getFilterCount : '0'"
               @click.native="$_openModal('filters')"
             />
             <router-link :to="{ name: 'addProgram' }" class="text-decoration-none">
@@ -49,7 +49,7 @@
       </div>
     </main-back>
     <div class="text-center">
-      <FiltersModal @filter="load" @filterCount="filterCount($event)" />
+      <FiltersModal @filter="load" />
     </div>
   </div>
 </template>
@@ -58,7 +58,7 @@ import FiltersModal from "./Modals/FiltersModal.vue";
 import SectionTitle from "../Global/Section/SectionTitle.vue";
 import ProgramItem from "./Item.vue";
 import { mapGetters, mapActions, mapMutations } from "vuex";
-import _ from "lodash";
+// import _ from "lodash";
 export default {
   components: {
     SectionTitle,
@@ -66,7 +66,7 @@ export default {
     FiltersModal,
   },
   computed: {
-    ...mapGetters("programs", ["getPrograms", "getPaginationProgram"]),
+    ...mapGetters("programs", ["getPrograms", "getPaginationProgram", "getFilterCount"]),
   },
   methods: {
     ...mapActions("programs", ["loadPrograms"]),
@@ -80,14 +80,14 @@ export default {
     async load() {
       await this.loadPrograms();
     },
-    filterCount(event) {
-      const atLeast9Wins = _.flow([
-        Object.entries,
-        (arr) => arr.filter(([, value]) => value.val !== null),
-        Object.fromEntries,
-      ])(event);
-      console.log(atLeast9Wins);
-    },
+    // filterCount(event) {
+    //   const filterLength = _.flow([
+    //     Object.entries,
+    //     (arr) => arr.filter(([, value]) => value.val !== null),
+    //     Object.fromEntries,
+    //   ])(event);
+    //   console.log(filterLength, Object.keys(filterLength).length);
+    // },
   },
   created() {
     this.load();
diff --git a/src/components/Programs/Modals/FiltersModal.vue b/src/components/Programs/Modals/FiltersModal.vue
index 7f9bde7..87f5012 100644
--- a/src/components/Programs/Modals/FiltersModal.vue
+++ b/src/components/Programs/Modals/FiltersModal.vue
@@ -26,7 +26,6 @@
               placeholder="course name"
               label="course name"
               v-model="filter.title.val"
-              ref="filter"
             ></v-text-field>
           </div>
         </div>
@@ -37,7 +36,6 @@
               placeholder="mentor name"
               label="mentor name"
               v-model="filter.first_name.val"
-              ref="filter"
             ></v-text-field>
           </div>
         </div>
@@ -51,7 +49,6 @@
               item-text="text"
               item-value="verified"
               v-model="filter.verified.val"
-              ref="filter"
             ></v-autocomplete>
           </div>
         </div>
@@ -61,7 +58,6 @@
               class="no-error-msg"
               label="date, after"
               v-model="filter.created_at.val1"
-              ref="filter"
             />
           </div>
         </div>
@@ -71,7 +67,6 @@
               class="no-error-msg"
               label="date, before"
               v-model="filter.created_at.val2"
-              ref="filter"
             />
           </div>
         </div>
@@ -146,7 +141,6 @@ export default {
     ...mapMutations("programs", ["SET_FILTER_PROGRAMS"]),
     filterPrograms() {
       this.SET_FILTER_PROGRAMS(this.filter);
-      console.log("this.$refs.filter.value", this.$refs.filter);
       this.$emit("filter");
       this.$emit("filterCount", this.filter);
       this.$_closeModal();
diff --git a/src/components/TrainPrograms/Main.vue b/src/components/TrainPrograms/Main.vue
index 356c74c..e3d3ed6 100644
--- a/src/components/TrainPrograms/Main.vue
+++ b/src/components/TrainPrograms/Main.vue
@@ -13,15 +13,20 @@
             />
           </div>
         </div>
-        <v-row class="mt-4">
-          <v-col
-            class="pr-0 pt-0 pb-1"
-            v-for="(trainProgram, i) in getPrograms"
-            :key="i"
-            cols="12"
-            ><TrainProgramItem :program="trainProgram"
-          /></v-col>
-        </v-row>
+        <template v-if="getPrograms.length">
+          <v-row class="mt-4">
+            <v-col
+              class="pr-0 pt-0 pb-1"
+              v-for="(trainProgram, i) in getPrograms"
+              :key="i"
+              cols="12"
+              ><TrainProgramItem :program="trainProgram"
+            /></v-col>
+          </v-row>
+        </template>
+        <template v-else>
+          <div class="text-center mt-10">There are no items to display</div>
+        </template>
       </div>
     </main-back>
   </div>
@@ -35,26 +40,6 @@ export default {
     SectionTitle,
     TrainProgramItem,
   },
-  data: () => ({
-    trainPrograms: [
-      {
-        name: "My gym program",
-        text: "Forearm and chest",
-        sets: 3,
-        workout: 12,
-        started_in: "25-12-2021",
-        done: 80,
-      },
-      {
-        name: "basic yoga",
-        text: "for relaxation",
-        sets: 1,
-        workout: 3,
-        started_in: "25-12-2019",
-        done: 20,
-      },
-    ],
-  }),
   computed: {
     ...mapGetters("userPrograms", ["getPrograms"]),
   },
@@ -65,4 +50,4 @@ export default {
     await this.loadPrograms();
   },
 };
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/Users/Item.vue b/src/components/Users/Item.vue
index d1fa1d6..2094871 100644
--- a/src/components/Users/Item.vue
+++ b/src/components/Users/Item.vue
@@ -89,9 +89,6 @@ export default {
       });
     },
   },
-  created() {
-    console.log(this.user);
-  },
 };
 </script>
 <style scoped>
diff --git a/src/components/Users/Main.vue b/src/components/Users/Main.vue
index 6f6498b..fa2a5ca 100644
--- a/src/components/Users/Main.vue
+++ b/src/components/Users/Main.vue
@@ -19,33 +19,34 @@
               size="x-large"
               height="54"
               :text-mode="true"
-              text="2"
+              :text="getFilterCount ? getFilterCount : '0'"
               @click.native="$_openModal('filters')"
             />
           </div>
         </div>
+
         <v-row v-for="(user, i) in getUsers" :key="i" class="mt-4">
           <v-col cols="12"><UserItem :user="user" @userId="userId" /></v-col>
         </v-row>
       </div>
       <div class="text-center mt-40 mb-5">
-        <pagination
-          :pagination="getPaginationUser"
-          @pagination="changePagination"
-        />
+        <pagination :pagination="getPaginationUser" @pagination="changePagination" />
       </div>
     </main-back>
     <div class="text-center">
-      <ChangeRoleModal :userId="id" /><FiltersModal @filter="load" />
+      <ChangeRoleModal :allRoles="getRoles" :userId="id" /><FiltersModal
+        @filter="load"
+        :allRoles="getRoles"
+      />
     </div>
   </div>
-</template> 
+</template>
 <script>
 import SectionTitle from "../Global/Section/SectionTitle.vue";
 import ChangeRoleModal from "./Modals/ChangeRoleModal.vue";
 import FiltersModal from "./Modals/FiltersModal.vue";
 import UserItem from "./Item.vue";
-import { mapActions, mapGetters, mapMutations } from "vuex";
+import { mapActions, mapGetters, mapMutations, mapState } from "vuex";
 import { UserStorage } from "@/utils/storage";
 
 export default {
@@ -60,10 +61,16 @@ export default {
     id: null,
   }),
   computed: {
-    ...mapGetters("users", ["getUsers", "getPaginationUser"]),
+    ...mapGetters("users", [
+      "getUsers",
+      "getPaginationUser",
+      "getRoles",
+      "getFilterCount",
+    ]),
+    ...mapState("users", ["filters"]),
   },
   methods: {
-    ...mapActions("users", ["loadUsers", "loadTrainerTrainee"]),
+    ...mapActions("users", ["loadUsers", "loadTrainerTrainee", "laodRoles"]),
     ...mapMutations("users", ["SET_PAGINATION"]),
     changePagination(page) {
       if (this.getPaginationUser.page !== page) {
@@ -72,16 +79,18 @@ export default {
       }
     },
     async load() {
-      this.type === "admin"
-        ? await this.loadUsers()
-        : await this.loadTrainerTrainee();
+      this.type === "admin" ? await this.loadUsers() : await this.loadTrainerTrainee();
     },
     userId(id) {
       this.id = id;
     },
   },
-  created() {
-    this.load();
+  async created() {
+    if (!this.$route.query.role_name) {
+      this.load();
+    }
+    await this.laodRoles();
+    this.getRoles.push({ id: 0, name: "trainee" });
   },
 };
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/Users/Modals/ChangeRoleModal.vue b/src/components/Users/Modals/ChangeRoleModal.vue
index 11975e5..79097f3 100644
--- a/src/components/Users/Modals/ChangeRoleModal.vue
+++ b/src/components/Users/Modals/ChangeRoleModal.vue
@@ -52,38 +52,36 @@
   </basic-modal>
 </template>
 <script>
-import { mapActions, mapGetters } from "vuex";
+import { mapActions } from "vuex";
 import SectionTitle from "../../Global/Section/SectionTitle.vue";
 import toast from "@/utils/toast";
 export default {
   name: "modal_changeRole",
   components: { SectionTitle },
   props: {
+    allRoles: {
+      type: Array,
+    },
     userId: {},
   },
   data: () => ({
-    allRoles: [],
     role_id: null,
     currectRoleId: null,
   }),
   computed: {
-    ...mapGetters("users", ["getRoles"]),
     form() {
       return { userId: this.userId };
     },
   },
   methods: {
-    ...mapActions("users", ["laodRoles", "updateRole"]),
+    ...mapActions("users", ["updateRole"]),
     openModal({ role }) {
       this.currectRoleId = role ? role : 0;
       this.role_id = role ? role : 0;
-      console.log("this.form", this.form);
     },
     change() {
       this.form.roles_id = [];
       this.form.roles_id.push(this.role_id);
-      console.log(this.form.roles_id);
-      console.log(this.role_id);
     },
     async changeRole() {
       if (this.form.roles_id) {
@@ -103,11 +101,6 @@ export default {
       }
     },
   },
-  async created() {
-    await this.laodRoles();
-    this.allRoles = this.getRoles;
-    this.allRoles.push({ id: 0, name: "trainee" });
-  },
 };
 </script>
 <style scoped>
diff --git a/src/components/Users/Modals/FiltersModal.vue b/src/components/Users/Modals/FiltersModal.vue
index c465a38..9a0b714 100644
--- a/src/components/Users/Modals/FiltersModal.vue
+++ b/src/components/Users/Modals/FiltersModal.vue
@@ -29,7 +29,7 @@
             ></v-text-field>
           </div>
         </div>
-        <div class="my-6">
+        <div class="my-6" v-if="type === 'admin'">
           <div>
             <v-autocomplete
               class="no-error-msg pt-0"
@@ -88,8 +88,9 @@
 </template>
 <script>
 import SectionTitle from "../../Global/Section/SectionTitle.vue";
-import { mapActions, mapGetters, mapMutations } from "vuex";
+import { mapMutations } from "vuex";
 import { cloneDeep } from "lodash";
+import { UserStorage } from "@/utils/storage";
 const defaultFilter = {
   first_name: {
     type: "like",
@@ -110,14 +111,14 @@ export default {
   components: { SectionTitle },
   data: () => ({
     filter: cloneDeep(defaultFilter),
-    allRoles: null,
+    type: UserStorage.get() ? UserStorage.get().type : null,
   }),
-  computed: {
-    ...mapGetters("users", ["getRoles"]),
+  props: {
+    allRoles: {},
   },
   methods: {
     ...mapMutations("users", ["SET_FILTER_USER"]),
-    ...mapActions("users", ["laodRoles"]),
+    // ...mapActions("users", ["laodRoles"]),
     filterUser() {
       this.SET_FILTER_USER(this.filter);
       this.$emit("filter");
@@ -130,10 +131,11 @@ export default {
       this.$_closeModal();
     },
   },
-  async created() {
-    await this.laodRoles();
-    this.allRoles = this.getRoles;
-    this.allRoles.push({ id: 0, name: "trainee" });
+  created() {
+    if (this.$route.query.role_name) {
+      this.filter.role_name.val = this.$route.query.role_name;
+      this.filterUser();
+    }
   },
 };
 </script>
diff --git a/src/components/Workouts/Main.vue b/src/components/Workouts/Main.vue
index f7ad6e0..e844848 100644
--- a/src/components/Workouts/Main.vue
+++ b/src/components/Workouts/Main.vue
@@ -18,12 +18,10 @@
               icon-right="WMi-filter"
               class="custom-btn filter-btn mr-2"
               height="54"
-              text="2"
+              :text="getFilterCount ? getFilterCount : '0'"
               @click.native="$_openModal('filters')"
             />
-            <router-link
-              class="text-decoration-none"
-              :to="{ name: 'addWorkout' }"
+            <router-link class="text-decoration-none" :to="{ name: 'addWorkout' }"
               ><RectangleButton
                 size="xx-large"
                 icon="WMi-plus"
@@ -32,23 +30,25 @@
             /></router-link>
           </div>
         </div>
-        <v-row class="mt-10">
-          <v-col
-            cols="12"
-            md="6"
-            class="mb-3"
-            v-for="workout in getWorkouts"
-            :key="workout.id"
-            ><WorkoutItem :workout="workout"
-          /></v-col>
-        </v-row>
+        <template v-if="getWorkouts.length">
+          <v-row class="mt-10">
+            <v-col
+              cols="12"
+              md="6"
+              class="mb-3"
+              v-for="workout in getWorkouts"
+              :key="workout.id"
+              ><WorkoutItem :workout="workout"
+            /></v-col>
+          </v-row>
+        </template>
       </div>
-      <div class="text-center mt-40 mb-5">
-        <pagination
-          :pagination="getPaginationWorkout"
-          @pagination="changePagination"
-        />
+      <div class="text-center mt-40 mb-5" v-if="getWorkouts.length">
+        <pagination :pagination="getPaginationWorkout" @pagination="changePagination" />
       </div>
+      <template v-if="!getWorkouts.length">
+        <div class="text-center">There are no items to display</div>
+      </template>
     </main-back>
     <div class="text-center"><FiltersModal @filter="load" /></div>
   </div>
@@ -65,7 +65,7 @@ export default {
     FiltersModal,
   },
   computed: {
-    ...mapGetters("workouts", ["getWorkouts", "getPaginationWorkout"]),
+    ...mapGetters("workouts", ["getWorkouts", "getPaginationWorkout", "getFilterCount"]),
   },
   methods: {
     ...mapActions("workouts", ["loadWorkouts"]),
@@ -84,4 +84,4 @@ export default {
     this.load();
   },
 };
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/WorkoutsSeries/Item.vue b/src/components/WorkoutsSeries/Item.vue
index 17e736b..5df7820 100644
--- a/src/components/WorkoutsSeries/Item.vue
+++ b/src/components/WorkoutsSeries/Item.vue
@@ -93,9 +93,6 @@ export default {
       });
     },
   },
-  created() {
-    console.log(this.seriesWorkout);
-  }
 };
 </script>
 <style scoped>
diff --git a/src/router/index.js b/src/router/index.js
index b8609d7..d985634 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -63,15 +63,17 @@ function beforeLoad() {
         setTitle(to);
         const auth = to.meta && to.meta.auth ? to.meta.auth : false;
         const roles = to.meta && to.meta.roles ? to.meta.roles : false;
+        const onlyWhenLoggedOut = to.matched.some((record) => record.meta.onlyWhenLoggedOut);
 
         const loggedIn = TokenStorage.hasToken();
-        console.log(auth, loggedIn);
         if (auth && !loggedIn) {
             router.push({ name: 'login', query: { redirect: to.fullPath } });
         }
-
+        if (loggedIn && onlyWhenLoggedOut) {
+            return next('/');
+        }
         if (loggedIn && roles && Array.isArray(roles)) {
-            const ownType = UserStorage.get() ? UserStorage.get().role : '';
+            const ownType = UserStorage.get() ? UserStorage.get().type : '';
             if (!roles.includes(ownType)) {
                 router.push({ name: 'dashboard' });
             }
diff --git a/src/router/path.js b/src/router/path.js
index 15801a1..88378b4 100644
--- a/src/router/path.js
+++ b/src/router/path.js
@@ -3,16 +3,25 @@ export default [
         path: '/register',
         view: 'Register',
         name: 'register',
+        meta: {
+            onlyWhenLoggedOut: true
+        }
     },
     {
         path: '/login',
         view: 'Login',
         name: 'login',
+        meta: {
+            onlyWhenLoggedOut: true
+        }
     },
     {
         path: '/reset-password',
         view: 'PasswordReset',
-        name: 'passwordReset'
+        name: 'passwordReset',
+        meta: {
+            onlyWhenLoggedOut: true
+        }
     },
     {
         path: '/',
@@ -23,76 +32,91 @@ export default [
     {
         path: '/users',
         view: 'Users',
-        name: 'users'
+        name: 'users',
+        meta: { auth: true, roles: ["admin", "trainer"] }
     },
     {
         path: '/profile',
         view: 'Profile',
-        name: 'profile'
+        name: 'profile',
+        meta: { auth: true }
     },
     {
         path: '/workouts',
         view: 'Workouts',
-        name: 'workouts'
+        name: 'workouts',
+        meta: { auth: true, roles: ["admin"] }
     },
     {
         path: '/add-program',
         view: 'AddProgram',
-        name: 'addProgram'
+        name: 'addProgram',
+        meta: { auth: true, roles: ["admin"] }
     },
     {
         path: '/edit-program/:id?',
         view: 'AddProgram',
-        name: 'editProgram'
+        name: 'editProgram',
+        meta: { auth: true, roles: ["admin"] }
     },
     {
         path: '/add-workout',
         view: 'AddWorkout',
-        name: 'addWorkout'
+        name: 'addWorkout',
+        meta: { auth: true }
     },
     {
         path: '/edit-workout/:id?',
         view: 'AddWorkout',
-        name: 'editWorkout'
+        name: 'editWorkout',
+        meta: { auth: true }
     },
     {
         path: '/programs',
         view: 'Programs',
-        name: 'programs'
+        name: 'programs',
+        meta: { auth: true }
     },
     {
         path: '/programs/:id/series',
         view: 'ProgramSeries',
-        name: 'programSeries'
+        name: 'programSeries',
+        meta: { auth: true, roles: ["admin"] }
     },
     {
         path: '/programs/:programId/series/:seriesId/workouts',
         view: 'WorkoutsSeries',
-        name: 'workoutsSeries'
+        name: 'workoutsSeries',
+        meta: { auth: true, roles: ["admin"] }
     },
     {
         path: '/trains-programs',
         view: 'TrainsPrograms',
-        name: 'trainPrograms'
+        name: 'trainsPrograms',
+
     },
     {
         path: '/products',
         view: 'Products',
-        name: 'products'
+        name: 'products',
+        meta: { auth: true, roles: ["admin"] }
     },
     {
         path: '/add-product',
         view: 'AddProduct',
-        name: 'addProduct'
+        name: 'addProduct',
+        meta: { auth: true, roles: ["admin"] }
     },
     {
         path: '/edit-product/:id?',
         view: 'AddProduct',
-        name: 'editProduct'
+        name: 'editProduct',
+        meta: { auth: true, roles: ["admin"] }
     },
     {
         path: '/bookmarks',
         view: 'Bookmarks',
-        name: 'bookmarks'
+        name: 'bookmarks',
+        meta: { auth: true }
     },
 ]
\ No newline at end of file
diff --git a/src/store/modules/programs/actions.js b/src/store/modules/programs/actions.js
index dbec909..d793a89 100644
--- a/src/store/modules/programs/actions.js
+++ b/src/store/modules/programs/actions.js
@@ -1,10 +1,13 @@
 import ProgramRepository from "@/abstraction/repository/programRepository";
+import { setQuery } from "@/abstraction/resources/programResource";
 export default {
     async loadPrograms({ state, commit }) {
         try {
             let data = { pagination: state.pagination, filters: state.filters };
             let repository = new ProgramRepository();
             const resource = await repository.index(data);
+            let filterCount = setQuery({ filters: state.filters })
+            commit("SET_FILTER_COUNT", Object.keys(filterCount).length);
             commit("SET_PROGRAMS", resource.data);
             commit("SET_PAGINATION", resource.pagination);
         }
diff --git a/src/store/modules/programs/getters.js b/src/store/modules/programs/getters.js
index 6e04219..6e86240 100644
--- a/src/store/modules/programs/getters.js
+++ b/src/store/modules/programs/getters.js
@@ -1,5 +1,6 @@
 export default {
     getPrograms: state => state.programs,
     getProgram: state => state.program,
-    getPaginationProgram: state => state.pagination
+    getPaginationProgram: state => state.pagination,
+    getFilterCount: state => state.filterCount
 };
diff --git a/src/store/modules/programs/mutations.js b/src/store/modules/programs/mutations.js
index db3eedc..edf0ebc 100644
--- a/src/store/modules/programs/mutations.js
+++ b/src/store/modules/programs/mutations.js
@@ -1,5 +1,6 @@
 import Vue from "vue";
 export default {
+    // SETS
     SET_PROGRAMS(state, payload) {
         Vue.set(state, "programs", payload);
     },
@@ -9,25 +10,32 @@ export default {
     SET_PAGINATION(state, pagination) {
         pagination = { ...state.pagination, ...pagination };
         Vue.set(state, "pagination", pagination);
-        console.log('state.pagination', state.pagination);
     },
     SET_FILTER_PROGRAMS(state, payload) {
         Vue.set(state, "filters", payload);
         state.pagination.page = 1
     },
+    SET_FILTER_COUNT(state, payload) {
+        console.log(payload);
+        Vue.set(state, "filterCount", payload);
+    },
+    // ADD
     ADD_PROGRAM(state, payload) {
         state.programs.push(payload);
     },
+    // UPDATE
     UPDATE_PROGRAM(state, payload) {
         const index = state.programs.findIndex((x) => x.id === payload.id);
         Vue.set(state.programs, index, payload);
     },
+    // DELETE
     DELETE_PROGRAM(state, payload) {
         const index = state.programs.findIndex((x) => x.id === payload);
         Vue.delete(state.programs, index);
         Vue.set(state.pagination, 'itemsLength', state.pagination.itemsLength - 1);
         Vue.set(state.pagination, 'pageStop', state.pagination.pageStop - 1);
     },
+    // OTHER    
     VERIFY_PROGRAM(state, payload) {
         const index = state.programs.find(x => x.id === payload);
         index.verified = !index.verified;
diff --git a/src/store/modules/programs/state.js b/src/store/modules/programs/state.js
index 83fa995..04b9b44 100644
--- a/src/store/modules/programs/state.js
+++ b/src/store/modules/programs/state.js
@@ -4,5 +4,6 @@ export default {
     pagination: {
         itemsPerPage: 12
     },
-    filters: {}
+    filters: {},
+    filterCount: null
 };
diff --git a/src/store/modules/users/actions.js b/src/store/modules/users/actions.js
index 99e3af5..f6ad622 100644
--- a/src/store/modules/users/actions.js
+++ b/src/store/modules/users/actions.js
@@ -1,10 +1,13 @@
 import UserRepository from "@/abstraction/repository/userRepository";
 import RoleRepository from "@/abstraction/repository/roleRepository";
+import { setQuery } from "@/abstraction/resources/userResource";
 export default {
     async loadUsers({ state, commit }) {
         let data = { pagination: state.pagination, filters: state.filters }
         let repository = new UserRepository();
         const resource = await repository.indexUsers(data);
+        let filterCount = setQuery({ filters: state.filters })
+        commit("SET_FILTER_COUNT", Object.keys(filterCount).length);
         commit("SET_USERS", resource.data);
         commit("SET_PAGINATION", resource.pagination);
     },
@@ -23,7 +26,6 @@ export default {
     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) {
diff --git a/src/store/modules/users/getters.js b/src/store/modules/users/getters.js
index 96c6fda..9d7b264 100644
--- a/src/store/modules/users/getters.js
+++ b/src/store/modules/users/getters.js
@@ -1,5 +1,6 @@
 export default {
     getUsers: state => state.users,
     getRoles: state => state.roles,
-    getPaginationUser: state => state.pagination
+    getPaginationUser: state => state.pagination,
+    getFilterCount: state => state.filterCount
 };
diff --git a/src/store/modules/users/mutations.js b/src/store/modules/users/mutations.js
index 757e5f3..c05e7c4 100644
--- a/src/store/modules/users/mutations.js
+++ b/src/store/modules/users/mutations.js
@@ -1,5 +1,6 @@
 import Vue from "vue";
 export default {
+    // SET
     SET_USERS(state, payload) {
         Vue.set(state, "users", payload);
     },
@@ -14,11 +15,15 @@ export default {
     SET_ROLES(state, payload) {
         Vue.set(state, "roles", payload);
     },
+    SET_FILTER_COUNT(state, payload) {
+        Vue.set(state, "filterCount", payload);
+    },
+    // UPDATE
     UPDATE_USER(state, payload) {
-        console.log(payload);
         const index = state.users.findIndex((x) => x.id === payload.id);
         Vue.set(state.users, index, payload);
     },
+    // DELETE
     DELETE_USER(state, userId) {
         const index = state.users.findIndex((x) => x.id === userId);
         Vue.delete(state.users, index);
diff --git a/src/store/modules/users/state.js b/src/store/modules/users/state.js
index abe4d54..99c3eae 100644
--- a/src/store/modules/users/state.js
+++ b/src/store/modules/users/state.js
@@ -4,5 +4,6 @@ export default {
     pagination: {
         itemsPerPage: 12
     },
-    filters: {}
+    filters: {},
+    filterCount: null
 };
diff --git a/src/store/modules/workouts/actions.js b/src/store/modules/workouts/actions.js
index 1a708bf..b4633e1 100644
--- a/src/store/modules/workouts/actions.js
+++ b/src/store/modules/workouts/actions.js
@@ -1,10 +1,13 @@
 import WorkoutRepository from "@/abstraction/repository/workoutRepository";
+import { setQuery } from "@/abstraction/resources/workoutResource";
 export default {
     async loadWorkouts({ state, commit }) {
         try {
             let data = { pagination: state.pagination, filters: state.filters };
             let repository = new WorkoutRepository();
             const resource = await repository.index(data);
+            let filterCount = setQuery({ filters: state.filters })
+            commit("SET_FILTER_COUNT", Object.keys(filterCount).length);
             commit("SET_WORKOUTS", resource.data);
             commit("SET_PAGINATION", resource.pagination);
         } catch (e) {
diff --git a/src/store/modules/workouts/getters.js b/src/store/modules/workouts/getters.js
index ece0c82..666c10e 100644
--- a/src/store/modules/workouts/getters.js
+++ b/src/store/modules/workouts/getters.js
@@ -1,5 +1,6 @@
 export default {
     getWorkouts: state => state.workouts,
     getWorkout: state => state.workout,
-    getPaginationWorkout: state => state.pagination
+    getPaginationWorkout: state => state.pagination,
+    getFilterCount: state => state.filterCount
 }
\ No newline at end of file
diff --git a/src/store/modules/workouts/mutations.js b/src/store/modules/workouts/mutations.js
index f0dc5c2..bb6e143 100644
--- a/src/store/modules/workouts/mutations.js
+++ b/src/store/modules/workouts/mutations.js
@@ -1,5 +1,6 @@
 import Vue from "vue";
 export default {
+    // SET
     SET_WORKOUTS(state, payload) {
         Vue.set(state, "workouts", payload);
     },
@@ -14,13 +15,19 @@ export default {
         Vue.set(state, "filters", payload);
         state.pagination.page = 1
     },
+    SET_FILTER_COUNT(state, payload) {
+        Vue.set(state, "filterCount", payload);
+    },
+    // ADD
     ADD_WORKOUT(state, payload) {
         state.workouts.push(payload);
     },
+    // UPDATE
     UPDATE_WORKOUT(state, payload) {
         const index = state.workouts.findIndex((x) => x.id === payload.id);
         Vue.set(state.workouts, index, payload);
     },
+    // DELETE
     DELETE_WORKOUT(state, workoutId) {
         const index = state.workouts.findIndex((x) => x.id === workoutId);
         Vue.delete(state.workouts, index);
diff --git a/src/store/modules/workouts/state.js b/src/store/modules/workouts/state.js
index 009fd6e..e80a6fa 100644
--- a/src/store/modules/workouts/state.js
+++ b/src/store/modules/workouts/state.js
@@ -4,5 +4,6 @@ export default {
     pagination: {
         itemsPerPage: 12
     },
-    filters: {}
+    filters: {},
+    filterCount: null
 };
diff --git a/src/views/Login.vue b/src/views/Login.vue
index c2cdeff..bb875f3 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -13,7 +13,7 @@
             <div class="auth__subtitle text-uppercase mb-2">
               please provide us your login details
             </div>
-            <form>
+            <v-form @submit.prevent="doLogin">
               <v-row>
                 <v-col cols="12">
                   <v-text-field
@@ -47,7 +47,7 @@
                       height="25"
                       :text-mode="true"
                       text="sign in"
-                      @click.native="doLogin"
+                      type="submit"
                     />
                   </div>
                 </v-col>
@@ -78,7 +78,7 @@
                   </div>
                 </v-col>
               </v-row>
-            </form>
+            </v-form>
           </v-col>
         </template>
       </auth-basic>
@@ -111,4 +111,4 @@ export default {
     },
   },
 };
-</script>
\ No newline at end of file
+</script>
diff --git a/src/views/Register.vue b/src/views/Register.vue
index 48cc8e6..ced7f07 100644
--- a/src/views/Register.vue
+++ b/src/views/Register.vue
@@ -13,7 +13,7 @@
             <div class="auth__subtitle text-uppercase mb-2">
               please provide us this information
             </div>
-            <form>
+            <v-form @submit.prevent="doRegister">
               <v-row>
                 <v-col cols="12">
                   <v-text-field
@@ -51,6 +51,9 @@
                     placeholder="password"
                     label="password"
                     class="no-error-msg"
+                    :type="showPassword ? 'text' : 'password'"
+                    @click:append="showPassword = !showPassword"
+                    :append-icon="showPassword ? 'WMi-eye-off' : 'WMi-eye'"
                     dark
                     v-model="form.password"
                   ></v-text-field>
@@ -62,6 +65,9 @@
                     placeholder="your password again"
                     label="your password again"
                     class="no-error-msg"
+                    :type="showPassword ? 'text' : 'password'"
+                    @click:append="showPassword = !showPassword"
+                    :append-icon="showPassword ? 'WMi-eye-off' : 'WMi-eye'"
                     dark
                     v-model="form.password_confirmation"
                   ></v-text-field>
@@ -75,7 +81,7 @@
                       height="25"
                       :text-mode="true"
                       text="do sign up"
-                      @click.native="doRegister(form)"
+                      type="submit"
                     />
                   </div>
                 </v-col>
@@ -105,7 +111,7 @@
                   </div>
                 </v-col>
               </v-row>
-            </form>
+            </v-form>
           </v-col>
         </template>
       </auth-basic>
@@ -125,6 +131,7 @@ export default {
     AuthBasic,
   },
   data: () => ({
+    showPassword: false,
     form: {},
   }),
   methods: {
@@ -137,4 +144,4 @@ export default {
     },
   },
 };
-</script>
\ No newline at end of file
+</script>
diff --git a/src/views/Users.vue b/src/views/Users.vue
index 534fa7a..8542fe5 100644
--- a/src/views/Users.vue
+++ b/src/views/Users.vue
@@ -22,10 +22,17 @@
   </v-container>
 </template>
 <script>
+import { mapState } from 'vuex';
 import UsersHome from "../components/Users/Main";
 export default {
   components: {
     UsersHome,
   },
+  computed: {
+    ...mapState('users', ['filters']),
+  },
+  created() {
+    console.log(this.filters);
+  }
 };
 </script>
\ No newline at end of file