diff --git a/projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.html b/projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.html
index 8d29dda5..ed30d890 100644
--- a/projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.html
+++ b/projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.html
@@ -86,7 +86,7 @@
     </dd>
   </dl>
 
-  <span
+  <div
     class="noti-num"
     *ngIf="roomInfo.noReadCnt > 0"
     [matBadgeHidden]="roomInfo.noReadCnt === 0"
@@ -95,5 +95,5 @@
     matBadgeColor="accent"
     matBadgePosition="below after"
   >
-  </span>
+  </div>
 </div>
diff --git a/projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.scss b/projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.scss
index f5d86f0e..c0f1e8e8 100644
--- a/projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.scss
+++ b/projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.scss
@@ -128,6 +128,8 @@ $thumbnail-msize: 40px;
       margin-left: 10px;
       color: $font-mid;
       @include ellipsis(1);
+      align-items: flex-start;
+      margin-top: -2px;
     }
   }
 
@@ -159,7 +161,20 @@ $thumbnail-msize: 40px;
 }
 
 .noti-num {
-  position: absolute !important;
-  right: 22px;
-  bottom: 22px;
+  &.mat-badge {
+    position: absolute !important;
+    right: 40px !important;
+    bottom: 22px !important;
+    font-size: 11px;
+    padding: 0 6px;
+    color: #ffffff;
+    max-width: 60px;
+    @include ellipsis(1);
+    overflow: visible;
+    border-radius: 50%;
+    width: 22px;
+    height: 22px;
+    line-height: 22px;
+    display: inline-flex;
+  }
 }