diff --git a/code/modules/goonchat/browserassets/css/browserOutput.css b/code/modules/goonchat/browserassets/css/browserOutput.css
index f6810d0b05..153444c0ed 100644
--- a/code/modules/goonchat/browserassets/css/browserOutput.css
+++ b/code/modules/goonchat/browserassets/css/browserOutput.css
@@ -83,7 +83,7 @@ a.popt {text-decoration: none;}
 #ping {
 	position: fixed;
 	top: 0;
-	right: 40px;
+	right: 80px;
 	width: 45px;
 	background: #ddd;
 	height: 30px;
@@ -96,12 +96,12 @@ a.popt {text-decoration: none;}
 	font-size: 8pt;
 	padding-top: 2px;
 }
-#options {
+#userBar {
 	position: fixed;
 	top: 0;
 	right: 0;
 }
-#options .optionsCell {
+#userBar .subCell {
 	background: #ddd;
     height: 30px;
 	padding: 5px 0;
@@ -111,23 +111,23 @@ a.popt {text-decoration: none;}
     line-height: 28px;
     border-top: 1px solid #b4b4b4;
 }
-#options .optionsCell:hover {background: #ccc;}
-#options .toggle {
+#userBar .subCell:hover {background: #ccc;}
+#userBar .toggle {
 	width: 40px;
     background: #ccc;
     border-top: 0;
     float: right;
     text-align: center;
 }
-#options .sub {clear: both; display: none; width: 160px;}
-#options .sub.scroll {overflow-y: scroll;}
-#options .sub.optionsCell {padding: 3px 0 3px 8px; line-height: 30px; font-size: 0.9em; clear: both;}
-#options .sub span {
+#userBar .sub {clear: both; display: none; width: 160px;}
+#userBar .sub.scroll {overflow-y: scroll;}
+#userBar .sub.subCell {padding: 3px 0 3px 8px; line-height: 30px; font-size: 0.9em; clear: both;}
+#userBar .sub span {
 	display: block;
 	line-height: 30px;
 	float: left;
 }
-#options .sub i {
+#userBar .sub i {
 	display: block;
 	padding: 0 5px;
 	font-size: 1.1em;
@@ -136,14 +136,14 @@ a.popt {text-decoration: none;}
 	line-height: 30px;
 	float: right;
 }
-#options .sub input {
+#userBar .sub input {
 	position: absolute;
 	padding: 7px 5px;
 	width: 121px;
 	line-height: 30px;
 	float: left;
 }
