diff --git a/packages/component/src/TimeSelect.vue b/packages/component/src/TimeSelect.vue
index 5d49ec407..025f7b146 100644
--- a/packages/component/src/TimeSelect.vue
+++ b/packages/component/src/TimeSelect.vue
@@ -244,6 +244,8 @@ export default {
         return
       }
       this.period = value
+
+      return findOne
     },
 
     getPeriod(value) {
@@ -341,7 +343,7 @@ export default {
 }
 
 .picker__item {
-  padding: 0 8px;
+  padding-right: 8px;
   border-radius: 4px;
 
   //&:hover {
diff --git a/packages/dag/src/components/monitor/LeftSider.vue b/packages/dag/src/components/monitor/LeftSider.vue
index 999699b04..d04e8e083 100644
--- a/packages/dag/src/components/monitor/LeftSider.vue
+++ b/packages/dag/src/components/monitor/LeftSider.vue
@@ -13,9 +13,9 @@ import dayjs from 'dayjs'
 import { cloneDeep } from 'lodash-es'
 import { mapGetters } from 'vuex'
 import { $emit } from '../../../utils/gogocodeTransfer'
-import Frequency from './components/Frequency'
-import InitialList from './components/InitialList'
-import LineChart from './components/LineChart'
+import Frequency from './components/Frequency.vue'
+import InitialList from './components/InitialList.vue'
+import LineChart from './components/LineChart.vue'
 
 export default {
   name: 'LeftSider',
@@ -128,6 +128,17 @@ export default {
           },
         ],
       },
+      qpsColors: [
+        '#5470c6',
+        '#91cc75',
+        '#fac858',
+        '#ee6666',
+        '#73c0de',
+        '#3ba272',
+        '#fc8452',
+        '#9a60b4',
+        '#ea7ccc',
+      ],
     }
   },
   computed: {
@@ -154,6 +165,15 @@ export default {
       const outputQps = data.outputQps?.map(Math.abs)
       const inputSizeQps = data.inputSizeQps?.map(Math.abs)
       const outputSizeQps = data.outputSizeQps?.map(Math.abs)
+      const inputQps95th = data.inputQps95th
+      const inputQps99th = data.inputQps99th
+      const outputQps95th = data.outputQps95th
+      const outputQps99th = data.outputQps99th
+      const inputSizeQps95th = data.inputSizeQps95th
+      const inputSizeQps99th = data.inputSizeQps99th
+      const outputSizeQps95th = data.outputSizeQps95th
+      const outputSizeQps99th = data.outputSizeQps99th
+
       // 计算距离增量时间点，最近的时间点
       const milestone = this.dataflow.attrs?.milestone || {}
       const snapshotDoneAt = milestone.SNAPSHOT?.end
@@ -167,8 +187,6 @@ export default {
         }
       })
 
