diff --git a/examples/main.css b/examples/main.css
index 025eefd..04019f9 100644
--- a/examples/main.css
+++ b/examples/main.css
@@ -1523,10 +1523,6 @@ iframe {
 
 .popup .menu { margin: 2px; }
 
-.my-float {
-	margin-top: 7px;
-	opacity: 0.9;
-}
 .toggleSize {
 	font-size: 32px;
 	color: white;
diff --git a/index.html b/index.html
index a587364..2ce816c 100644
--- a/index.html
+++ b/index.html
@@ -137,85 +137,85 @@
 			<div id="subControlButtons">
 			
 				<div id="blindAllGuests" title="Blind all guests in room (toggle)" alt="Blind all guests in room (toggle)" aria-label="Blind all guests in room" onmousedown="event.preventDefault(); event.stopPropagation();"  onclick="blindAllGuests(this, event)"  tabindex="16" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);"  class="hidden float" style="cursor: pointer;" >
-					<i class="toggleSize las la-eye my-float"></i>
+					<i class="toggleSize las la-eye"></i>
 				</div>
 			
 				<div id="queuebutton" title="Load the next guest in queue" alt="Load the next guest in queue"  aria-label="Load next guest in queue" onmousedown="event.preventDefault(); event.stopPropagation();"  onclick="nextQueue()"  tabindex="16" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);"  class="hidden float" style="cursor: pointer;" >
-					<i id="queuetoggle" class="toggleSize las la-stream my-float"></i>
+					<i id="queuetoggle" class="toggleSize las la-stream"></i>
 					<div id="queueNotification"></div>
 				</div>
 				
 				<div id="sharefilebutton" title="Transfer any file to the group" alt="Transfer any file to the group" aria-label="Select file to transfer" onmousedown="event.preventDefault(); event.stopPropagation();"  onclick="toggleFileshare()"  tabindex="16" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);"  class="float" style="cursor: pointer;" >
-					<i id="filesharetoggle" class="toggleSize las la-file-upload my-float"></i> 
+					<i id="filesharetoggle" class="toggleSize las la-file-upload"></i> 
 					<div id="transferNotification"></div>
 				</div>
 				
 				<div id="chatbutton" title="Toggle the Chat" alt="Toggle the Chat" aria-label="Text chat" onmousedown="event.preventDefault(); event.stopPropagation();"  onclick="toggleChat()"  tabindex="16" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);"  class="hidden float" style="cursor: pointer;" >
-					<i id="chattoggle" class="toggleSize las la-comment-alt my-float"></i>
+					<i id="chattoggle" class="toggleSize las la-comment-alt"></i>
 					<div id="chatNotification"></div>
 				</div>
 				<div id="mutespeakerbutton" onmousedown="event.preventDefault(); event.stopPropagation();" alt="Toggle the speaker output." aria-label="Mute Speaker output" title="Mute the Speaker" onclick="toggleSpeakerMute()"  tabindex="17" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);"  class="hidden float" style="cursor: pointer;" >
-					<i id="mutespeakertoggle" class="toggleSize las la-volume-up my-float" style="position: relative; top: 0.5px;"></i>
+					<i id="mutespeakertoggle" class="toggleSize las la-volume-up" style="position: relative; top: 0.5px;"></i>
 				</div>
 				<div id="mutebutton" onmousedown="toggleMute(false, event);event.preventDefault(); event.stopPropagation();"  alt="Mute the Mic" aria-label="Mute Microphone" title="Mute the Mic" ontouchstart="toggleMute(false, event);event.preventDefault(); event.stopPropagation();" tabindex="18" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);"  class="hidden float" style="cursor: pointer;">
-					<i id="mutetoggle" class="toggleSize las la-microphone my-float" style="position: relative; top: 0.5px;"></i>
+					<i id="mutetoggle" class="toggleSize las la-microphone" style="position: relative; top: 0.5px;"></i>
 				</div>
 				<div id="mutevideobutton" onmousedown="event.preventDefault(); event.stopPropagation();"  title="Disable the Camera" alt="Disable the Camera" aria-label="Mute Camera" onclick="toggleVideoMute()"   tabindex="19" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);"  class="hidden float" style="cursor: pointer;">
