diff --git a/copyparty/web/browser.css b/copyparty/web/browser.css
index 01ac339a..9bb8762f 100644
--- a/copyparty/web/browser.css
+++ b/copyparty/web/browser.css
@@ -1641,6 +1641,8 @@ html.b #music {
 #mu_inner {
 	align-content: center;
 	text-align: center;
+	position: relative;
+	width: 100%;
 }
 #mu_th {
 	cursor: default !important;
@@ -3943,6 +3945,11 @@ html.e #wrap.thin {
 		pointer-events: none;
 		box-shadow: 0 0 .5em var(--mp-sh);
 	}
+	#music #pvol {
+		position: absolute;
+		bottom: 3.5em;
+		right: -1.7em;
+	}
 	#pvolbg:hover #pvol {
 		display: block;
 		opacity: 1;
@@ -3979,6 +3986,15 @@ html.e #wrap.thin {
 		top: 5px;
 		right: 5px;
 	}
+	#music {
+		padding: 1em;
+	}
+	#mu_pbb {
+		width: 100%;
+	}
+	#mu_inner {
+		margin: -.5em;
+	}
 }
 
 @media (max-width: 40em) {
diff --git a/copyparty/web/browser.html b/copyparty/web/browser.html
index ee5152da..cc46e984 100644
--- a/copyparty/web/browser.html
+++ b/copyparty/web/browser.html
@@ -178,8 +178,9 @@
 		</div>
 
 		<div id="music" class="modal">
-			<a id="h_music" class="modalheader" href="#">💿 Music Player</a>
 			<div id="mu_inner">
+				<a id="h_music" class="modalheader" href="#">💿 Music Player</a>
+				
 				<a id="mu_th">
 					<svg class="thumb" width="100%" height="100%" version="1.1">
 						<use href="#file-icon"/>
@@ -192,10 +193,11 @@
 				<div id="mu_pbb"></div>			
 				<div id="mu_pbc" class="pctl"></div>			
 				<div id="mu_toggles"></div>				
-				<div id="mu_vol"></div>				
+				<div id="mu_vol"></div>	
+
+				<a id="cfg_mu" class="btn" href="#h_mp">⚙️</a>
+				<a id="cl_mu" class="close btn">✕</a>	
 			</div>
-			<a id="cfg_mu" class="btn" href="#h_mp">⚙️</a>
-			<a id="cl_mu" class="close btn">✕</a>
 		</div>
 
 		<!-- define symbol in hidden svg document -->