-#options .decreaseFont {border-top: 0;}
+#userBar .topCell {border-top: 0;}
 
 /* POPUPS */
 .popup {
diff --git a/code/modules/goonchat/browserassets/html/browserOutput.html b/code/modules/goonchat/browserassets/html/browserOutput.html
index a9e30b6b51..7b2d3ecfe0 100644
--- a/code/modules/goonchat/browserassets/html/browserOutput.html
+++ b/code/modules/goonchat/browserassets/html/browserOutput.html
@@ -27,17 +27,22 @@
 			<i class="icon-circle" id="pingDot"></i>
 			<span class="ms" id="pingMs">--ms</span>
 		</div>
+		<div id="audio">
+			<a href="#" class="subCell toggle" id="toggleAudio" title="Audio"><i class="icon-volume-up"></i></a>
+		</div>
 		<div id="options">
-			<a href="#" class="optionsCell toggle" id="toggleOptions" title="Options"><i class="icon-cog"></i></a>
-			<div class="sub" id="subOptions">
-				<a href="#" class="optionsCell decreaseFont" id="decreaseFont"><span>Decrease font size</span> <i class="icon-font">-</i></a>
-				<a href="#" class="optionsCell increaseFont" id="increaseFont"><span>Increase font size</span> <i class="icon-font">+</i></a>
-				<a href="#" class="optionsCell togglePing" id="togglePing"><span>Toggle ping display</span> <i class="icon-circle"></i></a>
-				<a href="#" class="optionsCell highlightTerm" id="highlightTerm"><span>Highlight string</span> <i class="icon-tag"></i></a>
-				<a href="#" class="optionsCell saveLog" id="saveLog"><span>Save chat log</span> <i class="icon-save"></i></a>
-				<a href="#" class="optionsCell clearMessages" id="clearMessages"><span>Clear all messages</span> <i class="icon-eraser"></i></a>
-				<span class="optionsCell" id="musicVolumeSpan"><input type="range" class="hidden" id="musicVolume"><span id="musicVolumeText">Admin music volume</span><i class="icon-music"></i></span>
-			</div>
+			<a href="#" class="subCell toggle" id="toggleOptions" title="Options"><i class="icon-cog"></i></a>
+		</div>
+		<div class="sub" id="subOptions">
+			<a href="#" class="subCell decreaseFont topCell" id="decreaseFont"><span>Decrease font size</span> <i class="icon-font">-</i></a>
+			<a href="#" class="subCell increaseFont" id="increaseFont"><span>Increase font size</span> <i class="icon-font">+</i></a>
+			<a href="#" class="subCell togglePing" id="togglePing"><span>Toggle ping display</span> <i class="icon-circle"></i></a>
+			<a href="#" class="subCell highlightTerm" id="highlightTerm"><span>Highlight string</span> <i class="icon-tag"></i></a>
+			<a href="#" class="subCell saveLog" id="saveLog"><span>Save chat log</span> <i class="icon-save"></i></a>
+			<a href="#" class="subCell clearMessages" id="clearMessages"><span>Clear all messages</span> <i class="icon-eraser"></i></a>
+		</div>
+		<div class="sub" id="subAudio">
+			<span class="subCell topCell" id="musicVolumeSpan"><input type="range" class="hidden" id="musicVolume"><span id="musicVolumeText">Admin music volume</span><i class="icon-music"></i></span>
 		</div>
 	</div>
 	<audio class="hidden" id="adminMusic" autoplay></audio>
diff --git a/code/modules/goonchat/browserassets/js/browserOutput.js b/code/modules/goonchat/browserassets/js/browserOutput.js
index bb555982cc..f027b523aa 100644
--- a/code/modules/goonchat/browserassets/js/browserOutput.js
+++ b/code/modules/goonchat/browserassets/js/browserOutput.js
@@ -22,7 +22,7 @@ window.onerror = function(msg, url, line, col, error) {
 
 //Globals
 window.status = 'Output';
-var $messages, $subOptions, $contextMenu, $filterMessages;
+var $messages, $subOptions, $subAudio, $selectedSub, $contextMenu, $filterMessages;
 var opts = {
 	//General
 	'messageCount': 0, //A count...of messages...
@@ -37,8 +37,8 @@ var opts = {
 	'restarting': false, //Is the round restarting?
 
 	//Options menu
-	'subOptionsLoop': null, //Contains the interval loop for closing the options menu
-	'suppressOptionsClose': false, //Whether or not we should be hiding the suboptions menu
+	'selectedSubLoop': null, //Contains the interval loop for closing the selected sub menu
+	'suppressSubClose': false, //Whether or not we should be hiding the selected sub menu
 	'highlightTerms': [],
 	'highlightLimit': 5,
 	'highlightColor': '#FFFF00', //The color of the highlighted message
@@ -483,6 +483,46 @@ function sendVolumeUpdate() {
 	}
 }
 
+function subSlideUp() {
+	$(this).removeClass('scroll');
+	$(this).css('height', '');
+}
+
+function startSubLoop() {
+	if (opts.selectedSubLoop) {
+		clearInterval(opts.selectedSubLoop);
+	}
+	return setInterval(function() {
+		if (!opts.suppressSubClose && $selectedSub.is(':visible')) {
+			$selectedSub.slideUp('fast', subSlideUp);
+			clearInterval(opts.selectedSubLoop);
+		}
+	}, 5000); //every 5 seconds
+}
+
+function handleToggleClick($sub, $toggle) {
+	if ($selectedSub !== $sub && $selectedSub.is(':visible')) {
+		$selectedSub.slideUp('fast', subSlideUp);
+	}
+	$selectedSub = $sub
+	if ($selectedSub.is(':visible')) {
+		$selectedSub.slideUp('fast', subSlideUp);
+		clearInterval(opts.selectedSubLoop);
+	} else {
+		$selectedSub.slideDown('fast', function() {
+			var windowHeight = $(window).height();
+			var toggleHeight = $toggle.outerHeight();
+			var priorSubHeight = $selectedSub.outerHeight();
+			var newSubHeight = windowHeight - toggleHeight;
+			$(this).height(newSubHeight);
+			if (priorSubHeight > (windowHeight - toggleHeight)) {
+				$(this).addClass('scroll');
+			}
+		});
+		opts.selectedSubLoop = startSubLoop();
+	}
+}
+
 /*****************************************
 *
 * DOM READY
@@ -497,6 +537,8 @@ if (typeof $ === 'undefined') {
 $(function() {
 	$messages = $('#messages');
 	$subOptions = $('#subOptions');
+	$subAudio = $('#subAudio');
+	$selectedSub = $subOptions;
 
 	//Hey look it's a controller loop!
 	setInterval(function() {
@@ -607,12 +649,9 @@ $(function() {
 	});
 
 	$messages.on('mousedown', function(e) {
-		if ($subOptions && $subOptions.is(':visible')) {
-			$subOptions.slideUp('fast', function() {
-				$(this).removeClass('scroll');
-				$(this).css('height', '');
-			});
-			clearInterval(opts.subOptionsLoop);
+		if ($selectedSub && $selectedSub.is(':visible')) {
+			$selectedSub.slideUp('fast', subSlideUp);
+			clearInterval(opts.selectedSubLoop);
 		}
 	});
 
@@ -731,41 +770,19 @@ $(function() {
 	});
 
 	$('#toggleOptions').click(function(e) {
-		if ($subOptions.is(':visible')) {
-			$subOptions.slideUp('fast', function() {
-				$(this).removeClass('scroll');
-				$(this).css('height', '');
-			});
-			clearInterval(opts.subOptionsLoop);
-		} else {
-			$subOptions.slideDown('fast', function() {
-				var windowHeight = $(window).height();
-				var toggleHeight = $('#toggleOptions').outerHeight();
-				var priorSubHeight = $subOptions.outerHeight();
-				var newSubHeight = windowHeight - toggleHeight;
-				$(this).height(newSubHeight);
-				if (priorSubHeight > (windowHeight - toggleHeight)) {
-					$(this).addClass('scroll');
-				}
-			});
-			opts.subOptionsLoop = setInterval(function() {
-				if (!opts.suppressOptionsClose && $('#subOptions').is(':visible')) {
-					$subOptions.slideUp('fast', function() {
-						$(this).removeClass('scroll');
-						$(this).css('height', '');
-					});
-					clearInterval(opts.subOptionsLoop);
-				}
-			}, 5000); //Every 5 seconds
-		}
+		handleToggleClick($subOptions, $(this));
 	});
 
-	$('#subOptions, #toggleOptions').mouseenter(function() {
-		opts.suppressOptionsClose = true;
+	$('#toggleAudio').click(function(e) {
+		handleToggleClick($subAudio, $(this));
 	});
 
-	$('#subOptions, #toggleOptions').mouseleave(function() {
-		opts.suppressOptionsClose = false;
+	$('.sub, .toggle').mouseenter(function() {
+		opts.suppressSubClose = true;
+	});
+
+	$('.sub, .toggle').mouseleave(function() {
+		opts.suppressSubClose = false;
 	});
 
 	$('#decreaseFont').click(function(e) {