diff --git a/index.html b/index.html
index cdf40b5..3b6a67d 100644
--- a/index.html
+++ b/index.html
@@ -909,105 +909,104 @@
 					</div>
 				</a>
 			</div>
-			<div></div>
-			<div id='guestFeeds' style="display:none"><div id='deleteme'>
-				<div class='vidcon' style='margin: 15px 20px 0 0; min-height: 300px;text-align: center;'><h2>Guest 1</h2><i class='las la-user-circle' style='font-size:8em; margin: 20px 0px;' aria-hidden='true'></i></div>
-				<div class='vidcon' style='margin: 15px 20px 0 0; min-height: 300px;text-align: center;'><h2>Guest 2</h2><i class='las la-user-circle' style='font-size:8em; margin: 20px 0px;' aria-hidden='true'></i></div>
-				<div class='vidcon' style='margin: 15px 20px 0 0; min-height: 300px;text-align: center;'><h2>Guest 3</h2><i class='las la-user-circle' style='font-size:8em; margin: 20px 0px;' aria-hidden='true'></i></div>
-				<div class='vidcon' style='margin: 15px 20px 0 0; min-height: 300px;text-align: center;'><h2>Guest 4</h2><i class='las la-user-circle' style='font-size:8em; margin: 20px 0px;' aria-hidden='true'></i></div>
-				<h4 style='color:#CCC;margin:20px 20px 0 20px;' data-translate='more-than-four-can-join' >These four guest slots are just for demonstration. More than four guests can actually join a room.</h4>
-			</div></div>
+			<div id='guestFeeds' class='placeholders' style="display:none">
+				<div class='vidcon'><h2>Guest 1</h2><i class='las la-user-circle' style='font-size:8em; margin: 20px 0px;' aria-hidden='true'></i></div>
+				<div class='vidcon'><h2>Guest 2</h2><i class='las la-user-circle' style='font-size:8em; margin: 20px 0px;' aria-hidden='true'></i></div>
+				<div class='vidcon'><h2>Guest 3</h2><i class='las la-user-circle' style='font-size:8em; margin: 20px 0px;' aria-hidden='true'></i></div>
+				<div class='vidcon'><h2>Guest 4</h2><i class='las la-user-circle' style='font-size:8em; margin: 20px 0px;' aria-hidden='true'></i></div>
+			</div>
 		</div>
 		
 		<div id="overlayMsgs" onclick="function(e){e.target.innerHTML = '';}" style="display:none"></div>
 		<div id="bigPlayButton" onclick="function(e){e.target.innerHTML = '';}" style="display:none"></div>
 		<div id="controls_blank" style="display: none;">
-			<div class="controlsGrid">
-			
-				<button data-action-type="forward"  data-value="0" title="Move the user to another room, controlled by another director" onclick="directMigrate(this, event);">
-					<i class="las la-paper-plane"></i>
-					<span data-translate="forward-to-room">Transfer</span>
-				</button>
-				
-				<button data-action-type="direct-chat" title="Send a Direct Message to this user." onclick="directorSendMessage(this);">
-					<span data-translate="send-direct-chat"><i class="las la-envelope"></i> Message</span>
-				</button>
-
-				<button data-action-type="addToScene"  style="grid-column: 1;"  data-value="0" title="Add this Video to any remote '&scene=1'" onclick="directEnable(this, event);">
-					<i class="las la-plus-square"></i>
-					<span data-translate="add-to-scene">Add to Scene</span>
-				</button>
-				<button data-action-type="mute-scene"  style="grid-column: 2;" title="Remotely Mute this Audio in all remote '&scene' views" onclick="directMute(this, event);">
-					<i class="las la-microphone-slash"></i>
-					<span data-translate="mute-scene" >mute in scene</span>
-				</button>
-				
-				<font class="tooltip" style="height: 0; border: 0;">
-					<input data-action-type="volume" type="range" min="0" max="200" value="100" title="Remotely change the volume of this guest" oninput="remoteVolumeUI(this)" onclick="remoteVolume(this);" style="grid-column: 1; margin:5px; width: 93%; position: relative;top: 0.6em; background-color:#fff0;"/><span class="tooltiptext" style='float: right; overflow: auto;  left: 40px;  width: 2.5em;  top: -13px; margin: 0; position:relative;font-family:"Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", Times, Symbola, Aegyptus,Code2000, Code2001, Code2002, Musica, serif, LastResort;' >100</span></font>
-				
-				<button data-action-type="mute-guest"  style="grid-column: 2;" title="Mute this guest everywhere" onclick="remoteMute(this, event);">
-					<i class="las la-microphone-slash"></i>
-					<span data-translate="mute-guest" >mute guest</span>
-				</button>
-
-				<span>
-					<button style="width: 35.2px" data-action-type="change-quality1" title="Disable Video Preview" onclick="toggleQualityDirector(0, this.dataset.UUID, this);">
-						<span data-translate="change-to-low-quality">&nbsp;&nbsp;<i class="las la-video-slash"></i></span>
-					</button>
-					<button class="pressed" style="width:35.2px;" data-action-type="change-quality2" title="Low-Quality Preview" onclick="toggleQualityDirector(50, this.dataset.UUID, this);">
-						<span data-translate="change-to-medium-quality">&nbsp;&nbsp;<i class="las la-video"></i></span>
-					</button>
-					<button style="width: 35.2px" data-action-type="change-quality3" title="High-Quality Preview" onclick="toggleQualityDirector(1200, this.dataset.UUID, this);">
-						<span data-translate="change-to-high-quality">&nbsp;&nbsp;<i class="las la-binoculars"></i></span>
-					</button>
+			<div class="control_panel">
+				<h2 onclick="expandPanel(this)"><i class="las la-caret-right"></i>Guest</h2>
+				<span class="info">
+					<i class="las la-info-circle"></i>
 				</span>
