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 fbc0739b..8907cb78 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
@@ -75,7 +75,6 @@
       }
     }
     .room-option {
-      width: 100%;
       margin-left: auto;
     }
   }
diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/recall.component.scss b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/recall.component.scss
index 8f6cc6e6..a763b322 100644
--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/recall.component.scss
+++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/recall.component.scss
@@ -1,6 +1,8 @@
 .bubble-main {
   padding: 14px;
   text-align:left;
+  display:flex;
+  align-items: center;
   .icon-recall{
     width: 30px;
     height: 30px;
@@ -13,6 +15,8 @@
     i{
       color:#ffffff;
       font-size:20px;
+      padding-left: 2px;
+      padding-top: 2px;
     }
   }
   .recall-msg{
diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/text.component.scss b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/text.component.scss
index 0980d504..166e8c59 100644
--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/text.component.scss
+++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/text.component.scss
@@ -1,4 +1,9 @@
 .bubble-main {
   padding: 14px;
   text-align:left;
+  span{
+    word-wrap: break-word;
+    white-space: pre-wrap;
+    word-break: keep-all;
+  }
 }
\ No newline at end of file
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 0e64a9f6..a221b900 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
@@ -160,6 +160,8 @@ $meBox-bg: #ffffff;
     position: relative;
     display: flex;
     flex-direction: row;
+    margin-right:40px;
+    margin-left:0;
     .profile-img {
       flex: 0 0 auto;
       img{
@@ -170,6 +172,8 @@ $meBox-bg: #ffffff;
   &.me {
     .chat-row {
       flex-direction: row-reverse;
+      margin-left:40px;
+      margin-right:0;
       .profile-info {
         flex-direction: row-reverse;
         display: flex;
@@ -181,6 +185,7 @@ $meBox-bg: #ffffff;
   .message-main {
     margin-left: 20px;
     margin-right: 10px;
+    max-width: 80%;
     .chat-name {
       font-size: 12px;
       color: #333333;
@@ -193,6 +198,8 @@ $meBox-bg: #ffffff;
       background-color: $otherBox-bg;
       border-radius: 4px;
       box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
+      word-break: break-all;
+      word-wrap: break-word;
       &:before {
         content: '';
         width: 0px;
@@ -276,3 +283,8 @@ $meBox-bg: #ffffff;
     }
   }
 }
+.bubble-main{
+    word-wrap: break-word;
+    white-space: pre-wrap;
+    word-break: keep-all;
+}