diff --git a/src/components/charts/StatisticsLegend.vue b/src/components/charts/StatisticsLegend.vue
index 36bab3e6..63089225 100644
--- a/src/components/charts/StatisticsLegend.vue
+++ b/src/components/charts/StatisticsLegend.vue
@@ -1,18 +1,22 @@
 <template>
   <div class="chart__legend">
-    <div class="charts__table-top">
-      <p class="location">Average</p>
-      <p class="locations">Maximum</p>
+    <div class="chart__table-top">
+    <div class="chart__table-box">
+      <div>Average</div>
+      <div>Maximum</div>
     </div>
-    <div class="legend__table">
-      <table>
-        <tr v-for="(d, i) in data" :key="i" class="legend__row">
-          <td style="width: 40px;"><div :style="{backgroundColor: getChartColor(i)}" class="legend__row-top" :title="getChartColor(i)"></div></td>
-          <td><div class="text__show" :title="d.legend">{{d.legend}}</div></td>
-          <td style="width: 70px;"><div :title="d.aggregation.avg">{{d.aggregation.avg}}</div></td>
-          <td style="width: 70px;"><div :title="d.aggregation.max">{{d.aggregation.max}}</div></td>
-        </tr>
-      </table>
+    </div>
+    <div class="chart__table-below">
+      <div v-for="(item,index) in data" :key="index" class="table-below-box">
+        <div class="table-below-account">
+        <div :style="{backgroundColor: getChartColor(index)}" class="table__below-color"></div>
+        <div class="table__below-title">{{item.legend}}</div>
+        </div>
+        <div class="table__below-flashback">
+          <div  class="table__below-max">{{item.aggregation.max}}</div>
+          <div class="table__below-avg">{{item.aggregation.avg}}</div>
+        </div>
+      </div>
     </div>
   </div>
 
@@ -53,53 +57,68 @@ export default {
   color:#5f6368;
   margin: auto;
 }
-.text__show {
-  max-width: 240px;
-  overflow: hidden;
-  text-overflow:ellipsis;
-  white-space: nowrap;
-}
-.charts__table-top{
-  position: relative;
+.chart__table-top{
   width: 455px;
   height: 30px;
   border-bottom: #E7EAED 0.96px solid;
-}
-.location{
-  position: absolute;
-  right: 110px;
-  top: -9px;
-  font-size: 13px;
-  color: #0091FF;
-}
-.locations{
-  position: absolute;
-  right: 25px;
-  top: -8px;
-  font-size: 13px;
-  color: #0091FF;
-}
-.legend__row-top{
-  width: 17px;
-  height: 7px;
-  border-radius: 24%;
-  margin-left: 15px;
-}
-.legend__table {
-  overflow: auto;
-  height: calc(100% - 30px);
-
-  table {
-    width: 100%;
+  display: flex;
+  flex-direction:row-reverse;
+  .chart__table-box{
+    width: 185px;
+    height: 30px;
+    display: flex;
+    align-items: center;
+    font-family: Roboto-Regular;
+    font-size: 14px;
+    color: #0091FF;
+    font-weight: 400;
+    justify-content: space-around;
   }
 }
-.legend__row{
-  font-size: 12px;
-  box-sizing: border-box;
-}
-.legend__row:hover {
-  background-color: #f9f9f9;
-  border: 0;
-  color: #383838;
+.chart__table-below{
+  width: 455px;
+  overflow: auto;
+  height: calc(100% - 30px);
+  .table-below-box{
+    width: 100%;
+    display: flex;
+    font-size: 15px;
+    align-items: center;
+    .table-below-account{
+      width: 310px;
+      height: calc(100% - 30px);
+      display: flex;
+      align-items: center;
+      padding-left: 16px;
+    }
+    .table__below-flashback{
+      width: 211px;
+      height: calc(100% - 30px);
+      display: flex;
+      flex-direction:row-reverse;
+      align-items: center;
+      justify-content: space-around;
+    }
+  }
+  .table-below-box:hover{
+    background-color: #f9f9f9;
+    border: 0;
+    color: #383838;
+  }
+  .table__below-color{
+    width: 17px;
+    height: 7px;
+    border-radius: 24%;
+  }
+  .table__below-title{
+    max-width: 141px;
+    overflow: hidden;
+    text-overflow:ellipsis;
+    white-space: nowrap;
+  }
+  .table__below-avg{
+  }
 }
+  .table__below-max{
+  }
 </style>