diff --git a/copyparty/__main__.py b/copyparty/__main__.py
index ae82d8ce..517d8735 100644
--- a/copyparty/__main__.py
+++ b/copyparty/__main__.py
@@ -1900,7 +1900,7 @@ def add_og(ap):
 
 
 def add_ui(ap, retry: int):
-    THEMES = 10
+    THEMES = 12
     ap2 = ap.add_argument_group("ui options")
     ap2.add_argument("--grid", action="store_true", help="show grid/thumbnails by default (volflag=grid)")
     ap2.add_argument("--no-gsel", action="store_true", help="ctrl-click in gridview will open-in-new-tab instead of select-file (volflag=-gsel)")
diff --git a/copyparty/web/browser.css b/copyparty/web/browser.css
index c4c09efc..3a1b2fa7 100644
--- a/copyparty/web/browser.css
+++ b/copyparty/web/browser.css
@@ -1638,6 +1638,7 @@ html:not(.e):not(.d) #up_quick .btn.on {
 #music a {
 	cursor: pointer;
 }
+html.f #mu_outer,
 html.b #mu_outer {
 	background: color-mix(in oklab, var(--bg-u2) 70%, transparent);
 	backdrop-filter: blur(32px);
@@ -2035,6 +2036,7 @@ input.ssconf_v {
 	transition: width .05s;
 	z-index: 5;
 	padding-bottom: 3em;
+	border-width: 0 1px 0 0;
 }
 #files,
 #wtoggle,
@@ -5121,6 +5123,7 @@ html.e #wtc {
 	font-size: medium;
 	margin-top: .3em;
 	text-align: right;
+	left: auto;
 }
 #opa_acc label {
 	cursor: pointer !important;
@@ -5154,9 +5157,6 @@ html.e #wtc {
   	text-align: left;
 	width: auto;
 }
-#op_acc {
-	left: auto;
-}
 #accessType {
 	font-size: small;
 }
@@ -5175,3 +5175,346 @@ html.e #wtc {
 	color: var(--fg);
 	text-shadow: -1px 1px 1px var(--bg-max);
 }
