Index: lams_central/conf/scss/_lams_variables.scss
===================================================================
diff -u -re2956cb8a072cc5ac9ceabaa9dac30c5750bf10b -r71efef7fa4504462320f228cbe093f3688003947
--- lams_central/conf/scss/_lams_variables.scss	(.../_lams_variables.scss)	(revision e2956cb8a072cc5ac9ceabaa9dac30c5750bf10b)
+++ lams_central/conf/scss/_lams_variables.scss	(.../_lams_variables.scss)	(revision 71efef7fa4504462320f228cbe093f3688003947)
@@ -58,7 +58,7 @@
 $main_default_link: #5A738E;
 $main_blue_light_highlight: #A6E5FD;
 $main_fav_org_link: #A7B1C2;
-$main_offcanvas_link: #2B5B95;
+$main_offcanvas_link: #adadad;
 $main_offcanvas_link_color: $body-bg;
 $main_offcanvas_background: $brand-primary-darker;
 $main_offcanvas_color: $gray-lighter;
Index: lams_central/web/css/_main_base.scss
===================================================================
diff -u -re2956cb8a072cc5ac9ceabaa9dac30c5750bf10b -r71efef7fa4504462320f228cbe093f3688003947
--- lams_central/web/css/_main_base.scss	(.../_main_base.scss)	(revision e2956cb8a072cc5ac9ceabaa9dac30c5750bf10b)
+++ lams_central/web/css/_main_base.scss	(.../_main_base.scss)	(revision 71efef7fa4504462320f228cbe093f3688003947)
@@ -15,16 +15,10 @@
 	background: $main_offcanvas_background;
     color: #8c8a8a;
 }
-.courses-title {
-    text-overflow: ellipsis;
-    overflow: hidden;
-    font-weight: 300;
-    font-size: 23px;
-    width: 100%;
-    margin-left: 0 !important;
-    line-height: 49px;
-    margin: 0;
-    padding-left: 25px;
+.offcanvas-header {
+	padding: 15px 0 10px 25px;
+    text-transform: uppercase;
+    font-size: 1.05rem;
 }
 #page-wrapper {
 	margin: 0 0 0 220px;
@@ -40,7 +34,10 @@
 	.icon-remove {
 		display: none !important;
 	}
+#org-container {
+	padding: 17px 10px;
 }
+}
 @media (max-width: 768px) {
 	#offcanvas {
 		width: 100%;
@@ -57,10 +54,8 @@
 	}
 }
 
-#org-container {
-	padding: 17px 10px 17px 25px;
-}
 
