Index: lams_central/.gitignore
===================================================================
diff -u -r9f4482aa1d29f454f091420cc38d3b27a3f4cc8f -ra13b927ed895f8e3eeaf559371262665e04ff07a
--- lams_central/.gitignore	(.../.gitignore)	(revision 9f4482aa1d29f454f091420cc38d3b27a3f4cc8f)
+++ lams_central/.gitignore	(.../.gitignore)	(revision a13b927ed895f8e3eeaf559371262665e04ff07a)
@@ -4,7 +4,6 @@
 /web/css/addLesson.css
 /web/css/defaultHTML*.css
 /web/css/jquery.jqGrid.confidence-level-formattter.css
-/web/css/orgGroup.css
 /web/css/orgGrouping.css
 /web/css/purple*.css
 /web/css/outcome.css
Index: lams_central/conf/language/lams/ApplicationResources.properties
===================================================================
diff -u -r3f3f34c22194aeaf302e1fd332925dffd35019aa -ra13b927ed895f8e3eeaf559371262665e04ff07a
--- lams_central/conf/language/lams/ApplicationResources.properties	(.../ApplicationResources.properties)	(revision 3f3f34c22194aeaf302e1fd332925dffd35019aa)
+++ lams_central/conf/language/lams/ApplicationResources.properties	(.../ApplicationResources.properties)	(revision a13b927ed895f8e3eeaf559371262665e04ff07a)
@@ -1130,3 +1130,8 @@
 label.qb.advanced.search.same.ld.tip = Show only questions which were already used in this sequence's activities.
 label.authoring.short.answer.exact.match = Learner answer must exactly match expected answer
 signup.email.verify.subject = LAMS confirm email address
+label.grouping.general.instructions.heading = General instructions:
+label.grouping.general.instructions.line1 = Choose a course grouping to use in this lesson or create a new one. You are working with copies, so any changes made here have no influence on the original course groupings. Grouping with zero groups are not listed here. Once a grouping is chosen, the only way to come back to the grouping list is to manually remove all groups.
+label.grouping.general.instructions.line2 = Place the lesson participants in their groups. Initially you can add and remove learners, but once a groups is used (that is, a participant starts an activity that uses the grouping) you will not be able to remove learners from it. Even if a group is in use you can still add learners. The changes are saved immediately.
+label.branching.general.instructions = Place the lesson participants in their branches. Initially you can add and remove learners, but once a participant starts one of the branches then you will not be able to remove learners from any branches. If you try to remove someone from a branch and they will not remove then check their progress - if they start using the branch while you are on this screen you will not get any errors but you will not be able to remove them from the branch. You will still be able to add learners to branches.
+label.grouping.popup.viewmode.message = You are presently in group view mode. Groups can not be modified.
\ No newline at end of file
Index: lams_central/src/java/org/lamsfoundation/lams/web/HomeController.java
===================================================================
diff -u -r3f3f34c22194aeaf302e1fd332925dffd35019aa -ra13b927ed895f8e3eeaf559371262665e04ff07a
--- lams_central/src/java/org/lamsfoundation/lams/web/HomeController.java	(.../HomeController.java)	(revision 3f3f34c22194aeaf302e1fd332925dffd35019aa)
+++ lams_central/src/java/org/lamsfoundation/lams/web/HomeController.java	(.../HomeController.java)	(revision a13b927ed895f8e3eeaf559371262665e04ff07a)
@@ -107,6 +107,7 @@
 
 	try {
 	    HomeController.log.debug("request appadmin");
+
 	    int orgId = new Integer(req.getParameter("orgId")).intValue();
 	    UserDTO user = getUser();
 	    if (user == null) {
Index: lams_central/src/java/org/lamsfoundation/lams/web/OrganisationGroupController.java
===================================================================
diff -u -ra5b247dd91cb3ffabf9de46cba029e5537fad087 -ra13b927ed895f8e3eeaf559371262665e04ff07a
--- lams_central/src/java/org/lamsfoundation/lams/web/OrganisationGroupController.java	(.../OrganisationGroupController.java)	(revision a5b247dd91cb3ffabf9de46cba029e5537fad087)
+++ lams_central/src/java/org/lamsfoundation/lams/web/OrganisationGroupController.java	(.../OrganisationGroupController.java)	(revision a13b927ed895f8e3eeaf559371262665e04ff07a)
@@ -217,8 +217,16 @@
 	    log.debug("Displaying course groups for user " + userId + " and organisation " + organisationId);
 	}
 	Long activityId = WebUtil.readLongParam(request, AttributeNames.PARAM_ACTIVITY_ID, true);
-	request.setAttribute("canEdit", isGroupSuperuser || (activityId != null));
 
+	if (activityId == null) {
+	    request.setAttribute("canEdit", isGroupSuperuser);
+	} else {
+	    Activity activity = (Activity) userManagementService.findById(Activity.class, activityId);
+	    request.setAttribute(AttributeNames.PARAM_TITLE, activity.getTitle());
+	    request.setAttribute("description", activity.getDescription());
+	    request.setAttribute("canEdit", true);
+	}
+
 	ObjectNode orgGroupingJSON = JsonNodeFactory.instance.objectNode();
 	orgGroupingJSON.put("organisationId", organisationId);
 
Index: lams_central/web/WEB-INF/tags/FileUpload5.tag
===================================================================
diff -u
--- lams_central/web/WEB-INF/tags/FileUpload5.tag	(revision 0)
+++ lams_central/web/WEB-INF/tags/FileUpload5.tag	(revision a13b927ed895f8e3eeaf559371262665e04ff07a)
@@ -0,0 +1,82 @@
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-lams" prefix="lams"%>
+<%@ taglib uri="tags-function" prefix="fn" %>
+<%@ taglib uri="tags-fmt" prefix="fmt" %>
+
+<%-- Usually fileFieldname and fileFieldId are the same, but DACO needs them to be different.
+ If they can be the same, set  fileFieldname and  fileFieldId will be set to the same. 
+ If you need them different, then define both. 
+ If you define neither, fileFieldname = fileFieldId = "fileSelector" --%>
+<%@ attribute name="fileFieldname" required="false" rtexprvalue="true"%>
+<%@ attribute name="fileFieldId" required="false" rtexprvalue="true"%>
+
+<%@ attribute name="fileInputNameFieldname" required="false" rtexprvalue="true"%>
+<%@ attribute name="fileInputMessageKey" required="false" rtexprvalue="true"%>
+
+<%-- Set uploadInfoMessageKey to '-' to NOT show the "not exe and max file size" type message. Leave it blank for the default key  label.upload.info --%>
+<%@ attribute name="uploadInfoMessageKey" required="false" rtexprvalue="true"%>
+<%@ attribute name="maxFileSize" required="true" rtexprvalue="true"%> 
+<%@ attribute name="tabindex" required="false" rtexprvalue="true"%>
+
+<%-- Only set if you have more than one file field on the screen (such as DACO) --%>			
+<%@ attribute name="errorMsgDiv" required="false" rtexprvalue="true"%>
+<%@ attribute name="fileButtonBrowse" required="false" rtexprvalue="true"%>
+
+			
+<c:if test="${empty fileFieldname}">
+	<c:set var="fileFieldname" value="fileSelector" />
+</c:if>
+
+<c:if test="${empty fileFieldId}">
+	<c:set var="fileFieldId" value="${fileFieldname}" />
+</c:if>
+
+<c:if test="${empty fileInputNameFieldname}">
+	<c:set var="fileInputNameFieldname" value="fileInputName" />
+</c:if>
+
+<c:if test="${empty fileInputMessageKey}">
+	<c:set var="fileInputMessageKey" value="label.authoring.basic.resource.file.input" />
+</c:if>
+
+<c:if test="${empty uploadInfoMessageKey}">
+	<c:set var="uploadInfoMessageKey" value="label.upload.info" />
+</c:if>
+
+<c:if test="${not empty tabindex}">
+	<c:set var="tabindexString" value="tabindex='${tabindex}'" />
+</c:if>
+
+<c:if test="${empty errorMsgDiv}">
+	<c:set var="errorMsgDiv" value="file-error-msg" />
+</c:if>
+
+<c:if test="${empty fileButtonBrowse}">
+	<c:set var="fileButtonBrowse" value="fileButtonBrowse" />
+</c:if>
+
+
+<div class="d-inline">
+	<button id="${fileButtonBrowse}" ${tabindexString} type="button" class="btn btn-outline-secondary">
+		<i class="fa fa-upload"></i> <fmt:message key="${fileInputMessageKey}"/>
+	</button>
+	<input type="file" id="${fileFieldId}" name="${fileFieldname}" class="fileUpload d-none"> 
+	<input type="text" id="${fileInputNameFieldname}" disabled="disabled" placeholder="File not selected" class="form-control d-none input-sm w-25 ms-1">
+</div>
+<c:if test="${uploadInfoMessageKey ne '-'}">
+<p class="help-block"><fmt:message key="${uploadInfoMessageKey}"><fmt:param>${maxFileSize}</fmt:param></fmt:message></p>					
+</c:if>
+<div id="${errorMsgDiv}" class="text-danger" style="display:none"></div>			
+
+<script type="text/javascript">
+	// Fake file upload
+	document.getElementById('${fileButtonBrowse}').addEventListener('click', function() {
+		document.getElementById('${fileFieldId}').click();
+	});
+	
+	document.getElementById('${fileFieldId}').addEventListener('change', function() {
+		$('#${fileInputNameFieldname}').removeClass('d-none').addClass("d-inline");
+		document.getElementById('${fileInputNameFieldname}').value = this.value.replace(/^.*\\/, "");
+	});
+</script>  
+
Index: lams_central/web/WEB-INF/tlds/lams/lams.tld
===================================================================
diff -u -r5f8dff0cc7d791c9cb34c850aaf235ca604055d7 -ra13b927ed895f8e3eeaf559371262665e04ff07a
--- lams_central/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 5f8dff0cc7d791c9cb34c850aaf235ca604055d7)
+++ lams_central/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision a13b927ed895f8e3eeaf559371262665e04ff07a)
@@ -368,6 +368,10 @@
 	    <name>Alert5</name>
 		<path>/WEB-INF/tags/Alert5.tag</path>
    	</tag-file>  
