diff --git a/src/app/content/dashboard/sales/sales.component.css b/src/app/content/dashboard/sales/sales.component.css
index f3a877a..66fce9d 100644
--- a/src/app/content/dashboard/sales/sales.component.css
+++ b/src/app/content/dashboard/sales/sales.component.css
@@ -52,7 +52,7 @@
 }
 
 :host ::ng-deep .donut-chart2 .ct-series-b .ct-slice-donut {
-    stroke: #ff4961;
+    stroke: #7949ff;
     stroke-width: 5.5px !important;
 }
 :host ::ng-deep .donut-chart2 {
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 41da42e..8af24e3 100644
--- a/src/app/content/hemat-app/monitoring/building/building.component.css
+++ b/src/app/content/hemat-app/monitoring/building/building.component.css
@@ -6,3 +6,32 @@
   background: rgba(255, 249, 249, 0.5) !important;
 }
 
+:host ::ng-deep .donut-chart1 .ct-series-a .ct-slice-donut {
+  stroke: #49ff52;
+  stroke-width: 20px !important;
+}
+
+:host ::ng-deep .donut-chart1 .ct-series-b .ct-slice-donut {
+  stroke: #757575;
+  stroke-width: 20px !important;
+}
+
+:host ::ng-deep .donut-chart2 .ct-series-a .ct-slice-donut {
+  stroke: #fff049;
+  stroke-width: 20px !important;
+}
+
+:host ::ng-deep .donut-chart2 .ct-series-b .ct-slice-donut {
+  stroke: #757575;
+  stroke-width: 20px !important;
+}
+
+:host ::ng-deep .donut-chart3 .ct-series-a .ct-slice-donut {
+  stroke: #ff4c49;
+  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
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 dec2d6c..2207b46 100644
--- a/src/app/content/hemat-app/monitoring/building/building.component.html
+++ b/src/app/content/hemat-app/monitoring/building/building.component.html
@@ -7,7 +7,13 @@
       <section id="social-cards">
         <div class="row mb-2">
           <div class="col-md-6">
-            <input type="text" class="form-control" placeholder="Search..." />
+            <input
+              type="text"
+              class="form-control"
+              placeholder="Search..."
+              [(ngModel)]="searchTerm"
+              (input)="filterRows()"
+            />
           </div>
           <div class="col-md-6 text-right">
             <button
@@ -19,7 +25,10 @@
           </div>
         </div>
         <div class="row mt-2">
-          <div class="col-xl-4 col-md-6 col-12" *ngFor="let data of dataArray">
+          <div
+            class="col-xl-4 col-md-6 col-12"
+            *ngFor="let data of filteredRows"
+          >
             <div class="card">
               <div class="card-header mb-2">
                 <div class="row">
@@ -41,14 +50,16 @@
                 <hr style="border-top: 3px solid #100a0a" />
               </div>
               <div class="card-content">
-                <x-chartist
-                  *ngIf="data"
-                  [data]="data.donut"
-                  [type]="donutChart1.type"
-                  [options]="donutChart1.options"
-                  [events]="donutChart1.events"
-                >
-                </x-chartist>
+                <div class="donut-chart2">
+                  <x-chartist
+                    *ngIf="data"
+                    [data]="data.donut"
+                    [type]="donutChart1.type"
+                    [options]="donutChart1.options"
+                    [events]="donutChart1.events"
+                  >
+                  </x-chartist>
+                </div>
 
                 <div
                   class="text-center"
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 201a10f..0e6a1f6 100644
--- a/src/app/content/hemat-app/monitoring/building/building.component.ts
+++ b/src/app/content/hemat-app/monitoring/building/building.component.ts
@@ -1,4 +1,5 @@
 import { Component } from "@angular/core";
+import { TableMonitoringService } from "../monitoring.service";
 
 @Component({
   selector: "app-building",
@@ -10,47 +11,12 @@ export class BuildingComponent {
   public breadcrumb: any;
   feedbacksdonutChart: any;
   donutChart1: any;
+  filteredRows: any[];
+  data: any[];
+  searchTerm: string = "";
+  colorChart: string = "";
 
-  dataArray = [
-    {
-      id: 1,
-      build_name: "PT Allbest Solusi Sistem",
-      total: "2345",
-      donut: {
-        series: [20, 80],
-        labels: [],
-      },
-    },
-    {
-      id: 2,
-      build_name: "PT Informa Media Pratama",
-      total: "342",
-      donut: {
-        series: [40, 60],
-        labels: [],
-      },
-    },
-    {
-      id: 3,
-      build_name: "PT Ikea",
-      total: "342",
-      donut: {
-        series: [50, 50],
-        labels: [],
-      },
-    },
-    {
-      id: 4,
-      build_name: "PT Tokopedia",
-      total: "342",
-      donut: {
-        series: [90, 10],
-        labels: [],
-      },
-    },
-  ];
-
-  constructor() {}
+  constructor(private monitoringService: TableMonitoringService) {}
 
   ngOnInit() {
     this.breadcrumb = {
@@ -66,16 +32,53 @@ 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,
         showLabel: false,
       },
     };
+    this.fetchData();
+  }
 
+  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"
+        }
+      }
+    });
+  }
+
+  filterRows() {
+    if (!this.searchTerm) {
+      this.filteredRows = [...this.data];
+    } else {
+      this.filteredRows = this.data.filter((row) =>
+        this.rowContainsSearchTerm(row)
+      );
+    }
+  }
+
+  rowContainsSearchTerm(row: any): boolean {
+    const searchTermLC = this.searchTerm.toLowerCase();
+    return Object.values(row).some(
+      (value) =>
+        value !== null && value.toString().toLowerCase().includes(searchTermLC)
+    );
   }
 
 }
