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 b276f26..9544824 100644
--- a/src/app/content/hemat-app/monitoring/detail/detail.component.css
+++ b/src/app/content/hemat-app/monitoring/detail/detail.component.css
@@ -86,11 +86,11 @@ canvas {
 }
 
 .background-round {
-  background-color: #2F5137 !important;
+  background-color: #37A647 !important;
   padding: 8px;
   border-radius: 50%;
-  border: 2px solid #2F5137;
-  border-color: #2F5137 !important;
+  border: 2px solid #37A647;
+  border-color: #37A647 !important;
 }
 
 .custom-label {
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 af8aa4e..b719df4 100644
--- a/src/app/content/hemat-app/monitoring/detail/detail.component.html
+++ b/src/app/content/hemat-app/monitoring/detail/detail.component.html
@@ -19,7 +19,7 @@
                   <div class="align-self-center">
                     <div
                       style="
-                        background-color: #2F5137;
+                        background-color: #37A647;
                         border-radius: 50%;
                         width: 50px;
                         height: 50px;
@@ -51,7 +51,7 @@
                   <div class="align-self-center">
                     <div
                       style="
-                        background-color: #2F5137;
+                        background-color: #37A647;
                         border-radius: 50%;
                         width: 50px;
                         height: 50px;
@@ -83,7 +83,7 @@
                   <div class="align-self-center">
                     <div
                       style="
-                        background-color: #2F5137;
+                        background-color: #37A647;
                         border-radius: 50%;
                         width: 50px;
                         height: 50px;
@@ -120,7 +120,7 @@
                   <div class="align-self-center">
                     <div
                       style="
-                        background-color: #414f2b;
+                        background-color: #37A647;
                         border-radius: 50%;
                         width: 50px;
                         height: 50px;
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 23af64f..4f4d514 100644
--- a/src/app/content/hemat-app/monitoring/detail/detail.component.ts
+++ b/src/app/content/hemat-app/monitoring/detail/detail.component.ts
@@ -72,18 +72,29 @@ export class DetailComponent {
     {
       type: "line",
       data: [],
-      label: "Weekly Kwh Average",
-      backgroundColor: "rgba(0,255,255,0)",
+      label: "Kwh Average",
+      backgroundColor: "#ffffff",
       borderColor: "#ffffff",
-      fill: false,
+      pointBackgroundColor: "#ffffff",
       pointBorderColor: "#ffffff",
-      pointBackgroundColor: "#FFF",
-      pointBorderWidth: 2,
-      pointHoverBorderWidth: 2,
-      pointRadius: 4,
-      tension: 0.3,
-      spanGaps: true,
+      pointHoverBackgroundColor: "#ffffff",
+      pointHoverBorderColor: "#ffffff",
     },
+    // {
+    //   type: "line",
+    //   data: [],
+    //   label: "Weekly Kwh Average",
+    //   backgroundColor: "rgba(0,255,255,0)",
+    //   borderColor: "#ffffff",
+    //   fill: true,
+    //   pointBorderColor: "#ffffff",
+    //   pointBackgroundColor: "#FFF",
+    //   pointBorderWidth: 2,
+    //   pointHoverBorderWidth: 2,
+    //   pointRadius: 4,
+    //   tension: 0.3,
+    //   spanGaps: true,
+    // },
   ];
   //..........................
 
@@ -213,7 +224,7 @@ export class DetailComponent {
             formatter: function (value: number) {
               return Math.round(value) + "";
             },
-            color: "inherit",
+            color: "#242222",
           },
           data: [
             {
@@ -315,20 +326,21 @@ export class DetailComponent {
         this.barChartData[0].data = [];
         this.chartKwhWater.forEach((entry) => {
           this.barChartData[0].data.push(entry.kwh);
+          this.barChartData[1].data.push(entry.kwh);
           this.barChartLabels.push(entry.day);
         });
 
-        const weeklyKwh = this.aggregateKwhWeekly(this.chartKwhWater);
-        let weekIndex = 0;
-        console.log(this.barChartData[0].data);
+        // const weeklyKwh = this.aggregateKwhWeekly(this.chartKwhWater);
+        // let weekIndex = 0;
+        // console.log(this.barChartData[0].data);
 
-        for (let i = 0; i < this.barChartData[0].data.length; i++) {
-          if (i % 7 === 6 && weekIndex < weeklyKwh.length) {
-            this.barChartData[1].data[i] = weeklyKwh[weekIndex++];
-          } else {
-            this.barChartData[1].data[i] = null;
-          }
-        }
+        // for (let i = 0; i < this.barChartData[0].data.length; i++) {
+        //   if (i % 7 === 6 && weekIndex < weeklyKwh.length) {
+        //     this.barChartData[1].data[i] = weeklyKwh[weekIndex++];
+        //   } else {
+        //     this.barChartData[1].data[i] = null;
+        //   }
+        // }
       });
   }