diff --git a/src/assets/Misterious_mist.gif b/src/assets/Misterious_mist.gif
index f82c9d8..32ac2b4 100644
Binary files a/src/assets/Misterious_mist.gif and b/src/assets/Misterious_mist.gif differ
diff --git a/src/components/Bookmarks/Items.vue b/src/components/Bookmarks/Items.vue
index 04f3590..9e1458b 100644
--- a/src/components/Bookmarks/Items.vue
+++ b/src/components/Bookmarks/Items.vue
@@ -22,41 +22,48 @@
             <v-tabs-items v-model="tab">
               <!-- program tab -->
               <v-tab-item>
-                <v-row class="mt-4">
-                  <v-col
-                    cols="4"
-                    class="mb-2"
-                    v-for="(program, i) in getBookmarksPrograms"
-                    :key="i"
-                  >
-                    <BookmarksPrograms :program="program" />
-                  </v-col>
-                </v-row>
-                <div class="text-center mt-40 mb-5">
-                  <pagination
-                    :pagination="getPaginationProgram"
-                    @pagination="changePaginationPrograms"
-                  />
-                </div>
+                <data-iterator
+                  :loading="getBookmarkProgramsLoading"
+                  :items="getBookmarksPrograms"
+                  @pagination="changePaginationPrograms"
+                  :pagination="getPaginationProgram"
+                  class="row pb-10 mt-5"
+                >
+                  <template #loading>
+                    <loading />
+                  </template>
+                  <template #no-items>
+                    <no-items />
+                  </template>
+                  <template #items="{ item }">
+                    <v-col cols="4" class="mb-2">
+                      <BookmarksPrograms :program="item" />
+                    </v-col>
+                  </template>
+                </data-iterator>
               </v-tab-item>
               <!-- /program tab -->
               <!-- workout tab -->
               <v-tab-item>
-                <v-row class="mt-4">
-                  <v-col
-                    cols="6"
-                    v-for="(workout, i) in getBookmarksWorkouts"
-                    :key="i"
-                    class="mb-2"
-                    ><BookmarksWorkouts :workout="workout"
-                  /></v-col>
-                </v-row>
-                <div class="text-center mt-40 mb-5">
-                  <pagination
-                    :pagination="getPaginationWorkout"
-                    @pagination="changePaginationWorkouts"
-                  />
-                </div>
+                <data-iterator
+                  :loading="getBookmarkWorkoutsLoading"
+                  :items="getBookmarksWorkouts"
+                  @pagination="changePaginationWorkouts"
+                  :pagination="getPaginationWorkout"
+                  class="row pb-10 mt-5"
+                >
+                  <template #loading>
+                    <loading />
+                  </template>
+                  <template #no-items>
+                    <no-items />
+                  </template>
+                  <template #items="{ item }">
+                    <v-col cols="6" class="mb-2"
+                      ><BookmarksWorkouts :workout="item"
+                    /></v-col>
+                  </template>
+                </data-iterator>
               </v-tab-item>
               <!-- /workout tab -->
             </v-tabs-items>
@@ -65,7 +72,7 @@
       </div>
     </main-back>
   </div>
-</template> 
+</template>
 <script>
 import SectionTitle from "../Global/Section/SectionTitle.vue";
 import BookmarksWorkouts from "./Workouts/Workouts.vue";
