Index: lams_central/web/css/components.css
===================================================================
diff -u -r0bc73958f17fe53a99f0e38e96a7eda971b9ad8c -r3d4019df4427943688421ed16aac8c9ffdad257a
--- lams_central/web/css/components.css	(.../components.css)	(revision 0bc73958f17fe53a99f0e38e96a7eda971b9ad8c)
+++ lams_central/web/css/components.css	(.../components.css)	(revision 3d4019df4427943688421ed16aac8c9ffdad257a)
@@ -234,7 +234,6 @@
 	border: 0.1rem solid #DFDCE9;
 	border-radius: 1rem;
 	color: black;
-	font-size: 1rem;
 }
 
 .bbox_body div.cke_textarea_inline {
@@ -525,4 +524,12 @@
 
 .collapsable-icon-left.collapsed:after {
 	content: "\f054";
+}
+
+table.table thead {
+	background-color: #e5e5e5;
+}
+
+i.fa[role="button"] {
+	cursor : pointer;
 }
\ No newline at end of file
Index: lams_tool_assessment/src/java/org/lamsfoundation/lams/tool/assessment/web/controller/AuthoringController.java
===================================================================
diff -u -r970d31830c85b6f6cd3e28b96c6c894617873c64 -r3d4019df4427943688421ed16aac8c9ffdad257a
--- lams_tool_assessment/src/java/org/lamsfoundation/lams/tool/assessment/web/controller/AuthoringController.java	(.../AuthoringController.java)	(revision 970d31830c85b6f6cd3e28b96c6c894617873c64)
+++ lams_tool_assessment/src/java/org/lamsfoundation/lams/tool/assessment/web/controller/AuthoringController.java	(.../AuthoringController.java)	(revision 3d4019df4427943688421ed16aac8c9ffdad257a)
@@ -485,9 +485,9 @@
 	//in case of edit in monitor and at least one attempted user, we show authoring page with restricted options
 	boolean isAuthoringRestricted = (boolean) sessionMap.get(AssessmentConstants.ATTR_IS_AUTHORING_RESTRICTED);
 	if (isAuthoringRestricted) {
-	    return "pages/authoring/parts/questionlistRestricted";
+	    return "pages/authoring/parts/questionlistRestricted5";
 	} else {
-	    return "pages/authoring/parts/questionlist";
+	    return "pages/authoring/parts/questionlist5";
 	}
     }
 
@@ -563,7 +563,7 @@
 
 	// set session map ID so that itemlist.jsp can get sessionMAP
 	request.setAttribute(AssessmentConstants.ATTR_SESSION_MAP_ID, sessionMapID);