diff --git a/src/app/content/hemat-app/monitoring/monitoring.service.ts b/src/app/content/hemat-app/monitoring/monitoring.service.ts
new file mode 100644
index 0000000..f3d4122
--- /dev/null
+++ b/src/app/content/hemat-app/monitoring/monitoring.service.ts
@@ -0,0 +1,51 @@
+import { Injectable } from '@angular/core';
+import { Observable, of, throwError } from 'rxjs';
+import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http';
+import { catchError, tap, map } from 'rxjs/operators';
+
+const httpOptions = {
+  headers: new HttpHeaders({ 'Content-Type': 'application/json' })
+};
+@Injectable({
+  providedIn: 'root'
+})
+export class TableMonitoringService {
+
+  apiBaseURL = 'assets/data';
+  loadMonitoringRoomDataURL = null;
+  loadMonitoringBuildingDataURL = null;
+   constructor(private http: HttpClient) {
+    this.loadMonitoringRoomDataURL = `${this.apiBaseURL}/hemat/monitoring.json`;
+    this.loadMonitoringBuildingDataURL = `${this.apiBaseURL}/hemat/building.json`;
+  }
+  private handleError(error: HttpErrorResponse) {
+    if (error.error instanceof ErrorEvent) {
+      // Error
+      console.error('error:', error.error.message);
+    } else {
+      // Error
+      console.error(
+        `Api server returned ${error.status}, ` +
+        `error body: ${error.error}`);
+    }
+    // throwError is observable
+    return throwError('Error has happened');
+  }
+
+  private extractData(res: Response) {
+    const body = res;
+    return body || {};
+  }
+
+
+  getMonitoringRoomData(): Observable<any> {
+    return this.http.get(this.loadMonitoringRoomDataURL, httpOptions);
+  }
+
+  getMonitoringBuildingData(): Observable<any> {
+    return this.http.get(this.loadMonitoringBuildingDataURL, httpOptions);
+  }
+
+  
+}
+
diff --git a/src/app/content/hemat-app/monitoring/room/room.component.html b/src/app/content/hemat-app/monitoring/room/room.component.html
index 8c8127f..78448fb 100644
--- a/src/app/content/hemat-app/monitoring/room/room.component.html
+++ b/src/app/content/hemat-app/monitoring/room/room.component.html
@@ -7,7 +7,8 @@
       <section id="social-cards">
         <div class="row mb-2">
           <div class="col-md-6">
-            <input type="text" class="form-control" placeholder="Search..." />
+            <input type="text" class="form-control" placeholder="Search..." [(ngModel)]="searchTerm"
+            (input)="filterRows()" />
           </div>
           <div class="col-md-6 text-right">
             <button
diff --git a/src/app/content/hemat-app/monitoring/room/room.component.ts b/src/app/content/hemat-app/monitoring/room/room.component.ts
index 04b1035..18c2630 100644
--- a/src/app/content/hemat-app/monitoring/room/room.component.ts
+++ b/src/app/content/hemat-app/monitoring/room/room.component.ts
@@ -1,5 +1,6 @@
 import { Component, OnInit } from "@angular/core";
 import { ActivatedRoute } from "@angular/router";
