diff --git a/vue-frontend/src/assets/images/life/jobs_canopas_life_1.webp b/vue-frontend/src/assets/images/life/jobs_canopas_life_1.webp
index a9b3a2bf3..84525213c 100644
Binary files a/vue-frontend/src/assets/images/life/jobs_canopas_life_1.webp and b/vue-frontend/src/assets/images/life/jobs_canopas_life_1.webp differ
diff --git a/vue-frontend/src/assets/images/life/jobs_canopas_life_2.webp b/vue-frontend/src/assets/images/life/jobs_canopas_life_2.webp
index 69e41396b..52966d02d 100644
Binary files a/vue-frontend/src/assets/images/life/jobs_canopas_life_2.webp and b/vue-frontend/src/assets/images/life/jobs_canopas_life_2.webp differ
diff --git a/vue-frontend/src/assets/images/life/jobs_canopas_life_3.webp b/vue-frontend/src/assets/images/life/jobs_canopas_life_3.webp
index 0e55893ca..f61296d1a 100644
Binary files a/vue-frontend/src/assets/images/life/jobs_canopas_life_3.webp and b/vue-frontend/src/assets/images/life/jobs_canopas_life_3.webp differ
diff --git a/vue-frontend/src/assets/images/life/jobs_canopas_life_4.webp b/vue-frontend/src/assets/images/life/jobs_canopas_life_4.webp
index 6b17ecb99..c6f453523 100644
Binary files a/vue-frontend/src/assets/images/life/jobs_canopas_life_4.webp and b/vue-frontend/src/assets/images/life/jobs_canopas_life_4.webp differ
diff --git a/vue-frontend/src/assets/images/life/jobs_canopas_life_5.webp b/vue-frontend/src/assets/images/life/jobs_canopas_life_5.webp
index 37a3f0d1f..ffb5ae4ef 100644
Binary files a/vue-frontend/src/assets/images/life/jobs_canopas_life_5.webp and b/vue-frontend/src/assets/images/life/jobs_canopas_life_5.webp differ
diff --git a/vue-frontend/src/assets/images/life/jobs_canopas_life_6.webp b/vue-frontend/src/assets/images/life/jobs_canopas_life_6.webp
index 8ad9547cf..463b4cd25 100644
Binary files a/vue-frontend/src/assets/images/life/jobs_canopas_life_6.webp and b/vue-frontend/src/assets/images/life/jobs_canopas_life_6.webp differ
diff --git a/vue-frontend/src/assets/images/perks/jobs_canopas_perks_1.webp b/vue-frontend/src/assets/images/perks/jobs_canopas_perks_1.webp
index d6676c0b8..fad094524 100644
Binary files a/vue-frontend/src/assets/images/perks/jobs_canopas_perks_1.webp and b/vue-frontend/src/assets/images/perks/jobs_canopas_perks_1.webp differ
diff --git a/vue-frontend/src/assets/images/perks/jobs_canopas_perks_2.webp b/vue-frontend/src/assets/images/perks/jobs_canopas_perks_2.webp
index 9277c03ba..a14b873f9 100644
Binary files a/vue-frontend/src/assets/images/perks/jobs_canopas_perks_2.webp and b/vue-frontend/src/assets/images/perks/jobs_canopas_perks_2.webp differ
diff --git a/vue-frontend/src/assets/images/perks/jobs_canopas_perks_3.webp b/vue-frontend/src/assets/images/perks/jobs_canopas_perks_3.webp
index 17ef19851..4ecfc6936 100644
Binary files a/vue-frontend/src/assets/images/perks/jobs_canopas_perks_3.webp and b/vue-frontend/src/assets/images/perks/jobs_canopas_perks_3.webp differ
diff --git a/vue-frontend/src/assets/images/perks/jobs_canopas_perks_4.webp b/vue-frontend/src/assets/images/perks/jobs_canopas_perks_4.webp
index 38c1e2100..cfa72ff42 100644
Binary files a/vue-frontend/src/assets/images/perks/jobs_canopas_perks_4.webp and b/vue-frontend/src/assets/images/perks/jobs_canopas_perks_4.webp differ
diff --git a/vue-frontend/src/assets/images/perks/jobs_canopas_perks_5.webp b/vue-frontend/src/assets/images/perks/jobs_canopas_perks_5.webp
index 041fe819d..9e95f65af 100644
Binary files a/vue-frontend/src/assets/images/perks/jobs_canopas_perks_5.webp and b/vue-frontend/src/assets/images/perks/jobs_canopas_perks_5.webp differ
diff --git a/vue-frontend/src/assets/images/perks/jobs_canopas_perks_6.webp b/vue-frontend/src/assets/images/perks/jobs_canopas_perks_6.webp
index cca274762..b03c8573b 100644
Binary files a/vue-frontend/src/assets/images/perks/jobs_canopas_perks_6.webp and b/vue-frontend/src/assets/images/perks/jobs_canopas_perks_6.webp differ
diff --git a/vue-frontend/src/assets/images/perks/jobs_canopas_perks_7.webp b/vue-frontend/src/assets/images/perks/jobs_canopas_perks_7.webp
index a7152bc06..ceef5e328 100644
Binary files a/vue-frontend/src/assets/images/perks/jobs_canopas_perks_7.webp and b/vue-frontend/src/assets/images/perks/jobs_canopas_perks_7.webp differ
diff --git a/vue-frontend/src/assets/images/perks/jobs_canopas_perks_8.webp b/vue-frontend/src/assets/images/perks/jobs_canopas_perks_8.webp
index 33176c7c8..80a86b8f7 100644
Binary files a/vue-frontend/src/assets/images/perks/jobs_canopas_perks_8.webp and b/vue-frontend/src/assets/images/perks/jobs_canopas_perks_8.webp differ
diff --git a/vue-frontend/src/components/ApplyForCareer.vue b/vue-frontend/src/components/ApplyForCareer.vue
index fc981fb4c..80052112c 100644
--- a/vue-frontend/src/components/ApplyForCareer.vue
+++ b/vue-frontend/src/components/ApplyForCareer.vue
@@ -2,28 +2,23 @@
   <div>
     <ScreenMeta v-bind:seoData="seoData" />
     <ScreenHeader />
