diff --git a/art/textures/ui/session/phosphor/circle-empty.png b/art/textures/ui/session/phosphor/circle-empty.png
new file mode 100644
index 00000000..3b7a6197
Binary files /dev/null and b/art/textures/ui/session/phosphor/circle-empty.png differ
diff --git a/art/textures/ui/session/phosphor/circle-full.png b/art/textures/ui/session/phosphor/circle-full.png
new file mode 100644
index 00000000..2470a5d4
Binary files /dev/null and b/art/textures/ui/session/phosphor/circle-full.png differ
diff --git a/gui/session/boonGUI_XML/sprites.xml b/gui/session/boonGUI_XML/sprites.xml
index 929eb799..906dad7e 100644
--- a/gui/session/boonGUI_XML/sprites.xml
+++ b/gui/session/boonGUI_XML/sprites.xml
@@ -290,4 +290,12 @@
       size="0 0 100% 100%"
     />
   </sprite>
+
+  <sprite name="emptyGrayCircle">
+    <effect add_color="95 95 95" />
+    <image
+      real_texture_placement="0 0 16 16"
+      texture="session/phosphor/circle-empty.png"
+    />
+  </sprite>
 </sprites>
diff --git a/gui/session/stats/BoonGUIStatsTopPanelRow.js b/gui/session/stats/BoonGUIStatsTopPanelRow.js
index 688fd10e..6a428fea 100644
--- a/gui/session/stats/BoonGUIStatsTopPanelRow.js
+++ b/gui/session/stats/BoonGUIStatsTopPanelRow.js
@@ -75,6 +75,7 @@ class BoonGUIStatsTopPanelRow
 		this.killDeathRatio = Engine.GetGUIObjectByName(`${PREFIX}_killDeathRatio`);
 
 		this.los = Engine.GetGUIObjectByName(`${PREFIX}_los`);
+		this.losHighlight = Engine.GetGUIObjectByName(`${PREFIX}_losHighlight`);
 
 		Engine.SetGlobalHotkey("structree", "Press", openStructTree);
 		Engine.SetGlobalHotkey("civinfo", "Press", openStructTree);
@@ -385,16 +386,18 @@ class BoonGUIStatsTopPanelRow
 			tooltip += "Cowards do not count in battle; they are there, but not in it. Euripides";
 
 		this.killDeathRatioHighlight.tooltip = tooltip;
+		// Ever present slightly gray coloured empty circle, defined in the xml part.
+		// Place a full circle in the player's color over the gray circle, the gray circle is slightly visible, this is good for contrast with dark colors.
+		if(state.hasSharedLos || state.numberAllies == 1)
+			this.los.sprite = `stretched:color:${state.playerColor}:textureAsMask:session/phosphor/circle-full.png`;
 
-		const los = state.hasSharedLos || state.numberAllies == 1 ? "●" : "○";
-		this.los.caption = setStringTags(los, { "color": state.playerColor });
 		color = state.brightenedPlayerColor;
-		tooltip = "";
-		tooltip += `${playerNick}\n`;
+		tooltip = `${playerNick}\n`;
 		font = "sans-stroke-20";
 		tooltip += `${setStringTags("○", { color, font })} / ${setStringTags("●", { color, font })}\n`;
 		tooltip += "Full circle when cartography has been researched or when you are without mutual allies.";
-		this.los.tooltip = tooltip;
+		this.losHighlight.tooltip = tooltip;
+
 	}
 }
 
diff --git a/gui/session/stats/sections/BoonGUIStatsTopPanel.xml b/gui/session/stats/sections/BoonGUIStatsTopPanel.xml
index e2b98bca..b3f43ac1 100644
--- a/gui/session/stats/sections/BoonGUIStatsTopPanel.xml
+++ b/gui/session/stats/sections/BoonGUIStatsTopPanel.xml
@@ -466,13 +466,18 @@
         </object>
 
         <object
-          name="StatsTopPanelRow[n]_los"
-          text_align="center"
-          font="sans-bold-20"
-          type="text"
-          size="950 0 960 100%"
-          tooltip_style="sessionToolTipCircle"
-        />
+          name="StatsTopPanelRow[n]_losHighlight"
+          size="945 0 100% 100%"
+          type="button"
+          style="statsHighlighter">
+          <object
+            name="StatsTopPanelRow[n]_los"
+            size="20%-1 20%+1 80%+1 80%-1"
+            ghost="true"
+            type="image">
+            <object type="image" sprite="emptyGrayCircle" ghost="true" />
+          </object>
+        </object>
       </object>
     </repeat>
   </object>