Index: lams_central/conf/scss/_bootstrap-variables.scss
===================================================================
diff -u -r9946788a0f2d89cd298e289eddbf59d3b38ba197 -r375a15822889954a22d95bd07cd97a1c6e4c3d97
--- lams_central/conf/scss/_bootstrap-variables.scss	(.../_bootstrap-variables.scss)	(revision 9946788a0f2d89cd298e289eddbf59d3b38ba197)
+++ lams_central/conf/scss/_bootstrap-variables.scss	(.../_bootstrap-variables.scss)	(revision 375a15822889954a22d95bd07cd97a1c6e4c3d97)
@@ -289,7 +289,7 @@
 // Small screen / tablet
 //** Deprecated `$screen-sm` as of v3.0.1
 // $screen-sm:                  768px
-// $screen-sm-min:              $screen-sm
+$screen-sm-min:              768px
 //** Deprecated `$screen-tablet` as of v3.0.1
 // $screen-tablet:              $screen-sm-min
 
Index: lams_learning/web/css/kumalive.scss
===================================================================
diff -u
--- lams_learning/web/css/kumalive.scss	(revision 0)
+++ lams_learning/web/css/kumalive.scss	(revision 375a15822889954a22d95bd07cd97a1c6e4c3d97)
@@ -0,0 +1,166 @@
+@import "_lams_variables.scss"; 
+
+#initDiv {
+	padding-top: 35vh;
+	text-align: center;
+}
+
+#createKumaliveDiv, #closedDiv {
+	display: none;
+	padding-top: 35vh;
+	text-align: center;
+}
+
+#closedDiv {
+	font-weight: bold;
+}
+
+#createKumaliveDiv input {
+	width: 60%;
+}
+
+#mainDiv {
+	display: none;
+}
+
+#actionCell {
+	padding-bottom: 10px;
+	border-bottom: $border-thin-black;
+	vertical-align: top;
+}
+
+#learnersCell {
+	width: 100%;
+}
+
+@media (min-width : $screen-sm-min) {
+	#actionCell {
+		width: 350px;
+		height: 100vh;
+		border-bottom: none;
+		border-right: $border-thin-black;
+	}
+	#learnersCell {
+		width: calc(100% - 350px);
+	}
+}
+
+#actionCell button {
+	width: 70%;
+	margin-top: 10px;
+}
+
+#raiseHandContainer {
+	display: none;
+	margin-bottom : 10px;
+	border-bottom: $border-thin-black;
+}
+
+.learner {
+	display: inline-block;
+	width: 80px;
+	height: 120px;
+	margin: 5px 5px 0 5px;
+	text-align: center;
+	display: none;
+}
+
+.learner .profilePictureWrapper {
+	width: 80px;
+	height: 80px;
+}
+
+.profilePicture {
+	position: relative;
+	border-radius: 100%;
+	background-repeat: no-repeat;
+	background-position: center;
+	background-size: cover;
+}
+
+.profilePictureHidden {
+	top: 40px;
+	left: 40px;
+	width: 0;
+	height: 0;
+	font-size: 0;
+}
+
+.profilePictureShown {
+	top: 0;
+	left: 0;
+	width: 80px;
+	height: 80px;
+	font-size: 80px;
+}
+
+.name {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	padding-top: 5px;
+}
+
+.learner .name {
+	font-size: 12px;
+}
+
+.speaker {
+	text-align: center;
+	margin-bottom: 10px;
+}
+
+.speaker .profilePicture{
+	width: 200px;
+	height: 200px;
+	font-size: 200px;
+	margin: auto;
+}
+
+.speaker .name {
+	font-size: 18px;
+}
+
+#teacher {
+	display: none;
+}
+
+#raiseHandPrompt {
+	display: none;
+	text-align: center;
+	padding-top: 20px;
+}
+
+#raiseHandPrompt i {
+	font-size: 140px;
+}
+
+.score {
+	display: none;
+	padding-top: 20px;
+}
+
+.score span {
+	font-weight: bold;
+}
+
+.score i {
+	font-size: 70px;
+	margin-right: 15px;
+	cursor: pointer;
+}
+
+.scoreGood {
+	color: green;
+}
+
+.scoreNeutral {
+	color: darkOrange;
+}
+
+.scoreBad {
+	color: red;
+}
+
+.scoreNone {
+	color: gray;
+}
\ No newline at end of file
Index: lams_learning/web/includes/javascript/kumalive.js
===================================================================
diff -u -r3a30c9806be555d7cc8bff332abd27521cca4145 -r375a15822889954a22d95bd07cd97a1c6e4c3d97
--- lams_learning/web/includes/javascript/kumalive.js	(.../kumalive.js)	(revision 3a30c9806be555d7cc8bff332abd27521cca4145)
+++ lams_learning/web/includes/javascript/kumalive.js	(.../kumalive.js)	(revision 375a15822889954a22d95bd07cd97a1c6e4c3d97)
@@ -18,7 +18,8 @@
 	learnerDivTemplate = $('<div />').addClass('learner changing')
 		.append($('<div />').addClass('profilePictureWrapper').append($('<div />').addClass('profilePicture profilePictureHidden')))
 		.append($('<div />').addClass('name')),
