diff --git a/glebby-client/src/components/Game.vue b/glebby-client/src/components/Game.vue
index c1cae71..c2ac2b8 100644
--- a/glebby-client/src/components/Game.vue
+++ b/glebby-client/src/components/Game.vue
@@ -27,7 +27,7 @@ export default defineComponent({
   },
   data() {
     return {
-      chatMessages: [] as { from: number, message: string }[],
+      chatMessages: [] as { from: Player, message: string }[],
 
       playerName: '',
       chatMessage: ''
@@ -55,7 +55,7 @@ export default defineComponent({
           break
         case 'chat':
           this.chatMessages.push({
-            from: message.from,
+            from: getPlayer(this.model, message.from)!,
             message: payload.message
           })
           break
@@ -127,8 +127,8 @@ export default defineComponent({
       <h2>chat</h2>
       <div class="chatbox-scroller">
         <div class="chatbox-scroller-content">
-          <div v-for="message in chatMessages" class="chatbox-message">
-            <code v-if="model.players.get(message.from)">{{ model.players.get(message.from)!.name }}#{{ message.from }}:</code> {{ message.message }}
+          <div v-for="chatMessage in chatMessages" class="chatbox-message">
+            <code>{{ chatMessage.from.name }}#{{ chatMessage.from.id }}:</code> {{ chatMessage.message }}
           </div>
         </div>
       </div>