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 a99d931..1de4cf8 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,7 +90,6 @@ input[type="month"]::-webkit-calendar-picker-indicator {
 }
 
 
-/* table */
 :host
   ::ng-deep
   .ngx-datatable.bootstrap
@@ -370,13 +369,15 @@ input[type="month"]::-webkit-calendar-picker-indicator {
 }
 
 :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;
@@ -404,21 +405,38 @@ input[type="month"]::-webkit-calendar-picker-indicator {
 }
 
 :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 */
 }
 
-.modal-open .content {
-  filter: blur(5px);
-  transition: filter 0.3s ease-in-out;
+.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;
+}
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 4b4eff2..8e5421f 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
@@ -7,21 +7,20 @@
       <section>
         <div class="row">
           <div class="col-12 col-sm-6 col-md-6 col-lg-6">
-            <div class="card" style="background-color: #252525 !important">
+            <div class="card" style="background-color: #DDE1E6 !important">
               <div
                 class="card-header"
-                style="background-color: #252525 !important"
+                style="background-color: #DDE1E6 !important"
               >
                 <h4
-                  class="card-title text-center"
-                  style="color: #ffffff !important"
+                  class="card-title text-center text-custom-label"
                 >
                   Comparison of Previous Month Costs
                 </h4>
                 <hr
                   style="
-                    border-top: 4px solid #ffffff;
-                    border-color: #ffffff !important;
+                    border-top: 4px solid #242222;
+                    border-color: #242222 !important;
                   "
                 />
               </div>
@@ -36,21 +35,20 @@
             </div>
           </div>
           <div class="col-12 col-sm-6 col-md-6 col-lg-6">
-            <div class="card" style="background-color: #252525 !important">
+            <div class="card" style="background-color: #DDE1E6 !important">
               <div
                 class="card-header"
-                style="background-color: #252525 !important"
+                style="background-color: #DDE1E6 !important"
               >
                 <h4
-                  class="card-title text-center"
-                  style="color: #ffffff !important"
+                  class="card-title text-center text-custom-label"
                 >
                   Comparison of Actual Costs and Estimated Costs
                 </h4>
                 <hr
                   style="
-                    border-top: 4px solid #ffffff;
-                    border-color: #ffffff !important;
+                    border-top: 4px solid #242222;
+                    border-color: #242222 !important;
                   "
                 />
               </div>
@@ -67,7 +65,7 @@
         </div>
       </section>
       <section id="configuration">
-        <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">
@@ -115,19 +113,19 @@
                       class="btn btn-outline-success"
                       (click)="doFilter()"
                       style="
-                        background-color: #252525 !important;
-                        border-color: #bef264 !important;
+                        background-color: #DDE1E6 !important;
+                        border-color: #DDE1E6 !important;
                       "
                       [disabled]="spinnerFilterActive"
                     >
                       <i
                         class="la la-search"
-                        style="color: #ffffff !important"
+                        style="color: #242222 !important"
                         *ngIf="!spinnerFilterActive"
                       ></i>
                       <i
                         class="la la-spinner spinner"
-                        style="color: #ffffff !important"
+                        style="color: #242222 !important"
                         *ngIf="spinnerFilterActive"
                       ></i>
                     </button>
@@ -148,13 +146,13 @@
                       />
                       <div
                         class="input-group-append"
-                        style="background-color: #252525 !important"
+                        style="background-color: #FBFBFB !important"
                       >
                         <span
                           class="input-group-text"
                           style="
-                            background-color: #252525 !important;
-                            color: #ffffff;
+                            background-color: #FBFBFB !important;
+                            color: #242222;
                             height: 40px !important;
                           "
                           >Kwh</span
@@ -177,13 +175,13 @@
                       />
                       <div
                         class="input-group-append"
-                        style="background-color: #252525 !important"
+                        style="background-color: #FBFBFB !important"
                       >
                         <span
                           class="input-group-text"
                           style="
-                            background-color: #252525 !important;
-                            color: #ffffff;
+                            background-color: #FBFBFB !important;
+                            color: #242222;
                             height: 40px !important;
                           "
                           >IDR</span
@@ -199,9 +197,9 @@
                       class="btn btn-secondary mr-2"
                       style="
                         width: 100%;
-                        background-color: #bef264 !important;
-                        border-color: #bef264 !important;
-                        color: #000000 !important;
+                        background-color: #37A647 !important;
+                        border-color: #37A647 !important;
+                        color: #ffffff !important;
                       "
                       (click)="export()"
                       [disabled]="spinnerExportActive"
@@ -218,9 +216,9 @@
                       class="btn btn-secondary mr-2"
                       style="
                         width: 100%;
