diff --git a/src/app/content/hemat-app/monitoring/building/building.component.css b/src/app/content/hemat-app/monitoring/building/building.component.css
index 8af24e3..ab56d4f 100644
--- a/src/app/content/hemat-app/monitoring/building/building.component.css
+++ b/src/app/content/hemat-app/monitoring/building/building.component.css
@@ -7,7 +7,7 @@
 }
 
 :host ::ng-deep .donut-chart1 .ct-series-a .ct-slice-donut {
-  stroke: #49ff52;
+  stroke: #01a32f;
   stroke-width: 20px !important;
 }
 
@@ -17,7 +17,7 @@
 }
 
 :host ::ng-deep .donut-chart2 .ct-series-a .ct-slice-donut {
-  stroke: #fff049;
+  stroke: #dcdf03;
   stroke-width: 20px !important;
 }
 
@@ -27,11 +27,20 @@
 }
 
 :host ::ng-deep .donut-chart3 .ct-series-a .ct-slice-donut {
-  stroke: #ff4c49;
+  stroke: #d50c08;
   stroke-width: 20px !important;
 }
 
 :host ::ng-deep .donut-chart3 .ct-series-b .ct-slice-donut {
   stroke: #757575;
   stroke-width: 20px !important;
-}
\ No newline at end of file
+}
+
+.btn-no-hover {
+  border: none !important;
+}
+
+.btn-no-hover:hover {
+  background-color: transparent !important;
+  color: inherit !important;
+}
diff --git a/src/app/content/hemat-app/monitoring/building/building.component.html b/src/app/content/hemat-app/monitoring/building/building.component.html
index 2207b46..7ff7feb 100644
--- a/src/app/content/hemat-app/monitoring/building/building.component.html
+++ b/src/app/content/hemat-app/monitoring/building/building.component.html
@@ -50,7 +50,14 @@
                 <hr style="border-top: 3px solid #100a0a" />
               </div>
               <div class="card-content">
-                <div class="donut-chart2">
+                <div
+                  [ngClass]="{
+                    'donut-chart1': data.donut.series[0] <= 50,
+                    'donut-chart2':
+                      data.donut.series[0] > 50 && data.donut.series[0] < 75,
+                    'donut-chart3': data.donut.series[0] >= 75
+                  }"
+                >
                   <x-chartist
                     *ngIf="data"
                     [data]="data.donut"
@@ -79,53 +86,18 @@
                 </div>
                 <div class="card-body" style="padding-top: 0">
                   <div class="row mb-3">
-                    <div class="col Started">
+                    <div
+                      class="col-xl-6 col-md-6 col-12"
+                      *ngFor="let top of dataTop; let i = index"
+                    >
                       <span class="mb-1 text-muted cardtext d-block"
-                        >23% - Lighning</span
-                      >
-                      <div>
-                        <ngb-progressbar
-                          height="7px"
-                          type="success"
-                          [value]="23"
-                        ></ngb-progressbar>
-                      </div>
-                    </div>
-                    <div class="col Progress">
-                      <span class="mb-1 text-muted cardtext d-block"
-                        >14% - In Progress</span
+                        >{{ top.value[i] }}% - {{ top.label[i] }}</span
                       >
                       <div>
                         <ngb-progressbar
                           height="7px"
                           type="danger"
-                          [value]="14"
-                        ></ngb-progressbar>
-                      </div>
-                    </div>
-                  </div>
-                  <div class="row mb-3">
-                    <div class="col Remaining">
-                      <span class="mb-1 text-muted cardtext d-block"
-                        >35% - Remaining</span
-                      >
-                      <div>
-                        <ngb-progressbar
-                          height="7px"
-                          type="warning"
-                          [value]="35"
-                        ></ngb-progressbar>
-                      </div>
-                    </div>
-                    <div class="col Done">
-                      <span class="mb-1 text-muted cardtext d-block"
-                        >28% - Started</span
-                      >
-                      <div>
-                        <ngb-progressbar
-                          height="7px"
-                          type="primary"
-                          [value]="28"
+                          [value]="top.value[i]"
                         ></ngb-progressbar>
                       </div>
                     </div>
