diff --git a/apps/common/main/lib/view/Chat.js b/apps/common/main/lib/view/Chat.js
index 2ad7b383b..af9f423cb 100644
--- a/apps/common/main/lib/view/Chat.js
+++ b/apps/common/main/lib/view/Chat.js
@@ -60,8 +60,7 @@ define([
         storeMessages: undefined,
 
         tplUser: ['<li id="<%= user.get("iid") %>"<% if (!user.get("online")) { %> class="offline"<% } %>>',
-                        '<div class="name"><%= scope.getUserName(user.get("username")) %>',
-                            '<div class="color" style="background-color: <%= user.get("color") %>;" ></div>',
+                        '<div class="name"><div class="color" style="background-color: <%= user.get("color") %>;" ></div><%= scope.getUserName(user.get("username")) %>',
                         '</div>',
                     '</li>'].join(''),
 
diff --git a/apps/common/main/resources/less/chat.less b/apps/common/main/resources/less/chat.less
index a1df8b984..9746a0e72 100644
--- a/apps/common/main/resources/less/chat.less
+++ b/apps/common/main/resources/less/chat.less
@@ -52,10 +52,9 @@
         }
 
         .color {
-            position: absolute;
-            top: 0;
-            left: 0;
-            margin-top: 1px;
+            display: inline-block;
+            vertical-align: middle;
+            margin: 0 5px 3px 0;
             width: 12px;
             height: 12px;
             border: 1px solid @gray-dark;
@@ -65,12 +64,12 @@
             font-size: 12px;
             font-weight: bold;
             display: block;
-            position: relative;
-            padding: 0 10px 0 16px;
-            margin-top: -2px;
+            padding: 0 10px 0 0;
             white-space: nowrap;
             text-overflow: ellipsis;
             overflow: hidden;
+            line-height: normal;
+            height: 16px;
         }
     }