+import { TableMonitoringService } from "../monitoring.service";
 
 @Component({
   selector: "app-room",
@@ -9,82 +10,19 @@ import { ActivatedRoute } from "@angular/router";
 export class RoomComponent implements OnInit {
   public breadcrumb: any;
   mode: string;
-  // filteredRows: any[];
+  filteredRows: any[];
+  data: any[];
   searchTerm: string = "";
-  ;
-  filteredRows = [
-    {
-      type: "danger",
-      value: 95,
-      product: "Ruang Meeting 1",
-      buttonname: "Mobile",
-      amount: "$ 1200.00",
-      bagde: "+8 more",
-    },
-    {
-      type: "warning",
-      value: 75,
-      product: "Ruang Meeting 2",
-      buttonname: "Teblet",
-      amount: "$ 1190.00",
-      bagde: "+5 more",
-    },
-    {
-      type: "success",
-      value: 65,
-      product: "Ruang Meeting 3",
-      buttonname: "Mobile",
-      amount: "$ 999.00",
-      bagde: "+3 more",
-    },
-    {
-      type: "success",
-      value: 55,
-      product: "Dapur",
-      buttonname: "Teblet",
-      amount: "$ 1150.00",
-    },
-    {
-      type: "success",
-      value: 45,
-      product: "Ruang Musola",
-      buttonname: "Mobile",
-      amount: "$ 1180.00",
-    },
-    {
-      type: "danger",
-      value: 90,
-      product: "Ruang Server",
-      buttonname: "Mobile",
-      amount: "$ 1200.00",
-      bagde: "+8 more",
-    },
-    {
-      type: "warning",
-      value: 75,
-      product: "Ruang Kepala Bagian",
-      buttonname: "Teblet",
-      amount: "$ 1190.00",
-      bagde: "+5 more",
-    },
-    {
-      type: "success",
-      value: 65,
-      product: "Ruang Tengah",
-      buttonname: "Mobile",
-      amount: "$ 999.00",
-      bagde: "+3 more",
-    },
-  ];
-  
 
-  constructor(private route: ActivatedRoute) {}
+  constructor(
+    private route: ActivatedRoute,
+    private monitoringService: TableMonitoringService
+  ) {}
 
   ngOnInit() {
     this.route.data.subscribe((data) => {
       this.mode = data.mode;
     });
-    console.log(this.mode);
     this.breadcrumb = {
       mainlabel: "Room",
       links: [
@@ -99,13 +37,22 @@ export class RoomComponent implements OnInit {
         },
       ],
     };
+    this.fetchData();
+    
+  }
+
+  fetchData() {
+    this.monitoringService.getMonitoringRoomData().subscribe((Response) => {
+      this.data = Response;
+      this.filteredRows = Response;
+    });
   }
 
   filterRows() {
     if (!this.searchTerm) {
-      this.filteredRows = [...this.filteredRows];
+      this.filteredRows = [...this.data];
     } else {
-      this.filteredRows = this.filteredRows.filter((row) =>
+      this.filteredRows = this.data.filter((row) =>
         this.rowContainsSearchTerm(row)
       );
     }
diff --git a/src/assets/data/hemat/building.json b/src/assets/data/hemat/building.json
new file mode 100644
index 0000000..9848237
--- /dev/null
+++ b/src/assets/data/hemat/building.json
@@ -0,0 +1,38 @@
+[
+    {
+      "id": 1,
+      "build_name": "PT Allbest Solusi Sistem",
+      "total": "2345",
+      "donut": {
+        "series": [20, 80],
+        "labels": []
+      }
+    },
+    {
+      "id": 2,
+      "build_name": "PT Informa Media Pratama",
+      "total": "342",
+      "donut": {
+        "series": [40, 60],
+        "labels": []
+      }
+    },
+    {
+      "id": 3,
+      "build_name": "PT Ikea",
+      "total": "342",
+      "donut": {
+        "series": [50, 50],
+        "labels": []
+      }
+    },
+    {
+      "id": 4,
+      "build_name": "PT Tokopedia",
+      "total": "342",
+      "donut": {
+        "series": [90, 10],
+        "labels": []
+      }
+    }
+  ]
\ No newline at end of file
diff --git a/src/assets/data/hemat/monitoring.json b/src/assets/data/hemat/monitoring.json
new file mode 100644
index 0000000..c82974b
--- /dev/null
+++ b/src/assets/data/hemat/monitoring.json
@@ -0,0 +1,64 @@
+[
+  {
+    "type": "danger",
+    "value": 95,
+    "product": "Ruang Meeting 1",
+    "buttonname": "Mobile",
+    "amount": "$ 1200.00",
+    "bagde": "+8 more"
+  },
+  {
+    "type": "warning",
+    "value": 75,
+    "product": "Ruang Meeting 2",
+    "buttonname": "Teblet",
+    "amount": "$ 1190.00",
+    "bagde": "+5 more"
+  },
+  {
+    "type": "success",
+    "value": 65,
+    "product": "Ruang Meeting 3",
+    "buttonname": "Mobile",
+    "amount": "$ 999.00",
+    "bagde": "+3 more"
+  },
+  {
+    "type": "success",
+    "value": 55,
+    "product": "Dapur",
+    "buttonname": "Teblet",
+    "amount": "$ 1150.00"
+  },
+  {
+    "type": "success",
+    "value": 45,
+    "product": "Ruang Musola",
+    "buttonname": "Mobile",
+    "amount": "$ 1180.00"
+  },
+  {
+    "type": "danger",
+    "value": 90,
+    "product": "Ruang Server",
+    "buttonname": "Mobile",
+    "amount": "$ 1200.00",
+    "bagde": "+8 more"
+  },
+  {
+    "type": "warning",
+    "value": 75,
+    "product": "Ruang Kepala Bagian",
+    "buttonname": "Teblet",
+    "amount": "$ 1190.00",
+    "bagde": "+5 more"
+  },
+  {
+    "type": "success",
+    "value": 65,
+    "product": "Ruang Tengah",
+    "buttonname": "Mobile",
+    "amount": "$ 999.00",
+    "bagde": "+3 more"
+  }
+]
\ No newline at end of file