-					<i id="mutevideotoggle" onmousedown="event.preventDefault(); event.stopPropagation();"  class="toggleSize las la-video my-float"></i>
+					<i id="mutevideotoggle" onmousedown="event.preventDefault(); event.stopPropagation();"  class="toggleSize las la-video"></i>
 				</div>
 				<div id="screensharebutton" onmousedown="event.preventDefault(); event.stopPropagation();"  title="Share a Screen with others" alt="Share a Screen with others" aria-label="Share a screen" onclick="screenshareTypeDecider(1)" tabindex="20" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);"  class="float hidden task" data-menu="context-menu-screen-share" style="cursor: pointer;">
-					<i id="screensharetoggle" onmousedown="event.preventDefault(); event.stopPropagation();"  class="toggleSize las la-desktop my-float"></i>
+					<i id="screensharetoggle" onmousedown="event.preventDefault(); event.stopPropagation();"  class="toggleSize las la-desktop"></i>
 				</div>
 				<div id="screenshare2button" onmousedown="event.preventDefault(); event.stopPropagation();"  title="Add a Screen Share" alt="Add a Screen Share" aria-label="Share a screen"  onclick="screenshareTypeDecider(2)" tabindex="20" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);"  class="float hidden task" data-menu="context-menu-screen-share"  style="cursor: pointer;">
-					<i id="screenshare2toggle" onmousedown="event.preventDefault(); event.stopPropagation();"  class="toggleSize las  la-tv my-float"></i>
+					<i id="screenshare2toggle" onmousedown="event.preventDefault(); event.stopPropagation();"  class="toggleSize las  la-tv"></i>
 				</div>
 				<div id="screenshare3button" onmousedown="event.preventDefault(); event.stopPropagation();"  title="Share a Screen with others" alt="Add a Screen Share" aria-label="Share a screen"  onclick="screenshareTypeDecider(3)" tabindex="20" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);"  class="float hidden task" data-menu="context-menu-screen-share"  style="cursor: pointer;">
-					<i id="screenshare3toggle" onmousedown="event.preventDefault(); event.stopPropagation();"  class="toggleSize las  la-tv my-float"></i>
+					<i id="screenshare3toggle" onmousedown="event.preventDefault(); event.stopPropagation();"  class="toggleSize las  la-tv"></i>
 				</div>
 				<div id="websitesharebutton" onmousedown="event.preventDefault(); event.stopPropagation();"  title="Share a website with your guests (IFRAME)" aria-label="Share a website" alt="Share a website with your guests (IFRAME)" onclick="shareWebsite(false, event)" tabindex="21" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);"  class="float hidden" style="cursor: pointer;">
-					<i id="websitesharetoggle" onmousedown="event.preventDefault(); event.stopPropagation();"  class="toggleSize las la-window-maximize my-float"></i>
+					<i id="websitesharetoggle" onmousedown="event.preventDefault(); event.stopPropagation();"  class="toggleSize las la-window-maximize"></i>
 				</div>
 				<div id="websitesharebutton2" onmousedown="event.preventDefault(); event.stopPropagation();" title="Hold CTRL (or CMD) and click to spotlight this video" alt="Share a website as an embedded iFRAME" aria-label="Share a website" onclick="shareWebsite(false, event)" tabindex="21" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" class="float2 orange shake hidden" style="cursor: pointer;max-width: 200px;margin: auto;padding: 0 10px;">
-					<i onmousedown="event.preventDefault(); event.stopPropagation();" class="toggleSize las my-float la-window-close" style="display: inline-block;"></i>
+					<i onmousedown="event.preventDefault(); event.stopPropagation();" class="toggleSize las la-window-close" style="display: inline-block;"></i>
 					<div style="display: inline-block;width: 85px;line-height: 1; font-size: 0.9em;">
 						Stop Sharing Website
 					</div>
 				</div>
 				<div id="fullscreenPage" onmousedown="event.preventDefault(); event.stopPropagation();"  title="Full-screen the page" alt="Full-screen the page" aria-label="Full screen"  onclick="fullscreenPageToggle()" tabindex="21" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);"  class="float hidden" style="cursor: pointer;">
-					<i id="fullscreenPageToggle" onmousedown="event.preventDefault(); event.stopPropagation();"  class="toggleSize las la-expand-arrows-alt my-float"></i>
+					<i id="fullscreenPageToggle" onmousedown="event.preventDefault(); event.stopPropagation();"  class="toggleSize las la-expand-arrows-alt"></i>
 				</div>
 				<div id="flipcamerabutton" onmousedown="event.preventDefault(); event.stopPropagation();"  title="Cycle the Cameras"  onclick="cycleCameras()" class="hidden float"  tabindex="21" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" style="cursor: pointer;" aria-label="Cycle Cameras" alt="Cycle the Cameras">
