Index: lams_central/web/includes/javascript/bootstrap5.tabcontroller.js
===================================================================
diff -u
--- lams_central/web/includes/javascript/bootstrap5.tabcontroller.js	(revision 0)
+++ lams_central/web/includes/javascript/bootstrap5.tabcontroller.js	(revision b31ac55045b51d2098eb4b66772e3d6e2a5a89b6)
@@ -0,0 +1,19 @@
+function selectTab(tabID) {
+    const triggerFirstTabEl = document.querySelector('#tabs button#tab-' + tabID)
+	bootstrap.Tab.getInstance(triggerFirstTabEl).show()
+    
+    try {
+        //trigger the custom event listener onSelectTab()
+        onSelectTab(tabID);
+    }
+    catch (error) {
+        //catch reference error when onSelectTab() is not defined
+    }
+}
+
+function getCurrentTabID() {
+	var activeTab = $("#tabs-content div.tab-pane.active");
+	var id = activeTab.attr("id") // activated tab, should be "#t<num>"
+	var activeTabID = id.substring(4,5);
+	return activeTabID;
+}
Index: lams_tool_daco/web/includes/css/daco.scss
===================================================================
diff -u -r7475d08afc280b5e2e5ddf04e8bf35e3166aaf80 -rb31ac55045b51d2098eb4b66772e3d6e2a5a89b6
--- lams_tool_daco/web/includes/css/daco.scss	(.../daco.scss)	(revision 7475d08afc280b5e2e5ddf04e8bf35e3166aaf80)
+++ lams_tool_daco/web/includes/css/daco.scss	(.../daco.scss)	(revision b31ac55045b51d2098eb4b66772e3d6e2a5a89b6)
@@ -48,37 +48,33 @@
 }
 
 // cells must have the same height, otherwise they will be incorrectly aligned in horizontal record list
-table {
-  &#recordListTable td, &#horizontalListTable td {
+#recordListTable .col, #horizontalListTable .col {
     padding-left: 5px;
     vertical-align: middle;
     padding-right: 5px;
-  }
-  &#recordListTable td {
+}
+#recordListTable .col {
     background-color: $gray-lightest;
-    &.fixedCellHeight {
-      height: 150px;
-    }
   }
-  &#horizontalListTable td.fixedCellHeight {
+.fixedCellHeight {
     height: 150px;
   }
-  &#summaryTable table.alternative-color-inner-table {
-    // centers the table in the outer table column
-    margin: auto;
-  }
-  &#recordListTable {
+#recordListTable {
     border-right: none !important;
-    tr, td {
+    .row, .col {
       border-right: none !important;
     }
-  }
-  &#summaryTable {
-    td.singleSummaryCell, th.singleSummaryCell {
+}
+
+#summaryTable {
+    .singleSummaryCell {
       vertical-align: middle;
       text-align: center;
     }
