diff --git a/app/assets/javascripts/app/controllers/layout_ref.coffee b/app/assets/javascripts/app/controllers/layout_ref.coffee
index 9849d3e62..d4ff5b290 100644
--- a/app/assets/javascripts/app/controllers/layout_ref.coffee
+++ b/app/assets/javascripts/app/controllers/layout_ref.coffee
@@ -2183,11 +2183,19 @@ class ChatToTicketRef extends App.ControllerContent
 
   elements:
     '.js-scrollHolder': 'scrollHolder'
+    '.js-boxFade': 'boxFade'
+    '.js-attachments': 'attachments'
+    '.js-chatBox': 'chatBox'
+
+  events:
+    'input .js-textInput': 'placeBoxFade'
 
   constructor: ->
     super
     @render()
     @scrollToBottom()
+    @boxFade.height @chatBox.outerHeight()
+    @placeBoxFade()
 
   render: ->
     @html App.view('layout_ref/chat_to_ticket')()
@@ -2195,6 +2203,14 @@ class ChatToTicketRef extends App.ControllerContent
   scrollToBottom: ->
     @scrollHolder.scrollTop(@scrollHolder.prop('scrollHeight'))
 
+  placeBoxFade: =>
+    y1 = @attachments.offset().top - @boxFade.offset().top
+
+    @boxFade.html App.view('layout_ref/boxFade')
+      width: @attachments.offset().left - @boxFade.offset().left
+      height: @boxFade.height()
+      y1: y1
+      y2: y1 + @attachments.outerHeight()
 
 App.Config.set( 'layout_ref/chat_to_ticket', ChatToTicketRef, 'Routes' )
 
diff --git a/app/assets/javascripts/app/views/layout_ref/boxFade.jst.eco b/app/assets/javascripts/app/views/layout_ref/boxFade.jst.eco
new file mode 100644
index 000000000..81b545360
--- /dev/null
+++ b/app/assets/javascripts/app/views/layout_ref/boxFade.jst.eco
@@ -0,0 +1,9 @@
+<svg width="<%- @width %>px" height="<%- @height %>px">
+  <defs>
+    <linearGradient x1="0%" y1="0" x2="100%" y2="0" id="boxFadeGradient">
+        <stop stop-color="#389ED9" stop-opacity="0.05" offset="0%"></stop>
+        <stop stop-color="#D9D9D9" stop-opacity="0.28" offset="100%"></stop>
+    </linearGradient>
+  </defs>
+  <path d="M0,0 C0,0 <%- @width-15 %>,<%- @y1-15 %> <%- @width %>,<%- @y1 %> L<%- @width %>,<%- @y2 %> C<%- @width-15 %>,<%- @y2+15 %> 0,<%- @height %> 0,<%- @height %> L0,0 Z" fill="url(#boxFadeGradient)" />
+</svg>
\ No newline at end of file
diff --git a/app/assets/javascripts/app/views/layout_ref/chat_to_ticket.jst.eco b/app/assets/javascripts/app/views/layout_ref/chat_to_ticket.jst.eco
index 30b676bed..40bf0b8bd 100644
--- a/app/assets/javascripts/app/views/layout_ref/chat_to_ticket.jst.eco
+++ b/app/assets/javascripts/app/views/layout_ref/chat_to_ticket.jst.eco
@@ -1,5 +1,5 @@
 <div class="newTicket newTicket--chatTicket">
-  <div class="box chatHistory">
+  <div class="box chatHistory js-chatBox">
     <div class="page-header">
       <h1>Chat</h1>
     </div>
@@ -36,7 +36,7 @@
 </div>
     </div>
   </div>
-  <%- @Icon('arrow-right', 'arrow--x2') %>
+  <div class="boxFade js-boxFade"></div>
   <div class="box">
       <div class="page-header">
           <h1>New Ticket</h1>
@@ -84,8 +84,8 @@
     <label for="TicketArticle_204825_body">Text <span>*</span></label>
 </div>
 <div class="controls"><div class="richtext form-control">
-    <div contenteditable="true" id="TicketArticle_204825_body" data-name="body" class=""></div><div class="shortcut dropdown"><ul class="dropdown-menu" style="width: 360px; max-height: 200px;"><li><a>-</a></li></ul></div>
-    <div class="attachments attachments--list">
+    <div contenteditable="true" id="TicketArticle_204825_body" data-name="body" class="js-textInput"></div><div class="shortcut dropdown"><ul class="dropdown-menu" style="width: 360px; max-height: 200px;"><li><a>-</a></li></ul></div>
+    <div class="attachments attachments--list js-attachments">
       <%- @Icon('paperclip') %>
       <div class="attachments-title">1 Attached File</div>
       <div class="attachment">
diff --git a/app/assets/stylesheets/zammad.scss b/app/assets/stylesheets/zammad.scss
index e0bdd1ad3..0437bcd67 100644
--- a/app/assets/stylesheets/zammad.scss
+++ b/app/assets/stylesheets/zammad.scss
@@ -1459,8 +1459,8 @@ input.time.time--12 {
   .richtext.form-control .attachments.attachments--list:not(:empty) {
     border-top: 1px solid rgba(0,0,0,.04);
     white-space: normal;
-    margin: 0 -12px -14px;
-    padding: 25px 20px 7px 72px;
+    margin: 0 -12px -28px;
+    padding: 25px 20px 21px 72px;
     position: relative;
     line-height: 1;
   }
@@ -5060,6 +5060,14 @@ footer {
     display: flex;
     flex-direction: column;
   }
+
+  .boxFade {
+    top: 34px;
+    height: 100%;
+    position: absolute;
+    margin-left: -34px;
+    z-index: 1;
+  }
 }
 
 .box {