-    <div v-if="isLoading" class="loader-div">
-      <img :src="loader" />
-    </div>
+    <ScreenLoader v-if="isLoading" />
     <div v-else>
+      <ScreenLoader v-if="isLoad" v-bind:loader="true" />
       <div
         class="container form-container"
         :style="{
-          'pointer-events': isLoading ? 'none' : '',
-          filter: isLoading ? 'blur(1px)' : '',
+          'pointer-events': isLoad ? 'none' : '',
+          filter: isLoad ? 'blur(1px)' : '',
         }"
       >
         <div class="job-application">
-          <div class="header-text text-center canopas-gradient-text">
+          <div class="header-2-text text-center canopas-gradient-text pb-3">
             Applying For {{ title }}
           </div>
           <form class="contact-form-text pt-5 pb-5">
             <div class="row">
-              <span class="required-field-msg mb-5"
-                >All fields marked with * are required.</span
-              >
-
-              <div class="col-lg-12 col-md-12 col-sm-12 mb-5">
+              <div class="col-lg-6 col-md-6 col-sm-12 mb-5">
                 <label class="required">Full Name</label>
                 <input
                   class="form-control custom"
@@ -38,7 +33,7 @@
                 >
               </div>
 
-              <div class="col-lg-12 col-md-12 col-sm-12 mb-5">
+              <div class="col-lg-6 col-md-6 col-sm-12 mb-5">
                 <label class="required">Email</label>
                 <input
                   class="form-control custom"
@@ -91,9 +86,8 @@
                   <div>
                     <input
                       name="howdidyoufindcanopas"
-                      class="reference-option-text"
                       type="text"
-                      placeholder="choose any one"
+                      placeholder="Choose anyone"
                       id="reference-option-text"
                       readonly
                       v-model="reference"
@@ -131,16 +125,17 @@
                 <textarea
                   class="form-control custom"
                   name="message"
-                  rows="5"
+                  rows="1"
                   v-model="message"
                 ></textarea>
               </div>
 
               <div class="col-lg-5 col-md-5 col-sm-12">
-                <label class="required"
-                  >Resume <br />
+                <label class="required">Resume </label>
+                <br />
+                <label>
                   <i>Supported formats:</i
