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 8a346140..b74b2f1c 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
@@ -3,10 +3,14 @@
     <div class="current-head">
       <h3>그룹</h3>
       <div class="btn-box">
-        <button mat-icon-button >
+        <button mat-icon-button>
           <mat-icon>person_add</mat-icon>
         </button>
-        <button mat-icon-button [matMenuTriggerFor]="groupMenu" aria-label="group menu">
+        <button
+          mat-icon-button
+          [matMenuTriggerFor]="groupMenu"
+          aria-label="group menu"
+        >
           <mat-icon>more_vert</mat-icon>
         </button>
       </div>
@@ -84,7 +88,7 @@
       mat-menu-item
       (click)="onClickProfileContextMenu('REGISTER_FAVORITE', userInfo)"
     >
-      즐겨찾기 등록
+      즐겨찾기 {{ userInfo.isFavorit ? '해제' : '등록' }}
     </button>
     <button mat-menu-item (click)="onClickProfileContextMenu('CHAT', userInfo)">
       대화하기
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.ts
index 8f477c8c..bb8282c3 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.ts
@@ -1,16 +1,33 @@
 import { UserSelectDialogType } from './../../../../types/userselect.dialog.type';
-import {
-  CreateChatDialogComponent,
-  CreateChatDialogData,
-  CreateChatDialogResult
-} from './../../dialogs/chat/create-chat.dialog.component';
+import { MatMenuTrigger } from '@angular/material';
 import { Component, OnInit, ViewChild, OnDestroy } from '@angular/core';
 
 import { Observable, combineLatest, Subscription } from 'rxjs';
 import { map, tap } from 'rxjs/operators';
-
 import { Store, select } from '@ngrx/store';
 
+import * as AppStore from '@app/store';
+import * as ChatStore from '@app/store/messenger/chat';
+import * as QueryStore from '@app/store/messenger/query';
+import * as SyncStore from '@app/store/messenger/sync';
+
+import { NGXLogger } from 'ngx-logger';
+import { Company } from '@ucap-webmessenger/api-external';
+import { SessionStorageService } from '@ucap-webmessenger/web-storage';
+import { VersionInfo2Response } from '@ucap-webmessenger/api-public';
+import { LoginInfo, KEY_LOGIN_INFO } from '@app/types';
+import { KEY_VER_INFO } from '@app/types/ver-info.type';
+import { ExpansionPanelComponent as GroupExpansionPanelComponent } from '@ucap-webmessenger/ui-group';
+
+import { LoginResponse } from '@ucap-webmessenger/protocol-authentication';
+import { UserInfo, GroupDetailData } from '@ucap-webmessenger/protocol-sync';
+import {
+  DeptSearchType,
+  UserInfoSS,
+  UserInfoF,
+  UserInfoDN
+} from '@ucap-webmessenger/protocol-query';
+
 import {
   ucapAnimations,
   DialogService,
@@ -18,48 +35,16 @@ import {
   ConfirmDialogComponent,
   ConfirmDialogResult
 } from '@ucap-webmessenger/ui';
-import { UserInfo, GroupDetailData } from '@ucap-webmessenger/protocol-sync';
-
-import * as AppStore from '@app/store';
-import * as ChatStore from '@app/store/messenger/chat';
-import * as QueryStore from '@app/store/messenger/query';
-import * as SyncStore from '@app/store/messenger/sync';
-import { NGXLogger } from 'ngx-logger';
-import { Company } from '@ucap-webmessenger/api-external';
-import { SessionStorageService } from '@ucap-webmessenger/web-storage';
-import { LoginInfo, KEY_LOGIN_INFO } from '@app/types';
-import { ExpansionPanelComponent as GroupExpansionPanelComponent } from '@ucap-webmessenger/ui-group';
 import {
-  CreateGroupDialogComponent,
-  CreateGroupDialogData,
-  CreateGroupDialogResult
-} from '@app/layouts/messenger/dialogs/group/create-group.dialog.component';
-import { LoginResponse } from '@ucap-webmessenger/protocol-authentication';
-import {
-  DeptSearchType,
-  UserInfoSS,
-  UserInfoF,
-  UserInfoDN
-} from '@ucap-webmessenger/protocol-query';
-import { MatMenuTrigger } from '@angular/material';
-import { VersionInfo2Response } from '@ucap-webmessenger/api-public';
-import { KEY_VER_INFO } from '@app/types/ver-info.type';
-import {
-  DeleteGroupDialogComponent,
-  DeleteGroupDialogData,
-  DeleteGroupDialogResult
-} from '@app/layouts/messenger/dialogs/group/delete-group.dialog.component';
-
+  CreateChatDialogComponent,
+  CreateChatDialogData,
+  CreateChatDialogResult
+} from './../../dialogs/chat/create-chat.dialog.component';
 import {
   EditGroupDialogComponent,
   EditGroupDialogData,
   EditGroupDialogResult
 } from '@app/layouts/messenger/dialogs/group/edit-group.dialog.component';
