diff --git a/src/static/skins/colibris/pad.css b/src/static/skins/colibris/pad.css
index c8f17958..b3e82178 100644
--- a/src/static/skins/colibris/pad.css
+++ b/src/static/skins/colibris/pad.css
@@ -18,6 +18,7 @@
 @import url("src/plugins/font_color.css");
 @import url("src/plugins/tables2.css");
 @import url("src/plugins/author_hover.css");
+@import url("src/plugins/comments.css");
 
 @import url("src/pad-variants.css");
 
diff --git a/src/static/skins/colibris/src/pad-variants.css b/src/static/skins/colibris/src/pad-variants.css
index 5db91efa..1d561c02 100644
--- a/src/static/skins/colibris/src/pad-variants.css
+++ b/src/static/skins/colibris/src/pad-variants.css
@@ -57,7 +57,7 @@
 /* ============================ */
 /* == Super Light Background == */
 /* ============================ */
-.super-light-background #editorcontainerbox, .super-light-background #sidediv  {
+.super-light-background #editorcontainerbox, .super-light-background #sidediv, .super-light-background, .light-background.super-light-editor  {
   --text-color: var(--dark-color);
   --text-soft-color: var(--dark-soft-color);
   --border-color: var(--light-soft-color);
@@ -75,15 +75,18 @@
 .super-light-background #chatbox.stickyChat .chat-content {
   box-shadow: none;
 }
-.super-light-background  body, .full-width-editor.super-light-editor body {
+.super-light-background  body, .full-width-editor.super-light-editor body:not(.plugin-ep_comments_page) {
   --scrollbar-bg: var(--super-light-color);
   --scrollbar-track: var(--light-color);
   --scrollbar-thumb: var(--dark-soft-color);
 }
+.super-light-background .compact-display-content {
+  background-color: var(--super-light-color);
+}
 /* ====================== */
 /* == Light Background == */
 /* ====================== */
-.light-background #editorcontainerbox, .light-background #sidediv  {
+.light-background #editorcontainerbox, .light-background #sidediv, .light-background  {
   --text-color: var(--super-dark-color);
   --text-soft-color: var(--dark-color);
   --border-color: var(--light-soft-color);
@@ -91,7 +94,7 @@
   --bg-color: var(--light-color);
   background-color: var(--light-color);
 }
-.light-background  body, .full-width-editor.light-editor body {
+.light-background  body, .full-width-editor.light-editor body:not(.plugin-ep_comments_page) {
   --scrollbar-bg: var(--light-color);
   --scrollbar-track: var(--light-soft-color);
   --scrollbar-thumb: var(--dark-soft-color);
@@ -122,10 +125,13 @@
   --scrollbar-track: var(--light-soft-color);
   --scrollbar-thumb: var(--dark-soft-color);
 }
+.light-background .compact-display-content {
+  background-color: var(--light-color);
+}
 /* =========================== */
 /* == Super Dark Background == */
 /* =========================== */
-.super-dark-background #editorcontainerbox, .super-dark-background #sidediv  {
+.super-dark-background #editorcontainerbox, .super-dark-background #sidediv, .super-dark-background  {
   --text-color: var(--light-color);
   --text-soft-color: var(--light-soft-color);
   --border-color: var(--dark-color);
@@ -135,7 +141,7 @@
 .super-dark-background #editorcontainerbox {
   background-color: var(--super-dark-color);
 }
