diff --git a/bigbluebutton-html5/app/client/globals_audio.coffee b/bigbluebutton-html5/app/client/globals_audio.coffee
index 2b92c18751..a14af70da6 100755
--- a/bigbluebutton-html5/app/client/globals_audio.coffee
+++ b/bigbluebutton-html5/app/client/globals_audio.coffee
@@ -52,11 +52,11 @@
 			# Always fail the first time. Retry on failure.
 			#
 			if !!navigator.mozGetUserMedia and message.errorcode is 1001
-				callIntoConference_verto(extension, conferenceUsername, conferenceIdNumber, ((m) -> console.log("CALLBACK: "+JSON.stringify(m))), "webcam")
+				callIntoConference_verto(extension, conferenceUsername, conferenceIdNumber, ((m) -> console.log("CALLBACK: "+JSON.stringify(m))), "webcam", isListenOnly)
 			#
 			# End of hacky method
 			#
-		callIntoConference_verto(extension, conferenceUsername, conferenceIdNumber, debuggerCallback, "webcam");
+		callIntoConference_verto(extension, conferenceUsername, conferenceIdNumber, debuggerCallback, "webcam", isListenOnly);
 		return
 	else
 		# create voice call params
diff --git a/bigbluebutton-html5/app/client/lib/bbb_verto_resources_use/verto_extension.js b/bigbluebutton-html5/app/client/lib/bbb_verto_resources_use/verto_extension.js
index 6db4ab46c9..ab8f25d0e3 100755
--- a/bigbluebutton-html5/app/client/lib/bbb_verto_resources_use/verto_extension.js
+++ b/bigbluebutton-html5/app/client/lib/bbb_verto_resources_use/verto_extension.js
@@ -40,7 +40,7 @@ $.verto.prototype.hangup = function(callID, userCallback) {
 }
 
 // main entry point to making a verto call
