diff --git a/package-lock.json b/package-lock.json
index 8bb17a0..6d26647 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4554,6 +4554,11 @@
       "integrity": "sha1-P7rwIL/XlIhAcuomsel5HUWmKfA=",
       "dev": true
     },
+    "dropzone": {
+      "version": "5.9.3",
+      "resolved": "https://registry.npmjs.org/dropzone/-/dropzone-5.9.3.tgz",
+      "integrity": "sha512-Azk8kD/2/nJIuVPK+zQ9sjKMRIpRvNyqn9XwbBHNq+iNuSccbJS6hwm1Woy0pMST0erSo0u4j+KJaodndDk4vA=="
+    },
     "duplexer": {
       "version": "0.1.2",
       "resolved": "https://registry.npm.taobao.org/duplexer/download/duplexer-0.1.2.tgz?cache=0&sync_timestamp=1597221020457&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fduplexer%2Fdownload%2Fduplexer-0.1.2.tgz",
@@ -11548,6 +11553,14 @@
       "integrity": "sha1-HuO8mhbsv1EYvjNLsV+cRvgvWCU=",
       "dev": true
     },
+    "vue2-dropzone": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/vue2-dropzone/-/vue2-dropzone-3.6.0.tgz",
+      "integrity": "sha512-YXC1nCWIZvfa98e/i6h+EshZCkFSxFEh0Sxr9ODfThAPPDVhAzLLlz/4XIx0NGO1QeSy6htwSstte47R7vVhLQ==",
+      "requires": {
+        "dropzone": "^5.5.1"
+      }
+    },
     "vuetify": {
       "version": "2.5.8",
       "resolved": "https://registry.nlark.com/vuetify/download/vuetify-2.5.8.tgz?cache=0&sync_timestamp=1630370704981&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fvuetify%2Fdownload%2Fvuetify-2.5.8.tgz",
@@ -12294,6 +12307,11 @@
       "integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=",
       "dev": true
     },
