diff --git a/files/assets/js/chat.js b/files/assets/js/chat.js
index 85748acbc..65caf554e 100644
--- a/files/assets/js/chat.js
+++ b/files/assets/js/chat.js
@@ -107,10 +107,20 @@ socket.on('speak', function(json) {
 
 		const userlink = document.getElementsByClassName('userlink')[0]
 
-		userlink.innerHTML = userlink.innerHTML.replace(userlink.textContent, json.username)
 		userlink.href = '/@' + json.username
 		userlink.style.color = '#' + json.namecolor
 
+		const username = document.getElementsByClassName('username')[0]
+		username.textContent = json.username
+		if (json.patron) {
+			username.classList.add('patron')
+			username.style.backgroundColor = '#' + json.namecolor
+		}
+		else {
+			username.classList.remove('patron')
+			username.style.backgroundColor = null
+		}
+
 		document.getElementsByClassName('user_id')[0].value = json.user_id
 
 		if (Date.now() - json.time*1000 > 5000)
@@ -221,10 +231,14 @@ socket.on('online', function(data){
 	let online2 = '<b>Users Online</b>'
 	for (const u of data[0])
 	{
+		let patron = ''
+		if (u[3])
+			patron = ` class="patron" style="background-color:#${u[2]}"`
+
 		online += `<li>`
 		if (admin_level && Object.keys(data[1]).includes(u[0].toLowerCase()))
 			online += '<b class="text-danger muted" data-bs-toggle="tooltip" title="Muted">X</b> '
-		online += `<a class="font-weight-bold" target="_blank" href="/@${u[0]}" style="color:#${u[2]}"><img loading="lazy" class="mr-1" src="/pp/${u[1]}">${u[0]}</a></li>`
+		online += `<a class="font-weight-bold" target="_blank" href="/@${u[0]}" style="color:#${u[2]}"><img loading="lazy" class="mr-1" src="/pp/${u[1]}"><span${patron}>${u[0]}</span></a></li>`
 		online2 += `<br>@${u[0]}`
 	}
 	document.getElementById('online').innerHTML = online
diff --git a/files/routes/chat.py b/files/routes/chat.py
index 4cda46049..82e9afb6b 100644
--- a/files/routes/chat.py
+++ b/files/routes/chat.py
@@ -140,6 +140,7 @@ def speak(data, v):
 		"user_id": v.id,
 		"username": v.username,
 		"namecolor": v.name_color,
+		"patron": v.patron,
 		"text": text,
 		"text_censored": censor_slurs(text, 'chat'),
 		"text_html": text_html,
@@ -176,15 +177,15 @@ def refresh_online():
 @is_not_permabanned_socketio
 def connect(v):
 
-	if any(v.id in session for session in sessions) and [v.username, v.id, v.name_color] not in online:
+	if any(v.id in session for session in sessions) and [v.username, v.id, v.name_color, v.patron] not in online:
 		# user has previous running sessions with a different username or name_color
 		for chat_user in online:
 			if v.id == chat_user[1]:
 				online.remove(chat_user)
 
 	sessions.append([v.id, request.sid])
-	if [v.username, v.id, v.name_color] not in online:
-		online.append([v.username, v.id, v.name_color])
+	if [v.username, v.id, v.name_color, v.patron] not in online:
+		online.append([v.username, v.id, v.name_color, v.patron])
 
 	refresh_online()
 
diff --git a/files/templates/util/macros.html b/files/templates/util/macros.html
index 74a95d98d..b3ea16fcd 100644
--- a/files/templates/util/macros.html
+++ b/files/templates/util/macros.html
@@ -231,7 +231,13 @@
 
 {% macro chat_group_template(id, m) %}
 	<div class="chat-group">
-		<a class="font-weight-bold userlink" target="_blank" {% if m %}style="color:#{{m.namecolor}}" href="/@{{m.username}}" {% endif %}><div class="avatar profile-pic-20-wrapper mr-1"><img loading="lazy" class="avatar-pic pp20 mr-1" {% if m %}src="/pp/{{m.user_id}}"{% endif %}><img class="avatar-hat profile-pic-20-hat hat" loading="lazy" {% if m %}src="{{m.hat}}"{% endif %}></div>{% if m %}{{m.username}}{% else %}NULL{% endif %}</a>
+		<a class="font-weight-bold userlink" target="_blank" {% if m %}style="color:#{{m.namecolor}}" href="/@{{m.username}}" {% endif %}>
+			<div class="avatar profile-pic-20-wrapper mr-1">
+				<img loading="lazy" class="avatar-pic pp20 mr-1" {% if m %}src="/pp/{{m.user_id}}"{% endif %}>
+				<img class="avatar-hat profile-pic-20-hat hat" loading="lazy" {% if m %}src="{{m.hat}}"{% endif %}>
+			</div>
+			<span {% if m and m.patron %}class="username patron" style="background-color:#{{m.namecolor}}"{% else %}class="username"{% endif %}>{% if m %}{{m.username}}{% endif %}</span>
+		</a>
 		<span class="text-black time ml-1 mb-3 text-center">{% if m %}{{m.time | timestamp}}{% else %}just now{% endif %}</span>
 		<input hidden class="user_id" {% if m %}value="{{m.user_id}}"{% endif %}>
 {% endmacro %}