diff --git a/src/app/content/hemat-app/cost-management/cost-management.component.html b/src/app/content/hemat-app/cost-management/cost-management.component.html
index 63b20bf..c81c066 100644
--- a/src/app/content/hemat-app/cost-management/cost-management.component.html
+++ b/src/app/content/hemat-app/cost-management/cost-management.component.html
@@ -356,13 +356,13 @@
                         </ng-template>
                       </ngx-datatable-column>
                       <ngx-datatable-column
-                        name="roomName"
+                        name="categoryName"
                         [flexGrow]="1"
                         [minWidth]="90"
                       >
                         <ng-template ngx-datatable-header-template>
                           <span style="color: #ffffff !important"
-                            >Room</span
+                            >Category</span
                           >
                         </ng-template>
                         <ng-template
@@ -373,13 +373,13 @@
                         </ng-template>
                       </ngx-datatable-column>
                       <ngx-datatable-column
-                        name="categoryName"
+                        name="roomName"
                         [flexGrow]="1"
                         [minWidth]="90"
                       >
                         <ng-template ngx-datatable-header-template>
                           <span style="color: #ffffff !important"
-                            >Category</span
+                            >Room</span
                           >
                         </ng-template>
                         <ng-template
diff --git a/src/app/content/hemat-app/device/device.component.css b/src/app/content/hemat-app/device/device.component.css
index 0ff2409..27419be 100644
--- a/src/app/content/hemat-app/device/device.component.css
+++ b/src/app/content/hemat-app/device/device.component.css
@@ -314,6 +314,11 @@
   color: #ffffff !important;
   background-color: #252525 !important;
   height: 40px !important;
+  border-radius: 12px;
+}
+
+:host ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input>input {
+  color: #ffffff !important;
 }
 
 :host ::ng-deep .ngx-datatable.bootstrap .datatable-body-row {
diff --git a/src/app/content/hemat-app/device/device.component.html b/src/app/content/hemat-app/device/device.component.html
index e716906..bd976a8 100644
--- a/src/app/content/hemat-app/device/device.component.html
+++ b/src/app/content/hemat-app/device/device.component.html
@@ -176,7 +176,8 @@
                           (click)="doFilter()"
                           style="
                             background-color: #252525 !important;
-                            border-color: #bef264 !important;
+                            border-color: #ffffff !important;
+                            border-radius: 12px;
                           "
                           [disabled]="spinnerFilterActive"
                         >
@@ -191,9 +192,23 @@
                             *ngIf="spinnerFilterActive"
                           ></i>
                         </button>
+                        <button
+                          type="button"
+                          class="btn btn-outline-success ml-2"
+                          (click)="doCancelFilter()"
+                          style="
+                            background-color: #252525 !important;
+                            border-color: #ffffff !important;
+                            color: #ffffff;
+                            border-radius: 12px;
+                          "
+                        >
+                          Cancel
+                        </button>
                       </div>
                     </div>
                   </div>
+
                   <div class="row mb-2">
                     <div class="col-6 col-md-3 mb-2">
                       <button
diff --git a/src/app/content/hemat-app/device/device.component.ts b/src/app/content/hemat-app/device/device.component.ts
index 15513c3..4500849 100644
--- a/src/app/content/hemat-app/device/device.component.ts
+++ b/src/app/content/hemat-app/device/device.component.ts
@@ -121,15 +121,30 @@ export class DeviceComponent implements OnInit {
   }
 
   doFilter() {
-    this.spinnerFilterActive = true;
-    this.fetchData(
-      this.buildingSelected,
-      this.categorySelected,
-      this.statusSelected
-    );
-    setTimeout(() => {
-      this.spinnerFilterActive = false;
-    }, 3000);
+    if (!this.buildingSelected) {
+      this.toastr.error("Warning", "Filter Building tidak boleh kosong.", {
+        timeOut: 5000,
+        closeButton: true,
+      });
+    } else {
+      this.spinnerFilterActive = true;
+      this.fetchData(
+        this.buildingSelected,
+        this.categorySelected,
+        this.statusSelected
+      );
+      setTimeout(() => {
+        this.spinnerFilterActive = false;
+      }, 3000);
+    }
+  }
+
+  doCancelFilter() {
+    this.storedData = JSON.parse(localStorage.getItem("currentUser"));
+    this.buildingSelected = this.storedData.buildingId;
+    this.categorySelected = undefined;
+    this.statusSelected = undefined;
+    this.fetchData(this.buildingSelected, 0, 0);
   }
 
   filterRows() {