diff --git a/src/components/Global/Modal/AppSection.vue b/src/components/Global/Modal/AppSection.vue
index 0467d48..0adb607 100644
--- a/src/components/Global/Modal/AppSection.vue
+++ b/src/components/Global/Modal/AppSection.vue
@@ -5,18 +5,18 @@
     @submit="submit"
     width="900"
     transition="slide-x-transition"
+    :loading="loading"
   >
     <template #header>
       <div class="close__modal">
         <v-icon class="WMi-cancel-linear" @click="$_closeModal()"></v-icon>
       </div>
+      <div class="pt-11">
+        <SectionTitle :title="title" :subTitle="subTitle" :is-modal="true" />
+      </div>
     </template>
     <template #default>
-      <loading v-if="loading" class="loading-data" />
-      <div :class="{ 'loading-form': loading }">
-        <div>
-          <SectionTitle :title="title" :subTitle="subTitle" :is-modal="true" />
-        </div>
+      <div>
         <div class="mt-8 mb-10">
           <v-switch
             v-for="item in items"
diff --git a/src/components/Global/Modal/BasicModal.vue b/src/components/Global/Modal/BasicModal.vue
index 60ab649..bd0de18 100644
--- a/src/components/Global/Modal/BasicModal.vue
+++ b/src/components/Global/Modal/BasicModal.vue
@@ -6,14 +6,23 @@
     :transition="transition"
     dark
   >
-    <main-back height="100%" :is-modal="true">
-      <component :is="tag" @submit="$emit('submit')" :ref="tag == 'form' ? 'form' : null">
-        <v-card class="wa__modal">
-          <div class="wa__modal-header">
+    <loading v-if="loading" class="loading-data" />
+    <main-back
+      height="100%"
+      :is-modal="true"
+      :class="{ 'loading-form': loading }"
+    >
+      <component
+        :is="tag"
+        @submit="$emit('submit')"
+        :ref="tag == 'form' ? 'form' : null"
+      >
+        <v-card :class="['wa__modal', { 'loading-mode': loading }]">
+          <div class="wa__modal-header pl-4">
             <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>
+            <slot :modal="modal" :data="data" v-if="modal && !loading"></slot>
           </v-card-text>
           <div v-if="hasFooter" class="px-4">
             <v-divider class="mb-0"></v-divider>
