diff --git a/client/src/@types/dom.d.ts b/client/src/@types/dom.d.ts
index a3712343..dc70c183 100644
--- a/client/src/@types/dom.d.ts
+++ b/client/src/@types/dom.d.ts
@@ -19,7 +19,7 @@ interface CustomEventMap {
     "mapStateChanged":                  CustomEvent<string>,
     "mapContextMenu":                   CustomEvent<>,
     "mapVisibilityOptionsChanged":      CustomEvent<>,
-    "commandModeOptionsChanged":                CustomEvent<>,  
+    "commandModeOptionsChanged":        CustomEvent<>,  
     "contactsUpdated":                  CustomEvent<Unit>,
 }
 
diff --git a/client/src/constants/constants.ts b/client/src/constants/constants.ts
index 192825e1..08f63b97 100644
--- a/client/src/constants/constants.ts
+++ b/client/src/constants/constants.ts
@@ -148,7 +148,7 @@ export const IADSDensities: {[key: string]: number}= {"AAA": 0.8, "MANPADS": 0.3
 
 export const SHOW_CONTACT_LINES = "Show unit contact lines";
 export const HIDE_GROUP_MEMBERS = "Hide group members when zoomed out";
-export const SHOW_UNIT_LABELS   = "Show unit labels (L)";
+export const SHOW_UNIT_LABELS   = "Show unit labels";
 export const SHOW_UNIT_PATHS    = "Show unit paths";
 export const SHOW_UNIT_TARGETS  = "Show unit targets";
 
diff --git a/client/src/index.ts b/client/src/index.ts
index 8a86d75e..e16f8562 100644
--- a/client/src/index.ts
+++ b/client/src/index.ts
@@ -137,9 +137,6 @@ function setupEvents() {
             return;
         }
         switch (ev.code) {
-            case "KeyL":
-                document.body.toggleAttribute("data-hide-labels");
-                break;
             case "KeyT":
                 toggleDemoEnabled();
                 break;
diff --git a/client/src/map/map.ts b/client/src/map/map.ts
index 8cb6e968..b50886ff 100644
--- a/client/src/map/map.ts
+++ b/client/src/map/map.ts
@@ -12,7 +12,7 @@ import { DestinationPreviewMarker } from "./destinationpreviewmarker";
 import { TemporaryUnitMarker } from "./temporaryunitmarker";
 import { ClickableMiniMap } from "./clickableminimap";
 import { SVGInjector } from '@tanem/svg-injector'
-import { layers as mapLayers, mapBounds, minimapBoundaries, IDLE, COALITIONAREA_DRAW_POLYGON, visibilityControls, visibilityControlsTooltips, FIRE_AT_AREA, MOVE_UNIT, CARPET_BOMBING, BOMBING, SHOW_CONTACT_LINES, HIDE_GROUP_MEMBERS, SHOW_UNIT_PATHS, SHOW_UNIT_TARGETS, visibilityControlsTypes } from "../constants/constants";
+import { layers as mapLayers, mapBounds, minimapBoundaries, IDLE, COALITIONAREA_DRAW_POLYGON, visibilityControls, visibilityControlsTooltips, FIRE_AT_AREA, MOVE_UNIT, CARPET_BOMBING, BOMBING, SHOW_CONTACT_LINES, HIDE_GROUP_MEMBERS, SHOW_UNIT_PATHS, SHOW_UNIT_TARGETS, visibilityControlsTypes, SHOW_UNIT_LABELS } from "../constants/constants";
 import { TargetMarker } from "./targetmarker";
 import { CoalitionArea } from "./coalitionarea";
 import { CoalitionAreaContextMenu } from "../controls/coalitionareacontextmenu";
@@ -45,7 +45,7 @@ export class Map extends L.Map {
     #temporaryMarkers: TemporaryUnitMarker[] = [];
     #selecting: boolean = false;
     #isZooming: boolean = false;
-    
+
     #destinationGroupRotation: number = 0;
     #computeDestinationRotation: boolean = false;
     #destinationRotationCenter: L.LatLng | null = null;
@@ -89,7 +89,7 @@ export class Map extends L.Map {
         this.#mapSourceDropdown = new Dropdown("map-type", (layerName: string) => this.setLayer(layerName), this.getLayers());
 
         /* Visibility options dropdown */
-        this.#mapVisibilityOptionsDropdown = new Dropdown("map-visibility-options", ( value:string ) => {});
+        this.#mapVisibilityOptionsDropdown = new Dropdown("map-visibility-options", (value: string) => { });
 
         /* Init the state machine */
         this.#state = IDLE;
@@ -132,7 +132,7 @@ export class Map extends L.Map {
                 })
             }
         });
