diff --git a/src/app/content/hemat-app/list-monitoring/add-edit-list/add-edit-list.component.html b/src/app/content/hemat-app/list-monitoring/add-edit-list/add-edit-list.component.html
index 41cbf73..874913f 100644
--- a/src/app/content/hemat-app/list-monitoring/add-edit-list/add-edit-list.component.html
+++ b/src/app/content/hemat-app/list-monitoring/add-edit-list/add-edit-list.component.html
@@ -1,15 +1,19 @@
-<div class="app-content content">
-    <div class="content-wrapper">
-      <div class="content-header row mb-1">
-        <app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
-      </div>
-      <div class="content-body">
-        <section id="basic-form-layouts">
-          <div class="row">
-            <div class="col-12" *blockUI="'projectInfo'; message: 'Loading'">
-              <m-card>
-                <ng-container mCardHeaderTitle>
-                  <h2>
+<div class="app-content content" style="background-color: #000000 !important">
+  <div class="content-wrapper">
+    <div class="content-header row mb-1">
+      <app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
+    </div>
+    <div class="content-body">
+      <section id="basic-form-layouts">
+        <div class="row">
+          <div class="col-12" *blockUI="'projectInfo'; message: 'Loading'">
+            <div class="card" style="background-color: #252525 !important">
+              <div class="card-content">
+                <div
+                  class="card-header"
+                  style="background-color: #252525 !important"
+                >
+                  <h2 style="color: #ffffff">
                     {{
                       isEditMode()
                         ? "Edit List Monitoring"
@@ -18,20 +22,23 @@
                         : "Add New List Monitoring"
                     }}
                   </h2>
-                </ng-container>
-                <ng-container mCardBody>
+                </div>
+                <div class="card-body">
                   <form
                     [formGroup]="projectInfo"
                     (ngSubmit)="onProjectInfoSubmit()"
                   >
                     <div class="form-body">
-                      <h4 class="form-section">
-                        <i class="feather ft-user"></i> General Information
+                      <h4 class="form-section" style="color: #ffffff">
+                        <i class="feather ft-user" style="color: #ffffff"></i>
+                        General Information
                       </h4>
                       <div class="row">
                         <div class="col-md-6">
                           <div class="form-group">
-                            <label for="buildingId">Building *</label>
+                            <label for="buildingId" style="color: #ffffff"
+                              >Building *</label
+                            >
                             <div class="input-group">
                               <select
                                 id="buildingId"
@@ -62,7 +69,9 @@
                         </div>
                         <div class="col-md-6">
                           <div class="form-group">
-                            <label for="statusId">Status *</label>
+                            <label for="statusId" style="color: #ffffff"
+                              >Status *</label
+                            >
                             <div class="input-group">
                               <select
                                 id="statusId"
@@ -124,6 +133,11 @@
                                     <button
                                       class="btn btn-danger"
                                       type="button"
+                                      style="
+                                        color: #000000 !important;
+                                        border-color: #bef264 !important;
+                                        background-color: #bef264 !important;
+                                      "
                                       (click)="removePhone(i)"
                                     >
                                       <i class="feather ft-x"></i>
@@ -135,6 +149,11 @@
                             <button
                               type="button"
                               class="btn btn-primary"
+                              style="
+                                color: #000000 !important;
+                                border-color: #bef264 !important;
+                                background-color: #bef264 !important;
+                              "
                               (click)="addPhone()"
                             >
                               <i class="feather ft-plus"></i> Add Room
@@ -176,22 +195,36 @@
                       <button
                         type="button"
                         class="btn btn-warning mr-1"
+                        style="
+                          color: #bef264 !important;
+                          border-color: #bef264 !important;
+                          background-color: #000000 !important;
+                        "
                         (click)="cancel()"
                       >
                         <i class="feather ft-x"></i> Cancel
                       </button>
-                      <button type="submit" class="btn btn-primary" *ngIf="mode !== 'view'" (click)="save()">
+                      <button
+                        type="submit"
+                        class="btn btn-primary"
+                        style="
+                          color: #000000 !important;
+                          border-color: #bef264 !important;
+                          background-color: #bef264 !important;
+                        "
+                        *ngIf="mode !== 'view'"
+                        (click)="save()"
+                      >
                         <i class="la la-check"></i> Save
                       </button>
                     </div>
                   </form>
-                </ng-container>
-              </m-card>
+                </div>
+              </div>
             </div>
           </div>
-        </section>
-      </div>
+        </div>
+      </section>
     </div>
   </div>
-  
-  
\ No newline at end of file
+</div>
diff --git a/src/app/content/hemat-app/list-monitoring/list-monitoring.component.css b/src/app/content/hemat-app/list-monitoring/list-monitoring.component.css
index b590737..3c2a857 100644
--- a/src/app/content/hemat-app/list-monitoring/list-monitoring.component.css
+++ b/src/app/content/hemat-app/list-monitoring/list-monitoring.component.css
@@ -324,9 +324,11 @@
   background-color: #1a1a1a; /* Darker black for hover effect */
 }
 
+/* Tambahkan ini ke styles.css atau CSS komponen */
+
 /* Custom styles for Swal buttons */
