diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box.component.scss b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box.component.scss
index f3573e9a..dc8fdda2 100644
--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box.component.scss
+++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box.component.scss
@@ -56,10 +56,12 @@ $tablet-s-width: 768px;
     display: Flex;
     flex-flow: row;
     margin-left: 10px;
-    max-width: 80%;
+    width: 80%;
     @media screen and (max-width: #{$tablet-s-width}),
       (max-height: 600px) {
       flex-flow: column;
+      max-width: 80%;
+      width: unset;
     }
     .message-main {
       margin-right: 6px;
@@ -123,8 +125,8 @@ $tablet-s-width: 768px;
       flex-flow: row-reverse;
       margin-left: 0px;
       margin-right: 10px;
-      @media screen and (max-width: #{$tablet-l-width}),
-          (max-height: 800px) {
+      @media screen and (max-width: #{$tablet-s-width}),
+          (max-height: 600px) {
         flex-flow: column;
       }
     }
@@ -144,6 +146,8 @@ $tablet-s-width: 768px;
       display: none;
     }
     .message-main {
+      display: flex;
+      justify-content: flex-end;
       text-align: right;
       margin-left: 6px;
       margin-right: 0;
diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/translation.component.scss b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/translation.component.scss
index 05f45657..96e4f965 100644
--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/translation.component.scss
+++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/translation.component.scss
@@ -1,7 +1,6 @@
 .translation-main {
   flex-direction: column;
   text-align: left;
-
   .original {
     padding: 10px;
   }
diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/video-conference.component.html b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/video-conference.component.html
index 82c2593b..c2b3b79d 100644
--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/video-conference.component.html
+++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/video-conference.component.html
@@ -21,24 +21,24 @@
   </div>
   <ul class="event-info">
     <li class="event-date bg-accent-brightest">
-      <span class="text-accent-darkest">{{
+      <label class="text-accent-darkest">{{
         'chat.event.videoConferenceRegister' | translate
-      }}</span
-      >{{ message.sentMessageJson.register }}
+      }}</label
+      ><span>{{ message.sentMessageJson.register }}</span>
     </li>
     <li class="event-time bg-accent-brightest">
-      <span class="text-accent-darkest">{{
+      <label class="text-accent-darkest">{{
         'chat.event.videoConferenceAttendee' | translate
-      }}</span
-      >{{ message.sentMessageJson.attendee }}
+      }}</label
+      ><span>{{ message.sentMessageJson.attendee }}</span>
     </li>
     <li class="event-time bg-accent-brightest">
-      <span class="text-accent-darkest">{{
+      <label class="text-accent-darkest">{{
         'chat.event.videoConferenceDate' | translate
-      }}</span
-      >{{
+      }}</label
+      ><span>{{
         message.sentMessageJson.startDate | ucapDate: 'YYYY.MM.DD (ddd) a hh:mm'
-      }}
+      }}</span>
     </li>
     <li class="event-content">
       {{ message.sentMessageJson.title }}
diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/video-conference.component.scss b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/video-conference.component.scss
index f476ecac..5b2e2df4 100644
--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/video-conference.component.scss
+++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/video-conference.component.scss
@@ -3,7 +3,7 @@
   text-align: left;
   padding: 4px;
   .event-header {
-    padding: 10px;
+    padding: 8px 10px;
     font-size: 14px;
     font-weight: 600;
     text-align: center;
@@ -29,8 +29,15 @@
       &.event-time {
         padding: 4px 10px;
         border-bottom: 1px dotted #dddddd;
+        display: flex;
+        label {
+          margin-right: 10px;
+          flex: 0 0 auto;
+          font-size: 0.96em;
+          font-weight: 600;
+          width: 40px;
+        }
         span {
-          width: 60px;
           padding: 1px 6px;
           margin-right: 6px;
           border-radius: 100px;
@@ -39,7 +46,7 @@
           justify-content: center;
           font-size: 0.96em;
           margin-bottom: 2px;
-          color: #777777;
+          color: #444444;
         }
       }
       &.event-content {
@@ -53,11 +60,10 @@
 
   .btn-box {
     width: 100%;
-    height: 40px;
-    border-top: 1px solid #dddddd;
     display: flex;
     width: 100%;
     text-align: center;
+    padding-top: 4px;
     ul {
       width: 100%;
       li {
@@ -67,7 +73,7 @@
         text-align: center;
         align-items: center;
         font-size: 13px;
-        border-right: 1px solid #dddddd;
+        border-right: 1px solid rgb(255, 255, 255, 0.6);
         &:last-child {
           border-right: none;
         }