+
+
+
+
+html.f {
+	--a: #e3f903;
+	--bg-u2:#191919;
+
+	--radius: 0;
+
+	--g-sel-bg: color-mix(in xyz, var(--g-sel-b1) 70%, var(--bg-u2));
+	--bg-u1: color-mix(in srgb, var(--fg) 10%, transparent);
+
+	letter-spacing: 2px;
+	font-family: monospace;
+	font-size: 1.2em;
+
+	#path i {
+		border-color: var(--a);
+		background: none;
+	}
+	#spaceUsed_bar {
+		background: repeating-linear-gradient(-45deg, var(--a), var(--a) 6px, transparent 6px, transparent 12px);
+	}
+	#spaceTotal_bar {
+		border: var(--a) solid 1px;
+	}
+	#spaceMax {
+		display: none;
+	}
+	#spaceFree {
+		font-size: .8em;
+	}
+	#srv_name {
+		margin-left: 2.7em;
+	}
+	#gridsel {
+		content: "m.-select";
+	}
+	.ghead {
+		z-index: 4;
+	}
+	#ggrid > a::before {
+		background: transparent;
+		margin: 0;
+		z-index: 3;
+	}
+	#ggrid > a:focus-visible::before, 
+	#ggrid > a:hover::before {
+		font-size: 2em;
+		margin: 0;
+	}
+	#ggrid > a:focus-visible .imgcontainer::before, 
+	#ggrid > a:hover .imgcontainer::before {
+		border-color: var(--g-f-bg) transparent transparent var(--g-f-bg);
+	}
+	#ggrid > a.sel:focus-visible .imgcontainer::before, 
+	#ggrid > a.sel:hover .imgcontainer::before {
+		border-color: var(--g-fsel-bg) transparent transparent var(--g-fsel-bg);
+	}
+	/* #wrap:not(.thin) .ghead::after, */
+	.dir.thumbed .imgcontainer::before,
+	.au.thumbed:not(.play) .imgcontainer::before {
+		content: "";
+		position: absolute;
+		left: 0;
+		border: var(--bg-u2) solid;
+		z-index: 2;
+		border-width: 4em 4em 0 0;
+		border-color: var(--bg-u2) transparent transparent var(--bg-u2);
+		margin: 0 2px;
+	}
+	#ggrid > a.play::before {
+		background: var(--a);
+	}
+	#ggrid > a.play span {
+		color: var(--fg);
+	}
+	#ggrid > a::before {
+		text-shadow: none !important;
+	}
+	#ggrid > a.sel .imgcontainer::before {
+		border-color: var(--g-sel-bg) transparent transparent var(--g-sel-bg);
+	}
+	#ggrid > a.sel img {
+		box-shadow: none;
+	}
+	.close:not(:hover),
+	#s_nav .btn:not(:hover),
+	#wfp .btn:not(:hover),
+	#treeToggleBtn:not(:hover):not(.on) {
+		background: var(--bg-u2);
+	}
+	#s_nav .btn {
+		border-color: var(--a);
+		border-width: 0 0 0 2px;
+	}
+	#s_nav .sub::before {
+		background: var(--bg-u2);
+	}
+	#pctl {
+		margin-top: .1em;
+	}
+	#pathBar {
+		z-index: 5;
+	}
+	a {
+		/* text-decoration: underline; */
+		text-decoration-color: color-mix(in oklab, currentColor 20%, transparent);
+	}
+	.ntree a + a {
+		line-height: 1.45em;
+	}
+	.hl {
+		width: calc(100% - 4.5em);
+	}
+	.hl::after {
+		content: "";
+		left: calc(100% - 2.3em - 3px);
+		margin-top: -.3em;
+		z-index: -1;
+		position: absolute;
+		border: solid;
+		border-width: 2em 2em 0 0;
+  		border-color: var(--btn-1-bg) transparent transparent var(--btn-1-bg);
+	}
+	.hl:hover::after {
+		border-color: var(--btn-1h-bg) transparent transparent var(--btn-1h-bg);
+	}
+	#wrap:not(.thin) {
+		.ghead {
+			max-width: max-content;
+		}
+		.ghead::after {
+			left: calc(100% - 2px);
+			border-width: 2.7em 2.7em 0 0;
+		}
+	}
+	#s_list h3 {
+		background: linear-gradient(35deg, var(--bg-u2) 60%, var(--bg) 75%,  var(--a2) 85%, var(--fg-weak) 90%);
+	}
+	.close {
+		margin: 1px;
+	}
+	.modalheader {
+		background: var(--a);
+		text-shadow: none;
+		color: var(--bg-u2);
+	}
+	#tree {
+		z-index: 6;
+	}
+	#treeToggleBtn {
+		z-index: 7;
+	}
+	#widget:not(.thin) #pvol {
+		border-color: var(--a-dark);
+	}
+}
+html.fz {
+	--bg: #2e258c;
+	--bg: hsl(from var(--a) calc(h * 2.5 + 85) calc(s * .6) calc(l * .7));
+	--a2: hsl(from var(--bg) calc(h - 40) calc(s * 1.2) calc(l * 1.4));
+
+	#wrap::before {
+		content: '';
+		position: fixed;
+		inset: 0;
+		background-image: url("data:image/svg+xml,%3C!-- svg: first layer --%3E%3Csvg viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='4' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
+		opacity: .4;
+    	filter: brightness(50%) contrast(300%) saturate(0);
+	}
+}
+html.fy {
+	--a: #305797;
+	--fg: #f3f3f3;
+	--fg-weak: var(--a);
+	--a2: hsl(from var(--a) calc(h + 190) calc(s * 1.1) calc(l * .5));
+	--btn-bg: var(--fg);
+	--scrl-hint: var(--bg-u2);
+	--tree-bg: var(--bg-u2);
+
+	* {
+		box-shadow: none !important;
+		text-shadow: none !important;
+		/* transition: all .15s; */
+	}
+
+	#wrap:not(.thin) .ghead {
+		top: 3.4em;
+	}
+	#blogout {
+		color: var(--fg) !important;
+	}
+	#blogout:hover {
+		color: var(--a) !important;
+	}
+	select,
+	input,
+	.setting {
+		color: var(--bg-u2) !important;
+	}
+	#s_list h3 {
+		background: linear-gradient(45deg, var(--a) calc(100% - 3em), #ccc calc(100% - 3em), #ccc calc(100% - 2em), transparent calc(100% - 2em));
+	}
+	#up_status_h,
+	.modalheader {
+		border-bottom: #f3f3f3 solid 1px;
+		color: #f3f3f3;
+	}
+	.close:not(:hover) {
+		background: none;
+		border: none;
+		font-weight: bolder;
+	}
+	.close:hover {
+		background: rgb(207, 22, 28);
+	}
+	#up2k,
+	#files {
+		--fg: #191919;
+		color: var(--fg);
+		--chk-fg: var(--fg);
+	}
+	#path {
+		i {
+			border-color: var(--fg);
+		}
+		a {
+			padding-top: .7em;
+		}
+		a:hover {
+			color: var(--a);
+		}
+	}
+	#wfs,
+	#tree ul a.par {
+		color: var(--fg);
+	}
+	#treeToggleBtn {
+		padding: .2em;
+		margin: 0 !important;
+		border: none;
+	}
+	#srv_name {
+		line-height: 1.4em;
+	}
+	.opbox:not(#op_bup),
+	#pathBar {
+		padding: 0;
+		background: var(--bg-u2);
+		border-bottom: var(--btn-bb);
+	}
+	.thin #pathBar {
+		margin-right: -1.3em;
+	}
+	#ops,
+	#path,
+	.ghead {
+		border: var(--btn-bb);
+	}
+	#actionsArea,
+	#ops,
+	#path,
+	#wfp,
+	#wfp .btn {
+		margin: 0;
+		border: none;
+	}
+	#wfp.shifted {
+		margin-left: 2.5em;
+	}
+	#wfp .btn {
+		padding: .3em;
+	}
+	#bbox-overlay #bbox-next .btn, #bbox-overlay #bbox-prev .btn,
+	#bbox-btns .btn:not(.on) {
+		background: var(--bg-u2);
+	}
+	#tth {
+		display: none;
+	}
+	#wrap {
+		background-size: 20px 20px; background-image: radial-gradient(color-mix(in oklab, var(--bg-u2) 20%, transparent) 1px, transparent 1px);
+	}
+	.modalheader::after {
+		position: absolute;
+		border: solid;
+		border-color: transparent transparent var(--bg) transparent;
+		border-width: 10px;
+		content: "";
+		width: 30%;
+		margin-bottom: -1.2em;
+		right: 2.7em;
+	}
+	#ops {
+		height: auto;
+		a {
+			padding: .29em .4em;
+		}
+		a:not(:hover):not(.act) {
+			color: var(--fg);
+		}
+	}
+	#actionsArea {
+		top: 0 !important;
+	}
+	#wtoggle{
+		margin: 0;
+		border-bottom: none;
+	}
+	#up_quick {
+		margin: 0;
+	}
+	#wtico {
+		line-height: 1.09em;
+	}
+	#wtoggle, #wtoggle * {
+    	line-height: .99em;
+	}
+	#wrap:before {
+		content: "";
+		width: 500px;
+		height: 500px;
+		border: var(--a) solid 10px;
+		border-radius: 100%;
+		position: fixed;
+		z-index: -1;
+		right: 10px;
+	}
+	#qs_btns a {
+		color: var(--bg-u2);
+	}
+}
+html.f.unfun {
+	#ops a {
+		padding: .5em;
+	}
+	#srchfolder_div {
+		left: 6.7em;
+	}
+}
+
diff --git a/copyparty/web/browser.js b/copyparty/web/browser.js
index b1cc7147..3346765f 100644
--- a/copyparty/web/browser.js
+++ b/copyparty/web/browser.js
@@ -2099,7 +2099,7 @@ var mpl = (function () {
 			set_loaded(o, false);
 			o.setAttribute('src', url);
 
-			o = QS('html.b #music');
+			o = QS('html.b #music, html.f #music');
 			if (o)
 				o.style.background = "url('" + url + "') no-repeat center / cover";
 		}
@@ -9465,7 +9465,7 @@ var settheme = (function () {
 		var html = [],
 			cb = ebi('themes'),
 			itheme = ax.indexOf(theme[0]) * 2 + (light ? 1 : 0),
-			names = ['flat dark', 'flat light', 'fancy dark', 'fancy light', 'vice', 'hotdog stand', 'hacker', 'hi-con', 'phi95 dark', 'phi95', ];
+			names = ['flat dark', 'flat light', 'fancy dark', 'fancy light', 'vice', 'hotdog stand', 'hacker', 'hi-con', 'phi95 dark', 'phi95', 'poison', 'wing', ];
 
 		for (var a = 0; a < themes; a++)
 			html.push('<option value="{0}">{0} ┃ {1}</option>'.format(a, names[a] || 'custom'));