Index: lams_central/src/java/org/lamsfoundation/lams/comments/web/CommentController.java
===================================================================
diff -u -r26a34c350d04eba17d74496a06d0e4664c0925e7 -r3282e8325662ca873b88ceb07e627315d415a2c6
--- lams_central/src/java/org/lamsfoundation/lams/comments/web/CommentController.java	(.../CommentController.java)	(revision 26a34c350d04eba17d74496a06d0e4664c0925e7)
+++ lams_central/src/java/org/lamsfoundation/lams/comments/web/CommentController.java	(.../CommentController.java)	(revision 3282e8325662ca873b88ceb07e627315d415a2c6)
@@ -299,7 +299,9 @@
 	// don't want to try to scroll as this is a single thread, completely displayed.
 	request.setAttribute(CommentConstants.ATTR_NO_MORE_PAGES, true);
 
-	return "comments/topicviewwrapper";
+	boolean newUI = WebUtil.readBooleanParam(request, "newUI", false);
+	String viewDir = newUI ? "comments5" : "comments";
+	return viewDir + "/topicviewwrapper";
     }
 
     /**
@@ -389,7 +391,10 @@
 		request.getParameter(CommentConstants.ATTR_SESSION_MAP_ID));
 	request.setAttribute(CommentConstants.ATTR_PARENT_COMMENT_ID,
 		request.getParameter(CommentConstants.ATTR_PARENT_COMMENT_ID));
-	return "comments/reply";
+
+	boolean newUI = WebUtil.readBooleanParam(request, "newUI", false);
+	String viewDir = newUI ? "comments5" : "comments";
+	return viewDir + "/reply";
     }
 
     /**
@@ -477,7 +482,10 @@
 	request.setAttribute(CommentConstants.ATTR_COMMENT_ID, commentId);
 	request.setAttribute(CommentConstants.ATTR_COMMENT, comment);
 	request.setAttribute(CommentConstants.ATTR_SESSION_MAP_ID, sessionMap.getSessionID());
-	return "comments/edit";
+	
+	boolean newUI = WebUtil.readBooleanParam(request, "newUI", false);
+	String viewDir = newUI ? "comments5" : "comments";
+	return viewDir + "/edit";
     }
 
     /**
Index: lams_central/web/WEB-INF/tags/Comments.tag
===================================================================
diff -u -rcaeb1e13c1ca119f520f63cd1f8702eaff739aa0 -r3282e8325662ca873b88ceb07e627315d415a2c6
--- lams_central/web/WEB-INF/tags/Comments.tag	(.../Comments.tag)	(revision caeb1e13c1ca119f520f63cd1f8702eaff739aa0)
+++ lams_central/web/WEB-INF/tags/Comments.tag	(.../Comments.tag)	(revision 3282e8325662ca873b88ceb07e627315d415a2c6)
@@ -15,8 +15,8 @@
 <%@ attribute name="sortBy" required="false" rtexprvalue="true"%>
 <%@ attribute name="embedInAccordian" required="false" rtexprvalue="true"%>
 <%@ attribute name="accordionTitle" required="false" rtexprvalue="true"%>
+<%@ attribute name="bootstrap5" required="false" rtexprvalue="true"%>
 
-
 <c:if test="${empty width}">
 	<c:set var="width" value="100%" />
 </c:if>
@@ -51,41 +51,40 @@
 </c:if>	
 
 <c:if test="${embedInAccordian}">
-<div class="panel-group" id="accordionComments-${toolSessionId}-${toolItemId}" role="tablist" aria-multiselectable="true"> 
-    <div class="panel panel-default">
-        <div class="panel-heading collapsable-icon-left" id="headingComments-${toolSessionId}-${toolItemId}">
-        	<span class="panel-title">
-	    	<a class="collapsed" role="button" data-toggle="collapse" href="#collapseComments-${toolSessionId}-${toolItemId}"
-	    		aria-expanded="false" aria-controls="collapseComments-${toolSessionId}-${toolItemId}">
-          	${not empty accordionTitle?accordionTitle:"Comments"}</a>
-      		</span>
-        </div>
-        <div id="collapseComments-${toolSessionId}-${toolItemId}" class="panel-collapse collapse collapseComments"
-        	 role="tabpanel" aria-labelledby="headingComments-${toolSessionId}-${toolItemId}" aria-expanded="false" style="">
+	<div class="card">
+		<div class="card-header collapsable-icon-left" id="headingComments-${toolSessionId}-${toolItemId}">
+	      	<span class="card-title">
+		   		<button class="collapsed btn" type="button" data-bs-toggle="collapse" data-bs-target="#collapseComments-${toolSessionId}-${toolItemId}"
+		   				aria-expanded="false" aria-controls="collapseComments-${toolSessionId}-${toolItemId}">
+	       			${not empty accordionTitle?accordionTitle:"Comments"}
+	       		</button>
+	    	</span>
+	    </div>
+	    <div id="collapseComments-${toolSessionId}-${toolItemId}" class="card-collapse collapse collapseComments"
+	    		aria-labelledby="headingComments-${toolSessionId}-${toolItemId}" aria-expanded="false">
 </c:if>
 
 <div id="commentFrame-${toolSessionId}-${toolItemId}" class="commentFrame"  style="width: ${width}; height: ${height};"></div>
 
 <c:if test="${embedInAccordian}">
 		</div>
 	</div>
-</div>
 </c:if>
 
 <script>
-$(document).ready(function(){
-	var url='<lams:LAMSURL/>comments/init.do?externalID=${toolSessionId}&externalSecondaryID=${toolItemId}&externalSig=${toolSignature}&externalType=1${modeStr}&likeAndDislike=${likeAndDislike}&readOnly=${readOnly}&pageSize=${pageSize}&sortBy=${sortBy}&anonymous=${anonymous}';
-	
-	<c:choose>
-		<c:when test="${embedInAccordian}">
-			$('#collapseComments-${toolSessionId}-${toolItemId}').on('show.bs.collapse', function(){
-				$('.collapseComments').not('#collapseComments-${toolSessionId}-${toolItemId}').collapse('hide').find('.commentFrame').empty();
-				$('.commentFrame', this).load(url);
-			});
-		</c:when>
-		<c:otherwise>
-			$('#commentFrame-${toolSessionId}-${toolItemId}').load(url);
-		</c:otherwise>
-	</c:choose>
-});
-</script>
\ No newline at end of file
+	$(document).ready(function(){
+		var url='<lams:LAMSURL/>comments/init.do?externalID=${toolSessionId}&newUI=${bootstrap5}&externalSecondaryID=${toolItemId}&externalSig=${toolSignature}&externalType=1${modeStr}&likeAndDislike=${likeAndDislike}&readOnly=${readOnly}&pageSize=${pageSize}&sortBy=${sortBy}&anonymous=${anonymous}';
+		
+		<c:choose>
+			<c:when test="${embedInAccordian}">
+				$('#collapseComments-${toolSessionId}-${toolItemId}').on('show.bs.collapse', function(){
+					$('.collapseComments').not('#collapseComments-${toolSessionId}-${toolItemId}').collapse('hide').find('.commentFrame').empty();
+					$('.commentFrame', this).load(url);
+				});
+			</c:when>
+			<c:otherwise>
+				$('#commentFrame-${toolSessionId}-${toolItemId}').load(url);
+			</c:otherwise>
+		</c:choose>
+	});
+</script>
Index: lams_central/web/WEB-INF/tags/PageLearner.tag
===================================================================
diff -u -r572226a47e63b49ca60f35de579ec230feaa409a -r3282e8325662ca873b88ceb07e627315d415a2c6
--- lams_central/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision 572226a47e63b49ca60f35de579ec230feaa409a)
+++ lams_central/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision 3282e8325662ca873b88ceb07e627315d415a2c6)
@@ -6,10 +6,6 @@
 <%@ attribute name="toolSessionID" required="true" rtexprvalue="true"%>
 <%@ attribute name="title" required="false" rtexprvalue="true"%>
 <%@ attribute name="refresh" required="false" rtexprvalue="true"%>
-<%@ attribute name="hideHeaderAndSidebar" required="false" rtexprvalue="true"%>
-<c:if test="${empty hideHeaderAndSidebar}">
-	<c:set var="hideHeaderAndSidebar" value="false" />
-</c:if>
 
 <c:set var="lams"><lams:LAMSURL /></c:set>
 <c:set var="pageLearnerPortraitUuid"><lams:user property="portraitUuid" /></c:set>
@@ -59,9 +55,7 @@
                 decoderDiv = $('<div />');
 
             $(document).ready(function (){
-            	<c:if test="${!hideHeaderAndSidebar}">
-                	initLearnerPage(${toolSessionID});
-                </c:if>
+                initLearnerPage(${toolSessionID});
             });
 
             function preventLearnerAutosaveFromMultipleTabs(autosaveInterval) {
@@ -81,7 +75,6 @@
 
     <body class="component">
     <div class="component-page-wrapper">
-    	<c:if test="${!hideHeaderAndSidebar}">
         <nav inert class="component-sidebar" role="navigation dialog"
              aria-label="Side menu" aria-expanded="false"  aria-modal="true">
             <button class="sidebar-toggle-button no-decoration" aria-labelledby="progress-bar-title">
@@ -101,10 +94,8 @@
             <ul id="progress-bar-items" class="progress-bar-items w-100" role="menu">
             </ul>
         </nav>
-        </c:if>
 
         <div class="component-page-content">
-        	<c:if test="${!hideHeaderAndSidebar}">
             <a href="#component-main-content" class="visually-hidden-focusable p-2">Skip to main content</a>
 
             <header id="header" class="d-flex justify-content-between" role="banner">
@@ -136,7 +127,6 @@
                     </button>
                 </div>
             </header>
-            </c:if>
 
             <main class="p-3" id="component-main-content" tabindex="-1">
                 <c:if test="${not empty title}">
Index: lams_central/web/comments/edit.jsp
===================================================================
diff -u -r54a3c302d29d64b55efa18189083dadd13c51708 -r3282e8325662ca873b88ceb07e627315d415a2c6
--- lams_central/web/comments/edit.jsp	(.../edit.jsp)	(revision 54a3c302d29d64b55efa18189083dadd13c51708)
+++ lams_central/web/comments/edit.jsp	(.../edit.jsp)	(revision 3282e8325662ca873b88ceb07e627315d415a2c6)
@@ -48,7 +48,7 @@
 					// make sure the old edit form is gone, so the user won't try to submit it again
 					$('#edit').remove();
 				}
-				reloadThread(response,'<lams:LAMSURL />','<spring:escapeBody javaScriptEscape="true"><fmt:message key="error.cannot.redisplay.please.refresh"/></spring:escapeBody>','<spring:escapeBody javaScriptEscape="true"><fmt:message key="error.please.refresh"/></spring:escapeBody>');
+				reloadThread(response,'<lams:LAMSURL />',false,'<spring:escapeBody javaScriptEscape="true"><fmt:message key="error.cannot.redisplay.please.refresh"/></spring:escapeBody>','<spring:escapeBody javaScriptEscape="true"><fmt:message key="error.please.refresh"/></spring:escapeBody>');
     		});
 		} // end validateBodyText
 		else {
Index: lams_central/web/comments/reply.jsp
===================================================================
diff -u -r54a3c302d29d64b55efa18189083dadd13c51708 -r3282e8325662ca873b88ceb07e627315d415a2c6
--- lams_central/web/comments/reply.jsp	(.../reply.jsp)	(revision 54a3c302d29d64b55efa18189083dadd13c51708)
+++ lams_central/web/comments/reply.jsp	(.../reply.jsp)	(revision 3282e8325662ca873b88ceb07e627315d415a2c6)
@@ -51,6 +51,7 @@
 				reloadThread(
 					response,
 					'<lams:LAMSURL />',
+					false,
 					'<spring:escapeBody javaScriptEscape="true"><fmt:message key="error.cannot.redisplay.please.refresh"/></spring:escapeBody>',
 					'<spring:escapeBody javaScriptEscape="true"><fmt:message key="error.please.refresh"/></spring:escapeBody>'
 				);
Index: lams_central/web/comments/topicview.jsp
===================================================================
diff -u -r54a3c302d29d64b55efa18189083dadd13c51708 -r3282e8325662ca873b88ceb07e627315d415a2c6
--- lams_central/web/comments/topicview.jsp	(.../topicview.jsp)	(revision 54a3c302d29d64b55efa18189083dadd13c51708)
+++ lams_central/web/comments/topicview.jsp	(.../topicview.jsp)	(revision 3282e8325662ca873b88ceb07e627315d415a2c6)
@@ -82,7 +82,7 @@
 		    url: url
 		})
 	    .done(function (response) {
-			reloadThread(response, '<lams:LAMSURL />','<fmt:message key="error.cannot.redisplay.please.refresh"/>','<fmt:message key="error.please.refresh"/>');
+			reloadThread(response, '<lams:LAMSURL />',false,'<fmt:message key="error.cannot.redisplay.please.refresh"/>','<fmt:message key="error.please.refresh"/>');
 	    });
 	}
 
@@ -94,7 +94,7 @@
 	    .done(function (response) {
 	    	refreshComments
 	    	
-			reloadThread(response, '<lams:LAMSURL />','<fmt:message key="error.cannot.redisplay.please.refresh"/>','<fmt:message key="error.please.refresh"/>');
+			reloadThread(response, '<lams:LAMSURL />',false,'<fmt:message key="error.cannot.redisplay.please.refresh"/>','<fmt:message key="error.please.refresh"/>');
 	    });
 	}
 
Index: lams_central/web/comments5/allview.jsp
===================================================================
diff -u
--- lams_central/web/comments5/allview.jsp	(revision 0)
+++ lams_central/web/comments5/allview.jsp	(revision 3282e8325662ca873b88ceb07e627315d415a2c6)
@@ -0,0 +1,33 @@
+<!-- Wraps up both the sticky and non-sticky comments. Used for page refresh and changing the sort.
+ -->
+
+<!--  if sticky comments exists, they need to be displayed first, but do not clobber the non sticky threads! -->
+<c:set var="nonsticky" value="${commentThread}" />
+<c:set var="commentThread" value="${sticky}" />
+<c:set var="noMorePages" value="true" />
+<div id="stickyComments">
+	<%@ include file="topicview.jsp"%>
+</div>
+<c:set var="commentThread" value="${nonsticky}" />
+<c:set var="noMorePages" value="false" />
+
+<div id="newcomments"></div>
+
+<c:if test='${(empty commentThread) && (sessionMap.mode == "teacher")}'>
+	<fmt:message key="label.no.comments" />
+</c:if>
+
+<div class="scroll">
+	<c:if test="${! empty commentThread}">
+		<%@ include file="topicview.jsp"%>
+	</c:if>
+</div>
+
+<script>
+	$('.scroll').jscroll({
+		loadingHtml: '<img src="${loading_animation}" alt="${loading_words}" />${loading_words}',
+		padding:30,
+		autoTrigger:false,
+		callback:scrollDoneCallback
+	});
+</script>
\ No newline at end of file
Index: lams_central/web/comments5/allviewwrapper.jsp
===================================================================
diff -u
--- lams_central/web/comments5/allviewwrapper.jsp	(revision 0)
+++ lams_central/web/comments5/allviewwrapper.jsp	(revision 3282e8325662ca873b88ceb07e627315d415a2c6)
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<%@ include file="/common/taglibs.jsp"%>
+<c:set var="lams"><lams:LAMSURL /></c:set>
+<c:set var="ctxPath" value="${pageContext.request.contextPath}" scope="request" />
+<c:set var="sessionMap" value="${sessionScope[sessionMapID]}" />
+
+<!-- Wraps up allview.jsp for refresh/sort change. -->
+<script type="text/javascript" src="${lams}includes/javascript/jquery.treetable.js"></script>
+<%@ include file="allview.jsp"%>
+
+
Index: lams_central/web/comments5/anonymouscheckbox.jsp
===================================================================
diff -u
--- lams_central/web/comments5/anonymouscheckbox.jsp	(revision 0)
+++ lams_central/web/comments5/anonymouscheckbox.jsp	(revision 3282e8325662ca873b88ceb07e627315d415a2c6)
@@ -0,0 +1,35 @@
+<script type="text/javascript">
+	$(document).ready(function() {
+		$('[data-bs-toggle="popover"]').each((i, el) => {
+			new bootstrap.Popover($(el), {
+				content: '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.anonymous.tooltip"/></spring:escapeBody>'
+			})
+		});
+	});
+</script>
+
+<c:choose>
+	<c:when test="${sessionMap.mode == 'teacher'}">
+		<%-- include the value so it gets returned but do not allow it to be edited --%>
+		<input type="hidden" id="${anonymousCheckboxName}" name="${anonymousCheckboxName}"
+			value="${anonymousCheckboxChecked ? 'true' : 'false'}"
+		/>
+	</c:when>
+
+	<c:otherwise>
+		<div class="form-check mt-2">
+			<input type="checkbox" id="${anonymousCheckboxName}" class="form-check-input"
+				name="${anonymousCheckboxName}" value="true" ${anonymousCheckboxChecked ? 'checked="checked"' : ''}
+				aria-description='<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.anonymous.tooltip"/></spring:escapeBody>'
+			>
+				
+			<label for="${anonymousCheckboxName}" class="form-check-label">
+				<fmt:message key="label.post.anonomously" />
+			</label>
+
+			<span data-bs-toggle="popover" data-bs-placement="right" data-bs-trigger="hover focus" aria-hidden="true">
+	  			<i class="fa fa-info-circle"></i>
+			</span>
+		</div>
+	</c:otherwise>
+</c:choose>
Index: lams_central/web/comments5/comments.jsp
===================================================================
diff -u
--- lams_central/web/comments5/comments.jsp	(revision 0)
+++ lams_central/web/comments5/comments.jsp	(revision 3282e8325662ca873b88ceb07e627315d415a2c6)
@@ -0,0 +1,180 @@
+<!DOCTYPE html>
+<%@ include file="/common/taglibs.jsp"%>
+<c:set var="lams"><lams:LAMSURL /></c:set>
+<c:set var="ctxPath" value="${pageContext.request.contextPath}" scope="request" />
+<c:set var="loading_animation" value="${lams}images/ajax-loader.gif"/>
+<c:set var="loading_words"><fmt:message key="msg.loading" /></c:set>
+<c:set var="sessionMap" value="${sessionScope[sessionMapID]}" />
+<%@ page import="org.lamsfoundation.lams.comments.CommentConstants"%>
+
+<!-- ********************  CSS ********************** -->
+<lams:css suffix="treetable" />
+
+<!-- ********************  javascript ********************** -->
+<script type="text/javascript" src="<lams:LAMSURL />includes/javascript/jquery.jscroll.js"></script>
+<script type="text/javascript" src="<lams:LAMSURL />includes/javascript/jquery.treetable.js"></script>
+<lams:JSImport src="includes/javascript/comments.js" />
+<script type="text/javascript" src="<lams:LAMSURL />includes/javascript/jquery.timeago.js"></script>
+<script type="text/javascript">
+	$(document).ready(function() {
+		scrollDoneCallback();
+
+		$('#sortMenu').change(function() {
+			var url = "<lams:LAMSURL />comments/viewTopic.do?newUI=true&sessionMapID=${sessionMapID}&sticky=true&sortBy="
+					+ $(this).find("option:selected").attr('value');
+			reloadDivs(url);
+		});
+
+		$('#newForm').submit(function() { // catch the form's submit event
+			newCommentSubmit();
+		});
+	});
+
+	function refreshComments() {
+		var reqIDVar = new Date();
+		reloadDivs('<lams:LAMSURL />comments/viewTopic.do?newUI=true&sessionMapID=${sessionMapID}&sticky=true&reqUid='
+				+ reqIDVar.getTime());
+	}
+
+	function reloadDivs(url) {
+		$('.scroll').data('jscroll', null);
+		$.ajaxSetup({
+			cache : true
+		});
+		$('#commentDiv').load(url);
+	}
+
+	function scrollDoneCallback() {
+	}
+
+	var btnName = "newCommentSubmitButton";
+
+	function newCommentSubmit() {
+		if ( isDisabled(btnName) ) {
+			return false;
+		}
+		
+		var theForm = $(newForm);
+		disableButton(btnName);
+
+		if (validateBodyText(
+			$('#newFormBody').val(),
+			<%=CommentConstants.MAX_BODY_LENGTH%>,
+			"<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.comment.body.validation" /></spring:escapeBody>"
+		)) {
+			$.ajax({ // create an AJAX call...
+				data : theForm.serialize(),
+				processData : false, // tell jQuery not to process the data
+				contentType : false, // tell jQuery not to set contentType
+				type : theForm.attr('method'), // GET or POST
+				url : theForm.attr('action'), // the file to call  
+				
+			}).done(function(response) {
+								var threadUid = response.threadUid;
+								var commentUid = response.commentUid;
+								var sessionMapID = response.sessionMapID;
+
+								// have just added it as a standalone comment, so show the posting at the top. 
+								var newCommentDiv = document.getElementById('newcomments');
+								var newThreadDiv = document.createElement("div");
+								newThreadDiv.id = 'thread' + commentUid;
+								newCommentDiv.insertBefore(newThreadDiv, newCommentDiv.firstChild);
+
+								if (!newCommentDiv || !newThreadDiv) {
+									alert('<spring:escapeBody javaScriptEscape="true"><fmt:message key="error.cannot.redisplay.please.refresh"/></spring:escapeBody>');
+								} else if (commentUid) {
+									var loadString = '<lams:LAMSURL />comments/viewTopicThread.do?newUI=true&sessionMapID='
+											+ response.sessionMapID
+											+ "&threadUid="
+											+ threadUid
+											+ "&commentUid=" + commentUid;
+									$.ajaxSetup({ cache: true });
+									$(newThreadDiv).load(loadString,
+											function() {
+												highlightMessage();
+											});
+									clearNewForm();
+								} else if (response.errMessage) {
+									alert(response.errMessage);
+									enableButton(btnName);
+								} else {
+									alert('<spring:escapeBody javaScriptEscape="true"><fmt:message key="error.please.refresh"/></spring:escapeBody>');
+								}
+			});
+		} // end validateBodyText
+		else {
+			enableButton(btnName);
+		}
+		return false;
+	}
+
+	function clearNewForm() {
+		$('#newFormBody').val('');
+		$('#commentAnonymousNew').prop('checked',false);
+		enableButton(btnName);
+		return false;
+	}
+</script>
+
+<div class="mt-4">
+	<c:if test='${not sessionMap.readOnly}'>
+		<div class="comments mb-2">
+			<div class="comment-entry">
+				<form id="newForm" method="GET" action="<lams:LAMSURL />comments/newComment.do">
+					<div class="mb-2 float-end">
+						<select id="sortMenu" name="sortMenu" class="form-control float-end w-auto">
+							<option value='0'
+								<c:if test='${sessionMap.sortBy == 0}'>selected</c:if>>
+								<fmt:message key="label.newest.first" />
+							</option>
+							<option value='1'
+								<c:if test='${sessionMap.sortBy == 1}'>selected</c:if>>
+								<fmt:message key="label.top.comments" />
+							</option>
+						</select>
+					</div>
+		
+					<textarea class="form-control" placeholder="..." id="newFormBody"
+						maxlength="<%=CommentConstants.MAX_BODY_LENGTH + 2%>" name="body" class="comment" aria-label="comment"
+					></textarea>
+		
+					<input type="hidden" id="sessionMapID" name="sessionMapID" value="${sessionMapID}" />
+					<input type="hidden" name="newUI" value="true" />
+		
+					<div class="clearfix my-2">
+						<c:if test="${sessionMap.anonymous}">
+							<div class="float-start">
+								<c:set var="anonymousCheckboxChecked" value="" />
+								<c:set var="anonymousCheckboxName" value="commentAnonymousNew" />
+								<%@include file="anonymouscheckbox.jsp"%>
+							</div>
+						</c:if>
+			
+						<button type="button" onclick="javascript:newCommentSubmit();"
+							class="btn btn-secondary btn-sm float-end" id="newCommentSubmitButton"
+						>
+							<i class="fa fa-comment me-1"></i>
+							<fmt:message key="label.post" />
+						</button>
+						<button type="button" onclick="javascript:clearNewForm();"
+							class="btn btn-secondary btn-sm float-end me-2"
+						>
+							<i class="fa fa-cancel me-1"></i>
+							<fmt:message key="label.cancel" />
+						</button>
+					</div>
+					
+					<div class="text-center">
+						<button type="button" onclick="javascript:refreshComments();" class="btn btn-secondary btn-sm btn-icon-refresh"> 
+							<fmt:message key="label.refresh"/>
+						</button>
+					</div>
+				</form>
+			</div>
+		</div>
+	</c:if>
+
+	<div id="commentDiv" class="mt-1">
+		<%@ include file="allview.jsp"%>
+	</div>
+</div>
\ No newline at end of file
Index: lams_central/web/comments5/edit.jsp
===================================================================
diff -u
--- lams_central/web/comments5/edit.jsp	(revision 0)
+++ lams_central/web/comments5/edit.jsp	(revision 3282e8325662ca873b88ceb07e627315d415a2c6)
@@ -0,0 +1,110 @@
+<%@ include file="/common/taglibs.jsp"%>
+<%@ page import="org.lamsfoundation.lams.comments.CommentConstants"%>
+
+<script type="text/javascript">
+	// The treetable code uses the clicks to expand and collapse the replies but then 
+	// the buttons will not work. So stop the event propogating up the event chain. 
+	$("#editForm").click(function (e) {
+    	e.stopPropagation();
+	});
+	$("#editForm").keydown(function (e) {
+    	e.stopPropagation();
+	});
+	$(".button").click(function (e) {
+    	e.stopPropagation();
+	});
+	$(".comment").click(function (e) {
+		e.stopPropagation();
+	});
+
+	// The treetable code uses the clicks to expand and collapse the replies but then 
+	// the buttons will not work. So stop the event propogating up the event chain. 
+	$('#editForm').submit(function() { // catch the form's submit event
+		editCommentSubmit()
+	} );
+		 	
+	function editCommentSubmit() {
+
+		var btnName = "editCommentSubmitButton";
+		if ( isDisabled(btnName) ) {
+			return false;
+		}
+
+		disableButton(btnName);
+		
+		var theForm = $(editForm);			
+
+		if ( validateBodyText($('#editFormBody').val(), <%=CommentConstants.MAX_BODY_LENGTH%>, "<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.comment.body.validation" /></spring:escapeBody>") ) {
+	    	$.ajax({ // create an AJAX call...
+		        data: theForm.serialize(), 
+	    	    processData: false, // tell jQuery not to process the data
+		        contentType: false, // tell jQuery not to set contentType
+		        type: theForm.attr('method'), // GET or POST
+	    	    url: theForm.attr('action'), // the file to call  
+		    })
+			.done(function (response) {
+   				var commentUid = response.commentUid;
+				if ( commentUid ) {
+					// make sure the old edit form is gone, so the user won't try to submit it again
+					$('#edit').remove();
+				}
+				reloadThread(
+					response,
+					'<lams:LAMSURL />',
+					true,
+					'<spring:escapeBody javaScriptEscape="true"><fmt:message key="error.cannot.redisplay.please.refresh"/></spring:escapeBody>',
+					'<spring:escapeBody javaScriptEscape="true"><fmt:message key="error.please.refresh"/></spring:escapeBody>'
+				);
+    		});
+		} // end validateBodyText
+		else {
+			enableButton(btnName);
+		}
+		return false;
+	};
+
+	function cancelEdit() {
+		$('#edit').remove();
+	}
+</script>
+
+<div class="comment-entry form-group mt-1">
+	<form id="editForm" method="GET" action="<lams:LAMSURL />comments/updateTopicInline.do">
+		<textarea class="form-control" id="editFormBody" maxlength="<%=CommentConstants.MAX_BODY_LENGTH + 2%>" name="body"
+			class="comment"
+		>${comment.comment.body}</textarea>
+		<input type="hidden" id="sessionMapID" name="sessionMapID" value="${sessionMapID}" /> 
+		<input type="hidden" id="commentUid" name="commentUid" value="${commentUid}"/>
+		<input type="hidden" name="newUI" value="true" />
+
+		<div class="row mt-1">
+			<c:set var="sessionMap" value="${sessionScope[sessionMapID]}" />
+		
+		 	<c:choose>
+			 	<c:when test="${sessionMap.anonymous}">
+				 	<%-- Post Anonymously? --%>
+					<div class="col-12 col-sm-6">
+						<c:set var="anonymousCheckboxChecked" value="${comment.comment.anonymous}"/>
+						<c:set var="anonymousCheckboxName" value="commentAnonymousEdit"/>
+						<%@include file="anonymouscheckbox.jsp" %>
+				 	</div>
+				
+					<%-- Cancel / Edit Buttons --%>
+					<div class="col-12 col-sm-6">
+				</c:when>
+				<c:otherwise>
+					<div class="col-12">
+				</c:otherwise>
+			</c:choose>
+			
+			<button type="button" onclick="javascript:editCommentSubmit();" class="btn btn-sm btn-secondary float-end" id="editCommentSubmitButton">
+				<i class="fa fa-comment me-1"></i>
+				<fmt:message key="label.post" />
+			</button>
+			<button type="button" onclick="javascript:cancelEdit();" class="btn btn-sm btn-secondary float-end me-1">
+				<i class="fa fa-cancel me-1"></i>
+				<fmt:message key="label.cancel" />
+			</button>
+		</div>
+	</form>
+</div>
Index: lams_central/web/comments5/msgview.jsp
===================================================================
diff -u
--- lams_central/web/comments5/msgview.jsp	(revision 0)
+++ lams_central/web/comments5/msgview.jsp	(revision 3282e8325662ca873b88ceb07e627315d415a2c6)
@@ -0,0 +1,207 @@
+<%--  commentDto, commentUid, msgLevel needs to be in the session elsewhere --%>
+
+ <c:set var="hidden" value="${commentDto.comment.hideFlag}" />
+ <c:set var="anonymous" value="${commentDto.comment.anonymous}" />
+ <c:choose>
+    <c:when test='${(commentDto.level <= 1)}'>
+    	<c:set var="indentSize" value="0" />
+    </c:when>
+    <c:otherwise>
+    	<c:set var="indentSize" value="${(commentDto.level-1)*indent}" />
+    </c:otherwise>
+ </c:choose>
+ <c:set var="paddingRightSize" value="${(commentDto.level-1)*indent+6}" />
+ <c:choose>
+    <c:when test='${commentDto.comment.uid == commentUid}'>
+     	<c:set var="highlightClass">highlight</c:set>
+    </c:when>
+    <c:otherwise>	
+    	<c:set var="highlightClass"></c:set>
+    </c:otherwise> 
+ </c:choose>
+
+<div class="row">
+	<div class="col-12" style="margin-left:${indentSize}px;padding-right:${paddingRightSize}px">
+		<div class="card ${highlightClass} msg" id="msg${commentDto.comment.uid}">
+			<div class="card-header">
+
+					<%-- authors name --%>
+					<c:set var="msgAuthor" value="${commentDto.authorname}" />
+					<c:if test="${empty msgAuthor}">
+						<c:set var="msgAuthor">&nbsp;</c:set>
+					</c:if>
+					<c:choose>
+						<c:when test='${sessionMap.mode == "teacher"}'>
+							<c:choose>
+								<c:when test="${anonymous}">
+									<c:set var="author">${msgAuthor} (<fmt:message key="label.anonymous" />)</c:set>
+								</c:when>
+								<c:otherwise>
+									<c:set var="author">${msgAuthor}</c:set>
+								</c:otherwise>
+							</c:choose>
+						</c:when>
+						<c:otherwise>
+							<c:choose>
+								<c:when test="${hidden}">
+									<c:set var="author"></c:set>
+								</c:when>
+								<c:when test="${not hidden and anonymous}">
+									<c:set var="author">
+										<fmt:message key="label.anonymous" />
+									</c:set>
+								</c:when>
+								<c:otherwise>
+									<c:set var="author">${msgAuthor}</c:set>
+								</c:otherwise>
+							</c:choose>
+						</c:otherwise>
+					</c:choose>
+
+					<c:choose>
+						<c:when test="${isMonitor and isSticky}">
+							<c:set var="textClass" value="text-info" />
+							<c:set var="bgClass" value="bg-info" />
+							<i class="fa fa-thumb-tack ${textClass}"></i>
+						</c:when>
+						<c:when test="${isMonitor}">
+							<c:set var="textClass" value="text-info" />
+							<c:set var="bgClass" value="bg-info" />
+							<i class="fa fa-mortar-board ${textClass}"></i>
+						</c:when>
+						<c:when test="${isSticky}">
+							<c:set var="textClass" value="text-info" />
+							<c:set var="bgClass" value="" />
+							<i class="fa fa-thumb-tack ${textClass}"></i>
+						</c:when>
+						<c:otherwise>
+							<c:set var="textClass" value="" />
+							<c:set var="bgClass" value="" />
+							<i class="fa fa-user"></i>
+						</c:otherwise>
+					</c:choose>
+
+					<span class="${textClass}"><strong><c:out value="${author}" escapeXml="true" /></strong> - <lams:Date
+							value="${commentDto.comment.updated}" timeago="true"
+						/> 
+						<c:if test='${commentDto.comment.created != commentDto.comment.updated}'>
+              				| <small>(<fmt:message key="label.edited" />)</small>
+						</c:if> 
+					</span>
+			</div>
+			
+			<div class="card-body ${bgClass}" id="pb-msg${commentDto.comment.uid}">
+
+				<c:if test='${(sessionMap.mode == "teacher") or not (anonymous or hidden)}'>
+					<div class="float-start me-2">
+						<lams:Portrait userId="${commentDto.authorUserId}" />
+					</div>
+				</c:if>
+
+				<c:if test='${(sessionMap.mode == "teacher") or (not hidden)}'>
+					<lams:out value="${commentDto.comment.body}" escapeHtml="true" />
+				</c:if>
+				<c:if test='${hidden}'>
+					<i><fmt:message key="label.hidden" /></i>
+				</c:if>
+
+				<hr class="msg-hr">
+				<div class="msg-footer">
+					<c:if test='${not sessionMap.readOnly}'>
+						<c:set var="replytopic">
+							<lams:LAMSURL />comments/newReplyTopic.do?newUI=true&sessionMapID=${sessionMapID}&parentUid=${commentDto.comment.uid}
+						</c:set>
+						<button type="button" onclick="javascript:createReply(${commentDto.comment.uid}, '${replytopic}');" class="btn btn-sm btn-secondary comment">
+							Reply
+						</button>
+             			 &middot; 
+           			 </c:if>
+
+					<c:if test='${((sessionMap.mode == "teacher") || commentDto.author) && not sessionMap.readOnly }'>
+						<c:set var="edittopic">
+							<lams:LAMSURL />comments/editTopic.do?newUI=true&sessionMapID=${sessionMapID}&commentUid=${commentDto.comment.uid}&create=${commentDto.comment.created.time}
+						</c:set>
+						<button type="button" onclick="javascript:createEdit(${commentDto.comment.uid}, '${edittopic}');" class="btn btn-sm btn-secondary comment">
+							Edit
+						</button>
+              			&middot; 
+           			</c:if>
+
+					<c:if test='${sessionMap.mode == "teacher" && not sessionMap.readOnly}'>
+						<!--  call the hide action -->
+						<c:choose>
+							<c:when test="${hidden}">
+								<!--  display a show link  -->
+								<c:set var="hideURL">
+									<lams:LAMSURL />comments/hide.do?newUI=true&sessionMapID=${sessionMapID}&commentUid=${commentDto.comment.uid}&hideFlag=false
+								</c:set>
+								<button type="button" onclick="javascript:hideEntry(${commentDto.comment.uid}, '${hideURL}');" class="btn btn-sm btn-secondary comment">
+									<fmt:message key="label.show"/>
+								</button>
+							</c:when>
+							
+							<c:otherwise>
+								<!--  display a hide link -->
+								<c:set var="hideURL">
+									<lams:LAMSURL />comments/hide.do?newUI=true&sessionMapID=${sessionMapID}&commentUid=${commentDto.comment.uid}&hideFlag=true
+								</c:set>
+								<button type="button" onclick="javascript:hideEntry(${commentDto.comment.uid}, '${hideURL}');" class="btn btn-sm btn-secondary comment">
+									<fmt:message key="label.hide"/>
+								</button>
+							</c:otherwise>
+						</c:choose>
+             			 &middot; 
+           		 	</c:if>
+
+					<c:if test='${sessionMap.mode == "teacher" && not sessionMap.readOnly && commentDto.comment.commentLevel == 1}'>
+						<c:set var="makesticky">
+							<lams:LAMSURL />comments/makeSticky.do?newUI=true&sessionMapID=${sessionMapID}&commentUid=${commentDto.comment.uid}&create=${commentDto.comment.created.time}&sticky=${!commentDto.comment.sticky}
+						</c:set>
+						<button type="button" onclick="javascript:makeSticky(${commentDto.comment.uid}, '${makesticky}');" class="btn btn-sm btn-secondary comment">
+							<fmt:message key="${commentDto.comment.sticky ? 'label.remove.sticky' : 'label.add.sticky' }" />
+						</button> 
+             			 &middot; 
+            		</c:if>
+
+					<span id="msglikeCount${commentDto.comment.uid}">${commentDto.comment.likeCount}</span>
+					<fmt:message key="label.likes" />
+					<c:if test='${sessionMap.mode == "learner"}'>
+						<span id="msgvote${commentDto.comment.uid}"> 
+							<c:choose>
+								<c:when test="${empty commentDto.comment.vote && not sessionMap.readOnly}">
+									<button type="button" class="btn fa-regular fa-thumbs-up fa-md fa-faded" title="<fmt:message key="label.like"/>"
+										onclick="javascript:likeEntry(${commentDto.comment.uid});" id="msglikebutton${commentDto.comment.uid}"
+									></button>
+									
+									<c:if test='${sessionMap.likeAndDislike}'> 
+                      					<button type="button" class="btn fa-regular fa-thumbs-down fa-md fa-flip-horizontal fa-faded"
+											title="<fmt:message key="label.dislike"/>" onclick="javascript:dislikeEntry(${commentDto.comment.uid});"
+											id="msgdislikebutton${commentDto.comment.uid}"
+										></button>
+									</c:if>
+								</c:when>
+								
+								<c:when test="${commentDto.comment.vote == 1}">
+									<span class="fa-solid fa-thumbs-up fa-md" title="<fmt:message key="label.like"/>"
+										id="msglikebutton${commentDto.comment.uid}"
+									/>
+								</c:when>
+								
+								<c:otherwise>
+									<c:if test='${sessionMap.likeAndDislike}'>
+										<span class="fa-solid fa-thumbs-down fa-md fa-flip-horizontal" title="<fmt:message key="label.dislike"/>"
+											id="msgdislikebutton${commentDto.comment.uid}"
+										></span>
+									</c:if>
+								</c:otherwise>
+							</c:choose>
+						</span>
+					</c:if>
+
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
+
+
Index: lams_central/web/comments5/msgviewwrapper.jsp
===================================================================
diff -u
--- lams_central/web/comments5/msgviewwrapper.jsp	(revision 0)
+++ lams_central/web/comments5/msgviewwrapper.jsp	(revision 3282e8325662ca873b88ceb07e627315d415a2c6)
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<%@ include file="/common/taglibs.jsp"%>
+<c:set var="isSticky" value="false"/> 
+<c:set var="sessionMap" value="${sessionScope[sessionMapID]}" />
+
+<%-- Wraps up msgview.jsp for returning a single message - called when an edit is performed. It needs to do all the setup that topicview.jsp normally does. --%>
+
+<script type="text/javascript">
+	// The treetable code uses the clicks to expand and collapse the replies but we 
+	// don't want to trigger based on the links/buttons. So stop the event propogating up the event chain. 
+	$(".comment").click(function (e) {
+		e.stopPropagation();
+	});
+
+    jQuery(document).ready(function() {
+		jQuery("time.timeago").timeago();
+    });
+</script>
+
+<c:forEach var="msgDto" items="${topicThread}">
+	<c:set var="msgLevel" value="${msgDto.level}" />
+	<%@ include file="msgview.jsp"%>
+</c:forEach>
Index: lams_central/web/comments5/reply.jsp
===================================================================
diff -u
--- lams_central/web/comments5/reply.jsp	(revision 0)
+++ lams_central/web/comments5/reply.jsp	(revision 3282e8325662ca873b88ceb07e627315d415a2c6)
@@ -0,0 +1,112 @@
+<%@ include file="/common/taglibs.jsp"%>
+<%@ page import="org.lamsfoundation.lams.comments.CommentConstants"%>
+
+<script type="text/javascript">
+	// The treetable code uses the clicks to expand and collapse the replies but then 
+	// the buttons will not work. So stop the event propogating up the event chain. 
+	$("#replyForm").click(function(e) {
+		e.stopPropagation();
+	});
+	$("#replyForm").keydown(function(e) {
+		e.stopPropagation();
+	});
+	$(".button").click(function(e) {
+		e.stopPropagation();
+	});
+	$(".comment").click(function(e) {
+		e.stopPropagation();
+	});
+
+	$('#replyForm').submit(function() { // catch the form's submit event
+		replyFormSubmit();
+	});
+
+	function replyFormSubmit() {
+		var btnName = "replyCommentSubmitButton";
+		if ( isDisabled(btnName) ) {
+			return false;
+		}
+
+		disableButton(btnName);
+		
+		var theForm = $(replyForm);
+		if (validateBodyText($('#replyFormBody').val(), <%=CommentConstants.MAX_BODY_LENGTH%>,
+				"<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.comment.body.validation" /></spring:escapeBody>")) {
+
+			$.ajax({ // create an AJAX call...
+				data : theForm.serialize(),
+				processData : false, // tell jQuery not to process the data
+				contentType : false, // tell jQuery not to set contentType
+				type : theForm.attr('method'), // GET or POST
+				url : theForm.attr('action'), // the file to call  
+			})
+			.done(function(response) {
+				var commentUid = response.commentUid;
+				if (commentUid) {
+					// make sure the old reply form is gone, so if something goes wrong 
+					// the user won't try to submit it again
+					$('#reply').remove();
+				}
+				
+				reloadThread(
+					response,
+					'<lams:LAMSURL />',
+					true,
+					'<spring:escapeBody javaScriptEscape="true"><fmt:message key="error.cannot.redisplay.please.refresh"/></spring:escapeBody>',
+					'<spring:escapeBody javaScriptEscape="true"><fmt:message key="error.please.refresh"/></spring:escapeBody>'
+				);
+			});
+		} // end validateBodyText
+		else {
+			enableButton(btnName);
+		}
+		return false;
+	}
+
+	function cancelReply() {
+		$('#reply').remove();
+	}
+</script>
+
+<div class="comment-entry form-group mt-1">
+	<form id="replyForm" method="GET" action="<lams:LAMSURL />comments/replyTopicInline.do">
+		<textarea class="form-control my-2" id="replyFormBody" maxlength="<%=CommentConstants.MAX_BODY_LENGTH + 2%>" name="body"
+			class="comment"
+		></textarea>
+		<input type="hidden" id="sessionMapID" name="sessionMapID" value="${sessionMapID}" /> 
+		<input type="hidden" id="parentUid" name="parentUid" value="${parentUid}" />
+		<input type="hidden" name="newUI" value="true" />
+
+		<div class="row mt-1">
+			<c:set var="sessionMap" value="${sessionScope[sessionMapID]}" />
+
+			<c:choose>
+				<c:when test="${sessionMap.anonymous}">
+					<%-- Post Anonymously? --%>
+					<div class="col-12 col-sm-6">
+						<c:set var="anonymousCheckboxChecked" value="" />
+						<c:set var="anonymousCheckboxName" value="commentAnonymousReply" />
+						<%@include file="anonymouscheckbox.jsp"%>
+					</div>
+
+					<%-- Cancel / Edit Buttons --%>
+					<div class="col-12 col-sm-6">
+				</c:when>
+				<c:otherwise>
+					<div class="col-12">
+				</c:otherwise>
+			</c:choose>
+
+			<button type="button" onclick="javascript:replyFormSubmit();" class="btn btn-sm btn-secondary float-end" id="replyCommentSubmitButton">
+				<i class="fa fa-comment me-1"></i>
+				<fmt:message key="label.post" />
+			</button>
+			&nbsp;
+			<button type="button" onclick="javascript:cancelReply();" class="btn btn-sm btn-secondary float-end me-1">
+				<i class="fa fa-cancel me-1"></i>
+				<fmt:message key="label.cancel" />
+			</button>
+		</div>
+
+	</form>
+</div>
Index: lams_central/web/comments5/topicview.jsp
===================================================================
diff -u
--- lams_central/web/comments5/topicview.jsp	(revision 0)
+++ lams_central/web/comments5/topicview.jsp	(revision 3282e8325662ca873b88ceb07e627315d415a2c6)
@@ -0,0 +1,211 @@
+<%@ page import="org.lamsfoundation.lams.comments.CommentConstants"%>
+
+<c:set var="maxThreadUid" value="0"/>
+<c:set var="minThreadLike" value="-1"/>
+<c:set var="messageTablename" value=""/>
+<c:set var="indent" value="10"/>
+
+<c:set var="show"><spring:escapeBody javaScriptEscape="true"><fmt:message key="label.show" /></spring:escapeBody></c:set>
+<c:set var="hide"><spring:escapeBody javaScriptEscape="true"><fmt:message key="label.hide" /></spring:escapeBody></c:set>
+<c:set var="prompt"><spring:escapeBody javaScriptEscape="true"><fmt:message key="label.showhide.prompt" /></spring:escapeBody></c:set>
+<c:set var="tableCommand">expandable:true,initialState:'expanded',
+	expanderTemplate:'<button type="button" class="btn btn-sm btn-secondary text-nowrap my-1 py-0 px-1"><span style="margin-left:20px">${prompt}</span></button>',
+	stringCollapse:'${hide}',
+	stringExpand:'${show}',
+	clickableNodeNames:false,
+	indent:${indent},
+	onNodeInitialized:function() {
+		if (this.level() >= 2) {
+			this.collapse();
+		}
+	}
+</c:set>
+<c:set var="tableCommandSticky">expandable:true,initialState:'collapsed',
+	expanderTemplate:'<button type="button" class="btn btn-sm btn-secondary text-nowrap my-1 py-0 px-1"><span style="margin-left:20px">${prompt}</span></a>',
+	stringCollapse:'${hide}',
+	stringExpand:'${show}',
+	clickableNodeNames:false,
+	indent:${indent},
+	onNodeInitialized:function() {
+		if (this.level() >= 2) {
+			this.collapse();
+		}
+	} 
+</c:set>
+
+<script type="text/javascript">
+	// The treetable code uses the clicks to expand and collapse the replies but then 
+	// the buttons will not work. So stop the event propogating up the event chain. 
+	$(".button").click(function (e) {
+    	e.stopPropagation();
+	});
+	$(".comment").click(function (e) {
+		e.stopPropagation();
+	});
+	
+	function createReply(commentUid, url) {
+		if ( document.getElementById('reply') ) {
+			alert('<spring:escapeBody javaScriptEscape="true"><fmt:message key="message.complete.or.cancel.reply"/></spring:escapeBody>');
+		} else {
+			// set up the new reply area
+			var replyDiv = document.createElement("div");
+			replyDiv.id = 'reply';
+
+			var parentDiv = document.getElementById('pb-msg'+commentUid);
+			parentDiv.appendChild(replyDiv);
+			
+			$.ajaxSetup({ cache: true });
+			$(replyDiv).load(url);
+		}
+	}
+	
+	function createEdit(commentUid, url) {
+		if ( document.getElementById('edit') ) {
+			alert('<spring:escapeBody javaScriptEscape="true"><fmt:message key="message.complete.or.cancel.edit"/></spring:escapeBody>');
+		} else {
+			// set up the new edit area
+			// set up the new reply area
+			var editDiv = document.createElement("div");
+			editDiv.id = 'edit';
+
+			var parentDiv = document.getElementById('pb-msg'+commentUid);
+			parentDiv.appendChild(editDiv);
+
+			$.ajaxSetup({ cache: true });
+			$(editDiv).load(url);
+		}
+	}
+
+	function hideEntry(commentUid, url) {
+		$.ajax({ // create an AJAX call...
+		    type: 'GET', 
+		    url: url
+		})
+	    .done(function (response) {
+			reloadThread(response, '<lams:LAMSURL />',true,'<fmt:message key="error.cannot.redisplay.please.refresh"/>','<fmt:message key="error.please.refresh"/>');
+	    });
+	}
+
+	function makeSticky(commentUid, url) {
+		$.ajax({ // create an AJAX call...
+		    type: 'GET', 
+		    url: url
+		})
+	    .done(function (response) {
+	    	refreshComments
+	    	
+			reloadThread(response, '<lams:LAMSURL />',true,'<fmt:message key="error.cannot.redisplay.please.refresh"/>','<fmt:message key="error.please.refresh"/>');
+	    });
+	}
+
+	function updateLike(commentUid, url, incValue) {
+		$.ajax({ // create an AJAX call...
+		    type: 'POST', 
+		    url: url
+		})
+	    .done(function (response) {
+    		var serverCommentUid = response.commentUid;
+       		
+    		if ( ! commentUid || serverCommentUid != commentUid ) {
+				alert('<spring:escapeBody javaScriptEscape="true"><fmt:message key="error.cannot.redisplay.please.refresh"/></spring:escapeBody>');
+  			} else if ( response.status ) {
+  				var currentCount = $('#msglikeCount'+commentUid).html();
+  				currentCount = +currentCount + incValue;
+	       		$('#msglikeCount'+commentUid).html(currentCount);
+			}
+		});
+	}
+		
+	function likeEntry(commentUid) {
+		updateLike(
+			commentUid,
+			'<lams:LAMSURL />comments/like.do?newUI=true&sessionMapID=${sessionMapID}&commentUid='+commentUid,
+			1
+		);		
+		$( '#msglikebutton'+commentUid ).removeClass( 'fa-regular fa-faded' ).addClass( 'fa-solid' );
+		$( '#msglikebutton'+commentUid ).prop( 'onclick', null );
+		
+		<c:if test='${sessionMap.likeAndDislike}'> 
+			$( '#msgdislikebutton'+commentUid ).css( "display", "none" );
+		</c:if>
+	}
+
+	<c:if test='${sessionMap.likeAndDislike}'> 
+		function dislikeEntry(commentUid) {
+			updateLike(
+				commentUid, 
+				'<lams:LAMSURL />comments/dislike.do?newUI=true&sessionMapID=${sessionMapID}&commentUid='+commentUid,
+				-1
+			);		
+			$( '#msgdislikebutton'+commentUid ).removeClass( 'fa-regular fa-faded' ).addClass( 'fa-solid' );
+			$( '#msgdislikebutton'+commentUid ).prop( 'onclick', null );
+			$( '#msglikebutton'+commentUid ).css( "display", "none" );
+		}
+	</c:if>
+
+
+    jQuery(document).ready(function() {
+		jQuery("time.timeago").timeago();
+    });
+</script>
+
+<c:set var="isSticky" value="false"/>
+<c:forEach var="commentDto" items="${commentThread}">
+	<c:set var="msgLevel" value="${commentDto.level}" />
+	<c:set var="hidden" value="${commentDto.comment.hideFlag}" />
+	
+	<c:if test='${(msgLevel <= 1)}'>
+		<c:set var="maxThreadUid" value="${commentDto.comment.uid}"/>
+		<c:if test="${minThreadLike == -1 || minThreadLike > commentDto.comment.likeCount}">
+			<c:set var="minThreadLike" value="${commentDto.comment.likeCount}"/>
+		</c:if>
+	</c:if>
+
+	<c:set var="isSticky" value="${commentDto.comment.sticky}"/>
+	<c:set var="isMonitor" value="${commentDto.comment.monitor}"/>
+	<c:choose>
+	<c:when test='${(msgLevel == 1)}'>
+		<%-- same test & command appears at bottom of script --%>
+		<c:if test='${messageTablename != ""}'>
+			</table>
+			<script> 
+				$("#${messageTablename}").treetable({${isSticky?tableCommandSticky:tableCommand}});
+ 			</script>	
+			</div>
+		</c:if>
+		<c:set var="messageTablename" value="tree${commentDto.comment.uid}"/>
+		<div id="thread${commentDto.comment.uid}" class="clearfix">
+		<table id="${messageTablename}" class="col-12">
+		<tr data-tt-id="${commentDto.comment.uid}"><td>	
+	</c:when>
+	<c:otherwise>
+		<tr data-tt-id="${commentDto.comment.uid}" data-tt-parent-id="${commentDto.comment.parent.uid}"><td>	
+	</c:otherwise>
+	</c:choose>
+	
+	<%@ include file="msgview.jsp"%>
+	
+	<c:if test='${(msgLevel >= 1)}'>
+		</td></tr>	
+	</c:if>
+
+</c:forEach>
+
+<c:if test='${messageTablename != ""}'>
+	</table>
+	<script>
+		$("#${messageTablename}").treetable({${isSticky?tableCommandSticky:tableCommand}});
+	</script>	
+	</div>
+</c:if>
+
+<c:if test='${maxThreadUid > 0 && ! noMorePages}'>
+	<div class="text-center">
+		<c:set var="more">
+			<lams:LAMSURL />/comments/viewTopic.do?newUI=true&pageLastId=${maxThreadUid}&likeCount=${minThreadLike}&pageSize=${sessionMap.pageSize}&sessionMapID=${sessionMapID}
+		</c:set>
+		<a href="<c:out value="${more}"/>" class="btn btn-sm btn-light">
+			<fmt:message key="label.show.more.messages" />
+		</a>
+	</div>
+</c:if>
Index: lams_central/web/comments5/topicviewwrapper.jsp
===================================================================
diff -u
--- lams_central/web/comments5/topicviewwrapper.jsp	(revision 0)
+++ lams_central/web/comments5/topicviewwrapper.jsp	(revision 3282e8325662ca873b88ceb07e627315d415a2c6)
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<%@ include file="/common/taglibs.jsp"%>
+<c:set var="lams"><lams:LAMSURL /></c:set>
+<c:set var="ctxPath" value="${pageContext.request.contextPath}" scope="request" />
+<c:set var="sessionMap" value="${sessionScope[sessionMapID]}" />
+
+<!-- Wraps up topicview.jsp for paging. The first batch of messages is in viewtopic.jsp then the rest are loaded via scrolling using this jsp. -->
+
+<script type="text/javascript" src="${lams}includes/javascript/jquery.treetable.js"></script>
+<%@ include file="topicview.jsp"%>
+
+
Index: lams_central/web/css/_treetable_base.scss
===================================================================
diff -u -r7475d08afc280b5e2e5ddf04e8bf35e3166aaf80 -r3282e8325662ca873b88ceb07e627315d415a2c6
--- lams_central/web/css/_treetable_base.scss	(.../_treetable_base.scss)	(revision 7475d08afc280b5e2e5ddf04e8bf35e3166aaf80)
+++ lams_central/web/css/_treetable_base.scss	(.../_treetable_base.scss)	(revision 3282e8325662ca873b88ceb07e627315d415a2c6)
@@ -59,3 +59,50 @@
 table.highlight {
 	background : none;
 }
+
+
+/*									 bootstrap5 rules				 				*/
+
+table.treetable tr.collapsed span.indenter button {
+	position:relative;
+}
+
+table.treetable tr.collapsed span.indenter button:before {
+    content: "\f054 \f054"; 
+    font-family: FontAwesome;
+    position:absolute;
+    top:0;
+}
+
+table.treetable tr.expanded span.indenter button {
+	position:relative;
+}
+
+table.treetable tr.expanded span.indenter button:before {
+    content: "\f078";
+    font-family: FontAwesome;
+    position:absolute;
+    top:0;	
+}
+
+table.treetable tr span.indenter button {
+  outline: none; /* Expander shows outline after upgrading to 3.0 (#141) */
+  border-bottom: none; /* Hide the dotted line underneath */
+  font-size: small;
+}
+
+table.treetable tr.collapsed.selected span.indenter button {
+  background-image: url(data:image/png;base64,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);
+}
+
+table.treetable tr.expanded.selected span.indenter button {
+  background-image: url(data:image/png;base64,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);
+}
+
+table.treetable tr.collapsed.accept td span.indenter button {
+  background-image: url(data:image/x-png;base64,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);
+}
+
+table.treetable tr.expanded.accept td span.indenter button {
+  background-image: url(data:image/x-png;base64,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);
+}
\ No newline at end of file
Index: lams_central/web/includes/javascript/comments.js
===================================================================
diff -u -r7475d08afc280b5e2e5ddf04e8bf35e3166aaf80 -r3282e8325662ca873b88ceb07e627315d415a2c6
--- lams_central/web/includes/javascript/comments.js	(.../comments.js)	(revision 7475d08afc280b5e2e5ddf04e8bf35e3166aaf80)
+++ lams_central/web/includes/javascript/comments.js	(.../comments.js)	(revision 3282e8325662ca873b88ceb07e627315d415a2c6)
@@ -15,7 +15,7 @@
 	}
 
 	