@@ -83,6 +90,8 @@ export default {
   computed: {
     ...mapGetters("bookmarks", [
       "getBookmarksPrograms",
+      "getBookmarkProgramsLoading",
+      "getBookmarkWorkoutsLoading",
       "getBookmarksWorkouts",
       "getPaginationWorkout",
       "getPaginationProgram",
@@ -90,10 +99,7 @@ export default {
   },
   methods: {
     ...mapActions("bookmarks", ["loadBookmarkProgram", "loadBookmarkWorkout"]),
-    ...mapMutations("bookmarks", [
-      "SET_WORKOUTS_PAGINATION",
-      "SET_PROGRAMS_PAGINATION",
-    ]),
+    ...mapMutations("bookmarks", ["SET_WORKOUTS_PAGINATION", "SET_PROGRAMS_PAGINATION"]),
     changePaginationWorkouts(page) {
       if (this.getPaginationWorkout.page !== page) {
         this.SET_WORKOUTS_PAGINATION(page);
@@ -113,7 +119,7 @@ export default {
   },
 };
 </script>
-<style >
+<style>
 .theme--light.v-tabs > .v-tabs-bar {
   background-color: rgba(0, 0, 0, 0) !important;
   border-bottom: 1px solid rgba(255, 255, 255, 0.404);
@@ -127,4 +133,4 @@ export default {
 .v-tabs-items {
   background-color: rgba(0, 0, 0, 0) !important;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/Global/Input/ImageCropper.vue b/src/components/Global/Input/ImageCropper.vue
index 325d5fc..c685d1e 100644
--- a/src/components/Global/Input/ImageCropper.vue
+++ b/src/components/Global/Input/ImageCropper.vue
@@ -17,6 +17,7 @@
           text="select your file"
           icon="WMi-camera"
           class="w-100"
+          lg
           height="30"
           bg-color="white"
           color="black"
diff --git a/src/components/Profile/TraineeProfile.vue b/src/components/Profile/TraineeProfile.vue
index 185ecb9..9d7efbc 100644
--- a/src/components/Profile/TraineeProfile.vue
+++ b/src/components/Profile/TraineeProfile.vue
@@ -11,7 +11,8 @@
             subTitle="let us know you better, it comes handy."
           />
         </div>
-        <v-form @submit.prevent="submit">
+        <loading v-if="getProfileLoading" class="loading-data" />
+        <v-form @submit.prevent="submit" :class="{ 'loading-form': getProfileLoading }">
           <v-row class="mt-4">
             <v-col class="12" sm="3">
               <v-text-field
@@ -105,7 +106,7 @@
                 v-model="form.arm_diameter"
               ></v-text-field
             ></v-col>
-            <v-col cols="3"
+            <v-col cols="3" class="pr-0"
               ><v-text-field
                 label="leg diameter"
                 class="no-error-msg pt-0"
@@ -134,12 +135,14 @@
                   text="I’VE CHANGED MY MIND"
                   icon="WMi-cancel"
                   class="px-0"
-                  height="19"
+                  height="29"
+                  lg
               /></router-link>
               <RectangleButton
                 text="SAVE THE INFO"
                 class="custom-btn save-btn"
-                height="25"
+                height="29"
+                lg
                 type="submit"
               />
             </div>
@@ -160,7 +163,7 @@ export default {
     form: {},
   }),
   computed: {
-    ...mapGetters("profile", ["getProfile"]),
+    ...mapGetters("profile", ["getProfile", "getProfileLoading"]),
     ...mapGetters("countries", ["getCountries"]),
   },
   methods: {
diff --git a/src/components/TraineePrograms/Items.vue b/src/components/TraineePrograms/Items.vue
index e3d3ed6..5e93aac 100644
--- a/src/components/TraineePrograms/Items.vue
+++ b/src/components/TraineePrograms/Items.vue
@@ -13,38 +13,54 @@
             />
           </div>
         </div>
-        <template v-if="getPrograms.length">
-          <v-row class="mt-4">
-            <v-col
-              class="pr-0 pt-0 pb-1"
-              v-for="(trainProgram, i) in getPrograms"
-              :key="i"
-              cols="12"
-              ><TrainProgramItem :program="trainProgram"
+        <data-iterator
+          :loading="getProgramsLoading"
+          :items="getPrograms"
+          @pagination="changePagination"
+          :pagination="getPaginationProgram"
+          class="row pb-10 mt-5"
+        >
+          <template #loading>
+            <loading />
+          </template>
+          <template #no-items>
+            <no-items />
+          </template>
+          <template #items="{ item }">
+            <v-col class="pr-0 pt-0 pb-1" cols="12"
+              ><TraineeProgramItem :program="item"
             /></v-col>
-          </v-row>
-        </template>
-        <template v-else>
-          <div class="text-center mt-10">There are no items to display</div>
-        </template>
+          </template>
+        </data-iterator>
       </div>
     </main-back>
   </div>
 </template>
 <script>
-import { mapActions, mapGetters } from "vuex";
+import { mapActions, mapGetters, mapMutations } from "vuex";
 import SectionTitle from "../Global/Section/SectionTitle.vue";
-import TrainProgramItem from "./Item.vue";
+import TraineeProgramItem from "./Item.vue";
 export default {
   components: {
     SectionTitle,
-    TrainProgramItem,
+    TraineeProgramItem,
   },
   computed: {
-    ...mapGetters("userPrograms", ["getPrograms"]),
+    ...mapGetters("userPrograms", [
+      "getPrograms",
+      "getProgramsLoading",
+      "getPaginationProgram",
+    ]),
   },
   methods: {
     ...mapActions("userPrograms", ["loadPrograms"]),
+    ...mapMutations("userPrograms", ["SET_PAGINATION"]),
+    changePagination(page) {
+      if (this.getPaginationProgram.page !== page) {
+        this.SET_PAGINATION(page);
+        this.loadPrograms();
+      }
+    },
   },
   async created() {
     await this.loadPrograms();
diff --git a/src/store/modules/bookmarks/actions.js b/src/store/modules/bookmarks/actions.js
index 2c722d4..14cef46 100644
--- a/src/store/modules/bookmarks/actions.js
+++ b/src/store/modules/bookmarks/actions.js
@@ -2,6 +2,7 @@ import BookmarkRepository from "@/abstraction/repository/bookmarkRepository";
 export default {
     async loadBookmarkProgram({ state, commit }) {
         try {
+            commit("SET_LOADING_BOOKMARKS_PROGRAM", true);
             let data = { pagination: state.programsPagination }
             let repository = new BookmarkRepository();
             const resource = await repository.indexCourses(data);
@@ -9,20 +10,30 @@ export default {
             commit("SET_PROGRAMS_PAGINATION", resource.pagination);
         } catch (e) {
             return e;
+        } finally {
+            commit("SET_LOADING_BOOKMARKS_PROGRAM", false);
         }
     },
     async loadBookmarkWorkout({ state, commit }) {
-        let data = { pagination: state.workoutsPagination }
-        let repository = new BookmarkRepository();
-        const resource = await repository.indexWorkouts(data);
-        commit("SET_BOOKMARKS_WORKOUTS", resource.data);
-        commit("SET_WORKOUTS_PAGINATION", resource.pagination);
+        try {
+            commit("SET_LOADING_BOOKMARKS_WORKOUT", true);
+            let data = { pagination: state.workoutsPagination }
+            let repository = new BookmarkRepository();
+            const resource = await repository.indexWorkouts(data);
+            commit("SET_BOOKMARKS_WORKOUTS", resource.data);
+            commit("SET_WORKOUTS_PAGINATION", resource.pagination);
+        } catch (e) {
+            return e;
+        } finally {
+            commit("SET_LOADING_BOOKMARKS_WORKOUT", false);
+        }
+
     },
     async deleteBookmarkWorkout({ commit }, workoutId) {
         let repository = new BookmarkRepository();
         await repository.deleteBookmark(workoutId);
         commit('DELETE_BOOKMARKS_WORKOUT', workoutId);
-        
+
     },
     async deleteBookmarksProgram({ commit }, courseId) {
         let repository = new BookmarkRepository();
diff --git a/src/store/modules/bookmarks/getters.js b/src/store/modules/bookmarks/getters.js
index 654cb4c..144d998 100644
--- a/src/store/modules/bookmarks/getters.js
+++ b/src/store/modules/bookmarks/getters.js
@@ -2,5 +2,7 @@ export default {
     getBookmarksPrograms: state => state.programs,
     getBookmarksWorkouts: state => state.workouts,
     getPaginationProgram: state => state.programsPagination,
-    getPaginationWorkout: state => state.workoutsPagination
+    getPaginationWorkout: state => state.workoutsPagination,
+    getBookmarkProgramsLoading: state => state.bookmarksProgramLoading,
+    getBookmarkWorkoutsLoading: state => state.bookmarksWorkoutLoading,
 }
\ No newline at end of file
diff --git a/src/store/modules/bookmarks/mutations.js b/src/store/modules/bookmarks/mutations.js
index 1ffc27f..7eb6fda 100644
--- a/src/store/modules/bookmarks/mutations.js
+++ b/src/store/modules/bookmarks/mutations.js
@@ -1,5 +1,6 @@
 import Vue from "vue";
 export default {
+    // SET
     SET_BOOKMARKS_PROGRAMS(state, payload) {
         Vue.set(state, "programs", payload)
     },
@@ -14,6 +15,7 @@ export default {
         pagination = { ...state.programsPagination, ...pagination };
         Vue.set(state, "programsPagination", pagination);
     },
+    // DELETE
     DELETE_BOOKMARKS_WORKOUT(state, payload) {
         const index = state.workouts.findIndex((x) => x.id === payload);
         Vue.delete(state.workouts, index);
@@ -26,4 +28,11 @@ export default {
         Vue.set(state.programsPagination, 'itemsLength', state.programsPagination.itemsLength - 1);
         Vue.set(state.programsPagination, 'pageStop', state.programsPagination.pageStop - 1);
     },
+    // LOADING
+    SET_LOADING_BOOKMARKS_PROGRAM(state, status) {
+        Vue.set(state, 'bookmarksProgramLoading', status);
+    },
+    SET_LOADING_BOOKMARKS_WORKOUT(state, status) {
+        Vue.set(state, 'bookmarksWorkoutLoading', status);
+    },
 };
\ No newline at end of file
diff --git a/src/store/modules/bookmarks/state.js b/src/store/modules/bookmarks/state.js
index 69084ee..89fd950 100644
--- a/src/store/modules/bookmarks/state.js
+++ b/src/store/modules/bookmarks/state.js
@@ -7,4 +7,6 @@ export default {
     workoutsPagination: {
         itemsPerPage: 12
     },
+    bookmarksProgramLoading: false,
+    bookmarksWorkoutLoading: false,
 };
diff --git a/src/store/modules/programs/actions.js b/src/store/modules/programs/actions.js
index 316c98e..640bdd1 100644
--- a/src/store/modules/programs/actions.js
+++ b/src/store/modules/programs/actions.js
@@ -21,6 +21,7 @@ export default {
     },
     async loadMyPrograms({ state, commit }) {
         try {
+            commit("SET_LOADING_PROGRAMS", true);
             let data = { pagination: state.pagination, filters: state.filters };
             let repository = new ProgramRepository();
             const resource = await repository.indexMyPrograms(data);
@@ -28,9 +29,10 @@ export default {
             commit("SET_FILTER_COUNT", Object.keys(filterCount).length);
             commit("SET_PROGRAMS", resource.data);
             commit("SET_PAGINATION", resource.pagination);
-        }
-        catch (e) {
+        } catch (e) {
             return e;
+        } finally {
+            commit("SET_LOADING_PROGRAMS", false);
         }
     },
     async loadProgram({ commit }, courseId) {
diff --git a/src/store/modules/userPrograms/actions.js b/src/store/modules/userPrograms/actions.js
index 19ced86..b0d3827 100644
--- a/src/store/modules/userPrograms/actions.js
+++ b/src/store/modules/userPrograms/actions.js
@@ -2,14 +2,16 @@ import UserProgramRepository from "@/abstraction/repository/userProgramRepositor
 export default {
     async loadPrograms({ state, commit }) {
         try {
+            commit("SET_LOADING_PROGRAMS", true);
             let data = { pagination: state.pagination };
             let repository = new UserProgramRepository();
             const resource = await repository.index(data);
             commit("SET_PROGRAMS", resource.data);
             commit("SET_PAGINATION", resource.pagination);
-        }
-        catch (e) {
+        } catch (e) {
             return e;
+        } finally {
+            commit("SET_LOADING_PROGRAMS", false);
         }
     },
 };
diff --git a/src/store/modules/userPrograms/getters.js b/src/store/modules/userPrograms/getters.js
index f929a4c..2096fc9 100644
--- a/src/store/modules/userPrograms/getters.js
+++ b/src/store/modules/userPrograms/getters.js
@@ -1,3 +1,5 @@
 export default {
     getPrograms: state => state.programs,
+    getProgramsLoading: state => state.loading,
+    getPaginationProgram: state => state.pagination
 };
diff --git a/src/store/modules/userPrograms/mutations.js b/src/store/modules/userPrograms/mutations.js
index 07b4126..cdb09fa 100644
--- a/src/store/modules/userPrograms/mutations.js
+++ b/src/store/modules/userPrograms/mutations.js
@@ -7,4 +7,8 @@ export default {
         pagination = { ...state.pagination, ...pagination };
         Vue.set(state, "pagination", pagination);
     },
+    // LOADING
+    SET_LOADING_PROGRAMS(state, status) {
+        Vue.set(state, 'loading', status);
+    },
 };
diff --git a/src/store/modules/userPrograms/state.js b/src/store/modules/userPrograms/state.js
index 4b09918..af07fdb 100644
--- a/src/store/modules/userPrograms/state.js
+++ b/src/store/modules/userPrograms/state.js
@@ -3,4 +3,5 @@ export default {
     pagination: {
         itemsPerPage: 12
     },
+    loading: false
 };