diff --git a/res/static/favicon.ico b/res/static/favicon.ico
index 6781590..7c16b27 100644
Binary files a/res/static/favicon.ico and b/res/static/favicon.ico differ
diff --git a/res/static/img/carina.webp b/res/static/img/carina.webp
new file mode 100644
index 0000000..bc00bb3
Binary files /dev/null and b/res/static/img/carina.webp differ
diff --git a/res/static/img/catspaw.webp b/res/static/img/catspaw.webp
new file mode 100644
index 0000000..f98d646
Binary files /dev/null and b/res/static/img/catspaw.webp differ
diff --git a/res/static/img/fnx_logo.png b/res/static/img/fnx_logo.png
new file mode 100644
index 0000000..dd226af
Binary files /dev/null and b/res/static/img/fnx_logo.png differ
diff --git a/res/static/img/pixeldrain_128.png b/res/static/img/pixeldrain_128.png
index 81635db..2e70503 100644
Binary files a/res/static/img/pixeldrain_128.png and b/res/static/img/pixeldrain_128.png differ
diff --git a/res/static/img/pixeldrain_256.png b/res/static/img/pixeldrain_256.png
index a19f138..bc5962c 100644
Binary files a/res/static/img/pixeldrain_256.png and b/res/static/img/pixeldrain_256.png differ
diff --git a/res/static/img/pixeldrain_32.png b/res/static/img/pixeldrain_32.png
index c946118..d341c60 100644
Binary files a/res/static/img/pixeldrain_32.png and b/res/static/img/pixeldrain_32.png differ
diff --git a/res/static/style/layout.css b/res/static/style/layout.css
index de3c987..6e31d42 100644
--- a/res/static/style/layout.css
+++ b/res/static/style/layout.css
@@ -58,12 +58,6 @@ a>svg {
 	box-sizing: border-box;
 }
 