-	function reloadThread(response, lamsUrl, savedCannotRedisplayMessage, errorCannotRedisplayMessage) {
+	function reloadThread(response, lamsUrl, newUi, savedCannotRedisplayMessage, errorCannotRedisplayMessage) {
 	    var threadDiv = document.getElementById('thread'+response.threadUid);
        	var threadUid = response.threadUid;
        	var commentUid = response.commentUid;
@@ -24,7 +24,7 @@
         	if ( ! threadDiv) {
         		alert(savedCannotRedisplayMessage);
        		} else {
-    			var loadString = lamsUrl+"comments/viewTopicThread.do?&sessionMapID=" + response.sessionMapID + "&threadUid=" + threadUid+"&commentUid="+commentUid;
+    			var loadString = lamsUrl+"comments/viewTopicThread.do?newUI=" + newUi + "&sessionMapID=" + response.sessionMapID + "&threadUid=" + threadUid+"&commentUid="+commentUid;
     			$.ajaxSetup({ cache: true });
 				$(threadDiv).load(loadString, function() {
 					// expand up to the reply - in case it is buried down in a lot of replies
Index: lams_learning/web/css/components-learner.scss
===================================================================
diff -u -r06770d77acb444693664d588e5d2e8570adb96aa -r3282e8325662ca873b88ceb07e627315d415a2c6
--- lams_learning/web/css/components-learner.scss	(.../components-learner.scss)	(revision 06770d77acb444693664d588e5d2e8570adb96aa)
+++ lams_learning/web/css/components-learner.scss	(.../components-learner.scss)	(revision 3282e8325662ca873b88ceb07e627315d415a2c6)
@@ -131,6 +131,7 @@
     margin-top: 1rem;
     display: flex;
     flex-direction: row-reverse;
+	clear: both;
 }
 
 .activity-bottom-buttons button, .activity-bottom-buttons a, button.btn:not(.no-shadow) {
Index: lams_tool_nb/web/monitoring/comments.jsp
===================================================================
diff -u -r7475d08afc280b5e2e5ddf04e8bf35e3166aaf80 -r3282e8325662ca873b88ceb07e627315d415a2c6
--- lams_tool_nb/web/monitoring/comments.jsp	(.../comments.jsp)	(revision 7475d08afc280b5e2e5ddf04e8bf35e3166aaf80)
+++ lams_tool_nb/web/monitoring/comments.jsp	(.../comments.jsp)	(revision 3282e8325662ca873b88ceb07e627315d415a2c6)
@@ -23,9 +23,11 @@
 	<c:set var="title"><fmt:message key="activity.title" />: <fmt:message key="label.view.comments" /></c:set>
 	<lams:Page title="${title}" type="learner" hideProgressBar="true">
 
-	<lams:Comments toolSessionId="${requestScope.toolSessionID}" toolSignature="<%=NoticeboardConstants.TOOL_SIGNATURE%>" mode="teacher" anonymous="${anonymous}"/>
-	
+		<lams:Comments toolSessionId="${requestScope.toolSessionID}" toolSignature="<%=NoticeboardConstants.TOOL_SIGNATURE%>"
+			mode="teacher" anonymous="${anonymous}"  bootstrap5="false"
+		/>
+
 	</lams:Page>
-	
+
 </lams:html>