diff --git a/package-lock.json b/package-lock.json
index ff0df1c..80fc2b9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -57,6 +57,7 @@
         "jspdf": "^2.5.1",
         "jspdf-autotable": "^3.5.28",
         "jwt-decode": "^4.0.0",
+        "lodash": "^4.17.21",
         "lodash-es": "^4.17.21",
         "ng-chartist": "^4.1.0",
         "ng-multiselect-dropdown": "^0.3.9",
diff --git a/package.json b/package.json
index 478ed44..454e35d 100644
--- a/package.json
+++ b/package.json
@@ -63,6 +63,7 @@
     "jspdf": "^2.5.1",
     "jspdf-autotable": "^3.5.28",
     "jwt-decode": "^4.0.0",
+    "lodash": "^4.17.21",
     "lodash-es": "^4.17.21",
     "ng-chartist": "^4.1.0",
     "ng-multiselect-dropdown": "^0.3.9",
diff --git a/src/app/_layout/breadcrumb/breadcrumb.component.html b/src/app/_layout/breadcrumb/breadcrumb.component.html
index f123e5b..19e47fb 100644
--- a/src/app/_layout/breadcrumb/breadcrumb.component.html
+++ b/src/app/_layout/breadcrumb/breadcrumb.component.html
@@ -9,23 +9,23 @@
       class="btn btn-icon btn-pure secondary mr-1"
       routerLink="{{ breadcrumb.linkBack }}"
     >
-      <i class="feather ft-chevron-left" style="color: #ffffff"></i>
+      <i class="feather ft-chevron-left" style="color: #242222"></i>
     </button>
-    <h3 class="content-header-title mb-0 d-inline-block" style="color: #ffffff">
+    <h3 class="content-header-title mb-0 d-inline-block" style="color: #242222">
       {{ breadcrumb.mainlabel }}
     </h3>
     <div class="row breadcrumbs-top d-inline-block">
       <div class="breadcrumb-wrapper col-12">
         <ol class="breadcrumb">
           <ng-container *ngFor="let link of breadcrumb.links; let last = last">
-            <li class="breadcrumb-item" style="color: #ffffff">
+            <li class="breadcrumb-item" style="color: #242222">
               <ng-container *ngIf="link.isLink; else notLink">
-                <a routerLink="{{ link.link }}" style="color: #ffffff">{{ link.name }}</a>
+                <a routerLink="{{ link.link }}" style="color: #242222">{{ link.name }}</a>
               </ng-container>
               <ng-template #notLink>
-                <span style="color: #ffffff">{{ link.name }}</span>
+                <span style="color: #242222">{{ link.name }}</span>
               </ng-template>
-              <span *ngIf="!last" class="breadcrumb-arrow" style="color: #ffffff; margin: 0 5px;">
+              <span *ngIf="!last" class="breadcrumb-arrow" style="color: #242222; margin: 0 5px;">
                 <i class="feather ft-chevron-right"></i>
               </span>
             </li>
diff --git a/src/app/_layout/footer/footer.component.html b/src/app/_layout/footer/footer.component.html
index e23c6c8..ce48b65 100644
--- a/src/app/_layout/footer/footer.component.html
+++ b/src/app/_layout/footer/footer.component.html
@@ -2,17 +2,17 @@
   id="footer"
   class="footer footer-static footer-light navbar-border navbar-shadow"
   *ngIf="showFooter"
-  style="background-color: #000000 !important; border: none !important;"
+  style="border: none !important;"
 >
-  <p class="clearfix blue-grey lighten-2 text-sm-center mb-0 px-2" style="background-color: #000000 !important;">
-    <span class="float-md-ceter d-block d-md-inline-block" style="background-color: #000000 !important;"
+  <p class="clearfix blue-grey lighten-2 text-sm-center mb-0 px-2">
+    <span class="float-md-ceter d-block d-md-inline-block"
       >Copyright &copy; 2024
       <a
         [routerLink]=""
         class="text-bold-800 grey darken-2"
         href="https://allbestsistem.com/"
         target="_blank"
-        style="background-color: #000000 !important;"
+        style="background-color: #ffffff !important;"
         >Smart Building Management Systems (V@2024-07-12.01)
       </a></span
     >
diff --git a/src/app/_layout/header/vertical/vertical.component.html b/src/app/_layout/header/vertical/vertical.component.html
index 79e215a..7898bed 100644
--- a/src/app/_layout/header/vertical/vertical.component.html
+++ b/src/app/_layout/header/vertical/vertical.component.html
@@ -1,7 +1,6 @@
 <nav
   class="header-navbar navbar-expand-md navbar navbar-with-menu navbar-without-dd-arrow fixed-top navbar-shadow"
   [ngClass]="selectedHeaderNavBarClass"
-  style="background-color: #000000 !important"
 >
   <div class="navbar-wrapper">
     <div
