diff --git a/webapp/sources/rudder/rudder-rest/src/main/scala/com/normation/rudder/rest/internal/EventLogAPI.scala b/webapp/sources/rudder/rudder-rest/src/main/scala/com/normation/rudder/rest/internal/EventLogAPI.scala
index 4a7dc5dbfdf..eee2b4ca14b 100644
--- a/webapp/sources/rudder/rudder-rest/src/main/scala/com/normation/rudder/rest/internal/EventLogAPI.scala
+++ b/webapp/sources/rudder/rudder-rest/src/main/scala/com/normation/rudder/rest/internal/EventLogAPI.scala
@@ -171,7 +171,11 @@ class EventLogAPI (
         })
         htmlDetails = eventLogDetail.displayDetails(event, crId)
       } yield {
-        toJsonResponse(None, "content" -> htmlDetails.toString())
+        val response =
+          ( ("id"          -> id)
+          ~ ("content"     -> htmlDetails.toString())
+          )
+        toJsonResponse(None, response)
       } ) match {
         case Full(resp) => resp
         case eb : EmptyBox =>
diff --git a/webapp/sources/rudder/rudder-web/src/main/webapp/javascript/rudder/rudder-datatable.js b/webapp/sources/rudder/rudder-web/src/main/webapp/javascript/rudder/rudder-datatable.js
index 6215637f698..1d0ed212d92 100644
--- a/webapp/sources/rudder/rudder-web/src/main/webapp/javascript/rudder/rudder-datatable.js
+++ b/webapp/sources/rudder/rudder-web/src/main/webapp/javascript/rudder/rudder-datatable.js
@@ -1406,11 +1406,14 @@ function createEventLogTable(gridId, data, contextPath, refresh) {
             } else {
                 row.addClass("opened");
                 // Set data in the open row with the details function from data
-                $.getJSON(contextPath + '/secure/api/eventlog/' + data.id + "/details", function(data) {
-                    var html = $.parseHTML( data["data"]["content"] );
-                    table.row(row).child(html).show();
+                $.getJSON(contextPath + '/secure/api/eventlog/' + data.id + "/details" ,function(data) {
+                var id = data["data"]["id"]
+                var rollback = setupRollbackBlock(data.id)
+                var html = $.parseHTML( data["data"]["content"] );
+                table.row(row).child(html).show();
                 });
               }
+
               // toggle list open / close classes
               IdTd.toggleClass('listopen');
               IdTd.toggleClass('listclose');
@@ -1425,6 +1428,52 @@ function createEventLogTable(gridId, data, contextPath, refresh) {
   createTable(gridId,data, columns, params, contextPath, refresh, "event_logs", false);
 }
 
+// why 'rollbackBlock' don't change ??
+function setupRollbackBlock(id) {
+  var rollbackId = 'rollback' + id;
+  var confirmId = 'confirm' + id;
+  var btnId = 'restoreBtn' + id;
+  var rollbackBlock = document.getElementById("rollbackBlock");
+
+  console.log(rollbackBlock.innerHTML.replace(/{{rollbackId}}/g,rollbackId).replace(/{{restoreBtnId}}/g,btnId).replace(/{{confirmId}}/g,confirmId))
+
+  return rollbackBlock.innerHTML.replace(/{{rollbackId}}/g, rollbackId)
+          .replace(/{{restoreBtnId}}/g, btnId)
+          .replace(/{{confirmId}}/g, confirmId);
+}
+
+function getRadioChecked(radios) {
+ for (var i = 0, length = radios.length; i < length; i++) {
+   if (radios[i].checked) {
+     return radios[i].value;
+   }
+ }
+}
+
+function confirmRollback(id) {
+  $('#confirm'+id).stop(true, true).slideDown(1000);
+  var radios = document.getElementsByName('action');
+  var action = getRadioChecked(radios);
+  $.getJSON(contextPath + '/secure/api/eventlog/' + fnData.id + "/details/rollback?mode=confirm&action="+action, function(data) {
+     console.log(data["data"]["content"]);
+  });
+}
+
+function cancelRollback(id) {
+  $('#confirm'+id).innerHTML = "";
+  $('#rollback'+id).show();
+}
+
+function showConfirmationDialog(id) {
+console.log("showconfirmationdialog")
+  $('#rollback'+id).hide();
+  var confirmDiv = $('confirm'+id);
+  var radios = $('action');
+  var action = getRadioChecked(radios);
+  var confirmHtml ="<p><i class='fa fa-exclamation-triangle warnicon' aria-hidden='true'></i><b>Are you sure you want to restore configuration policy" + action + "this</b></p><span><button class='btn btn-default' onClick=cancelRollback(" + id + ")>Cancel</button></span><span><button class='btn btn-default' onClick=confirmRollback(" + id + ")>Confirm</button></span>";
+  $(confirmDiv).html(confirmHtml);
+}
+
 function computeCompliancePercent (complianceArray) {
   return computeComplianceOK(complianceArray).percent;
 }
diff --git a/webapp/sources/rudder/rudder-web/src/main/webapp/secure/utilities/eventLogs.html b/webapp/sources/rudder/rudder-web/src/main/webapp/secure/utilities/eventLogs.html
index d55b6fa9f89..165dd92e91b 100644
--- a/webapp/sources/rudder/rudder-web/src/main/webapp/secure/utilities/eventLogs.html
+++ b/webapp/sources/rudder/rudder-web/src/main/webapp/secure/utilities/eventLogs.html
@@ -39,10 +39,37 @@
           <lift:ignore>
             This div gets the content of the eventDetailPopup injected within
           </lift:ignore>
-        </div>
+        </div>html
 
       </div>
     </div>
   </div>
+
+  <script id="rollbackBlock" type="text/template">
+    <div class='rollbackDisplay'>
+      <fieldset class='rollbackFieldSet'>
+        <legend>Rollback</legend>
+        <div id='{{rollbackId}}'>
+          <span class='alignRollback'>Restore configuration policy to</span>
+          <ul style='display: inline-block;padding-left:5px; text-align:left;'>
+            <input class='radio' type='radio' id='after' name='action' value='after' checked/>
+            <label for='after'>After</label>
+            <input class='radio' type='radio' id='before' name='action' value='before'/>
+            <label for='before'>Before</label>
+          </ul>
+          <span class='alignRollback'>this change</span>
+          <span>
+            <button id='{{restoreBtnId}}'>Restore</button>
+          </span>
+        </div>
+        <span id='{{confirmId}}'></span>
+      </fieldset>
+    </div>
+  </script>
+
 </lift:surround>
 
+
+
+
+