-  }
+	.alternative-color-inner-table {
+	   	// centers the table in the outer table column
+	   	margin: auto;
+	}
 }
 
 border-thick { 
Index: lams_tool_daco/web/includes/javascript/dacoCommon.js
===================================================================
diff -u -r7475d08afc280b5e2e5ddf04e8bf35e3166aaf80 -rb31ac55045b51d2098eb4b66772e3d6e2a5a89b6
--- lams_tool_daco/web/includes/javascript/dacoCommon.js	(.../dacoCommon.js)	(revision 7475d08afc280b5e2e5ddf04e8bf35e3166aaf80)
+++ lams_tool_daco/web/includes/javascript/dacoCommon.js	(.../dacoCommon.js)	(revision b31ac55045b51d2098eb4b66772e3d6e2a5a89b6)
@@ -23,10 +23,6 @@
 	function checkCheckbox(checkboxName){
 		var checkbox = document.getElementById(checkboxName);
 		checkbox.checked=true;
-	}	
-	function setValue(elementName,value){
-		var element = document.getElementById(elementName);
-		element.value=value;
 	}
 	
 	function resizeHorizontalRecordListFrame(elementIdPrefix,questionListLength){
Index: lams_tool_daco/web/includes/javascript/dacoLearning.js
===================================================================
diff -u -r587db89bd8343613879909637e377091b88e6cf2 -rb31ac55045b51d2098eb4b66772e3d6e2a5a89b6
--- lams_tool_daco/web/includes/javascript/dacoLearning.js	(.../dacoLearning.js)	(revision 587db89bd8343613879909637e377091b88e6cf2)
+++ lams_tool_daco/web/includes/javascript/dacoLearning.js	(.../dacoLearning.js)	(revision b31ac55045b51d2098eb4b66772e3d6e2a5a89b6)
@@ -111,14 +111,18 @@
 	}
 	
 	function editRecord (sessionMapID, recordIndex){
-		var param = {"sessionMapID":sessionMapID,"recordIndex":recordIndex,"reqID":((new Date()).getTime())};
+		var param = {
+			"sessionMapID":sessionMapID,
+			"recordIndex":recordIndex,
+			"reqID":((new Date()).getTime())
+		};
 		$( "#addRecordDiv" ).load( 
 			editRecordUrl, 
 			param, 
 			function() {
 				readHiddenFormValues();
 				doSelectTab(1);
-			});
+		});
 	}
 	
 	function clearVisibleFormElements (formName,protectedFormElementNames){
Index: lams_tool_daco/web/pages/learning/addRecord.jsp
===================================================================
diff -u -rbc8213e12c4e5afddd0394ad66386ef3e70d1611 -rb31ac55045b51d2098eb4b66772e3d6e2a5a89b6
--- lams_tool_daco/web/pages/learning/addRecord.jsp	(.../addRecord.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
+++ lams_tool_daco/web/pages/learning/addRecord.jsp	(.../addRecord.jsp)	(revision b31ac55045b51d2098eb4b66772e3d6e2a5a89b6)
@@ -1,10 +1,7 @@
 <%@ include file="/common/taglibs.jsp"%>
-<div id="addRecordDiv">
-
 <c:if test="${not empty param.sessionMapID}">
 	<c:set var="sessionMapID" value="${param.sessionMapID}" />
 </c:if>
-
 <c:set var="sessionMap" value="${sessionScope[sessionMapID]}" />
 <c:set var="daco" value="${sessionMap.daco}" />
 <%-- If the view is horizontal or vertical --%>
@@ -13,323 +10,349 @@
 <c:set var="ordinal"><fmt:message key="label.authoring.basic.answeroption.ordinal"/></c:set>
 <c:set var="finishedLock" value="${sessionMap.finishedLock}" />
 
-<div class="mt-2">
-<c:if test="${daco.lockOnFinished and mode != 'teacher'}">
-	<lams:Alert id="activityLocked" type="danger" close="false">
-		<c:choose>
-			<c:when test="${sessionMap.userFinished}">
-				<fmt:message key="message.learning.activityLocked" />
-			</c:when>
-			<c:otherwise>
-				<fmt:message key="message.learning.warnLockOnFinish" />
-			</c:otherwise>
-		</c:choose>
-	</lams:Alert>
-</c:if>
+<div id="addRecordDiv">
+	<c:if test="${daco.lockOnFinished and mode != 'teacher'}">
+		<lams:Alert5 id="activityLocked" type="danger" close="false">
+			<c:choose>
+				<c:when test="${sessionMap.userFinished}">
+					<fmt:message key="message.learning.activityLocked" />
+				</c:when>
+				<c:otherwise>
+					<fmt:message key="message.learning.warnLockOnFinish" />
+				</c:otherwise>
+			</c:choose>
+		</lams:Alert5>
+	</c:if>
+		
+	<lams:errors5/>
+	<%-- The status of the last add/edit operation. --%>
+	<c:if test="${recordOperationSuccess=='add'}">
+		<lams:Alert5 id="addrecordsuccess" type="info" close="true">
+			<fmt:message key="message.learning.addrecordsuccess" />
+		</lams:Alert5>
+	</c:if>
+	<c:if test="${recordOperationSuccess=='edit'}">
+		<lams:Alert5 id="addrecordsuccess" type="info" close="true">
+			<fmt:message key="message.learning.editrecordsuccess" />
+		</lams:Alert5>
+	</c:if>
+	
+	<lams:Alert5 id="minRecords" type="info" close="true">		
+		<c:if test="${not (empty daco.minRecords or daco.minRecords eq 0)}">
+			<fmt:message key="error.record.notenough">
+				<fmt:param value="${daco.minRecords}" />
+			</fmt:message>
+		</c:if>
+					
+		<c:if test="${not (empty daco.maxRecords or daco.maxRecords eq 0)}">
+			<br />
+			<fmt:message key="error.record.toomuch">
+				<fmt:param value="${daco.maxRecords}" />
+			</fmt:message>
+		</c:if>
+	</lams:Alert5>
 
-<lams:errors/>
-<%-- The status of the last add/edit operation. --%>
-<c:if test="${recordOperationSuccess=='add'}">
-	<lams:Alert id="addrecordsuccess" type="info" close="true">
-		<fmt:message key="message.learning.addrecordsuccess" />
-	</lams:Alert>
-</c:if>
-<c:if test="${recordOperationSuccess=='edit'}">
-	<lams:Alert id="addrecordsuccess" type="info" close="true">
-		<fmt:message key="message.learning.editrecordsuccess" />
-	</lams:Alert>
-</c:if>
-
-<div class="panel">
-	<c:out value="${daco.instructions}" escapeXml="false"/>
-</div>
-</div>
-
-<c:if test="${not finishedLock }">
-
-<!--  record panel  -->
-<div class="panel panel-default">
-	<div class="panel-heading panel-title">
-		<fmt:message key="label.learning.heading.recordnumber" />
-		<span id="displayedRecordNumberSpan" class="hint">
-			${displayedRecordNumber}
-			<c:if test="${not (empty daco.minRecords or daco.minRecords eq 0)}">
-				<br />
-				<fmt:message key="error.record.notenough">
-					<fmt:param value="${daco.minRecords}" />
-				</fmt:message>
-			</c:if>
-			<c:if test="${not (empty daco.maxRecords or daco.maxRecords eq 0)}">
-				<br />
-				<fmt:message key="error.record.toomuch">
-					<fmt:param value="${daco.maxRecords}" />
-				</fmt:message>
-			</c:if>
-		</span>
-	</div>
-
-	<!-- Form to add/edit a record -->
-	<form:form action="saveOrUpdateRecord.do" modelAttribute="recordForm" method="post" id="recordForm" enctype="multipart/form-data" >
+	<c:if test="${not finishedLock }">
 	
-	<c:set var="fileNumber" value="0" />
-	<c:set var="answerIndex" value="0" />
-	
-	<form:hidden path="sessionMapID" value="${sessionMapID}" />
-	<form:hidden id="displayedRecordNumber" path="displayedRecordNumber" value="${displayedRecordNumber}" />
-	
-		<table cellspacing="0" class="table table-striped">
-			<c:forEach var="question" items="${daco.dacoQuestions}" varStatus="questionStatus">
-				<tr>
-					<td>
-					<!-- <span>${questionStatus.index+1}</span> -->
-					<c:out value="${question.description}" escapeXml="false"/>
-					<c:choose>
-						<%-- The content varies depending on the question type --%>
-						<c:when test="${question.type==1}"><%-- Single line text --%>
-							<fmt:message key="label.learning.textfield.hint" var="textfieldHint"/>	
-							<c:if test="${horizontal}">
-								</td><td style="vertical-align: middle;">
-							</c:if>
+		<!--  record panel  -->
+		<div class="card lcard">
+			<div class="card-header">
+				<fmt:message key="label.learning.heading.recordnumber" />
+				
+				<span id="displayedRecordNumberSpan" class="hint">
+					${displayedRecordNumber}
+				</span>
+			</div>
+		
+			<!-- Form to add/edit a record -->
+			<form:form action="saveOrUpdateRecord.do" modelAttribute="recordForm" method="post" id="recordForm" enctype="multipart/form-data" >
+				<form:hidden path="sessionMapID" value="${sessionMapID}" />
+				<form:hidden id="displayedRecordNumber" path="displayedRecordNumber" value="${displayedRecordNumber}" />
+			
+				<c:set var="fileNumber" value="0" />
+				<c:set var="answerIndex" value="0" />
+			
+				<div class="ltable table-striped no-header">
+					<c:forEach var="question" items="${daco.dacoQuestions}" varStatus="questionStatus">
+						<div class="row py-3">
+							<div class="col">
+							
 							<c:choose>
-								<%-- Textfield entry length is limited 
-									depending on the maximum number of characters the teacher provided
-								--%>
-								<c:when test="${question.max!=null}">
-									<form:input placeholder="${textfieldHint}" path="answer[${answerIndex}]" size="60" maxlength="${question.max}"  cssClass="form-control"/>
+								<c:when test="${question.type==1 || question.type==2 || question.type==3}">
+									<label for="answer${answerIndex}">
+										<c:out value="${question.description}" escapeXml="false"/>
+									</label>
 								</c:when>
 								<c:otherwise>
-									<form:input placeholder="${textfieldHint}" path="answer[${answerIndex}]" size="60"  cssClass="form-control"/>
+									<c:out value="${question.description}" escapeXml="false"/>
 								</c:otherwise>
 							</c:choose>
-							<c:set var="answerIndex" value="${answerIndex+1}" />
-						</c:when>
-						
-						<c:when test="${question.type==2}"><%-- Multi-line text --%>
-							<fmt:message key="label.learning.textarea.hint" var="textareaHint"/>
-							<c:if test="${horizontal}">
-								</td><td style="vertical-align: middle;">
-							</c:if>
-							<form:textarea placeholder="${textareaHint}" path="answer[${answerIndex}]" cols="60" rows="3"  cssClass="form-control"/>
-							<c:set var="answerIndex" value="${answerIndex+1}" />
-						</c:when>
-						
-						<c:when test="${question.type==3}"><%-- Number --%>
-							<fmt:message key="label.learning.number.hint" var="numberHint"/>
-							<c:if test="${not empty question.digitsDecimal}">
-								<br />
-								<%-- An information for the learner is displayed,
-									if the number he provides will be rounded to the number of places after the decimal point,
-									as stated by the teacher. --%>
-								<fmt:message key="label.learning.number.decimal">
-									<fmt:param value="${question.digitsDecimal}" />
-								</fmt:message>
-							</c:if>
-							</div>
-							<c:if test="${horizontal}">
-								</td><td style="vertical-align: middle;">
-							</c:if>
-							<form:input placeholder="${numberHint}" path="answer[${answerIndex}]" size="10"  cssClass="form-control"/>
-							<c:set var="answerIndex" value="${answerIndex+1}" />
-						</c:when>
-						
-						<c:when test="${question.type==4}"><%-- Date can be entered in three textfields --%>
-							<div class="hint"><fmt:message key="label.learning.date.hint" /></div>
-							<c:if test="${horizontal}">
-								</td><td style="vertical-align: middle;">
-							</c:if>
-							<span class="d-flex flex-row align-items-center flex-wrap">
-								<div class="mb-3">
-								<label><fmt:message key="label.learning.date.day" /></label>
-								<form:input path="answer[${answerIndex}]" size="3"  cssClass="form-control form-control-sm"/>&nbsp;
-								</div>
+							
+							<c:choose>
+								<%-- The content varies depending on the question type --%>
+								<c:when test="${question.type==1}"><%-- Single line text --%>
+									<fmt:message key="label.learning.textfield.hint" var="textfieldHint"/>	
+									<c:if test="${horizontal}">
+										</div><div class="col" style="vertical-align: middle;">
+									</c:if>
+									
+									<c:choose>
+										<%-- Textfield entry length is limited 
+											depending on the maximum number of characters the teacher provided
+										--%>
+										<c:when test="${question.max!=null}">
+											<form:input placeholder="${textfieldHint}" path="answer[${answerIndex}]" size="60" maxlength="${question.max}"  cssClass="form-control"/>
+										</c:when>
+										<c:otherwise>
+											<form:input placeholder="${textfieldHint}" path="answer[${answerIndex}]" size="60"  cssClass="form-control"/>
+										</c:otherwise>
+									</c:choose>
+									<c:set var="answerIndex" value="${answerIndex+1}" />
+								</c:when>
 								
-								<div class="mb-3">
-								<c:set var="answerIndex" value="${answerIndex+1}" />
-								<label><fmt:message key="label.learning.date.month" /></label>
-								<form:input path="answer[${answerIndex}]" size="3"  cssClass="form-control form-control-sm"/>&nbsp;
-								</div>
+								<c:when test="${question.type==2}"><%-- Multi-line text --%>
+									<fmt:message key="label.learning.textarea.hint" var="textareaHint"/>
+									<c:if test="${horizontal}">
+										</div><div class="col" style="vertical-align: middle;">
+									</c:if>
+									<form:textarea placeholder="${textareaHint}" path="answer[${answerIndex}]" cols="60" rows="3"  cssClass="form-control"/>
+									<c:set var="answerIndex" value="${answerIndex+1}" />
+								</c:when>
 								
-								<div class="mb-3">
-								<c:set var="answerIndex" value="${answerIndex+1}" />
-								<label><fmt:message key="label.learning.date.year" /></label>
-								<form:input path="answer[${answerIndex}]" size="5"  cssClass="form-control form-control-sm"/>
-								</div>
-							</span>							
-							<c:set var="answerIndex" value="${answerIndex+1}" />
-						</c:when>
-						
-						<c:when test="${question.type==5}"><%-- File --%>
-							<div class="hint"><fmt:message key="label.learning.file.hint" /></div>
-							<c:if test="${horizontal}">
-								</td><td style="vertical-align: middle;">
-							</c:if>
-							<lams:FileUpload5 fileFieldId="file-${fileNumber+1}" fileFieldname="file[${fileNumber}]" 
-								fileInputMessageKey="label.authoring.basic.file" maxFileSize="${UPLOAD_FILE_MAX_SIZE_AS_USER_STRING}"
-								fileButtonBrowse="fileButtonBrowse-${fileNumber+1}" fileInputNameFieldname="fileInputName-${fileNumber+1}" errorMsgDiv="fileerror-${fileNumber+1}"/>
-							<c:set var="fileNumber" value="${fileNumber+1}" />
-						</c:when>
-						
-						<c:when test="${question.type==6}"><%-- Image --%>  
-							<div class="hint"><fmt:message key="label.learning.image.hint" /></div>
-							<c:if test="${horizontal}">
-								</td><td style="vertical-align: middle;">
-							</c:if>
-							<lams:FileUpload5 fileFieldId="file-${fileNumber+1}" fileFieldname="file[${fileNumber}]" 
-								fileInputMessageKey="label.authoring.basic.image" maxFileSize="${UPLOAD_FILE_MAX_SIZE_AS_USER_STRING}"
-								fileButtonBrowse="fileButtonBrowse-${fileNumber+1}" fileInputNameFieldname="fileInputName-${fileNumber+1}" errorMsgDiv="imageerror-${fileNumber+1}"/>
-							<c:set var="fileNumber" value="${fileNumber+1}" />
-						</c:when>
-						
-						<c:when test="${question.type==7}"><%-- Radio buttons  --%>
-							<div class="hint">
-								<fmt:message key="label.learning.radio.hint" />
-							</div>
-							<c:if test="${horizontal}">
-								</td><td style="vertical-align: middle;">
-							</c:if>
-							
-							<c:forEach var="answerOption" items="${question.answerOptions}" varStatus="status">
-								<div class="form-check">
-									<%-- It displays for example A) instead of 1) --%>
-									${fn:substring(ordinal,status.index,status.index+1)}) 
-									<form:radiobutton path="answer[${answerIndex}]" value="${status.index+1}" cssClass="form-check-input"/>
-									<label for="answer[${answerIndex}]" class="form-check-label">
-										&nbsp;<c:out value="${answerOption.answerOption}" escapeXml="true"/>
+								<c:when test="${question.type==3}"><%-- Number --%>
+									<fmt:message key="label.learning.number.hint" var="numberHint"/>
+									<c:if test="${not empty question.digitsDecimal}">
+										<br />
+										<%-- An information for the learner is displayed,
+											if the number he provides will be rounded to the number of places after the decimal point,
+											as stated by the teacher. --%>
+										<fmt:message key="label.learning.number.decimal">
+											<fmt:param value="${question.digitsDecimal}" />
+										</fmt:message>
+									</c:if>
+
+									<c:if test="${horizontal}">
+										</div><div class="col" style="vertical-align: middle;">
+									</c:if>
+									<form:input placeholder="${numberHint}" path="answer[${answerIndex}]" size="10"  cssClass="form-control"/>
+									<c:set var="answerIndex" value="${answerIndex+1}" />
+								</c:when>
+								
+								<c:when test="${question.type==4}"><%-- Date can be entered in three textfields --%>
+									<div class="hint">
+										<fmt:message key="label.learning.date.hint" />
+									</div>
+									
+									<c:if test="${horizontal}">
+										</div><div class="col" style="vertical-align: middle;">
+									</c:if>
+									
+									<span class="d-flex flex-row pt-3 align-items-center flex-wrap">
+										<div class="mb-3">
+											<label for="answer${answerIndex}">
+												<fmt:message key="label.learning.date.day" />
+											</label>
+											<form:input path="answer[${answerIndex}]" size="3"  cssClass="form-control form-control-sm"/>
+										</div>
+										
+										<div class="mb-3">
+											<c:set var="answerIndex" value="${answerIndex+1}" />
+											<label for="answer${answerIndex}">
+												<fmt:message key="label.learning.date.month" />
+											</label>
+											<form:input path="answer[${answerIndex}]" size="3"  cssClass="form-control form-control-sm"/>
+										</div>
+										
+										<div class="mb-3">
+											<c:set var="answerIndex" value="${answerIndex+1}" />
+											<label for="answer${answerIndex}">
+												<fmt:message key="label.learning.date.year" />
+											</label>
+											<form:input path="answer[${answerIndex}]" size="5"  cssClass="form-control form-control-sm"/>
+										</div>
+									</span>							
+									<c:set var="answerIndex" value="${answerIndex+1}" />
+								</c:when>
+								
+								<c:when test="${question.type==5}"><%-- File --%>
+									<div class="hint">
+										<fmt:message key="label.learning.file.hint" />
+									</div>
+									
+									<c:if test="${horizontal}">
+										</div><div class="col" style="vertical-align: middle;">
+									</c:if>
+									
+									<lams:FileUpload5 fileFieldId="file-${fileNumber+1}" fileFieldname="file[${fileNumber}]" 
+										fileInputMessageKey="label.authoring.basic.file" maxFileSize="${UPLOAD_FILE_MAX_SIZE_AS_USER_STRING}"
+										fileButtonBrowse="fileButtonBrowse-${fileNumber+1}" fileInputNameFieldname="fileInputName-${fileNumber+1}" errorMsgDiv="fileerror-${fileNumber+1}"/>
+									<c:set var="fileNumber" value="${fileNumber+1}" />
+								</c:when>
+								
+								<c:when test="${question.type==6}"><%-- Image --%>  
+									<div class="hint">
+										<fmt:message key="label.learning.image.hint" />
+									</div>
+									
+									<c:if test="${horizontal}">
+										</div><div class="col" style="vertical-align: middle;">
+									</c:if>
+									
+									<lams:FileUpload5 fileFieldId="file-${fileNumber+1}" fileFieldname="file[${fileNumber}]" 
+										fileInputMessageKey="label.authoring.basic.image" maxFileSize="${UPLOAD_FILE_MAX_SIZE_AS_USER_STRING}"
+										fileButtonBrowse="fileButtonBrowse-${fileNumber+1}" fileInputNameFieldname="fileInputName-${fileNumber+1}" errorMsgDiv="imageerror-${fileNumber+1}"/>
+									<c:set var="fileNumber" value="${fileNumber+1}" />
+								</c:when>
+								
+								<c:when test="${question.type==7}"><%-- Radio buttons  --%>
+									<div class="hint">
+										<fmt:message key="label.learning.radio.hint" />
+									</div>
+									<c:if test="${horizontal}">
+										</div><div class="col" style="vertical-align: middle;">
+									</c:if>
+									
+									<fieldset>
+										<legend class="visually-hidden">
+											<fmt:message key="label.learning.radio.hint" />
+										</legend>
+									
+										<c:forEach var="answerOption" items="${question.answerOptions}" varStatus="status">
+											<div class="form-check">
+												<form:radiobutton path="answer[${answerIndex}]" id="radio-${questionStatus.index}-${status.index}" value="${status.index+1}" cssClass="form-check-input"/>
+												<label for="radio-${questionStatus.index}-${status.index}" class="form-check-label">
+													<%-- It displays for example A) instead of 1) --%>
+													${fn:substring(ordinal,status.index,status.index+1)})
+													 
+													&nbsp;<c:out value="${answerOption.answerOption}" escapeXml="true"/>
+												</label>
+											</div>
+										</c:forEach>
+									</fieldset>
+									
+									<c:set var="answerIndex" value="${answerIndex+1}" />
+								</c:when>
+								
+								<c:when test="${question.type==8}"><%-- Dropdown menu --%>
+									<label class="hint" for="answer${answerIndex}">
+										<fmt:message key="label.learning.dropdown.hint" />
 									</label>
-								</div>
-								<br />
-							</c:forEach>
-							
-							<c:set var="answerIndex" value="${answerIndex+1}" />
-						</c:when>
-						
-						<c:when test="${question.type==8}"><%-- Dropdown menu --%>
-							<div class="hint">
-								<fmt:message key="label.learning.dropdown.hint" />
-							</div>
-							<c:if test="${horizontal}">
-								</td><td style="vertical-align: middle;">
-							</c:if>
-							
-							<form:select path="answer[${answerIndex}]"  cssClass="form-select">
-								<form:option value="0"><fmt:message key="label.learning.dropdown.select"/></form:option>
-								<c:forEach var="answerOption" items="${question.answerOptions}" varStatus="status">
-									<form:option value="${status.index+1}"><c:out value="${answerOption.answerOption}" escapeXml="true"/></form:option>
-								</c:forEach>
-							</form:select>
-							<c:set var="answerIndex" value="${answerIndex+1}" />
-						</c:when>
-						
-						<c:when test="${question.type==9}"><%-- Checkboxes --%>
-							<div class="hint">
-								<fmt:message key="label.learning.checkbox.hint" />
-							</div>
-							<c:if test="${horizontal}">
-								</td><td style="vertical-align: middle;">
-							</c:if>
-							
-							<form:hidden id="checkbox-${questionStatus.index+1}" path="answer[${answerIndex}]" />
-							<c:forEach var="answerOption" items="${question.answerOptions}" varStatus="status">
-								<div class="form-check">
-									${fn:substring(ordinal,status.index,status.index+1)}) 
-									<input type="checkbox" id="checkbox-${questionStatus.index+1}-${status.index+1}" value="${status.index+1}" class="form-check-input"/>
-									<label for="checkbox-${questionStatus.index+1}-${status.index+1}" class="form-check-label">
-										<c:out value="${answerOption.answerOption}" escapeXml="true"/>
-									</label>
-								</div>
-								<br/>
-							</c:forEach>
-							
-							<c:set var="answerIndex" value="${answerIndex+1}" />
-						</c:when>
-						
-						<c:when test="${question.type==10}"><%-- Longitude/latitude --%>
-							<div class="hint">
-								<fmt:message key="label.learning.longlat.hint" />
-							</div>
-							<c:if test="${horizontal}">
-								</td>
-								<td>
-							</c:if>
-							
-							<div class="form-horizontal">
-								<div class="mb-3  g-0">
-									<label class="col-sm-2 col-form-label"><fmt:message key="label.learning.longlat.longitude" /></label>
-									<div class="col-sm-2">
-									<form:input path="answer[${answerIndex}]" size="10"  cssClass="form-control "/>
+									
+									<c:if test="${horizontal}">
+										</div><div class="col" style="vertical-align: middle;">
+									</c:if>
+									
+									<form:select path="answer[${answerIndex}]"  cssClass="form-select">
+										<form:option value="0"><fmt:message key="label.learning.dropdown.select"/></form:option>
+										<c:forEach var="answerOption" items="${question.answerOptions}" varStatus="status">
+											<form:option value="${status.index+1}"><c:out value="${answerOption.answerOption}" escapeXml="true"/></form:option>
+										</c:forEach>
+									</form:select>
+									<c:set var="answerIndex" value="${answerIndex+1}" />
+								</c:when>
+								
+								<c:when test="${question.type==9}"><%-- Checkboxes --%>
+									<div class="hint">
+										<fmt:message key="label.learning.checkbox.hint" />
 									</div>
