diff --git a/copyparty/httpcli.py b/copyparty/httpcli.py
index 6166fc89..fd3802b5 100644
--- a/copyparty/httpcli.py
+++ b/copyparty/httpcli.py
@@ -6989,6 +6989,7 @@ class HttpCli(object):
         zi = vn.flags["du_iwho"]
         h1 = ""
         h2 = ""
+        space_used_percent = 0
         if zi and (
             zi == 9
             or (zi == 7 and self.uname != "*")
@@ -7016,6 +7017,8 @@ class HttpCli(object):
                 h1 = humansize(free or 0)
                 h2 = humansize(total)
                 srv_info.append("{} free of {}".format(h1, h2))
+                if(total > 0):
+                    space_used_percent = (total - (free or 0)) / total * 100
             elif zs:
                 self.log("diskfree(%r): %s" % (abspath, zs), 3)
 
@@ -7066,9 +7069,9 @@ class HttpCli(object):
             "files": [],
             "taglist": [],
             "srvinf": srv_infot,
-            "space_free": float(h1.split()[0]),
-            "space_total": float(h2.split()[0]),
-            "space_unit": h2.split()[1],
+            "space_used_percent": space_used_percent,
+            "space_free": h1,
+            "space_total": h2,
             "acct": self.uname,
             "perms": perms,
             "cfg": vn.js_ls,
@@ -7093,9 +7096,9 @@ class HttpCli(object):
             "title": html_escape("%s %s" % (self.args.bname, self.vpath), crlf=True),
             "srv_info": srv_infot,
             "srv_name": srv_name,
-            "space_free": float(h1.split()[0]),
-            "space_total": float(h2.split()[0]),
-            "space_unit": h2.split()[1],
+            "space_used_percent": space_used_percent,
+            "space_free": h1,
+            "space_total": h2,
             "dtheme": self.args.theme,
         }
 
diff --git a/copyparty/web/browser.css b/copyparty/web/browser.css
index b4b75f2b..b8032491 100644
--- a/copyparty/web/browser.css
+++ b/copyparty/web/browser.css
@@ -1434,7 +1434,7 @@ html.y #ops svg circle {
 }
 #headerArea{
 	display: flex;
-	margin: .2em;
+	margin: .5em .5em -.5em .5em;
 }
 .hamburger_line{
 	height: .2em;
@@ -1652,7 +1652,7 @@ input.ssconf_v {
 	overscroll-behavior-y: none;
 	box-shadow: 0 0 1em var(--bg-d2), 0 -1px 0 rgba(128,128,128,0.3);
 	border: 1px solid var(--bg-u3);
-	transition: .15s;
+	transition: width 0.15s;
 }
 #tree,
 html {
@@ -1820,8 +1820,9 @@ html.y #tree.nowrap .ntree a+a:hover {
 	color: var(--fg-max);
 }
 #docul a:hover,
+.popup_button:hover,
 #tree .ntree a+a:hover {
-	background: var(--bg-d2);
+	background: var(--btn-h-bg);
 	color: var(--fg-max);
 }
 .ntree a:first-child {
@@ -2363,14 +2364,14 @@ html.y #bbox-overlay figcaption a {
 #bbox-overlay button {
 	cursor: pointer;
 	outline: none;
-	padding: 0 .3em;
-	margin: 0 .4em;
+	padding: 0 .4em;
+	margin: 0 .2em;
 	border: 0;
 	border-radius: 15%;
 	background: rgba(50, 50, 50, 0.5);
 	color: rgba(255,255,255,0.7);
 	font-size: 1.4em;
-	line-height: 1.4em;
+	line-height: 2em;
 	vertical-align: top;
 	font-variant: small-caps;
 }
@@ -2387,7 +2388,7 @@ html.y #bbox-overlay figcaption a {
 }
 #bbox-btns {
 	top: .5em;
-	right: 2%;
+	right: .5em;
 	position: fixed;
 }
 #bbox-halp {
@@ -2459,6 +2460,73 @@ html.y #bbox-overlay figcaption a {
 
 
 