+    "willatoast": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/willatoast/-/willatoast-1.1.1.tgz",
+      "integrity": "sha512-tf37LFQSErMh2+apOlQZAdan00MaqKeDAE2SEmglHzU+dQi3ykNy1VXSuDYmE3BQ3PSLKVwzBB9tItCC2+FXew=="
+    },
     "word-wrap": {
       "version": "1.2.3",
       "resolved": "https://registry.npm.taobao.org/word-wrap/download/word-wrap-1.2.3.tgz",
diff --git a/package.json b/package.json
index 9b0d094..5cfa427 100644
--- a/package.json
+++ b/package.json
@@ -22,8 +22,10 @@
     "vue-advanced-cropper": "^1.8.2",
     "vue-meta": "^2.4.0",
     "vue-router": "^3.5.2",
+    "vue2-dropzone": "^3.6.0",
     "vuetify": "^2.4.0",
-    "vuex": "^3.6.2"
+    "vuex": "^3.6.2",
+    "willatoast": "^1.1.1"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",
diff --git a/src/abstraction/repository/programSerieWorkoutsRepository.js b/src/abstraction/repository/programSerieWorkoutsRepository.js
deleted file mode 100644
index 7da629c..0000000
--- a/src/abstraction/repository/programSerieWorkoutsRepository.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import { getArray } from '../resources/programSerieWorkoutsResource';
-
-export default class ProgramSerieWorkoutsRepository {
-   
-}
\ No newline at end of file
diff --git a/src/abstraction/repository/usersRepository.js b/src/abstraction/repository/usersRepository.js
index 416b15e..f3509d4 100644
--- a/src/abstraction/repository/usersRepository.js
+++ b/src/abstraction/repository/usersRepository.js
@@ -3,13 +3,20 @@ import url from "@/router/url";
 import { getArray, setQuery } from "../resources/usersResource";
 
 export default class UsersRepository {
-    async index(data) {
+    async indexUsers(data) {
         let params = setQuery(data)
         let response = await axios.get(url('indexUsers'), { params })
         if (response.status === 200) {
             return getArray(response.data)
         }
     }
+    async loadTrainerTrainee(data) {
+        let params = setQuery(data)
+        let response = await axios.get(url('indexTrainerTrainee'), { params })
+        if (response.status === 200) {
+            return getArray(response.data)
+        }
+    }
     async delete(userId) {
         await axios.delete(url("destroyUser", { user: userId }));
     }
diff --git a/src/abstraction/repository/workoutToSerieRepository.js b/src/abstraction/repository/workoutToSerieRepository.js
index 0cf2623..f74f236 100644
--- a/src/abstraction/repository/workoutToSerieRepository.js
+++ b/src/abstraction/repository/workoutToSerieRepository.js
@@ -3,7 +3,6 @@ import url from "@/router/url";
 import { getJson, getArray, setQuery, setData } from "../resources/workoutResource.js";
 export default class WorkoutToSerieRepository {
     async index(data) {
-        console.log(data);
         let response = await axios.get(url("indexSerieWorkouts", { serie: data.serieId, course: data.courseId }));
         if (response.status === 200) {
             return getArray(response.data);
diff --git a/src/components/AddProduct/Main.vue b/src/components/AddProduct/Main.vue
index 1d5c35f..cf0d615 100644
--- a/src/components/AddProduct/Main.vue
+++ b/src/components/AddProduct/Main.vue
@@ -184,13 +184,7 @@
                 <v-col cols="12">
                   <div class="upload">
                     <div class="add__product dark w-100 h-100">
-                      <div class="add__workout__picture d-flex align-center">
-                        <i class="WMi-picture add__workout__picture--icon"></i>
-                        <div class="add__workout__picture--text">
-                          please upload or drag & Drop <br />
-                          product images here
-                        </div>
-                      </div>
+                      <Dropzone :batchId="random_token" />
                     </div>
                   </div>
                 </v-col>
@@ -226,15 +220,20 @@ import { mapActions, mapGetters } from "vuex";
 import SectionTitle from "../Global/Section/SectionTitle.vue";
 import FileRepository from "../../abstraction/repository/FileRepository";
 import ImageCropper from "../Global/Input/ImageCropper.vue";
+import Dropzone from "../Global/Input/Dropzone.vue";
+import toast from "@/utils/toast";
 import { makeid } from "@/utils/math";
 const RANDOM_TOKEN = makeid(50);
+
 //
 export default {
   components: {
     SectionTitle,
     ImageCropper,
+    Dropzone,
   },
   data: () => ({
+    random_token: RANDOM_TOKEN,
     form: {
       batch_id: RANDOM_TOKEN,
     },
@@ -276,9 +275,8 @@ export default {
     async submit() {
       try {
         let valid = this.$refs.form.validate();
-        console.log(valid);
         if (valid) {
-          if (this.fileForm.media !== this.fileForm.media) {
+          if (this.fileForm.media) {
             let repository = new FileRepository();
             await repository.store(this.fileForm);
           }
@@ -287,6 +285,8 @@ export default {
           } else {
             this.addProduct(this.form);
           }
+        } else {
+          toast.error("The information entered is incorrect", "Error");
         }
       } catch (e) {
         return e;
@@ -320,53 +320,4 @@ export default {
   padding-right: 100px !important;
   padding-left: 100px !important;
 }
-.add__workout__picture {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-.add__workout__picture--text {
-  width: max-content;
-  line-height: 18px;
-  text-transform: uppercase;
-}
-.add__workout__picture--icon {
-  font-size: 40px;
-  margin-right: 20px;
-}
-.upload {
-  height: 148px;
-}
 </style>
-<style>
-.vue-treeselect {
-  margin-top: 7px;
-}
-.vue-treeselect__menu-container {
-  color: var(--color-black) !important;
-}
-.vue-treeselect__control {
-  padding-left: 5 px;
-  padding-right: 5 px;
-  display: table;
-  table-layout: fixed;
-  width: 100%;
-  height: 36 px;
-  border-color: rgb(255, 255, 255);
-  border-style: solid;
-  border-width: 0 0 1px 0;
-  border-radius: 0;
-  background: transparent;
-  transition-duration: 200ms;
-  transition-property: border-color, box-shadow, width, height, background-color,
-    opacity;
-  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-}
-.vue-treeselect__single-value {
-  color: var(--color-white);
-}
-.vue-treeselect__placeholder {
-  text-transform: uppercase;
-}
-</style>
\ No newline at end of file
diff --git a/src/components/AddProduct/Sections.vue b/src/components/AddProduct/Sections.vue
deleted file mode 100644
index ff9b373..0000000
--- a/src/components/AddProduct/Sections.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<template>
-  <div class="h-100">
-    <main-back height="100%">
-      <div class="mt-16">
-        <ul class="pl-0 ml-0">
-          <MenuItem text="Home" />
-          <MenuItem text="my profile" />
-          <MenuItem text="my programs" />
-          <MenuItem text="my trainee" />
-          <MenuItem text="my bookmarks" />
-          <MenuItem :active="true" text="products" />
-          <MenuItem text="admins" />
-          <MenuItem text="traniners" />
-          <MenuItem text="workouts" />
-        </ul>
-      </div>
-    </main-back>
-  </div>
-</template>
-<script>
-import MenuItem from "../Global/Section/MenuItem.vue";
-export default {
-  components: {
-    MenuItem,
-  },
-};
-</script>
diff --git a/src/components/AddProgram/Sections.vue b/src/components/AddProgram/Sections.vue
deleted file mode 100644
index 0807536..0000000
--- a/src/components/AddProgram/Sections.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<template>
-  <div class="h-100">
-    <main-back height="100%">
-      <div class="mt-16">
-        <ul class="pl-0 ml-0">
-          <MenuItem text="Home" />
-          <MenuItem text="my profile" />
-          <MenuItem :active="true" text="my programs" />
-          <MenuItem text="my trainee" />
-          <MenuItem text="my bookmarks" />
-          <MenuItem text="products" />
-          <MenuItem text="admins" />
-          <MenuItem text="traniners" />
-          <MenuItem text="workouts" />
-        </ul>
-      </div>
-    </main-back>
-  </div>
-</template>
-<script>
-import MenuItem from "../Global/Section/MenuItem.vue";
-export default {
-  components: {
-    MenuItem,
-  },
-};
-</script>
diff --git a/src/components/AddWorkout/Sections.vue b/src/components/AddWorkout/Sections.vue
deleted file mode 100644
index b814f1e..0000000
--- a/src/components/AddWorkout/Sections.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<template>
-  <div class="h-100">
-    <main-back height="100%">
-      <div class="mt-16">
-        <ul class="pl-0 ml-0">
-          <MenuItem text="Home" />
-          <MenuItem text="my profile" />
-          <MenuItem text="my programs" />
-          <MenuItem text="my trainee" />
-          <MenuItem text="my bookmarks" />
-          <MenuItem text="products" />
-          <MenuItem text="admins" />
-          <MenuItem text="traniners" />
-          <MenuItem :active="true" text="workouts" />
-        </ul>
-      </div>
-    </main-back>
-  </div>
-</template>
-<script>
-import MenuItem from "../Global/Section/MenuItem.vue";
-export default {
-  components: {
-    MenuItem,
-  },
-};
-</script>
diff --git a/src/components/Bookmarks/Main.vue b/src/components/Bookmarks/Main.vue
index 680ce45..454761f 100644
--- a/src/components/Bookmarks/Main.vue
+++ b/src/components/Bookmarks/Main.vue
@@ -6,7 +6,7 @@
           <div>
             <SectionTitle
               backText="home page"
-              link="dashboardTrainee"
+              link="dashboard"
               icon="WMi-left-open"
               title="my bookmarks"
               subTitle="let us know you better, it comes handy."
diff --git a/src/components/Bookmarks/Sections.vue b/src/components/Bookmarks/Sections.vue
deleted file mode 100644
index f77834a..0000000
--- a/src/components/Bookmarks/Sections.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<template>
-  <div class="h-100">
-    <main-back height="100%">
-      <div class="mt-16">
-        <ul class="pl-0 ml-0">
-          <MenuItem text="Home" />
-          <MenuItem text="my profile" />
-          <MenuItem text="my programs" />
-          <MenuItem text="my trainee" />
-          <MenuItem :active="true" text="my bookmarks" />
-          <MenuItem text="products" />
-          <MenuItem text="admins" />
-          <MenuItem text="traniners" />
-          <MenuItem text="workouts" />
-        </ul>
-      </div>
-    </main-back>
-  </div>
-</template>
-<script>
-import MenuItem from "../Global/Section/MenuItem.vue";
-export default {
-  components: {
-    MenuItem,
-  },
-};
-</script>
diff --git a/src/components/Global/Input/Dropzone.vue b/src/components/Global/Input/Dropzone.vue
new file mode 100644
index 0000000..7d533ce
--- /dev/null
+++ b/src/components/Global/Input/Dropzone.vue
@@ -0,0 +1,126 @@
+<template>
+  <div>
+    <vue-dropzone
+      ref="myVueDropzone"
+      id="dropzone"
+      :destroyDropzone="false"
+      @vdropzone-sending="setParams"
+      @vdropzone-removed-file="removeFile"
+      :options="dropzoneOptions"
+      @vdropzone-success="responseSuccess"
+    >
+    </vue-dropzone>
+  </div>
+</template>
+
+<script>
+import vue2Dropzone from "vue2-dropzone";
+import { TokenStorage } from "@/utils/storage";
+import url from "@/router/url";
+import axios from "axios";
+import "vue2-dropzone/dist/vue2Dropzone.min.css";
+export default {
+  props: {
+    defaultMessage: {
+      default:
+        "<div class='add__workout__picture d-flex align-center'> <i class='WMi-picture add__workout__picture--icon'></i>  <div class='add__workout__picture--text'>   please upload or drag & Drop <br />  product images here</div></div>",
+    },
+    files: { default: () => [] },
+    collection: { default: "image" },
+    modelName: { default: "model" },
+    batchId: {
+      type: String,
+      default: "asdfghjklqwertyuiopmnbvcxasdfghjklqwertyuiopmnbvcx",
+    },
+  },
+  components: {
+    vueDropzone: vue2Dropzone,
+  },
+  data() {
+    return {
+      dropzoneOptions: {
+        url: "https://app.champya-dev.ir" + url("storeFile"),
+        thumbnailWidth: 200,
+        headers: {
+          authorization: `Bearer ${TokenStorage.getToken()}`,
+          "accept-language": "en",
+        },
+        addRemoveLinks: true,
+        dictDefaultMessage: this.defaultMessage,
+        sendingMultiple: true,
+        removeType: "server",
+        paramName: "media",
+      },
+    };
+  },
+  methods: {
+    responseSuccess(file, response) {
+      if (response.data && response.data.id) {
+        file["id"] = response.data.id;
+        this.$emit("success", response.data);
+      }
+    },
+    removeFile(file) {
+      if (this.dropzoneOptions.removeType == "server") {
+        axios.delete(url("destroyFile", { media: file.id }));
+      }
+    },
+    manuallyLoadFiles(files) {
+      //file =[ {size: 123, name: "Icon", type: "image/png", url: "https://myvizo.com/img/logo_sm.png"}]
+      if (Array.isArray(files) && files.length) {
+        for (const file of files) {
+          this.$refs.myVueDropzone.manuallyAddFile(
+            {
+              name: file.file_name,
+              type: file.mime_type,
+              id: file.id,
+              size: file.size,
+            },
+            file.thumbnail
+          );
+        }
+      }
+    },
+    manuallyRemoveAllFiles() {
+      this.dropzoneOptions.removeType = "client";
+      this.$refs.myVueDropzone.removeAllFiles();
+      this.dropzoneOptions.removeType = "server";
+    },
+    setParams(file, xhr, formData) {
+      formData.append("batch_id", this.batchId);
+      formData.append("collection", this.collection);
+    },
+  },
+  watch: {
+    files(files) {
+      this.manuallyRemoveAllFiles();
+      this.manuallyLoadFiles(files);
+    },
+  },
+};
+</script>
+<style>
+.vue-dropzone {
+  border: none;
+  background: var(--color-black);
+  border-radius: 5px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.add__workout__picture {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.add__workout__picture--text {
+  width: max-content;
+  line-height: 18px;
+  text-transform: uppercase;
+}
+.add__workout__picture--icon {
+  font-size: 40px;
+  margin-right: 20px;
+}
+</style>
diff --git a/src/components/Global/Modal/BasicModal.vue b/src/components/Global/Modal/BasicModal.vue
index 9bee153..df2e4f1 100644
--- a/src/components/Global/Modal/BasicModal.vue
+++ b/src/components/Global/Modal/BasicModal.vue
@@ -5,22 +5,25 @@
     :width="width"
     :transition="transition"
     dark
+    :tag="tag"
   >
     <main-back height="100%" :is-modal="true">
-      <v-card class="wa__modal">
-        <div class="wa__modal-header">
-          <slot name="header" :modal="modal" :data="data" v-if="modal"></slot>
-        </div>
-        <v-card-text class="wa__modal-content pb-0">
-          <slot :modal="modal" :data="data" v-if="modal"></slot>
-        </v-card-text>
-        <template v-if="!notFooter">
-          <v-divider class="mb-0"></v-divider>
-        </template>
-        <v-card-actions class="wa__modal-footer px-0">
-          <slot name="footer" :modal="modal" :data="data" v-if="modal"></slot>
-        </v-card-actions>
-      </v-card>
+      <component :is="tag === 'form' ? 'v-form' : 'div'">
+        <v-card class="wa__modal">
+          <div class="wa__modal-header">
+            <slot name="header" :modal="modal" :data="data" v-if="modal"></slot>
+          </div>
+          <v-card-text class="wa__modal-content pb-0">
+            <slot :modal="modal" :data="data" v-if="modal"></slot>
+          </v-card-text>
+          <template v-if="!notFooter">
+            <v-divider class="mb-0"></v-divider>
+          </template>
+          <v-card-actions class="wa__modal-footer px-0">
+            <slot name="footer" :modal="modal" :data="data" v-if="modal"></slot>
+          </v-card-actions>
+        </v-card>
+      </component>
     </main-back>
   </v-dialog>
 </template>
@@ -28,7 +31,6 @@
 
 <script>
 import { mapGetters } from "vuex";
-
 export default {
   props: {
     width: { default: null },
@@ -38,6 +40,9 @@ export default {
     notFooter: {
       default: false,
     },
+    tag: {
+      default: "div",
+    },
   },
   data: () => ({
     isOpenModal: false,
diff --git a/src/components/Global/Section/SideBar.vue b/src/components/Global/Section/SideBar.vue
index a3f95a4..bbe1d85 100644
--- a/src/components/Global/Section/SideBar.vue
+++ b/src/components/Global/Section/SideBar.vue
@@ -6,20 +6,20 @@
           <template v-if="role === 'admin'">
             <MenuItem :active="true" text="Home" link="dashboard" />
             <MenuItem text="my profile" link="profile" />
-            <MenuItem text="my bookmarks" link="dashboard" />
+            <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>
           <template v-if="role === 'trainee'">
-            <MenuItem :active="true" text="Home" link="dashboardTrainee" />
+            <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>
           <template v-if="role === 'trainer'">
-            <MenuItem :active="true" text="Home" link="dashboardTrainer" />
+            <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" />
diff --git a/src/components/Products/Sections.vue b/src/components/Products/Sections.vue
deleted file mode 100644
index ff9b373..0000000
--- a/src/components/Products/Sections.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<template>
-  <div class="h-100">
-    <main-back height="100%">
-      <div class="mt-16">
-        <ul class="pl-0 ml-0">
-          <MenuItem text="Home" />
-          <MenuItem text="my profile" />
-          <MenuItem text="my programs" />
-          <MenuItem text="my trainee" />
-          <MenuItem text="my bookmarks" />
-          <MenuItem :active="true" text="products" />
-          <MenuItem text="admins" />
-          <MenuItem text="traniners" />
-          <MenuItem text="workouts" />
-        </ul>
-      </div>
-    </main-back>
-  </div>
-</template>
-<script>
-import MenuItem from "../Global/Section/MenuItem.vue";
-export default {
-  components: {
-    MenuItem,
-  },
-};
-</script>
diff --git a/src/components/Profile/Main.vue b/src/components/Profile/Main.vue
index 5c4758e..7bfe346 100644
--- a/src/components/Profile/Main.vue
+++ b/src/components/Profile/Main.vue
@@ -5,7 +5,7 @@
         <div>
           <SectionTitle
             backText="home page"
-            link="dashboardTrainee"
+            link="dashboard"
             icon="WMi-left-open"
             title="my profile"
             subTitle="let us know you better, it comes handy."
diff --git a/src/components/Profile/Sections.vue b/src/components/Profile/Sections.vue
deleted file mode 100644
index c4d8316..0000000
--- a/src/components/Profile/Sections.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<template>
-  <div class="h-100">
-    <main-back height="100%">
-      <div class="mt-16">
-        <ul class="pl-0 ml-0">
-          <MenuItem text="Home" />
-          <MenuItem :active="true" text="my profile" />
-          <MenuItem text="my programs" />
-          <MenuItem text="my trainee" />
-          <MenuItem text="my bookmarks" />
-          <MenuItem text="products" />
-          <MenuItem text="admins" />
-          <MenuItem text="traniners" />
-          <MenuItem text="workouts" />
-        </ul>
-      </div>
-    </main-back>
-  </div>
-</template>
-<script>
-import MenuItem from "../Global/Section/MenuItem.vue";
-export default {
-  components: {
-    MenuItem,
-  },
-};
-</script>
diff --git a/src/components/ProgramSeries/Item.vue b/src/components/ProgramSeries/Item.vue
index 4180f17..61bcc61 100644
--- a/src/components/ProgramSeries/Item.vue
+++ b/src/components/ProgramSeries/Item.vue
@@ -17,7 +17,7 @@
           </div>
         </v-col>
         <v-col cols="3">
-          <div class="d-flex align-center mt-n4">
+          <div class="d-flex align-center justify-center mt-n4">
             <div class="series__per__week--quantity wa__f__m__eb mr-2">
               {{ series.repeat }}
             </div>
@@ -28,7 +28,7 @@
           </div>
         </v-col>
         <v-col cols="3">
-          <div class="d-flex align-center mt-n4">
+          <div class="d-flex align-center justify-center mt-n4">
             <div class="series__per__week--quantity wa__f__m__eb mr-2">
               {{ series.workouts_count ? series.workouts_count : 0 }}
             </div>
@@ -110,5 +110,9 @@ export default {
   text-transform: uppercase;
   letter-spacing: 5px;
   margin-top: 8px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  word-wrap: break-word;
+  overflow: hidden;
 }
 </style>
\ No newline at end of file
diff --git a/src/components/ProgramSeries/Sections.vue b/src/components/ProgramSeries/Sections.vue
deleted file mode 100644
index 0807536..0000000
--- a/src/components/ProgramSeries/Sections.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<template>
-  <div class="h-100">
-    <main-back height="100%">
-      <div class="mt-16">
-        <ul class="pl-0 ml-0">
-          <MenuItem text="Home" />
-          <MenuItem text="my profile" />
-          <MenuItem :active="true" text="my programs" />
-          <MenuItem text="my trainee" />
-          <MenuItem text="my bookmarks" />
-          <MenuItem text="products" />
-          <MenuItem text="admins" />
-          <MenuItem text="traniners" />
-          <MenuItem text="workouts" />
-        </ul>
-      </div>
-    </main-back>
-  </div>
-</template>
-<script>
-import MenuItem from "../Global/Section/MenuItem.vue";
-export default {
-  components: {
-    MenuItem,
-  },
-};
-</script>
diff --git a/src/components/Programs/Main.vue b/src/components/Programs/Main.vue
index 48f014a..0af13a2 100644
--- a/src/components/Programs/Main.vue
+++ b/src/components/Programs/Main.vue
@@ -55,7 +55,7 @@
       </div>
     </main-back>
     <div class="text-center">
-      <FiltersModal />
+      <FiltersModal @filter="load" />
     </div>
   </div>
 </template>
@@ -82,9 +82,12 @@ export default {
         this.loadPrograms();
       }
     },
+    async load() {
+      await this.loadPrograms();
+    },
   },
   created() {
-    this.loadPrograms();
+    this.load();
   },
 };
 </script>
\ No newline at end of file
diff --git a/src/components/Programs/Modals/FiltersModal.vue b/src/components/Programs/Modals/FiltersModal.vue
index f3e65ee..dda4b93 100644
--- a/src/components/Programs/Modals/FiltersModal.vue
+++ b/src/components/Programs/Modals/FiltersModal.vue
@@ -14,43 +14,59 @@
         />
       </div>
       <div class="mt-4 mb-10">
-        <div class="my-6">
-          <div>
-            <v-text-field
-              class="no-error-msg"
-              placeholder="course name"
-              label="course name"
-            ></v-text-field>
+        <v-form @submit.prevent="filterPrograms">
+          <div class="my-6">
+            <div>
+              <v-text-field
+                class="no-error-msg"
+                placeholder="course name"
+                label="course name"
+                v-model="filter.title.val"
+              ></v-text-field>
+            </div>
           </div>
-        </div>
-        <div class="my-6">
-          <div>
-            <v-text-field
-              class="no-error-msg pt-0"
-              placeholder="mentor name"
-              label="mentor name"
-            ></v-text-field>
+          <div class="my-6">
+            <div>
+              <v-text-field
+                class="no-error-msg pt-0"
+                placeholder="mentor name"
+                label="mentor name"
+                v-model="filter.first_name.val"
+              ></v-text-field>
+            </div>
           </div>
-        </div>
-        <div class="my-6">
-          <div>
-            <v-autocomplete
-              class="no-error-msg pt-0"
-              placeholder="status"
-              label="status"
-            ></v-autocomplete>
+          <div class="my-6">
+            <div>
+              <v-autocomplete
+                class="no-error-msg pt-0"
+                placeholder="status"
+                label="status"
+                :items="programStatus"
+                item-text="text"
+                item-value="verified"
+                v-model="filter.verified.val"
+              ></v-autocomplete>
+            </div>
           </div>
-        </div>
-        <div class="my-6">
-          <div>
-            <DateInput class="no-error-msg" label="date, after" />
+          <div class="my-6">
+            <div>
+              <DateInput
+                class="no-error-msg"
+                label="date, after"
+                v-model="filter.created_at.val1"
+              />
+            </div>
           </div>
-        </div>
-        <div class="my-6">
-          <div>
-            <DateInput class="no-error-msg" label="date, before" />
+          <div class="my-6">
+            <div>
+              <DateInput
+                class="no-error-msg"
+                label="date, before"
+                v-model="filter.created_at.val2"
+              />
+            </div>
           </div>
-        </div>
+        </v-form>
       </div>
     </template>
     <template #footer>
@@ -64,13 +80,15 @@
           size="large"
           :is-modal="true"
           height="29"
-          @click.native="$_closeModal()"
+          @click.native="clearFilter"
         />
         <RectangleButton
           height="29"
           class="btn__modal--execute custom-btn wa__f__m__eb"
           text="execute"
           icon="WMi-filter"
+          type="submit"
+          @click.native="filterPrograms"
         />
       </div>
     </template>
@@ -78,8 +96,59 @@
 </template>
 <script>
 import SectionTitle from "../../Global/Section/SectionTitle.vue";
+import { cloneDeep } from "lodash";
+import { mapMutations } from "vuex";
+const defaultFilter = {
+  title: {
+    type: "like",
+    val: null,
+  },
+  first_name: {
+    type: "like",
+    val: null,
+  },
+  verified: {
+    type: "in",
+    val: null,
+  },
+  created_at: {
+    type: "between",
+    val1: null,
+    val2: null,
+  },
+};
 export default {
   name: "modal_filters",
   components: { SectionTitle },
+  data: () => ({
+    filter: cloneDeep(defaultFilter),
+    programStatus: [
+      {
+        id: "1",
+        text: "verified",
+        verified: "true",
+      },
+      {
+        id: "2",
+        text: "not verified",
+        verified: "false",
+      },
+    ],
+  }),
+  methods: {
+    ...mapMutations("programs", ["SET_FILTER_PROGRAMS"]),
+    filterPrograms() {
+      console.log(this.filter);
+      this.SET_FILTER_PROGRAMS(this.filter);
+      this.$emit("filter");
+      this.$_closeModal();
+    },
+    clearFilter() {
+      this.filter = cloneDeep(defaultFilter);
+      this.SET_FILTER_PROGRAMS(this.filter);
+      this.$emit("filter");
+      this.$_closeModal();
+    },
+  },
 };
 </script>
\ No newline at end of file
diff --git a/src/components/Programs/Sections.vue b/src/components/Programs/Sections.vue
deleted file mode 100644
index 0807536..0000000
--- a/src/components/Programs/Sections.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<template>
-  <div class="h-100">
-    <main-back height="100%">
-      <div class="mt-16">
-        <ul class="pl-0 ml-0">
-          <MenuItem text="Home" />
-          <MenuItem text="my profile" />
-          <MenuItem :active="true" text="my programs" />
-          <MenuItem text="my trainee" />
-          <MenuItem text="my bookmarks" />
-          <MenuItem text="products" />
-          <MenuItem text="admins" />
-          <MenuItem text="traniners" />
-          <MenuItem text="workouts" />
-        </ul>
-      </div>
-    </main-back>
-  </div>
-</template>
-<script>
-import MenuItem from "../Global/Section/MenuItem.vue";
-export default {
-  components: {
-    MenuItem,
-  },
-};
-</script>
diff --git a/src/components/TrainPrograms/Main.vue b/src/components/TrainPrograms/Main.vue
index 8efa842..3501a43 100644
--- a/src/components/TrainPrograms/Main.vue
+++ b/src/components/TrainPrograms/Main.vue
@@ -6,7 +6,7 @@
           <div>
             <SectionTitle
               backText="home"
-              link="dashboardTrainee"
+              link="dashboard"
               icon="WMi-left-open"
               title="my programs"
               subTitle="There are programs you started in Champya Application, for more details and stats please use the application."
diff --git a/src/components/TrainPrograms/Sections.vue b/src/components/TrainPrograms/Sections.vue
deleted file mode 100644
index 4e7e34c..0000000
--- a/src/components/TrainPrograms/Sections.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<template>
-  <div class="h-100">
-    <main-back height="100%">
-      <div class="mt-16">
-        <ul class="pl-0 ml-0">
-          <MenuItem text="Home" />
-          <MenuItem text="my profile" />
-          <MenuItem :active="true" text="my programs" />
-          <MenuItem text="my bookmarks" />
-        </ul>
-      </div>
-    </main-back>
-  </div>
-</template>
-<script>
-import MenuItem from "../Global/Section/MenuItem.vue";
-export default {
-  components: {
-    MenuItem,
-  },
-};
-</script>
diff --git a/src/components/Trainee/Main.vue b/src/components/Trainee/Main.vue
deleted file mode 100644
index 14a0d33..0000000
--- a/src/components/Trainee/Main.vue
+++ /dev/null
@@ -1,86 +0,0 @@
-<template>
-  <div class="h-100">
-    <main-back height="100%">
-      <div class="px-16 pb-10">
-        <div class="mt-11">
-          <div class="d-flex justify-center"><UserName role="trainee" /></div>
-        </div>
-        <v-row class="mt-3">
-          <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.
-              </div>
-            </div>
-          </v-col>
-        </v-row>
-        <div class="mb-16 mt-10">
-          <div class="d-sm-grid d-flex justify-center">
-            <div class="mr-5 section">
-              <box text="bookmarks" link="bookmarks" icon="WMi-bookmark" />
-            </div>
-            <div class="mr-5 section">
-              <box text="programs" link="trainPrograms" icon="WMi-align-left" />
-            </div>
-            <div class="mr-5 section">
-              <box text="profile" link="profile" icon="WMi-user" />
-            </div>
-          </div>
-        </div>
-        <v-divider dark></v-divider>
-        <v-row class="mt-3">
-          <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
-              </div>
-            </div>
-          </v-col>
-        </v-row>
-        <div class="mx-md-16 mx-0 d-flex justify-center">
-          <div>
-            <div class="mr-16">
-              <Notification text="programs joined" quantity="4" />
-            </div>
-          </div>
-          <div>
-            <div class="ml-16">
-              <Notification text="moves done" quantity="344" />
-            </div>
-          </div>
-        </div>
-      </div>
-    </main-back>
-  </div>
-</template> 
-<script>
-import Box from "../Global/Section/Box.vue";
-import Notification from "../Global/Section/Notification.vue";
-import UserName from "../Global/Section/UserName.vue";
-
-export default {
-  components: {
-    UserName,
-    Box,
-    Notification,
-  },
-};
-</script>
-<style scoped>
-.section {
-  width: 157px;
-  height: 157px;
-}
-.description {
-  color: var(--color-gray);
-  font-size: 26px;
-  margin-left: 150px;
-}
-@media screen and (max-width: 1264px) {
-  .description {
-    margin-left: 0;
-  }
-}
-</style>
\ No newline at end of file
diff --git a/src/components/Trainee/Sections.vue b/src/components/Trainee/Sections.vue
deleted file mode 100644
index 40f7145..0000000
--- a/src/components/Trainee/Sections.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<template>
-  <div class="h-100">
-    <main-back height="100%">
-      <div class="mt-16">
-        <ul class="pl-0 ml-0">
-          <MenuItem :active="true" text="Home" link="dashboardTrainee" />
-          <MenuItem text="my profile" link="profile" />
-          <MenuItem text="my programs" link="trainPrograms" />
-          <MenuItem text="my bookmarks" link="bookmarks" />
-        </ul>
-      </div>
-    </main-back>
-  </div>
-</template>
-<script>
-import MenuItem from "../Global/Section/MenuItem.vue";
-export default {
-  components: {
-    MenuItem,
-  },
-};
-</script>
diff --git a/src/components/Trainer/Main.vue b/src/components/Trainer/Main.vue
deleted file mode 100644
index c233a63..0000000
--- a/src/components/Trainer/Main.vue
+++ /dev/null
@@ -1,88 +0,0 @@
-<template>
-  <div class="h-100">
-    <main-back height="100%">
-      <div class="px-16 pb-10">
-        <div class="mt-11">
-          <div class="d-flex justify-center"><UserName role="trainer" /></div>
-        </div>
-        <v-row class="mt-3">
-          <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.
-              </div>
-            </div>
-          </v-col>
-        </v-row>
-        <div class="mb-16 mt-10">
-          <div class="d-sm-grid d-flex justify-center">
-            <div class="mr-5 section">
-              <box text="programs" link="programs" icon="WMi-align-left" />
-            </div>
-            <div class="mr-5 section">
-              <box text="bookmarks" link="bookmarks" icon="WMi-bookmark" />
-            </div>
-            <div class="mr-5 section">
-              <box text="trainees" link="users" icon=" WMi-users" />
-            </div>
-            <div class="mr-5 section">
-              <box text="profile" link="profile" icon="WMi-user" />
-            </div>
-          </div>
-        </div>
-        <v-divider dark></v-divider>
-        <v-row class="mt-3">
-          <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
-              </div>
-            </div>
-          </v-col>
-        </v-row>
-        <div class="mx-md-16 mx-0 d-flex justify-center">
-          <div>
-            <div class="mr-16">
-              <Notification text="programs joined" quantity="4" />
-            </div>
-          </div>
-          <div>
-            <div class="ml-16">
-              <Notification text="moves done" quantity="344" />
-            </div>
-          </div>
-        </div>
-      </div>
-    </main-back>
-  </div>
-</template>
-<script>
-import Box from "../Global/Section/Box.vue";
-import Notification from "../Global/Section/Notification.vue";
-import UserName from "../Global/Section/UserName.vue";
-export default {
-  components: {
-    UserName,
-    Box,
-    Notification,
-  },
-};
-</script>
-<style scoped>
-.section {
-  width: 157px;
-  height: 157px;
-}
-.description {
-  color: var(--color-gray);
-  font-size: 26px;
-  margin-left: 150px;
-}
-@media screen and (max-width: 1264px) {
-  .description {
-    margin-left: 0;
-  }
-}
-</style>
\ No newline at end of file
diff --git a/src/components/Trainer/Sections.vue b/src/components/Trainer/Sections.vue
deleted file mode 100644
index bc0a0c0..0000000
--- a/src/components/Trainer/Sections.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<template>
-  <div class="h-100">
-    <main-back height="100%">
-      <div class="mt-16">
-        <ul class="pl-0 ml-0">
-          <MenuItem :active="true" text="Home" link="dashboardTrainer" />
-          <MenuItem text="my profile" link="profile" />
-          <MenuItem text="my programs" link="trainPrograms" />
-          <MenuItem text="my trainees" link="users" />
-          <MenuItem text="my bookmarks" link="bookmarks" />
-        </ul>
-      </div>
-    </main-back>
-  </div>
-</template>
-<script>
-import MenuItem from "../Global/Section/MenuItem.vue";
-export default {
-  components: {
-    MenuItem,
-  },
-};
-</script>
diff --git a/src/components/Users/Item.vue b/src/components/Users/Item.vue
index 38a837b..91729df 100644
--- a/src/components/Users/Item.vue
+++ b/src/components/Users/Item.vue
@@ -12,7 +12,7 @@
         </div>
       </v-col>
       <v-col cols="3">
-        <div class="d-flex align-center h-100">
+        <div class="d-flex align-center justify-center h-100">
           <div class="user__role">
             <small>Role:</small>
             <div class="wa__f__m__eb text-uppercase">
@@ -22,7 +22,7 @@
         </div>
       </v-col>
       <v-col cols="3">
-        <div class="d-flex align-center h-100">
+        <div class="d-flex align-center justify-center h-100">
           <div v-if="userRole == 'trainer'" class="d-flex align-center">
             <div class="user__program--quantity wa__f__m__eb mr-2">
               {{ user.created_courses_count }}
diff --git a/src/components/Users/Main.vue b/src/components/Users/Main.vue
index 73f1d87..de2bd48 100644
--- a/src/components/Users/Main.vue
+++ b/src/components/Users/Main.vue
@@ -35,7 +35,9 @@
         />
       </div>
     </main-back>
-    <div class="text-center"><ChangeRoleModal /><FiltersModal /></div>
+    <div class="text-center">
+      <ChangeRoleModal /><FiltersModal @filter="load" />
+    </div>
   </div>
 </template> 
 <script>
@@ -44,6 +46,8 @@ import ChangeRoleModal from "./Modals/ChangeRoleModal.vue";
 import FiltersModal from "./Modals/FiltersModal.vue";
 import UserItem from "./Item.vue";
 import { mapActions, mapGetters, mapMutations } from "vuex";
+import { UserStorage } from "@/utils/storage";
+
 export default {
   components: {
     SectionTitle,
@@ -51,11 +55,14 @@ export default {
     ChangeRoleModal,
     FiltersModal,
   },
+  data: () => ({
+    role: UserStorage.get() ? UserStorage.get().role : null,
+  }),
   computed: {
     ...mapGetters("users", ["getUsers", "getPaginationUser"]),
   },
   methods: {
-    ...mapActions("users", ["loadUsers"]),
+    ...mapActions("users", ["loadUsers", "loadTrainerTrainee"]),
     ...mapMutations("users", ["SET_PAGINATION"]),
     changePagination(page) {
       if (this.getPaginationUser.page !== page) {
@@ -63,9 +70,14 @@ export default {
         this.loadUsers();
       }
     },
+    async load() {
+      this.role === "admin"
+        ? await this.loadUsers()
+        : await this.loadTrainerTrainee();
+    },
   },
   created() {
-    this.loadUsers();
+    this.load();
   },
 };
 </script>
\ No newline at end of file
diff --git a/src/components/Users/Modals/FiltersModal.vue b/src/components/Users/Modals/FiltersModal.vue
index f0311ab..a9d39d2 100644
--- a/src/components/Users/Modals/FiltersModal.vue
+++ b/src/components/Users/Modals/FiltersModal.vue
@@ -20,6 +20,7 @@
               class="no-error-msg"
               placeholder="user name"
               label="user name"
+              v-model="filter.first_name.val"
             ></v-text-field>
           </div>
         </div>
@@ -34,12 +35,20 @@
         </div>
         <div class="my-6">
           <div>
-            <DateInput class="no-error-msg" label="joined date, after" />
+            <DateInput
+              class="no-error-msg"
+              label="joined date, after"
+              v-model="filter.created_at.val1"
+            />
           </div>
         </div>
         <div class="my-6">
           <div>
-            <DateInput class="no-error-msg" label="joined date, before" />
+            <DateInput
+              class="no-error-msg"
+              label="joined date, before"
+              v-model="filter.created_at.val2"
+            />
           </div>
         </div>
       </div>
@@ -55,13 +64,14 @@
           size="large"
           :is-modal="true"
           height="29"
-          @click.native="$_closeModal()"
+          @click.native="clearFilter"
         />
         <RectangleButton
           height="29"
           class="btn__modal--execute custom-btn wa__f__m__eb"
           text="execute"
           icon="WMi-filter"
+          @click.native="filterUser"
         />
       </div>
     </template>
@@ -69,8 +79,38 @@
 </template>
 <script>
 import SectionTitle from "../../Global/Section/SectionTitle.vue";
+import { mapMutations } from "vuex";
+import { cloneDeep } from "lodash";
+const defaultFilter = {
+  first_name: {
+    type: "like",
+    val: null,
+  },
+  created_at: {
+    type: "between",
+    val1: null,
+    val2: null,
+  },
+};
 export default {
   name: "modal_filters",
   components: { SectionTitle },
+  data: () => ({
+    filter: cloneDeep(defaultFilter),
+  }),
+  methods: {
+    ...mapMutations("users", ["SET_FILTER_USER"]),
+    filterUser() {
+      this.SET_FILTER_USER(this.filter);
+      this.$emit("filter");
+      this.$_closeModal();
+    },
+    clearFilter() {
+      this.filter = cloneDeep(defaultFilter);
+      this.SET_FILTER_USER(this.filter);
+      this.$emit("filter");
+      this.$_closeModal();
+    },
+  },
 };
 </script>
\ No newline at end of file
diff --git a/src/components/Users/Sections.vue b/src/components/Users/Sections.vue
deleted file mode 100644
index e339cc6..0000000
--- a/src/components/Users/Sections.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<template>
-  <div class="h-100">
-    <main-back height="100%">
-      <div class="mt-16">
-        <ul class="pl-0 ml-0">
-          <MenuItem text="Home" />
-          <MenuItem text="my profile" />
-          <MenuItem text="my programs" />
-          <MenuItem text="my trainee" />
-          <MenuItem text="my bookmarks" />
-          <MenuItem text="products" />
-          <MenuItem text="admins" />
-          <MenuItem :active="true" text="traniners" />
-          <MenuItem text="workouts" />
-        </ul>
-      </div>
-    </main-back>
-  </div>
-</template>
-<script>
-import MenuItem from "../Global/Section/MenuItem.vue";
-export default {
-  components: {
-    MenuItem,
-  },
-};
-</script>
diff --git a/src/components/Workouts/Main.vue b/src/components/Workouts/Main.vue
index c830602..f7ad6e0 100644
--- a/src/components/Workouts/Main.vue
+++ b/src/components/Workouts/Main.vue
@@ -50,7 +50,7 @@
         />
       </div>
     </main-back>
-    <div class="text-center"><FiltersModal /></div>
+    <div class="text-center"><FiltersModal @filter="load" /></div>
   </div>
 </template>
 <script>
@@ -76,9 +76,12 @@ export default {
         this.loadWorkouts();
       }
     },
+    load() {
+      this.loadWorkouts();
+    },
   },
   created() {
-    this.loadWorkouts();
+    this.load();
   },
 };
 </script>
\ No newline at end of file
diff --git a/src/components/Workouts/Modals/FiltersModal.vue b/src/components/Workouts/Modals/FiltersModal.vue
index 1608548..5f12f09 100644
--- a/src/components/Workouts/Modals/FiltersModal.vue
+++ b/src/components/Workouts/Modals/FiltersModal.vue
@@ -20,6 +20,7 @@
               class="no-error-msg"
               placeholder="workout name"
               label="workout name"
+              v-model="filter.name.val"
             ></v-text-field>
           </div>
         </div>
@@ -29,26 +30,26 @@
               class="no-error-msg pt-0"
               placeholder="mentor name"
               label="mentor name"
+              v-model="filter.first_name.val"
             ></v-text-field>
           </div>
         </div>
         <div class="my-6">
           <div>
-            <v-autocomplete
-              class="no-error-msg pt-0"
-              placeholder="status"
-              label="status"
-            ></v-autocomplete>
-          </div>
-        </div>
-        <div class="my-6">
-          <div>
-            <DateInput class="no-error-msg" label="date, after" />
+            <DateInput
+              class="no-error-msg"
+              label="date, after"
+              v-model="filter.created_at.val1"
+            />
           </div>
         </div>
         <div class="my-6">
           <div>
-            <DateInput class="no-error-msg" label="date, before" />
+            <DateInput
+              class="no-error-msg"
+              label="date, before"
+              v-model="filter.created_at.val2"
+            />
           </div>
         </div>
       </div>
@@ -64,13 +65,14 @@
           size="large"
           :is-modal="true"
           height="29"
-          @click.native="$_closeModal()"
+          @click.native="clearFilter"
         />
         <RectangleButton
           height="29"
           class="btn__modal--execute custom-btn wa__f__m__eb"
           text="execute"
           icon="WMi-filter"
+          @click.native="filterWorkotus"
         />
       </div>
     </template>
@@ -78,8 +80,44 @@
 </template>
 <script>
 import SectionTitle from "../../Global/Section/SectionTitle.vue";
+
+import { cloneDeep } from "lodash";
+import { mapMutations } from "vuex";
+const defaultFilter = {
+  name: {
+    type: "like",
+    val: null,
+  },
+  first_name: {
+    type: "like",
+    val: null,
+  },
+  created_at: {
+    type: "between",
+    val1: null,
+    val2: null,
+  },
+};
+
 export default {
   name: "modal_filters",
   components: { SectionTitle },
+  data: () => ({
+    filter: cloneDeep(defaultFilter),
+  }),
+  methods: {
+    ...mapMutations("workouts", ["SET_FILTER_WORKOUTS"]),
+    filterWorkotus() {
+      this.SET_FILTER_WORKOUTS(this.filter);
+      this.$emit("filter");
+      this.$_closeModal();
+    },
+    clearFilter() {
+      this.filter = cloneDeep(defaultFilter);
+      this.SET_FILTER_WORKOUTS(this.filter);
+      this.$emit("filter");
+      this.$_closeModal();
+    },
+  },
 };
 </script>
\ No newline at end of file
diff --git a/src/components/Workouts/Sections.vue b/src/components/Workouts/Sections.vue
deleted file mode 100644
index b814f1e..0000000
--- a/src/components/Workouts/Sections.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<template>
-  <div class="h-100">
-    <main-back height="100%">
-      <div class="mt-16">
-        <ul class="pl-0 ml-0">
-          <MenuItem text="Home" />
-          <MenuItem text="my profile" />
-          <MenuItem text="my programs" />
-          <MenuItem text="my trainee" />
-          <MenuItem text="my bookmarks" />
-          <MenuItem text="products" />
-          <MenuItem text="admins" />
-          <MenuItem text="traniners" />
-          <MenuItem :active="true" text="workouts" />
-        </ul>
-      </div>
-    </main-back>
-  </div>
-</template>
-<script>
-import MenuItem from "../Global/Section/MenuItem.vue";
-export default {
-  components: {
-    MenuItem,
-  },
-};
-</script>
diff --git a/src/components/WorkoutsSeries/Sections.vue b/src/components/WorkoutsSeries/Sections.vue
deleted file mode 100644
index 3163381..0000000
--- a/src/components/WorkoutsSeries/Sections.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<template>
-  <div class="h-100">
-    <main-back height="100%">
-      <div class="mt-16">
-        <ul class="pl-0 ml-0">
-          <MenuItem text="Home" />
-          <MenuItem text="my profile" />
-          <MenuItem :active="true"  text="my programs" />
-          <MenuItem text="my trainee" />
-          <MenuItem text="my bookmarks" />
-          <MenuItem text="products" />
-          <MenuItem text="admins" />
-          <MenuItem text="traniners" />
-          <MenuItem text="workouts" />
-        </ul>
-      </div>
-    </main-back>
-  </div>
-</template>
-<script>
-import MenuItem from "../Global/Section/MenuItem.vue";
-export default {
-  components: {
-    MenuItem,
-  },
-};
-</script>
diff --git a/src/router/path.js b/src/router/path.js
index d3b4186..c1c8aec 100644
--- a/src/router/path.js
+++ b/src/router/path.js
@@ -16,7 +16,7 @@ export default [
     },
     {
         path: '/',
-        view: 'AdminHome',
+        view: 'Dashboard',
         name: 'dashboard'
     },
     {
diff --git a/src/router/url.js b/src/router/url.js
index 8eef36a..b314628 100644
--- a/src/router/url.js
+++ b/src/router/url.js
@@ -47,6 +47,7 @@ const urls = {
   // users
   indexUsers: "admin/users",
   destroyUser: "admin/users/:user",
+  indexTrainerTrainee: 'trainer/trainees',
   // countries
   indexCountries: "countries",
   // profile
@@ -62,7 +63,8 @@ const urls = {
   indexStatisticTrainer: "trainer-dashboard-statistic",
   indexStatisticTrainee: "trainee-dashboard-statistic",
   // file
-  storeFile: 'media'
+  storeFile: 'media',
+  destroyFile: 'media/:media'
 };
 
 export default urlGenerator(urls);
diff --git a/src/store/modules/programs/actions.js b/src/store/modules/programs/actions.js
index 330343a..dbec909 100644
--- a/src/store/modules/programs/actions.js
+++ b/src/store/modules/programs/actions.js
@@ -2,7 +2,7 @@ import ProgramRepository from "@/abstraction/repository/programRepository";
 export default {
     async loadPrograms({ state, commit }) {
         try {
-            let data = { pagination: state.pagination };
+            let data = { pagination: state.pagination, filters: state.filters };
             let repository = new ProgramRepository();
             const resource = await repository.index(data);
             commit("SET_PROGRAMS", resource.data);
diff --git a/src/store/modules/programs/mutations.js b/src/store/modules/programs/mutations.js
index a8d1534..757f8c7 100644
--- a/src/store/modules/programs/mutations.js
+++ b/src/store/modules/programs/mutations.js
@@ -10,6 +10,10 @@ export default {
         pagination = { ...state.pagination, ...pagination };
         Vue.set(state, "pagination", pagination);
     },
+    SET_FILTER_PROGRAMS(state, payload) {
+        Vue.set(state, "filters", payload);
+        state.pagination.page = 1
+    },
     ADD_PROGRAM(state, payload) {
         state.programs.push(payload);
     },
diff --git a/src/store/modules/programs/state.js b/src/store/modules/programs/state.js
index c005fb6..83fa995 100644
--- a/src/store/modules/programs/state.js
+++ b/src/store/modules/programs/state.js
@@ -4,4 +4,5 @@ export default {
     pagination: {
         itemsPerPage: 12
     },
+    filters: {}
 };
diff --git a/src/store/modules/users/actions.js b/src/store/modules/users/actions.js
index 305a84b..3fa78e5 100644
--- a/src/store/modules/users/actions.js
+++ b/src/store/modules/users/actions.js
@@ -1,9 +1,16 @@
 import UsersRepository from "@/abstraction/repository/usersRepository";
 export default {
     async loadUsers({ state, commit }) {
+        let data = { pagination: state.pagination, filters: state.filters }
+        let repository = new UsersRepository();
+        const resource = await repository.indexUsers(data);
+        commit("SET_USERS", resource.data);
+        commit("SET_PAGINATION", resource.pagination);
+    },
+    async loadTrainerTrainee({ state, commit }) {
         let data = { pagination: state.pagination }
         let repository = new UsersRepository();
-        const resource = await repository.index(data);
+        const resource = await repository.loadTrainerTrainee(data);
         commit("SET_USERS", resource.data);
         commit("SET_PAGINATION", resource.pagination);
     },
diff --git a/src/store/modules/users/mutations.js b/src/store/modules/users/mutations.js
index 7a4c818..e439837 100644
--- a/src/store/modules/users/mutations.js
+++ b/src/store/modules/users/mutations.js
@@ -7,6 +7,10 @@ export default {
         pagination = { ...state.pagination, ...pagination };
         Vue.set(state, "pagination", pagination);
     },
+    SET_FILTER_USER(state, payload) {
+        Vue.set(state, "filters", payload);
+        state.pagination.page = 1
+    },
     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 40ab3ec..60ddc36 100644
--- a/src/store/modules/users/state.js
+++ b/src/store/modules/users/state.js
@@ -2,5 +2,6 @@ export default {
     users: [],
     pagination: {
         itemsPerPage: 12
-    }
+    },
+    filters: {}
 };
diff --git a/src/store/modules/workoutToSerie/mutations.js b/src/store/modules/workoutToSerie/mutations.js
index 41d47dc..13c56ff 100644
--- a/src/store/modules/workoutToSerie/mutations.js
+++ b/src/store/modules/workoutToSerie/mutations.js
@@ -11,6 +11,7 @@ export default {
     },
     SET_FILTER_WORKOUTS_TO_SERIE(state, payload) {
         Vue.set(state, "filters", payload);
+        state.pagination.page = 1
     },
     ADD_WORKOUT_TO_SERIE(state, payload) {
         state.workouts.push(payload);
diff --git a/src/store/modules/workouts/actions.js b/src/store/modules/workouts/actions.js
index 6a7db02..1a708bf 100644
--- a/src/store/modules/workouts/actions.js
+++ b/src/store/modules/workouts/actions.js
@@ -2,7 +2,7 @@ import WorkoutRepository from "@/abstraction/repository/workoutRepository";
 export default {
     async loadWorkouts({ state, commit }) {
         try {
-            let data = { pagination: state.pagination };
+            let data = { pagination: state.pagination, filters: state.filters };
             let repository = new WorkoutRepository();
             const resource = await repository.index(data);
             commit("SET_WORKOUTS", resource.data);
diff --git a/src/store/modules/workouts/mutations.js b/src/store/modules/workouts/mutations.js
index dd1808f..cb283b7 100644
--- a/src/store/modules/workouts/mutations.js
+++ b/src/store/modules/workouts/mutations.js
@@ -10,6 +10,10 @@ export default {
         pagination = { ...state.pagination, ...pagination };
         Vue.set(state, "pagination", pagination);
     },
+    SET_FILTER_WORKOUTS(state, payload) {
+        Vue.set(state, "filters", payload);
+        state.pagination.page = 1
+    },
     ADD_WORKOUT(state, payload) {
         state.workouts.push(payload);
     },
diff --git a/src/store/modules/workouts/state.js b/src/store/modules/workouts/state.js
index 33d53bc..009fd6e 100644
--- a/src/store/modules/workouts/state.js
+++ b/src/store/modules/workouts/state.js
@@ -4,4 +4,5 @@ export default {
     pagination: {
         itemsPerPage: 12
     },
+    filters: {}
 };
diff --git a/src/styles/vuetify/_modify.scss b/src/styles/vuetify/_modify.scss
index daa71c4..4f62cfa 100644
--- a/src/styles/vuetify/_modify.scss
+++ b/src/styles/vuetify/_modify.scss
@@ -247,8 +247,6 @@ textarea {
 input::placeholder {
     text-transform: uppercase;
 }
-/* -------------------- button on modal ------------------------------*/
-
 /* -------------------- button on modal ------------------------------*/
 .close__modal {
     position: absolute;
@@ -268,3 +266,11 @@ input::placeholder {
     padding: 0 45px !important;
     font-size: 14px !important;
 }
+/* -------------------- toast ------------------------------*/
+.willaToast-message {
+    font-family: "Montserrat-regular" !important;
+}
+.willaToast.willaToast-color-black > .willaToast-body .willaToast-title {
+    font-family: "cizel" !important;
+    color: var(--color-social-yellow) !important;
+}
diff --git a/src/utils/toast.js b/src/utils/toast.js
index b2861aa..ab6f041 100644
--- a/src/utils/toast.js
+++ b/src/utils/toast.js
@@ -1,22 +1,42 @@
-import "izitoast/dist/css/iziToast.min.css";
-import iZtoast from "izitoast";
+import "willatoast/dist/main.css";
+import willaToast from "willatoast";
 
 const toast = {
     error: (message, title = "Error") => {
-        return iZtoast.error({
+        return willaToast.normal({
             title: title,
+            titleColor: "#ffd600",
             message: message,
-            rtl: true,
             position: "bottomCenter"
         });
     },
     success: (message, title = "Success") => {
-        return iZtoast.success({
+        return willaToast.normal({
             title: title,
             message: message,
-            rtl: true,
             position: "bottomCenter"
         });
+    },
+    question: (message, title = "Success", callback) => {
+        return willaToast.normal({
+            title: title,
+            message: message,
+            position: "center",
+            timeout: false,
+            theme: 'dark',
+            buttons: [
+                ['<button style="border: 1px dashed white;" >yes</button>', function (instance, toast) {
+                    callback();
+                    instance.hide({ transitionOut: 'fadeOut' }, toast, 'button');
+
+                }, true],
+                ['<button>no</button>', function (instance, toast) {
+
+                    instance.hide({ transitionOut: 'fadeOut' }, toast, 'button');
+
+                }]
+            ],
+        });
     }
 };
 
diff --git a/src/views/AddProduct.vue b/src/views/AddProduct.vue
index 2e9d4f5..4e90a92 100644
--- a/src/views/AddProduct.vue
+++ b/src/views/AddProduct.vue
@@ -11,7 +11,7 @@
       <div>
         <v-row>
           <v-col cols="2">
-            <AddProductSections />
+            <SideBar />
           </v-col>
           <v-col cols="10">
             <AddProductHome />
@@ -23,11 +23,9 @@
 </template>
 <script>
 import AddProductHome from "../components/AddProduct/Main";
-import AddProductSections from "../components/AddProduct/Sections";
 export default {
   components: {
     AddProductHome,
-    AddProductSections,
   },
 };
 </script>
\ No newline at end of file
diff --git a/src/views/AddProgram.vue b/src/views/AddProgram.vue
index 5af07d1..f19edbc 100644
--- a/src/views/AddProgram.vue
+++ b/src/views/AddProgram.vue
@@ -11,7 +11,7 @@
       <div>
         <v-row>
           <v-col cols="2">
-            <AddProgramSections />
+            <SideBar />
           </v-col>
           <v-col cols="10">
             <AddProgram />
@@ -23,11 +23,9 @@
 </template>
 <script>
 import AddProgram from "../components/AddProgram/Main";
-import AddProgramSections from "../components/AddProgram/Sections";
 export default {
   components: {
     AddProgram,
-    AddProgramSections,
   },
 };
 </script>
\ No newline at end of file
diff --git a/src/views/AddWorkout.vue b/src/views/AddWorkout.vue
index 3f73277..ad1449e 100644
--- a/src/views/AddWorkout.vue
+++ b/src/views/AddWorkout.vue
@@ -11,7 +11,7 @@
       <div>
         <v-row>
           <v-col cols="2">
-            <AddWorkoutSections />
+            <SideBar />
           </v-col>
           <v-col cols="10">
             <AddWorkoutHome />
@@ -23,11 +23,9 @@
 </template>
 <script>
 import AddWorkoutHome from "../components/AddWorkout/Main";
-import AddWorkoutSections from "../components/AddWorkout/Sections";
 export default {
   components: {
     AddWorkoutHome,
-    AddWorkoutSections,
   },
 };
 </script>
\ No newline at end of file
diff --git a/src/views/AdminTrainee.vue b/src/views/AdminTrainee.vue
deleted file mode 100644
index 8696bd7..0000000
--- a/src/views/AdminTrainee.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<template>
-  <v-container fluid>
-    <header class="pt-3">
-      <v-row>
-        <v-col cols="12">
-          <site-header></site-header>
-        </v-col>
-      </v-row>
-    </header>
-    <main class="pb-10 mt-5">
-      <div>
-        <v-row>
-          <v-col cols="2">
-            <TraineeSections />
-          </v-col>
-          <v-col cols="10">
-            <TraineeHome />
-          </v-col>
-        </v-row>
-      </div>
-    </main>
-  </v-container>
-</template>
-<script>
-import TraineeHome from "../components/Trainee/Main";
-import TraineeSections from "../components/Trainee/Sections";
-export default {
-  components: {
-    TraineeHome,
-    TraineeSections,
-  },
-};
-</script>
\ No newline at end of file
diff --git a/src/views/AdminTrainer.vue b/src/views/AdminTrainer.vue
deleted file mode 100644
index 9f5e323..0000000
--- a/src/views/AdminTrainer.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<template>
-  <v-container fluid>
-    <header class="pt-3">
-      <v-row>
-        <v-col cols="12">
-          <site-header></site-header>
-        </v-col>
-      </v-row>
-    </header>
-    <main class="pb-10 mt-5">
-      <div>
-        <v-row>
-          <v-col cols="2">
-            <TrainerSections />
-          </v-col>
-          <v-col cols="10">
-            <TrainerHome />
-          </v-col>
-        </v-row>
-      </div>
-    </main>
-  </v-container>
-</template>
-<script>
-import TrainerHome from "../components/Trainer/Main";
-import TrainerSections from "../components/Trainer/Sections";
-export default {
-  components: {
-    TrainerHome,
-    TrainerSections,
-  },
-};
-</script>
\ No newline at end of file
diff --git a/src/views/Bookmarks.vue b/src/views/Bookmarks.vue
index 0b5d94f..368c89b 100644
--- a/src/views/Bookmarks.vue
+++ b/src/views/Bookmarks.vue
@@ -11,7 +11,7 @@
       <div>
         <v-row>
           <v-col cols="2">
-            <BookmarksSections />
+            <SideBar />
           </v-col>
           <v-col cols="10">
             <BookmarksHome />
@@ -23,11 +23,9 @@
 </template>
 <script>
 import BookmarksHome from "../components/Bookmarks/Main";
-import BookmarksSections from "../components/Bookmarks/Sections";
 export default {
   components: {
     BookmarksHome,
-    BookmarksSections,
   },
 };
 </script>
\ No newline at end of file
diff --git a/src/views/AdminHome.vue b/src/views/Dashboard.vue
similarity index 86%
rename from src/views/AdminHome.vue
rename to src/views/Dashboard.vue
index 0c41b18..65491f1 100644
--- a/src/views/AdminHome.vue
+++ b/src/views/Dashboard.vue
@@ -23,11 +23,9 @@
 </template>
 <script>
 import AdminHome from "../components/Dashboard/Main";
-// import AdminSections from "../components/Admin/Sections";
 export default {
   components: {
     AdminHome,
-    // AdminSections,
   },
 };
 </script>
\ No newline at end of file
diff --git a/src/views/Products.vue b/src/views/Products.vue
index 57f8e4a..31ced31 100644
--- a/src/views/Products.vue
+++ b/src/views/Products.vue
@@ -11,7 +11,7 @@
       <div>
         <v-row>
           <v-col cols="2">
-            <ProductsSections />
+            <SideBar />
           </v-col>
           <v-col cols="10">
             <ProductsHome />
@@ -23,11 +23,9 @@
 </template>
 <script>
 import ProductsHome from "../components/Products/Main";
-import ProductsSections from "../components/Products/Sections";
 export default {
   components: {
     ProductsHome,
-    ProductsSections,
   },
 };
 </script>
\ No newline at end of file
diff --git a/src/views/Profile.vue b/src/views/Profile.vue
index 20cc380..2502e92 100644
--- a/src/views/Profile.vue
+++ b/src/views/Profile.vue
@@ -11,7 +11,7 @@
       <div>
         <v-row>
           <v-col cols="2">
-            <ProfileSections />
+           <SideBar />
           </v-col>
           <v-col cols="10">
             <ProfileHome />
@@ -23,11 +23,9 @@
 </template>
 <script>
 import ProfileHome from "../components/Profile/Main";
-import ProfileSections from "../components/Profile/Sections";
 export default {
   components: {
     ProfileHome,
-    ProfileSections,
   },
 };
 </script>
\ No newline at end of file
diff --git a/src/views/ProgramSeries.vue b/src/views/ProgramSeries.vue
index 41af1a6..19f0cd1 100644
--- a/src/views/ProgramSeries.vue
+++ b/src/views/ProgramSeries.vue
@@ -11,7 +11,7 @@
       <div>
         <v-row>
           <v-col cols="2">
-            <ProgramSeriesSections />
+       <SideBar />
           </v-col>
           <v-col cols="10">
             <ProgramSeriesHome />
@@ -23,11 +23,9 @@
 </template>
 <script>
 import ProgramSeriesHome from "../components/ProgramSeries/Main";
-import ProgramSeriesSections from "../components/ProgramSeries/Sections";
 export default {
   components: {
     ProgramSeriesHome,
-    ProgramSeriesSections,
   },
 };
 </script>
\ No newline at end of file
diff --git a/src/views/Programs.vue b/src/views/Programs.vue
index d96094d..7d60e93 100644
--- a/src/views/Programs.vue
+++ b/src/views/Programs.vue
@@ -11,7 +11,7 @@
       <div>
         <v-row>
           <v-col cols="2">
-            <ProgramsSections />
+            <SideBar />
           </v-col>
           <v-col cols="10">
             <ProgramsHome />
@@ -23,11 +23,9 @@
 </template>
 <script>
 import ProgramsHome from "../components/Programs/Main";
-import ProgramsSections from "../components/Programs/Sections";
 export default {
   components: {
     ProgramsHome,
-    ProgramsSections,
   },
 };
 </script>
\ No newline at end of file
diff --git a/src/views/TrainsPrograms.vue b/src/views/TrainsPrograms.vue
index 4da0f7a..ad7bb04 100644
--- a/src/views/TrainsPrograms.vue
+++ b/src/views/TrainsPrograms.vue
@@ -11,7 +11,7 @@
       <div>
         <v-row>
           <v-col cols="2">
-            <TrainProgramsSections />
+            <SideBar />
           </v-col>
           <v-col cols="10">
             <TrainProgramsHome />
@@ -23,11 +23,9 @@
 </template>
 <script>
 import TrainProgramsHome from "../components/TrainPrograms/Main";
-import TrainProgramsSections from "../components/TrainPrograms/Sections";
 export default {
   components: {
     TrainProgramsHome,
-    TrainProgramsSections,
   },
 };
 </script>
\ No newline at end of file
diff --git a/src/views/Users.vue b/src/views/Users.vue
index 3d43bf8..a11e42e 100644
--- a/src/views/Users.vue
+++ b/src/views/Users.vue
@@ -11,7 +11,7 @@
       <div>
         <v-row>
           <v-col cols="2">
-            <UsersSections />
+        <SideBar />
           </v-col>
           <v-col cols="10">
             <UsersHome />
@@ -23,11 +23,9 @@
 </template>
 <script>
 import UsersHome from "../components/Users/Main";
-import UsersSections from "../components/Users/Sections";
 export default {
   components: {
     UsersHome,
-    UsersSections,
   },
 };
 </script>
\ No newline at end of file
diff --git a/src/views/Workouts.vue b/src/views/Workouts.vue
index 75d6807..d298c94 100644
--- a/src/views/Workouts.vue
+++ b/src/views/Workouts.vue
@@ -11,7 +11,7 @@
       <div>
         <v-row>
           <v-col cols="2">
-            <WorkoutsSections />
+            <SideBar />
           </v-col>
           <v-col cols="10">
             <WorkoutsHome />
@@ -23,11 +23,9 @@
 </template>
 <script>
 import WorkoutsHome from "../components/Workouts/Main";
-import WorkoutsSections from "../components/Workouts/Sections";
 export default {
   components: {
     WorkoutsHome,
-    WorkoutsSections,
   },
 };
 </script>
\ No newline at end of file
diff --git a/src/views/WorkoutsSeries.vue b/src/views/WorkoutsSeries.vue
index aa8292c..8c7aeaa 100644
--- a/src/views/WorkoutsSeries.vue
+++ b/src/views/WorkoutsSeries.vue
@@ -11,7 +11,7 @@
       <div>
         <v-row>
           <v-col cols="2">
-            <WorkoutsSeriesSections />
+            <SideBar />
           </v-col>
           <v-col cols="10">
             <WorkoutsSeriesHome />
@@ -23,11 +23,9 @@
 </template>
 <script>
 import WorkoutsSeriesHome from "../components/WorkoutsSeries/Main";
-import WorkoutsSeriesSections from "../components/WorkoutsSeries/Sections";
 export default {
   components: {
     WorkoutsSeriesHome,
-    WorkoutsSeriesSections,
   },
 };
 </script>
\ No newline at end of file