-									<div class="col-sm-1">
-									<p class="form-control-plaintext"><fmt:message key="label.learning.longlat.longitude.unit" /></p>
-									</div>								
-								</div>
-								<c:set var="answerIndex" value="${answerIndex+1}" />
-												
-								<div class="mb-3  g-0">
-									<label class="col-sm-2 col-form-label"><fmt:message key="label.learning.longlat.latitude" /></label>
-									<div class="col-sm-2">
-									<form:input path="answer[${answerIndex}]" size="10"  cssClass="form-control"/>
+									
+									<c:if test="${horizontal}">
+										</div><div class="col" style="vertical-align: middle;">
+									</c:if>
+									
+									<form:hidden id="checkbox-${questionStatus.index+1}" path="answer[${answerIndex}]" />
+									<c:forEach var="answerOption" items="${question.answerOptions}" varStatus="status">
+										<div class="form-check">
+											<input type="checkbox" id="checkbox-${questionStatus.index+1}-${status.index+1}" value="${status.index+1}" class="form-check-input"/>
+											<label for="checkbox-${questionStatus.index+1}-${status.index+1}" class="form-check-label">
+												${fn:substring(ordinal,status.index,status.index+1)})
+												 
+												<c:out value="${answerOption.answerOption}" escapeXml="true"/>
+											</label>
+										</div>
+									</c:forEach>
+									
+									<c:set var="answerIndex" value="${answerIndex+1}" />
+								</c:when>
+								
+								<c:when test="${question.type==10}"><%-- Longitude/latitude --%>
+									<div class="hint">
+										<fmt:message key="label.learning.longlat.hint" />
 									</div>
-									<div class="col-sm-1">
-									<p class="form-control-plaintext"><fmt:message key="label.learning.longlat.latitude.unit" /></p>
+									
+									<c:if test="${horizontal}">
+										</div>
+										<div class="col">
+									</c:if>
+									
+									<div class="form-horizontal">
+										<div class="row mb-3">
+											<label class="col-sm-2 col-form-label" for="answer${answerIndex}">
+												<fmt:message key="label.learning.longlat.longitude" />
+											</label>
+											
+											<div class="col-sm-2">
+												<form:input path="answer[${answerIndex}]" size="10"  cssClass="form-control "/>
+											</div>
+											
+											<div class="col-sm-1">
+												<p class="form-control-plaintext">
+													<fmt:message key="label.learning.longlat.longitude.unit" />
+												</p>
+											</div>
+																			
+										</div>
+										<c:set var="answerIndex" value="${answerIndex+1}" />
+														
+										<div class="row mb-3">
+											<label class="col-sm-2 col-form-label" for="answer${answerIndex}">
+												<fmt:message key="label.learning.longlat.latitude" />
+											</label>
+											
+											<div class="col-sm-2">
+												<form:input path="answer[${answerIndex}]" size="10"  cssClass="form-control"/>
+											</div>
+											
+											<div class="col-sm-1">
+												<p class="form-control-plaintext">
+													<fmt:message key="label.learning.longlat.latitude.unit" />
+												</p>
+											</div>
+										</div>
 									</div>
-								</div>
+									
+									<c:set var="answerIndex" value="${answerIndex+1}" />
+								</c:when>
+							</c:choose>
 							</div>
-							
-							<c:set var="answerIndex" value="${answerIndex+1}" />
-						</c:when>
-					</c:choose>
-					</td>
-				</tr>
-			</c:forEach>
-			<tr>
-				<td>
-					<c:if test="${mode != 'teacher'}">
-						<button type="submit" onclick="return saveOrUpdateRecord();" class="btn btn-sm btn-secondary btn-disable-on-submit mt-2 float-start"><i class="fa fa-plus"></i> <fmt:message key="label.learning.add" /></button>
-					</c:if>
-					<c:if test="${horizontal}">
-					</td><td style="vertical-align: middle;">
-				</c:if>					
-				</td>
-			</tr>
-		</table>
-
-
-	</form:form>
-</div>
-<!--  end record panel -->
-</c:if>
-
-<!-- Reflection -->
-<c:if test="${sessionMap.userFinished and daco.reflectOnActivity}">
-	<div class="panel panel-default">
-		<div class="panel-heading panel-title">
-			<fmt:message key="label.export.reflection.heading" />
+						</div>
+					</c:forEach>
+				</div>
+				
+				<c:if test="${mode != 'teacher'}">	
+					<div class="m-3 text-end">
+						<button type="submit" onclick="return saveOrUpdateRecord();" class="btn btn-sm btn-secondary btn-disable-on-submit mt-2">
+							<i class="fa fa-plus"></i> 
+							<fmt:message key="label.learning.add" />
+						</button>
+					</div>
+				</c:if>
+		
+			</form:form>
 		</div>
-		<div class="panel-body">
-			<div class="reflectionInstructions">
-				<lams:out value="${daco.reflectInstructions}" escapeHtml="true" />
-			</div>
-			<div class="panel">
-				<c:choose>
-					<c:when test="${empty sessionMap.reflectEntry}">
-						<em><fmt:message key="message.no.reflection.available" /></em>
-					</c:when>
-					<c:otherwise>
-						<lams:out escapeHtml="true" value="${sessionMap.reflectEntry}" />
-					</c:otherwise>
-				</c:choose>
-			</div>
+	<!--  end record panel -->
+	</c:if>
+	
+	<!-- Reflection -->
+	<c:if test="${sessionMap.userFinished and daco.reflectOnActivity}">
+		<lams:NotebookReedit
+			reflectInstructions="${daco.reflectInstructions}"
+			reflectEntry="${sessionMap.reflectEntry}"
+			isEditButtonEnabled="${mode != 'teacher'}"
+			notebookHeaderLabelKey="label.export.reflection.heading"
+			editNotebookLabelKey="label.common.edit"/>
+	</c:if>
 
-			<c:if test="${mode != 'teacher'}">
-				<button name="FinishButton" onclick="javascript:continueReflect()" class="btn btn-secondary float-start">
-					<fmt:message key="label.common.edit" />
-				</button>
-			</c:if>
-		</div>
-	</div>
-</c:if>
-<!-- End Reflection -->
-
 </div> <!-- End addRecordDiv -->
 <script type="text/javascript">
 	$("input[name='answer[0]']").focus();