-                        background-color: #bef264 !important;
-                        border-color: #bef264 !important;
-                        color: #000000 !important;
+                        background-color: #37A647 !important;
+                        border-color: #37A647 !important;
+                        color: #ffffff !important;
                       "
                       (click)="syncData()"
                       [disabled]="spinnerActive"
@@ -236,9 +234,9 @@
                       class="btn btn-secondary"
                       style="
                         width: 100%;
-                        background-color: #bef264 !important;
-                        border-color: #bef264 !important;
-                        color: #000000 !important;
+                        background-color: #37A647 !important;
+                        border-color: #37A647 !important;
+                        color: #ffffff !important;
                       "
                       (click)="addFieldValue()"
                     >
@@ -270,7 +268,7 @@
                       ngx-datatable-cell-template
                       let-rowIndex="rowIndex"
                     >
-                      <p style="color: #ffffff !important">
+                      <p class="style-custom-label">
                         {{ rowIndex + 1 }}
                       </p>
                     </ng-template>
@@ -281,10 +279,10 @@
                     [minWidth]="90"
                   >
                     <ng-template ngx-datatable-header-template>
-                      <span style="color: #ffffff !important">Building</span>
+                      <span class="style-custom-label">Building</span>
                     </ng-template>
                     <ng-template let-value="value" ngx-datatable-cell-template>
-                      <p style="color: #ffffff !important">{{ value }}</p>
+                      <p class="style-custom-label">{{ value }}</p>
                     </ng-template>
                   </ngx-datatable-column>
                   <ngx-datatable-column
@@ -293,10 +291,10 @@
                     [minWidth]="90"
                   >
                     <ng-template ngx-datatable-header-template>
-                      <span style="color: #ffffff !important">Category</span>
+                      <span class="style-custom-label">Category</span>
                     </ng-template>
                     <ng-template let-value="value" ngx-datatable-cell-template>
-                      <p style="color: #ffffff !important">{{ value }}</p>
+                      <p class="style-custom-label">{{ value }}</p>
                     </ng-template>
                   </ngx-datatable-column>
                   <ngx-datatable-column
@@ -305,10 +303,10 @@
                     [minWidth]="90"
                   >
                     <ng-template ngx-datatable-header-template>
-                      <span style="color: #ffffff !important">Room</span>
+                      <span class="style-custom-label">Room</span>
                     </ng-template>
                     <ng-template let-value="value" ngx-datatable-cell-template>
-                      <p style="color: #ffffff !important">{{ value }}</p>
+                      <p class="style-custom-label">{{ value }}</p>
                     </ng-template>
                   </ngx-datatable-column>
                   <ngx-datatable-column
@@ -317,12 +315,12 @@
                     [minWidth]="90"
                   >
                     <ng-template ngx-datatable-header-template>
-                      <span style="color: #ffffff !important"
+                      <span class="style-custom-label"
                         >Estimation Cost</span
                       >
                     </ng-template>
                     <ng-template let-value="value" ngx-datatable-cell-template>