-      const countValues = [inputQps, outputQps]
-      const sizeValues = [inputSizeQps, outputSizeQps]
       let unit = '5s'
 
       switch (interval) {
@@ -185,11 +203,51 @@ export default {
           unit = 'd'
           break
       }
-      const name = [
+
+      const countNames = [
         i18n.t('public_time_avg_input', { unit }),
         i18n.t('public_time_avg_output', { unit }),
       ]
 
+      const sizeNames = [
+        i18n.t('public_time_avg_input', { unit }),
+        i18n.t('public_time_avg_output', { unit }),
+      ]
+
+      const countValues = [inputQps, outputQps]
+      const countP95Values = [
+        inputQps95th,
+        outputQps95th,
+        inputQps99th,
+        outputQps99th,
+      ]
+      const sizeValues = [inputSizeQps, outputSizeQps]
+      const sizeP95Values = [
+        inputSizeQps95th,
+        outputSizeQps95th,
+        inputSizeQps99th,
+        outputSizeQps99th,
+      ]
+      const p95Names = [
+        i18n.t('public_time_avg_input_95th'),
+        i18n.t('public_time_avg_output_95th'),
+        i18n.t('public_time_avg_input_99th'),
+        i18n.t('public_time_avg_output_99th'),
+      ]
+
+      countP95Values.forEach((values, i) => {
+        if (values?.some((v) => v !== null)) {
+          countValues.push(values)
+          countNames.push(p95Names[i])
+        }
+      })
+      sizeP95Values.forEach((values, i) => {
+        if (values?.some((v) => v !== null)) {
+          sizeValues.push(values)
+          sizeNames.push(p95Names[i])
+        }
+      })
+
       if (interval > 5000) {
         countValues.push(
           data.maxInputQps?.map(Math.abs),
@@ -199,17 +257,24 @@ export default {
           data.maxInputSizeQps?.map(Math.abs),
           data.maxOutputSizeQps?.map(Math.abs),
         )
-        name.push(
+        const names = [
           i18n.t('public_time_max_input', { unit }),
           i18n.t('public_time_max_output', { unit }),
-        )
+        ]
+        countNames.push(...names)
+        sizeNames.push(...names)
       }
 
       const opt = {
         x: time,
-        name,
         value: [],
         zoomValue: 10,
+        serieOptions: Array.from({ length: 8 }).fill(
+          {
+            areaStyle: undefined,
+          },
+          2,
+        ),
       }
 
       if (this.dataflow.type === 'initial_sync+cdc') {
@@ -234,9 +299,11 @@ export default {
       return {
         count: Object.assign(cloneDeep(opt), {
           value: countValues,
+          name: countNames,
         }),
         size: Object.assign(cloneDeep(opt), {
           value: sizeValues,
+          name: sizeNames,
         }),
       }
     },
@@ -267,7 +334,8 @@ export default {
         }
       }
 
-      const { replicateLag = [] } = data
+      const name = [i18n.t('public_event_incremental_delay')]
+      const { replicateLag = [], replicateLag95th, replicateLag99th } = data
       const open = this.dataflow.alarmSettings?.find(
         (t) => t.key === 'TASK_INCREMENT_DELAY',
       )?.open
@@ -277,10 +345,26 @@ export default {
           )?.ms || 0
         : 60 * 1000
       const max = Math.max(...replicateLag)
+      const value = [replicateLag]
+      if (replicateLag95th?.some((v) => v !== null)) {
+        value.push(replicateLag95th)
+        name.push(i18n.t('public_event_incremental_delay_95th'))
+      }
+      if (replicateLag99th?.some((v) => v !== null)) {
+        value.push(replicateLag99th)
+        name.push(i18n.t('public_event_incremental_delay_99th'))
+      }
       return {
         x: time,
-        value: replicateLag,
+        name,
+        value,
         yAxisMax: Math.max(delay, max),
+        serieOptions: Array.from({ length: 3 }).fill(
+          {
+            areaStyle: undefined,
+          },
+          1,
+        ),
       }
     },
 
@@ -475,7 +559,14 @@ export default {
   methods: {
     changeTimeSelect(val, isTime, source) {
       this.$emit('changeTimeSelect', val, isTime, source)
-      this.timeSelectLabel = this.$refs.timeSelect?.getPeriod()?.label
+      // this.timeSelectLabel = this.$refs.timeSelect?.getPeriod()?.label
+
+      this.isUpdatingTimeSelect = true
+      this.$refs.dialogTimeSelect?.setPeriod(val)
+
+      setTimeout(() => {
+        this.isUpdatingTimeSelect = false
+      }, 10)
     },
 
     changeFrequency(val) {
@@ -634,6 +725,17 @@ export default {
       }
       map[this.$route.name]?.(this.dataflow.id)
     },
+
+    onChangeDialogTimeSelect(val, isTime, source) {
+      if (this.isUpdatingTimeSelect) {
+        return
+      }
+      const selected = this.$refs.timeSelect?.setPeriod(val)
+
+      if (selected) {
+        this.$emit('changeTimeSelect', val, isTime, source)
+      }
+    },
   },
   emits: ['load-data', 'verifyDetails', 'changeTimeSelect', 'changeFrequency'],
 }
@@ -941,7 +1043,7 @@ export default {
 
           <LineChart
             :data="qpsMap[qpsChartsType]"
-            :color="['#26CF6C', '#2C65FF', '#b6d634', '#5070dd']"
+            :color="qpsColors"
             :time-format="timeFormat"
             :label-unit-type="qpsChartsType === 'size' ? 'byte' : ''"
             auto-scale
@@ -978,7 +1080,7 @@ export default {
 
           <LineChart
             :data="replicateLagData"
-            :color="['#2C65FF']"
+            :color="['#2C65FF', '#91cc75', '#fac858']"
             :time-format="timeFormat"
             time-value
             class="line-chart"
@@ -1115,11 +1217,24 @@ export default {
 
     <ElDialog
       v-model="lineChartDialog"
-      :title="$t('packages_dag_components_nodedetaildialog_xingnengzhibiao')"
       width="774px"
       :close-on-click-modal="false"
       :modal-append-to-body="false"
     >
+      <template #header="{ titleClass }">
+        <div class="flex align-center gap-3">
+          <span :class="titleClass">{{
+            $t('packages_dag_components_nodedetaildialog_xingnengzhibiao')
+          }}</span>
+          <el-divider class="mx-0" direction="vertical" />
+          <TimeSelect
+            ref="dialogTimeSelect"
+            :options="timeOptions"
+            :range="$attrs.range"
+            @change="onChangeDialogTimeSelect"
+          />
+        </div>
+      </template>
       <div class="line-chart__box mb-2">
         <div class="flex justify-content-between">
           <ElTooltip
@@ -1136,36 +1251,66 @@ export default {
               <VIcon size="16" class="color-primary">info</VIcon>
             </span>
           </ElTooltip>
-          <ElRadioGroup v-model="qpsChartsType" class="chart__radio">
-            <ElRadioButton label="count">count</ElRadioButton>
-            <ElRadioButton label="size">size</ElRadioButton>
-          </ElRadioGroup>
+          <el-segmented v-model="qpsChartsType" :options="['count', 'size']" />
         </div>
       </div>
 
       <LineChart
         :data="qpsMap[qpsChartsType]"
-        :color="['#26CF6C', '#2C65FF']"
+        :color="qpsColors"
         :time-format="timeFormat"
         :label-unit-type="qpsChartsType === 'size' ? 'byte' : ''"
+        :options="{
+          legend: {
+            show: true,
+            type: 'scroll',
+            bottom: 0,
+          },
+          grid: {
+            outerBounds: {
+              left: 0,
+              top: 0,
+              right: 10,
+              bottom: 32,
+            },
+          },
+        }"
         style="height: 200px"
       />
+
+      <div class="mt-4 font-color-dark fw-bold mb-2 lh-8">
+        {{ $t('public_event_incremental_delay') }}
+      </div>
       <LineChart
         :data="replicateLagData"
-        :title="$t('public_event_incremental_delay')"
-        :color="['#2C65FF']"
+        :color="['#2C65FF', '#91cc75', '#fac858']"
         :time-format="timeFormat"
         time-value
-        class="mt-8"
         style="height: 200px"
+        :options="{
+          legend: {
+            show: true,
+            type: 'scroll',
+            bottom: 0,
+          },
+          grid: {
+            outerBounds: {
+              left: 0,
+              top: 0,
+              right: 10,
+              bottom: 32,
+            },
+          },
+        }"
       />
+      <div class="mt-4 font-color-dark fw-bold mb-2 lh-8">
+        {{ $t('packages_dag_monitor_leftsider_chulihaoshim') }}
+      </div>
       <LineChart
         :data="delayData"
-        :title="$t('packages_dag_monitor_leftsider_chulihaoshim')"
         :color="['#2C65FF']"
         :time-format="timeFormat"
         time-value
-        class="mt-8"
         style="height: 200px"
       />
     </ElDialog>
diff --git a/packages/dag/src/components/monitor/components/Frequency.vue b/packages/dag/src/components/monitor/components/Frequency.vue
index cbfdb7bdc..063a1657c 100644
--- a/packages/dag/src/components/monitor/components/Frequency.vue
+++ b/packages/dag/src/components/monitor/components/Frequency.vue
@@ -136,7 +136,7 @@ export default {
 }
 
 .picker__item {
-  padding: 0 8px;
+  padding-right: 8px;
   border-radius: 4px;
 }
 </style>
diff --git a/packages/dag/src/components/monitor/components/LineChart.vue b/packages/dag/src/components/monitor/components/LineChart.vue
index a76119261..a06e8aca6 100644
--- a/packages/dag/src/components/monitor/components/LineChart.vue
+++ b/packages/dag/src/components/monitor/components/LineChart.vue
@@ -91,18 +91,28 @@ export default {
       this.min = 0
       this.minNotZero = 0
 
-      const { x, value, name, markLine, yAxisMax } = this.data
+      const {
+        x,
+        value,
+        name,
+        markLine,
+        yAxisMax,
+        serieOptions = [],
+      } = this.data
       const { limit } = this
       const series = []
 
       if (Array.isArray(value?.[0])) {
         value.forEach((el, index) => {
           series.push(
-            this.getSeriesItem(
-              el || [],
-              index,
-              name?.[index],
-              markLine?.[index],
+            Object.assign(
+              this.getSeriesItem(
+                el || [],
+                index,
+                name?.[index],
+                markLine?.[index],
+              ),
+              serieOptions[index],
             ),
           )
         })
@@ -169,6 +179,7 @@ export default {
 
       if (this.end === 100) {
         const isEmptyData = options.series.every((t) => !t.data.length)
+        console.log('options.series', options.series)
         this.extend = Object.assign(
           {},
           {
@@ -192,6 +203,9 @@ export default {
     getOptions() {
       const { canScale, max, minNotZero } = this
       const result = {
+        legend: {
+          show: false,
+        },
         tooltip: {
           borderRadius: 12,
           trigger: 'axis',
@@ -364,9 +378,12 @@ export default {
           show: false,
         },
         lineStyle: {
-          color: this.color[index],
+          // color: this.color[index],
           width: 1,
         },
+        itemStyle: {
+          color: this.color[index],
+        },
         areaStyle: {
           color: this.color[index],
           opacity: 0.1,
diff --git a/packages/i18n/src/locale/lang/en.js b/packages/i18n/src/locale/lang/en.js
index 2e83578f3..cdc7f26f8 100644
--- a/packages/i18n/src/locale/lang/en.js
+++ b/packages/i18n/src/locale/lang/en.js
@@ -219,6 +219,10 @@ export default {
   public_time_output: 'Output',
   public_time_avg_output: 'Output (Avg/{unit})',
   public_time_max_output: 'Output (Max/{unit})',
+  public_time_avg_input_95th: 'Input P95',
+  public_time_avg_output_95th: 'Output P95',
+  public_time_avg_input_99th: 'Input P99',
+  public_time_avg_output_99th: 'Output P99',
   public_time_five_min: 'The last five minutes',
   public_time_ten_min: 'The last ten minutes',
   public_time_thirty_min: 'The last thirty minutes',
@@ -325,6 +329,8 @@ export default {
   public_node_target: 'Target Node',
   // task event
   public_event_incremental_delay: 'Incremental Delay',
+  public_event_incremental_delay_95th: 'P95',
+  public_event_incremental_delay_99th: 'P99',
   public_event_total_input: 'Total Input',
   public_event_total_output: 'Total Output',
   public_event_insert: 'Insert',
diff --git a/packages/i18n/src/locale/lang/zh-CN.js b/packages/i18n/src/locale/lang/zh-CN.js
index 687baeae8..bc1b64599 100644
--- a/packages/i18n/src/locale/lang/zh-CN.js
+++ b/packages/i18n/src/locale/lang/zh-CN.js
@@ -220,6 +220,10 @@ export default {
   public_time_output: '输出',
   public_time_avg_output: '输出 (平均/{unit})',
   public_time_max_output: '输出 (最大/{unit})',
+  public_time_avg_input_95th: '输入 95 分位',
+  public_time_avg_output_95th: '输出 95 分位',
+  public_time_avg_input_99th: '输入 99 分位',
+  public_time_avg_output_99th: '输出 99 分位',
   public_time_five_min: '最近五分钟',
   public_time_ten_min: '最近十分钟',
   public_time_thirty_min: '最近三十分钟',
@@ -326,6 +330,8 @@ export default {
   public_node_target: '目标节点',
   // 任务事件
   public_event_incremental_delay: '增量延迟',
+  public_event_incremental_delay_95th: '95 分位',
+  public_event_incremental_delay_99th: '99 分位',
   public_event_total_input: '总输入',
   public_event_total_output: '总输出',
   public_event_insert: '插入',
diff --git a/packages/i18n/src/locale/lang/zh-TW.js b/packages/i18n/src/locale/lang/zh-TW.js
index fc0135899..48a418437 100644
--- a/packages/i18n/src/locale/lang/zh-TW.js
+++ b/packages/i18n/src/locale/lang/zh-TW.js
@@ -219,6 +219,10 @@ export default {
   public_time_output: '輸出',
   public_time_avg_output: '輸出 (平均/{unit})',
   public_time_max_output: '輸出 (最大/{unit})',
+  public_time_avg_input_95th: '輸入 (95%)',
+  public_time_avg_output_95th: '輸出 (95%)',
+  public_time_avg_input_99th: '輸入 (99%)',
+  public_time_avg_output_99th: '輸出 (99%)',
   public_time_five_min: '最近五分鐘',
   public_time_ten_min: '最近十分鐘',
   public_time_thirty_min: '最近三十分鐘',
@@ -324,6 +328,8 @@ export default {
   public_node_target: '目標節點',
   // 任務事件
   public_event_incremental_delay: '增量延遲',
+  public_event_incremental_delay_95th: '95 分位',
+  public_event_incremental_delay_99th: '99 分位',
   public_event_total_input: '總輸入',
   public_event_total_output: '總輸出',
   public_event_insert: '插入',