-.super-dark-background body, .full-width-editor.super-dark-editor body {
+.super-dark-background body, .full-width-editor.super-dark-editor body:not(.plugin-ep_comments_page) {
   --scrollbar-bg: var(--super-dark-color);
   --scrollbar-track: var(--dark-color);
   --scrollbar-thumb: var(--light-soft-color);
@@ -147,7 +153,7 @@
   --scrollbar-track: var(--dark-color);
   --scrollbar-thumb: var(--light-soft-color);
 }
-.super-dark-background input[type="text"] {
+.super-dark-background input[type="text"]:not(.comment-content) {
   background-color: var(--bg-soft-color);
   border: none;
   color: var(--text-color);
@@ -159,16 +165,20 @@
   border: 1px solid var(--dark-color);
 }
 /* Special combinaison with toolbar */
-.super-dark-background.super-dark-toolbar .popup-content {
+.super-dark-background.super-dark-toolbar .popup-content, .super-dark-background .full-display-content {
   border: 1px solid var(--dark-color);
+  box-shadow: none;
 }
 .super-dark-background.super-dark-toolbar .toolbar {
   --border-color: var(--super-dark-color);
 }
+.super-dark-background .compact-display-content {
+  background-color: var(--super-dark-color);
+}
 /* ===================== */
 /* == Dark Background == */
 /* ===================== */
-.dark-background #editorcontainerbox, .dark-background #sidediv  {
+.dark-background #editorcontainerbox, .dark-background #sidediv, .dark-background  {
   --text-color: var(--super-light-color);
   --text-soft-color: var(--light-color);
   --border-color: var(--dark-soft-color);
@@ -178,7 +188,7 @@
 .dark-background #editorcontainerbox {
   background-color: var(--dark-color);
 }
-.dark-background  body, .full-width-editor.dark-editor body {
+.dark-background  body, .full-width-editor.dark-editor body:not(.plugin-ep_comments_page) {
   --scrollbar-bg: var(--dark-color);
   --scrollbar-track: var(--dark-soft-color);
   --scrollbar-thumb: var(--light-soft-color);
@@ -191,7 +201,7 @@
   --scrollbar-track: var(--dark-soft-color);
   --scrollbar-thumb: var(--light-soft-color);
 }
-.dark-background input[type="text"] {
+.dark-background input[type="text"]:not(.comment-content) {
   background-color: var(--dark-soft-color);
   border: none;
   color: var(--text-color);
@@ -202,6 +212,13 @@
 .dark-background .popup-content, .dark-background #chatbox:not(.stickyChat) .chat-content {
   box-shadow: 0 0 14px 0px var(--super-dark-color);
 }
+.dark-background .compact-display-content {
+  background-color: var(--dark-color);
+}
+.dark-background .full-display-content {
+  box-shadow: none;
+  border: 1px solid var(--dark-soft-color);
+}
 /* Special combinaison with toolbar */
 .dark-background.dark-toolbar .popup-content, .dark-editor.dark-toolbar .popup-content {
   box-shadow: 0 0 14px 0px var(--super-dark-color);
diff --git a/src/static/skins/colibris/src/plugins/comments.css b/src/static/skins/colibris/src/plugins/comments.css
new file mode 100644
index 00000000..930bb3db
--- /dev/null
+++ b/src/static/skins/colibris/src/plugins/comments.css
@@ -0,0 +1,76 @@
+.sidebar-comment .btn {
+  margin-top: 10px;
+  padding: 3px 8px;
+  font-size: .9rem;
+  margin: 10px 0 5px 0;
+}
+.sidebar-comment .suggestion-create {
+  margin-top: 10px;
+}
+.suggestion-display .from-value, .suggestion-display .to-value {
+  color: var(--primary-color);
+  font-weight: bold;
+  opacity: 1;
+}
+.suggestion-display .from-value {
+  margin-right: 5px;
+}
+.comment-actions-wrapper .buttonicon {
+  opacity: .8;
+}
+.comment-actions-wrapper .buttonicon:hover {
+  opacity: 1;
+}
+.comment-actions-wrapper .comment-edit {
+  margin-right: 5px;
+}
+[type="checkbox"] + label[for="suggestion-checkbox"] {
+  margin-left: 5px;
+  padding-left: 2.4rem;
+}
+.sidebar-comment .full-display-content {
+  margin-left: -10px;
+  box-shadow: 0 2px 9px 2px rgba(130, 130, 130, 0.2);
+  background-color: var(--bg-color);
+}
+.comment-reply {
+  background-color: var(--bg-soft-color);
+  border: none;
+}
+.comment-reply textarea, .comment-reply input[type="text"] {
+  background-color: var(--bg-color);
+}
+.btn.revert-suggestion-btn {
+  padding-left: 0;
+}
+.comment-edit-form {
+  margin-top: 15px;
+}
+.comment-modal .full-display-content {
+  box-shadow: none;
+  margin: 0 !important;
+}
+.comment-modal .comment-modal-comment {
+  padding: 0;
+}
+.ace-line .comment {
+  background-color: rgba(255, 235, 59, 0.5);
+}
+.new-comment-popup textarea {
+  background-color: var(--bg-soft-color);
+}
+.new-comment-popup .suggestion {
+  margin-bottom: 10px;
+}
+
+@media (min-width: 1200px) {
+  #comments {
+    width: 300px;
+  }
+  .sidebar-comment .full-display-content {
+    margin-left: 10px;
+  }
+  .compact-display-content {
+    padding-left: 20px;
+  }
+}
\ No newline at end of file