diff --git a/app/assets/javascripts/default_data_block.js b/app/assets/javascripts/default_data_block.js
index e00ba9ba5..ff6aae685 100644
--- a/app/assets/javascripts/default_data_block.js
+++ b/app/assets/javascripts/default_data_block.js
@@ -21,6 +21,7 @@ function init_default_data_block() {
         var block = $(element).parents('.show-block');
         if (block.attr('id') == 'messages') {
           block.children('.last-commentaire').toggle();
+          $(".commentaires").animate({ scrollTop: $(this).height() }, "slow");
         }
 
         block.children('.body').slideToggle(duration);
diff --git a/app/assets/stylesheets/dossier_show.scss b/app/assets/stylesheets/dossier_show.scss
index e9c1b2efa..8d6c06fd8 100644
--- a/app/assets/stylesheets/dossier_show.scss
+++ b/app/assets/stylesheets/dossier_show.scss
@@ -8,6 +8,13 @@
         margin-bottom: 20px;
       }
     }
+    .body {
+      .commentaires {
+        max-height: 350px;
+        overflow-y: scroll;
+        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.075) 0%, rgba(219, 219, 219, 0) 50%, rgba(250, 251, 253, 0.18) 51%, #ffffff 100%);
+      }
+    }
     .last-commentaire, .commentaire {
       padding: 20px 0 0 20px;
       .comment-header {
diff --git a/app/views/backoffice/dossiers/show.html.haml b/app/views/backoffice/dossiers/show.html.haml
index a552aad51..1a7b220dd 100644
--- a/app/views/backoffice/dossiers/show.html.haml
+++ b/app/views/backoffice/dossiers/show.html.haml
@@ -11,8 +11,9 @@
           - message_count = @facade.commentaires.count
           = (message_count == 1) ? "1 message" : "#{message_count} messages"
       %div.body
-        - @facade.commentaires.object.sort.each do |commentaire|
-          = render partial: commentaire
+        %div.commentaires
+          - @facade.commentaires.object.sort.each do |commentaire|
+            = render partial: commentaire
         .row
           .col-lg-12.col-md-12
             %div.split-hr