diff --git a/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.html b/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.html
index ebe936ed..4bdc69e7 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.html
@@ -350,6 +350,7 @@
         "
         (edit)="$event.stopPropagation()"
         (cancel)="$event.stopPropagation()"
+        class="form-eidt"
       >
         <span ucapInlineEditInput="view">{{ loginRes?.statusMessage1 }}</span>
         <span ucapInlineEditInput="edit"
@@ -359,6 +360,7 @@
             type="text"
             [value]="loginRes?.statusMessage1"
             (click)="$event.stopPropagation()"
+
         /></span>
       </ucap-inline-edit-input>
     </button>
@@ -373,6 +375,7 @@
         "
         (edit)="$event.stopPropagation()"
         (cancel)="$event.stopPropagation()"
+        class="form-eidt"
       >
         <span ucapInlineEditInput="view">{{ loginRes?.statusMessage2 }}</span>
         <span ucapInlineEditInput="edit"
@@ -396,6 +399,7 @@
         "
         (edit)="$event.stopPropagation()"
         (cancel)="$event.stopPropagation()"
+        class="form-eidt"
       >
         <span ucapInlineEditInput="view">{{ loginRes?.statusMessage3 }}</span>
         <span ucapInlineEditInput="edit"
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 a538efa8..6f4af011 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
@@ -253,8 +253,26 @@
       button {
         .presence {
           margin-right: 10px;
+          transform: translateY(0px);
           cursor: pointer;
         }
+        .form-eidt {
+          display: inline-flex;
+          width: 100%;
+          height: 100%;
+          padding-right: 20px;
+          align-items: center;
+          span {
+            display: inline-flex;
+            &:nth-child(2) {
+              margin-left: auto;
+            }
+            input {
+              padding: 4px;
+              height: 70%;
+            }
+          }
+        }
         &:nth-child(2) {
           margin-right: 20px;
           margin-left: auto;
@@ -265,7 +283,6 @@
           width: 24px;
           height: 24px;
           &.clock {
-            background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-clock'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
           }
           &.edit {
             background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-edit-2'%3E%3Cpath d='M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z'%3E%3C/path%3E%3C/svg%3E");