-.btn-confirm {
-  background-color: #28a745 !important;
+.div:where(.swal2-container) button:where(.swal2-styled).swal2-confirm {
+  background-color: #bef264 !important;
   color: white !important;
   border: none !important;
   padding: 10px 20px !important;
@@ -334,7 +336,7 @@
   font-size: 16px !important;
 }
 
-.btn-cancel {
+.swal2-cancel.btn-cancel {
   background-color: #dc3545 !important;
   color: white !important;
   border: none !important;
@@ -343,10 +345,19 @@
   font-size: 16px !important;
 }
 
-.btn-confirm:hover {
+.swal2-confirm.btn-confirm:hover {
   background-color: #218838 !important;
 }
 
-.btn-cancel:hover {
+.swal2-cancel.btn-cancel:hover {
   background-color: #c82333 !important;
 }
+
+/* Custom Swal background */
+.swal2-popup.custom-swal-background {
+  background-color: #000000 !important; /* Warna background hitam */
+  color: white !important; /* Warna teks putih */
+}
+
+
+
diff --git a/src/app/content/hemat-app/list-monitoring/list-monitoring.component.html b/src/app/content/hemat-app/list-monitoring/list-monitoring.component.html
index 6021683..51fbec1 100644
--- a/src/app/content/hemat-app/list-monitoring/list-monitoring.component.html
+++ b/src/app/content/hemat-app/list-monitoring/list-monitoring.component.html
@@ -1,5 +1,5 @@
 <div class="app-content content" style="background-color: #000000 !important">
-  <div class="content-wrapper">
+  <div class="content-wrapper" style="height: 900px !important;">
     <div class="content-header row mb-1">
       <app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
     </div>
diff --git a/src/app/content/hemat-app/list-monitoring/list-monitoring.component.ts b/src/app/content/hemat-app/list-monitoring/list-monitoring.component.ts
index f0e6b1d..a968ef4 100644
--- a/src/app/content/hemat-app/list-monitoring/list-monitoring.component.ts
+++ b/src/app/content/hemat-app/list-monitoring/list-monitoring.component.ts
@@ -1,13 +1,13 @@
-import { Component } from '@angular/core';
-import { Router } from '@angular/router';
-import { TableApiService } from 'src/app/_services/table-api.service';
-import { BuildingService } from '../service/monitoring-api.service';
-import Swal from 'sweetalert2';
+import { Component } from "@angular/core";
+import { Router } from "@angular/router";
+import { TableApiService } from "src/app/_services/table-api.service";
+import { BuildingService } from "../service/monitoring-api.service";
+import Swal from "sweetalert2";
 
 @Component({
-  selector: 'app-list-monitoring',
-  templateUrl: './list-monitoring.component.html',
-  styleUrls: ['./list-monitoring.component.css']
+  selector: "app-list-monitoring",
+  templateUrl: "./list-monitoring.component.html",
+  styleUrls: ["./list-monitoring.component.css"],
 })
 export class ListMonitoringComponent {
   public breadcrumb: any;
@@ -60,8 +60,7 @@ export class ListMonitoringComponent {
     const searchTermLC = this.searchTerm.toLowerCase();
     return Object.values(row).some(
       (value) =>
-        value !== null &&
-        value.toString().toLowerCase().includes(searchTermLC)
+        value !== null && value.toString().toLowerCase().includes(searchTermLC)
     );
   }
 
@@ -74,35 +73,57 @@ export class ListMonitoringComponent {
   }
 
   deleteRow(row) {
-    Swal.fire({
-      title: 'Are you sure?',
-      text: 'Do you want to delete?',
-      icon: 'question',
-      showCancelButton: true,
-      confirmButtonText: 'Yes',
-      cancelButtonText: 'No',
+    const swalWithBootstrapButtons = Swal.mixin({
       customClass: {
-        confirmButton: 'btn-confirm',
-        cancelButton: 'btn-cancel'
-      }
+        confirmButton: "btn-confirm",
+        cancelButton: "btn-cancel",
+        popup: "custom-swal-background",
+      },
+    });
+    swalWithBootstrapButtons.fire({
+      title: "Are you sure?",
+      text: "Do you want to delete?",
+      icon: "question",
+      showCancelButton: true,
+      confirmButtonText: "Yes",
+      cancelButtonText: "No",
     }).then((result) => {
       if (result.isConfirmed) {
         Swal.fire({
-          title: 'Loading...',
-          text: 'Please wait',
+          title: "Loading...",
+          text: "Please wait",
           allowOutsideClick: false,
+          customClass: {
+            popup: "custom-swal-background",
+          },
           didOpen: () => {
             Swal.showLoading();
-          }
+          },
         });
         setTimeout(() => {
-          this.monitoringApiService.deleteRoomBuilding(row.id).subscribe(data => {
-            Swal.fire('Confirmed!', 'You clicked Yes.', 'success');
-            this.fetchData();
-          });
+          this.monitoringApiService
+            .deleteRoomBuilding(row.id)
+            .subscribe((data) => {
+              Swal.fire({
+                title: "Confirmed!",
+                text: "You clicked Yes.",
+                icon: "success",
+                customClass: {
+                  popup: "custom-swal-background",
+                },
+              });
+              this.fetchData();
+            });
         }, 2000);
       } else if (result.isDismissed) {
-        Swal.fire('Cancelled', 'You clicked No.', 'error');
+        Swal.fire({
+          title: "Cancelled",
+          text: "You clicked No.",
+          icon: "error",
+          customClass: {
+            popup: "custom-swal-background",
+          },
+        });
       }
     });
   }