diff --git a/projects/ucap-webmessenger-app/src/app/app.theme.scss b/projects/ucap-webmessenger-app/src/app/app.theme.scss
index dbaa7cc2..e01b076b 100644
--- a/projects/ucap-webmessenger-app/src/app/app.theme.scss
+++ b/projects/ucap-webmessenger-app/src/app/app.theme.scss
@@ -37,14 +37,14 @@ $theme: mat-light-theme(
 
 // Add ".theme-default" class to the body to activate this theme.
 // Class name must start with "theme-" !!!
-body.theme-default {
+/*body.theme-default {
   // Create an Angular Material theme from the $theme map
   @include angular-material-theme($theme);
 
   // Apply the theme to the user components
   @include components-theme($theme);
-  @include  ucap-material-theme($theme);
-}
+  @include ucap-material-theme($theme);
+}*/
 
 // -----------------------------------------------------------------------------------------------------
 // @ Define a blue-gray dark theme
@@ -103,8 +103,8 @@ body.theme-pink-dark {
 // -----------------------------------------------------------------------------------------------------
 
 // Define the primary, accent and warn palettes
-$pink-light-theme-primary-palette: mat-palette($mat-pink);
-$pink-light-theme-accent-palette: mat-palette($mat-pink);
+$pink-light-theme-primary-palette: mat-palette($mat-grey,800);
+$pink-light-theme-accent-palette: mat-palette($lg-red, 400);
 $pink-light-theme-warn-palette: mat-palette($mat-red);
 
 // Create the Material theme object
@@ -116,10 +116,11 @@ $pink-light-theme: mat-light-theme(
 
 // Add ".theme-pink-dark" class to the body to activate this theme.
 // Class name must start with "theme-" !!!
-body.theme-pink-light {
+body.theme-default  {
   // Generate the Angular Material theme
   @include angular-material-theme($pink-light-theme);
 
   // Apply the theme to the user components
   @include components-theme($pink-light-theme);
+  @include ucap-material-theme($pink-light-theme);
 }
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 50600652..b4bda552 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
@@ -34,6 +34,7 @@
         [selectedUserList]="selectedUserList"
         (checkAllUser)="onCheckAllUser($event)"
         (checkUser)="onCheckUser($event)"
+        class="organization-side"
       ></app-layout-chat-left-sidenav-organization>
     </mat-tab>
     <mat-tab>
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 7a51d48b..015d4278 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
@@ -25,7 +25,10 @@
   width: 100%;
   flex-direction: row;
 }
-
+::ng-deep .organization-side{
+  flex-direction: column;
+  height:100%;
+}
 ::ng-deep .global-menu {
   border-right: 1px solid #dddddd;
   .mat-tab-label-container {
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 59968a2d..dd59b29c 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,6 +1,6 @@
-<div class="app-layout-chat-left-sidenav-chat-header">
+<!--<div class="app-layout-chat-left-sidenav-chat-header list-search">
   <form [formGroup]="fgSearch">
-    <mat-form-field class="w-100-p" floatLabel="never">
+    <mat-form-field class="w-100-p searchbox" floatLabel="never">
       <input
         matInput
         #inputSearch
@@ -31,8 +31,37 @@
         <mat-icon>close</mat-icon>
       </button>
     </mat-form-field>
-  </form>
+  </form>-->
+
+<div class="list-search">
+  <div class="searchbox">
+    <form [formGroup]="fgSearch" class="w-100-p">
+      <mat-form-field floatLabel="never">
+        <input
+          matInput
+          #inputSearch
+          type="text"
+          maxlength="20"
+          placeholder="대화방 이름 검색"
+          value=""
+          formControlName="searchInput"
+          [matAutocomplete]="auto"
+          (keydown.enter)="onKeyDownEnter($event, inputSearch.value)"
+        />
+        <button
+          mat-button
+          matSuffix
+          mat-icon-button
+          aria-label="Clear"
+          (click)="inputSearch.value = ''; onClickSearchCancel()"
+        >
+          <mat-icon>close</mat-icon>
+        </button>
+      </mat-form-field>
+    </form>
+  </div>
 </div>
+
 <div
   *ngIf="!isSearch"
   class="app-layout-chat-left-sidenav-chat-list"
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.scss
index 893614a7..b0492594 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.scss
@@ -4,7 +4,7 @@
 }
 
 .app-layout-chat-left-sidenav-chat-list {
-  height: calc(100% - 50px);
+  height: calc(100% - 60px);
 }
 
 .app-layout-chat-left-sidenav-chat-list-viewport {
@@ -17,3 +17,53 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
+
+
+.list-search {
+  display: flex;
+  flex-direction: row;
+  height: 60px;
+  align-items: center;
+  padding: 0;
+  font-size: 14px;
+  border-bottom: 1px solid #dddddd;
+  .searchbox{
+    width:100%;
+    .mat-form-field{
+      display:block;
+      .mat-form-field-wrapper{
+        padding-bottom:0 !important;
+        height: 60px;
+
+    }
+   }
+  }
+}
+::ng-deep .searchbox .mat-form-field-flex{
+      height: 60px;
+      padding:0 10px;
+}
+::ng-deep .searchbox .mat-form-field-appearance-legacy .mat-form-field-wrapper{
+  padding: 0;
+}
+::ng-deep .searchbox .mat-form-field-appearance-legacy .mat-form-field-underline{
+  bottom:0;
+  background-color: #cccccc !important;
+}
+/*.searchbox {
+    width: 100%;
+    display: flex;
+    input {
+      display: inline-flex;
+      width: 100%;
+      font-size: 14px;
+      padding-left: 0;
+    }
+    .btn-search {
+      color: #777777;
+      font-size: 12px;
+      display: inline-flex;
+      margin-left: auto;
+      flex: none;
+    }
+  }*/
\ No newline at end of file
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 05c9a90a..d069c7c7 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
@@ -170,7 +170,7 @@ export class GroupComponent implements OnInit, OnDestroy {
             CreateChatDialogResult
           >(CreateChatDialogComponent, {
             width: '600px',
-            height: '500px',
+            height: '700px',
             data: {
               type: UserSelectDialogType.NewGroup,
               title: 'New Group'
@@ -362,8 +362,7 @@ export class GroupComponent implements OnInit, OnDestroy {
             EditGroupDialogData,
             EditGroupDialogResult
           >(EditGroupDialogComponent, {
-            width: '600px',
-            height: '500px',
+
             data: {
               title: 'Group Name Edit',
               group
@@ -391,7 +390,7 @@ export class GroupComponent implements OnInit, OnDestroy {
             CreateChatDialogResult
           >(CreateChatDialogComponent, {
             width: '600px',
-            height: '500px',
+
             data: {
               type: UserSelectDialogType.EditMember,
               title: 'Group Member Edit',
@@ -421,7 +420,7 @@ export class GroupComponent implements OnInit, OnDestroy {
             ConfirmDialogData,
             ConfirmDialogResult
           >(ConfirmDialogComponent, {
-            width: '220px',
+            width: '360px',
             data: {
               title: 'Delete group',
               html: `그룹(${group.name})을 삭제하시겠습니까?<br/>그룹 멤버는 해당 그룹에서만 삭제됩니다.`
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.html
index 780cb90b..b2594b37 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.html
@@ -1,16 +1,15 @@
 <div
   class="oraganization-tab"
-  fxLayout="column"
   *ngIf="departmentInfoList$ | async"
 >
-  <div class="oraganization-tab-tree" fxFlex="40" style="overflow: scroll">
+  <div class="oraganization-tab-tree" >
     <ucap-organization-tree
       [oraganizationList]="departmentInfoList$ | async"
       (selected)="onSelectedOrganization($event)"
     ></ucap-organization-tree>
   </div>
-  <div fxFlex="60">
-    <div class="select-dept">
+  <div class="select-list ">
+    <div class="select-dept text-accent-color">
       <dl>
         <dt>
           {{ getSelectedDepartmentName() }}
@@ -32,7 +31,7 @@
     <div class="search-list">
       <cdk-virtual-scroll-viewport
         itemSize="20"
-        style="height: calc(100% - 20px);"
+        style="height: 100%;"
       >
         <ucap-profile-user-list-item
           *cdkVirtualFor="let userInfo of selectedDepartmentUserInfoList"
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.scss
index 2e9e56bf..0f24738c 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.scss
@@ -15,12 +15,28 @@
   }
 }
 
-.oraganization-tab {
-  height: 100%;
-  .oraganization-tab-tree {
-    overflow-y: auto;
+
+  .oraganization-tab {
+    height: 100%;
+    flex-direction: inherit;
+    display: flex;
+    .oraganization-tab-tree {
+      height:40%;
+      overflow-y: auto;
+      }
+  }
+
+.mat-card-content{
+  .mat-tab-body-content{
+    .oraganization-box{
+      .oraganization-tab {
+        height: 80%;
+        flex-direction: row;
+     }
+    }
   }
 }
+
 .btn-box{
   height:100px;
   position: absolute;
@@ -30,46 +46,83 @@
   width:100%;
   background-color:#ffffff;
 }
-.select-dept{
+
+.select-list{
+  height:60%;
   border-top:1px solid #dddddd;
-  height:40px;
-  width:100%;
-  display:inline-flex;
-  align-items: center;
-  padding:0 10px;
-}
-.search-list{
-  height: calc(100% - 120px);
-  overflow: auto;
-  .list-item{
-    height:70px;
+  .select-dept{
+    padding:0 10px;
+    height:40px;
+    line-height:40px;
+    .dept-name{
+      border-top:1px solid #dddddd;
+      height:40px;
+      width:100%;
+      display:inline-flex;
+      align-items: center;
+      padding:0 10px;
+    }
+  }
+  .search-list{
+    height: calc(100% - 140px);
+    overflow: auto;
+    .list-item{
+      height:70px;
+    }
   }
 }
 .btn-box{
   padding:10px;
   button{
     width:100%;
-     @include ellipsis(1);
+    @include ellipsis(1);
   }
-  ul{
-    display:flex;
-    flex-flow: row;
-    align-content: space-between;
-    margin-top:4px;
-    li{
-      display:inline-flex;
-      align-items: center;
-      flex-grow: 1;
-      width:33%;
-      margin-right: 4px;
-       &:last-child{
-        margin-right: 0;
+    ul{
+      display:flex;
+      flex-flow: row;
+      align-content: space-between;
+      margin-top:4px;
+      li{
+        display:inline-flex;
+        align-items: center;
+        flex-grow: 1;
+        width:33%;
+        margin-right: 4px;
+        &:last-child{
+          margin-right: 0;
+        }
+        button{
+          text-align:center;
+          width:100%;
+          height:100%;
+          padding: 0 6px;
+        }
       }
-      button{
-        text-align:center;
-        width:100%;
-        height:100%;
-        padding: 0 6px;
+    }
+  }
+
+
+.dialog-org {
+  .oraganization-tab {
+    width: 100%;
+    height:380px;
+    border-bottom: 1px solid #dddddd;
+    position: relative;
+    .oraganization-tab-tree {
+      display: inline-flex;
+      width: 50%;
+      height:100%;
+      border-right: 1px solid #dddddd;
+      overflow: auto;
+    }
+    .select-list {
+      display: inline-flex;
+      flex-direction: column;
+      width: 50%;
+      height:100%;
+      overflow: auto;
+      .search-list {
+        overflow: auto;
       }
     }
   }
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/create-chat.dialog.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/create-chat.dialog.component.html
index 25d17e0a..9ecf1605 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/create-chat.dialog.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/create-chat.dialog.component.html
@@ -1,11 +1,11 @@
-<mat-card class="confirm-card">
+<mat-card class="confirm-card mat-elevation-z">
   <mat-card-header cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle>
     <mat-card-title>{{ data.title }}</mat-card-title>
   </mat-card-header>
   <mat-card-content>
     <div *ngIf="data.type === UserSelectDialogType.NewGroup">
       <form name="inputForm" [formGroup]="inputForm" novalidate>
-        <mat-form-field hintLabel="특수문자는 '-,_'만 사용할 수 있습니다.">
+        <mat-form-field hintLabel="특수문자는 '-,_'만 사용할 수 있습니다." style="display:block;margin-bottom:10px;">
           <input
             matInput
             #input
@@ -18,7 +18,7 @@
       </form>
     </div>
     <div
-      fxLayout
+      fxLayout="column"
       fxLayout.xs="column"
       fxLayoutAlign="center"
       fxLayoutGap="10px"
@@ -44,7 +44,7 @@
                   (cancel)="onClickCancel($event)"
                 ></ucap-organization-tenant-search>
               </div>
-              <div *ngIf="!isShowSearch">
+              <div *ngIf="!isShowSearch" class="list-panel">
                 <ucap-group-expansion-panel
                   #groupExpansionPanel
                   [groupBuddyList]="groupBuddyList$ | async"
@@ -87,12 +87,13 @@
             <ng-template mat-tab-label>
               <mat-icon>device_hub</mat-icon>
             </ng-template>
-            <div style="height:500px">
+            <div>
               <app-layout-chat-left-sidenav-organization
                 [selectedUserList]="selectedUserList"
                 [isUserSelect]="true"
                 (checkAllUser)="onCheckAllUser($event)"
                 (checkUser)="onCheckUser($event)"
+                class="dialog-org"
               >
               </app-layout-chat-left-sidenav-organization>
             </div>
@@ -101,7 +102,7 @@
             <ng-template mat-tab-label>
               <mat-icon>chat</mat-icon>
             </ng-template>
-            <div style="height:500px">
+            <div>
               <cdk-virtual-scroll-viewport itemSize="20" style="height: 100%">
                 <ucap-room-list-item
                   *ngFor="let room of roomList"
@@ -120,7 +121,7 @@
           </mat-tab>
         </mat-tab-group>
       </div>
-      <div fxFlex="150px" *ngIf="isShowSelectedUserList">
+      <div  *ngIf="isShowSelectedUserList" class="list-chip">
         <mat-chip-list aria-label="User selection">
           <mat-chip
             *ngFor="let userInfo of selectedUserList"
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/create-chat.dialog.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/create-chat.dialog.component.scss
index e69de29b..d064d753 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/create-chat.dialog.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/create-chat.dialog.component.scss
@@ -0,0 +1,72 @@
+::ng-deep .mat-card-header-tex {
+  margin: 0;
+}
+
+::ng-deep .dialog-org {
+  .oraganization-tab {
+    width: 100%;
+    height:380px;
+    border-bottom: 1px solid #dddddd;
+    position: relative;
+    .oraganization-tab-tree {
+      display: inline-flex;
+      width: 50%;
+      height:100% !important;
+      border-right: 1px solid #dddddd;
+      overflow: auto;
+    }
+    .select-list {
+      display: inline-flex;
+      flex-direction: column;
+      width: 50%;
+      height:100% !important;
+      overflow: auto;
+      .search-list {
+        overflow: auto;
+        height: calc(100% - 40px);
+      }
+    }
+  }
+}
+
+.list-chip {
+  height: 100px;
+  width: 100%;
+  padding:10px;
+  border:1px solid #dddddd;
+  overflow: auto;
+  background-color:#f9f9f9;
+}
+.mat-chip.mat-standard-chip .mat-chip-remove{
+  line-height: 24px;
+}
+.confirm-card {
+  min-width: 500px;
+  .mat-card-header {
+    margin-bottom: 20px;
+    .mat-card-header-text {
+      .mat-card-title {
+        margin: 0 -16px;
+      }
+    }
+  }
+  .mat-card-content {
+    .content-box {
+      flex-direction: column;
+      flex-flow: column;
+    }
+  }
+  .button-farm {
+    text-align: right;
+    .mat-primary {
+      margin-left: 4px;
+    }
+  }
+}
+::ng-deep .mat-dialog-container .mat-tab-body-wrapper {
+  height: 380px;
+}
+.list-panel{
+     overflow: auto;
+     height: calc(100% - 60px);
+  }
\ No newline at end of file
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/edit-group.dialog.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/edit-group.dialog.component.html
index cd8e6a7f..98f09cd9 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/edit-group.dialog.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/edit-group.dialog.component.html
@@ -1,4 +1,4 @@
-<mat-card class="confirm-card">
+<mat-card class="confirm-card mat-elevation-z">
   <mat-card-header cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle>
     <mat-card-title>{{ data.title }}</mat-card-title>
   </mat-card-header>
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/edit-group.dialog.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/edit-group.dialog.component.scss
index e69de29b..2fce3641 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/edit-group.dialog.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/edit-group.dialog.component.scss
@@ -0,0 +1,27 @@
+::ng-deep .mat-card-header-tex{
+  margin:0;
+}
+.confirm-card{
+  min-width:500px;
+  .mat-card-header{
+    margin-bottom:20px;
+    .mat-card-header-text{
+       .mat-card-title{
+         margin:0 -16px;
+       }
+    }
+  }
+  .button-farm {
+    text-align:right;
+    .mat-primary{
+      margin-left:4px;
+    }
+  }
+}
+
+form{
+.mat-form-field{
+  width:100%;
+  }
+}
+
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/select-group.dialog.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/select-group.dialog.component.html
index 5a346370..9a10a412 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/select-group.dialog.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/select-group.dialog.component.html
@@ -1,17 +1,19 @@
-<mat-card class="confirm-card">
+<mat-card class="confirm-card mat-elevation-z">
   <mat-card-header>
     <mat-card-title>{{ data.title }}</mat-card-title>
   </mat-card-header>
   <mat-card-content>
-    <div>
+    <div class="add-row">
       <button
         mat-button
         *ngIf="!isShowAddGroupField"
         (click)="isShowAddGroupField = !isShowAddGroupField"
+        class="mat-mini-fab mat-button-base mat-accent mat-elevation-z"
       >
-        <mat-icon>add_circle_outline</mat-icon> 새 그룹 추가
+        <mat-icon>add</mat-icon>
+        <span class="mat-fab__label">새 그룹 추가</span>
       </button>
-      <div *ngIf="isShowAddGroupField">
+      <div *ngIf="isShowAddGroupField" class="input-groupname-box">
         <mat-form-field hintLabel="특수문자는 '-,_'만 사용할 수 있습니다.">
           <input
             matInput
@@ -21,6 +23,7 @@
             placeholder="그룹이름"
             value=""
           />
+
           <button
             mat-button
             matSuffix
@@ -30,16 +33,23 @@
           >
             <mat-icon>close</mat-icon>
           </button>
+
           <mat-hint align="end"
             >{{ inputGroupName.value?.length || 0 }}/20</mat-hint
           >
         </mat-form-field>
-        <button mat-button (click)="onClickAddGroup(inputGroupName.value)">
-          <mat-icon>add</mat-icon>
-        </button>
-        <button mat-button (click)="onClickAddGroupCancel()">
-          <mat-icon>clear</mat-icon>
-        </button>
+
+        <div class="btn-box">
+          <!--<button mat-button (click)="onClickAddGroup(inputGroupName.value)">
+            <mat-icon>add</mat-icon>
+          </button>
+          <button mat-button (click)="onClickAddGroupCancel()">
+            <mat-icon>clear</mat-icon>
+          </button>-->
+          <button mat-stroked-button (click)="onClickAddGroupCancel()">닫기</button>
+          <button mat-stroked-button color="accent" (click)="onClickAddGroup(inputGroupName.value)" class="mat-accent">그룹명 추가</button>
+        </div>
+
       </div>
     </div>
     <mat-selection-list #groups>
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/select-group.dialog.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/select-group.dialog.component.scss
index e69de29b..44255067 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/select-group.dialog.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/select-group.dialog.component.scss
@@ -0,0 +1,66 @@
+::ng-deep .mat-card-header-tex{
+  margin:0;
+}
+.mat-form-field{
+  width:100%;
+  padding:10px;
+}
+.confirm-card{
+  min-width:500px;
+  .mat-card-content{
+
+    }
+  .button-farm {
+    text-align:right;
+    .mat-primary{
+      margin-left:4px;
+    }
+  }
+}
+
+.add-row{
+  margin-bottom:10px;
+  .mat-mini-fab{
+    .mat-icon{
+      width:40px;
+      height:40px;
+      line-height: 40px;
+    }
+    .mat-fab__label{
+      color:#212121;
+      margin-left:10px;
+    }
+  }
+
+}
+
+.mat-selection-list{
+  border-top:1px solid #999999;
+}
+ .mat-list-item {
+    border-bottom:1px solid #dddddd;
+  }
+
+.input-groupname-box{
+  display:flex;
+  flex-flow: column;
+  margin-bottom: 10px;
+  border-radius: 4px;
+  /*border:1px solid #dddddd;
+  box-shadow: 0 1px 1px 0 rgba(60,64,67,.08), 0 1px 3px 1px rgba(60,64,67,.16);*/
+
+  .btn-box{
+    margin-top:10px;
+    flex-flow:row;
+    height:40px;
+    margin-left:auto;
+    padding:0 10px;
+    button{
+      margin-left:4px;
+    }
+  }
+}
+
+::ng-deep .mat-mini-fab .mat-button-wrapper{
+  padding:0;
+}
\ No newline at end of file
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/select-group.dialog.component.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/select-group.dialog.component.ts
index d92572cf..a92a2d71 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/select-group.dialog.component.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/select-group.dialog.component.ts
@@ -92,7 +92,7 @@ export class SelectGroupDialogComponent implements OnInit {
       ConfirmDialogData,
       ConfirmDialogResult
     >(ConfirmDialogComponent, {
-      width: '220px',
+      width: '300px',
       data: {
         title: 'Add group',
         html: `그룹(${groupName})을 추가하시겠습니까?`
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 47330b04..da7e49cf 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
@@ -51,9 +51,11 @@
         font-size: 10px;
 
         .mat-icon {
-          transform: translateY(-2px);
+          //transform: translateY(-2px);
           width: 16px;
           height: 16px;
+          min-height:16px;
+          min-width:16px;
           font-size: 16px;
         }
 
@@ -75,12 +77,12 @@
           }
 
           &.app-layout-native-title-bar-minimize {
-            background: darken(#673ab7, 10%);
+            background: darken(#000000, 10%);
             color: darken(white, 20%);
           }
 
           &.app-layout-native-title-bar-maximize {
-            background: darken(#673ab7, 10%);
+            background: darken(#000000, 10%);
             color: darken(white, 20%);
           }
         }
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 edae2f4b..9103d893 100644
--- a/projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss
+++ b/projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss
@@ -45,6 +45,39 @@ ul,
 ol {
   list-style: none;
 }
+$lg-red: (
+  50: #ffffff,
+  100: #f8bbd0,
+  200: #f48fb1,
+  300: #f06292,
+  400: #ef4c73,
+  /* 400: #ec407a,*/ 500: #ed097e,
+  600: #d81b60,
+  700: #c2185b,
+  800: #ad1457,
+  900: #880e4f,
+  A100: #ff80ab,
+  A200: #ff4081,
+  A400: #ff3399,
+  A700: #c51162,
+  contrast: (
+    50: $dark-primary-text,
+    100: $dark-primary-text,
+    200: $dark-primary-text,
+    300: $dark-primary-text,
+    400: $light-primary-text,
+    500: $light-primary-text,
+    600: $light-primary-text,
+    700: $light-primary-text,
+    800: $light-primary-text,
+    900: $light-primary-text,
+    A100: $dark-primary-text,
+    A200: $light-primary-text,
+    A400: $light-primary-text,
+    A700: $light-primary-text
+  )
+);
+
 @mixin ucap-material-theme($theme) {
   @include ucap-core-theme($theme);
 }
@@ -60,6 +93,10 @@ ol {
     background: mat-color($primary);
     color: mat-color($primary, default-contrast);
   }
+  .bg-accent-dark {
+    background: mat-color($accent, 600);
+    color: mat-color($primary, default-contrast);
+  }
   .bg-accent-color {
     background: mat-color($accent);
     color: mat-color($accent, default-contrast);
@@ -76,4 +113,28 @@ ol {
   .border-accent-color {
     border: 1px solid mat-color($accent);
   }
+  .mat-tab-group.mat-primary .mat-ink-bar,
+  body.theme-default .mat-tab-nav-bar.mat-primary .mat-ink-bar {
+    background-color: mat-color($accent, 400);
+  }
+  .mat-chip.mat-standard-chip.mat-chip-selected.mat-primary {
+    background-color: mat-color($accent, 200);
+  }
+  /*.mat-form-field-appearance-legacy .mat-hint{
+     color: mat-color($accent, 800);
+   }*/
+
+  .mat-form-field-appearance-legacy {
+    .mat-form-field-label {
+      color: mat-color($primary);
+    }
+
+    .mat-hint {
+      color: mat-color($primary);
+    }
+
+    .mat-form-field-underline {
+      background-color: mat-color($primary);
+    }
+  }
 }
diff --git a/projects/ucap-webmessenger-ui-account/src/lib/components/login.component.html b/projects/ucap-webmessenger-ui-account/src/lib/components/login.component.html
index 8e2a539e..0625d156 100644
--- a/projects/ucap-webmessenger-ui-account/src/lib/components/login.component.html
+++ b/projects/ucap-webmessenger-ui-account/src/lib/components/login.component.html
@@ -47,8 +47,7 @@
 
     <button
       mat-raised-button
-      color="accent"
-      class="submit-button"
+      class="submit-button bg-accent-dark"
       aria-label="LOG IN"
       [disabled]="loginForm.invalid"
       (click)="onClickLogin()"
diff --git a/projects/ucap-webmessenger-ui-account/src/lib/components/login.component.scss b/projects/ucap-webmessenger-ui-account/src/lib/components/login.component.scss
index 51ae3b7e..c190e52a 100644
--- a/projects/ucap-webmessenger-ui-account/src/lib/components/login.component.scss
+++ b/projects/ucap-webmessenger-ui-account/src/lib/components/login.component.scss
@@ -95,7 +95,8 @@
     width:100%;
     padding:10px;
     left:0;
-    background-color: #4f586b;
+    //background-color: #4f586b;
+    background-color: #555555;
     color: #ffffff;
   }
 
diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/form.component.html b/projects/ucap-webmessenger-ui-chat/src/lib/components/form.component.html
index 23994ccb..70445c00 100644
--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/form.component.html
+++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/form.component.html
@@ -51,12 +51,12 @@
     </mat-form-field>
 
     <button
-      class="send-message-button"
+      class="send-message-button bg-accent-color"
       mat-icon-button
       type="submit"
       aria-label="Send message"
     >
-      <i class="material-icons bg-primary-color">
+      <i class="material-icons">
         send
       </i>
     </button>
diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/information.component.html b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/information.component.html
index d54534ca..eed3fd3d 100644
--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/information.component.html
+++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/information.component.html
@@ -1,3 +1 @@
-<div>
-  {{ contents }}
-</div>
+<div>{{ contents }}</div>
diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.html b/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.html
index d3b1638a..b94c43df 100644
--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.html
+++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.html
@@ -28,6 +28,7 @@
           <ucap-chat-message-box-information
             *ngSwitchCase="EventType.Join"
             [message]="message"
+            class="information-msg"
           >
           </ucap-chat-message-box-information>
           <ucap-chat-message-box-information
diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.scss b/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.scss
index cd0c2a72..d44a47bc 100644
--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.scss
+++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.scss
@@ -140,6 +140,14 @@ $meBox-bg: #ffffff;
   display: flex;
   flex-direction: column;
 }
+.information-msg{
+  width:100%;
+  height:100%;
+  text-align:center;
+  background-color:#cccccc;
+  padding:10px;
+  margin:10px 0;
+}
 
 .message-row {
   margin-bottom: 30px;
@@ -259,4 +267,4 @@ $meBox-bg: #ffffff;
       top: 5px;
     }
   }
-}
+}
\ No newline at end of file
diff --git a/projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.scss b/projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.scss
index 48d62939..d85de310 100644
--- a/projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.scss
+++ b/projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.scss
@@ -14,7 +14,7 @@
   padding: 0;
 }
 .mat-expansion-panel-header {
-  height: 40px !important;
+  //height: 40px !important;
   padding: 0 20px;
   .mat-expansion-panel-header-title {
     align-items: center;
@@ -37,9 +37,14 @@
     padding: 0 20px;
     .mat-content {
       color: #666666;
+      overflow: unset;
     }
   }
 }
 .box-more-spacer {
   margin-right: 0;
 }
+
+::ng-deep .mat-content{
+  overflow: unset;
+}
\ No newline at end of file
diff --git a/projects/ucap-webmessenger-ui-organization/src/lib/components/tenant-search.component.scss b/projects/ucap-webmessenger-ui-organization/src/lib/components/tenant-search.component.scss
index 0505074a..213369c8 100644
--- a/projects/ucap-webmessenger-ui-organization/src/lib/components/tenant-search.component.scss
+++ b/projects/ucap-webmessenger-ui-organization/src/lib/components/tenant-search.component.scss
@@ -17,7 +17,7 @@
   flex-direction: row;
   height: 60px;
   align-items: center;
-  padding: 0 20px;
+  padding: 0 10px 0 20px;
   font-size: 14px;
   border-bottom: 1px solid #dddddd;
   .searchbox {
diff --git a/projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.scss b/projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.scss
index 453a30c0..6d71c54c 100644
--- a/projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.scss
+++ b/projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.scss
@@ -105,6 +105,16 @@ $thumbnail-msize: 40px;
           @include ellipsis(1);
           font-weight: 600;
         }
+        .mat-icon {
+          background-repeat: no-repeat;
+          display: inline-block;
+          fill: currentColor;
+          height: 12px;
+          width: 12px;
+          font-size: 16px;
+          color: #666666;
+          margin-left: 4px;
+        }
         .num {
           font-size: 12px;
           color: $color-main;
diff --git a/projects/ucap-webmessenger-ui/src/assets/scss/_ucap-ui.scss b/projects/ucap-webmessenger-ui/src/assets/scss/_ucap-ui.scss
index 0462c56d..2b3443a2 100644
--- a/projects/ucap-webmessenger-ui/src/assets/scss/_ucap-ui.scss
+++ b/projects/ucap-webmessenger-ui/src/assets/scss/_ucap-ui.scss
@@ -14,3 +14,4 @@
 @import 'partials/scrollbars';
 @import 'partials/presence.scss';
 @import 'partials/list-item';
+@import 'partials/dialogs';
diff --git a/projects/ucap-webmessenger-ui/src/assets/scss/partials/_dialogs.scss b/projects/ucap-webmessenger-ui/src/assets/scss/partials/_dialogs.scss
new file mode 100644
index 00000000..494657e2
--- /dev/null
+++ b/projects/ucap-webmessenger-ui/src/assets/scss/partials/_dialogs.scss
@@ -0,0 +1,24 @@
+/*.dialog-org {
+  .oraganization-tab {
+    width: 100%;
+    height:380px;
+    border-bottom: 1px solid #dddddd;
+    .oraganization-tab-tree {
+      display: inline-flex;
+      width: 50%;
+      height:100%;
+      border-right: 1px solid #dddddd;
+      overflow: auto;
+    }
+    .select-list {
+      display: inline-flex;
+      flex-direction: column;
+      width: 50%;
+      height:100%;
+      overflow: auto;
+      .search-list {
+        overflow: auto;
+      }
+    }
+  }
+}*/
\ No newline at end of file
diff --git a/projects/ucap-webmessenger-ui/src/assets/scss/partials/_list-item.scss b/projects/ucap-webmessenger-ui/src/assets/scss/partials/_list-item.scss
index 615342ce..bc15342f 100644
--- a/projects/ucap-webmessenger-ui/src/assets/scss/partials/_list-item.scss
+++ b/projects/ucap-webmessenger-ui/src/assets/scss/partials/_list-item.scss
@@ -13,4 +13,8 @@
    -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   word-wrap: break-word;
+}
+.mat-card-header .mat-card-title{
+  margin:0 -16px;
+  padding-bottom:10px;
 }
\ No newline at end of file
diff --git a/projects/ucap-webmessenger-ui/src/lib/dialogs/alert.dialog.component.html b/projects/ucap-webmessenger-ui/src/lib/dialogs/alert.dialog.component.html
index b9b5a059..e99f1d24 100644
--- a/projects/ucap-webmessenger-ui/src/lib/dialogs/alert.dialog.component.html
+++ b/projects/ucap-webmessenger-ui/src/lib/dialogs/alert.dialog.component.html
@@ -1,4 +1,4 @@
-<mat-card class="confirm-card">
+<mat-card class="confirm-card mat-elevation-z">
   <mat-card-header>
     <mat-card-title>{{ data.title }}</mat-card-title>
     <!-- <mat-card-subtitle>Confirm</mat-card-subtitle> -->
diff --git a/projects/ucap-webmessenger-ui/src/lib/dialogs/confirm.dialog.component.html b/projects/ucap-webmessenger-ui/src/lib/dialogs/confirm.dialog.component.html
index 7ea339fa..418d988c 100644
--- a/projects/ucap-webmessenger-ui/src/lib/dialogs/confirm.dialog.component.html
+++ b/projects/ucap-webmessenger-ui/src/lib/dialogs/confirm.dialog.component.html
@@ -1,6 +1,6 @@
-<mat-card class="confirm-card">
-  <mat-card-header cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle>
-    <mat-card-title>{{ data.title }}</mat-card-title>
+<mat-card class="confirm-card mat-elevation-z">
+  <mat-card-header cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle class="card-header">
+    <mat-card-title >{{ data.title }}</mat-card-title>
     <!-- <mat-card-subtitle>Confirm</mat-card-subtitle> -->
   </mat-card-header>
   <mat-card-content>
diff --git a/projects/ucap-webmessenger-ui/src/lib/dialogs/confirm.dialog.component.scss b/projects/ucap-webmessenger-ui/src/lib/dialogs/confirm.dialog.component.scss
index e69de29b..013b206c 100644
--- a/projects/ucap-webmessenger-ui/src/lib/dialogs/confirm.dialog.component.scss
+++ b/projects/ucap-webmessenger-ui/src/lib/dialogs/confirm.dialog.component.scss
@@ -0,0 +1,25 @@
+::ng-deep .mat-card-header-tex{
+  margin:0;
+}
+.mat-card{
+  padding:10px;
+  .mat-card-header{
+    margin-bottom:20px;
+    .mat-card-title{
+      margin:0 -16px;
+      padding-bottom:10px;
+    }
+  }
+  .button-farm {
+    text-align:right;
+    .mat-primary{
+      margin-left:4px;
+    }
+  }
+}
+
+form{
+.mat-form-field{
+  width:100%;
+  }
+}