-					<i id="settingstoggle" class="toggleSize las la-sync-alt my-float"></i> 
+					<i id="settingstoggle" class="toggleSize las la-sync-alt"></i> 
 				</div>
 				
 				<div id="obscontrolbutton" onmousedown="event.preventDefault(); event.stopPropagation();"  title="OBS Remote Controller; start/stop and change scenes." onclick="toggleOBSControls();" class="hidden float"  tabindex="22" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" style="cursor: pointer;" aria-label="Remote OBS control menu" alt="Toggle the Remote OBS Controls Menu">
-					<i id="obscontroltoggle" class="toggleSize las la-gamepad my-float"></i>
+					<i id="obscontroltoggle" class="toggleSize las la-gamepad"></i>
 				</div>
 				
 				<div id="roomsettingsbutton" onmousedown="event.preventDefault(); event.stopPropagation();"  title="Room Settings" onclick="toggleRoomSettings();" class="hidden float"  tabindex="22" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" style="cursor: pointer;" alt="Toggle the Room Settings Menu" aria-label="Room settings menu">
-					<i id="roomsettingstoggle" class="toggleSize las la-users-cog my-float"></i>
+					<i id="roomsettingstoggle" class="toggleSize las la-users-cog"></i>
 				</div>
 				
 				<div id="settingsbutton" onmousedown="event.preventDefault(); event.stopPropagation();"  title="Your audio and video Settings"  onclick="toggleSettings()" class="hidden float"  tabindex="22" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" style="cursor: pointer;" alt="Toggle Settings Menu" aria-label="Settings menu">
-					<i id="settingstoggle" class="toggleSize las la-cog my-float"></i>
+					<i id="settingstoggle" class="toggleSize las la-cog"></i>
 				</div>
 				
 				<div id="hangupbutton"  onmousedown="event.preventDefault(); event.stopPropagation();" title="Hangup the Call" aria-label="Hang up" alt="Hangup the Call" onclick="hangup()" class="hidden float"  tabindex="23" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" style="cursor: pointer;" >
-					<i class="toggleSize my-float las la-phone rotate225" aria-hidden="true"></i>
+					<i class="toggleSize las la-phone rotate225" aria-hidden="true"></i>
 				</div>
 				<div id="raisehandbutton" onmousedown="event.preventDefault(); event.stopPropagation();"  data-raised="0" title="Alert the host you want to speak"  aria-label="Raise hand" alt="Alert the host you want to speak" tabindex="24" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" onclick="raisehand()" class="hidden float" style="cursor: pointer;">
-					<i class="toggleSize my-float las la-hand-paper" style="position: relative; right: 1px;" aria-hidden="true"></i>
+					<i class="toggleSize las la-hand-paper" style="position: relative; right: 1px;" aria-hidden="true"></i>
 				</div>
 				
 				<div id="pptbackbutton" onmousedown="event.preventDefault(); event.stopPropagation();" title="Go back a slide" aria-label="Back a slide" alt="Go back a slide" tabindex="25" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" onclick="gobackSlide()" class="hidden float red" style="cursor: pointer;">
-					<i class="toggleSize my-float las la-chevron-left" style="position: relative; right: 1px;" aria-hidden="true"></i>
+					<i class="toggleSize las la-chevron-left" style="position: relative; right: 1px;" aria-hidden="true"></i>
 				</div>
 				<div id="pptnextbutton" onmousedown="event.preventDefault(); event.stopPropagation();" title="Next slide" aria-label="Next slide" alt="Next slide" tabindex="25" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" onclick="nextSlide()" class="hidden float" style="cursor: pointer;">
-					<i class="toggleSize my-float las la-chevron-right" style="position: relative; right: 1px;" aria-hidden="true"></i>
+					<i class="toggleSize las la-chevron-right" style="position: relative; right: 1px;" aria-hidden="true"></i>
 				</div>
 				
 				<div id="recordLocalbutton" onmousedown="event.preventDefault(); event.stopPropagation();"  data-state="0" title="Record your stream to disk" aria-label="Record your stream to disk" alt="Record your stream to disk" tabindex="25" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" onclick="recordLocalVideoToggle();" class="hidden float" style="cursor: pointer;">