@@ -41,6 +50,10 @@ export default {
     tag: {
       default: "div",
     },
+    loading: {
+      type: Boolean,
+      default: false,
+    },
   },
   data: () => ({
     isOpenModal: false,
@@ -90,6 +103,9 @@ export default {
 }
 .wa__modal-header {
   position: relative;
-  height: 40px;
+}
+/* loading */
+.loading-mode {
+  height: 300px;
 }
 </style>
diff --git a/src/components/ProgramSeries/Modals/AddSeriesModal.vue b/src/components/ProgramSeries/Modals/AddSeriesModal.vue
index d4d37cf..0100b7a 100644
--- a/src/components/ProgramSeries/Modals/AddSeriesModal.vue
+++ b/src/components/ProgramSeries/Modals/AddSeriesModal.vue
@@ -11,15 +11,15 @@
       <div class="close__modal">
         <v-icon class="WMi-cancel-linear" @click="$_closeModal()"></v-icon>
       </div>
-    </template>
-    <template #default>
-      <div>
+      <div class="pt-11">
         <SectionTitle
           title="add a series"
           subTitle="let us help in your search"
           :is-modal="true"
         />
       </div>
+    </template>
+    <template #default>
       <div class="mt-6 mb-10">
         <v-row>
           <v-col cols="12">
diff --git a/src/components/Programs/Item.vue b/src/components/Programs/Item.vue
index 4cd6c91..45ad565 100644
--- a/src/components/Programs/Item.vue
+++ b/src/components/Programs/Item.vue
@@ -69,7 +69,10 @@
         </div>
       </div>
     </div>
-    <div class="title__box" @click="openDetailModal">
+    <div
+      class="title__box cursor-pointer"
+      @click="$_openModal('program_detail', { program_id: program.id })"
+    >
       <div class="d-flex align-center mt-1">
         <div class="program__title">
           {{ program.title }}
@@ -108,10 +111,9 @@
   </div>
 </template>
 <script>
-import { mapActions, mapGetters } from "vuex";
+import { mapActions } from "vuex";
 import toast from "@/utils/toast";
 import { UserStorage } from "@/utils/storage";
-import AppSectionRepository from "@/abstraction/repository/appSectionRepository";
 export default {
   data: () => ({
     role: UserStorage.getRole() ? UserStorage.getRole() : null,
@@ -121,34 +123,34 @@ export default {
       type: Object,
     },
   },
-  computed: {
-    ...mapGetters("programs", ["getProgram"]),
-  },
   methods: {
-    ...mapActions("programs", [
-      "verifyProgram",
-      "deleteProgram",
-      "loadProgram",
-    ]),
+    ...mapActions("programs", ["verifyProgram", "deleteProgram"]),
     removeProgram(id) {
-      console.log("this.program.active_trainee_count", this.program.active_trainee_count);
+      console.log(
+        "this.program.active_trainee_count",
+        this.program.active_trainee_count
+      );
       if (this.program.active_trainee_count === 0) {
         console.log("is not started");
-        toast.question("Are sure delete program?", "Delete program", async () => {
-          await this.deleteProgram({ courseId: id, isStarted: false });
-        });
+        toast.question(
+          "Are sure delete program?",
+          "Delete program",
+          async () => {
+            await this.deleteProgram({ courseId: id, isStarted: false });
+          }
+        );
       } else {
         console.log("is started");
-        toast.question("Are sure delete program?", "Delete program", async () => {
-          await this.deleteProgram({ courseId: id, isStarted: true });
-          this.program.verified = false;
-        });
+        toast.question(
+          "Are sure delete program?",
+          "Delete program",
+          async () => {
+            await this.deleteProgram({ courseId: id, isStarted: true });
+            this.program.verified = false;
+          }
+        );
       }
     },
-    async openDetailModal() {
-      await this.loadProgram(this.program.id);
-      this.$_openModal("program_detail", { data: this.getProgram });
-    },
   },
 };
 </script>
diff --git a/src/components/Programs/Modals/Detail.vue b/src/components/Programs/Modals/Detail.vue
index 9ce77e2..65af8b3 100644
--- a/src/components/Programs/Modals/Detail.vue
+++ b/src/components/Programs/Modals/Detail.vue
@@ -1,19 +1,24 @@
 <template>
-  <basic-modal width="900" transition="slide-x-transition" @open="openModal">
+  <basic-modal
+    width="900"
+    :loading="loading"
+    transition="slide-x-transition"
+    @open="openModal"
+  >
     <template #header>
       <div class="close__modal">
         <v-icon class="WMi-cancel-linear" @click="$_closeModal()"></v-icon>
       </div>
-    </template>
-    <template #default>
-      <div>
+      <div class="pt-11">
         <SectionTitle
           title="program details"
           subTitle="The details you need"
           :is-modal="true"
         />
       </div>
-      <div class="mt-4 mb-10">
+    </template>
+    <template #default>
+      <div class="mt-4 mb-10" v-if="Object.keys(program).length">
         <v-row>
           <v-col cols="4">
             <img
@@ -45,7 +50,11 @@
                           class="btn-more ml-3 px-4 py-2 rounded"
                           text="know more"
                           color="white"
-                          @click="openUserDetailModal"
+                          @click="
+                            $_openModal('user_detail', {
+                              user_id: program.trainer.id,
+                            })
+                          "
                         />
                       </div>
                     </div>
@@ -86,18 +95,26 @@ export default {
   name: "modal_program_detail",
   data: () => ({
     program: {},
+    loading: false,
   }),
   computed: {
-    ...mapGetters("users", ["getUser"]),
+    ...mapGetters("programs", ["getProgram"]),
   },
   methods: {
-    ...mapActions("users", ["loadUser"]),
-    openModal({ data }) {
-      this.program = { ...data };
+    ...mapActions("programs", ["loadProgram"]),
+    openModal({ program_id }) {
+      this.load(program_id);
     },
-    async openUserDetailModal() {
-      await this.loadUser(this.program.trainer.id);
-      this.$_openModal("user_detail", { data: this.getUser });
+    async load(program_id) {
+      try {
+        this.loading = true;
+        await this.loadProgram(program_id);
+        this.program = this.getProgram;
+      } catch (error) {
+        return error;
+      } finally {
+        this.loading = false;
+      }
     },
   },
 };
diff --git a/src/components/Programs/Modals/FiltersModal.vue b/src/components/Programs/Modals/FiltersModal.vue
index 9d2a86a..99f556b 100644
--- a/src/components/Programs/Modals/FiltersModal.vue
+++ b/src/components/Programs/Modals/FiltersModal.vue
@@ -9,15 +9,15 @@
       <div class="close__modal">
         <v-icon class="WMi-cancel-linear" @click="$_closeModal()"></v-icon>
       </div>
-    </template>
-    <template #default>
-      <div>
+      <div class="pt-11">
         <SectionTitle
           title="filters"
           subTitle="let us help in your search"
           :is-modal="true"
         />
       </div>
+    </template>
+    <template #default>
       <div class="mt-4 mb-10">
         <div class="my-6">
           <div>
@@ -133,7 +133,10 @@ export default {
     ...mapGetters("programs", ["getFilters"]),
   },
   methods: {
-    ...mapMutations("programs", ["SET_FILTER_PROGRAMS", "SET_IS_FILTERED_PROGRAM"]),
+    ...mapMutations("programs", [
+      "SET_FILTER_PROGRAMS",
+      "SET_IS_FILTERED_PROGRAM",
+    ]),
     filterPrograms() {
       this.SET_IS_FILTERED_PROGRAM(true);
       this.SET_FILTER_PROGRAMS(this.filter);
diff --git a/src/components/Users/Item.vue b/src/components/Users/Item.vue
index bc80608..3fdf038 100644
--- a/src/components/Users/Item.vue
+++ b/src/components/Users/Item.vue
@@ -1,13 +1,19 @@
 <template>
   <div class="user__card">
     <v-row>
-      <v-col class="cursor-pointer" cols="3" @click="openUserDetailModal">
+      <v-col
+        class="cursor-pointer"
+        cols="3"
+        @click="$_openModal('user_detail', { user_id: user.id })"
+      >
         <div class="d-flex align-center h-100" style="overflow: hidden">
           <div style="line-height: 14px">
             <div class="user__name wa__f__m__eb">
               {{ user.first_name }} {{ user.last_name }}
             </div>
-            <small class="user__email" v-if="role === 'admin'">{{ user.email }}</small>
+            <small class="user__email" v-if="role === 'admin'">{{
+              user.email
+            }}</small>
           </div>
         </div>
       </v-col>
@@ -25,7 +31,9 @@
         <div class="d-flex align-center justify-center h-100">
           <div v-if="user.role == 'trainer'" class="d-flex align-center">
             <div class="user__program--quantity wa__f__m__eb mr-2">
-              {{ user.created_courses_count ? user.created_courses_count : "0" }}
+              {{
+                user.created_courses_count ? user.created_courses_count : "0"
+              }}
             </div>
             <div class="user__program__text">program created</div>
           </div>
@@ -86,10 +94,10 @@ export default {
     role: UserStorage.getRole() ? UserStorage.getRole() : null,
   }),
   computed: {
-    ...mapGetters("users", ["getUser", "getRoles"]),
+    ...mapGetters("users", ["getRoles"]),
   },
   methods: {
-    ...mapActions("users", ["deleteUser", "loadUser"]),
+    ...mapActions("users", ["deleteUser"]),
     removeUser(id) {
       toast.question("Are sure delete User?", "Delete User", () => {
         this.deleteUser(id);
@@ -104,10 +112,6 @@ export default {
         roles: this.getRoles,
       });
     },
-    async openUserDetailModal() {
-      await this.loadUser(this.user.id);
-      this.$_openModal("user_detail", { data: this.getUser });
-    },
   },
 };
 </script>
diff --git a/src/components/Users/Modals/ChangeRoleModal.vue b/src/components/Users/Modals/ChangeRoleModal.vue
index d0f44b8..cfb84ec 100644
--- a/src/components/Users/Modals/ChangeRoleModal.vue
+++ b/src/components/Users/Modals/ChangeRoleModal.vue
@@ -4,18 +4,31 @@
       <div class="close__modal">
         <v-icon class="WMi-cancel-linear" @click="$_closeModal()"></v-icon>
       </div>
+      <div class="pt-11">
+        <SectionTitle
+          title="change role"
+          subTitle="make it our side"
+          :is-modal="true"
+        />
+      </div>
     </template>
     <template #default>
-      <div>
-        <SectionTitle title="change role" subTitle="make it our side" :is-modal="true" />
-      </div>
-      <v-item-group class="mt-10 mb-16" mandatory v-model="role_id" @change="change">
+      <v-item-group
+        class="mt-10 mb-16"
+        mandatory
+        v-model="role_id"
+        @change="change"
+      >
         <v-row>
           <v-col cols="12" v-for="(role, i) in roles" :key="i" class="py-1">
             <v-item v-slot="{ active, toggle }" :value="role.id">
               <main-back :social="true">
                 <v-card
-                  :class="['d-flex', 'align-center', { 'item--active': active }]"
+                  :class="[
+                    'd-flex',
+                    'align-center',
+                    { 'item--active': active },
+                  ]"
                   dark
                   height="45"
                   @click="toggle"
diff --git a/src/components/Users/Modals/Detail.vue b/src/components/Users/Modals/Detail.vue
index 6ac5af5..a73dbc9 100644
--- a/src/components/Users/Modals/Detail.vue
+++ b/src/components/Users/Modals/Detail.vue
@@ -1,24 +1,31 @@
 <template>
-  <basic-modal width="900" transition="slide-x-transition" @open="openModal">
+  <basic-modal
+    :loading="loading"
+    width="900"
+    transition="slide-x-transition"
+    @open="openModal"
+  >
     <template #header>
       <div class="close__modal">
         <v-icon class="WMi-cancel-linear" @click="$_closeModal()"></v-icon>
       </div>
-    </template>
-    <template #default>
-      <div>
+      <div class="pt-11">
         <SectionTitle
           title="user details"
           subTitle="The details you need"
           :is-modal="true"
         />
       </div>
-      <div class="mt-4 mb-10">
+    </template>
+    <template #default>
+      <div class="mt-4 mb-10" v-if="Object.keys(user).length">
         <v-row>
           <v-col cols="4">
             <img
               class="user__img w-100"
-              :src="user.profile ? user.profile : require('@Assets/anonymous.png')"
+              :src="
+                user.profile ? user.profile : require('@Assets/anonymous.png')
+              "
               alt="user image"
             />
           </v-col>
@@ -73,14 +80,31 @@
   </basic-modal>
 </template>
 <script>
+import { mapActions, mapGetters } from "vuex";
 export default {
   name: "modal_user_detail",
   data: () => ({
     user: {},
+    loading: false,
   }),
+  computed: {
+    ...mapGetters("users", ["getUser"]),
+  },
   methods: {
-    openModal({ data }) {
-      this.user = { ...data };
+    ...mapActions("users", ["loadUser"]),
+    openModal({ user_id }) {
+      this.load(user_id);
+    },
+    async load(user_id) {
+      try {
+        this.loading = true;
+        await this.loadUser(user_id);
+        this.user = this.getUser;
+      } catch (error) {
+        return error;
+      } finally {
+        this.loading = false;
+      }
     },
   },
 };
diff --git a/src/components/Users/Modals/FiltersModal.vue b/src/components/Users/Modals/FiltersModal.vue
index 8a86554..978e8e8 100644
--- a/src/components/Users/Modals/FiltersModal.vue
+++ b/src/components/Users/Modals/FiltersModal.vue
@@ -10,15 +10,15 @@
       <div class="close__modal">
         <v-icon class="WMi-cancel-linear" @click="$_closeModal()"></v-icon>
       </div>
-    </template>
-    <template #default>
-      <div>
+      <div class="pt-11">
         <SectionTitle
           title="filters"
           subTitle="let us help in your search"
           :is-modal="true"
         />
       </div>
+    </template>
+    <template #default>
       <div class="mt-4 mb-10">
         <div class="my-6">
           <div>
diff --git a/src/components/Workouts/Item.vue b/src/components/Workouts/Item.vue
index e08f3c3..badeb40 100644
--- a/src/components/Workouts/Item.vue
+++ b/src/components/Workouts/Item.vue
@@ -1,5 +1,8 @@
 <template>
-  <div class="border-bottom" @click="openDetailModal">
+  <div
+    class="border-bottom cursor-pointer"
+    @click="$_openModal('workout_detail', { workout_id: workout.id })"
+  >
     <v-row>
       <v-col cols="4" class="pr-0">
         <!-- <div
@@ -84,30 +87,21 @@
   </div>
 </template>
 <script>
-import { mapActions, mapGetters } from "vuex";
+import { mapActions } from "vuex";
 import toast from "@/utils/toast";
-import AppSectionRepository from "@/abstraction/repository/appSectionRepository";
-
 export default {
   props: {
     workout: {
       type: Object,
     },
   },
-  computed: {
-    ...mapGetters("workouts", ["getWorkout"]),
-  },
   methods: {
-    ...mapActions("workouts", ["deleteWorkout", "loadWorkout"]),
+    ...mapActions("workouts", ["deleteWorkout"]),
     removeWorkout(id) {
       toast.question("Are sure delete workout?", "Delete workout", () => {
         this.deleteWorkout(id);
       });
     },
-    async openDetailModal() {
-      await this.loadWorkout(this.workout.id);
-      this.$_openModal("workout_detail", { data: this.getWorkout });
-    },
   },
 };
 </script>
diff --git a/src/components/Workouts/Modals/Detail.vue b/src/components/Workouts/Modals/Detail.vue
index 8348c65..ff9f30d 100644
--- a/src/components/Workouts/Modals/Detail.vue
+++ b/src/components/Workouts/Modals/Detail.vue
@@ -1,19 +1,24 @@
 <template>
-  <basic-modal width="1200" transition="slide-x-transition" @open="openModal">
+  <basic-modal
+    :loading="loading"
+    width="1200"
+    transition="slide-x-transition"
+    @open="openModal"
+  >
     <template #header>
       <div class="close__modal">
         <v-icon class="WMi-cancel-linear" @click="$_closeModal()"></v-icon>
       </div>
-    </template>
-    <template #default>
-      <div>
+      <div class="pt-11">
         <SectionTitle
           title="workout details"
           subTitle="The details you need"
           :is-modal="true"
         />
       </div>
-      <div class="mt-4 mb-10">
+    </template>
+    <template #default>
+      <div class="mt-4 mb-10" v-if="Object.keys(workout).length">
         <v-row>
           <v-col cols="4">
             <img
@@ -35,7 +40,10 @@
                 />
               </v-col>
               <v-col cols="6">
-                <Info title="sub category" :sub-title="workout.workout_category.name" />
+                <Info
+                  title="sub category"
+                  :sub-title="workout.workout_category.name"
+                />
               </v-col>
             </v-row>
             <v-row>
@@ -52,7 +60,10 @@
         </v-row>
         <v-row>
           <v-col cols="4">
-            <Info title="suggested course time?" :sub-title="workout.suggested_set" />
+            <Info
+              title="suggested course time?"
+              :sub-title="workout.suggested_set"
+            />
           </v-col>
           <v-col cols="4">
             <Info
@@ -61,7 +72,10 @@
             />
           </v-col>
           <v-col cols="4">
-            <Info title="suggested ESTIMATED TIME" :sub-title="workout.suggested_time" />
+            <Info
+              title="suggested ESTIMATED TIME"
+              :sub-title="workout.suggested_time"
+            />
           </v-col>
         </v-row>
         <v-row>
@@ -95,14 +109,32 @@
   </basic-modal>
 </template>
 <script>
+import { mapActions, mapGetters } from "vuex";
 export default {
   name: "modal_workout_detail",
   data: () => ({
     workout: {},
+    loading: false,
   }),
+  computed: {
+    ...mapGetters("workouts", ["getWorkout"]),
+  },
   methods: {
-    openModal({ data }) {
-      this.workout = { ...data };
+    ...mapActions("workouts", ["loadWorkout"]),
+    openModal({ workout_id }) {
+      this.load(workout_id);
+    },
+    async load(workout_id) {
+      try {
+        this.loading = true;
+        await this.loadWorkout(workout_id);
+        this.workout = this.getWorkout;
+        console.log(this.workout);
+      } catch (error) {
+        return error;
+      } finally {
+        this.loading = false;
+      }
     },
   },
 };
diff --git a/src/components/Workouts/Modals/FiltersModal.vue b/src/components/Workouts/Modals/FiltersModal.vue
index 4b96436..43fb5db 100644
--- a/src/components/Workouts/Modals/FiltersModal.vue
+++ b/src/components/Workouts/Modals/FiltersModal.vue
@@ -9,8 +9,6 @@
       <div class="close__modal">
         <v-icon class="WMi-cancel-linear" @click="$_closeModal()"></v-icon>
       </div>
-    </template>
-    <template #default>
       <div>
         <SectionTitle
           title="filters"
@@ -18,6 +16,8 @@
           :is-modal="true"
         />
       </div>
+    </template>
+    <template #default>
       <div class="mt-4 mb-10">
         <div class="my-6">
           <div>
@@ -70,7 +70,6 @@
   </basic-modal>
 </template>
 <script>
-
 import { cloneDeep } from "lodash";
 import { mapMutations, mapGetters } from "vuex";
 const defaultFilter = {
@@ -94,7 +93,10 @@ export default {
     ...mapGetters("workouts", ["getFilters"]),
   },
   methods: {
-    ...mapMutations("workouts", ["SET_FILTER_WORKOUTS", "SET_IS_FILTERED_WORKOUT"]),
+    ...mapMutations("workouts", [
+      "SET_FILTER_WORKOUTS",
+      "SET_IS_FILTERED_WORKOUT",
+    ]),
     filterWorkotus() {
       this.SET_IS_FILTERED_WORKOUT(true);
       this.SET_FILTER_WORKOUTS(this.filter);
diff --git a/src/components/WorkoutsSeries/Modals/AttachWorkoutModal.vue b/src/components/WorkoutsSeries/Modals/AttachWorkoutModal.vue
index 814ef93..f626189 100644
--- a/src/components/WorkoutsSeries/Modals/AttachWorkoutModal.vue
+++ b/src/components/WorkoutsSeries/Modals/AttachWorkoutModal.vue
@@ -11,15 +11,15 @@
       <div class="close__modal">
         <v-icon class="WMi-cancel-linear" @click="$_closeModal()"></v-icon>
       </div>
-    </template>
-    <template #default>
-      <div>
+      <div class="pt-11">
         <SectionTitle
           title="add a workout"
           subTitle="let us help in your search"
           :is-modal="true"
         />
       </div>
+    </template>
+    <template #default>
       <div class="mt-8 mb-10">
         <div>
           <v-autocomplete
@@ -45,7 +45,14 @@
                   class="mt-3"
                 /> -->
                 <div class="pb-3 align mt-2">
-                  <div class="series__workout__title wa__f__m__eb text-uppercase mb-2">
+                  <div
+                    class="
+                      series__workout__title
+                      wa__f__m__eb
+                      text-uppercase
+                      mb-2
+                    "
+                  >
                     {{ item.name }}
                   </div>
                   <div class="series__workout__description">
@@ -59,7 +66,9 @@
         <template v-if="Object.keys(selectedWorkout).length !== 0">
           <v-divider class="mt-6"></v-divider>
           <v-row class="mt-1">
-            <v-col cols="12"><AddWorkoutsItem :addWorkout="selectedWorkout" /></v-col>
+            <v-col cols="12"
+              ><AddWorkoutsItem :addWorkout="selectedWorkout"
+            /></v-col>
           </v-row>
         </template>
         <div class="mt-6">
@@ -171,7 +180,10 @@ export default {
     },
   },
   methods: {
-    ...mapActions("workoutToSeries", ["loadWorkoutsToSeries", "attachWorkoutToSeries"]),
+    ...mapActions("workoutToSeries", [
+      "loadWorkoutsToSeries",
+      "attachWorkoutToSeries",
+    ]),
     ...mapMutations("workoutToSeries", ["SET_FILTER_WORKOUTS_TO_SERIES"]),
     closeModal() {
       this.SET_FILTER_WORKOUTS_TO_SERIES({});