-
-				<button data-action-type="hangup"  data-value="0" title="Force the user to Disconnect. They can always reconnect." onclick="directHangup(this, event);">
-					<i class="las la-sign-out-alt"></i>
-					<span data-translate="disconnect-guest" >Hangup</span>
-				</button>
-				<button data-action-type="recorder-local" title="Start Recording this remote stream to this local drive. *experimental*'" onclick="recordVideo(this, event)">
-					<i class="las la-circle"></i>
-					<span data-translate="record-local"> Record Local</span>
-				</button>
-				<button data-action-type="recorder-remote" data-value="0" title="The Remote Guest will record their local stream to their local drive. *experimental*" onclick="requestVideoRecord(this)">
-					<i class="las la-circle"></i>
-					<span data-translate="record-remote"> Record Remote</span>
-				</button>
-				
-				<button class="" data-action-type="solo-chat" title="Toggle Solo Voice Chat" onclick="session.toggleSoloChat(this.dataset.UUID);">
-					<span data-translate="voice-chat"><i class="las la-microphone"></i> Solo Talk</span>
-				</button>
-				
-				<span>
-					<button style="width:34px;" data-action-type="order-down" title="Shift this Video Down in Order"  onclick="changeOrder(-1,this.dataset.UUID);">
-						<span data-translate="order-down"><i class="las la-minus"></i></span>
+				<div class="controlsGrid">
+					<button data-action-type="forward"  data-value="0" title="Move the user to another room, controlled by another director" onclick="directMigrate(this, event);">
+						<i class="las la-paper-plane"></i>
+						<span data-translate="forward-to-room">Transfer</span>
 					</button>
