diff --git a/resources/www/lightbox/styles/main-mobile.scss b/resources/www/lightbox/styles/main-mobile.scss
index a3476342d9..44f21f6b64 100644
--- a/resources/www/lightbox/styles/main-mobile.scss
+++ b/resources/www/lightbox/styles/main-mobile.scss
@@ -24,4 +24,560 @@
 
 #right-btn {
   float: right;
-}
\ No newline at end of file
+}
+
+.report-modal, .ui-dialog .ui-dialog-content {
+  background: linear-gradient(#3c3c3c,#111);
+}
+
+.ui-bar-c, .ui-body-c, .ui-btn-down-c, .ui-btn-hover-c, .ui-btn-up-c, .ui-overlay-c {
+  text-shadow: none;
+}
+@import '../../_shared/styles/variables';
+$lightboxPath: '../images/';
+$imagesPath: '/assets/vendors/jquery-ui/images/dark-hive/';
+
+$mainMenuBackgroundColor: #c7c7c7; //BFBFBF;
+$mainMenuBottomBorder: 1px solid #c7c7c7;
+$mainMenuLinkColor: #212121;
+$mainMenuLinkHoverColor: #000000;
+$mainMenuLinkActiveColor: #BFBFBF;
+$mainMenuLinkBackgroundHoverColor: transparent;
+
+body {
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 13px;
+}
+
+ul {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+
+img {
+  border: none;
+  vertical-align: middle;
+}
+
+.title15 {
+  font-size: 15px;
+  font-weight: bold;
+}
+
+.record_display_box {
+  width: 100%;
+  height: 100%;
+  display: block;
+  table {
+    vertical-align: middle;
+    table-layout: fixed;
+  }
+  .title {
+    margin: 0 10px;
+  }
+  .record {
+    position: relative;
+    max-width: none;
+    max-height: none;
+  }
+  .header {
+    color: #BFBFBF;
+    height: 30px;
+    bottom: auto;
+    overflow: hidden;
+    .title {
+      overflow: hidden;
+      line-height: 20px;
+      height: 20px;
+    }
+  }
+  .lightbox_container {
+    top: 30px;
+    overflow: hidden;
+  }
+  .display_id {
+    top: 5px;
+    margin: 0 0 0 5px;
+    background: #bebebe;
+  }
+}
+
+#sc_wrapper {
+  left: 20px;
+  right: 20px;
+  overflow-x: scroll;
+  overflow-y: hidden;
+}
+
+#sc_container {
+  position: relative;
+  height: 100%;
+}
+
+.basket_element_wrapper {
+  position: relative;
+  float: left;
+  padding: 0 5px;
+}
+
+.basket_element {
+  position: relative;
+  float: left;
+  width: 114px;
+  height: 130px;
+  border: 1px solid #212121;
+  text-align: left;
+  padding: 5px 8px;
+  &.selected {
+    background-color: #212121;
+  }
+  .display_id {
+    top: 4px;
+    left: 8px;
+  }
+  .agreement {
+    position: absolute;
+    top: 4px;
+    right: 8px;
+    z-index: 99;
+  }
+  .image {
+    position: relative;
+    z-index: 90;
+  }
+  .previewTips {
+    background-image: url('#{$iconsPath}zoom.gif');
+    background-position: center center;
+    background-repeat: no-repeat;
+    cursor: help;
+    position: absolute;
+    bottom: 4px;
+    right: 8px;
+    height: 18px;
+    width: 18px;
+    z-index: 99;
+  }
+}
+
+#report .display_id {
+  top: 0;
+  left: 0;
+  border-radius: 0;
+}
+
+#report .CHIM.diapo {
+  position: relative;
+  text-align: center;
+}
+
+.display_id {
+  background-color: #FFFFFF;
+  padding: 3px 6px;
+  font-weight: bold;
+  z-index: 99;
+  color: #212121;
+  -moz-border-radius: 50%;
+  -webkit-border-radius: 50%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.not_decided {
+  opacity: 0.30;
+  filter: alpha(opacity=30);
+}
+
+#sc_wrapper .not_decided {
+  display: none;
+}
+
+#right_scroller {
+  width: 30px;
+  right: -10px;
+  left: auto;
+  background-image: url('#{$lightboxPath}right_arrow.png');
+  background-position: center center;
+  background-repeat: no-repeat;
+}
+
+#left_scroller {
+  width: 30px;
+  left: -10px;
+  right: auto;
+  background-image: url('#{$lightboxPath}left_arrow.png');
+  background-position: center center;
+  background-repeat: no-repeat;
+}
+
+#basket_infos {
+  overflow: hidden;
+  background-color: #1F1E1B;
+  color: #BFBFBF;
+}
+
+#basket_options {
+  height: 35px;
+  top: auto;
+  background-color: #1F1E1B;
+  text-align: center;
+}
+
+#basket_options .confirm_report {
+  margin: 5px auto;
+}
+
+#basket_infos .user_infos {
+  height: 120px;
+  top: auto;
+}
+
+#basket_infos {
+  table {
+    width: 100%;
+    margin: 5px 0;
+    .title {
+      width: 100%;
+    }
+    .report_wrapper {
+      text-align: right;
+    }
+  }
+}
+
+#right_column {
+  left: auto;
+  right: 0;
+  width: 240px;
+}
+
+#right_column_validation_toggle {
+  bottom: 45px;
+  background-color: #1F1E1B;
+  height: 30px;
+  top: auto;
+  text-align: center;
+  display: none;
+  line-height: 25px;
+  color: #BFBFBF;
+}
+
+#right_column .right_column_title {
+  height: 30px;
+  bottom: auto;
+}
+
+#right_column .right_column_title img.expanded {
+  display: none;
+}
+
+#right_column .right_column_title img.collapsed {
+  display: inline;
+}
+
+#right_column .right_column_title.expanded img.expanded {
+  display: inline;
+}
+
+#right_column .right_column_title.expanded img.collapsed {
+  display: none;
+}
+
+#right_column .right_column_wrapper {
+  top: 30px;
+  bottom: 45px;
+}
+
+#right_column .right_column_wrapper.caption {
+  bottom: 85px;
+}
+
+#record_infos {
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+#record_compare {
+  visibility: hidden;
+  top: auto;
+  left: auto;
+}
+
+#record_compare .header, #record_compare .lightbox_container {
+  left: 5px;
+}
+
+#record_wrapper.comparison #record_main .header, #record_wrapper.comparison #record_main .lightbox_container {
+  right: 5px;
+}
+
+.agreement_selector {
+  position: absolute;
+  bottom: 10px;
+  right: 10px;
+}
+
+.clickable {
+  cursor: pointer;
+}
+
+.big_box.agree {
+  border: 2px solid #35AC00;
+  background-color: #35AC00;
+}
+
+.big_box.disagree {
+  border: 2px solid #DE1200;
+  background-color: #DE1200;
+}
+
+.big_box, .big_box.not_decided {
+  width: 95px;
+  margin: 0 auto;
+  padding: 6px 10px;
+  height: 30px;
+  color: #1F1E1B;
+  background-color: #353430;
+  border: 2px solid #353430;
+  text-align: center;
+  opacity: 1;
+  filter: alpha(opacity=100);
+}
+
+.big_box span {
+  margin: 0 10px;
+}
+
+li.userchoice {
+  margin: 5px 0 0px 20px;
+}
+
+.userchoice.disagree {
+  color: #DE1200;
+}
+
+.userchoice.agree {
+  color: #35AC00;
+}
+
+.basket_report_user {
+  padding: 7px 10px;
+}
+
+.basket_report_user_wrapper {
+  background-color: #bebebe;
+  margin: 0 0 5px;
+}
+
+.ui-button-text-icon-primary .ui-button-text, .ui-button-text-icons .ui-button-text {
+  padding: 0.2em 1em 0.2em 2.1em;
+}
+
+/*******
+*
+* Index
+*
+* ******/
+#main_index {
+  position: relative;
+  width: 600px;
+  margin: 0 auto;
+}
+
+#main_wrapper {
+  width: 100%;
+}
+
+#main_wrapper h1 {
+  font-weight: bold;
+  font-size: 25px;
+}
+
+table th {
+  text-align: right;
+  vertical-align: bottom;
+  height: 60px;
+  border-bottom: 1px solid #8F8F8F;
+}
+
+table th.title {
+  text-align: left;
+}
+
+table th h1 {
+  margin-left: 20px;
+}
+
+table th i {
+  margin-right: 20px;
+}
+
+.ui-state-default.note_closer, .ui-state-default.note_saver {
+  background-color: #353430;
+  padding: 5px;
+  margin: 0 10px;
+}
+
+.ui-state-default.note_saver {
+  background-color: #1F1E1B;
+}
+
+.record_display_box form .buttons {
+  margin: 5px;
+  text-align: right;
+}
+
+.record_display_box form {
+  margin: 15px 0;
+  width: 90%;
+}
+
+.record_display_box form textarea {
+  width: 100%;
+  height: 75px;
+}
+
+#navigation {
+  width: 200px;
+}
+
+.basket_downloader {
+  background-color: #1F1E1B;
+  margin: 0 10px;
+  padding: 2px;
+  border: 0;
+}
+
+hr {
+  width: 100%;
+  height: 1px;
+  background-color: #212121;
+  border: none;
+}
+
+.report {
+  margin: 0 10px;
+  vertical-align: bottom;
+}
+
+/*
+*
+* Overrides JqueryUI
+*
+*/
+.ui-button {
+  background: transparent;
+  border: none;
+  margin: 0;
+  padding: 0;
+}
+
+.ui-button-text-only .ui-button-text {
+  padding: 0.15em;
+}
+
+.ui-dialog {
+  .ui-dialog-titlebar {
+    padding: 1em 1em;
+  }
+}
+.videoTips {
+  width: 100%;
+  height: 100%;
+}
+
+
+#basket_infos {
+  margin-bottom: 20px;
+  .mobile_aggreement_box {
+    padding: 20px;
+  }
+}
+
+.ui-button-icon.ui-icon.ui-icon-closethick {
+  background-position: -73px 0px;
+  background-color: rgba(0,0,0,.9);
+  padding: 0;
+}
+
+button.confirm_report.ui-button.ui-corner-all.ui-widget {
+  color: #fff;
+  font-size: 12.5px;
+  font-weight: bold;
+  padding: 11px;
+  display: inline-block;
+  width: auto!important;
+  background: #333;
+  background-image: linear-gradient(#444,#2d2d2d);
+  border: 1px solid rgba(255,255,255,.3);
+  text-shadow: 0 1px 0 #111;
+  border-radius: 16px;
+}
+.report_wrapper {
+  position: relative;
+}
+.report_btn {
+  position: absolute;
+  top: -41px;
+  right: 0;
+  z-index: 1;
+  background: #8bc34a;
+  border: 1px solid #8bc34a;
+  box-sizing: border-box;
+  padding: 8px 13px;
+  min-width: 110px;
+  border-radius: 4px;
+  color: #fff!important;
+  text-decoration: none;
+  text-align: center;
+  transition: all 0.3s;
+  &:hover, &:focus {
+    background: darken(#8bc34a, 0.2);
+    border-color:  darken(#8bc34a, 0.3);
+  }
+  &.report_list {
+    background: #f44336;
+    border-color:  #f44336;
+    &:hover, &:focus {
+      background: darken(#f44336, 0.2);
+      border-color:  darken(#f44336, 0.3);
+    }
+  }
+}
+.report_list {
+  display: none;
+}
+.report_summary_backup , .report_list_backup {
+  display: none;
+}
+
+
+.chim-wrapper-block {
+  .chim-block {
+    margin: 0;
+  }
+  .chim-inner {
+    width: 100%;
+    display: inline-block;
+    min-width: 296px;
+  }
+  .chim-left {
+    float: left;
+    margin-right: 10px;
+    width:30%;
+    .diapo {
+      div {
+        max-width: 100%;
+      }
+    }
+  }
+
+  .chim-right {
+    float: left;
+    width: calc(70% - 10px);
+  }
+}
+
+.thumb_wrapper  img.record_image {
+  max-width: 100%;
+}
diff --git a/templates/mobile/lightbox/sc_note.html.twig b/templates/mobile/lightbox/sc_note.html.twig
index c987560a99..eb6f48d1d7 100644
--- a/templates/mobile/lightbox/sc_note.html.twig
+++ b/templates/mobile/lightbox/sc_note.html.twig
@@ -1,9 +1,7 @@
 {% for validationDatas in basket_element.getValidationDatas() %}
-  {% set is_mine = validationDatas.getParticipant().getUser().getId() == app.getAuthenticatedUser().getId() %}
-  {% if validationDatas.getNote() != '' or (validationDatas.getAgreement() is not null and is_mine)  %}
   <li>
     <h3 style="text-align:left;">
-      {% if is_mine == false and validationDatas.getAgreement() is not null %}
+      {% if validationDatas.getAgreement() is not null %}
       <img style="vertical-align:middle;"
            src="/assets/lightbox/images/{% if validationDatas.getAgreement() == true %}agree.png{% else %}disagree.png{% endif %}" />
       {% endif %}
@@ -13,5 +11,4 @@
     <p style="text-align:left;">{{ 'validation:: note' | trans }} : {{ validationDatas.getNote()|nl2br }}</p>
     {% endif %}
   </li>
-  {% endif %}
 {% endfor %}
diff --git a/templates/mobile/lightbox/validate.html.twig b/templates/mobile/lightbox/validate.html.twig
index b06c6e7728..77030e8f17 100644
--- a/templates/mobile/lightbox/validate.html.twig
+++ b/templates/mobile/lightbox/validate.html.twig
@@ -38,21 +38,53 @@
       {% set basket_length = basket.getElements().count() %}
       {% trans with {'%basket_length%' : basket_length} %}%basket_length% documents{% endtrans %}
     </p>
-    <ul class="image_set">
-    {% for basket_element in basket.getElements() %}
-      <li class="image_box" id="sselcontid_{{basket_element.getId()}}">
-        {% if basket_element.getBasket().getValidation() and basket_element.getBasket().getValidation().getParticipant(app.getAuthenticatedUser()).getCanAgree() %}
-          <div class="valid_choice valid_choice_{{basket_element.getId()}} {% if basket_element.getUserValidationDatas(app.getAuthenticatedUser()).getAgreement() == true %}agree{% elseif basket_element.getUserValidationDatas(app.getAuthenticatedUser()).getAgreement() == false and basket_element.getUserValidationDatas(app.getAuthenticatedUser()).getAgreement() is not null %}disagree{% endif %}">
-          </div>
+
+
+        {% if basket.getValidation() %}
+            <div class="report_wrapper">
+                <a id="report_summary" class="report_btn report_summary" href="#" onclick="$.ajax({
+            type: 'GET',
+            url: '/lightbox/ajax/LOAD_REPORT/' + $('#navigation').val() + '/',
+            dataType: 'html',
+            success: function (data) {
+            $('#report_list_backup').empty().append($('#report').html());
+            $('#report').empty().append(data);
+            $('#report .record_image').css('height','auto');
+            return;
+            }
+            });
+            $(this).hide();
+            $('#report_list').show();">
+                    {{ 'lightbox::recaptitulatif' | trans }}
+                </a>
+                <a id="report_list" class="report_btn report_list" href="#" onclick=" $(this).hide();
+            $('#report_summary').show();
+            $('#report').empty().append($('#report_list_backup').html());">
+                    {{ 'lightbox::list' | trans }}
+                </a>
+            </div>
+
+            <input type="hidden" id="navigation" value="{{ basket.getId() }}">
+            <div id="report" class="summary_block">
+                <ul class="image_set">
+                    {% for basket_element in basket.getElements() %}
+                        <li class="image_box" id="sselcontid_{{basket_element.getId()}}">
+                            {% if basket_element.getBasket().getValidation() and basket_element.getBasket().getValidation().getParticipant(app.getAuthenticatedUser()).getCanAgree() %}
+                                <div class="valid_choice valid_choice_{{basket_element.getId()}} {% if basket_element.getUserValidationDatas(app.getAuthenticatedUser()).getAgreement() == true %}agree{% elseif basket_element.getUserValidationDatas(app.getAuthenticatedUser()).getAgreement() == false and basket_element.getUserValidationDatas(app.getAuthenticatedUser()).getAgreement() is not null %}disagree{% endif %}">
+                                </div>
+                            {% endif %}
+                            <a href="{{ path('lightbox_ajax_load_basketelement', { 'sselcont_id' : basket_element.getId() }) }}">
+                                {{thumbnail.format(basket_element.getRecord(app).get_thumbnail(), 80, 80, '', true, false)}}
+                            </a>
+                            <input type="hidden" class="display_id" name="display_id" value="{{basket_element.getOrd()}}" />
+                        </li>
+                    {% endfor %}
+                </ul>
+            </div>
         {% endif %}
-        <a href="{{ path('lightbox_ajax_load_basketelement', { 'sselcont_id' : basket_element.getId() }) }}">
-          {{thumbnail.format(basket_element.getRecord(app).get_thumbnail(), 80, 80, '', true, false)}}
-        </a>
-        <input type="hidden" class="display_id" name="display_id" value="{{basket_element.getOrd()}}" />
-      </li>
-    {% endfor %}
-    </ul>
-  </div>
+    </div>
+    <div class="report_list_backup" id="report_list_backup">&nbsp;</div>
+    <div class="report_summary_backup " id="report_summary_backup">&nbsp;</div>
     <div data-role="footer">
         {% if basket.getValidation() and basket.getValidation().getParticipant(app.getAuthenticatedUser()).getCanAgree() %}
             <button class="confirm_report" style="width:100%;" title="{{ 'validation::envoyer mon rapport' | trans }}">
diff --git a/templates/web/lightbox/basket_content_report.html.twig b/templates/web/lightbox/basket_content_report.html.twig
index 54798fc9b5..f507e5d7a7 100644
--- a/templates/web/lightbox/basket_content_report.html.twig
+++ b/templates/web/lightbox/basket_content_report.html.twig
@@ -4,48 +4,43 @@
 <div style="margin:0 7px;overflow:hidden;">
     {% for basket_element in basket.getElements() %}
     {% set record = basket_element.getRecord(app) %}
-        <div class="chim-wrapper wrapCHIM_{{basket_element.getId()}} valid">
-            <div style="margin:20px;">
-                <table style="width: 100%; min-width: 330px;">
-                    <tr valign="top">
-                        <td style="width:165px;">
-                            <div id="CHIM_{{basket_element.getId()}}_{{record.get_serialize_key()}}"
-                                class="CHIM diapo">
-                                <div class="display_id">
-                                    {{basket_element.getOrd()}}
+    <div class="chim-wrapper-block  chim-wrapper wrapCHIM_{{basket_element.getId()}} valid">
+        <div class="chim-block">
+            <div class="chim-inner">
+                <div class="chim-left">
+                    <div id="CHIM_{{basket_element.getId()}}_{{record.get_serialize_key()}}"  class="CHIM diapo">
+                        <div class="display_id">
+                            {{basket_element.getOrd()}}
+                        </div>
+                        {{thumbnail.format(record.get_thumbnail(),165, 125, '', true, false)}}
+                    </div>
                 </div>
-                {{thumbnail.format(record.get_thumbnail(),165, 125, '', true, false)}}
+                <div class="chim-right">
+                    {% for validationDatas in basket_element.getValidationDatas()%}
+                        <div class="basket_report_user_wrapper ui-corner-all">
+                            <div class="basket_report_user">
+                                {% if validationDatas.getAgreement() == true %}
+                                    {% set imguser = '<img src="/assets/lightbox/images/agree.png" />' %}
+                                    {% set styleuser = '' %}
+                                {% elseif validationDatas.getAgreement() is null %}
+                                    {% set imguser = '' %}
+                                    {% set styleuser = 'margin-left:18px;' %}
+                                {% else %}
+                                    {% set imguser = '<img src="/assets/lightbox/images/disagree.png" />' %}
+                                    {% set styleuser = '' %}
+                                {% endif %}
+                                <b style="{{styleuser}}">{{imguser|raw}} {{validationDatas.getParticipant().getUser().getDisplayName()}}</b>
+                                {% if validationDatas.getNote() != '' %}
+                                     : {{validationDatas.getNote()|nl2br}}
+                                {% endif %}
                             </div>
-                        </td>
-                        <td style="width:10px;">
-                        </td>
-                        <td>
-                            {% for validationDatas in basket_element.getValidationDatas()%}
-                                <div class="basket_report_user_wrapper ui-corner-all">
-                                    <div class="basket_report_user">
-                                        {% if validationDatas.getAgreement() == true %}
-                                            {% set imguser = '<img src="/assets/lightbox/images/agree.png" />' %}
-                                            {% set styleuser = '' %}
-                                        {% elseif validationDatas.getAgreement() is null %}
-                                            {% set imguser = '' %}
-                                            {% set styleuser = 'margin-left:18px;' %}
-                                        {% else %}
-                                            {% set imguser = '<img src="/assets/lightbox/images/disagree.png" />' %}
-                                            {% set styleuser = '' %}
-                                        {% endif %}
-                                        <b style="{{styleuser}}">{{imguser|raw}} {{validationDatas.getParticipant().getUser().getDisplayName()}}</b>
-                                        {% if validationDatas.getNote() != '' %}
-                                             : {{validationDatas.getNote()|nl2br}}
-                                        {% endif %}
-                                    </div>
-                                </div>
-                            {% endfor %}
-                        </td>
-                    </tr>
-                </table>
+                        </div>
+                    {% endfor %}
+                </div>
             </div>
         </div>
-        <div><hr/></div>
+    </div>
+    <div><hr/></div>
     {% endfor %}
 </div>