+
+/* settings css */
+#s_content{
+	display: grid;
+  	grid-template-rows: auto auto;
+	margin: 5%;
+	border-radius: .5em;
+	border: var(--a) solid 1px;
+	background: var(--bg-u1);
+	max-width: 60em;
+	position: relative;
+}
+#s_header{
+	margin: .5em;
+}
+#s_hor{
+	display: grid;
+  	grid-template-columns: auto auto auto;
+	min-height: 0;
+}
+#s_nav, #s_list{
+	display: flex;
+	flex-direction: column;
+	overflow-y: scroll;
+	padding: .5em;
+	padding-top: 0;
+}
+#s_divider{
+	background: var(--a);
+	width: 1px;
+	margin: 1em .5em;
+}
+#s_nav .btn::after{
+	position: absolute;
+	content: ">";
+	right: .5em;
+}
+#s_nav .btn,
+#s_list{
+	padding-right: 2em;
+}
+.setting{
+	padding: .5em;
+	border: var(--bg-u5) solid 1px;
+	border-top: 0;
+	margin: -1.5em 0 1.5em 0;
+}
+.setting:hover{
+	background: var(--bg-u3);
+}
+.s_desc{
+	margin: .5em 0 0 0;
+	font-size: medium;
+	color: var(--fg-weak);
+}
+#s_list h3{
+	background-color: var(--bg-u5);
+	border-radius: .3em .3em 0 0;
+	padding: .5em;
+	margin: 0 0 1.3em 0;
+}
+#cs_btn{
+	position: absolute;
+	right: 0;
+	margin: .5em;
+	color: var(--fg);
+}
 
 
 
@@ -2468,14 +2536,15 @@ html.y #bbox-overlay figcaption a {
 #op_up2k {
 	padding: 0 1em 1em 1em;
 }
-#drops {
+.overlaybg {
 	display: none;
 	z-index: 3;
 	background: rgba(48, 48, 48, 0.7);
 }
-#drops.vis,
+.overlaybg.vis,
 .dropzone {
-	display: block;
+	display: flex;
+  	justify-content: center;
 	position: fixed;
 	top: 0;
 	left: 0;
@@ -2487,7 +2556,7 @@ html.y #bbox-overlay figcaption a {
 	display: table;
 	left: 10%;
 	width: 78%;
-	height: 26%;
+	height: 78%;
 	margin: 0;
 	font-size: 3em;
 	font-weight: bold;
@@ -2506,7 +2575,7 @@ html.y #bbox-overlay figcaption a {
 	background: rgba(24, 24, 24, 0.7);
 	left: 8%;
 	width: 82%;
-	height: 32%;
+	height: 82%;
 	margin: -3vh 0;
 }
 .dropdesc.hl.err {
@@ -2551,18 +2620,21 @@ html.y #bbox-overlay figcaption a {
 	height: 100%;
 }
 #up_dz {
-	bottom: 12%;
+	position: absolute;
+	bottom: 0;
 }
 #srch_dz {
-	display: none;
-	top: 50%;
+	position: absolute;
+	top: 0;
 }
 #up_zd {
+	position: absolute;
 	top: 12%;
 	bottom: 12%;
 }
 #srch_zd {
-	display: none;
+	position: absolute;
+	top: 12%;
 	bottom: 12%;
 }
 .dropdesc span {
@@ -3317,6 +3389,9 @@ html.d #treepar {
 	#topBar {
 		display: block;
 	}
+	#headerArea {
+		margin: .2em;
+	}
 	#ops {
 		margin: .5em !important;
 		border-radius: .3em !important;
@@ -3342,6 +3417,9 @@ html.d #treepar {
 	#ggrid {
 		margin: 0em -0.25em !important;
 	}
+	#ghead {
+		margin: .5em;
+	}
 }
 @media (max-width: 32em) {
 	#u2conf {
@@ -4312,49 +4390,35 @@ html.e #detree {
 	border-radius: .3em;
 	margin: .2em .3em;
 }
-#spaceFree{
+#spaceFree, #rtt_latency {
   color: var(--fg);
-  text-align: center;
+  text-align: left;
   padding: 2px;
-  position: absolute;
-  bottom: 150%;
-  left: 0%;
   font-size: small;
   cursor: default;
 }