-	return "pages/authoring/parts/questionlist";
+	return "pages/authoring/parts/questionlist5";
     }
 
     /**
@@ -580,7 +580,7 @@
 	}
 	// set session map ID so that itemlist.jsp can get sessionMAP
 	request.setAttribute(AssessmentConstants.ATTR_SESSION_MAP_ID, sessionMapID);
-	return "pages/authoring/parts/questionlist";
+	return "pages/authoring/parts/questionlist5";
     }
 
     /**
@@ -629,7 +629,7 @@
 
 	// set session map ID so that itemlist.jsp can get sessionMAP
 	request.setAttribute(AssessmentConstants.ATTR_SESSION_MAP_ID, sessionMapID);
-	return "pages/authoring/parts/questionlist";
+	return "pages/authoring/parts/questionlist5";
     }
 
     /**
@@ -663,7 +663,7 @@
 	List<QuestionReference> delList = getDeletedQuestionReferences(sessionMap);
 	delList.add(questionReference);
 
-	return "pages/authoring/parts/questionlist";
+	return "pages/authoring/parts/questionlist5";
     }
 
     @RequestMapping(path = "/toggleQuestionRequired", method = RequestMethod.POST)
Index: lams_tool_assessment/web/pages/authoring/parts/questionlist5.jsp
===================================================================
diff -u
--- lams_tool_assessment/web/pages/authoring/parts/questionlist5.jsp	(revision 0)
+++ lams_tool_assessment/web/pages/authoring/parts/questionlist5.jsp	(revision 3d4019df4427943688421ed16aac8c9ffdad257a)
@@ -0,0 +1,166 @@
+<%@ include file="/common/taglibs.jsp"%>
+<c:set var="sessionMap" value="${sessionScope[sessionMapID]}" />
+<%@ page import="org.lamsfoundation.lams.qb.service.IQbService" %>
+
+<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/Sortable.js"></script>
+<script>
+	// Inform author whether the QB question was modified
+	var qbQuestionModified = ${empty qbQuestionModified ? 0 : qbQuestionModified},
+		qbMessage = null;
+	switch (qbQuestionModified) {
+		case <%= IQbService.QUESTION_MODIFIED_UPDATE %>: 
+			qbMessage = '<fmt:message key="message.qb.modified.update" />';
+			break;
+		case <%= IQbService.QUESTION_MODIFIED_VERSION_BUMP %>: 
+			qbMessage = '<fmt:message key="message.qb.modified.version" />';
+			break;
+		case <%= IQbService.QUESTION_MODIFIED_ID_BUMP %>: 
+			qbMessage = '<fmt:message key="message.qb.modified.new" />';
+			break;
+	}
+	if (qbMessage) {
+		alert(qbMessage);
+	}
+
+	$(document).ready(function(){
+	    //init questions sorting
+	    <c:if test="${not empty sessionMap.questionReferences}">
+	    new Sortable($('#referencesTable tbody')[0], {
+		    animation: 150,
+		    direction: 'vertical',
+			store: {
+				set: function (sortable) {
+					//update all sequenceIds
+					for (var i = 0; i < sortable.el.rows.length; i++) {
+					 	var tr = sortable.el.rows[i];
+					 	var input = $("input[name^=sequenceId]", tr);
+					 	input.val(i);
+					 	var displayOrder = $(".reference-display-order", tr);
+					 	displayOrder.text(i + 1 + ")");
+					}
+
+					//prepare SequenceIds parameter
+					var serializedSequenceIds = "";
+					$("[name^=sequenceId]").each(function() {
+						serializedSequenceIds += "&" + this.name + "="  + this.value;
+					});
+
+					$.ajax({ 
+					    url: '<c:url value="/authoring/cacheReferencesOrder.do"/>',
+						type: 'POST',
+						data: {
+							sessionMapID: "${sessionMapID}",
+							sequenceIds: serializedSequenceIds
+						}
+					});
+
+					//update names
+					$("[name^=sequenceId]").each(function() {
+						var newSequenceId = this.value;
+						//update name of the hidden input
+						this.name = "sequenceId" + newSequenceId;
+					});
+				}
+			}
+		});
+		</c:if>
+	});
+</script>
+
+<table class="table table-sm" id="referencesTable">
+	<thead>
+		<tr>
+			<th>
+				#
+			</th>
+			<th>
+				<fmt:message key="label.authoring.basic.list.header.question" />
+			</th>
+			<th colspan="4">
+				<fmt:message key="label.authoring.basic.list.header.mark" />
+			</th>
+		</tr>
+	</thead>	
+	<tbody>
+		<c:forEach var="questionReference" items="${sessionMap.questionReferences}" varStatus="status">
+			<c:set var="question" value="${questionReference.question}" />
+			<tr>
+				<td class="reference-display-order align-middle">
+					${status.count})
+				</td>
+				<td class="align-middle">
+					<input type="hidden" name="sequenceId${questionReference.sequenceId}" value="${status.index}" class="reference-sequence-id">
+				
+					<c:choose>
+						<c:when test="${questionReference.randomQuestion}">
+							<fmt:message key="label.authoring.basic.type.random.question" />
+						</c:when>
+						<c:otherwise>
+							<c:out value="${question.qbQuestion.name}" escapeXml="true"/>
+						</c:otherwise>
+					</c:choose>
+					
+					<c:if test="${!questionReference.randomQuestion}">
+				        <span class='float-right btn btn-sm btn-info mx-2'>
+				       		v.&nbsp;${question.qbQuestion.version}
+				        </span>
+			        </c:if>
+			        
+			       	<span class='float-right btn btn-sm btn-info'>
+						<c:choose>
+							<c:when test="${questionReference.randomQuestion}">
+								<fmt:message key="label.authoring.basic.type.random.question" />
+							</c:when>
+							<c:when test="${question.type == 1}">
+								<fmt:message key="label.authoring.basic.type.multiple.choice" />
+							</c:when>
+							<c:when test="${question.type == 2}">
+								<fmt:message key="label.authoring.basic.type.matching.pairs" />
+							</c:when>
+							<c:when test="${question.type == 3}">
+								<fmt:message key="label.authoring.basic.type.short.answer" />
+							</c:when>
+							<c:when test="${question.type == 4}">
+								<fmt:message key="label.authoring.basic.type.numerical" />
+							</c:when>
+							<c:when test="${question.type == 5}">
+								<fmt:message key="label.authoring.basic.type.true.false" />
+							</c:when>
+							<c:when test="${question.type == 6}">
+								<fmt:message key="label.authoring.basic.type.essay" />
+							</c:when>
+							<c:when test="${question.type == 7}">
+								<fmt:message key="label.authoring.basic.type.ordering" />
+							</c:when>
+							<c:when test="${question.type == 8}">
+								<fmt:message key="label.authoring.basic.type.mark.hedging" />
+							</c:when>
+						</c:choose>
+	       			</span>
+				</td>
+				
+				<td class="align-middle" style="width: 70px; padding-right: 10px;">
+					<input name="maxMark" value="${questionReference.maxMark}" class="form-control form-control-sm max-mark-input">
+				</td>
+				
+				<td class="align-middle" style="width: 30px">
+					<i class="fa fa-xs fa-asterisk ${question.answerRequired ? 'text-danger' : ''}" 
+								role="button"
+								title="<fmt:message key="label.answer.required"/>" 
+								alt="<fmt:message key="label.answer.required"/>"
+								onClick="javascript:toggleQuestionRequired(this)"></i>
+				</td>
+				
+				<td class="align-middle" style="width: 30px">
+					<a class="thickbox edit-reference-link" onclick="javascript:editReference(this);" style="color: black;"> 
+						<i class="fa fa-pencil"	role="button" title="<fmt:message key="label.authoring.basic.edit" />"></i>
+					</a>
+				</td>
+
+				<td class="align-middle" style="width: 30px">
+					<i class="fa fa-times delete-reference-link" role="button" title="<fmt:message key="label.authoring.basic.delete" />"></i>
+				</td>
+			</tr>
+		</c:forEach>
+	</tbody>
+</table>
\ No newline at end of file
Index: lams_tool_assessment/web/pages/authoring/parts/questionlistRestricted5.jsp
===================================================================
diff -u
--- lams_tool_assessment/web/pages/authoring/parts/questionlistRestricted5.jsp	(revision 0)
+++ lams_tool_assessment/web/pages/authoring/parts/questionlistRestricted5.jsp	(revision 3d4019df4427943688421ed16aac8c9ffdad257a)
@@ -0,0 +1,94 @@
+<%@ include file="/common/taglibs.jsp"%>
+
+<table class="table table-sm" id="referencesTable">
+	<tr>
+		<th>
+			#
+		</th>
+		<th>
+			<fmt:message key="label.authoring.basic.list.header.question" />
+		</th>
+		<th colspan="3">
+			<fmt:message key="label.authoring.basic.list.header.mark" />
+		</th>
+	</tr>	
+
+	<c:forEach var="questionReference" items="${sessionMap.questionReferences}" varStatus="status">
+		<c:set var="question" value="${questionReference.question}" />
+		<tr>
+			<td class="align-middle">
+				${status.count})
+			</td>
+			<td class="align-middle">
+				<input type="hidden" name="sequenceId${questionReference.sequenceId}" value="${status.index}" class="reference-sequence-id">
+			
+				<c:choose>
+					<c:when test="${questionReference.randomQuestion}">
+						<fmt:message key="label.authoring.basic.type.random.question" />
+					</c:when>
+					<c:otherwise>
+						<c:out value="${question.qbQuestion.name}" escapeXml="true"/>
+					</c:otherwise>
+				</c:choose>
+				
+				<c:if test="${!questionReference.randomQuestion}">
+					<span class='float-right btn btn-sm btn-info mx-2'>
+				    	v.&nbsp;${question.qbQuestion.version}
+				    </span>
+		        </c:if>
+		        
+		       	<span class='float-right btn btn-sm btn-info'>
+					<c:choose>
+						<c:when test="${questionReference.randomQuestion}">
+							<fmt:message key="label.authoring.basic.type.random.question" />
+						</c:when>
+						<c:when test="${question.type == 1}">
+							<fmt:message key="label.authoring.basic.type.multiple.choice" />
+						</c:when>
+						<c:when test="${question.type == 2}">
+							<fmt:message key="label.authoring.basic.type.matching.pairs" />
+						</c:when>
+						<c:when test="${question.type == 3}">
+							<fmt:message key="label.authoring.basic.type.short.answer" />
+						</c:when>
+						<c:when test="${question.type == 4}">
+							<fmt:message key="label.authoring.basic.type.numerical" />
+						</c:when>
+						<c:when test="${question.type == 5}">
+							<fmt:message key="label.authoring.basic.type.true.false" />
+						</c:when>
+						<c:when test="${question.type == 6}">
+							<fmt:message key="label.authoring.basic.type.essay" />
+						</c:when>
+						<c:when test="${question.type == 7}">
+							<fmt:message key="label.authoring.basic.type.ordering" />
+						</c:when>
+						<c:when test="${question.type == 8}">
+							<fmt:message key="label.authoring.basic.type.mark.hedging" />
+						</c:when>
+					</c:choose>
+       			</span>
+			</td>
+			
+			<td class="align-middle" style="width: 30px">
+				<input name="maxMark" value="${questionReference.maxMark}" class="form-control form-control-sm max-mark-input">
+			</td>
+			
+			<td class="align-middle" style="width: 30px">
+				<i class="fa fa-xs fa-asterisk ${question.answerRequired ? 'text-danger' : ''}" 
+							role="button"
+							title="<fmt:message key="label.answer.required"/>" 
+							alt="<fmt:message key="label.answer.required"/>"
+							onClick="javascript:toggleQuestionRequired(this)"></i>
+			</td>
+
+			<td class="align-middle" style="width: 30px; padding-right: 20px;">
+				<c:if test="${!questionReference.randomQuestion}">
+					<a class="thickbox roffset5x edit-reference-link" onclick="javascript:editReference(this);" style="color: black;"> 
+						<i class="fa fa-pencil"	title="<fmt:message key="label.authoring.basic.edit" />"></i>
+					</a>			
+				</c:if>
+			</td>
+		</tr>
+	</c:forEach>
+</table>
\ No newline at end of file
Index: lams_tool_assessment/web/pages/authoring/questions5.jsp
===================================================================
diff -u -rfffb5d73e9c9bf785cbf01613e6972065cf88bc6 -r3d4019df4427943688421ed16aac8c9ffdad257a
--- lams_tool_assessment/web/pages/authoring/questions5.jsp	(.../questions5.jsp)	(revision fffb5d73e9c9bf785cbf01613e6972065cf88bc6)
+++ lams_tool_assessment/web/pages/authoring/questions5.jsp	(.../questions5.jsp)	(revision 3d4019df4427943688421ed16aac8c9ffdad257a)
@@ -1,19 +1,5 @@
 <%@ include file="/common/taglibs.jsp"%>
 
-<style>
-	#referencesTable thead {
-		background-color: #f5f5f5;
-	}
-	#referencesTable th {
-		font-weight: 500;
-		font-style: normal;
-	}
-	
-	#add-question-div {
-		margin-top: -5px;
-	}
-</style>
-
 <script lang="javascript">
 	$(document).ready(function(){
 		reinitializePassingMarkSelect(true);
@@ -30,7 +16,7 @@
 					$(this).removeClass("contains-nothing");
 				}
 			);
-		})
+		});
 
     	//handler for "delete" buttons
     	$(document).on("click", '.delete-reference-link', function() {
@@ -174,40 +160,35 @@
 				<%@ include file="/pages/authoring/parts/questionlistRestricted.jsp"%>
 			</c:when>
 			<c:otherwise>
-				<%@ include file="/pages/authoring/parts/questionlist.jsp"%>
+				<%@ include file="/pages/authoring/parts/questionlist5.jsp"%>
 			</c:otherwise>
 		</c:choose>
 	</div>
 	
 	<c:if test="${!isAuthoringRestricted}">
 		<!-- Dropdown menu for choosing a question type -->
-		<ul id="add-question-div" class="list-inline bottom">
-			<li class="list-inline-item">
-				<select id="questionType" class="form-control form-control-select" aria-label="<fmt:message key="label.authoring.basic.question.list.title" />">
-						<option selected="selected" value="1"><fmt:message key="label.authoring.basic.type.multiple.choice" /></option>
-						<option value="2"><fmt:message key="label.authoring.basic.type.matching.pairs" /></option>
-						<option value="3"><fmt:message key="label.authoring.basic.type.short.answer" /></option>
-						<option value="4"><fmt:message key="label.authoring.basic.type.numerical" /></option>
-						<option value="5"><fmt:message key="label.authoring.basic.type.true.false" /></option>
-						<option value="6"><fmt:message key="label.authoring.basic.type.essay" /></option>
-						<option value="7"><fmt:message key="label.authoring.basic.type.ordering" /></option>
-						<option value="8"><fmt:message key="label.authoring.basic.type.mark.hedging" /></option>
-						<option value="-1">
-							<fmt:message key="label.authoring.basic.type.random.question" />
-						</option>
-				</select>
-			</li>
-			<li class="list-inline-item">
-				<a onclick="initNewReferenceHref(); return false;" href="#nogo" class="btn btn-primary thickbox" id="newQuestionInitHref">  
-					<i class="fa fa-lg fa-plus-circle" aria-hidden="true" title="<fmt:message key="label.authoring.basic.add.question.to.pool" />"></i>
-				</a>
-			</li>
-			<li class="list-inline-item">
-				<a href="#nogo" onClick="javascript:importQTI()" class="btn btn-primary">
-					<fmt:message key="label.authoring.basic.import.qti" /> 
-				</a>
-			</li>
-		</ul>
+		<div id="add-question-div" class="d-flex justify-content-end">
+			<select id="questionType" class="form-control form-control-select" style="width: inherit" 
+					aria-label="<fmt:message key="label.authoring.basic.question.list.title" />">
+					<option selected="selected" value="1"><fmt:message key="label.authoring.basic.type.multiple.choice" /></option>
+					<option value="2"><fmt:message key="label.authoring.basic.type.matching.pairs" /></option>
+					<option value="3"><fmt:message key="label.authoring.basic.type.short.answer" /></option>
+					<option value="4"><fmt:message key="label.authoring.basic.type.numerical" /></option>
+					<option value="5"><fmt:message key="label.authoring.basic.type.true.false" /></option>
+					<option value="6"><fmt:message key="label.authoring.basic.type.essay" /></option>
+					<option value="7"><fmt:message key="label.authoring.basic.type.ordering" /></option>
+					<option value="8"><fmt:message key="label.authoring.basic.type.mark.hedging" /></option>
+					<option value="-1">
+						<fmt:message key="label.authoring.basic.type.random.question" />
+					</option>
+			</select>
+			<a onclick="initNewReferenceHref(); return false;" href="#" class="btn btn-primary mx-2 thickbox" id="newQuestionInitHref">  
+				<i class="fa fa-lg fa-plus-circle" aria-hidden="true" title="<fmt:message key="label.authoring.basic.add.question.to.pool" />"></i>
+			</a>
+			<button type="button" onClick="javascript:importQTI()" class="btn btn-primary">
+				<fmt:message key="label.authoring.basic.import.qti" /> 
+			</button>
+		</div>
 		
 		<!-- Question Bank -->
 	    <div class="card mt-5" >