diff --git a/src/views/detections/options/detectionOptions.js b/src/views/detections/options/detectionOptions.js
index be2bbcbf..ea7be2e5 100644
--- a/src/views/detections/options/detectionOptions.js
+++ b/src/views/detections/options/detectionOptions.js
@@ -41,12 +41,24 @@ const severityColorMappings = [
   { value: 'low', color: '#ffdd4a' },
   { value: 'info', color: '#d7c668' }
 ]
+const severityNumberColorMappings = [
+  { value: 5, color: '#d84c4c' },
+  { value: 4, color: '#ff9a79' },
+  { value: 3, color: '#ffb65a' },
+  { value: 2, color: '#ffdd4a' },
+  { value: 1, color: '#d7c668' }
+]
 
 export function getSeverityColor (type) {
   const mapping = severityColorMappings.find(m => m.value === type)
   return mapping && mapping.color ? _.cloneDeep(mapping.color) : null
 }
 
+export function getSeverityNumberColor (type) {
+  const mapping = severityNumberColorMappings.find(m => m.value === type)
+  return mapping && mapping.color ? _.cloneDeep(mapping.color) : null
+}
+
 export const multipleBarOption = {
   legend: {
     icon: 'circle',
diff --git a/src/views/detections/overview/IndicatorMatchOverview.vue b/src/views/detections/overview/IndicatorMatchOverview.vue
index 8a8baaa4..e9e41638 100644
--- a/src/views/detections/overview/IndicatorMatchOverview.vue
+++ b/src/views/detections/overview/IndicatorMatchOverview.vue
@@ -30,10 +30,10 @@
         <div class="row__label">{{ $t('npm.clientLocation') }}</div>
         <div class="row__content">
           <div>
-            <img v-if="myDetection.client_country_region===countryNameIdMapping.Unknown || !countryNameIdMapping[myDetection.client_country_region]" src="../../../../public/images/flag/Unknown.svg" class="filter-country-flag">
-            <img v-else :src="require(`../../../../public/images/flag/${countryNameIdMapping[myDetection.client_country_region]}.png`)" class="filter-country-flag" >
+            <img v-if="myDetection.clientCountryRegion===countryNameIdMapping.Unknown || !countryNameIdMapping[myDetection.clientCountryRegion]" src="../../../../public/images/flag/Unknown.svg" class="filter-country-flag">
+            <img v-else :src="require(`../../../../public/images/flag/${countryNameIdMapping[myDetection.clientCountryRegion]}.png`)" class="filter-country-flag" >
           </div>
-          {{ myDetection.client_country_region || '-' }}, {{ myDetection.client_super_admin_area || '-' }}
+          {{ myDetection.clientCountryRegion || '-' }}, {{ myDetection.clientSuperAdminArea || '-' }}
         </div>
       </div>
       <div class="overview__row">
@@ -44,10 +44,10 @@
         <div class="row__label">{{ $t('detection.detail.serverLocation') }}</div>
         <div class="row__content">
           <div>
-            <img v-if="myDetection.server_country_region===countryNameIdMapping.Unknown || !countryNameIdMapping[myDetection.server_country_region]" src="../../../../public/images/flag/Unknown.svg" class="filter-country-flag">
-            <img v-else :src="require(`../../../../public/images/flag/${countryNameIdMapping[myDetection.server_country_region]}.png`)" class="filter-country-flag" >
+            <img v-if="myDetection.serverCountryRegion===countryNameIdMapping.Unknown || !countryNameIdMapping[myDetection.serverCountryRegion]" src="../../../../public/images/flag/Unknown.svg" class="filter-country-flag">
+            <img v-else :src="require(`../../../../public/images/flag/${countryNameIdMapping[myDetection.serverCountryRegion]}.png`)" class="filter-country-flag" >
           </div>
-          {{ myDetection.server_country_region || '-' }}, {{ myDetection.server_super_admin_area || '-' }}
+          {{ myDetection.serverCountryRegion || '-' }}, {{ myDetection.serverSuperAdminArea || '-' }}
         </div>
       </div>
       <div class="overview__row">
diff --git a/src/views/detections/overview/detectionDetailMixin.js b/src/views/detections/overview/detectionDetailMixin.js
index 1e555d34..aa928e4b 100644
--- a/src/views/detections/overview/detectionDetailMixin.js
+++ b/src/views/detections/overview/detectionDetailMixin.js
@@ -2,7 +2,7 @@ import { detectionEventType, detectionRuleType } from '@/utils/constants'
 import { getMillisecond, getSecond } from '@/utils/date-util'
 import axios from 'axios'
 import { api } from '@/utils/api'
-import { getSeverityColor, lineOption } from '@/views/detections/options/detectionOptions'
+import { getSeverityNumberColor, lineOption } from '@/views/detections/options/detectionOptions'
 import { markRaw } from 'vue'
 import * as echarts from 'echarts'
 
@@ -73,7 +73,7 @@ export default {
               seriesData.push([getMillisecond(JSON.parse(item.statTime)), item.recordsNums])
             })
             this.lineOption.series[0].data = seriesData
-            this.lineOption.series[0].color = getSeverityColor(res.data.data.result[0].severity) || '#ff9a79'
+            this.lineOption.series[0].color = getSeverityNumberColor(res.data.data.result[0].severity) || '#ff9a79'
 
             this.seriesDataNum = seriesData.length
             if (this.seriesDataNum <= 1) {