-import {
-  EditGroupMemberDialogComponent,
-  EditGroupMemberDialogData,
-  EditGroupMemberDialogResult
-} from '@app/layouts/messenger/dialogs/group/edit-group-member.dialog.component';
 
 @Component({
   selector: 'app-layout-chat-left-sidenav-group',
@@ -251,10 +236,7 @@ export class GroupComponent implements OnInit, OnDestroy {
     );
   }
 
-  onClickProfileContextMenu(
-    menuType: string,
-    userInfo: UserInfo | UserInfoSS | UserInfoF | UserInfoDN
-  ) {
+  onClickProfileContextMenu(menuType: string, userInfo: UserInfo | UserInfoF) {
     this.logger.debug(
       'onClickProfileContextMenu',
       'menuType',
@@ -262,6 +244,16 @@ export class GroupComponent implements OnInit, OnDestroy {
       'userInfo',
       userInfo
     );
+    switch (menuType) {
+      case 'REGISTER_FAVORITE':
+        this.store.dispatch(
+          SyncStore.updateBuddy({
+            seq: userInfo.seq,
+            isFavorit: !userInfo.isFavorit
+          })
+        );
+        break;
+    }
   }
 
   onContextMenuProfile(
diff --git a/projects/ucap-webmessenger-app/src/app/store/messenger/sync/effects.ts b/projects/ucap-webmessenger-app/src/app/store/messenger/sync/effects.ts
index 42368032..45f74adb 100644
--- a/projects/ucap-webmessenger-app/src/app/store/messenger/sync/effects.ts
+++ b/projects/ucap-webmessenger-app/src/app/store/messenger/sync/effects.ts
@@ -31,19 +31,21 @@ import {
   refreshRoom,
   refreshRoomFailure,
   refreshRoomSuccess,
-  createGroup,
-  createGroupSuccess,
-  createGroupFailure,
   createGroupAndBuddy,
   addBuddy,
   addBuddyFailure,
   delBuddy,
   delBuddyFailure,
+  delBuddySuccess,
+  updateBuddy,
+  updateBuddySuccess,
+  updateBuddyFailure,
+  createGroup,
+  createGroupSuccess,
+  createGroupFailure,
   updateGroup,
   updateGroupFailure,
   updateGroupMember,
-  updateBuddy,
-  delBuddySuccess,
   delGroup,
   delGroupFailure,
   delGroupSuccess
@@ -92,7 +94,8 @@ import {
 import {
   BuddyProtocolService,
   AddResponse as BuddyAddResponse,
-  DelResponse as BuddyDelResponse
+  DelResponse as BuddyDelResponse,
+  UpdateResponse as BuddyUpdateResponse
 } from '@ucap-webmessenger/protocol-buddy';
 
 import * as ChatStore from '@app/store/messenger/chat';
@@ -682,6 +685,20 @@ export class Effects {
     )
   );
 
+  updateBuddy$ = createEffect(() =>
+    this.actions$.pipe(
+      ofType(updateBuddy),
+      exhaustMap(req =>
+        this.buddyProtocolService.update(req).pipe(
+          map((res: BuddyUpdateResponse) => {
+            return updateBuddySuccess(res);
+          }),
+          catchError(error => of(updateBuddyFailure({ error })))
+        )
+      )
+    )
+  );
+
   updateGroup$ = createEffect(() =>
     this.actions$.pipe(
       ofType(updateGroup),
diff --git a/projects/ucap-webmessenger-app/src/app/store/messenger/sync/reducers.ts b/projects/ucap-webmessenger-app/src/app/store/messenger/sync/reducers.ts
index 599c9790..4ce8d801 100644
--- a/projects/ucap-webmessenger-app/src/app/store/messenger/sync/reducers.ts
+++ b/projects/ucap-webmessenger-app/src/app/store/messenger/sync/reducers.ts
@@ -17,17 +17,20 @@ import {
   createGroupSuccess,
   addBuddySuccess,
   delBuddySuccess,
-  delGroupSuccess
+  delGroupSuccess,
+  updateBuddySuccess
 } from './actions';
 import {
   RoomUserDetailData,
   RoomUserData,
-  GroupDetailData
+  GroupDetailData,
+  UserInfo
 } from '@ucap-webmessenger/protocol-sync';
 
 import * as AuthenticationStore from '@app/store/account/authentication';
 import * as RoomStore from '@app/store/messenger/room';
 import { RoomInfo } from '@ucap-webmessenger/protocol-room';
+import { UpdateResponse } from '@ucap-webmessenger/protocol-buddy';
 
 export const reducer = createReducer(
   initialState,
@@ -222,5 +225,17 @@ export const reducer = createReducer(
         ...state.buddy2
       })
     };
+  }),
+
+  on(updateBuddySuccess, (state, action) => {
+    const userInfo: UserInfo = {
+      ...state.buddy2.entities[action.seq],
+      isFavorit: action.isFavorit
+    };
+
+    return {
+      ...state,
+      buddy2: adapterBuddy2.upsertOne(userInfo, { ...state.buddy2 })
+    };
   })
 );
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 78be71cf..19a36c2d 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,6 +1,5 @@
 <div class="date-split">
   <span class="line"></span>
-  <!-- {{ message.sendDate | date: 'short' }} -->
-  <span class="date">{{ dateInfo }}2019.10.3</span>
+  <span class="date">{{ dateInfo }}</span>
   <span class="line"></span>
 </div>
diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/date-splitter.component.ts b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/date-splitter.component.ts
index f7356003..3f4d4891 100644
--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/date-splitter.component.ts
+++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/date-splitter.component.ts
@@ -18,7 +18,7 @@ export class DateSplitterComponent implements OnInit {
   ngOnInit() {
     this.dateInfo = this.datePipe.transform(
       this.message.sendDate,
-      'yyyy-MM-dd EEE'
+      'yyyy.MM.dd EEE'
     );
   }
 }
diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/information.component.html b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/information.component.html
index 899a0e49..d54534ca 100644
--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/information.component.html
+++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/information.component.html
@@ -1,3 +1,3 @@
-<p>
+<div>
   {{ contents }}
-</p>
+</div>
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 cc60a60c..42373c8e 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,11 @@
 <div class="bubble-main">
-  <span>
+  <span class="content">
     {{ content }}
   </span>
   <span>
     {{ message.sendDate | date: 'short' }}
   </span>
 </div>
-  {{detailButteonShow}}
 <div *ngIf="detailButteonShow" class="btn-box">
-    <button mat-button (click)="onClickDetailView()">Detail View</button>
+  <button mat-button (click)="onClickDetailView()">Detail View</button>
 </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 aa2dfae1..ddad5bc9 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
@@ -1,6 +1,12 @@
+@charset 'utf-8';
+@import '../../../../ucap-webmessenger-app/src/assets/scss/global/common.scss';
 .bubble-main {
   padding: 14px;
   text-align: left;
+  .content {
+    max-width: 250px;
+    @include ellipsis(1);
+  }
 }
 
 .btn-box {
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 44021797..d07c3966 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,8 +1,5 @@
 <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"
@@ -11,6 +8,13 @@
       contact: message.senderSeq !== loginRes.userSeq
     }"
   >
+    <div>
+      <ucap-chat-message-box-date-splitter
+        *ngIf="getDateSplitter(i)"
+        [message]="message"
+      >
+      </ucap-chat-message-box-date-splitter>
+    </div>
 
     <div
       *ngIf="getIsInformation(message); then information; else contents"
@@ -46,7 +50,7 @@
     </ng-template>
     <ng-template #contents>
       <div *ngIf="getUserProfile(message.senderSeq) != ''" class="profile-img">
-            <!-- <img
+        <!-- <img
               class="avatar"
               style="width: 50px; height: 50px;"
               [src]="
@@ -59,71 +63,71 @@
                   | async
               "
             /> -->
-            <ucap-ui-imaage
-              [style]="'width: 50px; height: 50px;'"
-              [imageClass]="'avatar'"
-              [base]="profileImageRoot"
-              [path]="getUserProfile(message.senderSeq)"
-              [default]="'assets/images/img_nophoto_50.png'"
-            ></ucap-ui-imaage>
+        <ucap-ui-imaage
+          [style]="'width: 50px; height: 50px;'"
+          [imageClass]="'avatar'"
+          [base]="profileImageRoot"
+          [path]="getUserProfile(message.senderSeq)"
+          [default]="'assets/images/img_nophoto_50.png'"
+        ></ucap-ui-imaage>
       </div>
 
       <div class="message-main">
         <div class="chat-name">
-            {{ getUserName(message.senderSeq) }}
+          {{ getUserName(message.senderSeq) }}
         </div>
 
-      <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)"
+        <div class="bubble">
+          <ng-container
+            class="bubble"
+            *ngIf="message.type !== EventType.NotificationForTimerRoom"
+            [ngSwitch]="message.type"
           >
-          </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>
+            <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 class="message">
+                {{ message.sentMessage }}
+              </div>
             </div>
-          </div>
-        </ng-container>
+          </ng-container>
+        </div>
       </div>
-    </div>
 
       <div class="time secondary-text">
         {{ message.sendDate | date: 'a hh:mm' }}