diff --git a/.env.example b/.env.example
index 1ffcfc3a..8c97ae55 100644
--- a/.env.example
+++ b/.env.example
@@ -24,3 +24,7 @@ VUE_APP_ORDERS_MAARG_JOB_NAMES={"GEN_BRKD_ORDITM_FEED":"GEN_BRKR_ORD_ITM_FD","GE
 VUE_APP_MISC_MAARG_JOB_NAMES={"BLK_SYS_MESS_SHPFY": "SND_BLK_SYS_M_SHPFY","BLK_RSLT_SHPFY":"POL_BLK_RSLT_SHPFY"}
 VUE_APP_PREORD_MAARG_JOB_NAMES={"PO_RCPT_FEED": "GEN_PO_RCPT_FD"}
 VUE_APP_CRON_EXPRESSIONS={"Every 5 minutes":"0 */5 * ? * *","Every 15 minutes":"0 */15 * ? * *","Every 30 minutes":"0 */30 * ? * *","Hourly":"0 0 * ? * *","Every six hours":"0 0 */6 ? * *","Every day at midnight":"0 0 0 * * ?"}
+VUE_APP_GITBOOK_API_KEY=""
+VUE_APP_SPACE_ID=""
+VUE_APP_GITBOOK_BASE_URL="https://api.gitbook.com/v1"
+VUE_APP_GITBOOK_JOBS_DOCS_URL="https://docs.hotwax.co/documents/retail-operations/workflow/job-workflows"
diff --git a/package-lock.json b/package-lock.json
index 23d4d873..96e8f838 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,7 +15,7 @@
         "@hotwax/app-version-info": "^1.0.0",
         "@hotwax/apps-theme": "^1.2.6",
         "@hotwax/dxp-components": "1.15.4",
-        "@hotwax/oms-api": "1.14.0",
+        "@hotwax/oms-api": "1.15.0",
         "@ionic/core": "^7.6.0",
         "@ionic/vue": "^7.6.0",
         "@ionic/vue-router": "^7.6.0",
@@ -2682,8 +2682,9 @@
       }
     },
     "node_modules/@hotwax/oms-api": {
-      "version": "1.14.0",
-      "license": "Apache-2.0",
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/@hotwax/oms-api/-/oms-api-1.15.0.tgz",
+      "integrity": "sha512-6WXJ5z5JaAxgKith6dblLchP471xUYcFaeggN5onWZBkgGx5NqkLT0rgLWTW/UcVQMokxKtzSc+mcJ4eI1mGww==",
       "dependencies": {
         "@types/node-json-transform": "^1.0.0",
         "axios": "^0.21.1",
diff --git a/package.json b/package.json
index 169e7958..fffbdf29 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,7 @@
     "@hotwax/app-version-info": "^1.0.0",
     "@hotwax/apps-theme": "^1.2.6",
     "@hotwax/dxp-components": "1.15.4",
-    "@hotwax/oms-api": "1.14.0",
+    "@hotwax/oms-api": "1.15.0",
     "@ionic/core": "^7.6.0",
     "@ionic/vue": "^7.6.0",
     "@ionic/vue-router": "^7.6.0",
diff --git a/src/adapter/index.ts b/src/adapter/index.ts
index a31b0067..60edcc82 100644
--- a/src/adapter/index.ts
+++ b/src/adapter/index.ts
@@ -1,7 +1,8 @@
-import { api, client, getConfig, initialise, logout, resetConfig, updateInstanceUrl, updateToken, setUserTimeZone, getAvailableTimeZones} from '@hotwax/oms-api'
+import { api, askQuery, client, getConfig, initialise, logout, resetConfig, searchQuery, updateInstanceUrl, updateToken, setUserTimeZone, getAvailableTimeZones} from '@hotwax/oms-api'
 
 export {
   api,
+  askQuery,
   client,
   getConfig,
   initialise,
@@ -9,6 +10,7 @@ export {
   resetConfig,
   updateInstanceUrl,
   updateToken,
+  searchQuery,
   setUserTimeZone,
   getAvailableTimeZones
 }
\ No newline at end of file
diff --git a/src/components/JobConfiguration.vue b/src/components/JobConfiguration.vue
index a786e546..177e57f1 100644
--- a/src/components/JobConfiguration.vue
+++ b/src/components/JobConfiguration.vue
@@ -14,7 +14,9 @@
 
       <ion-item v-if="currentJob.description" lines="none">
         <ion-label class="ion-text-wrap">
-          <p>{{ currentJob.description }}</p>
+          <p>{{ currentJob.description }}
+            <ion-text class="learn-more-text" color="primary" @click="openLearnMoreModal()">{{ translate("Learn more") }}</ion-text>
+          </p>
         </ion-label>
       </ion-item>
 
@@ -170,6 +172,7 @@ import {
   IonRow,
   IonSelect,
   IonSelectOption,
+  IonText,
   alertController,
   modalController,
 } from "@ionic/vue";
@@ -200,6 +203,7 @@ import emitter from '@/event-bus';
 import { Actions, hasPermission } from '@/authorization'
 import CustomFrequencyModal from '@/components/CustomFrequencyModal.vue';
 import JobParameterModal from '@/components/JobParameterModal.vue'
+import LearnMoreModal from "@/components/LearnMoreModal.vue";
 
 export default defineComponent({
   name: "JobConfiguration",
@@ -218,7 +222,8 @@ export default defineComponent({
     IonRow,
     IonSelect,
     IonSelectOption,
-    IonCheckbox
+    IonCheckbox,
+    IonText
   },
   data() {
     return {
@@ -279,6 +284,13 @@ export default defineComponent({
       const jobId = this.currentJob.jobId
       this.router.push({ name: 'DataManagerLogDetails', params: { jobId } })
     },
+    async openLearnMoreModal() {
+      const learnMoreModal = await modalController.create({
+        component: LearnMoreModal,
+        componentProps: {currentJob: this.currentJob}
+      })
+      return learnMoreModal.present()
+    },
     getDateTime(time: any) {
       return DateTime.fromMillis(time).toISO()
     },
@@ -604,6 +616,10 @@ export default defineComponent({
 </script>
 
 <style scoped>
+.learn-more-text {
+  font-size: 14px;
+  cursor: pointer;
+}
 section {
   margin-top: var(--spacer-sm);
   margin-bottom: var(--spacer-sm);
diff --git a/src/components/LearnMoreModal.vue b/src/components/LearnMoreModal.vue
new file mode 100644
index 00000000..877389e5
--- /dev/null
+++ b/src/components/LearnMoreModal.vue
@@ -0,0 +1,171 @@
+<template>
+  <ion-header>
+    <ion-toolbar>
+      <ion-buttons slot="start">
+        <ion-button @click="closeModal()">
+          <ion-icon slot="icon-only" :icon="closeOutline" />
+        </ion-button>
+      </ion-buttons>
+      <ion-title>{{ translate("Learn more") }}</ion-title>
+      <ion-buttons slot="end">
+        <ion-button fill="clear" color="medium" @click="redirectToJobsDoc()">
+          <ion-icon slot="icon-only" :icon="openOutline" />
+        </ion-button>
+      </ion-buttons>
+    </ion-toolbar>
+  </ion-header>
+
+  <ion-content>
+    <div class="empty-state" v-if="isGeneratingAnswer">
+      <ion-item lines="none">
+        <ion-spinner name="crescent" slot="start" />
+        {{ translate("Generating answer...") }}
+      </ion-item>
+    </div>
+
+    <div class="empty-state" v-else-if="!Object.keys(askResponse).length">
+      <ion-item lines="none">
+        <p>{{ translate("The job details is not generating, please try again later.") }}</p>
+      </ion-item>
+    </div>
+    
+    <div v-else>
+      <ion-item lines="full" class="ion-margin-top">
+        <ion-label>
+          {{ queryString }}
+          <p>{{ currentJob?.systemJobEnumId }}</p>  
+        </ion-label>
+      </ion-item>
+
+      <ion-list>
+        <ion-item lines="none">
+          <ion-label>{{ translate("Sources") }}</ion-label>
+        </ion-item>
+        <ion-row class="ion-padding" v-for="section in jobSection" :key="section.id">
+          <ion-chip outline @click="redirectToDoc(section)">
+            <ion-label>{{ section.title }}</ion-label>
+            <ion-icon :icon="openOutline" />
+          </ion-chip>
+        </ion-row>
+      </ion-list>
+  
+      <ion-item>
+        <ion-label>
+          <p class="overline">{{ translate("Summary") }}</p>
+          {{ askResponse?.text }}
+        </ion-label>
+      </ion-item>
+    </div>
+  </ion-content>
+</template>
+
+<script lang="ts">
+import { IonButton, IonButtons, IonChip, IonContent, IonHeader, IonIcon, IonItem, IonLabel, IonList, IonRow, IonSpinner, IonTitle, IonToolbar, modalController } from "@ionic/vue";
+import { closeOutline, openOutline } from 'ionicons/icons'
+import { translate } from '@hotwax/dxp-components';
+import { defineComponent } from "vue";
+import { hasError } from '@/utils'
+import { askQuery, searchQuery } from "@/adapter";
+import logger from "@/logger";
+
+export default defineComponent({
+  name: "LearnMoreModal",
+  components: {
+    IonButton,
+    IonButtons,
+    IonChip,
+    IonContent,
+    IonHeader,
+    IonIcon,
+    IonItem,
+    IonLabel,
+    IonList,
+    IonRow,
+    IonSpinner,
+    IonTitle,
+    IonToolbar
+  },
+  data() {
+    return {
+      queryString: '',
+      askResponse: {} as any,
+      jobSection: {} as any,
+      isGeneratingAnswer: true
+    }
+  },
+  props: ["currentJob"],
+  mounted() {
+    this.askQuery();
+  },
+  methods: {
+    async searchQuery(pageIds: any) {
+      let items = [] as any;
+      this.jobSection = [];
+      try {
+        const resp = await searchQuery({
+          queryString: this.currentJob?.enumName,
+          spaceId: process.env.VUE_APP_SPACE_ID,
+          baseURL: process.env.VUE_APP_GITBOOK_BASE_URL,
+          token: process.env.VUE_APP_GITBOOK_API_KEY
+        });
+        if(!hasError(resp)) {
+          items = resp.data.items;
+          pageIds.forEach((pageId: any) => {
+            const filteredPage = items.find((item: any) => item.id === pageId);
+            if (filteredPage) {
+              this.jobSection.push(...filteredPage.sections);
+            }
+          });
+          this.isGeneratingAnswer = false;
+        } else {
+          throw resp.data;
+        }
+      } catch(error: any) {
+        logger.error(error);
+        this.isGeneratingAnswer = false;
+      }
+    },
+    async askQuery() {
+      this.queryString = `What does ${this.currentJob?.enumName} job do?`;
+      try {
+        const resp = await askQuery({ 
+          queryString: this.queryString,
+          spaceId: process.env.VUE_APP_SPACE_ID,
+          baseURL: process.env.VUE_APP_GITBOOK_BASE_URL,
+          token: process.env.VUE_APP_GITBOOK_API_KEY
+        });
+        if(!hasError(resp)) {
+          this.askResponse = resp.data.answer;
+          if(this.askResponse) {
+            const pageIds = this.askResponse?.sources.map((source: any) => source.page);
+            this.searchQuery(pageIds);
+          } else {
+            this.isGeneratingAnswer = false;
+          }
+        } else {
+          throw resp.data;
+        }
+      } catch(error: any) {
+        logger.error(error);
+        this.isGeneratingAnswer = false;
+      }
+    },
+    async redirectToDoc(section: any) {
+      window.open(`https://docs.hotwax.co/documents/retail-operations/${section.path}`, "_blank", "noopener, noreferrer")
+    },
+    async redirectToJobsDoc() {
+      window.open(`${process.env.VUE_APP_GITBOOK_JOBS_DOCS_URL}`, "_blank", "noopener, noreferrer")
+    },
+    async closeModal() {
+      modalController.dismiss({ dismissed: true });
+    }
+  },
+  setup() {
+    return {
+      closeOutline, 
+      openOutline,
+      translate
+    };
+  }
+})
+</script>
diff --git a/src/components/Menu.vue b/src/components/Menu.vue
index f5388823..b31672c2 100644
--- a/src/components/Menu.vue
+++ b/src/components/Menu.vue
@@ -83,12 +83,12 @@ export default defineComponent({
     async setEComStore(event: CustomEvent) {
       if(this.userProfile && this.eComStore?.productStoreId !== event.detail.value) {
         await this.store.dispatch('user/setEcomStore', { 'productStoreId': event.detail.value })
-        emitter.emit("productStoreOrConfigChanged")
+        emitter.emit("productStoreOrConfigChanged", true)
       }
     },
     async setShopifyConfig(event: CustomEvent){
       await this.store.dispatch('user/setCurrentShopifyConfig', { 'shopifyConfigId': event.detail.value });
-      emitter.emit("productStoreOrConfigChanged")
+      emitter.emit("productStoreOrConfigChanged", true)
     }
   },
   setup() {
diff --git a/src/locales/en.json b/src/locales/en.json
index e68b888a..1896b76e 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -93,6 +93,7 @@
   "Failed records": "Failed records",
   "Failed job reason": "Failed job reason",
   "Failed to schedule service(s)": "Failed to schedule {count} service(s)",
+  "Fetching jobs": "Fetching jobs",
   "Fetching TimeZones": "Fetching TimeZones",
   "File upload status": "File upload status",
   "Filters": "Filters",
@@ -104,6 +105,7 @@
   "Fulfilled": "Fulfilled",
   "Fulfillment": "Fulfillment",
   "Fulfillment status": "Fulfillment status",
+  "Generating answer...": "Generating answer...",
   "Get Paid Transactions": "Get Paid Transactions",
   "Go to OMS": "Go to OMS",
   "Go to Launchpad": "Go to Launchpad",
@@ -135,6 +137,7 @@
   "Landed inventory cost": "Landed inventory cost",
   "Last run": "Last run",
   "Last Shopify Order ID": "Last Shopify Order ID",
+  "Learn more": "Learn more",
   "Loading": "Loading",
   "Login": "Login",
   "Log Id": "Log Id",
@@ -269,6 +272,7 @@
   "Skip once": "Skip once",
   "Skipping will run this job at the next occurrence based on the temporal expression.": "Skipping will run this job at the next occurrence based on the temporal expression.",
   "Some of the app functionality will not work due to missing configuration.": "Some of the app functionality will not work due to missing configuration.",
+  "Sources": "Sources",
   "Some jobs have slow frequency type, hence, feasible frequency will be set automatically": "Some jobs have slow frequency type, hence, feasible frequency will be set automatically",
   "Something went wrong": "Something went wrong",
   "Something went wrong while getting complete user permissions.": "Something went wrong while getting complete user permissions.",
@@ -282,6 +286,7 @@
   "store name": "store name",
   "Stores": "Stores",
   "stores selected": "stores selected",
+  "Summary": "Summary",
   "Sync": "Sync",
   "Sync pre-selling related information to Shopify as tags and meta fields.": "Sync pre-selling related information to Shopify as tags and meta fields.",
   "Sync products": "Sync products",
@@ -302,6 +307,7 @@
   "This job may take several minutes to run. Wait till the job has moved to the pipeline history before checking results.": "This job may take several minutes to run.{ space } Wait till the job has moved to the pipeline history before checking results.",
   "This job schedule cannot be skipped": "This job schedule cannot be skipped",
   "This job does not have any custom parameters.": "This job does not have any custom parameters.",
+  "The job details is not generating, please try again later.": "The job details is not generating, please try again later.",
   "Time zone updated successfully": "Time zone updated successfully",
   "Timezone": "Timezone",
   "Tomorrow": "Tomorrow",
diff --git a/src/store/modules/user/actions.ts b/src/store/modules/user/actions.ts
index 8b5c7913..0665b09e 100644
--- a/src/store/modules/user/actions.ts
+++ b/src/store/modules/user/actions.ts
@@ -203,7 +203,7 @@ const actions: ActionTree<UserState, RootState> = {
     commit(types.USER_PWA_STATE_UPDATED, payload);
   },
 
-  async getShopifyConfig({ commit }, productStoreId) {
+  async getShopifyConfig({ commit, state }, productStoreId) {
     if (!productStoreId) {
       commit(types.USER_SHOPIFY_CONFIGS_UPDATED, []);
       commit(types.USER_CURRENT_SHOPIFY_CONFIG_UPDATED, {});
@@ -211,7 +211,7 @@ const actions: ActionTree<UserState, RootState> = {
     }
 
     try {      
-      const shopifyConfigs =  await UserService.getShopifyConfig(productStoreId);
+      const shopifyConfigs =  await UserService.getShopifyConfig(productStoreId, state?.token);
         // TODO store and get preferred config
       let currentShopifyConfig =  {};
       shopifyConfigs.length > 0 && (currentShopifyConfig = shopifyConfigs[0])
diff --git a/src/views/Brokering.vue b/src/views/Brokering.vue
index 828fdb3d..2b92075d 100644
--- a/src/views/Brokering.vue
+++ b/src/views/Brokering.vue
@@ -58,7 +58,7 @@
           <MoreJobs v-if="getMoreJobs({...jobEnums, ...initialLoadJobEnums}, enumTypeId).length" :jobs="getMoreJobs({...jobEnums, ...initialLoadJobEnums}, enumTypeId)" />
         </section>
 
-        <aside class="desktop-only" v-if="isDesktop" v-show="currentJob">
+        <aside class="desktop-only" v-if="isDesktop" v-show="currentJob && Object.keys(currentJob).length">
           <JobConfiguration :status="currentJobStatus" :type="freqType" :key="currentJob" :isBrokerJob="orderBatchJobs.includes(currentJob) ? true : false"/>
         </aside>
       </main>
@@ -208,7 +208,14 @@ export default defineComponent({
         this.getTemporalExpr(this.getJobStatus(this.jobEnums[enumId]))?.description :
         translate('Disabled')
     },
-    async fetchJobs() {
+    async fetchJobs(isCurrentJobUpdateRequired = false) {
+      if(isCurrentJobUpdateRequired) {
+        this.currentJob = "";
+        await this.store.dispatch('job/updateCurrentJob', { });
+        this.currentJobStatus = "";
+        this.freqType = "";
+        this.isJobDetailAnimationCompleted = false;
+      }
       await this.store.dispatch("job/fetchJobs", {
         "inputFields": {
           // If we fetch broker sys job by not passing systemJobEnumId filter then this api
diff --git a/src/views/DataManagerLogDetails.vue b/src/views/DataManagerLogDetails.vue
index 1cc43044..7810aeed 100644
--- a/src/views/DataManagerLogDetails.vue
+++ b/src/views/DataManagerLogDetails.vue
@@ -92,10 +92,12 @@
             <p>{{ translate('Finished') }}</p>
           </ion-label>
 
-          <ion-badge v-if="log.statusId" :color="log.statusId === 'SERVICE_FAILED' ? 'danger' : 'success'">{{ translate(getStatusDesc(log.statusId)) }}</ion-badge>
+          <ion-badge v-if="log.statusId" :color="getLogStatusColor(log.statusId)">{{ translate(getStatusDesc(log.statusId)) }}</ion-badge>
           
-          <div class="ion-text-center" lines="none" v-if="log.errorRecordContentId" button @click="downloadErrorRecordFile(log)">
-            <ion-icon slot="start" :icon="cloudDownloadOutline" />
+          <div class="ion-text-center" lines="none" v-if="log.errorRecordContentId">
+            <ion-button fill="clear" color="medium" @click="downloadErrorRecordFile(log)">
+              <ion-icon slot="icon-only" :icon="cloudDownloadOutline" />
+            </ion-button>
             <ion-label>
               <p>{{ translate('Failed records') }}</p>
             </ion-label>
@@ -257,6 +259,17 @@ export default defineComponent ({
       } catch (error) {
         logger.error(error);
       }
+    },
+    getLogStatusColor(statusId) {
+      if (statusId === 'SERVICE_FINISHED') {
+        return 'success';
+      } else if (statusId === 'SERVICE_RUNNING') {
+        return 'dark';
+      } else if (statusId === 'SERVICE_FAILED') {
+        return 'danger';
+      } else {
+        return 'medium';
+      }
     }
   },
   setup() {
diff --git a/src/views/Fulfillment.vue b/src/views/Fulfillment.vue
index 6c4475f3..80705b75 100644
--- a/src/views/Fulfillment.vue
+++ b/src/views/Fulfillment.vue
@@ -16,7 +16,8 @@
             </ion-card-header>
             <ion-item button @click="viewJobConfiguration({ id: 'SHIP_PKD_ODRS', status: getJobStatus(jobEnums['SHIP_PKD_ODRS']) })" detail>
               <ion-label class="ion-text-wrap">{{ translate("Ship packed orders") }}</ion-label>
-              <ion-label slot="end">{{ getTemporalExpression('SHIP_PKD_ODRS') }}</ion-label>
+              <ion-label v-if="!isLoading" slot="end">{{ getTemporalExpression('SHIP_PKD_ODRS') }}</ion-label>
+              <ion-skeleton-text v-else style="width: 30%;" animated />
             </ion-item>
             <ion-item lines="none">
               <ion-label class="ion-text-wrap">
@@ -31,7 +32,8 @@
             </ion-card-header>
             <ion-item button @click="viewJobConfiguration({ id: 'ODR_FLMNT_HST', status: getJobStatus(jobEnums['ODR_FLMNT_HST']) })" detail>
               <ion-label class="ion-text-wrap">{{ translate("Order fulfillment") }}</ion-label>
-              <ion-label slot="end">{{ getTemporalExpression('ODR_FLMNT_HST') }}</ion-label>
+              <ion-label v-if="!isLoading" slot="end">{{ getTemporalExpression('ODR_FLMNT_HST') }}</ion-label>
+              <ion-skeleton-text v-else style="width: 30%;" animated />
             </ion-item>
             <ion-item lines="none">
               <ion-label class="ion-text-wrap">
@@ -46,15 +48,18 @@
             </ion-card-header>
             <ion-item button @click="viewJobConfiguration({ id: 'OPN_BOPIS_ORD_NT', status: getJobStatus(jobEnums['OPN_BOPIS_ORD_NT']) })" detail>
               <ion-label class="ion-text-wrap">{{ translate("Open BOPIS order notification") }}</ion-label>
-              <ion-label slot="end">{{ getTemporalExpression('OPN_BOPIS_ORD_NT') }}</ion-label>
+              <ion-label v-if="!isLoading" slot="end">{{ getTemporalExpression('OPN_BOPIS_ORD_NT') }}</ion-label>
+              <ion-skeleton-text v-else style="width: 30%;" animated />
             </ion-item>
             <ion-item button @click="viewJobConfiguration({ id: 'READYPICK_BOPIS_ORD_NT', status: getJobStatus(jobEnums['READYPICK_BOPIS_ORD_NT']) })" detail>
               <ion-label class="ion-text-wrap">{{ translate("Ready to pick BOPIS order notification") }}</ion-label>
-              <ion-label slot="end">{{ getTemporalExpression('READYPICK_BOPIS_ORD_NT') }}</ion-label>
+              <ion-label v-if="!isLoading" slot="end">{{ getTemporalExpression('READYPICK_BOPIS_ORD_NT') }}</ion-label>
+              <ion-skeleton-text v-else style="width: 30%;" animated />
             </ion-item>
             <ion-item button @click="viewJobConfiguration({ id: 'OPEN_SHIPPING_ORD_NT', status: getJobStatus(jobEnums['OPEN_SHIPPING_ORD_NT']) })" detail>
               <ion-label class="ion-text-wrap">{{ translate("Open shipping order notification") }}</ion-label>
-              <ion-label slot="end">{{ getTemporalExpression('OPEN_SHIPPING_ORD_NT') }}</ion-label>
+              <ion-label v-if="!isLoading" slot="end">{{ getTemporalExpression('OPEN_SHIPPING_ORD_NT') }}</ion-label>
+              <ion-skeleton-text v-else style="width: 30%;" animated />
             </ion-item>
             <ion-item lines="none">
               <ion-label class="ion-text-wrap">
@@ -136,6 +141,7 @@ import {
   IonLabel,
   IonMenuButton,
   IonPage,
+  IonSkeletonText,
   IonTitle,
   IonToggle,
   IonToolbar,
@@ -169,6 +175,7 @@ export default defineComponent({
     IonLabel,
     IonMenuButton,
     IonPage,
+    IonSkeletonText,
     IonTitle,
     IonToggle,
     IonToolbar,
@@ -189,6 +196,7 @@ export default defineComponent({
       enumTypeId: 'FULFILLMENT_SYS_JOB',
       initialLoadJobEnums: JSON.parse(process.env?.VUE_APP_INITIAL_JOB_ENUMS as string) as any,
       maargJobEnums: JSON.parse(process.env.VUE_APP_FULFILLMENT_MAARG_JOB_NAMES as string) as any,
+      isLoading: false
     }
   },
   computed: {
@@ -263,7 +271,15 @@ export default defineComponent({
         this.store.dispatch('job/updateJob', job)
       }
     },
-    async fetchJobs(){
+    async fetchJobs(isCurrentJobUpdateRequired = false){
+      this.isLoading = true;
+      if(isCurrentJobUpdateRequired) {
+        this.currentJob = "";
+        await this.store.dispatch('job/updateCurrentJob', { });
+        this.currentJobStatus = "";
+        this.freqType = "";
+        this.isJobDetailAnimationCompleted = false;
+      }
       await this.store.dispatch("job/fetchJobs", {
         "inputFields": {
           "enumTypeId": "FULFILLMENT_SYS_JOB"
@@ -273,6 +289,7 @@ export default defineComponent({
       if (this.currentEComStore.productStoreId) {
         this.getAutoCancelDays();
       }
+      this.isLoading = false
     },
     async getAutoCancelDays(){
       const payload = {
diff --git a/src/views/InitialLoad.vue b/src/views/InitialLoad.vue
index e1ec23dc..54bd72cc 100644
--- a/src/views/InitialLoad.vue
+++ b/src/views/InitialLoad.vue
@@ -207,8 +207,15 @@ export default defineComponent({
         this.isJobDetailAnimationCompleted = true;
       }
     },
-    fetchJobs(){
-      this.store.dispatch("job/fetchJobs", {
+    async fetchJobs(isCurrentJobUpdateRequired = false){
+      if(isCurrentJobUpdateRequired) {
+        this.currentSelectedJobModal = "";
+        await this.store.dispatch('job/updateCurrentJob', { });
+        this.job = {};
+        this.lastShopifyOrderId = "";
+        this.isJobDetailAnimationCompleted = false;
+      }
+      await this.store.dispatch("job/fetchJobs", {
         "inputFields":{
           "systemJobEnumId": Object.values(this.jobEnums),
           "systemJobEnumId_op": "in"
diff --git a/src/views/Inventory.vue b/src/views/Inventory.vue
index 5f98375e..ae972391 100644
--- a/src/views/Inventory.vue
+++ b/src/views/Inventory.vue
@@ -16,7 +16,8 @@
             </ion-card-header>
             <ion-item button @click="viewJobConfiguration({ id: 'HARD_SYNC', status: getJobStatus(jobEnums['HARD_SYNC'])})" detail>
               <ion-label class="ion-text-wrap">{{ translate("Hard sync") }}</ion-label>
-              <ion-label slot="end">{{ getTemporalExpression('HARD_SYNC') }}</ion-label>
+              <ion-label v-if="!isLoading" slot="end">{{ getTemporalExpression('HARD_SYNC') }}</ion-label>
+              <ion-skeleton-text v-else style="width: 30%;" animated />
             </ion-item>
             <ion-item lines="none">
               <ion-label class="ion-text-wrap">
@@ -76,6 +77,7 @@ import {
   IonLabel,
   IonMenuButton,
   IonPage,
+  IonSkeletonText,
   IonTitle,
   IonToggle,
   IonToolbar,
@@ -104,6 +106,7 @@ export default defineComponent({
     IonLabel,
     IonMenuButton,
     IonPage,
+    IonSkeletonText,
     IonTitle,
     IonToggle,
     IonToolbar,
@@ -123,6 +126,7 @@ export default defineComponent({
       enumTypeId: 'INVENTORY_SYS_JOB',
       webhookEnums: JSON.parse(process.env?.VUE_APP_WEBHOOK_ENUMS as string) as any,
       maargJobEnums: JSON.parse(process.env.VUE_APP_INVENTORY_MAARG_JOB_NAMES as string) as any,
+      isLoading: false
     }
   },
   computed: {
@@ -172,7 +176,7 @@ export default defineComponent({
       }
 
       if(!this.isDesktop && this.currentJob) {
-        this.router.push({ name: 'JobDetails', params: { jobId: this.currentJob.jobId, category: "inventory" } });
+        this.router.push({ name: 'JsobDetails', params: { jobId: this.currentJob.jobId, category: "inventory" } });
         return;
       }
 
@@ -191,16 +195,25 @@ export default defineComponent({
         translate('Disabled')
     },
     async fetchJobs(){
-      this.store.dispatch("job/fetchJobs", {
+      this.isLoading = true
+      await this.store.dispatch("job/fetchJobs", {
         "inputFields":{
           "enumTypeId": "INVENTORY_SYS_JOB"
         }
       });
       await this.store.dispatch("maargJob/fetchMaargJobs", Object.values(this.maargJobEnums));
+      this.isLoading = false
     },
-    fetchData() {
+    async fetchData(isCurrentJobUpdateRequired = false) {
+      if(isCurrentJobUpdateRequired) {
+        this.currentJob = "";
+        await this.store.dispatch('job/updateCurrentJob', { });
+        this.currentJobStatus = "";
+        this.freqType = "";
+        this.isJobDetailAnimationCompleted = false;
+      }
       this.store.dispatch('webhook/fetchWebhooks')
-      this.fetchJobs()
+      await this.fetchJobs()
     },
     isMaargJobFound(id: string) {
       const job = this.getMaargJob(this.maargJobEnums[id])
diff --git a/src/views/Miscellaneous.vue b/src/views/Miscellaneous.vue
index 79283cd3..20fe42fd 100644
--- a/src/views/Miscellaneous.vue
+++ b/src/views/Miscellaneous.vue
@@ -80,7 +80,6 @@ import {
   IonMenuButton,
   IonNote,
   IonPage,
-  IonSpinner,
   IonTitle,
   IonToolbar,
   isPlatform,
@@ -112,7 +111,6 @@ export default defineComponent({
     IonMenuButton,
     IonNote,
     IonPage,
-    IonSpinner,
     IonTitle,
     IonToolbar,
     JobConfiguration,
@@ -121,10 +119,10 @@ export default defineComponent({
   mounted() {
     emitter.on('jobUpdated', this.getMiscellaneousJobs);
     this.getMiscellaneousJobs();
-    emitter.on("productStoreOrConfigChanged", this.getMiscellaneousJobs);
+    emitter.on("productStoreOrConfigChanged", this.updateProductStoreConfig);
   },
   unmounted() {
-    emitter.off("productStoreOrConfigChanged", this.getMiscellaneousJobs);
+    emitter.off("productStoreOrConfigChanged", this.updateProductStoreConfig);
     emitter.off('jobUpdated', this.getMiscellaneousJobs);
   },
   data() {
@@ -182,6 +180,15 @@ export default defineComponent({
       await this.store.dispatch('job/fetchMiscellaneousJobs', {eComStoreId: this.getCurrentEComStore.productStoreId, viewSize, viewIndex});
       await this.store.dispatch("maargJob/fetchMaargJobs", Object.values(this.maargJobEnums));
     },
+    async updateProductStoreConfig(isCurrentJobUpdateRequired = false) {
+      if(isCurrentJobUpdateRequired) {
+        this.currentJob = "";
+        await this.store.dispatch('job/updateCurrentJob', { });
+        this.currentJobStatus = "";
+        this.isJobDetailAnimationCompleted = false;
+      }
+      this.getMiscellaneousJobs();
+    },
     async loadMoreMiscellaneousJobs (event: any) {
       this.getMiscellaneousJobs(
         undefined,
diff --git a/src/views/Orders.vue b/src/views/Orders.vue
index 02b573f7..f4c7a21d 100644
--- a/src/views/Orders.vue
+++ b/src/views/Orders.vue
@@ -16,27 +16,33 @@
             </ion-card-header>
             <ion-item @click="viewJobConfiguration({ id: 'IMP_NEW_ORDERS', status: getJobStatus(jobEnums['IMP_NEW_ORDERS'])})" detail button>
               <ion-label class="ion-text-wrap">{{ translate("New orders") }}</ion-label>
-              <ion-label slot="end">{{ getTemporalExpression('IMP_NEW_ORDERS') }}</ion-label>
+              <ion-label v-if="!isLoading" slot="end">{{ getTemporalExpression('IMP_NEW_ORDERS') }}</ion-label>
+              <ion-skeleton-text v-else style="width: 30%;" animated />
             </ion-item>
             <ion-item @click="viewJobConfiguration({ id: 'APR_ORD', status: getJobStatus(jobEnums['APR_ORD'])})" detail button>
               <ion-label class="ion-text-wrap">{{ translate("Approve orders") }}</ion-label>
-              <ion-label slot="end">{{ getTemporalExpression('APR_ORD') }}</ion-label>
+              <ion-label v-if="!isLoading" slot="end">{{ getTemporalExpression('APR_ORD') }}</ion-label>
+              <ion-skeleton-text v-else style="width: 30%;" animated />
             </ion-item>
             <ion-item @click="viewJobConfiguration({ id: 'UPDT_ORDS', status: getJobStatus(jobEnums['UPDT_ORDS'])})" detail button>
               <ion-label class="ion-text-wrap">{{ translate("Update orders") }}</ion-label>
-              <ion-label slot="end">{{ getTemporalExpression('UPDT_ORDS') }}</ion-label>
+              <ion-label v-if="!isLoading" slot="end">{{ getTemporalExpression('UPDT_ORDS') }}</ion-label>
+              <ion-skeleton-text v-else style="width: 30%;" animated />
             </ion-item>
             <ion-item @click="viewJobConfiguration({ id: 'IMP_CANCELLED_ORDERS', status: getJobStatus(jobEnums['IMP_CANCELLED_ORDERS'])})" detail button>
               <ion-label class="ion-text-wrap">{{ translate("Cancelled orders") }}</ion-label>
-              <ion-label slot="end">{{ getTemporalExpression('IMP_CANCELLED_ORDERS') }}</ion-label>
+              <ion-label v-if="!isLoading" slot="end">{{ getTemporalExpression('IMP_CANCELLED_ORDERS') }}</ion-label>
+              <ion-skeleton-text v-else style="width: 30%;" animated />
             </ion-item>
             <ion-item @click="viewJobConfiguration({ id: 'IMP_CANCELLED_ITEMS', status: getJobStatus(jobEnums['IMP_CANCELLED_ITEMS'])})" detail button>
               <ion-label class="ion-text-wrap">{{ translate("Cancelled items") }}</ion-label>
-              <ion-label slot="end">{{ getTemporalExpression('IMP_CANCELLED_ITEMS') }}</ion-label>
+              <ion-label v-if="!isLoading" slot="end">{{ getTemporalExpression('IMP_CANCELLED_ITEMS') }}</ion-label>
+              <ion-skeleton-text v-else style="width: 30%;" animated />
             </ion-item>
             <ion-item @click="viewJobConfiguration({ id: 'IMP_RETURNS', status: getJobStatus(jobEnums['IMP_RETURNS'])})" detail button>
               <ion-label class="ion-text-wrap">{{ translate("Returns") }}</ion-label>
-              <ion-label slot="end">{{ getTemporalExpression('IMP_RETURNS') }}</ion-label>
+              <ion-label v-if="!isLoading" slot="end">{{ getTemporalExpression('IMP_RETURNS') }}</ion-label>
+              <ion-skeleton-text v-else style="width: 30%;" animated />
             </ion-item>
           </ion-card>
 
@@ -72,15 +78,18 @@
             </ion-card-header>
             <ion-item @click="viewJobConfiguration({ id: 'UPLD_CMPLT_ORDRS', status: getJobStatus(jobEnums['UPLD_CMPLT_ORDRS'])})" detail button>
               <ion-label class="ion-text-wrap">{{ translate("Completed orders") }}</ion-label>
-              <ion-label slot="end">{{ getTemporalExpression('UPLD_CMPLT_ORDRS') }}</ion-label>
+              <ion-label v-if="!isLoading" slot="end">{{ getTemporalExpression('UPLD_CMPLT_ORDRS') }}</ion-label>
+              <ion-skeleton-text v-else style="width: 30%;" animated />
             </ion-item>
             <ion-item @click="viewJobConfiguration({ id: 'UPLD_CNCLD_ORDRS', status: getJobStatus(jobEnums['UPLD_CNCLD_ORDRS'])})" detail button>
               <ion-label class="ion-text-wrap">{{ translate("Cancelled orders") }}</ion-label>
-              <ion-label slot="end">{{ getTemporalExpression('UPLD_CNCLD_ORDRS') }}</ion-label>
+              <ion-label v-if="!isLoading" slot="end">{{ getTemporalExpression('UPLD_CNCLD_ORDRS') }}</ion-label>
+              <ion-skeleton-text v-else style="width: 30%;" animated />
             </ion-item>
             <ion-item @click="viewJobConfiguration({ id: 'UPLD_REFUNDS', status: getJobStatus(jobEnums['UPLD_REFUNDS'])})" detail button>
               <ion-label class="ion-text-wrap">{{ translate("Refunds") }}</ion-label>
-              <ion-label slot="end">{{ getTemporalExpression('UPLD_REFUNDS') }}</ion-label>
+              <ion-label v-if="!isLoading" slot="end">{{ getTemporalExpression('UPLD_REFUNDS') }}</ion-label>
+              <ion-skeleton-text v-else style="width: 30%;" animated />
             </ion-item>
           </ion-card>
 
@@ -125,6 +134,7 @@ import {
   IonLabel,
   IonMenuButton,
   IonPage,
+  IonSkeletonText,
   IonTitle,
   IonToggle,
   IonToolbar,
@@ -154,6 +164,7 @@ export default defineComponent({
     IonLabel,
     IonMenuButton,
     IonPage,
+    IonSkeletonText,
     IonTitle,
     IonToggle,
     IonToolbar,
@@ -174,6 +185,7 @@ export default defineComponent({
       enumTypeId: 'ORDER_SYS_JOB',
       initialLoadJobEnums: JSON.parse(process.env?.VUE_APP_INITIAL_JOB_ENUMS as string) as any,
       maargJobEnums: JSON.parse(process.env.VUE_APP_ORDERS_MAARG_JOB_NAMES as string) as any,
+      isLoading: false
     }
   },
   computed: {
@@ -292,7 +304,15 @@ export default defineComponent({
         this.getTemporalExpr(this.getJobStatus(this.jobEnums[enumId]))?.description :
         translate('Disabled')
     },
-    async fetchJobs(){
+    async fetchJobs(isCurrentJobUpdateRequired = false){
+      this.isLoading = true;
+      if(isCurrentJobUpdateRequired) {
+        this.currentJob = ""
+        await this.store.dispatch('job/updateCurrentJob', { });
+        this.currentJobStatus = ""
+        this.freqType = ""
+        this.isJobDetailAnimationCompleted = false
+      }
       this.store.dispatch('webhook/fetchWebhooks')
       await this.store.dispatch("job/fetchJobs", {
         "inputFields": {
@@ -300,6 +320,7 @@ export default defineComponent({
         }
       });
       await this.store.dispatch("maargJob/fetchMaargJobs", Object.values(this.maargJobEnums));
+      this.isLoading = false
     },
     isMaargJobFound(id: string) {
       const job = this.getMaargJob(this.maargJobEnums[id])
diff --git a/src/views/Pipeline.vue b/src/views/Pipeline.vue
index 8aff535f..6e20fd9c 100644
--- a/src/views/Pipeline.vue
+++ b/src/views/Pipeline.vue
@@ -31,7 +31,13 @@
     </ion-header>
 
     <ion-content ref="contentRef" :scroll-events="true" @ionScroll="enableScrolling()" id="filter-content">
-      <main>
+      <div class="empty-state" v-if="jobsLoading">
+        <ion-item lines="none">
+          <ion-spinner name="crescent" slot="start" />
+          {{ translate("Fetching jobs") }}
+        </ion-item>
+      </div>
+      <main v-else>
         <section v-if="segmentSelected === 'pending'">
           <!-- Empty state -->
           <div v-if="pendingJobs?.length === 0">
@@ -45,7 +51,7 @@
           </div>
 
           <div v-else>
-            <ion-card v-for="job in pendingJobs" :key="job.jobId" @click="viewJobConfiguration(job)" :button="isDesktop">
+            <ion-card v-for="job in pendingJobs" :key="job.jobId" @click="viewJobConfiguration(job)" :button="isDesktop" :class="{ 'selected-job': selectedJobId === job.jobId }">
               <ion-card-header>
                 <ion-card-title>{{ job.enumName }}</ion-card-title>
                 <ion-badge v-if="job.runTime" color="dark">{{ timeFromNow(job.runTime)}}</ion-badge>
@@ -66,11 +72,17 @@
                 <ion-label class="ion-text-wrap">{{ job.tempExprId ? temporalExpr(job.tempExprId)?.description : "🙃"  }}</ion-label>
               </ion-item>
 
-              <ion-item lines="full">
+              <ion-item>
                 <ion-icon slot="start" :icon="refreshOutline" />
                 <ion-label class="ion-text-wrap">{{ job.currentRetryCount }}</ion-label>
               </ion-item>
 
+              <ion-item lines="full">
+                <ion-icon slot="start" :icon="codeWorkingOutline" />
+                <ion-label class="ion-text-wrap">{{ job.systemJobEnumId }}</ion-label>
+                <ion-icon :icon="helpCircleOutline" @click.stop.prevent="openLearnMoreModal(job)"/>
+              </ion-item>
+
               <div class="actions">
                 <div>
                   <ion-button :disabled="!hasPermission(Actions.APP_JOB_UPDATE)" fill="clear" @click.stop="skipJob(job)">{{ translate("Skip") }}</ion-button>
@@ -180,7 +192,7 @@
           </div>
 
           <div v-else>
-          <ion-card v-for="job in jobHistory" :key="job.jobId" @click="viewJobConfiguration(job)" :button="isDesktop">
+          <ion-card v-for="job in jobHistory" :key="job.jobId" @click="viewJobConfiguration(job)" :button="isDesktop" :class="{ 'selected-job': selectedJobId === job.jobId }">
             <ion-card-header>
               <div>
                 <ion-card-subtitle class="overline">{{ job.parentJobId }}</ion-card-subtitle>
@@ -300,7 +312,7 @@ import {
   IonButtons
 } from "@ionic/vue";
 import JobConfiguration from '@/components/JobConfiguration.vue'
-import { closeCircleOutline, codeWorkingOutline, copyOutline, ellipsisVerticalOutline, filterOutline, pinOutline, refreshOutline, timeOutline, timerOutline } from "ionicons/icons";
+import { closeCircleOutline, codeWorkingOutline, copyOutline, ellipsisVerticalOutline, filterOutline, helpCircleOutline, pinOutline, refreshOutline, timeOutline, timerOutline } from "ionicons/icons";
 import emitter from '@/event-bus';
 import JobHistoryModal from '@/components/JobHistoryModal.vue';
 import { Plugins } from '@capacitor/core';
@@ -310,6 +322,7 @@ import { Actions, hasPermission } from '@/authorization'
 import Filters from '@/components/Filters.vue';
 import FailedJobReasonModal from '@/views/FailedJobReasonModal.vue'
 import { translate } from '@hotwax/dxp-components';
+import LearnMoreModal from '@/components/LearnMoreModal.vue';
 
 export default defineComponent({
   name: "Pipeline",
@@ -360,7 +373,9 @@ export default defineComponent({
       isDesktop: isPlatform('desktop'),
       isRetrying: false,
       queryString: '' as any,
-      isScrollingEnabled: false
+      isScrollingEnabled: false,
+      jobsLoading: false,
+      selectedJobId: '' as any
     }
   },
   computed: {
@@ -390,6 +405,13 @@ export default defineComponent({
     this.isScrollingEnabled = false;
   },
   methods : {
+    async openLearnMoreModal(job: any) {
+      const learnMoreModal = await modalController.create({
+        component: LearnMoreModal,
+        componentProps: {currentJob: job}
+      })
+      return learnMoreModal.present()
+    },
     isPinnedJobSelected(jobEnumId: any) {
       return (this as any).pipelineFilters.enum.some((jobId: any) =>  jobId === jobEnumId );
     },
@@ -501,17 +523,17 @@ export default defineComponent({
     async refreshJobs(event: any, isRetrying = false ) {
       this.isRetrying = isRetrying;
       if(this.segmentSelected === 'pending') {
-        this.getPendingJobs().then(() => {
+        await this.getPendingJobs().then(() => {
           if(event) event.target.complete();
           this.isRetrying = false;
         });
       } else if(this.segmentSelected === 'running') {
-        this.getRunningJobs().then(() => {
+        await this.getRunningJobs().then(() => {
           if(event) event.target.complete();
           this.isRetrying = false;
         });
       } else {
-        this.getJobHistory().then(() => {
+        await this.getJobHistory().then(() => {
           if(event) event.target.complete();
           this.isRetrying = false;
         });
@@ -540,7 +562,7 @@ export default defineComponent({
               text: translate('Skip'),
               handler: async () => {
                 if(this.isRuntimePassed(job)) {
-                  await this.refreshJobs(undefined, true)
+                  await this.refreshJobs(undefined)
                   showToast(translate("Job runtime has passed. The job data has refreshed. Please try again."))
                   await this.store.dispatch('job/updateCurrentJob', { job: {} });
                   return;
@@ -586,7 +608,7 @@ export default defineComponent({
               text: translate("CANCEL"),
               handler: async () => {
                 if(this.isRuntimePassed(job)) {
-                  await this.refreshJobs(undefined, true)
+                  await this.refreshJobs(undefined)
                   showToast(translate("Job runtime has passed. The job data has refreshed. Please try again."))
                   await this.store.dispatch('job/updateCurrentJob', { job: {} });
                   return;
@@ -602,6 +624,7 @@ export default defineComponent({
        return alert.present();
     },
     async viewJobConfiguration(job: any) {
+      this.selectedJobId = job.jobId
       this.currentJobStatus = job.tempExprId
       const id = Object.entries(this.jobEnums).find((enums) => enums[1] == job.systemJobEnumId) as any
       const appFreqType =  id && (Object.entries(this.jobFrequencyType).find((freq) => freq[0] == id[0]) as any)
@@ -638,6 +661,17 @@ export default defineComponent({
         this.getPendingJobs();
       }
     },
+    async updateProductStoreConfig(isCurrentJobUpdateRequired = false) {
+      if(isCurrentJobUpdateRequired) {
+        this.jobsLoading = true;
+        await this.store.dispatch('job/updateCurrentJob', { job: {} });
+        this.currentJobStatus = ""
+        this.freqType = ""
+        this.isJobDetailAnimationCompleted = false
+      }
+      await this.refreshJobs(undefined);
+      this.jobsLoading = false;
+    }
   },
   async created() {
     this.getPendingJobs();
@@ -649,11 +683,11 @@ export default defineComponent({
     await this.store.dispatch('job/updateCurrentJob', { job: {} });
   },
   mounted(){
-    emitter.on("productStoreOrConfigChanged", this.refreshJobs);
+    emitter.on("productStoreOrConfigChanged", this.updateProductStoreConfig);
     emitter.on("pinnedJobsUpdated", (this as any).updateSelectedPinnedJob);
   },
   unmounted(){
-    emitter.off("productStoreOrConfigChanged", this.refreshJobs);
+    emitter.off("productStoreOrConfigChanged", this.updateProductStoreConfig);
     emitter.off('jobUpdated', this.updateJobs);
     emitter.off("pinnedJobsUpdated", (this as any).updateSelectedPinnedJob);
   },
@@ -670,6 +704,7 @@ export default defineComponent({
       store,
       codeWorkingOutline,
       ellipsisVerticalOutline,
+      helpCircleOutline,
       pinOutline,
       refreshOutline,
       timeOutline,
@@ -685,6 +720,16 @@ export default defineComponent({
 </script>
 
 <style scoped>
+.selected-job {
+  box-shadow: 0px 8px 10px 0px rgba(0, 0, 0, 0.14), 0px 3px 14px 0px rgba(0, 0, 0, 0.12), 0px 4px 5px 0px rgba(0, 0, 0, 0.20);
+  scale: 1.03;
+  margin-block: var(--spacer-sm);
+}
+
+ion-card {
+  transition: .5s all ease;
+}
+
 ion-card-header {
   display: flex;
   flex-direction: row;
diff --git a/src/views/PreOrder.vue b/src/views/PreOrder.vue
index 69c19e1f..b5587dff 100644
--- a/src/views/PreOrder.vue
+++ b/src/views/PreOrder.vue
@@ -382,9 +382,16 @@ export default defineComponent({
       });
       await this.store.dispatch("maargJob/fetchMaargJobs", Object.values(this.maargJobEnums));
     },
-    fetchInitialData() {
-      this.fetchJobs();
-      this.getPreOrderBackorderCategory();
+    async fetchInitialData(isCurrentJobUpdateRequired = false) {
+      if(isCurrentJobUpdateRequired) {
+        this.currentJob = "";
+        await this.store.dispatch('job/updateCurrentJob', { });
+        this.currentJobStatus = ""
+        this.freqType = '';
+        this.isJobDetailAnimationCompleted = false;
+      }
+      await this.fetchJobs();
+      await this.getPreOrderBackorderCategory();
     },
     isMaargJobFound(id: string) {
       const job = this.getMaargJob(this.maargJobEnums[id])
diff --git a/src/views/Product.vue b/src/views/Product.vue
index 07515198..b4082df4 100644
--- a/src/views/Product.vue
+++ b/src/views/Product.vue
@@ -16,11 +16,13 @@
             </ion-card-header>
             <ion-item button @click="viewJobConfiguration({ id: 'IMP_PRDTS', status: getJobStatus(jobEnums['IMP_PRDTS'])})" detail>
               <ion-label class="ion-text-wrap">{{ translate("Import products") }}</ion-label>
-              <ion-label slot="end">{{ getTemporalExpression('IMP_PRDTS') }}</ion-label>
+              <ion-label v-if="!isLoading" slot="end">{{ getTemporalExpression('IMP_PRDTS') }}</ion-label>
+              <ion-skeleton-text v-else style="width: 30%;" animated />
             </ion-item>
             <ion-item button @click="viewJobConfiguration({ id: 'SYNC_PRDTS', status: getJobStatus(jobEnums['SYNC_PRDTS'])})" detail>
               <ion-label class="ion-text-wrap">{{ translate("Sync products") }}</ion-label>
-              <ion-label slot="end">{{ getTemporalExpression('SYNC_PRDTS') }} </ion-label>
+              <ion-label v-if="!isLoading" slot="end">{{ getTemporalExpression('SYNC_PRDTS') }} </ion-label>
+              <ion-skeleton-text v-else style="width: 30%;" animated />
             </ion-item>
             <ion-item lines="none">
               <ion-label class="ion-text-wrap"><p>{{ translate("Sync products and category structures from Shopify into HotWax Commerce and keep them up to date.") }}</p></ion-label>
@@ -64,6 +66,7 @@ import {
   IonLabel,
   IonMenuButton,
   IonPage,
+  IonSkeletonText,
   IonTitle,
   IonToolbar,
   IonToggle,
@@ -91,6 +94,7 @@ export default defineComponent({
     IonLabel,
     IonMenuButton,
     IonPage,
+    IonSkeletonText,
     IonTitle,
     IonToolbar,
     IonToggle,
@@ -126,7 +130,8 @@ export default defineComponent({
       isDesktop: isPlatform('desktop'),
       webhookEnums: JSON.parse(process.env?.VUE_APP_WEBHOOK_ENUMS as string) as any,
       enumTypeId: 'PRODUCT_SYS_JOB',
-      initialLoadJobEnums: JSON.parse(process.env?.VUE_APP_INITIAL_JOB_ENUMS as string) as any
+      initialLoadJobEnums: JSON.parse(process.env?.VUE_APP_INITIAL_JOB_ENUMS as string) as any,
+      isLoading: false
     }
   },
   mounted () {
@@ -187,13 +192,22 @@ export default defineComponent({
         this.getTemporalExpr(this.getJobStatus(this.jobEnums[enumId]))?.description :
         translate('Disabled')
     },
-    fetchJobs(){
-      this.store.dispatch("job/fetchJobs", {
+    async fetchJobs(isCurrentJobUpdateRequired = false){
+      this.isLoading = true;
+      if(isCurrentJobUpdateRequired) {
+        this.currentJob = ""
+        await this.store.dispatch('job/updateCurrentJob', { });
+        this.currentJobStatus = ""
+        this.freqType = ""
+        this.isJobDetailAnimationCompleted = false
+      }
+      await this.store.dispatch("job/fetchJobs", {
         "inputFields":{
           "enumTypeId": "PRODUCT_SYS_JOB"
         }
       });
       this.store.dispatch('webhook/fetchWebhooks')
+      this.isLoading = false
     }
   },
   setup() {
diff --git a/src/views/Reports.vue b/src/views/Reports.vue
index e83e0204..71a6d243 100644
--- a/src/views/Reports.vue
+++ b/src/views/Reports.vue
@@ -57,7 +57,6 @@ import {
   IonMenuButton,
   IonNote,
   IonPage,
-  IonSpinner,
   IonTitle,
   IonToolbar,
   isPlatform,
@@ -85,7 +84,6 @@ export default defineComponent({
     IonMenuButton,
     IonNote,
     IonPage,
-    IonSpinner,
     IonTitle,
     IonToolbar,
     JobConfiguration
@@ -97,7 +95,7 @@ export default defineComponent({
       currentJobStatus: '',
       isJobDetailAnimationCompleted: false,
       isDesktop: isPlatform('desktop'),
-      isRetrying: false,
+      isRetrying: false
     }
   },
   computed: {
@@ -110,11 +108,11 @@ export default defineComponent({
   mounted() {
     emitter.on('jobUpdated', this.getReportsJobs);
     this.getReportsJobs();
-    emitter.on("productStoreOrConfigChanged", this.getReportsJobs);
+    emitter.on("productStoreOrConfigChanged", this.updateProductStoreConfig);
   },
   unmounted() {
     emitter.on('jobUpdated', this.getReportsJobs);
-    emitter.off("productStoreOrConfigChanged", this.getReportsJobs);
+    emitter.off("productStoreOrConfigChanged", this.updateProductStoreConfig);
   },
   methods: {
     async viewJobConfiguration(job: any) {
@@ -140,6 +138,15 @@ export default defineComponent({
     async getReportsJobs(viewSize = 200, viewIndex = 0) {
       await this.store.dispatch('job/fetchReportsJobs', { eComStoreId: this.getCurrentEComStore.productStoreId, viewSize, viewIndex });
     },
+    async updateProductStoreConfig(isCurrentJobUpdateRequired = false) {
+      if(isCurrentJobUpdateRequired) {
+        this.currentJob = "";
+        await this.store.dispatch('job/updateCurrentJob', { });
+        this.currentJobStatus = "";
+        this.isJobDetailAnimationCompleted = false;
+      }
+      await this.getReportsJobs()
+    },
     async loadMoreReportsJobs(event: any) {
       this.getReportsJobs(
         undefined,