Index: lams_tool_forum/conf/language/lams/ApplicationResources_en_AU.properties
===================================================================
diff -u -ra455dd0a59c45ffc1d9f9ebd34f33f158bc08d46 -re8e86d379857a349822a501189888545e69e56ac
--- lams_tool_forum/conf/language/lams/ApplicationResources_en_AU.properties	(.../ApplicationResources_en_AU.properties)	(revision a455dd0a59c45ffc1d9f9ebd34f33f158bc08d46)
+++ lams_tool_forum/conf/language/lams/ApplicationResources_en_AU.properties	(.../ApplicationResources_en_AU.properties)	(revision e8e86d379857a349822a501189888545e69e56ac)
@@ -243,3 +243,5 @@
 outcome.authoring.existing = Added outcomes
 outcome.authoring.existing.none = none
 outcome.authoring.remove.confirm = Are you sure you want to remove this learning outcome?
+label.download = Download
+
Index: lams_tool_forum/web/common/taglibs.jsp
===================================================================
diff -u -r9cbba0026b9584b2e4bcba57f0d5a8510bdb5846 -re8e86d379857a349822a501189888545e69e56ac
--- lams_tool_forum/web/common/taglibs.jsp	(.../taglibs.jsp)	(revision 9cbba0026b9584b2e4bcba57f0d5a8510bdb5846)
+++ lams_tool_forum/web/common/taglibs.jsp	(.../taglibs.jsp)	(revision e8e86d379857a349822a501189888545e69e56ac)
@@ -7,3 +7,4 @@
 
 <%@ taglib uri="csrfguard" prefix="csrf" %> 
 <%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %> 
+<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>
Index: lams_tool_forum/web/includes/javascript/learner.js
===================================================================
diff -u -r7475d08afc280b5e2e5ddf04e8bf35e3166aaf80 -re8e86d379857a349822a501189888545e69e56ac
--- lams_tool_forum/web/includes/javascript/learner.js	(.../learner.js)	(revision 7475d08afc280b5e2e5ddf04e8bf35e3166aaf80)
+++ lams_tool_forum/web/includes/javascript/learner.js	(.../learner.js)	(revision e8e86d379857a349822a501189888545e69e56ac)
@@ -1,13 +1,11 @@
 function removeAtt(mapID){
-				
 	$("#itemAttachmentArea").load(
 		removeItemAttachmentUrl + "?sessionMapID="+ mapID,
 		{
 			sessionMapID: mapID,
 			reqID: (new Date()).getTime()
 		}
 	);
-				
 }
 			
 function validateForm() {
Index: lams_tool_forum/web/includes/javascript/message.js
===================================================================
diff -u -rbc66c534c18e8e49ce8ed510418400cbc56fd605 -re8e86d379857a349822a501189888545e69e56ac
--- lams_tool_forum/web/includes/javascript/message.js	(.../message.js)	(revision bc66c534c18e8e49ce8ed510418400cbc56fd605)
+++ lams_tool_forum/web/includes/javascript/message.js	(.../message.js)	(revision e8e86d379857a349822a501189888545e69e56ac)
@@ -169,4 +169,7 @@
 			    })
 			  }
 		  })
+		  
+		  //assign uppy's button id, so we can assign label to it
+		  $("#image-upload-area button").first().attr("id","uppy-upload-button");
 	}
Index: lams_tool_forum/web/jsps/learning/create.jsp
===================================================================
diff -u -rfe19797ec82718905555353176ed719bec11043e -re8e86d379857a349822a501189888545e69e56ac
--- lams_tool_forum/web/jsps/learning/create.jsp	(.../create.jsp)	(revision fe19797ec82718905555353176ed719bec11043e)
+++ lams_tool_forum/web/jsps/learning/create.jsp	(.../create.jsp)	(revision e8e86d379857a349822a501189888545e69e56ac)
@@ -11,102 +11,75 @@
 <c:set var="tool"><lams:WebAppURL /></c:set>
 <c:set var="ctxPath" value="${pageContext.request.contextPath}" scope="request" />
 <c:set var="language"><lams:user property="localeLanguage"/></c:set>
-<lams:html>
-	<lams:head>
-		<title><fmt:message key="activity.title" /></title>
+<c:set var="sessionMapID" value="${messageForm.sessionMapID}" />
+<c:set var="sessionMap" value="${sessionScope[sessionMapID]}" />
 
-		<!-- ********************  CSS ********************** -->
+<lams:PageLearner title="${sessionMap.title}" toolSessionID="${sessionMap.toolSessionID}">
 
-		<lams:css />
-		<link href="${lams}css/uppy.min.css" rel="stylesheet" type="text/css" />
-		<link href="${lams}css/uppy.custom.css" rel="stylesheet" type="text/css" />
+	<!-- ********************  CSS ********************** -->
+	<link href="${lams}css/uppy.min.css" rel="stylesheet" type="text/css" />
+	<link href="${lams}css/uppy.custom.css" rel="stylesheet" type="text/css" />
 		
-		<style media="screen,projection" type="text/css">
-			.info {
-				margin: 10px;
-			}
-		</style>
-		
-		<!-- ********************  javascript ********************** -->
-		<lams:JSImport src="includes/javascript/common.js" />
-		<script type="text/javascript" src="${lams}includes/javascript/tabcontroller.js"></script>
-		<script type="text/javascript" src="${lams}includes/javascript/jquery.js"></script>
-		<script type="text/javascript" src="${lams}includes/javascript/jquery-ui.js"></script>
-		<script type="text/javascript" src="${lams}includes/javascript/jquery.jRating.js"></script>
-		<script type="text/javascript" src="${lams}includes/javascript/jquery.treetable.js"></script>
-		<script type="text/javascript" src="${lams}includes/javascript/bootstrap.min.js"></script>		
-		<script type="text/javascript" src="${lams}includes/javascript/jquery.jscroll.js"></script>
-		
-		<script type="text/javascript" src="${lams}includes/javascript/uppy/uppy.min.js"></script>
-		<c:choose>
-			<c:when test="${language eq 'es'}">
-				<script type="text/javascript" src="${lams}includes/javascript/uppy/es_ES.min.js"></script>
-			</c:when>
-			<c:when test="${language eq 'fr'}">
-				<script type="text/javascript" src="${lams}includes/javascript/uppy/fr_FR.min.js"></script>
-			</c:when>
-			<c:when test="${language eq 'el'}">
-				<script type="text/javascript" src="${lams}includes/javascript/uppy/el_GR.min.js"></script>
-			</c:when>
-		</c:choose>
-		
-		<script type="text/javascript">
-			var removeItemAttachmentUrl = "<lams:WebAppURL />learning/deleteAttachment.do";
-			var warning = '<fmt:message key="warn.minimum.number.characters" />';
-			var LABEL_MAX_FILE_SIZE = '<fmt:message key="errors.maxfilesize"><param>{0}</param></fmt:message>';
-			var LABEL_NOT_ALLOWED_FORMAT = '<fmt:message key="error.attachment.executable"/>';	
+	<!-- ********************  javascript ********************** -->
+	<lams:JSImport src="includes/javascript/common.js" />
+	<script type="text/javascript" src="${lams}includes/javascript/tabcontroller.js"></script>
+	<script type="text/javascript" src="${lams}includes/javascript/jquery.jRating.js"></script>
+	<script type="text/javascript" src="${lams}includes/javascript/jquery.treetable.js"></script>		
+	<script type="text/javascript" src="${lams}includes/javascript/jquery.jscroll.js"></script>
+	<script type="text/javascript" src="${lams}includes/javascript/uppy/uppy.min.js"></script>
+	<c:choose>
+		<c:when test="${language eq 'es'}">
+			<script type="text/javascript" src="${lams}includes/javascript/uppy/es_ES.min.js"></script>
+		</c:when>
+		<c:when test="${language eq 'fr'}">
+			<script type="text/javascript" src="${lams}includes/javascript/uppy/fr_FR.min.js"></script>
+		</c:when>
+		<c:when test="${language eq 'el'}">
+			<script type="text/javascript" src="${lams}includes/javascript/uppy/el_GR.min.js"></script>
+		</c:when>
+	</c:choose>
+	<script type="text/javascript">
+		var removeItemAttachmentUrl = "<lams:WebAppURL />learning/deleteAttachment.do";
+		var warning = '<fmt:message key="warn.minimum.number.characters" />';
+		var LABEL_MAX_FILE_SIZE = '<fmt:message key="errors.maxfilesize"><param>{0}</param></fmt:message>';
+		var LABEL_NOT_ALLOWED_FORMAT = '<fmt:message key="error.attachment.executable"/>';	
 				
