diff --git a/src/app/module/chat/data/data-source/message/message-local-data-source.service.ts b/src/app/module/chat/data/data-source/message/message-local-data-source.service.ts
index ec560d41b..75919fcb7 100644
--- a/src/app/module/chat/data/data-source/message/message-local-data-source.service.ts
+++ b/src/app/module/chat/data/data-source/message/message-local-data-source.service.ts
@@ -2,9 +2,10 @@ import { Injectable } from '@angular/core';
 import { Dexie, EntityTable, liveQuery } from 'Dexie';
 import { err, ok, Result } from 'neverthrow';
 import { z } from 'zod';
-import { from, Observable, Subject } from 'rxjs';
-import { filter, switchMap } from 'rxjs/operators';
+import { Observable, Subject } from 'rxjs';
+import { filter } from 'rxjs/operators';
 import { MessageInputDTO } from '../../dto/message/messageInputDtO';
+import { MessageEntity } from '../../../domain/entity/message';
 
 
 const tableSchema = z.object({
@@ -55,6 +56,7 @@ export const messageDataSource = new Dexie('chat-message') as Dexie & {
 messageDataSource.version(1).stores({
   message: '++$id, id, roomId, message, messageType, canEdit, oneShot, requireUnlock, messageId, info'
 });
+messageDataSource.message.mapToClass(MessageEntity);
 
 @Injectable({
   providedIn: 'root'
diff --git a/src/app/module/chat/domain/entity/message.ts b/src/app/module/chat/domain/entity/message.ts
new file mode 100644
index 000000000..56dcdd4c7
--- /dev/null
+++ b/src/app/module/chat/domain/entity/message.ts
@@ -0,0 +1,51 @@
+import { z } from "zod";
+
+const MessageEntitySchema = z.object({
+  $id: z.any().optional(),
+  id: z.string().optional(),
+  roomId: z.string().uuid(),
+  message: z.string(),
+  messageType: z.number(),
+  canEdit: z.boolean(),
+  oneShot: z.boolean(),
+  sentAt: z.string().optional(),
+  requireUnlock: z.boolean(),
+  sender: z.object({
+    wxUserId: z.number(),
+    wxFullName: z.string(),
+    wxeMail: z.string(),
+    userPhoto: z.string(),
+  }),
+  sending: z.boolean().optional()
+})
+
+type Message = z.infer<typeof MessageEntitySchema>;
+
+export class MessageEntity implements Message  {
+
+  $id: number
+  id: string
+  roomId: string
+  message: string
+  messageType: number
+  canEdit: boolean
+  oneShot: boolean
+  sentAt: string
+  requireUnlock: boolean
+  sender: {
+    wxUserId: number,
+    wxFullName: string,
+    wxeMail: string,
+    userPhoto: string,
+  }
+  sending: boolean
+
+  constructor() {}
+
+  get messageStatus() {
+    if(this.id) {
+      return 'send'
+    }
+  }
+
+}
diff --git a/src/app/shared/chat/messages/messages.page.html b/src/app/shared/chat/messages/messages.page.html
index f992ed928..1c67b6275 100644
--- a/src/app/shared/chat/messages/messages.page.html
+++ b/src/app/shared/chat/messages/messages.page.html
@@ -47,7 +47,11 @@
     *ngFor="let message of roomMessage$ | async" class="messages-list-item-wrapper"
     [ngClass]="{'my-message': message.sender.wxUserId === sessionStore.user.UserId, 'other-message': message.sender.wxUserId !== sessionStore.user.UserId}">
     <div class="message-container">
-      {{ message.message }} .== {{ message.$id }}
+
+      {{ message.message }}
+      <br>
+      <ion-icon *ngIf="message.messageStatus != 'send'" src="assets/images/clock-regular.svg"></ion-icon>
+      <ion-icon *ngIf="message.messageStatus == 'send'" src="assets/images/check-solid.svg"></ion-icon>
 
       <div class="message-item-options d-flex justify-content-end">
         <fa-icon [matMenuTriggerFor]="beforeMenu" icon="chevron-down" class="message-options-icon cursor-pointer"></fa-icon>