diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index 320efd263..a22e8f79f 100644
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -380,6 +380,7 @@ function showIssueHistory(journal, url) {
       tab_content.find('.journal:not(.has-notes)').hide();
       tab_content.find('.journal .wiki').show();
       tab_content.find('.journal .contextual .journal-actions').show();
+      tab_content.addClass('discontinuity');
 
       // always show thumbnails in notes tab
       var thumbnails = tab_content.find('.journal .thumbnails');
@@ -393,12 +394,14 @@ function showIssueHistory(journal, url) {
       tab_content.find('.journal .wiki').hide();
       tab_content.find('.journal .thumbnails').hide();
       tab_content.find('.journal .contextual .journal-actions').hide();
+      tab_content.addClass('discontinuity');
       break;
     default:
       tab_content.find('.journal').show();
       tab_content.find('.journal .wiki').show();
       tab_content.find('.journal .thumbnails').show();
       tab_content.find('.journal .contextual .journal-actions').show();
+      tab_content.removeClass('discontinuity');
   }
 
   return false;
diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index 2d82fba7d..0ae761500 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -348,10 +348,6 @@ tr.message td.created_on { white-space: nowrap; }
 tr.message td.last_message { font-size: 80%; white-space: nowrap; }
 tr.message.sticky td.subject { font-weight: bold; }
 
-body.avatars-on #replies .message.reply {padding-left: 32px;}
-#replies .reply:target h4.reply-header {background-color:#DDEEFF;}
-#replies h4 img.gravatar {margin-left:-32px;}
-
 tr.version.closed, tr.version.closed a { color: #999; }
 tr.version td.name { padding-left: 20px; }
 tr.version td.date, tr.version td.status, tr.version td.sharing { text-align: center; white-space:nowrap; }
@@ -647,28 +643,133 @@ div#issue-changesets div.changeset {border-bottom: 1px solid #ddd; padding: 4px;
 div#issue-changesets p { margin-top: 0; margin-bottom: 1em;}
 .changeset-comments {margin-bottom:1em;}
 
-div.journal .contextual {margin-top: 0;}
 div.journal.private-notes .wiki {border-left:2px solid #d22; padding-left:4px; margin-left:-6px;}
 div.journal ul.details, ul.revision-info {color:#959595; margin-bottom: 1.5em;}
 div.journal ul.details a, ul.revision-info a {color:#70A7CD;}
 div.journal ul.details a:hover, ul.revision-info a:hover {color:#D14848;}
-body.avatars-on div.journal {padding-left:32px;}
 div.journal h4 img.gravatar {margin-left:-32px;}
 div.journal span.update-info {color: #666; font-size: 0.9em;}
 
 #update {margin-bottom: 1.4em;}
 
-#history .tab-content {
-  padding: 0 6px;
-  margin-bottom: 10px;
-  border-right: 1px solid #d7d7d7;
-  border-bottom: 1px solid #d7d7d7;
-  border-left: 1px solid #d7d7d7;
-  border-radius: 0 0 3px 3px / 0 0 3px 3px;
+#history {
+  .tab-content {
+    padding: 0px 6px 10px 10px;
+    margin-bottom: 10px;
+    border: 1px solid #dfe8f1;
+    border-top: none;
+    border-radius: 0 0 3px 3px;
+    background-color: #ffffff;
+  }
+
+  p.nodata {display: none;}
+}
+
+/* issues#show, boards#show, news#show */
+.history-items {
+  .history-item {
+    padding: 8px 3px 3px 3px;
+    background-color: #ffffff;
+    position: relative;
+
+    &:before {
+      content: "";
+      width: 8px;
+      height: 8px;
+      background-color: #ffffff;
+      position: absolute;
+      left: 6px;
+      top: 16px;
+      border-radius: 50%;
+      box-shadow: 0 0 0 3px #e5e5e5;
+      z-index: 1;
+    }
+
+    /* Draw a line connecting the icons */
+    &:after {
+      content: "";
+      height: 100%;
+      width: 2px;
+      background-color: #e5e5e5;
+      position: absolute;
+      left: 9px;
+      top: 0;
+    }
+    &:first-of-type:after { top: 15px; }
+    &:last-of-type:after { height: 18px; }
+    &:first-of-type:last-of-type:after { content: none; }
+
+    .contextual {
+      padding-right: 10px;
+      padding-top: 5px;
+      margin-top: 0;
+
+      a,
+      .journal-actions,
+      .journal-link {
+        position: relative;
+        z-index: 5;
+      }
+    }
+
+    form .jstBlock,
+    form input,
+    .wiki:not(.wiki-preview),
+    &.time_entry p,
+    &.changeset .note > p {
+      margin-left: 32px;
+    }
+
+    /* .history-item-header in the form of a speech balloon */
+    h4.history-item-header {
+      left: 20px;
+      position: relative;
+      margin: 0 19px 0 10px;
+      border: none;
+      font-weight: bold;
+      background-color: #EEEEEE;
+      padding: 6px 9px;
+      font-size: 0.9em;
+      border-radius: 4px;
+      min-height: 12px;
+
+      &:before {
+        content: '';
+        position: absolute;
+        left: -6px;
+        top: 8px;
+        width: 0;
+        height: 0;
+        border-top: 5px solid transparent;
+        border-bottom: 5px solid transparent;
+        border-right: 6px solid #EEEEEE;
+      }
+
+      .gravatar {
+        position: absolute;
+        left: -35px;
+        top: 4px;
+        z-index: 5;
+        margin-left: 0;
+      }
+    }
+
+    &:target h4.history-item-header,
+    div:target h4.history-item-header {
+      background: #DDEEFF;
+
+      &:before {
+        border-right: 6px solid #DDEEFF;
+      }
+    }
+  }
+  /* For discontinuity history, do not draw a line connecting the icons */
+  &.discontinuity .history-item:after {
+    content: none;
+  }
 }
 
-#history div:target h4.note-header {background-color:#DDEEFF;}
-#history p.nodata {display: none;}
+#reply input#message_subject { width: 100%; }
 
 div#activity dl, #search-results { margin-left: 2em; }
 div#activity dd, #search-results dd { margin-bottom: 1em; padding-left: 18px; font-size: 0.9em; }
diff --git a/app/views/issues/show.html.erb b/app/views/issues/show.html.erb
index 3b713b4e7..c2c3284df 100644
--- a/app/views/issues/show.html.erb
+++ b/app/views/issues/show.html.erb
@@ -121,7 +121,7 @@ end %>
 
 <%= render partial: 'action_menu_edit' if User.current.wants_comments_in_reverse_order? %>
 
-<div id="history">
+<div id="history" class="history-items">
 <%= render_tabs issue_history_tabs, issue_history_default_tab %>
 </div>
 
diff --git a/app/views/issues/tabs/_changesets.html.erb b/app/views/issues/tabs/_changesets.html.erb
index bf00dcb7b..b78cd08ce 100644
--- a/app/views/issues/tabs/_changesets.html.erb
+++ b/app/views/issues/tabs/_changesets.html.erb
@@ -1,7 +1,7 @@
 <% @changesets.each do |changeset| %>
-  <div id="changeset-<%= changeset.id %>" class="changeset journal">
+  <div id="changeset-<%= changeset.id %>" class="changeset journal history-item">
     <div class="note">
-    <h4 class='note-header'>
+    <h4 class="note-header history-item-header">
       <%= avatar(changeset.user, :size => "24") %>
       <%= authoring changeset.committed_on, changeset.author, :label => :label_added_time_by %>
     </h4>
diff --git a/app/views/issues/tabs/_history.html.erb b/app/views/issues/tabs/_history.html.erb
index 8c6f6d31b..349280219 100644
--- a/app/views/issues/tabs/_history.html.erb
+++ b/app/views/issues/tabs/_history.html.erb
@@ -5,13 +5,13 @@
 
 <% reply_links = issue.notes_addable? -%>
 <% for journal in journals %>
-  <div id="change-<%= journal.id %>" class="<%= journal.css_classes %>">
+  <div id="change-<%= journal.id %>" class="<%= journal.css_classes %> history-item">
     <div id="note-<%= journal.indice %>" class="note">
     <div class="contextual">
       <span class="journal-actions"><%= render_journal_actions(issue, journal, :reply_links => reply_links) %></span>
       <a href="#note-<%= journal.indice %>" class="journal-link">#<%= journal.indice %></a>
     </div>
-    <h4 class='note-header'>
+    <h4 class='note-header history-item-header'>
       <%= avatar(journal.user) %>
       <%= authoring journal.created_on, journal.user, :label => :label_updated_time_by %>
       <%= render_private_notes_indicator(journal) %>
diff --git a/app/views/issues/tabs/_time_entries.html.erb b/app/views/issues/tabs/_time_entries.html.erb
index 1807475bd..5944349d0 100644
--- a/app/views/issues/tabs/_time_entries.html.erb
+++ b/app/views/issues/tabs/_time_entries.html.erb
@@ -1,5 +1,5 @@
 <% for time_entry in time_entries%>
-  <div id="time-entry-<%= time_entry.id %>" class="time_entry journal">
+  <div id="time-entry-<%= time_entry.id %>" class="time_entry journal history-item">
     <div class="note">
     <% if time_entry.editable_by?(User.current) -%>
       <div class="contextual">
@@ -15,7 +15,7 @@
         </span>
       </div>
     <% end -%>
-    <h4 class='note-header'>
+    <h4 class='note-header history-item-header'>
       <%= avatar(time_entry.user, :size => "24") %>
       <%= authoring time_entry.created_on, time_entry.user, :label => :label_added_time_by %>
     </h4>
diff --git a/app/views/messages/show.html.erb b/app/views/messages/show.html.erb
index 6c902d087..0a7a2eefc 100644
--- a/app/views/messages/show.html.erb
+++ b/app/views/messages/show.html.erb
@@ -34,13 +34,13 @@
 <br />
 
 <% unless @replies.empty? %>
-<div id="replies">
+<div id="replies" class="history-items">
 <h3 class="comments icon icon-comments"><%= l(:label_reply_plural) %> (<%= @reply_count %>)</h3>
 <% if !@topic.locked? && authorize_for('messages', 'reply') && @replies.size >= 3 %>
   <p><%= toggle_link l(:button_reply), "reply", :focus => 'message_content', :scroll => "message_content" %></p>
 <% end %>
 <% @replies.each do |message| %>
-  <div class="message reply" id="<%= "message-#{message.id}" %>">
+  <div class="message reply history-item" id="<%= "message-#{message.id}" %>">
     <div class="contextual">
       <%= link_to(
             '',
@@ -65,7 +65,7 @@
             :class => 'icon icon-del'
           ) if message.destroyable_by?(User.current) %>
     </div>
-  <h4 class='reply-header'>
+  <h4 class="reply-header history-item-header">
     <%= avatar(message.author) %>
     <%= link_to message.subject, { :controller => 'messages', :action => 'show', :board_id => @board, :id => @topic, :r => message, :anchor => "message-#{message.id}" } %>
     -
diff --git a/app/views/news/show.html.erb b/app/views/news/show.html.erb
index 9b54a66cb..dec8d50fd 100644
--- a/app/views/news/show.html.erb
+++ b/app/views/news/show.html.erb
@@ -30,23 +30,25 @@
 <%= link_to_attachments @news %>
 <br />
 
-<div id="comments" style="margin-bottom:16px;">
+<div id="comments" class="history-items" style="margin-bottom:16px;">
 <h3 class="comments"><%= l(:label_comment_plural) %></h3>
 <% if @news.commentable? && @comments.size >= 3 %>
   <p><%= toggle_link l(:label_comment_add), "add_comment_form", :focus => "comment_comments", :scroll => "comment_comments" %></p>
 <% end %>
 <% @comments.each do |comment| %>
     <% next if comment.new_record? %>
+    <div class="history-item">
     <div class="contextual">
     <%= link_to_if_authorized l(:button_delete), {:controller => 'comments', :action => 'destroy', :id => @news, :comment_id => comment},
                               :data => {:confirm => l(:text_are_you_sure)}, :method => :delete,
                               :title => l(:button_delete),
                               :class => 'icon-only icon-del' %>
     </div>
-    <h4><%= avatar(comment.author) %><%= authoring comment.created_on, comment.author %></h4>
+    <h4 class="history-item-header"><%= avatar(comment.author) %><%= authoring comment.created_on, comment.author %></h4>
     <div class="wiki">
     <%= textilizable(comment.comments) %>
     </div>
+    </div>
 <% end if @comments.any? %>
 </div>