diff --git a/projects/ucap-webmessenger-app/src/app/layouts/common/common.layout.module.ts b/projects/ucap-webmessenger-app/src/app/layouts/common/common.layout.module.ts
new file mode 100644
index 00000000..8e0d7fcf
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/layouts/common/common.layout.module.ts
@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { FlexLayoutModule } from '@angular/flex-layout';
+
+import { MatIconModule } from '@angular/material/icon';
+import { MatToolbarModule } from '@angular/material/toolbar';
+
+import { UCapUiModule } from '@ucap-webmessenger/ui';
+
+import { COMPONENTS } from './components';
+import { DIALOGS } from './dialogs';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FlexLayoutModule,
+    MatIconModule,
+    MatToolbarModule,
+    UCapUiModule
+  ],
+  exports: [...COMPONENTS, ...DIALOGS],
+  declarations: [...COMPONENTS, ...DIALOGS],
+  entryComponents: [...DIALOGS]
+})
+export class AppCommonLayoutModule {}
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/common/components/index.ts b/projects/ucap-webmessenger-app/src/app/layouts/common/components/index.ts
new file mode 100644
index 00000000..98bcc9bb
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/layouts/common/components/index.ts
@@ -0,0 +1 @@
+export const COMPONENTS = [];
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/common/dialogs/image-viewer.dialog.component.html b/projects/ucap-webmessenger-app/src/app/layouts/common/dialogs/image-viewer.dialog.component.html
new file mode 100644
index 00000000..e69de29b
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/common/dialogs/image-viewer.dialog.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/common/dialogs/image-viewer.dialog.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/common/dialogs/image-viewer.dialog.component.spec.ts b/projects/ucap-webmessenger-app/src/app/layouts/common/dialogs/image-viewer.dialog.component.spec.ts
new file mode 100644
index 00000000..6d3c789c
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/layouts/common/dialogs/image-viewer.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 { ImageViewerDialogComponent } from './image-viewer.dialog.component';
+
+describe('ImageViewerDialogComponent', () => {
+  let component: ImageViewerDialogComponent;
+  let fixture: ComponentFixture<ImageViewerDialogComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ImageViewerDialogComponent]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ImageViewerDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/common/dialogs/image-viewer.dialog.component.ts b/projects/ucap-webmessenger-app/src/app/layouts/common/dialogs/image-viewer.dialog.component.ts
new file mode 100644
index 00000000..dfa13ae4
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/layouts/common/dialogs/image-viewer.dialog.component.ts
@@ -0,0 +1,34 @@
+import {
+  Component,
+  OnInit,
+  OnDestroy,
+  Inject,
+  EventEmitter
+} from '@angular/core';
+
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
+import { NGXLogger } from 'ngx-logger';
+
+export interface ImageViewerDialogData {}
+
+export interface ImageViewerDialogResult {}
+
+@Component({
+  selector: 'app-layout-common-image-viewer',
+  templateUrl: './image-viewer.dialog.component.html',
+  styleUrls: ['./image-viewer.dialog.component.scss']
+})
+export class ImageViewerDialogComponent implements OnInit, OnDestroy {
+  constructor(
+    public dialogRef: MatDialogRef<
+      ImageViewerDialogData,
+      ImageViewerDialogResult
+    >,
+    @Inject(MAT_DIALOG_DATA) public data: ImageViewerDialogData,
+    private logger: NGXLogger
+  ) {}
+
+  ngOnInit() {}
+
+  ngOnDestroy(): void {}
+}
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/common/dialogs/index.ts b/projects/ucap-webmessenger-app/src/app/layouts/common/dialogs/index.ts
new file mode 100644
index 00000000..d67d8652
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/layouts/common/dialogs/index.ts
@@ -0,0 +1,3 @@
+import { ImageViewerDialogComponent } from './image-viewer.dialog.component';
+
+export const DIALOGS = [ImageViewerDialogComponent];
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 d9dd91b3..c8d3929f 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
@@ -5,7 +5,7 @@
       <mat-icon>chat</mat-icon>
     </button>
   </div>-->
-  <div class="logo">로고</div>
+  <!-- <div class="logo">로고</div> -->
   <mat-tab-group mat-stretch-tabs animationDuration="0ms" class="global-menu">
     <mat-tab>
       <ng-template mat-tab-label>
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 8fab5dc4..7a51d48b 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
@@ -32,7 +32,7 @@
     border-right: 1px solid #dddddd;
     .mat-tab-list {
       .mat-tab-labels {
-        padding-top: 30px;
+        padding-top: 0px;
         flex-flow: column;
         height: 280px;
         .mat-tab-label {
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.html
index ac633a00..5b0c7537 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.html
@@ -1,5 +1,5 @@
 <div class="app-layout-chat-left-sidenav-chat-header">
-  <mat-form-field class="w-100-p">
+  <mat-form-field class="w-100-p" floatLabel="never">
     <input
       matInput
       #inputSearch
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts
index 6fb1a60f..ca3a84af 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts
@@ -1,4 +1,3 @@
-import { forward } from './../../../store/messenger/event/actions';
 import {
   Component,
   OnInit,
@@ -50,6 +49,11 @@ import {
   CreateChatDialogData,
   CreateChatDialogResult
 } from '../dialogs/chat/create-chat.dialog.component';
+import {
+  ImageViewerDialogComponent,
+  ImageViewerDialogData,
+  ImageViewerDialogResult
+} from '@app/layouts/common/dialogs/image-viewer.dialog.component';
 import { Maximum_Range } from '@ucap-webmessenger/core';
 
 @Component({
@@ -231,8 +235,20 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewChecked {
     );
   }
 
-  onImageViewer(value: FileInfo) {
+  async onImageViewer(value: FileInfo) {
     this.logger.debug('imageViewer', value);
+    const result = await this.dialogService.open<
+      ImageViewerDialogComponent,
+      ImageViewerDialogData,
+      ImageViewerDialogResult
+    >(ImageViewerDialogComponent, {
+      position: {
+        top: '10px'
+      },
+      width: '100%',
+      height: '98%',
+      data: {}
+    });
   }
 
   /** File Save, Save As */
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/messenger.layout.module.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/messenger.layout.module.ts
index e35dff82..88ce86d8 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/messenger.layout.module.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/messenger.layout.module.ts
@@ -2,6 +2,7 @@ import { MatListModule } from '@angular/material/list';
 import { MatChipsModule } from '@angular/material/chips';
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule } from '@angular/forms';
 
 import { FlexLayoutModule } from '@angular/flex-layout';
 
@@ -32,9 +33,10 @@ import { UCapUiProfileModule } from '@ucap-webmessenger/ui-profile';
 import { UCapUiGroupModule } from '@ucap-webmessenger/ui-group';
 import { UCapUiOrganizationModule } from '@ucap-webmessenger/ui-organization';
 
+import { AppCommonLayoutModule } from '@app/layouts/common/common.layout.module';
+
 import { COMPONENTS } from './components';
 import { DIALOGS } from './dialogs';
-import { ReactiveFormsModule } from '@angular/forms';
 
 @NgModule({
   imports: [
@@ -66,7 +68,9 @@ import { ReactiveFormsModule } from '@angular/forms';
     UCapUiRoomModule,
     UCapUiProfileModule,
     UCapUiGroupModule,
-    UCapUiOrganizationModule
+    UCapUiOrganizationModule,
+
+    AppCommonLayoutModule
   ],
   exports: [...COMPONENTS, ...DIALOGS],
   declarations: [...COMPONENTS, ...DIALOGS],
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.html b/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.html
index fe1fbbb9..1780ab4a 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.html
@@ -1,4 +1,7 @@
 <mat-toolbar class="app-layout-native-title-bar">
+  <div class="app-layout-native-title-bar-logo">
+    <img src="assets/images/logo/ico_64x64.png" />
+  </div>
   <div class="app-layout-native-title-bar-title">UCAP M Messenger</div>
   <div class="app-layout-native-title-bar-spacer"></div>
   <div class="app-layout-native-title-bar-actions">
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.scss
index 68e8fe40..47330b04 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.scss
@@ -7,12 +7,25 @@
     right: 0;
     top: 0;
     display: flex;
+    padding-left: 5px;
+    padding-right: 0px;
     // align-items: center;
     // justify-content: center;
     // flex-direction: row-reverse;
     cursor: pointer;
     background: white;
     height: 30px;
+    border-bottom: 1px solid #d5dadb;
+
+    .app-layout-native-title-bar-logo {
+      width: 16px;
+      height: 16px;
+    }
+
+    .app-layout-native-title-bar-title {
+      padding-left: 8px;
+      font-size: 12px;
+    }
 
     .app-layout-native-title-bar-spacer {
       flex: 1 1 auto;
@@ -73,9 +86,5 @@
         }
       }
     }
-
-    .app-layout-native-title-bar-title {
-      font-size: 12px;
-    }
   }
 }
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 4f7e98ab..953aa782 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,7 +1,8 @@
 .container {
   height: 100%;
-  display:flex;
+  display: flex;
   flex-flow: row;
+  padding-top: 30px;
 
   .left-side {
     width: 380px;
@@ -9,8 +10,8 @@
     flex: 0 0 auto;
   }
   .contents {
-    flex:1 1 auto;
-    min-width:400px;
+    flex: 1 1 auto;
+    min-width: 400px;
     height: 100%;
 
     .messages {
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
new file mode 100644
index 00000000..adbc1dd4
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/images/logo/ico_64x64.png differ
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 ba574184..45480112 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
@@ -9,18 +9,6 @@
   </span>
   <dl class="item-default">
     <dt>
-      <!-- <img
-        class="thumbnail"
-        [src]="
-          profileImageRoot
-            | ucapUiImaage
-              : {
-                  path: userInfo.profileImageFile,
-                  default: 'assets/images/img_nophoto_50.png'
-                }
-            | async
-        "
-      /> -->
       <img
         class="thumbnail"
         ucapUiImage
@@ -28,13 +16,6 @@
         [path]="userInfo.profileImageFile"
         [default]="'assets/images/img_nophoto_50.png'"
       />
-
-      <!-- <ucap-ui-imaage
-        [imageClass]="'thumbnail'"
-        [base]="profileImageRoot"
-        [path]="userInfo.profileImageFile"
-        [default]="'assets/images/img_nophoto_50.png'"
-      ></ucap-ui-imaage> -->
     </dt>
     <dd class="info">
       <div class="detail">