diff --git a/bigtop-manager-ui/src/components/job-info/custom-progress.vue b/bigtop-manager-ui/src/components/job-info/custom-progress.vue
index 7e699cb34f4e5bb7ee2324e11a6b263b1a27d37e..d7d2f755b26a768958d7d48557835d9d5b8769a6 100644
--- a/bigtop-manager-ui/src/components/job-info/custom-progress.vue
+++ b/bigtop-manager-ui/src/components/job-info/custom-progress.vue
@@ -18,7 +18,7 @@
   -->
 
 <script lang="ts" setup>
-  import { computed, ref, reactive, watch, toRefs } from 'vue'
+  import { computed } from 'vue'
   import { State } from '@/api/job/types'
   import {
     MinusCircleFilled as Canceled,
@@ -36,81 +36,65 @@
     progressData: ProgressItem[]
   }
 
-  interface ProgressConfig {
-    progress: number
-    status: string
-  }
-
   const props = withDefaults(defineProps<ProgressProps>(), {})
 
-  const progressConfig = reactive<ProgressConfig>({
-    progress: 0,
-    status: 'status'
-  })
-
-  const { progress, status } = toRefs(progressConfig)
-
-  const data = computed(() => props.progressData)
-  const icon = ref(Canceled)
-
-  watch(
-    () => props.state,
-    (val) => {
-      if (val === 'Pending') {
-        Object.assign(progressConfig, {
-          progress: 0,
-          status: 'normal'
-        })
+  const progressConfig = computed(() => {
+    if (props.state === 'Pending') {
+      return {
+        progress: 0,
+        status: 'normal'
       }
-      if (val === 'Successful') {
-        Object.assign(progressConfig, {
-          progress: 100,
-          status: 'success'
-        })
-        icon.value = Successful
+    } else if (props.state === 'Successful') {
+      return {
+        progress: 100,
+        status: 'success',
+        icon: Successful
       }
-      if (val === 'Processing') {
-        const proportion =
-          data.value.filter((v: ProgressItem) => v.state === 'Successful')
-            .length + 1
-        Object.assign(progressConfig, {
-          progress: (proportion / data.value.length) * 100,
-          status: 'active'
-        })
+    } else if (props.state === 'Processing') {
+      const proportion =
+        props.progressData.filter((v: ProgressItem) => v.state === 'Successful')
+          .length + 1
+      return {
+        progress: (proportion / props.progressData.length) * 100,
+        status: 'active'
       }
-      if (val === 'Canceled') {
-        Object.assign(progressConfig, {
-          progress: 100,
-          status: 'normal'
-        })
-        icon.value = Canceled
+    } else if (props.state === 'Canceled') {
+      return {
+        progress: 100,
+        status: 'normal',
+        icon: Canceled
       }
-      if (val === 'Failed') {
-        Object.assign(progressConfig, {
-          progress: 100,
-          status: 'exception'
-        })
-        icon.value = Failed
+    } else if (props.state === 'Failed') {
+      return {
+        progress: 100,
+        status: 'exception',
+        icon: Failed
+      }
+    } else {
+      return {
+        progress: 0,
+        status: 'status'
       }
-    },
-    {
-      immediate: true
     }
-  )
+  })
 </script>
 
 <template>
   <div>
     <a-progress
-      :percent="progress"
-      :status="status"
+      :percent="progressConfig.progress"
+      :status="progressConfig.status"
       :stroke-color="State[props.state]"
     >
       <template #format="percent">
-        <span v-if="['Pending', 'Processing'].includes(props.state)">
+        <span v-if="['Processing', 'Pending'].includes(props.state)">
           {{ percent }} %
         </span>
-        <component :is="icon" v-else :style="{ color: State[props.state] }" />
+        <component
+          :is="progressConfig.icon"
+          v-else-if="progressConfig.icon"
+          :style="{ color: State[props.state] }"
+        />
       </template>
     </a-progress>
   </div>
diff --git a/bigtop-manager-ui/src/components/job-info/index.vue b/bigtop-manager-ui/src/components/job-info/index.vue
index ff195352bf13c9f3bc06aff59d3dafa712403b81..d8f0846113de1ce05fd77267bca27c409143ba62 100644
--- a/bigtop-manager-ui/src/components/job-info/index.vue
+++ b/bigtop-manager-ui/src/components/job-info/index.vue
@@ -19,7 +19,7 @@
 
 <script setup lang="ts">
   import { SettingOutlined } from '@ant-design/icons-vue'
-  import { ref, watch, computed, reactive, toRaw, shallowRef } from 'vue'
+  import { ref, watch, computed, reactive, toRaw } from 'vue'
   import { useClusterStore } from '@/store/cluster'
   import { PaginationConfig } from 'ant-design-vue/es/pagination/Pagination'
   import { storeToRefs } from 'pinia'
@@ -65,9 +65,9 @@
   const jobWindowOpened = ref(false)
   const stages = ref<StageVO[]>([])
   const tasks = ref<TaskVO[]>([])
-  const breadcrumbs = ref<string[]>(['Job Info'])
+  const breadcrumbs = ref<any[]>([{ name: 'Job Info' }])
   const currTaskInfo = ref<TaskVO>()
-  const jobs = shallowRef<JobVO[]>([])
+  const jobs = ref<JobVO[]>([])
   const intervalId = ref<Pausable | undefined>()
   const logTextOrigin = ref<string>('')
   const logsInfoRef = ref<HTMLElement | null>(null)
@@ -108,6 +108,12 @@
     }
   })
 
+  watch(jobs, (val) => {
+    const len = breadcrumbs.value.length
+    const idxId = breadcrumbs.value[len - 1].id
+    stages.value = val.find((v: JobVO) => v.id == idxId)?.stages || []
+  })
+
   intervalId.value = useIntervalFn(
     async () => {
       await getJobsList()
@@ -185,19 +191,19 @@
   }
 
   const clickTask = (record: TaskVO) => {
-    breadcrumbs.value.push(record.name)
+    breadcrumbs.value.push(record)
     currTaskInfo.value = record
     getLogsInfo(record.id)
   }
 
   const clickJob = (record: JobVO) => {
     stages.value = record.stages
-    breadcrumbs.value.push(record.name)
+    breadcrumbs.value.push(record)
   }
 
   const clickStage = (record: StageVO) => {
     tasks.value = record.tasks
-    breadcrumbs.value.push(record.name)
+    breadcrumbs.value.push(record)
   }
 
   const clickBreadCrumbs = (idx: number) => {
@@ -254,7 +260,7 @@
           :key="idx"
           @click="clickBreadCrumbs(idx)"
         >
-          <a href="#">{{ item }}</a>
+          <a href="#">{{ item.name }}</a>
         </a-breadcrumb-item>
       </a-breadcrumb>
     </div>
@@ -357,6 +363,7 @@
       border-radius: 4px;
       position: relative;
       pre {
+        height: 100%;
         margin: 0;
         padding: 16px 14px;
         box-sizing: border-box;
diff --git a/bigtop-manager-ui/src/components/job-info/stage-info.vue b/bigtop-manager-ui/src/components/job-info/stage-info.vue
index 0d15f874591ebd7f098003392374d49c9d960e81..7fa421f7ca66948810bc1a98a5278e569993881d 100644
--- a/bigtop-manager-ui/src/components/job-info/stage-info.vue
+++ b/bigtop-manager-ui/src/components/job-info/stage-info.vue
@@ -19,7 +19,7 @@
 
 <script lang="ts" setup>
   import { StageVO } from '@/api/job/types.ts'
-  import { computed, reactive, ref } from 'vue'
+  import { ref, reactive, watch } from 'vue'
   import { PaginationConfig } from 'ant-design-vue/es/pagination/Pagination'
   import CustomProgress from './custom-progress.vue'
 
@@ -30,7 +30,18 @@
 
   const props = withDefaults(defineProps<StageProps>(), {})
 
-  const pagedList = ref(computed(() => props.stages))
+  const pagedList = ref<StageVO[]>([])
+
+  watch(
+    () => props.stages,
+    (val) => {
+      pagedList.value = val || []
+    },
+    {
+      immediate: true,
+      deep: true
+    }
+  )
 
   const handlePageChange = (page: number) => {
     paginationProps.current = page