diff --git a/package-lock.json b/package-lock.json
index 34d7c4d7..76c804c8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2436,8 +2436,7 @@
     "@types/semver": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/@types/semver/-/semver-6.0.2.tgz",
-      "integrity": "sha512-G1Ggy7/9Nsa1Jt2yiBR2riEuyK2DFNnqow6R7cromXPMNynackRY1vqFTLz/gwnef1LHokbXThcPhqMRjUbkpQ==",
-      "dev": true
+      "integrity": "sha512-G1Ggy7/9Nsa1Jt2yiBR2riEuyK2DFNnqow6R7cromXPMNynackRY1vqFTLz/gwnef1LHokbXThcPhqMRjUbkpQ=="
     },
     "@types/source-list-map": {
       "version": "0.1.2",
@@ -2985,7 +2984,6 @@
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
       "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
-      "dev": true,
       "requires": {
         "sprintf-js": "~1.0.2"
       }
@@ -5175,7 +5173,6 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
       "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==",
-      "dev": true,
       "requires": {
         "ms": "^2.1.1"
       }
@@ -5854,8 +5851,7 @@
     "electron-log": {
       "version": "3.0.9",
       "resolved": "https://registry.npmjs.org/electron-log/-/electron-log-3.0.9.tgz",
-      "integrity": "sha512-kfV4riUqW8uooYLAfrlB3EJW66W29ePipJU4/Fm8UxQekVNcR2qHI/0tiJX3oWM79VdAUiiYqL9V49lhnSIO8g==",
-      "dev": true
+      "integrity": "sha512-kfV4riUqW8uooYLAfrlB3EJW66W29ePipJU4/Fm8UxQekVNcR2qHI/0tiJX3oWM79VdAUiiYqL9V49lhnSIO8g=="
     },
     "electron-publish": {
       "version": "21.2.0",
@@ -5928,7 +5924,6 @@
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/electron-updater/-/electron-updater-4.2.0.tgz",
       "integrity": "sha512-GuS3g7HDh17x/SaFjxjswlWUaKHczksYkV2Xc5CKj/bZH0YCvTSHtOmnBAdAmCk99u/71p3zP8f0jIqDfGcjww==",
-      "dev": true,
       "requires": {
         "@types/semver": "^6.0.2",
         "builder-util-runtime": "8.4.0",
@@ -5944,7 +5939,6 @@
           "version": "8.4.0",
           "resolved": "https://registry.npmjs.org/builder-util-runtime/-/builder-util-runtime-8.4.0.tgz",
           "integrity": "sha512-CJB/eKfPf2vHrkmirF5eicVnbDCkMBbwd5tRYlTlgud16zFeqD7QmrVUAOEXdnsrcNkiLg9dbuUsQKtl/AwsYQ==",
-          "dev": true,
           "requires": {
             "debug": "^4.1.1",
             "sax": "^1.2.4"
@@ -5953,8 +5947,7 @@
         "sax": {
           "version": "1.2.4",
           "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
-          "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
-          "dev": true
+          "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw=="
         }
       }
     },
@@ -6287,8 +6280,7 @@
     "esprima": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
-      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
-      "dev": true
+      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A=="
     },
     "esrecurse": {
       "version": "4.2.1",
@@ -8488,7 +8480,6 @@
       "version": "3.13.1",
       "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.13.1.tgz",
       "integrity": "sha512-YfbcO7jXDdyj0DGxYVSlSeQNHbD7XPWvrVWeVUujrQEoZzWJIRrCPoyk6kL6IAjAG2IolMK4T0hNUe0HOUs5Jw==",
-      "dev": true,
       "requires": {
         "argparse": "^1.0.7",
         "esprima": "^4.0.0"
@@ -9454,8 +9445,7 @@
     "lazy-val": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/lazy-val/-/lazy-val-1.0.4.tgz",
-      "integrity": "sha512-u93kb2fPbIrfzBuLjZE+w+fJbUUMhNDXxNmMfaqNgpfQf1CO5ZSe2LfsnBqVAk7i/2NF48OSoRj+Xe2VT+lE8Q==",
-      "dev": true
+      "integrity": "sha512-u93kb2fPbIrfzBuLjZE+w+fJbUUMhNDXxNmMfaqNgpfQf1CO5ZSe2LfsnBqVAk7i/2NF48OSoRj+Xe2VT+lE8Q=="
     },
     "lcid": {
       "version": "2.0.0",
@@ -9615,8 +9605,7 @@
     "lodash.isequal": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
-      "integrity": "sha1-QVxEePK8wwEgwizhDtMib30+GOA=",
-      "dev": true
+      "integrity": "sha1-QVxEePK8wwEgwizhDtMib30+GOA="
     },
     "log-symbols": {
       "version": "2.2.0",
@@ -10158,8 +10147,7 @@
     "ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-      "dev": true
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
     },
     "multicast-dns": {
       "version": "6.2.3",
@@ -11053,8 +11041,7 @@
     "pako": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.10.tgz",
-      "integrity": "sha512-0DTvPVU3ed8+HNXOu5Bs+o//Mbdj9VNQMUOe9oKCwh8l0GNwpTDMKCWbRjgtD291AWnkAgkqA/LOnQS8AmS1tw==",
-      "dev": true
+      "integrity": "sha512-0DTvPVU3ed8+HNXOu5Bs+o//Mbdj9VNQMUOe9oKCwh8l0GNwpTDMKCWbRjgtD291AWnkAgkqA/LOnQS8AmS1tw=="
     },
     "parallel-transform": {
       "version": "1.2.0",
@@ -12653,8 +12640,7 @@
     "semver": {
       "version": "6.3.0",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
-      "dev": true
+      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
     },
     "semver-compare": {
       "version": "1.0.0",
@@ -13467,8 +13453,7 @@
     "sprintf-js": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
-      "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
-      "dev": true
+      "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw="
     },
     "sshpk": {
       "version": "1.16.1",
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 01da071c..d35ed6f6 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
@@ -3,7 +3,7 @@
     display: inline-flex;
     padding-left: 10px;
     align-items: center;
-    color:#ffffff;
+    color: #ffffff;
   }
   .btn-box {
     height: 100%;
@@ -21,7 +21,7 @@
   align-items: center;
   padding: 0;
   font-size: 14px;
-  background-color:#f9f9f9;
+  background-color: #f9f9f9;
   border-bottom: 1px solid #dddddd;
   .searchbox {
     width: 100%;
@@ -43,6 +43,7 @@
           width: 100%;
           font-size: 14px;
           border: none;
+          min-height: 20px;
         }
         .mat-form-field-suffix {
           .mat-icon {
@@ -78,9 +79,9 @@
   height: 100%;
 }
 ::ng-deep .cdk-virtual-scroll-orientation-vertical {
-  .cdk-virtual-scroll-content-wrapper{
+  .cdk-virtual-scroll-content-wrapper {
     width: 100%;
-    height:100%;
+    height: 100%;
     contain: unset;
   }
 }
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html
index 91fbc75b..e919a2a3 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html
@@ -195,20 +195,16 @@
         class="file-drop-zone"
       ></ucap-file-upload-queue>
     </div>
-
-    <div class="sticker-selector-container">
-      <ucap-sticker-selector
-        *ngIf="isShowStickerSelector"
-        #stickerSelector
-        [stickerHistory]='getStickerHistory()'
-        (selectedSticker)="onSelectedSticker($event)"
-        class="sticker-selector-zone"
-      ></ucap-sticker-selector>
-      <div></div>
-    </div>
   </div>
   <!-- / CHAT CONTENT -->
 
+  <!-- sticker-selector -->
+  <div class="sticker-selector-container">
+    <ucap-sticker-selector *ngIf="isShowStickerSelector" #stickerSelector [stickerHistory]='getStickerHistory()'
+      (selectedSticker)="onSelectedSticker($event)" class="sticker-selector-zone"></ucap-sticker-selector>
+    <div></div>
+  </div>
+  <!-- / sticker-selector -->
   <!-- CHAT FOOTER -->
   <div fxFlex="0 0 auto" fxLayout="column" *ngIf="getEnableSend()">
     <!-- REPLY FORM -->
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 95f55e61..a85cb25b 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
@@ -78,6 +78,7 @@
     }
   }
 }
+
 .chat-content {
   position: relative;
   background: transparent;
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 13aafa20..e8e450b9 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
@@ -50,7 +50,6 @@
         ngModel
         name="message"
         [matTextareaAutosize]="true"
-        [matAutosizeMinRows]="1"
         [matAutosizeMaxRows]="20"
       ></textarea>
     </mat-form-field>
@@ -61,9 +60,19 @@
       type="submit"
       aria-label="Send message"
     >
-      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
-        stroke-width="2" stroke-linecap="butt" stroke-linejoin="round">
-        <path d="M12 19V6M5 12l7-7 7 7" /></svg>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="20"
+        height="20"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="butt"
+        stroke-linejoin="round"
+      >
+        <path d="M12 19V6M5 12l7-7 7 7" />
+      </svg>
     </button>
   </form>
 </div>
diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/form.component.scss b/projects/ucap-webmessenger-ui-chat/src/lib/components/form.component.scss
index 3917f916..d47da8ed 100644
--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/form.component.scss
+++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/form.component.scss
@@ -13,32 +13,35 @@
     i {
       font-size: 20px;
       color: #666;
-      width:30px;
-      height:30px;
+      width: 30px;
+      height: 30px;
       text-align: center;
       line-height: 30px;
       &:hover {
-      color: #333333;
-      background-color: #efefef;
-      border-radius: 50%;
+        color: #333333;
+        background-color: #efefef;
+        border-radius: 50%;
       }
     }
   }
 }
-.mat-form-field-underline{
-  background-color:none;
+textarea[name='message'] {
+  min-height: 30px;
+}
+.mat-form-field-underline {
+  background-color: none;
 }
 .send-message-button {
   margin-left: 20px;
-  i{
+  i {
     display: inline-block;
     width: 40px;
     height: 40px;
     border-radius: 50%;
-    line-height:40px;
+    line-height: 40px;
     font-size: 20px;
     color: #ffffff;
-    &:hover{
+    &:hover {
       opacity: 0.8;
     }
   }
diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/attach-file.component.scss b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/attach-file.component.scss
index 236c426b..937da8b2 100644
--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/attach-file.component.scss
+++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/attach-file.component.scss
@@ -2,7 +2,7 @@
   display: flex;
   flex-direction: row;
   padding: 14px;
-  min-width: 200px;
+  min-width: 300px;
   .file-img {
     display: inline-flex;
     width: 50px;
diff --git a/projects/ucap-webmessenger-ui-organization/src/lib/components/tree.component.scss b/projects/ucap-webmessenger-ui-organization/src/lib/components/tree.component.scss
index 8293a687..9fe606d4 100644
--- a/projects/ucap-webmessenger-ui-organization/src/lib/components/tree.component.scss
+++ b/projects/ucap-webmessenger-ui-organization/src/lib/components/tree.component.scss
@@ -58,25 +58,34 @@
   // }
 
   .tree-has-child {
-    height: 40px;
-    min-height: 40px;
+    height: 50px;
+    min-height: 50px;
     li {
       display: flex;
       align-items: center;
       cursor: pointer;
       width: 100%;
+      margin-left: 10px;
+      margin-right: 10px;
 
       .tree-node-body {
+        width: 100%;
+        height: 40px;
+        background-color: #eef9fd;
+        border: 1px solid #cee1e8;
+        border-radius: 4px;
+        padding-bottom: 10px;
+
         .tree-node-expand-btn {
-          background-color: white;
+          background-color: transparent;
         }
       }
     }
   }
 
   .tree-no-child {
-    height: 40px;
-    min-height: 40px;
+    height: 50px;
+    min-height: 50px;
     font-size: 13px;
     li {
       display: flex;
diff --git a/projects/ucap-webmessenger-ui/src/lib/components/sticker-selector.component.html b/projects/ucap-webmessenger-ui/src/lib/components/sticker-selector.component.html
index d777f5b9..86a94b26 100644
--- a/projects/ucap-webmessenger-ui/src/lib/components/sticker-selector.component.html
+++ b/projects/ucap-webmessenger-ui/src/lib/components/sticker-selector.component.html
@@ -1,5 +1,16 @@
 <div *ngIf="currentSticker" class="selected-sticker">
   <img [src]="getStickerContentsImage(currentSticker)" />
+  <span class="btn-close">
+    <button
+      mat-button
+      matSuffix
+      mat-icon-button
+      aria-label="Close"
+      (click)="onClickClose()"
+    >
+      <mat-icon>close</mat-icon>
+    </button>
+  </span>
 </div>
 <div class="sticker-selector">
   <mat-tab-group
@@ -25,7 +36,7 @@
           "
         />
       </ng-template>
-      <div fxFlex fxLayout="row" fxLayoutGap="10px">
+      <div fxFlex fxLayout="row" fxLayoutGap="20px" class="sticker-item-box">
         <div
           *ngFor="let sticker of getStickerInfos(stickerInfo)"
           (click)="onClickSelectSticker(sticker)"
diff --git a/projects/ucap-webmessenger-ui/src/lib/components/sticker-selector.component.scss b/projects/ucap-webmessenger-ui/src/lib/components/sticker-selector.component.scss
index ee20e2ea..494c3ef4 100644
--- a/projects/ucap-webmessenger-ui/src/lib/components/sticker-selector.component.scss
+++ b/projects/ucap-webmessenger-ui/src/lib/components/sticker-selector.component.scss
@@ -1,8 +1,35 @@
 .sticker-selector {
-  height: 200px;
-  overflow: auto;
+  height: 220px;
+  border-top: 1px solid #cccccc;
+
+  .sticker-item-box {
+    flex-wrap: wrap;
+    padding: 20px 20px 0;
+    overflow: auto;
+  }
 }
 
 .sticker-item {
+  width: 60px;
+  margin-bottom: 20px;
+  display: inline-flex;
   cursor: pointer;
 }
+
+.selected-sticker {
+  position: relative;
+  padding: 20px;
+  text-align: right;
+  background-color: rgba(0, 0, 0, 0.4);
+  img {
+    margin-right: 40px;
+  }
+  .btn-close {
+    position: absolute;
+    top: 2px;
+    right: 20px;
+    width: 40px;
+    height: 40px;
+    color: #ffffff;
+  }
+}