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 8d215d42..9c0c5611 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
@@ -59,6 +59,7 @@
       [sessionVerinfo]="sessionVerinfo"
       (click)="onClickContextMenu('SELECT_ROOM', room)"
       (contextmenu)="onContextMenuChat($event, room)"
+      class="ucap-clickable"
     >
     </ucap-room-list-item>
   </perfect-scrollbar>
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.html
index 751d29c1..fb6e40c6 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.html
@@ -40,7 +40,7 @@
       (click)="onSelectBuddy(userInfo)"
       (openProfile)="onClickOpenProfile($event)"
       (contextmenu)="onContextMenuProfile($event, userInfo, group)"
-      class="list-item-frame"
+      class="list-item-frame ucap-clickable"
     >
     </ucap-profile-user-list-item>
   </ucap-group-expansion-panel>
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 98f09cd9..a96f0da9 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-elevation-z">
+<!--<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>
@@ -29,3 +29,100 @@
     </button>
   </mat-card-actions>
 </mat-card>
+-->
+<mat-card class="confirm-card mat-elevation-z setting-frame">
+  <mat-card-header cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle>
+    <mat-card-title>설정</mat-card-title>
+  </mat-card-header>
+  <mat-card-content>
+    <div fxFlex class="setting-tab">
+      <mat-tab-group animationDuration="0ms" vertical>
+        <mat-tab>
+          <ng-template mat-tab-label>
+            <span class="mdi mdi-settings"></span>
+            일반
+          </ng-template>
+          <ucap-settings-general class="setting-category general"></ucap-settings-general>
+        </mat-tab>
+        <mat-tab>
+          <ng-template mat-tab-label>
+            <span class="mdi mdi-lock"></span>
+            개인정보취급방침
+          </ng-template>
+          <ucap-settings-privacy  class="setting-category"></ucap-settings-privacy>
+        </mat-tab>
+        <mat-tab>
+          <ng-template mat-tab-label>
+            <span class="mdi mdi-bell"></span>
+            알림
+          </ng-template>
+          <ucap-settings-notification  class="setting-category"></ucap-settings-notification>
+        </mat-tab>
+        <mat-tab>
+          <ng-template mat-tab-label>
+            <span class="mdi mdi-headset"></span>
+            장치
+          </ng-template>
+          <ucap-settings-device  class="setting-category"></ucap-settings-device>
+        </mat-tab>
+        <mat-tab>
+          <ng-template mat-tab-label>
+            <span class="mdi mdi-view-grid-plus"></span>
+            사용권한
+          </ng-template>
+          <ucap-settings-permission  class="setting-category"></ucap-settings-permission>
+        </mat-tab>
+        <mat-tab>
+          <ng-template mat-tab-label>
+            <span class="mdi mdi-phone"></span>
+            통화
+          </ng-template>
+          <ucap-settings-call  class="setting-category"></ucap-settings-call>
+        </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>
\ No newline at end of file
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 2fce3641..e56eb9dc 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
@@ -1,4 +1,4 @@
-::ng-deep .mat-card-header-tex{
+/*::ng-deep .mat-card-header-tex{
   margin:0;
 }
 .confirm-card{
@@ -23,5 +23,108 @@ form{
 .mat-form-field{
   width:100%;
   }
+}*/
+
+
+::ng-deep .cdk-overlay-pane {
+  width: 600px;
+  max-height: 90%;
+  height:800px;
 }
 
+::ng-deep .setting-frame{
+  padding: 16px;
+  height:100%;
+  min-width: 500px;
+  position: relative;
+
+  .mat-dialog-container {
+    position: relative;
+  }
+
+  .mat-card-header {
+    position: relative;
+    width: 100%;
+    border-bottom:1px solid #dddddd;
+    margin-bottom: 12px;
+  }
+
+  .mat-card-content {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: flex-start;
+    height: calc(100% - 100px);
+    border-bottom:1px solid #dddddd;
+    .setting-tab{
+      position: relative;
+      width:100%;
+      height:100%;
+      .mat-tab-body-wrapper{
+        border-left:1px solid #dddddd;
+        position: relative;
+        height:100%;
+        padding: 0 0 10px 10px;
+
+      }
+    }
+  }
+
+  .button-farm {
+    text-align: right;
+    position: absolute;
+    width: 100%;
+    bottom: 10px;
+    .mat-primary {
+      margin-left: 4px;
+    }
+  }
+}
+
+::ng-deep .setting-tab{
+  .mat-tab-group{
+    position: relative;
+    height:100%;
+    width:100%;
+    .mat-tab-header{
+      .mat-tab-label-container{
+        .mat-tab-list{
+          .mat-tab-labels{
+            border-bottom:0;
+            padding-right:10px;
+            .mat-tab-label{
+              padding:0 10px;
+            }
+          }
+        }
+      }
+    }
+
+    .mat-tab-body-wrapper{
+      .mat-tab-body{
+        .mat-tab-body-conten{
+          position:relative;
+          width:100%;
+          height:100%;
+          .mat-list-base{
+            position:relative;
+            .mat-list-option{
+              height:40px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+::ng-deep .setting-category{
+  .mat-list-base{
+    position:relative;
+    .mat-list-item{
+      font-size:15px;
+
+    }
+    .mat-divider{
+    }
+  }
+}
\ No newline at end of file
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
index 453eaae6..11a27ce9 100644
--- 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
@@ -1,12 +1,6 @@
-::ng-deep .cdk-overlay-pane {
-  width: 600px;
-  max-height: 90%;
-  height:800px;
-}
-
-::ng-deep .setting-frame{
+::ng-deep .setting-frame {
   padding: 16px;
-  height:100%;
+  height: 100%;
   min-width: 500px;
   position: relative;
 
@@ -17,7 +11,7 @@
   .mat-card-header {
     position: relative;
     width: 100%;
-    border-bottom:1px solid #dddddd;
+    border-bottom: 1px solid #dddddd;
     margin-bottom: 12px;
   }
 
@@ -26,17 +20,16 @@
     display: flex;
     align-items: flex-start;
     height: calc(100% - 100px);
-    border-bottom:1px solid #dddddd;
-    .setting-tab{
+    border-bottom: 1px solid #dddddd;
+    .setting-tab {
       position: relative;
-      width:100%;
-      height:100%;
-      .mat-tab-body-wrapper{
-        border-left:1px solid #dddddd;
+      width: 100%;
+      height: 100%;
+      .mat-tab-body-wrapper {
+        border-left: 1px solid #dddddd;
         position: relative;
-        height:100%;
+        height: 100%;
         padding: 0 0 10px 10px;
-
       }
     }
   }
@@ -52,49 +45,47 @@
   }
 }
 
-::ng-deep .setting-tab{
-  .mat-tab-group{
+::ng-deep .setting-tab {
+  .mat-tab-group {
     position: relative;
-    height:100%;
-    width:100%;
-    .mat-tab-header{
-      .mat-tab-label-container{
-        .mat-tab-list{
-          .mat-tab-labels{
-            border-bottom:0;
-            padding-right:10px;
-            .mat-tab-label{
-              padding:0 10px;
+    height: 100%;
+    width: 100%;
+    .mat-tab-header {
+      .mat-tab-label-container {
+        .mat-tab-list {
+          .mat-tab-labels {
+            border-bottom: 0;
+            padding-right: 10px;
+            .mat-tab-label {
+              padding: 0 10px;
             }
           }
         }
       }
     }
 
-    .mat-tab-body-wrapper{
-      .mat-tab-body{
-        .mat-tab-body-conten{
-          position:relative;
-          width:100%;
-          height:100%;
-          .mat-list-base{
-            position:relative;
+    .mat-tab-body-wrapper {
+      .mat-tab-body {
+        .mat-tab-body-conten {
+          position: relative;
+          width: 100%;
+          height: 100%;
+          .mat-list-base {
+            position: relative;
           }
         }
-
       }
     }
   }
 }
 
-::ng-deep .setting-category{
-  .mat-list-base{
-    position:relative;
-    .mat-list-item{
-      font-size:15px;
-
+::ng-deep .setting-category {
+  .mat-list-base {
+    position: relative;
+    .mat-list-item {
+      font-size: 15px;
     }
-    .mat-divider{
+    .mat-divider {
     }
   }
-}
\ No newline at end of file
+}
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 33f12de3..11052f81 100644
--- a/projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss
+++ b/projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss
@@ -235,6 +235,17 @@ $daesang-grey: (
     background-color: mat-color($accent, B100);
   }
 
+  .ucap-clickable {
+    cursor: pointer;
+  }
+
+  .policy{
+    background-color: mat-color($accent, B100);
+  }
+  .mat-badge-accent .mat-badge-content {
+    background-color: mat-color($warn, 400);
+  }
+
   .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);
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 c190e52a..3774357d 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
@@ -1,13 +1,12 @@
-
 .login-form {
   position: relative;
   width: 384px;
   max-width: 384px;
   padding: 50px;
   text-align: center;
-  background-color: rgba( 255, 255, 255, 0.8 );
+  background-color: rgba(255, 255, 255, 0.8);
   border-radius: 0px;
-  box-shadow: 4px 4px 0px rgba(0,0,0,0.1);
+  box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.1);
 
   .mat-title {
     margin: 16px 0 32px 0;
@@ -89,14 +88,12 @@
       }
     }
   }
-  .policy{
+  .policy {
     position: absolute;
-    bottom:0;
-    width:100%;
-    padding:10px;
-    left:0;
-    //background-color: #4f586b;
-    background-color: #555555;
+    bottom: 0;
+    width: 100%;
+    padding: 10px;
+    left: 0;
     color: #ffffff;
   }
 
diff --git a/projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.html b/projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.html
index 7ab7cbe3..8c8755a8 100644
--- a/projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.html
+++ b/projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.html
@@ -31,7 +31,7 @@
     <!-- This is the tree node template for expandable nodes -->
     <mat-tree-node
       *matTreeNodeDef="let node; when: isHeader"
-      class="tree-node-frame"
+      class="tree-node-frame ucap-clickable"
       style="height: 80px;"
       matRipple
     >