-   
+
 
         document.addEventListener("toggleCoalitionAreaDraw", (ev: CustomEventInit) => {
             this.getMapContextMenu().hide();
@@ -150,6 +150,10 @@ export class Map extends L.Map {
                 this.#panToUnit(this.#centerUnit);
         });
 
+        document.addEventListener("mapVisibilityOptionsChanged", () => {
+            this.getContainer().toggleAttribute("data-hide-labels", !this.getVisibilityOptions()[SHOW_UNIT_LABELS]);
+        });
+
         /* Pan interval */
         this.#panInterval = window.setInterval(() => {
             if (this.#panLeft || this.#panDown || this.#panRight || this.#panLeft)
@@ -160,17 +164,17 @@ export class Map extends L.Map {
         /* Option buttons */
         this.#optionButtons["visibility"] = visibilityControls.map((option: string, index: number) => {
             var typesArrayString = `"${visibilityControlsTypes[index][0]}"`;
-            visibilityControlsTypes[index].forEach((type: string, idx: number) => {if (idx > 0) typesArrayString = `${typesArrayString}, "${type}"`});
+            visibilityControlsTypes[index].forEach((type: string, idx: number) => { if (idx > 0) typesArrayString = `${typesArrayString}, "${type}"` });
             return this.#createOptionButton(option, `visibility/${option.toLowerCase()}.svg`, visibilityControlsTooltips[index], "toggleMarkerVisibility", `{"types": [${typesArrayString}]}`);
         });
         document.querySelector("#unit-visibility-control")?.append(...this.#optionButtons["visibility"]);
 
         /* Create the checkboxes to select the advanced visibility options */
-
         this.#visibilityOptions[SHOW_CONTACT_LINES] = false;
         this.#visibilityOptions[HIDE_GROUP_MEMBERS] = true;
-        this.#visibilityOptions[SHOW_UNIT_PATHS]    = true;
-        this.#visibilityOptions[SHOW_UNIT_TARGETS]  = true;
+        this.#visibilityOptions[SHOW_UNIT_PATHS] = true;
+        this.#visibilityOptions[SHOW_UNIT_TARGETS] = true;
+        this.#visibilityOptions[SHOW_UNIT_LABELS] = true;
         this.#mapVisibilityOptionsDropdown.setOptionsElements(Object.keys(this.#visibilityOptions).map((option: string) => {
             return createCheckboxOption(option, option, this.#visibilityOptions[option], (ev: any) => {
                 this.#setVisibilityOption(option, ev);
@@ -473,7 +477,7 @@ export class Map extends L.Map {
                 /* Coalition areas are ordered in the #coalitionAreas array according to their zindex. Select the upper one */
                 for (let coalitionArea of this.#coalitionAreas) {
                     if (coalitionArea.getBounds().contains(e.latlng)) {
-                        if (coalitionArea.getSelected()) 
+                        if (coalitionArea.getSelected())
                             clickedCoalitionArea = coalitionArea;
                         else
                             this.getMapContextMenu().setCoalitionArea(coalitionArea);
@@ -659,7 +663,7 @@ export class Map extends L.Map {
         else {
             Object.values(getUnitsManager().selectedUnitsComputeGroupDestination(groupLatLng, this.#destinationGroupRotation)).forEach((latlng: L.LatLng, idx: number) => {
                 if (idx < this.#destinationPreviewCursors.length)
-                    this.#destinationPreviewCursors[idx].setLatLng(this.#shiftKey? latlng : this.getMouseCoordinates());
+                    this.#destinationPreviewCursors[idx].setLatLng(this.#shiftKey ? latlng : this.getMouseCoordinates());
             })
         };
     }