diff --git a/src/app/content/hemat-app/device/device-control/device-control.component.css b/src/app/content/hemat-app/device/device-control/device-control.component.css
index c09df0a..9e9ceae 100644
--- a/src/app/content/hemat-app/device/device-control/device-control.component.css
+++ b/src/app/content/hemat-app/device/device-control/device-control.component.css
@@ -1,15 +1,29 @@
-
 :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; /* Menambahkan border-radius */
+  border-radius: 12px !important;
+  box-shadow: 0 2px 4px rgba(36, 34, 34, 0.2) !important; /* Bayangan lebih tipis */
 }
 
+
 .background-round {
 	background-color: #252525 !important;
 	padding: 8px;
 	border-radius: 50%;
   border: 2px solid #BEF264;
   border-color: #BEF264 !important;
+}
+
+.text-custom-name{
+  color: #242222 !important;
+  font-family: "Open Sans", sans-serif !important;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.text-custom-category{
+  color: #242222 !important;
+  font-family: "Open Sans", sans-serif !important;
+  font-size: 12px;
 }
\ No newline at end of file
diff --git a/src/app/content/hemat-app/device/device-control/device-control.component.html b/src/app/content/hemat-app/device/device-control/device-control.component.html
index e554b3a..ae97838 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
@@ -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; box-shadow: none !important;">
               <div class="card-content">
                 <div class="card-body">
                   <div class="row">
@@ -21,7 +21,7 @@
                           bindValue="id"
                           placeholder="Select Building"
                           [(ngModel)]="buildingSelected"
-                          style="width: 100% !important;"
+                          style="width: 100% !important"
                         >
                         </ng-select>
                       </div>
@@ -61,20 +61,20 @@
                           class="btn btn-outline-success ml-2"
                           (click)="doFilter()"
                           style="
-                            background-color: #252525 !important;
-                            border-color: #ffffff !important;
+                            background-color: #DDE1E6 !important;
+                            border-color: #6B6B6B !important;
                             border-radius: 12px;
                           "
                           [disabled]="spinnerFilterActive"
                         >
                           <i
                             class="la la-search"
-                            style="color: #ffffff !important"
+                            style="color: #6B6B6B !important"
                             *ngIf="!spinnerFilterActive"
                           ></i>
                           <i
                             class="la la-spinner spinner"
-                            style="color: #ffffff !important"
+                            style="color: #6B6B6B !important"
                             *ngIf="spinnerFilterActive"
                           ></i>
                         </button>
@@ -83,9 +83,9 @@
                           class="btn btn-outline-success ml-2"
                           (click)="doCancelFilter()"
                           style="
-                            background-color: #252525 !important;
-                            border-color: #ffffff !important;
-                            color: #ffffff;
+                            background-color: #FBFBFB !important;
+                            border-color: #6B6B6B !important;
+                            color: #6B6B6B;
                             border-radius: 12px;
                           "
                         >
@@ -103,10 +103,18 @@
       <section id="configuration">
         <div class="row">
           <div class="col-12" *ngIf="filteredRows?.length === 0">
-            <div class="card" style="background-color: #252525; min-height: 200px;">
+            <div
+              class="card"
+              style="
+                background-color: #fbfbfb !important;
+                box-shadow: none !important;
+              "
+            >
               <div class="card-content">
                 <div class="card-body">
-                  <p class="text-center" style="color: #ffffff;">No data available</p>
+                  <p class="text-center" style="color: #242222">
+                    No data available
+                  </p>
                 </div>
               </div>
             </div>
@@ -114,7 +122,7 @@
           <div class="col-lg-4 col-12" *ngFor="let item of filteredDeviceRows">
             <div
               class="card"
-              style="background-color: #252525; position: relative"
+              style="background-color: #dde1e6; position: relative"
             >
               <div class="card-content">
                 <div class="card-body">
@@ -122,7 +130,7 @@
                     <div class="align-self-center">
                       <div
                         style="
-                          background-color: #414F2B;
+                          background-color: #37a647;
                           border-radius: 50%;
                           width: 50px;
                           height: 50px;
@@ -131,24 +139,25 @@
                           justify-content: center;
                         "
                       >
-                        <i class="{{item.category_icon}} font-large-1 blue-grey d-block"
-                          style="color: #bef264 !important"
+                        <i
+                          class="{{
+                            item.category_icon
+                          }} font-large-1 blue-grey d-block"
+                          style="color: #ffffff !important"
                         ></i>
                       </div>
                       <div style="margin-top: 10px">
