From bd1cd42ed612d341578561385d83cd0d475814d6 Mon Sep 17 00:00:00 2001
From: Fuzi_fauzia <fuzi.fauzia@allbestsistem.com>
Date: Wed, 17 Jul 2024 11:51:29 +0700
Subject: [PATCH] slicing design baru

---
 .../select-icon/select-icon.component.css     |  4 +-
 .../cost-management.component.css             |  3 +-
 .../cost-management.component.html            | 11 +++--
 .../device-control.component.html             | 11 +++--
 .../hemat-app/device/device.component.css     |  2 +-
 .../hemat-app/device/device.component.html    | 11 +++--
 .../add-edit-master.component.html            | 18 ++++----
 .../add-edit-master-building.component.html   | 30 ++++++------
 .../master-building.component.css             | 40 +++++++++++++---
 .../master-building.component.html            | 46 +++++++++----------
 .../master-category.component.css             | 40 +++++++++++++---
 .../master-category.component.html            | 34 +++++++-------
 .../master-duration-use.component.css         | 40 +++++++++++++---
 .../master-duration-use.component.html        | 28 +++++------
 .../master-floor/master-floor.component.css   | 40 +++++++++++++---
 .../master-floor/master-floor.component.html  | 30 ++++++------
 .../master-role/master-role.component.css     | 40 +++++++++++++---
 .../master-role/master-role.component.html    | 30 ++++++------
 .../add-edit-master-room.component.html       | 24 +++++-----
 .../master-room/master-room.component.css     | 40 +++++++++++++---
 .../master-room/master-room.component.html    | 38 +++++++--------
 .../master-status/master-status.component.css | 40 +++++++++++++---
 .../master-status.component.html              | 30 ++++++------
 .../master-type/master-type.component.css     | 40 +++++++++++++---
 .../master-type/master-type.component.html    | 30 ++++++------
 .../master-voltage.component.css              | 40 +++++++++++++---
 .../master-voltage.component.html             | 30 ++++++------
 .../building/building.component.html          |  2 +-
 .../control-device-seemore.component.html     | 11 +++--
 29 files changed, 511 insertions(+), 272 deletions(-)

diff --git a/src/app/content/hemat-app/component/select-icon/select-icon.component.css b/src/app/content/hemat-app/component/select-icon/select-icon.component.css
index fc2825e..5b3d0e9 100644
--- a/src/app/content/hemat-app/component/select-icon/select-icon.component.css
+++ b/src/app/content/hemat-app/component/select-icon/select-icon.component.css
@@ -1,4 +1,4 @@
 :host ::ng-deep .ng-select .ng-select-container {
-  color: #ffffff !important;
-  background-color: #252525 !important;
+  /* color: #ffffff !important; */
+  /* background-color: #252525 !important; */
 }
diff --git a/src/app/content/hemat-app/cost-management/cost-management.component.css b/src/app/content/hemat-app/cost-management/cost-management.component.css
index 1de4cf8..49b9e5d 100644
--- a/src/app/content/hemat-app/cost-management/cost-management.component.css
+++ b/src/app/content/hemat-app/cost-management/cost-management.component.css
@@ -90,6 +90,7 @@ input[type="month"]::-webkit-calendar-picker-indicator {
 }
 
 
+/* table */
 :host
   ::ng-deep
   .ngx-datatable.bootstrap