@@ -10,7 +9,7 @@
       [ngClass]="selectedNavBarHeaderClass"
       (mouseenter)="mouseEnter($event)"
       (mouseleave)="mouseLeave($event)"
-      style="background-color: #252525 !important"
+      style="background-color: #fbfbfb !important"
     >
       <ul class="nav navbar-nav flex-row">
         <!-- Remove position relative in responsive -->
@@ -43,7 +42,7 @@
                 text-overflow: ellipsis;
               "
             >
-              <h3 class="brand-text" style="color: #ffffff; margin: 0">
+              <h3 class="brand-text" style="color: #242222; margin: 0">
                 Smart Building
               </h3>
             </div>
@@ -119,7 +118,7 @@
               <span class="badge badge-pill badge-danger badge-up badge-glow">5</span>
             </a> -->
             <a class="nav-link nav-link-label">
-              <i class="ficon la la-bell" style="color: #bef264"></i>
+              <i class="ficon la la-bell" style="color: #242424"></i>
               <!-- <span class="badge badge-pill badge-danger badge-up badge-glow">5</span> -->
             </a>
             <ul class="dropdown-menu-media dropdown-menu-right" ngbDropdownMenu>
@@ -321,7 +320,7 @@
               <span
                 *ngIf="currentUser.displayName"
                 class="mr-1 user-name text-bold-700"
-                style="color: #ffffff"
+                style="color: #242222"
                 >{{ currentUser.displayName }}</span
               >
               <span
diff --git a/src/app/_layout/navigation/verticalnav/verticalnav.component.html b/src/app/_layout/navigation/verticalnav/verticalnav.component.html
index 811ddd6..748624f 100644
--- a/src/app/_layout/navigation/verticalnav/verticalnav.component.html
+++ b/src/app/_layout/navigation/verticalnav/verticalnav.component.html
@@ -1,8 +1,8 @@
 <div (mouseenter)="mouseEnter($event)" (mouseleave)="mouseLeave($event)" id="main-menu"
-	class="main-menu menu-fixed menu-dark menu-accordion menu-shadow" data-scroll-to-active="true" style="background-color: #252525 !important;">
+	class="main-menu menu-fixed menu-dark menu-accordion menu-shadow" data-scroll-to-active="true" style="background-color: #fbfbfb !important; box-shadow: none !important; border-right: 3px solid #f4f4f4;">
 	<div id="main-menu-content" class="main-menu-content ps-container ps-theme-light" fxFlex="auto"
 		[perfectScrollbar]="config" >
-		<ul class="navigation navigation-main" id="main-menu-navigation" data-menu="menu-navigation" style="background-color: #252525 !important;">
+		<ul class="navigation navigation-main" id="main-menu-navigation" data-menu="menu-navigation" style="background-color: #fbfbfb !important;">
 			<!-- Menu -->
 			{{child?child.title:''}}
 			<li *ngFor="let child of _menuSettingsConfig.vertical_menu.items" class="" [ngClass]="{
@@ -17,16 +17,16 @@
 				<!-- Section -->
 				<span class="menu-title" *ngIf="child.section">{{child.section}}</span>
 				<i class="la" *ngIf="child.section" [ngClass]="child.icon" data-toggle="tooltip" data-placement="right"
-					data-original-title="Support"></i>
+					data-original-title="Support" style="color: #242222;"></i>
 
 				<!-- Root Menu -->
 				<a *ngIf="child.title && !child.submenu && !child.excludeInVertical && !child.isExternalLink && !child.issupportExternalLink && !child.isStarterkitExternalLink"
 					routerLink="{{child.page !== 'null'?child.page:router.url}}" (click)="toggleMenu($event, child)"
-					style="background-color: #252525 !important;">
-					<i class="la" [ngClass]="child.icon"></i>
-					<span class="menu-title" data-i18n="">{{child.title}}</span>
+					style="background-color: #fbfbfb !important;">
+					<i class="la" [ngClass]="child.icon" style="color: #242222;"></i>
+					<span class="menu-title" data-i18n="" style="color: #242222;">{{child.title}}</span>
 					<span *ngIf="child.badge" class="badge badge-pill float-right"
-						[ngClass]="{'badge-info mr-2': child.badge.type==='badge-info' , 'badge-danger':child.badge.type==='badge-danger'}">
+						[ngClass]="{'badge-info mr-2': child.badge.type==='badge-info' , 'badge-danger':child.badge.type==='badge-danger'}" style="color: #242222;">
 						{{child.badge.value}}
 					</span>
 				</a>
@@ -53,15 +53,15 @@
 
 				<!-- Submenu -->
 				<a *ngIf="child.title && child.submenu && !child.excludeInVertical"
