diff --git a/res/static/style/layout.css b/res/static/style/layout.css
index b6d24ba..b23ed96 100644
--- a/res/static/style/layout.css
+++ b/res/static/style/layout.css
@@ -459,8 +459,8 @@ input[type="color"] {
 	border-radius: 6px;
 	margin: 2px;
 	background: var(--input_background);
-	gap: 3px;
-	padding: 3px;
+	gap: 2px;
+	padding: 2px;
 	overflow: hidden;
 	color: var(--input_text);
 	cursor: pointer;
@@ -510,8 +510,8 @@ input[type="submit"]:active,
 input[type="button"]:active,
 input[type="color"]:active {
 	box-shadow: inset 4px 4px 6px var(--shadow_color);
-	/* Exactly 3px offset compared to the inactive padding to give a depth effect */
-	padding: 6px 0px 0px 6px;
+	/* Exactly 2px offset compared to the inactive padding to give a depth effect */
+	padding: 4px 0px 0px 4px;
 }
 
 .button_highlight {
diff --git a/svelte/src/filesystem/viewers/Audio.svelte b/svelte/src/filesystem/viewers/Audio.svelte
index 6b7739c..f9cd3b9 100644
--- a/svelte/src/filesystem/viewers/Audio.svelte
+++ b/svelte/src/filesystem/viewers/Audio.svelte
@@ -40,7 +40,8 @@ export const update = async () => {
 	siblings = await nav.get_siblings()
 
 	for(const sib of siblings) {
-		if (sib.name === "cover.jpg") {
+		const lower = sib.name.toLowerCase()
+		if (lower === "cover.jpg" || lower === "cover.png" || lower === "cover.webp") {
 			console.debug("Found album cover image", sib)
 			background_div.style.backgroundImage = `url("/api/filesystem/${sib.path}")`
 			break
diff --git a/svelte/src/layout/ToggleButton.svelte b/svelte/src/layout/ToggleButton.svelte
index 486cd56..7fcf567 100644
--- a/svelte/src/layout/ToggleButton.svelte
+++ b/svelte/src/layout/ToggleButton.svelte
@@ -6,6 +6,7 @@ let {
 	group_first = false,
 	group_middle = false,
 	group_last = false,
+	highlight = true,
 	action,
 	children,
 }: {
@@ -15,6 +16,7 @@ let {
 	group_first?: boolean;
 	group_middle?: boolean;
 	group_last?: boolean;
+	highlight?: boolean;
 	action?: (e: MouseEvent) => void;
 	children?: import('svelte').Snippet;
 } = $props();
@@ -31,7 +33,7 @@ const click = (e: MouseEvent) => {
 	onclick={click}
 	type="button"
 	class="button"
-	class:button_highlight={on}
+	class:button_highlight={on && highlight}
 	class:group_first
 	class:group_middle
 	class:group_last
diff --git a/svelte/src/wrap/Bookmarks.svelte b/svelte/src/wrap/Bookmarks.svelte
index da251ac..72b8286 100644
--- a/svelte/src/wrap/Bookmarks.svelte
+++ b/svelte/src/wrap/Bookmarks.svelte
@@ -2,6 +2,7 @@
 import { bookmark_del, bookmarks_store } from "lib/Bookmarks";
 import { fs_encode_path } from "lib/FilesystemAPI.svelte";
 import { highlight_current_page } from "lib/HighlightCurrentPage";
+import MenuEntry from "./MenuEntry.svelte";
 
 let { menu_collapsed }: { menu_collapsed: boolean } = $props();
 
@@ -13,44 +14,37 @@ const toggle_edit = () => {
 </script>
 
 {#if $bookmarks_store.length !== 0}
-	<div class="title">
-		<div class:hide={menu_collapsed}>Bookmarks</div>
-		<button onclick={() => toggle_edit()} class:button_highlight={editing}>
-			<i class="icon small">edit</i>
-		</button>
-	</div>
+	<MenuEntry id="bookmarks" collapsed={menu_collapsed}>
+		{#snippet title()}
+			<div class="title">Bookmarks</div>
+			<button onclick={() => toggle_edit()} class:button_highlight={editing}>
+				<i class="icon">edit</i>
+			</button>
+		{/snippet}
 
-	{#each $bookmarks_store as bookmark}
-		<div class="row">
-			<a class="button" href="/d{fs_encode_path(bookmark.path)}" use:highlight_current_page>
-				<i class="icon small">{bookmark.icon}</i>
-				<span class:hide={menu_collapsed}>{bookmark.label}</span>
-			</a>
-			{#if editing}
-				<button onclick={() => bookmark_del(bookmark.id)}>
-					<i class="icon small">delete</i>
-				</button>
-			{/if}
-		</div>
-	{/each}
-
-	<div class="title"></div>
+		{#snippet body()}
+			{#each $bookmarks_store as bookmark}
+				<div class="row">
+					<a class="button" href="/d{fs_encode_path(bookmark.path)}" use:highlight_current_page>
+						<i class="icon">{bookmark.icon}</i>
+						<span class:hide={menu_collapsed}>{bookmark.label}</span>
+					</a>
+					{#if editing}
+						<button onclick={() => bookmark_del(bookmark.id)}>
+							<i class="icon">delete</i>
+						</button>
+					{/if}
+				</div>
+			{/each}
+		{/snippet}
+	</MenuEntry>
 {/if}
 
 <style>
 .title {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	border-bottom: 1px solid var(--separator);
-}
-.title > div {
 	flex: 1 1 auto;
 	text-align: center;
 }
-.title > button {
-	flex: 0 0 auto;
-}
 .row {
 	display: flex;
 	flex-direction: row;
diff --git a/svelte/src/wrap/MainMenu.svelte b/svelte/src/wrap/MainMenu.svelte
index f02a72e..560737f 100644
--- a/svelte/src/wrap/MainMenu.svelte
+++ b/svelte/src/wrap/MainMenu.svelte
@@ -12,8 +12,9 @@ import { loading_run, loading_store } from "lib/Loading";
 import Spinner from "util/Spinner.svelte";
 import { get_user } from "lib/PixeldrainAPI";
 import Tree from "./Tree.svelte";
+import MenuEntry from "./MenuEntry.svelte";
 
-let menu_collapsed = false
+let menu_collapsed: boolean = $state(false)
 
 const toggle_menu = (e: MouseEvent) => {
 	menu_collapsed = !menu_collapsed
@@ -37,62 +38,62 @@ onMount(async () => {
 	<div class="scroll_container">
 		<nav class="nav" class:collapse={menu_collapsed}>
 			<button class="button" onclick={toggle_menu}>
-				<i class="icon small">menu</i>
+				<i class="icon">menu</i>
 				<span class:hide={menu_collapsed}>Collapse menu</span>
 			</button>
 
 			<a class="button" href="/" use:highlight_current_page>
-				<i class="icon small">home</i>
+				<i class="icon">home</i>
 				<span class:hide={menu_collapsed}>Home</span>
 			</a>
 
 			{#if $user.username !== undefined && $user.username !== ""}
 				<div class="separator" class:hide={menu_collapsed}></div>
 
-				<div class="username" class:hide={menu_collapsed}>
-					{$user.username}
-				</div>
+				<MenuEntry id="subscription_info" collapsed={menu_collapsed}>
+					{#snippet title()}
+						<div class="username">{$user.username}</div>
+					{/snippet}
 
-				<div class="separator"></div>
+					{#snippet body()}
+						<div class="stats_table" class:hide={menu_collapsed}>
+							<div>Subscription</div>
+							<div>{$user.subscription.name}</div>
 
-				<div class="stats_table" class:hide={menu_collapsed}>
-					<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}
 
-					{#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" class:hide={menu_collapsed}></div>
+							<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>
+					{/snippet}
+				</MenuEntry>
 
 				<a class="button" href="/d/me" use:highlight_current_page>
-					<i class="icon small">folder</i>
+					<i class="icon">folder</i>
 					<span class:hide={menu_collapsed}>Filesystem</span>
 				</a>
 				<a class="button" href="/user" use:highlight_current_page>
-					<i class="icon small">dashboard</i>
+					<i class="icon">dashboard</i>
 					<span class:hide={menu_collapsed}>Dashboard</span>
 				</a>
 				{#if $user.is_admin}
 					<a class="button" href="/admin" use:highlight_current_page>
-						<i class="icon small">admin_panel_settings</i>
+						<i class="icon">admin_panel_settings</i>
 						<span class:hide={menu_collapsed}>Admin Panel</span>
 					</a>
 				{/if}
 			{:else}
 				<a class="button" href="/login" use:highlight_current_page>
-					<i class="icon small">login</i>
+					<i class="icon">login</i>
 					<span class:hide={menu_collapsed}>Login</span>
 				</a>
 				<a class="button" href="/register" use:highlight_current_page>
-					<i class="icon small">how_to_reg</i>
+					<i class="icon">how_to_reg</i>
 					<span class:hide={menu_collapsed}>Register</span>
 				</a>
 			{/if}
@@ -100,21 +101,18 @@ onMount(async () => {
 			<div class="separator"></div>
 
 			<a class="button" href="/speedtest" use:highlight_current_page>
-				<i class="icon small">speed</i>
+				<i class="icon">speed</i>
 				<span class:hide={menu_collapsed}>Speedtest</span>
 			</a>
 			<a class="button" href="/appearance" use:highlight_current_page>
-				<i class="icon small">palette</i>
+				<i class="icon">palette</i>
 				<span class:hide={menu_collapsed}>Themes</span>
 			</a>
 
 			<div class="separator"></div>
 
 			<Bookmarks menu_collapsed={menu_collapsed}/>
-
-			{#if !menu_collapsed}
-				<Tree/>
-			{/if}
+			<Tree menu_collapsed={menu_collapsed}/>
 		</nav>
 	</div>
 </div>
@@ -176,16 +174,17 @@ onMount(async () => {
 	overflow-x: hidden;
 	max-width: 100%;
 }
+.username {
+	flex: 1 1 auto;
+	text-align: center;
+	margin: 3px;
+}
 
 .separator {
 	height: 1px;
-	margin: 2px 0;
 	width: 100%;
 	background-color: var(--separator);
 }
-.username {
-	text-align: center;
-}
 .stats_table {
 	display: grid;
 	grid-template-columns: auto auto;
diff --git a/svelte/src/wrap/MenuEntry.svelte b/svelte/src/wrap/MenuEntry.svelte
new file mode 100644
index 0000000..0a7bf89
--- /dev/null
+++ b/svelte/src/wrap/MenuEntry.svelte
@@ -0,0 +1,73 @@
+<script lang="ts">
+import ToggleButton from "layout/ToggleButton.svelte";
+import { onMount } from "svelte";
+
+type Expandable = {[key: string]: boolean}
+
+let {
+	id,
+	collapsed = false,
+	title,
+	body,
+}: {
+	id: string
+	collapsed: boolean
+	title: import('svelte').Snippet
+	body: import('svelte').Snippet
+} = $props();
+
+let expanded: boolean = $state(true)
+
+const get_status = (): Expandable => {
+	let exp = localStorage.getItem("menu_expanded")
+	if (exp === null) {
+		exp = "{}"
+	}
+
+	return JSON.parse(exp) as Expandable
+}
+
+onMount(() => {
+	let exp = get_status()
+	if (exp[id] !== undefined) {
+		expanded = exp[id]
+	}
+})
+
+const toggle = (e: MouseEvent) => {
+	let exp = get_status()
+
+	exp[id] = expanded
+
+	localStorage.setItem("menu_expanded", JSON.stringify(exp))
+}
+</script>
+
+<div class="title">
+	<ToggleButton bind:on={expanded} action={toggle} icon_on="arrow_drop_down" icon_off="arrow_drop_up" highlight={false}/>
+
+	{#if !collapsed}
+		{@render title()}
+	{/if}
+</div>
+
+{#if expanded}
+	{@render body()}
+
+	<div class="separator"></div>
+{/if}
+
+
+<style>
+.title {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	border-bottom: 1px solid var(--separator);
+}
+.separator {
+	height: 1px;
+	width: 100%;
+	background-color: var(--separator);
+}
+</style>
diff --git a/svelte/src/wrap/Tree.svelte b/svelte/src/wrap/Tree.svelte
index 4eac0f2..cc45146 100644
--- a/svelte/src/wrap/Tree.svelte
+++ b/svelte/src/wrap/Tree.svelte
@@ -1,9 +1,11 @@
 <script lang="ts">
 import { global_navigator } from "filesystem/FSNavigator";
-import { fs_encode_path, FSNode } from "lib/FilesystemAPI.svelte";
+import { fs_encode_path, fs_node_icon, FSNode } from "lib/FilesystemAPI.svelte";
 import { highlight_current_page } from "lib/HighlightCurrentPage";
 import { onMount } from "svelte";
+import MenuEntry from "./MenuEntry.svelte";
 
+let { menu_collapsed }: { menu_collapsed: boolean } = $props();
 let siblings: FSNode[] = $state([])
 
 onMount(() => {
@@ -14,70 +16,58 @@ onMount(() => {
 </script>
 
 {#if $global_navigator.path.length > 1}
-	<div class="title">
-		<div>Parent directories</div>
-		<button title="Navigate up" onclick={() => global_navigator.navigate_up()}>
-			<i class="icon small">north</i>
-		</button>
-	</div>
+	<MenuEntry id="tree_parents" collapsed={menu_collapsed}>
+		{#snippet title()}
+			<div class="title">Parent directories</div>
+			<button title="Navigate up" onclick={() => global_navigator.navigate_up()}>
+				<i class="icon">north</i>
+			</button>
+		{/snippet}
 
-	{#each $global_navigator.path.slice(0, $global_navigator.path.length-1) as node (node.id)}
-		{#if node.type === "dir"}
-			<div class="row">
-				<a class="button" href="/d{fs_encode_path(node.path)}">
-					{#if node.is_shared()}
-						<i class="icon small">folder_shared</i>
-					{:else}
-						<i class="icon small">folder</i>
-					{/if}
-					<span>{node.name}</span>
-				</a>
-			</div>
-		{/if}
-	{/each}
-
-	<div class="title"></div>
+		{#snippet body()}
+			{#each $global_navigator.path.slice(0, $global_navigator.path.length-1) as node (node.id)}
+				{#if node.type === "dir"}
+					<div class="row">
+						<a class="button" href="/d{fs_encode_path(node.path)}" title="{node.name}">
+							<img class="thumbnail" src="{fs_node_icon(node, 32, 32)}" alt="{node.name}"/>
+							<span class:hide={menu_collapsed}>{node.name}</span>
+						</a>
+					</div>
+				{/if}
+			{/each}
+		{/snippet}
+	</MenuEntry>
 {/if}
 
 {#if siblings.length !== 0}
-	<div class="title">
+	<MenuEntry id="tree_siblings" collapsed={menu_collapsed}>
+		{#snippet title()}
+			<div class="title">Siblings</div>
 		<button title="Open previous sibling" onclick={() => global_navigator.open_sibling(-1)}>
-			<i class="icon small">west</i>
+			<i class="icon">west</i>
 		</button>
-		<div>Siblings</div>
 		<button title="Open next sibling" onclick={() => global_navigator.open_sibling(1)}>
-			<i class="icon small">east</i>
+			<i class="icon">east</i>
 		</button>
-	</div>
+		{/snippet}
 
-	{#each siblings as node (node.id)}
-		{#if !node.is_hidden()}
-			<div class="row">
-				<a class="button" href="/d{fs_encode_path(node.path)}" use:highlight_current_page>
-					{#if node.is_shared()}
-						<i class="icon small">folder_shared</i>
-					{:else if node.type === "dir"}
-						<i class="icon small">folder</i>
-					{:else}
-						<i class="icon small">image</i>
-					{/if}
-					<span>{node.name}</span>
-				</a>
-			</div>
-		{/if}
-	{/each}
-
-	<div class="title"></div>
+		{#snippet body()}
+			{#each siblings as node (node.id)}
+				{#if !node.is_hidden()}
+					<div class="row">
+						<a class="button" href="/d{fs_encode_path(node.path)}" title="{node.name}" use:highlight_current_page>
+							<img class="thumbnail" src="{fs_node_icon(node, 32, 32)}" alt="{node.name}"/>
+							<span class:hide={menu_collapsed}>{node.name}</span>
+						</a>
+					</div>
+				{/if}
+			{/each}
+		{/snippet}
+	</MenuEntry>
 {/if}
 
 <style>
 .title {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	border-bottom: 1px solid var(--separator);
-}
-.title > div {
 	flex: 1 1 auto;
 	text-align: center;
 	margin: 3px;
@@ -98,4 +88,12 @@ onMount(() => {
 	background: none;
 	box-shadow: none;
 }
+.thumbnail {
+	height: 1.5em;
+	width: 1.5em;
+	border-radius: 2px;
+}
+.hide {
+	display: none;
+}
 </style>