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 e5b901f..0f9e9b4 100644
--- a/src/app/content/hemat-app/monitoring/building/building.component.html
+++ b/src/app/content/hemat-app/monitoring/building/building.component.html
@@ -1,4 +1,4 @@
-<div class="app-content content">
+<div class="app-content content" style="background-color: #FBFBFB;">
   <div class="content-wrapper">
     <div class="content-header row mb-1">
       <app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
@@ -53,13 +53,13 @@
                   class="text-center"
                   style="
                     position: absolute;
-                    top: 70%;
+                    top: 73%;
                     left: 50%;
                     transform: translate(-50%, -50%);
                   "
                 >
                   <h3
-                    class="display-4 blue-grey darken-1 custom-total"
+                    class="custom-total"
                   >
                     {{ data.total }} KWH
                   </h3>
diff --git a/src/app/content/hemat-app/monitoring/control-device-seemore/control-device-seemore.component.css b/src/app/content/hemat-app/monitoring/control-device-seemore/control-device-seemore.component.css
index a7d4450..c9ca594 100644
--- a/src/app/content/hemat-app/monitoring/control-device-seemore/control-device-seemore.component.css
+++ b/src/app/content/hemat-app/monitoring/control-device-seemore/control-device-seemore.component.css
@@ -1,14 +1,37 @@
-:host ::ng-deep .ng-select .ng-select-container {
-  color: #ffffff !important;
-  background-color: #252525 !important;
+
+/* :host ::ng-deep .ng-select .ng-select-container {
+  color: #242222 !important;
+  background-color: #FBFBFB !important;
   height: 40px !important;
-  border-radius: 12px;
+  border-radius: 12px !important;
+} */
+
+:host ::ng-deep .ng-select .ng-select-container {
+  color: #242222 !important;
+  background-color: #FBFBFB !important;
+  height: 40px !important;
+  border-radius: 12px !important;
+  box-shadow: 0 2px 4px rgba(36, 34, 34, 0.2) !important; /* Bayangan lebih tipis */
 }
 
+
 .background-round {
-  background-color: #252525 !important;
-  padding: 8px;
-  border-radius: 50%;
-  border: 2px solid #bef264;
-  border-color: #bef264 !important;
+	background-color: #252525 !important;
+	padding: 8px;
+	border-radius: 50%;
+  border: 2px solid #BEF264;
+  border-color: #BEF264 !important;
 }
+
+.text-custom-name{
+  color: #242222 !important;
+  font-family: "Open Sans", sans-serif !important;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.text-custom-category{
+  color: #242222 !important;
+  font-family: "Open Sans", sans-serif !important;
+  font-size: 12px;
+}
\ No newline at end of file
diff --git a/src/app/content/hemat-app/monitoring/control-device-seemore/control-device-seemore.component.html b/src/app/content/hemat-app/monitoring/control-device-seemore/control-device-seemore.component.html
index ebcf29c..63f6db2 100644
--- a/src/app/content/hemat-app/monitoring/control-device-seemore/control-device-seemore.component.html
+++ b/src/app/content/hemat-app/monitoring/control-device-seemore/control-device-seemore.component.html
@@ -1,4 +1,4 @@
-<div class="app-content content" style="background-color: #000000 !important">
+<div class="app-content content" style="background-color: #FBFBFB;">
     <div class="content-wrapper">
       <div class="content-header row mb-1">
         <app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
@@ -7,7 +7,7 @@
         <section id="configuration">
           <div class="row">
             <div class="col-12">
-              <div class="card" style="background-color: #252525 !important">
+              <div class="card" style="background-color: #FBFBFB !important; box-shadow: none !important;">
                 <div class="card-content">
                   <div class="card-body">
                     <div class="row">
@@ -21,6 +21,7 @@
                             bindValue="id"
                             placeholder="Select Building"
                             [(ngModel)]="buildingSelected"
+                            style="width: 100% !important;"
                           >
                           </ng-select>
                         </div>
@@ -35,6 +36,7 @@
                             bindValue="id"
                             placeholder="Select Category"
                             [(ngModel)]="categorySelected"
+                            style="width: 100% !important;"
                           >
                           </ng-select>
                         </div>
@@ -49,6 +51,7 @@
                             bindValue="id"
                             placeholder="Select Status"
                             [(ngModel)]="statusSelected"
+                            style="width: 100% !important;"
                           >
                           </ng-select>
                         </div>
@@ -60,20 +63,20 @@
                             class="btn btn-outline-success ml-2"
                             (click)="doFilter()"
                             style="
-                              background-color: #252525 !important;
-                              border-color: #ffffff !important;
+                              background-color: #DDE1E6 !important;
+                              border-color: #6B6B6B !important;
                               border-radius: 12px;
                             "
                             [disabled]="spinnerFilterActive"
                           >
                             <i
                               class="la la-search"
-                              style="color: #ffffff !important"
+                              style="color: #6B6B6B !important"
                               *ngIf="!spinnerFilterActive"
                             ></i>
                             <i
                               class="la la-spinner spinner"
-                              style="color: #ffffff !important"
+                              style="color: #6B6B6B !important"
                               *ngIf="spinnerFilterActive"
                             ></i>
                           </button>
@@ -82,9 +85,9 @@
                             class="btn btn-outline-success ml-2"
                             (click)="doFilterCancel()"
                             style="
-                              background-color: #252525 !important;
-                              border-color: #ffffff !important;
-                              color: #ffffff !important;
+                              background-color: #FBFBFB !important;
+                              border-color: #6B6B6B !important;
+                              color: #6B6B6B !important;
                               border-radius: 12px;
                             "
                           >Cancel
@@ -103,7 +106,7 @@
             <div class="col-lg-4 col-12" *ngFor="let item of filteredDeviceRows">
               <div
                 class="card"
-                style="background-color: #252525; position: relative"
+                style="background-color: #DDE1E6; position: relative"
               >
                 <div class="card-content">
                   <div class="card-body">
@@ -111,7 +114,7 @@
                       <div class="align-self-center">
                         <div
                           style="
-                            background-color: #414F2B;
+                            background-color: #37A647;
                             border-radius: 50%;
                             width: 50px;
                             height: 50px;
@@ -121,29 +124,28 @@
                           "
                         >
                           <i
-                            class="ri-lightbulb-flash-fill font-large-1 blue-grey d-block"
-                            style="color: #bef264 !important"
+                            class="{{item.category_icon}} font-large-1 blue-grey d-block"
+                            style="color: #ffffff !important"
                           ></i>
                         </div>
                         <div style="margin-top: 10px">
                           <span
-                            class="text-muted"
-                            style="color: #ffffff !important"
+                            class="text-custom-name"
                             >{{ item.name }}</span
                           >
                           <br />
                           <span
-                            class="text-muted"
+                            class="text-custom-category"
                             >{{item.category_name}}</span
                           >
                         </div>
                       </div>
                       <div class="ui-switch-container" style="position: absolute; bottom: 10px; right: 10px;">
                         <ui-switch
-                          style="border-color: #bef264 !important"
+                          style="border-color: #ffffff !important"
                           class="switchery"
                           switchColor="black"
-                          color="rgb(190, 242, 100)"
+                          color="rgb(55, 166, 71)"
                           size="small"
                           [checked]="item.status_id === 2"
                           (change)="switchChanged($event, item)"
diff --git a/src/app/content/hemat-app/monitoring/control-device-seemore/control-device-seemore.component.ts b/src/app/content/hemat-app/monitoring/control-device-seemore/control-device-seemore.component.ts
index 48917a1..5d9678d 100644
--- a/src/app/content/hemat-app/monitoring/control-device-seemore/control-device-seemore.component.ts
+++ b/src/app/content/hemat-app/monitoring/control-device-seemore/control-device-seemore.component.ts
@@ -90,7 +90,7 @@ export class ControlDeviceSeemoreComponent {
   filterDevices(devices: any[]): any[] {
     return devices.filter((device) =>
       device.mapping.some(
-        (map) => map.name.startsWith("switch") && map.type === "Boolean"
+        (map) => map.code.startsWith("switch") && map.type === "Boolean"
       )
     );
   }
@@ -106,13 +106,17 @@ export class ControlDeviceSeemoreComponent {
       this.dataMasterCategori = dataCategory.filter(
         (item) => item.statusName.toLowerCase() === "aktif"
       );
-      this.dataMasterStatus = dataStatus.filter((item) => item.statusName.toLowerCase() === "aktif");
+      this.dataMasterStatus = dataStatus.filter((item) => item.statusName.toLowerCase() === "aktif" || item.status === "71");
     });
   }
 
   dataListBuilding() {
     this.monitoringApiService.getBuildingList().subscribe((data) => {
-      this.dataBuildingList = data.data.filter((item) => item.statusName.toLowerCase() === "aktif");
+      console.log(data);
+      
+      this.dataBuildingList = data.data.filter((item) => item.statusName.toLowerCase() === "aktif" || item.status_id === 71);
+      console.log(this.dataBuildingList);
+      
     });
   }
 
@@ -163,8 +167,8 @@ export class ControlDeviceSeemoreComponent {
 
   switchChanged(ev, data) {
     const requestData = {
-      device_id: data.device_id,
-      switch: data.mapping[0].switch,
+      id: data.id,
+      code: data.mapping[0].code,
       value: ev,
       command_type: "on_off",
     };
diff --git a/src/app/content/hemat-app/monitoring/monitoring.module.ts b/src/app/content/hemat-app/monitoring/monitoring.module.ts
index ada1d7e..8b23e88 100644
--- a/src/app/content/hemat-app/monitoring/monitoring.module.ts
+++ b/src/app/content/hemat-app/monitoring/monitoring.module.ts
@@ -29,6 +29,7 @@ import { NgSelectModule } from '@ng-select/ng-select';
 import { ControlDeviceSeemoreComponent } from './control-device-seemore/control-device-seemore.component';
 import { HTTP_INTERCEPTORS } from '@angular/common/http';
 import { HttpErrorInterceptorService } from 'src/app/interceptors/http-error-interceptor.service';
+import { ClipboardModule } from 'ngx-clipboard';
 
 @NgModule({
   declarations: [
@@ -59,6 +60,7 @@ import { HttpErrorInterceptorService } from 'src/app/interceptors/http-error-int
     NgxMasonryModule,
     UiSwitchModule,
     NgSelectModule,
+    ClipboardModule,
     NgxEchartsModule.forRoot({
       echarts: () => import('echarts')
     }),