-					routerLink="{{child.page !== 'null'?child.page:router.url}}" (click)="toggleMenu($event, child)" style="background-color: #252525 !important;">
-					<i class="la" [ngClass]="child.icon"></i>
-					<span class="menu-title" data-i18n="">{{child.title}}</span>
+					routerLink="{{child.page !== 'null'?child.page:router.url}}" (click)="toggleMenu($event, child)" style="background-color: #fbfbfb !important;">
+					<i class="la" [ngClass]="child.icon" style="color: #242222;"></i>
+					<span class="menu-title" data-i18n="" style="color: #242222;">{{child.title}}</span>
 					<span *ngIf="child.badge" class="badge badge-pill float-right"
-						[ngClass]="{'badge-info mr-2': child.badge.type==='badge-info' , 'badge-danger':child.badge.type==='badge-danger'}">
+						[ngClass]="{'badge-info mr-2': child.badge.type==='badge-info' , 'badge-danger':child.badge.type==='badge-danger'}" style="color: #242222;">
 						{{child.badge.value}}
 					</span>
 				</a>
-				<ul *ngIf="child.submenu" class="menu-content" [@popOverState]="child.isOpen" style="background-color: #252525 !important;">
+				<ul *ngIf="child.submenu" class="menu-content" [@popOverState]="child.isOpen" style="background-color: #fbfbfb !important;">
           <!-- Submenu of Submenu -->
 					<li *ngFor="let subchild of child.submenu.items" class="isShown"
 						[ngClass]="{'has-sub':(subchild.submenu),'active': subchild.isSelected && !subchild.submenu, 'open': subchild.isOpen && subchild.submenu}">
@@ -69,7 +69,7 @@
                 (click)="toggleMenu($event, subchild, true)" 
                 routerLink="{{subchild.page !== 'null'?subchild.page:router.url}}" 
                 [ngClass]="{'active': subchild.isSelected}" 
-                style="background-color: #252525 !important;">{{subchild.title}}</a>
+                style="background-color: #fbfbfb !important; color: #242222;">{{subchild.title}}</a>
 						<a class="menu-item" *ngIf="subchild.submenu && !subchild.excludeInVertical" (click)="toggleMenu($event, subchild, true)"
 							routerLink="{{subchild.page !== 'null'?subchild.page:router.url}}">{{subchild.title}}</a>
 						<ul *ngIf="subchild.submenu && !subchild.excludeInVertical" class="menu-content">
