diff --git a/projects/ucap-webmessenger-app/src/app/app.theme.scss b/projects/ucap-webmessenger-app/src/app/app.theme.scss
index 10a5496a..0301d4f8 100644
--- a/projects/ucap-webmessenger-app/src/app/app.theme.scss
+++ b/projects/ucap-webmessenger-app/src/app/app.theme.scss
@@ -5,7 +5,8 @@
 // Angular Material typography
 // $input: mat-typography-level(16px, 1.125, 400) // line-height must be unitless !!!
 $typography: mat-typography-config(
-  $font-family: 'Muli, Helvetica Neue, Arial, sans-serif',
+  $font-family:
+    '나눔고딕, Malgun Gothic, 맑은고딕, Arial, Muli, Helvetica Neue, Arial, sans-serif',
   $title: mat-typography-level(20px, 32px, 600),
   $body-2: mat-typography-level(14px, 24px, 600),
   $button: mat-typography-level(14px, 14px, 600),
@@ -95,3 +96,29 @@ body.theme-pink-dark {
   // Apply the theme to the user components
   @include components-theme($pink-dark-theme);
 }
+
+// -----------------------------------------------------------------------------------------------------
+// @ Define a pink light theme --LG RED 변경 예정(샘플링)
+// -----------------------------------------------------------------------------------------------------
+
+// Define the primary, accent and warn palettes
+$pink-light-theme-primary-palette: mat-palette($lg-red);
+$pink-light-theme-accent-palette: mat-palette($mat-pink);
+$pink-light-theme-warn-palette: mat-palette($mat-red);
+
+// Create the Material theme object
+$pink-light-theme: mat-light-theme(
+  $pink-light-theme-primary-palette,
+  $pink-light-theme-accent-palette,
+  $pink-light-theme-warn-palette
+);
+
+// Add ".theme-pink-dark" class to the body to activate this theme.
+// Class name must start with "theme-" !!!
+body.theme-pink-light {
+  // Generate the Angular Material theme
+  @include angular-material-theme($pink-light-theme);
+
+  // Apply the theme to the user components
+  @include components-theme($pink-light-theme);
+}
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.html
index 79460a4a..0b828c20 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.html
@@ -1,11 +1,12 @@
 <div class="container">
-  <div>
+  <!--<div>
     LG ucap
     <button mat-icon-button aria-label="New Chat" (click)="onClickNewChat()">
       <mat-icon>chat</mat-icon>
     </button>
-  </div>
-  <mat-tab-group mat-stretch-tabs animationDuration="0ms">
+  </div>-->
+  <div class="logo">로고</div>
+  <mat-tab-group mat-stretch-tabs animationDuration="0ms" class="global-menu">
     <mat-tab>
       <ng-template mat-tab-label>
         <mat-icon>group</mat-icon>
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.scss
index 11d2743e..cb331639 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.scss
@@ -6,12 +6,43 @@
 ::ng-deep .mat-tab-body-wrapper,
 ::ng-deep .mat-tab-body {
   height: 100%;
+  width:100%;
+}
+.logo{
+  position: absolute;
+  top:0;
+  left:0;
+  height:60px;
+  width:70px;
 }
-
 .container {
+  display: flex;
   height: 100%;
-
-  mat-tab-group {
-    height: 100%;
-  }
 }
+
+.mat-tab-group {
+    display: flex;
+    width:100%;
+    flex-direction: row;
+}
+
+::ng-deep .global-menu{
+  border-right:1px solid #dddddd;
+  .mat-tab-label-container{
+    border-right:1px solid #dddddd;
+    .mat-tab-list{
+      .mat-tab-labels{
+        padding-top:60px;
+        flex-flow: column;
+        height: 60%;
+        .mat-tab-label{
+          height:80px;
+        }
+      }
+      .mat-ink-bar{
+        background-color:none;
+        height:0;
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.html
index 1f727051..8a346140 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.html
@@ -1,17 +1,22 @@
 <div>
   <div>
+    <div class="current-head">
+      <h3>그룹</h3>
+      <div class="btn-box">
+        <button mat-icon-button >
+          <mat-icon>person_add</mat-icon>
+        </button>
+        <button mat-icon-button [matMenuTriggerFor]="groupMenu" aria-label="group menu">
+          <mat-icon>more_vert</mat-icon>
+        </button>
+      </div>
+    </div>
     <ucap-organization-tenant-search
       [companyList]="companyList$ | async"
       [companyCode]="companyCode"
       (keyDownEnter)="onKeyDownEnterOrganizationTenantSearch($event)"
     ></ucap-organization-tenant-search>
-    <button
-      mat-icon-button
-      [matMenuTriggerFor]="groupMenu"
-      aria-label="group menu"
-    >
-      <mat-icon>more_vert</mat-icon>
-    </button>
+
     <mat-menu
       #groupMenu="matMenu"
       xPosition="after"
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.scss
index e69de29b..bbf3f2f7 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.scss
@@ -0,0 +1,21 @@
+.current-head{
+  display:flex;
+  justify-content: center;
+  padding:0 10px;
+  height:60px;
+  h3{
+    display:inline-flex;
+    padding-left:10px;
+    align-items: center;
+  }
+  .btn-box{
+    height: 100%;
+    margin-left:auto;
+    display:inline-flex;
+    align-items: center;
+    .mat-icon-button{
+
+    }
+  }
+
+}
\ No newline at end of file
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.html
index 29245154..a56a1a1c 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.html
@@ -1,20 +1,20 @@
 <div class="oraganization-tab" fxLayout="column" *ngIf="departmentInfoList$ | async">
-  <div class="oraganization-tab-tree" fxFlex="50" style="overflow: scroll">
+  <div class="oraganization-tab-tree" fxFlex="40" style="overflow: scroll">
     <ucap-organization-tree [oraganizationList]="departmentInfoList$ | async"
       (selected)="onSelectedOrganization($event)"></ucap-organization-tree>
   </div>
-  <div fxFlex="50" style="overflow: scroll">
-    <div>
+  <div fxFlex="60" >
+    <div class="select-dept">
       (선택된부서명)
     </div>
-    <div>
+    <div class="select-list" >
       <ucap-profile-user-list-item *ngFor="let userInfo of selectedDepartmentUserInfoList$ | async"
         [userInfo]="userInfo" [checkable]="true" [sessionVerinfo]="sessionVerinfo" [selectedUserList]="selectedUserList"
         [isChecked]="getCheckedUser(userInfo)" (checkUser)="onCheckUser($event)">
       </ucap-profile-user-list-item>
     </div>
-    <div *ngIf="!isUserSelect">
-      (하단버튼영역)
-    </div>
+  </div>
+  <div *ngIf="!isUserSelect" class="btn-box">
+    (하단버튼영역)
   </div>
 </div>
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.scss
index 4928b943..1558c8ce 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.scss
@@ -2,6 +2,28 @@
   height: 100%;
 
   .oraganization-tab-tree {
-    overflow: scroll;
+    overflow-y: auto;
   }
 }
+.btn-box{
+  height:80px;
+  position: absolute;
+  bottom:0;
+  border-top:1px solid #ddd;
+  align-items: center;
+  width:100%;
+  background-color:#ffffff;
+}
+.select-dept{
+  border-top:1px solid #dddddd;
+  height:40px;
+  width:100%;
+  display:inline-flex;
+  align-items: center;
+  padding:0 10px;
+}
+.select-list{
+    height: calc(100% - 120px);
+    overflow: auto;
+}
+
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html
index 0329993b..1cf4897c 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html
@@ -2,8 +2,8 @@
 <div class="container" fxFlex fxLayout="column">
   <!-- CHAT TOOLBAR -->
   <mat-toolbar class="chat-toolbar">
-    <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
-      <div fxLayout="row" fxLayoutAlign="start center">
+    <div fxFlex fxLayout="row" class="chat-header" >
+      <div fxLayout="row" fxLayoutAlign="start center" class="profile-img">
         <!-- RESPONSIVE CHATS BUTTON-->
         <button
           mat-icon-button
@@ -15,8 +15,10 @@
         </button>
         <!-- / RESPONSIVE CHATS BUTTON-->
       </div>
-
-      <div>
+      <div class="room-name">
+        대화방명대화방명대화방명대화방명대화방명대화방명대화방명대화방명대화방명대화방명대화방명대화방명대화방명대화방명대화방명대화방명대화방명대화방명대화방명대화방명
+      </div>
+      <div class="room-option">
         <button
           *ngIf="!!roomInfo"
           mat-icon-button
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.scss
index 3535cee6..88e6ad83 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.scss
@@ -1,3 +1,5 @@
+@charset 'utf-8';
+@import '../../../../assets/scss/global/common';
 :host {
   display: flex;
   width: 100%;
@@ -9,12 +11,32 @@
     height: 100%;
 
     .chat-toolbar {
-      height: 49px;
-      min-height: 49px;
-      border-bottom: 1px solid;
-
-      .responsive-chats-button {
-        padding: 0;
+      height: 70px;
+      min-height: 70px;
+      border-bottom: $line-basic;
+      background-color:#ffffff;
+      .chat-header{
+        width:100%;
+        .responsive-chats-button {
+          padding: 0;
+          width: 40px;
+          height: 40px;
+          border-radius: 50%;
+          background-color: #252525;
+          color: #efefef;
+          font-size: 16px;
+          font-weight: 100;
+          line-height: 40px;
+        }
+        .room-name{
+          font-size:16px;
+          padding:0 10px;
+          @include ellipsis(1)
+        }
+        .room-option{
+          width:100px;
+          margin-left:auto;
+        }
       }
     }
 
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-side.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-side.component.html
index f03f6945..7a015a6d 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-side.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-side.component.html
@@ -1 +1,7 @@
-dd
+  <div  fxLayout="row-reverse" class="right">
+    <div class="slide-menu" >
+    </div>
+  <div  class="slide-box">
+    slide dashboard
+  </div>
+</div>
\ No newline at end of file
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-side.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-side.component.scss
index e69de29b..82c2b835 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-side.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-side.component.scss
@@ -0,0 +1,16 @@
+$right-color:#565e6b;
+.right{
+  height:100%;
+  flex-direction: row-reverse;
+  border-left:1px solid #dddddd;
+  .slide-menu{
+    width:70px;
+    height:100%;
+    display:inline-flex;
+    background-color:$right-color;
+  }
+  .slide-box{
+    display:inline-flex;
+    height:100%;
+  }
+}
diff --git a/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.scss b/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.scss
index 55e75745..4f7e98ab 100644
--- a/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.scss
@@ -1,14 +1,16 @@
 .container {
   height: 100%;
+  display:flex;
+  flex-flow: row;
 
   .left-side {
-    float: left;
-    width: 300px;
+    width: 380px;
     height: 100%;
+    flex: 0 0 auto;
   }
   .contents {
-    float: left;
-    width: calc(100% - 360px);
+    flex:1 1 auto;
+    min-width:400px;
     height: 100%;
 
     .messages {
@@ -17,8 +19,7 @@
     }
   }
   .right-side {
-    float: left;
-    width: 60px;
     height: 100%;
+    flex: 0 0 auto;
   }
 }
diff --git a/projects/ucap-webmessenger-app/src/app/pages/template/components/template.page.component.html b/projects/ucap-webmessenger-app/src/app/pages/template/components/template.page.component.html
index e96fec39..49762f34 100644
--- a/projects/ucap-webmessenger-app/src/app/pages/template/components/template.page.component.html
+++ b/projects/ucap-webmessenger-app/src/app/pages/template/components/template.page.component.html
@@ -1,17 +1,34 @@
 <div class="template" fxLayout="column">
-  <button mat-raised-button color="accent" class="submit-button" aria-label="Login" (click)="onClickLogin()">
+  <button
+    mat-raised-button
+    color="accent"
+    class="submit-button"
+    aria-label="Login"
+    (click)="onClickLogin()"
+  >
     Login
   </button>
 
   <h3>User-list-item</h3>
   <div>
-    <ucap-profile-user-list-item [userInfo]="userInfo" [profileImageRoot]="profileImageRoot" [presence]="presence"
-      [sessionVerinfo]="sessionVerinfo">
+    <ucap-profile-user-list-item
+      [userInfo]="userInfo"
+      [profileImageRoot]="profileImageRoot"
+      [presence]="presence"
+      [sessionVerinfo]="sessionVerinfo"
+    >
     </ucap-profile-user-list-item>
-    <ucap-profile-user-list-item [userInfo]="userInfo" [sessionVerinfo]="sessionVerinfo">
+    <ucap-profile-user-list-item
+      [userInfo]="userInfo"
+      [sessionVerinfo]="sessionVerinfo"
+    >
     </ucap-profile-user-list-item>
-    <ucap-profile-user-list-item [userInfo]="userInfo" [profileImageRoot]="profileImageRoot" [checkable]="true"
-      [sessionVerinfo]="sessionVerinfo">
+    <ucap-profile-user-list-item
+      [userInfo]="userInfo"
+      [profileImageRoot]="profileImageRoot"
+      [checkable]="true"
+      [sessionVerinfo]="sessionVerinfo"
+    >
     </ucap-profile-user-list-item>
   </div>
   <h3>Organization</h3>
@@ -21,14 +38,20 @@
         Tenant Search
       </div>
       <div>
-        <ucap-organization-tenant-search [companyList]="companyList" [companyCode]="companyCode">
+        <ucap-organization-tenant-search
+          [companyList]="companyList"
+          [companyCode]="companyCode"
+        >
         </ucap-organization-tenant-search>
       </div>
     </div>
   </div>
   <h3>Chat</h3>
   <div>
-    <ucap-room-list-item [roomInfo]="roomInfo" [sessionVerinfo]="sessionVerinfo">
+    <ucap-room-list-item
+      [roomInfo]="roomInfo"
+      [sessionVerinfo]="sessionVerinfo"
+    >
     </ucap-room-list-item>
   </div>
   <!-- <h3>Chat::MessageBox</h3>
diff --git a/projects/ucap-webmessenger-app/src/assets/images/file/icon_talk_doc.png b/projects/ucap-webmessenger-app/src/assets/images/file/icon_talk_doc.png
new file mode 100644
index 00000000..7b70afa9
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/images/file/icon_talk_doc.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/images/file/icon_talk_doc_d.png b/projects/ucap-webmessenger-app/src/assets/images/file/icon_talk_doc_d.png
new file mode 100644
index 00000000..2742ccf0
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/images/file/icon_talk_doc_d.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/images/file/icon_talk_exe.png b/projects/ucap-webmessenger-app/src/assets/images/file/icon_talk_exe.png
new file mode 100644
index 00000000..d60f8617
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/images/file/icon_talk_exe.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/images/file/icon_talk_exe_d.png b/projects/ucap-webmessenger-app/src/assets/images/file/icon_talk_exe_d.png
new file mode 100644
index 00000000..218da211
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/images/file/icon_talk_exe_d.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/images/file/icon_talk_file.png b/projects/ucap-webmessenger-app/src/assets/images/file/icon_talk_file.png
new file mode 100644
index 00000000..72cecf67
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/images/file/icon_talk_file.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/images/file/icon_talk_file_d.png b/projects/ucap-webmessenger-app/src/assets/images/file/icon_talk_file_d.png
new file mode 100644
index 00000000..d11676a4
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/images/file/icon_talk_file_d.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/images/file/icon_talk_hwp.png b/projects/ucap-webmessenger-app/src/assets/images/file/icon_talk_hwp.png
new file mode 100644
index 00000000..0fb4dfd5
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/images/file/icon_talk_hwp.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/images/file/icon_talk_hwp_d.png b/projects/ucap-webmessenger-app/src/assets/images/file/icon_talk_hwp_d.png
new file mode 100644
index 00000000..ef7effd9
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/images/file/icon_talk_hwp_d.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/images/file/icon_talk_img.png b/projects/ucap-webmessenger-app/src/assets/images/file/icon_talk_img.png
new file mode 100644
index 00000000..f36fd8a3
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/images/file/icon_talk_img.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/images/file/icon_talk_img_d.png b/projects/ucap-webmessenger-app/src/assets/images/file/icon_talk_img_d.png
new file mode 100644
index 00000000..8dc5eefc
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/images/file/icon_talk_img_d.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/images/file/icon_talk_ppt.png b/projects/ucap-webmessenger-app/src/assets/images/file/icon_talk_ppt.png
new file mode 100644
index 00000000..9e7659ff
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/images/file/icon_talk_ppt.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/images/file/icon_talk_ppt_d.png b/projects/ucap-webmessenger-app/src/assets/images/file/icon_talk_ppt_d.png
new file mode 100644
index 00000000..1a9b34c5
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/images/file/icon_talk_ppt_d.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/images/file/icon_talk_video.png b/projects/ucap-webmessenger-app/src/assets/images/file/icon_talk_video.png
new file mode 100644
index 00000000..d78a4857
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/images/file/icon_talk_video.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/images/file/icon_talk_video_d.png b/projects/ucap-webmessenger-app/src/assets/images/file/icon_talk_video_d.png
new file mode 100644
index 00000000..8598815d
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/images/file/icon_talk_video_d.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/images/file/icon_talk_xls.png b/projects/ucap-webmessenger-app/src/assets/images/file/icon_talk_xls.png
new file mode 100644
index 00000000..dca1bae0
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/images/file/icon_talk_xls.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/images/file/icon_talk_xls_d.png b/projects/ucap-webmessenger-app/src/assets/images/file/icon_talk_xls_d.png
new file mode 100644
index 00000000..5b5d734c
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/images/file/icon_talk_xls_d.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/images/file/icon_talk_zip.png b/projects/ucap-webmessenger-app/src/assets/images/file/icon_talk_zip.png
new file mode 100644
index 00000000..bd0ebcf0
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/images/file/icon_talk_zip.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/images/file/icon_talk_zip_d.png b/projects/ucap-webmessenger-app/src/assets/images/file/icon_talk_zip_d.png
new file mode 100644
index 00000000..2e510670
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/images/file/icon_talk_zip_d.png differ
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 86ea151f..52db36f0 100644
--- a/projects/ucap-webmessenger-app/src/assets/scss/global/_common.scss
+++ b/projects/ucap-webmessenger-app/src/assets/scss/global/_common.scss
@@ -1,13 +1,22 @@
 @charset 'utf-8';
 
-$listH-row3: 90px;
-$listH-row2: 60px;
+$listH-row3: 120px;
+$listH-row2: 90px;
+$listH-row2-s: 70px;
 $checkbox-size: 16px;
-$presence-size: 10px;
+$presence-size: 8px;
 $thumbnail-msize: 40px;
 $bg-list-hover: #efefef;
 $bg-list-item-msg: #f0f4f6;
 
+$font-dark: #212121;
+$font-mid: #666666;
+$font-light: #848d95;
+$font-white: #ffffff;
+
+$line-basic: 1px solid #dddddd;
+$color-main: #ee278b;
+
 @mixin ellipsis($row) {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -41,6 +50,3 @@ $bg-list-item-msg: #f0f4f6;
     background-color: #f0c10a;
   }
 }
-@function position-m($h, $o, $p) {
-  @return ($h - $o - $p) / 2;
-}
diff --git a/projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss b/projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss
index 2331f4ec..22f1ca11 100644
--- a/projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss
+++ b/projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss
@@ -13,7 +13,7 @@ body {
   color: #333;
   font-family: '나눔고딕', Malgun Gothic, '맑은고딕', Arial, Dotum, '돋움',
     Gulim, '굴림';
-  font-size: 12px;
+  font-size: 13px;
   line-height: 18px !important;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/form.component.html b/projects/ucap-webmessenger-ui-chat/src/lib/components/form.component.html
index dbac7cb7..4cf8a445 100644
--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/form.component.html
+++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/form.component.html
@@ -4,6 +4,18 @@
   fxLayout="row"
   fxLayoutAlign="center center"
 >
+  <div class="add-option">
+    <i class="material-icons">
+      attach_file
+    </i>
+    <i class="material-icons">
+      sentiment_satisfied_alt
+    </i>
+    <i class="material-icons">
+      g_translate
+    </i>
+  </div>
+
   <form
     #replyForm="ngForm"
     (ngSubmit)="onSend($event)"
@@ -35,7 +47,9 @@
       type="submit"
       aria-label="Send message"
     >
-      Send
+      <i class="material-icons">
+        send
+      </i>
     </button>
   </form>
 </div>
diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/form.component.scss b/projects/ucap-webmessenger-ui-chat/src/lib/components/form.component.scss
index fd5f79e4..a5a1f288 100644
--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/form.component.scss
+++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/form.component.scss
@@ -1,6 +1,44 @@
 .container {
   display: flex;
+  flex-direction: column;
   width: 100%;
   height: 100%;
   flex: 1;
+  padding: 20px 30px;
+  .add-option {
+    display: inline-flex;
+    margin-right: 20px;
+    i {
+      font-size: 20px;
+      color: #666;
+      width:30px;
+      height:30px;
+      text-align: center;
+      line-height: 30px;
+      &:hover {
+      color: #333333;
+      background-color: #efefef;
+      border-radius: 50%;
+      }
+    }
+  }
+}
+.mat-form-field-underline{
+  background-color:none;
+}
+.send-message-button {
+  margin-left: 20px;
+  i {
+    background-color: #ff3399;
+    display: inline-block;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    line-height:40px;
+    font-size: 20px;
+    color: #ffffff;
+    &:hover{
+      background-color: #333333;
+    }
+  }
 }
diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/attach-file.component.html b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/attach-file.component.html
index ea9f4073..09906b5f 100644
--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/attach-file.component.html
+++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/attach-file.component.html
@@ -1,15 +1,19 @@
-<ul>
-  <li>
-    {{ fileInfo.FileName }}
-  </li>
-  <li>
-    {{ fileInfo.AttSize }}
-  </li>
-  <li>
-    {{ fileInfo.FileExt }}
-  </li>
-</ul>
-<span *ngIf="fileInfo && fileInfo.AttSEQ">
+<div class="bubble-main">
+  <!--파일명에 따라 doc exe hwp ppt xls zip 으로 추가되고 나머지 파일 명은 file로 기간이 만료된 파일은 그뒤에 disable도 추가-->
+  <div class="file-img ppt"></div>
+  <ul class="file-info">
+    <li class="file-name">
+      {{ fileInfo.FileName }}
+    </li>
+    <li class="file-size">
+      {{ fileInfo.AttSize }}
+    </li>
+    <li class="file-ext">
+      {{ fileInfo.FileExt }}
+    </li>
+  </ul>
+</div>
+<div *ngIf="fileInfo && fileInfo.AttSEQ" class="btn-box">
   <ul>
     <li>
       <button mat-button (click)="onClickSave()">Save</button>
@@ -18,4 +22,4 @@
       <button mat-button (click)="onClickSaveAs()">Save As</button>
     </li>
   </ul>
-</span>
+</div>
diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/attach-file.component.scss b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/attach-file.component.scss
index e69de29b..c58c3d75 100644
--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/attach-file.component.scss
+++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/attach-file.component.scss
@@ -0,0 +1,103 @@
+@charset "UTF-8"
+.bubble-main {
+  display: flex;
+  flex-direction: row;
+  padding: 14px;
+  .file-img {
+    display: inline-flex;
+    width: 50px;
+    height: 50px;
+    float: left;
+    margin-right: 14px;
+    background-repeat: no-repeat;
+    &.doc {
+      background-image: url(/assets/images/file/icon_talk_doc.png);
+      &.disable{
+        background-image: url(/assets/images/file/icon_talk_doc_d.png);
+      }
+    }
+    &.exe {
+      background-image: url(/assets/images/file/icon_talk_exe.png);
+       &.disable{
+        background-image: url(/assets/images/file/icon_talk_exe_d.png);
+      }
+    }
+    &.file {
+      background-image: url(/assets/images/file/icon_talk_file.png);
+       &.disable{
+        background-image: url(/assets/images/file/icon_talk_file_d.png);
+      }
+    }
+    &.hwp {
+      background-image: url(/assets/images/file/icon_talk_hwp.png);
+       &.disable{
+        background-image: url(/assets/images/file/icon_talk_hwp_d.png);
+      }
+    }
+    &.ppt {
+      background-image: url(/assets/images/file/icon_talk_ppt.png);
+       &.disable{
+        background-image: url(/assets/images/file/icon_talk_ppt_d.png);
+      }
+    }
+    &.xls {
+      background-image: url(/assets/images/file/icon_talk_xls.png);
+       &.disable{
+        background-image: url(/assets/images/file/icon_talk_xls_d.png);
+      }
+    }
+    &.zip {
+      background-image: url(/assets/images/file/icon_talk_zip.png);
+       &.disable{
+        background-image: url(/assets/images/file/icon_talk_doc_d.png);
+      }
+    }
+  }
+  .file-info {
+    display: inline-flex;
+    flex-direction: column;
+    text-align: left;
+    float: left;
+    line-height: 1.6em;
+    .file-name {
+      font-size: 14px;
+      font-weight: bold;
+      display: inline-flex;
+    }
+    .file-size {
+      display: inline-flex;
+      font-size: 11px;
+      color: #666666;
+    }
+    .file-ext {
+      font-size: 12px;
+      color: #848d95;
+    }
+  }
+}
+.btn-box {
+  width: 100%;
+  height: 40px;
+  border-top: 1px solid #dddddd;
+  display: flex;
+  width: 100%;
+  text-align: center;
+  ul {
+    width: 100%;
+    li {
+      width: 50%;
+      display: inline-block;
+      text-align: center;
+      align-items: center;
+      font-size: 13px;
+      border-right:1px solid #dddddd;
+      &:last-child{
+        border-right:none;
+      }
+      .mat-button {
+        width: 100%;
+        display: block;
+      }
+    }
+  }
+}
diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/date-splitter.component.html b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/date-splitter.component.html
index 3ed87fe9..78be71cf 100644
--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/date-splitter.component.html
+++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/date-splitter.component.html
@@ -1,4 +1,6 @@
-<p>
+<div class="date-split">
+  <span class="line"></span>
   <!-- {{ message.sendDate | date: 'short' }} -->
-  {{ dateInfo }}
-</p>
+  <span class="date">{{ dateInfo }}2019.10.3</span>
+  <span class="line"></span>
+</div>
diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/date-splitter.component.scss b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/date-splitter.component.scss
index e69de29b..c28fd375 100644
--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/date-splitter.component.scss
+++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/date-splitter.component.scss
@@ -0,0 +1,19 @@
+@charset 'utf-8';
+.date-split {
+  display: flex;
+  align-content: center;
+  flex-flow: row;
+  .line {
+    height: 1px;
+    background-color: #cccccc;
+    width:40%;
+    flex:1 1 auto;
+    margin-bottom:10px;
+  }
+  .date {
+    width: 160px;
+    font-size: 13px;
+    text-align: center;
+    font-weight: 500;
+  }
+}
diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/image.component.html b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/image.component.html
index 84e0b42a..52d3f8db 100644
--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/image.component.html
+++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/image.component.html
@@ -1 +1,3 @@
-<img [src]="fileInfo.ThumbURL">
+<div  class="bubble-main">
+  <img [src]="fileInfo.ThumbURL">
+</div>
diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/image.component.scss b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/image.component.scss
index e69de29b..98793e11 100644
--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/image.component.scss
+++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/image.component.scss
@@ -0,0 +1,3 @@
+.bubble-main{
+  padding:10px;
+}
\ No newline at end of file
diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/mass.component.html b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/mass.component.html
index 2608e1df..cc60a60c 100644
--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/mass.component.html
+++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/mass.component.html
@@ -1,12 +1,12 @@
-<p>
+<div class="bubble-main">
   <span>
     {{ content }}
   </span>
   <span>
     {{ message.sendDate | date: 'short' }}
   </span>
+</div>
   {{detailButteonShow}}
-  <span *ngIf="detailButteonShow">
+<div *ngIf="detailButteonShow" class="btn-box">
     <button mat-button (click)="onClickDetailView()">Detail View</button>
-  </span>
-</p>
+</div>
diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/mass.component.scss b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/mass.component.scss
index e69de29b..819f34a7 100644
--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/mass.component.scss
+++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/mass.component.scss
@@ -0,0 +1,13 @@
+@charset "UTF-8"
+.bubble-main {
+  padding: 14px;
+  text-align: left;
+}
+.btn-box {
+  border-top: 1px solid #dddddd;
+  height: 40px;
+  .mat-button {
+    width: 100%;
+    display: block;
+  }
+}
diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/schedule.component.html b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/schedule.component.html
index e69de29b..6b7198a5 100644
--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/schedule.component.html
+++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/schedule.component.html
@@ -0,0 +1,18 @@
+<div class="event-main">
+  <div class="event-header">이벤트제목</div>
+  <ul class="event-info">
+    <li class="event-title">
+      이벤트 타일틀이벤트 타일틀이벤트 타일틀이벤트 타일틀이벤트 타일틀이벤트 타일틀이벤트 타일틀이벤트 타일틀이벤트 타일틀이벤트 타일틀이벤트 타일틀이벤트 타일틀
+    </li>
+    <li class="event-date">
+      <span>날짜</span> 2019.09.30
+    </li>
+    <li class="event-time">
+      <span>시간</span>오후 10시
+    </li>
+  </ul>
+
+  <div class="btn-box">
+    <button mat-button (click)="onClickSave()">상세보기</button>
+  </div>
+</div>
\ No newline at end of file
diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/schedule.component.scss b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/schedule.component.scss
index e69de29b..926d6e82 100644
--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/schedule.component.scss
+++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/schedule.component.scss
@@ -0,0 +1,43 @@
+@charset "UTF-8"
+.event-main {
+  flex-direction: column;
+  text-align: left;
+  .event-header {
+    padding: 10px;
+    background-color: #efefef;
+    text-align: center;
+    font-size: 14px;
+    font-weight: 600;
+  }
+  .event-info {
+    padding: 10px 14px;
+    line-height: 1.6em;
+    li {
+      margin-bottom: 4px;
+      &.event-title {
+        border-bottom: 1px solid #dddddd;
+        margin-bottom: 10px;
+        padding-bottom: 10px;
+        font-size: 14px;
+      }
+      &.event-date,
+      &.event-time {
+        color: #666666;
+      }
+      span {
+        padding: 2px 6px;
+        background-color: #efefef;
+        margin-right: 10px;
+      }
+    }
+  }
+
+  .btn-box {
+    border-top: 1px solid #dddddd;
+    height: 40px;
+    .mat-button {
+      width: 100%;
+      display: block;
+    }
+  }
+}
diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/sticker.component.html b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/sticker.component.html
index d15340e0..b54fe95d 100644
--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/sticker.component.html
+++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/sticker.component.html
@@ -1,3 +1,4 @@
+<div class="bubble-main">
 <ul>
   <li *ngIf="stickerUrl">
     <img [src]="stickerUrl" onerror="this.src='assets/sticker/sticker_default.png'">
@@ -6,3 +7,4 @@
     {{ contentJson.chat }}
   </li>
 </ul>
+</div>
diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/sticker.component.scss b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/sticker.component.scss
index e69de29b..bf8e28e1 100644
--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/sticker.component.scss
+++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/sticker.component.scss
@@ -0,0 +1,6 @@
+.bubble-main{
+  padding:14px;
+  li:nth-child(2){
+    margin-top:10px;
+  }
+}
\ No newline at end of file
diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/text.component.html b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/text.component.html
index a3063aa5..673d2493 100644
--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/text.component.html
+++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/text.component.html
@@ -1,5 +1,7 @@
-<p>
+<div class="bubble-main">
   <span>
     {{ message.sentMessage }}
   </span>
-</p>
+</div>
+
+
diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/text.component.scss b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/text.component.scss
index e69de29b..0980d504 100644
--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/text.component.scss
+++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/text.component.scss
@@ -0,0 +1,4 @@
+.bubble-main {
+  padding: 14px;
+  text-align:left;
+}
\ No newline at end of file
diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/translation.component.html b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/translation.component.html
index e69de29b..adc408b9 100644
--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/translation.component.html
+++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/translation.component.html
@@ -0,0 +1,20 @@
+<div class="translation-main">
+  <div class="original">
+    {{ message.sentMessage }}
+  </div>
+  <div class="translation">
+    <span class="language">Kor</span>
+    녕하세요 장문장문 롱텍스트안녕하세요 장문장문 롱텍스트안녕하세요 장문장문 롱텍스트안녕하세요 장문장문 롱텍스트안녕하세요 장문장문 롱텍스트안녕하세요 장문장문 롱텍스트안녕하세요 장문장문 롱텍스트안녕하세요 장문장문
+    롱텍스트안녕하세요 장문장문 롱텍스트안녕하세요 장문장문 롱텍스트안녕하세요 장문장문 롱텍스트안녕하세요 장문장문 롱텍스트안녕하세요 장문장문 롱텍스트안녕하세요 장문장문 롱텍스트안녕하세요 장문장문 롱텍스트
+  </div>
+  <div class="btn-box">
+    <ul>
+      <li>
+        <button mat-button>Save</button>
+      </li>
+      <li>
+        <button mat-button><span class="language">Kor</span>번역보기</button>
+      </li>
+    </ul>
+  </div>
+</div>
\ No newline at end of file
diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/translation.component.scss b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/translation.component.scss
index e69de29b..039ae60d 100644
--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/translation.component.scss
+++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/translation.component.scss
@@ -0,0 +1,46 @@
+@charset "UTF-8"
+.translation-main {
+  text-align: left;
+  .original {
+    padding: 14px;
+  }
+  .translation {
+    padding: 10px;
+    border-top: 1px solid #dddddd;
+  }
+}
+.language {
+  padding: 2px 6px;
+  background-color: #222222;
+  margin-right: 6px;
+  border-radius: 2px;
+  font-size: 11px;
+  color: #fff;
+  margin-right: 10px;
+}
+.btn-box {
+  width: 100%;
+  height: 40px;
+  border-top: 1px solid #dddddd;
+  display: flex;
+  width: 100%;
+  text-align: center;
+  ul {
+    width: 100%;
+    li {
+      width: 50%;
+      display: inline-block;
+      text-align: center;
+      align-items: center;
+      font-size: 13px;
+      border-right: 1px solid #dddddd;
+      &:last-child {
+        border-right: none;
+      }
+      .mat-button {
+        width: 100%;
+        display: block;
+      }
+    }
+  }
+}
diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/video.component.html b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/video.component.html
index ea35f990..911ce46e 100644
--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/video.component.html
+++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/video.component.html
@@ -1,11 +1,24 @@
-<ul>
-  <li>
-    {{ fileInfo.FileName }}
-  </li>
-  <li>
-    {{ fileInfo.AttSize }}
-  </li>
-  <li>
-    {{ fileInfo.FileExt }}
-  </li>
-</ul>
+<div class="bubble-main">
+  <div class="file-img video"></div>
+  <ul class="file-info">
+    <li class="file-name">
+      {{ fileInfo.FileName }}
+    </li>
+    <li class="file-size">
+      {{ fileInfo.AttSize }}
+    </li>
+    <li class="file-ext">
+      {{ fileInfo.FileExt }}
+    </li>
+  </ul>
+</div>
+<span  class="btn-box">
+  <ul>
+    <li>
+      <button mat-button >Save</button>
+    </li>
+    <li>
+      <button mat-button >Save As</button>
+    </li>
+  </ul>
+</span>
diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/video.component.scss b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/video.component.scss
index e69de29b..c3f104fb 100644
--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/video.component.scss
+++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/video.component.scss
@@ -0,0 +1,62 @@
+@charset "UTF-8"
+.bubble-main{
+  flex-direction: column;
+  padding:14px;
+  .file-img {
+    display: inline-flex;
+    width: 50px;
+    height: 50px;
+    float: left;
+    margin-right: 14px;
+    background-repeat: no-repeat;
+    &.video {
+      background-image: url(/assets/images/file/icon_talk_video.png);
+      &.disable{
+        background-image: url(/assets/images/file/icon_talk_video_d.png);
+      }
+    }
+  }
+  .file-info{
+    display:inline-flex;
+     flex-direction: column;
+     text-align: left;
+     line-height:1.6em;
+    .file-name{
+      font-size:14px;
+      font-weight:bold;
+      display:inline-flex
+    }
+    .file-size{
+      display:inline-flex;
+      font-size:11px;
+      color:#666666;
+    }
+    .file-ext{
+      font-size:12px;
+    }
+  }
+}
+.btn-box{
+  width:100%;
+  height:40px;
+  border-top:1px solid #dddddd;
+  display:flex;
+  ul{
+    width:100%;
+    li{
+      width:50%;
+      display:inline-block;
+      text-align:center;
+      align-items: center;
+      font-size:13px;
+       border-right:1px solid #dddddd;
+      &:last-child{
+        border-right:none;
+      }
+      .mat-button {
+        width: 100%;
+        display: block;
+      }
+    }
+  }
+}
\ No newline at end of file
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 1d22fb6b..44021797 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
@@ -1,5 +1,8 @@
 <div class="chat-messages">
   <!-- MESSAGE -->
+  <ucap-chat-message-box-date-splitter *ngIf="getDateSplitter(i)" [message]="message">
+  </ucap-chat-message-box-date-splitter>
+
   <div
     *ngFor="let message of messages; let i = index"
     class="message-row"
@@ -8,11 +11,6 @@
       contact: message.senderSeq !== loginRes.userSeq
     }"
   >
-    <ucap-chat-message-box-date-splitter
-      *ngIf="getDateSplitter(i)"
-      [message]="message"
-    >
-    </ucap-chat-message-box-date-splitter>
 
     <div
       *ngIf="getIsInformation(message); then information; else contents"
@@ -47,9 +45,7 @@
       </ng-container>
     </ng-template>
     <ng-template #contents>
-      <div>
-        <ul>
-          <li *ngIf="getUserProfile(message.senderSeq) != ''">
+      <div *ngIf="getUserProfile(message.senderSeq) != ''" class="profile-img">
             <!-- <img
               class="avatar"
               style="width: 50px; height: 50px;"
@@ -70,61 +66,64 @@
               [path]="getUserProfile(message.senderSeq)"
               [default]="'assets/images/img_nophoto_50.png'"
             ></ucap-ui-imaage>
-          </li>
-          <li>
-            {{ getUserName(message.senderSeq) }}
-          </li>
-        </ul>
       </div>
 
-      <ng-container
-        class="bubble"
-        *ngIf="message.type !== EventType.NotificationForTimerRoom"
-        [ngSwitch]="message.type"
-      >
-        <ucap-chat-message-box-mass
-          *ngSwitchCase="EventType.MassText"
-          [message]="message"
-          (massDetail)="onMassDetail($event)"
-        >
-        </ucap-chat-message-box-mass>
-        <ucap-chat-message-box-file
-          *ngSwitchCase="EventType.File"
-          [message]="message"
-          (save)="onSave($event)"
-          (imageViewer)="onImageViewer($event)"
-        >
-        </ucap-chat-message-box-file>
-        <ucap-chat-message-box-sticker
-          *ngSwitchCase="EventType.Sticker"
-          [message]="message"
-        >
-        </ucap-chat-message-box-sticker>
-        <ucap-chat-message-box-recall
-          *ngSwitchCase="EventType.RecalledMessage"
-        ></ucap-chat-message-box-recall>
-        <ucap-chat-message-box-text
-          *ngSwitchCase="EventType.Character"
-          [message]="message"
-          (contextmenu)="onContextMenuMessage($event, message)"
-        >
-        </ucap-chat-message-box-text>
-        <div *ngSwitchDefault>
-          mass-translation
-          <ucap-chat-message-box-mass-translation></ucap-chat-message-box-mass-translation>
-          notice
-          <ucap-chat-message-box-notice></ucap-chat-message-box-notice>
-          <ucap-chat-message-box-schedule></ucap-chat-message-box-schedule>
-          translation
-          <ucap-chat-message-box-translation></ucap-chat-message-box-translation>
-          video-conference
-          <ucap-chat-message-box-video-conference></ucap-chat-message-box-video-conference>
-
-          <div class="message">
-            {{ message.sentMessage }}
-          </div>
+      <div class="message-main">
+        <div class="chat-name">
+            {{ getUserName(message.senderSeq) }}
         </div>
-      </ng-container>
+
+      <div class="bubble">
+        <ng-container
+          class="bubble"
+          *ngIf="message.type !== EventType.NotificationForTimerRoom"
+          [ngSwitch]="message.type"
+        >
+          <ucap-chat-message-box-mass
+            *ngSwitchCase="EventType.MassText"
+            [message]="message"
+            (massDetail)="onMassDetail($event)"
+          >
+          </ucap-chat-message-box-mass>
+          <ucap-chat-message-box-file
+            *ngSwitchCase="EventType.File"
+            [message]="message"
+            (save)="onSave($event)"
+            (imageViewer)="onImageViewer($event)"
+          >
+          </ucap-chat-message-box-file>
+          <ucap-chat-message-box-sticker
+            *ngSwitchCase="EventType.Sticker"
+            [message]="message"
+          >
+          </ucap-chat-message-box-sticker>
+          <ucap-chat-message-box-recall
+            *ngSwitchCase="EventType.RecalledMessage"
+          ></ucap-chat-message-box-recall>
+          <ucap-chat-message-box-text
+            *ngSwitchCase="EventType.Character"
+            [message]="message"
+            (contextmenu)="onContextMenuMessage($event, message)"
+          >
+          </ucap-chat-message-box-text>
+          <div *ngSwitchDefault>
+            mass-translation
+            <ucap-chat-message-box-mass-translation></ucap-chat-message-box-mass-translation>
+            notice
+            <ucap-chat-message-box-notice></ucap-chat-message-box-notice>
+            <ucap-chat-message-box-schedule></ucap-chat-message-box-schedule>
+            translation
+            <ucap-chat-message-box-translation></ucap-chat-message-box-translation>
+            video-conference
+            <ucap-chat-message-box-video-conference></ucap-chat-message-box-video-conference>
+
+            <div class="message">
+              {{ message.sentMessage }}
+            </div>
+          </div>
+        </ng-container>
+      </div>
+    </div>
 
       <div class="time secondary-text">
         {{ message.sendDate | date: 'a hh:mm' }}
diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.scss b/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.scss
index 7e3d7833..8ee3618f 100644
--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.scss
+++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.scss
@@ -1,6 +1,6 @@
-.chat-messages {
+/*.chat-messages {
   position: relative;
-  padding: 16px 0 40px 40px;
+  padding: 16px 40px;
 
   .message-row {
     position: relative;
@@ -129,3 +129,126 @@
     }
   }
 }
+*/
+$otherBox-line: #cccccc;
+$otherBox-bg: #ffffff;
+$meBox-line: #cccccc;
+$meBox-bg: #ffffff;
+
+.chat-messages {
+  padding: 30px 40px;
+  display: flex;
+  flex-direction: column;
+  .message-row {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    &.me {
+      flex-direction: row-reverse;
+      .profile-info {
+        flex-direction: row-reverse;
+        display: flex;
+        justify-content: flex-end;
+      }
+    }
+  }
+}
+
+.message-row {
+  margin-bottom: 30px;
+  .profile-img {
+    flex: 0 0 auto;
+  }
+  .message-main {
+    margin-left: 20px;
+    margin-right: 10px;
+    .chat-name {
+      font-size: 12px;
+      color: #333333;
+      margin-bottom: 6px;
+    }
+    .bubble {
+      border: 1px solid $otherBox-line;
+      font-weight: 900;
+      position: relative;
+      background-color: $otherBox-bg;
+      border-radius: 4px;
+      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
+      &:before {
+        content: '';
+        width: 0px;
+        height: 0px;
+        position: absolute;
+        border-left: 6px solid transparent;
+        border-right: 6px solid $otherBox-line;
+        border-top: 6px solid $otherBox-line;
+        border-bottom: 6px solid transparent;
+        left: -12px;
+        top: 4px;
+      }
+      &:after {
+        content: '';
+        width: 0px;
+        height: 0px;
+        position: absolute;
+        border-left: 6px solid transparent;
+        border-right: 6px solid $otherBox-bg;
+        border-top: 6px solid $otherBox-bg;
+        border-bottom: 6px solid transparent;
+        left: -10px;
+        top: 5px;
+      }
+    }
+  }
+  .secondary-text {
+    align-self: flex-end;
+    font-size: 11px;
+    word-wrap: break-word;
+    white-space: nowrap;
+  }
+
+}
+
+.message-row.me > .bubble {
+  border: 1px solid $meBox-line;
+  background-color: $meBox-bg;
+}
+.message-row.me {
+  .profile-img{
+    display:none;
+  }
+  .chat-name{
+    display:none;
+  }
+  .message-main {
+    text-align: right;
+    margin-left: 10px;
+    margin-right: 20px;
+    & .bubble:before {
+      content: '';
+      width: 0px;
+      height: 0px;
+      position: absolute;
+      border-left: 6px solid $meBox-line;
+      border-right: 6px solid transparent;
+      border-top: 6px solid $meBox-line;
+      border-bottom: 6px solid transparent;
+      left: initial;
+      right: -12px;
+      top: 4px;
+    }
+    & .bubble:after {
+      content: '';
+      width: 0px;
+      height: 0px;
+      position: absolute;
+      border-left: 6px solid $meBox-bg;
+      border-right: 6px solid transparent;
+      border-top: 6px solid $meBox-bg;
+      border-bottom: 6px solid transparent;
+      left: initial;
+      right: -10px;
+      top: 5px;
+    }
+  }
+}
diff --git a/projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.html b/projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.html
index a38131ec..e8358dcf 100644
--- a/projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.html
+++ b/projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.html
@@ -24,6 +24,7 @@
   <mat-expansion-panel
     *ngFor="let groupBuddy of groupBuddyList"
     [togglePosition]="'before'"
+    class="groupExpansionPanel"
   >
     <mat-expansion-panel-header>
       <mat-panel-title> {{ groupBuddy.group.name }} </mat-panel-title>
diff --git a/projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.scss b/projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.scss
index 4e887a03..a988bf19 100644
--- a/projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.scss
+++ b/projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.scss
@@ -5,5 +5,42 @@
 
   .more-spacer {
     flex: 1 1 auto;
+    width: 20px;
+  }
+
+}
+
+::ng-deep .groupExpansionPanel .mat-expansion-panel-body {
+    padding: 0;
+}
+.mat-expansion-panel-header{
+  height:40px ! important;
+  padding: 0 20px;
+ .mat-expansion-panel-header-title {
+   align-items: center;
+   font-size: 13px;
+  }
+  .mat-expansion-panel-header-description{
+    margin-right:0;
   }
 }
+
+
+.mat-icon-button {
+  margin-right: 0;
+  width: inherit;
+}
+.mat-icon {
+  font-size: 20px;
+}
+.groupList {
+  .mat-expansion-panel-header {
+    padding: 0 20px;
+    .mat-content {
+      color: #666666;
+    }
+  }
+}
+.box-more-spacer {
+  margin-right: 0;
+}
diff --git a/projects/ucap-webmessenger-ui-organization/src/lib/components/tenant-search.component.html b/projects/ucap-webmessenger-ui-organization/src/lib/components/tenant-search.component.html
index c7da8ceb..e47c4b5a 100644
--- a/projects/ucap-webmessenger-ui-organization/src/lib/components/tenant-search.component.html
+++ b/projects/ucap-webmessenger-ui-organization/src/lib/components/tenant-search.component.html
@@ -1,5 +1,5 @@
-<div>
-  <div>
+<div class="list-search">
+  <div class="selectbox">
     <mat-select [(value)]="companyCode">
       <mat-option
         *ngFor="let company of companyList"
@@ -9,12 +9,27 @@
       </mat-option>
     </mat-select>
   </div>
-  <div>
+  <div class="searchbox">
     <input
       matInput
       #searchWordInput
       placeholder="name"
       (keydown.enter)="onKeyDownEnter(searchWordInput.value)"
     />
+    <div class="btn-search"><i class="material-icons">search</i></div>
   </div>
 </div>
+
+<!--검색창만 있는 경우--------------------------------------------------------------------------
+<div class="list-search">
+  <div class="searchbox">
+    <input
+      matInput
+      #searchWordInput
+      placeholder="name"
+      (keydown.enter)="onKeyDownEnter(searchWordInput.value)"
+    />
+    <div class="btn-search"><i class="material-icons">search</i></div>
+  </div>
+</div>
+-->
diff --git a/projects/ucap-webmessenger-ui-organization/src/lib/components/tenant-search.component.scss b/projects/ucap-webmessenger-ui-organization/src/lib/components/tenant-search.component.scss
index a1ef3408..0505074a 100644
--- a/projects/ucap-webmessenger-ui-organization/src/lib/components/tenant-search.component.scss
+++ b/projects/ucap-webmessenger-ui-organization/src/lib/components/tenant-search.component.scss
@@ -1,3 +1,4 @@
+@charset 'utf-8';
 .organization-tree {
   ul,
   li {
@@ -10,3 +11,39 @@
     display: none;
   }
 }
+
+.list-search {
+  display: flex;
+  flex-direction: row;
+  height: 60px;
+  align-items: center;
+  padding: 0 20px;
+  font-size: 14px;
+  border-bottom: 1px solid #dddddd;
+  .searchbox {
+    width: 100%;
+    display: flex;
+    input {
+      display: inline-flex;
+      width: 100%;
+      font-size: 14px;
+      padding-left: 0;
+    }
+    .btn-search {
+      color: #777777;
+      font-size: 12px;
+      display: inline-flex;
+      margin-left: auto;
+      flex: none;
+    }
+  }
+}
+.selectbox {
+  display: inline-flex;
+  width: 45%;
+  margin-right: 1%;
+}
++ .searchbox {
+  width: 54%;
+  display: inline-flex;
+}
diff --git a/projects/ucap-webmessenger-ui-organization/src/lib/components/tree.component.html b/projects/ucap-webmessenger-ui-organization/src/lib/components/tree.component.html
index 5a64567b..f70125d8 100644
--- a/projects/ucap-webmessenger-ui-organization/src/lib/components/tree.component.html
+++ b/projects/ucap-webmessenger-ui-organization/src/lib/components/tree.component.html
@@ -13,14 +13,15 @@
   </mat-nested-tree-node>
   <mat-nested-tree-node *matTreeNodeDef="let node; when: hasChildren">
     <li>
-      <div class="mat-tree-node" (click)="onClickNode(node)">
+      <div class="mat-tree-node" (click)="onClickNode(node)" class="path">
         <button
           mat-icon-button
           matTreeNodeToggle
           [attr.aria-label]="'toggle ' + node.filename"
         >
           <mat-icon class="mat-icon-rtl-mirror">
-            {{ treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right' }}
+           <!-- {{ treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right' }}-->
+              {{ treeControl.isExpanded(node) ? 'remove' : 'add' }}
           </mat-icon>
         </button>
         {{ node.title }}
@@ -28,7 +29,7 @@
       <ul
         [class.organization-tree-node-invisible]="!treeControl.isExpanded(node)"
       >
-        <div *ngIf="treeControl.isExpanded(node)">
+        <div *ngIf="treeControl.isExpanded(node)" class="boxnone">
           <ng-container matTreeNodeOutlet></ng-container>
         </div>
       </ul>
diff --git a/projects/ucap-webmessenger-ui-organization/src/lib/components/tree.component.scss b/projects/ucap-webmessenger-ui-organization/src/lib/components/tree.component.scss
index a1ef3408..93b42a1e 100644
--- a/projects/ucap-webmessenger-ui-organization/src/lib/components/tree.component.scss
+++ b/projects/ucap-webmessenger-ui-organization/src/lib/components/tree.component.scss
@@ -1,12 +1,61 @@
 .organization-tree {
+  padding:10px;
   ul,
   li {
     margin-top: 0;
     margin-bottom: 0;
     list-style-type: none;
+    padding-left: 6px;
   }
 
   .organization-tree-node-invisible {
     display: none;
   }
 }
+.mat-tree-node {
+  min-height: 30px;
+  font-size: 13px;
+  padding-left:20px;
+  margin-top:4px;
+  &:hover {
+    background-color: #f4f4f4;
+    border:1px solid #cccccc;
+    border-radius:4px;
+    box-shadow: 0 1px 4px rgba(32, 33, 36, 0.1);
+  }
+}
+
+
+.path {
+  //border: 1px solid #dddddd;
+  padding: 4px;
+  margin-top: 10px;
+  //box-shadow: 0 1px 4px rgba(32, 33, 36, 0.1);
+  + ul{
+    li:last-chlid{
+      border-bottom:1px solid #dddddd;
+    }
+  }
+}
+.mat-icon-button{
+  padding: 0;
+  min-width: 0;
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+  line-height: 20px;
+  margin-right:10px;
+  .mat-icon-rtl-mirror{
+      line-height: 14px;
+      font-size: 14px;
+      border: 1px solid #dddddd;
+      padding: 2px;
+      font-size: 14px;
+      min-width: 14px;
+      min-height: 14px;
+      line-height: 14px;
+      width:20px;
+      height:20px;
+      box-shadow: 0 1px 4px rgba(32, 33, 36, 0.1);
+  }
+}
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 4cb90c4b..3bd0e08b 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
@@ -39,12 +39,14 @@
           {{ userInfo.deptName }}
         </span>
       </div>
-      <div
+      <!-- 상태메시지 제외
+        <div
         class="msg-status"
         *ngIf="!checkable && userInfo.intro.trim() && !compactable"
       >
         {{ userInfo.intro }}
       </div>
+    -->
     </dd>
   </dl>
   <mat-checkbox
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 5ea4f45d..9e009306 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
@@ -1,5 +1,6 @@
 @charset 'utf-8';
-@import '../../../../ucap-webmessenger-app/src/assets/scss/global/common.scss';
+@import '../../../../ucap-webmessenger-app/src/assets/scss/global/common';
+
 
 %list-item {
   position: relative;
@@ -7,17 +8,17 @@
   align-items: center;
   width: 100%;
   height: $listH-row2;
-  border-bottom: 1px solid #dddddd;
-  padding: 0 10px;
+  border-bottom: $line-basic;
+  padding: 20px;
 }
 %presence {
   display: inline-block;
   width: $presence-size;
   height: $presence-size;
-  //margin-top: position-m($listH-row2, $presence-size, 0);
+  align-self: flex-start;
   align-items: center;
   text-indent: -10000000px;
-  margin-right: 8px;
+  margin-right: 4px;
   border-radius: 100px;
 }
 %msg-status {
@@ -28,7 +29,7 @@
   padding: 2px 6px;
   vertical-align: middle;
   align-items: center;
-  @include ellipsis(20);
+  @include ellipsis(2);
   @include border-radius(4px);
 }
 
@@ -60,51 +61,49 @@
 .item-default {
   display: flex;
   width: 100%;
-  .thumbnail {
-    width: $thumbnail-msize;
-    height: $thumbnail-msize;
-    margin-right: 12px;
-    @include border-radius(100px);
+  dt{
+    flex:none;
+    .thumbnail {
+      width: $thumbnail-msize;
+      height: $thumbnail-msize;
+      margin-right: 16px;
+      @include border-radius(50%);
+    }
   }
-  .info {
+
+  .info{
     position: relative;
     display: inline-block;
     margin: 0;
     padding: 0;
     width: calc(100% - 50px);
-    .detail {
-      display: inline-block;
-      float: left;
+     .detail{
+      flex-flow: column;
       .name {
-        font-size: 14px;
+        font-size: 13px;
         margin-bottom: 2px;
+        color: $font-dark;
         @include ellipsis(1);
         b {
-          font-weight: bold;
+          font-size: 16px;
+          font-weight: 600;
         }
       }
       .dept {
         font-size: 12px;
+        color: $font-mid;
         @include ellipsis(1);
       }
-    }
-    .msg-status {
-      display: inline-block;
-      float: right;
-      @extend %msg-status;
+      .msg-status {
+        display: inline-block;
+        float: right;
+        @extend %msg-status;
+      }
     }
   }
 }
 //가변에 따른 list-item width값 변경
 .list-item {
-  .item-default {
-    .detail {
-      width: 60%;
-    }
-    .msg-status {
-      width: 38%;
-    }
-  }
   .presence {
     + .item-default {
       width: calc(100% - 20px);
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 9627bd11..35138e62 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
@@ -1,6 +1,21 @@
-<div>
-  <div class="room-name">{{ getRoomName(roomInfo) }}</div>
-  <div>{{ roomInfo.finalEventDate }}</div>
-  <div>{{ finalEventMessage }}</div>
-  <div *ngIf="roomInfo.noReadCnt > 0">noReadCnt : {{ roomInfo.noReadCnt }}</div>
+<div class="list-item">
+  <dl class="item-default">
+    <dt>
+      <img class="thumbnail" />
+    </dt>
+    <dd class="info">
+      <div class="detail">
+        <div class="room-name">
+          <div class="name">{{ getRoomName(roomInfo) }}</div>
+          <div class="num" *ngIf="roomInfo.noReadCnt > 0">
+            noReadCnt : {{ roomInfo.noReadCnt }}
+          </div>
+        </div>
+        <div class="room-msg">{{ finalEventMessage }}</div>
+      </div>
+
+      <div class="date">{{ roomInfo.finalEventDate }}</div>
+    </dd>
+  </dl>
+  <span class="noti">1</span>
 </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 358a7c6a..b81e9f22 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
@@ -1,9 +1,11 @@
+@charset 'utf-8';
+@import '../../../../ucap-webmessenger-app/src/assets/scss/global/common.scss';
 .profile {
   white-space: normal;
   text-align: left;
   letter-spacing: 0.01em;
   min-height: 88px;
-  border-bottom: 1px solid;
+  border-bottom: $line-basic;
   padding: 16px;
   font-weight: 400;
   border-radius: 0;
@@ -16,8 +18,7 @@
 
   .profile-name {
     font-size: 16px;
-    white-space: nowrap;
-    text-overflow: ellipsis;
+    @include ellipsis(1)
   }
 
   .profile-last-message {
@@ -44,3 +45,84 @@
     line-height: 20px;
   }
 }
+%list-item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: $listH-row2;
+  border-bottom: $line-basic;
+  padding: 20px;
+}
+.item-default {
+  display: flex;
+  width: 100%;
+  .thumbnail {
+    width: $thumbnail-msize;
+    height: $thumbnail-msize;
+    margin-right: 16px;
+    @include border-radius(100px);
+  }
+  .info {
+    position: relative;
+    display: flex;
+    margin: 0;
+    padding: 0;
+    width: calc(100% - 50px);
+    .detail {
+      flex-direction: column;
+      width: calc(100% - 80px);
+      .room-name {
+        display: inline-flex;
+        color: $font-dark;
+        width: 100%;
+        margin-bottom: 2px;
+        .name {
+          font-size: 16px;
+          @include ellipsis(1);
+          font-weight: 600;
+        }
+        .num {
+          font-size: 12px;
+          color: $color-main;
+          flex: none;
+          margin-left: 10px;
+        }
+      }
+      .room-msg {
+        font-size: 12px;
+        color: $font-mid;
+        margin-top: 4px;
+      }
+    }
+    .date {
+      float: right;
+      width: 70px;
+      font-size: 11px;
+      text-align: right;
+      margin-left: 10px;
+      color: $font-mid;
+      @include ellipsis(1);
+    }
+  }
+}
+
+.list-item {
+  @extend %list-item;
+  &:hover {
+    background-color: $bg-list-hover;
+  }
+}
+
+.noti {
+  position: absolute;
+  right: 22px;
+  bottom: 22px;
+  max-width: 60px;
+  padding: 0 6px;
+  font-size: 11px;
+  color: #ffffff;
+  background-color: $color-main;
+  @include ellipsis(1);
+  @include border-radius(100px);
+}