-					<span class="orderspan">
-						<div style="text-align: center;font-size: 150%;" data-action-type="order-value" title="Current Index Order of this Video" >0</div>
-						Mix Order
+					<button data-action-type="direct-chat" title="Send a Direct Message to this user." onclick="directorSendMessage(this);">
+						<span data-translate="send-direct-chat"><i class="las la-envelope"></i> Message</span>
+					</button>
+					<button data-action-type="recorder-local" title="Start Recording this remote stream to this local drive. *experimental*'" onclick="recordVideo(this, event)">
+						<i class="las la-circle"></i>
+						<span data-translate="record-local"> Record Local</span>
+					</button>
+					<button data-action-type="recorder-remote" data-value="0" title="The Remote Guest will record their local stream to their local drive. *experimental*" onclick="requestVideoRecord(this)">
+						<i class="las la-circle"></i>
+						<span data-translate="record-remote"> Record Remote</span>
+					</button>
+					<button data-action-type="hangup"  data-value="0" title="Force the user to Disconnect. They can always reconnect." onclick="directHangup(this, event);">
+						<i class="las la-sign-out-alt"></i>
+						<span data-translate="disconnect-guest" >Hangup</span>
+					</button>
+				</div>
+			</div>
+			<div class="control_panel">
+				<h2 onclick="expandPanel(this)"><i class="las la-caret-right"></i>Every other setting</h2>
+				<span class="info">
+					<i class="las la-info-circle"></i>
+				</span>
+				<div class="controlsGrid">
+					<button data-action-type="addToScene"  style="grid-column: 1;"  data-value="0" title="Add this Video to any remote '&scene=1'" onclick="directEnable(this, event);">
+						<i class="las la-plus-square"></i>
+						<span data-translate="add-to-scene">Add to Scene</span>
+					</button>
+					<button data-action-type="mute-scene"  style="grid-column: 2;" title="Remotely Mute this Audio in all remote '&scene' views" onclick="directMute(this, event);">
+						<i class="las la-microphone-slash"></i>
+						<span data-translate="mute-scene" >mute in scene</span>
+					</button>
+					
+					<font class="tooltip" style="height: 0; border: 0;">
+						<input data-action-type="volume" type="range" min="0" max="200" value="100" title="Remotely change the volume of this guest" oninput="remoteVolumeUI(this)" onclick="remoteVolume(this);" style="grid-column: 1; margin:5px; width: 93%; position: relative;top: 0.6em; background-color:#fff0;"/><span class="tooltiptext" style='float: right; overflow: auto;  left: 40px;  width: 2.5em;  top: -13px; margin: 0; position:relative;font-family:"Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", Times, Symbola, Aegyptus,Code2000, Code2001, Code2002, Musica, serif, LastResort;' >100</span></font>
+					
+					<button data-action-type="mute-guest"  style="grid-column: 2;" title="Mute this guest everywhere" onclick="remoteMute(this, event);">
+						<i class="las la-microphone-slash"></i>
+						<span data-translate="mute-guest" >mute guest</span>
+					</button>
+	
+					<button class="" data-action-type="solo-chat" title="Toggle Solo Voice Chat" onclick="session.toggleSoloChat(this.dataset.UUID);">
+						<span data-translate="voice-chat"><i class="las la-microphone"></i> Solo Talk</span>
+					</button>
+					
+					<span>
+						<button style="width:34px;" data-action-type="order-down" title="Shift this Video Down in Order"  onclick="changeOrder(-1,this.dataset.UUID);">
+							<span data-translate="order-down"><i class="las la-minus"></i></span>
+						</button>
+						<span class="orderspan">
+							<div style="text-align: center;font-size: 150%;" data-action-type="order-value" title="Current Index Order of this Video" >0</div>
+							Mix Order
+						</span>
+						<button style="width:34px;margin-left:0;" data-action-type="order-up" title="Shift this Video Up in Order"  onclick="changeOrder(1,this.dataset.UUID);">
+							<span data-translate="order-up"><i class="las la-plus"></i></span>
+						</button>
 					</span>
-					<button style="width:34px;margin-left:0;" data-action-type="order-up" title="Shift this Video Up in Order"  onclick="changeOrder(1,this.dataset.UUID);">
-						<span data-translate="order-up"><i class="las la-plus"></i></span>
+					
+					<button  data-action-type="toggle-remote-speaker"  style="grid-column: 1;" title="Toggle the remote guest's speaker output" onclick="remoteSpeakerMute(this, event);">
+						<i class="las la-volume-off"></i> <span data-translate="toggle-remote-speaker">Deafen Guest</span>
 					</button>
-				</span>
+					<button  data-action-type="toggle-remote-display"  style="grid-column: 2;" title="Toggle the remote guest's display output" onclick="remoteDisplayMute(this, event);">
+						<i class="las la-eye-slash"></i> <span data-translate="toggle-remote-display">Blind Guest</span>
+					</button>
+					
+					<button class="" data-action-type="advanced-audio-settings"  data-active="false" style="grid-column: 1;" title="Remote Audio Settings" onclick="requestAudioSettings(this);">
+						<span data-translate="advanced-audio-settings"><i class="las la-sliders-h"></i> Audio Settings</span>
+					</button>
+					<button class="" data-action-type="advanced-camera-settings"  data-active="false" style="grid-column: 2;" title="Advanced Video Settings" onclick="requestVideoSettings(this);">
+						<span data-translate="advanced-camera-settings"><i class="las la-sliders-h"></i> Video Settings</span>
+					</button>
+					
+					<div id='advanced_audio_director_' class='advanced'></div>
+					<div id='advanced_video_director_' class='advanced'></div>
+	
+				</div>		
+			</div>
 				