diff --git a/src/app/content/hemat-app/device/device-control/device-control.component.ts b/src/app/content/hemat-app/device/device-control/device-control.component.ts
index feed52a..a32bca8 100644
--- a/src/app/content/hemat-app/device/device-control/device-control.component.ts
+++ b/src/app/content/hemat-app/device/device-control/device-control.component.ts
@@ -77,7 +77,7 @@ export class DeviceControlComponent {
   filterDevices(devices: any[]): any[] {
     return devices.filter((device) =>
       device.mapping.some(
-        (map) => map.name.startsWith("switch") && map.type === "Boolean"
+        (map) => map.code.startsWith("switch") && map.type === "Boolean"
       )
     );
   }
@@ -150,8 +150,8 @@ export class DeviceControlComponent {
 
   switchChanged(ev, data) {
     const requestData = {
-      device_id: data.device_id,
-      switch: data.mapping[0].switch,
+      id: data.id,
+      code: data.mapping[0].code,
       value: ev,
       command_type: "on_off",
     };
diff --git a/src/app/content/hemat-app/monitoring/building/building.component.css b/src/app/content/hemat-app/monitoring/building/building.component.css
index eb15edf..3d813bf 100644
--- a/src/app/content/hemat-app/monitoring/building/building.component.css
+++ b/src/app/content/hemat-app/monitoring/building/building.component.css
@@ -1,5 +1,5 @@
 :host ::ng-deep .gap_fl_btn {
-    margin: 0 0.3rem;
+  margin: 0 0.3rem;
 }
 
 :host ::ng-deep .block-ui-wrapper {
@@ -7,20 +7,70 @@
 }
 
 :host ::ng-deep .donut-chart1 .ct-series-a .ct-slice-donut {
-  stroke: #BEF264;
-  stroke-width: 35px !important;
+  stroke: #37A647;
+  stroke-width: 50px !important;
 }
 
 :host ::ng-deep .donut-chart1 .ct-series-b .ct-slice-donut {
   stroke: #ffffff;
-  stroke-width: 35px !important;
+  stroke-width: 50px !important;
 }
 
 .btn-no-hover {
   border: none !important;
 }
 
-.btn-no-hover:hover {
+.custom-card-header {
+  background-color: #dde1e6 !important;
+}
+
+.header-title {
+  font-family: "Open Sans", sans-serif !important;
+  color: #242222 !important;
+  font-weight: 600 !important;
+  font-size: 20px !important;
+}
+
+.header-subtitle {
+  font-family: "Open Sans", sans-serif !important;
+  color: #242222 !important;
+  font-weight: 600 !important;
+  font-size: 24px !important;
+}
+
+.custom-divider {
+  border-top: 6px solid rgb(0, 0, 0);
+}
+
+.custom-total {
+  font-family: "Open Sans", sans-serif !important;
+  font-size: 40px !important;
+  color: #242222 !important;
+  font-weight: 800 !important;
+}
+
+.custom-label-chart {
+  font-family: "Open Sans", sans-serif !important;
+  font-size: 20px !important;
+  color: #242222 !important;
+}
+
+.btn-room {
+  background-color: #2f5137 !important;
+  color: #ffffff;
+  width: 163px;
+  border-radius: 16px;
+}
+
+.btn-detail {
+  background-color: transparent !important;
+  border-color: #242222 !important;
+  color: #242222;
+  width: 163px;
+  border-radius: 16px;
+}
+
+/* .btn-no-hover:hover {
   background-color: transparent !important;
   color: inherit !important;
 }
@@ -28,4 +78,4 @@
 .btn-primary.round:hover {
   color: #BEF264 !important;
   border-color: #BEF264 !important;
-}
+} */
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 405ac29..e5b901f 100644
--- a/src/app/content/hemat-app/monitoring/building/building.component.html
+++ b/src/app/content/hemat-app/monitoring/building/building.component.html
@@ -1,4 +1,4 @@
-<div class="app-content content" style="background-color: #000000 !important;">
+<div class="app-content content">
   <div class="content-wrapper">
     <div class="content-header row mb-1">
       <app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
@@ -18,29 +18,25 @@
         </div>
         <div class="row mt-2">
           <div
-            class="col-xl-4 col-md-6 col-12"
+            class="col-xl-4 col-lg-6 col-md-12 col-sm-12 col-12"
             *ngFor="let data of filteredRows"
           >
-            <div class="card" style="background-color: #252525 !important; border-radius: 10px;">
-              <div class="card-header mb-2" style="background-color: #252525 !important;">
+            <div
+              class="card"
+              style="background-color: #dde1e6 !important; border-radius: 10px"
+            >
+              <div class="card-header mb-2 custom-card-header">
                 <div class="row">
                   <div class="col-12 text-center">
-                    <h4
-                      class="text-muted mb-1 font-weight-bold"
-                      style="font-family: Montserrat, sans-serif; color: #ffffff !important;"
-                    >
-                      Building
-                    </h4>
-                    <h3
-                      class="text-muted mb-0 open-sans"
-                      style="font-family: Open Sans, sans-serif; color: #ffffff !important; font-weight: 600;"
-                    >
+                    <h4 class="header-title">Building</h4>
+                    <h3 class="header-subtitle">
                       {{ data.build_name ? data.build_name : data.name }}
                     </h3>
                   </div>
                 </div>
-                <hr style="border-top: 4px solid #ffffff; border-color: #ffffff !important;" />
+                <hr class="custom-divider" />
               </div>
+
               <div class="card-content">
                 <div class="donut-chart1">
                   <x-chartist
@@ -57,36 +53,31 @@
                   class="text-center"
                   style="
                     position: absolute;
-                    top: 65%;
+                    top: 70%;
                     left: 50%;
                     transform: translate(-50%, -50%);
                   "
                 >
                   <h3
-                    class="display-4 blue-grey darken-1"
-                    style="font-size: 2em; color: #ffffff !important;"
+                    class="display-4 blue-grey darken-1 custom-total"
                   >
-                    {{ data.total }} kWh
+                    {{ data.total }} KWH
                   </h3>
-                  <h6 style="color: #ffffff !important;">Consumption</h6>
+                  <h6 class="custom-label-chart">Consumption</h6>
                 </div>
 
                 <div class="form-group text-center">
                   <button
                     type="button"
-                    class="btn btn-primary round btn-min-width mr-1 mb-1"
+                    class="btn btn-min-width mr-1 mb-1 btn-room"
                     (click)="viewRoom(data)"
-                    ngbTooltip="Room"
-                    style="background-color: #ffffff !important; color: #000000;"
                   >
                     Room
                   </button>
                   <button
                     type="button"
-                    class="btn btn-success round btn-min-width mr-1 mb-1"
+                    class="btn btn-min-width mr-1 mb-1 btn-detail"
                     (click)="viewRow(data)"
-                    ngbTooltip="Detail"
-                    style="background-color: #BEF264 !important; color: #000000;"
                   >
                     Detail
                   </button>
diff --git a/src/app/content/hemat-app/monitoring/detail/detail.component.css b/src/app/content/hemat-app/monitoring/detail/detail.component.css
index 15b3bef..d511aa8 100644
--- a/src/app/content/hemat-app/monitoring/detail/detail.component.css
+++ b/src/app/content/hemat-app/monitoring/detail/detail.component.css
@@ -51,7 +51,7 @@ canvas {
 }
 
 :host ::ng-deep .donut-chart2 .ct-series-b .ct-slice-donut {
-  stroke: #BEF264;
+  stroke: #37A647;
   stroke-width: 20px !important;
 }
 
@@ -67,28 +67,41 @@ canvas {
   line-height: 1;
 }
 
-:host ::ng-deep .sp-line-total-cost .ct-series-a .ct-point{
-  stroke: #BEF264;
+:host ::ng-deep .sp-line-total-cost .ct-series-a .ct-point {
+  stroke: #37A647;
 }
-:host ::ng-deep .sp-line-total-cost .ct-series-a .ct-line{
-  stroke: #BEF264;
+:host ::ng-deep .sp-line-total-cost .ct-series-a .ct-line {
+  stroke: #37A647;
 }
-:host ::ng-deep .sp-line-total-cost .ct-series-a .ct-area{
-  fill: #BEF264;
+:host ::ng-deep .sp-line-total-cost .ct-series-a .ct-area {
+  fill: #37A647;
   fill-opacity: 1;
 }
-:host ::ng-deep .sp-line-total-cost .ct-point{
+:host ::ng-deep .sp-line-total-cost .ct-point {
   stroke-width: 0px;
 }
 
 :host ::ng-deep .progress-bar {
-  background-color: #BEF264 !important;
+  background-color: #37A647 !important;
 }
 
 .background-round {
-	background-color: #252525 !important;
-	padding: 8px;
-	border-radius: 50%;
-  border: 2px solid #BEF264;
-  border-color: #BEF264 !important;
-}
\ No newline at end of file
+  background-color: #2F5137 !important;
+  padding: 8px;
+  border-radius: 50%;
+  border: 2px solid #2F5137;
+  border-color: #2F5137 !important;
+}
+
+.custom-label {
+  font-family: "Open Sans", sans-serif !important;
+  color: #242222;
+  font-size: 16px;
+}
+
+.custom-value {
+  font-family: "Open Sans", sans-serif !important;
+  color: #242222;
+  font-weight: 800;
+  font-size: 24px;
+}
diff --git a/src/app/content/hemat-app/monitoring/detail/detail.component.html b/src/app/content/hemat-app/monitoring/detail/detail.component.html
index a948277..dc17fb2 100644
--- a/src/app/content/hemat-app/monitoring/detail/detail.component.html
+++ b/src/app/content/hemat-app/monitoring/detail/detail.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;">
   <div class="content-wrapper">
     <div class="content-header row mb-1">
       <app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
@@ -6,20 +6,20 @@
     <div class="content-body">
       <div class="row">
         <div class="col-xl-3 col-md-6 col-12">
-          <div class="card" style="background-color: #252525 !important">
+          <div class="card" style="background-color: #DDE1E6 !important">
             <div class="card-content">
               <div class="card-body">
                 <div class="media d-flex">
                   <div class="media-body text-left">
-                    <h5 style="color: #ffffff">Kwh Consumption</h5>
-                    <h3 style="color: #ffffff">
+                    <h5 class="custom-label">Kwh Consumption</h5>
+                    <h3 class="custom-value">
                       {{ topCard?.kwh_consumption ? topCard?.kwh_consumption.toFixed(3) : 0 }} Kwh
                     </h3>
                   </div>
                   <div class="align-self-center">
                     <div
                       style="
-                        background-color: #414f2b;
+                        background-color: #2F5137;
                         border-radius: 50%;
                         width: 50px;
                         height: 50px;
@@ -30,7 +30,7 @@
                     >
                       <i
                         class="icon-energy primary font-large-1 float-right"
-                        style="color: #bef264 !important"
+                        style="color: #ffffff !important"
                       ></i>
                     </div>
                   </div>
@@ -40,18 +40,18 @@
           </div>
         </div>
         <div class="col-xl-3 col-md-6 col-12">
-          <div class="card" style="background-color: #252525 !important">
+          <div class="card" style="background-color: #DDE1E6 !important">
             <div class="card-content">
               <div class="card-body">
                 <div class="media d-flex">
                   <div class="media-body text-left">
-                    <h5 style="color: #ffffff">Device</h5>
-                    <h3 style="color: #ffffff">{{ topCard?.total_device }}</h3>
+                    <h5 class="custom-label">Device</h5>
+                    <h3 class="custom-value">{{ topCard?.total_device }}</h3>
                   </div>
                   <div class="align-self-center">
                     <div
                       style="
-                        background-color: #414f2b;
+                        background-color: #2F5137;
                         border-radius: 50%;
                         width: 50px;
                         height: 50px;
@@ -62,7 +62,7 @@
                     >
                       <i
                         class="ri-device-line primary font-large-1 float-right"
-                        style="color: #bef264 !important"
+                        style="color: #ffffff !important"
                       ></i>
                     </div>
                   </div>
@@ -72,18 +72,18 @@
           </div>
         </div>
         <div class="col-xl-3 col-md-6 col-12">
-          <div class="card" style="background-color: #252525 !important">
+          <div class="card" style="background-color: #DDE1E6 !important">
             <div class="card-content">
               <div class="card-body">
                 <div class="media d-flex">
                   <div class="media-body text-left">
-                    <h5 style="color: #ffffff">Room</h5>
-                    <h3 style="color: #ffffff">{{ topCard?.total_room }}</h3>
+                    <h5 class="custom-label">Room</h5>
+                    <h3 class="custom-value">{{ topCard?.total_room }}</h3>
                   </div>
                   <div class="align-self-center">
                     <div
                       style="
-                        background-color: #414f2b;
+                        background-color: #2F5137;
                         border-radius: 50%;
                         width: 50px;
                         height: 50px;
@@ -94,7 +94,7 @@
                     >
                       <i
                         class="ri-building-2-line font-large-1 float-right"
-                        style="color: #bef264 !important"
+                        style="color: #ffffff !important"
                       ></i>
                     </div>
                   </div>
@@ -104,13 +104,13 @@
           </div>
         </div>
         <div class="col-xl-3 col-md-6 col-12">
-          <div class="card" style="background-color: #252525 !important">
+          <div class="card" style="background-color: #DDE1E6 !important">
             <div class="card-content">
               <div class="card-body">
                 <div class="media d-flex">
                   <div class="media-body text-left">
-                    <h5 style="color: #ffffff">Summary Cost</h5>
-                    <h3 style="color: #ffffff">
+                    <h5 class="custom-label">Summary Cost</h5>
+                    <h3 class="custom-value">
                       {{
                         summaryCost?.summary_cost
                           | currency : "Rp " : "symbol" : "1.0-0"
@@ -131,7 +131,7 @@
                     >
                       <i
                         class="ri-money-dollar-box-line font-large-1 float-right"
-                        style="color: #bef264 !important"
+                        style="color: #ffffff !important"
                       ></i>
                     </div>
                   </div>
@@ -143,14 +143,14 @@
       </div>
       <div class="row">
         <div class="col-12">
-          <div class="card" style="background-color: #252525 !important">
+          <div class="card" style="background-color: #DDE1E6 !important">
             <div class="card-content">
               <div class="card-body">
                 <canvas
                   style="
-                    background-color: #252525 !important;
-                    border-color: #252525;
-                    color: #ffffff;
+                    background-color: #DDE1E6 !important;
+                    border-color: #DDE1E6;
+                    color: #242222;
                   "
                   class="barchart"
                   height="400"
@@ -171,8 +171,8 @@
       <div class="row">
         <div class="col-6" *ngFor="let item of deviceCategory?.usesd">
           <div
-            class="card overflow-hidden"
-            style="background-color: #000000 !important"
+            class="card"
+            style="background-color: transparent !important; border: none; box-shadow: none;"
           >
             <div class="card-content">
               <div class="card-body clearfix">
@@ -180,15 +180,15 @@
                   <div class="align-self-center">
                     <i
                       class="{{item.icon}} background-round info font-large-1 mr-2"
-                      style="color: #bff264 !important"
+                      style="color: #ffffff !important"
                     ></i>
                   </div>
                   <div class="media-body">
-                    <p style="color: #ffffff !important">
+                    <p style="color: #242222 !important">
                       {{ item.category_device }}
                       <span
                         class="float-right text-bold-600"
-                        style="color: #ffffff"
+                        style="color: #242222"
                         >{{ item.value.toFixed(1) }}%</span
                       >
                     </p>
@@ -214,8 +214,8 @@
           <button
             class="btn btn-primary"
             style="
-              background-color: #c3f164 !important;
-              color: #000000 !important;
+              background-color: #37A647 !important;
+              color: #ffffff !important;
               border-radius: 10px;
               font-family: 'Open Sans', sans-serif;
               font-weight: 700;
diff --git a/src/app/content/hemat-app/monitoring/detail/detail.component.ts b/src/app/content/hemat-app/monitoring/detail/detail.component.ts
index e99288d..860ebbc 100644
--- a/src/app/content/hemat-app/monitoring/detail/detail.component.ts
+++ b/src/app/content/hemat-app/monitoring/detail/detail.component.ts
@@ -54,12 +54,12 @@ export class DetailComponent {
     {
       data: [],
       label: "KWH Consumption",
-      backgroundColor: "#C3F164",
-      borderColor: "#C3F164",
-      pointBackgroundColor: "#C3F164",
-      pointBorderColor: "#C3F164",
+      backgroundColor: "#37A647",
+      borderColor: "#37A647",
+      pointBackgroundColor: "#37A647",
+      pointBorderColor: "#37A647",
       pointHoverBackgroundColor: "#ffffff",
-      pointHoverBorderColor: "#C3F164",
+      pointHoverBorderColor: "#37A647",
       barPercentage: 0.5,
       categoryPercentage: 0.5,
     },
diff --git a/src/app/content/hemat-app/monitoring/room/room.component.css b/src/app/content/hemat-app/monitoring/room/room.component.css
index 0c92969..8831f67 100644
--- a/src/app/content/hemat-app/monitoring/room/room.component.css
+++ b/src/app/content/hemat-app/monitoring/room/room.component.css
@@ -6,5 +6,10 @@
   background: rgba(255, 249, 249, 0.5) !important;
 }
 :host ::ng-deep .progress-bar {
-  background-color: #bef264 !important;
+  background-color: #2f5137 !important;
 }
+
+.room-custom{
+  font-family: Montserrat, sans-serif; 
+  color: #ffffff !important;
+}
\ No newline at end of file
diff --git a/src/app/content/hemat-app/monitoring/room/room.component.html b/src/app/content/hemat-app/monitoring/room/room.component.html
index 1b81f95..df82a4e 100644
--- a/src/app/content/hemat-app/monitoring/room/room.component.html
+++ b/src/app/content/hemat-app/monitoring/room/room.component.html
@@ -1,4 +1,4 @@
-<div class="app-content content" style="background-color: #000000 !important">
+<div class="app-content content">
   <div class="content-wrapper">
     <div class="content-header row mb-1">
       <app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
@@ -24,20 +24,20 @@
             class="col-xl-3 col-lg-6 col-12"
             *ngFor="let data of filteredRows"
           >
-            <div class="card pull-up" style="background-color: #252525 !important">
+            <div class="card pull-up" style="background-color: #DDE1E6 !important">
               <div class="card-content">
-                <div class="card-header mb-2" style="background-color: #252525 !important">
+                <div class="card-header mb-2" style="background-color: #DDE1E6 !important">
                   <div class="row">
                     <div class="col-12 text-center">
                       <h5
-                        class="text-muted mb-1"
-                        style="font-family: Montserrat, sans-serif; color: #ffffff !important;"
+                        class="text-muted mb-1 room-custom"
+                        style="color: #242222 !important;"
                       >
                         Room
                       </h5>
                       <h4
                         class="text-muted mb-0"
-                        style="font-family: Montserrat, sans-serif; color: #ffffff !important;"
+                        style="font-family: Montserrat, sans-serif; color: #242222 !important;"
                       >
                         {{ data.name }}
                       </h4>
@@ -49,13 +49,13 @@
                   <div class="media d-flex">
                     <div class="media-body text-left">
                       <!-- <h3 class="info">{{ data.value }} kWh</h3> -->
-                      <h3 style="color: #ffffff;">{{data.totalKwh}} kWh</h3>
-                      <h6 style="color: #ffffff;">Consumption</h6>
+                      <h3 style="color: #242222;">{{data.totalKwh}} kWh</h3>
+                      <h6 style="color: #242222;">Consumption</h6>
                     </div>
                     <div>
                       <i
                         class="feather ft-server info font-large-2 float-right"
-                        style="color: #bef264 !important;"
+                        style="color: #2f5137 !important;"
                       ></i>
                     </div>
                   </div>
diff --git a/src/app/content/hemat-app/service/device.service.ts b/src/app/content/hemat-app/service/device.service.ts
index c963a4b..5a3fb07 100644
--- a/src/app/content/hemat-app/service/device.service.ts
+++ b/src/app/content/hemat-app/service/device.service.ts
@@ -71,7 +71,7 @@ export class DeviceService {
 
   deviceSwitch(data): Observable<any> {
     const endpoint = `/devices`;
-    const url = `${BASE_URL}${endpoint}/device-switch`;
+    const url = `${BASE_URL}${endpoint}/device-command`;
     const headers = new HttpHeaders({
       "Content-Type": "application/json",
       "x-api-key": "j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT",
diff --git a/src/app/content/hemat-app/service/login.service.ts b/src/app/content/hemat-app/service/login.service.ts
index a34d019..d4ca243 100644
--- a/src/app/content/hemat-app/service/login.service.ts
+++ b/src/app/content/hemat-app/service/login.service.ts
@@ -1,6 +1,6 @@
 import { Injectable } from "@angular/core";
 import { HttpClient, HttpHeaders } from "@angular/common/http";
-import { Observable } from "rxjs";
+import { BehaviorSubject, Observable } from "rxjs";
 import { jwtDecode } from "jwt-decode";
 import { Router } from "@angular/router";
 import { AuthService } from "src/app/_services/auth.service";
@@ -23,12 +23,17 @@ interface CustomJwtPayload {
 })
 export class LoginService {
   private readonly tokenKey = "currentUser";
+  private tabSelected = new BehaviorSubject(null);
+  public _tabSelected = this.tabSelected.asObservable();
   constructor(
     private http: HttpClient,
     private router: Router,
     public logoutService: AuthService
   ) {}
 
+  setTabsSelected(e: string){
+    this.tabSelected.next(e);
+  }
   updatePassword(data: any): Observable<any> {
     const endpoint = `/users`;
     const url = `${BASE_URL}${endpoint}/reset-password`;
diff --git a/src/app/content/hemat-app/user-profile/profil-information/profil-information.component.ts b/src/app/content/hemat-app/user-profile/profil-information/profil-information.component.ts
index b640673..fa13165 100644
--- a/src/app/content/hemat-app/user-profile/profil-information/profil-information.component.ts
+++ b/src/app/content/hemat-app/user-profile/profil-information/profil-information.component.ts
@@ -5,6 +5,7 @@ import { ToastrService } from "ngx-toastr";
 import { jwtDecode } from "jwt-decode";
 import { AuthService } from "src/app/_services/auth.service";
 import { Router } from "@angular/router";
+import * as _ from "lodash"
 interface CustomJwtPayload {
   exp: number;
   scope: string;
@@ -30,7 +31,7 @@ export class ProfilInformationComponent {
   storedData: any;
   currentUser: any;
   disableButton: boolean = false;
-
+  oldData: any;
   url: any = "https://www.w3schools.com/howto/img_avatar.png";
   fileSelected: any = null;
 
@@ -40,7 +41,22 @@ export class ProfilInformationComponent {
     private toastr: ToastrService,
     public logoutService: AuthService,
     private router: Router
-  ) {}
+  ) {
+    this.authService._tabSelected.subscribe(res => {
+      console.log(res);
+      console.log(this.oldData);
+      console.log(this.profilInfo.value);
+      if (res === "update-password") {
+        if (this.oldData !== this.profilInfo.value) {
+          console.log('ada perubahan');
+          return false
+        } else {
+          console.log('tidak ada perubahan');
+          
+        }
+      }
+    })
+  }
 
   ngOnInit(): void {
     this.storedData = JSON.parse(localStorage.getItem("account_info"));
@@ -69,6 +85,10 @@ export class ProfilInformationComponent {
         phone: data.data.phone,
         image: [null],
       });
+      // this.oldData._.cloneDeep(this.profilInfo.value);
+      this.oldData = _.cloneDeep(this.profilInfo.value)
+      console.log(this.oldData);
+      
       if (
         data.data.image_path !== "https://kapi.absys.ninja/hemat/image/null"
       ) {
diff --git a/src/app/content/hemat-app/user-profile/user-profile.component.ts b/src/app/content/hemat-app/user-profile/user-profile.component.ts
index a7b0c06..7305e45 100644
--- a/src/app/content/hemat-app/user-profile/user-profile.component.ts
+++ b/src/app/content/hemat-app/user-profile/user-profile.component.ts
@@ -1,4 +1,5 @@
 import { Component } from "@angular/core";
+import { LoginService } from "../service/login.service";
 
 @Component({
   selector: "app-user-profile",
@@ -10,11 +11,12 @@ export class UserProfileComponent {
 
   activeTab: string = "profile-info2";
 
-  constructor() {}
+  constructor(private loginService: LoginService) {}
 
   ngOnInit(): void {}
 
   selectTab(tabName: string) {
     this.activeTab = tabName;
+    this.loginService.setTabsSelected(tabName)
   }
 }
diff --git a/src/app/login/login.component.css b/src/app/login/login.component.css
index 50a2d0c..9901f97 100644
--- a/src/app/login/login.component.css
+++ b/src/app/login/login.component.css
@@ -45,6 +45,7 @@
 }
 .input-custom {
   background-color: rgba(1, 1, 1, 0.526) !important;
+  color: #ffffff !important;
 }
 .line-on-side span {
   background-color: rgba(255, 255, 255, 0);
diff --git a/src/assets/sass/scss/bootstrap/_forms.scss b/src/assets/sass/scss/bootstrap/_forms.scss
index d53d61e..13c5a1a 100644
--- a/src/assets/sass/scss/bootstrap/_forms.scss
+++ b/src/assets/sass/scss/bootstrap/_forms.scss
@@ -13,10 +13,10 @@
   @include font-size($input-font-size);
   font-weight: $input-font-weight;
   line-height: $input-line-height;
-  // color: $input-color;
-  // background-color: $input-bg;
-  color: #FFFFFF !important;
-  background-color: #252525 !important;
+  color: $input-color;
+  background-color: $input-bg;
+  // color: #FFFFFF !important;
+  // background-color: #252525 !important;
   background-clip: padding-box;
   border: $input-border-width solid $input-border-color;