-                  ><span class="black pdf-text">.PDF</span>
+                  ><span class="black pdf-text">PDF</span>
                   <i>only</i>
                 </label>
               </div>
@@ -177,6 +172,9 @@
                 <span>Apply Now</span>
               </button>
             </div>
+            <div class="required-field-msg">
+              All fields marked with * are required.
+            </div>
           </form>
         </div>
 
@@ -348,10 +346,10 @@ import ScreenHeader from "./partials/ScreenHeader.vue";
 import ScreenFooter from "./partials/ScreenFooter.vue";
 import ScreenFooter2 from "./partials/ScreenFooter2.vue";
 import ScreenMeta from "./partials/ScreenMeta.vue";
+import ScreenLoader from "./utils/ScreenLoader.vue";
 import axios from "axios";
 import config from "@/config.js";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import loader from "@/assets/images/theme/loader.svg";
 
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faCheckCircle } from "@fortawesome/free-solid-svg-icons";
@@ -409,7 +407,6 @@ export default {
         },
       ],
       checkCircle: faCheckCircle,
-      loader: loader,
       currentReferenceIndex: -1,
       fullName: "",
       email: "",
@@ -420,6 +417,7 @@ export default {
       message: "",
       file: "",
       isLoading: true,
+      isLoad: false,
       isShowingReferenceInput: false,
       showValidationError: false,
       showEmailValidationError: false,
@@ -441,6 +439,7 @@ export default {
     ScreenFooter2,
     ScreenMeta,
     FontAwesomeIcon,
+    ScreenLoader,
   },
   mounted() {
     this.$gtag.event("view_page_job_apply");
@@ -452,8 +451,7 @@ export default {
       axios
         .get(config.API_BASE + "/api/careers/" + this.$route.params.id)
         .then((res) => {
-          setTimeout(() => (this.isLoading = false), 1000);
-
+          this.isLoading = false;
           this.title = res.data.title;
           this.prepareSEOdata(res.data);
         })
@@ -525,9 +523,8 @@ export default {
     },
     submitApplication() {
       this.$gtag.event("job_submit");
-
       this.showReviewFormPopup = false;
-      this.isLoading = true;
+      this.isLoad = true;
       const formData = new FormData();
       formData.append("job_title", this.title);
       formData.append("name", this.fullName);
@@ -551,14 +548,14 @@ export default {
       axios
         .post(config.API_BASE + "/api/send-career-mail", formData)
         .then(() => {
-          this.isLoading = false;
+          this.isLoad = false;
           this.showSuccessMessagePopup = true;
           setTimeout(() => {
             this.$router.push("/");
           }, 2000);
         })
         .catch(() => {
-          this.isLoading = false;
+          this.isLoad = false;
           this.showErrorMessagePopup = true;
         });
     },
@@ -572,7 +569,7 @@ export default {
 }
 
 .form-container {
-  margin: 80px auto;
+  margin: 80px auto 150px;
 }
 
 .job-application {
@@ -628,6 +625,7 @@ input:-webkit-autofill:active {
 }
 
 .required-field-msg {
+  margin-top: 48px;
   color: #ff0000;
 }
 
@@ -662,14 +660,6 @@ input:-webkit-autofill:active {
   justify-content: center;
 }
 
-.loader-div {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  z-index: 100;
-}
-
 /* for dropdown list */
 
 .reference-option-list {
@@ -710,7 +700,6 @@ input:-webkit-autofill:active {
   height: 100%;
   cursor: pointer;
   background: #fff;
-  font-size: 1.2em;
   border: none;
   outline: none;
   padding: 12px 0;
@@ -795,18 +784,13 @@ input:-webkit-autofill:active {
     padding: 16px 80px;
   }
 
-  .header-text {
-    font-size: 2.5rem;
-    line-height: 2.729rem;
-  }
-
   .contact-form-text,
   .contact-form-text:hover {
     font-size: 1.125rem;
   }
 
   .job-application {
-    padding: 48px;
+    padding: 48px 48px 0;
   }
 }
 
diff --git a/vue-frontend/src/components/CareerDetails.vue b/vue-frontend/src/components/CareerDetails.vue
index 9cba9358e..76aae2693 100644
--- a/vue-frontend/src/components/CareerDetails.vue
+++ b/vue-frontend/src/components/CareerDetails.vue
@@ -13,9 +13,7 @@
       href="https://use.fontawesome.com/releases/v5.2.0/css/all.css"
     />
     <ScreenHeader />
-    <div v-if="isLoading" class="loader-div">
-      <img :src="loader" />
-    </div>
+    <ScreenLoader v-if="isLoading" />
     <div v-else-if="showErrorMessagePopup">
       <transition name="modal">
         <div class="modal-mask">
@@ -76,10 +74,10 @@ import ScreenHeader from "./partials/ScreenHeader.vue";
 import ScreenFooter from "./partials/ScreenFooter.vue";
 import ScreenFooter2 from "./partials/ScreenFooter2.vue";
 import ScreenMeta from "./partials/ScreenMeta.vue";
+import ScreenLoader from "./utils/ScreenLoader.vue";
 import axios from "axios";
 import config from "@/config.js";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import loader from "@/assets/images/theme/loader.svg";
 import router from "@/router";
 import { library } from "@fortawesome/fontawesome-svg-core";
 import moment from "moment";
@@ -97,7 +95,6 @@ export default {
       details: null,
       description: "",
       checkCircle: faCheckCircle,
-      loader: loader,
       isLoading: true,
       showErrorMessagePopup: false,
       showJobs: config.IS_SHOW_JOBS,
@@ -117,6 +114,7 @@ export default {
     ScreenFooter2,
     ScreenMeta,
     FontAwesomeIcon,
+    ScreenLoader,
   },
   mounted() {
     this.getCareerDetails();
@@ -129,8 +127,7 @@ export default {
       axios
         .get(config.API_BASE + "/api/careers/" + id)
         .then((res) => {
-          setTimeout(() => (this.isLoading = false), 1000);
-
+          this.isLoading = false;
           this.details = res.data;
           this.jobLink = "/jobs/apply/" + this.details.unique_id;
           this.description = this.details.description;
@@ -317,14 +314,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.loader-div {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  z-index: 100;
-}
-
 .container {
   padding: 48px 16px;
 }
@@ -431,7 +420,7 @@ export default {
 
 @include media-breakpoint-up(md) {
   .container {
-    padding: 96px;
+    padding: 96px 96px 150px;
   }
 
   .canopas-gradient-text {
diff --git a/vue-frontend/src/components/ContactScreen.vue b/vue-frontend/src/components/ContactScreen.vue
index cee2c9a72..b89d0a72c 100644
--- a/vue-frontend/src/components/ContactScreen.vue
+++ b/vue-frontend/src/components/ContactScreen.vue
@@ -2,9 +2,7 @@
   <div ref="contactScreen">
     <ScreenMeta v-bind:seoData="seoData" />
     <ScreenHeader />
-    <div v-if="isLoading" class="loader-div">
-      <img :src="loader" />
-    </div>
+    <ScreenLoader v-if="isLoading" v-bind:loader="true" />
     <div
       :style="{
         'pointer-events': isLoading ? 'none' : '',
@@ -24,10 +22,10 @@ import ScreenHeader from "./partials/ScreenHeader.vue";
 import ScreenFooter from "./partials/ScreenFooter.vue";
 import ScreenFooter2 from "./partials/ScreenFooter2.vue";
 import ScreenMeta from "./partials/ScreenMeta.vue";
+import ScreenLoader from "./utils/ScreenLoader.vue";
 import ContactLanding from "./contact/ContactLanding.vue";
 import ContactForm from "./contact/ContactForm.vue";
 import Config from "@/config.js";
-import loader from "@/assets/images/theme/loader.svg";
 
 export default {
   components: {
@@ -37,12 +35,12 @@ export default {
     ScreenFooter2,
     ScreenMeta,
     ContactForm,
+    ScreenLoader,
   },
   data() {
     return {
       showJobs: Config.IS_SHOW_JOBS,
       isLoading: false,
-      loader: loader,
       seoData: Config.SEO_META_DATA,
     };
   },
@@ -61,12 +59,4 @@ export default {
 };
 </script>
 
-<style scoped>
-.loader-div {
-  position: fixed;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  z-index: 100;
-}
-</style>
+<style scoped></style>
diff --git a/vue-frontend/src/components/contact/ContactForm.vue b/vue-frontend/src/components/contact/ContactForm.vue
index c04392ea5..c085e7c77 100644
--- a/vue-frontend/src/components/contact/ContactForm.vue
+++ b/vue-frontend/src/components/contact/ContactForm.vue
@@ -584,7 +584,7 @@ export default {
 
 <style lang="scss" scoped>
 .container {
-  margin: 48px auto;
+  margin: 48px auto 150px;
   padding: 0 5%;
 }
 
diff --git a/vue-frontend/src/components/contact/ContactLanding.vue b/vue-frontend/src/components/contact/ContactLanding.vue
index 4d46cd866..95be622db 100644
--- a/vue-frontend/src/components/contact/ContactLanding.vue
+++ b/vue-frontend/src/components/contact/ContactLanding.vue
@@ -1,22 +1,20 @@
 <template>
-  <div class="container-fluid">
-    <div class="container">
-      <div class="contact-title">Hey smarty,</div>
-      <div class="normal-text contact-description">
-        <p>
-          Thanks for reaching out to us. We’re happy to help you achieve your
-          goals and dreams.
-        </p>
-        <p>
-          As you’re landed here, I guess you’re looking for help with your idea
-          or existing product and you’re wondering how our team can help you.
-        </p>
-        <p>
-          We will guide you through the process so you don’t have to worry about
-          it. Before that, you gotta fill up the form so we can know more about
-          you before we approach you.
-        </p>
-      </div>
+  <div class="container">
+    <div class="contact-title">Hey smarty,</div>
+    <div class="normal-text contact-description">
+      <p>
+        Thanks for reaching out to us. We’re happy to help you achieve your
+        goals and dreams.
+      </p>
+      <p>
+        As you’re landed here, I guess you’re looking for help with your idea or
+        existing product and you’re wondering how our team can help you.
+      </p>
+      <p>
+        We will guide you through the process so you don’t have to worry about
+        it. Before that, you gotta fill up the form so we can know more about
+        you before we approach you.
+      </p>
     </div>
   </div>
 </template>
@@ -28,12 +26,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.container-fluid {
-  padding: 0 10%;
-}
-
 .container {
   margin: 48px auto;
+  padding: 0 5%;
 }
 
 .contact-title {
diff --git a/vue-frontend/src/components/jobs/FaqSection.vue b/vue-frontend/src/components/jobs/FaqSection.vue
index 2abe397e9..659101c1e 100644
--- a/vue-frontend/src/components/jobs/FaqSection.vue
+++ b/vue-frontend/src/components/jobs/FaqSection.vue
@@ -47,9 +47,10 @@
                       :key="faq.answer"
                     >
                       <div class="faq-icon"></div>
-                      <div class="normal-2-text faq-answer mt-3">
-                        {{ faq.answer }}
-                      </div>
+                      <div
+                        class="normal-2-text faq-answer mt-3"
+                        v-html="faq.answer"
+                      ></div>
                     </div>
                   </collapse-transition>
                   <div class="faq-divider" v-if="faq.id != faq.length"></div>
@@ -104,8 +105,11 @@ export default {
         {
           id: 1,
           question: "What are the top skills you look for in a candidate?",
-          answer:
-            "It mostly depends on the job you’re applying for. Usually, we look for a deep desire to learn, willingness to work hard, always looking for a challenge, not afraid to leave your comfort zone, and a desire to excel.",
+          answer: `It mostly depends on the job you are applying for. Usually, apart from the technical skills, we look for someone who, </br>
+                   - has a deep desire to learn and excel </br>
+                   - has a willingness to work hard</br>
+                   - is looking for a challenging environment</br>
+                   - is not afraid to leave the comfort zone</br>`,
         },
         {
           id: 2,
@@ -244,12 +248,12 @@ export default {
   box-shadow: 0px 1px 6px 1px rgba(0, 0, 0, 0.25);
   border-radius: 15px;
   padding: 15px;
+  cursor: pointer;
 }
 
 .faq-header {
   display: flex;
   flex-direction: row;
-  cursor: pointer;
 }
 
 .faq-icon {
diff --git a/vue-frontend/src/components/jobs/LifeAtCanopas.vue b/vue-frontend/src/components/jobs/LifeAtCanopas.vue
index ed69f0e48..ffb21e0d4 100644
--- a/vue-frontend/src/components/jobs/LifeAtCanopas.vue
+++ b/vue-frontend/src/components/jobs/LifeAtCanopas.vue
@@ -66,11 +66,11 @@ export default {
         },
         {
           id: 2,
-          image: require("@/assets/images/life/jobs_canopas_life_2.webp"),
+          image: require("@/assets/images/life/jobs_canopas_life_3.webp"),
         },
         {
           id: 3,
-          image: require("@/assets/images/life/jobs_canopas_life_3.webp"),
+          image: require("@/assets/images/life/jobs_canopas_life_6.webp"),
         },
         {
           id: 4,
@@ -78,11 +78,11 @@ export default {
         },
         {
           id: 5,
-          image: require("@/assets/images/life/jobs_canopas_life_5.webp"),
+          image: require("@/assets/images/life/jobs_canopas_life_2.webp"),
         },
         {
           id: 6,
-          image: require("@/assets/images/life/jobs_canopas_life_6.webp"),
+          image: require("@/assets/images/life/jobs_canopas_life_5.webp"),
         },
       ],
       pagination: {
diff --git a/vue-frontend/src/components/partials/ScreenFooter2.vue b/vue-frontend/src/components/partials/ScreenFooter2.vue
index fb9285987..e6717d5b6 100644
--- a/vue-frontend/src/components/partials/ScreenFooter2.vue
+++ b/vue-frontend/src/components/partials/ScreenFooter2.vue
@@ -2,7 +2,7 @@
   <div class="container-fluid">
     <img :src="backgroundFooterImage" class="background" />
     <div class="container text-center">
-      <div class="container-flex">
+      <div class="container-flex" v-if="isJobsUrl">
         <a :href="glassdoorLink">
           <img :src="glassdoorImage" class="glassdoor-img" />
         </a>
@@ -49,6 +49,7 @@ import {
 import backgroundFooterImage from "@/assets/images/footer/Canopas-footer-img.svg";
 import glassdoorImage from "@/assets/images/footer/glassdoor.webp";
 import Config from "@/config.js";
+import router from "@/router";
 
 export default {
   data() {
@@ -80,6 +81,7 @@ export default {
           icon: faLinkedinIn,
         },
       ],
+      isJobsUrl: router.currentRoute.value.fullPath.indexOf("/jobs") > -1,
     };
   },
   components: {
diff --git a/vue-frontend/src/components/partials/ScreenHeader.vue b/vue-frontend/src/components/partials/ScreenHeader.vue
index 6b3bd26ec..044055c09 100644
--- a/vue-frontend/src/components/partials/ScreenHeader.vue
+++ b/vue-frontend/src/components/partials/ScreenHeader.vue
@@ -105,7 +105,7 @@ export default {
 }
 
 .navbar {
-  padding: 10px 3%;
+  padding: 10px 2%;
   width: 100%;
   background: #fff;
   position: absolute;
@@ -168,15 +168,11 @@ export default {
   }
 
   .navbar {
-    padding: 20px 10%;
+    padding: 20px 0;
   }
 }
 
 @include media-breakpoint-up(lg) {
-  .navbar {
-    padding: 20px 14%;
-  }
-
   .normal-text {
     font-size: 1.5rem;
     line-height: 1.8rem;
diff --git a/vue-frontend/src/components/utils/ScreenLoader.vue b/vue-frontend/src/components/utils/ScreenLoader.vue
new file mode 100644
index 000000000..9d57aa5ee
--- /dev/null
+++ b/vue-frontend/src/components/utils/ScreenLoader.vue
@@ -0,0 +1,32 @@
+<template>
+  <div class="loader-div" v-if="isLoad">
+    <img :src="loaderImage" />
+  </div>
+</template>
+
+<script>
+import loaderImage from "@/assets/images/theme/loader.svg";
+
+export default {
+  props: ["loader"],
+  data() {
+    return {
+      isLoad: this.loader,
+      loaderImage: loaderImage,
+    };
+  },
+  mounted() {
+    setTimeout(() => (this.isLoad = true), 700);
+  },
+};
+</script>
+
+<style scoped>
+.loader-div {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 100;
+}
+</style>