diff --git a/copyparty/web/ui.css b/copyparty/web/ui.css
index 470de681..39375248 100644
--- a/copyparty/web/ui.css
+++ b/copyparty/web/ui.css
@@ -42,6 +42,10 @@ html {
 	text-shadow: 1px 1px 0 #000;
 	color: #fff;
 }
+#toast.top {
+	top: 2em;
+	bottom: unset;
+}
 #toast a {
 	color: inherit;
 	text-shadow: inherit;
diff --git a/copyparty/web/util.js b/copyparty/web/util.js
index cc7e6500..f3565703 100644
--- a/copyparty/web/util.js
+++ b/copyparty/web/util.js
@@ -1280,17 +1280,17 @@ var toast = (function () {
         r.tag = tag;
     };
 
-    r.ok = function (sec, txt, tag) {
-        r.show('ok', sec, txt, tag);
+    r.ok = function (sec, txt, tag, cls) {
+        r.show('ok ' + (cls || ''), sec, txt, tag);
     };
-    r.inf = function (sec, txt, tag) {
-        r.show('inf', sec, txt, tag);
+    r.inf = function (sec, txt, tag, cls) {
+        r.show('inf ' + (cls || ''), sec, txt, tag);
     };
-    r.warn = function (sec, txt, tag) {
-        r.show('warn', sec, txt, tag);
+    r.warn = function (sec, txt, tag, cls) {
+        r.show('warn ' + (cls || ''), sec, txt, tag);
     };
-    r.err = function (sec, txt, tag) {
-        r.show('err', sec, txt, tag);
+    r.err = function (sec, txt, tag, cls) {
+        r.show('err ' + (cls || ''), sec, txt, tag);
     };
 
     return r;