diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/message/message-detail.dialog.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/message/message-detail.dialog.component.html
index 1fe42c63..0ff1d714 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/message/message-detail.dialog.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/message/message-detail.dialog.component.html
@@ -184,25 +184,33 @@
           <mat-tab>
             <ng-template mat-tab-label>
               {{ 'message.countOfUnreadUser' | translate }}
-              {{ getReadUserCount(true) }}
+              {{ getReadUserCount(false) }}
             </ng-template>
             <ul>
               <div>
                 {{ 'common.messages.selectAll' | translate }}
                 <mat-checkbox
                   #checkbox
-                  (change)="
-                    checkbox.checked
-                      ? unReadUsers.selectAll()
-                      : unReadUsers.deselectAll()
-                  "
+                  (change)="onUnreadUserCheckAll(checkbox.checked)"
                   (click)="$event.stopPropagation()"
                 >
                 </mat-checkbox>
               </div>
-              <mat-selection-list #unReadUsers>
+              <mat-selection-list
+                #unReadUsers
+                (selectionChange)="
+                  onUnreadUserSelectionChange(
+                    unReadUsers.selectedOptions.selected
+                  )
+                "
+              >
                 <ng-container *ngFor="let user of receivers">
-                  <mat-list-option *ngIf="!user.readYn" [value]="user.userSeq">
+                  <mat-list-option
+                    *ngIf="!user.readYn"
+                    [value]="user.userSeq"
+                    [disabled]="user.cancelYn"
+                    [selected]="isSelectedUnreadUser(user)"
+                  >
                     <span>{{ user.userName }}</span>
                   </mat-list-option>
                 </ng-container>
@@ -211,14 +219,10 @@
                 <button
                   mat-stroked-button
                   [disabled]="unReadUsers.selectedOptions.selected.length === 0"
-                  (click)="
-                    cancelSendMessageForUsers(
-                      unReadUsers.selectedOptions.selected
-                    )
-                  "
+                  (click)="cancelSendMessageForUsers()"
                   class="mat-primary"
                 >
-                  {{ 'message.cancelReservation' | translate }}
+                  {{ 'message.cancelSending' | translate }}
                 </button>
               </div>
             </ul>
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/message/message-detail.dialog.component.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/message/message-detail.dialog.component.ts
index 08175e43..dabe0998 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/message/message-detail.dialog.component.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/message/message-detail.dialog.component.ts
@@ -3,7 +3,8 @@ import {
   MatDialogRef,
   MAT_DIALOG_DATA,
   MatSelectionList,
-  MatDrawer
+  MatDrawer,
+  MatListOption
 } from '@angular/material';
 import { map, catchError, take } from 'rxjs/operators';
 
