diff --git a/src/app/_layout/footer/footer.component.html b/src/app/_layout/footer/footer.component.html
index 19f0ad1..4414779 100644
--- a/src/app/_layout/footer/footer.component.html
+++ b/src/app/_layout/footer/footer.component.html
@@ -13,7 +13,7 @@
         href="https://allbestsistem.com/"
         target="_blank"
         style="background-color: #000000 !important;"
-        >Allbest Solusi Sistem (V@2024-06-11.01)
+        >Smart Building Management Systems (V@2024-06-12.01)
       </a></span
     >
   </p>
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 e167e44..c33919d 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
@@ -1,4 +1,7 @@
 
+:host ::ng-deep .progress-bar {
+  background-color: #BEF264 !important;
+}
 
 :host ::ng-deep .donut-chart2 .ct-series-a .ct-slice-donut {
   stroke: #8a8a8a;
@@ -10,14 +13,14 @@
   stroke-width: 20px !important;
 }
 
-:host ::ng-deep .donut-chart2 {
+/* :host ::ng-deep .donut-chart2 {
   -webkit-filter: drop-shadow(0px 10px 11px rgba(187, 187, 187)) !important;
   filter: drop-shadow(0px 10px 11px rgba(187, 187, 187));
-}
+} */
 
 :host ::ng-deep .donut-chart2 .ct-label {
-  fill: #111010;
-  color: rgba(0, 0, 0, 0.4);
+  fill: #ffffff;
+  color: rgb(255, 255, 255);
   font-size: 1.75rem;
   line-height: 1;
 }
@@ -49,13 +52,13 @@
 }
 
 :host ::ng-deep .donut-chart3 .ct-series-a .ct-bar {
-  stroke: #cd560c;
+  stroke: #BEF264;
   fill: none;
   stroke-width: 30px;
 }
 
 :host ::ng-deep .donut-chart3 .ct-series-b .ct-bar {
-  stroke: #49cd0c;
+  stroke: #BEF264;
   fill: none;
   stroke-width: 30px;
 }
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 51a28cb..8db5232 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,11 +7,17 @@
       <section>
         <div class="row">
           <div class="col-lg-4 col-12">
-            <div class="card">
-              <div class="card-header">
-                <h4 class="card-title text-center">
+            <div class="card" style="background-color: #252525 !important">
+              <div class="card-header" style="background-color: #252525 !important">
+                <h4 class="card-title text-center" style="color: #ffffff !important;">
                   Comparison of Water and Electricity Costs
                 </h4>
+                <hr
+                style="
+                  border-top: 4px solid #ffffff;
+                  border-color: #ffffff !important;
+                "
+              />
               </div>
               <div class="card-body">
                 <div class="card-block">
@@ -30,11 +36,17 @@
             </div>
           </div>
           <div class="col-lg-4 col-12">
-            <div class="card">
-              <div class="card-header">
-                <h4 class="card-title text-center">
+            <div class="card" style="background-color: #252525 !important">
+              <div class="card-header" style="background-color: #252525 !important">
+                <h4 class="card-title text-center" style="color: #ffffff !important;">
                   Comparison of Previous Month Costs
                 </h4>
+                <hr
+                style="
+                  border-top: 4px solid #ffffff;
+                  border-color: #ffffff !important;
+                "
+              />
               </div>
               <div class="card-body">
                 <div class="card-block">
@@ -57,11 +69,17 @@
             </div>
           </div>
           <div class="col-lg-4 col-12">
-            <div class="card">
-              <div class="card-header">
-                <h4 class="card-title text-center">
+            <div class="card" style="background-color: #252525 !important">
+              <div class="card-header" style="background-color: #252525 !important">
+                <h4 class="card-title text-center" style="color: #ffffff !important;">
                   Comparison of Actual Costs and Estimated Costs
                 </h4>
+                <hr
+                style="
+                  border-top: 4px solid #ffffff;
+                  border-color: #ffffff !important;
+                "
+              />
               </div>
               <div class="card-body">
                 <div class="card-block">
diff --git a/src/app/login/login.component.html b/src/app/login/login.component.html
index 45874a7..0365c49 100644
--- a/src/app/login/login.component.html
+++ b/src/app/login/login.component.html
@@ -133,7 +133,7 @@
                 <p
                   class="card-subtitle line-on-side text-muted text-center font-small-3 mx-2 my-1"
                 >
-                  <span>New to Modern ? (v@2024.06.11.01)</span>
+                  <span>New to Modern ? (v@2024.06.12.01)</span>
                 </p>
                 <div class="card-body">
                   <a