-#spaceUsed_bar{
-	position: absolute;
-	left: 0;
-	bottom: 125%;
-	/* width: 50%; */
-	height: .3em;
-	border-radius: .3em;
-	background: var(--btn-1-bg);
-}
-#spaceTotal_bar{
-	position: absolute;
-	left: 0;
-	bottom: 125%;
-	width: 100%;
+#spaceUsed_bar, #spaceTotal_bar{
 	height: .3em;
 	border-radius: .3em;
 	background: var(--btn-h-bg);
 }
-
+#spaceUsed_bar{
+	background: var(--btn-1-bg);
+}
+#spaceTotal_bar {
+	margin-bottom: .5em;
+}
+#tree_footer {
+	position: absolute;
+	bottom: 1em;
+	left: 1em;
+	transition: width .15s;
+}
 .popup_button {
 	border-radius: .3em;
 	background: var(--btn-1-bg);
-	margin: 1em;
-	position: absolute;
-	bottom: 0;
-	left: 0;
 	cursor: pointer;
 	height: 2.0em;
-}
-#acc_btnContent{
-	position: absolute;
-	width: 100%;
-	height: 100%;
 	display: flex;
 	justify-content:space-between;
 	color: var(--btn-1-fg);
@@ -4366,28 +4430,23 @@ html.e #detree {
 	align-self: center;
 }
 
