diff --git a/copyparty/web/browser.css b/copyparty/web/browser.css
index 0b4a7b25..cb58e71c 100644
--- a/copyparty/web/browser.css
+++ b/copyparty/web/browser.css
@@ -735,16 +735,28 @@ input[type="checkbox"]:checked+label {
 	overflow-wrap: break-word;
 	background: #383838;
 	border: 1px solid #444;
+	border-top: 1px solid #555;
+	box-shadow: 0 .1em .2em #222;
 	border-radius: .3em;
-	padding: .3em .6em;
+	padding: .3em;
 	margin: .5em;
 }
 #ggrid a img {
+	border-radius: .2em;
 	max-width: var(--grid-sz);
 	max-height: var(--grid-sz);
-	margin: 0 auto .5em auto;
+	margin: 0 auto;
 	display: block;
 }
+#ggrid a span {
+	padding: .2em .3em;
+	display: block;
+}
+#ggrid a:hover {
+	background: #444;
+	border-color: #555;
+	color: #fd9;
+}
 #pvol,
 #barbuf,
 #barpos,
diff --git a/copyparty/web/browser.js b/copyparty/web/browser.js
index e3f8c589..6f6b37b6 100644
--- a/copyparty/web/browser.js
+++ b/copyparty/web/browser.js
@@ -831,8 +831,8 @@ var thegrid = (function () {
 			}
 
 			html.push('<a href="' + href +
-				'"><img src="' + ihref + '">' +  // /.cpr/dd/1.png
-				ao.innerHTML + '</a>');
+				'"><img src="' + ihref + '"><span>' +
+				ao.innerHTML + '</span></a>');
 		}
 		lfiles.style.display = 'none';
 		gfiles.style.display = 'block';
@@ -1383,8 +1383,10 @@ var treectl = (function () {
 		nodes = sortfiles(nodes);
 		for (var a = 0; a < nodes.length; a++) {
 			var r = nodes[a],
-				ln = ['<tr><td>' + r.lead + '</td><td><a href="' +
-					top + r.href + '">' + esc(uricom_dec(r.href)[0]) + '</a>', r.sz];
+				hname = esc(uricom_dec(r.href)[0]),
+				sortv = (r.href.slice(-1) == '/' ? '\t' : '') + hname,
+				ln = ['<tr><td>' + r.lead + '</td><td sortv="' + sortv +
+					'"><a href="' + top + r.href + '">' + hname + '</a>', r.sz];
 
 			for (var b = 0; b < res.taglist.length; b++) {
 				var k = res.taglist[b],
@@ -1999,6 +2001,22 @@ var msel = (function () {
 })();
 
 
+(function () {
+	try {
+		var tr = ebi('files').tBodies[0].rows;
+		for (var a = 0; a < tr.length; a++) {
+			var td = tr[a].cells[1],
+				href = td.firstChild.getAttribute('href'),
+				isdir = href.split('?')[0].slice(-1)[0] == '/',
+				txt = href.textContent;
+
+			td.setAttribute('sortv', (isdir ? '\t' : '') + txt);
+		}
+	}
+	catch (ex) { }
+})();
+
+
 function ev_row_tgl(e) {
 	ev(e);
 	filecols.toggle(this.parentElement.parentElement.getElementsByTagName('span')[0].textContent);
diff --git a/copyparty/web/util.js b/copyparty/web/util.js
index ce27579b..da2bf863 100644
--- a/copyparty/web/util.js
+++ b/copyparty/web/util.js
@@ -135,7 +135,7 @@ function clmod(obj, cls, add) {
 
 
 function sortfiles(nodes) {
-    var sopts = jread('fsort', [["lead", -1, ""], ["href", 1, ""]]);
+    var sopts = jread('fsort', [["href", 1, ""]]);
 
     try {
         var is_srch = false;
@@ -163,8 +163,12 @@ function sortfiles(nodes) {
 
                     if ((v + '').indexOf('<a ') === 0)
                         v = v.split('>')[1];
-                    else if (name == "href" && v)
+                    else if (name == "href" && v) {
+                        if (v.slice(-1) == '/')
+                            v = '\t' + v;
+
                         v = uricom_dec(v)[0]
+                    }
 
                     nodes[b]._sv = v;
                 }