diff --git a/src/app/content/hemat-app/monitoring/building/building.component.ts b/src/app/content/hemat-app/monitoring/building/building.component.ts
index 0e6a1f6..39f9c71 100644
--- a/src/app/content/hemat-app/monitoring/building/building.component.ts
+++ b/src/app/content/hemat-app/monitoring/building/building.component.ts
@@ -7,12 +7,12 @@ import { TableMonitoringService } from "../monitoring.service";
   styleUrls: ["./building.component.css"],
 })
 export class BuildingComponent {
-  Data: any;
+  data: any;
   public breadcrumb: any;
   feedbacksdonutChart: any;
   donutChart1: any;
   filteredRows: any[];
-  data: any[];
+  dataTop: any[];
   searchTerm: string = "";
   colorChart: string = "";
 
@@ -32,12 +32,9 @@ export class BuildingComponent {
     this.donutChart1 = {
       type: "Pie",
       options: {
-        donut: {
-          colors: ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff']
-        },
         fullwidth: true,
         height: "250px",
-        
+        donut: true,
         donutWidth: 60,
         startAngle: 270,
         total: 200,
@@ -48,18 +45,14 @@ export class BuildingComponent {
   }
 
   fetchData() {
-    this.monitoringService.getMonitoringBuildingData().subscribe((Response) => {
-      this.data = Response
-      this.filteredRows = Response
-      for (let i = 0; i < this.filteredRows.length; i++) {
-        if (this.filteredRows[i].donut.series[0] <= 50) {
-          this.colorChart = "donut-chart1"
-        } else if (this.filteredRows[i].donut.series[0] > 50 && this.filteredRows[i].donut.series[0] < 75) {
-          this.colorChart = "donut-chart2"
-        } else {
-          this.colorChart = "donut-chart3"
-        }
-      }
+    this.monitoringService.getMonitoringBuildingData().subscribe((res) => {
+      this.data = res
+      this.filteredRows = res
+      this.dataTop = res.map(item => ({
+        label: item.topUse.label,
+        value: item.topUse.value
+      }));
+      
     });
   }
 
diff --git a/src/assets/data/hemat/building.json b/src/assets/data/hemat/building.json
index 9848237..4324dc4 100644
--- a/src/assets/data/hemat/building.json
+++ b/src/assets/data/hemat/building.json
@@ -2,7 +2,11 @@
     {
       "id": 1,
       "build_name": "PT Allbest Solusi Sistem",
-      "total": "2345",
+      "total": "342",
+      "topUse": {
+        "label": ["Lightning", "Air Conditioner", "Security System", "Elevator"],
+        "value": [20, 40, 10, 30]
+      },
       "donut": {
         "series": [20, 80],
         "labels": []
@@ -11,7 +15,11 @@
     {
       "id": 2,
       "build_name": "PT Informa Media Pratama",
-      "total": "342",
+      "total": "670",
+      "topUse": {
+        "label": ["Lightning", "Air Conditioner", "Security System", "Elevator"],
+        "value": [20, 40, 10, 30]
+      },
       "donut": {
         "series": [40, 60],
         "labels": []
@@ -20,16 +28,24 @@
     {
       "id": 3,
       "build_name": "PT Ikea",
-      "total": "342",
+      "total": "1480",
+      "topUse": {
+        "label": ["Lightning", "Air Conditioner", "Security System", "Elevator"],
+        "value": [20, 40, 10, 30]
+      },
       "donut": {
-        "series": [50, 50],
+        "series": [70, 30],
         "labels": []
       }
     },
     {
       "id": 4,
       "build_name": "PT Tokopedia",
-      "total": "342",
+      "total": "2050",
+      "topUse": {
+        "label": ["Lightning", "Air Conditioner", "Security System", "Elevator"],
+        "value": [20, 40, 10, 30]
+      },
       "donut": {
         "series": [90, 10],
         "labels": []