-					<i class="toggleSize my-float las la-dot-circle" style="position: relative;" aria-hidden="true"></i>
+					<i class="toggleSize las la-dot-circle" style="position: relative;" aria-hidden="true"></i>
 				</div>
 				<div id="recordLocalScreenbutton" onmousedown="event.preventDefault(); event.stopPropagation();"  data-state="0" title="Stop screen share recording" aria-label="Stop screen share recording" alt="Stop screen recording" tabindex="25" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" onclick="recordLocalScreenStopRecord();" class="hidden float" style="cursor: pointer;">
 					<small>Stop<br>Screen<br>Record</small>
@@ -224,7 +224,7 @@
 				<span id="rooms" class="hidden" style="padding-top:3px;padding-left:6px;pointer-events: auto;color:#fff;"></span>
 				<span id="groups" class="hidden" style="padding-top:3px;padding-left:6px;pointer-events: auto;color:#fff;text-align: center;"></span>
 				<div id="hangupbutton2" onmousedown="event.preventDefault(); event.stopPropagation();"  title="Cancel the Director's Video/Audio"  onclick="hangup2()" class="hidden float"  tabindex="26" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" style="cursor: pointer;" aria-label="stop publishing audio and video" alt="Disconnect Direcotor's cam">
-					<i class="toggleSize my-float las la-phone rotate225" aria-hidden="true"></i>
+					<i class="toggleSize las la-phone rotate225" aria-hidden="true"></i>
 				</div>
 			</div>
 		</div>