+
 /*FOOTER*/
 footer {
 	width: 100%;
@@ -91,7 +86,7 @@
 .pagesize:hover,
 .tablesorter a:hover,
 .tablesorter a:focus {
-  background-color: $brand-primary-darkest;
+  background-color: #adadad;
   color: white;
 }
 .tablesorter a {
@@ -111,9 +106,6 @@
     border-right: 10px solid $brand-primary-bright;
     background: $main_offcanvas_link;
 }
-.offcanvas-header {
-	padding: 15px 0px 0px 0px;
-}
 .offcanvas-search {
 	padding: 15px 19px 15px;
 	margin-bottom: 0;
@@ -180,7 +172,7 @@
 
 /*TOP HEADER*/
 .top-nav {
-    border-bottom: 1px solid $main_dropdown_border;
+    border-bottom: 1px solid #efefef;
     height: 53px;
 }
 @media (min-width: 502px) {
Index: lams_central/web/css/defaultHTML_main.scss
===================================================================
diff -u -re2956cb8a072cc5ac9ceabaa9dac30c5750bf10b -r71efef7fa4504462320f228cbe093f3688003947
--- lams_central/web/css/defaultHTML_main.scss	(.../defaultHTML_main.scss)	(revision e2956cb8a072cc5ac9ceabaa9dac30c5750bf10b)
+++ lams_central/web/css/defaultHTML_main.scss	(.../defaultHTML_main.scss)	(revision 71efef7fa4504462320f228cbe093f3688003947)
@@ -1,4 +1,4 @@
 @import "_dialogs.scss";
 @import "_lams_variables.scss";
 @import "_main_base.scss";
-/*TOP HEsdssdsdsADER*/
\ No newline at end of file
+/*TOP HEADER*/
\ No newline at end of file
Index: lams_central/web/css/images/trianglify_1.png
===================================================================
diff -u
Binary files differ
Index: lams_central/web/css/images/trianglify_10.png
===================================================================
diff -u
Binary files differ
Index: lams_central/web/css/images/trianglify_2.png
===================================================================
diff -u
Binary files differ
Index: lams_central/web/css/images/trianglify_3.png
===================================================================
diff -u
Binary files differ
Index: lams_central/web/css/images/trianglify_4.png
===================================================================
diff -u
Binary files differ
Index: lams_central/web/css/images/trianglify_5.png
===================================================================
diff -u
Binary files differ
Index: lams_central/web/css/images/trianglify_6.png
===================================================================
diff -u
Binary files differ
Index: lams_central/web/css/images/trianglify_7.png
===================================================================
diff -u
Binary files differ
Index: lams_central/web/css/images/trianglify_8.png
===================================================================
diff -u
Binary files differ
Index: lams_central/web/css/images/trianglify_9.png
===================================================================
diff -u
Binary files differ
Index: lams_central/web/group.jsp
===================================================================
diff -u -re2956cb8a072cc5ac9ceabaa9dac30c5750bf10b -r71efef7fa4504462320f228cbe093f3688003947
--- lams_central/web/group.jsp	(.../group.jsp)	(revision e2956cb8a072cc5ac9ceabaa9dac30c5750bf10b)
+++ lams_central/web/group.jsp	(.../group.jsp)	(revision 71efef7fa4504462320f228cbe093f3688003947)
@@ -27,12 +27,10 @@
 
 <!-- Group contents -->
 <div class="j-course-contents">
-	<div class="sequence-list">
-		<div id="${orgBean.id}-lessons" class="lesson-table">
-			<c:if test="${not empty org.lessons}">
-				<%@ include file="groupContents.jsp"%>
-			</c:if>
-		</div>
+	<div id="${orgBean.id}-lessons" class="lesson-table">
+		<c:if test="${not empty org.lessons}">
+			<%@ include file="groupContents.jsp"%>
+		</c:if>
 	</div>
 	
 	<!-- Child organisations -->
Index: lams_central/web/groupContents.jsp
===================================================================
diff -u -r11f16606c7baa29a2a4aecdb66e95278e106f4c5 -r71efef7fa4504462320f228cbe093f3688003947
--- lams_central/web/groupContents.jsp	(.../groupContents.jsp)	(revision 11f16606c7baa29a2a4aecdb66e95278e106f4c5)
+++ lams_central/web/groupContents.jsp	(.../groupContents.jsp)	(revision 71efef7fa4504462320f228cbe093f3688003947)
@@ -1,6 +1,6 @@
 <%@ include file="/common/taglibs.jsp"%>
 
- <table id="lessons-table-${org.id}" class="lessons-table table cards <c:if test="${isUserMonitor}">user-monitor</c:if>" style="width:100%" 
+ <table id="lessons-table-${org.id}" class="lessons-table table cards dt-responsive <c:if test="${isUserMonitor}">user-monitor</c:if>" style="width:100%" 
  		data-orgid="${org.id}"
  		data-is-user-monitor="${isUserMonitor}"
  		data-row-reordering-enabled="${isRowReorderingEnabled}">
@@ -12,6 +12,7 @@
 				onclick="<c:out value="${lesson.url}"/>"
 				style="cursor:pointer;"
 			</c:if>>
+
 		<td>
 			${i.index}
 		</td>	
@@ -27,40 +28,8 @@
 		<td id="favorite-lesson-td-${lesson.id}" style="display:none;"
 			>${lesson.favorite}</td>
 		
-		<td class="lesson-image">
-			<c:if test="${not empty lesson.auxiliaryLinks}">
-				<div class="dropdown auxiliary-links-menu">
-					<button class="btn btn-sm btn-light" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-				    	<i class="fa fa-ellipsis-h" title="<fmt:message key="label.completed"/>"></i>
-					</button>
-					
-					<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
-						<c:forEach var="lessonlink" items="${lesson.auxiliaryLinks}">
-							<a href="<c:out value='${lessonlink.url}'/>" style="padding-left: 10px; padding-right:10px;" class="dropdown-item"
-								<c:if test="${not empty lessonlink.tooltip}">
-									title="<fmt:message key='${lessonlink.tooltip}'/>"
-								</c:if>>
-								<i class="${lessonlink.style} lesson-action-label" title="<fmt:message key='${lessonlink.name}'/>"></i>
-								<fmt:message key='${lessonlink.tooltip}'/>
-							</a>
-						</c:forEach>
-				  	</div>
-				</div>
-			</c:if>
-
-			<c:if test="${isUserMonitor}">
-				<div class="chart-holder">
-					<canvas class="chart-area" 
-						data-count-completed-learners="${lesson.countCompletedLearners}"
-						data-count-attempted-learners="${lesson.countAttemptedLearners}"
-						data-count-not-started-learners="${lesson.countTotalLearners - lesson.countAttemptedLearners}">
-					</canvas>
-				</div>
-			</c:if>
-		</td>
-		
-		<td class="lesson-name">
-			<div class="lesson-name-div">
+		<td class="lesson-image lesson-image-${lesson.id % 10 + 1}">
+			<div class="lesson-name">
 				<c:if test="${isFavouriteLessonEnabled}">
 					<a href="#nogo" onclick="javascript:toggleFavoriteLesson(${org.id}, ${lesson.id});" class="tour-favorite-lesson">
 						<c:choose>
@@ -88,40 +57,83 @@
 				</c:choose>
 				
 				<c:if test="${lesson.state eq 4}">
-					<i class="fa fa-minus-circle text-danger loffset10" title="<fmt:message key="label.disabled"/>"></i>
+					<i class="fa fa-minus-circle text-danger loffset5" title="<fmt:message key="label.disabled"/>"></i>
 				</c:if>
 				<c:if test="${lesson.state eq 6}">
-					<i class="fa fa-archived text-danger loffset10" title="<fmt:message key="label.archived"/>"></i>
+					<i class="fa fa-archived text-danger loffset5" title="<fmt:message key="label.archived"/>"></i>
 				</c:if>
 				<c:if test="${lesson.dependent or lesson.scheduledFinish}">
-					 <i class="fa fa-code-fork text-warning loffset10" title="<fmt:message key="index.conditions.flag.tooltip"/>"></i>
+					 <i class="fa fa-code-fork text-warning loffset5" title="<fmt:message key="index.conditions.flag.tooltip"/>"></i>
 				</c:if>
 				<c:if test="${lesson.completed}">
-					<i class="fa fa-check-circle text-success loffset10" title="<fmt:message key="label.completed"/>"></i>
+					<i class="fa fa-check-circle text-success loffset5" title="<fmt:message key="label.completed"/>"></i>
 				</c:if>
 			</div>
 			
 			<c:if test="${!isUserMonitor}">
-				<div class="progress">
-		  			<div class="progress-bar" role="progressbar" style="width: ${lesson.progressAsLearner}%;" aria-valuenow="${lesson.progressAsLearner}" aria-valuemin="0" aria-valuemax="100">
-		  				<span class="aaa">${lesson.progressAsLearner}% completed</span>
-		  			</div>
+				<div class="learner-bottom-card">
+					<c:if test="${not empty lesson.startDate}">
+						<lams:Date value="${lesson.startDate}" timeago="true"/>
+					</c:if>
+				
+					<div class="progress">
+			  			<div class="progress-bar" role="progressbar" style="width: ${lesson.progressAsLearner}%;" aria-valuenow="${lesson.progressAsLearner}" aria-valuemin="0" aria-valuemax="100">
+			  				<span class="aaa">${lesson.progressAsLearner}% completed</span>
+			  			</div>
+					</div>
 				</div>
 			</c:if>
 		</td>
+		
+		<td class="chart-td">
+			<c:if test="${isUserMonitor}">
+			<span class="learners-count text-secondary" title="<fmt:message key="lesson.ratio.learners.tooltip"/>">
+				<i class="fa fa-users roffset5" title="<fmt:message key="lesson.ratio.learners.tooltip"/>"></i>
+				${lesson.countAttemptedLearners}/${lesson.countTotalLearners}
+			</span>	
+			</c:if>
+		</td>
 	
+		<td class="chart-td">
+			<c:if test="${isUserMonitor}">
+				<div class="chart-holder">
+					<canvas class="chart-area" 
+						data-count-completed-learners="${lesson.countCompletedLearners}"
+						data-count-attempted-learners="${lesson.countAttemptedLearners}"
+						data-count-not-started-learners="${lesson.countTotalLearners - lesson.countAttemptedLearners}">
+					</canvas>
+				</div>
+			</c:if>
+		</td>
+	
 		<!-- Buttons -->
 	    <td class="buttons-td">
 	    	<c:if test="${isUserMonitor}">
-			<span class="learners-count text-secondary" title="<fmt:message key="lesson.ratio.learners.tooltip"/>">
-				<i class="fa fa-users roffset5" title="<fmt:message key="lesson.ratio.learners.tooltip"/>"></i>
-				${lesson.countAttemptedLearners}/${lesson.countTotalLearners}
-			</span>
-				
+			<c:if test="${not empty lesson.auxiliaryLinks}">
+				<div class="dropdown auxiliary-links-menu">
+					<button class="btn btn-sm btn-light" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+				    	<i class="fa fa-ellipsis-h" title="<fmt:message key="label.completed"/>"></i>
+					</button>
+					
+					<div class="dropdown-menu" 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}">
+									title="<fmt:message key='${lessonlink.tooltip}'/>"
+								</c:if>>
+								<i class="${lessonlink.style} lesson-action-label" title="<fmt:message key='${lessonlink.name}'/>"></i>
+								<fmt:message key='${lessonlink.tooltip}'/>
+							</a>
+						</c:forEach>
+				  	</div>
+				</div>
+			</c:if>
+
 			<div class="lesson-actions" style="transform: rotate(180deg);">
+			
 				<span class="auxiliary-links">
 					<c:forEach var="lessonlink" items="${lesson.auxiliaryLinks}">
-						<a href="<c:out value='${lessonlink.url}'/>"  style="padding-left: 10px; padding-right:10px;"
+						<a href="<c:out value='${lessonlink.url}'/>"  style="padding-left: 5px; padding-right:5px;"
 							<c:if test="${not empty lessonlink.tooltip}">
 								title="<fmt:message key='${lessonlink.tooltip}'/>"
 							</c:if>>
@@ -134,7 +146,7 @@
 					<c:choose><c:when test="${addTourClass}"><c:set var="tourClass">class="tour-${lessonlink.id}"</c:set></c:when>
 					<c:otherwise><c:set var="tourClass"></c:set></c:otherwise></c:choose>
 					
-					<a href="<c:out value='${lessonlink.url}'/>"  ${tourClass} style="padding-left: 10px; padding-right:10px;"
+					<a href="<c:out value='${lessonlink.url}'/>"  ${tourClass} style="padding-left: 5px; padding-right:5px;"
 						<c:if test="${not empty lessonlink.tooltip}">
 							title="<fmt:message key='${lessonlink.tooltip}'/>"
 						</c:if>>
@@ -143,7 +155,7 @@
 				</c:forEach>
 				
 				<c:if test="${not empty lesson.requiredTasksUrl}">
-					<a href="<c:out value='${lesson.requiredTasksUrl}'/>" style="padding-left: 10px; padding-right:10px;"
+					<a href="<c:out value='${lesson.requiredTasksUrl}'/>" style="padding-left: 5px; padding-right:5px;"
 							title="<fmt:message key='${lessonlink.tooltip}'/>">
 						<i style="transform: rotate(-180deg);" class="fa fa-fw fa-exclamation-triangle lesson-action-label" title="<fmt:message key='${lessonlink.name}'/>"></i>
 					</a>
Index: lams_central/web/groupHeader.jsp
===================================================================
diff -u -re2956cb8a072cc5ac9ceabaa9dac30c5750bf10b -r71efef7fa4504462320f228cbe093f3688003947
--- lams_central/web/groupHeader.jsp	(.../groupHeader.jsp)	(revision e2956cb8a072cc5ac9ceabaa9dac30c5750bf10b)
+++ lams_central/web/groupHeader.jsp	(.../groupHeader.jsp)	(revision 71efef7fa4504462320f228cbe093f3688003947)
@@ -30,7 +30,7 @@
 				<div class="btn-group">
 					<button onClick="<c:out value='${link.url}'/>" type="button" class="btn btn-light btn-sm ${addTourClass?'tour-add-lesson':''}">
 						<i class="${link.style}" title="<fmt:message key="index.addlesson" />"></i>
-						<span class="hidden-xs"><fmt:message key="index.addlesson" /></span>
+						<span class="d-none d-sm-inline"><fmt:message key="index.addlesson" /></span>
 					</button>
 					
 					<button type="button" class="btn btn-light btn-sm dropdown-toggle dropdown-toggle-split ${addTourClass?'tour-add-single-lesson':''}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static">
@@ -55,7 +55,7 @@
 				<div class="btn-group" title="<fmt:message key="${link.tooltip}" />">
 					<button onClick="<c:out value='${link.url}'/>" type="button" class="btn btn-light btn-sm">
 						<i class="${link.style}"></i>
-						<span class="hidden-xs"><fmt:message key="index.kumalive" /></span>
+						<span class="d-none d-md-inline"><fmt:message key="index.kumalive" /></span>
 					</button>
 					
 					<button type="button" class="btn btn-light btn-sm dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static">
@@ -95,7 +95,7 @@
                     </c:if>    
                 >
 					<i class="${link.style}" title="<fmt:message key="${link.name}" />"></i>
-					<span class="hidden-xs"><fmt:message key="${link.name}" /></span>
+					<span class="d-none d-md-inline"><fmt:message key="${link.name}" /></span>
 				</a>
 			</div>
 		</c:when>
@@ -108,7 +108,7 @@
                  	</c:if>
                 >
 					<i class="${link.style}" title="<fmt:message key="${link.name}" />"></i>
-					<span class="hidden-xs"><fmt:message key="${link.name}" /></span>
+					<span class="d-none d-md-inline"><fmt:message key="${link.name}" /></span>
 				</button>
 			</div>
 		</c:otherwise>
Index: lams_central/web/main.jsp
===================================================================
diff -u -r11f16606c7baa29a2a4aecdb66e95278e106f4c5 -r71efef7fa4504462320f228cbe093f3688003947
--- lams_central/web/main.jsp	(.../main.jsp)	(revision 11f16606c7baa29a2a4aecdb66e95278e106f4c5)
+++ lams_central/web/main.jsp	(.../main.jsp)	(revision 71efef7fa4504462320f228cbe093f3688003947)
@@ -15,10 +15,15 @@
 	<link rel="stylesheet" href="/lams/css/bootstrap-tourist.min.css" type="text/css" media="screen">
 	<link rel="stylesheet" href="/lams/css/datatables.css">
 	<style>
-	
+
+@media (max-width: 810px) { 
+	.cards tbody {
+		text-align: center;
+	}
+}
 .cards tbody tr {
-   float: left;
-   width: 26rem;
+   display: inline-block;
+   width: 23rem;
    margin: 0.5rem;
    border: 0.0625rem solid rgba(0, 0, 0, .125);
    border-radius: .25rem;
@@ -33,21 +38,6 @@
    display: none;
 }
 
-.cards td:before {
-   content: attr(data-label);
-   position: relative;
-   float: left;
-   color: #808080;
-   min-width: 4rem;
-   margin-left: 0;
-   margin-right: 1rem;
-   text-align: left;   
-}
-
-tr.selected td:before {
-   color: #CCC;
-}
-
 .table.cards td, .table.cards th {
     border-top: 0; /* Overwrite bootstrap rule */
 }
@@ -56,42 +46,92 @@
 	margin-top: 10px;
 	float: left;
 }
+@media (max-width: 575.98px) { 
+	.dataTables_filter {
+		width: 100%;
+	}
+}
 
 .lesson-image {
-	min-height: 200px;
-	background-image: url(http://localhost:8080/lams/css/images/trianglify.png);
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center center;
 }
-.user-monitor .lesson-image{
-	background-image: linear-gradient( rgba(255, 255, 255, .5), rgba(255, 255, 255, 0.5) ), url(http://localhost:8080/lams/css/images/trianglify.png);
+.cards .lesson-image {
+	min-height: 170px;
 }
-
-table:not(.cards):not(.user-monitor) .lesson-image {
-	display: none;
+table:not(.cards) .lesson-image {
+    background-image: none;
 }
 
-/* display chart for list view */
-
-table:not(.cards).user-monitor .lesson-image {
-    position: absolute;
-    right: 270px;
-    padding: 0;
-    background-image: none;
+.lesson-image-1 {
+	background-image: url(css/images/trianglify_1.png);
 }
+.user-monitor .lesson-image-1{
+	background-image: linear-gradient( rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) ), url(css/images/trianglify_1.png);
+}
+.lesson-image-2 {
+	background-image: url(css/images/trianglify_2.png);
+}
+.user-monitor .lesson-image-2{
+	background-image: linear-gradient( rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) ), url(css/images/trianglify_2.png);
+}
+.lesson-image-3 {
+	background-image: url(css/images/trianglify_3.png);
+}
+.user-monitor .lesson-image-3{
+	background-image: linear-gradient( rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) ), url(css/images/trianglify_3.png);
+}
+.lesson-image-4 {
+	background-image: url(css/images/trianglify_4.png);
+}
+.user-monitor .lesson-image-4{
+	background-image: linear-gradient( rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) ), url(css/images/trianglify_4.png);
+}
+.lesson-image-5 {
+	background-image: url(css/images/trianglify_5.png);
+}
+.user-monitor .lesson-image-5{
+	background-image: linear-gradient( rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) ), url(css/images/trianglify_5.png);
+}
+.lesson-image-6 {
+	background-image: url(css/images/trianglify_6.png);
+}
+.user-monitor .lesson-image-6{
+	background-image: linear-gradient( rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) ), url(css/images/trianglify_6.png);
+}
+.lesson-image-7 {
+	background-image: url(css/images/trianglify_7.png);
+}
+.user-monitor .lesson-image-7{
+	background-image: linear-gradient( rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) ), url(css/images/trianglify_7.png);
+}
+.lesson-image-8 {
+	background-image: url(css/images/trianglify_8.png);
+}
+.user-monitor .lesson-image-8{
+	background-image: linear-gradient( rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) ), url(css/images/trianglify_8.png);
+}
+.lesson-image-9 {
+	background-image: url(css/images/trianglify_9.png);
+}
+.user-monitor .lesson-image-9{
+	background-image: linear-gradient( rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) ), url(css/images/trianglify_9.png);
+}
+.lesson-image-10 {
+	background-image: url(css/images/trianglify_10.png);
+}
+.user-monitor .lesson-image-10{
+	background-image: linear-gradient( rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) ), url(css/images/trianglify_10.png);
+}
 
 table:not(.cards).user-monitor tr {
 	height: 100px !important;
 }
