diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.html b/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.html
index 575937ee..310dcf57 100644
--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.html
+++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.html
@@ -8,6 +8,11 @@
       contact: message.senderSeq !== loginRes.userSeq
     }"
   >
+    <ng-container [ngSwitch]="message.type">
+      <div *ngSwitchCase="EventType.Character">Character</div>
+      <div *ngSwitchCase="EventType.Join">Join</div>
+    </ng-container>
+
     <img *ngIf="" src="" class="avatar" />
 
     <div class="bubble">
diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.ts b/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.ts
index 12f50f07..2a712d15 100644
--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.ts
+++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.ts
@@ -1,6 +1,6 @@
 import { Component, OnInit, Input } from '@angular/core';
 
-import { Info } from '@ucap-webmessenger/protocol-event';
+import { Info, EventType } from '@ucap-webmessenger/protocol-event';
 import { LoginResponse } from '@ucap-webmessenger/protocol-authentication';
 import { NGXLogger } from 'ngx-logger';
 
@@ -15,6 +15,8 @@ export class MessagesComponent implements OnInit {
   @Input()
   messages: Info[];
 
+  EventType = EventType;
+
   constructor(private logger: NGXLogger) {}
 
   ngOnInit() {