diff --git a/client/components/ChatUserList.vue b/client/components/ChatUserList.vue
index ffd5fb39..6c831be4 100644
--- a/client/components/ChatUserList.vue
+++ b/client/components/ChatUserList.vue
@@ -62,16 +62,9 @@ import {computed, defineComponent, nextTick, PropType, ref} from "vue";
 import type {UserInMessage} from "../../shared/types/msg";
 import type {ClientChan, ClientUser} from "../js/types";
 import Username from "./Username.vue";
+import constants from "../js/constants";
 
-const modes = {
-	"~": "owner",
-	"&": "admin",
-	"!": "admin",
-	"@": "op",
-	"%": "half-op",
-	"+": "voice",
-	"": "normal",
-};
+const modes = constants.modeCharToName;
 
 export default defineComponent({
 	name: "ChatUserList",
diff --git a/client/components/Username.vue b/client/components/Username.vue
index 3c5d644d..a6eb7691 100644
--- a/client/components/Username.vue
+++ b/client/components/Username.vue
@@ -1,6 +1,7 @@
 <template>
 	<span
 		:class="['user', {[nickColor]: store.state.settings.coloredNicks}, {active: active}]"
+		:data-mode="mode ? modeCharToName[mode] : null"
 		:data-name="user.nick"
 		role="button"
 		v-on="onHover ? {mouseenter: hover} : {}"
@@ -17,6 +18,7 @@ import eventbus from "../js/eventbus";
 import colorClass from "../js/helpers/colorClass";
 import type {ClientChan, ClientNetwork} from "../js/types";
 import {useStore} from "../js/store";
+import constants from "../js/constants";
 
 type UsernameUser = Partial<UserInMessage> & {
 	mode?: string;
@@ -73,6 +75,7 @@ export default defineComponent({
 		const store = useStore();
 
 		return {
+			modeCharToName: constants.modeCharToName,
 			mode,
 			nickColor,
 			hover,
diff --git a/client/js/constants.ts b/client/js/constants.ts
index 725224bd..047bfd84 100644
--- a/client/js/constants.ts
+++ b/client/js/constants.ts
@@ -24,10 +24,21 @@ const timeFormats = {
 	msg12hWithSeconds: "hh:mm:ss A",
 };
 
+const modeCharToName = {
+	"~": "owner",
+	"&": "admin",
+	"!": "admin",
+	"@": "op",
+	"%": "half-op",
+	"+": "voice",
+	"": "normal",
+};
+
 export default {
 	colorCodeMap,
 	commands: [] as string[],
 	timeFormats,
+	modeCharToName,
 	// Same value as media query in CSS that forces sidebars to become overlays
 	mobileViewportPixels: 768,
 };
diff --git a/client/js/helpers/contextMenu.ts b/client/js/helpers/contextMenu.ts
index 66ce5d2b..c97111c4 100644
--- a/client/js/helpers/contextMenu.ts
+++ b/client/js/helpers/contextMenu.ts
@@ -4,6 +4,7 @@ import type {ClientChan, ClientNetwork, ClientUser} from "../types";
 import {switchToChannel} from "../router";
 import {TypedStore} from "../store";
 import useCloseChannel from "../hooks/use-close-channel";
+import constants from "../constants";
 
 type BaseContextMenuItem = {
 	label: string;
@@ -358,19 +359,11 @@ export function generateUserContextMenu(
 		return items;
 	}
 
-	// Names of the standard modes we are able to change
-	const modeCharToName = {
-		"~": "owner",
-		"&": "admin",
-		"@": "operator",
-		"%": "half-op",
-		"+": "voice",
-	};
-
 	// Labels for the mode changes.  For example .rev({mode: "a", symbol: "&"}) => 'Revoke admin (-a)'
+
 	const modeTextTemplate = {
 		revoke(m: {symbol: string; mode: string}) {
-			const name = modeCharToName[m.symbol];
+			const name = constants.modeCharToName[m.symbol];
 
 			if (typeof name !== "string") {
 				return "";
@@ -380,7 +373,7 @@ export function generateUserContextMenu(
 			return res;
 		},
 		give(m: {symbol: string; mode: string}) {
-			const name = modeCharToName[m.symbol];
+			const name = constants.modeCharToName[m.symbol];
 
 			if (typeof name !== "string") {
 				return "";