-   			var LAMS_URL = '${lams}',
-   		 		UPLOAD_FILE_MAX_SIZE = '<c:out value="${UPLOAD_FILE_MAX_SIZE}"/>',
-   		 		UPLOAD_FILE_LARGE_MAX_SIZE = '<c:out value="${UPLOAD_FILE_LARGE_MAX_SIZE}"/>';
-   				// convert Java syntax to JSON
-   		       EXE_FILE_TYPES = JSON.parse("[" + "${EXE_FILE_TYPES}".replace(/\.\w+/g, '"$&"') + "]"),
-   			   decoderDiv = $('<div />'),
-   		       <fmt:message key="error.attachment.executable" var="EXE_FILE_ERROR_VAR" />
-   		       EXE_FILE_ERROR = decoderDiv.html('<c:out value="${EXE_FILE_ERROR_VAR}" />').text();
-		</script>
-		<script type="text/javascript" src="${tool}includes/javascript/learner.js"></script>
-		<script type="text/javascript" src="${tool}includes/javascript/message.js"></script>	
-		
-	</lams:head>
-	
-	<body class="stripes">
-		<script>
-			function doSubmit() {
-				disableSubmitButton(); 
-				if (validateForm()) {
-					showBusy("itemAttachmentArea");
-					return true;
-				}
-				enableSubmitButton();
-				return false;
+   		var UPLOAD_FILE_MAX_SIZE = '<c:out value="${UPLOAD_FILE_MAX_SIZE}"/>',
+   	 		UPLOAD_FILE_LARGE_MAX_SIZE = '<c:out value="${UPLOAD_FILE_LARGE_MAX_SIZE}"/>',
+   			// convert Java syntax to JSON
+   	       EXE_FILE_TYPES = JSON.parse("[" + "${EXE_FILE_TYPES}".replace(/\.\w+/g, '"$&"') + "]"),
+   	       <fmt:message key="error.attachment.executable" var="EXE_FILE_ERROR_VAR" />
+   	       EXE_FILE_ERROR = $('<div />').html('<c:out value="${EXE_FILE_ERROR_VAR}" />').text();
+	</script>
+	<script type="text/javascript" src="${tool}includes/javascript/learner.js"></script>
+	<script type="text/javascript" src="${tool}includes/javascript/message.js"></script>
+	<script type="text/javascript">
+		function doSubmit() {
+			disableSubmitButton(); 
+			if (validateForm()) {
+				showBusy("itemAttachmentArea");
+				return true;
 			}
-		</script>
+			enableSubmitButton();
+			return false;
+		}
+	</script>
 		
+	<div id="container-main">
 		<form:form action="createTopic.do" id="messageForm" modelAttribute="messageForm" onsubmit="return doSubmit();" 
-				method="post" focus="message.subject" enctype="multipart/form-data">
-				
+				method="post" focus="message.subject" enctype="multipart/form-data">		
 			<form:hidden path="sessionMapID" />
-			<c:set var="sessionMapID" value="${messageForm.sessionMapID}" />
-			<c:set var="sessionMap" value="${sessionScope[sessionMapID]}" />
 		
-			<lams:Page type="learner" title="${sessionMap.title}" formID="messageForm">
-		
-				<div class="container-fluid">
-				<div class="panel panel-default">
-					<div class="panel-heading panel-title">
-						<fmt:message key="title.message.edit" />
-					</div>
-					<div class="panel-body">
-						<lams:errors/>
-		 				<%@ include file="/jsps/learning/message/topicform.jsp"%>
-					</div>
+			<div class="card lcard">
+				<div class="card-header">
+					<fmt:message key="title.message.edit" />
 				</div>
-				</div>		
-			</lams:Page>
-		
-		</form:form>
-		
-
-	</body>
-</lams:html>
\ No newline at end of file
+				
+				<div class="card-body">
+					<lams:errors5/>
+		 			<%@ include file="/jsps/learning/message/topicform.jsp"%>
+				</div>
+			</div>
+		</form:form>	
+	</div>
+</lams:PageLearner>
Index: lams_tool_forum/web/jsps/learning/edit.jsp
===================================================================
diff -u -rfe19797ec82718905555353176ed719bec11043e -re8e86d379857a349822a501189888545e69e56ac
--- lams_tool_forum/web/jsps/learning/edit.jsp	(.../edit.jsp)	(revision fe19797ec82718905555353176ed719bec11043e)
+++ lams_tool_forum/web/jsps/learning/edit.jsp	(.../edit.jsp)	(revision e8e86d379857a349822a501189888545e69e56ac)
@@ -10,69 +10,49 @@
 <c:set var="tool"><lams:WebAppURL /></c:set>
 <c:set var="ctxPath" value="${pageContext.request.contextPath}" scope="request" />
 <c:set var="language"><lams:user property="localeLanguage"/></c:set>
+<c:set var="sessionMapID" value="${messageForm.sessionMapID}"/>
+<c:set var="sessionMap" value="${sessionScope[sessionMapID]}"/>
 
-<lams:html>
-	<lams:head>
-		<title><fmt:message key="activity.title" /></title>
-
-		<!-- ********************  CSS ********************** -->
-		<lams:css />
-		<link href="${lams}css/uppy.min.css" rel="stylesheet" type="text/css" />
-		<link href="${lams}css/uppy.custom.css" rel="stylesheet" type="text/css" />
-		<style media="screen,projection" type="text/css">
-			.info {
-				margin: 10px;
-			}
-		</style>
+<!-- ********************  CSS ********************** -->
+<link href="${lams}css/uppy.min.css" rel="stylesheet" type="text/css" />
+<link href="${lams}css/uppy.custom.css" rel="stylesheet" type="text/css" />
 		
-		<!-- ********************  javascript ********************** -->
-		<lams:JSImport src="includes/javascript/common.js" />
-		<script type="text/javascript" src="${lams}includes/javascript/tabcontroller.js"></script>
-		<script type="text/javascript" src="${lams}includes/javascript/jquery.js"></script>
-		<script type="text/javascript" src="${lams}includes/javascript/jquery-ui.js"></script>
-		<script type="text/javascript" src="${lams}includes/javascript/jquery.jRating.js"></script>
-		<script type="text/javascript" src="${lams}includes/javascript/jquery.treetable.js"></script>
-		<script type="text/javascript" src="${lams}includes/javascript/bootstrap.min.js"></script>		
-		<script type="text/javascript" src="${lams}includes/javascript/jquery.jscroll.js"></script>
-		<lams:JSImport src="includes/javascript/upload.js" />
-				
-		<script type="text/javascript" src="${lams}includes/javascript/uppy/uppy.min.js"></script>
-		<c:choose>
-			<c:when test="${language eq 'es'}">
-				<script type="text/javascript" src="${lams}includes/javascript/uppy/es_ES.min.js"></script>
-			</c:when>
-			<c:when test="${language eq 'fr'}">
-				<script type="text/javascript" src="${lams}includes/javascript/uppy/fr_FR.min.js"></script>
-			</c:when>
-			<c:when test="${language eq 'el'}">
-				<script type="text/javascript" src="${lams}includes/javascript/uppy/el_GR.min.js"></script>
-			</c:when>
-		</c:choose>
-		
-		<script type="text/javascript">
-			var removeItemAttachmentUrl = "<lams:WebAppURL />learning/deleteAttachment.do";
-			var warning = '<fmt:message key="warn.minimum.number.characters" />';
-			var LABEL_MAX_FILE_SIZE = '<fmt:message key="errors.maxfilesize"><param>{0}</param></fmt:message>';
-			var LABEL_NOT_ALLOWED_FORMAT = '<fmt:message key="error.attachment.executable"/>';	
+<!-- ********************  javascript ********************** -->
+<lams:JSImport src="includes/javascript/common.js" />
+<script type="text/javascript" src="${lams}includes/javascript/tabcontroller.js"></script>
+<script type="text/javascript" src="${lams}includes/javascript/jquery.jRating.js"></script>
+<script type="text/javascript" src="${lams}includes/javascript/jquery.treetable.js"></script>
+<script type="text/javascript" src="${lams}includes/javascript/jquery.jscroll.js"></script>
+<lams:JSImport src="includes/javascript/upload.js" />
+<script type="text/javascript" src="${lams}includes/javascript/uppy/uppy.min.js"></script>
+<c:choose>
+	<c:when test="${language eq 'es'}">
+		<script type="text/javascript" src="${lams}includes/javascript/uppy/es_ES.min.js"></script>
+	</c:when>
+	<c:when test="${language eq 'fr'}">
+		<script type="text/javascript" src="${lams}includes/javascript/uppy/fr_FR.min.js"></script>
+	</c:when>
+	<c:when test="${language eq 'el'}">
+		<script type="text/javascript" src="${lams}includes/javascript/uppy/el_GR.min.js"></script>
+	</c:when>
+</c:choose>
+<script type="text/javascript">
+	var removeItemAttachmentUrl = "<lams:WebAppURL />learning/deleteAttachment.do";
+	var warning = '<fmt:message key="warn.minimum.number.characters" />';
+	var LABEL_MAX_FILE_SIZE = '<fmt:message key="errors.maxfilesize"><param>{0}</param></fmt:message>';
+	var LABEL_NOT_ALLOWED_FORMAT = '<fmt:message key="error.attachment.executable"/>';	
 			
-   			var LAMS_URL = '${lams}',
-   		 		UPLOAD_FILE_MAX_SIZE = '<c:out value="${UPLOAD_FILE_MAX_SIZE}"/>',
-   		 		UPLOAD_FILE_LARGE_MAX_SIZE = '<c:out value="${UPLOAD_FILE_LARGE_MAX_SIZE}"/>';
-   				// convert Java syntax to JSON
-   		       EXE_FILE_TYPES = JSON.parse("[" + "${EXE_FILE_TYPES}".replace(/\.\w+/g, '"$&"') + "]"),
-   			   decoderDiv = $('<div />'),
-   		       <fmt:message key="error.attachment.executable" var="EXE_FILE_ERROR_VAR" />
-   		       EXE_FILE_ERROR = decoderDiv.html('<c:out value="${EXE_FILE_ERROR_VAR}" />').text();
-
-		</script>
-		<script type="text/javascript" src="${tool}includes/javascript/learner.js"></script>	
-		
-	</lams:head>
-	
-	<body class="stripes">
-		<lams:JSImport src="includes/javascript/message.js" relative="true" />
-
-		<script type="text/javascript">
+   	var UPLOAD_FILE_MAX_SIZE = '<c:out value="${UPLOAD_FILE_MAX_SIZE}"/>',
+   		UPLOAD_FILE_LARGE_MAX_SIZE = '<c:out value="${UPLOAD_FILE_LARGE_MAX_SIZE}"/>',
+   		// convert Java syntax to JSON
+   	    EXE_FILE_TYPES = JSON.parse("[" + "${EXE_FILE_TYPES}".replace(/\.\w+/g, '"$&"') + "]"),
+   	    <fmt:message key="error.attachment.executable" var="EXE_FILE_ERROR_VAR" />
+   	    EXE_FILE_ERROR = $('<div />').html('<c:out value="${EXE_FILE_ERROR_VAR}" />').text();
+</script>
+<script type="text/javascript" src="${tool}includes/javascript/learner.js"></script>	
+<lams:JSImport src="includes/javascript/message.js" relative="true" />
+<script type="text/javascript">
+	jQuery(document).ready(function() {
 			// 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. 
 			$("#messageForm").click(function (e) {
@@ -133,32 +113,24 @@
 				}
 				return false;
 			});
+	});
 		
-			function cancelEdit() {
-				$('#edit').remove();
-			}
-			
-		</script>
+	function cancelEdit() {
+		$('#edit').remove();
+	}
+</script>
+
+<form:form action="updateTopic.do" focus="message.subject" enctype="multipart/form-data" id="messageForm" modelAttribute="messageForm">
+	<form:hidden path="sessionMapID"/>	
 		
-		<form:form action="updateTopic.do" focus="message.subject" enctype="multipart/form-data" id="messageForm" modelAttribute="messageForm">
+	<div class="card m-2">
+		<div class="card-header">
+			<fmt:message key="title.message.edit" />
+		</div>
 				
-			<form:hidden path="sessionMapID"/>	
-			<c:set var="sessionMapID" value="${messageForm.sessionMapID}"/>
-			<c:set var="sessionMap" value="${sessionScope[sessionMapID]}"/>
-		
-			<div class="container-fluid">
-			<div class="panel panel-default">
-				<div class="panel-heading panel-title">
-					<fmt:message key="title.message.edit" />
-				</div>
-				<div class="panel-body">
-					<lams:errors/>
-					<%@ include file="/jsps/learning/message/topiceditform.jsp"%>
-				</div>
-			</div>
-			</div>
-		
-		</form:form>
-
-	</body>
-</lams:html>
\ No newline at end of file
+		<div class="card-body">
+			<lams:errors5/>
+			<%@ include file="/jsps/learning/message/topiceditform.jsp"%>
+		</div>
+	</div>
+</form:form>
Index: lams_tool_forum/web/jsps/learning/message/bodyarea.jsp
===================================================================
diff -u -r994d5bec48c15103f6659201a83e5f5a9aca657d -re8e86d379857a349822a501189888545e69e56ac
--- lams_tool_forum/web/jsps/learning/message/bodyarea.jsp	(.../bodyarea.jsp)	(revision 994d5bec48c15103f6659201a83e5f5a9aca657d)
+++ lams_tool_forum/web/jsps/learning/message/bodyarea.jsp	(.../bodyarea.jsp)	(revision e8e86d379857a349822a501189888545e69e56ac)
@@ -1,35 +1,9 @@
 <%@ include file="/common/taglibs.jsp"%>
 
-	<%-- for validateForm() method --%>
-	<input type="hidden" name="minCharactersEnabled" id="min-characters-enabled" value="${sessionMap.minCharacters > 0}"/>
-
-	<c:choose>
-		<c:when test="${sessionMap.allowRichEditor}">
-			<lams:CKEditor id="message.body" value="${messageForm.message.body}" 
-					contentFolderID="${sessionMap.learnerContentFolder}" toolbarSet="DefaultLearner">
-			</lams:CKEditor>
-		</c:when>
-		
-		<c:otherwise>
-			<%-- Does not use general tag because this field need keep compatible with CKEditor's content --%>
-			<lams:textarea name="message.body" class="form-control" tabindex="2" rows="10">${messageForm.message.body}</lams:textarea>
-		</c:otherwise>
-	</c:choose>
- 
-	<c:if test="${sessionMap.allowAnonym || sessionMap.maxCharacters > 0 || sessionMap.minCharacters > 0}">
-	<div class="row mt-2">
-
-	<div class="col-12 col-sm-6">
+<script type="text/javascript">
+	$(document).ready(function() {
+		<c:if test="${sessionMap.maxCharacters > 0}">
 	
-	<%-- If limitChars == 0, then we don't want to limit the characters at all. --%>
-	<c:if test="${sessionMap.maxCharacters > 0}">
-
-		<fmt:message key="lable.char.left" />: <span id="char-left-div"></span>
-		<input type="hidden" name="limitCount" id="max-limit-count" />
-				
-		<script type="text/javascript">
-		$(document).ready(function() {
-			
 			// Whether content has exceeded the maximum characters.
 			var isNewlyInstantiated = true;
 			var isCkeditor = ${sessionMap.allowRichEditor};
@@ -95,17 +69,9 @@
 				//count characters initially
 				counter();
 			}
+		</c:if>
 
-		});
-		</script>
-	</c:if>
-
-	<c:if test="${sessionMap.minCharacters > 0}">
-		<fmt:message key="label.char.required" />: <span id="char-required-div"></span>
-			
-		<script type="text/javascript">
-		$(document).ready(function() {
-
+		<c:if test="${sessionMap.minCharacters > 0}">
 			var isCkeditor = ${sessionMap.allowRichEditor};
 			var ckeditor = isCkeditor ? CKEDITOR.instances["message.body"] : null;
 			
@@ -136,41 +102,56 @@
 				$('textarea[id="message.body"]').on('change keydown keypress keyup paste', counter);
 				//count characters initially
 				counter();
-			}
+			}	
+		</c:if>
 
-		});
-		</script>			
-	</c:if>
-	</div>
-	
-	<div class="col-12 col-sm-6 text-end">
 		<c:if test="${sessionMap.allowAnonym}">
-			<div class="checkbox form-control-inline form-check">
-				<form:checkbox path="message.isAnonymous" id="isAnonymous" cssClass="form-check-input"/> 
-				
-				<label for="isAnonymous" class="form-check-label">	
-					<fmt:message key="label.post.anonomously" />
-				</label>
-			</div>
-			&nbsp;
-			<a tabindex="0" role="button" data-bs-toggle="popover">
-				<i class="fa fa-info-circle"></i>
-			</a>
-		
-			<%-- Use c:out to escape any quotes in the I18N string. Then use html: true converts any escaped quotes back --%>
-			<%-- into real quotes. Should be safe from XSS attack as the string is coming from a translation file. --%>	
-			<fmt:message key="label.anonymous.tooltip" var="ANONYMOUS_TOOLTIP_VAR"></fmt:message>
-					
-	 		<script type="text/javascript">
-			$(document).ready(function() {
-				var ANONYMOUS_TOOLTIP = '<c:out value="${ANONYMOUS_TOOLTIP_VAR}" />';
-		    		$('[data-bs-toggle="popover"]').popover({title: "", content: ANONYMOUS_TOOLTIP, placement:"auto left", delay: 50, trigger:"hover focus", html: true});
+			$('[data-bs-toggle="popover"]').each((i, el) => {
+				new bootstrap.Popover($(el), {
+					content: '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.anonymous.tooltip"/></spring:escapeBody>',  
+					delay: 50, 
+					html: true
+				})
 			});
-			</script>
-	 	</c:if>
-	</div>
+		</c:if>
+	});
+</script>
 
-	</div> <!-- end row -->
-	</c:if>
+<%-- for validateForm() method --%>
+<input type="hidden" name="minCharactersEnabled" id="min-characters-enabled" value="${sessionMap.minCharacters > 0}"/>
+
+<c:choose>
+	<c:when test="${sessionMap.allowRichEditor}">
+		<lams:CKEditor id="message.body"
+			value="${messageForm.message.body}"
+			contentFolderID="${sessionMap.learnerContentFolder}"
+			toolbarSet="DefaultLearner" 
+			ariaLabelledby="label-body"
+			isRequired="true"
+			></lams:CKEditor>
+	</c:when>
+		
+	<c:otherwise>
+		<%-- Does not use general tag because this field need keep compatible with CKEditor's content --%>
+		<lams:textarea id="message.body"
+			name="message.body" class="form-control" rows="10"
+			aria-labelledby="label-body"
+			aria-required="true"
+		>${messageForm.message.body}</lams:textarea>
+	</c:otherwise>
+</c:choose>
+ 
+<c:if test="${sessionMap.maxCharacters > 0 || sessionMap.minCharacters > 0}">
+	<div class="badge alert alert-info mt-1">
+		<c:if test="${sessionMap.maxCharacters > 0}">
+			<fmt:message key="lable.char.left" />: <span id="char-left-div"></span>
+			<input type="hidden" name="limitCount" id="max-limit-count" />
+		</c:if>
 	
