diff --git a/electron-projects/ucap-webmessenger-electron/resources/image/ico_64x64_r.ico b/electron-projects/ucap-webmessenger-electron/resources/image/ico_64x64_r.ico
deleted file mode 100644
index 94ece2ba..00000000
Binary files a/electron-projects/ucap-webmessenger-electron/resources/image/ico_64x64_r.ico and /dev/null differ
diff --git a/projects/ucap-webmessenger-app/src/app/app.theme.scss b/projects/ucap-webmessenger-app/src/app/app.theme.scss
index 599440de..164de656 100644
--- a/projects/ucap-webmessenger-app/src/app/app.theme.scss
+++ b/projects/ucap-webmessenger-app/src/app/app.theme.scss
@@ -103,10 +103,13 @@ body.theme-pink-dark {
 // -----------------------------------------------------------------------------------------------------
 
 // Define the primary, accent and warn palettes
-$pink-light-theme-primary-palette: mat-palette($mat-grey,800);
-//$pink-light-theme-accent-palette: mat-palette($lg-red, 400);
+/*$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);*/
+
+$pink-light-theme-primary-palette: mat-palette($daesang-grey, 900);
 $pink-light-theme-accent-palette: mat-palette($daesang);
-$pink-light-theme-warn-palette: mat-palette($mat-red);
+$pink-light-theme-warn-palette: mat-palette($mat-deep-orange);
 
 
 // Create the Material theme object
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 ddb12bfe..081401ec 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
@@ -38,9 +38,7 @@
   height: 100%;
 }
 ::ng-deep .global-menu {
-  border-right: 2px solid #4f4f4f;
   .mat-tab-label-container {
-    background-color: #4f4f4f;
     .mat-tab-list {
       .mat-tab-labels {
         flex-flow: column;
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 4e0df8ed..dd3c4550 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
@@ -1,11 +1,4 @@
 .current-head {
-  display: flex;
-  justify-content: center;
-  padding: 0 10px;
-  height: 70px;
-  background: #352a37;
-  background: -webkit-linear-gradient(to right, #352a37, #f15f79);
-  background: linear-gradient(to right, #352a37, #ef4c73);
   h3 {
     display: inline-flex;
     padding-left: 10px;
@@ -76,9 +69,17 @@
 
 .app-layout-chat-left-sidenav-chat-list {
   height: calc(100% - 130px);
+  position: relative;
 }
 
 .app-layout-chat-left-sidenav-chat-list-viewport {
   width: 100%;
   height: 100%;
 }
+::ng-deep .cdk-virtual-scroll-orientation-vertical {
+  .cdk-virtual-scroll-content-wrapper{
+    width: 100%;
+    height:100%;
+    contain: unset;
+  }
+}
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.scss
index 4a173411..6ee241ce 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.scss
@@ -1,13 +1,5 @@
 @charset 'utf-8';
 .current-head {
-  display: flex;
-  justify-content: center;
-  padding: 0 10px;
-  height: 70px;
-  background-color: #eeeeee;
-  background: #f15f79;
-  background: -webkit-linear-gradient(to right, #352a37, #f15f79);
-  background: linear-gradient(to right, #352a37, #ef4c73);
   color: #ffffff;
   h3 {
     display: inline-flex;
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 11cfc5e5..55ccca60 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
@@ -16,7 +16,7 @@
 }
 
 .current-head {
-  display: flex;
+  /*display: flex;
   justify-content: center;
   padding: 0 10px;
   height: 70px;
@@ -24,7 +24,7 @@
   background: #f15f79;
   background: -webkit-linear-gradient(to right, #352a37, #f15f79);
   background: linear-gradient(to right, #352a37, #ef4c73);
-  color: #ffffff;
+  color: #ffffff;*/
   h3 {
     display: inline-flex;
     padding-left: 10px;
@@ -83,6 +83,7 @@
     display: flex;
     background-color: #f9f9f9;
     dt {
+      font-weight:600;
     }
     dd {
       margin-left: auto;
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.scss
index 3788c0be..c3cc6dce 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.scss
@@ -45,7 +45,6 @@
           width: 40px;
           height: 40px;
           border-radius: 50%;
-          background-color: #604850;
           color: #efefef;
           font-size: 16px;
           line-height: 40px;
@@ -97,7 +96,8 @@
       position: absolute;
       padding:10px 10px 0 10px;
       background-color: rgb(54, 54, 54, 0.8);
-      bottom:0
+      bottom:0;
+      width:100%;
     }
   }
 }
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.html
index 01a70e10..b27d2402 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.html
@@ -6,8 +6,33 @@
     </mat-tab-group>
   </div>
   <div fxFlex="1 1 240px" class="select-filebox bg-accent-brightest">
-    <ng-container *ngIf="!selectedFile">
-      Select File.
+    <!--<ng-container *ngIf="!selectedFile">-->
+      <ng-container *ngIf="!selectedFile">
+        <!--이미지 빈화면-->
+      <div class="empty-msg">
+        <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+          stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="round">
+          <rect x="3" y="3" width="18" height="18" rx="2" />
+          <circle cx="8.5" cy="8.5" r="1.5" />
+          <path d="M20.4 14.5L16 10 4 20" />
+        </svg>
+        <span>Select File.</span>
+      </div>
+      <!--비디오 빈화면-->
+      <div class="empty-msg">
+        <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+          stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="round">
+          <rect x="2" y="2" width="20" height="20" rx="2.18" ry="2.18"></rect>
+          <line x1="7" y1="2" x2="7" y2="22"></line>
+          <line x1="17" y1="2" x2="17" y2="22"></line>
+          <line x1="2" y1="12" x2="22" y2="12"></line>
+          <line x1="2" y1="7" x2="7" y2="7"></line>
+          <line x1="2" y1="17" x2="7" y2="17"></line>
+          <line x1="17" y1="17" x2="22" y2="17"></line>
+          <line x1="17" y1="7" x2="22" y2="7"></line>
+        </svg>
+        <span>Select File.</span>
+      </div>
     </ng-container>
     <ng-container *ngIf="selectedFile">
       <div class="select-file">
@@ -25,10 +50,10 @@
         </video>
       </div>
       <ul>
-        <li>name : {{ selectedFile.info.name }}</li>
-        <li>size : {{ selectedFile.info.size | ucapBytes }}</li>
+        <li class="name"> {{ selectedFile.info.name }}</li>
+        <li><span class="text-accent-color">size :</span> {{ selectedFile.info.size | ucapBytes }}</li>
         <li>
-          date :
+          <span class="text-accent-color">date :</span>
           {{ selectedFile.info.sendDate | dateToStringFormat: 'YYYY.MM.DD' }}
         </li>
       </ul>
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.scss
index 1311305c..28271f99 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.scss
@@ -1,3 +1,18 @@
+@mixin ellipsis($row) {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  @if $row == 1 {
+    display: block;
+    white-space: nowrap;
+    word-wrap: normal;
+  } @else if $row >= 2 {
+    display: -webkit-box;
+    -webkit-line-clamp: $row;
+    -webkit-box-orient: vertical;
+    word-wrap: break-word;
+  }
+}
+
 .album-box {
   height: 100%;
   overflow: hidden;
@@ -17,22 +32,32 @@
   margin:10px;
   padding:10px;
   border:1px solid #cccccc;
-  .select-flie{
-    display: flex;
-    flex-flow: row;
-    align-items: center;
+  .select-file{
     color: #212121;
-    align-items: center;
     border-bottom: 1px dotted #dddddd;
     text-align:center;
-    ul{
-      padding:0;
-      margin-top:10px;
-      .name{
+    padding-bottom:10px;
+  }
+  ul{
+    padding-top:10px;
+    li{
+      @include ellipsis(1);
+      &.name{
         font-weight:600;
       }
     }
   }
+  .empty-msg{
+    display:inline-flex;
+    flex-flow: column;
+    margin:auto 0;
+    align-items: center;
+    justify-content: center;
+    color:#999999;
+    span{
+      padding:6px;
+    }
+  }
 }
 
 .search-list{
@@ -41,11 +66,12 @@
   height: calc(100% - 450px);
   overflow-y: auto;
   flex-wrap: wrap;
-  justify-content: space-between;
   .img-item {
     cursor: pointer;
     margin-bottom:10px;
+    margin-right:9px;
     position: relative;
+    height: 150px;
     dl{
       dt{
         display: flex;
@@ -55,6 +81,7 @@
         height: 120px;
         background-color: #efefef;
         border: 1px dotted #cccccc;
+        box-sizing: border-box;
         img{
           width:100%;
           height:100%;
@@ -66,14 +93,15 @@
         }
       }
     }
-    & :nth-child(3n+0){
+    &:nth-child(3n+0){
       margin-right:0;
     }
   }
 }
 
-.preview-image {
-  max-height: 300px;
+.preview-image,
+.preview-video{
+  max-height: 140px;
 }
 
 .btn-box {
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/file-box.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/file-box.component.html
index 5c21477f..3a95280a 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/file-box.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/file-box.component.html
@@ -7,7 +7,13 @@
   </div>
   <div fxFlex="1 1 200px" class="select-filebox bg-accent-brightest">
     <ng-container *ngIf="!selectedFile"  >
-      Select File.
+      <div class="empty-msg">
+        <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+          stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="round">
+          <path d="M13 2H6a2 2 0 0 0-2 2v16c0 1.1.9 2 2 2h12a2 2 0 0 0 2-2V9l-7-7z" />
+          <path d="M13 3v6h6" /></svg>
+          <span>Select File.</span>
+      </div>
     </ng-container>
     <ng-container *ngIf="selectedFile">
       <div class="select-flie">
@@ -21,7 +27,7 @@
           <div class="ico"></div>
         </div>
         <ul>
-          <li class="name">name : {{ selectedFile.info.name }}</li>
+          <li class="name"> {{ selectedFile.info.name }}</li>
           <li>size : {{ selectedFile.info.size | ucapBytes }}</li>
           <li>
             date :
@@ -29,8 +35,35 @@
           </li>
         </ul>
       </div>
-      <div>
-        아이콘
+      <div class="select-file-option">
+        <!--툴팁 부탁해요 -->
+          <span matTooltip="다운로드" class="text-accent-darkest">
+            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+              stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="round">
+              <path d="M3 15v4c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-4M17 9l-5 5-5-5M12 12.8V2.5" /></svg>
+          </span>
+          <span matTooltip="나에게전달" class="text-accent-darkest">
+            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+              stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="round">
+              <path d="M5.52 19c.64-2.2 1.84-3 3.22-3h6.52c1.38 0 2.58.8 3.22 3" />
+              <circle cx="12" cy="10" r="3" />
+              <circle cx="12" cy="12" r="10" /></svg>
+          </span>
+          <span matTooltip="파일전달" class="text-accent-darkest">
+            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+              stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="round">
+              <g fill="none" fill-rule="evenodd">
+                <path d="M18 14v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8c0-1.1.9-2 2-2h5M15 3h6v6M10 14L20.2 3.8" />
+              </g>
+            </svg>
+          </span>
+          <span matTooltip="파일삭제" class="text-accent-darkest">
+            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+              stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="round">
+              <path d="M20 11.08V8l-6-6H6a2 2 0 0 0-2 2v16c0 1.1.9 2 2 2h6" />
+              <path d="M14 3v5h5M15.88 20.12l4.24-4.24M15.88 15.88l4.24 4.24" /></svg>
+          </span>
+
       </div>
     </ng-container>
   </div>
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/file-box.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/file-box.component.scss
index e7de30c8..c8b8e1ed 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/file-box.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/file-box.component.scss
@@ -28,10 +28,10 @@
 }
 
 .select-filebox {
+  position: relative;
   display: flex;
   flex-flow: column;
   margin: 10px;
-  padding: 10px;
   border: 1px solid #cccccc;
   .select-flie {
     display: flex;
@@ -39,6 +39,7 @@
     align-items: center;
     color: #212121;
     align-items: center;
+    padding: 10px;
     border-bottom: 1px dotted #dddddd;
     ul {
       padding: 0;
@@ -47,6 +48,43 @@
       }
     }
   }
+  .empty-msg {
+    display: inline-flex;
+    flex-flow: column;
+    margin: auto 0;
+    align-items: center;
+    justify-content: center;
+    color: #999999;
+    span {
+      padding: 6px;
+    }
+  }
+  .select-file-option {
+    position: absolute;
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    text-align: center;
+    padding: 10px 0;
+    bottom: 4px;
+    span {
+      width: 28px;
+      height: 28px;
+      display: inline-flex;
+      text-align: center;
+      justify-content: center;
+      align-items: center;
+      margin: 0 20px;
+      cursor: pointer;
+      svg {
+      }
+      &:hover {
+        border-radius: 50%;
+        background-color: #999999;
+        color: #ffffff !important;
+      }
+    }
+  }
 }
 
 .mat-table {
@@ -75,7 +113,7 @@
     }
   }
 }
-.table-box{
+.table-box {
   height: calc(100% - 450px);
   overflow-y: auto;
 }
@@ -89,13 +127,14 @@
   cursor: pointer;
 }
 
-.footer-fix{
+.footer-fix {
   position: absolute;
   bottom: 0;
-  height:160px;
+  height: 160px;
   flex-direction: column;
   box-sizing: border-box;
   display: flex;
+  border-top: 1px solid #dddddd;
   .btn-box {
     height: 50px;
     padding-bottom: 10px;
@@ -128,3 +167,8 @@
     order: 5;
   }
 }
+::ng-deep .mat-form-field-appearance-legacy {
+  .mat-form-field-infix {
+    padding: 6px;
+  }
+}
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/file-box.component.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/file-box.component.ts
index c7dde43a..6074ed4c 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/file-box.component.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/file-box.component.ts
@@ -207,4 +207,4 @@ export class FileBoxComponent implements OnInit, OnDestroy {
   onClickRow(row: FileInfoTotal) {
     this.selectedFile = row;
   }
-}
+}
\ No newline at end of file
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/room-user-list.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/room-user-list.component.scss
index e2de3c17..6cf582e3 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/room-user-list.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/room-user-list.component.scss
@@ -1,3 +1,4 @@
+@import "../../../../../../../ucap-webmessenger-ui/src/assets/scss/partials/presence";
 .list {
   width: 100%;
   height: 100%;
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 dc8856aa..ff42ac4f 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
@@ -94,7 +94,7 @@
     }
   }
 }
-.mat-tab-group > .mat-tab-header .mat-tab-label {
+::ng-deep .mat-card > .mat-tab-labels {
   border-bottom: 2px solid #dddddd;
 }
 ::ng-deep .ps-content {
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 7f998b9b..c9c35b35 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
@@ -9,7 +9,6 @@
     display: flex;
     padding: 0 10px;
     cursor: pointer;
-    background: #4f4f4f;
     height: 30px;
     color:#ffffff;
     //background: rgba(37, 27, 30, 0.9);
diff --git a/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.html b/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.html
index dcbfeada..873bc8c0 100644
--- a/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.html
+++ b/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.html
@@ -1,4 +1,4 @@
-<div class="container">
+<div class="main-container">
   <as-split
     unit="pixel"
     gutterSize="5"
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 8fe04e4d..b4ae702a 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,11 +1,9 @@
-.container {
+.main-container {
   height:100%;
   display: flex;
   flex-flow: row;
-  padding-top: 30px;
-  border: 3px solid #4f4f4f;
+  padding-top: 27px;
   border-top: none;
-
   .split-area{
     overflow: hidden;
     .left-side {
@@ -25,10 +23,13 @@
       height: 100%;
     }
     .rightDrawer{
-      width:420px;
+      width:400px;
       height: 100%;
       flex: 0 0 auto;
       overflow: hidden;
+      -webkit-box-shadow: -1px 0px 3px 0px rgba(0,0,0,0.3);
+      -moz-box-shadow: -1px 0px 3px 0px rgba(0,0,0,0.3);
+      box-shadow: -1px 0px 3px 0px rgba(0,0,0,0.3);
     }
   }
   .right-side {
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..24a05302 100644
--- a/projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss
+++ b/projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss
@@ -60,6 +60,7 @@ $lg-red: (
   A200: #ff4081,
   A400: #ff3399,
   A700: #c51162,
+  B100:#4f4f4f,
   G100: #ef4c73,
   G900: #352a37,
   contrast: (
@@ -77,28 +78,30 @@ $lg-red: (
     A200: $light-primary-text,
     A400: $light-primary-text,
     A700: $light-primary-text,
+    B100: $light-primary-text,
     G100:$dark-primary-text,
     G900:$light-primary-text
   )
 );
 
 $daesang: (
-  50: #e0f7fa,
+  50: #f9feff,//#e0f7fa,
   100: #b2ebf2,
-  200: #80deea,
+  200: #4dd0e1,//#80deea,
   300: #4dd0e1,
   400: #26c6da,
   500: #00bcd4,
   /*600: #00acc1,*/ 600: #00b6d5,
   700: #0097a7,
-  800: #2c8493,
-  900: #126a79,
+  800: #0367A6,
+  900: #024873,
   A100: #84ffff,
   A200: #18ffff,
   A400: #00e5ff,
   A700: #00b8d4,
-  G100: #6dd5ed,
-  /*G900: #192a2c,*/G900: #2193b0,
+  B100:#2d3a4a,//,#47667fbackgroundcolor
+  G100: #0367A6,
+  /*G900: #192a2c,*/G900: #6dd5ed,
   contrast: (
     50: $dark-primary-text,
     100: $dark-primary-text,
@@ -114,10 +117,44 @@ $daesang: (
     A200: $dark-primary-text,
     A400: $dark-primary-text,
     A700: $dark-primary-text,
+    B100: $light-primary-text,
     G100: $dark-primary-text,
     G900: $light-primary-text
   )
 );
+$daesang-grey: (
+  50: #fafafa,
+  100: #f5f5f5,
+  200: #eeeeee,
+  300: #e0e0e0,
+  400: #bdbdbd,
+  500: #9e9e9e,
+  600: #757575,
+  700: #616161,
+  800: #424242,
+  900: #2d3a4a,
+  A100: #ffffff,
+  A200: #eeeeee,
+  A400: #bdbdbd,
+  A700: #616161,
+  contrast: (
+    50: $dark-primary-text,
+    100: $dark-primary-text,
+    200: $dark-primary-text,
+    300: $dark-primary-text,
+    400: $dark-primary-text,
+    500: $dark-primary-text,
+    600: $light-primary-text,
+    700: $light-primary-text,
+    800: $light-primary-text,
+    900: $light-primary-text,
+    A100: $dark-primary-text,
+    A200: $dark-primary-text,
+    A400: $dark-primary-text,
+    A700: $light-primary-text,
+  )
+);
+
 
 @mixin ucap-material-theme($theme) {
   @include ucap-core-theme($theme);
@@ -133,6 +170,7 @@ $daesang: (
   $gradient-darkest:mat-color($accent, G900);
   $gradient-light:mat-color($accent, G100);
 
+  //basic
   .bg-primary-dark{
     background: mat-color($primary, 900);
     color: mat-color($primary, default-contrast);
@@ -168,6 +206,9 @@ $daesang: (
   .text-primary-color {
     color: mat-color($primary);
   }
+  .text-accent-darkest {
+    color: mat-color($accent, 900);
+  }
   .text-accent-color {
     color: mat-color($accent);
   }
@@ -180,6 +221,18 @@ $daesang: (
   .border-accent-color {
     border: 1px solid mat-color($accent);
   }
+
+  // sass 정의
+  .mat-toolbar{
+    background-color: mat-color($accent , B100);
+  }
+  .main-container {
+    border:3px solid mat-color($accent, B100);
+  }
+  .global-menu{
+    background-color: mat-color($accent , B100);
+  }
+
   .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);
@@ -187,9 +240,7 @@ $daesang: (
   .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);
-   }*/
+
   .global-menu {
     .mat-tab-label[aria-selected='true']{
      .mat-tab-label-content{
@@ -236,4 +287,12 @@ $daesang: (
     background: linear-gradient(to right, $gradient-darkest, $gradient-light);
     color:#ffffff;
   }
+  .messages .container{
+    background: mat-color($accent, 50);
+  }
+  .profile-img{
+    .responsive-chats-button:last-child {
+      background-color: $gradient-light;
+    }
+  }
 }
diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/video.component.scss b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/video.component.scss
index b91d83d5..06ff62ee 100644
--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/video.component.scss
+++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/video.component.scss
@@ -5,7 +5,7 @@
   .file-thumbimg{
     display:inline-flex;
     img {
-      width:200px;
+      height:140px;
       padding-right: 20px;
       background-repeat: no-repeat;
     }
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 0f901130..5119e8ca 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
@@ -144,7 +144,7 @@ $meBox-bg: #ffffff;
   width: 100%;
   height: 100%;
   text-align: center;
-  background-color: #dddddd;
+  background-color: rgba(0, 0, 0, 0.1);
   padding: 10px;
   margin: 10px 0;
 }
@@ -160,7 +160,6 @@ $meBox-bg: #ffffff;
     position: relative;
     display: flex;
     flex-direction: row;
-    margin-right: 40px;
     margin-left: 0;
     .profile-img {
       flex: 0 0 auto;
@@ -172,7 +171,7 @@ $meBox-bg: #ffffff;
   &.me {
     .chat-row {
       flex-direction: row-reverse;
-      margin-left: 40px;
+      margin-left: 0;
       margin-right: 0;
       .profile-info {
         flex-direction: row-reverse;
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 302b435c..7c4a947a 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
@@ -139,7 +139,6 @@ $thumbnail-msize: 40px;
           margin-left: 6px;
           border-radius: 3px;
           padding: 1px 6px;
-          background-color: #ef4c73;
           color: #ffffff;
         }
       }
diff --git a/projects/ucap-webmessenger-ui/src/lib/components/file-upload-queue.component.scss b/projects/ucap-webmessenger-ui/src/lib/components/file-upload-queue.component.scss
index 35e07c2a..59f0c5b8 100644
--- a/projects/ucap-webmessenger-ui/src/lib/components/file-upload-queue.component.scss
+++ b/projects/ucap-webmessenger-ui/src/lib/components/file-upload-queue.component.scss
@@ -17,32 +17,25 @@
   width: 100%;
   height: 100%;
   .file-upload-item {
-    background-color: #eeeeee;
     min-width: 200px;
-    margin: 0 0.5%;
+    margin: 0 1%;
     margin-bottom: 10px;
-    width: 32%;
+    width: 48%;
     border-radius: 3px;
+    background-color:#f9f9f9;
+    border:1px solid #dddddd;
     .file-upload-info {
       padding: 10px;
-      background-color:#ffffff;
-      border-bottom: 1px solid #dddddd;
       svg {
         margin-right: 6px;
       }
       .file-upload-name {
-        height: 40px;
+        height: 20px;
         @include ellipsis(2);
       }
     }
     .file-upload-progress {
       padding: 6px 10px;
     }
-    &:nth-child(3n + 1) {
-      margin-left: 1%;
-    }
-    &:nth-child(3n + 0) {
-      margin-right: 1%;
-    }
   }
 }