-                      <p style="color: #ffffff !important">
+                      <p class="style-custom-label">
                         {{
                           value.toLocaleString("id-ID", {
                             style: "currency",
@@ -338,10 +336,10 @@
                     [minWidth]="90"
                   >
                     <ng-template ngx-datatable-header-template>
-                      <span style="color: #ffffff !important">Total Kwh</span>
+                      <span class="style-custom-label">Total Kwh</span>
                     </ng-template>
                     <ng-template let-value="value" ngx-datatable-cell-template>
-                      <p style="color: #ffffff !important">{{ value }}</p>
+                      <p class="style-custom-label">{{ value }}</p>
                       kWh
                     </ng-template>
                   </ngx-datatable-column>
@@ -351,10 +349,10 @@
                     [minWidth]="90"
                   >
                     <ng-template ngx-datatable-header-template>
-                      <span style="color: #ffffff !important">Tanggal</span>
+                      <span class="style-custom-label">Tanggal</span>
                     </ng-template>
                     <ng-template let-value="value" ngx-datatable-cell-template>
-                      <p style="color: #ffffff !important">
+                      <p class="style-custom-label">
                         {{ value | date : "MM/yyyy" }}
                       </p>
                     </ng-template>
@@ -365,10 +363,10 @@
                     [minWidth]="90"
                   >
                     <ng-template ngx-datatable-header-template>
-                      <span style="color: #ffffff !important">Status</span>
+                      <span class="style-custom-label">Status</span>
                     </ng-template>
                     <ng-template ngx-datatable-cell-template let-value="value">
-                      <p style="color: #ffffff !important">
+                      <p class="style-custom-label">
                         {{ value === 2 ? "Aktif" : "Tidak Aktif" }}
                       </p>
                     </ng-template>
@@ -379,7 +377,7 @@
                     [minWidth]="150"
                   >
                     <ng-template ngx-datatable-header-template>
-                      <span style="color: #ffffff !important">Actions</span>
+                      <span class="style-custom-label">Actions</span>
                     </ng-template>
                     <ng-template
                       ngx-datatable-cell-template
@@ -389,14 +387,14 @@
                       <button
                         class="btn btn-sm btn-warning mr-1"
                         style="
-                          background-color: #000000 !important;
-                          border-color: #bef264 !important;
+                          background-color: #DDE1E6 !important;
+                          border-color: #37A647 !important;
                         "
                         (click)="viewRow(row)"
                       >
                         <i
                           class="ficon ri-export-line"
-                          style="color: #bef264 !important"
+                          style="color: #37A647 !important"
                         ></i>
                       </button>
                     </ng-template>
diff --git a/src/app/content/hemat-app/cost-management/cost-management.component.ts b/src/app/content/hemat-app/cost-management/cost-management.component.ts
index 86f5264..9c32a27 100644
--- a/src/app/content/hemat-app/cost-management/cost-management.component.ts
+++ b/src/app/content/hemat-app/cost-management/cost-management.component.ts
@@ -164,7 +164,7 @@ export class CostManagementComponent implements OnInit {
         legend: false,
 
         // Add custom colors
-        color: ["#BEF264"],
+        color: ["#37A647"],
 
         // Horizontal axis
         xAxis: [
@@ -174,7 +174,7 @@ export class CostManagementComponent implements OnInit {
             axisLine: {
               show: true,
               lineStyle: {
-                color: "#BEF264",
+                color: "#37A647",
                 width: 4,
               },
             },
@@ -218,7 +218,7 @@ export class CostManagementComponent implements OnInit {
             label: {
               show: true,
               position: "top",
-              color: "#ffffff",
+              color: "#242222",
               formatter: function (params) {
                 return `Rp. ${params.value.toLocaleString()}`;
               },
@@ -256,7 +256,7 @@ export class CostManagementComponent implements OnInit {
         legend: false,
 
         // Add custom colors
-        color: ["#BEF264"],
+        color: ["#37A647"],
 
         // Horizontal axis
         xAxis: [
@@ -266,7 +266,7 @@ export class CostManagementComponent implements OnInit {
             axisLine: {
               show: true,
               lineStyle: {
-                color: "#BEF264",
+                color: "#37A647",
                 width: 4,
               },
             },
@@ -310,7 +310,7 @@ export class CostManagementComponent implements OnInit {
             label: {
               show: true,
               position: "top",
-              color: "#ffffff",
+              color: "#242222",
               formatter: function (params) {
                 return `Rp. ${params.value.toLocaleString()}`;
               },
diff --git a/src/app/content/hemat-app/cost-management/modal-add-actual/modal-add-actual.component.html b/src/app/content/hemat-app/cost-management/modal-add-actual/modal-add-actual.component.html
index f530483..032b3a1 100644
--- a/src/app/content/hemat-app/cost-management/modal-add-actual/modal-add-actual.component.html
+++ b/src/app/content/hemat-app/cost-management/modal-add-actual/modal-add-actual.component.html
@@ -1,20 +1,20 @@
-<div class="modal-body" style="background-color: #252525 !important">
-  <h4 style="color: #ffffff">Input the actual cost of your expenses</h4>
-  <p style="color: #ffffff">Building : {{ buildingName }}</p>
-  <p style="color: #ffffff">Periode : {{ formattedDate }}</p>
+<div class="modal-body" style="background-color: #FBFBFB !important">
+  <h4 style="color: #242222">Input the actual cost of your expenses</h4>
+  <p style="color: #242222">Building : {{ buildingName }}</p>
+  <p style="color: #242222">Periode : {{ formattedDate }}</p>
   <form [formGroup]="myForm">
     <div class="form-group">
       <div class="input-group">
         <div
           class="input-group-prepend"
-          style="background-color: #252525 !important"
+          style="background-color: #FBFBFB !important"
         >
           <span
             class="input-group-text"
             id="basic-addon1"
             style="
-              background-color: #252525 !important;
-              color: #ffffff;
+              background-color: #FBFBFB !important;
+              color: #242222;
               height: calc(1.5em + 0.75rem + 2px) !important;
             "
             >Rp</span
@@ -34,15 +34,15 @@
     </div>
   </form>
 </div>
-<div class="modal-footer justify-content-between" style="background-color: #252525 !important; border-style: none !important;">
+<div class="modal-footer justify-content-between" style="background-color: #FBFBFB !important; border-style: none !important;">
   <button
     type="button"
-    class="btn btn-secondary"
+    class="btn"
     style="
-      color: #c3f164;
+      color: #242222;
       width: 25%;
-      background-color: #252525 !important;
-      border-color: #c3f164 !important;
+      background-color: #FBFBFB !important;
+      border-color: #FBFBFB !important;
       border-radius: 10px;
     "
     (click)="activeModal.dismiss('Cross click')"
@@ -51,12 +51,12 @@
   </button>
   <button
     type="button"
-    class="btn btn-primary"
+    class="btn"
     style="
-      color: #252525 !important;
+      color: #242222 !important;
       width: 25%;
-      background-color: #c3f164 !important;
-      border-color: #c3f164 !important;
+      background-color: #DDE1E6 !important;
+      border-color: #DDE1E6 !important;
       border-radius: 10px;
     "
     (click)="addRow()"
diff --git a/src/app/content/hemat-app/cost-management/modal-export/modal-export.component.css b/src/app/content/hemat-app/cost-management/modal-export/modal-export.component.css
index d4aff3e..ba00b75 100644
--- a/src/app/content/hemat-app/cost-management/modal-export/modal-export.component.css
+++ b/src/app/content/hemat-app/cost-management/modal-export/modal-export.component.css
@@ -367,13 +367,15 @@ input[type="month"]::-webkit-calendar-picker-indicator {
 }
 
 :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;
@@ -401,17 +403,40 @@ input[type="month"]::-webkit-calendar-picker-indicator {
 }
 
 :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;
 }
 
 ::ng-deep .modal-backdrop.show {
diff --git a/src/app/content/hemat-app/cost-management/modal-export/modal-export.component.html b/src/app/content/hemat-app/cost-management/modal-export/modal-export.component.html
index d14ac38..bf30cfe 100644
--- a/src/app/content/hemat-app/cost-management/modal-export/modal-export.component.html
+++ b/src/app/content/hemat-app/cost-management/modal-export/modal-export.component.html
@@ -1,9 +1,9 @@
-<div class="modal-body" style="background-color: #5b5b5b !important">
-  <h4 style="color: #ffffff; margin-bottom: 20px !important">
+<div class="modal-body" style="background-color: #FBFBFB !important">
+  <h4 style="color: #242222; margin-bottom: 20px !important">
     Comparison of Water and Electricity Costs > {{ dataRow.building }}
   </h4>
-  <p style="color: #ffffff">Room : {{ dataRow?.roomName }}</p>
-  <p style="color: #ffffff">Category : {{ dataRow?.categoryName }}</p>
+  <p style="color: #242222">Room : {{ dataRow?.roomName }}</p>
+  <p style="color: #242222">Category : {{ dataRow?.categoryName }}</p>
 
   <div class="card-dashboard">
     <ngx-datatable
@@ -19,43 +19,43 @@
     >
       <ngx-datatable-column name="#" [flexGrow]="0.5" [minWidth]="30">
         <ng-template ngx-datatable-cell-template let-rowIndex="rowIndex">
-          <p style="color: #ffffff !important">
+          <p style="color: #242222 !important">
             {{ rowIndex + 1 }}
           </p>
         </ng-template>
       </ngx-datatable-column>
       <ngx-datatable-column name="periode" [flexGrow]="1" [minWidth]="90">
         <ng-template ngx-datatable-header-template>
-          <span style="color: #ffffff !important">Tanggal</span>
+          <span style="color: #242222 !important">Tanggal</span>
         </ng-template>
         <ng-template let-value="value" ngx-datatable-cell-template>
-          <p style="color: #ffffff !important">
+          <p style="color: #242222 !important">
             {{ value | date : "dd/MM/yyyy" }}
           </p>
         </ng-template>
       </ngx-datatable-column>
       <ngx-datatable-column name="deviceName" [flexGrow]="1" [minWidth]="90">
         <ng-template ngx-datatable-header-template>
-          <span style="color: #ffffff !important">Device</span>
+          <span style="color: #242222 !important">Device</span>
         </ng-template>
         <ng-template let-value="value" ngx-datatable-cell-template>
-          <p style="color: #ffffff !important">{{ value }}</p>
+          <p style="color: #242222 !important">{{ value }}</p>
         </ng-template>
       </ngx-datatable-column>
       <ngx-datatable-column name="roomName" [flexGrow]="1" [minWidth]="90">
         <ng-template ngx-datatable-header-template>
-          <span style="color: #ffffff !important">Room</span>
+          <span style="color: #242222 !important">Room</span>
         </ng-template>
         <ng-template let-value="value" ngx-datatable-cell-template>
-          <p style="color: #ffffff !important">{{ value }}</p>
+          <p style="color: #242222 !important">{{ value }}</p>
         </ng-template>
       </ngx-datatable-column>
       <ngx-datatable-column name="categoryName" [flexGrow]="1" [minWidth]="90">
         <ng-template ngx-datatable-header-template>
-          <span style="color: #ffffff !important">Category</span>
+          <span style="color: #242222 !important">Category</span>
         </ng-template>
         <ng-template let-value="value" ngx-datatable-cell-template>
-          <p style="color: #ffffff !important">{{ value }}</p>
+          <p style="color: #242222 !important">{{ value }}</p>
         </ng-template>
       </ngx-datatable-column>
       <ngx-datatable-column
@@ -64,10 +64,10 @@
         [minWidth]="90"
       >
         <ng-template ngx-datatable-header-template>
-          <span style="color: #ffffff !important">Estimation Cost</span>
+          <span style="color: #242222 !important">Estimation Cost</span>
         </ng-template>
         <ng-template let-value="value" ngx-datatable-cell-template>
-          <p style="color: #ffffff !important">
+          <p style="color: #242222 !important">
             {{
               value.toLocaleString("id-ID", {
                 style: "currency",
@@ -79,34 +79,34 @@
       </ngx-datatable-column>
       <ngx-datatable-column name="totalKwh" [flexGrow]="1" [minWidth]="90">
         <ng-template ngx-datatable-header-template>
-          <span style="color: #ffffff !important">Total Kwh</span>
+          <span style="color: #242222 !important">Total Kwh</span>
         </ng-template>
         <ng-template let-value="value" ngx-datatable-cell-template>
-          <p style="color: #ffffff !important">{{ value }}</p>
+          <p style="color: #242222 !important">{{ value }}</p>
         </ng-template>
       </ngx-datatable-column>
       <ngx-datatable-column name="watt" [flexGrow]="1" [minWidth]="90">
         <ng-template ngx-datatable-header-template>
-          <span style="color: #ffffff !important">Watt</span>
+          <span style="color: #242222 !important">Watt</span>
         </ng-template>
         <ng-template let-value="value" ngx-datatable-cell-template>
-          <p style="color: #ffffff !important">{{ value }}</p>
+          <p style="color: #242222 !important">{{ value }}</p>
         </ng-template>
       </ngx-datatable-column>
       <ngx-datatable-column name="duration" [flexGrow]="1" [minWidth]="90">
         <ng-template ngx-datatable-header-template>
-          <span style="color: #ffffff !important">Duration</span>
+          <span style="color: #242222 !important">Duration</span>
         </ng-template>
         <ng-template let-value="value" ngx-datatable-cell-template>
-          <p style="color: #ffffff !important">{{ value }}</p>
+          <p style="color: #242222 !important">{{ value }}</p>
         </ng-template>
       </ngx-datatable-column>
       <ngx-datatable-column name="priceKwh" [flexGrow]="1" [minWidth]="90">
         <ng-template ngx-datatable-header-template>
-          <span style="color: #ffffff !important">Price Kwh</span>
+          <span style="color: #242222 !important">Price Kwh</span>
         </ng-template>
         <ng-template let-value="value" ngx-datatable-cell-template>
-          <p style="color: #ffffff !important">
+          <p style="color: #242222 !important">
             {{
               value.toLocaleString("id-ID", {
                 style: "currency",
@@ -121,16 +121,16 @@
 </div>
 <div
   class="modal-footer justify-content-between"
-  style="background-color: #252525 !important; border-style: none !important"
+  style="background-color: #FBFBFB !important; border-style: none !important"
 >
   <button
     type="button"
-    class="btn btn-secondary"
+    class="btn"
     style="
-      color: #c3f164;
+      color: #242222;
       width: 25%;
-      background-color: #252525 !important;
-      border-color: #c3f164 !important;
+      background-color: #FBFBFB !important;
+      border-color: #242222 !important;
       border-radius: 10px;
     "
     (click)="activeModal.dismiss('Cross click')"
@@ -139,12 +139,12 @@
   </button>
   <button
     type="button"
-    class="btn btn-primary"
+    class="btn"
     style="
-      color: #252525 !important;
+      color: #242222 !important;
       width: 25%;
-      background-color: #c3f164 !important;
-      border-color: #c3f164 !important;
+      background-color: #DDE1E6 !important;
+      border-color: #DDE1E6 !important;
       border-radius: 10px;
     "
     [disabled]="spinnerExportActive"