-				<button  data-action-type="toggle-remote-speaker"  style="grid-column: 1;" title="Toggle the remote guest's speaker output" onclick="remoteSpeakerMute(this, event);">
-					<i class="las la-volume-off"></i> <span data-translate="toggle-remote-speaker">Deafen Guest</span>
-				</button>
-				<button  data-action-type="toggle-remote-display"  style="grid-column: 2;" title="Toggle the remote guest's display output" onclick="remoteDisplayMute(this, event);">
-					<i class="las la-eye-slash"></i> <span data-translate="toggle-remote-display">Blind Guest</span>
-				</button>
-				
-				<button class="" data-action-type="advanced-audio-settings"  data-active="false" style="grid-column: 1;" title="Remote Audio Settings" onclick="requestAudioSettings(this);">
-					<span data-translate="advanced-audio-settings"><i class="las la-sliders-h"></i> Audio Settings</span>
-				</button>
-				<button class="" data-action-type="advanced-camera-settings"  data-active="false" style="grid-column: 2;" title="Advanced Video Settings" onclick="requestVideoSettings(this);">
-					<span data-translate="advanced-camera-settings"><i class="las la-sliders-h"></i> Video Settings</span>
-				</button>
-				
-
-			</div>	
 		</div>
 		
 		<div id="popupSelector" style="display:none;">
diff --git a/main.css b/main.css
index 4d4c0e6..57eebf1 100644
--- a/main.css
+++ b/main.css
@@ -6,7 +6,14 @@
 	--red-accent: #553737;
 	--green-accent: #3f4f50;
 	--olive-accent: #535D32;
