diff --git a/package.json b/package.json
index b22e17ca..fa3f0254 100644
--- a/package.json
+++ b/package.json
@@ -61,6 +61,7 @@
     "@types/webpack": "^4.39.5",
     "@types/webpack-merge": "^4.1.5",
     "@types/webpack-node-externals": "^1.6.3",
+    "angular-split": "^3.0.2",
     "awesome-node-loader": "^1.1.1",
     "awesome-typescript-loader": "^5.2.1",
     "classlist.js": "^1.1.20150312",
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer.component.html
index 979983c7..4004a64d 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer.component.html
@@ -1,3 +1,17 @@
+<div>
+  <span>{{ selectedRightDrawer }}</span>
+  <span>
+    <button
+      mat-button
+      matSuffix
+      mat-icon-button
+      aria-label="Close"
+      (click)="onClickClose()"
+    >
+      <mat-icon>close</mat-icon>
+    </button>
+  </span>
+</div>
 <ng-container *ngIf="selectedRightDrawer" [ngSwitch]="selectedRightDrawer">
   <app-layout-chat-right-drawer-file-box *ngSwitchCase="RightDrawer.FileBox">
   </app-layout-chat-right-drawer-file-box>
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer.component.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer.component.ts
index e0712a21..65945641 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer.component.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer.component.ts
@@ -20,6 +20,8 @@ export class RightDrawerComponent implements OnInit {
   openProfile = new EventEmitter<
     UserInfo | UserInfoSS | UserInfoF | UserInfoDN
   >();
+  @Output()
+  closeRightDrawer = new EventEmitter();
 
   RightDrawer = RightDrawer;
 
@@ -30,4 +32,8 @@ export class RightDrawerComponent implements OnInit {
   onClickOpenProfile(userInfo: UserInfo | UserInfoSS | UserInfoF | UserInfoDN) {
     this.openProfile.emit(userInfo);
   }
+
+  onClickClose() {
+    this.closeRightDrawer.emit();
+  }
 }
diff --git a/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.html b/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.html
index a2c6940b..29a0e328 100644
--- a/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.html
+++ b/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.html
@@ -1,38 +1,57 @@
 <div class="container">
-  <div class="left-side">
-    <app-layout-messenger-left-side
-      (openProfile)="onClickOpenProfile($event)"
-    ></app-layout-messenger-left-side>
-  </div>
-  <mat-drawer-container class="contents" autosize>
-    <!-- <mat-drawer #drawer mode="over">
-      <p>Auto-resizing sidenav</p>
-    </mat-drawer> -->
-    <div class="messages">
-      <app-layout-messenger-intro
-        *ngIf="!(this.selectedChat$ | async)"
-      ></app-layout-messenger-intro>
-      <!-- <app-layout-messenger-intro
-        *ngIf="!(this.selectedChat$ | async)"
-      ></app-layout-messenger-intro> -->
-      <app-layout-messenger-messages
-        *ngIf="!!(this.selectedChat$ | async)"
-        (openProfile)="onClickOpenProfile($event)"
-      ></app-layout-messenger-messages>
-    </div>
-    <mat-drawer
-      #rightDrawer
-      mode="side"
-      position="end"
-      (openedChange)="onOpenedChange($event)"
+  <as-split
+    unit="pixel"
+    gutterSize="5"
+    useTransition="true"
+    gutterDblClickDuration="300"
+    (dragEnd)="onGutterDragEnd($event)"
+    (gutterDblClick)="onGutterDblClick($event)"
+  >
+    <as-split-area
+      #asSplitLeft
+      [size]="leftSideComponentWidth"
+      minSize="300"
+      maxSize="500"
     >
-      <app-layout-messenger-right-drawer
-        [selectedRightDrawer]="selectedRightDrawer$ | async"
-        (openProfile)="onClickOpenProfile($event)"
-      >
-      </app-layout-messenger-right-drawer>
-    </mat-drawer>
-  </mat-drawer-container>
+      <div class="left-side">
+        <app-layout-messenger-left-side
+          (openProfile)="onClickOpenProfile($event)"
+        ></app-layout-messenger-left-side>
+      </div>
+    </as-split-area>
+    <as-split-area size="*">
+      <mat-drawer-container class="contents" autosize>
+        <!-- <mat-drawer #drawer mode="over">
+          <p>Auto-resizing sidenav</p>
+        </mat-drawer> -->
+        <div class="messages">
+          <app-layout-messenger-intro
+            *ngIf="!(this.selectedChat$ | async)"
+          ></app-layout-messenger-intro>
+          <!-- <app-layout-messenger-intro
+            *ngIf="!(this.selectedChat$ | async)"
+          ></app-layout-messenger-intro> -->
+          <app-layout-messenger-messages
+            *ngIf="!!(this.selectedChat$ | async)"
+            (openProfile)="onClickOpenProfile($event)"
+          ></app-layout-messenger-messages>
+        </div>
+        <mat-drawer
+          #rightDrawer
+          mode="side"
+          position="end"
+          (openedChange)="onOpenedChange($event)"
+        >
+          <app-layout-messenger-right-drawer
+            [selectedRightDrawer]="selectedRightDrawer$ | async"
+            (openProfile)="onClickOpenProfile($event)"
+            (closeRightDrawer)="onCloseRightDrawer($event)"
+          >
+          </app-layout-messenger-right-drawer>
+        </mat-drawer>
+      </mat-drawer-container>
+    </as-split-area>
+  </as-split>
 
   <!-- <div class="right-side">
     <app-layout-messenger-right-side></app-layout-messenger-right-side>
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 5842b92c..e8ec4058 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
@@ -3,11 +3,11 @@
   display: flex;
   flex-flow: row;
   padding-top: 30px;
-  border:3px solid #4f4f4f;
-  border-top:none;
+  border: 3px solid #4f4f4f;
+  border-top: none;
 
   .left-side {
-    width: 380px;
+    width: 100%;
     height: 100%;
     flex: 0 0 auto;
     position: relative;
@@ -16,7 +16,7 @@
     flex: 1 1 auto;
     min-width: 400px;
     height: 100%;
-    
+
     .messages {
       width: 100%;
       height: 100%;
diff --git a/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.ts b/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.ts
index 939ec59d..5f79be55 100644
--- a/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.ts
+++ b/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.ts
@@ -1,37 +1,38 @@
-import { map, tap } from "rxjs/operators";
-import { Component, OnInit, Inject, OnDestroy, ViewChild } from "@angular/core";
+import { map, tap } from 'rxjs/operators';
+import { Component, OnInit, Inject, OnDestroy, ViewChild } from '@angular/core';
 
-import { Store, select } from "@ngrx/store";
+import { Store, select } from '@ngrx/store';
 
-import * as AppSotre from "@app/store";
-import * as ChatStore from "@app/store/messenger/chat";
-import { Observable, Subscription } from "rxjs";
+import * as AppSotre from '@app/store';
+import * as ChatStore from '@app/store/messenger/chat';
+import { Observable, Subscription } from 'rxjs';
 import {
   WindowIdle,
   UCAP_NATIVE_SERVICE,
-  NativeService
-} from "@ucap-webmessenger/native";
+  NativeService,
+} from '@ucap-webmessenger/native';
 
-import { UserInfo } from "@ucap-webmessenger/protocol-sync";
+import { UserInfo } from '@ucap-webmessenger/protocol-sync';
 import {
   UserInfoSS,
   UserInfoF,
-  UserInfoDN
-} from "@ucap-webmessenger/protocol-query";
-import { StatusProtocolService } from "@ucap-webmessenger/protocol-status";
-import { StatusType, StatusCode } from "@ucap-webmessenger/core";
-import { DialogService } from "@ucap-webmessenger/ui";
+  UserInfoDN,
+} from '@ucap-webmessenger/protocol-query';
+import { StatusProtocolService } from '@ucap-webmessenger/protocol-status';
+import { StatusType, StatusCode } from '@ucap-webmessenger/core';
+import { DialogService } from '@ucap-webmessenger/ui';
 import {
   ProfileDialogComponent,
   ProfileDialogData,
-  ProfileDialogResult
-} from "@app/layouts/messenger/dialogs/profile/profile.dialog.component";
-import { MatSidenav, MatDrawer } from "@angular/material";
+  ProfileDialogResult,
+} from '@app/layouts/messenger/dialogs/profile/profile.dialog.component';
+import { MatSidenav, MatDrawer } from '@angular/material';
+import { SplitAreaDirective } from 'angular-split';
 
 @Component({
-  selector: "app-page-messenger-main",
-  templateUrl: "./main.page.component.html",
-  styleUrls: ["./main.page.component.scss"]
+  selector: 'app-page-messenger-main',
+  templateUrl: './main.page.component.html',
+  styleUrls: ['./main.page.component.scss'],
 })
 export class MainPageComponent implements OnInit {
   selectedChat$: Observable<string | null>;
@@ -39,7 +40,10 @@ export class MainPageComponent implements OnInit {
   idleStateChangedSubscription: Subscription;
   chatOpenRoomSubscription: Subscription;
 
-  @ViewChild("rightDrawer", { static: true }) rightDrawer: MatDrawer;
+  defaultLeftSideComponentWidth = 380;
+  leftSideComponentWidth = this.defaultLeftSideComponentWidth;
+
+  @ViewChild('rightDrawer', { static: true }) rightDrawer: MatDrawer;
 
   constructor(
     @Inject(UCAP_NATIVE_SERVICE) private nativeService: NativeService,
@@ -75,7 +79,7 @@ export class MainPageComponent implements OnInit {
         console.log(action);
         let statusType: StatusCode;
 
-        if (action === "IDLE") {
+        if (action === 'IDLE') {
           // away
           statusType = StatusCode.Away;
         } else {
@@ -86,7 +90,7 @@ export class MainPageComponent implements OnInit {
         this.statusProtocolService.status({
           statusDivisionType: StatusType.Messenger,
           statusType,
-          statusMessage: ""
+          statusMessage: '',
         });
       });
 
@@ -111,12 +115,19 @@ export class MainPageComponent implements OnInit {
     if (!event) {
       this.store.dispatch(
         ChatStore.selectedRightDrawer({
-          req: null
+          req: null,
         })
       );
     }
   }
 
+  onGutterDragEnd(e: { gutterNum: number; sizes: Array<number> }) {
+    this.leftSideComponentWidth = e.sizes[0];
+  }
+  onGutterDblClick(e: { gutterNum: number; sizes: Array<number> }) {
+    this.leftSideComponentWidth = this.defaultLeftSideComponentWidth;
+  }
+
   onClickOpenProfile(userInfo: UserInfo | UserInfoSS | UserInfoF | UserInfoDN) {
     this.dialogService.open<
       ProfileDialogComponent,
@@ -124,8 +135,12 @@ export class MainPageComponent implements OnInit {
       ProfileDialogResult
     >(ProfileDialogComponent, {
       data: {
-        userInfo
-      }
+        userInfo,
+      },
     });
   }
+
+  onCloseRightDrawer() {
+    this.rightDrawer.close();
+  }
 }
diff --git a/projects/ucap-webmessenger-app/src/app/pages/messenger/messenger.page.module.ts b/projects/ucap-webmessenger-app/src/app/pages/messenger/messenger.page.module.ts
index 52208213..6aae0ebf 100644
--- a/projects/ucap-webmessenger-app/src/app/pages/messenger/messenger.page.module.ts
+++ b/projects/ucap-webmessenger-app/src/app/pages/messenger/messenger.page.module.ts
@@ -11,15 +11,19 @@ import { AppMessengerRoutingPageModule } from './messenger-routing.page.module';
 
 import { COMPONENTS } from './components';
 
+import { AngularSplitModule } from 'angular-split';
+
 @NgModule({
   imports: [
     CommonModule,
     FlexLayoutModule,
     MatSidenavModule,
     AppMessengerLayoutModule,
-    AppMessengerRoutingPageModule
+    AppMessengerRoutingPageModule,
+
+    AngularSplitModule.forRoot(),
   ],
   declarations: [...COMPONENTS],
-  entryComponents: []
+  entryComponents: [],
 })
 export class AppMessengerPageModule {}
diff --git a/projects/ucap-webmessenger-app/src/assets/images/logo/ico_64x64.png b/projects/ucap-webmessenger-app/src/assets/images/logo/ico_64x64.png
index adbc1dd4..382110d2 100644
Binary files a/projects/ucap-webmessenger-app/src/assets/images/logo/ico_64x64.png and b/projects/ucap-webmessenger-app/src/assets/images/logo/ico_64x64.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/images/logo/ico_64x64.png.woori b/projects/ucap-webmessenger-app/src/assets/images/logo/ico_64x64.png.woori
new file mode 100644
index 00000000..adbc1dd4
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/images/logo/ico_64x64.png.woori differ
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 da6da3b0..f90936ed 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
@@ -26,7 +26,9 @@
     <mat-expansion-panel-header>
       <mat-panel-title
         >즐겨찾기
-        <span>({{ favoritBuddyList.length }}명)</span></mat-panel-title
+        <span class="text-accent-color number"
+          >({{ favoritBuddyList.length }}명)</span
+        ></mat-panel-title
       >
       <mat-panel-description> </mat-panel-description>
     </mat-expansion-panel-header>
@@ -48,8 +50,10 @@
     <mat-expansion-panel-header>
       <mat-panel-title class="panel-title">
         <div class="title-name ellipsis">{{ groupBuddy.group.name }}</div>
-        <span class="text-accent-color number">({{ groupBuddy.buddyList.length }}명)</span>
-        </mat-panel-title>
+        <span class="text-accent-color number"
+          >({{ groupBuddy.buddyList.length }}명)</span
+        >
+      </mat-panel-title>
       <mat-panel-description>
         <span class="more-spacer"></span>
         <button