+   	<tag-file>
+       <name>FileUpload5</name>
+       <path>/WEB-INF/tags/FileUpload5.tag</path>
+   	</tag-file>
    	<tag>
     <name>textarea</name>
     <tag-class>org.lamsfoundation.lams.web.tag.LAMSMultiLinesTextareaTag</tag-class>
Index: lams_central/web/css/orgGroup.css
===================================================================
diff -u
--- lams_central/web/css/orgGroup.css	(revision 0)
+++ lams_central/web/css/orgGroup.css	(revision a13b927ed895f8e3eeaf559371262665e04ff07a)
@@ -0,0 +1,66 @@
+#newGroupPlaceholder {
+  cursor: pointer;
+}
+
+#newGroupPlaceholder > div {
+  margin-top: 80px;
+}
+
+.groupContainer {
+  width: 279px;
+  border: thin dotted var(--bs-secondary);
+}
+
+.sortUsersButton, .removeGroupButton {
+  cursor: pointer;
+}
+
+.userContainer {
+	height: 260px;
+	overflow-y: auto;
+}
+
+#unassignedUserCell .userContainer {
+  height: calc(100% - 10px);
+  overflow-x: auto;
+}
+
+.ui-droppable-hover {
+  padding: 0 !important;
+  border: 4px solid var(--bs-primary) !important;
+}
+
+.draggableSelected {
+  background-color: var(--bs-gray-200);
+  font-weight: bold;
+}
+
+.draggableItem {
+	cursor: grab;
+}
+
+.draggableItem:hover {
+	background: var(--lams-background-gray);
+}
+
+.groupContainer input {
+  width: 160px;
+}
+
+#newGroupPlaceholder > div {
+	margin: 130px 0;
+}
+
+.userContainer .ui-state-disabled {
+  opacity: 1 !important;
+}
+
+.locked {
+  padding: 4px;
+  border: 3px solid var(--bs-danger);
+}
+
+.dialogContainer {
+  display: none;
+  -webkit-overflow-scrolling: touch !important;
+}
\ No newline at end of file
Fisheye: Tag a13b927ed895f8e3eeaf559371262665e04ff07a refers to a dead (removed) revision in file `lams_central/web/css/orgGroup.scss'.
Fisheye: No comparison available.  Pass `N' to diff?
Index: lams_central/web/includes/javascript/dialog5.js
===================================================================
diff -u -r35dd47046a83ab2f9e80f76dc22d1521412219b5 -ra13b927ed895f8e3eeaf559371262665e04ff07a
--- lams_central/web/includes/javascript/dialog5.js	(.../dialog5.js)	(revision 35dd47046a83ab2f9e80f76dc22d1521412219b5)
+++ lams_central/web/includes/javascript/dialog5.js	(.../dialog5.js)	(revision a13b927ed895f8e3eeaf559371262665e04ff07a)
@@ -364,3 +364,24 @@
 		}
 	});
 }
+
+function showConfirm(body, callback) {
+	let dialog = $('#confirmationDialog').data('confirmed', null).off('hidden.bs.modal').on('hidden.bs.modal', function(){
+		if (dialog.data('confirmed')) {
+			callback(true);
+		}
+	});
+
+	$('.modal-body', dialog).html(body)
+	
+	$("#confirmationDialogConfirmButton").off('click').on("click", function(){
+		dialog.data('confirmed', true);
+    	dialog.modal('hide');
+	});
+  
+	$("#confirmationDialogCancelButton").off('click').on("click", function(){
+    	dialog.modal('hide');
+	});
+
+	dialog.modal('show');
+}
\ No newline at end of file
Index: lams_central/web/includes/javascript/main.js
===================================================================
diff -u -rad80b813ce57fb0277896d5ba213d15b559af004 -ra13b927ed895f8e3eeaf559371262665e04ff07a
--- lams_central/web/includes/javascript/main.js	(.../main.js)	(revision ad80b813ce57fb0277896d5ba213d15b559af004)
+++ lams_central/web/includes/javascript/main.js	(.../main.js)	(revision a13b927ed895f8e3eeaf559371262665e04ff07a)
@@ -336,7 +336,6 @@
 }
 
 function showOrgGroupingDialog(orgID, activityID) {
-	$('#dialogOrgGroup').modal('hide');
 	showDialog("dialogOrgGrouping", {
 		'width' : 460,
 		'height': 460,
@@ -347,21 +346,11 @@
 												   + (activityID ? '&activityID=' + activityID : ''),
 													'id' : 'orgGroupingModal'});
 		}
