Index: lams_central/src/java/org/lamsfoundation/lams/web/DisplayGroupController.java
===================================================================
diff -u -re2956cb8a072cc5ac9ceabaa9dac30c5750bf10b -r9c400fc4bde12823825e7983912637b7833a0128
--- lams_central/src/java/org/lamsfoundation/lams/web/DisplayGroupController.java	(.../DisplayGroupController.java)	(revision e2956cb8a072cc5ac9ceabaa9dac30c5750bf10b)
+++ lams_central/src/java/org/lamsfoundation/lams/web/DisplayGroupController.java	(.../DisplayGroupController.java)	(revision 9c400fc4bde12823825e7983912637b7833a0128)
@@ -434,7 +434,7 @@
 
 	    // Adding lesson notifications links if enabled
 	    if (isGroupManagerOrMonitor && bean.isEnableLessonNotifications()) {
-		lessonLinks.addFirst(new IndexLinkBean("index.emailnotifications",
+		auxiliaryLessonLinks.addFirst(new IndexLinkBean("index.emailnotifications",
 			"javascript:showNotificationsDialog(null," + lessonId + ")", "fa fa-fw fa-bullhorn",
 			"index.emailnotifications.tooltip"));
 	    }
Index: lams_central/web/css/_main_base.scss
===================================================================
diff -u -r71efef7fa4504462320f228cbe093f3688003947 -r9c400fc4bde12823825e7983912637b7833a0128
--- lams_central/web/css/_main_base.scss	(.../_main_base.scss)	(revision 71efef7fa4504462320f228cbe093f3688003947)
+++ lams_central/web/css/_main_base.scss	(.../_main_base.scss)	(revision 9c400fc4bde12823825e7983912637b7833a0128)
@@ -73,8 +73,7 @@
 
 /*OFFCANVAS BAR*/
 #favorite-organisations {
-    border-top: 1px solid rgba(255, 255, 255, 0.16);
-	border-bottom: 1px solid rgba(255, 255, 255, 0.16);
+	border-bottom: 1px solid #efefef;
 }
 #favorite-organisations > li > a, .tablesorter a {
 	color: $main_fav_org_link;
@@ -96,14 +95,15 @@
 }
 /*#offcanvas .active > a,*/
 #offcanvas .active > a:hover,
-#offcanvas .active > a:focus {
+#offcanvas .active > a:focus,
+#offcanvas a.active {
 	background: $main_offcanvas_link;
 }
-#offcanvas .active > a {
+#offcanvas .active > a,#offcanvas a.active {
     color: $main_offcanvas_link_color;
 }
 #offcanvas td.active {