-	<lams:errors path="message.body"/>
\ No newline at end of file
+		<c:if test="${sessionMap.minCharacters > 0}">
+			<fmt:message key="label.char.required" />: <span id="char-required-div"></span>		
+		</c:if>
+	</div>
+</c:if>
+	
+<lams:errors5 path="message.body"/>
\ No newline at end of file
Index: lams_tool_forum/web/jsps/learning/message/msgattachment.jsp
===================================================================
diff -u -rbc8213e12c4e5afddd0394ad66386ef3e70d1611 -re8e86d379857a349822a501189888545e69e56ac
--- lams_tool_forum/web/jsps/learning/message/msgattachment.jsp	(.../msgattachment.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
+++ lams_tool_forum/web/jsps/learning/message/msgattachment.jsp	(.../msgattachment.jsp)	(revision e8e86d379857a349822a501189888545e69e56ac)
@@ -1,26 +1,40 @@
 <%@ include file="/common/taglibs.jsp" %>
-
 <c:set var="ctxPath" value="${pageContext.request.contextPath}" scope="request"/>
+
 <input type="hidden" name="hasAttachment" value="${topic.hasAttachment}"/>
 <c:if test="${topic.hasAttachment}">
+	<fmt:message key="message.label.attachment"/>: 
+	
+	<ul>
 		<c:forEach var="file" items="${topic.message.attachments}">
-		    <a id="removeAttachmentButton" href="#" onclick="removeAtt('${sessionMapID}')" class="btn btn-secondary btn-sm"><i class="fa fa-trash-o"></i></a>
-			<fmt:message key="message.label.attachment"/>: 
-			<c:set var="downloadURL">
-				<lams:WebAppURL />download/?uuid=${file.fileDisplayUuid}&versionID=${file.fileVersionId}&preferDownload=true
-			</c:set>
-			<a href="<c:out value='${downloadURL}' escapeXml='false'/>"> <c:out value="${file.fileName}" /> </a>
-	  		<BR/>
-  		</c:forEach>
+		    <li>
+		    	<c:out value="${file.fileName}" /> 
+		    	
+				<c:set var="downloadURL">
+					<lams:WebAppURL />download/?uuid=${file.fileDisplayUuid}&versionID=${file.fileVersionId}&preferDownload=true
+				</c:set>
+				<a href="<c:out value='${downloadURL}' escapeXml='false'/>" class="btn btn-sm btn-light"> 
+					<fmt:message key="label.download" />
+					<i class="fa-solid fa-download ms-1"></i>
+				</a>
+		
+			    <button type="button" id="removeAttachmentButton" onclick="removeAtt('${sessionMapID}')" class="btn btn-light btn-sm">
+			    	<fmt:message key="label.delete" />
+			    	<i class="fa-solid fa-trash text-danger ms-1"></i>
+			    </button>
+		  	</li>
+	  	</c:forEach>
 	</ul>
 </c:if>
 
 <c:if test="${not topic.hasAttachment && allowUpload}">
-		<input type="hidden" id="tmpFileUploadId" name="tmpFileUploadId"
+	<input type="hidden" id="tmpFileUploadId" name="tmpFileUploadId"
 			   value="${empty messageForm.tmpFileUploadId ? tmpFileUploadId : messageForm.tmpFileUploadId}" />
-		<label for="image-upload-area"><fmt:message key="message.label.attachment" /></label>
-		<div id="image-upload-area" class="mt-4"></div>
-		<script>
-			initFileUpload('${empty messageForm.tmpFileUploadId ? tmpFileUploadId : messageForm.tmpFileUploadId}', true, '<lams:user property="localeLanguage"/>');
-		</script>
+	<label for="uppy-upload-button">
+		<fmt:message key="message.label.attachment" />
+	</label>
+	<div id="image-upload-area"></div>
+	<script>
+		initFileUpload('${empty messageForm.tmpFileUploadId ? tmpFileUploadId : messageForm.tmpFileUploadId}', true, '<lams:user property="localeLanguage"/>');
+	</script>
 </c:if>
Index: lams_tool_forum/web/jsps/learning/message/msgview.jsp
===================================================================
diff -u -rbc8213e12c4e5afddd0394ad66386ef3e70d1611 -re8e86d379857a349822a501189888545e69e56ac
--- lams_tool_forum/web/jsps/learning/message/msgview.jsp	(.../msgview.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
+++ lams_tool_forum/web/jsps/learning/message/msgview.jsp	(.../msgview.jsp)	(revision e8e86d379857a349822a501189888545e69e56ac)
@@ -1,11 +1,8 @@
-<%@ page import="org.lamsfoundation.lams.tool.forum.ForumConstants"%>
+<!DOCTYPE html>
 <%@ include file="/common/taglibs.jsp"%>
-
-<%--  msgDto, messageUid, msgLevel needs to be in the session elsewhere --%>
-
+<%@ page import="org.lamsfoundation.lams.tool.forum.ForumConstants"%>
 <c:set var="hidden" value="${msgDto.message.hideFlag}" />
 <c:set var="anonymous" value="${msgDto.message.isAnonymous}" />
-
 <c:choose>
 	<c:when test='${msgDto.message.uid == messageUid}'>
 		<c:set var="highlightClass">highlight</c:set>
@@ -15,21 +12,14 @@
 	</c:otherwise>
 </c:choose>
 
+<%--  msgDto, messageUid, msgLevel needs to be in the session elsewhere --%>
 <%--  outermsg${msgDto.message.uid} is used to replace existing message areas when a message is edited. --%>
-<c:choose>
-	<c:when test='${(msgDto.level <= 1)}'>
-		<div class="row g-0 mt-2">
-			<div class="col-12" id="outermsg${msgDto.message.uid}">
-	</c:when>
-	<c:otherwise>
-		<div class="g-0 mt-1">
-			<div style="margin-left:<c:out value="${(msgDto.level-1)*indent}"/>px;" id="outermsg${msgDto.message.uid}">
-	</c:otherwise>
-</c:choose>
+<div id="outermsg${msgDto.message.uid}"
+	<c:if test='${(msgDto.level > 1)}'>style="margin-left: ${(msgDto.level-1)*indent}px;" </c:if> >
 
-<div class="panel panel-default ${highlightClass} msg" id="msg${msgDto.message.uid}">
-	<div class="panel-heading">
-		<div class="panel-title portrait-container-small">
+<div class="card lcard ${highlightClass} msg mb-2" id="msg${msgDto.message.uid}">
+	<div class="card-header">
+		<div class="portrait-container-small">
 
 			<c:choose>
 				<c:when test="${msgDto.message.isMonitor}">
@@ -43,79 +33,90 @@
  	        </c:choose>
 
 			<c:if test='${(sessionMap.mode == "teacher") or not (anonymous or hidden)}'>
-			<div class="float-end">
-			    <lams:Portrait userId="${msgDto.authorUserId}"/>
-			</div>
+				<div class="float-end">
+				    <lams:Portrait userId="${msgDto.authorUserId}"/>
+				</div>
 			</c:if>
 			
 			<span class="${textClass} subject">
-			<c:choose>
-				<c:when test='${(sessionMap.mode == "teacher") || (not hidden)}'>
-					<c:out value="${msgDto.message.subject}" />
-				</c:when>
-				<c:otherwise>
-				&nbsp;<fmt:message key="topic.message.subject.hidden" />
-				</c:otherwise>
-			</c:choose>
-            </span><br/>
-
-            <div class="${textClass} small">
-			<c:set var="msgAuthor" value="${msgDto.author}" />
-			<c:if test="${empty msgAuthor}">
-				<c:set var="msgAuthor"><fmt:message key="label.default.user.name" /></c:set>
-			</c:if>
-			<fmt:message key="lable.topic.subject.by" />:
 				<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 test='${(sessionMap.mode == "teacher") || (not hidden)}'>
+						<c:out value="${msgDto.message.subject}" />
 					</c:when>
 					<c:otherwise>
-						<c:set var="author">${msgAuthor}</c:set>
+					&nbsp;<fmt:message key="topic.message.subject.hidden" />
 					</c:otherwise>
-					</c:choose>
-				</c:when>
-				<c:otherwise>
+				</c:choose>
+            </span><br/>
+
+            <div class="${textClass} font-size-init">
+				<c:set var="msgAuthor" value="${msgDto.author}" />
+				<c:if test="${empty msgAuthor}">
+					<c:set var="msgAuthor"><fmt:message key="label.default.user.name" /></c:set>
+				</c:if>
+				<fmt:message key="lable.topic.subject.by" />:
 					<c:choose>
-					<c:when test="${hidden}">
-						<c:set var="author"></c:set>
+					<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: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: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:otherwise>
-				</c:choose>
-
-            <span id="author"><b><c:out value="${author}" escapeXml="true" /></b></span>
-            - <lams:Date value="${msgDto.message.updated}" timeago="true"/>
+	
+	            <span id="author">
+	            	<b><c:out value="${author}" escapeXml="true" /></b>
+	            </span>
+	            - <lams:Date value="${msgDto.message.updated}" timeago="true"/>
 			</div>
 		</div>
-	</div> <!--  end of panel-heading -->
+	</div>
 
-	<div class="panel-body ${bgClass}" id="pb-msg${msgDto.message.uid}">
-		<span> <c:if test='${(not hidden) || (hidden && sessionMap.mode == "teacher")}'>
+	<div class="card-body ${bgClass}" id="pb-msg${msgDto.message.uid}">
+		<span> 
+			<c:if test='${(not hidden) || (hidden && sessionMap.mode == "teacher")}'>
 				<c:out value="${msgDto.message.body}" escapeXml="false" />
-			</c:if> <c:if test='${hidden}'>
+			</c:if> 
+			<c:if test='${hidden}'>
 				&nbsp;<em><fmt:message key="topic.message.body.hidden" /> </em>
 			</c:if>
 		</span>
 
 		<c:if test="${not empty msgDto.message.attachments}">
-			<div id="attachments${msgDto.message.uid}" class="attachments">
-				<i class="fa fa-paperclip ms-1" title="<fmt:message key='message.label.attachment'/>"></i>
+			<div id="attachments${msgDto.message.uid}" class="attachments ms-4x">
 				<c:if test='${(not hidden) || (hidden && sessionMap.mode == "teacher")}'>
 					<c:forEach var="file" items="${msgDto.message.attachments}">
+						<span class="badge text-bg-warning bg-opacity-50 me-1 mt-3" title="<fmt:message key='message.label.attachment'/>">
+							<fmt:message key='message.label.attachment'/>&nbsp;<c:out value="${file.fileName}" />
+						</span>
+						
 						<c:set var="downloadURL">
 							<lams:WebAppURL />download/?uuid=${file.fileDisplayUuid}&versionID=${file.fileVersionId}&preferDownload=true
 						</c:set>
-						<a href="<c:out value='${downloadURL}' escapeXml='false'/>"><c:out value="${file.fileName}" /> </a>
+						<a href="<c:out value='${downloadURL}' escapeXml='false'/>" class="btn btn-sm btn-light">
+							<fmt:message key="label.download" />
+							<i class="fa-solid fa-download ms-1"></i>
+						</a>
 					</c:forEach>
 				</c:if>
+				
 				<c:if test='${hidden}'>
 					&nbsp;<em><fmt:message key="topic.message.attachment.hidden" /></em>
 				</c:if>
@@ -125,9 +126,16 @@
 		<c:if test="${((msgDto.released && msgDto.isAuthor) || sessionMap.mode=='teacher') && (not empty msgDto.mark)}">
 			<hr class="msg-hr">
 			<div>
-				<span class="label label-default"><fmt:message key="lable.topic.title.mark" />&nbsp;</span>
+				<span class="label label-default">
+					<fmt:message key="lable.topic.title.mark" />&nbsp;
+				</span>
+				
 				<fmt:formatNumber value="${msgDto.mark}" maxFractionDigits="2" />
-				<BR /> <span class="label label-default"><fmt:message key="lable.topic.title.comment" />&nbsp;</span>
+				<BR /> 
+				<span class="label label-default">
+					<fmt:message key="lable.topic.title.comment" />&nbsp;
+				</span>
+				
 				<c:choose>
 					<c:when test="${empty msgDto.comment}">
 						<fmt:message key="message.not.avaliable" />
@@ -140,12 +148,12 @@
 		</c:if>
 
 		<hr class="msg-hr">
-		<div class="msg-footer">
+		<div class="float-end">
 
 			<!--  Rating stars -->
 			<%@ include file="/jsps/learning/ratingStars.jsp"%>
 
-			<!--  Hide/Unhide Button -->
+			<!--  Hide/Unhide Buttons -->
 			<c:if test='${sessionMap.mode == "teacher"}'>
 				<c:set var="updateMark">
 					<lams:WebAppURL />monitoring/editMark.do?sessionMapID=${sessionMapID}&topicID=${msgDto.message.uid}&updateMode=viewForum&hideReflection=${sessionMap.hideReflection}
@@ -179,35 +187,30 @@
 				&middot;
 			</c:if>
 
+			<!--  Edit Button -->
+			<c:if test="${not hidden && ((sessionMap.mode == 'teacher') || (msgDto.isAuthor && not sessionMap.finishedLock && sessionMap.allowEdit && (empty msgDto.mark)))}">
+				<c:set var="edittopic">
+					<lams:WebAppURL />learning/editTopic.do?sessionMapID=${sessionMapID}&topicID=${msgDto.message.uid}&rootUid=${sessinoMap.rootUid}&create=${msgDto.message.created.time}&hideReflection=${sessionMap.hideReflection}
+				</c:set>
+				<button type="button" onClick="javascript:createEdit(${msgDto.message.uid},'${edittopic}',${msgLevel})" class="btn btn-light comment align-top ms-2">
+					<i class="fa-regular fa-pen-to-square me-1"></i>
+					<fmt:message key="label.edit" />
+				</button>
+			</c:if>
+
 			<%--  Reply Button. Must have class replybutton so that the button is hidden when the user reaches the maximum number of posts. See $('#messageForm').submit() --%>
 			<c:if test="${(not sessionMap.finishedLock) && (not noMorePosts)}">
-				<c:set var="replyShown" value="true"/>
 				<c:set var="replytopic">
 					<lams:WebAppURL />learning/newReplyTopic.do?sessionMapID=${sessionMapID}&parentID=${msgDto.message.uid}&rootUid=${sessionMap.rootUid}&hideReflection=${sessionMap.hideReflection}
 				</c:set>
-				<a href="#${msgDto.message.uid}" onClick="javascript:createReply(${msgDto.message.uid},'${replytopic}',${msgLevel})"
-					class="comment replybutton"><fmt:message key="label.reply" /></a>
+				<button type="button" onClick="javascript:createReply(${msgDto.message.uid},'${replytopic}',${msgLevel})" class="btn btn-light comment replybutton align-top ms-2">
+					<i class="fa-solid fa-reply me-1"></i>
+					<fmt:message key="label.reply" />
+				</button>
 			</c:if>
 
-
-			<!--  Edit Button -->
-			<c:if test="${not hidden}">
-				<c:if
-					test='${(sessionMap.mode == "teacher") || (msgDto.isAuthor && not sessionMap.finishedLock && sessionMap.allowEdit && (empty msgDto.mark))}'>
-					<c:if test="${replyShown}"><span class="replybutton">&middot; </span>	</c:if>		
-					<c:set var="edittopic">
-						<lams:WebAppURL />learning/editTopic.do?sessionMapID=${sessionMapID}&topicID=${msgDto.message.uid}&rootUid=${sessinoMap.rootUid}&create=${msgDto.message.created.time}&hideReflection=${sessionMap.hideReflection}
-					</c:set>
-					<a href="#${msgDto.message.uid}" onClick="javascript:createEdit(${msgDto.message.uid},'${edittopic}',${msgLevel})"
-						class="comment"><fmt:message key="label.edit" /></a>
-				</c:if>
-			</c:if>
-
 		</div> <!--  end msg-footer -->
 	</div> <!--  end panel-body -->
 </div> <!--  end panel -->
-
-<%-- Close the 2 divs from the choose --%> 
 </div> <!--  end div outermsg -->
-</div> <!--  end div no gutter -->
 
Index: lams_tool_forum/web/jsps/learning/message/msgviewwrapper.jsp
===================================================================
diff -u -r62aaf160878735888d077bf28fac3c1989bb8fbd -re8e86d379857a349822a501189888545e69e56ac
--- lams_tool_forum/web/jsps/learning/message/msgviewwrapper.jsp	(.../msgviewwrapper.jsp)	(revision 62aaf160878735888d077bf28fac3c1989bb8fbd)
+++ lams_tool_forum/web/jsps/learning/message/msgviewwrapper.jsp	(.../msgviewwrapper.jsp)	(revision e8e86d379857a349822a501189888545e69e56ac)
@@ -1,34 +1,21 @@
 <!DOCTYPE html>
-
-<%-- 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. --%>
-
 <%@ include file="/common/taglibs.jsp"%>
 <c:set var="localeLanguage"><lams:user property="localeLanguage" /></c:set>
 <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" src="<lams:LAMSURL />/includes/javascript/jquery.timeago.js"></script>
 <script type="text/javascript" src="<lams:LAMSURL />/includes/javascript/timeagoi18n/jquery.timeago.${fn:toLowerCase(localeLanguage)}.js"></script>
 <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();
+	jQuery(document).ready(function() {
+		jQuery("time.timeago").timeago();
 	});
-	$(".msg-footer").click(function (e) {
-		e.stopPropagation();
-	});
-	$(".attachments").click(function (e) {
-		e.stopPropagation();
-	});
 </script>
 
 <c:forEach var="msgDto" items="${topicThread}">
 	<c:set var="msgLevel" value="${msgDto.level}" />
 	<%@ include file="msgview.jsp"%>
 </c:forEach>
 
-<script type="text/javascript">
-	jQuery(document).ready(function() {
-		jQuery("time.timeago").timeago();
-	});
-</script>
+
Index: lams_tool_forum/web/jsps/learning/message/topiceditform.jsp
===================================================================
diff -u -rbc8213e12c4e5afddd0394ad66386ef3e70d1611 -re8e86d379857a349822a501189888545e69e56ac
--- lams_tool_forum/web/jsps/learning/message/topiceditform.jsp	(.../topiceditform.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
+++ lams_tool_forum/web/jsps/learning/message/topiceditform.jsp	(.../topiceditform.jsp)	(revision e8e86d379857a349822a501189888545e69e56ac)
@@ -1,14 +1,20 @@
 <%@ include file="/common/taglibs.jsp"%>
 
 <div class="mb-3">
-    <label><fmt:message key="message.label.subject" />&nbsp;</label>
-    <form:input size="50" tabindex="1" value="${message.subject}" path="message.subject" maxlength="60"/> &nbsp;
-	<form:errors path="message.subject"/>
+    <label for="message.subject">
+    	<fmt:message key="message.label.subject" />&nbsp;
+    </label>
+    <form:input cssClass="form-control" value="${message.subject}" path="message.subject" maxlength="60"/> &nbsp;
+
 	<lams:errors path="message.subject"/>
 </div>
 
 <div class="mb-3">
-    <label><fmt:message key="message.label.body" />  *</label><BR/>
+    <label id="label-body">
+    	<fmt:message key="message.label.body" />  *
+    </label>
+    <BR/>
+    
 	<%@include file="bodyarea.jsp"%>
 </div>
 
@@ -22,10 +28,27 @@
 	<lams:WaitingSpinner id="itemAttachmentArea_Busy"/>
 </c:if>
 
+<c:if test="${sessionMap.allowAnonym}">
+	<div class="checkbox form-control-inline form-check form-check-reverse">
+		<form:checkbox path="message.isAnonymous" id="isAnonymous" cssClass="form-check-input"/> 
+				
+		<label for="isAnonymous" 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:if>
+
 <div class="btn-group-sm mt-2 float-end">
-	<button name="goback" id="cancelButton" onclick="javascript:cancelEdit();" class="btn btn-secondary">
+	<button type="button" name="goback" id="cancelButton" onclick="javascript:cancelEdit();" class="btn btn-secondary btn-icon-cancel">
 		<fmt:message key="button.cancel" />
 	</button>
 
-	<input type="submit" class="btn btn-secondary" id="submitButton" value="<fmt:message key="button.submit" />"/>
+	<button type="submit" class="btn btn-secondary" id="submitButton">
+		<i class="fa-solid fa-check me-1"></i>
+		<fmt:message key="button.submit" />
+	</button>
 </div>
Index: lams_tool_forum/web/jsps/learning/message/topicform.jsp
===================================================================
diff -u -rbc8213e12c4e5afddd0394ad66386ef3e70d1611 -re8e86d379857a349822a501189888545e69e56ac
--- lams_tool_forum/web/jsps/learning/message/topicform.jsp	(.../topicform.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
+++ lams_tool_forum/web/jsps/learning/message/topicform.jsp	(.../topicform.jsp)	(revision e8e86d379857a349822a501189888545e69e56ac)
@@ -1,35 +1,45 @@
 <%@ include file="/common/taglibs.jsp"%>
 
 <div class="mb-3">
-    <label><fmt:message key="message.label.subject" />&nbsp;</label>
-    <form:input size="50" tabindex="1" value="${message.subject}" path="message.subject" maxlength="60"/> &nbsp;
+    <label for="message.subject">
+    	<fmt:message key="message.label.subject" />
+    </label>
+    <form:input value="${message.subject}" path="message.subject" maxlength="60" cssClass="form-control"/>
     <lams:errors path="message.subject"/>
 </div>
 
 <div class="mb-3">
-    <label><fmt:message key="message.label.body" />  *</label><BR/>
+    <label id="label-body">
+    	<fmt:message key="message.label.body" />  *
+    </label>
+    <BR/>
+    
 	<%@include file="bodyarea.jsp"%>
 </div>
 
 <c:if test="${sessionMap.allowUpload}">
 	<div class="mb-3">
-		<input type="hidden" id="tmpFileUploadId" name="tmpFileUploadId"
-	   		value="${messageForm.tmpFileUploadId}" />
-		<label for="image-upload-area"><fmt:message key="message.label.attachment" /></label>
-		<div id="image-upload-area" class="mt-4"></div>
+		<input type="hidden" id="tmpFileUploadId" name="tmpFileUploadId" value="${messageForm.tmpFileUploadId}" />
+		<label for="uppy-upload-button">
+			<fmt:message key="message.label.attachment" />
+		</label>
+		<div id="image-upload-area"></div>
 		<script>
 			initFileUpload('${messageForm.tmpFileUploadId}', true, '<lams:user property="localeLanguage"/>');
 		</script>
-		<lams:errors path="message.attachments"/>
+		<lams:errors5 path="message.attachments"/>
 	</div>
 </c:if>
 
 <c:set var="backToForum">
 	<lams:WebAppURL />learning/viewForum.do?toolSessionID=${sessionMap.toolSessionID}&hideReflection=${sessionMap.hideReflection}
 </c:set>
-<input type="submit" value="<fmt:message key="button.submit" />" class="btn btn-primary mt-2 float-end" id="submitButton"/>
+<button type="submit" class="btn btn-primary mt-2 ms-2 float-end" id="submitButton">
+	<i class="fa-solid fa-check me-1"></i>
+	<fmt:message key="button.submit" />
+</button>
 
-<button name="goback" onclick="javascript:location.href='${backToForum}';" class="btn btn-secondary mt-2 float-end" id="cancelButton">
+<button type="button" name="goback" onclick="javascript:location.href='${backToForum}';" class="btn btn-secondary btn-icon-cancel mt-2 float-end" id="cancelButton">
 	<fmt:message key="button.cancel" />
-</button>&nbsp;
+</button>
 
Index: lams_tool_forum/web/jsps/learning/message/topiclist.jsp
===================================================================
diff -u -rbc8213e12c4e5afddd0394ad66386ef3e70d1611 -re8e86d379857a349822a501189888545e69e56ac
--- lams_tool_forum/web/jsps/learning/message/topiclist.jsp	(.../topiclist.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
+++ lams_tool_forum/web/jsps/learning/message/topiclist.jsp	(.../topiclist.jsp)	(revision e8e86d379857a349822a501189888545e69e56ac)
@@ -1,60 +1,57 @@
-<%@ page import="org.lamsfoundation.lams.tool.forum.ForumConstants"%>
 <%@ include file="/common/taglibs.jsp"%>
-
+<%@ page import="org.lamsfoundation.lams.tool.forum.ForumConstants"%>
 <c:set var="localeLanguage"><lams:user property="localeLanguage" /></c:set>
+<c:set var="pageSize" value="<%=ForumConstants.DEFAULT_PAGE_SIZE%>" />
+
 <script type="text/javascript" src="<lams:LAMSURL />/includes/javascript/jquery.timeago.js"></script>
 <script type="text/javascript" src="<lams:LAMSURL />/includes/javascript/timeagoi18n/jquery.timeago.${fn:toLowerCase(localeLanguage)}.js"></script>
+<script type="text/javascript">
+	jQuery(document).ready(function() {
+		jQuery("time.timeago").timeago();
+	});
+</script>
 
-<c:set var="pageSize" value="<%=ForumConstants.DEFAULT_PAGE_SIZE%>" />
-<div class="panel panel-default">
-	<div class="panel-heading panel-title">
+<div class="card lcard">
+	<div class="card-header">
 		<fmt:message key="label.topics" />
-
-		<div class="btn-group float-end">
-			<a href="javascript:location.href='${refresh}';" type="button" class="btn btn-sm btn-secondary"><i class="fa fa-xm fa-refresh"></i>
-				<fmt:message key="label.refresh" /></a>
-
-			<c:if test='${(not sessionMap.finishedLock) && (sessionMap.allowNewTopics)}'>
-				<a href="javascript:location.href='${newtopic}';" type="button" class="btn btn-sm btn-secondary"> <i
-					class="fa fa-xm fa-plus"></i> <fmt:message key="label.newtopic" /></a>
-			</c:if>
-		</div>
-
-
 	</div>
-	<div class="panel-body">
+	
+	<div class="card-body">
 		<div class="table-responsive">
-			<table id="topicTable" class="table table-hover table-sm">
-				<thead>
-					<tr>
-						<th class="col-6"><fmt:message key="lable.topic.title.subject" /></th>
-						<th class="col-2"><fmt:message key="lable.topic.title.startedby" /></th>
-						<th class="col-1 d-none d-sm-block"><fmt:message key="lable.topic.title.replies" /></th>
-						<th class="col-1 d-none d-sm-block"><fmt:message key="lable.topic.title.repliesnew" /></th>
-						<th class="col-2"><fmt:message key="lable.topic.title.update" /></th>
-						<c:if test="${not sessionMap.allowNewTopics and sessionMap.minimumReply ne 0}">
-							<th class="col-2">&nbsp;</th>
-						</c:if>
-					</tr>
-				</thead>
-				<tbody>
-					<c:forEach items="${topicList}" var="topic">
-						<tr>
-							<td><c:set var="viewtopic">
-									<lams:WebAppURL />learning/viewTopic.do?sessionMapID=${sessionMapID}&topicID=${topic.message.uid}&create=${topic.message.created.time}&hideReflection=${sessionMap.hideReflection}&pageLastId=0&size=${pageSize}
-								</c:set> <a href="${viewtopic}" id="topicTitle">
-									<c:choose>
-										<c:when test="${topic.newPostingsNum > 0}">
-											<b><c:out value="${topic.message.subject}" /></b>
-										</c:when>
-										<c:otherwise>
-											<c:out value="${topic.message.subject}" />
-										</c:otherwise>
-									</c:choose>
-								</a> <c:if test="${topic.hasAttachment}">
-									<i class="fa fa-paperclip ms-1" title="<fmt:message key='message.label.attachment'/>"></i>
-								</c:if></td>
-							<td><%-- Author Name --%>
+			<div id="topicTable" class="ltable table-hover">
+				<div class="row">
+					<div class="col-5 flex-fill"><fmt:message key="lable.topic.title.subject" /></div>
+					<div class="col-2"><fmt:message key="lable.topic.title.startedby" /></div>
+					<div class="col-1 d-none d-sm-block text-center"><fmt:message key="lable.topic.title.replies" /></div>
+					<div class="col-1 d-none d-sm-block text-center"><fmt:message key="lable.topic.title.repliesnew" /></div>
+					<div class="col-2"><fmt:message key="lable.topic.title.update" /></div>
+					<c:if test="${not sessionMap.allowNewTopics and sessionMap.minimumReply ne 0}">
+						<div class="col-1">&nbsp;</div>
+					</c:if>
+				</div>
+
+				<c:forEach items="${topicList}" var="topic">
+					<div class="row">
+						<div class="col-5 flex-fill">
+							<c:set var="viewtopic">
+								<lams:WebAppURL />learning/viewTopic.do?sessionMapID=${sessionMapID}&topicID=${topic.message.uid}&create=${topic.message.created.time}&hideReflection=${sessionMap.hideReflection}&pageLastId=0&size=${pageSize}
+							</c:set> 
+							<a href="${viewtopic}" id="topicTitle">
+								<c:choose>
+									<c:when test="${topic.newPostingsNum > 0}">
+										<b><c:out value="${topic.message.subject}" /></b>
+									</c:when>
+									<c:otherwise>
+										<c:out value="${topic.message.subject}" />
+									</c:otherwise>
+								</c:choose>
+							</a> 
+							<c:if test="${topic.hasAttachment}">
+								<i class="fa fa-paperclip ms-1" title="<fmt:message key='message.label.attachment'/>"></i>
+							</c:if>
+						</div>
+						
+						<div class="col-2"><%-- Author Name --%>
 							<c:set var="msgAuthor" value="${topic.author}" />
 							<c:set var="anonymous" value="${topic.message.isAnonymous}" />
 							<c:set var="hidden" value="${topic.message.hideFlag}" />
@@ -87,27 +84,29 @@
 							</c:otherwise>
 							</c:choose>
 							<c:out value="${author}" escapeXml="true" />
-							</td>
+						</div>
 
-							<td class="text-center d-none d-sm-block"><c:out value="${topic.message.replyNumber}" /></td>
+						<div class="col-1 text-center d-none d-sm-block">
+							<c:out value="${topic.message.replyNumber}" />
+						</div>
 
-							<td class="text-center d-none d-sm-block"><c:out value="${topic.newPostingsNum}" /></td>
-							
+						<div class="col-1 text-center d-none d-sm-block">
+							<c:out value="${topic.newPostingsNum}" />
+						</div>
+
+						<div class="col-2">
 							<c:set var="displayDate" value="${topic.message.updated > topic.message.lastReplyDate ? topic.message.updated : topic.message.lastReplyDate}"/>
-							<td><lams:Date value="${displayDate}" timeago="true"/></td>
-							<c:if test="${not sessionMap.allowNewTopics and sessionMap.minimumReply ne 0}">
-								<td>${topic.numOfPosts}/${sessionMap.minimumReply}</td>
-							</c:if>
-						</tr>
-					</c:forEach>
-				</tbody>
-			</table>
+							<lams:Date value="${displayDate}" timeago="true"/>
+						</div>
+						
+						<c:if test="${not sessionMap.allowNewTopics and sessionMap.minimumReply ne 0}">
+							<div class="col-1">
+								${topic.numOfPosts}/${sessionMap.minimumReply}
+							</div>
+						</c:if>
+					</div>
+				</c:forEach>
+			</div>
 		</div>
 	</div>
 </div>
-
-<script type="text/javascript">
-	jQuery(document).ready(function() {
-		jQuery("time.timeago").timeago();
-	});
-</script>
Index: lams_tool_forum/web/jsps/learning/message/topicreplyform.jsp
===================================================================
diff -u -rbc8213e12c4e5afddd0394ad66386ef3e70d1611 -re8e86d379857a349822a501189888545e69e56ac
--- lams_tool_forum/web/jsps/learning/message/topicreplyform.jsp	(.../topicreplyform.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
+++ lams_tool_forum/web/jsps/learning/message/topicreplyform.jsp	(.../topicreplyform.jsp)	(revision e8e86d379857a349822a501189888545e69e56ac)
@@ -1,22 +1,30 @@
 <%@ include file="/common/taglibs.jsp"%>
 
 <div class="mb-3">
-	<label><fmt:message key="message.label.subject" />&nbsp;</label>&nbsp;
-	<form:input cssClass="form-control" tabindex="1" path="message.subject" value="${message.subject}" maxlength="60" />
-	&nbsp;
+	<label for="message.subject">
+		<fmt:message key="message.label.subject" />
+	</label>
+	<form:input cssClass="form-control" path="message.subject" value="${message.subject}" maxlength="60" />
+
 	<lams:errors path="message.subject"/>
 </div>
+
 <div class="mb-3">
-	<label><fmt:message key="message.label.body" /> *</label><BR />
+	<label id="label-body">
+		<fmt:message key="message.label.body" /> *
+	</label>
+	<BR />
+	
 	<%@include file="bodyarea.jsp"%>
 </div>
-<c:if test="${sessionMap.allowUpload}">
 
+<c:if test="${sessionMap.allowUpload}">
 	<div class="mb-3">
-		<input type="hidden" id="tmpFileUploadId" name="tmpFileUploadId"
-	   		value="${messageForm.tmpFileUploadId}" />
-		<label for="image-upload-area"><fmt:message key="message.label.attachment" /></label>
-		<div id="image-upload-area" class="mt-4"></div>
+		<input type="hidden" id="tmpFileUploadId" name="tmpFileUploadId" value="${messageForm.tmpFileUploadId}" />
+		<label for="uppy-upload-button">
+			<fmt:message key="message.label.attachment" />
+		</label>
+		<div id="image-upload-area"></div>
 		<script>
 			initFileUpload('${messageForm.tmpFileUploadId}', true, '<lams:user property="localeLanguage"/>');
 		</script>
@@ -26,10 +34,27 @@
 	<lams:WaitingSpinner id="itemAttachmentArea_Busy"/>
 </c:if>
 
+<c:if test="${sessionMap.allowAnonym}">
+	<div class="checkbox form-control-inline form-check form-check-reverse">
+		<form:checkbox path="message.isAnonymous" id="isAnonymous" cssClass="form-check-input"/> 
+				
+		<label for="isAnonymous" 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:if>
+
 <div class="btn-group-sm mt-2 float-end">
-	<button name="goback" id="cancelButton" onclick="javascript:cancelReply();"
-		class="btn btn-secondary me-2">
+	<button name="goback" id="cancelButton" onclick="javascript:cancelReply();" class="btn btn-secondary btn-icon-cancel me-2">
 		<fmt:message key="button.cancel" />
 	</button>
-	<input type="submit" class="btn btn-secondary" id="submitButton" value="<fmt:message key="button.submit" />"/>
+	
+	<button type="submit" class="btn btn-secondary" id="submitButton">
+		<i class="fa-solid fa-check me-1"></i>
+		<fmt:message key="button.submit" />
+	</button>
 </div>
Index: lams_tool_forum/web/jsps/learning/message/topicview.jsp
===================================================================
diff -u -rbc8213e12c4e5afddd0394ad66386ef3e70d1611 -re8e86d379857a349822a501189888545e69e56ac
--- lams_tool_forum/web/jsps/learning/message/topicview.jsp	(.../topicview.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
+++ lams_tool_forum/web/jsps/learning/message/topicview.jsp	(.../topicview.jsp)	(revision e8e86d379857a349822a501189888545e69e56ac)
@@ -1,25 +1,13 @@
-<%@ page import="org.lamsfoundation.lams.tool.forum.ForumConstants"%>
 <%@ include file="/common/taglibs.jsp"%>
-
-<c:set var="localeLanguage"><lams:user property="localeLanguage" /></c:set>
-<script type="text/javascript" src="<lams:LAMSURL />/includes/javascript/jquery.timeago.js"></script>
-<script type="text/javascript" src="<lams:LAMSURL />/includes/javascript/timeagoi18n/jquery.timeago.${fn:toLowerCase(localeLanguage)}.js"></script>
-
+<%@ page import="org.lamsfoundation.lams.tool.forum.ForumConstants"%>
 <c:set var="maxThreadUid" value="0" />
 <c:set var="messageTablename" value="" />
-<c:set var="indent" value="10" />
-
-<c:set var="show">
-	<fmt:message key="label.show.replies" />
-</c:set>
-<c:set var="hide">
-	<fmt:message key="label.hide.replies" />
-</c:set>
-<c:set var="prompt">
-	<fmt:message key="label.showhide.prompt" />
-</c:set>
+<c:set var="indent" value="20" />
+<c:set var="show"><fmt:message key="label.show.replies" /></c:set>
+<c:set var="hide"><fmt:message key="label.hide.replies" /></c:set>
+<c:set var="prompt"><fmt:message key="label.showhide.prompt" /></c:set>
 <c:set var="tableCommand">expandable:true,initialState:'expanded',
-	expanderTemplate:'<a href=\"#\"><span style="margin-left:20px">${prompt}</span></a>',
+	expanderTemplate:'<button type="butotn" class="btn btn-sm btn-light py-0 mb-2 ms-2"><span style="margin-left:20px">${prompt}</span></button>',
 	stringCollapse:'${hide}',stringExpand:'${show}',
 	clickableNodeNames:true,indent:${indent},
 	onNodeInitialized:function() {
@@ -29,20 +17,10 @@
 	}
  </c:set>
 
+<c:set var="localeLanguage"><lams:user property="localeLanguage" /></c:set>
+<script type="text/javascript" src="<lams:LAMSURL />/includes/javascript/jquery.timeago.js"></script>
+<script type="text/javascript" src="<lams:LAMSURL />/includes/javascript/timeagoi18n/jquery.timeago.${fn:toLowerCase(localeLanguage)}.js"></script>
 <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();
-	});
-	$(".msg-footer").click(function (e) {
-    	e.stopPropagation();
-	});
-	$(".attachments").click(function (e) {
-    	e.stopPropagation();
-	});
-
 	function createReply(messageUid, url, level) {
 		if ( document.getElementById('reply') ) {
 			alert('<fmt:message key="message.complete.or.cancel.reply"/>');
@@ -69,6 +47,9 @@
 		}
 	}
 	
+	jQuery(document).ready(function() {
+		jQuery("time.timeago").timeago();
+	});
 </script>
 
 	<c:forEach var="msgDto" items="${topicThread}">
@@ -111,7 +92,6 @@
 		<c:if test='${(msgLevel >= 1)}'>
 					</td></tr>
 		</c:if>
-	
 	</c:forEach>
 	
 	<c:if test='${messageTablename != ""}'>	
@@ -121,12 +101,6 @@
 		</script>	
 		</div>
 	</c:if>
-
-	<script type="text/javascript">
-		jQuery(document).ready(function() {
-			jQuery("time.timeago").timeago();
-		});
-	</script>
 	
 	<c:set var="pageSize" value="<%=ForumConstants.DEFAULT_PAGE_SIZE%>" />
 	<c:if test='${maxThreadUid > 0 && ! noMorePages}'>
Index: lams_tool_forum/web/jsps/learning/message/topicviewwrapper.jsp
===================================================================
diff -u -r7475d08afc280b5e2e5ddf04e8bf35e3166aaf80 -re8e86d379857a349822a501189888545e69e56ac
--- lams_tool_forum/web/jsps/learning/message/topicviewwrapper.jsp	(.../topicviewwrapper.jsp)	(revision 7475d08afc280b5e2e5ddf04e8bf35e3166aaf80)
+++ lams_tool_forum/web/jsps/learning/message/topicviewwrapper.jsp	(.../topicviewwrapper.jsp)	(revision e8e86d379857a349822a501189888545e69e56ac)
@@ -1,17 +1,11 @@
 <!DOCTYPE html>
-
-<!-- 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. -->
-
 <%@ include file="/common/taglibs.jsp"%>
-<c:set var="lams">
-	<lams:LAMSURL />
-</c:set>
-<c:set var="tool">
-	<lams:WebAppURL />
-</c:set>
+<c:set var="lams"><lams:LAMSURL /></c:set>
+<c:set var="tool"><lams:WebAppURL /></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. -->
 <%@ include file="topicview.jsp"%>
 
 
Index: lams_tool_forum/web/jsps/learning/notebook.jsp
===================================================================
diff -u -r94b2225ee897f0a10318b17e1c692f2ccbb1e36b -re8e86d379857a349822a501189888545e69e56ac
--- lams_tool_forum/web/jsps/learning/notebook.jsp	(.../notebook.jsp)	(revision 94b2225ee897f0a10318b17e1c692f2ccbb1e36b)
+++ lams_tool_forum/web/jsps/learning/notebook.jsp	(.../notebook.jsp)	(revision e8e86d379857a349822a501189888545e69e56ac)
@@ -1,100 +1,12 @@
 <!DOCTYPE html>
 <%@ include file="/common/taglibs.jsp"%>
-<%@ page import="org.lamsfoundation.lams.util.Configuration" %>
-<%@ page import="org.lamsfoundation.lams.util.ConfigurationKeys" %>
-<c:set var="UPLOAD_FILE_MAX_SIZE"><%=Configuration.get(ConfigurationKeys.UPLOAD_FILE_MAX_SIZE)%></c:set>
-<c:set var="EXE_FILE_TYPES"><%=Configuration.get(ConfigurationKeys.EXE_EXTENSIONS)%></c:set>
-<c:set var="lams"><lams:LAMSURL /></c:set>
-<c:set var="tool"><lams:WebAppURL /></c:set>
-<c:set var="ctxPath" value="${pageContext.request.contextPath}" scope="request" />
 <c:set var="sessionMapID" value="${param.sessionMapID}" />
 <c:set var="sessionMap" value="${sessionScope[sessionMapID]}" />
-		
-<lams:html>
-	<lams:head>
-		<title><fmt:message key="activity.title" /></title>
 
-		<!-- ********************  CSS ********************** -->
-
-		<lams:css />
-		<style media="screen,projection" type="text/css">
-			.info {
-				margin: 10px;
-			}
-		</style>
-		
-		<!-- ********************  javascript ********************** -->
-		<lams:JSImport src="includes/javascript/common.js" />
-		<script type="text/javascript" src="${lams}includes/javascript/tabcontroller.js"></script>
-		<script type="text/javascript" src="${lams}includes/javascript/jquery.js"></script>
-		<script type="text/javascript" src="${lams}includes/javascript/jquery-ui.js"></script>
-		<script type="text/javascript" src="${lams}includes/javascript/jquery.jRating.js"></script>
-		<script type="text/javascript" src="${lams}includes/javascript/jquery.treetable.js"></script>
-		<script type="text/javascript" src="${lams}includes/javascript/bootstrap.min.js"></script>		
-		<script type="text/javascript" src="${lams}includes/javascript/jquery.jscroll.js"></script>
-		<lams:JSImport src="includes/javascript/upload.js" />
-		<lams:JSImport src="learning/includes/javascript/gate-check.js" />
-	
-		<script type="text/javascript">
-			var removeItemAttachmentUrl = "<lams:WebAppURL />learning/deleteAttachment.do";
-			var warning = '<fmt:message key="warn.minimum.number.characters" />';
-			var LABEL_MAX_FILE_SIZE = '<fmt:message key="errors.maxfilesize"><param>{0}</param></fmt:message>';
-			var LABEL_NOT_ALLOWED_FORMAT = '<fmt:message key="error.attachment.executable"/>';	
-			var EXE_FILE_TYPES = '${EXE_FILE_TYPES}';
-			var UPLOAD_FILE_MAX_SIZE = '${UPLOAD_FILE_MAX_SIZE}';
-
-			checkNextGateActivity('finishButton', '${sessionMap.toolSessionID}', '', submitForm);
-
-			function disableFinishButton() {
-				document.getElementById("finishButton").disabled = true;
-			}
-			function submitForm(){
-		    	var f = document.getElementById('reflectionForm');
-				f.submit();
-		    }
-		</script>
-		<script type="text/javascript" src="${tool}includes/javascript/learner.js"></script>	
-		
-	</lams:head>
-	
-	<body class="stripes">
-		<form:form action="submitReflection.do" method="post"
-			onsubmit="disableFinishButton();" modelAttribute="reflectionForm" id="reflectionForm">
-			<form:hidden path="userID" />
-			<form:hidden path="sessionMapID" />
-		
-			<lams:Page type="learner" title="${sessionMap.title}" formID="reflectionForm">
-		
-				<lams:errors/>
-		
-				<p>
-					<lams:out value="${sessionMap.reflectInstructions}" escapeHtml="true" />
-				</p>
-		
-				<textarea id="focused" rows="5" name="entryText" class="form-control">${reflectionForm.entryText}</textarea>
-		
-				<div class="activity-bottom-buttons">
-					<a  href="#nogo" class="btn btn-primary na" id="finishButton">
-						<span class="nextActivity">
-							<c:choose>
-			 					<c:when test="${sessionMap.isLastActivity}">
-			 						<fmt:message key="label.submit" />
-			 					</c:when>
-			 					<c:otherwise>
-			 		 				<fmt:message key="label.finish" />
-			 					</c:otherwise>
-			 				</c:choose>
-			 			</span>
-					</a>
-				</div>
-		
-			</lams:Page>
-		</form:form>
-		
-		<script type="text/javascript">
-			window.onload = function() {
-				document.getElementById("focused").focus();
-			}
-		</script>
-	</body>
-</lams:html>
\ No newline at end of file
+<lams:Notebook title="${sessionMap.title}"
+	toolSessionID="${sessionMap.toolSessionID}"
+	instructions="${sessionMap.reflectInstructions}"
+	isNextActivityButtonSupported="true"
+	isLastActivity="${sessionMap.isLastActivity}"
+	nextActivityButtonLabelKey="label.finish"
+	notebookLabelKey="title.reflection"/>
Index: lams_tool_forum/web/jsps/learning/ratingStars.jsp
===================================================================
diff -u -r7475d08afc280b5e2e5ddf04e8bf35e3166aaf80 -re8e86d379857a349822a501189888545e69e56ac
--- lams_tool_forum/web/jsps/learning/ratingStars.jsp	(.../ratingStars.jsp)	(revision 7475d08afc280b5e2e5ddf04e8bf35e3166aaf80)
+++ lams_tool_forum/web/jsps/learning/ratingStars.jsp	(.../ratingStars.jsp)	(revision e8e86d379857a349822a501189888545e69e56ac)
@@ -14,7 +14,6 @@
 		<div class="${ratingStarsClass} rating-stars-new" data-average="${msgDto.averageRating}" data-id="${messageId}"></div>
 		
 		<div class="rating-stars-caption">
-		
 			<fmt:message key="label.learning.number.of.votes" >
 				<fmt:param>
 					<span id="averageRating${messageId}">
@@ -25,7 +24,6 @@
 					<span id="numberOfVotes${messageId}">${msgDto.numberOfVotes}</span>
 				</fmt:param>
 			</fmt:message>
-			
 		</div>
 	</div>
 </c:if>
\ No newline at end of file
Index: lams_tool_forum/web/jsps/learning/reply.jsp
===================================================================
diff -u -r994d5bec48c15103f6659201a83e5f5a9aca657d -re8e86d379857a349822a501189888545e69e56ac
--- lams_tool_forum/web/jsps/learning/reply.jsp	(.../reply.jsp)	(revision 994d5bec48c15103f6659201a83e5f5a9aca657d)
+++ lams_tool_forum/web/jsps/learning/reply.jsp	(.../reply.jsp)	(revision e8e86d379857a349822a501189888545e69e56ac)
@@ -10,70 +10,50 @@
 <c:set var="tool"><lams:WebAppURL /></c:set>
 <c:set var="ctxPath" value="${pageContext.request.contextPath}" scope="request" />
 <c:set var="language"><lams:user property="localeLanguage"/></c:set>
+<c:set var="sessionMapID" value="${messageForm.sessionMapID}"/>
+<c:set var="sessionMap" value="${sessionScope[sessionMapID]}"/>
+<c:set var="originalMessage" value="${sessionMap.originalMessage}"/>
 
-<lams:html>
-	<lams:head>
-		<title><fmt:message key="activity.title" /></title>
-
-		<!-- ********************  CSS ********************** -->
-
-		<lams:css />
-		<link href="${lams}css/uppy.min.css" rel="stylesheet" type="text/css" />
-		<link href="${lams}css/uppy.custom.css" rel="stylesheet" type="text/css" />
-		<style media="screen,projection" type="text/css">
-			.info {
-				margin: 10px;
-			}
-		</style>
+<!-- ********************  CSS ********************** -->
+<link href="${lams}css/uppy.min.css" rel="stylesheet" type="text/css" />
+<link href="${lams}css/uppy.custom.css" rel="stylesheet" type="text/css" />
 		
-		<!-- ********************  javascript ********************** -->
-		<lams:JSImport src="includes/javascript/common.js" />
-		<script type="text/javascript" src="${lams}includes/javascript/tabcontroller.js"></script>
-		<script type="text/javascript" src="${lams}includes/javascript/jquery.js"></script>
-		<script type="text/javascript" src="${lams}includes/javascript/jquery-ui.js"></script>
-		<script type="text/javascript" src="${lams}includes/javascript/jquery.jRating.js"></script>
-		<script type="text/javascript" src="${lams}includes/javascript/jquery.treetable.js"></script>
-		<script type="text/javascript" src="${lams}includes/javascript/bootstrap.min.js"></script>		
-		<script type="text/javascript" src="${lams}includes/javascript/jquery.jscroll.js"></script>
-		<lams:JSImport src="includes/javascript/upload.js" />
-						
-		<script type="text/javascript" src="${lams}includes/javascript/uppy/uppy.min.js"></script>
-		<c:choose>
-			<c:when test="${language eq 'es'}">
-				<script type="text/javascript" src="${lams}includes/javascript/uppy/es_ES.min.js"></script>
-			</c:when>
-			<c:when test="${language eq 'fr'}">
-				<script type="text/javascript" src="${lams}includes/javascript/uppy/fr_FR.min.js"></script>
-			</c:when>
-			<c:when test="${language eq 'el'}">
-				<script type="text/javascript" src="${lams}includes/javascript/uppy/el_GR.min.js"></script>
-			</c:when>
-		</c:choose>
-		
-		<script type="text/javascript">
-			var removeItemAttachmentUrl = "<lams:WebAppURL />learning/deleteAttachment.do";
-			var warning = '<fmt:message key="warn.minimum.number.characters" />';
-			var LABEL_MAX_FILE_SIZE = '<fmt:message key="errors.maxfilesize"><param>{0}</param></fmt:message>';
-			var LABEL_NOT_ALLOWED_FORMAT = '<fmt:message key="error.attachment.executable"/>';	
+<!-- ********************  javascript ********************** -->
+<lams:JSImport src="includes/javascript/common.js" />
+<script type="text/javascript" src="${lams}includes/javascript/tabcontroller.js"></script>
+<script type="text/javascript" src="${lams}includes/javascript/jquery.jRating.js"></script>
+<script type="text/javascript" src="${lams}includes/javascript/jquery.treetable.js"></script>
+<script type="text/javascript" src="${lams}includes/javascript/jquery.jscroll.js"></script>
+<lams:JSImport src="includes/javascript/upload.js" />	
+<script type="text/javascript" src="${lams}includes/javascript/uppy/uppy.min.js"></script>
+<c:choose>
+	<c:when test="${language eq 'es'}">
+		<script type="text/javascript" src="${lams}includes/javascript/uppy/es_ES.min.js"></script>
+	</c:when>
+	<c:when test="${language eq 'fr'}">
+		<script type="text/javascript" src="${lams}includes/javascript/uppy/fr_FR.min.js"></script>
+	</c:when>
+	<c:when test="${language eq 'el'}">
+		<script type="text/javascript" src="${lams}includes/javascript/uppy/el_GR.min.js"></script>
+	</c:when>
+</c:choose>
+<script type="text/javascript">
+	var removeItemAttachmentUrl = "<lams:WebAppURL />learning/deleteAttachment.do";
+	var warning = '<fmt:message key="warn.minimum.number.characters" />';
+	var LABEL_MAX_FILE_SIZE = '<fmt:message key="errors.maxfilesize"><param>{0}</param></fmt:message>';
+	var LABEL_NOT_ALLOWED_FORMAT = '<fmt:message key="error.attachment.executable"/>';	
 			
-   			var LAMS_URL = '${lams}',
-   		 		UPLOAD_FILE_MAX_SIZE = '<c:out value="${UPLOAD_FILE_MAX_SIZE}"/>',
-   		 		UPLOAD_FILE_LARGE_MAX_SIZE = '<c:out value="${UPLOAD_FILE_LARGE_MAX_SIZE}"/>';
-   				// convert Java syntax to JSON
-   		       EXE_FILE_TYPES = JSON.parse("[" + "${EXE_FILE_TYPES}".replace(/\.\w+/g, '"$&"') + "]"),
-   			   decoderDiv = $('<div />'),
-   		       <fmt:message key="error.attachment.executable" var="EXE_FILE_ERROR_VAR" />
-   		       EXE_FILE_ERROR = decoderDiv.html('<c:out value="${EXE_FILE_ERROR_VAR}" />').text();
-
-		</script>
-		<script type="text/javascript" src="${tool}includes/javascript/learner.js"></script>	
-		
-	</lams:head>
-	
-	<body class="stripes">
-		<lams:JSImport src="includes/javascript/message.js" relative="true" />
-
-		<script type="text/javascript">
+	var UPLOAD_FILE_MAX_SIZE = '<c:out value="${UPLOAD_FILE_MAX_SIZE}"/>',
+		UPLOAD_FILE_LARGE_MAX_SIZE = '<c:out value="${UPLOAD_FILE_LARGE_MAX_SIZE}"/>',
+		// convert Java syntax to JSON
+	    EXE_FILE_TYPES = JSON.parse("[" + "${EXE_FILE_TYPES}".replace(/\.\w+/g, '"$&"') + "]"),
+		<fmt:message key="error.attachment.executable" var="EXE_FILE_ERROR_VAR" />
+		EXE_FILE_ERROR = $('<div />').html('<c:out value="${EXE_FILE_ERROR_VAR}" />').text();
+</script>
+<script type="text/javascript" src="${tool}includes/javascript/learner.js"></script>	
+<lams:JSImport src="includes/javascript/message.js" relative="true" />
+<script type="text/javascript">
+	jQuery(document).ready(function() {
 			// 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. 
 			$("#messageForm").click(function (e) {
@@ -152,33 +132,24 @@
 				}
 				return false;
 			});
-		
-			function cancelReply() {
-				$('#reply').remove();
-			}
-			
-		</script>
-		
-		<form:form action="replyTopic.do" focus="message.body" enctype="multipart/form-data" modelAttribute="messageForm" id="messageForm" >
+	});
 				
-			<c:set var="sessionMapID" value="${messageForm.sessionMapID}"/>
-			<c:set var="sessionMap" value="${sessionScope[sessionMapID]}"/>
-			<c:set var="originalMessage" value="${sessionMap.originalMessage}"/>
+	function cancelReply() {
+		$('#reply').remove();
+	}
+</script>
 		
-			<form:hidden path="sessionMapID"/>
+<form:form action="replyTopic.do" focus="message.body" enctype="multipart/form-data" modelAttribute="messageForm" id="messageForm" >
+	<form:hidden path="sessionMapID"/>
 			
-			<div class="container-fluid">
-			<div class="panel panel-default">
-				<div class="panel-heading panel-title">
-					<fmt:message key="title.message.reply" />
-				</div>
-		 		<div class="panel-body">
-					<lams:errors/>
-					<%@ include file="/jsps/learning/message/topicreplyform.jsp"%>
-				</div> 
-			</div>
-			</div>
-		</form:form>
-
-	</body>
-</lams:html>
\ No newline at end of file
+	<div class="card m-2">
+		<div class="card-header">
+			<fmt:message key="title.message.reply" />
+		</div>
+				
+ 		<div class="card-body">
+			<lams:errors5/>
+			<%@ include file="/jsps/learning/message/topicreplyform.jsp"%>
+		</div> 
+	</div>
+</form:form>
Index: lams_tool_forum/web/jsps/learning/viewforum.jsp
===================================================================
diff -u -rbc8213e12c4e5afddd0394ad66386ef3e70d1611 -re8e86d379857a349822a501189888545e69e56ac
--- lams_tool_forum/web/jsps/learning/viewforum.jsp	(.../viewforum.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
+++ lams_tool_forum/web/jsps/learning/viewforum.jsp	(.../viewforum.jsp)	(revision e8e86d379857a349822a501189888545e69e56ac)
@@ -21,207 +21,170 @@
 	<lams:WebAppURL />learning/viewForum.do?mode=${sessionMap.mode}&toolSessionID=${sessionMap.toolSessionID}&sessionMapID=${sessionMapID}&hideReflection=${sessionMap.hideReflection}
 </c:set>
 
-<lams:html>
-	<lams:head>
-		<title><fmt:message key="activity.title" /></title>
-
-		<!-- ********************  CSS ********************** -->
-
-		<lams:css />
-		<style media="screen,projection" type="text/css">
-			.info {
-				margin: 10px;
-			}
-		</style>
+<lams:PageLearner title="${sessionMap.title}" toolSessionID="${sessionMap.toolSessionID}">
 		
-		<!-- ********************  javascript ********************** -->
-		<lams:JSImport src="includes/javascript/common.js" />
-		<script type="text/javascript" src="${lams}includes/javascript/tabcontroller.js"></script>
-		<script type="text/javascript" src="${lams}includes/javascript/jquery.js"></script>
-		<script type="text/javascript" src="${lams}includes/javascript/jquery-ui.js"></script>
-		<script type="text/javascript" src="${lams}includes/javascript/jquery.jRating.js"></script>
-		<script type="text/javascript" src="${lams}includes/javascript/jquery.treetable.js"></script>
-		<script type="text/javascript" src="${lams}includes/javascript/bootstrap.min.js"></script>		
-		<script type="text/javascript" src="${lams}includes/javascript/jquery.jscroll.js"></script>
-		<lams:JSImport src="includes/javascript/upload.js" />
-		<lams:JSImport src="learning/includes/javascript/gate-check.js" />
-		
-		<script type="text/javascript">
-			var removeItemAttachmentUrl = "<lams:WebAppURL />learning/deleteAttachment.do";
-			var warning = '<fmt:message key="warn.minimum.number.characters" />';
-			var LABEL_MAX_FILE_SIZE = '<fmt:message key="errors.maxfilesize"><param>{0}</param></fmt:message>';
-			var LABEL_NOT_ALLOWED_FORMAT = '<fmt:message key="error.attachment.executable"/>';	
-			var EXE_FILE_TYPES = '${EXE_FILE_TYPES}';
-			var UPLOAD_FILE_MAX_SIZE = '${UPLOAD_FILE_MAX_SIZE}';
+	<!-- ********************  javascript ********************** -->
+	<lams:JSImport src="includes/javascript/common.js" />
+	<script type="text/javascript" src="${lams}includes/javascript/tabcontroller.js"></script>
+	<script type="text/javascript" src="${lams}includes/javascript/jquery.jRating.js"></script>
+	<script type="text/javascript" src="${lams}includes/javascript/jquery.treetable.js"></script>
+	<script type="text/javascript" src="${lams}includes/javascript/jquery.jscroll.js"></script>
+	<lams:JSImport src="includes/javascript/upload.js" />	
+	<script type="text/javascript">
+		var removeItemAttachmentUrl = "<lams:WebAppURL />learning/deleteAttachment.do";
+		var warning = '<fmt:message key="warn.minimum.number.characters" />';
+		var LABEL_MAX_FILE_SIZE = '<fmt:message key="errors.maxfilesize"><param>{0}</param></fmt:message>';
+		var LABEL_NOT_ALLOWED_FORMAT = '<fmt:message key="error.attachment.executable"/>';	
+		var EXE_FILE_TYPES = '${EXE_FILE_TYPES}';
+		var UPLOAD_FILE_MAX_SIZE = '${UPLOAD_FILE_MAX_SIZE}';
 
-			checkNextGateActivity('finishButton', '${sessionMap.toolSessionID}', '', submitFinish);
+		checkNextGateActivity('finishButton', '${sessionMap.toolSessionID}', '', submitFinish);
 
-			function submitFinish() {
-				location.href = '${finish}';
-			}
-		</script>
-		<script type="text/javascript" src="${tool}includes/javascript/learner.js"></script>	
+		function submitFinish() {
+			location.href = '${finish}';
+		}
+		function continueReflect() {
+			location.href='${continue}';
+		}
+	</script>
+	<script type="text/javascript" src="${tool}includes/javascript/learner.js"></script>	
 		
-	</lams:head>
-	
-	<body class="stripes">
-
-		<lams:Page type="learner" title="${sessionMap.title}">
+	<div id="container-main">
+		<div id="instructions" class="instructions">
+			<c:out value="${sessionMap.instruction}" escapeXml="false" />
+		</div>
 		
-			<div class="panel">
-				<c:out value="${sessionMap.instruction}" escapeXml="false" />
-			</div>
+		<!-- Announcements and advanced settings -->
+		<c:if test="${not empty sessionMap.submissionDeadline}">
+			<lams:Alert5 id="submissionDeadline" type="info" close="true">
+				<fmt:message key="authoring.info.teacher.set.restriction" >
+					<fmt:param><lams:Date value="${sessionMap.submissionDeadline}" /></fmt:param>
+				</fmt:message>
+			</lams:Alert5>
+		</c:if>
 		
-			<!-- Announcements and advanced settings -->
-			<c:if test="${not empty sessionMap.submissionDeadline}">
-				<lams:Alert id="submissionDeadline" type="info" close="true">
-					<fmt:message key="authoring.info.teacher.set.restriction" >
-						<fmt:param><lams:Date value="${sessionMap.submissionDeadline}" /></fmt:param>
-					</fmt:message>
-				</lams:Alert>
-			</c:if>
-		
-			<c:if test="${sessionMap.mode == 'author' || sessionMap.mode == 'learner'}">
-				<c:if test="${sessionMap.lockedWhenFinished}">
-					<lams:Alert id="lockWhenFinished" type="info" close="true">
-						<c:choose>
+		<c:if test="${sessionMap.mode == 'author' || sessionMap.mode == 'learner'}">
+			<c:if test="${sessionMap.lockedWhenFinished}">
+				<lams:Alert5 id="lockWhenFinished" type="info" close="true">
+					<c:choose>
 						<c:when test="${sessionMap.finishedLock}">
 							<fmt:message key="label.responses.locked.reminder" />
 						</c:when>
 						<c:otherwise>
 							<fmt:message key="label.responses.locked" />
 						</c:otherwise>
-						</c:choose>
-					</lams:Alert>
-				</c:if>
+					</c:choose>
+				</lams:Alert5>
+			</c:if>
 		
-				<c:if test="${not sessionMap.allowNewTopics and ( sessionMap.minimumReply ne 0 or sessionMap.maximumReply ne 0)}">
-					<lams:Alert id="postingLimits" type="info" close="true">
-						<c:if test="${(sessionMap.minimumReply ne 0 and sessionMap.maximumReply ne 0)}">
-								<fmt:message key="label.postingLimits.forum.reminder">
-									<fmt:param value="${sessionMap.minimumReply}"/>
-									<fmt:param value="${sessionMap.maximumReply}"/>
-								</fmt:message>
-						</c:if>
-						<c:if test="${(sessionMap.minimumReply ne 0 and sessionMap.maximumReply eq 0)}">
+			<c:if test="${not sessionMap.allowNewTopics and ( sessionMap.minimumReply ne 0 or sessionMap.maximumReply ne 0)}">
+				<lams:Alert5 id="postingLimits" type="info" close="true">
+					<c:choose>
+						<c:when test="${sessionMap.minimumReply ne 0 and sessionMap.maximumReply ne 0}">
+							<fmt:message key="label.postingLimits.forum.reminder">
+								<fmt:param value="${sessionMap.minimumReply}"/>
+								<fmt:param value="${sessionMap.maximumReply}"/>
+							</fmt:message>
+						</c:when>
+						<c:when test="${sessionMap.minimumReply ne 0}">
 							<fmt:message key="label.postingLimits.forum.reminder.min">
 								<fmt:param value="${sessionMap.minimumReply}"/>
 							</fmt:message>
-						</c:if>			
-						<c:if test="${(sessionMap.minimumReply eq 0 and sessionMap.maximumReply ne 0)}">
+						</c:when>			
+						<c:when test="${sessionMap.maximumReply ne 0}">
 							<fmt:message key="label.postingLimits.forum.reminder.max">
 								<fmt:param value="${sessionMap.maximumReply}"/>
 							</fmt:message>
-						</c:if>
-					</lams:Alert>
-				</c:if>
+						</c:when>
+					</c:choose>
+				</lams:Alert5>
+			</c:if>
 				
-				<!-- Rating announcements -->
-				<c:if test="${sessionMap.allowRateMessages}">
-					<lams:Alert id="rateMessages" type="info" close="true">
-						<c:choose>
-							<c:when test="${sessionMap.minimumRate ne 0 and sessionMap.maximumRate ne 0}">
-								<fmt:message key="label.rateLimits.forum.reminder">
-									<fmt:param value="${sessionMap.minimumRate}"/>
-									<fmt:param value="${sessionMap.maximumRate}"/>
-								</fmt:message>						
-								<br>
-							</c:when>
+			<!-- Rating announcements -->
+			<c:if test="${sessionMap.allowRateMessages && (sessionMap.minimumRate ne 0 || sessionMap.maximumRate ne 0)}">
+				<lams:Alert5 id="rateMessages" type="info" close="true">
+					<c:choose>
+						<c:when test="${sessionMap.minimumRate ne 0 and sessionMap.maximumRate ne 0}">
+							<fmt:message key="label.rateLimits.forum.reminder">
+								<fmt:param value="${sessionMap.minimumRate}"/>
+								<fmt:param value="${sessionMap.maximumRate}"/>
+							</fmt:message>						
+							<br>
+						</c:when>
 							
-							<c:when test="${sessionMap.minimumRate ne 0 and sessionMap.maximumRate eq 0}">
-								<fmt:message key="label.rateLimits.forum.reminder.min">
-									<fmt:param value="${sessionMap.minimumRate}"/>
-								</fmt:message>					
-								<br>
-							</c:when>
+						<c:when test="${sessionMap.minimumRate ne 0}">
+							<fmt:message key="label.rateLimits.forum.reminder.min">
+								<fmt:param value="${sessionMap.minimumRate}"/>
+							</fmt:message>					
+							<br>
+						</c:when>
 							
-							<c:when test="${sessionMap.minimumRate eq 0 and sessionMap.maximumRate ne 0}">
-								<fmt:message key="label.rateLimits.forum.reminder.max">
-									<fmt:param value="${sessionMap.maximumRate}"/>
-								</fmt:message>					
-								<br>
-							</c:when>				
-						</c:choose>
+						<c:when test="${sessionMap.maximumRate ne 0}">
+							<fmt:message key="label.rateLimits.forum.reminder.max">
+								<fmt:param value="${sessionMap.maximumRate}"/>
+							</fmt:message>					
+							<br>
+						</c:when>				
+					</c:choose>
 								
-						<fmt:message key="label.rateLimits.topic.reminder">
-							<fmt:param value="<span id='numOfRatings'>${sessionMap.numOfRatings}</span>"/>
-						</fmt:message>
-					</lams:Alert>
-				</c:if>	
-			</c:if>
-			<!-- End announcements and advanced settings -->
+					<fmt:message key="label.rateLimits.topic.reminder">
+						<fmt:param value="<span id='numOfRatings'>${sessionMap.numOfRatings}</span>"/>
+					</fmt:message>
+				</lams:Alert5>
+			</c:if>	
+		</c:if>
 		
-			<lams:errors/>
+		<lams:errors5/>
 		
-			<!-- main UI -->
-			<%@ include file="/jsps/learning/message/topiclist.jsp"%>
-			<!--  end main UI -->
+		<!-- main UI -->
+		<%@ include file="/jsps/learning/message/topiclist.jsp"%>
 		
-			<!-- Reflection -->
-			<c:if test="${sessionMap.userFinished and sessionMap.reflectOn and !sessionMap.hideReflection}">
-				<div class="panel panel-default">
-					<div class="panel-heading panel-title">
-						<fmt:message key="title.reflection" />
-					</div>
-					<div class="panel-body">
-						<div class="reflectionInstructions">
-							<lams:out value="${sessionMap.reflectInstructions}" escapeHtml="true" />
-						</div>
-						<div class="panel">
-							<c:choose>
-								<c:when test="${empty sessionMap.reflectEntry}">
-									<p>
-										<em> <fmt:message key="message.no.reflection.available" /> </em>
-									</p>
-								</c:when>
-								<c:otherwise>
-									<p>
-										<lams:out escapeHtml="true" value="${sessionMap.reflectEntry}" />
-									</p>
-								</c:otherwise>
-							</c:choose>
-						</div>
-						<c:if test='${sessionMap.mode != "teacher"}'>
-							<button name="continue"
-								onclick="javascript:location.href='${continue}';"
-								class="btn btn-secondary float-start" id="editReflection">
-								<fmt:message key="label.edit" />
-							</button>
-						</c:if>
-					</div>
-				</div>
-			</c:if>
-			<!-- End Reflection -->
+		<!-- Reflection -->
+		<c:if test="${sessionMap.userFinished and sessionMap.reflectOn and !sessionMap.hideReflection}">
+			<lams:NotebookReedit
+				reflectInstructions="${sessionMap.reflectInstructions}"
+				reflectEntry="${sessionMap.reflectEntry}"
+				isEditButtonEnabled="${sessionMap.mode != 'teacher'}"
+				notebookHeaderLabelKey="title.reflection"/>
+		</c:if>
 		
-			<c:if test='${(sessionMap.mode != "teacher") && sessionMap.isMinRatingsCompleted}'>
-				<c:choose>
-					<c:when	test="${sessionMap.reflectOn && (not sessionMap.userFinished)}">
-						<button name="continue"
-							onclick="javascript:location.href='${continue}';"
-							class="btn btn-primary mt-2 float-end">
-							<fmt:message key="label.continue" />
-						</button>
-					</c:when>
-		
-					<c:otherwise>
-						<a href="#nogo" name="finish" id="finishButton" class="btn btn-primary mt-2 float-end na">
-							<span class="nextActivity">
+		<c:if test='${sessionMap.mode != "teacher"}'>
+			<div class="activity-bottom-buttons">
+				<c:if test="${sessionMap.isMinRatingsCompleted}">
+					<c:choose>
+						<c:when	test="${sessionMap.reflectOn && (not sessionMap.userFinished)}">
+							<button type="button" name="continue" class="btn btn-primary na"
+									onclick="javascript:location.href='${continue}';">
+								<fmt:message key="label.continue" />
+							</button>
+						</c:when>
+			
+						<c:otherwise>
+							<button type="button" name="finish" id="finishButton" class="btn btn-primary na">
 								<c:choose>
-				 					<c:when test="${sessionMap.isLastActivity}">
-				 						<fmt:message key="label.submit" />
-				 					</c:when>
-				 					<c:otherwise>
-				 		 				<fmt:message key="label.finish" />
-				 					</c:otherwise>
-				 				</c:choose>
-							</span>
-						</a>
-					</c:otherwise>
+					 				<c:when test="${sessionMap.isLastActivity}">
+					 					<fmt:message key="label.submit" />
+					 				</c:when>
+					 				<c:otherwise>
+					 		 			<fmt:message key="label.finish" />
+					 				</c:otherwise>
+					 			</c:choose>
+							</button>
+						</c:otherwise>
+					</c:choose>
+				</c:if>
 		
-				</c:choose>
-			</c:if>
-		
-		</lams:Page>
-
-	</body>
-</lams:html>
\ No newline at end of file
+				<c:if test='${(not sessionMap.finishedLock) && (sessionMap.allowNewTopics)}'>
+					<button type="button" onclick="javascript:location.href='${newtopic}';" class="btn btn-secondary me-2"> 
+						<i class="fa fa-xm fa-plus"></i> 
+						<fmt:message key="label.newtopic" />
+					</button>
+				</c:if>
+				
+				<button type="button" onclick="javascript:location.href='${refresh}';" class="btn btn-secondary btn-icon-refresh me-2">
+					<fmt:message key="label.refresh" />
+				</button>
+			</div>
+		</c:if>
+	</div>
+</lams:PageLearner>
Index: lams_tool_forum/web/jsps/learning/viewtopic.jsp
===================================================================
diff -u -rbc8213e12c4e5afddd0394ad66386ef3e70d1611 -re8e86d379857a349822a501189888545e69e56ac
--- lams_tool_forum/web/jsps/learning/viewtopic.jsp	(.../viewtopic.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
+++ lams_tool_forum/web/jsps/learning/viewtopic.jsp	(.../viewtopic.jsp)	(revision e8e86d379857a349822a501189888545e69e56ac)
@@ -1,44 +1,30 @@
 <!DOCTYPE html>
-
-<%@ page import="org.lamsfoundation.lams.tool.forum.ForumConstants"%>
-
 <%@ include file="/common/taglibs.jsp"%>
-
-<c:set var="lams">
-	<lams:LAMSURL />
-</c:set>
-<c:set var="tool">
-	<lams:WebAppURL />
-</c:set>
+<%@ page import="org.lamsfoundation.lams.tool.forum.ForumConstants"%>
+<c:set var="lams"><lams:LAMSURL /></c:set>
+<c:set var="tool"><lams:WebAppURL /></c:set>
 <c:set var="ctxPath" value="${pageContext.request.contextPath}" scope="request" />
 <c:set var="sessionMap" value="${sessionScope[sessionMapID]}" />
 <c:set var="pageSize" value="<%=ForumConstants.DEFAULT_PAGE_SIZE%>" />
 
-<lams:html>
-<lams:head>
-	<title><fmt:message key="activity.title" /></title>
+<lams:PageLearner title="${sessionMap.title}" toolSessionID="${sessionMap.toolSessionID}">
 
 	<!-- ********************  CSS ********************** -->
-	<lams:css />
 	<lams:css suffix="jquery.jRating"/>
 	<lams:css suffix="treetable"/>
 	<link type="text/css" href="${tool}css/treetable.forum.css" rel="stylesheet" />
 
 	<!-- ********************  javascript ********************** -->
 	<lams:JSImport src="includes/javascript/common.js" />
 	<script type="text/javascript" src="${lams}includes/javascript/tabcontroller.js"></script>
-
 	<script type="text/javascript">
 		var removeItemAttachmentUrl = "<lams:WebAppURL />learning/deleteAttachment.do";
 		//var for jquery.jRating.js
 		var pathToImageFolder = "${lams}images/css/";
 	</script>
-	<script type="text/javascript" src="${lams}includes/javascript/jquery.js"></script>
-	<script type="text/javascript" src="${lams}includes/javascript/jquery-ui.js"></script>
 	<script type="text/javascript" src="${lams}includes/javascript/jquery.jRating.js"></script>
 	<script type="text/javascript" src="${lams}includes/javascript/jquery.treetable.js"></script>
 	<script type="text/javascript" src="${lams}includes/javascript/jquery.jscroll.js"></script>
-	<script type="text/javascript" src="${lams}includes/javascript/bootstrap.min.js"></script>
 	<script type="text/javascript" src="${tool}includes/javascript/message.js"></script>
 	<script type="text/javascript">
 		$(document).ready(function(){
@@ -47,27 +33,24 @@
 		});
 
 		function setupJRatingSetPath() {
-				setupJRating("<c:url value='/learning/rateMessage.do'/>?toolSessionID=${sessionMap.toolSessionID}&sessionMapID=${sessionMapID}");
-			}
+			setupJRating("<c:url value='/learning/rateMessage.do'/>?toolSessionID=${sessionMap.toolSessionID}&sessionMapID=${sessionMapID}");
+		}
 		
 		<c:set var="refresh">
 			<lams:WebAppURL />learning/viewTopic.do?sessionMapID=${sessionMapID}&topicID=${sessionMap.rootUid}&hideReflection=${sessionMap.hideReflection}&pageLastId=0&size=${pageSize}&reqUid=${reqIDVar.getTime()};
 		</c:set>
-		
 		function refreshTopic(){
-				var reqIDVar = new Date();
-				location.href= '${refresh}';
-			}
-		</script>
-</lams:head>
-<body class="stripes">
-	<lams:Page type="learner" title="${sessionMap.title}">
+			var reqIDVar = new Date();
+			location.href= '${refresh}';
+		}
+	</script>
 
+	<div id="container-main">
+
 		<!-- Announcements and advanced settings -->
 		<c:if test="${sessionMap.mode == 'author' || sessionMap.mode == 'learner'}">
-
 			<c:if test="${not sessionMap.allowNewTopics and ( sessionMap.minimumReply ne 0 or sessionMap.maximumReply ne 0)}">
-				<lams:Alert id="postingLimits" type="info" close="true">
+				<lams:Alert5 id="postingLimits" type="info" close="true">
 					<c:if test="${(sessionMap.minimumReply ne 0 and sessionMap.maximumReply ne 0)}">
 						<fmt:message key="label.postingLimits.topic.reminder">
 							<fmt:param value="${sessionMap.minimumReply}" />
@@ -90,12 +73,12 @@
 							<fmt:param value="${sessionMap.maximumReply - numOfPosts}" />
 						</fmt:message>
 					</c:if>
-				</lams:Alert>
+				</lams:Alert5>
 			</c:if>
 
 			<!-- Rating announcements -->
-			<c:if test="${sessionMap.allowRateMessages}">
-				<lams:Alert id="rateMessages" type="info" close="true">
+			<c:if test="${sessionMap.allowRateMessages && (sessionMap.minimumRate ne 0 || sessionMap.maximumRate ne 0)}">
+				<lams:Alert5 id="rateMessages" type="info" close="true">
 					<c:choose>
 						<c:when test="${sessionMap.minimumRate ne 0 and sessionMap.maximumRate ne 0}">
 							<fmt:message key="label.rateLimits.forum.reminder">
@@ -104,13 +87,13 @@
 							</fmt:message>
 						</c:when>
 
-						<c:when test="${sessionMap.minimumRate ne 0 and sessionMap.maximumRate eq 0}">
+						<c:when test="${sessionMap.minimumRate ne 0}">
 							<fmt:message key="label.rateLimits.forum.reminder.min">
 								<fmt:param value="${sessionMap.minimumRate}" />
 							</fmt:message>
 						</c:when>
 
-						<c:when test="${sessionMap.minimumRate eq 0 and sessionMap.maximumRate ne 0}">
+						<c:when test="${sessionMap.maximumRate ne 0}">
 							<fmt:message key="label.rateLimits.forum.reminder.max">
 								<fmt:param value="${sessionMap.maximumRate}" />
 							</fmt:message>
@@ -121,45 +104,46 @@
 					<fmt:message key="label.rateLimits.topic.reminder">
 						<fmt:param value="<span id='numOfRatings'>${sessionMap.numOfRatings}</span>" />
 					</fmt:message>
-
-				</lams:Alert>
+				</lams:Alert5>
 			</c:if>
 		</c:if>
-		<!-- End announcements and advanced settings -->
 
+		<!--  Button Panel -->
 		<c:set var="buttonPanel">
-			<c:set var="refreshTopicURL"></c:set>
-				<!--  Button Panel -->
-				<div class="row g-0">
-					<div class="col-12">
-						<a href="javascript:refreshTopic();" class="btn btn-sm btn-secondary mt-2  float-start" role="button"> <fmt:message
-								key="label.refresh" />
-						</a>
-						<c:set var="backToForum">
-							<lams:WebAppURL />learning/viewForum.do?mode=${sessionMap.mode}&sessionMapID=${sessionMapID}&toolSessionID=${sessionMap.toolSessionID}&hideReflection=${sessionMap.hideReflection}
-						</c:set>
-						<button name="backToForum" onclick="javascript:location.href='${backToForum}';"
-							class="btn btn-sm btn-primary mt-2 float-end">
-							<fmt:message key="label.back.to.forum" />
-						</button>
-					</div>
-				</div>
-				<!--  Button Panel -->
+			<div class="float-end">
+				<c:set var="backToForum">
+					<lams:WebAppURL />learning/viewForum.do?mode=${sessionMap.mode}&sessionMapID=${sessionMapID}&toolSessionID=${sessionMap.toolSessionID}&hideReflection=${sessionMap.hideReflection}
+				</c:set>
+				<button type="button" name="backToForum" onclick="javascript:location.href='${backToForum}';"
+						class="btn btn-sm btn-primary">
+					<i class="fa-solid fa-backward me-1"></i>
+					<fmt:message key="label.back.to.forum" />
+				</button>
+				
+				<button type="button" onclick="javascript:refreshTopic();" class="btn btn-sm btn-secondary me-1 btn-icon-refresh"> 
+					<fmt:message key="label.refresh" />
+				</button>
+			</div>
 		</c:set>
 		
-		${buttonPanel}
+		<div class="clearfix mb-4">
+			${buttonPanel}
+		</div>
 
 		<div class="scroll">
 			<%@ include file="message/topicview.jsp"%>
 		</div>
 		<script>
 			<c:set var="loading_words"><fmt:message key="label.loading.messages" /></c:set>
-			$('.scroll' ).jscroll({loadingHtml: '<i class="fa fa-refresh fa-spin fa-fw"></i> ${loading_words}',padding:30,autoTrigger:true,callback:setupJRatingSetPath});
+			$('.scroll' ).jscroll({
+				loadingHtml: '<i class="fa fa-refresh fa-spin fa-fw"></i> ${loading_words}',
+				padding:30,
+				autoTrigger:true,
+				callback:setupJRatingSetPath
+			});
 		</script>
 			
 		${buttonPanel}
 
-	</lams:Page>
-
-</body>
-</lams:html>
\ No newline at end of file
+	</div>
+</lams:PageLearner>