diff --git a/app/assets/javascripts/app/controllers/ticket_zoom.js.coffee b/app/assets/javascripts/app/controllers/ticket_zoom.js.coffee
index 12ccc8a63..485f34f20 100644
--- a/app/assets/javascripts/app/controllers/ticket_zoom.js.coffee
+++ b/app/assets/javascripts/app/controllers/ticket_zoom.js.coffee
@@ -176,7 +176,7 @@ class App.TicketZoom extends App.Controller
     # if page header is not possible to use - mainScrollHeigth to low - hide page header
     else
       top = -headerHeight
-    
+
     @scrollPageHeader.css('transform', "translateY(#{top}px)")
 
   render: (force) =>
@@ -700,7 +700,7 @@ class TicketTitle extends App.Controller
     @lastTitle = ticket.title
 
     @html App.view('ticket_zoom/title')(
-      ticket:     ticket
+      ticket: ticket
     )
 
     @$('.ticket-title-update').ce({
@@ -1552,6 +1552,8 @@ class Article extends App.Controller
       if @article_changed
         @article['html'] = @article['html'] + '</div>'
 
+    @article['html'] = @article['html'].replace( /\n/g, '<br>' )
+
   actionRow: ->
     if @isRole('Customer')
       @article.actions = []
diff --git a/app/assets/javascripts/app/views/layout_ref/communication_overview.jst.eco b/app/assets/javascripts/app/views/layout_ref/communication_overview.jst.eco
index 7fb82e5ab..3016ce3c7 100644
--- a/app/assets/javascripts/app/views/layout_ref/communication_overview.jst.eco
+++ b/app/assets/javascripts/app/views/layout_ref/communication_overview.jst.eco
@@ -196,12 +196,12 @@ Grüße, Peter</div>
         <div class="article-content zIndex-1 horizontal">
           <span class="avatar user-popover " data-id="3" style="background-image: url(api/v1/users/image/bb100af55234cf61fb6f207636f095f8)" data-placement="right" data-original-title="" title=""></span>
           <div class="flex bubble-gap internal-border">
-            <div class="text-bubble"><div class="bubble-arrow"></div>Lieber HP,
-anbei findest du die Midi Noten für Maria Maria "I Like it Loud".
-Wünsche dir einen guten Auftritt in Hamburg.
-
-Alles gute,
-Oliver
+            <div class="text-bubble"><div class="bubble-arrow"></div>Lieber HP,<br>
+anbei findest du die Midi Noten für Maria Maria "I Like it Loud".<br>
+Wünsche dir einen guten Auftritt in Hamburg.<br>
+<br>
+Alles gute,<br>
+Oliver<br>
               <div class="attachments">
                 <div class="paperclip icon"></div>
                 <h3>2 <%- @T('Attached Files') %></h3>
diff --git a/app/assets/javascripts/app/views/ticket_zoom/article_view.jst.eco b/app/assets/javascripts/app/views/ticket_zoom/article_view.jst.eco
index db367cf14..7a72e71cd 100644
--- a/app/assets/javascripts/app/views/ticket_zoom/article_view.jst.eco
+++ b/app/assets/javascripts/app/views/ticket_zoom/article_view.jst.eco
@@ -41,7 +41,22 @@
     <% end %>
     <%- article.created_by.avatar("40", position) %>
     <div class="flex bubble-gap internal-border">
-      <div class="text-bubble"><div class="bubble-arrow"></div><%- article.html %></div>
+      <div class="text-bubble">
+        <div class="bubble-arrow"></div>
+        <%- article.html %>
+        <% if !_.isEmpty( article.attachments ): %>
+          <div class="attachments">
+            <div class="paperclip icon"></div>
+            <h3><%- article.attachments.length %> <%- @T('Attached Files') %></h3>
+            <% for attachment in article.attachments: %>
+              <div class="attachment horizontal">
+                <a class="attachment-name u-highlight" href="<%= App.Config.get('api_path') %>/ticket_attachment/<%= article.ticket_id %>/<%= article.id %>/<%= attachment.id %>" target="_blank" data-type="attachment"><%= attachment.filename %></a>
+                <div class="attachment-size"><%= attachment.size %></div>
+              </div>
+            <% end %>
+          </div>
+        <% end %>
+      </div>
     </div>
   </div>
 
@@ -59,13 +74,6 @@
           </div>
         </div>
       </div>
-      <% if article.attachments: %>
-        <div class="always-shown">
-        <% for attachment in article.attachments: %>
-          <a href="<%= App.Config.get('api_path') %>/ticket_attachment/<%= article.ticket_id %>/<%= article.id %>/<%= attachment.id %>" target="_blank" data-type="attachment" class="attachment" title="<%= attachment.size %>"><%= attachment.filename %></a>
-        <% end %>
-        </div>
-      <% end %>
 
       <% if article.actions: %>
       <div class="article-actions horizontal stretch">
diff --git a/app/assets/stylesheets/zammad.css.scss b/app/assets/stylesheets/zammad.css.scss
index 353c162fa..d7109040c 100644
--- a/app/assets/stylesheets/zammad.css.scss
+++ b/app/assets/stylesheets/zammad.css.scss
@@ -2978,8 +2978,8 @@ footer {
   position: relative;
 }
 
-  /* 
-    clip the article-meta to not stand out on the other side 
+  /*
+    clip the article-meta to not stand out on the other side
     of the text-bubble if the text bubble is small
   */
 
@@ -3056,7 +3056,6 @@ footer {
 
   .text-bubble {
     padding: 10px 20px;
-    white-space: pre-wrap;
     background: white;
     border-radius: 2px;
     border: 1px solid hsl(240,4%,95%);
@@ -3364,7 +3363,6 @@ footer {
 
   .ticket-edit .text-bubble {
     border-color: #b3b3b3;
-    white-space: normal;
     border-radius: 5px;
     padding-left: 12px;
     padding-right: 12px;