-table:not(.cards).user-monitor .chart-holder {
-	padding-top: 0;
-}
 
-/*  */
-
 .auxiliary-links-menu {
 	float: right;
+	margin-top: -3px;
 }
 .auxiliary-links-menu button{
 	background-color: rgba(0,0,0,.03);
@@ -107,32 +147,15 @@
 	display: block;
 }
 
-.progress-bar span {
-	color: #000;
-    position: absolute;
-    margin-left: 6px;
+.lesson-name {
+	font-size: .9rem;
+	max-height: 170px;
+    overflow: hidden;
 }
-.progress {
-	height: 1.3rem;
-}
-.cards .progress {
-	margin-top: 10px;
-}
-table:not(.cards) .progress {
-	width: 50%;
-}
 
-.cards:not(.user-monitor) .lesson-name {
-	min-height: 60px;
+.cards .learners-count {
+    padding: .75rem;
 }
-.user-monitor:not(.cards) .lesson-name {
-	padding-bottom: 40px;
-}
-.user-monitor:not(.cards) .learners-count {
-	position: absolute;
-    left: 15px;
-    margin-top: 20px;
-}
 
 .cards td.row-reorder, .cards .auxiliary-links {
 	display: none;
@@ -143,17 +166,64 @@
 	padding-left: .25rem
 }
 
+.buttons-td {
+    height: 20px;
+}
+.cards .buttons-td{
+    background-color: #fff!important;
+}
+table:not(.cards) .buttons-td{
+	width: 170px;
+	padding: 0;
+}
+
+td.chart-td {
+	padding: 0;
+}
+table:not(.cards) .chart-td {
+	width: 60px;
+}
+
 .chart-holder {
-    width: 200px;
-    float: right;
-    clear: both;
-    padding-top: 70px;
+	width: 150px;
 }
 
-td.buttons-td {
-    height: 20px;
+.cards .chart-holder {
+	float: right;
+    margin-top: -90px;
+    margin-right: -20px;    
 }
 
+/* Learner's card*/
+.cards:not(.user-monitor) .lesson-name {
+	max-height: 150px;
+}
+.cards:not(.user-monitor) .lesson-image {
+	display: grid;
+}
+.learner-bottom-card {
+	align-self: flex-end;
+}
+table:not(.cards) .learner-bottom-card {
+	padding-top: 10px;
+}
+.progress-bar span {
+	color: #000;
+    position: absolute;
+    margin-left: 6px;
+}
+.progress {
+	height: 1.3rem;
+}
+table:not(.cards) .progress {
+	width: 50%;
+}
+time.timeago {
+    opacity: .7;
+    font-size: 80%;
+    font-weight: 400;
+}
+
 	</style>
 
 	<script type="text/javascript" src="${lams}includes/javascript/getSysInfo.js"></script>
@@ -175,6 +245,7 @@
 	<script type="text/javascript" src="${lams}includes/javascript/jquery.slimscroll.js"></script>
 	<script type="text/javascript" src="${lams}includes/javascript/main.js"></script>
 	<script type="text/javascript" src="${lams}includes/javascript/chart.min.js"></script>
+	<script type="text/javascript" src="${lams}includes/javascript/jquery.timeago.js"></script>
 	<script type="text/javascript">
 		var LAMS_URL = '<lams:LAMSURL/>',	
 			decoderDiv = $('<div />'),
@@ -298,9 +369,8 @@
 			            selector: 'td.row-reorder'
 			        },
 		         	'dom':
-		            	"<'row'<'col-sm-12'<'float-xl-right ml-2'B>f>>" +
-		            	"<'row'<'col-sm-12'tr>>" +
-		            	"<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
+		            	"<'row'<'col-sm-12'<'float-sm-right ml-2'B>f>>" +
+		            	"<'row'<'col-sm-12'tr>>" ,
 		         	'buttons': [
 			         {
 			            'text': '<select class="custom-select" onchange="orderDatatable(this, \'' + lessonsTable.attr('id') + '\')">' +
@@ -368,10 +438,6 @@
 			            //toggle buttons
 			            $(".auxiliary-links-menu", $table).toggle();
 
-			            if (!isUserMonitor) {
-				            $("td.lesson-name", lessonsTable).toggleClass(" d-flex justify-content-between");
-				        }
-
 		                dt.draw('page');
 		            },
 		            'className': 'btn-sm btn-light',
@@ -382,22 +448,32 @@
 		         select: false,
 		         paging: false,
 		         info: false,
+		         responsive:true,
 		         'columns': [
 		        	{"visible": false},
 		        	{"visible": false},
 		        	{"visible": false},
 		        	{"visible": false},
 		        	//star lesson feature
-		        	{"visible": true},//we need to mark it as visible:true, but set manually display:none to be able to access it from toggleFavoriteLesson() method
+		        	{"visible": true, className: "none"},//we need to mark it as visible:true, but set manually display:none to be able to access it from toggleFavoriteLesson() method
 		        	//lesson image
 		            {
 		               'orderable': false,
-		               'className': 'text-center'
+		               className: "text-left"
 		            },
+		          	//learners number
 		            {
-		               'data': 'name'
-		            },
+			           'orderable': false,
+			           "visible": lessonsTable.data("is-user-monitor")
+			           //className: "d-none d-md-inline"
+			        },
+		          	//chart
 		            {
+			           'orderable': false,
+			           "visible": lessonsTable.data("is-user-monitor")
+			        },
+			        //buttons
+		            {
 		               'data': 'extn',
 		               "visible": lessonsTable.data("is-user-monitor")
 		            },
@@ -439,27 +515,20 @@
 								'rgb(199, 234, 70)',//green
 								'rgb(252, 226, 5)',//yellow
 								'rgb(255, 146, 140)'//red
-							],
-							label: 'Dataset 1'
-						}],
-						labels: [
-							'Completed',
-							'Attempted',
-							'Not Started'
-						]
+							]
+						}]
 					},
 					options: {
 						responsive: true,
-						legend: {
-							position: 'left',
-						}
+						legend: false
 					}
 				});
 			});
+
+		    $("time.timeago").timeago();
 		}
 	
 		<%@ include file="mainTour.jsp" %>
-
 	</script>
 </lams:head>
 <body <c:if test="${not empty activeOrgId}">class="offcanvas-hidden"</c:if>>
@@ -581,12 +650,10 @@
 	<!-- /header -->
 
 <!-- Offcanvas Bar -->
-    <nav id="offcanvas" role="navigation" class="bg-dark">
+    <nav id="offcanvas" role="navigation" class="bg-light">
         <div class="offcanvas-scroll-area">
-			<div class="offcanvas-header">
-				<span class="courses-title ">
-					<i class="fa fa-table"></i>&nbsp;<fmt:message key="organisations" />
-				</span>
+			<div class="offcanvas-header lead">
+				<fmt:message key="organisations" />
 			</div>
         
 			<%@ include file="favoriteOrganisations.jsp"%>