diff --git a/src/assets/css/components/views/charts/chartSingleValue.scss b/src/assets/css/components/views/charts/chartSingleValue.scss
index 1f88cf04..118ea687 100644
--- a/src/assets/css/components/views/charts/chartSingleValue.scss
+++ b/src/assets/css/components/views/charts/chartSingleValue.scss
@@ -456,31 +456,30 @@
     align-items: center;
     justify-content: left;
     height: 100%;
-    width: unset;
-    flex: 0 0 270px;
-    flex-wrap: wrap;
+    flex: 0 0 auto;
+    flex-wrap: nowrap;
     margin-bottom: 10px;
 
     .single-value-icon__box {
       display: flex;
       align-items: center;
       justify-content: left;
-      margin-right: 12px;
+      margin-right: 5px;
       flex: 0 0 80;
     }
 
     .single-value__icon {
       display: flex;
       justify-content: center;
-      width: 56px;
-      height: 56px;
+      width: 40px;
+      height: 40px;
       background-color: $--chart-single-value-icon-background-color;
       border-radius: 50%;
 
       i {
         display: flex;
         align-items: center;
-        font-size: 28px;
+        font-size: 20px;
         color: $--color-primary;
       }
     }
@@ -498,20 +497,18 @@
       }
 
       .content__data {
-        margin-bottom: 7%;
-        font-size: 16px;
+        margin-bottom: 5px;
+        font-size: 12px;
         color: #333333;
         font-weight: bold;
       }
 
       .content__title {
-        overflow: hidden;
         white-space: nowrap;
-        text-overflow: ellipsis;
-        font-size: 14px !important;
+        font-size: 12px !important;
         color: #7e8081;
-        margin-bottom: 7%;
-        padding: 5px 6px 5px 5px;
+        margin-bottom: 5px;
+        padding: 3px 4px 3px 3px;
       }
 
       .title-background-color {
@@ -522,7 +519,7 @@
       .content__percentile {
         white-space: nowrap;
         text-overflow: ellipsis;
-        font-size: 14px;
+        font-size: 12px;
         color: #666666;
         display:flex;
         flex-direction: row;
@@ -530,7 +527,7 @@
         .circle__content {
           display:flex;
           flex-display:row;
-          margin-right:15px;
+          margin-right:4px;
 
           .percentile__title-color {
             color:#9b9b9b
@@ -565,7 +562,8 @@
       }
 
       .single-value__unit {
-        padding-right: 10px;
+        padding-left:0px;
+        padding-right: 5px;
         color: #333333;
         font-size: 14px;
         font-weight: bold;
diff --git a/src/views/charts/charts/ChartSingleValue.vue b/src/views/charts/charts/ChartSingleValue.vue
index a33686e4..3006e5da 100644
--- a/src/views/charts/charts/ChartSingleValue.vue
+++ b/src/views/charts/charts/ChartSingleValue.vue
@@ -35,12 +35,11 @@
     <div class="single-value__content" v-if="isSingleValueWithPercentileRight(type)">
       <div class="data__title-in-one">
         <div class="content__data">
-          <span>{{
+          <span style="white-space: nowrap;">{{
             handleSingleValue[0] || handleSingleValue[0] === 0
               ? handleSingleValue[0]
               : '-'
-          }}</span>
-          <span class="single-value__unit">{{ handleSingleValue[1] }}</span>
+          }}</span><span class="single-value__unit">{{handleSingleValue[1] }}</span>
         </div>
         <div class="content__title title-background-color">
             <span :title="chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name">{{
@@ -281,7 +280,7 @@ export default {
     handleSingleValue () {
       let value = null
       if (this.type === 506 || this.type === 507) {
-        value = this.chartData && (this.chartData[0].value || this.chartData[0].value === 0) ? this.chartData[0].value : ''
+        value = this.chartData && (this.chartData.value || this.chartData.value === 0) ? this.chartData.value : ''
       } else {
         value = this.$_.isEmpty(this.chartData) || this.$_.get(this, 'chartData')
           ? this.chartData
@@ -294,8 +293,8 @@ export default {
       let p50 = ''
       let p90 = ''
       if (this.type === 506 || this.type === 507) {
-        p50 = this.chartData ? unitConvert(this.chartData[0].p50, unitType) : ''
-        p90 = this.chartData ? unitConvert(this.chartData[0].p90, unitType) : ''
+        p50 = this.chartData ? unitConvert(this.chartData.p50, unitType) : ''
+        p90 = this.chartData ? unitConvert(this.chartData.p90, unitType) : ''
       }
 
       switch (unitType) {
diff --git a/src/views/entityExplorer/entityList/detailOverview/App.vue b/src/views/entityExplorer/entityList/detailOverview/App.vue
index bbfd308f..adee10f2 100644
--- a/src/views/entityExplorer/entityList/detailOverview/App.vue
+++ b/src/views/entityExplorer/entityList/detailOverview/App.vue
@@ -100,7 +100,7 @@
   <div class="overview-item">
     <div class="overview__title">{{$t('overall.networkQuality')}}</div>
     <div class="overview__content">
-      <div class="overview__row">
+      <div class="overview__row" style="flex-wrap: nowrap;">
         <chart-single-value
             v-for="(chartInfo, i) in singleValues.chartInfos"
             :chart-info="chartInfo"
diff --git a/src/views/entityExplorer/entityList/detailOverview/Domain.vue b/src/views/entityExplorer/entityList/detailOverview/Domain.vue
index 75712f7a..cda99088 100644
--- a/src/views/entityExplorer/entityList/detailOverview/Domain.vue
+++ b/src/views/entityExplorer/entityList/detailOverview/Domain.vue
@@ -104,7 +104,7 @@
   <div class="overview-item">
     <div class="overview__title">{{$t('overall.networkQuality')}}</div>
     <div class="overview__content">
-      <div class="overview__row">
+      <div class="overview__row" style="flex-wrap: nowrap;">
         <chart-single-value
           v-for="(chartInfo, i) in singleValues.chartInfos"
           :chart-info="chartInfo"
diff --git a/src/views/entityExplorer/entityList/detailOverview/Ip.vue b/src/views/entityExplorer/entityList/detailOverview/Ip.vue
index 50236ac0..920f0419 100644
--- a/src/views/entityExplorer/entityList/detailOverview/Ip.vue
+++ b/src/views/entityExplorer/entityList/detailOverview/Ip.vue
@@ -123,7 +123,7 @@
   <div class="overview-item">
     <div class="overview__title">{{$t('overall.networkQuality')}}</div>
     <div class="overview__content">
-      <div class="overview__row">
+      <div class="overview__row" style="flex-wrap: nowrap;">
         <chart-single-value
             v-for="(chartInfo, i) in singleValues.chartInfos"
             :chart-info="chartInfo"
diff --git a/src/views/entityExplorer/entityList/detailOverview/entityDetailMixin.js b/src/views/entityExplorer/entityList/detailOverview/entityDetailMixin.js
index 56dd24b9..7d034871 100644
--- a/src/views/entityExplorer/entityList/detailOverview/entityDetailMixin.js
+++ b/src/views/entityExplorer/entityList/detailOverview/entityDetailMixin.js
@@ -148,17 +148,58 @@ export default {
       if (this.networkQuantityUrl) {
         get(this.networkQuantityUrl, this.getQueryParams()).then(response => {
           if (response.code === 200) {
-            this.entityData.establishLatency = response.data.result.establishLatency
-            this.entityData.httpResponseLatency = response.data.result.httpResponseLatency
-            this.entityData.sslConLatency = response.data.result.sslConLatency
-            this.entityData.sequenceGapLossPercent = response.data.result.sequenceGapLossPercent
-            this.entityData.pktRetransPercent = response.data.result.pktRetransPercent
+            this.entityData.establishLatencyAvg = response.data.result.establishLatencyAvg
+            this.entityData.establishLatencyP50 = response.data.result.establishLatencyP50
+            this.entityData.establishLatencyP90 = response.data.result.establishLatencyP90
 
-            this.singleValues.chartDatas.splice(0, 1, this.$_.get(this.entityData, 'establishLatency'))
-            this.singleValues.chartDatas.splice(1, 1, this.$_.get(this.entityData, 'httpResponseLatency'))
-            this.singleValues.chartDatas.splice(2, 1, this.$_.get(this.entityData, 'sslConLatency'))
-            this.singleValues.chartDatas.splice(3, 1, this.$_.get(this.entityData, 'sequenceGapLossPercent'))
-            this.singleValues.chartDatas.splice(4, 1, this.$_.get(this.entityData, 'pktRetransPercent'))
+            this.entityData.httpResponseLantencyAvg = response.data.result.httpResponseLantencyAvg
+            this.entityData.httpResponseLantencyP50 = response.data.result.httpResponseLantencyP50
+            this.entityData.httpResponseLantencyP90 = response.data.result.httpResponseLantencyP90
+
+            this.entityData.sslConLatencyAvg = response.data.result.sslConLatencyAvg
+            this.entityData.sslConLatencyP50 = response.data.result.sslConLatencyP50
+            this.entityData.sslConLatencyP90 = response.data.result.sslConLatencyP90
+
+            this.entityData.sequenceGapLossAvg = response.data.result.sequenceGapLossAvg
+            this.entityData.sequenceGapLossP50 = response.data.result.sequenceGapLossP50
+            this.entityData.sequenceGapLossP90 = response.data.result.sequenceGapLossP90
+
+            this.entityData.pktRetransAvg = response.data.result.pktRetransAvg
+            this.entityData.pktRetransP50 = response.data.result.pktRetransP50
+            this.entityData.pktRetransP90 = response.data.result.pktRetransP90
+
+            const establishLatency = {
+              value: this.entityData.establishLatencyAvg,
+              p50: this.entityData.establishLatencyP50,
+              p90: this.entityData.establishLatencyP90
+            }
+            this.singleValues.chartDatas.splice(0, 1, establishLatency)
+            const httpResponseLatency = {
+              value: this.entityData.httpResponseLantencyAvg,
+              p50: this.entityData.httpResponseLantencyP50,
+              p90: this.entityData.httpResponseLantencyP90
+            }
+            this.singleValues.chartDatas.splice(1, 1, httpResponseLatency)
+            const sslConLatency = {
+              value: this.entityData.sslConLatencyAvg,
+              p50: this.entityData.sslConLatencyP50,
+              p90: this.entityData.sslConLatencyP90
+            }
+            this.singleValues.chartDatas.splice(2, 1, sslConLatency)
+            const sequenceGapLoss = {
+              value: this.entityData.sequenceGapLossAvg,
+              p50: this.entityData.sequenceGapLossP50,
+              p90: this.entityData.sequenceGapLossP90
+            }
+            this.singleValues.chartDatas.splice(3, 1, sequenceGapLoss)
+            const pktRetransPercent = {
+              value: this.entityData.pktRetransAvg,
+              p50: this.entityData.pktRetransP50,
+              p90: this.entityData.pktRetransP90
+            }
+            this.singleValues.chartDatas.splice(4, 1, pktRetransPercent)
+
+            console.log(this.singleValues.chartDatas)
           }
         })
       }
@@ -181,7 +222,7 @@ export default {
               })
               const max = parseFloat(sorted[0].bytes)
               const maxId = parseFloat(sortedId[0].commonIngressLinkId)
-              this.entityData.linkInPercent = (parseFloat(max / sum)).toFixed(2)
+              this.entityData.linkInPercent = (parseFloat(max / sum) * 100).toFixed(2)
               this.entityData.linkInId = maxId
             }
           }
@@ -206,7 +247,7 @@ export default {
               })
               const max = parseFloat(sorted[0].bytes)
               const maxId = parseFloat(sortedId[0].commonEgressLinkId)
-              this.entityData.linkOutPercent = (parseFloat(max / sum)).toFixed(2)
+              this.entityData.linkOutPercent = (parseFloat(max / sum) * 100).toFixed(2)
               this.entityData.linkOutId = maxId
             }
           }