-                        <span
-                          class="text-muted"
-                          style="color: #ffffff !important"
-                          >{{ item.name }}</span
-                        >
+                        <span class="text-custom-name">{{ item.name }}</span>
                         <br />
-                        <span
-                          class="text-muted"
-                          >{{item.category_name}}</span
-                        >
+                        <span class="text-custom-category">{{
+                          item.category_name
+                        }}</span>
                       </div>
                     </div>
-                    <div class="ui-switch-container" style="position: absolute; bottom: 10px; right: 10px;">
+                    <div
+                      class="ui-switch-container"
+                      style="position: absolute; bottom: 10px; right: 10px"
+                    >
                       <ui-switch
                         style="border-color: #bef264 !important"
                         class="switchery"
diff --git a/src/app/content/hemat-app/device/device.component.css b/src/app/content/hemat-app/device/device.component.css
index 27419be..ba35d51 100644
--- a/src/app/content/hemat-app/device/device.component.css
+++ b/src/app/content/hemat-app/device/device.component.css
@@ -277,13 +277,15 @@
 }
 
 :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,20 +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;
+  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: #ffffff !important;
+  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/device/device.component.html b/src/app/content/hemat-app/device/device.component.html
index e3908f3..6c57fbf 100644
--- a/src/app/content/hemat-app/device/device.component.html
+++ b/src/app/content/hemat-app/device/device.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,22 +7,22 @@
       <section id="configuration">
         <div class="row">
           <div class="col-lg-4 col-12">
-            <div class="card" style="background-color: #252525 !important">
+            <div class="card" style="background-color: #DDE1E6 !important; box-shadow: none !important;">
               <div class="card-content">
                 <div class="card-body">
                   <div class="media d-flex">
                     <div class="media-body text-left">
-                      <h6 class="text-muted" style="color: #ffffff !important">
+                      <h6 class="text-custom-label">
                         Total Device
                       </h6>
-                      <h3 style="color: #ffffff !important">
+                      <h3 class="text-custom-data">
                         {{ summaryTotal?.length }}
                       </h3>
                     </div>
                     <div class="align-self-center">
                       <div
                         style="
-                          background-color: #414f2b;
+                          background-color: #37A647;
                           border-radius: 50%;
                           width: 50px;
                           height: 50px;
@@ -33,7 +33,7 @@
                       >
                         <i
                           class="ri-device-line primary font-large-1 float-right"
-                          style="color: #bef264 !important"
+                          style="color: #ffffff !important"
                         ></i>
                       </div>
                     </div>
@@ -43,20 +43,20 @@
             </div>
           </div>
           <div class="col-lg-4 col-12">
-            <div class="card" style="background-color: #252525 !important">
+            <div class="card" style="background-color: #DDE1E6 !important; box-shadow: none !important;">
               <div class="card-content">
                 <div class="card-body">
                   <div class="media d-flex">
                     <div class="media-body text-left">
-                      <h6 class="text-light" style="color: #ffffff !important">
+                      <h6 class="text-custom-label">
                         Total Device Active
                       </h6>
-                      <h3 style="color: #ffffff !important">{{ totalOn }}</h3>
+                      <h3 class="text-custom-data">{{ totalOn }}</h3>
                     </div>
                     <div class="align-self-center">
                       <div
                         style="
-                          background-color: #414f2b;
+                          background-color: #37A647;
                           border-radius: 50%;
                           width: 50px;
                           height: 50px;
@@ -67,7 +67,7 @@
                       >
                         <i
                           class="feather ft-wifi primary font-large-1 float-right"
-                          style="color: #bef264 !important"
+                          style="color: #ffffff !important"
                         ></i>
                       </div>
                     </div>
