diff --git a/copyparty/web/browser.css b/copyparty/web/browser.css
index 393cf01e..53a7a1e6 100644
--- a/copyparty/web/browser.css
+++ b/copyparty/web/browser.css
@@ -2444,6 +2444,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);
+}
 
 
 
@@ -2453,14 +2520,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;
diff --git a/copyparty/web/browser.html b/copyparty/web/browser.html
index 22785028..4789283b 100644
--- a/copyparty/web/browser.html
+++ b/copyparty/web/browser.html
@@ -168,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 59241c1a..00099d11 100644
--- a/copyparty/web/browser.js
+++ b/copyparty/web/browser.js
@@ -901,7 +901,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' +
@@ -911,27 +911,26 @@ 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="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="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' +
@@ -960,23 +959,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' +
@@ -993,7 +992,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' +
@@ -1005,10 +1004,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 = (
@@ -1072,10 +1102,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'))
@@ -1105,6 +1151,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');
@@ -1119,6 +1169,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);
 
@@ -8163,7 +8217,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) {