diff --git a/plone/app/discussion/browser/comments.pt b/plone/app/discussion/browser/comments.pt
index 0c062da..1e7a8eb 100644
--- a/plone/app/discussion/browser/comments.pt
+++ b/plone/app/discussion/browser/comments.pt
@@ -14,10 +14,9 @@
            tal:condition="python:isDiscussionAllowed or has_replies"
            i18n:domain="plone">
 
-    <div class="reply"
-         tal:condition="python:isAnon and not isAnonymousDiscussionAllowed">
+    <div class="reply" tal:condition="python:isAnon and not isAnonymousDiscussionAllowed">
         <form tal:attributes="action view/login_action">
-            <button class="standalone loginbutton mb-3"
+            <button class="btn btn-primary mb-3"
                    type="submit"
                    value="Log in to add comments"
                    i18n:attributes="value label_login_to_add_comments;"
@@ -26,9 +25,7 @@
         </form>
     </div>
 
-    <div class="discussion"
-         tal:attributes="class python: showCommenterImage and 'discussion showCommenterImage card' or 'discussion card';"
-         tal:condition="has_replies">
+    <div class="discussion" tal:condition="has_replies">
         <tal:getreplies repeat="reply_dict replies">
 
             <div class="comment"
@@ -43,142 +40,152 @@
                              canEdit python:view.can_edit(reply);
                              canDelete python:view.can_delete(reply);
                              colorclass python:lambda x: 'state-private' if x=='rejected' else ('state-internal' if x=='spam' else 'state-'+x);"
-                 tal:attributes="class python:'comment replyTreeLevel{depth} {state}'.format(depth= depth, state=colorclass(review_state));
+                 tal:attributes="class python:'comment level-{depth} {state}'.format(depth= depth, state=colorclass(review_state));
                                  id comment_id"
                  tal:condition="python:canReview or review_state == 'published'">
 
-                 <div class="card-header">
-                  <div class="commentImage" tal:condition="showCommenterImage">
-                      <a href="" tal:condition="has_author_link"
-                                 tal:attributes="href author_home_url">
-                           <img src="defaultUser.png"
-                                alt=""
-                                class="defaultuserimg"
-                                height="32"
-                                tal:attributes="src portrait_url;
-                                                alt reply/author_name" />
+                <div class="d-flex flex-row align-items-center mb-3">
+
+                  <!-- commenter image -->
+                  <div class="comment-image me-3" tal:condition="showCommenterImage">
+                      <a href="" tal:condition="has_author_link" tal:attributes="href author_home_url">
+                        <img src="defaultUser.png" alt="" tal:attributes="src portrait_url; alt reply/author_name" />
                       </a>
-                      <img src="defaultUser.png"
-                           alt=""
-                           class="defaultuserimg"
-                           height="32"
-                           tal:condition="not: has_author_link"
-                           tal:attributes="src portrait_url;
-                                           alt reply/author_name" />
+                      <img src="defaultUser.png" alt="" tal:condition="not: has_author_link" tal:attributes="src portrait_url; alt reply/author_name" />
                   </div>
 
-                  <div class="documentByLine">
-                      <tal:name>
-                          <a href=""
-                             tal:condition="has_author_link"
-                             tal:content="reply/author_name"
-                             tal:attributes="href author_home_url">
-                              Poster Name
-                          </a>
-                          <span tal:condition="not: has_author_link"
-                                tal:replace="reply/author_name" />
-                          <span tal:condition="not: reply/author_name"
-                                i18n:translate="label_anonymous">Anonymous</span>
-                      </tal:name>
-                      <tal:posted i18n:translate="label_says">says:</tal:posted>
-                      <div class="commentDate"
-                           tal:content="python:view.format_time(reply.modification_date)">
-                           8/23/2001 12:40:44 PM
-                      </div>
+                  <!-- commenter name and date -->
+                  <div class="comment-author">
+
+                    <a href="" tal:condition="has_author_link" tal:attributes="href author_home_url">
+                      ${reply/author_name}
+                    </a>
+
+                    <span tal:condition="not: has_author_link">
+                      ${reply/author_name}
+                    </span>
+
+                    <span tal:condition="not: reply/author_name" i18n:translate="label_anonymous">Anonymous</span>
+
+                    <br/>
+
+                    <small class="text-muted" tal:content="python:view.format_time(reply.modification_date)">
+                      8/23/2001 12:40:44 PM
+                    </small>
+
                   </div>
                 </div>
-                <div class="card-body">
-                  <div class="commentBody">
 
-                      <span tal:replace="structure reply/getText" />
 
