diff --git a/res/static/style/layout.css b/res/static/style/layout.css
index 086ad49..752cfa1 100644
--- a/res/static/style/layout.css
+++ b/res/static/style/layout.css
@@ -135,8 +135,7 @@ pre>code {
 }
 
 .page_content {
-	background: var(--shaded_background);
-	backdrop-filter: blur(4px);
+	background: var(--body_background);
 	text-align: center;
 }
 
@@ -198,12 +197,12 @@ section {
 	width: auto;
 	height: auto;
 	text-align: center;
-	padding: 4px;
+	padding: 0.5em;
 	border-radius: 8px;
 }
 
 .highlight_border {
-	border: 2px solid var(--separator);
+	border: 1px var(--separator) solid;
 }
 
 .highlight_shaded {
@@ -292,7 +291,7 @@ hr {
 	height: 1px;
 	border: none;
 	background-color: var(--separator);
-	margin: 12px;
+	margin: 0.5em 0;
 }
 
 a {
@@ -315,7 +314,7 @@ ul {
 fieldset {
 	padding: 4px;
 	border-radius: 8px;
-	border: 2px var(--separator) solid;
+	border: 1px var(--separator) solid;
 	margin: 0;
 }
 
@@ -325,7 +324,7 @@ fieldset>legend {
 	margin-right: auto;
 	border-radius: 8px;
 	font-size: 1.1em;
-	border-bottom: 2px var(--separator) solid;
+	border-bottom: 1px var(--separator) solid;
 }
 
 /* Forms*/
diff --git a/svelte/src/filesystem/Toolbar.svelte b/svelte/src/filesystem/Toolbar.svelte
index acf2233..28c85cf 100644
--- a/svelte/src/filesystem/Toolbar.svelte
+++ b/svelte/src/filesystem/Toolbar.svelte
@@ -21,7 +21,7 @@ let {
 
 let share_dialog: ShareDialog = $state()
 let link_copied = $state(false)
-let toolbar_expanded = $state(false)
+let toolbar_expanded = $state(true)
 
 export const copy_link = () => {
 	const share_url = fs_share_url($nav.path)
diff --git a/svelte/src/filesystem/edit_window/Branding.ts b/svelte/src/filesystem/edit_window/Branding.ts
index da95807..3f5ba4d 100644
--- a/svelte/src/filesystem/edit_window/Branding.ts
+++ b/svelte/src/filesystem/edit_window/Branding.ts
@@ -4,6 +4,9 @@ import hsl2rgb from "pure-color/convert/hsl2rgb";
 import rgb2hex from "pure-color/convert/rgb2hex";
 import type { FSNode, FSNodeProperties } from "lib/FilesystemAPI.svelte";
 
+const text_contrast = 75
+const body_alpha = 0.9
+
 type Style = {
 	input_background?: string,
 	input_hover_background?: string,
@@ -69,12 +72,12 @@ const add_styles = (style: Style, properties: FSNodeProperties) => {
 	if (properties.brand_input_color) {
 		style.input_background = properties.brand_input_color
 		style.input_hover_background = properties.brand_input_color
-		style.input_text = add_contrast(properties.brand_input_color, 75)
+		style.input_text = add_contrast(properties.brand_input_color, text_contrast)
 	}
 	if (properties.brand_highlight_color) {
 		style.highlight_color = properties.brand_highlight_color
 		style.highlight_background = properties.brand_highlight_color
-		style.highlight_text_color = add_contrast(properties.brand_highlight_color, 75)
+		style.highlight_text_color = add_contrast(properties.brand_highlight_color, text_contrast)
 
 		// If we have a body colour to compare it to we use the highlight colour
 		// to generate the link colour
@@ -84,20 +87,20 @@ const add_styles = (style: Style, properties: FSNodeProperties) => {
 	}
 	if (properties.brand_danger_color) {
 		style.danger_color = properties.brand_danger_color
-		style.danger_text_color = add_contrast(properties.brand_danger_color, 75)
+		style.danger_text_color = add_contrast(properties.brand_danger_color, text_contrast)
 	}
 	if (properties.brand_background_color) {
 		style.background_color = properties.brand_background_color
 		style.background = properties.brand_background_color
-		style.background_text_color = add_contrast(properties.brand_background_color, 75)
+		style.background_text_color = add_contrast(properties.brand_background_color, text_contrast)
 		style.background_pattern_color = properties.brand_background_color
 	}
 	if (properties.brand_body_color) {
 		style.body_color = properties.brand_body_color
-		style.body_background = properties.brand_body_color
-		style.body_text_color = add_contrast(properties.brand_body_color, 75)
-		style.shaded_background = set_alpha(properties.brand_body_color, 0.9)
-		style.separator = add_contrast(properties.brand_body_color, 8)
+		style.body_background = set_alpha(properties.brand_body_color, body_alpha)
+		style.body_text_color = add_contrast(properties.brand_body_color, text_contrast)
+		style.shaded_background = set_alpha(properties.brand_body_color, body_alpha)
+		style.separator = add_contrast(properties.brand_body_color, 15)
 		style.shadow_color = darken(properties.brand_body_color, 0.8)
 	}
 	if (properties.brand_card_color) {
diff --git a/svelte/src/filesystem/edit_window/ThemePresets.svelte b/svelte/src/filesystem/edit_window/ThemePresets.svelte
index 2a6513c..92aa63a 100644
--- a/svelte/src/filesystem/edit_window/ThemePresets.svelte
+++ b/svelte/src/filesystem/edit_window/ThemePresets.svelte
@@ -29,7 +29,7 @@ const themes = [
 		brand_danger_color: "#821b3f",
 		brand_background_color: "#141414",
 		brand_body_color: "#1e1e1e",
-		brand_card_color: "#282828"
+		brand_card_color: "#282828",
 	}, {
 		name: "Nord (dark)",
 		brand_input_color: "#4f596d",
@@ -37,7 +37,7 @@ const themes = [
 		brand_danger_color: "#bd5f69",
 		brand_background_color: "#2f3541",
 		brand_body_color: "#3b4252",
-		brand_card_color: "#434c5f"
+		brand_card_color: "#434c5f",
 	}, {
 		name: "Nord (light)",
 		brand_input_color: "#cad2e1",
@@ -45,7 +45,23 @@ const themes = [
 		brand_danger_color: "#bd5f69",
 		brand_background_color: "#d7dde8",
 		brand_body_color: "#ebeef3",
-		brand_card_color: "#e5e9f0"
+		brand_card_color: "#e5e9f0",
+	}, {
+		name: "Black",
+		brand_input_color: "#202020",
+		brand_highlight_color: "#57e389",
+		brand_danger_color: "#ed333b",
+		brand_background_color: "#000000",
+		brand_body_color: "#080808",
+		brand_card_color: "#101010",
+	}, {
+		name: "White",
+		brand_input_color: "#f4f4f4",
+		brand_highlight_color: "#2ec27e",
+		brand_danger_color: "#c01c28",
+		brand_background_color: "#f8f8f8",
+		brand_body_color: "#ffffff",
+		brand_card_color: "#f0f0f0",
 	}, {
 		name: "Solarized (dark)",
 		brand_input_color: "#084453",
@@ -53,7 +69,7 @@ const themes = [
 		brand_danger_color: "#db302d",
 		brand_background_color: "#002c38",
 		brand_body_color: "#063540",
-		brand_card_color: "#073c49"
+		brand_card_color: "#073c49",
 	}, {
 		name: "Solarized (light)",
 		brand_input_color: "#e7dfc5",
@@ -61,7 +77,7 @@ const themes = [
 		brand_danger_color: "#db302d",
 		brand_background_color: "#ede7d3",
 		brand_body_color: "#fdf5e2",
-		brand_card_color: "#fcf2d8"
+		brand_card_color: "#fcf2d8",
 	}, {
 		name: "Mocha",
 		brand_input_color: "#313244",
@@ -69,7 +85,7 @@ const themes = [
 		brand_danger_color: "#f38ba8",
 		brand_background_color: "#1e1e2e",
 		brand_body_color: "#181825",
-		brand_card_color: "#313244"
+		brand_card_color: "#313244",
 	}
 ]
 </script>
diff --git a/svelte/src/filesystem/viewers/Audio.svelte b/svelte/src/filesystem/viewers/Audio.svelte
index f9cd3b9..6973d49 100644
--- a/svelte/src/filesystem/viewers/Audio.svelte
+++ b/svelte/src/filesystem/viewers/Audio.svelte
@@ -64,7 +64,7 @@ onMount(() => {
 {@render children?.()}
 
 <div bind:this={background_div} class="background_div">
-	<TextBlock width="1000px">
+	<TextBlock width="auto">
 		<audio
 			bind:this={player}
 			class="player"
diff --git a/svelte/src/home_page/HomePage.svelte b/svelte/src/home_page/HomePage.svelte
index 51020a5..f11f053 100644
--- a/svelte/src/home_page/HomePage.svelte
+++ b/svelte/src/home_page/HomePage.svelte
@@ -11,9 +11,6 @@ let upload_widget
 </script>
 
 <header class="logo_header">
-	<div class="menu_button_container">
-		<Menu no_login_label="Not logged in" hide_name={false} hide_logo style="border-radius: 0 0 0 8px; margin: 0"/>
-	</div>
 	<div class="header_image_container"></div>
 </header>
 
@@ -139,15 +136,14 @@ header {
 }
 header > h1 {
 	color: #ffffff;
-	text-shadow: 0 0 6px #000000;
+	text-shadow: 1px 1px 5px #000000;
 	margin-top: 30px;
 	margin-bottom: 30px;
 }
 
 .header_image_container {
 	text-align: initial;
-	margin: auto;
-	margin-bottom: 50px;
+	margin: 50px auto;
 	height: 100px;
 	width: 500px;
 	max-width: 100%;
@@ -156,10 +152,6 @@ header > h1 {
 	background-size: contain;
 	background-position: center;
 }
-.menu_button_container {
-	display: flex;
-	justify-content: end;
-}
 .image {
 	max-width: 100%;
 	border-radius: 12px;
@@ -167,7 +159,6 @@ header > h1 {
 .bold {
 	font-weight: bold;
 	color: var(--highlight_color);
-	text-shadow: 1px 1px 3px var(--shadow_color);
 }
 
 .prices {
diff --git a/svelte/src/speedtest/Speedtest.svelte b/svelte/src/speedtest/Speedtest.svelte
index e764b4a..13b4300 100644
--- a/svelte/src/speedtest/Speedtest.svelte
+++ b/svelte/src/speedtest/Speedtest.svelte
@@ -186,7 +186,7 @@ onMount(() => {
 })
 </script>
 
-<section class="highlight_border">
+<section>
 	<div style="text-align: center">
 		<Button icon="speed" label="Start test" click={() => start(12000)} disabled={running} highlight={!running}/>
 		<Button icon="speed" label="Long test" click={() => start(30000)} disabled={running}/>
diff --git a/svelte/src/user_home/dashboard/Dashboard.svelte b/svelte/src/user_home/dashboard/Dashboard.svelte
index 0793f3b..347d76d 100644
--- a/svelte/src/user_home/dashboard/Dashboard.svelte
+++ b/svelte/src/user_home/dashboard/Dashboard.svelte
@@ -168,7 +168,6 @@ onMount(() => {
 
 <style>
 .separator {
-	border-top: 1px solid var(--separator);
 	margin: 0 8px;
 }
 .cards {
diff --git a/svelte/src/util/TabMenu.svelte b/svelte/src/util/TabMenu.svelte
index ec34b6b..3bb322c 100644
--- a/svelte/src/util/TabMenu.svelte
+++ b/svelte/src/util/TabMenu.svelte
@@ -117,11 +117,15 @@ onMount(() => {
 {/if}
 
 <style>
-.submenu {
+
+header, .submenu {
 	border-bottom: 1px solid var(--separator);
 }
 .tab_bar > .button {
 	flex-direction: column;
 	gap: 0;
 }
+.button_highlight {
+	background: var(--body_background);
+}
 </style>
diff --git a/svelte/src/wrap/MainMenu.svelte b/svelte/src/wrap/MainMenu.svelte
index 7520be0..f723ebc 100644
--- a/svelte/src/wrap/MainMenu.svelte
+++ b/svelte/src/wrap/MainMenu.svelte
@@ -261,7 +261,7 @@ const set_offset = (off: number) => {
 
 	color: var(--body_text_color);
 	background-image: var(--background_image);
-	background-color: var(--background_pattern_color);
+	background-color: var(--background_color);
 	background-size: var(--background_image_size, initial);
 	background-position: var(--background_image_position, initial);
 	background-repeat: var(--background_image_repeat, repeat);
@@ -272,7 +272,7 @@ const set_offset = (off: number) => {
 .nav_container {
 	flex: 0 0 auto;
 	border-right: 1px solid var(--separator);
-	background: var(--shaded_background);
+	background: var(--body_background);
 	z-index: 9;
 }
 .scroll_container {
@@ -322,8 +322,11 @@ const set_offset = (off: number) => {
 	flex-direction: row;
 	align-items: center;
 	justify-content: left;
-	background: var(--shaded_background);
+	background: var(--body_background);
 	border-bottom: 1px solid var(--separator);
+	position: sticky;
+	top: 0;
+	z-index: 8; /* below navigation, on top of most other things */
 }
 .menu_button {
 	flex: 0 0 auto;