@@ -77,20 +77,20 @@
             </div>
           </div>
           <div class="col-lg-4 col-12">
-            <div class="card" style="background-color: #252525 !important">
+            <div class="card" style="background-color: #DDE1E6 !important; box-shadow: none !important;">
               <div class="card-content">
                 <div class="card-body">
                   <div class="media d-flex">
                     <div class="media-body text-left">
-                      <h6 class="text-muted" style="color: #ffffff !important">
+                      <h6 class="text-custom-label">
                         Total Device Non-Active
                       </h6>
-                      <h3 style="color: #ffffff !important">{{ totalOff }}</h3>
+                      <h3 class="text-custom-data">{{ totalOff }}</h3>
                     </div>
                     <div class="align-self-center">
                       <div
                         style="
-                          background-color: #414f2b;
+                          background-color: #37A647;
                           border-radius: 50%;
                           width: 50px;
                           height: 50px;
@@ -101,7 +101,7 @@
                       >
                         <i
                           class="feather ft-wifi-off primary font-large-1 float-right"
-                          style="color: #bef264 !important"
+                          style="color: #ffffff !important"
                         ></i>
                       </div>
                     </div>
@@ -116,7 +116,7 @@
       <section id="configuration">
         <div class="row">
           <div class="col-12">
-            <div class="card" style="background-color: #252525 !important">
+            <div class="card" style="background-color: #FBFBFB !important; box-shadow: none;">
               <div class="card-content">
                 <div class="card-body">
                   <div class="row mb-2">
@@ -172,31 +172,31 @@
                           class="btn btn-outline-success ml-2"
                           (click)="doFilter()"
                           style="
-                            background-color: #252525 !important;
-                            border-color: #ffffff !important;
+                            background-color: #DDE1E6 !important;
+                            border-color: #242222 !important;
                             border-radius: 12px;
                           "
                           [disabled]="spinnerFilterActive || newDeviceActive"
                         >
                           <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>
                         <button
                           type="button"
-                          class="btn btn-outline-success ml-2"
+                          class="btn ml-2"
                           (click)="doCancelFilter()"
                           style="
-                            background-color: #252525 !important;
-                            border-color: #ffffff !important;
-                            color: #ffffff;
+                            background-color: #FBFBFB !important;
+                            border-color: #242222 !important;
+                            color: #242222;
                             border-radius: 12px;
                           "
                         >
@@ -213,9 +213,9 @@
                         [disabled]="spinnerActive"
                         (click)="addDevice()"
                         style="
-                          background-color: #bef264 !important;
-                          border-color: #bef264 !important;
-                          color: #000000 !important;
+                          background-color: #37A647 !important;
+                          border-color: #37A647 !important;
+                          color: #ffffff !important;
                         "
                       >
                         <i
@@ -233,9 +233,9 @@
                         [disabled]="spinnerExportActive"
                         (click)="exportDevice()"
                         style="
-                          background-color: #bef264 !important;
-                          border-color: #bef264 !important;
-                          color: #000000 !important;
+                          background-color: #37A647 !important;
+                          border-color: #37A647 !important;
+                          color: #ffffff !important;
                         "
                       >
                         <i
@@ -257,9 +257,9 @@
                         [disabled]="spinnerNewDeviceActive"
                         (click)="newDevice()"
                         style="
-                          background-color: #bef264 !important;
-                          border-color: #bef264 !important;
-                          color: #000000 !important;
+                          background-color: #37A647 !important;
+                          border-color: #37A647 !important;
+                          color: #ffffff !important;
                         "
                       >
                         <i
@@ -279,9 +279,9 @@
                         [disabled]="spinnerNewDeviceActive"
                         (click)="allDevice()"
                         style="
-                          background-color: #bef264 !important;
-                          border-color: #bef264 !important;
-                          color: #000000 !important;
+                          background-color: #37A647 !important;
+                          border-color: #37A647 !important;
+                          color: #ffffff !important;
                         "
                       >
                         <i
@@ -328,7 +328,7 @@
                         [minWidth]="20"
                       >
                         <ng-template ngx-datatable-header-template>
