diff --git a/projects/ucap-webmessenger-app/src/app/app.module.ts b/projects/ucap-webmessenger-app/src/app/app.module.ts
index b0f1936a..ff01e3d5 100644
--- a/projects/ucap-webmessenger-app/src/app/app.module.ts
+++ b/projects/ucap-webmessenger-app/src/app/app.module.ts
@@ -37,6 +37,7 @@ import { AppTranslateModule } from './app-translate.module';
 import { AppComponent } from './app.component';
 
 import { GUARDS } from './guards';
+import { AppMessengerLayoutModule } from './layouts/messenger/messenger.layout.module';
 
 @NgModule({
   imports: [
@@ -83,6 +84,8 @@ import { GUARDS } from './guards';
     AppStoreModule,
     AppTranslateModule,
 
+    AppMessengerLayoutModule,
+
     LoggerModule.forRoot({
       level: NgxLoggerLevel.DEBUG
     })
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 8d034931..7046e4ef 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
@@ -5,7 +5,7 @@ import { map } from 'rxjs/operators';
 
 import { Store, select } from '@ngrx/store';
 
-import { ucapAnimations } from '@ucap-webmessenger/ui';
+import { ucapAnimations, DialogService } from '@ucap-webmessenger/ui';
 import { UserInfo, GroupDetailData } from '@ucap-webmessenger/protocol-sync';
 
 import * as AppStore from '@app/store';
@@ -15,6 +15,11 @@ 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/create-group.dialog.component';
 
 @Component({
   selector: 'app-layout-chat-left-sidenav-group',
@@ -35,6 +40,7 @@ export class GroupComponent implements OnInit {
   constructor(
     private store: Store<any>,
     private sessionStorageService: SessionStorageService,
+    private dialogService: DialogService,
     private logger: NGXLogger
   ) {}
 
@@ -43,11 +49,7 @@ export class GroupComponent implements OnInit {
     this.companyCode = loginInfo.companyCode;
 
     this.companyList$ = this.store.pipe(
-      select(AppStore.SettingSelector.CompanySelector.companyList),
-      map(list => {
-        this.logger.debug('list', list);
-        return list;
-      })
+      select(AppStore.SettingSelector.CompanySelector.companyList)
     );
 
     this.groupBuddyList$ = this.store
@@ -95,16 +97,33 @@ export class GroupComponent implements OnInit {
       );
   }
 
-  onClickGroupMenu(menuType: string) {
+  async onClickGroupMenu(menuType: string) {
     this.logger.debug('menuType', menuType);
     switch (menuType) {
       case 'GROUP_NEW':
+        {
+          const result = await this.dialogService.open<
+            CreateGroupDialogComponent,
+            CreateGroupDialogData,
+            CreateGroupDialogResult
+          >(CreateGroupDialogComponent, {
+            width: '220px',
+            data: {
+              title: 'Logout',
+              message: 'Logout ?'
+            }
+          });
+        }
         break;
       case 'GROUP_EXPAND_MORE':
-        this.groupExpansionPanel.expandMore();
+        {
+          this.groupExpansionPanel.expandMore();
+        }
         break;
       case 'GROUP_EXPAND_LESS':
-        this.groupExpansionPanel.expandLess();
+        {
+          this.groupExpansionPanel.expandLess();
+        }
         break;
       case 'GROUP_SAVE':
         break;
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/confirm.dialog.component.spec.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/confirm.dialog.component.spec.ts
deleted file mode 100644
index de089c82..00000000
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/confirm.dialog.component.spec.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { ConfirmDialogComponent } from './confirm.dialog.component';
-
-describe('ui::ConfirmDialogComponent', () => {
-  let component: ConfirmDialogComponent;
-  let fixture: ComponentFixture<ConfirmDialogComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ConfirmDialogComponent]
-    }).compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(ConfirmDialogComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/confirm.dialog.component.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/confirm.dialog.component.ts
deleted file mode 100644
index 4ca3a569..00000000
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/confirm.dialog.component.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-import {
-  Component,
-  OnInit,
-  Inject,
-  ViewChild,
-  ElementRef
-} from '@angular/core';
-import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
-
-export interface ConfirmDialogData {
-  title: string;
-  message?: string;
-  html?: string;
-  hideAction?: boolean;
-}
-
-export interface ConfirmDialogResult {
-  choice: boolean;
-}
-
-@Component({
-  selector: 'ucap-ui-confirm-dialog',
-  templateUrl: './confirm.dialog.component.html',
-  styleUrls: ['./confirm.dialog.component.scss']
-})
-export class ConfirmDialogComponent implements OnInit {
-  @ViewChild('messageContainer', { static: true })
-  messageContainer: ElementRef;
-
-  hideAction = false;
-
-  constructor(
-    public dialogRef: MatDialogRef<ConfirmDialogComponent, ConfirmDialogResult>,
-    @Inject(MAT_DIALOG_DATA) public data: ConfirmDialogData
-  ) {}
-
-  ngOnInit(): void {
-    if (!!this.data.html) {
-      this.messageContainer.nativeElement.innerHTML = this.data.html;
-    }
-    if (!!this.data.hideAction) {
-      this.hideAction = this.data.hideAction;
-    }
-  }
-
-  onClickChoice(choice: boolean): void {
-    this.dialogRef.close({
-      choice
-    });
-  }
-}
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/confirm.dialog.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/create-group.dialog.component.html
similarity index 56%
rename from projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/confirm.dialog.component.html
rename to projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/create-group.dialog.component.html
index 7ea339fa..09d25dfe 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/confirm.dialog.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/create-group.dialog.component.html
@@ -1,14 +1,9 @@
 <mat-card class="confirm-card">
   <mat-card-header cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle>
-    <mat-card-title>{{ data.title }}</mat-card-title>
-    <!-- <mat-card-subtitle>Confirm</mat-card-subtitle> -->
+    <mat-card-title>새 그룹 추가</mat-card-title>
   </mat-card-header>
-  <mat-card-content>
-    <div #messageContainer class="notice">
-      {{ data.message }}
-    </div>
-  </mat-card-content>
-  <mat-card-actions *ngIf="!hideAction" class="button-farm flex-row">
+  <mat-card-content> </mat-card-content>
+  <mat-card-actions class="button-farm flex-row">
     <button
       mat-stroked-button
       (click)="onClickChoice(false)"
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/confirm.dialog.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/create-group.dialog.component.scss
similarity index 100%
rename from projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/confirm.dialog.component.scss
rename to projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/create-group.dialog.component.scss
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/create-group.dialog.component.spec.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/create-group.dialog.component.spec.ts
new file mode 100644
index 00000000..421bfc22
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/create-group.dialog.component.spec.ts
@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CreateGroupDialogComponent } from './create-group.dialog.component';
+
+describe('app::layouts::messenger::CreateGroupDialogComponent', () => {
+  let component: CreateGroupDialogComponent;
+  let fixture: ComponentFixture<CreateGroupDialogComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [CreateGroupDialogComponent]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CreateGroupDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/create-group.dialog.component.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/create-group.dialog.component.ts
new file mode 100644
index 00000000..6ae5d6b1
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/create-group.dialog.component.ts
@@ -0,0 +1,34 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
+
+export interface CreateGroupDialogData {
+  title: string;
+  message?: string;
+}
+
+export interface CreateGroupDialogResult {
+  choice: boolean;
+}
+
+@Component({
+  selector: 'app-layout-messenger-create-group',
+  templateUrl: './create-group.dialog.component.html',
+  styleUrls: ['./create-group.dialog.component.scss']
+})
+export class CreateGroupDialogComponent implements OnInit {
+  constructor(
+    public dialogRef: MatDialogRef<
+      CreateGroupDialogData,
+      CreateGroupDialogResult
+    >,
+    @Inject(MAT_DIALOG_DATA) public data: CreateGroupDialogData
+  ) {}
+
+  ngOnInit(): void {}
+
+  onClickChoice(choice: boolean): void {
+    this.dialogRef.close({
+      choice
+    });
+  }
+}
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
new file mode 100644
index 00000000..dc006a67
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/index.ts
@@ -0,0 +1,3 @@
+import { CreateGroupDialogComponent } from './create-group.dialog.component';
+
+export const DIALOGS = [CreateGroupDialogComponent];
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 52badfcc..5d97d48f 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
@@ -3,31 +3,43 @@ import { CommonModule } from '@angular/common';
 
 import { FlexLayoutModule } from '@angular/flex-layout';
 
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MatDialogModule } from '@angular/material/dialog';
 import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatTabsModule } from '@angular/material/tabs';
 import { MatToolbarModule } from '@angular/material/toolbar';
 
+import { DragDropModule } from '@angular/cdk/drag-drop';
+
+import { UCapUiModule } from '@ucap-webmessenger/ui';
 import { UCapUiChatModule } from '@ucap-webmessenger/ui-chat';
 import { UCapUiGroupModule } from '@ucap-webmessenger/ui-group';
 import { UCapUiOrganizationModule } from '@ucap-webmessenger/ui-organization';
 
 import { COMPONENTS } from './components';
+import { DIALOGS } from './dialogs';
 
 @NgModule({
   imports: [
     CommonModule,
     FlexLayoutModule,
+    DragDropModule,
+    MatButtonModule,
+    MatCardModule,
+    MatDialogModule,
     MatIconModule,
     MatMenuModule,
     MatTabsModule,
     MatToolbarModule,
+    UCapUiModule,
     UCapUiChatModule,
     UCapUiGroupModule,
     UCapUiOrganizationModule
   ],
-  exports: [...COMPONENTS],
-  declarations: [...COMPONENTS],
-  entryComponents: []
+  exports: [...COMPONENTS, ...DIALOGS],
+  declarations: [...COMPONENTS, ...DIALOGS],
+  entryComponents: [...DIALOGS]
 })
 export class AppMessengerLayoutModule {}