-	}, true);
+	}, false, true);
 }
 
 function showOrgGroupDialog(url) {
-	$('#dialogOrgGrouping').modal('hide');
-	showDialog("dialogOrgGroup", {
-		'width' : Math.max(380, Math.min(960, $(window).width() - 60)),
-		'height': Math.max(380, Math.min(750, $(window).height() - 30)),
-		'title' : LABELS.COURSE_GROUPS_TITLE,
-		'open' : function() {
-			// load contents after opening the dialog
-			$('iframe', this).attr({'src': url,
-				'id' : 'orgGroupModal'});
-		}
-	}, true);
+	window.open(url, '_blank');
 }
 
 function showAddSingleActivityLessonDialog(orgID, toolID, learningLibraryID) {
Index: lams_central/web/includes/javascript/orgGroup.js
===================================================================
diff -u -ra65568cc36db07abf19550359c0db03a9561c964 -ra13b927ed895f8e3eeaf559371262665e04ff07a
--- lams_central/web/includes/javascript/orgGroup.js	(.../orgGroup.js)	(revision a65568cc36db07abf19550359c0db03a9561c964)
+++ lams_central/web/includes/javascript/orgGroup.js	(.../orgGroup.js)	(revision a13b927ed895f8e3eeaf559371262665e04ff07a)
@@ -26,7 +26,7 @@
 		// ability to save a grouping on pressing the Enter key in the name input field
 		$('#groupingName').on('keyup', function (e) {
 			//remove alert class if it was applied
-			$("#grouping-name-blank-error,#grouping-name-non-unique-error").hide();
+			$("#grouping-name-blank-error,#grouping-name-non-unique-error").addClass('d-none');
 			
 		    if (e.keyCode == 13) {
 				saveGroups();
@@ -38,7 +38,7 @@
 		// allow adding new groups
 		$('#newGroupPlaceholder').click(function(){
 			// the label is "Group X" where X is the top group number
-			addGroup(null, LABELS.GROUP_PREFIX_LABEL + ' ' + $('#groupsTable .groupContainer').length, null);
+			addGroup(null, LABELS.GROUP_PREFIX_LABEL + ' ' + $('#groupsCell .groupContainer').length, null);
 		});
 	}
 });
@@ -54,9 +54,9 @@
 						'id'      : null,
 						'groupId' : groupId
 					})
-					.css('display', null);
+					.removeClass('d-none');
 	
-	var groupNameFields = $('#groupsTable .groupContainer input');
+	var groupNameFields = $('#groupsCell .groupContainer input');
 	var groupTopIndex = groupNameFields.length;
 	// names can be blank in course groups,
 	// but in lesson groups they have to exist and be unique
@@ -115,11 +115,11 @@
 			var portraitDiv = $('<div />').attr({
 				'id': 'portrait-'+userJSON.id,
 				})
-				.addClass('roffset5')
+				.addClass('mb-2')
 				.appendTo(userDiv);
 			addPortrait(portraitDiv, userJSON.portraitId, userJSON.id, 'small', true, LAMS_URL );
 			$('<span/>').text(userJSON.firstName + ' ' + userJSON.lastName + ' (' + userJSON.login + ')')
-				.addClass('portrait-sm-lineheight')
+				.addClass('portrait-sm-lineheight ms-1')
 				.appendTo(userDiv);
 
 			// for later use
@@ -133,7 +133,9 @@
 							'containment' : '#groupsTable',
 						    'revert'      : 'invalid',
 						    'distance'    : 20,
-						    'scroll'      : false,
+						    'scroll'      : true,
+						    'scrollSensitivity' : 120,
+							'scrollSpeed' : 100,
 						    'cursor'      : 'move',
 							'helper'      : function(event){
 								// include the user from which dragging started
@@ -272,22 +274,9 @@
             $(this).draggable('disable');
 		  }
 	   });
-	   
-	   // recolour both containers
-	   colorDraggableUsers(toContainer);
-	   colorDraggableUsers(fromContainer);
 	}
 }
 
-
-function colorDraggableUsers(container) {
-	// every second line is different
-	$(container).find('div.draggableItem').each(function(index, userDiv){
-		$(this).removeClass( index % 2 ? 'draggableEven' : 'draggableOdd');
-		$(this).addClass( index % 2 ? 'draggableOdd' : 'draggableEven');
-	});
-}
-
 /**
  * Sort users according to their names.
  */
@@ -316,8 +305,6 @@
 			button.html('▲');
 			sortOrderAscending[containerId] = true;
 		}
-		
-		colorDraggableUsers(container);
 	}
 }
 
@@ -327,37 +314,40 @@
 function removeGroup(container) {
 	// no groupId means this group was just added and it was not persisted in DB yet
 	var groupId = container.attr('groupId');
-	var executeDelete = true;
-	if (groupId) {
-		executeDelete = confirm(LABELS.GROUP_REMOVE_LABEL);
-	}
-	if (executeDelete) {
-		executeDelete = !lessonMode;
-		
-		if (lessonMode) {
-			var data = {
-				'activityID' : groupingActivityId,
-				'groupID'    : groupId
-			};
-			data[csrfTokenName] = csrfTokenValue;
+	var executeDelete = true,
+		deleteFunction = function(){
+			executeDelete = !lessonMode;
 			
-			$.ajax({
-				async    : false,
-				cache    : false,
-				dataType : 'json',
-				url : LAMS_URL + 'monitoring/grouping/removeGroup.do',
-				data : data,
-				type : 'POST',
-				success : function(response) {
-					executeDelete = response.result;
-				}
-			});
-		}
+			if (lessonMode) {
+				var data = {
+					'activityID' : groupingActivityId,
+					'groupID'    : groupId
+				};
+				data[csrfTokenName] = csrfTokenValue;
+				
+				$.ajax({
+					async    : false,
+					cache    : false,
+					dataType : 'json',
+					url : LAMS_URL + 'monitoring/grouping/removeGroup.do',
+					data : data,
+					type : 'POST',
+					success : function(response) {
+						executeDelete = response.result;
+					}
+				});
+			}
+			
+			if (executeDelete) {
+				$('#unassignedUserCell .userContainer').append($('.userContainer div.draggableItem', container));
+				container.remove();
+			}
+		};
 		
-		if (executeDelete) {
-			$('#unassignedUserCell .userContainer').append($('.userContainer div.draggableItem', container));
-			container.remove();
-		}
+	if (groupId) {
+		executeDelete = showConfirm(LABELS.GROUP_REMOVE_LABEL, deleteFunction);
+	} else {
+		deleteFunction();
 	}
 }
 
@@ -397,7 +387,7 @@
 	var groupingName = $('#groupingName').val();
 	// course grouping name can not be blank
 	if (!groupingName) {
-		$('#grouping-name-blank-error').show();
+		$('#grouping-name-blank-error').removeClass('d-none');
 		$('#groupingName').focus();
 		return false;
 	}
@@ -418,7 +408,7 @@
 		}
 	});
 	if ((grouping.name != groupingName) && !isGroupingNameUnique) {
-		$('#grouping-name-non-unique-error').show();
+		$('#grouping-name-non-unique-error').removeClass('d-none');
 		$('#groupingName').focus();
 		return false;		
 	}
@@ -474,7 +464,8 @@
 		},
 		type : 'POST',
 		success : function() {
-			window.parent.showOrgGroupingDialog(organisationId);
+			window.opener.showOrgGroupingDialog(organisationId);
+			window.close();
 		}
 	});
 }
@@ -551,7 +542,7 @@
 	}
 	var height = Math.min(550, $(window).height()),
 		width = Math.max(1093, $(window).width());