-this.callIntoConference_verto = function(voiceBridge, conferenceUsername, conferenceIdNumber, userCallback, videoTag) {
+this.callIntoConference_verto = function(voiceBridge, conferenceUsername, conferenceIdNumber, userCallback, videoTag, isListenOnly) {
 	window.videoTag = videoTag;
 	// stores the user's callback in the global scope
 	if (userCallback) {
@@ -72,7 +72,7 @@ this.callIntoConference_verto = function(voiceBridge, conferenceUsername, confer
 				console.log("starting call");
 				toDisplayDisconnectCallback = true; // yes, display an error if the socket closes
 				wasCallSuccessful = true; // yes, a call was successfully established through the websocket
-				webrtc_call_verto(voiceBridge, conferenceUsername, conferenceIdNumber, callback);
+				webrtc_call_verto(voiceBridge, conferenceUsername, conferenceIdNumber, callback, isListenOnly);
 			} else {
 				callback({'status':'failed', 'errorcode': '10XX'}); // eror logging verto into freeswitch
 			}
@@ -81,7 +81,7 @@ this.callIntoConference_verto = function(voiceBridge, conferenceUsername, confer
 		$.verto.init({}, init(videoTag));
 	} else {
 		console.log("already logged into verto, going straight to making a call");
-		webrtc_call_verto(voiceBridge, conferenceUsername, conferenceIdNumber, callback);
+		webrtc_call_verto(voiceBridge, conferenceUsername, conferenceIdNumber, callback, isListenOnly);
 	}
 }
 
@@ -108,6 +108,11 @@ this.configStuns = function(callbacks, callback, videoTag) {
 	}).done(function(data) {
 		console.log("ajax request done");
 		console.log(data);
+		if(data['response'] && data.response.returncode == "FAILED") {
+			console.error(data.response.message);
+			callback({'status':'failed', 'errorcode': data.response.message});
+			return;
+		}
 		stunsConfig['stunServers'] = ( data['stunServers'] ? data['stunServers'].map(function(data) {
 			return {'url': data['url']};
 		}) : [] );
@@ -128,7 +133,7 @@ this.configStuns = function(callbacks, callback, videoTag) {
 	});
 }
 
-this.docall_verto = function(extension, conferenceUsername, conferenceIdNumber, callbacks) {
+this.docall_verto = function(extension, conferenceUsername, conferenceIdNumber, callbacks, isListenOnly) {
 	console.log(extension + ", " + conferenceUsername + ", " + conferenceIdNumber);
 
 	if (cur_call) { // only allow for one call
@@ -140,6 +145,7 @@ this.docall_verto = function(extension, conferenceUsername, conferenceIdNumber,
 	outgoingBandwidth = "default";
 	incomingBandwidth = "default";
 
+	console.log("Making a call isListenOnly: "+isListenOnly);
 	cur_call = verto.newCall({
 		destination_number: extension,
 		caller_id_name: conferenceUsername,
@@ -149,7 +155,7 @@ this.docall_verto = function(extension, conferenceUsername, conferenceIdNumber,
 		useVideo: true,
 		useStereo: true,
 		useCamera: true,
-		useMic: true,
+		useMic: isListenOnly,
 		dedEnc: false,
 		mirrorInput: false
 	});
@@ -224,7 +230,7 @@ this.leaveWebRTCVoiceConference_verto = function() {
 	webrtc_hangup_verto();
 }
 
-this.make_call_verto = function(voiceBridge, conferenceUsername, conferenceIdNumber, userCallback, server, recall) {
+this.make_call_verto = function(voiceBridge, conferenceUsername, conferenceIdNumber, userCallback, server, recall, isListenOnly) {
 	if (userCallback) {
 		callback = userCallback;
 	}
@@ -288,7 +294,7 @@ this.make_call_verto = function(voiceBridge, conferenceUsername, conferenceIdNum
 		console.log("Verto is logged into FreeSWITCH, socket is available, making call");
 		callICEConnected = false;
 
-		docall_verto(voiceBridge, conferenceUsername, conferenceIdNumber, myRTCCallbacks);
+		docall_verto(voiceBridge, conferenceUsername, conferenceIdNumber, myRTCCallbacks, isListenOnly);
 
 		if(recall === false) {
 			console.log('call connecting');
@@ -392,7 +398,7 @@ var RTCPeerConnectionCallbacks = {
 };
 this.RTCPeerConnectionCallbacks = RTCPeerConnectionCallbacks;
 
-this.webrtc_call_verto = function(voiceBridge, conferenceUsername, conferenceIdNumber, userCallback) {
+this.webrtc_call_verto = function(voiceBridge, conferenceUsername, conferenceIdNumber, userCallback, isListenOnly) {
 	if (userCallback) {
 		callback = userCallback;
 	}
@@ -406,7 +412,7 @@ this.webrtc_call_verto = function(voiceBridge, conferenceUsername, conferenceIdN
 	var server = window.document.location.hostname;
 	console.log("user " + conferenceUsername + " calling to " +	voiceBridge);
 	if (isLoggedIntoVerto()) {
-		make_call_verto(voiceBridge, conferenceUsername, conferenceIdNumber, callback, "", false);
+		make_call_verto(voiceBridge, conferenceUsername, conferenceIdNumber, callback, "", false, isListenOnly);
 	}
 }
 
diff --git a/bigbluebutton-html5/app/client/main.html b/bigbluebutton-html5/app/client/main.html
index 8f1b3895de..9362887ded 100755
--- a/bigbluebutton-html5/app/client/main.html
+++ b/bigbluebutton-html5/app/client/main.html
@@ -79,6 +79,12 @@
   <div id="logoutModal" class="reveal-modal tiny" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog" data-options="close_on_background_click:false">
     {{> logoutModal}}
   </div>
+  <div id="deskshareModal" class="reveal-modal tiny" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog" data-options="close_on_background_click:false">
+    {{> deskshareModal}}
+  </div>
+  <div id="webcamModal" class="reveal-modal tiny" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog" data-options="close_on_background_click:false">
+    {{> webcamModal}}
+  </div>
   <audio id="remote-media" autoplay="autoplay"></audio>
 </template>
 
diff --git a/bigbluebutton-html5/app/client/stylesheets/verto.less b/bigbluebutton-html5/app/client/stylesheets/verto.less
index 27064389f8..ae859b619a 100755
--- a/bigbluebutton-html5/app/client/stylesheets/verto.less
+++ b/bigbluebutton-html5/app/client/stylesheets/verto.less
@@ -6,11 +6,35 @@
 	padding: 5px;
 }
 
+.screenshareShow {
+	color: lime;
+	font-size: 30px;
+}
+
+.screenshareHide {
+	color: red;
+	display: none;
+	font-size: 30px;
+}
+
 .screenshareStart {
 	color: lime;
+	font-size: 30px;
 }
 
 .screenshareStop {
 	color: red;
 	display: none;
+	font-size: 30px;
+}
+
+.webcamStart {
+	color: lime;
+	font-size: 30px;
+}
+
+.webcamStop {
+	color: red;
+	display: none;
+	font-size: 30px;
 }
diff --git a/bigbluebutton-html5/app/client/verto.coffee b/bigbluebutton-html5/app/client/verto.coffee
index 868f192182..37466a4eac 100755
--- a/bigbluebutton-html5/app/client/verto.coffee
+++ b/bigbluebutton-html5/app/client/verto.coffee
@@ -1,27 +1,52 @@
-Template.vertoDeskshare.events
+Template.vertoDeskshareMenu.events
 	"click .vertoButton": (event) ->
 		$("#settingsModal").foundation('reveal', 'close')
 
-	"click #desksharePreview": (event) ->
-		doDesksharePreview((->), (->), "webcam");
-
 	"click #getAdjustedResolutions": (event) ->
 		getAdjustedResolutions (result) ->
 			for i of result
 				$("#adjustedResolutions").append(i + ": " + result[i].width + "x" + result[i].height + "<br/>")
 
+	"click .screenshareShow": (event) ->
+		$("#deskshareModal").foundation('reveal', 'open');
+		$("#screenshareShow").hide()
+		$("#screenshareHide").show()
+
+	"click .screenshareHide": (event) ->
+		$("#screenshareShow").show()
+		$("#screenshareHide").hide()
+
+Template.deskshareModal.events
 	"click .screenshareStart": (event) ->
-		$("#screenshareStart").css('display', 'none')
-		$("#screenshareStop").css('display', 'block')
+		$("#deskshareModal").foundation('reveal', 'close')
+		$("#screenshareStart").hide()
+		$("#screenshareStaop").show()
 		screenStart(true, (->), "webcam")
 
 	"click .screenshareStop": (event) ->
-		$("#screenshareStop").css('display', 'none')
-		$("#screenshareStart").css('display', 'block')
+		$("#deskshareModal").foundation('reveal', 'close')
+		$("#screenshareStart").show()
+		$("#screenshareStop").hide()
 		screenStart(false, (->))
 
-	"click #webcamPreview": (event) ->
-		doWebcamPreview((->), (->), "webcam");
+	"click #desksharePreview": (event) ->
+		doDesksharePreview((->), (->), "webcam");
+
+Template.vertoWebcam.events
+	"click .vertoButton": (event) ->
+		$("#settingsModal").foundation('reveal', 'close')
+
+	"click .webcamStart": (event) ->
+		$("#webcamModal").foundation('reveal', 'open');
+		$("#webcamStart").hide()
+		$("#webcamStop").show()
+
+	"click .webcamStop": (event) ->
+		$("#webcamStart").show()
+		$("#webcamStop").hide()
+
+	# "click #webcamPreview": (event) ->
+	# 	doWebcamPreview((->), (->), "webcam");
 
 @toggleWhiteboardVideo = (display) ->
 	if display is "whiteboard"
diff --git a/bigbluebutton-html5/app/client/verto.html b/bigbluebutton-html5/app/client/verto.html
index ca878ce3f2..9a0b5ad980 100755
--- a/bigbluebutton-html5/app/client/verto.html
+++ b/bigbluebutton-html5/app/client/verto.html
@@ -1,30 +1,9 @@
-<template name="vertoDeskshare">
-	<!-- <div style="position: absolute; left: 0; top: 0; z-index:5000; background-color: aqua"> -->
-	<div>
-
-		<table id="conf_list" style="display: none;"></table>
-		<div>
-			<fieldset>
-				<legend><b>Webcam Video Quality</b>:</legend>
-				<div id="webcamResolutions"></div>
-			</fieldset>
-		</div><br>
-		<div>
-			<fieldset>
-				<legend><b>Deskshare Video Quality</b>:</legend>
-				<div id="deskshareResolutions"></div>
-			</fieldset>
-		</div><br>
-		<!-- <button id='joinAudio' class="vertoButton">joinAudio</button> -->
-		<!-- <button id='hangUp' class="vertoButton">hangUp</button> -->
-		<!-- <button id='shareScreen' class="vertoButton">shareScreen</button> -->
-		<!-- <button id='stopScreen' class="vertoButton">stopScreen</button> -->
-		{{> makeButton id="screenshareStart" btn_class="screenshareStart vertoButton settingsButton" i_class="fi-monitor" rel="tooltip" data_placement="bottom" title="Share your screen"}}
-		{{> makeButton id="screenshareStop" btn_class="screenshareStop vertoButton settingsButton" i_class="fi-monitor" rel="tooltip" data_placement="bottom" title="Stop sharing your screen"}}
-		<button id='desksharePreview' class="vertoButton">desksharePreview</button>
-		<button id="webcamPreview" class="vertoButton">Preview Webcam</button>
-		<br/>
-		<button id="getAdjustedResolutions" class="vertoButton">getAdjustedResolutions</button>
-		<p id="adjustedResolutions"></p>
-	</div>
+<template name="vertoDeskshareMenu">
+	{{> makeButton id="screenshareShow" btn_class="screenshareShow vertoButton settingsButton" i_class="fi-monitor" rel="tooltip" data_placement="bottom" title="Share your screen"}}
+	{{> makeButton id="screenshareHide" btn_class="screenshareHide vertoButton settingsButton" i_class="fi-monitor" rel="tooltip" data_placement="bottom" title="Stop sharing your screen"}}
+</template>
+
+<template name="vertoWebcam">
+	{{> makeButton id="webcamStart" btn_class="webcamStart vertoButton settingsButton" i_class="fi-camera" rel="tooltip" data_placement="bottom" title="Share your webcam"}}
+	{{> makeButton id="webcamStop" btn_class="webcamStop vertoButton settingsButton" i_class="fi-camera" rel="tooltip" data_placement="bottom" title="Stop sharing your webcam"}}
 </template>
diff --git a/bigbluebutton-html5/app/client/views/modals/deskshare.html b/bigbluebutton-html5/app/client/views/modals/deskshare.html
new file mode 100755
index 0000000000..8ae1befa20
--- /dev/null
+++ b/bigbluebutton-html5/app/client/views/modals/deskshare.html
@@ -0,0 +1,14 @@
+<template name="deskshareModal">
+	<div>
+		<table id="conf_list" style="display: none;"></table>
+		<div>
+			<fieldset>
+				<legend><b>Deskshare Video Quality</b>:</legend>
+				<div id="deskshareResolutions"></div>
+			</fieldset>
+		</div><br>
+		{{> makeButton id="screenshareStart" btn_class="screenshareStart vertoButton settingsButton" i_class="fi-monitor" rel="tooltip" data_placement="bottom" title="Share your screen"}}
+		{{> makeButton id="screenshareStop" btn_class="screenshareStop vertoButton settingsButton" i_class="fi-monitor" rel="tooltip" data_placement="bottom" title="Stop sharing your screen"}}
+		<button id='desksharePreview' class="vertoButton">desksharePreview</button>
+	</div>
+</template>
diff --git a/bigbluebutton-html5/app/client/views/modals/settings.coffee b/bigbluebutton-html5/app/client/views/modals/settings.coffee
new file mode 100755
index 0000000000..bac8ce9ca4
--- /dev/null
+++ b/bigbluebutton-html5/app/client/views/modals/settings.coffee
@@ -0,0 +1,24 @@
+Template.settingsModal.helpers
+  getBBBSettingsInfo: ->
+    info = getBuildInformation()
+    result = "(c) #{info.copyrightYear} BigBlueButton Inc. [build #{info.html5ClientBuild}] - For more information visit #{info.link}"
+
+Template.logoutModal.events
+  "click #yes": -> userLogout(getInSession("meetingId"), getInSession("userId"))
+  "click #no": -> $("#logoutModal").foundation('reveal', 'close')
+  "click .logoutButton": -> $(".tooltip").hide()
+
+Template.settingsAudio.events
+  "click #exitAudio": -> exitVoiceCall()
+
+  "click .joinAudioButton": (event) -> $("#settingsModal").foundation('reveal', 'close')
+
+  "click #joinListenOnly": (event) -> joinVoiceCall @, isListenOnly: true
+
+  "click #joinMicrophone": (event) -> joinVoiceCall @, isListenOnly: false
+
+  "click #hangupVerto": (event) -> exitVoiceCall()
+
+Template.settingsModal.events
+  "click .closeSettings": -> setInSession "messageFontSize", getInSession("tempFontSize")
+  "click #saveSettings": -> $("#settingsModal").foundation('reveal', 'close');
diff --git a/bigbluebutton-html5/app/client/views/modals/settings.html b/bigbluebutton-html5/app/client/views/modals/settings.html
new file mode 100755
index 0000000000..c2578a92d4
--- /dev/null
+++ b/bigbluebutton-html5/app/client/views/modals/settings.html
@@ -0,0 +1,62 @@
+<!-- listen only | microphone -->
+<template name="settingsAudio">
+  <fieldset class="desktopSettingsFieldset">
+    <legend>Audio Options</legend>
+    {{#if amIInAudio}}
+      {{#if amIListenOnlyAudio}}
+        <!-- display microphone with join -->
+        {{> makeButton id="joinMicrophone" btn_class="joinMicrophone settingsButton joinAudioButton" i_class="fi-microphone" rel="tooltip"
+        data_placement="bottom" title="Join Microphone"}}
+        <!-- display listen only with exit -->
+        {{> makeButton id="exitAudio" btn_class="exitAudio settingsButton joinAudioButton" i_class="ion-volume-mute" rel="tooltip"
+        data_placement="bottom" title="Leave Audio Call"}}
+      {{else}}
+        <!-- display microphone with exit -->
+        {{> makeButton id="exitAudio" btn_class="exitAudio settingsButton joinAudioButton" i_class="ion-volume-mute" rel="tooltip"
+        data_placement="bottom" title="exit"}}
+        <!-- display join listen only -->
+        {{> makeButton id="joinListenOnly" btn_class="joinListenOnly settingsButton joinAudioButton" i_class="fi-volume" rel="tooltip"
+        data_placement="bottom" title="Join Listen only"}}
+      {{/if}}
+    {{else}}
+      <!-- display both with join -->
+      {{> makeButton id="joinMicrophone" btn_class="joinMicrophone settingsButton joinAudioButton" i_class="fi-microphone"
+      rel="tooltip" data_placement="bottom" title="Join Microphone"}}
+      {{> makeButton id="joinListenOnly" btn_class="joinListenOnly settingsButton joinAudioButton" i_class="fi-volume"
+      rel="tooltip" data_placement="bottom" title="Join Listen only"}}
+    {{/if}}
+    {{> makeButton id="hangupVerto" btn_class="settingsButton" i_class="ion-volume-mute" rel="tooltip" data_placement="bottom" title="exit"}}
+  </fieldset>
+</template>
+
+<template name="settingsModal">
+  <div class="bar topBar">
+    <p>
+        <span class="modalTitle">BigBlueButton Settings</span>
+    </p>
+    <p>
+      <a href="#" class="closeSettings close-reveal-modal">&#215;</a>
+    </p>
+  </div>
+
+  <div class="settingsBody">
+    {{> settingsAudio}}
+    {{> optionsFontSize}}
+    <br/>
+    {{> vertoDeskshareMenu}}
+    {{> vertoWebcam}}
+    <br/>
+    {{{getBBBSettingsInfo}}}
+  </div>
+
+  <div class="bar bottomBar">
+    <a href="#" class="closeSettings close-reveal-modal"><u>Cancel</u></a>
+    {{> makeButton id="saveSettings" btn_class="settingsButton" rel="tooltip" title="Save Changes" label="Save"}}
+  </div>
+</template>
+
+<template name="logoutModal">
+  <p>Are you sure you want to logout?</p>
+  {{> makeButton id="yes" btn_class="logoutButton" label="Yes"}}
+  {{> makeButton id="no" btn_class="logoutButton" label="No"}}
+</template>
diff --git a/bigbluebutton-html5/app/client/views/modals/webcam.html b/bigbluebutton-html5/app/client/views/modals/webcam.html
new file mode 100755
index 0000000000..b3cde0d993
--- /dev/null
+++ b/bigbluebutton-html5/app/client/views/modals/webcam.html
@@ -0,0 +1,12 @@
+<template name="webcamModal">
+	<div>
+		<fieldset>
+			<legend><b>Webcam Video Quality</b>:</legend>
+			<div id="webcamResolutions"></div>
+		</fieldset>
+	</div><br>
+	<button id="webcamPreview" class="vertoButton">Preview Webcam</button>
+	<br/>
+	<button id="getAdjustedResolutions" class="vertoButton">getAdjustedResolutions</button>
+	<p id="adjustedResolutions"></p>
+</template>