diff --git a/html/css/styles.css b/html/css/styles.css
index 3c2de2ca70..3597937291 100644
--- a/html/css/styles.css
+++ b/html/css/styles.css
@@ -1821,3 +1821,24 @@ label {
 
 @media only screen and (min-width: 1024px) {
 }
+
+.redCluster {
+    background-color: rgba(255,0,0);
+    background-color: rgba(255,0,0,0.7);
+    text-align: center;
+    width: 25px !important;
+    height: 25px !important;
+    font-size: 14px;
+    color: white;
+}
+
+.greenCluster {
+    background-color: rgba(0,255,0);
+    background-color: rgba(0,255,0,0.7);
+    text-align: center;
+    width: 25px !important;
+    height: 25px !important;
+    font-size: 14px;
+    color: black;
+    border-color:transparent;
+}
diff --git a/html/includes/common/worldmap.inc.php b/html/includes/common/worldmap.inc.php
index cceb080b93..fabda7779f 100644
--- a/html/includes/common/worldmap.inc.php
+++ b/html/includes/common/worldmap.inc.php
@@ -137,6 +137,17 @@ L.tileLayer(\'//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\', {
 
 var markers = L.markerClusterGroup({
     maxClusterRadius: ' . $group_radius . ',
+    iconCreateFunction: function (cluster) {
+        var markers = cluster.getAllChildMarkers();
+        var n = 0;
+        newClass = "greenCluster marker-cluster marker-cluster-small leaflet-zoom-animated leaflet-clickable";
+        for (var i = 0; i < markers.length; i++) {
+            if (markers[i].options.icon.options.markerColor == "red") {
+                newClass = "redCluster marker-cluster marker-cluster-small leaflet-zoom-animated leaflet-clickable";
+            }
+        }
+        return L.divIcon({ html: cluster.getChildCount(), className: newClass, iconSize: L.point(40, 40) });
+    },
   });
 var redMarker = L.AwesomeMarkers.icon({
     icon: \'server\',