diff --git a/src/assets/Spinner.svg b/src/assets/Spinner.svg
new file mode 100644
index 0000000..c973906
--- /dev/null
+++ b/src/assets/Spinner.svg
@@ -0,0 +1,52 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: none; display: block; shape-rendering: auto; animation-play-state: running; animation-delay: 0s;" width="200px" height="200px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
+<g transform="rotate(0 50 50)" style="animation-play-state: running; animation-delay: 0s;">
+  <rect x="49" y="17" rx="1" ry="1.44" width="2" height="12" fill="#ffffff" style="animation-play-state: running; animation-delay: 0s;">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.9166666666666666s" repeatCount="indefinite" style="animation-play-state: running; animation-delay: 0s;"></animate>
+  </rect>
+</g><g transform="rotate(30 50 50)" style="animation-play-state: running; animation-delay: 0s;">
+  <rect x="49" y="17" rx="1" ry="1.44" width="2" height="12" fill="#ffffff" style="animation-play-state: running; animation-delay: 0s;">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.8333333333333334s" repeatCount="indefinite" style="animation-play-state: running; animation-delay: 0s;"></animate>
+  </rect>
+</g><g transform="rotate(60 50 50)" style="animation-play-state: running; animation-delay: 0s;">
+  <rect x="49" y="17" rx="1" ry="1.44" width="2" height="12" fill="#ffffff" style="animation-play-state: running; animation-delay: 0s;">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.75s" repeatCount="indefinite" style="animation-play-state: running; animation-delay: 0s;"></animate>
+  </rect>
+</g><g transform="rotate(90 50 50)" style="animation-play-state: running; animation-delay: 0s;">
+  <rect x="49" y="17" rx="1" ry="1.44" width="2" height="12" fill="#ffffff" style="animation-play-state: running; animation-delay: 0s;">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.6666666666666666s" repeatCount="indefinite" style="animation-play-state: running; animation-delay: 0s;"></animate>
+  </rect>
+</g><g transform="rotate(120 50 50)" style="animation-play-state: running; animation-delay: 0s;">
+  <rect x="49" y="17" rx="1" ry="1.44" width="2" height="12" fill="#ffffff" style="animation-play-state: running; animation-delay: 0s;">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.5833333333333334s" repeatCount="indefinite" style="animation-play-state: running; animation-delay: 0s;"></animate>
+  </rect>
+</g><g transform="rotate(150 50 50)" style="animation-play-state: running; animation-delay: 0s;">
+  <rect x="49" y="17" rx="1" ry="1.44" width="2" height="12" fill="#ffffff" style="animation-play-state: running; animation-delay: 0s;">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.5s" repeatCount="indefinite" style="animation-play-state: running; animation-delay: 0s;"></animate>
+  </rect>
+</g><g transform="rotate(180 50 50)" style="animation-play-state: running; animation-delay: 0s;">
+  <rect x="49" y="17" rx="1" ry="1.44" width="2" height="12" fill="#ffffff" style="animation-play-state: running; animation-delay: 0s;">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.4166666666666667s" repeatCount="indefinite" style="animation-play-state: running; animation-delay: 0s;"></animate>
+  </rect>
+</g><g transform="rotate(210 50 50)" style="animation-play-state: running; animation-delay: 0s;">
+  <rect x="49" y="17" rx="1" ry="1.44" width="2" height="12" fill="#ffffff" style="animation-play-state: running; animation-delay: 0s;">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.3333333333333333s" repeatCount="indefinite" style="animation-play-state: running; animation-delay: 0s;"></animate>
+  </rect>
+</g><g transform="rotate(240 50 50)" style="animation-play-state: running; animation-delay: 0s;">
+  <rect x="49" y="17" rx="1" ry="1.44" width="2" height="12" fill="#ffffff" style="animation-play-state: running; animation-delay: 0s;">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.25s" repeatCount="indefinite" style="animation-play-state: running; animation-delay: 0s;"></animate>
+  </rect>
+</g><g transform="rotate(270 50 50)" style="animation-play-state: running; animation-delay: 0s;">
+  <rect x="49" y="17" rx="1" ry="1.44" width="2" height="12" fill="#ffffff" style="animation-play-state: running; animation-delay: 0s;">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.16666666666666666s" repeatCount="indefinite" style="animation-play-state: running; animation-delay: 0s;"></animate>
+  </rect>
+</g><g transform="rotate(300 50 50)" style="animation-play-state: running; animation-delay: 0s;">
+  <rect x="49" y="17" rx="1" ry="1.44" width="2" height="12" fill="#ffffff" style="animation-play-state: running; animation-delay: 0s;">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.08333333333333333s" repeatCount="indefinite" style="animation-play-state: running; animation-delay: 0s;"></animate>
+  </rect>
+</g><g transform="rotate(330 50 50)" style="animation-play-state: running; animation-delay: 0s;">
+  <rect x="49" y="17" rx="1" ry="1.44" width="2" height="12" fill="#ffffff" style="animation-play-state: running; animation-delay: 0s;">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite" style="animation-play-state: running; animation-delay: 0s;"></animate>
+  </rect>
+</g>
+<!-- [ldio] generated by https://loading.io/ --></svg>
\ No newline at end of file
diff --git a/src/components/Global/Button/RectangleButton.vue b/src/components/Global/Button/RectangleButton.vue
index c5796b3..baf5c56 100644
--- a/src/components/Global/Button/RectangleButton.vue
+++ b/src/components/Global/Button/RectangleButton.vue
@@ -10,6 +10,7 @@
     :small="sm"
     :large="lg"
     :x-large="xl"
