diff --git a/app/assets/javascripts/app/controllers/ticket_zoom.js.coffee b/app/assets/javascripts/app/controllers/ticket_zoom.js.coffee
index d63ebd71a..43db17b0f 100644
--- a/app/assets/javascripts/app/controllers/ticket_zoom.js.coffee
+++ b/app/assets/javascripts/app/controllers/ticket_zoom.js.coffee
@@ -582,6 +582,8 @@ class ArticleView extends App.Controller
     'click [data-type=internal]':   'public_internal'
     'click .show_toogle':           'show_toogle'
     'click [data-type=reply]':      'reply'
+    'click .more':                  'more_toogle'
+    'click .close-details':         'more_toogle'
 #    'click [data-type=reply-all]':  'replyall'
 
   constructor: ->
@@ -643,6 +645,19 @@ class ArticleView extends App.Controller
         $(e.target).text( App.i18n.translateContent('See more') )
         $(e.target).next('div').addClass('hide')
 
+  more_toogle: (e) ->
+    e.preventDefault()
+    if !$(e.target).parent().find('.article-meta.top').hasClass('hide')
+      $(e.target).parent().find('.more').removeClass('hide')
+      $(e.target).parent().find('.close-details').addClass('hide')
+      $(e.target).parent().find('.article-meta.top').addClass('hide')
+      $(e.target).parent().find('.article-meta.bottom').addClass('hide')
+    else
+      $(e.target).parent().find('.more').addClass('hide')
+      $(e.target).parent().find('.close-details').removeClass('hide')
+      $(e.target).parent().find('.article-meta.top').removeClass('hide')
+      $(e.target).parent().find('.article-meta.bottom').removeClass('hide')
+
   checkIfSignatureIsNeeded: (type) =>
 
     # add signature
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 e53dd4f38..fea49a315 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
@@ -1,9 +1,11 @@
 <% for article in @articles: %>
-<div class="ticket-article-item bubble-grid <%= article.sender.name.toLowerCase() %> <%= article.type.name %><%= ' internal' if article.internal is true %>" data-id="<%= article.id %>" id="article-<%= article.id %>">
+<div class="ticket-article-item bubble-grid <%= article.sender.name.toLowerCase() %> <%= article.type.name %>" data-id="<%= article.id %>" id="article-<%= article.id %>">
   <div class="horizontal<%= ' reverse' if article.sender.name isnt 'Agent' %>">
     <div class="avatar" style="background-image: url(<%= article.created_by.imageUrl %>)"></div>
     <div class="article-content flex">
-      <div class="article-meta top">
+      <div class="more"><%- @T('more') %></div>
+      <div class="close-details hide"><%- @T('close details') %></div>
+      <div class="article-meta top hide">
       <% if article.from: %>
         <div class="horizontal article-meta-row" title="<%- @Ti( 'From' ) %>: <%= article.from %>">
           <div class="article-meta-key contain-text"><%- @T( 'From' ) %></div>
@@ -29,8 +31,8 @@
         </div>
       <% end %>
       </div>
-      <div class="text-bubble"><div class="bubble-arrow"></div><%- article.html %></div>
-      <div class="article-meta bottom">
+      <div class="text-bubble <%= ' internal' if article.internal is true %>"><div class="bubble-arrow"></div><%- article.html %></div>
+      <div class="article-meta bottom hide">
         <div class="horizontal article-meta-row">
           <div class="article-meta-key"><%- @T( 'Kanal' ) %></div>
           <div class="article-meta-value">
diff --git a/app/assets/stylesheets/zzz.css.erb b/app/assets/stylesheets/zzz.css.erb
index 26dfcbb69..e5c4553ea 100644
--- a/app/assets/stylesheets/zzz.css.erb
+++ b/app/assets/stylesheets/zzz.css.erb
@@ -2440,6 +2440,12 @@ footer {
     box-shadow: none;
   }
 
+  .ticket-article-item .text-bubble.internal {
+    background: #f2def2;
+    border-color: #eed3d7;
+    box-shadow: none;
+  }
+
   .new-article .text-bubble {
     padding: 0;
     border-color: #b3b3b3;
@@ -2486,7 +2492,7 @@ footer {
       top: 15px;
       overflow: hidden;
     }
-    
+
     .bubble-arrow:after {
       content: "";
       position: absolute;
@@ -2500,6 +2506,11 @@ footer {
       transform: rotate(-45deg);
     }
 
+    .ticket-article-item .text-bubble.internal .bubble-arrow:after {
+      background: #f2def2;
+      border: #eed3d7;
+    }
+
     .customer.ticket-article-item .bubble-arrow {
       left: auto;
       right: -6px;