@@ -79,6 +80,8 @@ export class MessageDetailDialogComponent implements OnInit {
   downloadQueue: DownloadQueueForMessage[] = [];
   downloadFail: DownloadQueueForMessage[] = [];
 
+  selectedUnreadUserSeqs: number[] = [];
+
   @ViewChild('rightDrawer', { static: true }) rightDrawer: MatDrawer;
   @ViewChild('unReadUsers', { static: false }) unReadUsers: MatSelectionList;
 
@@ -139,7 +142,13 @@ export class MessageDetailDialogComponent implements OnInit {
   }
 
   getReadUserCount(readYn: boolean): number {
-    return this.receivers.filter(user => user.readYn === readYn).length;
+    return this.receivers.filter(user => {
+      if (!!readYn) {
+        return user.readYn === readYn;
+      } else {
+        return user.readYn === readYn && !user.cancelYn;
+      }
+    }).length;
   }
 
   getFileStatusIcon(file: DetailContent) {
@@ -534,8 +543,8 @@ export class MessageDetailDialogComponent implements OnInit {
 
   async cancelSendMessageForUsers() {
     if (
-      !!this.unReadUsers &&
-      this.unReadUsers.selectedOptions.selected.length > 0
+      !!this.selectedUnreadUserSeqs &&
+      this.selectedUnreadUserSeqs.length > 0
     ) {
       const result = await this.dialogService.open<
         ConfirmDialogComponent,
@@ -549,11 +558,11 @@ export class MessageDetailDialogComponent implements OnInit {
       });
 
       if (!!result && !!result.choice && result.choice) {
-        const cancelUserSeqs: number[] = [];
-        const recvUserList: { userSeq: number }[] = [];
-        this.unReadUsers.selectedOptions.selected.forEach(selected => {
-          cancelUserSeqs.push(selected.value);
-          recvUserList.push({ userSeq: selected.value });
+        const cancelUserSeqs: number[] = this.selectedUnreadUserSeqs;
+        const recvUserList: {
+          userSeq: number;
+        }[] = this.selectedUnreadUserSeqs.map(userSeq => {
+          return { userSeq };
         });
 
         this.messageApiService
@@ -569,9 +578,13 @@ export class MessageDetailDialogComponent implements OnInit {
             take(1),
             map(async res => {
               if (res.responseCode === MessageStatusCode.Success) {
-                this.receivers = this.receivers.filter(
-                  user => cancelUserSeqs.indexOf(user.userSeq) < 0
-                );
+                this.receivers.forEach(user => {
+                  if (cancelUserSeqs.indexOf(user.userSeq) >= 0) {
+                    user.cancelYn = true;
+                    user.readYn = false;
+                  }
+                });
+                this.selectedUnreadUserSeqs = [];
                 this.rightDrawer.close();
               } else {
                 this.logger.error('message cancel user Error!');
@@ -584,6 +597,28 @@ export class MessageDetailDialogComponent implements OnInit {
     }
   }
 
+  onUnreadUserCheckAll(checked: boolean) {
+    if (!!checked) {
+      this.selectedUnreadUserSeqs = this.receivers
+        .filter(user => !user.readYn && !user.cancelYn)
+        .map(user => user.userSeq);
+    } else {
+      this.selectedUnreadUserSeqs = [];
+    }
+  }
+
+  onUnreadUserSelectionChange(selectedList: MatListOption[]) {
+    this.selectedUnreadUserSeqs = selectedList.map(list => list.value);
+  }
+
+  isSelectedUnreadUser(user: DetailReceiver) {
+    if (this.selectedUnreadUserSeqs.indexOf(user.userSeq) < 0) {
+      return false;
+    } else {
+      return true;
+    }
+  }
+
   onClickConfirm(): void {
     this.dialogRef.close({
       returnType: 'CLOSE'
diff --git a/projects/ucap-webmessenger-app/src/assets/i18n/en.json b/projects/ucap-webmessenger-app/src/assets/i18n/en.json
index 110c5459..1eda6247 100644
--- a/projects/ucap-webmessenger-app/src/assets/i18n/en.json
+++ b/projects/ucap-webmessenger-app/src/assets/i18n/en.json
@@ -262,6 +262,7 @@
     "confirmRemove": "Do you want to delete selected message(s)?",
     "detailOfViewers": "Detail of viewers",
     "selectRecipient": "Select recipient",
+    "andOthers": "and {{count}}others",
     "results": {
       "successForSending": "Your message has been sent.",
       "successForReservation": "You have scheduled a message transfer.",
diff --git a/projects/ucap-webmessenger-app/src/assets/i18n/ko.json b/projects/ucap-webmessenger-app/src/assets/i18n/ko.json
index 35f1636e..688337e6 100644
--- a/projects/ucap-webmessenger-app/src/assets/i18n/ko.json
+++ b/projects/ucap-webmessenger-app/src/assets/i18n/ko.json
@@ -262,6 +262,7 @@
     "confirmRemove": "선택한 쪽지를 삭제하시겠습니까?",
     "detailOfViewers": "읽음 확인",
     "selectRecipient": "수신자 선택",
+    "andOthers": "외 {{count}}명",
     "results": {
       "successForSending": "쪽지를 전송하였습니다.",
       "successForReservation": "쪽지 전송을 예약 하였습니다.",
diff --git a/projects/ucap-webmessenger-ui-message/src/lib/components/list-item.component.html b/projects/ucap-webmessenger-ui-message/src/lib/components/list-item.component.html
index 4b54f7b0..4ae77c8d 100644
--- a/projects/ucap-webmessenger-ui-message/src/lib/components/list-item.component.html
+++ b/projects/ucap-webmessenger-ui-message/src/lib/components/list-item.component.html
@@ -14,7 +14,15 @@
     <dd class="info">
       <div class="detail">
         <span class="name">
-          <b>{{ message.userName }}</b>
+          <b>
+            {{ message.userName
+            }}<span *ngIf="message.userCount > 0">
+              {{
+                'message.andOthers'
+                  | translate: { count: message.userCount - 1 }
+              }}
+            </span>
+          </b>
           {{ message.title }}
         </span>
         <span class="dept">