Index: lams_admin/web/timezoneManagement.jsp
===================================================================
diff -u -r5f9e583fc8e476f6a5f9e1826332ba3788d7c68c -r3e64defe6b8c56c0d3fd42203218e112e3745884
--- lams_admin/web/timezoneManagement.jsp	(.../timezoneManagement.jsp)	(revision 5f9e583fc8e476f6a5f9e1826332ba3788d7c68c)
+++ lams_admin/web/timezoneManagement.jsp	(.../timezoneManagement.jsp)	(revision 3e64defe6b8c56c0d3fd42203218e112e3745884)
@@ -13,9 +13,11 @@
 	<link rel="stylesheet" href="<lams:LAMSURL/>admin/css/admin.css" type="text/css" media="screen">
 	<link rel="stylesheet" href="<lams:LAMSURL/>css/jquery-ui-bootstrap-theme.css" type="text/css" media="screen">
 	<link rel="stylesheet" href="<lams:LAMSURL/>/css/thickbox.css" type="text/css" media="screen">
+	<link rel="stylesheet" href="<lams:LAMSURL/>/css/jquery.tablesorter.theme.bootstrap4.css">
 
 	<script type="text/javascript" src="<lams:LAMSURL/>/includes/javascript/jquery.js"></script>
 	<script type="text/javascript" src="<lams:LAMSURL/>/includes/javascript/thickbox.js"></script>
+	<script type="text/javascript" src="<lams:LAMSURL/>/includes/javascript/jquery.tablesorter.js"></script>
 	<script type="text/javascript">	
 		//this script lets user select all available timezones just by enabling the checkbox in header label
 		$(document).ready(function(){
@@ -30,6 +32,12 @@
 				    $('input:checkbox').not(this).prop('checked', false);	
 				}
 			});
+
+			// initial sort set using data-sortlist attribute 
+			$(".timeZoneTable").tablesorter({
+				theme : 'bootstrap'
+			});
+			
 		});
 	</script>
 </lams:head>
@@ -38,45 +46,59 @@
 	<c:set var="help"><fmt:message key="LAMS+Configuration"/></c:set>
 	<c:set var="help"><lams:help style="small" page="${help}" /></c:set>
 	<lams:Page type="admin" title="${title}" titleHelpURL="${help}" formID="timezoneForm">
+
+		<nav aria-label="breadcrumb" role="navigation">
+		  <ol class="breadcrumb">
+		    <li class="breadcrumb-item">
+		    	<a href="<lams:LAMSURL/>admin/sysadminstart.do"><fmt:message key="sysadmin.maintain" /></a>
+		    </li>
+		    <li class="breadcrumb-item active" aria-current="page"><fmt:message key="admin.timezone.title"/></li>
+		  </ol>
+		</nav>		
 		
-			<p><a href="<lams:LAMSURL/>admin/sysadminstart.do" class="btn btn-default"><fmt:message key="sysadmin.maintain" /></a></p>
+		<p>
 			<fmt:message key="admin.timezone.select.timezones.you.want.users.choose" >
-			<fmt:param>
-				<a class="thickbox" href="<lams:LAMSURL/>admin/timezonemanagement/serverTimezoneManagement.do?KeepThis=true&TB_iframe=true&height=188&width=820" title="<fmt:message key='admin.servertimezone.server.timezone.management'/>">
-					${serverTimezone}
-				</a>
-			</fmt:param>
+				<fmt:param>
+					<a class="thickbox" href="<lams:LAMSURL/>admin/timezonemanagement/serverTimezoneManagement.do?KeepThis=true&TB_iframe=true&height=188&width=820" title="<fmt:message key='admin.servertimezone.server.timezone.management'/>">
+						${serverTimezone}
+					</a>
+				</fmt:param>
 			</fmt:message>
+		</p>
+
+		<div class="col-xl">			
+		<lams:errors/>
 			
-			<lams:errors/>
         <form:form action="save.do" id="timezoneForm" modelAttribute="timezoneForm" method="post">
 			<input type="hidden" name="<csrf:tokenname/>" value="<csrf:tokenvalue/>"/>
 				
-				<table class="table table-striped table-condensed">
+				<table class="table table-striped table-bordered table-responsive timeZoneTable" id="timeZoneTable" data-sortlist="[[2,0]]">
+					<thead class="thead-light">
 					<tr>
-						<th width="10%" align="center"><fmt:message key="admin.timezone.select" />
+						<th data-sorter="false" class="text-center"><fmt:message key="admin.timezone.select" />
 						<!-- added this check box for the user to enable all available time zones -->
 						  <form:checkbox path="selected" value="currentSelectAllTZ" id="currentSelectAllTZ"/>
 						</th>
-						<th width="22%"><fmt:message key="admin.timezone.time.zone.id" /></th>
-						<th width="24%" align="center"><fmt:message key="admin.timezone.raw.offset" /></th>
-						<th width="12%" align="center"><fmt:message key="admin.timezone.dst.offset" /></th>
-						<th width="32%"><fmt:message key="admin.timezone.display.name" /></th>
-					</tr>	
-				
+						<th><fmt:message key="admin.timezone.time.zone.id" /></th>
+						<th class="text-center"><fmt:message key="admin.timezone.raw.offset" /></th>
+						<th class="text-center"><fmt:message key="admin.timezone.dst.offset" /></th>
+						<th><fmt:message key="admin.timezone.display.name" /></th>
+					</tr>
+					</thead>
+					<tbody>
 					<c:forEach items="${timezoneDtos}" var="timezoneDto">
 						<tr>
-							<td align="center">
-								<input type="checkbox" class="timezoneCheckBox" name="selected" ${timezoneDto.selected ? 'checked="checked"' : ''} value="${timezoneDto.timeZoneId}"/>
+							<td class="text-center">
+								<input type="checkbox" class="timezoneCheckBox" name="selected" ${timezoneDto.selected ? 'checked="checked"' : ''} value="${timezoneDto.timeZoneId}" id="${timezoneDto.timeZoneId}"/>
 							</td>
 							<td>
-								${timezoneDto.timeZoneId}
+								<label style="margin-bottom: 0em" for="${timezoneDto.timeZoneId}">${timezoneDto.timeZoneId}</label>
 							</td>
-							<td align="center">
+							<td class="text-center">
 								<c:if test="${timezoneDto.rawOffsetNegative}">-</c:if>
 								<fmt:formatDate value="${timezoneDto.rawOffset}" pattern="H : mm" timeZone="GMT" /> 
 							</td>
-							<td align="center">
+							<td class="text-center">
 								<c:if test="${timezoneDto.dstOffset != 0}">
 									${timezoneDto.dstOffset}
 								</c:if>
@@ -86,17 +108,19 @@
 							</td>				
 						</tr>
 					</c:forEach>
+					</tbody>
 					
 				</table>
 				
 				<div class="pull-right">
-					<a href="<lams:LAMSURL/>admin/sysadminstart.do" class="btn btn-default">
+					<a href="<lams:LAMSURL/>admin/sysadminstart.do" class="btn btn-outline-secondary btn-sm">
 						<fmt:message key="admin.cancel"/>
 					</a>
-					<input type="submit" class="btn btn-primary loffset5" value="<fmt:message key="admin.save" />" />
+					<input type="submit" class="btn btn-primary loffset5 btn-sm" value="<fmt:message key="admin.save" />" />
 				</p>
 				
 			</form:form>
+		</div>	
 		</lams:Page>
 </body>
 </lams:html>