diff --git a/package.json b/package.json
index e6c3d28d..a0a92c0a 100644
--- a/package.json
+++ b/package.json
@@ -60,6 +60,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",
     "clean-webpack-plugin": "^3.0.0",
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..829641ba 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,56 @@
 <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)"
+          >
+          </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..8d3ad6ce 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,8 @@ export class MainPageComponent implements OnInit {
       ProfileDialogResult
     >(ProfileDialogComponent, {
       data: {
-        userInfo
-      }
+        userInfo,
+      },
     });
   }
 }
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 {}