diff --git a/lib.js b/lib.js
index 132b925..6c3e1d5 100644
--- a/lib.js
+++ b/lib.js
@@ -10305,7 +10305,7 @@ function toggleMute(apply = false, event=false) { // TODO: I need to have this b
 	
 	if (session.muted == false) {
 		session.muted = true;
-		getById("mutetoggle").className = "las la-microphone-slash my-float toggleSize";
+		getById("mutetoggle").className = "las la-microphone-slash toggleSize";
 		if (!(session.cleanOutput)){
 			getById("mutebutton").classList.remove("float"); 
 			getById("mutebutton").classList.add("float2"); 
@@ -10331,7 +10331,7 @@ function toggleMute(apply = false, event=false) { // TODO: I need to have this b
 
 	} else {
 		session.muted = false;
-		getById("mutetoggle").className = "las la-microphone my-float toggleSize";
+		getById("mutetoggle").className = "las la-microphone toggleSize";
 		if (!(session.cleanOutput)){
 			
 			getById("mutebutton").classList.add("float"); 
@@ -10396,7 +10396,7 @@ function toggleSpeakerMute(apply = false) { // TODO: I need to have this be MUTE
 	}
 	if (session.speakerMuted == false) { // mute output
 		session.speakerMuted = true;
-		getById("mutespeakertoggle").className = "las la-volume-mute my-float toggleSize";
+		getById("mutespeakertoggle").className = "las la-volume-mute toggleSize";
 		if (!(session.cleanOutput)){
 			getById("mutespeakerbutton").className = "float2 red";
 		}
@@ -10416,7 +10416,7 @@ function toggleSpeakerMute(apply = false) { // TODO: I need to have this be MUTE
 	} else {
 		session.speakerMuted = false;  // unmute output
 
-		getById("mutespeakertoggle").className = "las la-volume-up my-float toggleSize";
+		getById("mutespeakertoggle").className = "las la-volume-up toggleSize";
 		if (!(session.cleanOutput)){
 			getById("mutespeakerbutton").className = "float";
 		}
@@ -10512,13 +10512,13 @@ function toggleChat(event = null) { // TODO: I need to have this be MUTE, toggle
 			return false;
 		});
 		session.chat = true;
-		getById("chattoggle").className = "las la-comment-dots my-float toggleSize";
+		getById("chattoggle").className = "las la-comment-dots toggleSize";
 		getById("chatbutton").className = "float2";
 		getById("chatModule").style.display = "block";
 		getById("chatInput").focus(); // give it keyboard focus
 	} else {
 		session.chat = false;
-		getById("chattoggle").className = "las la-comment-alt my-float toggleSize";
+		getById("chattoggle").className = "las la-comment-alt toggleSize";
 		getById("chatbutton").className = "float";
 		getById("chatModule").style.display = "none";
 
@@ -10661,7 +10661,7 @@ function toggleVideoMute(apply = false) { // TODO: I need to have this be MUTE,
 	
 	if (session.videoMuted == false) {
 		session.videoMuted = true;
-		getById("mutevideotoggle").className = "las la-video-slash my-float toggleSize";
+		getById("mutevideotoggle").className = "las la-video-slash toggleSize";
 		if (!(session.cleanOutput)){
 			getById("mutevideobutton").className = "float2 red";
 			getById("header").classList.add("red2");
@@ -10676,7 +10676,7 @@ function toggleVideoMute(apply = false) { // TODO: I need to have this be MUTE,
 		}
 	} else if (session.remoteVideoMuted){  // the director has muted this guest's video feed
 		session.videoMuted = false; // just setting it back to the pre-toggled state
-		getById("mutevideotoggle").className = "las la-video my-float toggleSize";
+		getById("mutevideotoggle").className = "las la-video toggleSize";
 		if (!(session.cleanOutput)){
 			getById("head8").classList.remove("hidden");
 			getById("header").classList.add("red2");
@@ -10691,7 +10691,7 @@ function toggleVideoMute(apply = false) { // TODO: I need to have this be MUTE,
 	} else {
 		session.videoMuted = false;
 
-		getById("mutevideotoggle").className = "las la-video my-float toggleSize";
+		getById("mutevideotoggle").className = "las la-video toggleSize";
 		if (!(session.cleanOutput)){
 			getById("mutevideobutton").className = "float";
 			getById("header").classList.remove("red2");
@@ -10866,10 +10866,10 @@ function hangup2() {
 	getById("screensharebutton").classList.remove("float2");
 	
 	if (session.showDirector == false) {
-		getById("miniPerformer").innerHTML = '<button id="press2talk" onmousedown="event.preventDefault(); event.stopPropagation();" style="width:auto;margin-left:5px;height:45px;border-radius: 38px;" class="float" onclick="press2talk(true);" title="You can also enable the director`s Video Output afterwards by clicking the Setting`s button"><i class="las la-headset"></i><span data-translate="push-to-talk-enable"> enable director`s microphone or video<br />(only guests can see this feed)</span></button>';
+		getById("miniPerformer").innerHTML = '<button id="press2talk" onmousedown="event.preventDefault(); event.stopPropagation();" class="float" onclick="press2talk(true);" title="You can also enable the director`s Video Output afterwards by clicking the Setting`s button"><i class="las la-headset"></i><span data-translate="push-to-talk-enable"> enable director`s microphone or video<br />(only guests can see this feed)</span></button>';
 		miniTranslate(getById("miniPerformer"));
 	} else {
-		getById("miniPerformer").innerHTML = '<button id="press2talk" onmousedown="event.preventDefault(); event.stopPropagation();" style="width:auto;margin-left:5px;height:45px;border-radius: 38px;" class="float" onclick="press2talk(true);" title="You can also enable the director`s Video Output afterwards by clicking the Setting`s button"><i class="las la-headset"></i><span data-translate="push-to-talk-enable-2"> enable director`s microphone or video</span></button>';
+		getById("miniPerformer").innerHTML = '<button id="press2talk" onmousedown="event.preventDefault(); event.stopPropagation();" class="float" onclick="press2talk(true);" title="You can also enable the director`s Video Output afterwards by clicking the Setting`s button"><i class="las la-headset"></i><span data-translate="push-to-talk-enable-2"> enable director`s microphone or video</span></button>';
 	}
 	getById("miniPerformer").className = "";
 }
@@ -12033,12 +12033,12 @@ function blindAllGuests(ele, event=false){
 			ele.value = 0;
 			ele.classList.remove("pressed");
 			ele.classList.remove("red");
-			ele.innerHTML = '<i class="toggleSize las la-eye my-float"></i>';
+			ele.innerHTML = '<i class="toggleSize las la-eye"></i>';
 		} else {
 			ele.value = 1;
 			ele.classList.add("pressed");
 			ele.classList.add("red");
-			ele.innerHTML = '<i class="toggleSize las la-eye-slash my-float"></i>';
+			ele.innerHTML = '<i class="toggleSize las la-eye-slash"></i>';
 		}
 	}
 
@@ -15369,14 +15369,14 @@ async function createRoomCallback(passAdd, passAdd2) {
 		}
 		
 		if (session.showDirector == false) {
-			getById("miniPerformer").innerHTML = '<button id="press2talk" onmousedown="event.preventDefault(); event.stopPropagation();" style="width:auto;margin-left:5px;height:45px;border-radius: 38px;" class="float" onclick="press2talk(true);" title="You can also enable the director`s Video Output afterwards by clicking the Setting`s button"><i class="las la-headset"></i><span data-translate="push-to-talk-enable"> enable director`s microphone or video<br />(only guests can see this feed)</span></button>';
+			getById("miniPerformer").innerHTML = '<button id="press2talk" onmousedown="event.preventDefault(); event.stopPropagation();" class="float" onclick="press2talk(true);" title="You can also enable the director`s Video Output afterwards by clicking the Setting`s button"><i class="las la-headset"></i><span data-translate="push-to-talk-enable"> enable director`s microphone or video<br />(only guests can see this feed)</span></button>';
 			miniTranslate(getById("miniPerformer"));
 			getById("grabDirectorSoloLink").dataset.raw = "https://" + location.host + location.pathname + "?solo&sd&r=" + session.roomid + "&v="+session.streamID + passAdd2 + wss + token;
 			getById("grabDirectorSoloLink").href = "https://" + location.host + location.pathname + "?solo&sd&r=" + session.roomid + "&v="+session.streamID  + passAdd2 + wss + token;
 			getById("grabDirectorSoloLink").innerText = "https://" + location.host + location.pathname + "?solo&sd&r=" + session.roomid + "&v="+session.streamID  + passAdd2 + wss + token;
 			getById("grabDirectorSoloLinkParent").classList.remove("hidden");
 		} else {
-			getById("miniPerformer").innerHTML = '<button id="press2talk" onmousedown="event.preventDefault(); event.stopPropagation();" style="width:auto;margin-left:5px;height:45px;border-radius: 38px;" class="float" onclick="press2talk(true);" title="You can also enable the director`s Video Output afterwards by clicking the Setting`s button"><i class="las la-headset"></i><span data-translate="push-to-talk-enable-2"> enable director`s microphone or video</span></button>';
+			getById("miniPerformer").innerHTML = '<button id="press2talk" onmousedown="event.preventDefault(); event.stopPropagation();" class="float" onclick="press2talk(true);" title="You can also enable the director`s Video Output afterwards by clicking the Setting`s button"><i class="las la-headset"></i><span data-translate="push-to-talk-enable-2"> enable director`s microphone or video</span></button>';
 		}
 		getById("miniPerformer").className = "";
 		
@@ -22732,7 +22732,7 @@ function addDownloadLink(fileList, UUID, pc){
 	}
 
 	if (session.chat == false) {
-		getById("chattoggle").className = "las la-comments my-float toggleSize puslate";
+		getById("chattoggle").className = "las la-comments toggleSize puslate";
 		getById("chatbutton").className = "float";
 
 		if (getById("chatNotification").value) {
@@ -29433,7 +29433,7 @@ function getChatMessage(msg, label = false, director = false, overlay = false) {
 	updateMessages();
 
 	if (session.chat == false) {
-		getById("chattoggle").className = "las la-comments my-float toggleSize puslate";
+		getById("chattoggle").className = "las la-comments toggleSize puslate";
 		getById("chatbutton").className = "float";
 
 		if (getById("chatNotification").value) {
@@ -30173,7 +30173,7 @@ function recordLocalVideoToggle() {
 	if (ele.dataset.state == "0") {
 		ele.dataset.state = "1";
 		ele.style.backgroundColor = "red";
-		ele.innerHTML = '<i class="toggleSize my-float las la-square" ></i>';
+		ele.innerHTML = '<i class="toggleSize las la-square" ></i>';
 		if ("recording" in session.videoElement) {
 
 		} else {
@@ -30194,7 +30194,7 @@ function recordLocalVideoToggle() {
 		}
 		ele.dataset.state = "0";
 		ele.style.backgroundColor = "";
-		ele.innerHTML = '<i class="toggleSize my-float las la-dot-circle" ></i>';
+		ele.innerHTML = '<i class="toggleSize las la-dot-circle" ></i>';
 		
 		if (session.director){
 			var elements = document.querySelectorAll('[data-action-type="recorder-local"][data-sid="' + session.streamID + '"]');
@@ -30339,7 +30339,7 @@ function recordLocalVideo(action = null, videoKbps = 6000, remote=false) { // ev
 			if (remote){
 				getById("recordLocalbutton").dataset.state = "1";
 				getById("recordLocalbutton").style.backgroundColor = "red";
-				getById("recordLocalbutton").innerHTML = '<i class="toggleSize my-float las la-square" ></i>';
+				getById("recordLocalbutton").innerHTML = '<i class="toggleSize las la-square" ></i>';
 			}
 			return;
 		} else {
@@ -30369,7 +30369,7 @@ function recordLocalVideo(action = null, videoKbps = 6000, remote=false) { // ev
 		if (remote){
 			getById("recordLocalbutton").dataset.state = "1";
 			getById("recordLocalbutton").style.backgroundColor = "red";
-			getById("recordLocalbutton").innerHTML = '<i class="toggleSize my-float las la-square" ></i>';
+			getById("recordLocalbutton").innerHTML = '<i class="toggleSize las la-square" ></i>';
 		}
 	} else if (action == "stop") {
 		return;
@@ -30377,7 +30377,7 @@ function recordLocalVideo(action = null, videoKbps = 6000, remote=false) { // ev
 		if (!remote){
 			getById("recordLocalbutton").dataset.state = "1";
 			getById("recordLocalbutton").style.backgroundColor = "red";
-			getById("recordLocalbutton").innerHTML = '<i class="toggleSize my-float las la-square" ></i>';
+			getById("recordLocalbutton").innerHTML = '<i class="toggleSize las la-square" ></i>';
 		}
 		video.recording = true;
 	}
@@ -30419,17 +30419,17 @@ function recordLocalVideo(action = null, videoKbps = 6000, remote=false) { // ev
 				if (getById("recordLocalbutton").dataset.state == 2) {
 					getById("recordLocalbutton").dataset.state = "0";
 					getById("recordLocalbutton").style.backgroundColor = "";
-					getById("recordLocalbutton").innerHTML = '<i class="toggleSize my-float las la-exclamation" ></i>';
+					getById("recordLocalbutton").innerHTML = '<i class="toggleSize las la-exclamation" ></i>';
 					restart = false;
 					warnUser("Media Recording Stopped due to an error.");
 				} else {
-					getById("recordLocalbutton").innerHTML = '<i class="toggleSize my-float las la-spinner" ></i>';
+					getById("recordLocalbutton").innerHTML = '<i class="toggleSize las la-spinner" ></i>';
 					getById("recordLocalbutton").dataset.state = "2";
 				}
 			} else {
 				getById("recordLocalbutton").dataset.state = "0";
 				getById("recordLocalbutton").style.backgroundColor = "";
-				getById("recordLocalbutton").innerHTML = '<i class="toggleSize my-float las la-dot-circle" ></i>';
+				getById("recordLocalbutton").innerHTML = '<i class="toggleSize las la-dot-circle" ></i>';
 				if (notify){
 					if (!session.cleanOutput){
 						warnUser("A recording has stopped unexpectedly.");
@@ -30996,7 +30996,7 @@ function changeGroupDirectorAPI(group, state=null, update=true){
 		ele.classList.add('float');
 		ele.style.display = "inline-block";
 		ele.role = "button";
-		ele.innerHTML = '<i class="my-float las la-users" aria-hidden="true"></i><br />'+group;
+		ele.innerHTML = '<i class="las la-users" aria-hidden="true"></i><br />'+group;
 		eleGroup.appendChild(ele);
 		ele.onclick = function(){
 			changeGroupDirectorAPI(this.dataset.group);
diff --git a/main.css b/main.css
index 3c6304b..56833f3 100644
--- a/main.css
+++ b/main.css
@@ -1,5 +1,6 @@
 :root {
     /* Discord Greys - Dark to Lighter */
+    --discord-grey-0: #121212;
     --discord-grey-1: #1e1f22;
     --discord-grey-2: #232428;
     --discord-grey-3: #2b2d31;
@@ -62,8 +63,12 @@
 	color: #FFF;
 }
 
-button:hover,[role="button"]:not(.column):hover{
-	filter: brightness(90%);
+button:hover,[role="button"]
+:not(.column)
+:not(.controlsGrid)
+:not(#controlButtons)
+:hover{
+	filter: brightness(120%);
 }
 
 table {
@@ -246,6 +251,9 @@ button.hint {
 .red {
 	background-color: #840000 !important;
 }
+.red:hover {
+	background-color: #b30c0c !important;
+}
 
 .red2 {
 	background-color: #840000 !important;
@@ -1154,33 +1162,54 @@ button.glyphicon-button.active.focus {
 }
 
 #controlButtons {
-	position: fixed;
-	z-index: 995;
-	bottom: 0px;
-	width: 100%;
-	justify-content: center;
-	align-items: center;
-	height: 60px;
-	border: 0;
-	pointer-events: none;
-	display: flex;
+    display: flex;
+    position: fixed;
+    z-index: 995;
+    bottom: 0px;
+    width: 100%;
+    justify-content: center;
+    align-items: center;
+    height: 60px;
+    border: 0;
+    pointer-events: none;
 }
 #controlButtons:empty {
 	display: none;
 }
 
 #subControlButtons {
-	display: flex;
-	border-radius: 38px;
-	background-color: #030303dd;
-	padding: 5px 7px;
-	position: absolute;
-	pointer-events: auto;
+    display: flex;
+    border-radius: 38px;
+    background-color: var(--discord-grey-0);
+    box-shadow: 0px 0px 10px rgba(0,0,0,1);
+    top: -10px;
+    position: absolute;
+    pointer-events: auto;
+    border: #cccccc22 1px solid;
+    border-radius: 10px;
 }
+
 #subControlButtons:empty{
 	display:none;
 }
 
+#subControlButtons div {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--discord-grey-1);
+    opacity: unset;
+    border-radius: 8px;
+    transition: border-radius 200ms ease-in-out;
+    box-shadow: 1px 1px 3px rgba(0,0,0,0.75);
+}
+
+#subControlButtons div:hover {
+    background-color: var(--discord-grey-3);
+    border-radius: 4px;
+}
+
+
 #container.vidcon {
 	height:100%;
 }
@@ -2289,9 +2318,10 @@ span[data-action-type="stats-graphs-details-container"]>span{
 	opacity: 0.8;
 	min-width: 45px;
 	height: 45px;
-	background-color: #6666;
+	background-color: #66b16a66;
+    box-shadow: 1px 1px 3px rgba(0,0,0,0.75);
 	color: #FFF;
-	border-radius: 38px;
+	border-radius: 8px;
 	text-align: center;
 	margin: 5px;
 	pointer-events: auto;
@@ -2302,6 +2332,7 @@ span[data-action-type="stats-graphs-details-container"]>span{
 	min-width: 45px;
 	height: 45px;
 	background-color: #8888;
+    box-shadow: 1px 1px 3px rgba(0,0,0,0.75);
 	color: #FFF;
 	border-radius: 38px;
 	text-align: center;
@@ -2367,19 +2398,10 @@ iframe {
 
 .popup .menu { margin: 2px; }
 
-.my-float {
-	margin-top: 7px;
-	opacity: 0.9;
-}
 .toggleSize {
 	font-size: 32px;
 	color: white;
 }
-.controlsGrid-1x1 {
-	margin-left: auto;
-    margin-right: 0;
-    text-align: right;
-}
 
 img {
 	max-width: 100%;
@@ -3571,6 +3593,8 @@ div#roomnotes2 {
     gap: 2px;
 }
 
+.controlsGrid
+
 .controlsGrid button i {
     font-size: 15px;
 }
@@ -3616,7 +3640,6 @@ div#roomnotes2 {
     max-width: 100%;
 }
 
-
 .darktheme .controlsGrid .director-message-box textarea {
     background-color: var(--discord-grey-4);
     color: var(--discord-text);
diff --git a/main.js b/main.js
index f70ef30..31a2840 100644
--- a/main.js
+++ b/main.js
@@ -888,7 +888,7 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
 		session.speakerMuted_default = session.speakerMuted;
 		
 		if (session.speakerMuted){
-			getById("mutespeakertoggle").className = "las la-volume-mute my-float toggleSize";
+			getById("mutespeakertoggle").className = "las la-volume-mute toggleSize";
 			//getById("mutespeakerbutton").className="hidden float2 red";
 			getById("mutespeakerbutton").classList.add("red");
 			getById("mutespeakerbutton").classList.add("float2");
@@ -4557,7 +4557,7 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
 						ele.classList.add('float');
 						ele.style.display = "inline-block";
 						ele.role = "button";
-						ele.innerHTML = '<i class="my-float las la-users" aria-hidden="true"></i><br />'+group;
+						ele.innerHTML = '<i class="las la-users" aria-hidden="true"></i><br />'+group;
 						eleGroup.appendChild(ele);
 						ele.onclick = function(){
 							changeGroupDirectorAPI(this.dataset.group);