Index: lams_tool_daco/web/pages/learning/learning.jsp
===================================================================
diff -u -rbc8213e12c4e5afddd0394ad66386ef3e70d1611 -rb31ac55045b51d2098eb4b66772e3d6e2a5a89b6
--- lams_tool_daco/web/pages/learning/learning.jsp	(.../learning.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
+++ lams_tool_daco/web/pages/learning/learning.jsp	(.../learning.jsp)	(revision b31ac55045b51d2098eb4b66772e3d6e2a5a89b6)
@@ -4,40 +4,53 @@
 <%@ page import="org.lamsfoundation.lams.util.Configuration" %>
 <%@ page import="org.lamsfoundation.lams.util.ConfigurationKeys" %>
 <%@ page import="org.lamsfoundation.lams.util.FileValidatorUtil" %>
+
+<c:set var="lams"><lams:LAMSURL/></c:set>
 <c:set var="UPLOAD_FILE_MAX_SIZE"><%=Configuration.get(ConfigurationKeys.UPLOAD_FILE_MAX_SIZE)%></c:set>
 <c:set var="UPLOAD_FILE_MAX_SIZE_AS_USER_STRING" scope="request"><%=FileValidatorUtil.formatSize(Configuration.getAsInt(ConfigurationKeys.UPLOAD_FILE_MAX_SIZE))%></c:set>
 <c:set var="EXE_STRING"><%=Configuration.get(ConfigurationKeys.EXE_EXTENSIONS)%></c:set>
+<c:if test="${not empty param.sessionMapID}">
+	<c:set var="sessionMapID" value="${param.sessionMapID}" />
+</c:if>
+<c:set var="sessionMap" value="${sessionScope[sessionMapID]}" />
+<c:set var="mode" value="${sessionMap.mode}" />
+<c:set var="toolSessionID" value="${sessionMap.toolSessionID}" />
+<c:set var="daco" value="${sessionMap.daco}" />
+<c:if test="${empty displayedRecordNumber}">
+	<c:set var="displayedRecordNumber" value="1" />
+</c:if>
+<c:choose>
+	<%-- To return to the previous tab.  --%>
+	<c:when test="${not empty sessionMap.learningCurrentTab}">
+		<c:set var="learningCurrentTab" value="${sessionMap.learningCurrentTab}" />
+	</c:when>
+	<c:otherwise>
+		<c:set var="learningCurrentTab" value="1" />
+	</c:otherwise>
+</c:choose>
+<%-- To switch between the vertical/horizontal view --%>
+<c:set var="ellipsisControl">
+<c:choose>
+	<c:when test="${sessionMap.learningView=='horizontal'}">
+		<i class="fa-solid fa-ellipsis ms-2" title="<fmt:message key="label.common.view.change" />"
+	 		onclick="javascript:changeView('${sessionMapID}',${displayedRecordNumber})" id="ellipsis"></i>
+	</c:when>
+	<c:otherwise>
+		<i class="fa-solid fa-ellipsis-vertical ms-2" title="<fmt:message key="label.common.view.change" />"
+	 		onclick="javascript:changeView('${sessionMapID}',${displayedRecordNumber})" id="ellipsis"></i>
+	</c:otherwise>
+</c:choose>
+</c:set> 
+<%-- push mode into request so it is available in the tab pages --%>
+<c:set var="mode" scope="request">${mode}</c:set>
 
-<lams:html>
-<lams:head>
-	<title><fmt:message key="label.learning.title" /></title>
-	<%@ include file="/common/header.jsp"%>
-	<lams:JSImport src="includes/javascript/upload.js" />
-	<lams:JSImport src="learning/includes/javascript/gate-check.js" />	
+<lams:PageLearner title="${daco.title}" toolSessionID="${sessionMap.toolSessionID}">
+	<link href="<c:url value='/includes/css/daco.css'/>" rel="stylesheet" type="text/css">
 	
-	<c:if test="${not empty param.sessionMapID}">
-		<c:set var="sessionMapID" value="${param.sessionMapID}" />
-	</c:if>
-	
-	<c:set var="sessionMap" value="${sessionScope[sessionMapID]}" />
-	<c:set var="mode" value="${sessionMap.mode}" />
-	<c:set var="toolSessionID" value="${sessionMap.toolSessionID}" />
-	<c:set var="daco" value="${sessionMap.daco}" />
-	
-	<c:if test="${empty displayedRecordNumber}">
-		<c:set var="displayedRecordNumber" value="1" />
-	</c:if>
-	
-	<c:choose>
-		<%-- To return to the previous tab.  --%>
-		<c:when test="${not empty sessionMap.learningCurrentTab}">
-			<c:set var="learningCurrentTab" value="${sessionMap.learningCurrentTab}" />
-		</c:when>
-		<c:otherwise>
-			<c:set var="learningCurrentTab" value="1" />
-		</c:otherwise>
-	</c:choose>
-	
+	<lams:JSImport src="includes/javascript/common.js" />
+	<lams:JSImport src="includes/javascript/dacoCommon.js" relative="true" />
+	<script type="text/javascript" src="${lams}includes/javascript/bootstrap5.tabcontroller.js"></script>    
+	<lams:JSImport src="includes/javascript/upload.js" />
 	<script type="text/javascript">
 		checkNextGateActivity('finishButton', '${toolSessionID}', '', function(){
 			finishSession();
@@ -60,71 +73,64 @@
 		<fmt:message key="error.attachment.must.be.image" var="LABEL_NOT_ALLOWED_FORMAT_VAR"/>
 		var LABEL_NOT_ALLOWED_FORMAT = '<c:out value="${LABEL_NOT_ALLOWED_FORMAT_VAR}" />';	
 
+		$(document).on('load', function(){
+			init();
+		});
     </script>
     <lams:JSImport src="includes/javascript/dacoLearning.js" relative="true" />
-</lams:head>
 
+	<div id="container-main">
 
-<body class="stripes" id="body" onLoad="init()">
-<lams:Page type="learner" title="${daco.title}" usePanel="false">
-
-<%-- To switch between the vertical/horizontal view --%>
-<c:set var="ellipsisControl">
-<c:choose>
-	<c:when test="${sessionMap.learningView=='horizontal'}">
-		<i class="fa-solid fa-ellipsis ms-2" title="<fmt:message key="label.common.view.change" />"
-	 		onclick="javascript:changeView('${sessionMapID}',${displayedRecordNumber})" id="ellipsis"></i>
-	</c:when>
-	<c:otherwise>
-		<i class="fa-solid fa-ellipsis-vertical ms-2" title="<fmt:message key="label.common.view.change" />"
-	 		onclick="javascript:changeView('${sessionMapID}',${displayedRecordNumber})" id="ellipsis"></i>
-	</c:otherwise>
-</c:choose>
-</c:set> 
-
-<%-- push mode into request so it is available in the tab pages --%>
-<c:set var="mode" scope="request">${mode}</c:set>
-
-<lams:Tabs control="true" title="${daco.title}" helpToolSignature="<%= DacoConstants.TOOL_SIGNATURE %>" helpModule="learning" extraControl="${ellipsisControl}">
- 	<lams:Tab id="1" key="label.learning.heading.add" />
- 	<lams:Tab id="2" key="label.learning.heading.list" />
-	<lams:Tab id="3" key="label.learning.heading.summary" />
-</lams:Tabs>	
-
-
-<lams:TabBodyArea>
-	<lams:TabBodys>
-	 	<lams:TabBody id="1" page="addRecord.jsp?displayedRecordNumber=${displayedRecordNumber}" />
- 		<lams:TabBody id="2" page="listRecords.jsp?includeMode=learning" />
-	 	<lams:TabBody id="3" page="questionSummaries.jsp" />
-	 </lams:TabBodys>
-
-<c:if test="${mode != 'teacher'}">
-		<c:choose>
-			<c:when test="${daco.reflectOnActivity && (not sessionMap.userFinished)}">
-				<button name="FinishButton" onclick="javascript:continueReflect()" class="btn btn-primary btn-disable-on-submit mt-2 float-end">
-					<fmt:message key="label.learning.continue" />
-				</button>
-			</c:when>
-			<c:otherwise>
-				<button type="submit" name="FinishButton" id="finishButton" class="btn btn-primary btn-disable-on-submit mt-2 float-end na">
-					<c:choose>
-		 					<c:when test="${sessionMap.isLastActivity}">
-		 						<fmt:message key="label.learning.submit" />
-		 					</c:when>
-		 					<c:otherwise>
-		 		 				<fmt:message key="label.learning.finished" />
-		 					</c:otherwise>
-		 				</c:choose>
-				</button>
-			</c:otherwise>
-		</c:choose>
-</c:if>
- 
-</lams:TabBodyArea>
-
-<div id="footer"></div>
-</lams:Page>
-
-</body>
-</lams:html>
\ No newline at end of file
+		<c:if test='${mode=="learner"}'>
+			<div id="instructions" class="instructions">
+				<c:out value="${daco.instructions}" escapeXml="false"/>
+			</div>
+		</c:if>
+		<div class="border-bottom float-end pb-2">
+			<button type="button" class="btn btn-secondary btn-sm" onclick="javascript:changeView('${sessionMapID}',${displayedRecordNumber})">
+				<i class="fa-solid ${sessionMap.learningView=='horizontal' ? 'fa-ellipsis' : 'fa-ellipsis-vertical'} me-2" 
+						title="<fmt:message key="label.common.view.change" />" id="ellipsis"></i>
+				<fmt:message key="label.common.view.change" />
+			</button>
+		</div>
+	
+		<nav>
+			 <div class="nav nav-tabs" id="tabs" role="tablist">
+			    <button class="nav-link active px-5" id="tab-1" data-bs-toggle="tab" data-bs-target="#tab-1-content" type="button" role="tab" aria-controls="tab-1-content" aria-selected="true"><fmt:message key="label.learning.heading.add" /></button>
+			    <button class="nav-link px-5"  		 id="tab-2" data-bs-toggle="tab" data-bs-target="#tab-2-content" type="button" role="tab" aria-controls="tab-2-content" aria-selected="false"><fmt:message key="label.learning.heading.list" /></button>
+			    <button class="nav-link px-5" 		 id="tab-3" data-bs-toggle="tab" data-bs-target="#tab-3-content" type="button" role="tab" aria-controls="tab-3-content" aria-selected="false"><fmt:message key="label.learning.heading.summary" /></button>
+			</div>
+		</nav>
+		<div class="tab-content m-3" id="tabs-content">
+			<div class="tab-pane fade show active"  id="tab-1-content" role="tabpanel" aria-labelledby="tab-1" tabindex="0"><jsp:include page="addRecord.jsp?displayedRecordNumber=${displayedRecordNumber}"/></div>
+			<div class="tab-pane fade" 				id="tab-2-content" role="tabpanel" aria-labelledby="tab-2" tabindex="0"><jsp:include page="listRecords.jsp?includeMode=learning"/></div>
+			<div class="tab-pane fade" 				id="tab-3-content" role="tabpanel" aria-labelledby="tab-3" tabindex="0"><jsp:include page="questionSummaries.jsp"/></div>
+		</div>
+	
+		<c:if test="${mode != 'teacher'}">
+			<div class="activity-bottom-buttons">
+				<c:choose>
+					<c:when test="${daco.reflectOnActivity && (not sessionMap.userFinished)}">
+						<button type="button" name="FinishButton" onclick="javascript:continueReflect()" class="btn btn-primary btn-disable-on-submit na">
+							<fmt:message key="label.learning.continue" />
+						</button>
+					</c:when>
+					
+					<c:otherwise>
+						<button type="submit" name="FinishButton" id="finishButton" class="btn btn-primary btn-disable-on-submit na">
+							<c:choose>
+				 				<c:when test="${sessionMap.isLastActivity}">
+				 					<fmt:message key="label.learning.submit" />
+				 				</c:when>
+				 				<c:otherwise>
+				 		 			<fmt:message key="label.learning.finished" />
+				 				</c:otherwise>
+				 			</c:choose>
+						</button>
+					</c:otherwise>
+				</c:choose>
+			</div>
+		</c:if>
+	
+	</div>
+</lams:PageLearner>
\ No newline at end of file
Index: lams_tool_daco/web/pages/learning/listRecords.jsp
===================================================================
diff -u -rbc8213e12c4e5afddd0394ad66386ef3e70d1611 -rb31ac55045b51d2098eb4b66772e3d6e2a5a89b6
--- lams_tool_daco/web/pages/learning/listRecords.jsp	(.../listRecords.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
+++ lams_tool_daco/web/pages/learning/listRecords.jsp	(.../listRecords.jsp)	(revision b31ac55045b51d2098eb4b66772e3d6e2a5a89b6)
@@ -1,32 +1,14 @@
-<%@page import="org.lamsfoundation.lams.web.util.SessionMap"%>
-<div id="recordListDiv">
-
 <%@ include file="/common/taglibs.jsp"%>
+<%@page import="org.lamsfoundation.lams.web.util.SessionMap"%>
 <%-- This page modifies its content depending on the page it was included from. --%>
-<c:if test="${not empty param.includeMode}">
-	<c:set var="includeMode" value="${param.includeMode}" />
-</c:if>
-<c:if test="${empty includeMode}">
-	<c:set var="includeMode" value="learning" />
-</c:if>
-
-<c:if test="${not empty param.sessionMapID}">
-	<c:set var="sessionMapID" value="${param.sessionMapID}" />
-</c:if>
+<c:if test="${not empty param.includeMode}"><c:set var="includeMode" value="${param.includeMode}" /></c:if>
+<c:if test="${empty includeMode}"><c:set var="includeMode" value="learning" /></c:if>
+<c:if test="${not empty param.sessionMapID}"><c:set var="sessionMapID" value="${param.sessionMapID}" /></c:if>
 <c:set var="sessionMap" value="${sessionScope[sessionMapID]}" />
 <c:set var="daco" value="${sessionMap.daco}" />
-
-<c:set var="tool">
-	<lams:WebAppURL />
-</c:set>
+<c:set var="tool"><lams:WebAppURL /></c:set>
 <%-- Whether to display the vertical or horizontal view. --%>
 <c:set var="horizontal" value="${sessionMap.learningView=='horizontal'}" />
-<c:if test="${empty isIE}"> 
-	<%-- Some elements are displayed differently depending on the browser. --%>
-	<c:if test="${fn:contains(header['User-Agent'],'MSIE')}">
-		<c:set var="isIE" value='true' scope="session" />
-	</c:if>
-</c:if>
 <c:set var="finishedLock" value="${sessionMap.finishedLock}" />
 <c:choose>
 	<%-- This page can be included multiple times on a single master page. That is why element IDs need prefixes. --%>
@@ -37,64 +19,60 @@
 		<c:set var="elementIdPrefix" value="user${user.uid}-" />
 	</c:otherwise>
 </c:choose>
-<script type="text/javascript">
-	var editRecordUrl = "<c:url value='/learning/editRecord.do' />";
-	var removeRecordUrl = "<c:url value='/learning/removeRecord.do' />";
-</script>
 <c:if test="${empty recordList}">
 	<%-- In some cases record list is passed as an attribute, in other - in session map. --%>
 	<c:set var="recordList" value="${sessionMap.recordList}" />
 </c:if>
 
-<c:if test='${includeMode=="learning"}'>
-<div class="mt-2">
-<div class="panel">
-	<c:out value="${daco.instructions}" escapeXml="false"/>
-</div>
-</div>
-</c:if>
+<script type="text/javascript">
+	var editRecordUrl = "<c:url value='/learning/editRecord.do' />";
+	var removeRecordUrl = "<c:url value='/learning/removeRecord.do' />";
+</script>
 
-<c:choose>
-	<c:when test="${ empty recordList}">
-		<lams:Alert type="info">
-			<fmt:message key="label.learning.heading.norecords" />
-		</lams:Alert>
-	</c:when>
-	<c:otherwise>
-
-			<h4><fmt:message key="label.learning.heading.recordcount" />: ${fn:length(recordList)}</h4>
-
+<div id="recordListDiv">
+	<c:choose>
+		<c:when test="${ empty recordList}">
+			<lams:Alert5 type="info">
+				<fmt:message key="label.learning.heading.norecords" />
+			</lams:Alert5>
+		</c:when>
+		
+		<c:otherwise>
+			<lams:Alert5 type="success">
+				<fmt:message key="label.learning.heading.recordcount" />: ${fn:length(recordList)}
+			</lams:Alert5>
+	
 			<c:choose>
-			<c:when test="${horizontal}">
-
-				<div class="container-fluid g-0">
+				<c:when test="${horizontal}">
 					<div class="row">
 						<div class="col-2" style="padding:0">
 							<strong><fmt:message key="label.learning.tableheader.questions" /></strong>
 						</div>
+							
 						<div class="col-9" style="padding-left:0">
-						<strong><fmt:message key="label.learning.tableheader.records" /></strong>
-						<c:if test="${fn:length(recordList) > 1}"></c:if>						
+							<strong><fmt:message key="label.learning.tableheader.records" /></strong>					
 						</div>
 					</div>
-
+	
 					<div class="row">
-						<div class="col-2" style="padding:0">
-							<table id="recordListTable" class="table table-striped table-bordered table-sm">
-								<tr>
-								<td style="height:50px" style="padding-right:0"><fmt:message key="label.learning.tableheader.recordnumber" /></td>
-								</tr>
+						<div class="col-2 p-0">
+							<div id="recordListTable" class="ltable table-striped table-bordered table-sm no-header">
+								<div class="row border">
+									<div class="pe-0" style="height:50px;">
+										<fmt:message key="label.learning.tableheader.recordnumber" />
+									</div>
+								</div>
 								<c:forEach var="question" items="${daco.dacoQuestions}" varStatus="questionStatus">
-									<tr>
-										<td class="fixedCellHeight">
+									<div class="row border">
+										<div class="fixedCellHeight">
 											<!-- <div class="bigNumber">${questionStatus.index+1}</div> -->
 											<c:out value="${question.description}" escapeXml="false"/>
-										</td>	
-									</tr>
+										</div>	
+									</div>
 								</c:forEach>
-							</table>
+							</div>
 						</div>
-						
+							
 						<%-- Link that displayes the horizontal record list --%>
 						<c:url var="showRecordsUrl" value='/learning/diplayHorizontalRecordList.do'>
 							<c:param name="sessionMapID" value="${sessionMapID}" />
@@ -103,204 +81,200 @@
 							</c:if>
 							<c:param name="includeMode" value="${includeMode}" />
 						</c:url>
-
-						<div class="col-10" style="padding-left:0;overflow: scroll" id="${elementIdPrefix}horizontalRecordListFrame"></div>
+	
+						<div class="col-10 ps-0" id="${elementIdPrefix}horizontalRecordListFrame"></div>
 						<script type="text/javascript">
 							$("#${elementIdPrefix}horizontalRecordListFrame").load("${showRecordsUrl}");
-					    </script>
-					</div> <!--  end row -->
-				 </div> <!-- end container -->
-				
-				
-			</c:when>
-			<c:otherwise>
-				<%-- Vertical view displays records as separate tables of answers. --%>
-				<c:forEach var="record" items="${recordList}" varStatus="recordStatus">
-				<!--  record panel  -->
-				<div class="panel panel-default">
-					<div class="panel-heading panel-title">
-						<fmt:message key="label.learning.heading.recordnumber" />&nbsp;${recordStatus.index+1}
-						<c:if test='${includeMode=="learning" and not finishedLock}'>
-						<%-- If the record can be edited, display these links. --%>
-							<i class="fa fa-pencil float-end me-2" title="<fmt:message key="label.common.edit" />"
-										onclick="javascript:editRecord('${sessionMapID}',${recordStatus.index+1})"></i>
-							<i class="fa fa-times  float-end me-2" title="<fmt:message key="label.common.delete" />"
-										onclick="javascript:removeRecord('${sessionMapID}',${recordStatus.index+1})"></i>
-						</c:if>
+						</script>
 					</div>
-					<table class="table table-striped table-sm">
-						<c:forEach var="question" items="${daco.dacoQuestions}" varStatus="questionStatus">
-							<%-- "Generated" means that the table for a long/lat question was already generated
-								 and the current answer only needs to be filled in in the existing textfield.
-							--%>
-							<c:set var="generated" value="false" />
-							<c:forEach var="answer" items="${record}" varStatus="answerStatus">
-								<c:if test="${answer.question.uid==question.uid}">
-									<c:choose>
-									<c:when test="${generated}">
-										<c:if test="${question.type==10}">
-											<c:if test="${not empty question.answerOptions and not empty longitude}">
-												<c:set var="mapLinks">
-													<c:forEach var="selectedMap" items="${question.answerOptions}">
-														<%-- Display the links for external maps,
-														where the longitude and latitude can be marked and shown.
-														Strange syntax of this var (mapLinks) comes from later usage in a javascript.--%>
-														<c:choose>
-															<c:when test="${selectedMap.answerOption=='Google Maps'}">
-																'<a onclick="javascript:launchPopup('+"'http://maps.google.com/maps?q=${longitude},+${answer.answer}&iwloc=A&hl=en','LAMS');"+'" href="#">${selectedMap.answerOption}</a><br />'+
-															</c:when>
-															<c:when test="${selectedMap.answerOption=='Geabios'}">
-																'<a onclick="javascript:launchPopup('+"'http://www.geabios.com/html/services/maps/PublicMap.htm?lat=${answer.answer}&lon=${longitude}&fov=0.3&title=LAMS','LAMS'); "+'" href="#">${selectedMap.answerOption}</a><br />'+
-															</c:when>
-															<c:when test="${selectedMap.answerOption=='Open Street Map'}">
-																'<a onclick="javascript:launchPopup('+"'http://www.openstreetmap.org/index.html?lat=${answer.answer}&lon=${longitude}&zoom=11','LAMS'); "+'" href="#">${selectedMap.answerOption}</a><br />'+
-															</c:when>
-															<c:when test="${selectedMap.answerOption=='Multimap'}">
-																'<a onclick="javascript:launchPopup('+"'http://www.multimap.com/map/browse.cgi?scale=200000&lon=${longitude}&lat=${answer.answer}&icon=x','LAMS'); "+'" href="#">${selectedMap.answerOption}</a><br />'+
-															</c:when>
-														</c:choose>
-													</c:forEach>
-												</c:set>
+				</c:when>
+				
+				<c:otherwise>
+					<%-- Vertical view displays records as separate tables of answers. --%>
+					<c:forEach var="record" items="${recordList}" varStatus="recordStatus">
+					<!--  record panel  -->
+					<div class="card lcard">
+						<div class="card-header">
+							<fmt:message key="label.learning.heading.recordnumber" />&nbsp;${recordStatus.index+1}
+							
+							<c:if test='${includeMode=="learning" and not finishedLock}'>
+							<%-- If the record can be edited, display these links. --%>
+								
+								<div class="float-end">
+									<button type="button" class="no-decoration fa fa-trash text-bg-danger shadow rounded p-2"
+									   title="<fmt:message key="label.common.delete" />"
+									   aria-label="<spring:escapeBody javaScriptEscape='true'><fmt:message key="label.common.delete" /></spring:escapeBody>"
+									   onclick="javascript:removeRecord('${sessionMapID}',${recordStatus.index+1})">
+									 </button>
+									 
+									<button type="button" class="no-decoration fa fa-pencil text-bg-light shadow rounded p-2 ms-2"
+									   title="<fmt:message key="label.common.edit" />"
+									   aria-label="<spring:escapeBody javaScriptEscape='true'><fmt:message key="label.common.edit" /></spring:escapeBody>"
+									   onclick="javascript:editRecord('${sessionMapID}',${recordStatus.index+1})">
+									 </button>
+								 </div>
+							</c:if>
+						</div>
+						
+						<div class="ltable table-striped table-sm no-header">
+							<c:forEach var="question" items="${daco.dacoQuestions}" varStatus="questionStatus">
+								<%-- "Generated" means that the table for a long/lat question was already generated
+									 and the current answer only needs to be filled in in the existing textfield.
+								--%>
+								<c:set var="generated" value="false" />
+								<c:forEach var="answer" items="${record}" varStatus="answerStatus">
+									<c:if test="${answer.question.uid==question.uid}">
+										<c:choose>
+										<c:when test="${generated}">
+											<c:if test="${question.type==10}">
+												<c:if test="${not empty question.answerOptions and not empty longitude}">
+													<c:set var="mapLinks">
+														<c:forEach var="selectedMap" items="${question.answerOptions}">
+															<%-- Display the links for external maps,
+															where the longitude and latitude can be marked and shown.
+															Strange syntax of this var (mapLinks) comes from later usage in a javascript.--%>
+															<c:choose>
+																<c:when test="${selectedMap.answerOption=='Google Maps'}">
+																	'<button type="button" class="btn btn-secondary" onclick="javascript:launchPopup('+"'http://maps.google.com/maps?q=${longitude},+${answer.answer}&iwloc=A&hl=en','LAMS');"+'">${selectedMap.answerOption}</button>'+
+																</c:when>
+																<c:when test="${selectedMap.answerOption=='Geabios'}">
+																	'<button type="button" class="btn btn-secondary" onclick="javascript:launchPopup('+"'http://www.geabios.com/html/services/maps/PublicMap.htm?lat=${answer.answer}&lon=${longitude}&fov=0.3&title=LAMS','LAMS'); "+'">${selectedMap.answerOption}</button>'+
+																</c:when>
+																<c:when test="${selectedMap.answerOption=='Open Street Map'}">
+																	'<button type="button" class="btn btn-secondary" onclick="javascript:launchPopup('+"'http://www.openstreetmap.org/index.html?lat=${answer.answer}&lon=${longitude}&zoom=11','LAMS'); "+'">${selectedMap.answerOption}</button>'+
+																</c:when>
+																<c:when test="${selectedMap.answerOption=='Multimap'}">
+																	'<button type="button" class="btn btn-secondary" class="btn btn-secondary" onclick="javascript:launchPopup('+"'http://www.multimap.com/map/browse.cgi?scale=200000&lon=${longitude}&lat=${answer.answer}&icon=x','LAMS'); "+'">${selectedMap.answerOption}</button>'+
+																</c:when>
+															</c:choose>
+														</c:forEach>
+													</c:set>
+													<script type="text/javascript">
+														<%-- Fill the existing cell in long/lat question table with created links. --%>
+														document.getElementById("${elementIdPrefix}maplinks-record${recordStatus.index+1}-question${questionStatus.index+1}").innerHTML=''+${mapLinks}'';
+													</script>
+												</c:if>
 												<script type="text/javascript">
-													<%-- Fill the existing cell in long/lat question table with created links. --%>
-													document.getElementById("${elementIdPrefix}maplinks-record${recordStatus.index+1}-question${questionStatus.index+1}").innerHTML=''+${mapLinks}'';
+													<%-- Set the value of latitude in long/lat question according to the answer. --%>
+													document.getElementById("${elementIdPrefix}latitude-record${recordStatus.index+1}-question${questionStatus.index+1}").innerHTML="${answer.answer}";
 												</script>
 											</c:if>
-											<script type="text/javascript">
-												<%-- Set the value of latitude in long/lat question according to the answer. --%>
-												setValue("${elementIdPrefix}latitude-record${recordStatus.index+1}-question${questionStatus.index+1}","${answer.answer}");
-											</script>
-										</c:if>
-									</c:when>
-									<c:otherwise>
-										<c:set var="generated" value="true" />
-										<tr>
-											<td>
-											<!-- <div class="bigNumber">${questionStatus.index+1}</div> -->
-											<c:out value="${question.description}" escapeXml="false"/>
-											<c:choose>
-												<c:when test="${question.type==1}">
-													<input type="text" size="60" readonly="readonly" value="<c:out  value='${answer.answer}'/>">
-												</c:when>
-												<c:when test="${question.type==2}">
-													<textarea  cols="60" rows="3" readonly="readonly">${answer.answer}</textarea>
-												</c:when>
-												<c:when test="${question.type==3}">
-													<input type="text" size="10" readonly="readonly" value="<c:out  value='${answer.answer}'/>">
-												</c:when>
-												<c:when test="${question.type==4}">
-													<input type="text" size="20" readonly="readonly" value="<c:out  value='${answer.answer}'/>">
-												</c:when>
+										</c:when>
+										
+										<c:otherwise>
+											<c:set var="generated" value="true" />
+											<div class="row py-3">
+												<!-- <div class="bigNumber">${questionStatus.index+1}</div> -->
+												<c:out value="${question.description}" escapeXml="false"/>
 												
-												<c:when test="${question.type==5 || question.type==6}">
-													<c:choose>
-														<c:when test="${empty answer.fileName}">
-															<fmt:message key="label.learning.file.notuploaded" />
-														</c:when>
-														<c:otherwise>
-															<fmt:message key="label.learning.file.uploaded" />&nbsp;
-															<a href="<c:url value='/download/?uuid=${answer.fileDisplayUuid}&preferDownload=true'/>">${answer.fileName}</a>
-														</c:otherwise>
-													</c:choose>
-												</c:when>
-												
-												<c:when test="${question.type==7}">
-													<c:forEach var="answerOption" items="${question.answerOptions}" varStatus="status">
-														<div class="form-check">
-															<input type="radio" readonly="readonly" id="answerOption-${questionStatus.index}-${status.index}" class="form-check-input"
-																	<c:if test="${answer.answer==status.index+1}">
-																		checked="checked"
-																	</c:if>
-															>
-															&nbsp;
-															<label for="answerOption-${questionStatus.index}-${status.index}" class="form-check-label">
-																<c:out value="${answerOption.answerOption}" escapeXml="true"/>
-															</label>
+												<div>
+												<c:choose>
+													<c:when test="${question.type==1 || question.type==2 || question.type==3 || question.type==4}">
+														<c:out  value='${answer.answer}'/>
+													</c:when>
+													
+													<c:when test="${question.type==5 || question.type==6}">
+														<c:choose>
+															<c:when test="${empty answer.fileName}">
+																<fmt:message key="label.learning.file.notuploaded" />
+															</c:when>
+															<c:otherwise>
+																<fmt:message key="label.learning.file.uploaded" />&nbsp;
+																<a class="link-primary bg-body" href="<c:url value='/download/?uuid=${answer.fileDisplayUuid}&preferDownload=true'/>">${answer.fileName}</a>
+															</c:otherwise>
+														</c:choose>
+													</c:when>
+													
+													<c:when test="${question.type==7}">
+														<div>
+															<c:forEach var="answerOption" items="${question.answerOptions}" varStatus="status">
+																<div class="form-check">
+																	<input type="radio" readonly="readonly" disabled id="answerOption-${questionStatus.index}-${status.index}-${recordStatus.index}" class="form-check-input"
+																			<c:if test="${answer.answer==status.index+1}">
+																				checked="checked"
+																			</c:if>
+																	>
+																	<label for="answerOption-${questionStatus.index}-${status.index}-${recordStatus.index}" class="form-check-label">
+																		<c:out value="${answerOption.answerOption}" escapeXml="true"/>
+																	</label>
+																</div>
+															</c:forEach>
 														</div>
-														<br />
-													</c:forEach>
-												</c:when>
-												
-												<c:when test="${question.type==8}">
-													<c:choose>
-														<c:when test="${empty answer.answer}">
-															<fmt:message key="label.learning.dropdown.noneselected" />
-														</c:when>
-														<c:otherwise>
+													</c:when>
+													
+													<c:when test="${question.type==8}">
+														<c:choose>
+															<c:when test="${empty answer.answer}">
+																<fmt:message key="label.learning.dropdown.noneselected" />
+															</c:when>
+															<c:otherwise>
+																<c:forEach var="answerOption" items="${question.answerOptions}" varStatus="status">
+																	<c:if test="${status.index+1==answer.answer}">
+																		<fmt:message key="label.learning.dropdown.selected" />&nbsp;<c:out value="${answerOption.answerOption}" escapeXml="true"/>
+																	</c:if>
+																</c:forEach>
+															</c:otherwise>
+														</c:choose>
+													</c:when>
+													
+													<c:when test="${question.type==9}">
+														<div>
 															<c:forEach var="answerOption" items="${question.answerOptions}" varStatus="status">
-																<c:if test="${status.index+1==answer.answer}">
-																	<fmt:message key="label.learning.dropdown.selected" />&nbsp;<c:out value="${answerOption.answerOption}" escapeXml="true"/>
-																</c:if>
+																<div class="form-check">
+																	<input type="checkbox" disabled="disabled" class="form-check-input" 
+																			id="${elementIdPrefix}checkbox-record${recordStatus.index+1}-question${questionStatus.index+1}-${status.index+1}">
+																	<label for="${elementIdPrefix}checkbox-record${recordStatus.index+1}-question${questionStatus.index+1}-${status.index+1}" class="form-check-label">
+																		<c:out value="${answerOption.answerOption}" escapeXml="true"/>
+																	</label>
+																</div>
 															</c:forEach>
-														</c:otherwise>
-													</c:choose>
-												</c:when>
-												
-												<c:when test="${question.type==9}">
-													<c:forEach var="answerOption" items="${question.answerOptions}" varStatus="status">
-														<div class="form-check">
-															<input type="checkbox" disabled="disabled" class="form-check-input" 
-																id="${elementIdPrefix}checkbox-record${recordStatus.index+1}-question${questionStatus.index+1}-${status.index+1}"
-															>
-															&nbsp;
-															<label for="${elementIdPrefix}checkbox-record${recordStatus.index+1}-question${questionStatus.index+1}-${status.index+1}" class="form-check-label">
-																<c:out value="${answerOption.answerOption}" escapeXml="true"/>
-															</label>
 														</div>
-														<br />
-													</c:forEach>
-												</c:when>
-												
-												<c:when test="${question.type==10}">
-													<table class="table table-sm table-no-border table-nonfluid">
-														<tr>
-															<td width="80px">
-																<label><fmt:message key="label.learning.longlat.longitude" /></label>
-															</td>
-															<td>
+													</c:when>
+													
+													<c:when test="${question.type==10}">
+														<div>
+															<div>
+																<fmt:message key="label.learning.longlat.longitude" />&nbsp;
 																<c:set var="longitude"><c:out  value='${answer.answer}'/></c:set>
-																<input type="text" size="10" readonly="readonly" value="${longitude}">
-																<label><fmt:message key="label.learning.longlat.longitude.unit" /></label><br />
-															</td>
-															<c:if test="${not empty question.answerOptions and not empty longitude}">
-																<%-- A placeholder for external maps links --%>
-																<td rowspan="2" id="${elementIdPrefix}maplinks-record${recordStatus.index+1}-question${questionStatus.index+1}">
-																</td>
-															</c:if>						
-														</tr>
-														<tr>
-															<td>
-																<label><fmt:message key="label.learning.longlat.latitude" /></label>
-															</td>
-															<td>
-																<input type="text" size="10" readonly="readonly" id="${elementIdPrefix}latitude-record${recordStatus.index+1}-question${questionStatus.index+1}">
-																<label><fmt:message key="label.learning.longlat.latitude.unit" /></label>
-																<br />
-															</td>
-														</tr>
-													</table>
-												</c:when>
-											</c:choose>
-											</td>
-										</tr>
-									</c:otherwise>
-									</c:choose>
-									<c:if test="${question.type==9 && (not empty answer.answer)}">
-										<%-- Each answer contains one piece of information: whether the checkbox is checked or not.
-											Since the whole table is generated for the first answer,
-											other answers simply check the existing boxes. --%>
-										<script type="text/javascript">
-											checkCheckbox("${elementIdPrefix}checkbox-record${recordStatus.index+1}-question${questionStatus.index+1}-${answer.answer}");
-										</script>
+																${longitude}&nbsp;
+																<fmt:message key="label.learning.longlat.longitude.unit" />
+															</div>
+															
+															<div>
+																<fmt:message key="label.learning.longlat.latitude" />&nbsp;
+																<span id="${elementIdPrefix}latitude-record${recordStatus.index+1}-question${questionStatus.index+1}"></span>&nbsp;
+																<fmt:message key="label.learning.longlat.latitude.unit" />	
+																	
+																<c:if test="${not empty question.answerOptions and not empty longitude}">
+																	<%-- A placeholder for external maps links --%>
+																	<div id="${elementIdPrefix}maplinks-record${recordStatus.index+1}-question${questionStatus.index+1}" class="float-end">
+																	</div>
+																</c:if>	
+															</div>
+														</div>
+													</c:when>
+												</c:choose>
+												</div>
+											</div>
+										</c:otherwise>
+										</c:choose>
+										
+										<c:if test="${question.type==9 && (not empty answer.answer)}">
+											<%-- Each answer contains one piece of information: whether the checkbox is checked or not.
+												Since the whole table is generated for the first answer,
+												other answers simply check the existing boxes. --%>
+											<script type="text/javascript">
+												checkCheckbox("${elementIdPrefix}checkbox-record${recordStatus.index+1}-question${questionStatus.index+1}-${answer.answer}");
+											</script>
+										</c:if>
 									</c:if>
-								</c:if>
+								</c:forEach>
 							</c:forEach>
-						</c:forEach>
-					</table>
-				</div> <!--  end record panel -->		
-				</c:forEach>
-			</c:otherwise>
-		</c:choose> <!--  end vertical/horizontal -->
-	</c:otherwise> 
-</c:choose>
-</div>
\ No newline at end of file
+						</div>
+					</div> <!--  end record panel -->		
+					</c:forEach>
+				</c:otherwise>
+			</c:choose> <!--  end vertical/horizontal -->
+		</c:otherwise> 
+	</c:choose>
+</div>
Index: lams_tool_daco/web/pages/learning/listRecordsHorizontalPart.jsp
===================================================================
diff -u -rbc8213e12c4e5afddd0394ad66386ef3e70d1611 -rb31ac55045b51d2098eb4b66772e3d6e2a5a89b6
--- lams_tool_daco/web/pages/learning/listRecordsHorizontalPart.jsp	(.../listRecordsHorizontalPart.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
+++ lams_tool_daco/web/pages/learning/listRecordsHorizontalPart.jsp	(.../listRecordsHorizontalPart.jsp)	(revision b31ac55045b51d2098eb4b66772e3d6e2a5a89b6)
@@ -1,74 +1,76 @@
 <!DOCTYPE html>
-		
-
 <%@ include file="/common/taglibs.jsp"%>
-<lams:html>
-<lams:head>
-	<%@ include file="/common/header.jsp"%>
-	<c:set var="sessionMapID" value="${param.sessionMapID}" />
-	<c:set var="sessionMap" value="${sessionScope[sessionMapID]}" />
-	<c:set var="daco" value="${sessionMap.daco}" />
-	<c:set var="tool">
-		<lams:WebAppURL />
-	</c:set>
-	<%-- This page modifies its content depending on the page it was included from. --%>
-	<c:set var="includeMode" value="${param.includeMode}" />
-	<c:set var="finishedLock" value="${sessionMap.finishedLock}" />
-	<%-- It contains users info divided into sessions. --%>
-	<c:set var="monitoringSummary" value="${sessionMap.monitoringSummary}" />
+<c:set var="lams"><lams:LAMSURL/></c:set>
+<c:set var="sessionMapID" value="${param.sessionMapID}" />
+<c:set var="sessionMap" value="${sessionScope[sessionMapID]}" />
+<c:set var="daco" value="${sessionMap.daco}" />
+<%-- This page modifies its content depending on the page it was included from. --%>
+<c:set var="includeMode" value="${param.includeMode}" />
+<c:set var="finishedLock" value="${sessionMap.finishedLock}" />
+<%-- It contains users info divided into sessions. --%>
+<c:set var="monitoringSummary" value="${sessionMap.monitoringSummary}" />
+<c:choose>
+	<%-- Record list comes from different sources, depending on the including page. --%>
+	<c:when test="${includeMode=='learning'}">
+		<c:set var="recordList" value="${sessionMap.recordList}" />
+	</c:when>
+	<c:otherwise>
+		<c:forEach var="user" items="${monitoringSummary.users}">
+			<c:if test="${param.userId==user.userId}">
+				<c:set var="recordList" value="${user.records}" />
+			</c:if>
+		</c:forEach>
+	</c:otherwise>
+</c:choose>
 
-	<lams:css/>
-	<%-- To enable the table to have maximum height.  --%>
-	<style type="text/css">
-		html,body {
-			height: 100%;
-		}
-	</style>
-	<link href="<lams:WebAppURL/>includes/css/daco.css" rel="stylesheet" type="text/css">
-	<script type="text/javascript">
-		var editRecordUrl = "<lams:WebAppURL/>earning/editRecord.do";
-		var removeRecordUrl = "<lams:WebAppURL/>learning/removeRecord.do";
-		var recordListLength = "${fn:length(recordList)}";
-	</script>
-	<lams:JSImport src="includes/javascript/dacoLearning.js" relative="true" />
-</lams:head>
-<body class="tabpart">
+<%-- To enable the table to have maximum height.  --%>
+<style type="text/css">
+	html,body {
+		height: 100%;
+	}
+</style>
+<link href="<lams:WebAppURL/>includes/css/daco.css" rel="stylesheet" type="text/css">
 	
-	<c:choose>
-		<%-- Record list comes from different sources, depending on the including page. --%>
-		<c:when test="${includeMode=='learning'}">
-			<c:set var="recordList" value="${sessionMap.recordList}" />
-		</c:when>
-		<c:otherwise>
-			<c:forEach var="user" items="${monitoringSummary.users}">
-				<c:if test="${param.userId==user.userId}">
-					<c:set var="recordList" value="${user.records}" />
-				</c:if>
-			</c:forEach>
-		</c:otherwise>
-	</c:choose>
+<lams:JSImport src="includes/javascript/common.js" />
+<lams:JSImport src="includes/javascript/dacoCommon.js" relative="true" />
+<script type="text/javascript" src="${lams}includes/javascript/bootstrap5.tabcontroller.js"></script>    
+<script type="text/javascript">
+	var editRecordUrl = "<lams:WebAppURL/>earning/editRecord.do";
+	var removeRecordUrl = "<lams:WebAppURL/>learning/removeRecord.do";
+	var recordListLength = "${fn:length(recordList)}";
+</script>
+<lams:JSImport src="includes/javascript/dacoLearning.js" relative="true" />
 
-	<table id="horizontalListTable" class="table table-striped table-bordered table-sm">
-		<tr>
- 			<c:forEach var="record" items="${recordList}" varStatus="recordStatus">
-				<td style="height:50px">
-					<span class="bigNumber">
-						${recordStatus.index+1}
-					</span>
-					<c:if test='${includeMode=="learning" and not finishedLock}'>
-						<span class="float-end me-2">
+<div id="horizontalListTable" class="ltable table-striped table-sm no-header">
+	<div class="row border">
+ 		<c:forEach var="record" items="${recordList}" varStatus="recordStatus">
+			<div class="col border-end" style="height:50px">
+				<span class="bigNumber">
+					${recordStatus.index+1}
+				</span>
+					
+				<c:if test='${includeMode=="learning" and not finishedLock}'>
+					<span class="float-end me-2">
 						<%-- If the record can be edited, display these links. --%>
-						<i class="fa fa-pencil" title="<fmt:message key="label.common.edit" />"
-									onclick="javascript:editRecord('${sessionMapID}',${recordStatus.index+1})"></i>
-						<i class="fa fa-times" title="<fmt:message key="label.common.delete" />"
-									onclick="javascript:removeRecord('${sessionMapID}',${recordStatus.index+1})"></i>
-						</span>
-					</c:if>
-				</td>
-			</c:forEach>
-		</tr>
-		<c:forEach var="question" items="${daco.dacoQuestions}" varStatus="questionStatus">	
-		<tr>
+						<button type="button" class="no-decoration fa fa-trash text-bg-danger shadow rounded p-2"
+							   title="<fmt:message key="label.common.delete" />"
+							   aria-label="<spring:escapeBody javaScriptEscape='true'><fmt:message key="label.common.delete" /></spring:escapeBody>"
+							   onclick="javascript:removeRecord('${sessionMapID}',${recordStatus.index+1})">
+						 </button>
+									 
+						<button type="button" class="no-decoration fa fa-pencil text-bg-light shadow rounded p-2 ms-2"
+							   title="<fmt:message key="label.common.edit" />"
+							   aria-label="<spring:escapeBody javaScriptEscape='true'><fmt:message key="label.common.edit" /></spring:escapeBody>"
+							   onclick="javascript:editRecord('${sessionMapID}',${recordStatus.index+1})">
+						 </button>
+					</span>
+				</c:if>
+			</div>
+		</c:forEach>
+	</div>
+		
+	<c:forEach var="question" items="${daco.dacoQuestions}" varStatus="questionStatus">	
+		<div class="row border">
 			<c:forEach var="record" items="${recordList}" varStatus="recordStatus">
 			<%-- For comments on the structure, see "learning/listRecords.jsp" --%>
 				<c:set var="generated" value="false" />
@@ -82,16 +84,16 @@
 											<c:forEach var="selectedMap" items="${question.answerOptions}">
 												<c:choose>
 													<c:when test="${selectedMap.answerOption=='Google Maps'}">
-														'<a onclick="javascript:launchPopup('+"'http://maps.google.com/maps?q=${longitude},+${answer.answer}&iwloc=A&hl=en','LAMS');"+'" href="#">${selectedMap.answerOption}</a> '+
+														'<button type="button" class="btn btn-light" onclick="javascript:launchPopup('+"'http://maps.google.com/maps?q=${longitude},+${answer.answer}&iwloc=A&hl=en','LAMS');"+'">${selectedMap.answerOption}</button> '+
 													</c:when>
 													<c:when test="${selectedMap.answerOption=='Geabios'}">
-														'<a onclick="javascript:launchPopup('+"'http://www.geabios.com/html/services/maps/PublicMap.htm?lat=${answer.answer}&lon=${longitude}&fov=0.3&title=LAMS','LAMS'); "+'" href="#">${selectedMap.answerOption}</a> '+
+														<button type="button" class="btn btn-light" onclick="javascript:launchPopup('+"'http://www.geabios.com/html/services/maps/PublicMap.htm?lat=${answer.answer}&lon=${longitude}&fov=0.3&title=LAMS','LAMS'); "+'">${selectedMap.answerOption}</button> '+
 													</c:when>
 													<c:when test="${selectedMap.answerOption=='Open Street Map'}">
-														'<a onclick="javascript:launchPopup('+"'http://www.openstreetmap.org/index.html?lat=${answer.answer}&lon=${longitude}&zoom=11','LAMS'); "+'" href="#">${selectedMap.answerOption}</a> '+
+														'<button type="button" class="btn btn-light" onclick="javascript:launchPopup('+"'http://www.openstreetmap.org/index.html?lat=${answer.answer}&lon=${longitude}&zoom=11','LAMS'); "+'">${selectedMap.answerOption}</button> '+
 													</c:when>
 													<c:when test="${selectedMap.answerOption=='Multimap'}">
-														'<a onclick="javascript:launchPopup('+"'http://www.multimap.com/map/browse.cgi?scale=200000&lon=${longitude}&lat=${answer.answer}&icon=x','LAMS'); "+'" href="#">${selectedMap.answerOption}</a> '+
+														'<button type="button" class="btn btn-light" onclick="javascript:launchPopup('+"'http://www.multimap.com/map/browse.cgi?scale=200000&lon=${longitude}&lat=${answer.answer}&icon=x','LAMS'); "+'">${selectedMap.answerOption}</button> '+
 													</c:when>
 												</c:choose>
 											</c:forEach>
@@ -101,78 +103,46 @@
 										</script>
 										</c:if>
 									<script type="text/javascript">
-										setValue("latitude-record${recordStatus.index+1}-question${questionStatus.index+1}","${answer.answer}");
+										document.getElementById("latitude-record${recordStatus.index+1}-question${questionStatus.index+1}").innerHTML="${answer.answer}";
 									</script>
 								</c:if>
 							</c:when>
 							
 							<c:otherwise>
 								<c:set var="generated" value="true" />
-								<td class="fixedCellHeight ${questionStatus.first ? 'border-thick' : ''}">
+								<div class="col fixedCellHeight ${questionStatus.first ? 'border-thick ' : ''} ${recordStatus.last ? '' : 'border-end '}">
 										<c:choose>
-											<c:when test="${question.type==1}">
-												<input type="text" size="45" readonly="readonly" value="<c:out  value='${answer.answer}'/>">
+											<c:when test="${question.type==1 || question.type==2 || question.type==3 || question.type==4}">
+												<c:out  value='${answer.answer}'/>
 											</c:when>
 											
-											<c:when test="${question.type==2}">
-												<textarea cols="35" 
-													<c:choose>
-														<c:when test="${isIE}">
-															rows="3"
-														</c:when>
-														<c:otherwise>
-															rows="2"
-														</c:otherwise>
-													</c:choose>
-												 readonly="readonly">${answer.answer}</textarea>
-											</c:when>
-											
-											<c:when test="${question.type==3}">
-												<input type="text" size="10" readonly="readonly" value="<c:out  value='${answer.answer}'/>">
-											</c:when>
-											
- 											<c:when test="${question.type==4}">
-												<input type="text" size="20" readonly="readonly" value="${answer.answer}">
-											</c:when>
-											
 											<c:when test="${question.type==5 || question.type==6}">
 												<c:choose>
 													<c:when test="${empty answer.fileName}">
 														<fmt:message key="label.learning.file.notuploaded" />
 													</c:when>
 													<c:otherwise>
 														<fmt:message key="label.learning.file.uploaded" />
-														<a href="<c:url value='/download/?uuid=${answer.fileDisplayUuid}&preferDownload=true'/>">&nbsp;${answer.fileName}</a>
+														<a class="link-primary bg-body" href="<c:url value='/download/?uuid=${answer.fileDisplayUuid}&preferDownload=true'/>">&nbsp;${answer.fileName}</a>
 													</c:otherwise>
 												</c:choose>
 											</c:when>
 											
 											<c:when test="${question.type==7}">
-												<table class="table table-sm table-no-border table-nonfluid">
-													<tr>
-														<td>
-															<c:forEach var="answerOption" items="${question.answerOptions}" varStatus="status">
-																<c:if test="${status.index>0 && (status.index%3==0)}">
-																	</td>
-																	<td>
+												<div>
+													<c:forEach var="answerOption" items="${question.answerOptions}" varStatus="status">
+														<div class="form-check">
+															<input type="radio" readonly="readonly" disabled id="answerOption-${questionStatus.index}-${status.index}-${recordStatus.index}" class="form-check-input"
+																<c:if test="${answer.answer==status.index+1}">
+																	checked="checked"
 																</c:if>
-																
-																<div class="form-check">
-																	<input type="radio" readonly="readonly" id="answerOption-${questionStatus.index}-${status.index}" class="form-check-input"
-																		<c:if test="${answer.answer==status.index+1}">
-																			checked="checked"
-																		</c:if>
-																	>
-																	&nbsp;
-																	<label for="answerOption-${questionStatus.index}-${status.index}" class="form-check-label">
-																		<c:out value="${answerOption.answerOption}" escapeXml="true"/>
-																	</label>
-																</div>
-																<br />
-															</c:forEach>
-														</td>
-													</tr>
-												</table>
+															>
+															<label for="answerOption-${questionStatus.index}-${status.index}-${recordStatus.index}" class="form-check-label">
+																<c:out value="${answerOption.answerOption}" escapeXml="true"/>
+															</label>
+														</div>
+													</c:forEach>
+												</div>
 											</c:when>
 											
 											<c:when test="${question.type==8}">
@@ -191,58 +161,41 @@
 											</c:when>
 											
 											<c:when test="${question.type==9}">
-												<table class="table table-sm table-no-border table-nonfluid">
-													<tr>
-														<td>
-															<c:forEach var="answerOption" items="${question.answerOptions}" varStatus="status">
-																<c:if test="${status.index>0 && (status.index%3==0)}">
-																	</td>
-																	<td>
-																</c:if>
-																
-																<div class="form-check">
-																	<input type="checkbox" disabled="disabled" id="checkbox-record${recordStatus.index+1}-question${questionStatus.index+1}-${status.index+1}" class="form-check-input">
-																	&nbsp;
-																	
-																	<label for="checkbox-record${recordStatus.index+1}-question${questionStatus.index+1}-${status.index+1}" class="form-check-label">
-																		<c:out value="${answerOption.answerOption}" escapeXml="true"/>
-																	</label>
-																</div>
-																<br />
-															</c:forEach>
-														</td>
-													</tr>
-												</table>
+												<div>
+													<c:forEach var="answerOption" items="${question.answerOptions}" varStatus="status">
+														<div class="form-check">
+															<input type="checkbox" disabled="disabled" id="checkbox-record${recordStatus.index+1}-question${questionStatus.index+1}-${status.index+1}" class="form-check-input">
+															
+															<label for="checkbox-record${recordStatus.index+1}-question${questionStatus.index+1}-${status.index+1}" class="form-check-label">
+																<c:out value="${answerOption.answerOption}" escapeXml="true"/>
+															</label>
+														</div>
+													</c:forEach>
+												</div>
 											</c:when>
 											
 											<c:when test="${question.type==10}">
-												<table class="table table-sm table-no-border table-nonfluid">
-													<tr>
-														<td width="80px">
-														<label><fmt:message key="label.learning.longlat.longitude" /></label>
-														</td>
-														<td>
-															<c:set var="longitude"><c:out  value='${answer.answer}'/></c:set>
-															<input type="text" size="10" readonly="readonly" value="${longitude}">
-															<label><fmt:message key="label.learning.longlat.longitude.unit" /></label><br />
-														</td>
-													</tr>
-													<tr>
-														<td>
-															<label><fmt:message key="label.learning.longlat.latitude" /></label>
-														</td>
-														<td>
-														<input type="text" size="10" readonly="readonly" id="latitude-record${recordStatus.index+1}-question${questionStatus.index+1}">
-														<label><fmt:message key="label.learning.longlat.latitude.unit" /></label><br />
-														</td>
-													</tr>
-												</table>
-												<c:if test="${not empty question.answerOptions and not empty longitude}">
-												<span id="maplinks-record${recordStatus.index+1}-question${questionStatus.index+1}"></span>
-												</c:if>										
+												<div>
+													<div>
+														<fmt:message key="label.learning.longlat.longitude" />&nbsp;
+														<c:set var="longitude"><c:out  value='${answer.answer}'/></c:set>
+														${longitude}&nbsp;
+														<fmt:message key="label.learning.longlat.longitude.unit" />
+													</div>
+													
+													<div>
+														<fmt:message key="label.learning.longlat.latitude" />&nbsp;
+														<span id="latitude-record${recordStatus.index+1}-question${questionStatus.index+1}"></span>&nbsp;
+														<fmt:message key="label.learning.longlat.latitude.unit" />
+														
+														<c:if test="${not empty question.answerOptions and not empty longitude}">
+															<div id="maplinks-record${recordStatus.index+1}-question${questionStatus.index+1}" class="float-end"></div>
+														</c:if>	
+													</div>
+												</div>							
 											</c:when>
 										</c:choose>
-								</td>
+								</div>
 							</c:otherwise>
 						</c:choose>
 						
@@ -254,9 +207,6 @@
 					</c:if>
 				</c:forEach>
 			</c:forEach>
-			</tr>
-		</c:forEach>
-	</table>
-
-</body>
-</lams:html>
+		</div>
+	</c:forEach>
+</div>
Index: lams_tool_daco/web/pages/learning/notebook.jsp
===================================================================
diff -u -r94b2225ee897f0a10318b17e1c692f2ccbb1e36b -rb31ac55045b51d2098eb4b66772e3d6e2a5a89b6
--- lams_tool_daco/web/pages/learning/notebook.jsp	(.../notebook.jsp)	(revision 94b2225ee897f0a10318b17e1c692f2ccbb1e36b)
+++ lams_tool_daco/web/pages/learning/notebook.jsp	(.../notebook.jsp)	(revision b31ac55045b51d2098eb4b66772e3d6e2a5a89b6)
@@ -1,73 +1,15 @@
-<%@ include file="/common/taglibs.jsp"%>
 <!DOCTYPE html>
-        
-
-<lams:html>
-<lams:head>
-	<%@ include file="/common/header.jsp"%>
-	<c:set var="sessionMap" value="${sessionScope[sessionMapID]}" />
-	<c:set var="daco" value="${sessionMap.daco}" />
+<%@ include file="/common/taglibs.jsp"%>
+<c:set var="sessionMap" value="${sessionScope[sessionMapID]}" />
+<c:set var="daco" value="${sessionMap.daco}" />
 	
-	<title>
-		<fmt:message key="label.learning.title" />
-	</title>
-</lams:head>
-<body class="stripes">
-
-<lams:JSImport src="learning/includes/javascript/gate-check.js" />	
-<script type="text/javascript">
-	checkNextGateActivity('finishButton', '${sessionMap.toolSessionID}', '', submitForm);
-	
-    function submitForm(){
-           var f = document.getElementById('messageForm');
-           f.submit();
-   }
-</script>
-
-	<lams:Page type="learner" title="${daco.title}">
-
-	<form:form action="submitReflection.do" modelAttribute="messageForm" method="post" onsubmit="javascript:document.getElementById('finishButton').disabled = true;" id="messageForm">
-		<form:hidden path="userId" />
-		<form:hidden path="sessionId" />
-		<form:hidden path="sessionMapID" />
-		
-			<lams:errors/>
-
-			<p>
-				<lams:out value="${daco.reflectInstructions}" escapeHtml="true" />
-			</p>
-
-			<form:textarea id="focused" rows="5" path="entryText" cssClass="form-control"></form:textarea>
-
-			<div class="activity-bottom-buttons">
-				<button type="submit" class="btn btn-primary na" id="finishButton">
-					<span class="nextActivity">
-						<c:choose>
-		 					<c:when test="${sessionMap.isLastActivity}">
-		 						<fmt:message key="label.learning.submit" />
-		 					</c:when>
-		 					<c:otherwise>
-		 		 				<fmt:message key="label.learning.finished" />
-		 					</c:otherwise>
-		 				</c:choose>
-					</span>
-				</button>
-			</div>
-		</div>
-	</form:form>
-	
-	<div id="footer">
-	</div>
-	<!--closes footer-->
-
-	</lams:Page>
-
-</body>
-</lams:html>
-
-<script type="text/javascript">
-	window.onload = function() {
-		document.getElementById("focused").focus();
-	}
-</script>
-
+<lams:Notebook title="${daco.title}"
+	toolSessionID="${sessionMap.toolSessionID}"
+	formModelAttribute="messageForm"
+	hiddenInputs="userId,sessionId,sessionMapID"
+	instructions="${daco.reflectInstructions}"
+	isNextActivityButtonSupported="true"
+	isLastActivity="${sessionMap.isLastActivity}"
+	notebookLabelKey="label.monitoring.notebook"
+	finishButtonLabelKey="label.learning.submit"
+	nextActivityButtonLabelKey="label.learning.finished"/>
Index: lams_tool_daco/web/pages/learning/questionSummaries.jsp
===================================================================
diff -u -rbc8213e12c4e5afddd0394ad66386ef3e70d1611 -rb31ac55045b51d2098eb4b66772e3d6e2a5a89b6
--- lams_tool_daco/web/pages/learning/questionSummaries.jsp	(.../questionSummaries.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
+++ lams_tool_daco/web/pages/learning/questionSummaries.jsp	(.../questionSummaries.jsp)	(revision b31ac55045b51d2098eb4b66772e3d6e2a5a89b6)
@@ -1,234 +1,223 @@
 <%@ include file="/common/taglibs.jsp"%>
-<div id="questionSummariesDiv">
-<%--  --%>
-<c:if test="${not empty param.sessionMapID}">
-	<c:set var="sessionMapID" value="${param.sessionMapID}" />
-</c:if>
-
+<c:if test="${not empty param.sessionMapID}"><c:set var="sessionMapID" value="${param.sessionMapID}" /></c:if>
 <c:set var="sessionMap" value="${sessionScope[sessionMapID]}" />
 <c:if test="${empty recordList}">
 	<%-- In some cases record list is passed as an attribute, in other - in session map. --%>
 	<c:set var="recordList" value="${sessionMap.recordList}" />
 </c:if>
 <%-- This page modifies its content depending on the page it was included from. --%>
-<c:if test="${empty includeMode}">
-	<c:set var="includeMode" value="learning" />
-</c:if>
+<c:if test="${empty includeMode}"><c:set var="includeMode" value="learning" /></c:if>
 <c:set var="daco" value="${sessionMap.daco}" />
 <c:set var="questionSummaries" value="${sessionMap.questionSummaries}" />
 <c:set var="ordinal"><fmt:message key="label.authoring.basic.answeroption.ordinal"/></c:set>
-
 <c:set var="userRecordCount" value="${includeMode=='monitoring' ? sessionMap.recordCount : fn:length(recordList)}" />
 <c:set var="groupRecordCount" value="${sessionMap.totalRecordCount}" />
 
+<div id="questionSummariesDiv">
 
-<c:if test='${includeMode=="learning"}'>
-<div class="mt-2">
-<div class="panel">
-	<c:out value="${daco.instructions}" escapeXml="false"/>
-</div>
-</div>
-</c:if>
-
 <!--  summary panel  -->
-<div class="panel panel-default">
-<div class="panel-heading panel-title">
-	<fmt:message key="label.learning.tableheader.questions" />
-</div>
+	<div class="card-subheader">
+		<fmt:message key="label.learning.tableheader.questions" />
+	</div>
 
-<table class="table table-striped table-sm" id="summaryTable">
-	<tr class="table-active">
-		<th></th>
-		<th colspan="2" class="singleSummaryCell"><fmt:message key="label.learning.tableheader.summary" /></th>
-	</tr>
-	<tr class="table-active">
-		<th></th>
-		<th class="singleSummaryCell">
-		<c:choose>
-			<c:when test="${empty userFullName}">
-				<fmt:message key="label.learning.tableheader.summary.learner" />
-			</c:when>
-			<c:otherwise>
-				<c:out value="${userFullName}" escapeXml="true"/>
-			</c:otherwise>
-		</c:choose>
-		</th>
-		<th class="singleSummaryCell"><fmt:message key="label.learning.tableheader.summary.group" /></th>
-	</tr>
-	<tr class="table-active">
-		<td>
-			<fmt:message key="label.learning.heading.recordcount" />
-		</td>
-		<td class="singleSummaryCell">
-			${userRecordCount }
-		</td>
-		<td class="singleSummaryCell">
-			${groupRecordCount }
-		</td>
-	</tr>
-	<c:forEach var="question" items="${daco.dacoQuestions}" varStatus="questionStatus">
-		<c:set var="questionSummary" value="${questionSummaries[questionStatus.index]}" />
-		<tr>
-			<td>
-				<!-- <div class="bigNumber">${questionStatus.index+1}</div> -->
-				<c:out value="${question.description}" escapeXml="false"/>
-				<div class="hint">
+	<div class="ltable table-sm" id="summaryTable">
+		<div class="row table-active">
+			<div class="col-6 offset-6 singleSummaryCell"><fmt:message key="label.learning.tableheader.summary" /></div>
+		</div>
+		
+		<div class="row table-active">
+				<div class="col-3 offset-6 singleSummaryCell">
 					<c:choose>
-						<c:when test="${question.summary==1}">
-							<fmt:message key="label.common.summary.sum" /> 
+						<c:when test="${empty userFullName}">
+							<fmt:message key="label.learning.tableheader.summary.learner" />
 						</c:when>
-						<c:when test="${question.summary==2}">
-							<fmt:message key="label.common.summary.average" /> 
-						</c:when>
-						<c:when test="${question.summary==3}">
-							<fmt:message key="label.common.summary.count" /> 
-						</c:when>
 						<c:otherwise>
-							<fmt:message key="label.common.summary.none" /> 
+							<c:out value="${userFullName}" escapeXml="true"/>
 						</c:otherwise>
 					</c:choose>
 				</div>
-			</td>
-			<c:choose>
-				<c:when test="${question.type==3 && not empty question.summary}">
-					<c:choose>
-						<%-- Part of the content is displayed depending on the summary type --%>
-						<c:when test="${question.summary==1 || question.summary==2}">
-							<c:choose>
-								<%-- If no records were provided --%>
-								<c:when test="${(question.summary==1 and empty questionSummary.userSummary[0].sum) 
-											 || (question.summary==2 and empty questionSummary.userSummary[0].average)}">
-									<td class="singleSummaryCell hint">
-										<fmt:message key="label.learning.heading.norecords" />
-									</td>
-									<td class="singleSummaryCell hint">
-										<fmt:message key="label.learning.heading.norecords" />
-									</td>
-								</c:when>
-								<c:otherwise>
-									<%-- First column shows the summaries for the learner,
-										second one for the whole group (session) --%>
-									<td class="singleSummaryCell">
-										<c:choose>
-											<c:when test="${question.summary==1}">
-												${questionSummary.userSummary[0].sum}
-											</c:when>
-											<c:otherwise>
-												${questionSummary.userSummary[0].average}
-											</c:otherwise>
-										</c:choose>
-									</td>
-									<td class="singleSummaryCell">
-										<c:choose>
-											<c:when test="${question.summary==1}">
-												${questionSummary.groupSummary[0].sum}
-											</c:when>
-											<c:otherwise>
-												${questionSummary.groupSummary[0].average}
-											</c:otherwise>
-										</c:choose>
-									</td>
-								</c:otherwise>
-							</c:choose>
-						</c:when>
-						<c:when test="${question.summary==3}">
-							<td>
-								<table class="alternative-color-inner-table">
-									<c:forEach var="singleAnswer" items="${questionSummary.userSummary}" begin="1">	
-										<tr>
+				<div class="col-3 singleSummaryCell"><fmt:message key="label.learning.tableheader.summary.group" /></div>
+		</div>
+		
+		<div class="row table-active">
+			<div class="col-6">
+				<fmt:message key="label.learning.heading.recordcount" />
+			</div>
+			<div class="col-3 singleSummaryCell">
+				${userRecordCount }
+			</div>
+			<div class="col-3 singleSummaryCell">
+				${groupRecordCount }
+			</div>
+		</div>
+	</div>
+	
+	<div class="ltable table-striped table-sm no-header" id="summaryTable">
+		<c:forEach var="question" items="${daco.dacoQuestions}" varStatus="questionStatus">
+			<c:set var="questionSummary" value="${questionSummaries[questionStatus.index]}" />
+			<div class="row">
+				<div class="col-6">
+					<!-- <div class="bigNumber">${questionStatus.index+1}</div> -->
+					<c:out value="${question.description}" escapeXml="false"/>
+					
+					<div class="hint">
+						<c:choose>
+							<c:when test="${question.summary==1}">
+								<fmt:message key="label.common.summary.sum" /> 
+							</c:when>
+							<c:when test="${question.summary==2}">
+								<fmt:message key="label.common.summary.average" /> 
+							</c:when>
+							<c:when test="${question.summary==3}">
+								<fmt:message key="label.common.summary.count" /> 
+							</c:when>
+							<c:otherwise>
+								<fmt:message key="label.common.summary.none" /> 
+							</c:otherwise>
+						</c:choose>
+					</div>
+				</div>
+				
+				<c:choose>
+					<c:when test="${question.type==3 && not empty question.summary}">
+						<c:choose>
+							<%-- Part of the content is displayed depending on the summary type --%>
+							<c:when test="${question.summary==1 || question.summary==2}">
+								<c:choose>
+									<%-- If no records were provided --%>
+									<c:when test="${(question.summary==1 and empty questionSummary.userSummary[0].sum) 
+												 || (question.summary==2 and empty questionSummary.userSummary[0].average)}">
+										<div class="col-3 singleSummaryCell hint">
+											<fmt:message key="label.learning.heading.norecords" />
+										</div>
+										<div class="col-3 singleSummaryCell hint">
+											<fmt:message key="label.learning.heading.norecords" />
+										</div>
+									</c:when>
+									
+									<c:otherwise>
+										<%-- First column shows the summaries for the learner,
+											second one for the whole group (session) --%>
+										<div class="col-3 singleSummaryCell">
 											<c:choose>
-												<c:when test="${empty singleAnswer.answer}">
-													<td class="hint" width="20px">
-														<fmt:message key="label.learning.summary.emptyanswer" />:
-													</td>
+												<c:when test="${question.summary==1}">
+													${questionSummary.userSummary[0].sum}
 												</c:when>
 												<c:otherwise>
-													<td width="20px">
-														${singleAnswer.answer}:
-													</td>
+													${questionSummary.userSummary[0].average}
 												</c:otherwise>
 											</c:choose>
-											<td>
-												${singleAnswer.count}
-											</td>
-										</tr>
-									</c:forEach>
-								</table>
-							</td>
-							<td>
-								<table class="alternative-color-inner-table">
-									<c:forEach var="singleAnswer" items="${questionSummary.groupSummary}" begin="1">	
-										<tr>
-											<td width="20px">
-												${singleAnswer.answer}:
-											</td>
-											<td>
-												${singleAnswer.count}
-											</td>
-										</tr>
-									</c:forEach>
-								</table>
-							</td>
-						</c:when>
-					</c:choose>
-				</c:when>
-				<c:when test="${(question.type==7 || question.type==8 || question.type==9)  && not empty question.summary}">
-					<td>
-						<table class="alternative-color-inner-table">
-							<c:forEach var="singleAnswer" items="${questionSummary.userSummary}">
-								<tr>
-									<td>
-										${fn:substring(ordinal,singleAnswer.answer-1,singleAnswer.answer)})
-									</td>
-									<td>
-										<c:choose>
-											<c:when test="${question.summary==1}">
-												${singleAnswer.sum}
-											</c:when>
-											<c:otherwise>
-												${singleAnswer.average}
-											</c:otherwise>
-										</c:choose>
-									</td>
-								</tr>
-							</c:forEach>
-						</table>
-					</td>
-					<td>
-						<table class="alternative-color-inner-table">
-							<c:forEach var="singleAnswer" items="${questionSummary.groupSummary}">
-								<tr>
-									<td>
-										${fn:substring(ordinal,singleAnswer.answer-1,singleAnswer.answer)})
-									</td>
-									<td>
-										<c:choose>
-											<c:when test="${question.summary==1}">
-												${singleAnswer.sum}
-											</c:when>
-											<c:otherwise>
-												${singleAnswer.average}
-											</c:otherwise>
-										</c:choose>
-									</td>
-								</tr>
-							</c:forEach>
-						</table>
-					</td>
-				</c:when>
-				<c:otherwise>
-				<td class="singleSummaryCell">-</td>
-				<td class="singleSummaryCell">-</td>
-				</c:otherwise>
-			</c:choose>
-		</tr>
-	</c:forEach>
-</table>
-</div> <!--  end summary panel -->
+										</div>
+										<div class="col-3 singleSummaryCell">
+											<c:choose>
+												<c:when test="${question.summary==1}">
+													${questionSummary.groupSummary[0].sum}
+												</c:when>
+												<c:otherwise>
+													${questionSummary.groupSummary[0].average}
+												</c:otherwise>
+											</c:choose>
+										</div>
+									</c:otherwise>
+								</c:choose>
+							</c:when>
+							
+							<c:when test="${question.summary==3}">
+								<div class="col-3">
+									<div class="ltable no-header alternative-color-inner-table">
+										<c:forEach var="singleAnswer" items="${questionSummary.userSummary}" begin="1">	
+											<div class="row">
+												<c:choose>
+													<c:when test="${empty singleAnswer.answer}">
+														<div class="hint" style="width: 20px;">
+															<fmt:message key="label.learning.summary.emptyanswer" />:
+														</div>
+													</c:when>
+													<c:otherwise>
+														<div style="width: 20px;">
+															${singleAnswer.answer}:
+														</div>
+													</c:otherwise>
+												</c:choose>
+												<div class="col">
+													${singleAnswer.count}
+												</div>
+											</div>
+										</c:forEach>
+									</div>
+								</div>
+								<div class="col-3">
+									<div class="ltable no-header alternative-color-inner-table">
+										<c:forEach var="singleAnswer" items="${questionSummary.groupSummary}" begin="1">	
+											<div class="row">
+												<div style="width: 20px;">
+													${singleAnswer.answer}:
+												</div>
+												<div class="col">
+													${singleAnswer.count}
+												</div>
+											</div>
+										</c:forEach>
+									</div>
+								</div>
+							</c:when>
+						</c:choose>
+					</c:when>
+					
+					<c:when test="${(question.type==7 || question.type==8 || question.type==9)  && not empty question.summary}">
+						<div class="col-3 text-center">
+								<c:forEach var="singleAnswer" items="${questionSummary.userSummary}">
+									<div>
+										<span class="me-2">
+											${fn:substring(ordinal,singleAnswer.answer-1,singleAnswer.answer)})
+										</span>
+										<span>
+											<c:choose>
+												<c:when test="${question.summary==1}">
+													${singleAnswer.sum}
+												</c:when>
+												<c:otherwise>
+													${singleAnswer.average}
+												</c:otherwise>
+											</c:choose>
+										</span>
+									</div>
+								</c:forEach>
+						</div>
+						
+						<div class="col-3 text-center">
+								<c:forEach var="singleAnswer" items="${questionSummary.groupSummary}">
+									<div>
+										<span class="me-2">
+											${fn:substring(ordinal,singleAnswer.answer-1,singleAnswer.answer)})
+										</span>
+										<span>
+											<c:choose>
+												<c:when test="${question.summary==1}">
+													${singleAnswer.sum}
+												</c:when>
+												<c:otherwise>
+													${singleAnswer.average}
+												</c:otherwise>
+											</c:choose>
+										</span>
+									</div>
+								</c:forEach>
+						</div>
+					</c:when>
+					
+					<c:otherwise>
+						<div class="col-3 singleSummaryCell">-</div>
+						<div class="col-3 singleSummaryCell">-</div>
+					</c:otherwise>
+				</c:choose>
+			</div>
+		</c:forEach>
+	</div>
 
-<c:if test='${includeMode=="learning"}'>
-	<button class="btn btn-secondary btn-disable-on-submit" onclick="javascript:refreshQuestionSummaries('${sessionMapID}')">
-		<fmt:message key="label.common.summary.refresh" />
-	</button>
-</c:if>
+	<c:if test='${includeMode=="learning"}'>
+		<button type="button" class="btn btn-secondary btn-icon-refresh btn-disable-on-submit float-end mb-3" onclick="javascript:refreshQuestionSummaries('${sessionMapID}')">
+			<fmt:message key="label.common.summary.refresh" />
+		</button>
+	</c:if>
 </div>