-	--regular-margin: 10px;
+    --regular-margin: 10px;
+    --director-tile-grid-width: 70fr;
+    --director-tile-backdrop-color: #626262;
+    --director-tile-content-background-color: #494949;
+    --director-tile-content-label-color: #ffffff;
+    --director-button-background-color: #242524;
+    --director-button-label-color: #ffffff;
+    --director-button-active-background-color: #868686;
 }
 
 * {
@@ -114,7 +121,7 @@ a:active {
 	color: #D9E4EB;
 }
 
-input {
+input:not(input[type="range"]) {
 	border-radius: 4px;
 	padding: 2px;
 	-webkit-app-region: no-drag;
@@ -326,19 +333,6 @@ hr {
 	clear: both;
 }
 
-.vidcon {
-	max-width: 100%;
-	border: 0;
-}
-
-.vidcon:nth-of-type(3n) {
-	grid-column: 2;
-}
-
-.vidcon:nth-of-type(3n) {
-	grid-row: span;
-}
-
 .tile {
 	object-fit: contain;
 	background-color: black;
@@ -388,19 +382,18 @@ hr {
 	overflow-y: auto !important;
 }
 
-.directorsgrid .vidcon video {
-	max-width: 100%;
-	padding: 0 5px;
-	width: 100%;
-	height: 148px;
+.directorsgrid .vidcon {
+	background: var(--director-tile-backdrop-color);
+	color: #FCFCFC;
+    vertical-align: top;
+    text-align: center;
 }
 
-.directorsgrid .vidcon {
-	display: inline-block !important;
-	width: 269.7px !important;
-	background: #7E7E7E;
-	color: #FCFCFC;
-	vertical-align: top;
+
+.directorsgrid .vidcon video {
+	max-width: 100%;
+	width: 100%;
+	height: auto;
 }
 
 .directorsgrid .vidcon>.las {
@@ -409,6 +402,63 @@ hr {
 	width: 90%;
 }
 
+.control_panel {
+    background: #494949;
+    margin: 7px;
+    padding: 10px;
+    border-radius: 6px;
+    position: relative;
+}
+
+.control_panel h2 {
+    font-size: 0.8em;
+    text-transform: uppercase;
+    font-weight: bold;
+	text-align: left;
+	cursor: pointer;
+}
+
+.control_panel h2 i {
+	margin-right: 5px;
+}
+
+.control_panel .info {
+    margin-right: 10px;
+    position: absolute;
+    top: 10px;
+    right: -5px;
+}
+
+.control_panel_sub {
+	grid-column: span 2;
+	margin-left: 10%;
+}
+
+.control_panel_quality_toggles {
+    justify-content: flex-end;
+    display: flex;
+    gap: 4px;
+}
+
+.control_panel_quality_toggles button {
+	background-color: var(--director-button-background-color);
+	color: var(--director-button-label-color);
+	text-transform: uppercase !important;
+	border-radius: 6px;
+	font-weight: bold;
+	padding: 5px 8px;
+}
+
+.control_panel_quality_toggles button.pressed {
+	box-shadow: none;
+	background: var(--director-button-active-background-color);
+}
+
+.active .controlsGrid {
+	margin-top: 1em;
+}
+
+
 .puslate {
 	border-radius: 50%;
 	box-shadow: 0 0 0 0 rgba(14, 19, 26, 1);
@@ -711,33 +761,30 @@ input[type=range]:focus {
 }
 input[type=range]::-webkit-slider-runnable-track {
   width: 100%;
-  height: 8.4px;
+  height: 3px;
   cursor: pointer;
-  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
-  background: #3071a9;
+  background: #C3C3C3;
   border-radius: 1.3px;
-  border: 0.2px solid #010101;
 }
 input[type=range]::-webkit-slider-thumb {
-  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
-  border: 1px solid #000000;
-  height: 30px;
-  width: 16px;
-  border-radius: 3px;
-  background: #ffffff;
+  box-shadow: 1px 1px 1px #5e5e5e;
+  height: 15px;
+  width: 15px;
+  border-radius: 7px;
+  background: #C3C3C3;
   cursor: pointer;
   -webkit-appearance: none;
-  margin-top: -11px;
+  margin-top: -6px;
 }
 input[type=range]:focus::-webkit-slider-runnable-track {
-  background: #367ebd;
+  background: #a7a7a7;
 }
 input[type=range]::-moz-range-track {
   width: 100%;
   height: 8.4px;
   cursor: pointer;
   box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
-  background: #3071a9;
+  background: #C3C3C3;
   border-radius: 1.3px;
   border: 0.2px solid #010101;
 }
@@ -747,7 +794,7 @@ input[type=range]::-moz-range-thumb {
   height: 36px;
   width: 16px;
   border-radius: 3px;
-  background: #ffffff;
+  background: #C3C3C3;
   cursor: pointer;
 }
 input[type=range]::-ms-track {
@@ -2011,12 +2058,28 @@ div#roomnotes2 {
 }
 .controlsGrid {
 	grid-template-columns: 1fr 1fr;
-	display: grid;
+    display: grid;
+	grid-gap:10px;
+	max-height: 0;
+	transition: all 0.3s linear;
+	overflow: hidden;
 }
 .controlsGrid button {
-	margin: 5px;
-	text-align: right;
+    margin: 0;
+    text-align: right;
+    background-color: var(--director-button-background-color);
+    color: var(--director-button-label-color);
+    border-radius: 6px;
+    padding: 8px;
+    font-size:15px;
 }
+.controlsGrid button.pressed {
+    background-color: #868686;
+    outline:none;
+    box-shadow: none;
+    -webkit-box-shadow: none;
+}
+
 .controlsGrid span button {
 	margin-right: 0;
     padding-left: 3px;
@@ -2026,6 +2089,10 @@ div#roomnotes2 {
 	margin: 5px var(--regular-margin);
 }
 
+.controlsGrid button i.las.la-circle {
+    font-size: 12px;
+}
+
 .pull-right {
 	float: right;
 	right: 0;
@@ -2035,12 +2102,17 @@ div#roomnotes2 {
 	left: 0;
 }
 i.las.la-circle {
-	color: red;
+	color: #DC1115;
+    background: #DC1115;
+    border-radius: 50%;
+}
+i.las.la-copy {
+	cursor: pointer;
 }
 .streamID {
 	text-align: right;
 	margin: 5px;
-	font-size: 0.7em;
+	font-size: 1em;
 	text-overflow: ellipsis;
     overflow: hidden;
 }
@@ -2065,10 +2137,10 @@ i.las.la-circle {
 	margin-top: 20px;
 }
 div#guestFeeds {
-	background: var(--container-color);
-	padding: 5px 0 15px 20px;
-	display: inline-block;
-	margin: 0px var(--regular-margin);
+    display: grid;
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    margin: 0px var(--regular-margin);
+    grid-gap: 10px;
 }
 
 div#guestFeeds:empty {
diff --git a/main.js b/main.js
index 95c9889..4d9a3d7 100644
--- a/main.js
+++ b/main.js
@@ -4972,8 +4972,12 @@ function requestVideoSettings(ele) {
 }
 
 function createControlBox(UUID, soloLink, streamID) {
-	if (document.getElementById("deleteme")) {
-		getById("deleteme").parentNode.removeChild(getById("deleteme"));
+
+	var placeholders = document.querySelector('#guestFeeds.placeholders');
+
+	if (placeholders) {
+		getById("guestFeeds").innerHTML = '';
+		placeholders.classList.remove('placeholders');
 	}
 	var controls = getById("controls_blank").cloneNode(true);
 
@@ -4982,14 +4986,33 @@ function createControlBox(UUID, soloLink, streamID) {
 	container.className = "vidcon";
 	container.style.margin = "15px 20px 0 0 ";
 
+	var container_contentTile = document.createElement("div");
+	container_contentTile.className = "control_panel";
+
 	controls.style.display = "block";
 	controls.id = "controls_" + UUID;
 	getById("guestFeeds").appendChild(container);
+	container.appendChild(container_contentTile);
 
-	var buttons = "<div class='streamID' style='user-select: none;'>ID: <span style='user-select: text;'>" + streamID + "</span>\
-	<i class='las la-copy' data-sid='" + streamID + "' onmousedown='copyFunction(this.dataset.sid)' onclick='popupMessage(event);copyFunction(this.dataset.sid)' title='Copy this Stream ID to the clipboard' style='cursor:pointer'></i>\
-	<span id='label_" + UUID + "' title='Click here to edit the label for this stream. Changes will propagate to all viewers of this stream'></span>\
-	</div>";
+	var buttons = `
+	<h2 class='streamID' style='user-select: none;' onclick='expandPanel(this)'>
+		<i class="las la-caret-right"></i>
+		<span style='user-select: text;'>${streamID}</span>
+		<i class='las la-copy' data-sid='${streamID}' onmousedown='copyFunction(this.dataset.sid)' onclick='popupMessage(event);copyFunction(this.dataset.sid)' title='Copy this Stream ID to the clipboard'></i>
+		<span id='label_${UUID}' title='Click here to edit the label for this stream. Changes will propagate to all viewers of this stream'></span>
+	</h2>
+	<span class="control_panel_quality_toggles">
+	<button data-action-type="change-quality1" title="Disable Video Preview" onclick="toggleQualityDirector(0, '${UUID}', this);">
+		<span data-translate="change-to-low-quality">×</span>
+	</button>
+	<button class="pressed" data-action-type="change-quality2" title="Low-Quality Preview" onclick="toggleQualityDirector(50, '${UUID}', this);">
+		<span data-translate="change-to-medium-quality">L</span>
+	</button>
+	<button data-action-type="change-quality3" title="High-Quality Preview" onclick="toggleQualityDirector(1200, '${UUID}', this);">
+		<span data-translate="change-to-high-quality">H</span>
+	</button>
+</span>
+	`;
 
 	if (!session.rpcs[UUID].voiceMeter) {
 		session.rpcs[UUID].voiceMeter = getById("voiceMeterTemplate").cloneNode(true);
@@ -5000,13 +5023,13 @@ function createControlBox(UUID, soloLink, streamID) {
 	}
 
 	session.rpcs[UUID].voiceMeter.style.top = "1vh";
-	session.rpcs[UUID].voiceMeter.style.right = "1vh";
+	session.rpcs[UUID].voiceMeter.style.right = "0.5vw";
 
 
 	session.rpcs[UUID].remoteMuteElement = getById("muteStateTemplate").cloneNode(true);
 	session.rpcs[UUID].remoteMuteElement.id = "";
 	session.rpcs[UUID].remoteMuteElement.style.top = "1vh";
-	session.rpcs[UUID].remoteMuteElement.style.right = "1vh";
+	session.rpcs[UUID].remoteMuteElement.style.right = "0.5vw";
 
 
 	var videoContainer = document.createElement("div");
@@ -5014,12 +5037,13 @@ function createControlBox(UUID, soloLink, streamID) {
 	videoContainer.style.margin = "0";
 	videoContainer.style.position = "relative";
 
-	controls.innerHTML += "<div style='margin:10px;' id='advanced_audio_director_" + UUID + "' class='advanced'></div>";
-	controls.innerHTML += "<div style='margin:10px;' id='advanced_video_director_" + UUID + "' class='advanced'></div>";
+
+	controls.querySelector('#advanced_audio_director_').id = controls.querySelector('#advanced_audio_director_').id + UUID;
+	controls.querySelector('#advanced_video_director_').id = controls.querySelector('#advanced_video_director_').id + UUID;
 
 	var handsID = "hands_" + UUID;
 
-	controls.innerHTML += "<div>\
+	controls.innerHTML += "<div class='control_panel'><h2>Solo links</h2>\
 		<div style='padding:5px;word-wrap: break-word; overflow:hidden; white-space: nowrap; overflow: hidden; font-size:0.7em; text-overflow: ellipsis;' title='A direct solo view of the video/audio stream with nothing else. Its audio can be remotely controlled from here'> \
 		<a class='soloLink' data-drag='1' draggable='true' onmousedown='copyFunction(this)' onclick='popupMessage(event);copyFunction(this)' \
 		value='" + soloLink + "' href='" + soloLink + "'/>" + soloLink + "</a>\
@@ -5035,8 +5059,9 @@ function createControlBox(UUID, soloLink, streamID) {
 		ele.dataset.UUID = UUID;
 	});
 
-	container.innerHTML = buttons;
-	container.appendChild(videoContainer);
+	
+	container_contentTile.innerHTML = buttons;
+	container_contentTile.appendChild(videoContainer);
 	videoContainer.appendChild(session.rpcs[UUID].voiceMeter);
 	videoContainer.appendChild(session.rpcs[UUID].remoteMuteElement);
 	container.appendChild(controls);
@@ -5503,8 +5528,12 @@ function gotDevices(deviceInfos) { // https://github.com/webrtc/samples/blob/gh-
 }
 
 
-if (location.protocol !== 'https:') {
-	if (!(session.cleanOutput)) {
+if (
+	location.protocol !== "https:" 		&&
+	location.hostname !=  "localhost" 	&&
+	location.hostname !=  "127.0.0.1"
+) {
+	if (!session.cleanOutput) {
 		alert("SSL (https) is not enabled. This site will not work without it!");
 	}
 }
@@ -8350,7 +8379,9 @@ function updateDirectorsAudio(dataN, UUID) {
 				errorlog(e);
 			}
 		}
+		getById("advanced_audio_director_" + UUID).className = 'control_panel_sub';
 		getById("advanced_audio_director_" + UUID).appendChild(audioEle);
+		getById("advanced_audio_director_" + UUID).parentElement.style.maxHeight = getById("advanced_audio_director_" + UUID).parentElement.scrollHeight + "px";
 	}
 }
 
@@ -8513,7 +8544,9 @@ function updateDirectorsVideo(data, UUID) {
 
 	getById("advanced_video_director_" + UUID).innerHTML = "";
 	getById("advanced_video_director_" + UUID).appendChild(videoEle);
-	getById("advanced_video_director_" + UUID).className = "";
+	getById("advanced_video_director_" + UUID).className = "control_panel_sub";
+	getById("advanced_video_director_" + UUID).parentElement.style.maxHeight = getById("advanced_video_director_" + UUID).parentElement.scrollHeight + "px";
+
 }
 
 ///////
@@ -11522,3 +11555,26 @@ addEventToAll("#multiselect-trigger3", 'mousedown touchend focusin focusout', fu
 });
 
 		  
+function expandPanel(element) {
+
+	element.parentElement.classList.toggle("active");
+
+	if (element.parentElement.classList.contains('active')) {
+		element.querySelector('i').className = 'las la-caret-down';
+	} else {
+		element.querySelector('i').className = 'las la-caret-right';
+	}
+
+	
+	var content = element.parentElement.querySelector(".controlsGrid");
+
+	if (content.style.maxHeight) {
+		content.style.maxHeight = null;
+	} else {
+		content.style.maxHeight = content.scrollHeight + "px";
+	}
+	setTimeout(function () {
+		element.scrollIntoView({ block: "center", behavior: "smooth" });
+	}, 200)
+
+}