-html,
-body {
-	/* This makes sure that no scrollbar shows up when the menu is open on small screens*/
-	overflow-x: hidden;
-}
-
 body {
 	margin: 0;
 	font-family: system-ui, sans-serif;
@@ -76,12 +70,6 @@ body {
 	transition: opacity 0.2s;
 }
 
-.checkers {
-	background-image: var(--background_pattern);
-	background-color: var(--background_pattern_color);
-	background-repeat: repeat;
-}
-
 header,
 footer {
 	text-align: center;
@@ -90,24 +78,16 @@ footer {
 }
 
 footer {
-	background-image: url("/res/img/nebula.webp");
-	background-color: var(--background_color);
-	background-blend-mode: luminosity;
-	box-shadow: inset 0 0 10px -4px var(--shadow_color);
-	border-radius: 8px;
-	margin: 16px;
+	background-color: var(--shaded_background);
+	backdrop-filter: blur(4px);
+	border-top: 1px solid var(--separator);
 }
 
 footer>.footer_content {
-	background: var(--body_background);
-	color: var(--body_text_color);
 	display: inline-block;
-	width: 1000px;
-	max-width: 100%;
+	width: 100%;
 	padding-top: 10px;
 	padding-bottom: 10px;
-	border-radius: 8px;
-	margin: 120px 0 60px 0;
 }
 
 header>h1 {
@@ -173,52 +153,17 @@ pre>code {
 	transition: left 0.5s;
 }
 
-.page_body {
-	position: relative;
-	right: 0;
-	height: auto;
-	left: 0;
-	margin-left: 300px;
-	min-width: 300px;
-	display: block;
-	text-align: center;
-	/* Center the header and body */
-	overflow-y: auto;
-	overflow-x: hidden;
-	transition: margin 0.5s;
-}
-
 .page_content {
-	background: var(--body_background);
-	border-radius: 6px;
-	overflow: hidden;
+	background: var(--shaded_background);
+	backdrop-filter: blur(4px);
+	text-align: center;
 }
 
-.page_content,
-.page_margins,
-footer {
-	margin-right: 20px;
-	margin-left: 20px;
-}
-
-@media (max-width: 1100px) {
+@media (max-width: 1000px) {
 	.page_navigation {
 		left: -300px;
 	}
 
-	.page_body {
-		margin-left: 0;
-		margin-right: 0;
-		width: 100%;
-	}
-
-	.page_content,
-	.page_margins,
-	footer {
-		margin-left: 0;
-		margin-right: 0;
-	}
-
 	header>h1 {
 		/* We want the header text to appear below the menu button, so the top
 		margin needs to be fairly large when the screen is small */
@@ -537,6 +482,12 @@ input[type="color"] {
 	line-height: 1.3em;
 }
 
+.button.flat {
+	background: none;
+	color: var(--body_text_color);
+	box-shadow: none;
+}
+
 button:hover,
 .button:hover,
 input[type="submit"]:hover,
diff --git a/res/template/admin.html b/res/template/admin.html
deleted file mode 100644
index 92c59bf..0000000
--- a/res/template/admin.html
+++ /dev/null
@@ -1,34 +0,0 @@
-{{define "admin"}}
-<!DOCTYPE html>
-<html lang="en">
-	{{if and .Authenticated .User.IsAdmin}}
-		<head>
-			{{template "meta_tags" "Administrator panel"}}
-
-			<script>
-			window.api_endpoint = '{{.APIEndpoint}}';
-			window.server_hostname = "{{.Hostname}}";
-			</script>
-			<script defer src='/res/svelte/admin_panel.js?v{{cacheID}}'></script>
-		</head>
-		<body>
-			{{template "menu" .}}
-			<div id="page_body" class="page_body"></div>
-		</body>
-	{{else}}
-		<head>
-			{{template "meta_tags" "Administrator panel"}}
-		</head>
-		<body>
-			{{template "page_top" .}}
-			<header>
-				<h1>Admin Panel</h1>
-			</header>
-			<div id="page_content" class="page_content">
-				;-)
-			</div>
-			{{template "page_bottom" .}}
-		</body>
-	{{end}}
-</html>
-{{end}}
diff --git a/res/template/appearance.html b/res/template/appearance.html
deleted file mode 100644
index 9b74a2e..0000000
--- a/res/template/appearance.html
+++ /dev/null
@@ -1,152 +0,0 @@
-{{define "appearance"}}<!DOCTYPE html>
-<html lang="en">
-	<head>
-		{{template "meta_tags" "Appearance settings"}}
-		<link id="stylesheet_theme_2" rel="stylesheet" type="text/css" href="/theme.css"/>
-	</head>
-
-	<body>
-		{{template "page_top" .}}
-		<header>
-			<h1>Change website appearance</h1>
-		</header>
-		<div id="page_content" class="page_content">
-			<section>
-				<p>
-					You can change how pixeldrain looks! Your theme choice will
-					be saved in a cookie.
-				</p>
-				<h2>Theme</h2>
-				<input type="radio" id="style_nord" name="style"><label for="style_nord">Nord</label>
-				(Inspired by <a href="https://www.nordtheme.com/" target="_blank">Nord</a>)
-				<br/>
-				Dynamic theme, changes based on operating system settings. Here you can choose a specific variant:
-				<br/>
-				<input type="radio" id="style_nord_dark" name="style"><label for="style_nord_dark">Nord dark</label>
-				<br/>
-				<input type="radio" id="style_nord_light" name="style"><label for="style_nord_light">Nord light</label>
-				<br/>
-				<br/>
-				<input type="radio" id="style_solarized" name="style"><label for="style_solarized">Solarized</label>
-				(Inspired by <a href="https://ethanschoonover.com/solarized/" target="_blank">Solarized</a>)
-				<br/>
-				Dynamic theme, changes based on operating system settings. Here you can choose a specific variant:
-				<br/>
-				<input type="radio" id="style_solarized_dark" name="style"><label for="style_solarized_dark">Solarized dark</label>
-				<br/>
-				<input type="radio" id="style_solarized_light" name="style"><label for="style_solarized_light">Solarized light</label>
-				<br/>
-				<!-- <br/> -->
-				<!-- <input type="radio" id="style_adwaita" name="style"><label for="style_adwaita">Adwaita</label><br/> -->
-				<br/>
-				<input type="radio" id="style_purple_drain" name="style"><label for="style_purple_drain">Purple drain</label>
-				<br/>
-				Classic 2022 style, with purple gradients
-				<br/>
-				<br/>
-				<input type="radio" id="style_classic" name="style"><label for="style_classic">Pixeldrain classic (gray)</label>
-				<br/>
-				Classic pre-2020 pixeldrain style, dark gray
-				<br/>
-				<br/>
-				Other (experimental) themes
-				<br/>
-				<input type="radio" id="style_maroon" name="style"><label for="style_maroon">Maroon Style</label>
-				<br/>
-				<input type="radio" id="style_hacker" name="style"><label for="style_hacker">Hacker Style</label>
-				<br/>
-				<input type="radio" id="style_canta" name="style"><label for="style_canta">Canta Style</label>
-				(Inspired by <a href="https://github.com/vinceliuice/Canta-theme" target="_blank">Canta GTK</a>)
-				<br/>
-				<input type="radio" id="style_skeuos" name="style"><label for="style_skeuos">Skeuos Style</label>
-				(Inspired by <a href="https://www.gnome-look.org/p/1441725/" target="_blank">Skeuos GTK</a>)
-				<br/>
-				<input type="radio" id="style_sweet" name="style"><label for="style_sweet">Sweet</label>
-				<br/>
-				<br/>
-				<input type="radio" id="style_adwaita" name="style"><label for="style_adwaita">Adwaita (dynamic)</label>
-				<br/>
-				<input type="radio" id="style_adwaita_dark" name="style"><label for="style_adwaita_dark">Adwaita dark</label>
-				<br/>
-				<input type="radio" id="style_adwaita_light" name="style"><label for="style_adwaita_light">Adwaita light</label>
-				<br/><br/>
-				<input type="radio" id="style_pixeldrain98" name="style"><label for="style_pixeldrain98">Pixeldrain 98</label>
-
-				<h2>Hue</h2>
-				<p>
-					Many themes support custom hues. The hue does not change the
-					contrast of the theme, only the color itself.
-				</p>
-				<input type="radio" id="hue_default" name="hue"><label for="hue_default">Default</label><br/>
-				<input type="radio" id="hue_354" name="hue"><label for="hue_354">Red</label><br/>
-				<input type="radio" id="hue_14" name="hue"><label for="hue_14">Orange</label><br/>
-				<input type="radio" id="hue_40" name="hue"><label for="hue_40">Yellow</label><br/>
-				<input type="radio" id="hue_92" name="hue"><label for="hue_92">Green</label><br/>
-				<input type="radio" id="hue_311" name="hue"><label for="hue_311">Purple</label><br/>
-			</section>
-		</div>
-
-		<script>
-		function get_cookie(cname) {
-			let name = cname + "=";
-			let decodedCookie = decodeURIComponent(document.cookie);
-			let ca = decodedCookie.split(';');
-			for(let i = 0; i <ca.length; i++) {
-				let c = ca[i];
-				while (c.charAt(0) == ' ') {
-				c = c.substring(1);
-				}
-				if (c.indexOf(name) == 0) {
-				return c.substring(name.length, c.length);
-				}
-			}
-			return "";
-		}
-
-		let style = get_cookie("style")
-		let hue = get_cookie("hue")
-
-		// Style selector
-		document.getElementsByName("style").forEach(function(elem) {
-			elem.addEventListener("change", e => {
-				style = e.target.id.substring(6)
-
-				var date = new Date();
-				date.setTime(date.getTime() + (10 * 365 * 24 * 60 * 60 * 1000));
-				document.cookie = "style="+style+"; expires=" + date.toUTCString() + "; path=/"
-
-				reload_sheet()
-			})
-		});
-		document.getElementsByName("hue").forEach(function(elem) {
-			elem.addEventListener("change", e => {
-				hue = e.target.id.substring(4)
-				if (hue === "default") {
-					hue = -1
-					document.cookie = "hue=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/"
-				}
-
-				var date = new Date();
-				date.setTime(date.getTime() + (10 * 365 * 24 * 60 * 60 * 1000));
-				document.cookie = "hue="+hue+"; expires=" + date.toUTCString() + "; path=/"
-
-				reload_sheet()
-			})
-		});
-
-		function reload_sheet() {
-			let stylesheet1 = document.getElementById("stylesheet_theme")
-			let stylesheet2 = document.getElementById("stylesheet_theme_2")
-
-			// First load the sheet in the secondary tag, wait for it to load,
-			// and replace the original sheet when it has finished loading
-			stylesheet2.href= "/theme.css?style="+style+"&hue="+hue
-			stylesheet2.onload = e => {
-				stylesheet1.href= "/theme.css?style="+style+"&hue="+hue
-			}
-		}
-		</script>
-		{{template "page_bottom" .}}
-	</body>
-</html>
-{{end}}
diff --git a/res/template/home.html b/res/template/home.html
deleted file mode 100644
index 4a3c532..0000000
--- a/res/template/home.html
+++ /dev/null
@@ -1,19 +0,0 @@
-{{define "home"}}
-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		{{template "meta_tags" "Cloud storage and data transfer services"}}
-
-		<script>
-			window.api_endpoint = '{{.APIEndpoint}}';
-			window.user = {{.User}};
-			window.server_hostname = "{{.Hostname}}";
-		</script>
-		<script defer src='/res/svelte/home_page.js?v{{cacheID}}'></script>
-	</head>
-	<body>
-		{{template "menu" .}}
-		<div id="page_body" class="page_body"></div>
-	</body>
-</html>
-{{end}}
diff --git a/res/template/login.html b/res/template/login.html
deleted file mode 100644
index 6ee494a..0000000
--- a/res/template/login.html
+++ /dev/null
@@ -1,19 +0,0 @@
-{{define "login"}}<!DOCTYPE html>
-<html lang="en">
-	<head>
-		{{template "meta_tags" "Login" }}
-
-		<script>
-		window.api_endpoint = '{{.APIEndpoint}}';
-		window.user = {{.User}};
-		window.server_hostname = "{{.Hostname}}";
-		</script>
-		<script defer src='/res/svelte/login.js?v{{cacheID}}'></script>
-	</head>
-
-	<body>
-		{{template "menu" .}}
-		<div id="page_body" class="page_body"></div>
-	</body>
-</html>
-{{end}}
diff --git a/res/template/speedtest.html b/res/template/speedtest.html
deleted file mode 100644
index 6dc5e27..0000000
--- a/res/template/speedtest.html
+++ /dev/null
@@ -1,19 +0,0 @@
-{{define "speedtest"}}
-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		{{template "meta_tags" "Speedtest"}}
-
-		<script>
-			window.api_endpoint = '{{.APIEndpoint}}';
-			window.user = {{.User}};
-			window.server_hostname = "{{.Hostname}}";
-		</script>
-		<script defer src='/res/svelte/speedtest.js?v{{cacheID}}'></script>
-	</head>
-	<body>
-		{{template "menu" .}}
-		<div id="page_body" class="page_body"></div>
-	</body>
-</html>
-{{end}}
diff --git a/res/template/user_home.html b/res/template/user_home.html
deleted file mode 100644
index 130704d..0000000
--- a/res/template/user_home.html
+++ /dev/null
@@ -1,19 +0,0 @@
-{{define "user_home"}}<!DOCTYPE html>
-<html lang="en">
-	<head>
-		{{template "meta_tags" .User.Username }}
-
-		<script>
-		window.api_endpoint = '{{.APIEndpoint}}';
-		window.user = {{.User}};
-		window.server_hostname = "{{.Hostname}}";
-		</script>
-		<script defer src='/res/svelte/user_home.js?v{{cacheID}}'></script>
-	</head>
-
-	<body>
-		{{template "menu" .}}
-		<div id="page_body" class="page_body"></div>
-	</body>
-</html>
-{{end}}
diff --git a/res/template/filesystem.html b/res/template/wrap.html
similarity index 91%
rename from res/template/filesystem.html
rename to res/template/wrap.html
index 1059e40..1399e3f 100644
--- a/res/template/filesystem.html
+++ b/res/template/wrap.html
@@ -1,4 +1,4 @@
-{{define "filesystem"}}
+{{define "wrap"}}
 <!DOCTYPE html>
 <html lang="en">
 	<head>
@@ -23,12 +23,12 @@
 
 		{{ template "opengraph" .OGData }}
 		<script>
-			window.initial_node = {{.Other}};
 			window.user = {{.User}};
 			window.api_endpoint = '{{.APIEndpoint}}';
+			window.server_hostname = "{{.Hostname}}";
 		</script>
 
-		<script defer src='/res/svelte/filesystem.js?v{{cacheID}}'></script>
+		<script defer src='/res/svelte/wrap.js?v{{cacheID}}'></script>
 	</head>
 	<body></body>
 </html>
diff --git a/svelte/package-lock.json b/svelte/package-lock.json
index 02d0b0c..e75276d 100644
--- a/svelte/package-lock.json
+++ b/svelte/package-lock.json
@@ -11,7 +11,6 @@
         "behave-js": "^1.5.0",
         "chart.js": "^4.4.6",
         "country-data-list": "^1.4.0",
-        "pdfjs-dist": "^5.4.149",
         "pure-color": "^1.3.0",
         "rollup-plugin-includepaths": "^0.2.4",
         "svelte-preprocess": "^6.0.3",
@@ -76,6 +75,7 @@
       "integrity": "sha512-i1SLeK+DzNnQ3LL/CswPCa/E5u4lh1k6IAEphON8F+cXt0t9euTshDru0q7/IqMa1PMPz5RnHuHscF8/ZJsStg==",
       "devOptional": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@ampproject/remapping": "^2.2.0",
         "@babel/code-frame": "^7.26.0",
@@ -1652,191 +1652,6 @@
       "integrity": "sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw==",
       "license": "MIT"
     },
-    "node_modules/@napi-rs/canvas": {
-      "version": "0.1.80",
-      "resolved": "https://registry.npmjs.org/@napi-rs/canvas/-/canvas-0.1.80.tgz",
-      "integrity": "sha512-DxuT1ClnIPts1kQx8FBmkk4BQDTfI5kIzywAaMjQSXfNnra5UFU9PwurXrl+Je3bJ6BGsp/zmshVVFbCmyI+ww==",
-      "license": "MIT",
-      "optional": true,
-      "workspaces": [
-        "e2e/*"
-      ],
-      "engines": {
-        "node": ">= 10"
-      },
-      "optionalDependencies": {
-        "@napi-rs/canvas-android-arm64": "0.1.80",
-        "@napi-rs/canvas-darwin-arm64": "0.1.80",
-        "@napi-rs/canvas-darwin-x64": "0.1.80",
-        "@napi-rs/canvas-linux-arm-gnueabihf": "0.1.80",
-        "@napi-rs/canvas-linux-arm64-gnu": "0.1.80",
-        "@napi-rs/canvas-linux-arm64-musl": "0.1.80",
-        "@napi-rs/canvas-linux-riscv64-gnu": "0.1.80",
-        "@napi-rs/canvas-linux-x64-gnu": "0.1.80",
-        "@napi-rs/canvas-linux-x64-musl": "0.1.80",
-        "@napi-rs/canvas-win32-x64-msvc": "0.1.80"
-      }
-    },
-    "node_modules/@napi-rs/canvas-android-arm64": {
-      "version": "0.1.80",
-      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-android-arm64/-/canvas-android-arm64-0.1.80.tgz",
-      "integrity": "sha512-sk7xhN/MoXeuExlggf91pNziBxLPVUqF2CAVnB57KLG/pz7+U5TKG8eXdc3pm0d7Od0WreB6ZKLj37sX9muGOQ==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@napi-rs/canvas-darwin-arm64": {
-      "version": "0.1.80",
-      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-darwin-arm64/-/canvas-darwin-arm64-0.1.80.tgz",
-      "integrity": "sha512-O64APRTXRUiAz0P8gErkfEr3lipLJgM6pjATwavZ22ebhjYl/SUbpgM0xcWPQBNMP1n29afAC/Us5PX1vg+JNQ==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@napi-rs/canvas-darwin-x64": {
-      "version": "0.1.80",
-      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-darwin-x64/-/canvas-darwin-x64-0.1.80.tgz",
-      "integrity": "sha512-FqqSU7qFce0Cp3pwnTjVkKjjOtxMqRe6lmINxpIZYaZNnVI0H5FtsaraZJ36SiTHNjZlUB69/HhxNDT1Aaa9vA==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@napi-rs/canvas-linux-arm-gnueabihf": {
-      "version": "0.1.80",
-      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-arm-gnueabihf/-/canvas-linux-arm-gnueabihf-0.1.80.tgz",
-      "integrity": "sha512-eyWz0ddBDQc7/JbAtY4OtZ5SpK8tR4JsCYEZjCE3dI8pqoWUC8oMwYSBGCYfsx2w47cQgQCgMVRVTFiiO38hHQ==",
-      "cpu": [
-        "arm"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@napi-rs/canvas-linux-arm64-gnu": {
-      "version": "0.1.80",
-      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-arm64-gnu/-/canvas-linux-arm64-gnu-0.1.80.tgz",
-      "integrity": "sha512-qwA63t8A86bnxhuA/GwOkK3jvb+XTQaTiVML0vAWoHyoZYTjNs7BzoOONDgTnNtr8/yHrq64XXzUoLqDzU+Uuw==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@napi-rs/canvas-linux-arm64-musl": {
-      "version": "0.1.80",
-      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-arm64-musl/-/canvas-linux-arm64-musl-0.1.80.tgz",
-      "integrity": "sha512-1XbCOz/ymhj24lFaIXtWnwv/6eFHXDrjP0jYkc6iHQ9q8oXKzUX1Lc6bu+wuGiLhGh2GS/2JlfORC5ZcXimRcg==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@napi-rs/canvas-linux-riscv64-gnu": {
-      "version": "0.1.80",
-      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-riscv64-gnu/-/canvas-linux-riscv64-gnu-0.1.80.tgz",
-      "integrity": "sha512-XTzR125w5ZMs0lJcxRlS1K3P5RaZ9RmUsPtd1uGt+EfDyYMu4c6SEROYsxyatbbu/2+lPe7MPHOO/0a0x7L/gw==",
-      "cpu": [
-        "riscv64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@napi-rs/canvas-linux-x64-gnu": {
-      "version": "0.1.80",
-      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-x64-gnu/-/canvas-linux-x64-gnu-0.1.80.tgz",
-      "integrity": "sha512-BeXAmhKg1kX3UCrJsYbdQd3hIMDH/K6HnP/pG2LuITaXhXBiNdh//TVVVVCBbJzVQaV5gK/4ZOCMrQW9mvuTqA==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@napi-rs/canvas-linux-x64-musl": {
-      "version": "0.1.80",
-      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-x64-musl/-/canvas-linux-x64-musl-0.1.80.tgz",
-      "integrity": "sha512-x0XvZWdHbkgdgucJsRxprX/4o4sEed7qo9rCQA9ugiS9qE2QvP0RIiEugtZhfLH3cyI+jIRFJHV4Fuz+1BHHMg==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@napi-rs/canvas-win32-x64-msvc": {
-      "version": "0.1.80",
-      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-win32-x64-msvc/-/canvas-win32-x64-msvc-0.1.80.tgz",
-      "integrity": "sha512-Z8jPsM6df5V8B1HrCHB05+bDiCxjE9QA//3YrkKIdVDEwn5RKaqOxCJDRJkl48cJbylcrJbW4HxZbTte8juuPg==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
     "node_modules/@pkgjs/parseargs": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
@@ -2465,6 +2280,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "caniuse-lite": "^1.0.30001669",
         "electron-to-chromium": "^1.5.41",
@@ -2486,9 +2302,9 @@
       "license": "MIT"
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001712",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001712.tgz",
-      "integrity": "sha512-MBqPpGYYdQ7/hfKiet9SCI+nmN5/hp4ZzveOJubl5DTAMa5oggjAuoi0Z4onBpKPFI2ePGnQuQIzF3VxDjDJig==",
+      "version": "1.0.30001749",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001749.tgz",
+      "integrity": "sha512-0rw2fJOmLfnzCRbkm8EyHL8SvI2Apu5UbnQuTsJ0ClgrH8hcwFooJ1s5R0EP8o8aVrFu8++ae29Kt9/gZAZp/Q==",
       "devOptional": true,
       "funding": [
         {
@@ -3166,18 +2982,6 @@
       "dev": true,
       "license": "ISC"
     },
-    "node_modules/pdfjs-dist": {
-      "version": "5.4.149",
-      "resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-5.4.149.tgz",
-      "integrity": "sha512-Xe8/1FMJEQPUVSti25AlDpwpUm2QAVmNOpFP0SIahaPIOKBKICaefbzogLdwey3XGGoaP4Lb9wqiw2e9Jqp0LA==",
-      "license": "Apache-2.0",
-      "engines": {
-        "node": ">=20.16.0 || >=22.3.0"
-      },
-      "optionalDependencies": {
-        "@napi-rs/canvas": "^0.1.77"
-      }
-    },
     "node_modules/periscopic": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/periscopic/-/periscopic-3.1.0.tgz",
@@ -3371,6 +3175,7 @@
       "integrity": "sha512-vGorVWIsWfX3xbcyAS+I047kFKapHYivmkaT63Smj77XwvLSJos6M1xGqZnBPFQFBRZDOcG1QnYEIxAvTr/HjA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/estree": "1.0.6"
       },
@@ -3703,6 +3508,7 @@
       "resolved": "https://registry.npmjs.org/svelte/-/svelte-4.2.19.tgz",
       "integrity": "sha512-IY1rnGr6izd10B0A8LqsBfmlT5OILVuZ7XsI0vdGPEvuonFV7NYEUK4dAkm9Zg2q0Um92kYjTpS1CAP3Nh/KWw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@ampproject/remapping": "^2.2.1",
         "@jridgewell/sourcemap-codec": "^1.4.15",
@@ -3832,7 +3638,8 @@
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
       "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
-      "license": "0BSD"
+      "license": "0BSD",
+      "peer": true
     },
     "node_modules/typescript": {
       "version": "5.6.3",
diff --git a/svelte/rollup.config.js b/svelte/rollup.config.js
index d91c8fb..62c902d 100644
--- a/svelte/rollup.config.js
+++ b/svelte/rollup.config.js
@@ -11,12 +11,7 @@ const production = !process.env.ROLLUP_WATCH;
 
 const builddir = "../res/static/svelte"
 export default [
-	"filesystem",
-	"user_home",
-	"admin_panel",
-	"home_page",
-	"speedtest",
-	"login",
+	"wrap",
 ].map((name, index) => ({
 	input: `src/${name}.js`,
 	output: {
diff --git a/svelte/src/admin_panel.js b/svelte/src/admin_panel.js
deleted file mode 100644
index 3d240f1..0000000
--- a/svelte/src/admin_panel.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import App from './admin_panel/Router.svelte';
-
-const app = new App({
-	target: document.getElementById("page_body"),
-	props: {}
-});
-
-export default app;
diff --git a/svelte/src/admin_panel/AbuseReports.svelte b/svelte/src/admin_panel/AbuseReports.svelte
index da28189..f307e02 100644
--- a/svelte/src/admin_panel/AbuseReports.svelte
+++ b/svelte/src/admin_panel/AbuseReports.svelte
@@ -1,7 +1,7 @@
 <script>
 import { onMount } from "svelte";
-import LoadingIndicator from "util/LoadingIndicator.svelte";
 import AbuseReport from "./AbuseReport.svelte";
+import { loading_finish, loading_start } from "lib/Loading";
 
 let loading = true
 let reports = []
@@ -12,7 +12,7 @@ let endPicker
 let tab = "pending"
 
 const get_reports = async () => {
-	loading = true;
+	loading_start()
 
 	// Remove refresh timeout if there is one
 	clearTimeout(refresh_timeout)
@@ -70,7 +70,7 @@ const get_reports = async () => {
 	} catch (err) {
 		alert(err);
 	} finally {
-		loading = false;
+		loading_finish()
 	}
 };
 
@@ -156,8 +156,6 @@ onMount(() => {
 });
 </script>
 
-<LoadingIndicator loading={loading}/>
-
 <section>
 	<div class="toolbar" style="text-align: left;">
 		<div>Reports: {reports.length}</div>
diff --git a/svelte/src/admin_panel/EmailReporters.svelte b/svelte/src/admin_panel/EmailReporters.svelte
index 7d2d8bf..9af6056 100644
--- a/svelte/src/admin_panel/EmailReporters.svelte
+++ b/svelte/src/admin_panel/EmailReporters.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
 import { onMount, tick } from "svelte";
-import LoadingIndicator from "util/LoadingIndicator.svelte";
 import EmailReportersTable from "./EmailReportersTable.svelte";
 import { get_endpoint } from "lib/PixeldrainAPI";
+import { loading_finish, loading_start } from "lib/Loading";
 
 type Reporter = {
 	from_address: string,
@@ -17,7 +17,6 @@ type Reporter = {
 	last_message_html: string,
 }
 
-let loading = true
 let reporters: Reporter[] = []
 $: reporters_pending = reporters.reduce((acc, val) => {
 	if (val.status === "pending") {
@@ -39,7 +38,7 @@ $: reporters_rejected = reporters.reduce((acc, val) => {
 }, [])
 
 const get_reporters = async () => {
-	loading = true;
+	loading_start()
 	try {
 		const resp = await fetch(get_endpoint()+"/admin/abuse_reporter");
 		if(resp.status >= 400) {
@@ -49,7 +48,7 @@ const get_reporters = async () => {
 	} catch (err) {
 		alert(err);
 	} finally {
-		loading = false;
+		loading_finish()
 	}
 };
 
@@ -137,8 +136,6 @@ const delete_reporter = async (reporter: Reporter) => {
 onMount(get_reporters);
 </script>
 
-<LoadingIndicator loading={loading}/>
-
 <section>
 	<div class="toolbar" style="text-align: left;">
 		<div class="toolbar_spacer"></div>
diff --git a/svelte/src/admin_panel/Home.svelte b/svelte/src/admin_panel/Home.svelte
index 00cb909..309c581 100644
--- a/svelte/src/admin_panel/Home.svelte
+++ b/svelte/src/admin_panel/Home.svelte
@@ -276,24 +276,12 @@ onDestroy(() => {
 			</tr>
 		</thead>
 		<tbody>
-			<tr>
-				<td>File statistics (per file)</td>
-				<td>{status.stats_watcher_threads}</td>
-				<td>{status.stats_watcher_listeners}</td>
-				<td>{(status.stats_watcher_listeners / status.stats_watcher_threads).toPrecision(3)}</td>
-			</tr>
 			<tr>
 				<td>Filesystem statistics (per file)</td>
 				<td>{status.filesystem_watcher_threads}</td>
 				<td>{status.filesystem_watcher_listeners}</td>
 				<td>{(status.filesystem_watcher_listeners / status.filesystem_watcher_threads).toPrecision(3)}</td>
 			</tr>
-			<tr>
-				<td>Rate limits (per IP)</td>
-				<td>{status.rate_limit_watcher_threads}</td>
-				<td>{status.rate_limit_watcher_listeners}</td>
-				<td>{(status.rate_limit_watcher_listeners / status.rate_limit_watcher_threads).toPrecision(3)}</td>
-			</tr>
 			<tr>
 				<td>Downloads (per IP)</td>
 				<td>{status.download_clients}</td>
diff --git a/svelte/src/admin_panel/IPBans.svelte b/svelte/src/admin_panel/IPBans.svelte
index e7e600b..0f54702 100644
--- a/svelte/src/admin_panel/IPBans.svelte
+++ b/svelte/src/admin_panel/IPBans.svelte
@@ -2,7 +2,7 @@
 import { onMount } from "svelte";
 import { formatDate } from "util/Formatting";
 import Expandable from "util/Expandable.svelte";
-import LoadingIndicator from "util/LoadingIndicator.svelte";
+import { loading_finish } from "lib/Loading";
 
 const abuse_types = [
 	"copyright",
@@ -15,7 +15,6 @@ const abuse_types = [
 	"revenge_porn",
 ]
 
-let loading = true
 let rows = []
 let total_offences = 0
 
@@ -25,7 +24,7 @@ let new_ban_address
 let new_ban_reason = abuse_types[0]
 
 const get_bans = async () => {
-	loading = true;
+	loading_start()
 	try {
 		const resp = await fetch(window.api_endpoint+"/admin/ip_ban");
 		if(resp.status >= 400) {
@@ -39,7 +38,7 @@ const get_bans = async () => {
 	} catch (err) {
 		alert(err);
 	} finally {
-		loading = false;
+		loading_finish();
 	}
 };
 
@@ -95,8 +94,6 @@ const delete_ban = async (addr) => {
 onMount(get_bans);
 </script>
 
-<LoadingIndicator loading={loading}/>
-
 <section>
 	<div class="toolbar">
 		<div class="toolbar_label">
diff --git a/svelte/src/admin_panel/InvoiceVAT.svelte b/svelte/src/admin_panel/InvoiceVAT.svelte
index 8aad009..14be4a0 100644
--- a/svelte/src/admin_panel/InvoiceVAT.svelte
+++ b/svelte/src/admin_panel/InvoiceVAT.svelte
@@ -1,13 +1,12 @@
 <script lang="ts">
 import { onMount } from "svelte";
 import { formatDate } from "util/Formatting";
-import LoadingIndicator from "util/LoadingIndicator.svelte";
 import Expandable from "util/Expandable.svelte";
 import SortableTable, { FieldType } from "layout/SortableTable.svelte";
 import { country_name, get_admin_invoices, type Invoice } from "lib/AdminAPI";
 import PayPalVat from "./PayPalVAT.svelte";
+import { loading_finish, loading_start } from "lib/Loading";
 
-let loading = true
 let invoices: Invoice[] = []
 
 let year = 0
@@ -62,7 +61,7 @@ const obj_to_list_eu = (obj: {[id: string]: Total}) => {
 }
 
 const get_invoices = async () => {
-	loading = true;
+	loading_start()
 	try {
 		const resp = await get_admin_invoices(year, month)
 
@@ -92,7 +91,7 @@ const get_invoices = async () => {
 	} catch (err) {
 		alert(err);
 	} finally {
-		loading = false;
+		loading_finish()
 	}
 };
 
@@ -158,8 +157,6 @@ let records_hidden = 0
 let invoices_filtered: Invoice[] = []
 </script>
 
-<LoadingIndicator loading={loading}/>
-
 <section>
 	<h3>{year + "-" + ("00"+(month)).slice(-2)}</h3>
 	<div class="toolbar">
diff --git a/svelte/src/admin_panel/MollieSettlement.svelte b/svelte/src/admin_panel/MollieSettlement.svelte
index 94fed96..10860be 100644
--- a/svelte/src/admin_panel/MollieSettlement.svelte
+++ b/svelte/src/admin_panel/MollieSettlement.svelte
@@ -2,11 +2,10 @@
 import { onMount } from "svelte";
 import { formatDate } from "util/Formatting";
 import { mollie_proxy_call } from "./MollieAPI";
-import LoadingIndicator from "util/LoadingIndicator.svelte";
 import Euro from "util/Euro.svelte";
+import { loading_start } from "lib/Loading";
 
 export let settlement = {}
-let loading = true
 let payments = []
 
 let per_country = {}
@@ -49,7 +48,7 @@ const load_all_payments = async (settlement_id) => {
 }
 
 const get_payments = async () => {
-	loading = true;
+	loading_start()
 	try {
 		payments = await load_all_payments(settlement.id)
 
@@ -84,15 +83,13 @@ const get_payments = async () => {
 	} catch (err) {
 		alert(err);
 	} finally {
-		loading = false;
+		loading_finish()
 	}
 };
 
 onMount(get_payments);
 </script>
 
-<LoadingIndicator loading={loading}/>
-
 <h3>Accounting information</h3>
 
 {#if per_country.NL}
diff --git a/svelte/src/admin_panel/MollieSettlements.svelte b/svelte/src/admin_panel/MollieSettlements.svelte
index a1c87e0..385dea1 100644
--- a/svelte/src/admin_panel/MollieSettlements.svelte
+++ b/svelte/src/admin_panel/MollieSettlements.svelte
@@ -2,17 +2,16 @@
 import { onMount } from "svelte";
 import { formatDate } from "util/Formatting";
 import Expandable from "util/Expandable.svelte";
-import LoadingIndicator from "util/LoadingIndicator.svelte";
 import Euro from "util/Euro.svelte";
 import MollieSettlement from "./MollieSettlement.svelte";
 import { mollie_proxy_call } from "./MollieAPI";
+import { loading_finish, loading_start } from "lib/Loading";
 
-let loading = true
 let response = {}
 let settlements = []
 
 const get_settlements = async () => {
-	loading = true;
+	loading_start()
 	try {
 		const req = await mollie_proxy_call("settlements?limit=250");
 		if(req.status >= 400) {
@@ -23,15 +22,13 @@ const get_settlements = async () => {
 	} catch (err) {
 		alert(err);
 	} finally {
-		loading = false;
+		loading_finish()
 	}
 };
 
 onMount(get_settlements);
 </script>
 
-<LoadingIndicator loading={loading}/>
-
 <section>
 	{#each settlements as row (row.id)}
 		<Expandable click_expand>
diff --git a/svelte/src/admin_panel/PayPalTaxes.svelte b/svelte/src/admin_panel/PayPalTaxes.svelte
index 70fe118..0360af0 100644
--- a/svelte/src/admin_panel/PayPalTaxes.svelte
+++ b/svelte/src/admin_panel/PayPalTaxes.svelte
@@ -2,10 +2,9 @@
 import { onMount } from "svelte";
 import { formatDate } from "util/Formatting";
 import Expandable from "util/Expandable.svelte";
-import LoadingIndicator from "util/LoadingIndicator.svelte";
 import Euro from "util/Euro.svelte";
+import { loading_finish, loading_start } from "lib/Loading";
 
-let loading = true
 let response = {}
 let payments = []
 
@@ -40,8 +39,8 @@ const get_payments = async () => {
 		fee: 0,
 	}
 	payments = []
-	loading = true;
 
+	loading_start()
 	try {
 		await get_page("https://api.mollie.com/v2/payments?limit=250")
 
@@ -76,7 +75,7 @@ const get_payments = async () => {
 	} catch (err) {
 		alert(err);
 	} finally {
-		loading = false;
+		loading_finish()
 	}
 }
 
@@ -118,8 +117,6 @@ onMount(() => {
 });
 </script>
 
-<LoadingIndicator loading={loading}/>
-
 <section>
 	<div class="toolbar" style="text-align: left;">
 		<div>Payments: {payments.length}</div>
diff --git a/svelte/src/admin_panel/user_bans/UserBans.svelte b/svelte/src/admin_panel/user_bans/UserBans.svelte
index aa3c7c7..81e180c 100644
--- a/svelte/src/admin_panel/user_bans/UserBans.svelte
+++ b/svelte/src/admin_panel/user_bans/UserBans.svelte
@@ -2,19 +2,18 @@
 import { onMount } from "svelte";
 import { formatDate } from "util/Formatting";
 import Expandable from "util/Expandable.svelte";
-import LoadingIndicator from "util/LoadingIndicator.svelte";
 import Button from "layout/Button.svelte"
 import UserFiles from "./UserFiles.svelte";
 import BanDetails from "./BanDetails.svelte";
 import UserLists from "./UserLists.svelte";
+import { loading_finish, loading_start } from "lib/Loading";
 
-let loading = true
 let rows = []
 let total_offences = 0
 let expanded = false
 
 const get_bans = async () => {
-	loading = true;
+	loading_start()
 	try {
 		const resp = await fetch(window.api_endpoint+"/admin/user_ban");
 		if(resp.status >= 400) {
@@ -28,7 +27,7 @@ const get_bans = async () => {
 	} catch (err) {
 		alert(err);
 	} finally {
-		loading = false;
+		loading_finish()
 	}
 };
 
@@ -105,8 +104,6 @@ const block_all_files = async (row, reason) => {
 onMount(get_bans);
 </script>
 
-<LoadingIndicator loading={loading}/>
-
 <section>
 	<div class="toolbar">
 		<div class="toolbar_label">
diff --git a/svelte/src/admin_panel/user_bans/UserFiles.svelte b/svelte/src/admin_panel/user_bans/UserFiles.svelte
index 241cb92..3f7fb9b 100644
--- a/svelte/src/admin_panel/user_bans/UserFiles.svelte
+++ b/svelte/src/admin_panel/user_bans/UserFiles.svelte
@@ -1,16 +1,16 @@
 <script>
 import { onMount } from "svelte";
-import LoadingIndicator from "util/LoadingIndicator.svelte";
 import { formatDataVolume, formatDate } from "util/Formatting";
 import SortButton from "layout/SortButton.svelte";
+import { loading_finish, loading_start } from "lib/Loading";
 
 export let user_id = ""
 let files = []
-let loading = true
 
 onMount(() => reload())
 
 export const reload = async () => {
+	loading_start()
 	try {
 		const req = await fetch(
 			window.api_endpoint+"/user/files",
@@ -30,7 +30,7 @@ export const reload = async () => {
 	} catch (err) {
 		alert(err);
 	} finally {
-		loading = false;
+		loading_finish()
 	}
 }
 
@@ -67,8 +67,6 @@ const sort = (field) => {
 }
 </script>
 
-<LoadingIndicator loading={loading}/>
-
 <div class="table_scroll">
 	<table>
 		<thead>
diff --git a/svelte/src/admin_panel/user_bans/UserLists.svelte b/svelte/src/admin_panel/user_bans/UserLists.svelte
index 2f2ef61..4b36407 100644
--- a/svelte/src/admin_panel/user_bans/UserLists.svelte
+++ b/svelte/src/admin_panel/user_bans/UserLists.svelte
@@ -1,15 +1,15 @@
 <script>
+import { loading_finish, loading_start } from "lib/Loading";
 import { onMount } from "svelte";
-import LoadingIndicator from "util/LoadingIndicator.svelte";
 import { formatDate } from "util/Formatting";
 
 export let user_id = ""
 let lists = []
-let loading = true
 
 onMount(() => reload())
 
 export const reload = async () => {
+	loading_start()
 	try {
 		const req = await fetch(
 			window.api_endpoint+"/user/lists",
@@ -28,13 +28,11 @@ export const reload = async () => {
 	} catch (err) {
 		alert(err);
 	} finally {
-		loading = false;
+		loading_finish()
 	}
 }
 </script>
 
-<LoadingIndicator loading={loading}/>
-
 <div class="table_scroll">
 	<table>
 		<thead>
diff --git a/svelte/src/filesystem/Breadcrumbs.svelte b/svelte/src/filesystem/Breadcrumbs.svelte
index 24c7e6c..68ee491 100644
--- a/svelte/src/filesystem/Breadcrumbs.svelte
+++ b/svelte/src/filesystem/Breadcrumbs.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-import { fs_encode_path, node_is_shared } from "./FilesystemAPI";
+import { fs_encode_path, node_is_shared } from "lib/FilesystemAPI";
 import type { FSNavigator } from "./FSNavigator";
 
 export let nav: FSNavigator
@@ -9,8 +9,7 @@ export let nav: FSNavigator
 	{#each $nav.path as node, i (node.path)}
 		<a
 			href={"/d"+fs_encode_path(node.path)}
-			class="breadcrumb button"
-			class:button_highlight={$nav.base_index === i}
+			class="breadcrumb button flat"
 			on:click|preventDefault={() => {nav.navigate(node.path, true)}}
 		>
 			{#if node.abuse_type !== undefined}
@@ -22,19 +21,24 @@ export let nav: FSNavigator
 				{node.name}
 			</div>
 		</a>
+		{#if $nav.base_index !== i}
+			<i class="icon">chevron_right</i>
+		{/if}
 	{/each}
 </div>
 
 <style>
 .breadcrumbs {
-	flex-grow: 1;
-	flex-shrink: 1;
+	flex: 0 0 auto;
 	display: flex;
 	align-items: center;
-	justify-content: center;
+	justify-content: left;
 	flex-wrap: wrap;
 	flex-direction: row;
 	overflow: hidden;
+	background: var(--shaded_background);
+	backdrop-filter: blur(4px);
+	border-bottom: 1px solid var(--separator);
 }
 .breadcrumb {
 	min-width: 1em;
@@ -42,6 +46,8 @@ export let nav: FSNavigator
 	word-break: break-all;
 	display: inline-flex;
 	flex-direction: row;
+	background-color: unset;
+	box-shadow: none;
 }
 .node_name {
 	max-width: 20vw;
diff --git a/svelte/src/filesystem/DetailsWindow.svelte b/svelte/src/filesystem/DetailsWindow.svelte
index 86797a2..e8ccaba 100644
--- a/svelte/src/filesystem/DetailsWindow.svelte
+++ b/svelte/src/filesystem/DetailsWindow.svelte
@@ -2,7 +2,7 @@
 import Chart from "util/Chart.svelte";
 import { formatDataVolume, formatDate, formatThousands } from "util/Formatting";
 import Modal from "util/Modal.svelte";
-import { fs_path_url, fs_share_hotlink_url, fs_share_url, fs_timeseries, type FSNode } from "./FilesystemAPI";
+import { fs_path_url, fs_share_hotlink_url, fs_share_url, fs_timeseries, type FSNode } from "lib/FilesystemAPI";
 import { color_by_name } from "util/Util.svelte";
 import { tick } from "svelte";
 import CopyButton from "layout/CopyButton.svelte";
diff --git a/svelte/src/filesystem/FSNavigator.ts b/svelte/src/filesystem/FSNavigator.ts
index ace8cca..aaa6780 100644
--- a/svelte/src/filesystem/FSNavigator.ts
+++ b/svelte/src/filesystem/FSNavigator.ts
@@ -1,6 +1,6 @@
-import { fs_get_node, fs_encode_path, fs_split_path } from "./FilesystemAPI";
-import type { FSNode, FSPath, FSPermissions, FSContext } from "./FilesystemAPI";
-import type { Writable } from "svelte/store"
+import { loading_finish, loading_start } from "lib/Loading";
+import { fs_get_node, fs_encode_path, fs_split_path } from "../lib/FilesystemAPI";
+import type { FSNode, FSPath, FSPermissions, FSContext } from "../lib/FilesystemAPI";
 
 export class FSNavigator {
 	// Parts of the raw API response
@@ -22,27 +22,16 @@ export class FSNavigator {
 
 	constructor(history_enabled = true) {
 		this.history_enabled = history_enabled
-
-		// If history logging is enabled we capture the popstate event, which
-		// fires when the user uses the back and forward buttons in the browser.
-		// Instead of reloading the page we use the navigator to navigate to the
-		// new page
-		if (history_enabled) {
-			window.addEventListener("popstate", () => {
-				// Get the part of the URL after the fs root and navigate to it
-				const path = document.location.pathname.replace("/d/", "")
-				this.navigate(decodeURIComponent(path), false)
-			})
-		}
 	}
 
-	// If you set the loading property to a boolean writable store the navigator
-	// will use it to publish its loading states
-	loading: Writable<boolean> | null = null
-	set_loading = (b: boolean) => {
-		if (this.loading !== null) {
-			this.loading.set(b)
-		}
+	// The popstate event can be used to listen for navigation events. Register
+	// this event listener on the <svelte:window> in the parent element. When
+	// the user presses the back or forward buttons in the browser we'll catch
+	// the event and navigate to the proper directory
+	popstate = (e: PopStateEvent) => {
+		// Get the part of the URL after the fs root and navigate to it
+		const path = window.location.pathname.replace(/^\/d/, "")
+		this.navigate(decodeURI(path), false)
 	}
 
 	// The FSNavigator acts as a svelte store. This allows for DOM reactivity.
@@ -72,7 +61,7 @@ export class FSNavigator {
 		console.debug("Navigating to path", path, push_history)
 
 		try {
-			this.set_loading(true)
+			loading_start()
 			const resp = await fs_get_node(path)
 			this.open_node(resp, push_history)
 		} catch (err: any) {
@@ -89,7 +78,7 @@ export class FSNavigator {
 				alert("Error: " + err)
 			}
 		} finally {
-			this.set_loading(false)
+			loading_finish()
 		}
 	}
 
@@ -108,7 +97,7 @@ export class FSNavigator {
 		// we still replace the URL with replaceState. This way the user is not
 		// greeted to a 404 page when refreshing after renaming a file
 		if (this.history_enabled) {
-			window.document.title = node.path[node.base_index].name + " ~ pixeldrain"
+			window.document.title = node.path[node.base_index].name + " / FNX"
 			const url = "/d" + fs_encode_path(node.path[node.base_index].path) + window.location.hash
 			if (push_history) {
 				window.history.pushState({}, window.document.title, url)
@@ -189,14 +178,14 @@ export class FSNavigator {
 
 		let siblings: Array<FSNode>
 		try {
-			this.set_loading(true)
+			loading_start()
 			siblings = await this.get_siblings()
 		} catch (err) {
 			console.error(err)
 			alert(err)
 			return
 		} finally {
-			this.set_loading(false)
+			loading_finish()
 		}
 
 		let next_sibling: FSNode | null = null
diff --git a/svelte/src/filesystem/FileStats.svelte b/svelte/src/filesystem/FileStats.svelte
index b8a00b3..6e70343 100644
--- a/svelte/src/filesystem/FileStats.svelte
+++ b/svelte/src/filesystem/FileStats.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 import { onMount } from "svelte";
 import { formatDataVolume, formatThousands } from "util/Formatting"
-import { fs_path_url } from "./FilesystemAPI";
+import { fs_path_url } from "lib/FilesystemAPI";
 import type { FSNavigator } from "./FSNavigator";
 
 export let nav: FSNavigator
@@ -104,7 +104,7 @@ const close_socket = () => {
 
 		</div>
 		<div class="group">
-			<div class="label">Transfer used</div>
+			<div class="label">Egress</div>
 			<div class="stat">
 				{loading ? "Loading..." : formatDataVolume(transfer_used, 3)}
 			</div>
@@ -140,18 +140,11 @@ const close_socket = () => {
 	text-align: center;
 }
 .label {
-	padding-left: 0.5em;
-	text-align: left;
+	text-align: center;
 	font-size: 0.8em;
 	line-height: 1em;
 }
 .stat {
 	line-height: 1.2em;
 }
-@media (max-width: 1000px) {
-	.label {
-		text-align: center;
-		padding-left: 0;
-	}
-}
 </style>
diff --git a/svelte/src/filesystem/Filesystem.svelte b/svelte/src/filesystem/Filesystem.svelte
index 262d285..d5bc72b 100644
--- a/svelte/src/filesystem/Filesystem.svelte
+++ b/svelte/src/filesystem/Filesystem.svelte
@@ -1,20 +1,17 @@
 <script lang="ts">
 import { onMount } from "svelte";
-import LoadingIndicator from "util/LoadingIndicator.svelte";
 import EditWindow from "./edit_window/EditWindow.svelte";
 import Toolbar from "./Toolbar.svelte";
 import Breadcrumbs from "./Breadcrumbs.svelte";
 import DetailsWindow from "./DetailsWindow.svelte";
 import FilePreview from "./viewers/FilePreview.svelte";
 import FSUploadWidget from "./upload_widget/FSUploadWidget.svelte";
-import { fs_download, type FSPath } from "./FilesystemAPI";
-import Menu from "./Menu.svelte";
+import { fs_download, type FSPath } from "lib/FilesystemAPI";
 import { FSNavigator } from "./FSNavigator"
-import { writable } from "svelte/store";
 import { css_from_path } from "filesystem/edit_window/Branding";
 import AffiliatePrompt from "user_home/AffiliatePrompt.svelte";
+import { current_page_store } from "wrap/RouterStore";
 
-let file_viewer: HTMLDivElement
 let file_preview: FilePreview
 let toolbar: Toolbar
 let upload_widget: FSUploadWidget
@@ -22,25 +19,37 @@ let details_visible = false
 let edit_window: EditWindow
 let edit_visible = false
 
-const loading = writable(true)
 const nav = new FSNavigator(true)
 
 onMount(() => {
-	nav.loading = loading
-	nav.open_node((window as any).initial_node as FSPath, false)
+	if ((window as any).intial_node !== undefined) {
+		console.debug("Loading initial node")
+		nav.open_node((window as any).initial_node as FSPath, false)
+	} else {
+		console.debug("No initial node, fetching path", window.location.pathname)
+		nav.navigate(decodeURI(window.location.pathname).replace(/^\/d/, ""), false)
+	}
+
+	const page_sub = current_page_store.subscribe(() => {
+		console.debug("Caught page transition to", window.location.pathname)
+		nav.navigate(decodeURI(window.location.pathname).replace(/^\/d/, ""), false)
+	})
 
 	// Subscribe to navigation updates. This function returns a deconstructor
 	// which we can conveniently return from our mount function as well
-	return nav.subscribe(nav => {
+	const nav_sub = nav.subscribe(nav => {
 		if (!nav.initialized) {
 			return
 		}
 
 		// Custom CSS rules for the whole viewer
 		document.documentElement.style = css_from_path(nav.path)
-
-		loading.set(false)
 	})
+	return () => {
+		page_sub()
+		nav_sub()
+		document.documentElement.style = ""
+	}
 })
 
 const keydown = (e: KeyboardEvent) => {
@@ -127,50 +136,41 @@ const keydown = (e: KeyboardEvent) => {
 
 <svelte:window on:keydown={keydown} />
 
-<div bind:this={file_viewer} class="file_viewer">
-	<div class="headerbar">
-		<Menu/>
-		<Breadcrumbs nav={nav}/>
-	</div>
+<div class="filesystem">
+	<Breadcrumbs nav={nav}/>
 
-	<div class="viewer_area">
-		<Toolbar
-			bind:this={toolbar}
+	<div class="file_preview">
+		<FilePreview
+			bind:this={file_preview}
 			nav={nav}
-			file_viewer={file_viewer}
-			file_preview={file_preview}
-			bind:details_visible={details_visible}
+			upload_widget={upload_widget}
 			edit_window={edit_window}
-			bind:edit_visible={edit_visible}
+			on:open_sibling={e => nav.open_sibling(e.detail)}
 			on:download={() => fs_download(nav.base)}
+			on:details={() => details_visible = !details_visible}
 		/>
-
-		<div class="file_preview">
-			<FilePreview
-				bind:this={file_preview}
-				nav={nav}
-				upload_widget={upload_widget}
-				edit_window={edit_window}
-				on:open_sibling={e => nav.open_sibling(e.detail)}
-				on:download={() => fs_download(nav.base)}
-				on:details={() => details_visible = !details_visible}
-			/>
-		</div>
 	</div>
 
-	<DetailsWindow nav={nav} bind:visible={details_visible} />
-
-	<EditWindow nav={nav} bind:this={edit_window} bind:visible={edit_visible} />
-
-	<!-- This one is included at the highest level so uploads can keep running
-		even when the user navigates to a different directory -->
-	<FSUploadWidget nav={nav} bind:this={upload_widget} />
-
-	<AffiliatePrompt/>
-
-	<LoadingIndicator loading={$loading}/>
+	<Toolbar
+		bind:this={toolbar}
+		nav={nav}
+		bind:details_visible={details_visible}
+		edit_window={edit_window}
+		bind:edit_visible={edit_visible}
+		on:download={() => fs_download(nav.base)}
+	/>
 </div>
 
+<DetailsWindow nav={nav} bind:visible={details_visible} />
+
+<EditWindow nav={nav} bind:this={edit_window} bind:visible={edit_visible} />
+
+<!-- This one is included at the highest level so uploads can keep running
+	even when the user navigates to a different directory -->
+<FSUploadWidget nav={nav} bind:this={upload_widget} />
+
+<AffiliatePrompt/>
+
 <style>
 :global(*) {
 	transition: background-color 0.2s,
@@ -183,56 +183,15 @@ const keydown = (e: KeyboardEvent) => {
 }
 
 /* Viewer container */
-.file_viewer {
-	position: absolute;
-	top: 0;
-	right: 0;
-	bottom: 0;
-	left: 0;
+.filesystem {
 	display: flex;
 	flex-direction: column;
-	overflow: hidden;
-
-	/* Force some variable usage that is normally out of scope */
-	color: var(--body_text_color);
-
-	background-image: var(--background_image, var(--background_pattern));
-	background-color: var(--background_pattern_color);
-	background-size: var(--background_image_size, initial);
-	background-position: var(--background_image_position, initial);
-	background-repeat: var(--background_image_repeat, repeat);
-}
-
-/* Headerbar (row 1) */
-.headerbar {
-	flex: 0 0 0;
-	display: flex;
-	flex-direction: row;
-	text-align: left;
-	box-shadow: none;
-	background-color: var(--shaded_background);
-	backdrop-filter: blur(4px);
-}
-
-/* File preview area (row 2) */
-.viewer_area {
-	flex: 1 1 0;
-	display: flex;
-	flex-direction: row;
-	overflow: hidden;
-}
-
-/* This max-width needs to be synced with the .toolbar max-width in
-Toolbar.svelte and the .label max-width in FileStats.svelte */
-@media (max-width: 1000px) {
-	.viewer_area {
-		flex-direction: column-reverse;
-	}
+	height: 100vh;
+	width: 100%;
 }
 
 .file_preview {
-	flex: 1 1 0;
+	flex: 1 1 auto;
 	overflow: auto;
-	border: 1px solid var(--separator);
 }
 </style>
diff --git a/svelte/src/filesystem/ShareDialog.svelte b/svelte/src/filesystem/ShareDialog.svelte
index bf55bbb..a2edcdb 100644
--- a/svelte/src/filesystem/ShareDialog.svelte
+++ b/svelte/src/filesystem/ShareDialog.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 import type { FSNavigator } from "./FSNavigator";
-import { fs_node_icon, fs_share_hotlink_url, fs_share_url, fs_update, node_is_shared, type FSNode, type FSPermissions } from "./FilesystemAPI";
+import { fs_node_icon, fs_share_hotlink_url, fs_share_url, fs_update, node_is_shared, type FSNode, type FSPermissions } from "lib/FilesystemAPI";
 import { copy_text } from "util/Util.svelte";
 import CopyButton from "layout/CopyButton.svelte";
 import Dialog from "layout/Dialog.svelte";
diff --git a/svelte/src/filesystem/Toolbar.svelte b/svelte/src/filesystem/Toolbar.svelte
index 67c1feb..699fb2b 100644
--- a/svelte/src/filesystem/Toolbar.svelte
+++ b/svelte/src/filesystem/Toolbar.svelte
@@ -4,8 +4,7 @@ import { copy_text } from "util/Util.svelte";
 import FileStats from "./FileStats.svelte";
 import type { FSNavigator } from "./FSNavigator";
 import EditWindow from "./edit_window/EditWindow.svelte";
-import FilePreview from "./viewers/FilePreview.svelte";
-import { fs_share_url } from "./FilesystemAPI";
+import { fs_share_url } from "lib/FilesystemAPI";
 import ShareDialog from "./ShareDialog.svelte";
 
 let dispatch = createEventDispatcher()
@@ -14,8 +13,6 @@ export let nav: FSNavigator
 export let details_visible = false
 export let edit_window: EditWindow
 export let edit_visible = false
-export let file_viewer: HTMLDivElement
-export let file_preview: FilePreview
 let share_dialog: ShareDialog
 
 $: share_url = fs_share_url($nav.path)
@@ -30,46 +27,11 @@ export const copy_link = () => {
 	link_copied = true
 	setTimeout(() => {link_copied = false}, 60000)
 }
-
-let fullscreen = false
-export const toggle_fullscreen = () => {
-	if (document.fullscreenElement !== null) {
-		try {
-			document.exitFullscreen()
-		} catch (err) {
-			console.debug("Failed to exit fullscreen", err)
-		}
-		fullscreen = false
-	} else {
-		if (!file_preview.toggle_fullscreen()) {
-			file_viewer.requestFullscreen()
-		}
-		fullscreen = true
-	}
-}
-
-let expanded = true
-let expand = (e: Event) => {
-	e.preventDefault()
-	e.stopPropagation()
-	expanded = !expanded
-}
 </script>
 
-<div class="toolbar" class:expanded>
-	<div class="stats_container" on:click={expand} on:keypress={expand} role="button" tabindex="0">
-		<button class="button_expand hidden_vertical" on:click={expand}>
-			{#if expanded}
-				<i class="icon">expand_more</i>
-			{:else}
-				<i class="icon">expand_less</i>
-			{/if}
-		</button>
-		<FileStats nav={nav}/>
-	</div>
-
-	<div class="separator"></div>
+<div class="toolbar">
 	<div class="grid">
+		<FileStats nav={nav}/>
 
 		<div class="button_row">
 			<button on:click={() => {nav.open_sibling(-1)}}>
@@ -83,8 +45,6 @@ let expand = (e: Event) => {
 			</button>
 		</div>
 
-		<div class="separator hidden_horizontal"></div>
-
 		<button on:click={() => dispatch("download")}>
 			<i class="icon">save</i>
 			<span>Download</span>
@@ -105,21 +65,6 @@ let expand = (e: Event) => {
 			</button>
 		{/if}
 
-		<button
-			class="toolbar_button"
-			on:click={toggle_fullscreen}
-			class:button_highlight={fullscreen}
-			title="Open page in full screen mode">
-			{#if fullscreen}
-				<i class="icon">fullscreen_exit</i>
-			{:else}
-				<i class="icon">fullscreen</i>
-			{/if}
-			<span>Fullscreen</span>
-		</button>
-
-		<div class="separator hidden_horizontal"></div>
-
 		<button on:click={() => details_visible = !details_visible} class:button_highlight={details_visible}>
 			<i class="icon">help</i>
 			<span>Deta<u>i</u>ls</span>
@@ -140,22 +85,17 @@ let expand = (e: Event) => {
 .toolbar {
 	flex: 0 0 auto;
 	overflow-x: hidden;
-	overflow-y: scroll;
+	overflow-y: hidden;
 	transition: max-height 0.3s;
-	background-color: var(--shaded_background);
+	border-top: 1px solid var(--separator);
+
+	background: var(--shaded_background);
 	backdrop-filter: blur(4px);
 }
 .grid {
 	display: grid;
 	grid-template-columns: repeat(auto-fit, minmax(7.5em, 1fr));
 }
-.separator {
-	height: 1px;
-	margin: 2px 0;
-	width: 100%;
-	background-color: var(--separator);
-}
-
 .button_row {
 	display: flex;
 	flex-direction: row;
@@ -164,46 +104,4 @@ let expand = (e: Event) => {
 	flex: 1 1 auto;
 	justify-content: center;
 }
-
-.stats_container {
-	display: flex;
-	flex-direction: column;
-}
-.button_expand {
-	line-height: 1em;
-}
-
-.hidden_vertical {
-	display: none;
-}
-.hidden_horizontal {
-	display: block;
-}
-
-/* This max-width needs to be synced with the .viewer_area max-width in
-Toolbar.svelte and the .label max-width in FileStats.svelte */
-@media (max-width: 1000px) {
-	.toolbar {
-		overflow-y: hidden;
-		max-height: 2.1em;
-	}
-	.toolbar.expanded {
-		overflow-y: scroll;
-		max-height: 25vh;
-	}
-	.stats_container {
-		flex-direction: row;
-	}
-	.separator {
-		margin: 0;
-	}
-
-	.hidden_vertical {
-		display: block;
-	}
-	.hidden_horizontal {
-		display: none;
-	}
-}
-
 </style>
diff --git a/svelte/src/filesystem/edit_window/AccessControl.svelte b/svelte/src/filesystem/edit_window/AccessControl.svelte
index 3588a8e..45c2885 100644
--- a/svelte/src/filesystem/edit_window/AccessControl.svelte
+++ b/svelte/src/filesystem/edit_window/AccessControl.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 import Button from "layout/Button.svelte";
-import type { FSPermissions, NodeOptions } from "filesystem/FilesystemAPI";
+import type { FSPermissions, NodeOptions } from "lib/FilesystemAPI";
 import PermissionButton from "./PermissionButton.svelte";
 
 export let options: NodeOptions
diff --git a/svelte/src/filesystem/edit_window/Branding.ts b/svelte/src/filesystem/edit_window/Branding.ts
index 88d07e0..2f3ace6 100644
--- a/svelte/src/filesystem/edit_window/Branding.ts
+++ b/svelte/src/filesystem/edit_window/Branding.ts
@@ -2,10 +2,38 @@ import parse from "pure-color/parse";
 import rgb2hsl from "pure-color/convert/rgb2hsl";
 import hsl2rgb from "pure-color/convert/hsl2rgb";
 import rgb2hex from "pure-color/convert/rgb2hex";
+import type { FSNode, FSNodeProperties } from "lib/FilesystemAPI";
+
+type Style = {
+	input_background: string,
+	input_hover_background: string,
+	input_text: string,
+	highlight_color: string,
+	highlight_background: string,
+	highlight_text_color: string,
+	link_color: string,
+	danger_color: string,
+	danger_text_color: string,
+	background_color: string,
+	background: string,
+	background_text_color: string,
+	background_pattern_color: string,
+	body_color: string,
+	body_background: string,
+	body_text_color: string,
+	shaded_background: string,
+	separator: string,
+	shadow_color: string,
+	card_color: string,
+	background_image: string,
+	background_image_size: string,
+	background_image_position: string,
+	background_image_repeat: string,
+}
 
 // Generate a branding style from a file's properties map
-export const branding_from_path = path => {
-	let style = {}
+export const branding_from_path = (path: Array<FSNode>) => {
+	let style = <Style>{}
 	for (let node of path) {
 		add_styles(style, node.properties)
 	}
@@ -15,17 +43,17 @@ export const branding_from_path = path => {
 
 // The last style which was generated is cached, when we don't have a complete
 // path to generate the style with we will use the cached style as a basis
-let last_generated_style = {}
-export const branding_from_node = node => {
+let last_generated_style = <Style>{}
+export const branding_from_node = (node: FSNode) => {
 	add_styles(last_generated_style, node.properties)
 	return gen_css(last_generated_style)
 }
 
-export const css_from_path = path => {
+export const css_from_path = (path: Array<FSNode>) => {
 	return gen_css(branding_from_path(path))
 }
 
-const gen_css = style => {
+const gen_css = (style: Style) => {
 	return Object.entries(style).map(([key, value]) => `--${key}:${value}`).join(';');
 }
 
@@ -33,7 +61,7 @@ const gen_css = style => {
 // existing style which is passed as the first argument. When navigating to a
 // path this function is executed on every member of the path so all the styles
 // get combined
-const add_styles = (style, properties) => {
+const add_styles = (style: Style, properties: FSNodeProperties) => {
 	if (!properties || !properties.branding_enabled || properties.branding_enabled !== "true") {
 		return
 	}
@@ -83,7 +111,7 @@ const add_styles = (style, properties) => {
 	}
 }
 
-const add_contrast = (color, amt) => {
+const add_contrast = (color: string, amt: number) => {
 	let hsl = rgb2hsl(parse(color)) // Convert hex to hsl
 	// If the lightness is less than 40 it is considered a dark colour. This
 	// threshold is 40 instead of 50 because overall dark text is more legible
@@ -96,20 +124,20 @@ const add_contrast = (color, amt) => {
 }
 
 // Darken and desaturate. Only used for shadows
-const darken = (color, percent) => {
+const darken = (color: string, percent: number) => {
 	let hsl = rgb2hsl(parse(color)) // Convert hex to hsl
 	hsl[1] = hsl[1] * percent
 	hsl[2] = hsl[2] * percent
 	return rgb2hex(hsl2rgb(hsl)) // Convert back to hex
 }
 
-const set_alpha = (color, amt) => {
+const set_alpha = (color: string, amt: number) => {
 	let rgb = parse(color)
 	rgb.push(amt)
 	return "rgba(" + rgb.join(", ") + ")"
 }
 
-const generate_link_color = (link_color, body_color) => {
+const generate_link_color = (link_color: string, body_color: string) => {
 	let link = rgb2hsl(parse(link_color))
 	let body = rgb2hsl(parse(body_color))
 
diff --git a/svelte/src/filesystem/edit_window/BrandingOptions.svelte b/svelte/src/filesystem/edit_window/BrandingOptions.svelte
index 4bac2ac..890fb37 100644
--- a/svelte/src/filesystem/edit_window/BrandingOptions.svelte
+++ b/svelte/src/filesystem/edit_window/BrandingOptions.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 import { createEventDispatcher } from "svelte";
 import ThemePresets from "./ThemePresets.svelte";
-import { fs_update, fs_node_type, type FSNode, type NodeOptions, node_is_shared, type FSPermissions } from "filesystem/FilesystemAPI";
+import { fs_update, fs_node_type, type FSNode, type NodeOptions, node_is_shared, type FSPermissions } from "lib/FilesystemAPI";
 import CustomBanner from "filesystem/viewers/CustomBanner.svelte";
 import HelpButton from "layout/HelpButton.svelte";
 import FilePicker from "filesystem/filemanager/FilePicker.svelte";
diff --git a/svelte/src/filesystem/edit_window/EditWindow.svelte b/svelte/src/filesystem/edit_window/EditWindow.svelte
index 2f91a7f..10206ee 100644
--- a/svelte/src/filesystem/edit_window/EditWindow.svelte
+++ b/svelte/src/filesystem/edit_window/EditWindow.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-import { fs_rename, fs_update, type FSNode, type NodeOptions } from "filesystem/FilesystemAPI";
+import { fs_rename, fs_update, type FSNode, type NodeOptions } from "lib/FilesystemAPI";
 import Modal from "util/Modal.svelte";
 import BrandingOptions from "./BrandingOptions.svelte";
 import { branding_from_node } from "./Branding";
@@ -39,18 +39,9 @@ export const edit = (f: FSNode, oae = false, open_tab = "") => {
 	}
 
 	options.custom_domain_name = file.custom_domain_name
-
-	options.shared = !(file.id === undefined || file.id === "")
-	if (options.shared) {
-		if (file.link_permissions === undefined) {
-			// Default to read-only for public links
-			file.link_permissions = { owner: false, read: true, write: false, delete: false}
-		} else {
-			options.link_permissions = file.link_permissions
-		}
-		options.user_permissions = file.user_permissions
-		options.password_permissions = file.password_permissions
-	}
+	options.link_permissions = file.link_permissions
+	options.user_permissions = file.user_permissions
+	options.password_permissions = file.password_permissions
 
 	branding_enabled = options.branding_enabled === "true"
 	if (branding_enabled) {
@@ -122,7 +113,7 @@ const save = async (keep_editing = false) => {
 			<i class="icon">share</i>
 			Sharing
 		</button>
-		{#if options.shared && $nav.permissions.owner}
+		{#if $nav.permissions.owner}
 			<button class:button_highlight={tab === "access"} on:click={() => tab = "access"}>
 				<i class="icon">key</i>
 				Access control
diff --git a/svelte/src/filesystem/edit_window/FileOptions.svelte b/svelte/src/filesystem/edit_window/FileOptions.svelte
index c8e8c7a..e0fe186 100644
--- a/svelte/src/filesystem/edit_window/FileOptions.svelte
+++ b/svelte/src/filesystem/edit_window/FileOptions.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 import Button from "layout/Button.svelte";
-import { fs_delete_all, type FSNode } from "filesystem/FilesystemAPI";
+import { fs_delete_all, type FSNode } from "lib/FilesystemAPI";
 import PathLink from "filesystem/util/PathLink.svelte";
 import type { FSNavigator } from "filesystem/FSNavigator";
 
diff --git a/svelte/src/filesystem/edit_window/PermissionButton.svelte b/svelte/src/filesystem/edit_window/PermissionButton.svelte
index e52b38e..e43cf95 100644
--- a/svelte/src/filesystem/edit_window/PermissionButton.svelte
+++ b/svelte/src/filesystem/edit_window/PermissionButton.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 import ToggleButton from "layout/ToggleButton.svelte";
-import type { FSPermissions } from "filesystem/FilesystemAPI";
+import type { FSPermissions } from "lib/FilesystemAPI";
 
 export let permissions = <FSPermissions>{}
 </script>
diff --git a/svelte/src/filesystem/edit_window/SharingOptions.svelte b/svelte/src/filesystem/edit_window/SharingOptions.svelte
index b16b9b2..e96fa47 100644
--- a/svelte/src/filesystem/edit_window/SharingOptions.svelte
+++ b/svelte/src/filesystem/edit_window/SharingOptions.svelte
@@ -1,11 +1,10 @@
 <script lang="ts">
-import { createEventDispatcher } from "svelte";
 import { domain_url } from "util/Util.svelte";
 import CopyButton from "layout/CopyButton.svelte";
 import { formatDate } from "util/Formatting";
-import type { FSNode, NodeOptions } from "filesystem/FilesystemAPI";
+import { node_is_shared, type FSNode, type NodeOptions } from "lib/FilesystemAPI";
+import AccessControl from "./AccessControl.svelte";
 
-let dispatch = createEventDispatcher()
 export let file: FSNode = {} as FSNode
 export let options: NodeOptions
 
@@ -14,8 +13,8 @@ let preview_area: HTMLDivElement
 
 $: share_link = window.location.protocol+"//"+window.location.host+"/d/"+file.id
 $: embed_iframe(file, options)
-let embed_iframe = (file: FSNode, options: NodeOptions) => {
-	if (!options.shared) {
+const embed_iframe = (file: FSNode, options: NodeOptions) => {
+	if (!node_is_shared(file)) {
 		example = false
 		embed_html = "File is not shared, can't generate embed code"
 		return
@@ -24,14 +23,14 @@ let embed_iframe = (file: FSNode, options: NodeOptions) => {
 	let url = domain_url()+"/d/"+file.id
 	embed_html = `<iframe ` +
 		`src="${url}" ` +
-		`style="border: none; width: 100%; max-width 90vw; height: 800px; max-height: 75vh; border-radius: 6px; "` +
+		`style="border: none; width: 100%; max-width 90vw; height: 800px; max-height: 75vh; border-radius: 6px;" ` +
 		`allowfullscreen` +
 		`></iframe>`
 }
 
 let example = false
 const toggle_example = () => {
-	if (options.shared) {
+	if (node_is_shared(file)) {
 		example = !example
 		if (example) {
 			preview_area.innerHTML = embed_html
@@ -41,15 +40,6 @@ const toggle_example = () => {
 	}
 }
 
-const update_shared = () => {
-	// If sharing is enabled we automatically save the file so the user can copy
-	// the sharing link. But if the user disables sharing we don't automatically
-	// save so that the user can't accidentally discard a sharing link that's in
-	// use
-	if (options.shared && !file.id) {
-		dispatch("save")
-	}
-}
 </script>
 
 <fieldset>
@@ -64,34 +54,14 @@ const update_shared = () => {
 		</div>
 	{/if}
 
-	<div>
-		<input
-			form="edit_form"
-			bind:checked={options.shared}
-			on:change={update_shared}
-			id="shared"
-			type="checkbox"
-			class="form_input"
-		/>
-		<label for="shared">Share this file or directory</label>
-	</div>
 	<div class="link_grid">
-		{#if options.shared}
-			<span>Public link: <a href={share_link}>{share_link}</a></span>
+			<a href={share_link}>{share_link}</a>
 			<CopyButton text={share_link}>Copy</CopyButton>
-		{/if}
 	</div>
-
-	<p>
-		When a file or directory is shared it can be accessed through a
-		unique link. You can get the URL with the 'Copy link' button on
-		the toolbar, or share the link with the 'Share' button. If you
-		share a directory all the files within the directory are also
-		accessible from the link.
-	</p>
-
 </fieldset>
 
+<AccessControl options={options}/>
+
 <fieldset>
 	<legend>Embedding</legend>
 	<p>
@@ -108,7 +78,7 @@ const update_shared = () => {
 		<textarea bind:value={embed_html} style="width: 100%; height: 4em;"></textarea>
 		<br/>
 		<CopyButton text={embed_html}>Copy HTML</CopyButton>
-		<button on:click={toggle_example} class:button_highlight={example} disabled={!options.shared}>
+		<button on:click={toggle_example} class:button_highlight={example} disabled={!node_is_shared(file)}>
 			<i class="icon">visibility</i> Show example
 		</button>
 	</div>
diff --git a/svelte/src/filesystem/edit_window/ThemePresets.svelte b/svelte/src/filesystem/edit_window/ThemePresets.svelte
index 79412ab..3835541 100644
--- a/svelte/src/filesystem/edit_window/ThemePresets.svelte
+++ b/svelte/src/filesystem/edit_window/ThemePresets.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-import type { FSNodeProperties } from "filesystem/FilesystemAPI";
+import type { FSNodeProperties } from "lib/FilesystemAPI";
 
 export let properties: FSNodeProperties = {} as FSNodeProperties
 
diff --git a/svelte/src/filesystem/filemanager/CompactView.svelte b/svelte/src/filesystem/filemanager/CompactView.svelte
index 27ef2d6..d38fe22 100644
--- a/svelte/src/filesystem/filemanager/CompactView.svelte
+++ b/svelte/src/filesystem/filemanager/CompactView.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 import { createEventDispatcher } from "svelte";
-import { fs_encode_path, fs_node_icon, node_is_shared } from "filesystem/FilesystemAPI"
+import { fs_encode_path, fs_node_icon, node_is_shared } from "lib/FilesystemAPI"
 import type { FSNavigator } from "filesystem/FSNavigator";
 import { FileAction } from "./FileManagerLib";
 
@@ -36,21 +36,14 @@ export let hide_edit = false
 				</a>
 			{/if}
 
-			{#if $nav.permissions.write && !hide_edit}
-				<button
-					class="action_button flat"
-					on:click={e => dispatch("file", {index: index, action: FileAction.Edit, original: e})}
-				>
-					<i class="icon">edit</i>
-				</button>
-			{/if}
-
+			{#if !hide_edit}
 			<button
 				class="action_button flat"
-				on:click={e => dispatch("file", {index: index, action: FileAction.Download, original: e})}
+				on:click={e => dispatch("file", {index: index, action: FileAction.Menu, original: e})}
 			>
-				<i class="icon">save</i>
+				<i class="icon">menu</i>
 			</button>
+			{/if}
 		</a>
 	{/each}
 </div>
@@ -71,9 +64,9 @@ export let hide_edit = false
 	color: var(--body_text-color);
 	padding: 2px;
 	align-items: center;
-	background: var(--input_background);
+	background: var(--shaded_background);
+	backdrop-filter: blur(4px);
 	border-radius: 4px;
-	box-shadow: 1px 1px 8px 0px var(--shadow_color);
 	gap: 6px;
 }
 .node:hover:not(.node_selected) {
@@ -92,7 +85,6 @@ export let hide_edit = false
 	height: 2em;
 	width: 2em;
 	vertical-align: middle;
-	border-radius: 4px;
 }
 .node_name {
 	flex: 1 1 content;
diff --git a/svelte/src/filesystem/filemanager/CreateDirectory.svelte b/svelte/src/filesystem/filemanager/CreateDirectory.svelte
index 1a5cfc5..f30438d 100644
--- a/svelte/src/filesystem/filemanager/CreateDirectory.svelte
+++ b/svelte/src/filesystem/filemanager/CreateDirectory.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
 import { onMount } from "svelte";
-import { fs_mkdir } from "filesystem/FilesystemAPI";
+import { fs_mkdir } from "lib/FilesystemAPI";
 import Button from "layout/Button.svelte";
 import type { FSNavigator } from "filesystem/FSNavigator";
+import { loading_finish, loading_start } from "lib/Loading";
 
 export let nav: FSNavigator
 
@@ -14,7 +15,7 @@ let create_dir = async () => {
 	form.append("type", "dir")
 
 	try {
-		nav.set_loading(true)
+		loading_start()
 		await fs_mkdir(nav.base.path+"/"+new_dir_name)
 		new_dir_name = "" // Clear input field
 		error_msg = "" // Clear error msg
@@ -26,7 +27,7 @@ let create_dir = async () => {
 			error_msg = "Server returned an error: code: '"+err.value+"' message: "+err.message
 		}
 	} finally {
-		nav.set_loading(false)
+		loading_finish()
 	}
 }
 
diff --git a/svelte/src/filesystem/filemanager/FileManager.svelte b/svelte/src/filesystem/filemanager/FileManager.svelte
index 7eb6ad2..291c309 100644
--- a/svelte/src/filesystem/filemanager/FileManager.svelte
+++ b/svelte/src/filesystem/filemanager/FileManager.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-import { fs_delete_all, fs_download, fs_rename, type FSNode } from "filesystem/FilesystemAPI"
+import { fs_delete_all, fs_download, fs_rename, type FSNode } from "lib/FilesystemAPI"
 import { onMount } from "svelte"
 import CreateDirectory from "./CreateDirectory.svelte"
 import ListView from "./ListView.svelte"
@@ -13,6 +13,7 @@ import type { FSNavigator } from "filesystem/FSNavigator";
 import FsUploadWidget from "filesystem/upload_widget/FSUploadWidget.svelte";
 import EditWindow from "filesystem/edit_window/EditWindow.svelte";
 import { FileAction, type FileEvent } from "./FileManagerLib";
+import FileMenu from "./FileMenu.svelte";
 
 export let nav: FSNavigator
 export let upload_widget: FsUploadWidget
@@ -23,6 +24,7 @@ let uploader: FsUploadWidget
 let mode = "viewing"
 let creating_dir = false
 let show_hidden = false
+let file_menu: FileMenu
 
 export const upload = (files: File[]) => {
 	return uploader.upload(files)
@@ -84,6 +86,11 @@ const file_event = (e: CustomEvent<FileEvent>) => {
 		e.detail.original.stopPropagation()
 		fs_download(nav.children[index])
 		break
+	case FileAction.Menu:
+		e.detail.original.preventDefault()
+		e.detail.original.stopPropagation()
+		file_menu.open(nav.children[index], e.detail.original.target)
+		break
 	}
 }
 
@@ -410,10 +417,10 @@ onMount(() => {
 	{/if}
 </div>
 
+<FileMenu bind:this={file_menu} bind:nav bind:edit_window />
+
 <style>
 .container {
-	height: 100%;
-	width: 100%;
 	padding: 0;
 	overflow: auto;
 	display: block;
diff --git a/svelte/src/filesystem/filemanager/FileManagerLib.ts b/svelte/src/filesystem/filemanager/FileManagerLib.ts
index 0f8797d..ecd460f 100644
--- a/svelte/src/filesystem/filemanager/FileManagerLib.ts
+++ b/svelte/src/filesystem/filemanager/FileManagerLib.ts
@@ -3,4 +3,4 @@ export type FileEvent = {
 	action: FileAction,
 	original: MouseEvent,
 }
-export enum FileAction { Click, Context, Edit, Share, Branding, Select, Download }
+export enum FileAction { Click, Context, Edit, Share, Branding, Select, Download, Menu }
diff --git a/svelte/src/filesystem/filemanager/FileMenu.svelte b/svelte/src/filesystem/filemanager/FileMenu.svelte
new file mode 100644
index 0000000..1117fbd
--- /dev/null
+++ b/svelte/src/filesystem/filemanager/FileMenu.svelte
@@ -0,0 +1,64 @@
+<script lang="ts">
+import EditWindow from "filesystem/edit_window/EditWindow.svelte";
+import type { FSNavigator } from "filesystem/FSNavigator";
+import Button from "layout/Button.svelte";
+import Dialog from "layout/Dialog.svelte";
+import { bookmark_add, bookmark_del, bookmarks_store } from "lib/Bookmarks";
+import { fs_download, type FSNode } from "lib/FilesystemAPI";
+import { tick } from "svelte";
+
+export let nav: FSNavigator
+export let edit_window: EditWindow
+let dialog: Dialog
+let node: FSNode
+let is_bookmark: boolean = false
+
+export const open = async (n: FSNode, target: EventTarget) => {
+	node = n
+
+	is_bookmark = false
+	for (const bm of $bookmarks_store) {
+		console.log(bm)
+		if (bm.id === n.id) {
+			is_bookmark = true
+			break
+		}
+	}
+
+	// Wait for the view to update, so the dialog gets the proper measurements
+	await tick()
+	dialog.open((target as Element).closest("button").getBoundingClientRect())
+}
+
+const bookmark = () => {
+	bookmark_add({
+		id: node.id,
+		icon: "folder_shared",
+		label: node.name,
+	})
+}
+</script>
+
+<Dialog bind:this={dialog}>
+	<div class="menu">
+		<Button click={() => {dialog.close(); fs_download(node)}} icon="save" label="Download"/>
+		{#if is_bookmark}
+			<Button click={() => {dialog.close(); bookmark_del(node.id)}} icon="bookmark_remove" label="Remove bookmark"/>
+		{:else}
+			<Button click={() => {dialog.close(); bookmark()}} icon="bookmark_add" label="Add bookmark"/>
+		{/if}
+		{#if $nav.permissions.write}
+			<Button click={() => {dialog.close(); edit_window.edit(node, false, "file")}} icon="edit" label="Edit"/>
+			<Button click={() => {dialog.close(); edit_window.edit(node, false, "share")}} icon="share" label="Share"/>
+			<Button click={() => {dialog.close(); edit_window.edit(node, false, "branding")}} icon="palette" label="Branding"/>
+		{/if}
+	</div>
+</Dialog>
+
+<style>
+.menu {
+	display: flex;
+	flex-direction: column;
+	max-width: 20em;
+}
+</style>
diff --git a/svelte/src/filesystem/filemanager/FilePicker.svelte b/svelte/src/filesystem/filemanager/FilePicker.svelte
index 42c665a..24630b1 100644
--- a/svelte/src/filesystem/filemanager/FilePicker.svelte
+++ b/svelte/src/filesystem/filemanager/FilePicker.svelte
@@ -4,17 +4,15 @@ import ListView from "./ListView.svelte"
 import GalleryView from "./GalleryView.svelte"
 import CompactView from "./CompactView.svelte"
 import Modal from "util/Modal.svelte";
-import LoadingIndicator from "util/LoadingIndicator.svelte";
 import Breadcrumbs from "filesystem/Breadcrumbs.svelte"
 import { FSNavigator } from "filesystem/FSNavigator";
-import type { FSNode } from "filesystem/FilesystemAPI";
+import type { FSNode } from "lib/FilesystemAPI";
 import { FileAction, type FileEvent } from "./FileManagerLib";
 
 let nav = new FSNavigator(false)
 let modal: Modal
 let dispatch = createEventDispatcher()
 let directory_view = ""
-let loading = false
 let large_icons = false
 let show_hidden = false
 export let select_multiple = false
@@ -194,8 +192,6 @@ onMount(() => {
 			on:file={file_event}
 		/>
 	{/if}
-
-	<LoadingIndicator loading={loading}/>
 </Modal>
 
 <style>
diff --git a/svelte/src/filesystem/filemanager/GalleryView.svelte b/svelte/src/filesystem/filemanager/GalleryView.svelte
index 10127ff..10a113b 100644
--- a/svelte/src/filesystem/filemanager/GalleryView.svelte
+++ b/svelte/src/filesystem/filemanager/GalleryView.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 import { createEventDispatcher } from "svelte"
-import { fs_node_icon, fs_node_type, fs_encode_path } from "filesystem/FilesystemAPI";
+import { fs_node_icon, fs_node_type, fs_encode_path } from "lib/FilesystemAPI";
 import type { FSNavigator } from "filesystem/FSNavigator";
 import { FileAction } from "./FileManagerLib";
 let dispatch = createEventDispatcher()
@@ -46,15 +46,15 @@ export let large_icons = false
 	width: 150px;
 	height: 150px;
 	overflow: hidden;
-	border-radius: 8px;
-	background: var(--input_background);
+	background: var(--shaded_background);
+	backdrop-filter: blur(4px);
+	border-radius: 4px;
 	color: var(--input_text);
 	display: flex;
 	flex-direction: column;
 	transition: background 0.2s;
 	text-decoration: none;
 	padding: 3px;
-	box-shadow: 1px 1px 0px 0px var(--shadow_color);
 }
 .file.large_icons {
 	width: 200px;
@@ -87,7 +87,7 @@ export let large_icons = false
 }
 .node_icon {
 	flex: 1 1 0;
-	border-radius: 6px;
+	border-radius: 4px;
 	background-position: center;
 	background-size: contain;
 	background-repeat: no-repeat;
diff --git a/svelte/src/filesystem/filemanager/ListView.svelte b/svelte/src/filesystem/filemanager/ListView.svelte
index 6c0bdf4..e5e616d 100644
--- a/svelte/src/filesystem/filemanager/ListView.svelte
+++ b/svelte/src/filesystem/filemanager/ListView.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 import { createEventDispatcher } from "svelte";
 import { formatDataVolume } from "util/Formatting";
-import { fs_encode_path, fs_node_icon, node_is_shared } from "filesystem/FilesystemAPI"
+import { fs_encode_path, fs_node_icon, node_is_shared } from "lib/FilesystemAPI"
 import type { FSNavigator } from "filesystem/FSNavigator";
 import SortButton from "layout/SortButton.svelte";
 import { FileAction } from "./FileManagerLib";
@@ -19,7 +19,7 @@ export let hide_branding = false
 	<tr>
 		<td></td>
 		<td><SortButton active_field={$nav.sort_last_field} asc={$nav.sort_asc} sort_func={nav.sort_children} field="name">Name</SortButton></td>
-		<td><SortButton active_field={$nav.sort_last_field} asc={$nav.sort_asc} sort_func={nav.sort_children} field="file_size">Size</SortButton></td>
+		<td class="hide_small"><SortButton active_field={$nav.sort_last_field} asc={$nav.sort_asc} sort_func={nav.sort_children} field="file_size">Size</SortButton></td>
 		<td></td>
 	</tr>
 	{#each $nav.children as child, index (child.path)}
@@ -60,14 +60,11 @@ export let hide_branding = false
 							<i class="icon">palette</i>
 						</button>
 					{/if}
-					{#if $nav.permissions.write && !hide_edit}
-						<button class="action_button" on:click={e => dispatch("file", {index: index, action: FileAction.Edit, original: e})}>
-							<i class="icon">edit</i>
+					{#if !hide_edit}
+						<button class="action_button" on:click={e => dispatch("file", {index: index, action: FileAction.Menu, original: e})}>
+							<i class="icon">menu</i>
 						</button>
 					{/if}
-					<button class="action_button" on:click={e => dispatch("file", {index: index, action: FileAction.Download, original: e})}>
-						<i class="icon">save</i>
-					</button>
 				</div>
 			</td>
 		</a>
@@ -77,13 +74,11 @@ export let hide_branding = false
 <style>
 .directory {
 	display: table;
-	margin: 8px auto 16px auto;
 	background: var(--shaded_background);
 	border-collapse: collapse;
-	border-radius: 8px;
-
-	max-width: 99%;
-	width: 1200px;
+	backdrop-filter: blur(4px);
+	max-width: 1200px;
+	margin: auto; /* center */
 }
 .directory > * {
 	display: table-row;
@@ -116,7 +111,7 @@ td {
 	height: 32px;
 	width: 32px;
 	vertical-align: middle;
-	border-radius: 4px;
+	/* border-radius: 4px; */
 	margin: 2px;
 }
 .node_name {
diff --git a/svelte/src/filesystem/filemanager/SearchBar.svelte b/svelte/src/filesystem/filemanager/SearchBar.svelte
index a9a2396..cb0b4bc 100644
--- a/svelte/src/filesystem/filemanager/SearchBar.svelte
+++ b/svelte/src/filesystem/filemanager/SearchBar.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
 import { onMount } from "svelte";
-import { fs_search, fs_encode_path, fs_thumbnail_url } from "filesystem/FilesystemAPI";
+import { fs_search, fs_encode_path, fs_thumbnail_url } from "lib/FilesystemAPI";
 import type { FSNavigator } from "filesystem/FSNavigator";
+    import { loading_finish, loading_start } from "lib/Loading";
 
 export let nav: FSNavigator
 
@@ -43,9 +44,9 @@ const search = async (limit = 10) => {
 	last_limit = limit
 
 	searching = true
-	nav.set_loading(true)
 
 	try {
+		loading_start()
 		search_results = await fs_search(nav.base.path, search_term, limit)
 	} catch (err) {
 		if (err.value) {
@@ -54,6 +55,8 @@ const search = async (limit = 10) => {
 			alert(err)
 			console.error(err)
 		}
+	} finally {
+		loading_finish()
 	}
 
 	if (search_results.length > 0 && selected_result > search_results.length-1) {
@@ -61,7 +64,6 @@ const search = async (limit = 10) => {
 	}
 
 	searching = false
-	nav.set_loading(false)
 
 	// It's possible that the user entered another letter while we were
 	// performing the search reqeust. If this happens we run the search function
@@ -218,7 +220,6 @@ const window_keydown = (e: KeyboardEvent) => {
 	max-width: 100%;
 	padding-top: 2px;
 	padding-bottom: 2px;
-	border-bottom: 1px solid var(--separator);
 }
 
 .search_form {
diff --git a/svelte/src/filesystem/upload_widget/FSUploadWidget.svelte b/svelte/src/filesystem/upload_widget/FSUploadWidget.svelte
index 794747c..1e8ae73 100644
--- a/svelte/src/filesystem/upload_widget/FSUploadWidget.svelte
+++ b/svelte/src/filesystem/upload_widget/FSUploadWidget.svelte
@@ -11,14 +11,11 @@ export type UploadJob = {
 </script>
 <script lang="ts">
 import { tick } from "svelte";
-import { fade } from "svelte/transition";
 import UploadProgress from "./UploadProgress.svelte";
 import type { FSNavigator } from "filesystem/FSNavigator";
 
 export let nav: FSNavigator
 
-const max_concurrent_uploads = 5
-
 let file_input_field: HTMLInputElement
 let file_input_change = (e: Event) => {
 	// Start uploading the files async
@@ -91,22 +88,29 @@ let active_uploads = 0
 let state = "idle"
 
 const start_upload = async () => {
-	// Count the number of active uploads so we can know how many new uploads we
-	// can start
-	active_uploads = upload_queue.reduce((acc, val) => {
-		if (val.status === "uploading") {
-			acc++
-		}
-		return acc
-	}, 0)
-
-	for (let i = 0; i < upload_queue.length && active_uploads < max_concurrent_uploads; i++) {
+	active_uploads = 0
+	let uploading_size = 0
+	for (let i = 0; i < upload_queue.length; i++) {
 		if (upload_queue[i]) {
+			// If this file is queued, start the upload
 			if (upload_queue[i].status === "queued") {
-				active_uploads++
 				upload_queue[i].component.start()
 				upload_queue[i].status = "uploading"
 			}
+
+			// If this file is already uploading (or just started), count it
+			if (upload_queue[i].status === "uploading") {
+				uploading_size += upload_queue[i].total_size
+				active_uploads++
+			}
+
+			// If the size threshold or the concurrent upload limit is reached
+			// we break the loop. The system tries to keep an upload queue of
+			// 100 MB and a minimum of two concurrent uploads.
+			if ((uploading_size >= 100e6 && active_uploads >= 2) || active_uploads >= 10) {
+				console.debug("Current uploads", active_uploads, "uploads size", uploading_size)
+				break
+			}
 		}
 	}
 
@@ -153,7 +157,7 @@ const leave_confirmation = (e: BeforeUnloadEvent) => {
 />
 
 {#if visible}
-	<div class="upload_widget" transition:fade={{duration: 200}}>
+	<div class="upload_widget">
 		<div class="header">
 			{#if state === "idle"}
 				Waiting for files
@@ -184,7 +188,8 @@ const leave_confirmation = (e: BeforeUnloadEvent) => {
 	position: fixed;
 	display: flex;
 	flex-direction: column;
-	width: 500px;
+	width: auto;
+	min-width: 400px;
 	max-width: 80%;
 	height: auto;
 	max-height: 50%;
diff --git a/svelte/src/filesystem/upload_widget/UploadFunc.ts b/svelte/src/filesystem/upload_widget/UploadFunc.ts
index 2f26136..550a61e 100644
--- a/svelte/src/filesystem/upload_widget/UploadFunc.ts
+++ b/svelte/src/filesystem/upload_widget/UploadFunc.ts
@@ -9,7 +9,7 @@
 //
 // on_error is called when the upload has failed. The parameters are the error
 
-import { fs_path_url, type GenericResponse } from "filesystem/FilesystemAPI"
+import { fs_path_url, type GenericResponse } from "lib/FilesystemAPI"
 
 // code and an error message
 export const upload_file = (
diff --git a/svelte/src/filesystem/upload_widget/UploadProgress.svelte b/svelte/src/filesystem/upload_widget/UploadProgress.svelte
index 5d7fc4b..7d65ab6 100644
--- a/svelte/src/filesystem/upload_widget/UploadProgress.svelte
+++ b/svelte/src/filesystem/upload_widget/UploadProgress.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 import { createEventDispatcher } from "svelte";
-import { fade } from "svelte/transition";
 import { upload_file } from "./UploadFunc";
 import ProgressBar from "util/ProgressBar.svelte";
 import Button from "layout/Button.svelte"
@@ -56,14 +55,14 @@ const cancel = () => {
 }
 </script>
 
-<div class="prog" transition:fade={{duration: 200}} class:error={job.status === "error"}>
+<div class="prog" class:error={job.status === "error"}>
 	<div class="bar">
 		{job.file.name}<br/>
 		{#if error_code !== ""}
 			{error_message}<br/>
 			{error_code}<br/>
 		{/if}
-		<ProgressBar total={total} used={loaded}/>
+		<ProgressBar total={total} used={loaded} speed={500}/>
 	</div>
 	<div class="cancel">
 		<Button icon="cancel" click={cancel}/>
diff --git a/svelte/src/filesystem/viewers/Audio.svelte b/svelte/src/filesystem/viewers/Audio.svelte
index df83b3c..d9abe64 100644
--- a/svelte/src/filesystem/viewers/Audio.svelte
+++ b/svelte/src/filesystem/viewers/Audio.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
 import { onMount } from 'svelte'
-import { fs_path_url, fs_encode_path, fs_node_icon } from "filesystem/FilesystemAPI"
-import FileTitle from "layout/FileTitle.svelte";
+import { fs_path_url, fs_encode_path, fs_node_icon } from "lib/FilesystemAPI"
 import TextBlock from "layout/TextBlock.svelte"
 import type { FSNavigator } from 'filesystem/FSNavigator';
 
@@ -50,8 +49,6 @@ onMount(() => {
 
 <slot></slot>
 
-<FileTitle title={$nav.base.name}/>
-
 <TextBlock width="1000px">
 	<audio
 		bind:this={player}
diff --git a/svelte/src/filesystem/viewers/File.svelte b/svelte/src/filesystem/viewers/File.svelte
index 38fdb80..998f78d 100644
--- a/svelte/src/filesystem/viewers/File.svelte
+++ b/svelte/src/filesystem/viewers/File.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 import { createEventDispatcher } from "svelte";
 import IconBlock from "layout/IconBlock.svelte";
-import { fs_thumbnail_url } from "filesystem/FilesystemAPI";
+import { fs_thumbnail_url } from "lib/FilesystemAPI";
 import TextBlock from "layout/TextBlock.svelte"
 import { formatDataVolume, formatDate } from "util/Formatting";
 import type { FSNavigator } from "filesystem/FSNavigator";
diff --git a/svelte/src/filesystem/viewers/FilePreview.svelte b/svelte/src/filesystem/viewers/FilePreview.svelte
index 5909a05..f3b42bf 100644
--- a/svelte/src/filesystem/viewers/FilePreview.svelte
+++ b/svelte/src/filesystem/viewers/FilePreview.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 import { onMount, tick } from "svelte";
 import Spinner from "util/Spinner.svelte";
-import { fs_node_type } from "filesystem/FilesystemAPI";
+import { fs_node_type } from "lib/FilesystemAPI";
 import FileManager from "filesystem/filemanager/FileManager.svelte";
 import Audio from "./Audio.svelte";
 import File from "./File.svelte";
@@ -74,7 +74,7 @@ export const seek = (delta: number) => {
 
 {#if viewer_type === ""}
 	<div class="center">
-		<Spinner></Spinner>
+		<Spinner/>
 	</div>
 {:else if viewer_type === "dir"}
 	<FileManager nav={nav} upload_widget={upload_widget} edit_window={edit_window}>
diff --git a/svelte/src/filesystem/viewers/Image.svelte b/svelte/src/filesystem/viewers/Image.svelte
index 2baf34d..870ab2a 100644
--- a/svelte/src/filesystem/viewers/Image.svelte
+++ b/svelte/src/filesystem/viewers/Image.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 import { createEventDispatcher } from "svelte";
 import { swipe_nav } from "lib/SwipeNavigate";
-import { fs_path_url } from "filesystem/FilesystemAPI";
+import { fs_path_url } from "lib/FilesystemAPI";
 import type { FSNavigator } from "filesystem/FSNavigator";
 
 let dispatch = createEventDispatcher();
diff --git a/svelte/src/filesystem/viewers/PDF.svelte b/svelte/src/filesystem/viewers/PDF.svelte
index 4827c2b..b61ac6d 100644
--- a/svelte/src/filesystem/viewers/PDF.svelte
+++ b/svelte/src/filesystem/viewers/PDF.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-import { fs_path_url } from "filesystem/FilesystemAPI";
+import { fs_path_url } from "lib/FilesystemAPI";
 import type { FSNavigator } from "filesystem/FSNavigator";
 
 export let nav: FSNavigator
diff --git a/svelte/src/filesystem/viewers/Text.svelte b/svelte/src/filesystem/viewers/Text.svelte
index f69eac5..b64b150 100644
--- a/svelte/src/filesystem/viewers/Text.svelte
+++ b/svelte/src/filesystem/viewers/Text.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 import { tick } from "svelte";
-import { fs_path_url, type FSNode } from "filesystem/FilesystemAPI";
+import { fs_path_url, type FSNode } from "lib/FilesystemAPI";
 import type { FSNavigator } from "filesystem/FSNavigator";
 
 export let nav: FSNavigator
diff --git a/svelte/src/filesystem/viewers/Torrent.svelte b/svelte/src/filesystem/viewers/Torrent.svelte
index f4d259b..0e344c2 100644
--- a/svelte/src/filesystem/viewers/Torrent.svelte
+++ b/svelte/src/filesystem/viewers/Torrent.svelte
@@ -19,9 +19,10 @@ import { formatDate } from "util/Formatting"
 import TorrentItem from "./TorrentItem.svelte"
 import IconBlock from "layout/IconBlock.svelte";
 import TextBlock from "layout/TextBlock.svelte"
-import { fs_node_icon, fs_path_url } from "filesystem/FilesystemAPI";
+import { fs_node_icon, fs_path_url } from "lib/FilesystemAPI";
 import CopyButton from "layout/CopyButton.svelte";
 import type { FSNavigator } from "filesystem/FSNavigator";
+import { loading_finish, loading_start } from "lib/Loading";
 
 let dispatch = createEventDispatcher()
 
@@ -31,7 +32,7 @@ let status = "loading"
 
 export const update = async () => {
 	try {
-		nav.set_loading(true)
+		loading_start()
 		let resp = await fetch(fs_path_url(nav.base.path)+"?torrent_info")
 
 		if (resp.status >= 400) {
@@ -58,7 +59,7 @@ export const update = async () => {
 	} catch (err) {
 		console.error(err)
 	} finally {
-		nav.set_loading(false)
+		loading_finish()
 		status = "finished"
 	}
 }
diff --git a/svelte/src/filesystem/viewers/Video.svelte b/svelte/src/filesystem/viewers/Video.svelte
index 2c717aa..96506e5 100644
--- a/svelte/src/filesystem/viewers/Video.svelte
+++ b/svelte/src/filesystem/viewers/Video.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 import { onMount, createEventDispatcher, tick } from "svelte";
 import { video_position } from "lib/VideoPosition";
-import { fs_path_url } from "filesystem/FilesystemAPI";
+import { fs_path_url } from "lib/FilesystemAPI";
 import type { FSNavigator } from "filesystem/FSNavigator";
 let dispatch = createEventDispatcher()
 
diff --git a/svelte/src/filesystem/viewers/Zip.svelte b/svelte/src/filesystem/viewers/Zip.svelte
index 428c666..694cda5 100644
--- a/svelte/src/filesystem/viewers/Zip.svelte
+++ b/svelte/src/filesystem/viewers/Zip.svelte
@@ -13,8 +13,9 @@ import { formatDataVolume, formatDate } from "util/Formatting"
 import ZipItem from "filesystem/viewers/ZipItem.svelte";
 import IconBlock from "layout/IconBlock.svelte";
 import TextBlock from "layout/TextBlock.svelte"
-import { fs_node_icon, fs_path_url } from "filesystem/FilesystemAPI";
+import { fs_node_icon, fs_path_url } from "lib/FilesystemAPI";
 import type { FSNavigator } from "filesystem/FSNavigator";
+import { loading_finish, loading_start } from "lib/Loading";
 
 let dispatch = createEventDispatcher()
 
@@ -36,8 +37,8 @@ export const update = async () => {
 	}
 
 	try {
+		loading_start()
 		status = "loading"
-		nav.set_loading(true)
 		let resp = await fetch(fs_path_url(nav.base.path)+"?zip_info")
 
 		if (resp.status >= 400) {
@@ -64,7 +65,7 @@ export const update = async () => {
 		console.error(err)
 		status = "parse_failed"
 	} finally {
-		nav.set_loading(false)
+		loading_finish()
 	}
 }
 
diff --git a/svelte/src/home_page.js b/svelte/src/home_page.js
deleted file mode 100644
index c566f67..0000000
--- a/svelte/src/home_page.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import App from './home_page/HomePage.svelte';
-
-const app = new App({
-	target: document.getElementById("page_body"),
-	props: {}
-});
-
-export default app;
diff --git a/svelte/src/home_page/FeatureTable.svelte b/svelte/src/home_page/FeatureTable.svelte
index 35504a1..d47991d 100644
--- a/svelte/src/home_page/FeatureTable.svelte
+++ b/svelte/src/home_page/FeatureTable.svelte
@@ -15,7 +15,7 @@ import OtherPlans from "./OtherPlans.svelte";
 	</p>
 </section>
 
-<div class="vertical_scroll">
+<div class="horizontal_scroll">
 	<div class="grid">
 		<div></div>
 		<div class="top_row free_feat">
@@ -271,20 +271,21 @@ import OtherPlans from "./OtherPlans.svelte";
 	font-weight: bold;
 }
 
-.vertical_scroll {
+.horizontal_scroll {
 	overflow-x: scroll;
 	overflow-y: hidden;
 	width: 100%;
+	padding: 10px;
 }
 
 .grid {
-	display: inline-grid;
+	display: grid;
 	grid-auto-flow: row;
 	grid-template-columns: 9em 1fr 1fr 1fr;
-	min-width: 40em;
+	min-width: 50em;
 	max-width: 70em;
 	gap: 5px;
-	margin: 10px;
+	margin: auto;
 }
 .grid > div {
 	justify-content: center;
diff --git a/svelte/src/home_page/HomePage.svelte b/svelte/src/home_page/HomePage.svelte
index c9ea525..4fa483c 100644
--- a/svelte/src/home_page/HomePage.svelte
+++ b/svelte/src/home_page/HomePage.svelte
@@ -5,6 +5,7 @@ import { drop_target } from "lib/DropTarget";
 import AddressReputation from "./AddressReputation.svelte";
 import FeatureTable from "./FeatureTable.svelte";
 import GetStarted from "./GetStarted.svelte";
+import Pricing from "./Pricing.svelte";
 
 let upload_widget
 </script>
@@ -50,6 +51,7 @@ let upload_widget
 				Bullet lists
 			</li>
 		</ul>
+		<Pricing/>
 	</section>
 </div>
 
@@ -141,26 +143,18 @@ let upload_widget
 	<FeatureTable/>
 </div>
 
-<Footer nobg/>
-
+<svelte:head>
+	<style>
+		body {
+			background-image: url("/res/img/catspaw.webp");
+			background-repeat: no-repeat;
+			background-attachment: fixed;
+			background-position: center;
+			background-size: cover;
+		}
+	</style>
+</svelte:head>
 <style>
-:global(.page_body) {
-	background-image: url("/res/img/inflating_star.webp");
-	background-repeat: no-repeat;
-	background-attachment: fixed;
-	background-position: center;
-	background-size: cover;
-}
-.page_content {
-	margin-top: 16px;
-	margin-bottom: 16px;
-}
-@media (max-width: 1100px) {
-	.page_content {
-		margin-top: 0;
-	}
-}
-
 header {
 	padding-top: 20px;
 	padding-bottom: 20px;
diff --git a/svelte/src/layout/Button.svelte b/svelte/src/layout/Button.svelte
index 2182241..c080df3 100644
--- a/svelte/src/layout/Button.svelte
+++ b/svelte/src/layout/Button.svelte
@@ -54,6 +54,7 @@ let click_int = (e: MouseEvent) => {
 	</button>
 {:else}
 	<a
+		on:click={click_int}
 		href="{link_href}"
 		target={link_target}
 		class="button"
diff --git a/svelte/src/layout/Dialog.svelte b/svelte/src/layout/Dialog.svelte
index cebb508..92265d2 100644
--- a/svelte/src/layout/Dialog.svelte
+++ b/svelte/src/layout/Dialog.svelte
@@ -22,6 +22,10 @@ export const open = (button_rect: DOMRect) => {
 	dialog.style.top = Math.round(Math.min(min_top, max_top)) + "px"
 }
 
+export const close = () => {
+	dialog.close()
+}
+
 // Attach a click handler so that the dialog is closed when the user clicks
 // outside the dialog. The way this check works is that there is usually an
 // element inside the dialog with all the content. When the click target is
diff --git a/svelte/src/layout/IconBlock.svelte b/svelte/src/layout/IconBlock.svelte
index 9612b3b..50f1274 100644
--- a/svelte/src/layout/IconBlock.svelte
+++ b/svelte/src/layout/IconBlock.svelte
@@ -39,7 +39,6 @@ export let width = "750px"
 	overflow-wrap: anywhere;
 	background-color: var(--shaded_background);
 	backdrop-filter: blur(4px);
-	border-radius: 8px;
 	padding: 8px;
 }
 </style>
diff --git a/svelte/src/layout/SortButton.svelte b/svelte/src/layout/SortButton.svelte
index 31194cf..6674733 100644
--- a/svelte/src/layout/SortButton.svelte
+++ b/svelte/src/layout/SortButton.svelte
@@ -5,7 +5,7 @@ export let asc = true
 export let sort_func: (field: string) => void
 </script>
 
-<button class:button_highlight={active_field === field} on:click={() => sort_func(field)}>
+<button on:click={() => sort_func(field)}>
 	{#if active_field === field}
 		{#if asc}↓{:else}↑{/if}
 	{/if}
@@ -18,6 +18,6 @@ button {
 	margin: 0;
 	line-height: 1em;
 	width: 100%;
-	text-align: center;
+	text-align: initial;
 }
 </style>
diff --git a/svelte/src/layout/TextBlock.svelte b/svelte/src/layout/TextBlock.svelte
index 776c519..ec43779 100644
--- a/svelte/src/layout/TextBlock.svelte
+++ b/svelte/src/layout/TextBlock.svelte
@@ -11,13 +11,12 @@ export let center = false
 .block {
 	display: block;
 	text-align: initial;
-	max-width: 99%;
+	max-width: 100%;
 	overflow-wrap: anywhere;
-	margin: 8px auto;
+	margin: auto;
 
 	background-color: var(--shaded_background);
 	backdrop-filter: blur(4px);
-	border-radius: 8px;
 	padding: 8px;
 }
 .center {
diff --git a/svelte/src/layout/checkout/Checkout.svelte b/svelte/src/layout/checkout/Checkout.svelte
index 38d7f4d..57e259d 100644
--- a/svelte/src/layout/checkout/Checkout.svelte
+++ b/svelte/src/layout/checkout/Checkout.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 import { onMount } from "svelte";
-import LoadingIndicator from "util/LoadingIndicator.svelte";
 import PickAmount from "./PickAmount.svelte";
 import PickCountry from "./PickCountry.svelte";
 import { payment_providers, type CheckoutState } from "./CheckoutLib";
@@ -9,7 +8,6 @@ import { get_misc_vat_rate, get_user } from "lib/PixeldrainAPI";
 import { countries } from "country-data-list";
 import PickProvider from "./PickProvider.svelte";
 
-let loading = false
 let state: CheckoutState = {country: null, provider: null, amount: 0, vat: 0, name: ""}
 
 onMount(async () => {
@@ -42,8 +40,6 @@ onMount(async () => {
 </script>
 
 <div class="highlight_border">
-	<LoadingIndicator loading={loading}/>
-
 	{#if state.country !== null}
 		<div class="navbar">
 			{#if state.country !== null}
@@ -76,13 +72,13 @@ onMount(async () => {
 	{/if}
 
 	{#if state.country === null}
-		<PickCountry bind:state bind:loading={loading}/>
+		<PickCountry bind:state/>
 	{:else if state.provider === null}
 		<PickProvider bind:state/>
 	{:else if state.provider.need_name === true && state.name === ""}
 		<PickName bind:state/>
 	{:else}
-		<PickAmount bind:state bind:loading/>
+		<PickAmount bind:state/>
 	{/if}
 </div>
 
diff --git a/svelte/src/layout/checkout/PickAmount.svelte b/svelte/src/layout/checkout/PickAmount.svelte
index c296e39..5058b63 100644
--- a/svelte/src/layout/checkout/PickAmount.svelte
+++ b/svelte/src/layout/checkout/PickAmount.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
 import Euro from "util/Euro.svelte";
 import { checkout, type CheckoutState } from "./CheckoutLib";
+import { loading_finish, loading_start } from "lib/Loading";
 
 export let state: CheckoutState
-export let loading: boolean
 
 const amounts = [10, 20, 50, 100, 200, 500, 1000, 2000, 5000]
 let amount = 20
@@ -11,10 +11,13 @@ let amount = 20
 const submit = async (e: SubmitEvent) => {
 	e.preventDefault()
 
-	loading = true
 	state.amount = amount
-	await checkout(state)
-	loading = false
+	loading_start()
+	try {
+		await checkout(state)
+	}finally {
+		loading_finish()
+	}
 }
 </script>
 
diff --git a/svelte/src/layout/checkout/PickCountry.svelte b/svelte/src/layout/checkout/PickCountry.svelte
index aabf169..4b38080 100644
--- a/svelte/src/layout/checkout/PickCountry.svelte
+++ b/svelte/src/layout/checkout/PickCountry.svelte
@@ -2,13 +2,12 @@
 import { countries } from "country-data-list";
 import { get_misc_vat_rate, put_user } from "lib/PixeldrainAPI";
 import { payment_providers, type CheckoutState } from "./CheckoutLib";
+import { loading_finish, loading_start } from "lib/Loading";
 
 export let state: CheckoutState
-export let loading: boolean
 let country_input = ""
 
 const set_country = async (e?: Event) => {
-	loading = true
 	if (e !== undefined) {
 		e.preventDefault()
 	}
@@ -24,6 +23,7 @@ const set_country = async (e?: Event) => {
 	// with an invalid combination
 	state.provider = null
 
+	loading_start()
 	try {
 		// Save the user's country for later use
 		await put_user({checkout_country: c.alpha3})
@@ -34,7 +34,7 @@ const set_country = async (e?: Event) => {
 	} catch (err) {
 		alert(err)
 	} finally {
-		loading = false
+		loading_finish()
 	}
 }
 
diff --git a/svelte/src/lib/Bookmarks.ts b/svelte/src/lib/Bookmarks.ts
new file mode 100644
index 0000000..e72ec7d
--- /dev/null
+++ b/svelte/src/lib/Bookmarks.ts
@@ -0,0 +1,96 @@
+import { writable } from "svelte/store"
+import { fs_check_response, fs_path_url } from "./FilesystemAPI"
+import { loading_finish, loading_start } from "lib/Loading"
+
+const bookmarks_file = "/me/.fnx/bookmarks.json"
+
+export type Bookmark = {
+	id: string,
+	icon: string,
+	label: string,
+}
+
+export let bookmarks_store = writable<Bookmark[]>(
+	[],
+	(set: (value: Bookmark[]) => void) => {
+		bookmarks_get().then((bm: Bookmark[]) => {
+			set(bm)
+		}).catch((err: any) => {
+			alert("Could not fetch bookmarks:\n" + JSON.stringify(err))
+		})
+	},
+)
+
+export const bookmarks_get = async (): Promise<Bookmark[]> => {
+	let bookmarks: Bookmark[] = []
+	try {
+		bookmarks = await fs_check_response(
+			await fetch(fs_path_url(bookmarks_file), { cache: "no-store" })
+		)
+	} catch (err) {
+		// If the bookmarks were not found when we return an empty bookmarks
+		// list
+		if (err.value !== "path_not_found") {
+			throw err
+		}
+	}
+
+	console.debug("Fetched", bookmarks.length, "bookmarks:", bookmarks)
+	bookmarks_store.set(bookmarks)
+	return bookmarks
+}
+
+export const bookmarks_save = async (bookmarks: Bookmark[]) => {
+	await fs_check_response(
+		await fetch(
+			fs_path_url(bookmarks_file) + "?make_parents=true",
+			{ method: "PUT", body: JSON.stringify(bookmarks) },
+		)
+	)
+	console.debug("Saved", bookmarks.length, "bookmarks:", bookmarks)
+	bookmarks_store.set(bookmarks)
+}
+
+export const bookmark_add = async (bm: Bookmark): Promise<Bookmark[]> => {
+	let bookmarks: Bookmark[] = []
+	try {
+		loading_start()
+
+		// Get bookmarks
+		bookmarks = await bookmarks_get()
+
+		// Add new bookmark
+		bookmarks.push(bm)
+
+		// Save new bookmarks
+		await bookmarks_save(bookmarks)
+	} finally {
+		loading_finish()
+	}
+	return bookmarks
+}
+
+export const bookmark_del = async (id: string): Promise<Bookmark[]> => {
+	let bookmarks: Bookmark[] = []
+	try {
+		loading_start()
+
+		// Get bookmarks
+		bookmarks = await bookmarks_get()
+
+		// Delete bookmark
+		for (let i = 0; i < bookmarks.length; i++) {
+			if (bookmarks[i].id === id) {
+				console.debug("Deleting bookmark at index", i, bookmarks[i])
+				bookmarks.splice(i, 1)
+				break
+			}
+		}
+
+		// Save new bookmarks
+		await bookmarks_save(bookmarks)
+	} finally {
+		loading_finish()
+	}
+	return bookmarks
+}
diff --git a/svelte/src/filesystem/FilesystemAPI.ts b/svelte/src/lib/FilesystemAPI.ts
similarity index 97%
rename from svelte/src/filesystem/FilesystemAPI.ts
rename to svelte/src/lib/FilesystemAPI.ts
index 9c0273f..a64d61b 100644
--- a/svelte/src/filesystem/FilesystemAPI.ts
+++ b/svelte/src/lib/FilesystemAPI.ts
@@ -46,7 +46,11 @@ export type FSNode = {
 }
 
 export const node_is_shared = (node: FSNode): boolean => {
-	if (node.link_permissions !== undefined && node.link_permissions.read) {
+	if (
+		(node.link_permissions !== undefined && node.link_permissions.read === true) ||
+		(node.user_permissions !== undefined && Object.keys(node.user_permissions).length > 0) ||
+		(node.password_permissions !== undefined && Object.keys(node.password_permissions).length > 0)
+	) {
 		return true
 	}
 	return false
diff --git a/svelte/src/lib/HighlightCurrentPage.ts b/svelte/src/lib/HighlightCurrentPage.ts
new file mode 100644
index 0000000..1aef02f
--- /dev/null
+++ b/svelte/src/lib/HighlightCurrentPage.ts
@@ -0,0 +1,22 @@
+import { current_page_store, type Tab } from "wrap/RouterStore"
+
+export const highlight_current_page = (node: HTMLAnchorElement) => {
+	const set_highlight = () => {
+		if (window.location.pathname === URL.parse(node.href).pathname) {
+			node.classList.add("button_highlight")
+		} else {
+			node.classList.remove("button_highlight")
+		}
+	}
+
+	// Initialize the status with the current page path
+	set_highlight()
+
+	// Set up a listener with the page router to catch navigation events
+	const unsub = current_page_store.subscribe((page: Tab) => { set_highlight() })
+	return {
+		destroy() {
+			unsub()
+		}
+	}
+}
diff --git a/svelte/src/lib/Loading.ts b/svelte/src/lib/Loading.ts
new file mode 100644
index 0000000..d7838ae
--- /dev/null
+++ b/svelte/src/lib/Loading.ts
@@ -0,0 +1,20 @@
+import { get, writable } from "svelte/store";
+
+export const loading_store = writable(0)
+
+export const loading_start = () => {
+	loading_store.set(get(loading_store) + 1)
+}
+
+export const loading_finish = () => {
+	loading_store.set(get(loading_store) - 1)
+}
+
+export const loading_run = async <T>(fn: () => Promise<T>): Promise<T> => {
+	try {
+		loading_start()
+		return await fn()
+	} finally {
+		loading_finish()
+	}
+}
diff --git a/svelte/src/lib/PixeldrainAPI.ts b/svelte/src/lib/PixeldrainAPI.ts
index d6e53bd..ee4a7f8 100644
--- a/svelte/src/lib/PixeldrainAPI.ts
+++ b/svelte/src/lib/PixeldrainAPI.ts
@@ -106,14 +106,18 @@ export type UserSession = {
 	valid_domains: string[],
 }
 
-export const get_user = async () => {
+let cached_user: User = null
+export const get_user = async (): Promise<User> => {
 	if ((window as any).user !== undefined) {
 		return (window as any).user as User
+	} else if (cached_user !== null) {
+		return cached_user
 	}
 
 	console.warn("user property is not defined on window")
 
-	return await check_response(await fetch(get_endpoint() + "/user")) as User
+	cached_user = await check_response(await fetch(get_endpoint() + "/user")) as User
+	return cached_user
 }
 
 export const put_user = async (data: Object) => {
@@ -128,7 +132,6 @@ export const put_user = async (data: Object) => {
 	}
 }
 
-
 export type VATRate = {
 	name: string,
 	vat: number,
diff --git a/svelte/src/login.js b/svelte/src/login.js
deleted file mode 100644
index 3b367b9..0000000
--- a/svelte/src/login.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import App from './login/Router.svelte';
-
-const app = new App({
-	target: document.getElementById("page_body"),
-	props: {}
-});
-
-export default app;
diff --git a/svelte/src/login/Router.svelte b/svelte/src/login/Router.svelte
index c467309..cdd7499 100644
--- a/svelte/src/login/Router.svelte
+++ b/svelte/src/login/Router.svelte
@@ -27,14 +27,14 @@ onMount(async () => {
 		params.get("link_login_id") === null &&
 		user.username !== ""
 	) {
-		console.debug("User is already logged in, redirecting to user dashboard")
+		console.debug("User is already logged in, redirecting to user dashboard", user)
 
 		let login_redirect = params.get("redirect")
 		if (typeof login_redirect === "string" && login_redirect.startsWith("/")) {
 			console.debug("redirecting user to requested path", login_redirect)
-			window.location.href = window.location.protocol+"//"+window.location.host+login_redirect
+			window.location.pathname = login_redirect
 		} else {
-			window.location.href = "/user"
+			window.location.pathname = "/user"
 		}
 	}
 })
diff --git a/svelte/src/pages/Appearance.svelte b/svelte/src/pages/Appearance.svelte
new file mode 100644
index 0000000..bb4288e
--- /dev/null
+++ b/svelte/src/pages/Appearance.svelte
@@ -0,0 +1,145 @@
+<script lang="ts">
+import { onMount } from "svelte";
+
+const get_cookie = (cname: string) => {
+	let name = cname + "=";
+	let decodedCookie = decodeURIComponent(document.cookie);
+	let ca = decodedCookie.split(';');
+	for(let i = 0; i <ca.length; i++) {
+		let c = ca[i];
+		while (c.charAt(0) == ' ') {
+		c = c.substring(1);
+		}
+		if (c.indexOf(name) == 0) {
+		return c.substring(name.length, c.length);
+		}
+	}
+	return "";
+}
+
+let style = get_cookie("style")
+let hue = +get_cookie("hue")
+
+// Style selector
+onMount(() => {
+	document.getElementsByName("style").forEach(function(elem) {
+		elem.addEventListener("change", e => {
+			style = (e.target as HTMLInputElement).id.substring(6)
+
+			var date = new Date();
+			date.setTime(date.getTime() + (10 * 365 * 24 * 60 * 60 * 1000));
+			document.cookie = "style="+style+"; expires=" + date.toUTCString() + "; path=/"
+
+			reload_sheet()
+		})
+	});
+	document.getElementsByName("hue").forEach(function(elem) {
+		elem.addEventListener("change", e => {
+			hue = +(e.target as HTMLInputElement).id.substring(4)
+			if (hue === -1) {
+				document.cookie = "hue=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/"
+			}
+
+			var date = new Date();
+			date.setTime(date.getTime() + (10 * 365 * 24 * 60 * 60 * 1000));
+			document.cookie = "hue="+hue+"; expires=" + date.toUTCString() + "; path=/"
+
+			reload_sheet()
+		})
+	});
+})
+
+let stylesheet_2: HTMLLinkElement
+const reload_sheet = () => {
+	let stylesheet1 = document.getElementById("stylesheet_theme") as HTMLLinkElement
+
+	// First load the sheet in the secondary tag, wait for it to load,
+	// and replace the original sheet when it has finished loading
+	stylesheet_2.href= "/theme.css?style="+style+"&hue="+hue
+	stylesheet_2.onload = e => {
+		stylesheet1.href= "/theme.css?style="+style+"&hue="+hue
+	}
+}
+</script>
+
+<svelte:head>
+	<link bind:this={stylesheet_2} id="stylesheet_theme_2" rel="stylesheet" type="text/css" href="/theme.css"/>
+</svelte:head>
+
+<div id="page_content" class="page_content">
+	<section>
+		<p>
+			You can change how pixeldrain looks! Your theme choice will
+			be saved in a cookie.
+		</p>
+		<h2>Theme</h2>
+		<input type="radio" id="style_nord" name="style"><label for="style_nord">Nord</label>
+		(Inspired by <a href="https://www.nordtheme.com/" target="_blank">Nord</a>)
+		<br/>
+		Dynamic theme, changes based on operating system settings. Here you can choose a specific variant:
+		<br/>
+		<input type="radio" id="style_nord_dark" name="style"><label for="style_nord_dark">Nord dark</label>
+		<br/>
+		<input type="radio" id="style_nord_light" name="style"><label for="style_nord_light">Nord light</label>
+		<br/>
+		<br/>
+		<input type="radio" id="style_solarized" name="style"><label for="style_solarized">Solarized</label>
+		(Inspired by <a href="https://ethanschoonover.com/solarized/" target="_blank">Solarized</a>)
+		<br/>
+		Dynamic theme, changes based on operating system settings. Here you can choose a specific variant:
+		<br/>
+		<input type="radio" id="style_solarized_dark" name="style"><label for="style_solarized_dark">Solarized dark</label>
+		<br/>
+		<input type="radio" id="style_solarized_light" name="style"><label for="style_solarized_light">Solarized light</label>
+		<br/>
+		<!-- <br/> -->
+		<!-- <input type="radio" id="style_adwaita" name="style"><label for="style_adwaita">Adwaita</label><br/> -->
+		<br/>
+		<input type="radio" id="style_purple_drain" name="style"><label for="style_purple_drain">Purple drain</label>
+		<br/>
+		Classic 2022 style, with purple gradients
+		<br/>
+		<br/>
+		<input type="radio" id="style_classic" name="style"><label for="style_classic">Pixeldrain classic (gray)</label>
+		<br/>
+		Classic pre-2020 pixeldrain style, dark gray
+		<br/>
+		<br/>
+		Other (experimental) themes
+		<br/>
+		<input type="radio" id="style_maroon" name="style"><label for="style_maroon">Maroon Style</label>
+		<br/>
+		<input type="radio" id="style_hacker" name="style"><label for="style_hacker">Hacker Style</label>
+		<br/>
+		<input type="radio" id="style_canta" name="style"><label for="style_canta">Canta Style</label>
+		(Inspired by <a href="https://github.com/vinceliuice/Canta-theme" target="_blank">Canta GTK</a>)
+		<br/>
+		<input type="radio" id="style_skeuos" name="style"><label for="style_skeuos">Skeuos Style</label>
+		(Inspired by <a href="https://www.gnome-look.org/p/1441725/" target="_blank">Skeuos GTK</a>)
+		<br/>
+		<input type="radio" id="style_sweet" name="style"><label for="style_sweet">Sweet</label>
+		<br/>
+		<br/>
+		<input type="radio" id="style_adwaita" name="style"><label for="style_adwaita">Adwaita (dynamic)</label>
+		<br/>
+		<input type="radio" id="style_adwaita_dark" name="style"><label for="style_adwaita_dark">Adwaita dark</label>
+		<br/>
+		<input type="radio" id="style_adwaita_light" name="style"><label for="style_adwaita_light">Adwaita light</label>
+		<br/><br/>
+		<input type="radio" id="style_pixeldrain98" name="style"><label for="style_pixeldrain98">Pixeldrain 98</label>
+		<br/>
+		<input type="radio" id="style_pixeldrain98_dark" name="style"><label for="style_pixeldrain98_dark">Pixeldrain 98 (dark)</label>
+
+		<h2>Hue</h2>
+		<p>
+			Many themes support custom hues. The hue does not change the
+			contrast of the theme, only the color itself.
+		</p>
+		<input type="radio" id="hue_-1" name="hue"><label for="hue_-1">Default</label><br/>
+		<input type="radio" id="hue_354" name="hue"><label for="hue_354">Red</label><br/>
+		<input type="radio" id="hue_14" name="hue"><label for="hue_14">Orange</label><br/>
+		<input type="radio" id="hue_40" name="hue"><label for="hue_40">Yellow</label><br/>
+		<input type="radio" id="hue_92" name="hue"><label for="hue_92">Green</label><br/>
+		<input type="radio" id="hue_311" name="hue"><label for="hue_311">Purple</label><br/>
+	</section>
+</div>
diff --git a/svelte/src/speedtest.js b/svelte/src/speedtest.js
deleted file mode 100644
index 5d0ac25..0000000
--- a/svelte/src/speedtest.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import App from './speedtest/Index.svelte';
-
-const app = new App({
-	target: document.getElementById("page_body"),
-	props: {}
-});
-
-export default app;
diff --git a/svelte/src/speedtest/Index.svelte b/svelte/src/speedtest/SpeedtestPage.svelte
similarity index 96%
rename from svelte/src/speedtest/Index.svelte
rename to svelte/src/speedtest/SpeedtestPage.svelte
index 6b0b250..90032d3 100644
--- a/svelte/src/speedtest/Index.svelte
+++ b/svelte/src/speedtest/SpeedtestPage.svelte
@@ -1,13 +1,8 @@
 <script>
 import Footer from "layout/Footer.svelte";
 import Speedtest from "./Speedtest.svelte";
-
 </script>
 
-<header>
-	<h1>Pixeldrain Speedtest</h1>
-</header>
-
 <div class="page_content">
 	<Speedtest/>
 
@@ -106,11 +101,3 @@ import Speedtest from "./Speedtest.svelte";
 		</p>
 	</section>
 </div>
-
-<Footer/>
-
-<style>
-.page_content {
-	margin-bottom: 16px;
-}
-</style>
diff --git a/svelte/src/user_home.js b/svelte/src/user_home.js
deleted file mode 100644
index 02f53a1..0000000
--- a/svelte/src/user_home.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import App from './user_home/Router.svelte';
-
-const app = new App({
-	target: document.getElementById("page_body"),
-	props: {}
-});
-
-export default app;
diff --git a/svelte/src/user_home/APIKeys.svelte b/svelte/src/user_home/APIKeys.svelte
index a98792d..55ddedc 100644
--- a/svelte/src/user_home/APIKeys.svelte
+++ b/svelte/src/user_home/APIKeys.svelte
@@ -1,13 +1,12 @@
 <script>
+import { loading_finish, loading_start } from "lib/Loading";
 import { formatDate } from "util/Formatting";
-import LoadingIndicator from "util/LoadingIndicator.svelte";
 
-let loading = false
 let loaded = false
 let rows = []
 
 const load_keys = async () => {
-	loading = true
+	loading_start()
 	try {
 		const resp = await fetch(window.api_endpoint+"/user/session")
 		if(resp.status >= 400) {
@@ -30,13 +29,13 @@ const load_keys = async () => {
 	} catch (err) {
 		alert(err)
 	} finally {
-		loading = false
+		loading_finish()
 		loaded = true
 	}
 };
 
 const create_key = async () => {
-	loading = true
+	loading_start()
 	try {
 		let form = new FormData()
 		form.append("app_name", "website keys page")
@@ -53,14 +52,15 @@ const create_key = async () => {
 		}
 	} catch (err) {
 		alert("Failed to create new API key! "+err)
+	} finally {
+		loading_finish()
 	}
 
 	load_keys();
 }
 
 const logout = async (key) => {
-	loading = true
-
+	loading_start()
 	try {
 		const resp = await fetch(
 			window.api_endpoint+"/user/session",
@@ -76,14 +76,14 @@ const logout = async (key) => {
 		}
 	} catch (err) {
 		alert("Failed to delete key: "+err)
+	} finally {
+		loading_finish()
 	}
 
 	load_keys();
 }
 </script>
 
-<LoadingIndicator loading={loading}/>
-
 <section>
 	{#if !loaded}
 		<div class="highlight_yellow">
diff --git a/svelte/src/user_home/ActivityLog.svelte b/svelte/src/user_home/ActivityLog.svelte
index 2bc534d..eea2f9b 100644
--- a/svelte/src/user_home/ActivityLog.svelte
+++ b/svelte/src/user_home/ActivityLog.svelte
@@ -1,9 +1,7 @@
 <script>
+import { loading_finish, loading_start } from "lib/Loading";
 import { onMount } from "svelte";
 import { formatDate } from "util/Formatting";
-import LoadingIndicator from "util/LoadingIndicator.svelte";
-
-let loading = false
 
 let year = 0
 let month = 0
@@ -11,7 +9,7 @@ let month_str = ""
 let data = []
 
 const load_activity = async () => {
-	loading = true
+	loading_start()
 	month_str = year + "-" + ("00"+(month)).slice(-2)
 	try {
 		const resp = await fetch(window.api_endpoint+"/user/activity/" + month_str)
@@ -29,7 +27,7 @@ const load_activity = async () => {
 	} catch (err) {
 		alert(err)
 	} finally {
-		loading = false
+		loading_finish()
 	}
 };
 const last_month = () => {
@@ -59,8 +57,6 @@ onMount(() => {
 })
 </script>
 
-<LoadingIndicator loading={loading}/>
-
 <section>
 	<h2>Account activity log</h2>
 	<p>
diff --git a/svelte/src/user_home/AffiliatePrompt.svelte b/svelte/src/user_home/AffiliatePrompt.svelte
index ad6680a..dcf641c 100644
--- a/svelte/src/user_home/AffiliatePrompt.svelte
+++ b/svelte/src/user_home/AffiliatePrompt.svelte
@@ -1,14 +1,13 @@
 <script lang="ts">
 import { onMount } from "svelte";
 import Modal from "util/Modal.svelte";
-import LoadingIndicator from "util/LoadingIndicator.svelte";
 import { get_user, put_user } from "lib/PixeldrainAPI";
+    import { loading_finish, loading_start } from "lib/Loading";
 
 // When the always flag is set then the pop-up will also show if the user
 // already has an affiliate ID set
 export let always = false
 let modal: Modal
-let loading: boolean
 let referral: string
 let shown = false
 
@@ -50,7 +49,7 @@ export const prompt = async (ref: string) => {
 onMount(() => prompt(new URLSearchParams(document.location.search).get("ref")))
 
 const allow = async () => {
-	loading = true
+	loading_start()
 	try {
 		await put_user({affiliate_user_name: referral})
 
@@ -59,7 +58,7 @@ const allow = async () => {
 	} catch (err) {
 		alert(err)
 	} finally {
-		loading = false
+		loading_finish()
 	}
 }
 
@@ -70,7 +69,6 @@ const deny = () => {
 </script>
 
 <Modal bind:this={modal} title="Affiliate sponsoring request" width="700px">
-	<LoadingIndicator bind:loading={loading} />
 	<section>
 		<p>
 			Hi! {referral} wants you to sponsor their pixeldrain account. This
diff --git a/svelte/src/user_home/BandwidthSharing.svelte b/svelte/src/user_home/BandwidthSharing.svelte
index aac2732..05580cb 100644
--- a/svelte/src/user_home/BandwidthSharing.svelte
+++ b/svelte/src/user_home/BandwidthSharing.svelte
@@ -2,24 +2,22 @@
 import { onMount } from "svelte";
 import Pro from "icons/Pro.svelte";
 import { formatDataVolume } from "util/Formatting";
-import LoadingIndicator from "util/LoadingIndicator.svelte";
 import ProgressBar from "util/ProgressBar.svelte";
 import SuccessMessage from "util/SuccessMessage.svelte";
+    import { loading_finish, loading_start } from "lib/Loading";
 
-let loading = false
 let success_message
 let hotlinking = window.user.hotlinking_enabled
 let transfer_cap = window.user.monthly_transfer_cap / 1e12
 let skip_viewer = window.user.skip_file_viewer
 
 const update = async () => {
-	loading = true
-
 	const form = new FormData()
 	form.append("hotlinking_enabled", hotlinking)
 	form.append("transfer_cap", transfer_cap*1e12)
 	form.append("skip_file_viewer", skip_viewer)
 
+	loading_start()
 	try {
 		const resp = await fetch(
 			window.api_endpoint+"/user",
@@ -37,7 +35,7 @@ const update = async () => {
 	} catch (err) {
 		success_message.set(false, "Failed to update subscription: "+err)
 	} finally {
-		loading = false
+		loading_finish()
 	}
 }
 
@@ -78,8 +76,6 @@ onMount(() => {
 
 </script>
 
-<LoadingIndicator loading={loading}/>
-
 <section>
 	<h2><Pro/>Hotlinking (bandwidth sharing)</h2>
 	<SuccessMessage bind:this={success_message}></SuccessMessage>
diff --git a/svelte/src/user_home/ConnectApp.svelte b/svelte/src/user_home/ConnectApp.svelte
index 942ed0c..41ee2e2 100644
--- a/svelte/src/user_home/ConnectApp.svelte
+++ b/svelte/src/user_home/ConnectApp.svelte
@@ -1,13 +1,12 @@
 <script>
 import { onMount } from "svelte";
-import LoadingIndicator from "util/LoadingIndicator.svelte";
 import CopyButton from "layout/CopyButton.svelte";
+import { loading_finish, loading_start } from "lib/Loading";
 
-let loading = false
 let app_name = ""
 let api_key = ""
 const create_key = async () => {
-	loading = true
+	loading_start()
 	try {
 		let form = new FormData()
 		form.append("app_name", app_name)
@@ -27,7 +26,7 @@ const create_key = async () => {
 	} catch (err) {
 		alert("Failed to create new API key! "+err)
 	} finally {
-		loading = false
+		loading_finish()
 	}
 }
 
@@ -48,8 +47,6 @@ onMount(() => {
 })
 </script>
 
-<LoadingIndicator loading={loading}/>
-
 <section>
 	<!-- Show a back button if an app is selected -->
 	{#if app_name}
diff --git a/svelte/src/user_home/DepositCredit.svelte b/svelte/src/user_home/DepositCredit.svelte
index d02388b..5435a11 100644
--- a/svelte/src/user_home/DepositCredit.svelte
+++ b/svelte/src/user_home/DepositCredit.svelte
@@ -1,16 +1,13 @@
 <script>
 import Checkout from "layout/checkout/Checkout.svelte";
+    import { loading_finish, loading_start } from "lib/Loading";
 import { onMount } from "svelte";
 import Euro from "util/Euro.svelte";
 import { formatDate } from "util/Formatting";
-import LoadingIndicator from "util/LoadingIndicator.svelte";
 
-let loading = false
 let credit_amount = 10
 
 const checkout = async (network = "", amount = 0, country = "") => {
-	loading = true
-
 	if (amount < 10) {
 		alert("Amount needs to be at least €10")
 		return
@@ -21,6 +18,7 @@ const checkout = async (network = "", amount = 0, country = "") => {
 	form.set("network", network)
 	form.set("country", country)
 
+	loading_start()
 	try {
 		const resp = await fetch(
 			window.api_endpoint+"/user/invoice",
@@ -35,14 +33,14 @@ const checkout = async (network = "", amount = 0, country = "") => {
 	} catch (err) {
 		alert(err)
 	} finally {
-		loading = false
+		loading_finish()
 	}
 }
 
 let invoices = []
 let unpaid_invoice = 0
 const load_invoices = async () => {
-	loading = true
+	loading_start()
 	try {
 		const resp = await fetch(window.api_endpoint+"/user/invoice")
 		if(resp.status >= 400) {
@@ -66,7 +64,7 @@ const load_invoices = async () => {
 		console.error(err)
 		alert(err)
 	} finally {
-		loading = false
+		loading_finish()
 	}
 };
 
@@ -75,8 +73,6 @@ onMount(() => {
 })
 </script>
 
-<LoadingIndicator loading={loading}/>
-
 <section>
 	<h2 id="deposit">Deposit credit</h2>
 	<p>
diff --git a/svelte/src/user_home/EmbeddingControls.svelte b/svelte/src/user_home/EmbeddingControls.svelte
index bf516ed..d5160b0 100644
--- a/svelte/src/user_home/EmbeddingControls.svelte
+++ b/svelte/src/user_home/EmbeddingControls.svelte
@@ -1,20 +1,19 @@
 <script>
 import { onMount } from "svelte";
 import Persistence from "icons/Persistence.svelte";
-import LoadingIndicator from "util/LoadingIndicator.svelte";
 import SuccessMessage from "util/SuccessMessage.svelte";
+import { loading_finish, loading_start } from "lib/Loading";
 
-let loading = false
 let success_message
 
 // Embedding settings
 let embed_domains = ""
 
 const save_embed = async () => {
-	loading = true
 	const form = new FormData()
 	form.append("embed_domains", embed_domains)
 
+	loading_start()
 	try {
 		const resp = await fetch(
 			window.api_endpoint+"/user",
@@ -30,7 +29,7 @@ const save_embed = async () => {
 	} catch(err) {
 		success_message.set(false, err)
 	} finally {
-		loading = false
+		loading_finish()
 	}
 }
 
@@ -39,8 +38,6 @@ onMount(() => {
 })
 </script>
 
-<LoadingIndicator loading={loading}/>
-
 <section>
 	<h2><Persistence/>Embedding controls</h2>
 	<SuccessMessage bind:this={success_message}></SuccessMessage>
diff --git a/svelte/src/user_home/Subscription.svelte b/svelte/src/user_home/Subscription.svelte
index afee20b..f933595 100644
--- a/svelte/src/user_home/Subscription.svelte
+++ b/svelte/src/user_home/Subscription.svelte
@@ -1,20 +1,18 @@
 <script>
 import Euro from "util/Euro.svelte"
-import LoadingIndicator from "util/LoadingIndicator.svelte";
 import SuccessMessage from "util/SuccessMessage.svelte";
 import PatreonActivationResult from "./PatreonActivationResult.svelte";
+import { loading_finish, loading_start } from "lib/Loading";
 
-let loading = false
 let subscription = window.user.subscription.id
 let subscription_type = window.user.subscription.type
 let success_message
 
 const update = async (plan) => {
-	loading = true
-
 	const form = new FormData()
 	form.append("subscription", plan)
 
+	loading_start()
 	try {
 		{
 			const resp = await fetch(
@@ -43,13 +41,11 @@ const update = async (plan) => {
 	} catch (err) {
 		success_message.set(false, "Failed to update subscription: "+err)
 	} finally {
-		loading = false
+		loading_finish()
 	}
 }
 </script>
 
-<LoadingIndicator loading={loading}/>
-
 <section>
 	{#if window.location.hash === "#checkout_complete"}
 		<div class="highlight_green">
diff --git a/svelte/src/user_home/Transactions.svelte b/svelte/src/user_home/Transactions.svelte
index 5692123..a68ec93 100644
--- a/svelte/src/user_home/Transactions.svelte
+++ b/svelte/src/user_home/Transactions.svelte
@@ -2,9 +2,7 @@
 import { onMount } from "svelte";
 import { formatDataVolume, formatDate } from "util/Formatting";
 import Euro from "util/Euro.svelte"
-import LoadingIndicator from "util/LoadingIndicator.svelte";
-
-let loading = false
+import { loading_finish, loading_start } from "lib/Loading";
 
 let year = 0
 let month = 0
@@ -22,7 +20,7 @@ let transactions = {
 }
 
 const load_transactions = async () => {
-	loading = true
+	loading_start()
 	month_str = year + "-" + ("00"+(month)).slice(-2)
 	try {
 		const resp = await fetch(window.api_endpoint+"/user/transactions/"+month_str)
@@ -67,7 +65,7 @@ const load_transactions = async () => {
 	} catch (err) {
 		alert(err)
 	} finally {
-		loading = false
+		loading_finish()
 	}
 };
 const last_month = () => {
@@ -97,8 +95,6 @@ onMount(() => {
 })
 </script>
 
-<LoadingIndicator loading={loading}/>
-
 <section>
 	<h2>Transaction log</h2>
 	<p>
diff --git a/svelte/src/user_home/dashboard/CardActivity.svelte b/svelte/src/user_home/dashboard/CardActivity.svelte
index 1903ca4..972679a 100644
--- a/svelte/src/user_home/dashboard/CardActivity.svelte
+++ b/svelte/src/user_home/dashboard/CardActivity.svelte
@@ -1,10 +1,8 @@
 <script>
 import { onMount } from "svelte";
 import { formatDate } from "util/Formatting";
-import LoadingIndicator from "util/LoadingIndicator.svelte";
 import Button from "layout/Button.svelte";
-
-let loading = false
+import { loading_finish, loading_start } from "lib/Loading";
 
 let year = 0
 let month = 0
@@ -12,8 +10,8 @@ let month_str = ""
 let data = []
 
 const load_activity = async () => {
-	loading = true
 	month_str = year + "-" + ("00"+(month)).slice(-2)
+	loading_start()
 	try {
 		const resp = await fetch(window.api_endpoint+"/user/activity/" + month_str)
 		if(resp.status >= 400) {
@@ -30,7 +28,7 @@ const load_activity = async () => {
 	} catch (err) {
 		alert(err)
 	} finally {
-		loading = false
+		loading_finish()
 	}
 };
 const last_month = () => {
@@ -60,8 +58,6 @@ onMount(() => {
 })
 </script>
 
-<LoadingIndicator loading={loading}/>
-
 <div class="toolbar">
 	<Button click={last_month} icon="chevron_left"/>
 	<div class="toolbar_spacer">
diff --git a/svelte/src/user_home/dashboard/CardFSHome.svelte b/svelte/src/user_home/dashboard/CardFSHome.svelte
index e04530f..addc0ce 100644
--- a/svelte/src/user_home/dashboard/CardFSHome.svelte
+++ b/svelte/src/user_home/dashboard/CardFSHome.svelte
@@ -1,7 +1,7 @@
 <script>
 import { onMount } from "svelte";
 import { FSNavigator } from "filesystem/FSNavigator.ts"
-import { fs_encode_path, fs_node_icon, node_is_shared } from "filesystem/FilesystemAPI";
+import { fs_encode_path, fs_node_icon, node_is_shared } from "lib/FilesystemAPI";
 import Button from "layout/Button.svelte";
 import CreateDirectory from "filesystem/filemanager/CreateDirectory.svelte";
 import FSUploadWidget from "filesystem/upload_widget/FSUploadWidget.svelte";
diff --git a/svelte/src/user_home/dashboard/CardPrepaidTransactions.svelte b/svelte/src/user_home/dashboard/CardPrepaidTransactions.svelte
index 428ecd8..13e300b 100644
--- a/svelte/src/user_home/dashboard/CardPrepaidTransactions.svelte
+++ b/svelte/src/user_home/dashboard/CardPrepaidTransactions.svelte
@@ -2,10 +2,8 @@
 import { onMount } from "svelte";
 import { formatDataVolume, formatDate } from "util/Formatting";
 import Euro from "util/Euro.svelte"
-import LoadingIndicator from "util/LoadingIndicator.svelte";
 import Button from "layout/Button.svelte";
-
-let loading = false
+import { loading_finish, loading_start } from "lib/Loading";
 
 let year = 0
 let month = 0
@@ -25,8 +23,8 @@ let transactions = {
 }
 
 const load_transactions = async () => {
-	loading = true
 	month_str = year + "-" + ("00"+(month)).slice(-2)
+	loading_start()
 	try {
 		const resp = await fetch(window.api_endpoint+"/user/transactions/"+month_str)
 		if(resp.status >= 400) {
@@ -79,7 +77,7 @@ const load_transactions = async () => {
 	} catch (err) {
 		alert(err)
 	} finally {
-		loading = false
+		loading_finish()
 	}
 };
 const last_month = () => {
@@ -109,8 +107,6 @@ onMount(() => {
 })
 </script>
 
-<LoadingIndicator loading={loading}/>
-
 <div class="toolbar">
 	<Button click={last_month} icon="chevron_left"/>
 	<div class="toolbar_spacer">
diff --git a/svelte/src/util/LoadingIndicator.svelte b/svelte/src/util/LoadingIndicator.svelte
deleted file mode 100644
index e43faf3..0000000
--- a/svelte/src/util/LoadingIndicator.svelte
+++ /dev/null
@@ -1,21 +0,0 @@
-<script>
-import Spinner from "./Spinner.svelte";
-
-export let loading = false
-</script>
-
-{#if loading}
-	<div class="container">
-		<Spinner/>
-	</div>
-{/if}
-
-<style>
-.container {
-	position: fixed;
-	top: 10px;
-	right: 10px;
-	height: 120px;
-	width: 120px;
-}
-</style>
diff --git a/svelte/src/util/TabMenu.svelte b/svelte/src/util/TabMenu.svelte
index 3a48c7a..287a1e6 100644
--- a/svelte/src/util/TabMenu.svelte
+++ b/svelte/src/util/TabMenu.svelte
@@ -8,20 +8,15 @@ export type Tab = {
 	hide_background?: boolean,
 	hide_frame?: boolean,
 	subpages?: Tab[],
-}
+};
 </script>
 <script lang="ts">
 import { onMount, type ComponentType } from "svelte";
-import Footer from "layout/Footer.svelte";
+import { current_page_store } from "wrap/RouterStore";
 
 export let title = ""
 export let pages: Tab[] = []
 
-const navigate = (page: Tab) => {
-	window.history.pushState({}, window.document.title, page.path)
-	get_page()
-}
-
 const get_page = () => {
 	current_page = null
 	current_subpage = null
@@ -52,7 +47,7 @@ const get_page = () => {
 	}
 
 	title = current_subpage === null ? current_page.title : current_subpage.title
-	window.document.title = title+" ~ pixeldrain"
+	window.document.title = title+" / FNX"
 
 	console.debug("Page", current_page)
 	console.debug("Subpage", current_subpage)
@@ -63,22 +58,21 @@ const get_page = () => {
 let current_page: Tab = null
 let current_subpage: Tab = null
 
-onMount(() => get_page())
+onMount(() => {
+	get_page()
+	return current_page_store.subscribe(get_page)
+})
 </script>
 
-<svelte:window on:popstate={get_page} />
-
 {#if current_page !== null && current_page.hide_frame !== true}
 	<header>
-		<h1>{title}</h1>
-
 		<div class="tab_bar">
 			{#each pages as page}
 				{#if !page.hidden}
 					<a class="button"
 						href="{page.path}"
 						class:button_highlight={current_page && page.path === current_page.path}
-						on:click|preventDefault={() => {navigate(page)}}>
+					>
 						<i class="icon">{page.icon}</i>
 						<span>{page.title}</span>
 					</a>
@@ -97,7 +91,7 @@ onMount(() => get_page())
 						<a class="button"
 							href="{page.path}"
 							class:button_highlight={current_subpage && page.path === current_subpage.path}
-							on:click|preventDefault={() => {navigate(page)}}>
+						>
 							<i class="icon">{page.icon}</i>
 							<span>{page.title}</span>
 						</a>
@@ -114,13 +108,9 @@ onMount(() => get_page())
 	</div>
 {/if}
 
-{#if current_page !== null && current_page.hide_frame !== true}
-	<Footer/>
-{/if}
-
 <style>
 .submenu {
-	border-bottom: 2px solid var(--separator);
+	border-bottom: 1px solid var(--separator);
 }
 .tab_bar > .button {
 	flex-direction: column;
diff --git a/svelte/src/filesystem.js b/svelte/src/wrap.js
similarity index 62%
rename from svelte/src/filesystem.js
rename to svelte/src/wrap.js
index ab36c43..49a89da 100644
--- a/svelte/src/filesystem.js
+++ b/svelte/src/wrap.js
@@ -1,4 +1,4 @@
-import App from './filesystem/Filesystem.svelte';
+import App from './wrap/MainMenu.svelte';
 
 const app = new App({
 	target: document.body,
diff --git a/svelte/src/wrap/Bookmarks.svelte b/svelte/src/wrap/Bookmarks.svelte
new file mode 100644
index 0000000..ce5871f
--- /dev/null
+++ b/svelte/src/wrap/Bookmarks.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+import { bookmark_del, bookmarks_store } from "lib/Bookmarks";
+import { highlight_current_page } from "lib/HighlightCurrentPage";
+</script>
+
+{#each $bookmarks_store as bookmark}
+	<div class="row">
+		<a class="button" href="/d/{bookmark.id}" use:highlight_current_page>
+			<i class="icon">{bookmark.icon}</i>
+			<span class="hide_small">{bookmark.label}</span>
+		</a>
+		<button on:click={() => bookmark_del(bookmark.id)}>
+			<i class="icon">delete</i>
+		</button>
+	</div>
+{/each}
+
+<style>
+.row {
+	display: flex;
+	flex-direction: row;
+}
+.row>a {
+	flex: 1 1 auto;
+}
+.row>button {
+	flex: 0 0 auto;
+}
+.button {
+	background: none;
+	box-shadow: none;
+}
+@media(max-width: 1000px) {
+	.hide_small {
+		display: none;
+	}
+}
+</style>
diff --git a/svelte/src/wrap/MainMenu.svelte b/svelte/src/wrap/MainMenu.svelte
new file mode 100644
index 0000000..cf65c71
--- /dev/null
+++ b/svelte/src/wrap/MainMenu.svelte
@@ -0,0 +1,166 @@
+<script lang="ts">
+import { highlight_current_page } from "lib/HighlightCurrentPage";
+import { user } from "lib/UserStore";
+import Euro from "util/Euro.svelte";
+import { formatDataVolume } from "util/Formatting";
+import Router from "wrap/Router.svelte";
+import Bookmarks from "./Bookmarks.svelte";
+import { onMount } from "svelte";
+import { fs_get_node } from "lib/FilesystemAPI";
+import { css_from_path } from "filesystem/edit_window/Branding";
+import { loading_run, loading_store } from "lib/Loading";
+import Spinner from "util/Spinner.svelte";
+
+onMount(async () => {
+	await loading_run(async () => {
+		const root = await fs_get_node("/me")
+		document.documentElement.style = css_from_path(root.path)
+	})
+})
+</script>
+
+<div class="nav_container">
+	<nav class="nav">
+		{#if $user.username !== undefined && $user.username !== ""}
+			<div class="username hide_small">
+				{$user.username}
+			</div>
+			<div class="stats_table hide_small">
+				<div>Subscription</div>
+				<div>{$user.subscription.name}</div>
+
+				{#if $user.subscription.type === "prepaid"}
+					<div>Credit</div>
+					<div><Euro amount={$user.balance_micro_eur}/></div>
+				{/if}
+
+				<div>Storage used</div>
+				<div>{formatDataVolume($user.filesystem_storage_used, 3)}</div>
+				<div>Transfer used</div>
+				<div>{formatDataVolume($user.monthly_transfer_used, 3)}</div>
+			</div>
+			<div class="separator hide_small"></div>
+		{/if}
+
+		<a class="button" href="/" use:highlight_current_page>
+			<i class="icon">home</i>
+			<span class="hide_small">Home</span>
+		</a>
+		{#if !$user.username}
+			<a class="button" href="/login" use:highlight_current_page>
+				<i class="icon">login</i>
+				<span class="hide_small">Login</span>
+			</a>
+			<a class="button" href="/register" use:highlight_current_page>
+				<i class="icon">how_to_reg</i>
+				<span class="hide_small">Register</span>
+			</a>
+		{:else}
+			<a class="button" href="/user" use:highlight_current_page>
+				<i class="icon">dashboard</i>
+				<span class="hide_small">Dashboard</span>
+			</a>
+			<a class="button" href="/d/me" use:highlight_current_page>
+				<i class="icon">folder</i>
+				<span class="hide_small">Filesystem</span>
+			</a>
+			{#if $user.is_admin}
+				<a class="button" href="/admin" use:highlight_current_page>
+					<i class="icon">admin_panel_settings</i>
+					<span class="hide_small">Admin Panel</span>
+				</a>
+			{/if}
+		{/if}
+		<a class="button" href="/speedtest" use:highlight_current_page>
+			<i class="icon">speed</i>
+			<span class="hide_small">Speedtest</span>
+		</a>
+		<a class="button" href="/appearance" use:highlight_current_page>
+			<i class="icon">palette</i>
+			<span class="hide_small">Themes</span>
+		</a>
+
+		<div class="separator hide_small"></div>
+		<Bookmarks/>
+	</nav>
+</div>
+
+<div class="page">
+	<Router/>
+</div>
+
+
+{#if $loading_store !== 0}
+	<div class="spinner">
+		<Spinner/>
+	</div>
+{/if}
+
+<style>
+:global(body) {
+	display: flex;
+	flex-direction: row;
+
+	color: var(--body_text_color);
+	background-image: var(--background_image);
+	background-color: var(--background_pattern_color);
+	background-size: var(--background_image_size, initial);
+	background-position: var(--background_image_position, initial);
+	background-repeat: var(--background_image_repeat, repeat);
+	background-attachment: fixed;
+}
+.nav_container {
+	flex: 0 0 auto;
+	border-right: 1px solid var(--separator);
+	background: var(--shaded_background);
+	backdrop-filter: blur(4px);
+}
+.nav {
+	display: flex;
+	flex-direction: column;
+	max-width: 15em;
+	position: sticky;
+	top: 0;
+
+}
+.nav > .button {
+	background: none;
+	box-shadow: none;
+}
+.page {
+	flex: 1 1 auto;
+	overflow-x: hidden;
+	max-width: 100%;
+}
+
+.separator {
+	height: 1px;
+	margin: 2px 0;
+	width: 100%;
+	background-color: var(--separator);
+}
+.username {
+	text-align: center;
+	margin: 3px;
+}
+.stats_table {
+	display: grid;
+	grid-template-columns: auto auto;
+	gap: 0.2em 1em;
+	margin: 3px;
+}
+
+@media(max-width: 1000px) {
+	.hide_small {
+		display: none;
+	}
+}
+
+.spinner {
+	position: fixed;
+	top: 10px;
+	right: 10px;
+	height: 120px;
+	width: 120px;
+}
+</style>
diff --git a/svelte/src/wrap/NotFound.svelte b/svelte/src/wrap/NotFound.svelte
new file mode 100644
index 0000000..33047ad
--- /dev/null
+++ b/svelte/src/wrap/NotFound.svelte
@@ -0,0 +1 @@
+Page not found
diff --git a/svelte/src/wrap/Router.svelte b/svelte/src/wrap/Router.svelte
new file mode 100644
index 0000000..cff99b0
--- /dev/null
+++ b/svelte/src/wrap/Router.svelte
@@ -0,0 +1,154 @@
+<script lang="ts">
+import { onMount, tick } from "svelte";
+import HomePage from "home_page/HomePage.svelte";
+import LoginRouter from "login/Router.svelte";
+import HomeRouter from "user_home/Router.svelte";
+import AdminRouter from "admin_panel/Router.svelte";
+import Filesystem from "filesystem/Filesystem.svelte";
+import NotFound from "./NotFound.svelte";
+import SpeedtestPage from "speedtest/SpeedtestPage.svelte";
+import Appearance from "pages/Appearance.svelte";
+import Footer from "layout/Footer.svelte";
+import { current_page_store, type Tab } from "./RouterStore";
+import { get_user, type User } from "lib/PixeldrainAPI";
+
+export let pages: Tab[] = [
+	{
+		path: "/",
+		title: "Home",
+		component: HomePage,
+	}, {
+		path: "/login",
+		title: "Login",
+		component: LoginRouter,
+	}, {
+		path: "/register",
+		title: "Register",
+		component: LoginRouter,
+	}, {
+		path: "/user",
+		prefix: "/user/",
+		title: "Dashboard",
+		component: HomeRouter,
+		login: true,
+	}, {
+		path: "/d/me",
+		prefix: "/d/",
+		title: "Filesystem",
+		component: Filesystem,
+		footer: false,
+		login: true,
+	}, {
+		path: "/admin",
+		prefix: "/admin/",
+		title: "Admin Panel",
+		component: AdminRouter,
+		login: true,
+	}, {
+		path: "/speedtest",
+		title: "Speedtest",
+		component: SpeedtestPage,
+	}, {
+		path: "/appearance",
+		title: "Appearance",
+		component: Appearance,
+	},
+]
+
+let user: User = null
+onMount(async () => {
+	user = await get_user()
+	load_page(window.location.pathname, false)
+})
+
+let current_page: Tab = null
+
+const load_page = (pathname: string, history: boolean): boolean => {
+	console.debug("Navigating to page", pathname, "log history:", history)
+
+	const path_decoded = decodeURI(pathname)
+	let page_by_path: Tab = null
+	let page_by_prefix: Tab = null
+	for (const page of pages) {
+		if (path_decoded === page.path) {
+			page_by_path = page
+		}
+		if (page.prefix !== undefined && path_decoded.startsWith(page.prefix)) {
+			page_by_prefix = page
+		}
+	}
+
+	if (page_by_path !== null) {
+		current_page = page_by_path
+	} else if (page_by_prefix !== null) {
+		current_page = page_by_prefix
+	} else {
+		current_page = {
+			path: "",
+			title: "Not Found",
+			component: NotFound,
+		}
+		return false
+	}
+
+	// If this page requires login, and the user is not logged in, then we
+	// redirect the user to the login page
+	if (current_page.login === true && (user.username === "" || user.username === undefined)) {
+		console.debug("User is not logged in, redirecting to login page", user)
+		return load_page("/login", true)
+	}
+
+	window.document.title = current_page.title+" / FNX"
+	console.debug("Page", current_page)
+
+	if(history) {
+		window.history.pushState({}, window.document.title, pathname)
+	}
+
+	// The current_page_store updates all the listening pages for navigation
+	// events. We first wait for a tick so that the current page gets unmounted
+	// before sending the event. That way a stale page will not get events which
+	// are not meant for them
+	tick().then(() => {
+		current_page_store.set(current_page)
+	})
+
+	return true
+}
+
+const click = (e: MouseEvent) => {
+	const origin = (e.target as Element).closest("a");
+
+	if (origin === null) {
+		return
+	}
+
+	const url = URL.parse(origin.href)
+	if (window.location.host !== url.host) {
+		return
+	}
+
+	console.log("Caught link click to", url.pathname);
+
+	// Try to load the page, if the page was found we cancel the browser
+	// navigation event so we can handle it ourselves
+	if (load_page(url.pathname, true)) {
+		e.preventDefault()
+	}
+}
+
+const popstate = (e: PopStateEvent) => {
+	load_page(window.location.pathname, false)
+}
+</script>
+
+<svelte:document on:click={click}/>
+<svelte:window on:popstate={popstate}/>
+
+{#if current_page !== null}
+	<svelte:component this={current_page.component} />
+
+	{#if current_page.footer === undefined || current_page.footer === true}
+		<Footer/>
+	{/if}
+{/if}
diff --git a/svelte/src/wrap/RouterStore.ts b/svelte/src/wrap/RouterStore.ts
new file mode 100644
index 0000000..34ea52a
--- /dev/null
+++ b/svelte/src/wrap/RouterStore.ts
@@ -0,0 +1,12 @@
+import type { ComponentType } from "svelte";
+import { writable } from "svelte/store";
+
+export type Tab = {
+	path: string,
+	prefix?: string,
+	title: string,
+	component?: ComponentType,
+	footer?: boolean,
+	login?: boolean,
+};
+export let current_page_store = writable({} as Tab);
diff --git a/webcontroller/filesystem.go b/webcontroller/filesystem.go
index bb36b88..c03c0f3 100644
--- a/webcontroller/filesystem.go
+++ b/webcontroller/filesystem.go
@@ -45,8 +45,24 @@ func (wc *WebController) serveDirectory(w http.ResponseWriter, r *http.Request,
 	td.Title = fmt.Sprintf("%s ~ pixeldrain", node.Path[node.BaseIndex].Name)
 	td.Other = node
 	td.OGData = wc.metadataFromFilesystem(r, node)
-	err = wc.templates.Run(w, r, "filesystem", td)
+	err = wc.templates.Run(w, r, "wrap", td)
 	if err != nil && !util.IsNetError(err) {
 		log.Error("Error executing template filesystem: %s", err)
 	}
 }
+
+func (wc *WebController) serveForbidden(w http.ResponseWriter, r *http.Request) {
+	log.Debug("Forbidden: %s", r.URL)
+	w.WriteHeader(http.StatusForbidden)
+	wc.templates.Run(w, r, "403", wc.newTemplateData(w, r))
+}
+
+func (wc *WebController) serveNotFound(w http.ResponseWriter, r *http.Request) {
+	log.Debug("Not Found: %s", r.URL)
+	w.WriteHeader(http.StatusNotFound)
+	wc.templates.Run(w, r, "404", wc.newTemplateData(w, r))
+}
+func (wc *WebController) serveUnavailableForLegalReasons(w http.ResponseWriter, r *http.Request) {
+	w.WriteHeader(http.StatusUnavailableForLegalReasons)
+	wc.templates.Run(w, r, "451", wc.newTemplateData(w, r))
+}
diff --git a/webcontroller/style.go b/webcontroller/style.go
index 9836350..ba3a415 100644
--- a/webcontroller/style.go
+++ b/webcontroller/style.go
@@ -3,10 +3,8 @@ package webcontroller
 import (
 	"fmt"
 	"html/template"
-	"math/rand"
 	"net/http"
 	"strconv"
-	"time"
 
 	"github.com/julienschmidt/httprouter"
 )
@@ -50,6 +48,10 @@ func userStyle(style string, hue int) template.CSS {
 	switch style {
 	default:
 		fallthrough
+	case "adwaita":
+		def = adwaitaDarkStyle
+		light = adwaitaLightStyle
+		hasLight = true
 	case "nord":
 		def = nordDarkStyle
 		light = nordLightStyle
@@ -83,16 +85,14 @@ func userStyle(style string, hue int) template.CSS {
 		def = skeuosPixeldrainStyle
 	case "sweet":
 		def = sweetPixeldrainStyle
-	case "adwaita":
-		def = adwaitaDarkStyle
-		light = adwaitaLightStyle
-		hasLight = true
 	case "adwaita_dark":
 		def = adwaitaDarkStyle
 	case "adwaita_light":
 		def = adwaitaLightStyle
 	case "pixeldrain98":
 		def = pixeldrain98Style
+	case "pixeldrain98_dark":
+		def = pixeldrain98StyleDark
 	}
 
 	if hue >= 0 && hue <= 360 {
@@ -223,7 +223,6 @@ func (s styleSheet) String() string {
 	--background_color:         %s;
 	--background:               %s;
 	--background_text_color:    %s;
-	--background_pattern:       url("%s");
 	--background_pattern_color: %s;
 	--navigation_background:    %s;
 	--body_color:               %s;
@@ -257,14 +256,13 @@ func (s styleSheet) String() string {
 		s.BackgroundColor.CSS(),
 		s.Background.CSS(),
 		s.BackgroundText.CSS(),
-		BackgroundTiles(),
 		s.BackgroundPattern.CSS(),
 		s.Navigation.CSS(),
 		s.BodyColor.CSS(),
 		s.BodyBackground.CSS(),
 		s.BodyText.CSS(),
 		s.Separator.CSS(),
-		s.BodyColor.WithAlpha(0.75).CSS(), // shaded_background
+		s.BodyColor.WithAlpha(0.7).CSS(), // shaded_background
 		s.CardColor.CSS(),
 		s.Chart1.CSS(),
 		s.Chart2.CSS(),
@@ -286,31 +284,6 @@ func (dark styleSheet) withLight(light styleSheet) string {
 	)
 }
 
-func BackgroundTiles() template.URL {
-	var (
-		now   = time.Now()
-		month = now.Month()
-		day   = now.Day()
-		file  string
-	)
-
-	if now.Weekday() == time.Wednesday && rand.Intn(20) == 0 {
-		file = "checker_wednesday"
-	} else if month == time.August && day == 8 {
-		file = "checker_dwarf"
-	} else if month == time.August && day == 24 {
-		file = "checker_developers"
-	} else if month == time.October && day == 31 {
-		file = "checker_halloween"
-	} else if month == time.December && (day == 25 || day == 26 || day == 27) {
-		file = "checker_christmas"
-	} else {
-		file = fmt.Sprintf("checker%d", now.UnixNano()%20)
-	}
-
-	return template.URL("/res/img/background_patterns/" + file + "_transparent.png")
-}
-
 // Following are all the available styles
 
 var purpleDrainStyle = styleSheet{
@@ -638,3 +611,106 @@ var pixeldrain98Style = styleSheet{
 
 	StyleOverrides: override98,
 }
+
+var pixeldrain98StyleDark = styleSheet{
+	Input:             HSL{0, 0, .25},
+	InputHover:        HSL{0, 0, .30},
+	InputText:         RGB{255, 255, 255},
+	InputDisabledText: RGB{128, 128, 128},
+	Highlight:         HSL{240, 1, .7},
+	HighlightText:     HSL{0, 1, 1},
+	Danger:            HSL{1, .71, .7},
+	Link:              HSL{240, 1, .8},
+
+	BackgroundColor: HSL{180, 1, .08},
+	BackgroundText:  HSL{0, 1, 1},
+	BodyColor:       HSL{0, 0, .25},
+	BodyText:        HSL{0, 1, 1},
+	Separator:       HSL{0, 0, .33},
+	CardColor:       HSL{0, 0, .25},
+
+	StyleOverrides: `
+:root {
+	--border_98: inset -1px -1px #222,
+		inset 1px 1px #666,
+		inset -2px -2px #333,
+		inset 2px 2px #555;
+	--inset_98: inset -1px -1px #666,
+		inset 1px 1px #111,
+		inset -2px -2px #555,
+		inset 2px 2px #333;
+}
+
+button, .button,
+dialog,
+fieldset,
+.highlight_border,
+.page_content,
+footer, .footer_content,
+.card,
+.window,
+.block,
+.sharebar,
+.directory_sorters, .directory_area,
+.container > .directory,
+.file_preview > .directory,
+.directory > .node,
+.file, .file_button,
+.upload_task,
+.add_button,
+.expandable,
+.upload_widget,
+.highlight_shaded {
+	border: none !important;
+	border-radius: 0 !important;
+	box-shadow: var(--border_98) !important;
+}
+legend {
+	background-color: var(--body_color);
+	border: none !important;
+}
+.window, .page_content, .file_button, .expandable, pre {
+	padding: 3px !important;
+}
+.window > .header,
+.headerbar,
+.upload_widget > .header {
+	background: linear-gradient(90deg, #003d66, #005c99) !important;
+	color: #fff !important;
+}
+.tab_bar > button, .tab_bar > .button {
+	border-top-left-radius: 3px !important;
+	border-top-right-radius: 3px !important;
+	box-shadow: var(--border_98) !important;
+}
+.directory > tr {
+	border: none !important;
+}
+.button_toggle_navigation {
+	padding: 8px !important;
+}
+
+input[type="email"],
+input[type="number"],
+input[type="password"],
+input[type="text"],
+input[type="date"],
+select, textarea, pre {
+	border-radius: 0 !important;
+	border: none !important;
+	box-shadow: var(--inset_98) !important;
+}
+code {
+	border-radius: 0 !important;
+}
+
+.file_preview,
+hr,
+.toolbar > .separator,
+.toolbar > .grid > .separator {
+	border-radius: 0 !important;
+	border: none !important;
+	box-shadow: var(--inset_98) !important;
+}
+`,
+}
diff --git a/webcontroller/web_controller.go b/webcontroller/web_controller.go
index 4ba3a27..0ff851f 100644
--- a/webcontroller/web_controller.go
+++ b/webcontroller/web_controller.go
@@ -117,7 +117,10 @@ func New(r *httprouter.Router, prefix string, conf Config) (wc *WebController) {
 		r.Handle("DELETE", "/api/*p", proxyHandler)
 	}
 
-	r.NotFound = http.HandlerFunc(wc.serveNotFound)
+	r.NotFound = http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		log.Info("running wrap handler")
+		wc.serveTemplate("wrap", handlerOpts{})(w, r, nil)
+	})
 
 	// Request method shorthands. These help keep the array of handlers aligned
 	const PST, GET = "POST", "GET"
@@ -128,14 +131,10 @@ func New(r *httprouter.Router, prefix string, conf Config) (wc *WebController) {
 		path    string            // The URL path this API will be registered on
 		handler httprouter.Handle // The function to run when this API is called
 	}{
-		// General navigation
-		{GET, "" /*                */, wc.serveLandingPage()},
-		{GET, "home" /*            */, wc.serveTemplate("home", handlerOpts{})},
 		{GET, "api" /*             */, wc.serveMarkdown("api.md", handlerOpts{})},
 		{GET, "d/*path" /*         */, wc.serveDirectory},
 		{GET, "widgets" /*         */, wc.serveTemplate("widgets", handlerOpts{})},
 		{GET, "about" /*           */, wc.serveMarkdown("about.md", handlerOpts{})},
-		{GET, "appearance" /*      */, wc.serveTemplate("appearance", handlerOpts{})},
 		{GET, "hosting" /*         */, wc.serveMarkdown("hosting.md", handlerOpts{})},
 		{GET, "acknowledgements" /**/, wc.serveMarkdown("acknowledgements.md", handlerOpts{})},
 		{GET, "business" /*        */, wc.serveMarkdown("business.md", handlerOpts{})},
@@ -144,23 +143,7 @@ func New(r *httprouter.Router, prefix string, conf Config) (wc *WebController) {
 		{GET, "filesystem" /*      */, wc.serveMarkdown("filesystem.md", handlerOpts{})},
 		{GET, "100_gigabit_ethernet", wc.serveMarkdown("100_gigabit_ethernet.md", handlerOpts{NoExec: true})},
 		{GET, "apps" /*            */, wc.serveTemplate("apps", handlerOpts{})},
-		{GET, "speedtest" /*       */, wc.serveTemplate("speedtest", handlerOpts{})},
 		{GET, "status" /*          */, wc.serveTemplate("status", handlerOpts{})},
-
-		// User account pages
-		{GET, "login" /*            */, wc.serveTemplate("login", handlerOpts{NoEmbed: true})},
-		{GET, "register" /*         */, wc.serveTemplate("login", handlerOpts{NoEmbed: true})},
-		{GET, "logout" /*           */, wc.serveTemplate("logout", handlerOpts{Auth: true, NoEmbed: true})},
-		{PST, "logout" /*           */, wc.serveLogout},
-
-		// User account settings
-		{GET, "user/*p", wc.serveTemplate("user_home", handlerOpts{Auth: true, NoEmbed: true})},
-
-		// Admin settings
-		{GET, "admin", wc.serveTemplate("admin", handlerOpts{Auth: true})},
-		{GET, "admin/*p", wc.serveTemplate("admin", handlerOpts{Auth: true})},
-
-		// Misc
 		{GET, "theme.css", wc.themeHandler},
 	} {
 		r.Handle(h.method, prefix+"/"+h.path, middleware(h.handler))
@@ -198,24 +181,8 @@ type handlerOpts struct {
 	NoExec  bool
 }
 
-func (wc *WebController) serveLandingPage() httprouter.Handle {
-	return func(w http.ResponseWriter, r *http.Request, p httprouter.Params) {
-		var td = wc.newTemplateData(w, r)
-		var template = "home"
-
-		// If the user is logged in, run user home template
-		if td.Authenticated {
-			template = "user_home"
-		}
-
-		if err := wc.templates.Run(w, r, template, td); err != nil && !util.IsNetError(err) {
-			log.Error("Error executing template '%s': %s", template, err)
-		}
-	}
-}
-
 func (wc *WebController) serveTemplate(tpl string, opts handlerOpts) httprouter.Handle {
-	return func(w http.ResponseWriter, r *http.Request, p httprouter.Params) {
+	return func(w http.ResponseWriter, r *http.Request, _ httprouter.Params) {
 		if opts.NoEmbed {
 			w.Header().Set("X-Frame-Options", "DENY")
 		}
@@ -314,22 +281,6 @@ func (wc *WebController) serveFile(path string) httprouter.Handle {
 	}
 }
 
-func (wc *WebController) serveForbidden(w http.ResponseWriter, r *http.Request) {
-	log.Debug("Forbidden: %s", r.URL)
-	w.WriteHeader(http.StatusForbidden)
-	wc.templates.Run(w, r, "403", wc.newTemplateData(w, r))
-}
-
-func (wc *WebController) serveNotFound(w http.ResponseWriter, r *http.Request) {
-	log.Debug("Not Found: %s", r.URL)
-	w.WriteHeader(http.StatusNotFound)
-	wc.templates.Run(w, r, "404", wc.newTemplateData(w, r))
-}
-func (wc *WebController) serveUnavailableForLegalReasons(w http.ResponseWriter, r *http.Request) {
-	w.WriteHeader(http.StatusUnavailableForLegalReasons)
-	wc.templates.Run(w, r, "451", wc.newTemplateData(w, r))
-}
-
 func (wc *WebController) getAPIKey(r *http.Request) (key string, err error) {
 	if cookie, err := r.Cookie("pd_auth_key"); err == nil {
 		if len(cookie.Value) == 36 {