@@ -363,7 +364,7 @@ input[type="month"]::-webkit-calendar-picker-indicator {
   ul
   li:not(.disabled):hover
   a {
-  background-color: #252525;
+  background-color: #37A647;
   font-weight: bold;
   color: white;
 }
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 8e5421f..16cdf2f 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
@@ -113,19 +113,20 @@
                       class="btn btn-outline-success"
                       (click)="doFilter()"
                       style="
-                        background-color: #DDE1E6 !important;
-                        border-color: #DDE1E6 !important;
+                        background-color: #37A647 !important;
+                        border-color: #37A647 !important;
+                        color: #ffffff;
                       "
                       [disabled]="spinnerFilterActive"
                     >
                       <i
                         class="la la-search"
-                        style="color: #242222 !important"
+                        style="color: #ffffff !important"
                         *ngIf="!spinnerFilterActive"
                       ></i>
                       <i
                         class="la la-spinner spinner"
-                        style="color: #242222 !important"
+                        style="color: #ffffff !important"
                         *ngIf="spinnerFilterActive"
                       ></i>
                     </button>
@@ -250,7 +251,7 @@
               <div class="card-dashboard">
                 <ngx-datatable
                   class="bootstrap table-bordered"
-                  [limit]="5"
+                  [limit]="10"
                   [rows]="data_cost"
                   [columnMode]="'force'"
                   [headerHeight]="50"
diff --git a/src/app/content/hemat-app/device/device-control/device-control.component.html b/src/app/content/hemat-app/device/device-control/device-control.component.html
index 52c5db6..9ee3fac 100644
--- a/src/app/content/hemat-app/device/device-control/device-control.component.html
+++ b/src/app/content/hemat-app/device/device-control/device-control.component.html
@@ -58,23 +58,24 @@
                       <div class="d-flex">
                         <button
                           type="button"
-                          class="btn btn-outline-success ml-2"
+                          class="btn ml-2"
                           (click)="doFilter()"
                           style="
-                            background-color: #DDE1E6 !important;
-                            border-color: #6B6B6B !important;
+                            background-color: #37A647 !important;
+                            border-color: #ffffff !important;
                             border-radius: 12px;
+                            color: #ffffff;
                           "
                           [disabled]="spinnerFilterActive"
                         >
                           <i
                             class="la la-search"
-                            style="color: #6B6B6B !important"
+                            style="color: #ffffff !important"
                             *ngIf="!spinnerFilterActive"
                           ></i>
                           <i
                             class="la la-spinner spinner"
-                            style="color: #6B6B6B !important"
+                            style="color: #ffffff !important"
                             *ngIf="spinnerFilterActive"
                           ></i>
                         </button>
diff --git a/src/app/content/hemat-app/device/device.component.css b/src/app/content/hemat-app/device/device.component.css
index ba35d51..66cfac3 100644
--- a/src/app/content/hemat-app/device/device.component.css
+++ b/src/app/content/hemat-app/device/device.component.css
@@ -271,7 +271,7 @@
   ul
   li:not(.disabled):hover
   a {
-  background-color: #252525;
+  background-color: #37A647;
   font-weight: bold;
   color: white;
 }
diff --git a/src/app/content/hemat-app/device/device.component.html b/src/app/content/hemat-app/device/device.component.html
index 6c57fbf..d9d218d 100644
--- a/src/app/content/hemat-app/device/device.component.html
+++ b/src/app/content/hemat-app/device/device.component.html
@@ -169,23 +169,24 @@
                       <div class="d-flex">
                         <button
                           type="button"
-                          class="btn btn-outline-success ml-2"
+                          class="btn ml-2"
                           (click)="doFilter()"
                           style="
-                            background-color: #DDE1E6 !important;
-                            border-color: #242222 !important;
+                            background-color: #37A647 !important;
+                            border-color: #37A647 !important;
                             border-radius: 12px;
+                            color: #ffffff;
                           "
                           [disabled]="spinnerFilterActive || newDeviceActive"
                         >
                           <i
                             class="la la-search"
-                            style="color: #242222 !important"
+                            style="color: #ffffff !important"
                             *ngIf="!spinnerFilterActive"
                           ></i>
                           <i
                             class="la la-spinner spinner"
-                            style="color: #242222 !important"
+                            style="color: #ffffff !important"
                             *ngIf="spinnerFilterActive"
                           ></i>
                         </button>
diff --git a/src/app/content/hemat-app/master/add-edit-master/add-edit-master.component.html b/src/app/content/hemat-app/master/add-edit-master/add-edit-master.component.html
index 083f69e..2dccb2c 100644
--- a/src/app/content/hemat-app/master/add-edit-master/add-edit-master.component.html
+++ b/src/app/content/hemat-app/master/add-edit-master/add-edit-master.component.html
@@ -1,14 +1,14 @@
-<div class="modal-header" style="background-color: #000000 !important">
-  <h4 class="modal-title" style="color: #ffffff">{{labelModal}}</h4>
+<div class="modal-header" style="background-color: #FBFBFB !important">
+  <h4 class="modal-title" style="color: #242222">{{labelModal}}</h4>
   <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
     <span aria-hidden="true">&times;</span>
   </button>
 </div>
-<div class="modal-body" style="background-color: #000000 !important">
+<div class="modal-body" style="background-color: #FBFBFB !important">
   <form [formGroup]="myForm">
     <div class="form-row">
       <div class="form-group col-md-6">
-        <label for="name" style="color: #ffffff">Name:</label>
+        <label for="name" style="color: #242222">Name:</label>
         <input
           type="text"
           class="form-control"
@@ -21,14 +21,14 @@
         </div>
       </div>
       <div class="form-group col-md-6" *ngIf="category">
-        <label for="icon" style="color: #ffffff">Icon:</label>
+        <label for="icon" style="color: #242222">Icon:</label>
         <app-select-icon [selectedIcon]="selectedIcon" (iconSelected)="onIconSelected($event)"></app-select-icon>
         <div *ngIf="myForm.get('icon').touched && myForm.get('icon').invalid" class="text-danger">
           Icon is required.
         </div>
       </div>
       <div class="form-group col-md-6">
-        <label for="status" style="color: #ffffff">Status:</label>
+        <label for="status" style="color: #242222">Status:</label>
         <select
           id="projectinput5"
           class="form-control"
@@ -45,18 +45,18 @@
     </div>
   </form>
 </div>
-<div class="modal-footer" style="background-color: #000000 !important">
+<div class="modal-footer" style="background-color: #FBFBFB !important">
   <button
     type="button"
     class="btn btn-secondary"
-    style="color: #c3f164 !important; background-color: #000000 !important; border-color: #c3f164 !important;"
+    style="color: #242222 !important; background-color: #FBFBFB !important; border-color: #FBFBFB !important;"
     (click)="activeModal.dismiss('Cross click')"
   >
     Close
   </button>
   <button
     type="button"
-    style="color: #000000 !important; background-color: #c3f164 !important"
+    style="color: #ffffff !important; background-color: #37A647 !important"
     class="btn btn-primary"
     (click)="addRow()"
   >
diff --git a/src/app/content/hemat-app/master/master-building/add-edit-master-building/add-edit-master-building.component.html b/src/app/content/hemat-app/master/master-building/add-edit-master-building/add-edit-master-building.component.html
index ca038b0..e64bf71 100644
--- a/src/app/content/hemat-app/master/master-building/add-edit-master-building/add-edit-master-building.component.html
+++ b/src/app/content/hemat-app/master/master-building/add-edit-master-building/add-edit-master-building.component.html
@@ -1,14 +1,14 @@
-<div class="modal-header" style="background-color: #000000 !important">
-  <h4 class="modal-title" style="color: #ffffff">{{labelModal}}</h4>
+<div class="modal-header" style="background-color: #FBFBFB !important">
+  <h4 class="modal-title" style="color: #242222">{{labelModal}}</h4>
   <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
     <span aria-hidden="true">&times;</span>
   </button>
 </div>
-<div class="modal-body" style="background-color: #000000 !important">
+<div class="modal-body" style="background-color: #FBFBFB !important">
   <form [formGroup]="myForm">
     <div class="form-row">
       <div class="form-group col-md-6">
-        <label for="name" style="color: #ffffff">Name Building:</label>
+        <label for="name" style="color: #242222">Name Building:</label>
         <input
           type="text"
           class="form-control"
@@ -22,7 +22,7 @@
         </div>
       </div>
       <div class="form-group col-md-6">
-        <label for="email" style="color: #ffffff">Email:</label>
+        <label for="email" style="color: #242222">Email:</label>
         <input
           type="email"
           class="form-control"
@@ -36,7 +36,7 @@
         </div>
       </div>
       <div class="form-group col-md-6">
-        <label for="phone" style="color: #ffffff">Phone:</label>
+        <label for="phone" style="color: #242222">Phone:</label>
         <input
           type="text"
           class="form-control"
@@ -51,7 +51,7 @@
         </div>
       </div>
       <div class="form-group col-md-6">
-        <label for="owner" style="color: #ffffff">Owner:</label>
+        <label for="owner" style="color: #242222">Owner:</label>
         <input
           type="text"
           class="form-control"
@@ -65,7 +65,7 @@
         </div>
       </div>
       <div class="form-group col-md-6">
-        <label for="address" style="color: #ffffff">Address:</label>
+        <label for="address" style="color: #242222">Address:</label>
         <input
           type="text"
           class="form-control"
@@ -79,7 +79,7 @@
         </div>
       </div>
       <div class="form-group col-md-6">
-        <label for="kwh" style="color: #ffffff">KWH:</label>
+        <label for="kwh" style="color: #242222">KWH:</label>
         <input
           type="text"
           class="form-control no-arrow"
@@ -93,7 +93,7 @@
         </div>
       </div>
       <div class="form-group col-md-6">
-        <label for="statusId" style="color: #ffffff">Status:</label>
+        <label for="statusId" style="color: #242222">Status:</label>
         <select
           id="statusId"
           class="form-control"
@@ -111,14 +111,14 @@
     </div>
   </form>
 </div>
-<div class="modal-footer" style="background-color: #000000 !important">
+<div class="modal-footer" style="background-color: #FBFBFB !important">
   <button
     type="button"
     class="btn btn-secondary"
     style="
-      color: #c3f164 !important;
-      background-color: #000000 !important;
-      border-color: #c3f164 !important;
+      color: #242222 !important;
+      background-color: #FBFBFB !important;
+      border-color: #FBFBFB !important;
     "
     (click)="activeModal.dismiss('Cross click')"
   >
@@ -126,7 +126,7 @@
   </button>
   <button
     type="button"
-    style="color: #000000 !important; background-color: #c3f164 !important"
+    style="color: #ffffff !important; background-color: #37A647 !important"
     class="btn btn-primary"
     (click)="addRow()"
   >
diff --git a/src/app/content/hemat-app/master/master-building/master-building.component.css b/src/app/content/hemat-app/master/master-building/master-building.component.css
index 2b78be7..66cfac3 100644
--- a/src/app/content/hemat-app/master/master-building/master-building.component.css
+++ b/src/app/content/hemat-app/master/master-building/master-building.component.css
@@ -271,19 +271,21 @@
   ul
   li:not(.disabled):hover
   a {
-  background-color: #252525;
+  background-color: #37A647;
   font-weight: bold;
   color: white;
 }
 
 :host ::ng-deep .ngx-datatable.bootstrap .datatable-footer {
-  background: #252525;
-  color: #ededed;
+  background: #DDE1E6;
+  color: #242222;
   margin-top: -1px;
   overflow: inherit;
 }
 
 :host ::ng-deep .ngx-datatable.bootstrap .datatable-header {
+  background: #DDE1E6;
+  color: #242222;
   font-weight: bold;
   height: unset !important;
   overflow: inherit;
@@ -311,14 +313,38 @@
 }
 
 :host ::ng-deep .ng-select .ng-select-container {
-  color: #ffffff !important;
-  background-color: #252525 !important;
+  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 */
+}
+
+:host ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input>input {
+  color: #242222 !important;
 }
 
 :host ::ng-deep .ngx-datatable.bootstrap .datatable-body-row {
-  background-color: rgba(190, 242, 100, 0.11); /* Black color for table rows */
+  background-color: #FBFBFB; /* Black color for table rows */
 }
 
 :host ::ng-deep .ngx-datatable.bootstrap .datatable-body-row:hover {
-  background-color: #1a1a1a; /* Darker black for hover effect */
+  background-color: #DDE1E6; /* Darker black for hover effect */
 }
+
+.text-custom-label{
+  color: #242222 !important;
+  font-family: "Open Sans", sans-serif !important;
+  font-size: 16px;
+}
+
+.text-custom-data{
+  color: #242222 !important;
+  font-family: "Open Sans", sans-serif !important;
+  font-size: 24px;
+  font-weight: 700;
+}
+
+.style-custom-label{
+  color: #242222 !important;
+}
\ No newline at end of file
diff --git a/src/app/content/hemat-app/master/master-building/master-building.component.html b/src/app/content/hemat-app/master/master-building/master-building.component.html
index 0f23282..fa72d64 100644
--- a/src/app/content/hemat-app/master/master-building/master-building.component.html
+++ b/src/app/content/hemat-app/master/master-building/master-building.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 !important">
   <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">
               <div class="card-content">
                 <div class="card-body">
                   <div class="row mb-2">
@@ -24,9 +24,9 @@
                       <button
                         class="btn btn-secondary"
                         style="
-                          color: #000000 !important;
-                          border-color: #bef264 !important;
-                          background-color: #bef264 !important;
+                          color: #ffffff !important;
+                          border-color: #37A647 !important;
+                          background-color: #37A647 !important;
                         "
                         (click)="openAddMasterModal()"
                       >
@@ -60,7 +60,7 @@
                           ngx-datatable-cell-template
                           let-rowIndex="rowIndex"
                         >
-                          <p style="color: #ffffff">{{ rowIndex + 1 }}</p>
+                          <p class="style-custom-label">{{ rowIndex + 1 }}</p>
                         </ng-template>
                       </ngx-datatable-column>
                       <ngx-datatable-column
@@ -69,13 +69,13 @@
                         [minWidth]="90"
                       >
                         <ng-template ngx-datatable-header-template>
-                          <span style="color: #ffffff">Building Name</span>
+                          <span class="style-custom-label">Building Name</span>
                         </ng-template>
                         <ng-template
                           let-value="value"
                           ngx-datatable-cell-template
                         >
-                          <p style="color: #ffffff">{{ value }}</p>
+                          <p class="style-custom-label">{{ value }}</p>
                         </ng-template>
                       </ngx-datatable-column>
                       <ngx-datatable-column
@@ -84,13 +84,13 @@
                         [minWidth]="90"
                       >
                         <ng-template ngx-datatable-header-template>
-                          <span style="color: #ffffff">Email</span>
+                          <span class="style-custom-label">Email</span>
                         </ng-template>
                         <ng-template
                           let-value="value"
                           ngx-datatable-cell-template
                         >
-                          <p style="color: #ffffff">{{ value }}</p>
+                          <p class="style-custom-label">{{ value }}</p>
                         </ng-template>
                       </ngx-datatable-column>
                       <ngx-datatable-column
@@ -99,13 +99,13 @@
                         [minWidth]="90"
                       >
                         <ng-template ngx-datatable-header-template>
-                          <span style="color: #ffffff">Phone</span>
+                          <span class="style-custom-label">Phone</span>
                         </ng-template>
                         <ng-template
                           let-value="value"
                           ngx-datatable-cell-template
                         >
-                          <p style="color: #ffffff">{{ value }}</p>
+                          <p class="style-custom-label">{{ value }}</p>
                         </ng-template>
                       </ngx-datatable-column>
                       <ngx-datatable-column
@@ -114,13 +114,13 @@
                         [minWidth]="90"
                       >
                         <ng-template ngx-datatable-header-template>
-                          <span style="color: #ffffff">Owner</span>
+                          <span class="style-custom-label">Owner</span>
                         </ng-template>
                         <ng-template
                           let-value="value"
                           ngx-datatable-cell-template
                         >
-                          <p style="color: #ffffff">{{ value }}</p>
+                          <p class="style-custom-label">{{ value }}</p>
                         </ng-template>
                       </ngx-datatable-column>
                       <ngx-datatable-column
@@ -129,13 +129,13 @@
                         [minWidth]="90"
                       >
                         <ng-template ngx-datatable-header-template>
-                          <span style="color: #ffffff">Address</span>
+                          <span class="style-custom-label">Address</span>
                         </ng-template>
                         <ng-template
                           let-value="value"
                           ngx-datatable-cell-template
                         >
-                          <p style="color: #ffffff">{{ value }}</p>
+                          <p class="style-custom-label">{{ value }}</p>
                         </ng-template>
                       </ngx-datatable-column>
                       <ngx-datatable-column
@@ -144,13 +144,13 @@
                         [minWidth]="90"
                       >
                         <ng-template ngx-datatable-header-template>
-                          <span style="color: #ffffff">Status</span>
+                          <span class="style-custom-label">Status</span>
                         </ng-template>
                         <ng-template
                           ngx-datatable-cell-template
                           let-value="value"
                         >
-                          <p style="color: #ffffff">
+                          <p class="style-custom-label">
                             {{ value }}
                           </p>
                         </ng-template>
@@ -161,7 +161,7 @@
                         [minWidth]="150"
                       >
                         <ng-template ngx-datatable-header-template>
-                          <span style="color: #ffffff">Actions</span>
+                          <span class="style-custom-label">Actions</span>
                         </ng-template>
                         <ng-template
                           ngx-datatable-cell-template
@@ -171,8 +171,8 @@
                           <button
                             class="btn btn-sm btn-warning mr-1"
                             style="
-                              background-color: #000000 !important;
-                              border-color: #bef264 !important;
+                              background-color: #37A647 !important;
+                              border-color: #ffffff !important;
                             "
                             (click)="editRow(row)"
                           >
@@ -181,8 +181,8 @@
                           <button
                             class="btn btn-sm btn-danger"
                             style="
-                              background-color: #000000 !important;
-                              border-color: #bef264 !important;
+                              background-color: #37A647 !important;
+                              border-color: #ffffff !important;
                             "
                             (click)="deleteRow(row)"
                           >
diff --git a/src/app/content/hemat-app/master/master-category/master-category.component.css b/src/app/content/hemat-app/master/master-category/master-category.component.css
index 2b78be7..66cfac3 100644
--- a/src/app/content/hemat-app/master/master-category/master-category.component.css
+++ b/src/app/content/hemat-app/master/master-category/master-category.component.css
@@ -271,19 +271,21 @@
   ul
   li:not(.disabled):hover
   a {
-  background-color: #252525;
+  background-color: #37A647;
   font-weight: bold;
   color: white;
 }
 
 :host ::ng-deep .ngx-datatable.bootstrap .datatable-footer {
-  background: #252525;
-  color: #ededed;
+  background: #DDE1E6;
+  color: #242222;
   margin-top: -1px;
   overflow: inherit;
 }
 
 :host ::ng-deep .ngx-datatable.bootstrap .datatable-header {
+  background: #DDE1E6;
+  color: #242222;
   font-weight: bold;
   height: unset !important;
   overflow: inherit;
@@ -311,14 +313,38 @@
 }
 
 :host ::ng-deep .ng-select .ng-select-container {
-  color: #ffffff !important;
-  background-color: #252525 !important;
+  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 */
+}
+
+:host ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input>input {
+  color: #242222 !important;
 }
 
 :host ::ng-deep .ngx-datatable.bootstrap .datatable-body-row {
-  background-color: rgba(190, 242, 100, 0.11); /* Black color for table rows */
+  background-color: #FBFBFB; /* Black color for table rows */
 }
 
 :host ::ng-deep .ngx-datatable.bootstrap .datatable-body-row:hover {
-  background-color: #1a1a1a; /* Darker black for hover effect */
+  background-color: #DDE1E6; /* Darker black for hover effect */
 }
+
+.text-custom-label{
+  color: #242222 !important;
+  font-family: "Open Sans", sans-serif !important;
+  font-size: 16px;
+}
+
+.text-custom-data{
+  color: #242222 !important;
+  font-family: "Open Sans", sans-serif !important;
+  font-size: 24px;
+  font-weight: 700;
+}
+
+.style-custom-label{
+  color: #242222 !important;
+}
\ No newline at end of file
diff --git a/src/app/content/hemat-app/master/master-category/master-category.component.html b/src/app/content/hemat-app/master/master-category/master-category.component.html
index 7d89f4e..86c4482 100644
--- a/src/app/content/hemat-app/master/master-category/master-category.component.html
+++ b/src/app/content/hemat-app/master/master-category/master-category.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 !important">
   <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">
               <div class="card-content">
                 <div class="card-body">
                   <div class="row mb-2">
@@ -24,9 +24,9 @@
                       <button
                         class="btn btn-secondary"
                         style="
-                          color: #000000 !important;
-                          border-color: #bef264 !important;
-                          background-color: #bef264 !important;
+                          color: #ffffff !important;
+                          border-color: #37A647 !important;
+                          background-color: #37A647 !important;
                         "
                         (click)="openAddMasterModal()"
                       >
@@ -60,7 +60,7 @@
                           ngx-datatable-cell-template
                           let-rowIndex="rowIndex"
                         >
-                        <p style="color: #ffffff">{{ rowIndex + 1 }}</p>
+                        <p class="style-custom-label">{{ rowIndex + 1 }}</p>
                         </ng-template>
                       </ngx-datatable-column>
                       <ngx-datatable-column
@@ -69,13 +69,13 @@
                         [minWidth]="90"
                       >
                         <ng-template ngx-datatable-header-template>
-                          <span style="color: #ffffff">Name</span>
+                          <span class="style-custom-label">Name</span>
                         </ng-template>
                         <ng-template
                           let-value="value"
                           ngx-datatable-cell-template
                         >
-                        <p style="color: #ffffff">{{ value }}</p>
+                        <p class="style-custom-label">{{ value }}</p>
                         </ng-template>
                       </ngx-datatable-column>
                       <ngx-datatable-column
@@ -84,13 +84,13 @@
                         [minWidth]="90"
                       >
                         <ng-template ngx-datatable-header-template>
-                          <span style="color: #ffffff">Icon</span>
+                          <span class="style-custom-label">Icon</span>
                         </ng-template>
                         <ng-template
                           let-value="value"
                           ngx-datatable-cell-template
                         >
-                        <p style="color: #ffffff">{{ value }}</p>
+                        <p class="style-custom-label">{{ value }}</p>
                         </ng-template>
                       </ngx-datatable-column>
                       <ngx-datatable-column
@@ -99,13 +99,13 @@
                         [minWidth]="90"
                       >
                         <ng-template ngx-datatable-header-template>
-                          <span style="color: #ffffff">Status</span>
+                          <span class="style-custom-label">Status</span>
                         </ng-template>
                         <ng-template
                           ngx-datatable-cell-template
                           let-value="value"
                         >
-                        <p style="color: #ffffff">{{ value}}</p>
+                        <p class="style-custom-label">{{ value}}</p>
                         </ng-template>
                       </ngx-datatable-column>
                       <ngx-datatable-column
@@ -114,7 +114,7 @@
                         [minWidth]="150"
                       >
                       <ng-template ngx-datatable-header-template>
-                        <span style="color: #ffffff">Actions</span>
+                        <span class="style-custom-label">Actions</span>
                       </ng-template>
                         <ng-template
                           ngx-datatable-cell-template
@@ -124,8 +124,8 @@
                           <button
                             class="btn btn-sm btn-warning mr-1"
                             style="
-                              background-color: #000000 !important;
-                              border-color: #bef264 !important;
+                              background-color: #37A647 !important;
+                              border-color: #ffffff !important;
                             "
                             (click)="editRow(row)"
                           >
@@ -134,8 +134,8 @@
                           <button
                             class="btn btn-sm btn-danger"
                             style="
-                              background-color: #000000 !important;
-                              border-color: #bef264 !important;
+                              background-color: #37A647 !important;
+                              border-color: #ffffff !important;
                             "
                             (click)="deleteRow(row)"
                           >
diff --git a/src/app/content/hemat-app/master/master-duration-use/master-duration-use.component.css b/src/app/content/hemat-app/master/master-duration-use/master-duration-use.component.css
index 2b78be7..66cfac3 100644
--- a/src/app/content/hemat-app/master/master-duration-use/master-duration-use.component.css
+++ b/src/app/content/hemat-app/master/master-duration-use/master-duration-use.component.css
@@ -271,19 +271,21 @@
   ul
   li:not(.disabled):hover
   a {
-  background-color: #252525;
+  background-color: #37A647;
   font-weight: bold;
   color: white;
 }
 
 :host ::ng-deep .ngx-datatable.bootstrap .datatable-footer {
-  background: #252525;
-  color: #ededed;
+  background: #DDE1E6;
+  color: #242222;
   margin-top: -1px;
   overflow: inherit;
 }
 
 :host ::ng-deep .ngx-datatable.bootstrap .datatable-header {
+  background: #DDE1E6;
+  color: #242222;
   font-weight: bold;
   height: unset !important;
   overflow: inherit;
@@ -311,14 +313,38 @@
 }
 
 :host ::ng-deep .ng-select .ng-select-container {
-  color: #ffffff !important;
-  background-color: #252525 !important;
+  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 */
+}
+
+:host ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input>input {
+  color: #242222 !important;
 }
 
 :host ::ng-deep .ngx-datatable.bootstrap .datatable-body-row {
-  background-color: rgba(190, 242, 100, 0.11); /* Black color for table rows */
+  background-color: #FBFBFB; /* Black color for table rows */
 }
 
 :host ::ng-deep .ngx-datatable.bootstrap .datatable-body-row:hover {
-  background-color: #1a1a1a; /* Darker black for hover effect */
+  background-color: #DDE1E6; /* Darker black for hover effect */
 }
+
+.text-custom-label{
+  color: #242222 !important;
+  font-family: "Open Sans", sans-serif !important;
+  font-size: 16px;
+}
+
+.text-custom-data{
+  color: #242222 !important;
+  font-family: "Open Sans", sans-serif !important;
+  font-size: 24px;
+  font-weight: 700;
+}
+
+.style-custom-label{
+  color: #242222 !important;
+}
\ No newline at end of file
diff --git a/src/app/content/hemat-app/master/master-duration-use/master-duration-use.component.html b/src/app/content/hemat-app/master/master-duration-use/master-duration-use.component.html
index 6a3dae3..8c765b0 100644
--- a/src/app/content/hemat-app/master/master-duration-use/master-duration-use.component.html
+++ b/src/app/content/hemat-app/master/master-duration-use/master-duration-use.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 !important">
   <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">
               <div class="card-content">
                 <div class="card-body">
                   <div class="row mb-2">
@@ -24,9 +24,9 @@
                       <button
                         class="btn btn-secondary"
                         style="
-                          color: #000000 !important;
-                          border-color: #bef264 !important;
-                          background-color: #bef264 !important;
+                          color: #ffffff !important;
+                          border-color: #37A647 !important;
+                          background-color: #37A647 !important;
                         "
                         (click)="openAddMasterModal()"
                       >
@@ -60,7 +60,7 @@
                           ngx-datatable-cell-template
                           let-rowIndex="rowIndex"
                         >
-                        <p style="color: #ffffff">{{ rowIndex + 1 }}</p>
+                        <p class="style-custom-label">{{ rowIndex + 1 }}</p>
                         </ng-template>
                       </ngx-datatable-column>
                       <ngx-datatable-column
@@ -69,13 +69,13 @@
                         [minWidth]="90"
                       >
                         <ng-template ngx-datatable-header-template>
-                          <span style="color: #ffffff">Name</span>
+                          <span class="style-custom-label">Name</span>
                         </ng-template>
                         <ng-template
                           let-value="value"
                           ngx-datatable-cell-template
                         >
-                        <p style="color: #ffffff">{{ value }}</p>
+                        <p class="style-custom-label">{{ value }}</p>
                         </ng-template>
                       </ngx-datatable-column>
                       <ngx-datatable-column
@@ -84,13 +84,13 @@
                         [minWidth]="90"
                       >
                         <ng-template ngx-datatable-header-template>
-                          <span style="color: #ffffff">Status</span>
+                          <span class="style-custom-label">Status</span>
                         </ng-template>
                         <ng-template
                           ngx-datatable-cell-template
                           let-value="value"
                         >
-                        <p style="color: #ffffff">{{ value }}</p>
+                        <p class="style-custom-label">{{ value }}</p>
                         </ng-template>
                       </ngx-datatable-column>
                       <ngx-datatable-column
@@ -106,8 +106,8 @@
                           <button
                             class="btn btn-sm btn-warning mr-1"
                             style="
-                              background-color: #000000 !important;
-                              border-color: #bef264 !important;
+                              background-color: #37A647 !important;
+                              border-color: #ffffff !important;
                             "
                             (click)="editRow(row)"
                           >
@@ -116,8 +116,8 @@
                           <button
                             class="btn btn-sm btn-danger"
                             style="
-                              background-color: #000000 !important;
-                              border-color: #bef264 !important;
+                              background-color: #37A647 !important;
+                              border-color: #ffffff !important;
                             "
                             (click)="deleteRow(row)"
                           >
diff --git a/src/app/content/hemat-app/master/master-floor/master-floor.component.css b/src/app/content/hemat-app/master/master-floor/master-floor.component.css
index 2b78be7..66cfac3 100644
--- a/src/app/content/hemat-app/master/master-floor/master-floor.component.css
+++ b/src/app/content/hemat-app/master/master-floor/master-floor.component.css
@@ -271,19 +271,21 @@
   ul
   li:not(.disabled):hover
   a {
-  background-color: #252525;
+  background-color: #37A647;
   font-weight: bold;
   color: white;
 }
 
 :host ::ng-deep .ngx-datatable.bootstrap .datatable-footer {
-  background: #252525;
-  color: #ededed;
+  background: #DDE1E6;
+  color: #242222;
   margin-top: -1px;
   overflow: inherit;
 }
 
 :host ::ng-deep .ngx-datatable.bootstrap .datatable-header {
+  background: #DDE1E6;
+  color: #242222;
   font-weight: bold;
   height: unset !important;
   overflow: inherit;
@@ -311,14 +313,38 @@
 }
 
 :host ::ng-deep .ng-select .ng-select-container {
-  color: #ffffff !important;
-  background-color: #252525 !important;
+  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 */
+}
+
+:host ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input>input {
+  color: #242222 !important;
 }
 
 :host ::ng-deep .ngx-datatable.bootstrap .datatable-body-row {
-  background-color: rgba(190, 242, 100, 0.11); /* Black color for table rows */
+  background-color: #FBFBFB; /* Black color for table rows */
 }
 
 :host ::ng-deep .ngx-datatable.bootstrap .datatable-body-row:hover {
-  background-color: #1a1a1a; /* Darker black for hover effect */
+  background-color: #DDE1E6; /* Darker black for hover effect */
 }
+
+.text-custom-label{
+  color: #242222 !important;
+  font-family: "Open Sans", sans-serif !important;
+  font-size: 16px;
+}
+
+.text-custom-data{
+  color: #242222 !important;
+  font-family: "Open Sans", sans-serif !important;
+  font-size: 24px;
+  font-weight: 700;
+}
+
+.style-custom-label{
+  color: #242222 !important;
+}
\ No newline at end of file
diff --git a/src/app/content/hemat-app/master/master-floor/master-floor.component.html b/src/app/content/hemat-app/master/master-floor/master-floor.component.html
index f866872..f769911 100644
--- a/src/app/content/hemat-app/master/master-floor/master-floor.component.html
+++ b/src/app/content/hemat-app/master/master-floor/master-floor.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 !important">
   <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">
               <div class="card-content">
                 <div class="card-body">
                   <div class="row mb-2">
@@ -24,9 +24,9 @@
                       <button
                         class="btn btn-secondary"
                         style="
-                          color: #000000 !important;
-                          border-color: #bef264 !important;
-                          background-color: #bef264 !important;
+                          color: #ffffff !important;
+                          border-color: #37A647 !important;
+                          background-color: #37A647 !important;
                         "
                         (click)="openAddMasterModal()"
                       >
@@ -55,7 +55,7 @@
                           ngx-datatable-cell-template
                           let-rowIndex="rowIndex"
                         >
-                          <p style="color: #ffffff">{{ rowIndex + 1 }}</p>
+                          <p class="style-custom-label">{{ rowIndex + 1 }}</p>
                         </ng-template>
                       </ngx-datatable-column>
                       <ngx-datatable-column
@@ -64,13 +64,13 @@
                         [minWidth]="90"
                       >
                         <ng-template ngx-datatable-header-template>
-                          <span style="color: #ffffff">Name</span>
+                          <span class="style-custom-label">Name</span>
                         </ng-template>
                         <ng-template
                           let-value="value"
                           ngx-datatable-cell-template
                         >
-                          <p style="color: #ffffff">{{ value }}</p>
+                          <p class="style-custom-label">{{ value }}</p>
                         </ng-template>
                       </ngx-datatable-column>
                       <ngx-datatable-column
@@ -79,13 +79,13 @@
                         [minWidth]="90"
                       >
                         <ng-template ngx-datatable-header-template>
-                          <span style="color: #ffffff">Status</span>
+                          <span class="style-custom-label">Status</span>
                         </ng-template>
                         <ng-template
                           ngx-datatable-cell-template
                           let-value="value"
                         >
-                          <p style="color: #ffffff">
+                          <p class="style-custom-label">
                             {{ value }}
                           </p>
                         </ng-template>
@@ -96,7 +96,7 @@
                         [minWidth]="150"
                       >
                         <ng-template ngx-datatable-header-template>
-                          <span style="color: #ffffff">Actions</span>
+                          <span class="style-custom-label">Actions</span>
                         </ng-template>
                         <ng-template
                           ngx-datatable-cell-template
@@ -106,8 +106,8 @@
                           <button
                             class="btn btn-sm btn-warning mr-1"
                             style="
-                              background-color: #000000 !important;
-                              border-color: #bef264 !important;
+                              background-color: #37A647 !important;
+                              border-color: #ffffff !important;
                             "
                             (click)="editRow(row)"
                           >
@@ -116,8 +116,8 @@
                           <button
                             class="btn btn-sm btn-danger"
                             style="
-                              background-color: #000000 !important;
-                              border-color: #bef264 !important;
+                              background-color: #37A647 !important;
+                              border-color: #ffffff !important;
                             "
                             (click)="deleteRow(row)"
                           >
diff --git a/src/app/content/hemat-app/master/master-role/master-role.component.css b/src/app/content/hemat-app/master/master-role/master-role.component.css
index 2b78be7..66cfac3 100644
--- a/src/app/content/hemat-app/master/master-role/master-role.component.css
+++ b/src/app/content/hemat-app/master/master-role/master-role.component.css
@@ -271,19 +271,21 @@
   ul
   li:not(.disabled):hover
   a {
-  background-color: #252525;
+  background-color: #37A647;
   font-weight: bold;
   color: white;
 }
 
 :host ::ng-deep .ngx-datatable.bootstrap .datatable-footer {
-  background: #252525;
-  color: #ededed;
+  background: #DDE1E6;
+  color: #242222;
   margin-top: -1px;
   overflow: inherit;
 }
 
 :host ::ng-deep .ngx-datatable.bootstrap .datatable-header {
+  background: #DDE1E6;
+  color: #242222;
   font-weight: bold;
   height: unset !important;
   overflow: inherit;
@@ -311,14 +313,38 @@
 }
 
 :host ::ng-deep .ng-select .ng-select-container {
-  color: #ffffff !important;
-  background-color: #252525 !important;
+  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 */
+}
+
+:host ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input>input {
+  color: #242222 !important;
 }
 
 :host ::ng-deep .ngx-datatable.bootstrap .datatable-body-row {
-  background-color: rgba(190, 242, 100, 0.11); /* Black color for table rows */
+  background-color: #FBFBFB; /* Black color for table rows */
 }
 
 :host ::ng-deep .ngx-datatable.bootstrap .datatable-body-row:hover {
-  background-color: #1a1a1a; /* Darker black for hover effect */
+  background-color: #DDE1E6; /* Darker black for hover effect */
 }
+
+.text-custom-label{
+  color: #242222 !important;
+  font-family: "Open Sans", sans-serif !important;
+  font-size: 16px;
+}
+
+.text-custom-data{
+  color: #242222 !important;
+  font-family: "Open Sans", sans-serif !important;
+  font-size: 24px;
+  font-weight: 700;
+}
+
+.style-custom-label{
+  color: #242222 !important;
+}
\ No newline at end of file
diff --git a/src/app/content/hemat-app/master/master-role/master-role.component.html b/src/app/content/hemat-app/master/master-role/master-role.component.html
index d95e108..4772863 100644
--- a/src/app/content/hemat-app/master/master-role/master-role.component.html
+++ b/src/app/content/hemat-app/master/master-role/master-role.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 !important">
   <div class="content-wrapper">
     <div class="content-header row mb-1">
       <app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
@@ -10,7 +10,7 @@
             class="col-12"
             *blockUI="'zeroConfiguration'; message: 'Loading'"
           >
-            <div class="card" style="background-color: #252525 !important">
+            <div class="card" style="background-color: #FBFBFB !important">
               <div class="card-content">
                 <div class="card-body">
                   <div class="row mb-2">
@@ -28,9 +28,9 @@
                       <button
                         class="btn btn-secondary"
                         style="
-                          color: #000000 !important;
-                          border-color: #bef264 !important;
-                          background-color: #bef264 !important;
+                          color: #ffffff !important;
+                          border-color: #37A647 !important;
+                          background-color: #37A647 !important;
                         "
                         (click)="openAddMasterModal()"
                       >
@@ -64,7 +64,7 @@
                           ngx-datatable-cell-template
                           let-rowIndex="rowIndex"
                         >
-                          <p style="color: #ffffff">{{ rowIndex + 1 }}</p>
+                          <p class="style-custom-label">{{ rowIndex + 1 }}</p>
                         </ng-template>
                       </ngx-datatable-column>
                       <ngx-datatable-column
@@ -73,13 +73,13 @@
                         [minWidth]="90"
                       >
                         <ng-template ngx-datatable-header-template>
-                          <span style="color: #ffffff">Name</span>
+                          <span class="style-custom-label">Name</span>
                         </ng-template>
                         <ng-template
                           let-value="value"
                           ngx-datatable-cell-template
                         >
-                          <p style="color: #ffffff">{{ value }}</p>
+                          <p class="style-custom-label">{{ value }}</p>
                         </ng-template>
                       </ngx-datatable-column>
                       <ngx-datatable-column
@@ -88,13 +88,13 @@
                         [minWidth]="90"
                       >
                         <ng-template ngx-datatable-header-template>
-                          <span style="color: #ffffff">Status</span>
+                          <span class="style-custom-label">Status</span>
                         </ng-template>
                         <ng-template
                           ngx-datatable-cell-template
                           let-value="value"
                         >
-                          <p style="color: #ffffff">
+                          <p class="style-custom-label">
                             {{ value }}
                           </p>
                         </ng-template>
@@ -105,7 +105,7 @@
                         [minWidth]="150"
                       >
                         <ng-template ngx-datatable-header-template>
-                          <span style="color: #ffffff">Actions</span>
+                          <span class="style-custom-label">Actions</span>
                         </ng-template>
                         <ng-template
                           ngx-datatable-cell-template
@@ -115,8 +115,8 @@
                           <button
                             class="btn btn-sm btn-warning mr-1"
                             style="
-                              background-color: #000000 !important;
-                              border-color: #bef264 !important;
+                              background-color: #37A647 !important;
+                              border-color: #ffffff !important;
                             "
                             (click)="editRow(row)"
                           >
@@ -125,8 +125,8 @@
                           <button
                             class="btn btn-sm btn-danger"
                             style="
-                              background-color: #000000 !important;
-                              border-color: #bef264 !important;
+                              background-color: #37A647 !important;
+                              border-color: #ffffff !important;
                             "
                             (click)="deleteRow(row)"
                           >
diff --git a/src/app/content/hemat-app/master/master-room/add-edit-master-room/add-edit-master-room.component.html b/src/app/content/hemat-app/master/master-room/add-edit-master-room/add-edit-master-room.component.html
index 7f4c26b..e92e66d 100644
--- a/src/app/content/hemat-app/master/master-room/add-edit-master-room/add-edit-master-room.component.html
+++ b/src/app/content/hemat-app/master/master-room/add-edit-master-room/add-edit-master-room.component.html
@@ -1,14 +1,14 @@
-<div class="modal-header" style="background-color: #000000 !important">
-  <h4 class="modal-title" style="color: #ffffff">{{labelRoom}}</h4>
+<div class="modal-header" style="background-color: #FBFBFB !important">
+  <h4 class="modal-title" style="color: #242222">{{labelRoom}}</h4>
   <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
     <span aria-hidden="true">&times;</span>
   </button>
 </div>
-<div class="modal-body" style="background-color: #000000 !important">
+<div class="modal-body" style="background-color: #FBFBFB !important">
   <form [formGroup]="myForm">
     <div class="form-row">
       <div class="form-group col-md-6">
-        <label for="name" style="color: #ffffff">Name Room:</label>
+        <label for="name" style="color: #242222">Name Room:</label>
         <input
           type="text"
           class="form-control"
@@ -24,7 +24,7 @@
         </div>
       </div>
       <div class="form-group col-md-6">
-        <label for="statusId" style="color: #ffffff">Building:</label>
+        <label for="statusId" style="color: #242222">Building:</label>
         <select
           id="projectinput5"
           class="form-control"
@@ -44,7 +44,7 @@
         </div>
       </div>
       <div class="form-group col-md-6">
-        <label for="description" style="color: #ffffff">Description:</label>
+        <label for="description" style="color: #242222">Description:</label>
         <input
           type="text"
           class="form-control"
@@ -57,7 +57,7 @@
         </div>
       </div>
       <div class="form-group col-md-6">
-        <label for="statusId" style="color: #ffffff">Status:</label>
+        <label for="statusId" style="color: #242222">Status:</label>
         <select
           id="projectinput5"
           class="form-control"
@@ -74,14 +74,14 @@
     </div>
   </form>
 </div>
-<div class="modal-footer" style="background-color: #000000 !important">
+<div class="modal-footer" style="background-color: #FBFBFB !important">
   <button
     type="button"
     class="btn btn-secondary"
     style="
-      color: #c3f164 !important;
-      background-color: #000000 !important;
-      border-color: #c3f164 !important;
+      color: #242222 !important;
+      background-color: #FBFBFB !important;
+      border-color: #FBFBFB !important;
     "
     (click)="activeModal.dismiss('Cross click')"
   >
@@ -90,7 +90,7 @@
   <button
     type="button"
     class="btn btn-primary"
-    style="color: #000000 !important; background-color: #c3f164 !important"
+    style="color: #ffffff !important; background-color: #37A647 !important"
     (click)="addRow()"
   >
     Save
diff --git a/src/app/content/hemat-app/master/master-room/master-room.component.css b/src/app/content/hemat-app/master/master-room/master-room.component.css
index 2b78be7..66cfac3 100644
--- a/src/app/content/hemat-app/master/master-room/master-room.component.css
+++ b/src/app/content/hemat-app/master/master-room/master-room.component.css
@@ -271,19 +271,21 @@
   ul
   li:not(.disabled):hover
   a {
-  background-color: #252525;
+  background-color: #37A647;
   font-weight: bold;
   color: white;
 }
 
 :host ::ng-deep .ngx-datatable.bootstrap .datatable-footer {
-  background: #252525;
-  color: #ededed;
+  background: #DDE1E6;
+  color: #242222;
   margin-top: -1px;
   overflow: inherit;
 }
 
 :host ::ng-deep .ngx-datatable.bootstrap .datatable-header {
+  background: #DDE1E6;
+  color: #242222;
   font-weight: bold;
   height: unset !important;
   overflow: inherit;
@@ -311,14 +313,38 @@
 }
 
 :host ::ng-deep .ng-select .ng-select-container {
-  color: #ffffff !important;
-  background-color: #252525 !important;
+  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 */
+}
+
+:host ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input>input {
+  color: #242222 !important;
 }
 
 :host ::ng-deep .ngx-datatable.bootstrap .datatable-body-row {
-  background-color: rgba(190, 242, 100, 0.11); /* Black color for table rows */
+  background-color: #FBFBFB; /* Black color for table rows */
 }
 
 :host ::ng-deep .ngx-datatable.bootstrap .datatable-body-row:hover {
-  background-color: #1a1a1a; /* Darker black for hover effect */
+  background-color: #DDE1E6; /* Darker black for hover effect */
 }
+
+.text-custom-label{
+  color: #242222 !important;
+  font-family: "Open Sans", sans-serif !important;
+  font-size: 16px;
+}
+
+.text-custom-data{
+  color: #242222 !important;
+  font-family: "Open Sans", sans-serif !important;
+  font-size: 24px;
+  font-weight: 700;
+}
+
+.style-custom-label{
+  color: #242222 !important;
+}
\ No newline at end of file
diff --git a/src/app/content/hemat-app/master/master-room/master-room.component.html b/src/app/content/hemat-app/master/master-room/master-room.component.html
index 2e74cb7..7a23e97 100644
--- a/src/app/content/hemat-app/master/master-room/master-room.component.html
+++ b/src/app/content/hemat-app/master/master-room/master-room.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 !important">
   <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">
               <div class="card-content">
                 <div class="card-body">
                   <div class="row mb-2">
@@ -24,9 +24,9 @@
                       <button
                         class="btn btn-secondary"
                         style="
-                          color: #000000 !important;
-                          border-color: #bef264 !important;
-                          background-color: #bef264 !important;
+                          color: #ffffff !important;
+                          border-color: #37A647 !important;
+                          background-color: #37A647 !important;
                         "
                         (click)="openAddMasterModal()"
                       >
@@ -60,7 +60,7 @@
                           ngx-datatable-cell-template
                           let-rowIndex="rowIndex"
                         >
-                        <p style="color: #ffffff">{{ rowIndex + 1 }}</p>
+                        <p class="style-custom-label">{{ rowIndex + 1 }}</p>
                         </ng-template>
                       </ngx-datatable-column>
                       <ngx-datatable-column
@@ -69,13 +69,13 @@
                         [minWidth]="90"
                       >
                         <ng-template ngx-datatable-header-template>
-                          <span style="color: #ffffff">Room</span>
+                          <span class="style-custom-label">Room</span>
                         </ng-template>
                         <ng-template
                           let-value="value"
                           ngx-datatable-cell-template
                         >
-                        <p style="color: #ffffff">{{ value.name }}</p>
+                        <p class="style-custom-label">{{ value.name }}</p>
                         </ng-template>
                       </ngx-datatable-column>
 
@@ -85,13 +85,13 @@
                         [minWidth]="90"
                       >
                         <ng-template ngx-datatable-header-template>
-                          <span style="color: #ffffff">Building</span>
+                          <span class="style-custom-label">Building</span>
                         </ng-template>
                         <ng-template
                           let-value="value"
                           ngx-datatable-cell-template
                         >
-                        <p style="color: #ffffff">{{ value.name }}</p>
+                        <p class="style-custom-label">{{ value.name }}</p>
                         </ng-template>
                       </ngx-datatable-column>
 
@@ -101,13 +101,13 @@
                         [minWidth]="90"
                       >
                         <ng-template ngx-datatable-header-template>
-                          <span style="color: #ffffff">Description</span>
+                          <span class="style-custom-label">Description</span>
                         </ng-template>
                         <ng-template
                           ngx-datatable-cell-template
                           let-value="value"
                         >
-                        <p style="color: #ffffff">{{ value.description }}</p>
+                        <p class="style-custom-label">{{ value.description }}</p>
                         </ng-template>
                       </ngx-datatable-column>
 
@@ -117,13 +117,13 @@
                         [minWidth]="90"
                       >
                         <ng-template ngx-datatable-header-template>
-                          <span style="color: #ffffff">Status</span>
+                          <span class="style-custom-label">Status</span>
                         </ng-template>
                         <ng-template
                           ngx-datatable-cell-template
                           let-value="value"
                         >
-                        <p style="color: #ffffff">{{ value.name }}</p>
+                        <p class="style-custom-label">{{ value.name }}</p>
                         </ng-template>
                       </ngx-datatable-column>
                       <ngx-datatable-column
@@ -132,7 +132,7 @@
                         [minWidth]="150"
                       >
                       <ng-template ngx-datatable-header-template>
-                        <span style="color: #ffffff">Actions</span>
+                        <span class="style-custom-label">Actions</span>
                       </ng-template>
                         <ng-template
                           ngx-datatable-cell-template
@@ -142,8 +142,8 @@
                           <button
                             class="btn btn-sm btn-warning mr-1"
                             style="
-                              background-color: #000000 !important;
-                              border-color: #bef264 !important;
+                              background-color: #37A647 !important;
+                              border-color: #ffffff !important;
                             "
                             (click)="editRow(row)"
                           >
@@ -152,8 +152,8 @@
                           <button
                             class="btn btn-sm btn-danger"
                             style="
-                              background-color: #000000 !important;
-                              border-color: #bef264 !important;
+                              background-color: #37A647 !important;
+                              border-color: #ffffff !important;
                             "
                             (click)="deleteRow(row)"
                           >
diff --git a/src/app/content/hemat-app/master/master-status/master-status.component.css b/src/app/content/hemat-app/master/master-status/master-status.component.css
index 2b78be7..66cfac3 100644
--- a/src/app/content/hemat-app/master/master-status/master-status.component.css
+++ b/src/app/content/hemat-app/master/master-status/master-status.component.css
@@ -271,19 +271,21 @@
   ul
   li:not(.disabled):hover
   a {
-  background-color: #252525;
+  background-color: #37A647;
   font-weight: bold;
   color: white;
 }
 
 :host ::ng-deep .ngx-datatable.bootstrap .datatable-footer {
-  background: #252525;
-  color: #ededed;
+  background: #DDE1E6;
+  color: #242222;
   margin-top: -1px;
   overflow: inherit;
 }
 
 :host ::ng-deep .ngx-datatable.bootstrap .datatable-header {
+  background: #DDE1E6;
+  color: #242222;
   font-weight: bold;
   height: unset !important;
   overflow: inherit;
@@ -311,14 +313,38 @@
 }
 
 :host ::ng-deep .ng-select .ng-select-container {
-  color: #ffffff !important;
-  background-color: #252525 !important;
+  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 */
+}
+
+:host ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input>input {
+  color: #242222 !important;
 }
 
 :host ::ng-deep .ngx-datatable.bootstrap .datatable-body-row {
-  background-color: rgba(190, 242, 100, 0.11); /* Black color for table rows */
+  background-color: #FBFBFB; /* Black color for table rows */
 }
 
 :host ::ng-deep .ngx-datatable.bootstrap .datatable-body-row:hover {
-  background-color: #1a1a1a; /* Darker black for hover effect */
+  background-color: #DDE1E6; /* Darker black for hover effect */
 }
+
+.text-custom-label{
+  color: #242222 !important;
+  font-family: "Open Sans", sans-serif !important;
+  font-size: 16px;
+}
+
+.text-custom-data{
+  color: #242222 !important;
+  font-family: "Open Sans", sans-serif !important;
+  font-size: 24px;
+  font-weight: 700;
+}
+
+.style-custom-label{
+  color: #242222 !important;
+}
\ No newline at end of file
diff --git a/src/app/content/hemat-app/master/master-status/master-status.component.html b/src/app/content/hemat-app/master/master-status/master-status.component.html
index 1fbb4df..c16b307 100644
--- a/src/app/content/hemat-app/master/master-status/master-status.component.html
+++ b/src/app/content/hemat-app/master/master-status/master-status.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 !important">
   <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">
               <div class="card-content">
                 <div class="card-body">
                   <div class="row mb-2">
@@ -24,9 +24,9 @@
                       <button
                         class="btn btn-secondary"
                         style="
-                          color: #000000 !important;
-                          border-color: #bef264 !important;
-                          background-color: #bef264 !important;
+                          color: #ffffff !important;
+                          border-color: #37A647 !important;
+                          background-color: #37A647 !important;
                         "
                         (click)="openAddMasterModal()"
                       >
@@ -60,7 +60,7 @@
                           ngx-datatable-cell-template
                           let-rowIndex="rowIndex"
                         >
-                          <p style="color: #ffffff">{{ rowIndex + 1 }}</p>
+                          <p class="style-custom-label">{{ rowIndex + 1 }}</p>
                         </ng-template>
                       </ngx-datatable-column>
                       <ngx-datatable-column
@@ -69,13 +69,13 @@
                         [minWidth]="90"
                       >
                         <ng-template ngx-datatable-header-template>
-                          <span style="color: #ffffff">Name</span>
+                          <span class="style-custom-label">Name</span>
                         </ng-template>
                         <ng-template
                           let-value="value"
                           ngx-datatable-cell-template
                         >
-                          <p style="color: #ffffff">{{ value }}</p>
+                          <p class="style-custom-label">{{ value }}</p>
                         </ng-template>
                       </ngx-datatable-column>
                       <ngx-datatable-column
@@ -84,13 +84,13 @@
                         [minWidth]="90"
                       >
                         <ng-template ngx-datatable-header-template>
-                          <span style="color: #ffffff">Status</span>
+                          <span class="style-custom-label">Status</span>
                         </ng-template>
                         <ng-template
                           ngx-datatable-cell-template
                           let-value="value"
                         >
-                          <p style="color: #ffffff">
+                          <p class="style-custom-label">
                             {{ value }}
                           </p>
                         </ng-template>
@@ -101,7 +101,7 @@
                         [minWidth]="150"
                       >
                         <ng-template ngx-datatable-header-template>
-                          <span style="color: #ffffff">Actions</span>
+                          <span class="style-custom-label">Actions</span>
                         </ng-template>
                         <ng-template
                           ngx-datatable-cell-template
@@ -111,8 +111,8 @@
                           <button
                             class="btn btn-sm btn-warning mr-1"
                             style="
-                              background-color: #000000 !important;
-                              border-color: #bef264 !important;
+                              background-color: #37A647 !important;
+                              border-color: #ffffff !important;
                             "
                             (click)="editRow(row)"
                           >
@@ -121,8 +121,8 @@
                           <button
                             class="btn btn-sm btn-danger"
                             style="
-                              background-color: #000000 !important;
-                              border-color: #bef264 !important;
+                              background-color: #37A647 !important;
+                              border-color: #ffffff !important;
                             "
                             (click)="deleteRow(row)"
                           >
diff --git a/src/app/content/hemat-app/master/master-type/master-type.component.css b/src/app/content/hemat-app/master/master-type/master-type.component.css
index 2b78be7..66cfac3 100644
--- a/src/app/content/hemat-app/master/master-type/master-type.component.css
+++ b/src/app/content/hemat-app/master/master-type/master-type.component.css
@@ -271,19 +271,21 @@
   ul
   li:not(.disabled):hover
   a {
-  background-color: #252525;
+  background-color: #37A647;
   font-weight: bold;
   color: white;
 }
 
 :host ::ng-deep .ngx-datatable.bootstrap .datatable-footer {
-  background: #252525;
-  color: #ededed;
+  background: #DDE1E6;
+  color: #242222;
   margin-top: -1px;
   overflow: inherit;
 }
 
 :host ::ng-deep .ngx-datatable.bootstrap .datatable-header {
+  background: #DDE1E6;
+  color: #242222;
   font-weight: bold;
   height: unset !important;
   overflow: inherit;
@@ -311,14 +313,38 @@
 }
 
 :host ::ng-deep .ng-select .ng-select-container {
-  color: #ffffff !important;
-  background-color: #252525 !important;
+  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 */
+}
+
+:host ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input>input {
+  color: #242222 !important;
 }
 
 :host ::ng-deep .ngx-datatable.bootstrap .datatable-body-row {
-  background-color: rgba(190, 242, 100, 0.11); /* Black color for table rows */
+  background-color: #FBFBFB; /* Black color for table rows */
 }
 
 :host ::ng-deep .ngx-datatable.bootstrap .datatable-body-row:hover {
-  background-color: #1a1a1a; /* Darker black for hover effect */
+  background-color: #DDE1E6; /* Darker black for hover effect */
 }
+
+.text-custom-label{
+  color: #242222 !important;
+  font-family: "Open Sans", sans-serif !important;
+  font-size: 16px;
+}
+
+.text-custom-data{
+  color: #242222 !important;
+  font-family: "Open Sans", sans-serif !important;
+  font-size: 24px;
+  font-weight: 700;
+}
+
+.style-custom-label{
+  color: #242222 !important;
+}
\ No newline at end of file
diff --git a/src/app/content/hemat-app/master/master-type/master-type.component.html b/src/app/content/hemat-app/master/master-type/master-type.component.html
index 1fbb4df..c16b307 100644
--- a/src/app/content/hemat-app/master/master-type/master-type.component.html
+++ b/src/app/content/hemat-app/master/master-type/master-type.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 !important">
   <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">
               <div class="card-content">
                 <div class="card-body">
                   <div class="row mb-2">
@@ -24,9 +24,9 @@
                       <button
                         class="btn btn-secondary"
                         style="
-                          color: #000000 !important;
-                          border-color: #bef264 !important;
-                          background-color: #bef264 !important;
+                          color: #ffffff !important;
+                          border-color: #37A647 !important;
+                          background-color: #37A647 !important;
                         "
                         (click)="openAddMasterModal()"
                       >
@@ -60,7 +60,7 @@
                           ngx-datatable-cell-template
                           let-rowIndex="rowIndex"
                         >
-                          <p style="color: #ffffff">{{ rowIndex + 1 }}</p>
+                          <p class="style-custom-label">{{ rowIndex + 1 }}</p>
                         </ng-template>
                       </ngx-datatable-column>
                       <ngx-datatable-column
@@ -69,13 +69,13 @@
                         [minWidth]="90"
                       >
                         <ng-template ngx-datatable-header-template>
-                          <span style="color: #ffffff">Name</span>
+                          <span class="style-custom-label">Name</span>
                         </ng-template>
                         <ng-template
                           let-value="value"
                           ngx-datatable-cell-template
                         >
-                          <p style="color: #ffffff">{{ value }}</p>
+                          <p class="style-custom-label">{{ value }}</p>
                         </ng-template>
                       </ngx-datatable-column>
                       <ngx-datatable-column
@@ -84,13 +84,13 @@
                         [minWidth]="90"
                       >
                         <ng-template ngx-datatable-header-template>
-                          <span style="color: #ffffff">Status</span>
+                          <span class="style-custom-label">Status</span>
                         </ng-template>
                         <ng-template
                           ngx-datatable-cell-template
                           let-value="value"
                         >
-                          <p style="color: #ffffff">
+                          <p class="style-custom-label">
                             {{ value }}
                           </p>
                         </ng-template>
@@ -101,7 +101,7 @@
                         [minWidth]="150"
                       >
                         <ng-template ngx-datatable-header-template>
-                          <span style="color: #ffffff">Actions</span>
+                          <span class="style-custom-label">Actions</span>
                         </ng-template>
                         <ng-template
                           ngx-datatable-cell-template
@@ -111,8 +111,8 @@
                           <button
                             class="btn btn-sm btn-warning mr-1"
                             style="
-                              background-color: #000000 !important;
-                              border-color: #bef264 !important;
+                              background-color: #37A647 !important;
+                              border-color: #ffffff !important;
                             "
                             (click)="editRow(row)"
                           >
@@ -121,8 +121,8 @@
                           <button
                             class="btn btn-sm btn-danger"
                             style="
-                              background-color: #000000 !important;
-                              border-color: #bef264 !important;
+                              background-color: #37A647 !important;
+                              border-color: #ffffff !important;
                             "
                             (click)="deleteRow(row)"
                           >
diff --git a/src/app/content/hemat-app/master/master-voltage/master-voltage.component.css b/src/app/content/hemat-app/master/master-voltage/master-voltage.component.css
index 2b78be7..66cfac3 100644
--- a/src/app/content/hemat-app/master/master-voltage/master-voltage.component.css
+++ b/src/app/content/hemat-app/master/master-voltage/master-voltage.component.css
@@ -271,19 +271,21 @@
   ul
   li:not(.disabled):hover
   a {
-  background-color: #252525;
+  background-color: #37A647;
   font-weight: bold;
   color: white;
 }
 
 :host ::ng-deep .ngx-datatable.bootstrap .datatable-footer {
-  background: #252525;
-  color: #ededed;
+  background: #DDE1E6;
+  color: #242222;
   margin-top: -1px;
   overflow: inherit;
 }
 
 :host ::ng-deep .ngx-datatable.bootstrap .datatable-header {
+  background: #DDE1E6;
+  color: #242222;
   font-weight: bold;
   height: unset !important;
   overflow: inherit;
@@ -311,14 +313,38 @@
 }
 
 :host ::ng-deep .ng-select .ng-select-container {
-  color: #ffffff !important;
-  background-color: #252525 !important;
+  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 */
+}
+
+:host ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input>input {
+  color: #242222 !important;
 }
 
 :host ::ng-deep .ngx-datatable.bootstrap .datatable-body-row {
-  background-color: rgba(190, 242, 100, 0.11); /* Black color for table rows */
+  background-color: #FBFBFB; /* Black color for table rows */
 }
 
 :host ::ng-deep .ngx-datatable.bootstrap .datatable-body-row:hover {
-  background-color: #1a1a1a; /* Darker black for hover effect */
+  background-color: #DDE1E6; /* Darker black for hover effect */
 }
+
+.text-custom-label{
+  color: #242222 !important;
+  font-family: "Open Sans", sans-serif !important;
+  font-size: 16px;
+}
+
+.text-custom-data{
+  color: #242222 !important;
+  font-family: "Open Sans", sans-serif !important;
+  font-size: 24px;
+  font-weight: 700;
+}
+
+.style-custom-label{
+  color: #242222 !important;
+}
\ No newline at end of file
diff --git a/src/app/content/hemat-app/master/master-voltage/master-voltage.component.html b/src/app/content/hemat-app/master/master-voltage/master-voltage.component.html
index 1fbb4df..c16b307 100644
--- a/src/app/content/hemat-app/master/master-voltage/master-voltage.component.html
+++ b/src/app/content/hemat-app/master/master-voltage/master-voltage.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 !important">
   <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">
               <div class="card-content">
                 <div class="card-body">
                   <div class="row mb-2">
@@ -24,9 +24,9 @@
                       <button
                         class="btn btn-secondary"
                         style="
-                          color: #000000 !important;
-                          border-color: #bef264 !important;
-                          background-color: #bef264 !important;
+                          color: #ffffff !important;
+                          border-color: #37A647 !important;
+                          background-color: #37A647 !important;
                         "
                         (click)="openAddMasterModal()"
                       >
@@ -60,7 +60,7 @@
                           ngx-datatable-cell-template
                           let-rowIndex="rowIndex"
                         >
-                          <p style="color: #ffffff">{{ rowIndex + 1 }}</p>
+                          <p class="style-custom-label">{{ rowIndex + 1 }}</p>
                         </ng-template>
                       </ngx-datatable-column>
                       <ngx-datatable-column
@@ -69,13 +69,13 @@
                         [minWidth]="90"
                       >
                         <ng-template ngx-datatable-header-template>
-                          <span style="color: #ffffff">Name</span>
+                          <span class="style-custom-label">Name</span>
                         </ng-template>
                         <ng-template
                           let-value="value"
                           ngx-datatable-cell-template
                         >
-                          <p style="color: #ffffff">{{ value }}</p>
+                          <p class="style-custom-label">{{ value }}</p>
                         </ng-template>
                       </ngx-datatable-column>
                       <ngx-datatable-column
@@ -84,13 +84,13 @@
                         [minWidth]="90"
                       >
                         <ng-template ngx-datatable-header-template>
-                          <span style="color: #ffffff">Status</span>
+                          <span class="style-custom-label">Status</span>
                         </ng-template>
                         <ng-template
                           ngx-datatable-cell-template
                           let-value="value"
                         >
-                          <p style="color: #ffffff">
+                          <p class="style-custom-label">
                             {{ value }}
                           </p>
                         </ng-template>
@@ -101,7 +101,7 @@
                         [minWidth]="150"
                       >
                         <ng-template ngx-datatable-header-template>
-                          <span style="color: #ffffff">Actions</span>
+                          <span class="style-custom-label">Actions</span>
                         </ng-template>
                         <ng-template
                           ngx-datatable-cell-template
@@ -111,8 +111,8 @@
                           <button
                             class="btn btn-sm btn-warning mr-1"
                             style="
-                              background-color: #000000 !important;
-                              border-color: #bef264 !important;
+                              background-color: #37A647 !important;
+                              border-color: #ffffff !important;
                             "
                             (click)="editRow(row)"
                           >
@@ -121,8 +121,8 @@
                           <button
                             class="btn btn-sm btn-danger"
                             style="
-                              background-color: #000000 !important;
-                              border-color: #bef264 !important;
+                              background-color: #37A647 !important;
+                              border-color: #ffffff !important;
                             "
                             (click)="deleteRow(row)"
                           >
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 0f9e9b4..d8d00b8 100644
--- a/src/app/content/hemat-app/monitoring/building/building.component.html
+++ b/src/app/content/hemat-app/monitoring/building/building.component.html
@@ -18,7 +18,7 @@
         </div>
         <div class="row mt-2">
           <div
-            class="col-xl-4 col-lg-6 col-md-12 col-sm-12 col-12"
+            class="col-12 col-sm-12 col-md-12 col-lg-6 col-xl-4"
             *ngFor="let data of filteredRows"
           >
             <div
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 fa67972..1b9d770 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
@@ -60,23 +60,24 @@
                         <div class="d-flex">
                           <button
                             type="button"
-                            class="btn btn-outline-success ml-2"
+                            class="btn ml-2"
                             (click)="doFilter()"
                             style="
-                              background-color: #DDE1E6 !important;
-                              border-color: #6B6B6B !important;
+                              background-color: #37A647 !important;
+                              border-color: #37A647 !important;
                               border-radius: 12px;
+                              color: #ffffff;
                             "
                             [disabled]="spinnerFilterActive"
                           >
                             <i
                               class="la la-search"
-                              style="color: #6B6B6B !important"
+                              style="color: #ffffff !important"
                               *ngIf="!spinnerFilterActive"
                             ></i>
                             <i
                               class="la la-spinner spinner"
-                              style="color: #6B6B6B !important"
+                              style="color: #ffffff !important"
                               *ngIf="spinnerFilterActive"
                             ></i>
                           </button>