diff --git a/macao/assets/_custom.scss b/macao/assets/_custom.scss
index d413c45ad407ca242187f70fa66dde2cb65b128a..c90b8516a4e7eafa592e8973db45d0655f8f1486 100644
--- a/macao/assets/_custom.scss
+++ b/macao/assets/_custom.scss
@@ -95,3 +95,22 @@ select.sd-dropdown.inline-dropdown, input.sd-input.inline-input {
   padding: 0px 5px;
   background-color: var(--secondary-background-color);
 }
+
+// ***********************************
+// Comment on page
+// ***********************************
+
+.comment-trigger {
+  cursor: pointer;
+  color: var(--macao-primary-color);
+  text-decoration: underline;
+}
+
+.commentaireInfo {
+  padding: 10px;
+  border-radius: 10px;
+  background-color: var(--secondary-background-color);
+  border: 1px solid var(--macao-primary-color);
+  color: black;
+  max-width: 500px;
+}
diff --git a/macao/assets/custom.js b/macao/assets/custom.js
index 2e7e51fe9f7d2c99889a21fedc7624718aa0549a..11e83034249c7a7fee035568c57ca40573391cc5 100644
--- a/macao/assets/custom.js
+++ b/macao/assets/custom.js
@@ -6,4 +6,13 @@ $(document).ready(function() {
 
     // Add Title on top of the page
     $('.book-header').show();
+
+    $('.commentaireInfo').hide();
+    $('.commentaireInfo').prop('popover', 'true');
+    $('.commentaireInfoGroup').show();
+
+    $('[spanid]').addClass('comment-trigger').on('click', function() {
+        let spanid = $(this).attr('spanid');
+        $("[commentaireid=" + spanid + "]").toggle();
+    });
 });