diff --git a/backend/server.py b/backend/server.py
index 7ebe1b8..d108a22 100644
--- a/backend/server.py
+++ b/backend/server.py
@@ -549,8 +549,11 @@ def chat_message(sid, msg, pl=None):
                 else:
                     sio.emit('chat_message', room=sid, data={'color': f'','text':f'{msg} COMMAND NOT FOUND'})
         else:
-            color = sid.encode('utf-8').hex()[-3:]
-            sio.emit('chat_message', room=ses.game.name, data={'color': f'#{color}','text':f'[{ses.name}]: {msg}'})
+            # get a color from sid
+            color = sid.encode('utf-8').hex()[0:6]
+            #bg color will be slightly darker and transparent
+            bg_color = f'{int(color[0:2],16)-10:02x}{int(color[2:4],16)-10:02x}{int(color[4:6],16)-10:02x}20'
+            sio.emit('chat_message', room=ses.game.name, data={'color': f'#{color}', 'bgcolor': f'#{bg_color}','text':f'[{ses.name}]: {msg}'})
             if not ses.game.is_replay:
                 Metrics.send_metric('chat_message', points=[1], tags=[f'game:{ses.game.name.replace(" ","_")}'])
 
diff --git a/frontend/src/components/Chat.vue b/frontend/src/components/Chat.vue
index 484e1de..2e402ac 100644
--- a/frontend/src/components/Chat.vue
+++ b/frontend/src/components/Chat.vue
@@ -4,7 +4,7 @@
 		<h3>{{$t("chat.chat")}}</h3>
 		<transition-group name="message" tag="div" id="chatbox">
 		<!-- <div id="chatbox"> -->
-			<p style="margin:1pt;" class="chat-message" v-for="(msg, i) in messages" v-bind:key="`${i}-c`" :style="`color:${msg.color}`">{{msg.text}}</p>
+			<p style="margin:1pt;" class="chat-message" v-for="(msg, i) in messages" v-bind:key="`${i}-c`" :style="`color:${msg.color};background:${msg.bgcolor}`">{{msg.text}}</p>
 			<p class="end" key="end" style="color:#0000">.</p>
 		<!-- </div> -->
 		</transition-group>
@@ -52,8 +52,10 @@ export default {
 			// console.log(msg)
 			if ((typeof msg === "string" && msg.indexOf('_') === 0) || (msg.color != null && msg.text.indexOf('_') === 0)) {
 				let t_color = null
+				let bg_color = null
 				if (msg.color != null) {
 					t_color = msg.color
+					bg_color = msg.bgcolor
 					msg = msg.text
 				}
 				let params = msg.split('|')
@@ -75,7 +77,7 @@ export default {
 					}
 				}
 				if (t_color != null) {
-					this.messages.push({color:t_color, text:this.$t(`chat.${type}`, params)});
+					this.messages.push({color:t_color, bgcolor: bg_color, text:this.$t(`chat.${type}`, params)});
 				} else {
 					this.messages.push({text:this.$t(`chat.${type}`, params)});
 				}