+    :loading="loading"
   >
     <template v-if="text">
       <template v-if="icon"
@@ -40,6 +41,9 @@ export default {
     iconRight: {},
     textMode: {},
     width: {},
+    loading: {
+      default: false,
+    },
     color: {
       default: "white",
     },
diff --git a/src/components/Global/Misc/Loading.vue b/src/components/Global/Misc/Loading.vue
index 055f567..6d62b64 100644
--- a/src/components/Global/Misc/Loading.vue
+++ b/src/components/Global/Misc/Loading.vue
@@ -9,7 +9,7 @@
 </template>
 
 <script>
-import Idefault from '@/assets/Misterious_mist.gif'
+import Idefault from '@/assets/Spinner.svg'
 export default {
   props: {
     src: {
diff --git a/src/components/Products/Add.vue b/src/components/Products/Add.vue
index 82f0fa7..85e2259 100644
--- a/src/components/Products/Add.vue
+++ b/src/components/Products/Add.vue
@@ -195,7 +195,7 @@
               <router-link :to="{ name: 'products' }">
                 <RectangleButton
                   text="I’VE CHANGED MY MIND"
-                  icon="WMi-cancel"
+                  icon="WMi-cancel-linear"
                   class="px-0"
                   height="29"
                   lg
@@ -207,6 +207,7 @@
                 height="29"
                 type="submit"
                 lg
+                :loading="addProductRequestLoading"
               />
             </div>
           </div>
@@ -234,6 +235,7 @@ export default {
   },
   data: () => ({
     loading: false,
+    addProductRequestLoading: false,
     random_token: RANDOM_TOKEN,
     form: {
       batch_id: RANDOM_TOKEN,
@@ -278,6 +280,7 @@ export default {
       try {
         let valid = this.$refs.form.validate();
         if (valid) {
+          this.addProductRequestLoading = true;
           let repository = new FileRepository();
           if (this.productId) {
             if (this.fileForm.file) {
@@ -295,6 +298,8 @@ export default {
         }
       } catch (e) {
         return e;
+      } finally {
+        this.addProductRequestLoading = false;
       }
     },
     async load() {
diff --git a/src/components/Profile/Profile.vue b/src/components/Profile/Profile.vue
index 05e5c9f..bf3f2b6 100644
--- a/src/components/Profile/Profile.vue
+++ b/src/components/Profile/Profile.vue
@@ -148,7 +148,7 @@
               <router-link :to="{ name: 'dashboard' }">
                 <RectangleButton
                   text="I’VE CHANGED MY MIND"
-                  icon="WMi-cancel"
+                  icon="WMi-cancel-linear"
                   class="px-0"
                   height="29"
                   lg
@@ -159,6 +159,7 @@
                 height="29"
                 type="submit"
                 lg
+                :loading="profileRequestLoading"
               />
             </div>
           </div>
@@ -188,6 +189,7 @@ export default {
       collection: "main_image",
       crop_data: {},
     },
+    profileRequestLoading: false,
   }),
   computed: {
     ...mapGetters("profile", ["getProfile", "getProfileLoading"]),
@@ -202,12 +204,19 @@ export default {
       this.form["batch_id"] = RANDOM_TOKEN;
     },
     async submit() {
-      if (this.fileForm.file) {
-        let repository = new FileRepository();
-        await repository.store(this.fileForm);
+      try {
+        this.profileRequestLoading = true;
+        if (this.fileForm.file) {
+          let repository = new FileRepository();
+          await repository.store(this.fileForm);
+        }
+        await this.updateProfile(this.form);
+        this.$router.push({ name: "dashboard" });
+      } catch (e) {
+        return e;
+      } finally {
+        this.profileRequestLoading = false;
       }
-      await this.updateProfile(this.form);
-      this.$router.push({ name: "dashboard" });
     },
   },
   async created() {
diff --git a/src/components/Profile/TraineeProfile.vue b/src/components/Profile/TraineeProfile.vue
index 9d7efbc..2995d31 100644
--- a/src/components/Profile/TraineeProfile.vue
+++ b/src/components/Profile/TraineeProfile.vue
@@ -133,7 +133,7 @@
               <router-link :to="{ name: 'dashboard' }">
                 <RectangleButton
                   text="I’VE CHANGED MY MIND"
-                  icon="WMi-cancel"
+                  icon="WMi-cancel-linear"
                   class="px-0"
                   height="29"
                   lg
diff --git a/src/components/Programs/Add.vue b/src/components/Programs/Add.vue
index bbd5261..edd3d59 100644
--- a/src/components/Programs/Add.vue
+++ b/src/components/Programs/Add.vue
@@ -108,15 +108,17 @@
               <router-link :to="{ name: 'programs' }">
                 <RectangleButton
                   text="I’VE CHANGED MY MIND"
-                  icon="WMi-cancel"
+                  icon="WMi-cancel-linear"
                   class="px-0"
-                  height="19"
+                  height="29"
+                  lg
                 />
               </router-link>
               <RectangleButton
                 :text="(programId ? 'update' : 'add') + ' the program'"
                 class="custom-btn add-btn"
-                height="25"
+                height="29"
+                lg
                 type="submit"
               />
             </div>
diff --git a/src/components/Users/Modals/ChangeRoleModal.vue b/src/components/Users/Modals/ChangeRoleModal.vue
index 208ba4a..277ac81 100644
--- a/src/components/Users/Modals/ChangeRoleModal.vue
+++ b/src/components/Users/Modals/ChangeRoleModal.vue
@@ -46,6 +46,7 @@
           class="btn__modal--confirm custom-btn wa__f__m__eb"
           text="change"
           @click.native="changeRole"
+          :loading="changeRoleRequestLoading"
         />
       </div>
     </template>
@@ -67,6 +68,7 @@ export default {
   data: () => ({
     role_id: null,
     currectRoleId: null,
+    changeRoleRequestLoading: false,
   }),
   computed: {
     form() {
@@ -84,20 +86,27 @@ export default {
       this.form.roles_id.push(this.role_id);
     },
     async changeRole() {
-      if (this.form.roles_id) {
-        if (
-          !this.form.roles_id.includes(this.currectRoleId) &&
-          this.role_id !== this.currectRoleId
-        ) {
-          if (this.form.roles_id.includes(0)) {
-            this.form.roles_id = [];
+      try {
+        this.changeRoleRequestLoading = true;
+        if (this.form.roles_id) {
+          if (
+            !this.form.roles_id.includes(this.currectRoleId) &&
+            this.role_id !== this.currectRoleId
+          ) {
+            if (this.form.roles_id.includes(0)) {
+              this.form.roles_id = [];
+            }
+            await this.updateRole(this.form);
+            this.currectRoleId = this.role_id ? this.role_id : 0;
+            this.$_closeModal();
+          } else {
+            toast.error("Change the role first", "Error");
           }
-          await this.updateRole(this.form);
-          this.currectRoleId = this.role_id ? this.role_id : 0;
-          this.$_closeModal();
-        } else {
-          toast.error("Change the role first", "Error");
         }
+      } catch (e) {
+        return e;
+      } finally {
+        this.changeRoleRequestLoading = false;
       }
     },
   },
diff --git a/src/components/Workouts/Add.vue b/src/components/Workouts/Add.vue
index 623e4b4..2aafb82 100644
--- a/src/components/Workouts/Add.vue
+++ b/src/components/Workouts/Add.vue
@@ -155,7 +155,7 @@
               <router-link :to="{ name: 'workouts' }">
                 <RectangleButton
                   text="I’VE CHANGED MY MIND"
-                  icon="WMi-cancel"
+                  icon="WMi-cancel-linear"
                   class="px-0"
                   height="29"
                   lg
diff --git a/src/views/ForgotPassword.vue b/src/views/ForgotPassword.vue
index c95c577..87b28f5 100644
--- a/src/views/ForgotPassword.vue
+++ b/src/views/ForgotPassword.vue
@@ -35,6 +35,7 @@
                       :text-mode="true"
                       text="send the code"
                       type="submit"
+                      :loading="forgotRequestLoading"
                     />
                   </v-col>
                   <v-col cols="12" class="pt-0">
@@ -74,9 +75,20 @@ export default {
   },
   data: () => ({
     form: {},
+    forgotRequestLoading: false,
   }),
   methods: {
     async forgotPassword() {
+      try {
+        this.forgotRequestLoading = true;
+        let repository = new AuthRepository();
+        await repository.forgotPassword(this.form);
+        this.$router.push({ name: "login" });
+      } catch (e) {
+        return e;
+      } finally {
+        this.forgotRequestLoading = false;
+      }
       let repository = new AuthRepository();
       await repository.forgotPassword(this.form);
       this.$router.push({ name: "login" });
diff --git a/src/views/Login.vue b/src/views/Login.vue
index 5388f92..a4412f6 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -47,6 +47,7 @@
                         lg
                         :text-mode="true"
                         text="sign in"
+                        :loading="btnLoading"
                         type="submit"
                       />
                     </div>
@@ -106,13 +107,21 @@ export default {
   data: () => ({
     showPassword: false,
     form: {},
+    btnLoading: false,
   }),
   methods: {
     ...mapActions("auth", ["login"]),
     async doLogin() {
-      let response = await this.login(this.form);
-      if (response) {
-        this.$router.push(this.$route.query.redirect || "/");
+      try {
+        this.btnLoading = true;
+        let response = await this.login(this.form);
+        if (response) {
+          this.$router.push(this.$route.query.redirect || "/");
+        }
+      } catch (e) {
+        return e;
+      } finally {
+        this.btnLoading = false;
       }
     },
   },
diff --git a/src/views/Register.vue b/src/views/Register.vue
index a60cbe7..1e965fd 100644
--- a/src/views/Register.vue
+++ b/src/views/Register.vue
@@ -79,6 +79,7 @@
                         :text-mode="true"
                         text="do sign up"
                         type="submit"
+                        :loading="signUpRequestLoading"
                       />
                     </div>
                   </v-col>
@@ -136,6 +137,7 @@
                         type="submit"
                         height="29"
                         lg
+                        :loading="verifyCodeRequestLoading"
                       />
                     </v-col>
                     <v-col cols="12" class="pt-0">
@@ -176,21 +178,37 @@ export default {
     showPassword: false,
     form: {},
     verifyCodePage: false,
+    signUpRequestLoading: false,
+    verifyCodeRequestLoading: false,
   }),
   methods: {
     ...mapActions("auth", ["register", "verifyEmail"]),
     async doRegister() {
-      let response = await this.register(this.form);
-      if (response) {
-        this.toggleVerifyCodePage();
+      try {
+        this.signUpRequestLoading = true;
+        let response = await this.register(this.form);
+        if (response) {
+          this.toggleVerifyCodePage();
+        }
+      } catch (e) {
+        return e;
+      } finally {
+        this.signUpRequestLoading = false;
       }
     },
     toggleVerifyCodePage() {
       this.verifyCodePage = !this.verifyCodePage;
     },
     async verifyEmailCode() {
-      await this.verifyEmail(this.form);
-      this.$router.push({ name: "dashboard" });
+      try {
+        this.verifyCodeRequestLoading = true;
+        await this.verifyEmail(this.form);
+        this.$router.push({ name: "dashboard" });
+      } catch (e) {
+        return e;
+      } finally {
+        this.verifyCodeRequestLoading = false;
+      }
     },
   },
 };