diff --git a/copyparty/web/baguettebox.js b/copyparty/web/baguettebox.js
index 51117efc..62b4fe9e 100644
--- a/copyparty/web/baguettebox.js
+++ b/copyparty/web/baguettebox.js
@@ -1233,9 +1233,7 @@ window.baguetteBox = (function () {
     }
 
     function show_buttons(v) {
-        clmod(ebi('bbox-btns'), 'off', v);
-        clmod(btnPrev, 'off', v);
-        clmod(btnNext, 'off', v);
+        clmod(ebi('bbox-overlay'), 'immersive', v);
     }
 
     function bounceAnimation(direction) {
@@ -1297,11 +1295,11 @@ window.baguetteBox = (function () {
                 x = e.clientX - rc.left,
                 fx = x / (rc.right - rc.left);
 
-            if (fx < 0.3)
-                return showLeftImage();
+            // if (fx < 0.3)
+            //     return showLeftImage();
 
-            if (fx > 0.7)
-                return showRightImage();
+            // if (fx > 0.7)
+            //     return showRightImage();
 
             show_buttons('t');
 
diff --git a/copyparty/web/browser.css b/copyparty/web/browser.css
index fcfdfbc8..effbe400 100644
--- a/copyparty/web/browser.css
+++ b/copyparty/web/browser.css
@@ -1411,6 +1411,9 @@ html.y #widget.open {
 	height: .5em;
 	aspect-ratio: 8;
 	background: rgba(0,0,0,0.2);
+	border: 1px solid var(--bg-u1);
+	margin-left: .3em;
+	transition: opacity .15s;
 }
 #pvolbg {
 	height: 100%;
@@ -1421,7 +1424,6 @@ html.y #widget.open {
 }
 #pvolbg svg {
 	height: 1.3em;
-	margin-right: .3em;
 }
 #widget.cmp #wtoggle {
 	font-size: 1.2em;
@@ -2286,7 +2288,7 @@ html.noscroll .sbar::-webkit-scrollbar {
 	flex: none;
 }
 .full-image figure {
-	display: inline;
+	display: inline-block;
 	margin: 0;
 	height: 100%;
 }
@@ -2298,8 +2300,6 @@ html.noscroll .sbar::-webkit-scrollbar {
 	height: auto;
 	max-width: 100%;
 	max-height: 100%;
-	max-height: calc(100% - 1.4em);
-	margin-bottom: 1.4em;
 	vertical-align: middle;
 	transition: transform .23s, left .23s, top .23s, width .23s, height .23s;
 }
@@ -2340,6 +2340,10 @@ html.bb_fsc figcaption {
 	white-space: normal;
 	color: var(--fg);
 	z-index: 1;
+	transition: opacity .15s;
+}
+#bbox-overlay.immersive figcaption {
+	opacity: 0;
 }
 #bbox-overlay figcaption a {
 	background: rgba(0, 0, 0, 0.6);
@@ -2393,7 +2397,7 @@ html.y #bbox-overlay figcaption a {
 	top: calc(50% - 30px);
 	width: 44px;
 	height: 60px;
-	transition: background-color .3s ease, color .3s ease, left .3s ease, right .3s ease;
+	transition: background-color .3s ease, color .3s ease, opacity .3s ease;
 }
 #bbox-btns button {
 	transition: background-color .3s ease, color .3s ease;
@@ -2404,13 +2408,11 @@ html.y #bbox-overlay figcaption a {
 .bbox-btn {
 	position: fixed;
 }
-#bbox-next.off {
-	right: -2.6em;
+#bbox-overlay.immersive #bbox-next,
+#bbox-overlay.immersive #bbox-prev {
+	opacity: 0;
 }
-#bbox-prev.off {
-	left: -2.6em;
-}
-#bbox-btns.off {
+#bbox-overlay.immersive #bbox-btns {
 	top: -2.8em;
 }
 #bbox-overlay button {
@@ -2427,6 +2429,9 @@ html.y #bbox-overlay figcaption a {
 	vertical-align: top;
 	font-variant: small-caps;
 }
+#bbox-overlay button:hover {
+	opacity: 1 !important;
+}
 #bbox-overlay button:focus,
 #bbox-overlay button:hover {
 	color: rgba(255,255,255,0.9);
@@ -3454,6 +3459,22 @@ html.d #treepar {
 	#pctl {
 		padding: .2em .5em .5em .5em;
 	}
+	#pvol {
+		border: .7em solid var(--bg-u3);
+		transform: rotate(-90deg);
+		position: fixed;
+		bottom: 4.3em;
+		right: -.7em;
+		opacity: 0;
+		pointer-events: none;
+		box-shadow: 0 0 .5em var(--mp-sh);
+	}
+	#pvolbg:hover #pvol {
+		display: block;
+		opacity: 1;
+		pointer-events: all;
+	}
+
 }
 @media (max-width: 32em) {
 	#u2conf {
diff --git a/copyparty/web/browser.js b/copyparty/web/browser.js
index 417ce853..f7b24962 100644
--- a/copyparty/web/browser.js
+++ b/copyparty/web/browser.js
@@ -1331,7 +1331,7 @@ function goto(dest) {
 		var modal = ebi(dest);
 		if(modal != null)
 			clmod(modal, 'vis', true);
-		
+
 		var page = ebi('op_' + dest) ?? QS('#' + dest + ' .opview')
 		clmod(page, 'act', 1);
 		clmod(lnk, 'act', 1);
@@ -2538,8 +2538,15 @@ var vbar = (function () {
 	onresize100.add(r.onresize, true);
 
 	var rect;
+	var cs;
+	var left, top, width, height;
 	function mousedown(e) {
 		rect = can.getBoundingClientRect();
+		cs = getComputedStyle(ebi('pvol'));
+		top = rect.top + parseFloat(cs.borderTopWidth);
+		left = rect.left + parseFloat(cs.borderLeftWidth);
+		height = rect.height - 2 * parseFloat(cs.borderTopWidth);
+		width = rect.width - 2 * parseFloat(cs.borderLeftWidth);
 		mousemove(e);
 	}
 	function mousemove(e) {
@@ -2551,8 +2558,14 @@ var vbar = (function () {
 			return;
 		}
 
-		var x = e.clientX - rect.left,
-			mul = x * 1.0 / rect.width;
+		var x = e.clientX - left,
+			mul = x * 1.0 / width;
+
+		if(height > width) {
+			// vertical
+			var y = e.clientY - top;
+			mul = 1 - y * 1.0 / height;
+		}
 
 		if (mul > 0.98)
 			mul = 1;