diff --git a/index.html b/index.html
index e713f71..8c86d23 100644
--- a/index.html
+++ b/index.html
@@ -1349,7 +1349,7 @@
 				<span class="director-message-box hidden" data-action-type="messaging-box">
 					
 					<textarea data-action-type="messaging-box-text" placeholder="Enter your message here"></textarea>
-					<button data-action-type="messaging-box-close" class="hidden">
+					<button data-action-type="messaging-box-close" class="">
 						<i class="las la-times"></i>
 						<span data-translate="close">close</span>
 					</button>
@@ -1382,9 +1382,9 @@
 					<span data-translate="solo-video">Highlight guest</span>
 				</button>
 				
-				<span 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; updates on release. Dbl-click to reset." oninput="remoteVolumeUI(this)" onchange="remoteVolume(this);" ondblclick="this.value=100;remoteVolume(this);remoteVolumeUI(this);"  style="grid-column: 2; margin:5px; width: 93%; position: relative;top: 0.6em; background-color:#fff0;"/>
-					<span class="tooltiptext" style='float: right; overflow: auto;  left: 40px;  width: 3em;  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>
+				<span class="tooltip" style="border: 0;">
+					<input data-action-type="volume" type="range" min="0" max="200" value="100" title="Remotely change the volume of this guest; updates on release. Dbl-click to reset." oninput="remoteVolumeUI(this)" onchange="remoteVolume(this);" ondblclick="this.value=100;remoteVolume(this);remoteVolumeUI(this);" />
+					<span class="tooltiptext" style='overflow: auto;left: 35%;width: 3em;top: -15px;margin: 0;position: absolute;font-family:"Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", Times, Symbola, Aegyptus,Code2000, Code2001, Code2002, Musica, serif, LastResort;' >100</span>
 				</span>
 				
 				<button data-action-type="mute-guest" value="0" title="Mute this guest everywhere" onclick="remoteMute(this, event);">
diff --git a/main.css b/main.css
index e007ffa..2eeaf96 100644
--- a/main.css
+++ b/main.css
@@ -2143,11 +2143,13 @@ iframe {
     text-align: right;
 }
 .director-message-box{
-	margin-top: 5px;
+    display: flex;
+    flex: 1 100%;
+    flex-wrap: wrap;
 }
 .director-message-box textarea {
 	margin: 5px;
-	width: 260px;
+	flex: 1 100%;
 	padding: 5px;
 }
 .director-message-box > button {
@@ -3289,33 +3291,48 @@ div#roomnotes2 {
 	text-transform: lowercase;
 }
 .controlsGrid {
-	display: flex;
-    flex-direction: row;
+    display: flex;
     flex-wrap: wrap;
-    align-content: stretch;
-    justify-content: flex-start;
-    align-items: stretch;
 }
 .controlsGrid button {
-	margin: 5px;
+    margin: 5px;
     text-align: right;
-    width: 46%;
-}
-.controlsGrid > span {
-	width: 50%;
+    flex: 0 1 calc(50% - 10px);
 }
 .controlsGrid > div {
 	width: 100%;
 	display: flex;
 }
-.controlsGrid span button {
-	margin-right: 0;
-	padding-left: 3px;
-	text-align: right;
-	width: calc(33% - 10px);
-}
+
 .controlsGrid input {
-	margin: 5px var(--regular-margin);
+	margin: 5px;
+}
+
+button[data-action-type="messaging-box-close"] {
+	flex: 0 1 25%;
+}
+button[data-action-type="messaging-box-send"] {
+	flex: 1 0 50%
+}
+
+.controlsGrid > span.tooltip {
+    display: flex;
+    flex: 1 calc(50% - 10px);
+    align-items: center;
+}
+
+.advanced {
+	display: var(--advanced-mode);
+}
+.controlCenterBox{
+	margin-top:2px;
+}
+#widget {
+	position: absolute;
+    width: 25%;
+    height: 100%;
+    right: 0;
+    top: 0;
 }
 
 .advanced {