diff --git a/electron-projects/ucap-webmessenger-electron/src/index.ts b/electron-projects/ucap-webmessenger-electron/src/index.ts
index fc6df23c..6ce956ca 100644
--- a/electron-projects/ucap-webmessenger-electron/src/index.ts
+++ b/electron-projects/ucap-webmessenger-electron/src/index.ts
@@ -174,6 +174,7 @@ function createTray() {
       // accelerator: 'Q',
       // selector: 'terminate:',
       click: () => {
+        appWindow.show();
         appWindow.browserWindow.webContents.send(MessengerChannel.ShowSetting);
       }
     },
diff --git a/package-lock.json b/package-lock.json
index 15930b04..5152686e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1127,7 +1127,6 @@
       "version": "8.2.12",
       "resolved": "https://registry.npmjs.org/@angular/core/-/core-8.2.12.tgz",
       "integrity": "sha512-wEFwhHCuuXynXAMeA1G+0KIYY0jqXYs7I8p+GO+ufKoUmzWHFTvtMJ6nvKgy+LmZTByO2gf9oVAAlRodNb8ttQ==",
-      "dev": true,
       "requires": {
         "tslib": "^1.9.0"
       }
@@ -3150,6 +3149,15 @@
       "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==",
       "dev": true
     },
+    "autolinker": {
+      "version": "3.11.1",
+      "resolved": "https://registry.npmjs.org/autolinker/-/autolinker-3.11.1.tgz",
+      "integrity": "sha512-6sAmetStorjXvwmV8MBxI5DGICHKD1B5EjdkIrq34X6YBDN6jj54EUHnoHgNqmNCclcf8c409zuVMNy449u80g==",
+      "dev": true,
+      "requires": {
+        "tslib": "^1.9.3"
+      }
+    },
     "autoprefixer": {
       "version": "9.6.1",
       "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.6.1.tgz",
@@ -12454,7 +12462,6 @@
       "version": "6.5.3",
       "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.5.3.tgz",
       "integrity": "sha512-wuYsAYYFdWTAnAaPoKGNhfpWwKZbJW+HgAJ+mImp+Epl7BG8oNWBCTyRM8gba9k4lk8BgWdoYm21Mo/RYhhbgA==",
-      "dev": true,
       "requires": {
         "tslib": "^1.9.0"
       }
@@ -14082,8 +14089,7 @@
     "tslib": {
       "version": "1.10.0",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.10.0.tgz",
-      "integrity": "sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ==",
-      "dev": true
+      "integrity": "sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ=="
     },
     "tslint": {
       "version": "5.15.0",
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 c0d6e2a2..f09d1009 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
@@ -38,8 +38,8 @@
         >-->
         <div
           class="icon-item"
-          [matBadgeHidden]="(badgeChatUnReadCount$ | async) <= 0"
-          [matBadge]="badgeChatUnReadCount$ | async"
+          [matBadgeHidden]="badgeChatUnReadCount <= 0"
+          [matBadge]="badgeChatUnReadCount"
           matBadgeDescription="확인하지 않은 메시지가 있습니다."
           matBadgeColor="accent"
           matBadgePosition="above after"
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.ts
index 649dfc7c..cdece87e 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.ts
@@ -6,7 +6,8 @@ import {
   EventEmitter,
   ViewChildren,
   QueryList,
-  ElementRef
+  ElementRef,
+  OnDestroy
 } from '@angular/core';
 import { NGXLogger } from 'ngx-logger';
 import { ucapAnimations, DialogService } from '@ucap-webmessenger/ui';
@@ -15,7 +16,7 @@ import {
   CreateChatDialogData,
   CreateChatDialogResult
 } from '@app/layouts/messenger/dialogs/chat/create-chat.dialog.component';
-import { Observable } from 'rxjs';
+import { Observable, Subscription } from 'rxjs';
 import { Store, select } from '@ngrx/store';
 
 import * as AppStore from '@app/store';
@@ -44,7 +45,7 @@ export enum MainMenu {
   styleUrls: ['./left-side.component.scss'],
   animations: ucapAnimations
 })
-export class LeftSideComponent implements OnInit {
+export class LeftSideComponent implements OnInit, OnDestroy {
   @Output()
   openProfile = new EventEmitter<
     UserInfo | UserInfoSS | UserInfoF | UserInfoDN
@@ -52,7 +53,8 @@ export class LeftSideComponent implements OnInit {
 
   @ViewChildren('tabs') tabs: QueryList<ElementRef<HTMLDivElement>>;
 
-  badgeChatUnReadCount$: Observable<number>;
+  badgeChatUnReadCount: number;
+  badgeChatUnReadCountSubscription: Subscription;
 
   /** 조직도에서 부서원 선택 */
   selectedUserList: (UserInfo | UserInfoSS | UserInfoF | UserInfoDN)[] = [];
@@ -70,13 +72,25 @@ export class LeftSideComponent implements OnInit {
   ) {}
 
   ngOnInit() {
-    this.badgeChatUnReadCount$ = this.store.pipe(
-      select(AppStore.MessengerSelector.SyncSelector.selectChatUnreadCount)
-    );
+    this.badgeChatUnReadCountSubscription = this.store
+      .pipe(
+        select(AppStore.MessengerSelector.SyncSelector.selectChatUnreadCount)
+      )
+      .subscribe(count => {
+        this.badgeChatUnReadCount = count;
+      });
 
     this.setFabInitial(MainMenu.Group);
   }
 
+  ngOnDestroy(): void {
+    if (!!this.badgeChatUnReadCountSubscription) {
+      this.badgeChatUnReadCountSubscription.unsubscribe();
+    }
+
+    this.logger.debug('-----------------------LeftSideComponent ngOnDestroy');
+  }
+
   async onClickNewChat(type: string = 'NORMAL') {
     const result = await this.dialogService.open<
       CreateChatDialogComponent,
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 7fa4c7b4..70b6ddbf 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
@@ -165,10 +165,11 @@ export class GroupComponent implements OnInit, OnDestroy {
   }
 
   ngOnDestroy(): void {
-    this.logger.debug('ngOnDestroy');
     if (!!this.loginResSubscription) {
       this.loginResSubscription.unsubscribe();
     }
+
+    this.logger.debug('-----------------------GroupComponent ngOnDestroy');
   }
 
   async onClickGroupMenu(menuType: string) {
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/index.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/index.ts
index 37c9e76f..c692f94f 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/index.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/index.ts
@@ -1,5 +1,11 @@
 import { DIALOGS as CHAT_DIALOGS } from './chat';
 import { DIALOGS as GROUP_DIALOGS } from './group';
 import { DIALOGS as PROFILE_DIALOGS } from './profile';
+import { DIALOGS as SETTINGS_DIALOGS } from './settings';
 
-export const DIALOGS = [...CHAT_DIALOGS, ...GROUP_DIALOGS, ...PROFILE_DIALOGS];
+export const DIALOGS = [
+  ...CHAT_DIALOGS,
+  ...GROUP_DIALOGS,
+  ...PROFILE_DIALOGS,
+  ...SETTINGS_DIALOGS
+];
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/settings/index.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/settings/index.ts
new file mode 100644
index 00000000..69b38a00
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/settings/index.ts
@@ -0,0 +1,3 @@
+import { MessengerSettingsDialogComponent } from './messenger-settings.dialog.component';
+
+export const DIALOGS = [MessengerSettingsDialogComponent];
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/settings/messenger-settings.dialog.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/settings/messenger-settings.dialog.component.html
new file mode 100644
index 00000000..c03d6505
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/settings/messenger-settings.dialog.component.html
@@ -0,0 +1,92 @@
+<mat-card class="confirm-card mat-elevation-z" fxFlexFill>
+  <mat-card-header cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle>
+    <mat-card-title>설정</mat-card-title>
+  </mat-card-header>
+  <mat-card-content>
+    <div
+      fxLayout="column"
+      fxLayout.xs="column"
+      fxLayoutAlign="center"
+      fxLayoutGap="10px"
+      fxLayoutGap.xs="0"
+    >
+      <mat-tab-group flex="1" vertical animationDuration="0ms">
+        <mat-tab>
+          <ng-template mat-tab-label>
+            <mat-icon>group</mat-icon>
+            asdkfsdkfs
+          </ng-template>
+          하나
+        </mat-tab>
+        <mat-tab>
+          <ng-template mat-tab-label>
+            <mat-icon>group</mat-icon>
+            asdkfsdkfs
+          </ng-template>
+          둘
+        </mat-tab>
+        <mat-tab>
+          <ng-template mat-tab-label>
+            <mat-icon>group</mat-icon>
+            asdkfsdkfs
+          </ng-template>
+          셋
+        </mat-tab>
+        <mat-tab>
+          <ng-template mat-tab-label>
+            <mat-icon>group</mat-icon>
+            asdkfsdkfs
+          </ng-template>
+          넷
+        </mat-tab>
+      </mat-tab-group>
+
+      <div class="left-side-tabs-body">
+        <div
+          #tabs
+          id="tabs-0"
+          class="left-side-tabs-contents"
+          style="display: block;"
+        >
+          ddddd
+        </div>
+        <div
+          #tabs
+          id="tabs-1"
+          class="left-side-tabs-contents"
+          style="display: none;"
+        >
+          dddagadsfgadsf
+        </div>
+        <div
+          #tabs
+          id="tabs-2"
+          class="left-side-tabs-contents"
+          style="display: none;"
+        >
+          fbkasfldsafkskdf
+        </div>
+        <div
+          #tabs
+          id="tabs-3"
+          class="left-side-tabs-contents"
+          style="display: none;"
+        >
+          rgkdsfgkdfglkdsflgs
+        </div>
+      </div>
+    </div>
+  </mat-card-content>
+  <mat-card-actions class="button-farm flex-row">
+    <button
+      mat-stroked-button
+      (click)="onClickChoice(false)"
+      class="mat-primary"
+    >
+      No
+    </button>
+    <button mat-flat-button (click)="onClickChoice(true)" class="mat-primary">
+      Yes
+    </button>
+  </mat-card-actions>
+</mat-card>
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/settings/messenger-settings.dialog.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/settings/messenger-settings.dialog.component.scss
new file mode 100644
index 00000000..dd668f95
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/settings/messenger-settings.dialog.component.scss
@@ -0,0 +1,30 @@
+.confirm-card {
+  padding: 0px;
+  min-width: 500px;
+
+  .mat-card-header {
+    margin-bottom: 10px;
+    .mat-card-header-text {
+      .mat-card-title {
+        margin: 0 -16px;
+      }
+    }
+  }
+
+  .mat-card-content {
+    flex: 1 1 auto;
+    display: flex;
+
+    .content-box {
+      flex-direction: column;
+      flex-flow: column;
+    }
+  }
+
+  .button-farm {
+    text-align: right;
+    .mat-primary {
+      margin-left: 4px;
+    }
+  }
+}
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/settings/messenger-settings.dialog.component.spec.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/settings/messenger-settings.dialog.component.spec.ts
new file mode 100644
index 00000000..f19aa999
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/settings/messenger-settings.dialog.component.spec.ts
@@ -0,0 +1,27 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { MessengerSettingsDialogComponent } from './messenger-settings.dialog.component';
+
+describe('MessengerSettingsDialogComponent', () => {
+  let component: MessengerSettingsDialogComponent;
+  let fixture: ComponentFixture<MessengerSettingsDialogComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [MessengerSettingsDialogComponent]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MessengerSettingsDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/settings/messenger-settings.dialog.component.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/settings/messenger-settings.dialog.component.ts
new file mode 100644
index 00000000..39d49939
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/settings/messenger-settings.dialog.component.ts
@@ -0,0 +1,50 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
+import { KEY_LOGIN_RES_INFO } from '@app/types/login-res-info.type';
+import { KEY_VER_INFO } from '@app/types/ver-info.type';
+import { SessionStorageService } from '@ucap-webmessenger/web-storage';
+
+import { Store } from '@ngrx/store';
+
+import { DialogService } from '@ucap-webmessenger/ui';
+import { VersionInfo2Response } from '@ucap-webmessenger/api-public';
+import { LoginResponse } from '@ucap-webmessenger/protocol-authentication';
+import { map } from 'rxjs/operators';
+
+export interface MessengerSettingsDialogData {}
+
+export interface MessengerSettingsDialogResult {}
+
+@Component({
+  selector: 'app-messenger-settings-dialog',
+  templateUrl: './messenger-settings.dialog.component.html',
+  styleUrls: ['./messenger-settings.dialog.component.scss']
+})
+export class MessengerSettingsDialogComponent implements OnInit {
+  loginRes: LoginResponse;
+  sessionVerinfo: VersionInfo2Response;
+
+  constructor(
+    public dialogRef: MatDialogRef<
+      MessengerSettingsDialogData,
+      MessengerSettingsDialogResult
+    >,
+    @Inject(MAT_DIALOG_DATA) public data: MessengerSettingsDialogData,
+    private dialogService: DialogService,
+    private sessionStorageService: SessionStorageService,
+    private store: Store<any>
+  ) {
+    this.sessionVerinfo = this.sessionStorageService.get<VersionInfo2Response>(
+      KEY_VER_INFO
+    );
+    this.loginRes = this.sessionStorageService.get<LoginResponse>(
+      KEY_LOGIN_RES_INFO
+    );
+  }
+
+  ngOnInit() {}
+
+  onClickChoice(choice: boolean): void {
+    this.dialogRef.close({});
+  }
+}
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 5f79be55..e55d5058 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
@@ -9,14 +9,14 @@ import { Observable, Subscription } from 'rxjs';
 import {
   WindowIdle,
   UCAP_NATIVE_SERVICE,
-  NativeService,
+  NativeService
 } from '@ucap-webmessenger/native';
 
 import { UserInfo } from '@ucap-webmessenger/protocol-sync';
 import {
   UserInfoSS,
   UserInfoF,
-  UserInfoDN,
+  UserInfoDN
 } from '@ucap-webmessenger/protocol-query';
 import { StatusProtocolService } from '@ucap-webmessenger/protocol-status';
 import { StatusType, StatusCode } from '@ucap-webmessenger/core';
@@ -24,17 +24,18 @@ import { DialogService } from '@ucap-webmessenger/ui';
 import {
   ProfileDialogComponent,
   ProfileDialogData,
-  ProfileDialogResult,
+  ProfileDialogResult
 } from '@app/layouts/messenger/dialogs/profile/profile.dialog.component';
 import { MatSidenav, MatDrawer } from '@angular/material';
 import { SplitAreaDirective } from 'angular-split';
+import { NGXLogger } from 'ngx-logger';
 
 @Component({
   selector: 'app-page-messenger-main',
   templateUrl: './main.page.component.html',
-  styleUrls: ['./main.page.component.scss'],
+  styleUrls: ['./main.page.component.scss']
 })
-export class MainPageComponent implements OnInit {
+export class MainPageComponent implements OnInit, OnDestroy {
   selectedChat$: Observable<string | null>;
   selectedRightDrawer$: Observable<string | null>;
   idleStateChangedSubscription: Subscription;
@@ -49,7 +50,8 @@ export class MainPageComponent implements OnInit {
     @Inject(UCAP_NATIVE_SERVICE) private nativeService: NativeService,
     private store: Store<any>,
     private statusProtocolService: StatusProtocolService,
-    private dialogService: DialogService
+    private dialogService: DialogService,
+    private logger: NGXLogger
   ) {}
 
   ngOnInit(): void {
@@ -90,7 +92,7 @@ export class MainPageComponent implements OnInit {
         this.statusProtocolService.status({
           statusDivisionType: StatusType.Messenger,
           statusType,
-          statusMessage: '',
+          statusMessage: ''
         });
       });
 
@@ -101,7 +103,7 @@ export class MainPageComponent implements OnInit {
       });
   }
 
-  OnDestroy(): void {
+  ngOnDestroy(): void {
     if (!!this.idleStateChangedSubscription) {
       this.idleStateChangedSubscription.unsubscribe();
     }
@@ -109,13 +111,15 @@ export class MainPageComponent implements OnInit {
     if (!!this.chatOpenRoomSubscription) {
       this.chatOpenRoomSubscription.unsubscribe();
     }
+
+    this.logger.debug('-----------------------MainPageComponent ngOnDestroy');
   }
 
   onOpenedChange(event: boolean) {
     if (!event) {
       this.store.dispatch(
         ChatStore.selectedRightDrawer({
-          req: null,
+          req: null
         })
       );
     }
@@ -135,8 +139,8 @@ export class MainPageComponent implements OnInit {
       ProfileDialogResult
     >(ProfileDialogComponent, {
       data: {
-        userInfo,
-      },
+        userInfo
+      }
     });
   }
 
diff --git a/projects/ucap-webmessenger-app/src/app/services/native.service.ts b/projects/ucap-webmessenger-app/src/app/services/native.service.ts
index b5ed1a91..a30088b1 100644
--- a/projects/ucap-webmessenger-app/src/app/services/native.service.ts
+++ b/projects/ucap-webmessenger-app/src/app/services/native.service.ts
@@ -4,6 +4,7 @@ import { Store } from '@ngrx/store';
 import { NGXLogger } from 'ngx-logger';
 
 import * as AuthenticationStore from '@app/store/account/authentication';
+import * as SettingsStore from '@app/store/messenger/settings';
 
 @Injectable({
   providedIn: 'root'
@@ -20,6 +21,8 @@ export class AppNativeService {
       this.store.dispatch(AuthenticationStore.logout());
     });
     this.nativeService.changeStatus().subscribe(statusCode => {});
-    this.nativeService.showSetting().subscribe(() => {});
+    this.nativeService.showSetting().subscribe(() => {
+      this.store.dispatch(SettingsStore.showDialog());
+    });
   }
 }
diff --git a/projects/ucap-webmessenger-app/src/app/store/account/authentication/effects.ts b/projects/ucap-webmessenger-app/src/app/store/account/authentication/effects.ts
index 33ef6d5c..b3da389c 100644
--- a/projects/ucap-webmessenger-app/src/app/store/account/authentication/effects.ts
+++ b/projects/ucap-webmessenger-app/src/app/store/account/authentication/effects.ts
@@ -125,9 +125,11 @@ export class Effects {
         ofType(loginRedirect),
         tap(authed => {
           this.ngZone.run(() => {
-            this.appAuthenticationService.logout();
-            this.store.dispatch(logoutInitialize());
-            location.href = this.router.parseUrl('/account/login').toString();
+            // location.href = this.router.parseUrl('/account/login').toString();
+            this.router.navigate(['/account/login']).then(() => {
+              this.appAuthenticationService.logout();
+              this.store.dispatch(logoutInitialize());
+            });
           });
         })
       ),
diff --git a/projects/ucap-webmessenger-app/src/app/store/messenger/index.ts b/projects/ucap-webmessenger-app/src/app/store/messenger/index.ts
index 86c65df5..44ba4d69 100644
--- a/projects/ucap-webmessenger-app/src/app/store/messenger/index.ts
+++ b/projects/ucap-webmessenger-app/src/app/store/messenger/index.ts
@@ -8,6 +8,7 @@ import * as QueryStore from './query';
 import * as RoomStore from './room';
 import * as StatusStore from './status';
 import * as SyncStore from './sync';
+import * as SettingsStore from './settings';
 
 export interface State {
   chat: ChatStore.State;
@@ -17,6 +18,7 @@ export interface State {
   room: RoomStore.State;
   status: StatusStore.State;
   sync: SyncStore.State;
+  settings: SettingsStore.State;
 }
 
 export const effects: Type<any>[] = [
@@ -26,7 +28,8 @@ export const effects: Type<any>[] = [
   QueryStore.Effects,
   RoomStore.Effects,
   StatusStore.Effects,
-  SyncStore.Effects
+  SyncStore.Effects,
+  SettingsStore.Effects
 ];
 
 export function reducers(state: State | undefined, action: Action) {
@@ -37,53 +40,36 @@ export function reducers(state: State | undefined, action: Action) {
     query: QueryStore.reducer,
     room: RoomStore.reducer,
     status: StatusStore.reducer,
-    sync: SyncStore.reducer
+    sync: SyncStore.reducer,
+    settings: SettingsStore.reducer
   })(state, action);
 }
 
 export function selectors<S>(selector: Selector<any, State>) {
   return {
     ChatSelector: ChatStore.selectors(
-      createSelector(
-        selector,
-        (state: State) => state.chat
-      )
+      createSelector(selector, (state: State) => state.chat)
     ),
     EventSelector: EventStore.selectors(
-      createSelector(
-        selector,
-        (state: State) => state.event
-      )
+      createSelector(selector, (state: State) => state.event)
     ),
     OptionSelector: OptionStore.selectors(
-      createSelector(
-        selector,
-        (state: State) => state.option
-      )
+      createSelector(selector, (state: State) => state.option)
     ),
     RoomSelector: RoomStore.selectors(
-      createSelector(
-        selector,
-        (state: State) => state.room
-      )
+      createSelector(selector, (state: State) => state.room)
     ),
     QuerySelector: QueryStore.selectors(
-      createSelector(
-        selector,
-        (state: State) => state.query
-      )
+      createSelector(selector, (state: State) => state.query)
     ),
     StatusSelector: StatusStore.selectors(
-      createSelector(
-        selector,
-        (state: State) => state.status
-      )
+      createSelector(selector, (state: State) => state.status)
     ),
     SyncSelector: SyncStore.selectors(
-      createSelector(
-        selector,
-        (state: State) => state.sync
-      )
+      createSelector(selector, (state: State) => state.sync)
+    ),
+    SettingsSelector: SettingsStore.selectors(
+      createSelector(selector, (state: State) => state.settings)
     )
   };
 }
diff --git a/projects/ucap-webmessenger-app/src/app/store/messenger/settings/actions.ts b/projects/ucap-webmessenger-app/src/app/store/messenger/settings/actions.ts
new file mode 100644
index 00000000..f75be40d
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/store/messenger/settings/actions.ts
@@ -0,0 +1,3 @@
+import { createAction, props } from '@ngrx/store';
+
+export const showDialog = createAction('[Messenger::Settings] Show Dialog');
diff --git a/projects/ucap-webmessenger-app/src/app/store/messenger/settings/effects.ts b/projects/ucap-webmessenger-app/src/app/store/messenger/settings/effects.ts
new file mode 100644
index 00000000..3da13c52
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/store/messenger/settings/effects.ts
@@ -0,0 +1,47 @@
+import { Injectable } from '@angular/core';
+
+import { tap } from 'rxjs/operators';
+
+import { Actions, createEffect, ofType } from '@ngrx/effects';
+import { Store } from '@ngrx/store';
+
+import { NGXLogger } from 'ngx-logger';
+
+import { DialogService } from '@ucap-webmessenger/ui';
+
+import { showDialog } from './actions';
+import {
+  MessengerSettingsDialogComponent,
+  MessengerSettingsDialogData,
+  MessengerSettingsDialogResult
+} from '@app/layouts/messenger/dialogs/settings/messenger-settings.dialog.component';
+
+@Injectable()
+export class Effects {
+  showDialog$ = createEffect(
+    () =>
+      this.actions$.pipe(
+        ofType(showDialog),
+        tap(async () => {
+          const result = await this.dialogService.open<
+            MessengerSettingsDialogComponent,
+            MessengerSettingsDialogData,
+            MessengerSettingsDialogResult
+          >(MessengerSettingsDialogComponent, {
+            width: '800px',
+            height: '800px',
+            disableClose: false,
+            data: {}
+          });
+        })
+      ),
+    { dispatch: false }
+  );
+
+  constructor(
+    private actions$: Actions,
+    private store: Store<any>,
+    private dialogService: DialogService,
+    private logger: NGXLogger
+  ) {}
+}
diff --git a/projects/ucap-webmessenger-app/src/app/store/messenger/settings/index.ts b/projects/ucap-webmessenger-app/src/app/store/messenger/settings/index.ts
new file mode 100644
index 00000000..2663cade
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/store/messenger/settings/index.ts
@@ -0,0 +1,4 @@
+export * from './actions';
+export * from './effects';
+export * from './reducers';
+export * from './state';
diff --git a/projects/ucap-webmessenger-app/src/app/store/messenger/settings/reducers.ts b/projects/ucap-webmessenger-app/src/app/store/messenger/settings/reducers.ts
new file mode 100644
index 00000000..3e8db1d9
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/store/messenger/settings/reducers.ts
@@ -0,0 +1,4 @@
+import { createReducer } from '@ngrx/store';
+import { initialState } from './state';
+
+export const reducer = createReducer(initialState);
diff --git a/projects/ucap-webmessenger-app/src/app/store/messenger/settings/state.ts b/projects/ucap-webmessenger-app/src/app/store/messenger/settings/state.ts
new file mode 100644
index 00000000..5856c359
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/store/messenger/settings/state.ts
@@ -0,0 +1,11 @@
+import { Selector, createSelector } from '@ngrx/store';
+import { StatusBulkInfo } from '@ucap-webmessenger/protocol-status';
+import { EntityState, createEntityAdapter } from '@ngrx/entity';
+
+export interface State {}
+
+export const initialState: State = {};
+
+export function selectors<S>(selector: Selector<any, State>) {
+  return {};
+}
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 69c5863a..22600831 100644
--- a/projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss
+++ b/projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss
@@ -77,8 +77,8 @@ $lg-red: (
     A200: $light-primary-text,
     A400: $light-primary-text,
     A700: $light-primary-text,
-    G100:$dark-primary-text,
-    G900:$light-primary-text
+    G100: $dark-primary-text,
+    G900: $light-primary-text
   )
 );
 
@@ -98,7 +98,7 @@ $daesang: (
   A400: #00e5ff,
   A700: #00b8d4,
   G100: #6dd5ed,
-  /*G900: #192a2c,*/G900: #2193b0,
+  /*G900: #192a2c,*/ G900: #2193b0,
   contrast: (
     50: $dark-primary-text,
     100: $dark-primary-text,
@@ -130,14 +130,14 @@ $daesang: (
   $background: map-get($theme, background);
   $foreground: map-get($theme, foreground);
 
-  $gradient-darkest:mat-color($accent, G900);
-  $gradient-light:mat-color($accent, G100);
+  $gradient-darkest: mat-color($accent, G900);
+  $gradient-light: mat-color($accent, G100);
 
-  .bg-primary-dark{
+  .bg-primary-dark {
     background: mat-color($primary, 900);
     color: mat-color($primary, default-contrast);
   }
-  .bg-primary-light{
+  .bg-primary-light {
     background: mat-color($primary, 300);
     color: mat-color($primary, default-contrast);
   }
@@ -191,13 +191,13 @@ $daesang: (
      color: mat-color($accent, 800);
    }*/
   .global-menu {
-    .mat-tab-label[aria-selected='true']{
-     .mat-tab-label-content{
-      .icon-item{
-        background: mat-color($accent, 300);
-         }
-       }
-     }
+    .mat-tab-label[aria-selected='true'] {
+      .mat-tab-label-content {
+        .icon-item {
+          background: mat-color($accent, 300);
+        }
+      }
+    }
   }
 
   .mat-form-field-appearance-legacy {
@@ -221,7 +221,7 @@ $daesang: (
     box-shadow: none;
     border-radius: 0px;
   }
-  .btn-main-float .bg-accent-dark{
+  .btn-main-float .bg-accent-dark {
     background: mat-color($accent, 600);
     color: mat-color($primary, default-contrast);
   }
@@ -232,8 +232,38 @@ $daesang: (
     height: 70px;
     background-color: #eeeeee;
     background: $gradient-light;
-    background: -webkit-linear-gradient(to right, $gradient-darkest, $gradient-light);
+    background: -webkit-linear-gradient(
+      to right,
+      $gradient-darkest,
+      $gradient-light
+    );
     background: linear-gradient(to right, $gradient-darkest, $gradient-light);
-    color:#ffffff;
+    color: #ffffff;
+  }
+
+  mat-tab-group[vertical] {
+    display: flex;
+    flex-direction: row !important;
+
+    .mat-tab-labels {
+      display: flex;
+      flex-direction: column !important;
+    }
+
+    .mat-ink-bar {
+      width: 0px !important;
+      height: 50px;
+      left: 98% !important;
+    }
+  }
+
+  nav[mat-tab-nav-bar][vertical] {
+    display: flex;
+    flex-direction: row !important;
+  }
+
+  nav[mat-tab-nav-bar][vertical] .mat-tab-links {
+    display: flex;
+    flex-direction: column !important;
   }
 }
diff --git a/projects/ucap-webmessenger-ui-organization/src/lib/components/tree.component.ts b/projects/ucap-webmessenger-ui-organization/src/lib/components/tree.component.ts
index b41128d1..eb881b2f 100644
--- a/projects/ucap-webmessenger-ui-organization/src/lib/components/tree.component.ts
+++ b/projects/ucap-webmessenger-ui-organization/src/lib/components/tree.component.ts
@@ -6,7 +6,8 @@ import {
   ViewChild,
   Output,
   EventEmitter,
-  AfterViewInit
+  AfterViewInit,
+  OnDestroy
 } from '@angular/core';
 import { MatTreeFlattener, MatTree } from '@angular/material';
 import { NGXLogger } from 'ngx-logger';
@@ -36,12 +37,13 @@ interface FlatNode {
   templateUrl: './tree.component.html',
   styleUrls: ['./tree.component.scss']
 })
-export class TreeComponent implements OnInit, AfterViewInit {
+export class TreeComponent implements OnInit, OnDestroy, AfterViewInit {
   @Output()
   selected = new EventEmitter<DeptInfo>();
 
   @Input()
   loginRes: LoginResponse;
+
   @Input()
   set oraganizationList(deptInfoList: DeptInfo[]) {
     if (!deptInfoList || 0 === deptInfoList.length) {
@@ -127,6 +129,10 @@ export class TreeComponent implements OnInit, AfterViewInit {
 
   ngOnInit() {}
 
+  ngOnDestroy(): void {
+    this.logger.debug('-----------------------TreeComponent ngOnDestroy');
+  }
+
   ngAfterViewInit(): void {
     this.dataSource.cdkVirtualScrollViewport = this.cvsvOrganization;
   }
diff --git a/projects/ucap-webmessenger-ui/src/lib/data-source/virtual-scroll-tree-flat.data-source.ts b/projects/ucap-webmessenger-ui/src/lib/data-source/virtual-scroll-tree-flat.data-source.ts
index c2f66074..56a2ee84 100644
--- a/projects/ucap-webmessenger-ui/src/lib/data-source/virtual-scroll-tree-flat.data-source.ts
+++ b/projects/ucap-webmessenger-ui/src/lib/data-source/virtual-scroll-tree-flat.data-source.ts
@@ -115,6 +115,12 @@ export class VirtualScrollTreeFlatDataSource<T, F> extends DataSource<F> {
   }
 
   disconnect() {
+    console.log('VirtualScrollTreeFlatDataSource disconnect');
+    if (!!this.connectSubject) {
+      this.connectSubject.next();
+      this.connectSubject.unsubscribe();
+    }
+
     if (!!this.dataChangeSubscription) {
       this.dataChangeSubscription.unsubscribe();
     }