-	REFRESH_DELAY = 1000;
+	REFRESH_DELAY = 1000,
+	ANIMATION_DURATION = 1000;
 
 /**
  * Fetches existing Kumalive session
@@ -110,7 +111,7 @@
 	roleTeacher = message.isTeacher && message.roleTeacher;
 	
 	// hide all buttons and enable ones appropriate for the role
-	$('table button').hide();
+	$('#mainDiv button').hide();
 	if (roleTeacher) {
 		$('#raiseHandPromptButton').click(raiseHandPrompt);
 		$('#downHandPromptButton').click(downHandPrompt);
@@ -134,7 +135,7 @@
 	
 	// show proper work screen
 	$('#initDiv').hide();
-	$('table').show();
+	$('#mainDiv').show();
 }
 
 /**
@@ -200,7 +201,6 @@
 		currentLearnerIds = [],
 		// should refresh be repeated?
 		result = false;
-
 	$.each(message.learners, function(index, learner){
 		if (learner.roleTeacher) {
 			// do not add teachers to learners container
@@ -311,7 +311,7 @@
 				        .animate({
 					    	'left' : targetOffset.left,
 					    	'top' : targetOffset.top
-					    }, 1000, function(){
+					    }, ANIMATION_DURATION, function(){
 					    	targetLearnerDiv.css('visibility', 'visible');
 					    	transitionCopy.remove();
 					    	learnerDiv.removeClass('changing');
@@ -426,7 +426,7 @@
 			    	'width' : '200px',
 			    	'height' : '200px',
 			    	'font-size' : '200px'
-			    }, 1000, function(){
+			    }, ANIMATION_DURATION, function(){
 					speaker.css('visibility', 'visible');
 			    	transitionCopy.remove();
 			    });
@@ -438,9 +438,9 @@
  */
 function learnerFadeIn(learnerDiv) {
 	var nameDiv = $('.name', learnerDiv).css('color', 'green');
-	learnerDiv.show();
+	learnerDiv.css('display', 'inline-block');
 
-	$('.profilePicture', learnerDiv).switchClass('profilePictureHidden', 'profilePictureShown', 1000, function(){
+	$('.profilePicture', learnerDiv).switchClass('profilePictureHidden', 'profilePictureShown', ANIMATION_DURATION, function(){
 		nameDiv.css('color', 'initial');
 		learnerDiv.removeClass('changing');
 	});
@@ -456,11 +456,11 @@
 	learnerDiv.addClass('changing');
 	var nameDiv = $('.name', learnerDiv).css('color', 'red');
 
-	$('.profilePicture', learnerDiv).switchClass('profilePictureShown', 'profilePictureHidden', 1000, function(){
+	$('.profilePicture', learnerDiv).switchClass('profilePictureShown', 'profilePictureHidden', ANIMATION_DURATION, function(){
 		nameDiv.remove();
 		learnerDiv.animate({
 			'width' : 'toggle'
-		}, 1000, function(){
+		}, ANIMATION_DURATION, function(){
 			learnerDiv.remove();
 		});
 	});
Index: lams_learning/web/kumalive.jsp
===================================================================
diff -u -r2584207dba753ac8e61c06022694b202597775d9 -r375a15822889954a22d95bd07cd97a1c6e4c3d97
--- lams_learning/web/kumalive.jsp	(.../kumalive.jsp)	(revision 2584207dba753ac8e61c06022694b202597775d9)
+++ lams_learning/web/kumalive.jsp	(.../kumalive.jsp)	(revision 375a15822889954a22d95bd07cd97a1c6e4c3d97)
@@ -44,7 +44,7 @@
 <body>
 	<div id="initDiv">
 		<span>
-			<i class="fa fa-spinner fa-spin fa-5x" aria-hidden="true"></i><br /><br />
+			<i class="fa fa-2x fa-refresh fa-spin text-primary"></i><br /><br />
 			<fmt:message key="label.kumalive.wait.start"/>
 		</span>
 	</div>
@@ -56,18 +56,9 @@
 	<div id="closedDiv">
 		<span><fmt:message key="label.kumalive.closed"/></span>
 	</div>
-	<table>
-		<tr>
-			<td id="learnersCell">
-				<div id="raiseHandContainer" class="container-fluid">
-					<h4><fmt:message key="label.kumalive.raised.hands"/></h4>
-				</div>
-				<div id="learnersContainer" class="container-fluid">
-					<h4><fmt:message key="label.kumalive.learners"/></h4>
-					<br />
-				</div>
-			</td>
-			<td id="actionCell">
+	<div id="mainDiv" class="container-fluid">
+		<div class="row">
+			<div id="actionCell" class="col-sm-11">
 				<div id="teacher" class="speaker">
 					<h3><fmt:message key="label.kumalive.teacher"/></h3>
 					<div class="profilePicture"></div>
@@ -76,7 +67,7 @@
 					<button id="finishButton" class="btn btn-default"><fmt:message key="button.kumalive.finish.kumalive"/></button>
 				</div>
 				<div id="raiseHandPrompt">
-					<i class="fa fa-hand-stop-o"></i>
+					<i class="fa fa-hand-stop-o"></i><br />
 					<button id="raiseHandButton" class="btn btn-default"><fmt:message key="button.kumalive.raise"/></button>
 					<button id="downHandButton" class="btn btn-default"><fmt:message key="button.kumalive.putdown"/></button>
 					<button id="downHandPromptButton" class="btn btn-default"><fmt:message key="button.kumalive.finish.question"/></button>
@@ -88,8 +79,16 @@
 					<i title="<fmt:message key="label.kumalive.mark.bad"/>" class="scoreBad fa fa-frown-o"></i>
 					<i title="<fmt:message key="label.kumalive.mark.cancel"/>" class="scoreNone fa fa-times"></i>
 				</div>
-			</td>
-		</tr>
-	</table>
+			</div>
+			<div id="learnersCell" class="col-sm-1">
+				<div id="raiseHandContainer">
+					<h4><fmt:message key="label.kumalive.raised.hands"/></h4>
+				</div>
+				<div id="learnersContainer">
+					<h4><fmt:message key="label.kumalive.learners"/></h4>
+				</div>
+			</div>
+		</div>
+	</div>
 </body>
 </lams:html>
\ No newline at end of file