diff --git a/apps/common/main/lib/view/History.js b/apps/common/main/lib/view/History.js
index 225394955b..84d3edecf7 100644
--- a/apps/common/main/lib/view/History.js
+++ b/apps/common/main/lib/view/History.js
@@ -81,24 +81,36 @@ define([
                 store: this.storeHistory,
                 enableKeyEvents: false,
                 itemTemplate: _.template([
-                    '<div id="<%= id %>" class="history-item-wrap ' + '<% if (!isVisible) { %>' + 'hidden' + '<% } %>' + '" ',
-                    'style="display: block; ' + '<% if (!isRevision) { %>' + (Common.UI.isRTL() ? 'padding-right: 40px;' : 'padding-left: 40px;') + '<% } %>' + '<% if (canRestore && selected) { %>' + 'padding-bottom: 6px;' + '<% } %>' +'">',
-                        '<div class="user-date"><%= created %></div>',
-                        '<% if (markedAsVersion) { %>',
-                        '<div class="user-version">' + this.textVer + '<%=version%></div>',
-                        '<% } %>',
-                        '<% if (isRevision && hasChanges) { %>',
-                            '<div class="revision-expand  ' + '<% if (isExpanded) { %>' + 'up' + '<% } %>' + '"></div>',
-                        '<% } %>',
-                        '<div class="user-name">',
-                            '<div class="color"', 
+                    '<div ', 
+                        'id="<%= id %>"',
+                        'class="history-item-wrap ' + '<% if (!isVisible) { %>' + 'hidden' + '<% } %>' + '" ',
+                        'style="<% if (!isRevision) { %>' + (Common.UI.isRTL() ? 'padding-right: 40px;' : 'padding-left: 40px;') + '<% } %>' + '<% if (canRestore && selected) { %>' + 'padding-bottom: 6px;' + '<% } %>',
+                    '">',
+                        '<div class="item-internal">',
+                            '<div ', 
+                                'class="color"', 
                                 '<% if (avatar) { %>',
                                     'style="background-image: url(<%=avatar%>); <% if (usercolor!==null) { %> border-color:<%=usercolor%>; border-style:solid;<% }%>"', 
                                 '<% } else { %>',
                                     'style="background-color: <% if (usercolor!==null) { %> <%=usercolor%> <% } else { %> #cfcfcf <% }%>;"',
                                 '<% } %>',
-                            '><% if (!avatar) { %><%-initials%><% } %></div>',
-                            '<span><%= Common.Utils.String.htmlEncode(AscCommon.UserInfoParser.getParsedName(username)) %></span>',
+                            '>',
+                                '<% if (!avatar) { %><%-initials%><% } %>', 
+                            '</div>',
+                            '<div class="item-content">',
+                                '<div class="item-title">',
+                                    '<div class="user-date"><%= created %></div>',
+                                    '<% if (markedAsVersion) { %>',
+                                        '<div class="user-version">' + this.textVer + '<%=version%></div>',
+                                    '<% } %>',
+                                '</div>',
+                                '<% if (isRevision && hasChanges) { %>',
+                                    '<div class="revision-expand  ' + '<% if (isExpanded) { %>' + 'up' + '<% } %>' + '"></div>',
+                                '<% } %>',
+                                '<div class="user-name">',
+                                    '<%= Common.Utils.String.htmlEncode(AscCommon.UserInfoParser.getParsedName(username)) %>',
+                                '</div>',
+                            '</div>',
                         '</div>',
                         '<% if (canRestore && selected) { %>',
                             '<label class="revision-restore" role="presentation" tabindex="-1">' + this.textRestore + '</label>',
diff --git a/apps/common/main/resources/less/history.less b/apps/common/main/resources/less/history.less
index 610722aa24..d8ed9f2904 100644
--- a/apps/common/main/resources/less/history.less
+++ b/apps/common/main/resources/less/history.less
@@ -77,12 +77,6 @@
             background-color: @highlight-button-pressed-ie;
             background-color: @highlight-button-pressed;
 
-            .user-name,
-            .user-date {
-                color: @text-normal-pressed-ie;
-                color: @text-normal-pressed;
-            }
-
             .revision-expand {
                 border-color: @icon-normal-pressed-ie;
                 border-color: @icon-normal-pressed;
@@ -100,19 +94,36 @@
             padding: 10px 20px 15px 2px;
         }
 
+        .item-internal {
+            display: flex;
+        }
+
+        .item-content {
+            flex: 1;
+            line-height: 12.65px;
+            overflow: hidden;
+        }
+
+        .item-title {
+            display: flex;
+            align-items: center;
+        }
+
         .user-date {
             display: inline-block;
+            color: @text-normal-ie;
+            color: @text-normal;
             .font-size-medium();
             .font-weight-bold();
-            .margin-right(12px);
-            white-space: nowrap;
             overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
         }
 
         .user-version {
             display: inline-block;
             max-width: 60px;
-            height: 18px;
+            line-height: 12px;
             color: @highlight-button-pressed-ie;
             color: @highlight-button-pressed;
             font-size: 10px;
@@ -123,11 +134,14 @@
             background-color: @background-normal-ie;
             background-color: @background-normal;
             text-align: center;
-            padding: 1px 5px;
+            padding: 3px 5px;
             border-radius: 2px;
+            .margin-left-8();
         }
 
         .user-name {
+            color: @text-secondary-ie;
+            color: @text-secondary;
             width: 100%;
             white-space: nowrap;
             overflow: hidden;
@@ -135,7 +149,6 @@
             .font-weight-bold();
             cursor: pointer;
             text-overflow: ellipsis;
-            .padding-right(35px);
         }
 
         .color {