diff --git a/projects/ucap-webmessenger-app/src/assets/scss/global/_common.scss b/projects/ucap-webmessenger-app/src/assets/scss/global/_common.scss
index 561bdc5d..86ea151f 100644
--- a/projects/ucap-webmessenger-app/src/assets/scss/global/_common.scss
+++ b/projects/ucap-webmessenger-app/src/assets/scss/global/_common.scss
@@ -1,10 +1,12 @@
 @charset 'utf-8';
 
 $listH-row3: 90px;
+$listH-row2: 60px;
 $checkbox-size: 16px;
 $presence-size: 10px;
-$thumbnail-msize: 50px !global;
-$bg-list-hover: #efefef !global;
+$thumbnail-msize: 40px;
+$bg-list-hover: #efefef;
+$bg-list-item-msg: #f0f4f6;
 
 @mixin ellipsis($row) {
   overflow: hidden;
@@ -28,9 +30,6 @@ $bg-list-hover: #efefef !global;
 @mixin visible($sh) {
   display: $sh;
 }
-@function position-m($h, $o, $p) {
-  @return ($h - $o - $p) / 2;
-}
 @mixin presence-status($status) {
   @if $status == pcOn {
     background-color: #28ad66;
@@ -42,3 +41,6 @@ $bg-list-hover: #efefef !global;
     background-color: #f0c10a;
   }
 }
+@function position-m($h, $o, $p) {
+  @return ($h - $o - $p) / 2;
+}
diff --git a/projects/ucap-webmessenger-ui-profile/src/lib/components/user-list-item.component.html b/projects/ucap-webmessenger-ui-profile/src/lib/components/user-list-item.component.html
index 897e4c0f..207d53c4 100644
--- a/projects/ucap-webmessenger-ui-profile/src/lib/components/user-list-item.component.html
+++ b/projects/ucap-webmessenger-ui-profile/src/lib/components/user-list-item.component.html
@@ -1,20 +1,29 @@
 <!--체크박스 보여줄때는 <div class="list-item checkbox" matRipple>  클래스에 checkbox만 추가-->
-<div class="list-item checkbox" matRipple>
-  <!--presence-pcOn , presence-pcOut  presence-pcOff , presence-pcOther-->
-  <span class="presence-pcOn" *ngIf="presence">{{ presence.pcStatus }} </span>
-  <div class="item-default">
-    <img
-      class="thumbnail"
-      src="{{ profileImageRoot + userInfo.profileImageFile }}"
-    />
-    <ul class="info">
-      <li class="name">{{ userInfo.name }} {{ userInfo.grade }}</li>
-      <li class="dept">
-        {{ userInfo.deptName }}
-        가나다라마바사아자차카파하가나다라마바사아자차카파하하가나다
-      </li>
-      <li class="record">{{ userInfo.intro }}</li>
-    </ul>
-  </div>
+<div class="list-item" matRipple>
+  <!--pcOn , pcOut  pcOff , pcOther-->
+  <span class="presence pcOn" *ngIf="presence">{{ presence.pcStatus }} </span>
+  <dl class="item-default">
+    <dt>
+      <img
+        class="thumbnail"
+        src="{{ profileImageRoot + userInfo.profileImageFile }}"
+      />
+    </dt>
+    <dd class="info">
+      <div class="detail">
+        <span class="name">
+          <b>{{ userInfo.name }}</b>
+          {{ userInfo.grade }}
+        </span>
+        <span class="dept">
+          {{ userInfo.deptName }}
+          가나다라마바사아자차카파하가나다라마바사아자차카파하하가나다
+        </span>
+      </div>
+      <div class="msg-status">
+        {{ userInfo.intro }}상태메시지 상태메시지 상태메시지
+      </div>
+    </dd>
+  </dl>
   <mat-checkbox *ngIf="checkable"></mat-checkbox>
 </div>
diff --git a/projects/ucap-webmessenger-ui-profile/src/lib/components/user-list-item.component.scss b/projects/ucap-webmessenger-ui-profile/src/lib/components/user-list-item.component.scss
index c1779501..5ea4f45d 100644
--- a/projects/ucap-webmessenger-ui-profile/src/lib/components/user-list-item.component.scss
+++ b/projects/ucap-webmessenger-ui-profile/src/lib/components/user-list-item.component.scss
@@ -6,21 +6,31 @@
   display: flex;
   align-items: center;
   width: 100%;
-  height: $listH-row3;
+  height: $listH-row2;
   border-bottom: 1px solid #dddddd;
-  padding: 14px;
+  padding: 0 10px;
 }
-
 %presence {
   display: inline-block;
   width: $presence-size;
   height: $presence-size;
-  vertical-align: middle;
-  margin-top: position-m($thumbnail-msize, $presence-size, 0) * -1;
+  //margin-top: position-m($listH-row2, $presence-size, 0);
+  align-items: center;
   text-indent: -10000000px;
-  margin-right: 10px;
+  margin-right: 8px;
   border-radius: 100px;
 }
+%msg-status {
+  display: inline-block;
+  height: 40px;
+  background-color: $bg-list-item-msg;
+  font-size: 11px;
+  padding: 2px 6px;
+  vertical-align: middle;
+  align-items: center;
+  @include ellipsis(20);
+  @include border-radius(4px);
+}
 
 .list-item {
   @extend %list-item;
@@ -28,20 +38,17 @@
     background-color: $bg-list-hover;
   }
   .presence {
-    &-pcOn {
-      @extend %presence;
+    @extend %presence;
+    &.pcOn {
       @include presence-status(pcOn);
     }
-    &-pcOut {
-      @extend %presence;
+    &.pcOut {
       @include presence-status(pcOut);
     }
-    &-pcOff {
-      @extend %presence;
+    &.pcOff {
       @include presence-status(pcOff);
     }
-    &-pcOther {
-      @extend %presence;
+    &.pcOther {
       @include presence-status(pcOther);
     }
   }
@@ -60,39 +67,65 @@
     @include border-radius(100px);
   }
   .info {
+    position: relative;
     display: inline-block;
     margin: 0;
     padding: 0;
-    width: calc(100% - 62px);
-    li {
-      margin-bottom: 4px;
-      @include ellipsis(1);
-      &.name {
-        display: block;
-        font-size: 15px;
-        font-weight: bold;
+    width: calc(100% - 50px);
+    .detail {
+      display: inline-block;
+      float: left;
+      .name {
+        font-size: 14px;
+        margin-bottom: 2px;
+        @include ellipsis(1);
+        b {
+          font-weight: bold;
+        }
+      }
+      .dept {
+        font-size: 12px;
         @include ellipsis(1);
       }
-      &.dept {
-        display: block;
-        font-size: 13px;
-      }
-      &.record {
-        //@include visible(none);
-      }
+    }
+    .msg-status {
+      display: inline-block;
+      float: right;
+      @extend %msg-status;
     }
   }
 }
-
+//가변에 따른 list-item width값 변경
 .list-item {
-  span[class*='presence'] {
+  .item-default {
+    .detail {
+      width: 60%;
+    }
+    .msg-status {
+      width: 38%;
+    }
+  }
+  .presence {
     + .item-default {
       width: calc(100% - 20px);
     }
   }
   &.checkbox {
+    .presence {
+      + .item-default {
+        width: calc(100% - 50px);
+      }
+    }
     .item-default {
       width: calc(100% - 30px);
+      .info {
+        .detail {
+          width: 100%;
+        }
+        .msg-status {
+          @include visible(none);
+        }
+      }
     }
   }
 }