Index: lams_central/web/css/components.css
===================================================================
diff -u -r3d4019df4427943688421ed16aac8c9ffdad257a -r28111c604143a6a2e15e286df89b9bae782375ed
--- lams_central/web/css/components.css	(.../components.css)	(revision 3d4019df4427943688421ed16aac8c9ffdad257a)
+++ lams_central/web/css/components.css	(.../components.css)	(revision 28111c604143a6a2e15e286df89b9bae782375ed)
@@ -532,4 +532,14 @@
 
 i.fa[role="button"] {
 	cursor : pointer;
+}
+
+#qb-question-authoring-modal .modal-content {
+	height: 100%;
+}
+
+#qb-question-authoring-modal iframe {
+	width: 100%;
+	height: 100%;
+	border: none;
 }
\ No newline at end of file
Index: lams_tool_assessment/web/pages/authoring/authoring5.jsp
===================================================================
diff -u -r02a94cdaf49d176421127ec76cbab3d09fc71b38 -r28111c604143a6a2e15e286df89b9bae782375ed
--- lams_tool_assessment/web/pages/authoring/authoring5.jsp	(.../authoring5.jsp)	(revision 02a94cdaf49d176421127ec76cbab3d09fc71b38)
+++ lams_tool_assessment/web/pages/authoring/authoring5.jsp	(.../authoring5.jsp)	(revision 28111c604143a6a2e15e286df89b9bae782375ed)
@@ -13,7 +13,6 @@
 	
 	<title><fmt:message key="label.author.title" /></title>
 	
-	<link rel="stylesheet" href="<lams:LAMSURL/>css/thickbox.css">
 	<link rel="stylesheet" href="<lams:LAMSURL/>css/bootstrap4.min.css">
 	<link rel="stylesheet" href="<lams:LAMSURL/>includes/font-awesome/css/font-awesome.min.css">
 	<link rel="stylesheet" href="<lams:LAMSURL/>css/jquery.tablesorter.theme.bootstrap.css">
@@ -26,7 +25,6 @@
 	<script src="<lams:LAMSURL/>includes/javascript/bootstrap4.bundle.min.js"></script>
 	<script src="<lams:LAMSURL/>includes/javascript/jquery.tablesorter.js"></script>
 	<script src="<lams:LAMSURL/>includes/javascript/jquery.tablesorter.pager.js"></script>
-	<script src="<lams:LAMSURL/>includes/javascript/thickbox.js"></script>
 	<script src="<lams:LAMSURL/>includes/javascript/common.js"></script> 
 	
 	<script>
Index: lams_tool_assessment/web/pages/authoring/parts/questionlist5.jsp
===================================================================
diff -u -r6e5ed3bc86e1589c829451ab0a0322eb96bdefe9 -r28111c604143a6a2e15e286df89b9bae782375ed
--- lams_tool_assessment/web/pages/authoring/parts/questionlist5.jsp	(.../questionlist5.jsp)	(revision 6e5ed3bc86e1589c829451ab0a0322eb96bdefe9)
+++ lams_tool_assessment/web/pages/authoring/parts/questionlist5.jsp	(.../questionlist5.jsp)	(revision 28111c604143a6a2e15e286df89b9bae782375ed)
@@ -152,7 +152,7 @@
 				</td>
 				
 				<td class="align-middle" style="width: 30px">
-					<a class="thickbox edit-reference-link" onclick="javascript:editReference(this);" style="color: black;"> 
+					<a class="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>
Index: lams_tool_assessment/web/pages/authoring/parts/questionlistRestricted5.jsp
===================================================================
diff -u -r6e5ed3bc86e1589c829451ab0a0322eb96bdefe9 -r28111c604143a6a2e15e286df89b9bae782375ed
--- lams_tool_assessment/web/pages/authoring/parts/questionlistRestricted5.jsp	(.../questionlistRestricted5.jsp)	(revision 6e5ed3bc86e1589c829451ab0a0322eb96bdefe9)
+++ lams_tool_assessment/web/pages/authoring/parts/questionlistRestricted5.jsp	(.../questionlistRestricted5.jsp)	(revision 28111c604143a6a2e15e286df89b9bae782375ed)
@@ -84,7 +84,7 @@
 
 			<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;"> 