-/* Toggle this class - hide and show the popup */
-.popup_button .show {
+.popup.show {
   visibility: visible;
   -webkit-animation: fadeIn 1s;
   animation: fadeIn 1s;
 }
 
-/* The actual popup */
 .popup {
   visibility: hidden;
   width: fit-content;
-  background-color: #555;
-  color: #fff;
+  background-color: var(--bg-u6);
   text-align: center;
-  border-radius: 6px;
-  padding: 8px;
+  border-radius: .3em;
+  padding: .5em;
   position: absolute;
   display: block;
   z-index: 3;
-  bottom: 125%;
-  left: 0%;
-  cursor: default;
+  bottom: 2.5em;
 }
 
 /* Popup arrow */
@@ -4399,7 +4458,7 @@ html.e #detree {
   margin-left: -5px;
   border-width: 5px;
   border-style: solid;
-  border-color: #555 transparent transparent transparent;
+  border-color: var(--bg-u6) transparent transparent transparent;
 }
 
 .overlay_plus{
diff --git a/copyparty/web/browser.html b/copyparty/web/browser.html
index 2bfc4668..4789283b 100644
--- a/copyparty/web/browser.html
+++ b/copyparty/web/browser.html
@@ -135,29 +135,30 @@
 </div>
 
 
-	<div id="acc_button" class="popup_button">
-		<div id="spaceFree" style="display: block;">{{ space_free }} {{ space_unit }} free of {{ space_total }} {{ space_unit }}</div>
+<div id="tree_footer">
+	<div id="rtt_latency"></div>
 
-		<div id="space_bar" style="display: block; cursor: default;">
-			<div id="spaceTotal_bar"></div>
-			<div id="spaceUsed_bar" style="width: {{ (space_total - space_free) / space_total * 100 }}%;"></div>
-		</div>
+	<div id="spaceFree">{{ space_free }} free of {{ space_total }}</div>
 
-		<div id="acc_btnContent">
-			<p id="acc_name"></p>
-			<a id="acc_settings" href="#v=cfg" data-dest="cfg">⚙️</a>
-		</div>
-
-		<span id="acc_popup" class="popup">
-			<div id="acessType" style="display: block;"></div>
-			<a href="{{ r }}/?h" id="goh" style="display: block;">control-panel</a>
-			<form id="flogout" style="display: block;" method="post" enctype="multipart/form-data">
-				<input type="hidden" name="act" value="logout" />
-				<input id="blogout" type="submit" />
-			</form>
-		</span>
+	<div id="spaceTotal_bar">
+		<div id="spaceUsed_bar" style="width: {{ space_used_percent }}%;"></div>
 	</div>
 
+	<span id="acc_popup" class="popup">
+		<div id="acessType" style="display: block;"></div>
+		<a href="{{ r }}/?h" id="goh" style="display: block;">control-panel</a>
+		<form id="flogout" style="display: block;" method="post" enctype="multipart/form-data">
+			<input type="hidden" name="act" value="logout" />
+			<input id="blogout" type="submit" />
+		</form>
+	</span>
+	<div id="acc_button" class="popup_button">
+		<p id="acc_name"></p>
+		<a id="acc_settings" href="#v=cfg" data-dest="cfg">⚙️</a>
+	</div>
+</div>
+	
+
 	<a id="gridicon_template" class="gridViewIcon tgl btn on"><div class="gridSquare"></div><div class="gridSquare"></div><div class="gridSquare"></div><div class="gridSquare"></div></div></a>
 	<a id="listicon_template" class="listViewIcon tgl btn"><div class="listRow"></div><div class="listRow"></div></div></a>
 
@@ -167,6 +168,19 @@
 
 	<div id="rcm" tabindex="0"></div>
 
+
+	<div id="cfg" class="overlaybg" tt="">
+		<div id="s_content">
+			<h3 id="s_header">⚙️ </h3>
+			<div id="s_hor">
+				<div id="s_nav"></div>
+				<div id="s_divider"></div>
+				<div id="s_list" class="opview"></div>
+			</div>
+			<a id="cs_btn" href="#" class="btn">✕</a>
+		</div>
+	</div>
+
 	<script>
 		var SR = "{{ r }}",
 			CGV1 = {{ cgv1 }},
diff --git a/copyparty/web/browser.js b/copyparty/web/browser.js
index a86a3fa6..595695d7 100644
--- a/copyparty/web/browser.js
+++ b/copyparty/web/browser.js
@@ -902,7 +902,7 @@ x.parentNode.insertBefore(mknod('div', null,
 (function () {
 	var o = mknod('div');
 	o.innerHTML = (
-		'<div id="drops">\n' +
+		'<div id="drops" class="overlaybg">\n' +
 		'	<div class="dropdesc" id="up_zd"><div>🚀 ' + L.udt_up + '<br /><span></span><div>🚀<b>' + L.udt_up + '</b></div><div><b>' + L.udt_up + '</b>🚀</div></div></div>\n' +
 		'	<div class="dropdesc" id="srch_zd"><div>🔎 ' + L.udt_srch + '<br /><span></span><div>🔎<b>' + L.udt_srch + '</b></div><div><b>' + L.udt_srch + '</b>🔎</div></div></div>\n' +
 		'	<div class="dropzone" id="up_dz" v="up_zd"></div>\n' +
@@ -912,28 +912,27 @@ x.parentNode.insertBefore(mknod('div', null,
 	document.body.appendChild(o);
 })();
 
-
 // config panel
 ebi('op_cfg').innerHTML = (
 	'<div>\n' +
 	'	<h3>' + L.cl_opts + '</h3>\n' +
 	'	<div>\n' +
-	'		<a id="tooltips" class="tgl btn" href="#" tt="' + L.ct_ttips + '</a>\n' +
-	'		<a id="griden" class="tgl btn" href="#" tt="' + L.wt_grid + '">' + L.ct_grid + '</a>\n' +
-	'		<a id="thumbs" class="tgl btn" href="#" tt="' + L.ct_thumb + '</a>\n' +
-	'		<a id="csel" class="tgl btn" href="#" tt="' + L.ct_csel + '</a>\n' +
-	'		<a id="dsel" class="tgl btn" href="#" tt="' + L.ct_dsel + '</a>\n' +
-	'		<a id="den" class="tgl btn" href="#" tt="' + L.ct_den + '</a>\n' +
-	'		<a id="dlni" class="tgl btn" href="#" tt="' + L.ct_dl + '</a>\n' +
-	'		<a id="ihop" class="tgl btn" href="#" tt="' + L.ct_ihop + '</a>\n' +
-	'		<a id="dotfiles" class="tgl btn" href="#" tt="' + L.ct_dots + '</a>\n' +
-	'		<a id="qdel" class="tgl btn" href="#" tt="' + L.ct_qdel + '</a>\n' +
-	'		<a id="dir1st" class="tgl btn" href="#" tt="' + L.ct_dir1st + '</a>\n' +
-	'		<a id="nsort" class="tgl btn" href="#" tt="' + L.ct_nsort + '</a>\n' +
-	'		<a id="utctid" class="tgl btn" href="#" tt="' + L.ct_utc + '</a>\n' +
-	'		<a id="ireadme" class="tgl btn" href="#" tt="' + L.ct_readme + '</a>\n' +
-	'		<a id="idxh" class="tgl btn" href="#" tt="' + L.ct_idxh + '</a>\n' +
-	'		<a id="sbars" class="tgl btn" href="#" tt="' + L.ct_sbars + '</a>\n' +
+	'		<a id="tooltips" class="tgl btn" tt="' + L.ct_ttips + '</a>\n' +
+	'		<a id="griden" class="tgl btn" tt="' + L.wt_grid + '">' + L.ct_grid + '</a>\n' +
+	'		<a id="thumbs" class="tgl btn" tt="' + L.ct_thumb + '</a>\n' +
+	'		<a id="csel" class="tgl btn" tt="' + L.ct_csel + '</a>\n' +
+	'		<a id="dsel" class="tgl btn" tt="' + L.ct_dsel + '</a>\n' +
+	'		<a id="den" class="tgl btn" tt="' + L.ct_den + '</a>\n' +
+	'		<a id="dlni" class="tgl btn" tt="' + L.ct_dl + '</a>\n' +
+	'		<a id="ihop" class="tgl btn" tt="' + L.ct_ihop + '</a>\n' +
+	'		<a id="dotfiles" class="tgl btn" tt="' + L.ct_dots + '</a>\n' +
+	'		<a id="qdel" class="tgl btn" tt="' + L.ct_qdel + '</a>\n' +
+	'		<a id="dir1st" class="tgl btn" tt="' + L.ct_dir1st + '</a>\n' +
+	'		<a id="nsort" class="tgl btn" tt="' + L.ct_nsort + '</a>\n' +
+	'		<a id="utctid" class="tgl btn" tt="' + L.ct_utc + '</a>\n' +
+	'		<a id="ireadme" class="tgl btn" tt="' + L.ct_readme + '</a>\n' +
+	'		<a id="idxh" class="tgl btn" tt="' + L.ct_idxh + '</a>\n' +
+	'		<a id="sbars" class="tgl btn" tt="' + L.ct_sbars + '</a>\n' +
 	'	</div>\n' +
 	'</div>\n' +
 	'<div>\n' +
@@ -962,23 +961,23 @@ ebi('op_cfg').innerHTML = (
 	'	<div><select id="langs"></select></div>\n' +
 	'</div>\n' +
 	(have_zip ? (
-		'<div><h3>' + L.cl_ziptype + '</h3><div id="arc_fmt"></div></div>\n'
+		'<div><h3>' + L.cl_ziptype + '</h3><div><div id="arc_fmt"></div></div></div>\n'
 	) : '') +
 	'<div>\n' +
 	'	<h3>' + L.cl_uopts + '</h3>\n' +
 	'	<div>\n' +
-	'		<a id="ask_up" class="tgl btn" href="#" tt="' + L.ut_ask + '</a>\n' +
-	'		<a id="u2ts" class="tgl btn" href="#" tt="' + L.ut_u2ts + '</a>\n' +
-	'		<a id="umod" class="tgl btn" href="#" tt="' + L.cut_umod + '</a>\n' +
-	'		<a id="hashw" class="tgl btn" href="#" tt="' + L.cut_mt + '</a>\n' +
-	'		<a id="nosubtle" class="tgl btn" href="#" tt="' + L.cut_wasm + '</a>\n' +
-	'		<a id="u2turbo" class="tgl btn ttb" href="#" tt="' + L.cut_turbo + '</a>\n' +
-	'		<a id="u2tdate" class="tgl btn ttb" href="#" tt="' + L.cut_datechk + '</a>\n' +
+	'		<a id="ask_up" class="tgl btn" tt="' + L.ut_ask + '</a>\n' +
+	'		<a id="u2ts" class="tgl btn" tt="' + L.ut_u2ts + '</a>\n' +
+	'		<a id="umod" class="tgl btn" tt="' + L.cut_umod + '</a>\n' +
+	'		<a id="hashw" class="tgl btn" tt="' + L.cut_mt + '</a>\n' +
+	'		<a id="nosubtle" class="tgl btn" tt="' + L.cut_wasm + '</a>\n' +
+	'		<a id="u2turbo" class="tgl btn ttb" tt="' + L.cut_turbo + '</a>\n' +
+	'		<a id="u2tdate" class="tgl btn ttb" tt="' + L.cut_datechk + '</a>\n' +
 	'		<input type="text" id="u2szg" value="" ' + NOAC + ' style="width:3em" tt="' + L.cut_u2sz + '" />' +
-	'		<a id="flag_en" class="tgl btn" href="#" tt="' + L.cut_flag + '">💤</a>\n' +
-	'		<a id="u2sort" class="tgl btn" href="#" tt="' + L.cut_az + '">az</a>\n' +
-	'		<a id="upnag" class="tgl btn" href="#" tt="' + L.cut_nag + '">🔔</a>\n' +
-	'		<a id="upsfx" class="tgl btn" href="#" tt="' + L.cut_sfx + '">🔊</a>\n' +
+	'		<a id="flag_en" class="tgl btn" tt="' + L.cut_flag + '">💤</a>\n' +
+	'		<a id="u2sort" class="tgl btn" tt="' + L.cut_az + '">az</a>\n' +
+	'		<a id="upnag" class="tgl btn" tt="' + L.cut_nag + '">🔔</a>\n' +
+	'		<a id="upsfx" class="tgl btn" tt="' + L.cut_sfx + '">🔊</a>\n' +
 	'		</td>\n' +
 	'	</div>\n' +
 	'</div>\n' +
@@ -995,7 +994,7 @@ ebi('op_cfg').innerHTML = (
 	'	<h3>' + L.cl_bigdir + '</h3>\n' +
 	'	<div>\n' +
 	'		<input type="text" id="bd_lim" value="250" ' + NOAC + ' style="width:4em" tt="' + L.cdt_lim + '" />' +
-	'		<a id="bd_ask" class="tgl btn" href="#" tt="' + L.cdt_ask + '">ask</a>\n' +
+	'		<a id="bd_ask" class="tgl btn" tt="' + L.cdt_ask + '">ask</a>\n' +
 	'		</td>\n' +
 	'	</div>\n' +
 	'</div>\n' +
@@ -1007,10 +1006,41 @@ ebi('op_cfg').innerHTML = (
 	'	</div>\n' +
 	'</div>\n' +
 	'<div><h3>' + L.cl_keytype + '</h3><div><select id="key_notation"></select></div></div>\n' +
-	(!MOBILE ? '<div><h3>' + L.cl_rcm + '</h3><div><a id="rcm_en" class="tgl btn" href="#" tt="' + L.cdt_ren + '</a><a id="rcm_db" class="tgl btn" href="#" tt="' + L.cdt_rdb + '</a></div></div>' : '') +
-	'<div><h3>' + L.cl_hiddenc + ' &nbsp;' + (MOBILE ? '<a href="#" id="hcolsh">' + L.cl_hidec + '</a> / ' : '') + '<a href="#" id="hcolsr">' + L.cl_reset + '</a></h3><div id="hcols"></div></div>'
+	(!MOBILE ? '<div><h3>' + L.cl_rcm + '</h3><div><a id="rcm_en" class="tgl btn" tt="' + L.cdt_ren + '</a><a id="rcm_db" class="tgl btn" tt="' + L.cdt_rdb + '</a></div></div>' : '') +
+	'<div><h3>' + L.cl_hiddenc + ' &nbsp;</h3><div>' + 
+	(MOBILE ? '<a id="hcolsh">' + L.cl_hidec + '</a> / ' : '') + '<a id="hcolsr">' + L.cl_reset + '</a><div id="hcols"></div></div></div>'
 );
 
+// modalize settings
+(function () {
+	ebi('s_header').innerHTML += L.ot_cfg;
+	var sections = ebi('op_cfg').children;
+	for (var i = 0; i < sections.length; i++){
+		var sName = sections[i].children[0].innerHTML;
+		var sId = 's_section_' + i;
+		var subSettings = sections[i].children[1];
+
+		var section = `<div id="${sId}" class="s_section"><h3>${sName}</h3>`;
+		for (var ii = 0; ii < subSettings.children.length; ii++){
+			var s = subSettings.children[ii];
+			var tt = s.getAttribute('tt')?.replace(/\$N/g, "<br />");
+			s.removeAttribute('tt');
+			s.href = '#' + sId;
+			section += `<div id="${subSettings.id}" class="setting">` +
+				s.outerHTML +
+				(tt?.length > 0 ? `<p class="s_desc">${tt}</p>` : '') + 
+				'</div>';
+		}
+		section += '</div>'
+		ebi('s_list').innerHTML += section;
+		subSettings.innerHTML = '';
+		ebi('s_nav').innerHTML += `<a href="#${sId}" class="btn">${sName}</a>\n`;
+	}
+
+	ebi('cs_btn').onclick = function(){
+		modalopen('cfg');
+	}
+})();
 
 // navpane
 ebi('tree').innerHTML = (
@@ -1029,7 +1059,7 @@ ebi('tree').innerHTML = (
 	'<ul class="ntree" id="treeul"></ul>\n' +
 	'<div id="thx_ff">&nbsp;</div>'
 );
-ebi('thx_ff').before(ebi('acc_button'));
+ebi('thx_ff').before(ebi('tree_footer'));
 clmod(ebi('tree'), 'sbar', 1);
 ebi('goh').textContent = L.goh;
 QS('#op_mkdir input[type="submit"]').value = L.ab_mkdir;
@@ -1074,10 +1104,26 @@ ebi('rcm').innerHTML = (
 		if (v)
 			ops[a].href = '#v=' + v;
 	}
-	ebi('acc_settings').onclick = opclick;
+	ebi('acc_settings').onclick = function(e){
+		modalopen('cfg')
+		e.stopPropagation();
+	};
 })();
 
+function modalopen(dest){
+	if (QS('#' + dest + '.vis'))
+		dest = '';
 
+	swrite('opmode', dest || null);
+
+	goto(dest);
+
+	var input = QS('.opview.act input:not([type="hidden"])')
+	if (input && !TOUCH) {
+		tt.skip = true;
+		input.focus();
+	}
+}
 function opclick(e) {
 	var dest = this.getAttribute('data-dest');
 	if (QS('#op_' + dest + '.act'))
@@ -1107,6 +1153,10 @@ function goto(dest) {
 	for (var a = obj.length - 1; a >= 0; a--)
 		clmod(obj[a], 'act');
 
+	obj = QSA('.overlaybg');
+	for (var a = obj.length - 1; a >= 0; a--)
+		clmod(obj[a], 'vis');
+
 	if (dest) {
 		var lnk = QS('#ops>a[data-dest=' + dest + ']'),
 			nps = lnk.getAttribute('data-perm');
@@ -1121,6 +1171,10 @@ function goto(dest) {
 		if (!has(perms, 'read') && !has(perms, 'write') && (dest == 'up2k'))
 			return;
 
+		if(dest == 'cfg'){
+			clmod(ebi(dest), 'vis', 1);
+			return;
+		}
 		clmod(ebi('op_' + dest), 'act', 1);
 		clmod(lnk, 'act', 1);
 
@@ -7083,7 +7137,8 @@ var treectl = (function () {
 				treeh = winh - atop;
 
 			tree.style.top = top + 'px';
-			tree.style.height = treeh < 10 ? '' : Math.floor(treeh) + 'px';
+			// setting the height causes scrollbars to appear often because it's not exact most of the time
+			tree.style.height = '';// = treeh < 10 ? '' : Math.floor(treeh) + 'px';
 		}
 	}
 	timer.add(onscroll2, true);
@@ -7108,7 +7163,7 @@ var treectl = (function () {
 
 		setcvar('--nav-sz', w);
 		ebi('tree').style.width = w;
-		ebi('acc_button').style.width = (iw - 2) + 'em';
+		ebi('tree_footer').style.width = (iw - 2) + 'em';
 		ebi('wrap').style.marginLeft = w2;
 		ebi('widget').style.marginLeft = (iw /1.4) + 'em';
 		onscroll();
@@ -7455,11 +7510,12 @@ var treectl = (function () {
 			clmod(ebi('griden'), 'on', thegrid.en = dgrid);
 
 		srvinf = res.srvinf;
-		ebi('spaceFree').innerHTML = (res.space_total - res.space_free) + ' ' + res.space_unit + ' free of ' + res.space_total + ' ' + res.space_unit;
-		ebi('spaceUsed_bar').width = ((res.space_total - res.space_free) / res.space_total * 100) + '%';
-		if (rtt !== null)
+		ebi('spaceFree').innerHTML = res.space_free + ' free of ' + res.space_total ;
+		ebi('spaceUsed_bar').width = res.space_used_percent + '%';
+		if (rtt !== null){
 			srvinf += (srvinf ? '</span> // <span>rtt: ' : 'rtt: ') + rtt;
-
+			ebi('rtt_latency').innerHTML = 'latency: ' + rtt + 'ms';
+		}
 		var o = ebi('srv_info2');
 		if (o)
 			o.innerHTML = ebi('srv_info').innerHTML = '<span>' + srvinf + '</span>';
@@ -8177,7 +8233,8 @@ var filecols = (function () {
 
 	r.uivis = function () {
 		var hcols = ebi('hcols');
-		hcols.previousSibling.style.display = hcols.style.display = ((!thegrid || !thegrid.en) && (hidden.length || MOBILE)) ? 'block' : 'none';
+		var hcolDiv = hcols.parentElement.parentElement;
+		QS(`a[href='#${hcolDiv.id}']`).style.display = hcolDiv.style.display = ((!thegrid || !thegrid.en) && (hidden.length || MOBILE)) ? 'block' : 'none';
 	};
 
 	r.set_style = function (unhide) {
diff --git a/copyparty/web/up2k.js b/copyparty/web/up2k.js
index 43220641..42510988 100644
--- a/copyparty/web/up2k.js
+++ b/copyparty/web/up2k.js
@@ -1054,6 +1054,20 @@ function up2k_init(subtle) {
     function onoverbtn(e) {
         return onovercmn(this, e, true);
     }
+    function checkDropMode(){
+        if(ebi('fsearch')?.checked){
+            ebi('srch_zd').style.display = '';
+            ebi('up_zd').style.display = 'none';
+            ebi('srch_dz').style.display = '';
+            ebi('up_dz').style.display = 'none';
+        }
+        else{
+            ebi('srch_zd').style.display = 'none';
+            ebi('up_zd').style.display = '';
+            ebi('srch_dz').style.display = 'none';
+            ebi('up_dz').style.display = '';
+        }
+    }
     function onovercmn(self, e, btn) {
         try {
             var ok = false, dt = e.dataTransfer.types;
@@ -1087,6 +1101,7 @@ function up2k_init(subtle) {
         if (btn)
             return;
 
+        checkDropMode();
         clmod(ebi('drops'), 'vis', 1);
         var v = self.getAttribute('v');
         if (v)
@@ -1100,6 +1115,7 @@ function up2k_init(subtle) {
             clmod(ebi(v), 'hl');
 
         if (--nenters <= 0) {
+            checkDropMode();
             clmod(ebi('drops'), 'vis');
             clmod(ebi('up_dz'), 'hl');
             clmod(ebi('srch_dz'), 'hl');
@@ -1158,10 +1174,10 @@ function up2k_init(subtle) {
         ev(e);
         nenters = 0;
         offdrag.call(this);
-        var dz = this && this.getAttribute('id');
-        if (!dz && e && e.clientY)
-            // cuo2duo fallback
-            dz = e.clientY < window.innerHeight / 2 ? 'up_dz' : 'srch_dz';
+        // var dz = this && this.getAttribute('id');
+        // if (!dz && e && e.clientY)
+        //     // cuo2duo fallback
+        //     dz = e.clientY < window.innerHeight / 2 ? 'up_dz' : 'srch_dz';
 
         var err = this.getAttribute('err');
         if (err)
@@ -1169,10 +1185,11 @@ function up2k_init(subtle) {
 
         toast.inf(0, L.u_scan);
 
-        if ((dz == 'up_dz' && uc.fsearch) || (dz == 'srch_dz' && !uc.fsearch))
-            tgl_fsearch();
+        // if ((dz == 'up_dz' && uc.fsearch) || (dz == 'srch_dz' && !uc.fsearch))
+        //     tgl_fsearch();
 
-        if (!QS('#op_up2k.act'))
+        //if (!QS('#op_up2k.act'))
+        if(!uc.fsearch)
             goto('up2k');
 
         var files,