diff --git a/src/client/UserSettingModal.ts b/src/client/UserSettingModal.ts
index cb47ee320..2e54c63f9 100644
--- a/src/client/UserSettingModal.ts
+++ b/src/client/UserSettingModal.ts
@@ -366,6 +366,15 @@ export class UserSettingModal extends BaseModal {
     }
   }
 
+  private sliderPlayerNameOpacity(e: CustomEvent<{ value: number }>) {
+    const value = e.detail?.value;
+    if (typeof value !== "number") {
+      console.warn("Slider event missing detail.value", e);
+      return;
+    }
+    this.userSettings.setPlayerNameOpacity(value);
+  }
+
   private changeAttackRatioIncrement(
     e: CustomEvent<{ value: number | string }>,
   ) {
@@ -921,6 +930,16 @@ export class UserSettingModal extends BaseModal {
         @change=${this.toggleAnonymousNames}
       ></setting-toggle>
 
+      <setting-slider
+        label="${translateText("user_setting.player_name_opacity_label")}"
+        description="${translateText("user_setting.player_name_opacity_desc")}"
+        min="0"
+        max="100"
+        .value=${this.userSettings.playerNameOpacity()}
+        .zeroLabelKey=${"user_setting.hidden"}
+        @change=${this.sliderPlayerNameOpacity}
+      ></setting-slider>
+
       <!-- 👁️ Hidden Lobby IDs -->
       <setting-toggle
         label="${translateText("user_setting.lobby_id_visibility_label")}"