diff --git a/myems-web/src/components/MyEMS/EnergyStoragePowerStation/EnergyStoragePowerStationDetails.js b/myems-web/src/components/MyEMS/EnergyStoragePowerStation/EnergyStoragePowerStationDetails.js
index 129a4bf3c9024dfb1c55f51b740f2aabbf17cf8d..5195f6f3d47b821883af9a436f310c54e5332a57 100644
--- a/myems-web/src/components/MyEMS/EnergyStoragePowerStation/EnergyStoragePowerStationDetails.js
+++ b/myems-web/src/components/MyEMS/EnergyStoragePowerStation/EnergyStoragePowerStationDetails.js
@@ -243,12 +243,16 @@ const EnergyStoragePowerStationDetails = ({ setRedirect, setRedirectUrl, t }) =>
           json.forEach(currentPoint => {
             let textElement = document.getElementById('PT' + currentPoint['point_id']);
             if (textElement) {
-              let tspanList = textElement.getElementsByTagName('tspan');
-              if (tspanList && tspanList.length > 0) {
-                let tspanElement = tspanList[tspanList.length - 1];
-                tspanElement.textContent = parseFloat(currentPoint['value']).toFixed(2);
+              textElement.textContent = parseFloat(currentPoint['value']).toFixed(2);
+            }
+            let circleElement = document.getElementById('CIRCLE' + currentPoint['point_id']);
+            if (circleElement) {
+              if (currentPoint['value'] > 0) {
+                circleElement.className.baseVal = 'flow';
+              } else if (currentPoint['value'] < 0) {
+                circleElement.className.baseVal = 'flow-reverse';
               } else {
-                textElement.textContent = parseFloat(currentPoint['value']).toFixed(2);
+                circleElement.className.baseVal = '';
               }
             }
           });
diff --git a/myems-web/src/components/MyEMS/Microgrid/MicrogridDetails.js b/myems-web/src/components/MyEMS/Microgrid/MicrogridDetails.js
index f08989109f8e659472ac9db58e01effbff26890b..50e80c698d0db1dfc8f52f0d64120eee5718914f 100644
--- a/myems-web/src/components/MyEMS/Microgrid/MicrogridDetails.js
+++ b/myems-web/src/components/MyEMS/Microgrid/MicrogridDetails.js
@@ -245,12 +245,16 @@ const MicrogridDetails = ({ setRedirect, setRedirectUrl, t }) => {
           json.forEach(currentPoint => {
             let textElement = document.getElementById('PT' + currentPoint['point_id']);
             if (textElement) {
-              let tspanList = textElement.getElementsByTagName('tspan');
-              if (tspanList && tspanList.length > 0) {
-                let tspanElement = tspanList[tspanList.length - 1];
-                tspanElement.textContent = parseFloat(currentPoint['value']).toFixed(2);
+              textElement.textContent = parseFloat(currentPoint['value']).toFixed(2);
+            }
+            let circleElement = document.getElementById('CIRCLE' + currentPoint['point_id']);
+            if (circleElement) {
+              if (currentPoint['value'] > 0) {
+                circleElement.className.baseVal = 'flow';
+              } else if (currentPoint['value'] < 0) {
+                circleElement.className.baseVal = 'flow-reverse';
               } else {
-                textElement.textContent = parseFloat(currentPoint['value']).toFixed(2);
+                circleElement.className.baseVal = '';
               }
             }
           });