diff --git a/.gitignore b/.gitignore
index 8e51bc962..347e61ec9 100644
--- a/.gitignore
+++ b/.gitignore
@@ -30,4 +30,4 @@ pnpm-debug.log*
 output.js
 webpack.confi.production.js
 
-build/deploy.sh
\ No newline at end of file
+build/deploy.sh
diff --git a/apps/daas/src/i18n/langs/en.js b/apps/daas/src/i18n/langs/en.js
index 21d7ddb00..e9b387fd9 100644
--- a/apps/daas/src/i18n/langs/en.js
+++ b/apps/daas/src/i18n/langs/en.js
@@ -405,6 +405,8 @@ export default {
   apiaudit_visitor: 'Client Name',
   apiaudit_ip: 'Visitor IP',
   apiaudit_interview_time: 'Access Time',
+  apiaudit_interview_time_req: 'Request Time',
+  apiaudit_interview_time_db: 'Database Time',
   apiaudit_interview_time_start: 'Access start time',
   apiaudit_interview_time_end: 'Access end time',
   apiaudit_visit_result: 'Result',
@@ -412,11 +414,13 @@ export default {
   apiaudit_log_info: 'Log details',
   apiaudit_parameter: 'parameter',
   apiaudit_link: 'Link',
+  apiaudit_access_records_byte: 'Response Size',
   apiaudit_access_records: 'Return the number of rows',
   apiaudit_total_records: 'Match rows',
-  apiaudit_average_access_rate: 'API access rate',
-  apiaudit_access_time: 'Request access time',
-  apiaudit_average_response_time: 'Database response time',
+  apiaudit_average_access_db_rate: 'Database Response Rate',
+  apiaudit_average_access_time: 'API Response Time',
+  apiaudit_access_time: 'Total Request Time',
+  apiaudit_average_response_time: 'Database Time Consumption',
   apiaudit_success: 'success',
   apiaudit_placeholder: 'Please enter name/ID',
   apiaudit_client_name_placeholder: 'Please enter client name',
@@ -429,6 +433,11 @@ export default {
   connection_reload_schema_confirm_msg:
     'If there are too many schemas in this library, it may take a long time. Make sure to refresh the schema of the data source',
   connection_reload_schema_fail: 'Schema load failed',
+  apiaudit_time_line:"Time Line",
+  apiaudit_req_start_point: "Request start",
+  apiaudit_req_end_point: "Request to end",
+  apiaudit_db_start_point: "Database response starts",
+  apiaudit_db_end_point: "Database response completed",
   //Dag
   //Task edit缓存节点提示
   task_list_status_all: 'All status',
diff --git a/apps/daas/src/i18n/langs/zh-CN.js b/apps/daas/src/i18n/langs/zh-CN.js
index 36e6a33dd..4ea0e0a8c 100644
--- a/apps/daas/src/i18n/langs/zh-CN.js
+++ b/apps/daas/src/i18n/langs/zh-CN.js
@@ -391,6 +391,8 @@ export default {
   apiaudit_visitor: '客户端名称',
   apiaudit_ip: '访问人员IP',
   apiaudit_interview_time: '访问时间',
+  apiaudit_interview_time_req: '请求时间',
+  apiaudit_interview_time_db: '数据库时间',
   apiaudit_interview_time_start: '访问开始时间',
   apiaudit_interview_time_end: '访问结束时间',
   apiaudit_visit_result: '访问结果',
@@ -399,13 +401,21 @@ export default {
   apiaudit_parameter: '参数',
   apiaudit_link: '链接',
   apiaudit_access_records: '返回行数',
+  apiaudit_access_records_byte: '响应大小',
   apiaudit_total_records: '匹配行数',
-  apiaudit_average_access_rate: 'API 访问速率',
-  apiaudit_access_time: '请求访问耗时',
-  apiaudit_average_response_time: '数据库响应时间',
+  apiaudit_average_access_db_rate: '数据库响应速率',
+  apiaudit_average_access_time: 'API响应耗时',
+  apiaudit_access_time: '请求总耗时',
+  apiaudit_average_response_time: '数据库耗时',
   apiaudit_success: '成功',
   apiaudit_placeholder: '请输入名称/ID',
   apiaudit_client_name_placeholder: '请输入客户端名称',
+  apiaudit_time_line:"时间线",
+  apiaudit_req_start_point: "请求开始",
+  apiaudit_req_end_point: "请求结束",
+  apiaudit_db_start_point: "数据库响应开始",
+  apiaudit_db_end_point: "数据库响应结束",
+
   // 连接
   connection_list_form_database_type: '数据库类型',
   connection_list_name: '连接名',
diff --git a/apps/daas/src/i18n/langs/zh-TW.js b/apps/daas/src/i18n/langs/zh-TW.js
index 3a81b1147..d05dc2f93 100644
--- a/apps/daas/src/i18n/langs/zh-TW.js
+++ b/apps/daas/src/i18n/langs/zh-TW.js
@@ -392,6 +392,8 @@ export default {
   apiaudit_visitor: '客戶端名稱',
   apiaudit_ip: '訪問人員IP',
   apiaudit_interview_time: '訪問時間',
+  apiaudit_interview_time_req: '請求時間',
+  apiaudit_interview_time_db: '資料庫時間',
   apiaudit_interview_time_start: '訪問開始時間',
   apiaudit_interview_time_end: '訪問結束時間',
   apiaudit_visit_result: '訪問結果',
@@ -400,13 +402,20 @@ export default {
   apiaudit_parameter: '參數',
   apiaudit_link: '鏈接',
   apiaudit_access_records: '返回行數',
+  apiaudit_access_records_byte: '響應大小',
   apiaudit_total_records: '匹配行數',
-  apiaudit_average_access_rate: 'API 訪問速率',
-  apiaudit_access_time: '請求訪問耗時',
-  apiaudit_average_response_time: '數據庫回應時間',
+  apiaudit_average_access_db_rate: '數據庫響應速率',
+  apiaudit_average_access_time: 'API響應耗時',
+  apiaudit_access_time: '請求總耗時',
+  apiaudit_average_response_time: '資料庫耗時',
   apiaudit_success: '成功',
   apiaudit_placeholder: '請輸入名稱/ID',
   apiaudit_client_name_placeholder: '請輸入客戶端名稱',
+  apiaudit_time_line:"時間線",
+  apiaudit_req_start_point: "請求開始",
+  apiaudit_req_end_point: "請求結束",
+  apiaudit_db_start_point: "資料庫響應開始",
+  apiaudit_db_end_point: "資料庫響應結束",
   // 連接
   connection_list_form_database_type: '數據庫類型',
   connection_list_name: '連接名',
diff --git a/apps/daas/src/views/data-server-audit/Info.vue b/apps/daas/src/views/data-server-audit/Info.vue
index 610d5b2d7..6be794a44 100644
--- a/apps/daas/src/views/data-server-audit/Info.vue
+++ b/apps/daas/src/views/data-server-audit/Info.vue
@@ -13,31 +13,216 @@ export default {
     return {
       auditData: null,
       loading: true,
+      hoverTimelineSeg: null,
+      timelineTooltipPopperOptions: {
+        modifiers: [
+          {
+            name: 'offset',
+            options: { offset: [0, 8] },
+          },
+          {
+            name: 'flip',
+            options: {
+              fallbackPlacements: [
+                'top-start',
+                'top-end',
+                'bottom',
+                'bottom-start',
+                'bottom-end',
+              ],
+            },
+          },
+          {
+            name: 'preventOverflow',
+            options: { padding: 8 },
+          },
+        ],
+      },
       list: [
+        {
+          label: this.$t('apiaudit_total_records'),
+          key: 'totalRows',
+          value: 0,
+        },
         {
           label: this.$t('apiaudit_access_records'),
           key: 'visitTotalCount',
           value: 0,
         },
         {
-          label: this.$t('apiaudit_total_records'),
-          key: 'totalRows',
+          label: this.$t('apiaudit_access_records_byte'),
+          key: 'responseBytes',
           value: 0,
         },
+        { label: this.$t('apiaudit_access_time'), key: 'latency', value: 0 },
         {
-          label: this.$t('apiaudit_average_access_rate'),
-          key: 'speed',
+          label: this.$t('apiaudit_average_access_time'),
+          key: 'httpTime',
           value: 0,
         },
-        { label: this.$t('apiaudit_access_time'), key: 'latency', value: 0 },
         {
           label: this.$t('apiaudit_average_response_time'),
           key: 'dataQueryTotalTime',
           value: 0,
         },
+        {
+          label: this.$t('apiaudit_average_access_db_rate'),
+          key: 'dbRate',
+          value: 0,
+        },
       ],
     }
   },
+  computed: {
+    timelinePoints() {
+      if (!this.auditData) return []
+
+      const callStart = Number(this.auditData.callStart)
+      const callEnd = Number(this.auditData.callEnd)
+      const dbStart = Number(this.auditData.dataQueryFromTime)
+      const dbEnd = Number(this.auditData.dataQueryEndTime)
+
+      const reqOk =
+        Number.isFinite(callStart) &&
+        Number.isFinite(callEnd) &&
+        callEnd >= callStart
+      const dbOk =
+        reqOk &&
+        Number.isFinite(dbStart) &&
+        Number.isFinite(dbEnd) &&
+        dbEnd >= dbStart &&
+        dbStart >= callStart &&
+        dbEnd <= callEnd
+
+      const reqPoints = [
+        {
+          key: 'callStart',
+          label: this.$t('apiaudit_req_start_point'),
+          ts: this.auditData.callStart,
+          text: this.auditData.callStartTime || '-',
+          type: 'req',
+        },
+        {
+          key: 'callEnd',
+          label: this.$t('apiaudit_req_end_point'),
+          ts: this.auditData.callEnd,
+          text: this.auditData.callEndTime || '-',
+          type: 'req',
+        },
+      ]
+
+      if (!dbOk) {
+        return [
+          { ...reqPoints[0], left: 0 },
+          { ...reqPoints[1], left: 100 },
+        ]
+      }
+
+      const points = [
+        reqPoints[0],
+        {
+          key: 'dataQueryFromTime',
+          label: this.$t('apiaudit_db_start_point'),
+          ts: this.auditData.dataQueryFromTime,
+          text: this.auditData.dataQueryFrom || '-',
+          type: 'db',
+        },
+        {
+          key: 'dataQueryEndTime',
+          label: this.$t('apiaudit_db_end_point'),
+          ts: this.auditData.dataQueryEndTime,
+          text: this.auditData.dataQueryEnd || '-',
+          type: 'db',
+        },
+        reqPoints[1],
+      ]
+
+      const d0 = Math.max(0, dbStart - callStart)
+      const d1 = Math.max(0, dbEnd - dbStart)
+      const d2 = Math.max(0, callEnd - dbEnd)
+      const total = d0 + d1 + d2
+
+      let w0 = 33.3333
+      let w1 = 33.3333
+      if (total > 0) {
+        w0 = (d0 / total) * 100
+        w1 = (d1 / total) * 100
+      }
+
+      const lefts = [0, w0, w0 + w1, 100]
+      return points.map((p, i) => ({ ...p, left: lefts[i] }))
+    },
+    timelineSegments() {
+      if (!this.auditData) return []
+
+      const callStart = Number(this.auditData.callStart)
+      const dbStart = Number(this.auditData.dataQueryFromTime)
+      const dbEnd = Number(this.auditData.dataQueryEndTime)
+      const callEnd = Number(this.auditData.callEnd)
+
+      const reqOk =
+        Number.isFinite(callStart) &&
+        Number.isFinite(callEnd) &&
+        callEnd >= callStart
+      const dbOk =
+        reqOk &&
+        Number.isFinite(dbStart) &&
+        Number.isFinite(dbEnd) &&
+        dbEnd >= dbStart &&
+        dbStart >= callStart &&
+        dbEnd <= callEnd
+
+      if (!dbOk) {
+        return [
+          {
+            key: 'req',
+            type: reqOk ? 'req' : 'other',
+            width: 100,
+            startText: this.auditData.callStartTime || '-',
+            endText: this.auditData.callEndTime || '-',
+          },
+        ]
+      }
+
+      let w0 = 33.3333
+      let w1 = 33.3333
+      let w2 = 33.3334
+
+      const d0 = Math.max(0, dbStart - callStart)
+      const d1 = Math.max(0, dbEnd - dbStart)
+      const d2 = Math.max(0, callEnd - dbEnd)
+      const total = d0 + d1 + d2
+      if (total > 0) {
+        w0 = (d0 / total) * 100
+        w1 = (d1 / total) * 100
+        w2 = 100 - w0 - w1
+      }
+
+      return [
+        {
+          key: 'req-pre',
+          type: 'req',
+          width: w0,
+          startText: this.auditData.callStartTime || '-',
+          endText: this.auditData.dataQueryFrom || '-',
+        },
+        {
+          key: 'db',
+          type: 'db',
+          width: w1,
+          startText: this.auditData.dataQueryFrom || '-',
+          endText: this.auditData.dataQueryEnd || '-',
+        },
+        {
+          key: 'req-post',
+          type: 'req',
+          width: w2,
+          startText: this.auditData.dataQueryEnd || '-',
+          endText: this.auditData.callEndTime || '-',
+        },
+      ]
+    },
+  },
   created() {
     this.getData()
   },
@@ -54,8 +239,23 @@ export default {
             this.auditData.createAt = data.createAt
               ? dayjs(data.createAt).format('YYYY-MM-DD HH:mm:ss')
               : '-'
-            this.auditData.reqTime = this.auditData.reqTime
-              ? dayjs(this.auditData.reqTime).format('YYYY-MM-DD HH:mm:ss')
+            this.auditData.callStartTime = this.auditData.callStart
+              ? dayjs(this.auditData.callStart).format(
+                  'YYYY-MM-DD HH:mm:ss.SSS',
+                )
+              : '-'
+            this.auditData.callEndTime = this.auditData.callEnd
+              ? dayjs(this.auditData.callEnd).format('YYYY-MM-DD HH:mm:ss.SSS')
+              : '-'
+            this.auditData.dataQueryFrom = this.auditData.dataQueryFromTime
+              ? dayjs(this.auditData.dataQueryFromTime).format(
+                  'YYYY-MM-DD HH:mm:ss.SSS',
+                )
+              : '-'
+            this.auditData.dataQueryEnd = this.auditData.dataQueryEndTime
+              ? dayjs(this.auditData.dataQueryEndTime).format(
+                  'YYYY-MM-DD HH:mm:ss.SSS',
+                )
               : '-'
             const jsonData = this.auditData.body
               ? this.auditData.body
@@ -71,7 +271,7 @@ export default {
               this.auditData.jsonParam.json = jsonData
               this.auditData.jsonParam.validation = true
             } catch (error) {
-              console.log(`parseJsonData error: ${error}`)
+              console.error(`parseJsonData error: ${error}`)
             }
 
             this.list.forEach((item) => {
@@ -135,6 +335,38 @@ export default {
         console.error('JSON处理失败:', error)
       }
     },
+    isTimelinePointActive(pointIndex) {
+      if (
+        this.hoverTimelineSeg === null ||
+        this.hoverTimelineSeg === undefined
+      ) {
+        return false
+      }
+      return (
+        pointIndex === this.hoverTimelineSeg ||
+        pointIndex === this.hoverTimelineSeg + 1
+      )
+    },
+    timelineTooltipPlacement(pointIndex) {
+      if (
+        this.hoverTimelineSeg === null ||
+        this.hoverTimelineSeg === undefined ||
+        !this.isTimelinePointActive(pointIndex)
+      ) {
+        return 'top'
+      }
+
+      const startIndex = this.hoverTimelineSeg
+      const endIndex = this.hoverTimelineSeg + 1
+      const startLeft = Number(this.timelinePoints?.[startIndex]?.left)
+      const endLeft = Number(this.timelinePoints?.[endIndex]?.left)
+      const segWidth = endLeft - startLeft
+      const shouldSplit =
+        Number.isFinite(segWidth) && segWidth >= 0 && segWidth <= 18
+
+      if (!shouldSplit) return 'top'
+      return pointIndex === endIndex ? 'bottom' : 'top'
+    },
   },
 }
 </script>
@@ -161,10 +393,6 @@ export default {
             ><span class="font-text">{{ $t('apiaudit_link') }}:</span>
             <span class="fw-sub">{{ auditData.apiPath || '-' }}</span></ElCol
           >
-          <ElCol class="font-color-normal pb-4" :span="12"
-            ><span class="font-text">{{ $t('apiaudit_interview_time') }}:</span>
-            <span class="fw-sub"> {{ auditData.reqTime }}</span></ElCol
-          >
           <ElCol class="font-color-normal pb-4" :span="12"
             ><span class="font-text">{{ $t('apiaudit_ip') }}:</span>
             <span class="fw-sub break-all"> {{ auditData.userIp }}</span></ElCol
@@ -198,8 +426,84 @@ export default {
               auditData.codeMsg
             }}</span></ElCol
           >
+          <ElCol class="font-color-normal pb-4" :span="12"
+            ><span class="font-text"
+              >{{ $t('apiaudit_interview_time_req') }}:</span
+            >
+            <span class="fw-sub">
+              {{ auditData.callStartTime }} ~ {{ auditData.callEndTime }}</span
+            ></ElCol
+          >
+          <ElCol class="font-color-normal pb-4" :span="12"
+            ><span class="font-text"
+              >{{ $t('apiaudit_interview_time_db') }}:</span
+            >
+            <span class="fw-sub">
+              {{ auditData.dataQueryFrom }} ~ {{ auditData.dataQueryEnd }}</span
+            ></ElCol
+          >
         </ElRow>
       </div>
+
+      <div>
+        <div v-if="auditData" class="details-box py-6 mt-6 rounded-2">
+          <div class="title fs-7 fw-sub font-color-dark">{{$t('apiaudit_time_line')}}</div>
+          <div class="audit-timeline mt-4">
+            <div class="audit-timeline__bar-wrap">
+              <div class="audit-timeline__pad" />
+              <div class="audit-timeline__core">
+                <div class="audit-timeline__bar">
+                  <div
+                    v-for="(seg, idx) in timelineSegments"
+                    :key="seg.key"
+                    class="audit-timeline__seg"
+                    :class="[
+                      `audit-timeline__seg--${seg.type}`,
+                      { 'is-hover': hoverTimelineSeg === idx },
+                    ]"
+                    :style="{ width: `${seg.width}%` }"
+                    @mouseenter="hoverTimelineSeg = idx"
+                    @mouseleave="hoverTimelineSeg = null"
+                  />
+                </div>
+
+                <div class="audit-timeline__points">
+                  <div
+                    v-for="(p, i) in timelinePoints"
+                    :key="p.key"
+                    class="audit-timeline__point"
+                    :class="[
+                      `audit-timeline__point--${p.type}`,
+                      { 'is-active': isTimelinePointActive(i) },
+                    ]"
+                    :style="{ left: `${p.left}%` }"
+                  >
+                    <ElTooltip
+                      :content="p.text"
+                      :disabled="!isTimelinePointActive(i)"
+                      :visible="isTimelinePointActive(i)"
+                      :enterable="false"
+                      :show-after="0"
+                      :hide-after="0"
+                      :placement="timelineTooltipPlacement(i)"
+                      :popper-options="timelineTooltipPopperOptions"
+                    >
+                      <div class="audit-timeline__dot-wrap">
+                        <div class="audit-timeline__dot" />
+                      </div>
+                    </ElTooltip>
+                    <div class="audit-timeline__meta">
+                      <div class="audit-timeline__label">{{ p.label }}</div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="audit-timeline__pad" />
+            </div>
+          </div>
+        </div>
+      </div>
+
       <div class="details-box py-6 mt-6 rounded-2">
         <ul class="flex flex-row justify-content-center">
           <li
@@ -212,18 +516,30 @@ export default {
               <div
                 v-if="
                   item.value > 0 &&
-                  ['latency', 'dataQueryTotalTime'].includes(item.key)
+                  ['latency', 'httpTime', 'dataQueryTotalTime'].includes(
+                    item.key,
+                  )
                 "
                 class="color-primary pt-4 din-font details-box-item-num"
               >
                 {{ formatDuring(item.value) }}
               </div>
               <div
-                v-else-if="item.value > 0 && ['speed'].includes(item.key)"
+                v-else-if="
+                  item.value > 0 && ['httpRate', 'dbRate'].includes(item.key)
+                "
                 class="color-primary pt-4 din-font details-box-item-num"
               >
                 {{ item.value ? `${calcUnit(item.value, 'b')}/S` : '0 M/S' }}
               </div>
+              <div
+                v-else-if="
+                  item.value > 0 && ['responseBytes'].includes(item.key)
+                "
+                class="color-primary pt-4 din-font details-box-item-num"
+              >
+                {{ item.value ? `${calcUnit(item.value, 'B')}` : '0B' }}
+              </div>
               <div
                 v-else
                 class="color-primary pt-4 din-font details-box-item-num"
@@ -348,6 +664,180 @@ export default {
       }
     }
   }
+
+  .audit-timeline {
+    position: relative;
+    padding: 12px 8px 0;
+  }
+
+  .audit-timeline__bar-wrap {
+    position: relative;
+    padding-bottom: 62px;
+    display: flex;
+    align-items: center;
+  }
+
+  .audit-timeline__pad {
+    flex: 1;
+    height: 4px;
+    background: var(--el-border-color);
+    border-radius: 999px;
+    pointer-events: none;
+  }
+
+  .audit-timeline__core {
+    width: 70%;
+    position: relative;
+  }
+
+  .audit-timeline__bar {
+    position: relative;
+    width: 100%;
+    height: 4px;
+    border-radius: 999px;
+    overflow: visible;
+    background: var(--el-border-color);
+    display: flex;
+    align-items: stretch;
+  }
+
+  .audit-timeline__seg {
+    position: relative;
+    height: 4px;
+    transform-origin: center;
+    transition:
+      transform 320ms ease,
+      filter 320ms ease;
+    z-index: 1;
+    border-radius: 999px;
+    cursor: default;
+  }
+
+  .audit-timeline__seg.is-hover {
+    transform: scaleY(2);
+    z-index: 3;
+    filter: saturate(1.05);
+  }
+
+  .audit-timeline__seg--req {
+    background: var(--el-color-warning);
+  }
+
+  .audit-timeline__seg--db {
+    background: var(--el-color-primary);
+  }
+
+  .audit-timeline__seg--other {
+    background: var(--el-border-color);
+  }
+
+  .audit-timeline__points {
+    position: absolute;
+    top: 2px;
+    left: 0;
+    right: 0;
+    height: 0;
+    pointer-events: none;
+  }
+
+  .audit-timeline__point {
+    position: absolute;
+    top: 0;
+    width: 0;
+    transform: translateX(-50%);
+    transition: filter 240ms ease;
+    z-index: 4;
+  }
+
+  .audit-timeline__dot-wrap {
+    position: absolute;
+    top: 0;
+    left: 0;
+    transform: translate(-50%, -50%);
+    width: 10px;
+    height: 10px;
+    z-index: 5;
+  }
+
+  .audit-timeline__dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background: var(--el-bg-color);
+    border: 2px solid var(--el-border-color);
+    transition:
+      transform 240ms ease,
+      border-color 240ms ease,
+      background-color 240ms ease,
+      box-shadow 240ms ease;
+  }
+
+  .audit-timeline__meta {
+    position: absolute;
+    top: 10px;
+    left: 0;
+    transform: translateX(-50%);
+    width: 150px;
+    text-align: center;
+    white-space: normal;
+  }
+
+  .audit-timeline__point--req {
+    --timeline-accent: var(--el-color-warning);
+    --timeline-accent-shadow: rgba(230, 162, 60, 0.18);
+  }
+
+  .audit-timeline__point--db {
+    --timeline-accent: var(--el-color-primary);
+    --timeline-accent-shadow: rgba(64, 158, 255, 0.18);
+  }
+
+  .audit-timeline__point--other {
+    --timeline-accent: var(--el-border-color);
+    --timeline-accent-shadow: rgba(144, 147, 153, 0.15);
+  }
+
+  .audit-timeline__point--db .audit-timeline__meta {
+    top: 28px;
+  }
+
+  .audit-timeline__point--req .audit-timeline__dot,
+  .audit-timeline__point--db .audit-timeline__dot,
+  .audit-timeline__point--other .audit-timeline__dot {
+    border-color: var(--timeline-accent);
+  }
+
+  .audit-timeline__label {
+    font-size: 11px;
+    line-height: 14px;
+    color: var(--text-light);
+    margin-bottom: 2px;
+    transition:
+      color 240ms ease,
+      font-weight 240ms ease;
+  }
+
+  .audit-timeline__time {
+    font-size: 11px;
+    line-height: 14px;
+    color: var(--text-light);
+    transition:
+      color 240ms ease,
+      font-weight 240ms ease;
+  }
+
+  .audit-timeline__point.is-active .audit-timeline__dot {
+    transform: scale(1.15);
+    border-color: var(--timeline-accent);
+    background: var(--el-bg-color-overlay);
+    box-shadow: 0 0 0 4px var(--timeline-accent-shadow);
+  }
+
+  .audit-timeline__point.is-active .audit-timeline__label,
+  .audit-timeline__point.is-active .audit-timeline__time {
+    color: var(--text-dark);
+    font-weight: 600;
+  }
 }
 .jc-between {
   display: flex;