-                      <div class="commentActions row row-cols-lg-auto g-3 align-items-center">
-                          <form name="delete"
+
+                <!-- comment body -->
+                <div class="comment-body">
+
+                    <span tal:replace="structure reply/getText" />
+
+                    <!-- comment actions -->
+                    <div class="d-flex flex-row justify-content-end mb-3">
+
+                        <div class="comment-actions actions-edit" tal:condition="python:isEditCommentAllowed and canEdit">
+
+                          <!-- edit -->
+                          <a class="pat-plone-modal context comment-action action-edit btn btn-primary btn-sm"
+                              tal:condition="auth_token"
+                              tal:attributes="href string:${reply/absolute_url}/@@edit-comment?_authenticator=${auth_token}"
+                              i18n:translate="Edit">Edit</a>
+
+                          <form name="edit"
+                                action=""
+                                method="get"
+                                class="comment-action action-edit"
+                                tal:condition="not: auth_token"
+                                tal:attributes="action string:${reply/absolute_url}/@@edit-comment;
+                                                id string:edit-${comment_id}">
+
+                              <button name="form.button.EditComment"
+                                      class="context btn btn-primary btn-sm"
+                                      type="submit"
+                                      value="Edit"
+                                      i18n:attributes="value label_edit;"
+                                      i18n:translate="label_edit"
+                                      >Edit</button>
+
+                          </form>
+
+                        </div>
+
+                        <div class="comment-actions actions-delete" tal:condition="python:canDelete">
+
+                            <!-- delete own comment -->
+                            <form name="delete"
                                 action=""
                                 method="post"
-                                class="commentactionsform"
+                                class="comment-action action-delete"
                                 tal:condition="python:not canDelete and isDeleteOwnCommentAllowed and view.could_delete_own(reply)"
                                 tal:attributes="action string:${reply/absolute_url}/@@delete-own-comment;
                                                 style python:view.can_delete_own(reply) and 'display: inline' or 'display: none';
                                                 id string:delete-${comment_id}">
-                              <button name="form.button.DeleteComment"
-                                     class="destructive btn btn-danger"
-                                     type="submit"
-                                     value="Delete"
-                                     i18n:attributes="value label_delete;"
-                                     i18n:translate="label_delete"
-                                     >Delete</button>
-                          </form>
-                          <form name="delete"
+                                <button name="form.button.DeleteComment"
+                                        class="destructive btn btn-danger btn-sm"
+                                        type="submit"
+                                        value="Delete"
+                                        i18n:attributes="value label_delete;"
+                                        i18n:translate="label_delete"
+                                        >Delete</button>
+                            </form>
+                            
+                            <!-- delete -->
+                            <form name="delete"
                                 action=""
                                 method="post"
-                                class="commentactionsform"
+                                class="comment-action action-delete"
                                 tal:condition="python:canDelete"
                                 tal:attributes="action string:${reply/absolute_url}/@@moderate-delete-comment;
                                                 id string:delete-${comment_id}">
-                              <button name="form.button.DeleteComment"
-                                     class="destructive btn btn-danger"
-                                     type="submit"
-                                     value="Delete"
-                                     i18n:attributes="value label_delete;"
-                                     i18n:translate="label_delete"
-                                     >Delete</button>
-                          </form>
-
-                          <tal:edit tal:condition="python:isEditCommentAllowed and canEdit">
-                            <!-- plone 5 will have auth_token available
-                                 so we'll use modal pattern -->
-                            <a class="pat-plone-modal context commentactionsform btn btn-primary"
-                               tal:condition="auth_token"
-                               tal:attributes="href string:${reply/absolute_url}/@@edit-comment?_authenticator=${auth_token}"
-                               i18n:translate="Edit">Edit</a>
-                            <form name="edit"
-                                  action=""
-                                  method="get"
-                                  class="commentactionsform"
-                                  tal:condition="not: auth_token"
-                                  tal:attributes="action string:${reply/absolute_url}/@@edit-comment;
-                                                  id string:edit-${comment_id}">
-                                <button name="form.button.EditComment"
-                                       class="context btn btn-primary"
-                                       type="submit"
-                                       value="Edit"
-                                       i18n:attributes="value label_edit;"
-                                       i18n:translate="label_edit"
-                                       >Edit</button>
+                                <button name="form.button.DeleteComment"
+                                        class="destructive btn btn-danger btn-sm"
+                                        type="submit"
+                                        value="Delete"
+                                        i18n:attributes="value label_delete;"
+                                        i18n:translate="label_delete"
+                                        >Delete</button>
                             </form>
-                          </tal:edit>
+                        
+                        </div>
 
-
-                          <!-- Workflow actions (e.g. 'publish') -->
-                          <form name=""
+                        <div class="comment-actions actions-workflow d-flex flex-row" tal:condition="reply_dict/actions|nothing">
+                            
+                            <form name=""
                                 action=""
                                 method="get"