-                          <span style="color: #ffffff !important">Image</span>
+                          <span class="style-custom-label">Image</span>
                         </ng-template>
                         <ng-template ngx-datatable-cell-template let-row="row">
                           <span class="avatar avatar-sm rounded-circle">
@@ -342,7 +342,7 @@
                         [minWidth]="150"
                       >
                         <ng-template ngx-datatable-header-template>
-                          <span style="color: #ffffff !important"
+                          <span class="style-custom-label"
                             >Device Name</span
                           >
                         </ng-template>
@@ -350,7 +350,7 @@
                           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
@@ -359,7 +359,7 @@
                         [minWidth]="90"
                       >
                         <ng-template ngx-datatable-header-template>
-                          <span style="color: #ffffff !important"
+                          <span class="style-custom-label"
                             >Building</span
                           >
                         </ng-template>
@@ -367,7 +367,7 @@
                           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
@@ -376,7 +376,7 @@
                         [minWidth]="90"
                       >
                         <ng-template ngx-datatable-header-template>
-                          <span style="color: #ffffff !important"
+                          <span class="style-custom-label"
                             >Category</span
                           >
                         </ng-template>
@@ -384,7 +384,7 @@
                           ngx-datatable-cell-template
                           let-value="value"
                         >
-                          <p style="color: #ffffff !important">
+                          <p class="style-custom-label">
                             {{ value }}
                           </p>
                         </ng-template>
@@ -395,13 +395,13 @@
                         [minWidth]="90"
                       >
                         <ng-template ngx-datatable-header-template>
-                          <span style="color: #ffffff !important">Watt</span>
+                          <span class="style-custom-label">Watt</span>
                         </ng-template>
                         <ng-template
                           ngx-datatable-cell-template
                           let-value="value"
                         >
-                          <p style="color: #ffffff !important">{{ value }}</p>
+                          <p class="style-custom-label">{{ value }}</p>
                         </ng-template>
                       </ngx-datatable-column>
                       <ngx-datatable-column
@@ -410,13 +410,13 @@
                         [minWidth]="90"
                       >
                         <ng-template ngx-datatable-header-template>
-                          <span style="color: #ffffff !important">Type</span>
+                          <span class="style-custom-label">Type</span>
                         </ng-template>
                         <ng-template
                           ngx-datatable-cell-template
                           let-value="value"
                         >
-                          <p style="color: #ffffff !important">
+                          <p class="style-custom-label">
                             {{ value }}
                           </p>
                         </ng-template>
@@ -427,13 +427,13 @@
                         [minWidth]="90"
                       >
                         <ng-template ngx-datatable-header-template>
-                          <span style="color: #ffffff !important">Voltage</span>
+                          <span class="style-custom-label">Voltage</span>
                         </ng-template>
                         <ng-template
                           ngx-datatable-cell-template
                           let-value="value"
                         >
-                          <p style="color: #ffffff !important">
+                          <p class="style-custom-label">
                             {{ value }}
                           </p>
                         </ng-template>
@@ -461,7 +461,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
@@ -471,27 +471,27 @@
                           <button
                             class="btn btn-sm btn-info 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 feather ft-eye"
-                              style="color: #bef264 !important"
+                              style="color: #37A647 !important"
                             ></i>
                           </button>
                           <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)="editRow(row)"
                           >
                             <i
                               class="ficon feather ft-edit"
-                              style="color: #bef264 !important"
+                              style="color: #37A647 !important"
                             ></i>
                           </button>
                           <!-- <button
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 63f6db2..fa67972 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
@@ -103,6 +103,15 @@
         </section>
         <section id="configuration">
           <div class="row">
+            <div class="col-12" *ngIf="filteredRows?.length === 0">
+              <div class="card" style="background-color: #DDE1E6; min-height: 200px;">
+                <div class="card-content">
+                  <div class="card-body">
+                    <p class="text-center" style="color: #242222;">No data available</p>
+                  </div>
+                </div>
+              </div>
+            </div>
             <div class="col-lg-4 col-12" *ngFor="let item of filteredDeviceRows">
               <div
                 class="card"