Index: lams_learning/web/css/kumalive.scss
===================================================================
diff -u -rf780c279354a916c746b00c223f6ea3a0c545eb0 -r8801d631fc068473de07e602113cbe314d972052
--- lams_learning/web/css/kumalive.scss	(.../kumalive.scss)	(revision f780c279354a916c746b00c223f6ea3a0c545eb0)
+++ lams_learning/web/css/kumalive.scss	(.../kumalive.scss)	(revision 8801d631fc068473de07e602113cbe314d972052)
@@ -66,12 +66,12 @@
 	display: none;
 }
 
-.learner .profilePicture {
+.profilePicture {
 	width: 35px;
 	height: 35px;
 }
 
-.learner .profilePicture:before {
+.profilePicture:before {
 	font-size: 35px;
 	line-height: 26px;	
 }
@@ -85,7 +85,6 @@
 }
 
 .name {
-	height: 40px;
 	overflow: hidden;
 	text-overflow: ellipsis;
 }
@@ -101,7 +100,7 @@
 }
 
 .speaker .profilePicture:before {
-	font-size: 76px;
+	font-size: 70px;
 	line-height: 80px;
 }
 
@@ -170,12 +169,12 @@
 		margin-right: 20px;
 	}
 	
-	.learner .profilePicture {
+	.profilePicture {
 		width: 80px;
 		height: 80px;
 	}
 	
-	.learner .profilePicture:before {
+	.profilePicture:before {
 		line-height: 70px;	
 		font-size: 80px;
 	}
@@ -186,12 +185,13 @@
 	}
 	
 	.speaker .profilePicture:before {
-		font-size: 196px;
+		font-size: 200px;
 		line-height: 200px;
 	}
 	
 	.speaker .name {
 		font-size: 18px;
+		margin-top: 10px;
 	}
 	
 	#raiseHandPrompt i {
Index: lams_learning/web/includes/javascript/kumalive.js
===================================================================
diff -u -rf780c279354a916c746b00c223f6ea3a0c545eb0 -r8801d631fc068473de07e602113cbe314d972052
--- lams_learning/web/includes/javascript/kumalive.js	(.../kumalive.js)	(revision f780c279354a916c746b00c223f6ea3a0c545eb0)
+++ lams_learning/web/includes/javascript/kumalive.js	(.../kumalive.js)	(revision 8801d631fc068473de07e602113cbe314d972052)
@@ -279,7 +279,7 @@
 									   .appendTo(learnersContainer);
 		var profilePicture = $('.profilePicture', learnerDiv);
 		// use profile picture or a coloured icon
-		addPortrait(profilePicture, learner.portraitUuid, learner.id, "medium", true, LAMS_URL);
+		addPortrait(profilePicture, learner.portraitUuid, learner.id, "large", true, LAMS_URL);
 		$('.name', learnerDiv).text(learner.firstName + ' ' + learner.lastName);
 		
 		if (roleTeacher) {
@@ -462,28 +462,28 @@
 		// create speaker HTML element
 		$('.name', learnerDiv).clone().appendTo(speaker);
 		if (roleTeacher) {
-			$('<div />').addClass('btn btn-default').click(stopSpeak).text(LABELS.SPEAK_FINISH).appendTo(speaker);
+			$('<button />').addClass('btn btn-default').click(stopSpeak).text(LABELS.SPEAK_FINISH).appendTo(speaker);
 		}
 		
-		var targetProfilePicture = $('.profilePicture', learnerDiv).clone()
-			   .removeClass('profilePictureShown')
-			   .prependTo(speaker),
+		var targetProfilePicture = $('.profilePicture', learnerDiv)
+				.clone()
+				.prependTo(speaker),
 			targetOffset = targetProfilePicture.offset(),
+			targetWidth = targetProfilePicture.width(),
+			targetHeight = targetProfilePicture.height(),
 			profilePicture = $('.profilePicture', learnerDiv),
 			transitionCopy = profilePicture.clone().appendTo('body')
 				.css({
 					'position' : 'fixed'
-				}).offset(profilePicture.offset())
+				})
+				.offset(profilePicture.offset())
 				// animate moving speaker from learners to speaker panel
 		        .animate({
-			    	'left'      : targetOffset.left,
-			    	'top'       : targetOffset.top,
-			    	'width'     : targetProfilePicture.css('width'),
-			    	'height'    : targetProfilePicture.css('height'),
-			    	'font-size' : targetProfilePicture.css('font-size')
+			    	'left'      : targetOffset.left + targetWidth / 4,
+			    	'top'       : targetOffset.top + targetHeight / 4
 			    }, ANIMATION_DURATION, function(){
-					speaker.css('visibility', 'visible');
-			    	transitionCopy.remove();
+			    		speaker.css('visibility', 'visible');
+			    		transitionCopy.remove();
 			    });
 	});
 }
@@ -492,10 +492,11 @@
  * Animate learner arrival
  */
 function learnerFadeIn(learnerDiv) {
-	var nameDiv = $('.name', learnerDiv).css('color', 'green');
+	var nameDiv = $('.name', learnerDiv);
 	learnerDiv.css('display', 'inline-block');
 
 	$('.profilePicture', learnerDiv).switchClass('profilePictureHidden', 'profilePictureShown', ANIMATION_DURATION, function(){
+		$(this).removeClass('profilePictureShown');
 		nameDiv.css('color', 'initial');
 		learnerDiv.removeClass('changing');
 	});
Index: lams_learning/web/kumalive/kumalive.jsp
===================================================================
diff -u -rfed6e421cd4dfc06535f8af391ea1a73202b6350 -r8801d631fc068473de07e602113cbe314d972052
--- lams_learning/web/kumalive/kumalive.jsp	(.../kumalive.jsp)	(revision fed6e421cd4dfc06535f8af391ea1a73202b6350)
+++ lams_learning/web/kumalive/kumalive.jsp	(.../kumalive.jsp)	(revision 8801d631fc068473de07e602113cbe314d972052)
@@ -15,6 +15,7 @@
 	<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/bootstrap.min.js"></script>
+	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/portrait.js"></script>
 	<script type="text/javascript">
 		var	orgId = ${param.organisationID},
 			userId = <lams:user property="userID"/>,