diff --git a/CHANGELOG.md b/CHANGELOG.md
index 82f644c8d515e65ae7bb3c7cbef10c07b3188fc8..4803f0f6ab68c21ccda28056199eaff2e7bf0398 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,9 +5,13 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 ## [Unreleased]
 ### Added
+-
 ### Changed
+- updated Distribution System in myems-web
 ### Fixed
+-
 ### Removed
+-
 
 ## [v4.4.0] - 2024-04-17
 ### Added
diff --git a/myems-web/src/components/MyEMS/AuxiliarySystem/DistributionSystem.js b/myems-web/src/components/MyEMS/AuxiliarySystem/DistributionSystem.js
index 011cd2c2eab1509527824b6500145ba311c20a05..73a542fe811573554fa8bb20838830da95cf5fc4 100644
--- a/myems-web/src/components/MyEMS/AuxiliarySystem/DistributionSystem.js
+++ b/myems-web/src/components/MyEMS/AuxiliarySystem/DistributionSystem.js
@@ -148,12 +148,16 @@ const DistributionSystem = ({ 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 = '';
               }
             }
           });