-                                class="commentactionsform"
+                                class="comment-action action-${action/id}"
                                 tal:condition="canReview"
                                 tal:repeat="action reply_dict/actions|nothing"
                                 tal:attributes="action string:${reply/absolute_url}/@@transmit-comment;
                                                 name action/id;
-                                                id string:${action/id}-${comment_id}">
-                              <input type="hidden" name="workflow_action" tal:attributes="value action/id" />
-                              <button name="form.button.TransmitComment"
-                                     class="context btn btn-primary"
-                                     type="submit"
-                                     tal:attributes="value action/title"
-                                     tal:content="action/title"
-                                     i18n:attributes="value"
-                                     ></button>
-                          </form>
-                      </div>
+                                                id string:${action/id}-${comment_id};
+                                                ">
+                                <input type="hidden" name="workflow_action" tal:attributes="value action/id" />
+                                <button name="form.button.TransmitComment"
+                                        class="context btn btn-primary btn-sm"
+                                        type="submit"
+                                        i18n:translate=""
+                                        >${action/title}</button>
+                            </form>
+
+                        </div>
+
+                    </div>
+                    <!-- end comment actions -->
 
 
-                  </div>
-                  <button class="context reply-to-comment-button hide allowMultiSubmit btn btn-primary"
-                          tal:condition="python:isDiscussionAllowed and (isAnon and isAnonymousDiscussionAllowed or userHasReplyPermission)"
-                          i18n:translate="label_reply">
-                      Reply
-                  </button>
                 </div>
+                <button class="context reply-to-comment-button hide allowMultiSubmit btn btn-primary btn-sm"
+                        tal:condition="python:isDiscussionAllowed and (isAnon and isAnonymousDiscussionAllowed or userHasReplyPermission)"
+                        i18n:translate="label_reply">
+                    Reply
+                </button>
+
             </div>
 
         </tal:getreplies>
@@ -191,8 +198,7 @@
 
     </div>
 
-    <div class="reply"
-         tal:condition="python:has_replies and (isAnon and not isAnonymousDiscussionAllowed)">
+    <div class="reply" tal:condition="python:has_replies and (isAnon and not isAnonymousDiscussionAllowed)">
         <form tal:attributes="action view/login_action" class="mb-3">
             <button class="standalone loginbutton btn btn-primary"
                    type="submit"
@@ -203,11 +209,12 @@
         </form>
     </div>
 
-    <div id="commenting" class="reply" tal:condition="python:isDiscussionAllowed and (isAnon and isAnonymousDiscussionAllowed or userHasReplyPermission)">
+    <div id="commenting" class="reply border p-3" tal:condition="python:isDiscussionAllowed and (isAnon and isAnonymousDiscussionAllowed or userHasReplyPermission)">
 
         <fieldset>
 
             <legend i18n:translate="label_add_comment">Add comment</legend>
+
             <p tal:content="view/comment_transform_message">
                 You can add a comment by filling out the form below. Plain text
                 formatting.
diff --git a/plone/app/discussion/browser/controlpanel.pt b/plone/app/discussion/browser/controlpanel.pt
index 798c6dc..2f7b08a 100644
--- a/plone/app/discussion/browser/controlpanel.pt
+++ b/plone/app/discussion/browser/controlpanel.pt
@@ -6,16 +6,12 @@
       metal:use-macro="here/prefs_main_template/macros/master"
       i18n:domain="plone">
 <body>
-<article id="content"
-     tal:attributes="class view/settings"
-     metal:fill-slot="prefs_configlet_main">
 
-    <div class="portalMessage warning"
-         role="status"
-         tal:condition="view/mailhost_warning">
-        <strong i18n:translate="">
-            Warning
-        </strong>
+<metal:main metal:fill-slot="prefs_configlet_main" i18n:domain="plone">
+
+    <div class="statusmessage statusmessage-warning alert alert-warning" role="alert" tal:condition="view/mailhost_warning">
+        <tal:icon tal:replace="structure python:icons.tag('plone-statusmessage-warning', tag_alt='Warning', tag_class='statusmessage-icon mb-1 me-2')" />
+        <strong i18n:translate="">Warning</strong>
         <span tal:omit-tag="" i18n:translate="text_no_mailhost_configured">
             You have not configured a mail host or a site 'From'
             address, various features including contact forms, email
@@ -30,12 +26,9 @@
         </span>
     </div>
 