-	var wd = window.open(url,LABELS.GROUP_PREFIX_LABEL,'height='+height+',width='+width+',resizable,scrollbars').focus();
+	window.open(url,LABELS.GROUP_PREFIX_LABEL,'height='+height+',width='+width+',resizable,scrollbars').focus();
 }
 /** 
  * *************** Import groups from a spreadsheet ***************
@@ -560,23 +551,11 @@
 		// do not disable the file button or the file will be missing on the upload.
 		$('.btn-disable-on-downupload').prop('disabled', false);
 		$('a.btn-disable-on-downupload').show(); // links must be hidden, cannot be disabled
-		
-		// show the waiting area during the upload
-		var div = document.getElementById("attachmentArea_Busy");
-		if(div != null){
-			div.style.display = 'none';
-		}
 	}
 	function disableButtons() {
 		// do not disable the file button or the file will be missing on the upload.
 		$('.btn-disable-on-downupload').prop('disabled', true);
 		$('a.btn-disable-on-downupload').hide(); // links must be hidden, cannot be disabled
-		
-		// show the waiting area during the upload
-		var div = document.getElementById("attachmentArea_Busy");
-		if(div != null){
-			div.style.display = 'inline-block';
-		}
 	}
 	
 	function importGroupsFromSpreadsheet() {
@@ -586,7 +565,7 @@
 
 		disableButtons();
 		var file = getValidateSpreadsheetFile();
-		if ( file != null && ( ! warnBeforeUpload || confirm(LABELS.WARNING_REPLACE_GROUPS_LABEL) ) ) {
+		if ( file != null && ( !warnBeforeUpload || confirm(LABELS.WARNING_REPLACE_GROUPS_LABEL) ) ) {
 			var form = $("#uploadForm")[0];
 			var formDataUpload = new FormData(form);
 			formDataUpload.append("organisationID", organisationId); 
@@ -605,7 +584,7 @@
 				var groupingName = $('#groupingName').val();
 				// course grouping name can not be blank
 				if (!groupingName) {
-					$('#grouping-name-blank-error').show();
+					$('#grouping-name-blank-error').removeClass('d-none');
 					$('#groupingName').focus();
 					enableButtons();
 					return false;
@@ -627,7 +606,7 @@
 							formDataUpload.append("name",  groupingName)
 							callImportURL(form, formDataUpload);
 						} else {
-							$('#grouping-name-non-unique-error').show();
+							$('#grouping-name-non-unique-error').removeClass('d-none');
 							$('#groupingName').focus();
 							enableButtons();
 							return false;		
@@ -677,10 +656,6 @@
 	        			else  {
 	        				// unknown failure on back end. 
 	        				alert(LABELS.GENERAL_ERROR_LABEL);
-			        		var div = document.getElementById("attachmentArea_Busy");
-			        		if(div != null){
-			        			div.style.display = 'none';
-			        		}
 	        			}
 	        		} else {
 	        			var msg = LABELS.LABEL_IMPORT_SUCCESSFUL_LABEL.replace("%1", response.added).replace("%2", response.skipped);
@@ -691,10 +666,6 @@
 	        error: function() {
 	        		// unknown failure on back end. 
 	        		alert(LABELS.GENERAL_ERROR_LABEL);
-	        		var div = document.getElementById("attachmentArea_Busy");
-	        		if(div != null){
-	        			div.style.display = 'none';
-	        		}
 	        }
 		});
 	}
Index: lams_central/web/includes/javascript/orgGrouping.js
===================================================================
diff -u -r40de3afab4e8d589660daffb6efd6e568e87f8fa -ra13b927ed895f8e3eeaf559371262665e04ff07a
--- lams_central/web/includes/javascript/orgGrouping.js	(.../orgGrouping.js)	(revision 40de3afab4e8d589660daffb6efd6e568e87f8fa)
+++ lams_central/web/includes/javascript/orgGrouping.js	(.../orgGrouping.js)	(revision a13b927ed895f8e3eeaf559371262665e04ff07a)
@@ -1,4 +1,4 @@
-var gtbDialog = null;
+var gtbDialog = null;
 
 function removeGrouping(groupingId) {
 	if (!lessonMode && confirm(LABELS.REMOVE_GROUPING_CONFIRM_LABEL)) {
Index: lams_central/web/includes/javascript/upload.js
===================================================================
diff -u -r7475d08afc280b5e2e5ddf04e8bf35e3166aaf80 -ra13b927ed895f8e3eeaf559371262665e04ff07a
--- lams_central/web/includes/javascript/upload.js	(.../upload.js)	(revision 7475d08afc280b5e2e5ddf04e8bf35e3166aaf80)
+++ lams_central/web/includes/javascript/upload.js	(.../upload.js)	(revision a13b927ed895f8e3eeaf559371262665e04ff07a)
@@ -107,7 +107,7 @@
 		errDivId = 'file-error-msg';
 	}
 	var errDiv = $('#'+errDivId);
-	if ( errDiv.size() > 0 ) {
+	if ( errDiv.length > 0 ) {
 		errDiv.append(error);
 		errDiv.css( "display", "block" );
 	} else {
Index: lams_central/web/orgGroup.jsp
===================================================================
diff -u -r721f7d62f6f34d24b9e9c690386253a4b12a0264 -ra13b927ed895f8e3eeaf559371262665e04ff07a
--- lams_central/web/orgGroup.jsp	(.../orgGroup.jsp)	(revision 721f7d62f6f34d24b9e9c690386253a4b12a0264)
+++ lams_central/web/orgGroup.jsp	(.../orgGroup.jsp)	(revision a13b927ed895f8e3eeaf559371262665e04ff07a)
@@ -7,21 +7,28 @@
 <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"><%=FileValidatorUtil.formatSize(Configuration.getAsInt(ConfigurationKeys.UPLOAD_FILE_MAX_SIZE))%></c:set>
 <c:set var="lessonMode" value="${not empty param.activityID}" />
+<c:if test="${empty title}">
+	<c:set var="title"><fmt:message key="label.course.groups.viewonly.title" /></c:set>
+</c:if>
 
 <lams:html>
 <lams:head>
-	<lams:css/>
-	<link rel="stylesheet" href="${lams}css/jquery-ui-bootstrap-theme.css" type="text/css" media="screen" />
-	<link rel="stylesheet" href="${lams}css/orgGroup.css" type="text/css" media="screen" />
-
-	<script type="text/javascript" src="${lams}includes/javascript/jquery.js"></script>
-	<script type="text/javascript" src="${lams}includes/javascript/jquery-ui.js"></script>
-	<script type="text/javascript" src="${lams}includes/javascript/jquery.cookie.js"></script>
-	<script type="text/javascript" src="${lams}includes/javascript/bootstrap.min.js"></script>
-	<lams:JSImport src="includes/javascript/dialog.js" />
-	<script type="text/javascript" src="${lams}includes/javascript/orgGroup.js"></script>
-	<script type="text/javascript" src="${lams}includes/javascript/portrait.js"></script>
-	<script type="text/javascript" src="${lams}includes/javascript/upload.js"></script>
+	<title>${title}</title>
+	
+	<link rel="stylesheet" href="<lams:LAMSURL/>css/jquery-ui-bootstrap-theme5.css">
+	<link rel="stylesheet" href="<lams:LAMSURL/>css/bootstrap5.custom.css">
+	<link rel="stylesheet" href="<lams:LAMSURL/>includes/font-awesome6/css/all.css">
+	<link rel="stylesheet" href="<lams:LAMSURL/>css/components.css">
+	<link rel="stylesheet" href="<lams:LAMSURL/>css/orgGroup.css">
+	
+	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery.js"></script>
+	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery-ui.js"></script>
+	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery.cookie.js"></script>
+	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/bootstrap5.bundle.min.js"></script>
+	<lams:JSImport src="includes/javascript/dialog5.js" />
+	<lams:JSImport src="includes/javascript/orgGroup.js" />
+	<lams:JSImport src="includes/javascript/portrait5.js" />
+	<lams:JSImport src="includes/javascript/upload.js" />
 	<script type="text/javascript">;
 		var grouping = ${grouping},
 			organisationId = grouping.organisationId,
@@ -76,198 +83,214 @@
 				<fmt:message key="label.import.successful" var="LABEL_IMPORT_SUCCESSFUL_VAR"><fmt:param value="%1"/><fmt:param value="%2"/></fmt:message>
 				LABEL_IMPORT_SUCCESSFUL_LABEL : decoderDiv.html('<c:out value="${LABEL_IMPORT_SUCCESSFUL_VAR}" />').text(),
 			};
-					
+ 					
 			<!-- LDEV_NTU-7 Page jumps to the top when clicking the link in Grouping -->		
 			jQuery(document).ready(function(){
-			    jQuery('#noscrollinputid').on('click', function(event) {  
-			         jQuery('#collapseUploadGroupFile').toggle('show');
+			    $('#advanced-settings-accordion .collapse').on('shown.bs.collapse', function() {
+				    var collapseElement = $(this);
 			         $('html, body').animate({
-			        	  scrollTop: $("#collapseUploadGroupFile").offset().top
-			         }, 1000);
+			        	  scrollTop: $('.accordion-body', collapseElement).offset().top
+			         }, 0);
 			    });
-
-			    jQuery('#noscrolladvancedid').on('click', function(event) {  
-			         jQuery('#collapseAdvanced').toggle('show');
-			         $('html, body').animate({
-			        	  scrollTop: $("#collapseAdvanced").offset().top
-			         }, 1000);
-			    });
 			});
 	</script>
 </lams:head>
-<body>
 
-<c:if test="${not lessonMode and (empty usedForBranching or usedForBranching eq false)}">
+<body class="component my-2">
+	<lams:Page5 title="${title}" type="monitoring">
+		<div class="card mb-2">
+			<div class="card-body">
+				<c:if test="${not empty description}">
+					<p><c:out value="${description}"/></p>
+				</c:if>
+			
+				<h4 class="card-title"><fmt:message key="label.grouping.general.instructions.heading"/></h4>
+				
+				<c:if test="${not usedForBranching}">
+					<p class="card-text">
+						<fmt:message key="label.grouping.general.instructions.line1"/>
+					</p>
+				</c:if>
+				
+				<p class="card-text">
+					<fmt:message key="label.grouping.general.instructions.line2"/>
+				</p>
+				
+				<c:if test="${usedForBranching}">
+					<p class="card-text"><fmt:message key="label.grouping.general.instructions.branching"/></p>
+				</c:if>
+			</div>
+		</div>
+		
+		<div class="card mb-2">
+			<div class="card-body">
+				<c:if test="${not lessonMode and (empty usedForBranching or usedForBranching eq false)}">
+					<!-- It is shown when user tries to save a grouping with empty name -->
 
-	<!-- It is shown when user tries to save a grouping with empty name -->
-	<span id="grouping-name-blank-error" class="errorMessage">
-		<fmt:message key="label.course.groups.name.blank" />
-	</span>
-
-	<!-- It is shown when user tries to save a grouping with a non unique name -->
-	<span id="grouping-name-non-unique-error" class="errorMessage">
-		<fmt:message key="label.course.groups.name.not.unique" />
-	</span>
+					<h5 id="grouping-name-blank-error" class="text-danger text-center d-none">
+						<fmt:message key="label.course.groups.name.blank" />
+					</h5>
+				
+					<!-- It is shown when user tries to save a grouping with a non unique name -->
+					<h5 id="grouping-name-non-unique-error" class="text-danger text-center d-none">
+						<fmt:message key="label.course.groups.name.not.unique" />
+					</h5>
+					
+					<div id="titleDiv" class="clearfix text-center mb-2">
+						<fmt:message key="label.course.groups.name" />
+						<input id="groupingName" type="text" class="form-control form-control-sm d-inline w-25 ms-1"
+							<c:if test="${not canEdit or lessonMode}">
+								readonly="readonly"
+							</c:if>
+						/>
+						
+						<c:if test="${canEdit}">
+							<button class="float-end btn btn-secondary btn-disable-on-downupload" onClick="javascript:saveGroups()">
+								<i class="fa fa-save"></i> <fmt:message key="button.save" />
+							</button>
+						</c:if>
+					</div>
+				</c:if>
+				
+				<div id="titleInstructions" class="clearfix text-center pb-2 border-bottom border-secondary">
+					<span class="d-inline-block fst-italic mt-2">
+						<c:choose>
+							<c:when test="${canEdit}">
+								<fmt:message key="label.course.groups.edit.title" />
+							</c:when>
+							<c:otherwise>
+								<fmt:message key="label.course.groups.viewonly.title" />
+							</c:otherwise>
+						</c:choose>
+					</span>
+					<button type="button" onClick="javascript:showPrintPage()" class="float-end btn btn-secondary">
+						<i class="fa fa-print"></i> <fmt:message key="label.print"/>
+					</button>
+				</div>
+				
+				<div class="row" id="groupsTable">
+					<div class="col-3 border-end border-secondary p-1" id="unassignedUserCell">
+						<div class="text-center fw-bold my-2">
+							<fmt:message key="label.course.groups.unassigned" />
+							<span class="sortUsersButton"
+							      title="<fmt:message key='label.course.groups.sort.tooltip' />">&#9650;</span>
+						</div>
+						<div class="userContainer"></div>
+					</div>
+					<div class="col-9 d-flex flex-wrap" id="groupsCell">
+						<c:if test="${canEdit and not usedForBranching}">
+							<div id="newGroupPlaceholder" class="groupContainer ms-2 mt-2">
+								<div class="text-center text-primary"><fmt:message key="label.course.groups.add" /></div>
+							</div>
+						</c:if>
+					</div>
+				</div>
+			</div>
+		</div>
 		
-	<div id="titleDiv">
-		<fmt:message key="label.course.groups.name" />
-		<input id="groupingName" type="text"
-			<c:if test="${not canEdit or lessonMode}">
-				readonly="readonly"
+		<div class="accordion" id="advanced-settings-accordion"> 
+			<c:if test="${lessonMode}">
+			  	<div class="accordion-item">
+					<h2 class="accordion-header" id="headingAdvanced">
+						 <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" aria-expanded="false"
+					    		data-bs-target="#course-grouping-advanced-settings" aria-controls="course-grouping-advanced-settings">
+					    	<fmt:message key="label.advanced.settings" />
+					    </button>
+					</h2>
+			        <div id="course-grouping-advanced-settings" class="accordion-collapse collapse" data-bs-parent="#advanced-settings-accordion"
+			        	  aria-labelledby="headingAdvanced">
+			        	  <div class="accordion-body">
+							<fmt:message key="label.save.as.course.grouping.hint" />
+							<button id="save-course-grouping-button" class="btn btn-primary btn-disable-on-downupload d-block mt-2"
+									onClick="javascript:saveAsCourseGrouping();">
+								<i class="fa fa-save"></i>
+								<fmt:message key="label.save.as.course.grouping" />
+							</button>
+						</div>
+			        </div>
+			    </div>
+		    </c:if>
+		    
+		    <c:if test="${canEdit}">
+			    <div class="accordion-item">
+					<h2 class="accordion-header" id="headingUploadGroupFile">
+						 <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" aria-expanded="false"
+					    		data-bs-target="#upload-group-file-settings" aria-controls="upload-group-file-settings">
+					    	<fmt:message key="label.import.groups.from.template" />
+					    </button>
+					</h2>
+			        <div id="upload-group-file-settings" class="accordion-collapse collapse" data-bs-parent="#advanced-settings-accordion"
+			        	 aria-labelledby="headingUploadGroupFile">
+			        	 <div class="accordion-body">
+							<fmt:message key="label.import.groups.from.template.description" />
+							<button id="download-template" class="btn btn-primary btn-disable-on-downupload d-block mt-2 mb-4"
+									onClick="javascript:downloadTemplate();">
+								<i class="fa fa-download"></i> <fmt:message key="label.download.template" />
+							</button>
+							<form action="../monitoring/groupingUpload/importLearnersForGrouping.do" enctype="multipart/form-data" id="uploadForm">
+								<input type="hidden" name="activityID" value="${param.activityID}"/>
+								<input type="hidden" name="lessonID" value="${lessonID}"/>
+								<lams:FileUpload5 fileFieldname="groupUploadFile" fileInputMessageKey="label.upload.group.spreadsheet"
+									uploadInfoMessageKey="-" maxFileSize="${UPLOAD_FILE_MAX_SIZE_AS_USER_STRING}"/>
+								<button id="import" type="button" class="btn btn-primary btn-disable-on-downupload ms-3"
+										onClick="javascript:importGroupsFromSpreadsheet()">
+									<i class="fa fa-upload"></i> <fmt:message key="button.import" />
+								</button>
+							</form>
+						</div>
+					</div>
+				</div>
 			</c:if>
-		/>
+		</div>
 		
-		<c:if test="${canEdit}">
-			<button class="pull-right btn btn-default btn-disable-on-downupload" onClick="javascript:saveGroups()">
-				<i class="fa fa-save"></i>
-				<span><fmt:message key="button.save" /></span>
-			</button>
-		</c:if>
-		<button class="pull-right btn btn-default btn-disable-on-downupload" 
-		   onClick="javascript:window.parent.showOrgGroupingDialog(organisationId)"
-		>
-			<i class="fa fa-users"></i>
-			<fmt:message key="label.course.groups.back" />
-		</button>
-	</div>
-</c:if>
-
-<div id="titleInstructions">
-	<c:choose>
-		<c:when test="${canEdit}">
-			<fmt:message key="label.course.groups.edit.title" />
-		</c:when>
-		<c:otherwise>
-			<fmt:message key="label.course.groups.viewonly.title" />
-		</c:otherwise>
-	</c:choose>
-	<span class="pull-right"><a href="#none" onClick="javascript:showPrintPage();"><i id="print-button" class="fa fa-print roffset10" title="<fmt:message key="label.print"/>"></i></a></span>
-</div>
-
-<table id="groupsTable">
-	<tr>
-		<td id="unassignedUserCell">
-			<div class="userContainerTitle">
-				<fmt:message key="label.course.groups.unassigned" />
-				<span class="sortUsersButton"
+		<!-- A template which gets cloned when a group is added -->
+		<div id="groupTemplate" class="groupContainer d-none p-1 ms-2 mt-2">
+			<div class="userContainerTitle mb-2 d-flex justify-content-between align-middle">
+				<c:if test="${canEdit and not usedForBranching}">
+					<i class="removeGroupButton fa fa-remove fs-3 text-danger ms-1 mt-1" 
+					   title="<fmt:message key='label.course.groups.remove.tooltip' />" ></i>
+				</c:if>
+				<input type="text" class="form-control form-control-sm d-inline"
+					<c:if test="${not canEdit}">
+						readonly="readonly"
+					</c:if>
+				/>
+				<span class="sortUsersButton me-1 mt-1"
 				      title="<fmt:message key='label.course.groups.sort.tooltip' />">&#9650;</span>
 			</div>
 			<div class="userContainer"></div>
-		</td>
-		<td id="groupsCell">
-			<c:if test="${canEdit and not usedForBranching}">
-				<div id="newGroupPlaceholder" class="groupContainer">
-					<div><fmt:message key="label.course.groups.add" /></div>
-				</div>
-			</c:if>
-		</td>
-	</tr>
-</table>
-
-<!-- A template which gets cloned when a group is added -->
-<div id="groupTemplate" class="groupContainer">
-	<div class="userContainerTitle">
-		<c:if test="${canEdit and not usedForBranching}">
-			<i class="removeGroupButton fa fa-remove fa-2x" title="<fmt:message key='label.course.groups.remove.tooltip' />" ></i>
-		</c:if>
-		<input type="text" 
-			<c:if test="${not canEdit}">
-				readonly="readonly"
-			</c:if>
-		/>
-		<span class="sortUsersButton"
-		      title="<fmt:message key='label.course.groups.sort.tooltip' />">&#9650;</span>
-	</div>
-	<div class="userContainer"></div>
-</div>
-
-<c:if test="${lessonMode}">
-	<c:set var="adTitle"><fmt:message key="label.advanced.settings" /></c:set>
-	<!-- LDEV_NTU-7 Page jumps to the top when clicking the link in Grouping -->	
-	<!-- lams:AdvancedAccordian title="${adTitle}"-->
-	
-		<div class="panel-group" id="accordionAdvanced" role="tablist" aria-multiselectable="true"> 
-    <div class="panel panel-default" >
-		 <div class="panel-heading collapsable-icon-left" id="headingAdvanced">
-        	<span class="panel-title">
-	    	<a id="noscrolladvancedid" class="collapsed" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="collapseAdvanced" >
-          	${adTitle}
-        	</a>
-      		</span>
-        </div>
-        
-        <div id="collapseAdvanced" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingAdvanced">
-	        <div id="course-grouping-advanced-settings">
-				<fmt:message key="label.save.as.course.grouping.hint" />
-				<button id="save-course-grouping-button" class="pull-right btn btn-sm btn-primary btn-disable-on-downupload" onClick="javascript:saveAsCourseGrouping();">
-					<i class="fa fa-save"></i>
-					<fmt:message key="label.save.as.course.grouping" />
-				</button>
-			</div>
 		</div>
-	</div>
-	</div>
 		
-	<!--  /lams:AdvancedAccordian-->
-</c:if>
-
-<c:if test="${canEdit}">
-<div class="panel-group ${lessonMode?'voffset5':'voffset20'}" id="accordionUploadGroupFile" role="tablist" aria-multiselectable="true"> 
-    <div class="panel panel-default" >
-        <div class="panel-heading collapsable-icon-left" id="headingUploadGroupFile">
-	        	<span class="panel-title">
-	        		<a id="noscrollinputid" class="collapsed" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="collapseUploadGroupFile" >
-		          		<fmt:message key="label.import.groups.from.template" />
-		        	</a>
-		     </span>
-        </div>
-        <div id="collapseUploadGroupFile" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingUploadGroupFile">
-        		<div id="upload-group-file-settings">
-			<fmt:message key="label.import.groups.from.template.description" />
-			<div>
-				<button id="download-template" class="btn btn-sm btn-default btn-disable-on-downupload" onClick="javascript:downloadTemplate();">
-					<i class="fa fa-save"></i>
-					<fmt:message key="label.download.template" />
+		<!-- Inner dialog placeholders -->
+		<div id="save-course-grouping-dialog-contents" class="dialogContainer p-2">
+			<span id="span-tooltip">
+				<fmt:message key="label.enter.course.grouping.name"/>
+			</span>
+				
+			<input id="dialog-course-grouping-name" type="text" class="form-control my-3" />
+					
+			<div class="text-end">
+				<button id="dialog-close-button" class="btn btn-secondary btn-disable-on-downupload">
+					<fmt:message key="label.cancel" />
 				</button>
+				<button id="dialog-save-button" class="btn btn-primary btn-disable-on-downupload">
+					<fmt:message key="button.save" />
+				</button>
 			</div>
-			<div class="voffset5">
-				<form action="../monitoring/groupingUpload/importLearnersForGrouping.do" enctype="multipart/form-data" id="uploadForm">
-					<input type="hidden" name="activityID" value="${param.activityID}"/>
-					<input type="hidden" name="lessonID" value="${lessonID}"/>
-					<button id="import" type="button" class="pull-right btn btn-sm btn-primary btn-disable-on-downupload" onClick="javascript:importGroupsFromSpreadsheet();return false;">
-						<fmt:message key="button.import" />
-					</button>
-					<lams:FileUpload fileFieldname="groupUploadFile" fileInputMessageKey="label.upload.group.spreadsheet"
-						uploadInfoMessageKey="-" maxFileSize="${UPLOAD_FILE_MAX_SIZE_AS_USER_STRING}"/>
-				</form>
-			</div>
-			<lams:WaitingSpinner id="attachmentArea_Busy"/>
-			</div>
 		</div>
-	</div>
-</div>
-</c:if>
-	
-
-<!-- Inner dialog placeholders -->
-<div id="save-course-grouping-dialog-contents" class="dialogContainer">
-	<span id="span-tooltip">
-		<fmt:message key="label.enter.course.grouping.name"/>
-	</span>
 		
-	<div>
-		<input id="dialog-course-grouping-name" type="text" size="40"/>
-	</div>
-			
-	<div class="btn-group pull-right">
-		<button id="dialog-save-button" class="btn btn-default btn-disable-on-downupload roffset5 ">
-			<fmt:message key="button.save" />
-		</button>
-		<button id="dialog-close-button" class="btn btn-default btn-disable-on-downupload">
-			<fmt:message key="label.cancel" />
-		</button>
-	</div>
-</div>
-	
+		<div id="confirmationDialog" class="modal dialogContainer fade" tabindex="-1" role="dialog">
+		  <div class="modal-dialog  modal-dialog-centered">
+		    <div class="modal-content">
+		    	<div class="modal-body">
+		    	</div>
+		      	<div class="modal-footer">
+		        	<button type="button" class="btn btn-secondary" id="confirmationDialogCancelButton">Cancel</button>
+		        	<button type="button" class="btn btn-primary" id="confirmationDialogConfirmButton">Confirm</button>
+		      	</div>
+		    </div>
+		  </div>
+		</div>
+	</lams:Page5>
 </body>
 </lams:html>
\ No newline at end of file
Index: lams_monitoring/src/java/org/lamsfoundation/lams/monitoring/web/GroupingAJAXController.java
===================================================================
diff -u -r40de3afab4e8d589660daffb6efd6e568e87f8fa -ra13b927ed895f8e3eeaf559371262665e04ff07a
--- lams_monitoring/src/java/org/lamsfoundation/lams/monitoring/web/GroupingAJAXController.java	(.../GroupingAJAXController.java)	(revision 40de3afab4e8d589660daffb6efd6e568e87f8fa)
+++ lams_monitoring/src/java/org/lamsfoundation/lams/monitoring/web/GroupingAJAXController.java	(.../GroupingAJAXController.java)	(revision a13b927ed895f8e3eeaf559371262665e04ff07a)
@@ -27,7 +27,6 @@
 import java.util.Comparator;
 import java.util.HashMap;
 import java.util.HashSet;
-import java.util.Iterator;
 import java.util.LinkedList;
 import java.util.List;
 import java.util.Set;
@@ -56,6 +55,8 @@
 import org.lamsfoundation.lams.usermanagement.dto.UserDTO;
 import org.lamsfoundation.lams.usermanagement.service.IUserManagementService;
 import org.lamsfoundation.lams.usermanagement.util.FirstNameAlphabeticComparator;
+import org.lamsfoundation.lams.util.Configuration;
+import org.lamsfoundation.lams.util.ConfigurationKeys;
 import org.lamsfoundation.lams.util.WebUtil;
 import org.lamsfoundation.lams.web.session.SessionManager;
 import org.lamsfoundation.lams.web.util.AttributeNames;
@@ -89,8 +90,6 @@
     @Autowired
     private IUserManagementService userManagementService;
 
-    private static final String CHOSEN_GROUPING_SCREEN = "chosenGrouping";
-    private static final String VIEW_GROUPS_SCREEN = "viewGroups";
     private static final String PARAM_ACTIVITY_TITLE = "title";
     private static final String PARAM_ACTIVITY_DESCRIPTION = "description";
     public static final String PARAM_MAX_NUM_GROUPS = "maxNumberOfGroups";
@@ -126,35 +125,16 @@
 	    grouping = ((GroupingActivity) activity).getCreateGrouping();
 	}
 
+	if (!forcePrintView && grouping.isChosenGrouping()) {
+	    return "redirect:" + Configuration.get(ConfigurationKeys.SERVER_URL)
+		    + "/organisationGroup/viewGroupings.do?lessonID=" + lessonId + "&activityID=" + activityID;
+	}
+
 	request.setAttribute(AttributeNames.PARAM_ACTIVITY_ID, activityID);
 	request.setAttribute(AttributeNames.PARAM_LESSON_ID, lessonId);
 	request.setAttribute(GroupingAJAXController.PARAM_ACTIVITY_TITLE, activity.getTitle());
 	request.setAttribute(GroupingAJAXController.PARAM_ACTIVITY_DESCRIPTION, activity.getDescription());
 
-	if (!forcePrintView && grouping.isChosenGrouping()) {
-	    // can I remove groups/users - can't if tool sessions have been created
-	    Set<Group> groups = grouping.getGroups();
-	    Iterator<Group> iter = groups.iterator();
-	    boolean mayDelete = true;
-	    while (mayDelete && iter.hasNext()) {
-		Group group = iter.next();
-		mayDelete = group.mayBeDeleted();
-	    }
-
-	    // is this grouping used for branching. If it is, must honour the groups
-	    // set in authoring or some groups won't have a branch. mayDelete can still
-	    // be true or false as you can remove users from groups, you just can't remove
-	    // groups due to the branching relationship.
-	    boolean usedForBranching = grouping.isUsedForBranching();
-
-	    request.setAttribute(GroupingAJAXController.PARAM_MAY_DELETE, mayDelete);
-	    request.setAttribute(GroupingAJAXController.PARAM_USED_FOR_BRANCHING, usedForBranching);
-	    request.setAttribute(GroupingAJAXController.PARAM_MAX_NUM_GROUPS, grouping.getMaxNumberOfGroups());
-	    request.setAttribute(GroupingAJAXController.PARAM_VIEW_MODE, Boolean.FALSE);
-
-	    return "grouping/chosenGrouping";
-	}
-
 	SortedSet<Group> groups = new TreeSet<>(new GroupComparator());
 	groups.addAll(grouping.getGroups());
 
@@ -237,8 +217,8 @@
 
 		if (result) {
 		    if (log.isDebugEnabled()) {
-			log.debug("Removing users " + membersParam.toString() + " from group "
-				+ group.getGroupId() + " in activity " + activityID);
+			log.debug("Removing users " + membersParam.toString() + " from group " + group.getGroupId()
+				+ " in activity " + activityID);
 		    }
 
 		    try {
@@ -263,8 +243,7 @@
 	    if (groupID == null) {
 		String name = WebUtil.readStrParam(request, GroupingAJAXController.PARAM_NAME);
 		if (log.isDebugEnabled()) {
-		    log
-			    .debug("Creating group with name \"" + name + "\" in activity " + activityID);
+		    log.debug("Creating group with name \"" + name + "\" in activity " + activityID);
 		}
 		Group group = monitoringService.addGroup(activityID, name, true);
 		if (group == null) {
@@ -279,8 +258,8 @@
 
 	    if (result && (members != null)) {
 		if (log.isDebugEnabled()) {
-		    log.debug("Adding users " + membersParam.toString() + " to group " + groupID
-			    + " in activity " + activityID);
+		    log.debug("Adding users " + membersParam.toString() + " to group " + groupID + " in activity "
+			    + activityID);
 		}
 
 		// add users to the given group
@@ -311,8 +290,7 @@
 
 	// check if user is allowed to view and edit groupings
 	if (!securityService.hasOrgRole(organisationId, userId,
-		new String[] { Role.GROUP_MANAGER, Role.MONITOR, Role.AUTHOR },
-		"view organisation groupings", false)) {
+		new String[] { Role.GROUP_MANAGER, Role.MONITOR, Role.AUTHOR }, "view organisation groupings", false)) {
 	    response.sendError(HttpServletResponse.SC_FORBIDDEN, "User is not a participant in the organisation");
 	    return null;
 	}
Index: lams_monitoring/web/css/components-monitoring.css
===================================================================
diff -u -r85121f2d5a0394c96ef2ad1859c22b82391279b7 -ra13b927ed895f8e3eeaf559371262665e04ff07a
--- lams_monitoring/web/css/components-monitoring.css	(.../components-monitoring.css)	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
+++ lams_monitoring/web/css/components-monitoring.css	(.../components-monitoring.css)	(revision a13b927ed895f8e3eeaf559371262665e04ff07a)
@@ -192,7 +192,7 @@
 	font-weight: bold;
 }
 
-.monitoring-page-wrapper #sequence-tab-content #required-tasks button.contribute-go-button {
+.monitoring-page-wrapper #sequence-tab-content #required-tasks .contribute-go-button {
 	min-width: 5rem;
 }
 
Fisheye: Tag a13b927ed895f8e3eeaf559371262665e04ff07a refers to a dead (removed) revision in file `lams_monitoring/web/grouping/chosenGrouping.jsp'.
Fisheye: No comparison available.  Pass `N' to diff?
Index: lams_monitoring/web/grouping/viewGroups.jsp
===================================================================
diff -u -r54007f98ca71e0073f19c5db78536437123287c6 -ra13b927ed895f8e3eeaf559371262665e04ff07a
--- lams_monitoring/web/grouping/viewGroups.jsp	(.../viewGroups.jsp)	(revision 54007f98ca71e0073f19c5db78536437123287c6)
+++ lams_monitoring/web/grouping/viewGroups.jsp	(.../viewGroups.jsp)	(revision a13b927ed895f8e3eeaf559371262665e04ff07a)
@@ -24,13 +24,15 @@
 
 <lams:html>
     <lams:head>
-		<lams:css/>
-		<lams:css webapp="monitoring" suffix="monitorLesson"/>
+		<link rel="stylesheet" href="<lams:LAMSURL/>css/bootstrap5.custom.css">
+		<link rel="stylesheet" href="<lams:LAMSURL/>includes/font-awesome6/css/all.css">
+		<link rel="stylesheet" href="<lams:LAMSURL/>css/components.css">
+		
 		<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery.js"></script>
     </lams:head>
     
-    <body class="stripes">
-		<lams:Page type="monitor" title="${title}">
+    <body class="component">
+		<lams:Page5 type="monitor" title="${title}">
 		
 			<div class="container-fluid">
 				<c:choose>
@@ -43,16 +45,16 @@
 					<c:set var="numGroups" value="${fn:length(groups)}"/> 
 					<c:choose>
 					<c:when test="${numGroups == 1}">
-						<c:set var="colClass">col-xs-12</c:set>
+						<c:set var="colClass">col-12</c:set>
 					</c:when>
 					<c:when test="${numGroups == 2}">
-						<c:set var="colClass">col-xs-6</c:set>
+						<c:set var="colClass">col-6</c:set>
 					</c:when>
 					<c:when test="${numGroups == 3}">
-						<c:set var="colClass">col-xs-4</c:set>
+						<c:set var="colClass">col-4</c:set>
 					</c:when>
 					<c:otherwise>
-						<c:set var="colClass">col-md-3</c:set>
+						<c:set var="colClass">col-3</c:set>
 					</c:otherwise>
 					</c:choose>
 					
@@ -61,16 +63,23 @@
 			 			<div class="${colClass}">
 							<h4><c:out value="${isCourseGrouping?group.name:group.groupName}" /></h4>
 							<c:choose> 
-							<c:when test="${empty group.users}">
-								<span><fmt:message key="label.no.learners"/></span>
-							</c:when>
-							<c:otherwise>
-							<table class="group-table table table-condensed table-striped">
-							<c:forEach items="${group.users}" var="user">
-								<tr><td>	<lams:Portrait userId="${user.userId}"/><span class="loffset5"><c:out value="${user.firstName} ${user.lastName}" /></span></td></tr>
-							</c:forEach>
-							</table>
-							</c:otherwise>
+								<c:when test="${empty group.users}">
+									<span><fmt:message key="label.no.learners"/></span>
+								</c:when>
+								<c:otherwise>
+									<table class="group-table table table-condensed table-striped">
+									<c:forEach items="${group.users}" var="user">
+										<tr>
+											<td>
+												<lams:Portrait userId="${user.userId}"/>
+												<span class="loffset5">
+													<c:out value="${user.firstName} ${user.lastName}" />
+												</span>
+											</td>
+										</tr>
+									</c:forEach>
+									</table>
+								</c:otherwise>
 							</c:choose>
 						</div>
 					<c:if test="${(groupCounter.last) or (((groupCounter.index+1) mod 4) == 0)}"></div></c:if>
@@ -79,10 +88,10 @@
 				</c:choose>	
 			</div>
 			<div id="footer"></div>
-		</lams:Page>
+		</lams:Page5>
 
 		<div id="footer">
 		</div><!--closes footer-->
 
-    </body>
-</lams:html>
+    </body5>
+</lams:html>
\ No newline at end of file
Index: lams_monitoring/web/includes/javascript/monitorLesson.js
===================================================================
diff -u -r35dd47046a83ab2f9e80f76dc22d1521412219b5 -ra13b927ed895f8e3eeaf559371262665e04ff07a
--- lams_monitoring/web/includes/javascript/monitorLesson.js	(.../monitorLesson.js)	(revision 35dd47046a83ab2f9e80f76dc22d1521412219b5)
+++ lams_monitoring/web/includes/javascript/monitorLesson.js	(.../monitorLesson.js)	(revision a13b927ed895f8e3eeaf559371262665e04ff07a)
@@ -1175,6 +1175,9 @@
 									
 							}
 							break;
+					case 6 : entryContent += '<a class="btn btn-primary contribute-go-button" target="_blank" href="'
+							 + this.url + '" title="' + LABELS.CONTRIBUTE_TOOLTIP + '">' + LABELS.CONTRIBUTE_BUTTON + '</a>';
+							break;
 					default : entryContent += '<button type="button" class="btn btn-primary contribute-go-button" onClick="javascript:openPopUp(\''
 						 + this.url + '\',\'ContributeActivity\', 800, 1280, true)" title="' + LABELS.CONTRIBUTE_TOOLTIP
 						 + '">' + LABELS.CONTRIBUTE_BUTTON + '</button>';
@@ -3031,27 +3034,6 @@
     toast.show();
 }
 
-function showConfirm(body, callback) {
-	let dialog = $('#confirmationDialog').data('confirmed', null).off('hidden.bs.modal').on('hidden.bs.modal', function(){
-		if (dialog.data('confirmed')) {
-			callback(true);
-		}
-	});
-
-	$('.modal-body', dialog).html(body)
-	
-	$("#confirmationDialogConfirmButton").off('click').on("click", function(){
-		dialog.data('confirmed', true);
-    	dialog.modal('hide');
-	});
-  
-	$("#confirmationDialogCancelButton").off('click').on("click", function(){
-    	dialog.modal('hide');
-	});
-
-	dialog.modal('show');
-}
-
 /**
  * Works as dblclick for mobile devices.
  */
Index: lams_monitoring/web/tblmonitor/teams.jsp
===================================================================
diff -u -reaf86cc891c4a0dbcc71fa7bd87f0657a250c730 -ra13b927ed895f8e3eeaf559371262665e04ff07a
--- lams_monitoring/web/tblmonitor/teams.jsp	(.../teams.jsp)	(revision eaf86cc891c4a0dbcc71fa7bd87f0657a250c730)
+++ lams_monitoring/web/tblmonitor/teams.jsp	(.../teams.jsp)	(revision a13b927ed895f8e3eeaf559371262665e04ff07a)
@@ -275,10 +275,9 @@
 		</div>
 		<div class="col-2 text-end">
 			<c:if test="${not empty groupsSetupUrl}">
-				<button onClick="javascript:openPopUp('<lams:LAMSURL/>${groupsSetupUrl}','GroupsSetup', 800, 1280, true)" type="button"
-					    class="btn btn-secondary">
+				<a href="<lams:LAMSURL/>${groupsSetupUrl}" class="btn btn-secondary" target="_blank">
 					<fmt:message key="label.teams.setup"/>
-				</button>
+				</a>
 			</c:if>
 		</div>
 	</div>