-    border-right: 10px solid $brand-primary-bright;
+    border-right: 10px solid #8c8c8c;
     background: $main_offcanvas_link;
 }
 .offcanvas-search {
@@ -277,10 +277,13 @@
 .lesson-actions {
 	float: right;
 	font-size: 1.2em;
-	opacity: 0.3;
 	/* filter: alpha(opacity = 10); msie */
 }
 
+.lesson-actions, .auxiliary-links-menu button i {
+	opacity: 0.4;
+}
+
 .lesson-actions a {
 	border-bottom: none;	
 }
Index: lams_central/web/favoriteOrganisations.jsp
===================================================================
diff -u -rae4e7fd3d6b21cb7f41a733565442950cdd9d232 -r9c400fc4bde12823825e7983912637b7833a0128
--- lams_central/web/favoriteOrganisations.jsp	(.../favoriteOrganisations.jsp)	(revision ae4e7fd3d6b21cb7f41a733565442950cdd9d232)
+++ lams_central/web/favoriteOrganisations.jsp	(.../favoriteOrganisations.jsp)	(revision 9c400fc4bde12823825e7983912637b7833a0128)
@@ -3,12 +3,12 @@
 <div id="favorite-organisations-container" class="tour-organisations-favorites">
 
 	<c:if test="${not empty favoriteOrganisations}">
-		<ul class="nav" id="favorite-organisations">
+		<ul class="nav flex-column" id="favorite-organisations">
 			<c:forEach var="favoriteOrganisation" items="${favoriteOrganisations}">
-				<li id="favorite-li-${favoriteOrganisation.organisationId}" 
-						<c:if test="${favoriteOrganisation.organisationId == activeOrgId}">class="active"</c:if>>
+				<li id="favorite-li-${favoriteOrganisation.organisationId}" class="nav-item">
 					<a data-id="${favoriteOrganisation.organisationId}" href="#nogo" 
-							onClick="javascript:selectOrganisation(${favoriteOrganisation.organisationId})">
+							onClick="javascript:selectOrganisation(${favoriteOrganisation.organisationId})"
+							class="nav-link <c:if test="${favoriteOrganisation.organisationId == activeOrgId}">active</c:if>">
 						${favoriteOrganisation.name}
 						<span class="pull-right"><i class="fa fa-star"></i></span>
 					</a>
Index: lams_central/web/groupContents.jsp
===================================================================
diff -u -r71efef7fa4504462320f228cbe093f3688003947 -r9c400fc4bde12823825e7983912637b7833a0128
--- lams_central/web/groupContents.jsp	(.../groupContents.jsp)	(revision 71efef7fa4504462320f228cbe093f3688003947)
+++ lams_central/web/groupContents.jsp	(.../groupContents.jsp)	(revision 9c400fc4bde12823825e7983912637b7833a0128)
@@ -115,7 +115,7 @@
 				    	<i class="fa fa-ellipsis-h" title="<fmt:message key="label.completed"/>"></i>
 					</button>
 					
-					<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+					<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
 						<c:forEach var="lessonlink" items="${lesson.auxiliaryLinks}">
 							<a href="<c:out value='${lessonlink.url}'/>" style="padding-left: 5px; padding-right:5px;" class="dropdown-item"
 								<c:if test="${not empty lessonlink.tooltip}">
Index: lams_central/web/includes/javascript/main.js
===================================================================
diff -u -re2956cb8a072cc5ac9ceabaa9dac30c5750bf10b -r9c400fc4bde12823825e7983912637b7833a0128
--- lams_central/web/includes/javascript/main.js	(.../main.js)	(revision e2956cb8a072cc5ac9ceabaa9dac30c5750bf10b)
+++ lams_central/web/includes/javascript/main.js	(.../main.js)	(revision 9c400fc4bde12823825e7983912637b7833a0128)
@@ -47,7 +47,7 @@
 						
 						rows += '<td id="org-row-' + orgId +'"';
 						if (activeOrgId == orgId) {
-							rows += ' class="active bg-secondary"';
+							rows += ' class="active"';
 						}
 						rows += '>';
 						
@@ -127,12 +127,12 @@
 function selectOrganisation(newOrgId) {
 	//remove active CSS class from the old org
 	if (activeOrgId != null) {
-		$("#org-row-" + activeOrgId + ", #favorite-li-" + activeOrgId).removeClass("active bg-secondary");
+		$("#org-row-" + activeOrgId + ", #favorite-li-" + activeOrgId + " a").removeClass("active");
 		$("#org-row-" + activeOrgId + " a>i").remove();
 	}	
 	
 	//add active CSS class
-	$("#org-row-" + newOrgId + ", #favorite-li-" + newOrgId).addClass("active bg-secondary");
+	$("#org-row-" + newOrgId + ", #favorite-li-" + newOrgId + " a").addClass("active");
 	$("#org-row-" + newOrgId + " a").append( "<i class='fa fa-chevron-circle-right fa-lg pull-right'></i>" )
 	
 	activeOrgId = newOrgId;
Index: lams_central/web/main.jsp
===================================================================
diff -u -r614e3f4fc68c65d8b2d236d094bf088123b6ab9d -r9c400fc4bde12823825e7983912637b7833a0128
--- lams_central/web/main.jsp	(.../main.jsp)	(revision 614e3f4fc68c65d8b2d236d094bf088123b6ab9d)
+++ lams_central/web/main.jsp	(.../main.jsp)	(revision 9c400fc4bde12823825e7983912637b7833a0128)
@@ -24,9 +24,10 @@
 .cards tbody tr {
    display: inline-block;
    width: 23rem;
+   height: auto;
    margin: 0.5rem;
    border: 0.0625rem solid rgba(0, 0, 0, .125);
-   border-radius: .25rem;
+   border-radius: .3rem;
    box-shadow: 0.25rem 0.25rem 0.5rem rgba(0, 0, 0, 0.25);
 }
 
@@ -54,6 +55,8 @@
 }
 .cards .lesson-image {
 	min-height: 170px;
+	border-top-left-radius: .3rem;
+    border-top-right-radius: .3em;
 }
 table:not(.cards) .lesson-image {
     background-image: none;
@@ -126,7 +129,7 @@
 
 .auxiliary-links-menu {
 	float: right;
-	margin-top: -3px;
+	margin: -3px 0 10px 7px;
 }
 .auxiliary-links-menu button{
 	background-color: rgba(0,0,0,.03);
@@ -345,10 +348,12 @@
 			var selectedOrderId = $(button).val();
 
 			//hide row-reorder if non-default order is selected
-			if (selectedOrderId == 0) {
-				$("table:not(.cards) td.row-reorder", $("#" + tableId)).show();
-			} else {
-				$("table:not(.cards) td.row-reorder", $("#" + tableId)).hide();
+			if ( !$("#" + tableId).hasClass("cards")) {
+				if (selectedOrderId == 0) {
+					$("td.row-reorder", $("#" + tableId)).show();
+				} else {
+					$("td.row-reorder", $("#" + tableId)).hide();
+				}
 			}
 			
 			var orderDirection = selectedOrderId == 0 ? 'asc':'desc';
@@ -399,40 +404,11 @@
 		                //toggle button's icon
 		                $('.fa', node).toggleClass(['fa-table', 'fa-id-badge']);
 			            $('.list-view-label,.card-view-label', node).toggle();
-			            
-			            if ($table.hasClass('cards')) {
-			               // Create an array of labels containing all table headers
-			               var labels = [];
-			               $('thead th', $table).each(function () {
-			                  labels.push($(this).text());
-			               });
 
-			               // Add data-label attribute to each cell
-			               $('tbody tr', $table).each(function () {
-			                  $(this).find('td').each(function (column) {
-			                     $(this).attr('data-label', labels[column]);
-			                  });
-			               });
-
-			               var max = 0;
-			               $('tbody tr', $table).each(function () {
-			                  max = Math.max($(this).height(), max);
-			               }).height(max);
-
-			            } else {
-			               // Remove data-label attribute from each cell
-			               $('tbody td', $table).each(function () {
-			                  $(this).removeAttr('data-label');
-			               });
-
-			               $('tbody tr', $table).each(function () {
-			                  $(this).height('auto');
-			               });
-			        	}
-
-			            //toggle buttons
+			            //toggle auxiliary buttons
 			            $(".auxiliary-links-menu", $table).toggle();
 
+			            //hide charts for smaller devices
 			            if (isUserMonitor) {
 				            $("td.chart-td", lessonsTable).toggleClass("d-none d-sm-table-cell");
 				        }
@@ -515,7 +491,12 @@
 								'rgb(252, 226, 5)',//yellow
 								'rgb(255, 146, 140)'//red
 							]
-						}]
+						}],
+						labels: [
+							'Completed',
+							'Attempted',
+							'Not Started'
+						]
 					},
 					options: {
 						responsive: true,