-    <div class="portalMessage warning"
-         role="status"
-         tal:condition="view/custom_comment_workflow_warning">
-        <strong i18n:translate="">
-            Warning
-        </strong>
+    <div class="statusmessage statusmessage-warning alert alert-warning" role="alert" tal:condition="view/custom_comment_workflow_warning">
+        <tal:icon tal:replace="structure python:icons.tag('plone-statusmessage-warning', tag_alt='Warning', tag_class='statusmessage-icon mb-1 me-2')" />
+        <strong i18n:translate="">Warning</strong>
         <span tal:omit-tag="" i18n:translate="text_custom_comment_workflow">
             You have configured a custom workflow for the 'Discussion Item'
             content type. You can enable/disable the comment moderation
@@ -55,18 +48,20 @@
       Portal status message
     </div>
 
-    <h1 class="documentFirstHeading" tal:content="view/label">View Title</h1>
+    <header>
+      <h1 class="documentFirstHeading" tal:content="view/label">View Title</h1>
+      <p class="lead" tal:content="view/description">Description</p>
+    </header>
 
-    <div id="content-core">
-        <div id="layout-contents">
-            <span tal:replace="structure view/contents" />
-        </div>
+    <div id="content-core" tal:attributes="class view/settings">
+      <span tal:replace="structure view/contents" />
     </div>
 
   <script type="text/javascript"
           tal:attributes="src string:${portal_url}/++plone++plone.app.discussion.javascripts/controlpanel.js">
   </script>
 
-</article>
+</metal:main>
+
 </body>
 </html>
diff --git a/plone/app/discussion/browser/javascripts/controlpanel.js b/plone/app/discussion/browser/javascripts/controlpanel.js
index 9ff0992..bfb5ba6 100644
--- a/plone/app/discussion/browser/javascripts/controlpanel.js
+++ b/plone/app/discussion/browser/javascripts/controlpanel.js
@@ -41,9 +41,9 @@ require([  // jshint ignore:line
     /* Update settings */
     $.updateSettings = function () {
 
-        var globally_enabled = $('#content').hasClass('globally_enabled');
-        var moderation_custom = $('#content').hasClass('moderation_custom');
-        var invalid_mail_setup = $('#content').hasClass('invalid_mail_setup');
+        var globally_enabled = $('#content-core').hasClass('globally_enabled');
+        var moderation_custom = $('#content-core').hasClass('moderation_custom');
+        var invalid_mail_setup = $('#content-core').hasClass('invalid_mail_setup');
 
         /* If commenting is globally disabled, disable all settings. */
         if (globally_enabled === true) {
@@ -115,13 +115,13 @@ require([  // jshint ignore:line
         // Update settings on page load
         $.updateSettings();
 
-        // Set #content class and update settings afterwards
+        // Set #content-core class and update settings afterwards
         $('#form-widgets-globally_enabled-0').on('change', function(){
             if (this.checked) {
-                $('#content').addClass('globally_enabled');
+                $('#content-core').addClass('globally_enabled');
             }
             else {
-                $('#content').removeClass('globally_enabled');
+                $('#content-core').removeClass('globally_enabled');
             }
             $.updateSettings();
         });
diff --git a/plone/app/discussion/browser/moderation.pt b/plone/app/discussion/browser/moderation.pt
index 6fc31d0..c3d565f 100644
--- a/plone/app/discussion/browser/moderation.pt
+++ b/plone/app/discussion/browser/moderation.pt
@@ -33,23 +33,18 @@
             }
         </style>
 
-        <h1 class="documentFirstHeading" i18n:translate="heading_moderate_comments">
+        <h1 i18n:translate="heading_moderate_comments">
             Moderate comments
         </h1>
 
-        <div class="portalMessage warning"
-             role="status"
-             tal:condition="not: moderation_enabled">
-            <strong i18n:translate="">Warning</strong>
-            <span tal:omit-tag="" i18n:translate="message_moderation_disabled">
-                Moderation workflow is disabled. You have to
-                <a i18n:name="enable_comment_workflow"
-                   i18n:translate="message_enable_comment_workflow" href=""
-                   tal:attributes="href string:${context/portal_url}/@@content-controlpanel?type_id=Discussion Item">
-                enable the 'Comment Review Workflow' for the Comment content
-                type</a> before you can moderate comments here.
-            </span>
-        </div>
+        <p class="lead" i18n:translate="message_moderation_disabled">
+            Moderation workflow is disabled. You have to
+            <a i18n:name="enable_comment_workflow"
+                i18n:translate="message_enable_comment_workflow" href=""
+                tal:attributes="href string:${context/portal_url}/@@content-controlpanel?type_id=Discussion Item">
+            enable the 'Comment Review Workflow' for the Comment content
+            type</a> before you can moderate comments here.
+        </p>
 
       <form class="mb-3"
             method="post"