+					<a class="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>
Index: lams_tool_assessment/web/pages/authoring/questions5.jsp
===================================================================
diff -u -r3d4019df4427943688421ed16aac8c9ffdad257a -r28111c604143a6a2e15e286df89b9bae782375ed
--- lams_tool_assessment/web/pages/authoring/questions5.jsp	(.../questions5.jsp)	(revision 3d4019df4427943688421ed16aac8c9ffdad257a)
+++ lams_tool_assessment/web/pages/authoring/questions5.jsp	(.../questions5.jsp)	(revision 28111c604143a6a2e15e286df89b9bae782375ed)
@@ -33,7 +33,6 @@
     				},
     				function(){
     					reinitializePassingMarkSelect(false);
-    					refreshThickbox();
     				}
     			);
     		};
@@ -57,26 +56,37 @@
 
 	//The panel of assessment list panel
 	var questionListTargetDiv = "#itemArea";
-	function initNewReferenceHref() {
-		var questionTypeDropdown = document.getElementById("questionType");
-		var questionType = questionTypeDropdown.value;
-		
-		var newQuestionInitHref = "<c:url value='/authoring/initNewReference.do'/>?sessionMapID=${sessionMapID}"
-			+ "&questionType=" + questionType 
-			+ "&KeepThis=true&TB_iframe=true&modal=true";
-		$("#newQuestionInitHref").attr("href", newQuestionInitHref);
+	
+	function initNewReference() {
+		var questionType = $('#questionType').val(),
+			newQuestionInitUrl = "<c:url value='/authoring/initNewReference.do'/>?sessionMapID=${sessionMapID}"
+								  + "&questionType=" + questionType,
+			modal = $('#qb-question-authoring-modal');
+			
+		$('iframe', modal).attr('src', newQuestionInitUrl);
+		modal.modal('show');
 	};
 
 	//handler for "edit" buttons
 	function editReference(link) {
-		var sequenceId = $('.reference-sequence-id', $(link).parents('tr')).val();
-    	
-		var editHref = "<c:url value='/authoring/editReference.do'/>?sessionMapID=${sessionMapID}" 
-		+ "&referenceSequenceId=" + sequenceId 
-		+ "&KeepThis=true&TB_iframe=true&modal=true";
-		$(link).attr("href", editHref);
+		var sequenceId = $('.reference-sequence-id', $(link).parents('tr')).val(),
+			editUrl = "<c:url value='/authoring/editReference.do'/>?sessionMapID=${sessionMapID}" 
+						+ "&referenceSequenceId=" + sequenceId,
+			modal = $('#qb-question-authoring-modal');
+		
+		$('iframe', modal).attr('src', editUrl);
+		modal.modal('show');
     }
+ 	
+	function refreshThickbox() {
+		// dummy method for current QB question authoring to work
+	}
 	
+	// for consistency with yet not rewritten QB question authoring
+	function tb_remove() {
+		$('#qb-question-authoring-modal').modal('hide');
+	}
+	
 	function toggleQuestionRequired(icon){
 		var sequenceId = $('.reference-sequence-id', $(icon).parents('tr')).val();
 		
@@ -98,9 +108,6 @@
 		});
 	}
 	
-	function refreshThickbox(){
-		tb_init('a.thickbox, area.thickbox, input.thickbox');//pass where to apply thickbox
-	};
 	function reinitializePassingMarkSelect(isPageFresh){
 		var oldValue = (isPageFresh) ? "${assessmentForm.assessment.passingMark}" : $("#passingMark").val();
 		$('#passingMark').empty();
@@ -145,7 +152,6 @@
 					success: function(response) {
 						// question list gets refreshed
 						$(questionListTargetDiv).html(response);
-						refreshThickbox();
 					}
 				});
 			}
@@ -182,10 +188,10 @@
 						<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">  
+			<button onclick="javscript:initNewReference()" type="button" class="btn btn-primary mx-2">  
 				<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">
+			</button>
+			<button onClick="javascript:importQTI()" type="button" class="btn btn-primary">
 				<fmt:message key="label.authoring.basic.import.qti" /> 
 			</button>
 		</div>
@@ -200,5 +206,14 @@
 				<i class="fa fa-refresh fa-spin fa-2x fa-fw" style="margin: auto; display: block"></i>	
 			</div>
 		</div>
+		
+		<div id="qb-question-authoring-modal" class="modal p-3" tabindex="-1" data-backdrop="static" data-keyboard="false">
+			<div class="modal-content">
+				<div class="modal-body">
+		        	<iframe></iframe>
+		    	</div>
+			</div>
+		</div>
+		
 	</c:if>
 </div>
\ No newline at end of file