diff --git a/svelte/src/user_home/dashboard/CardFSHome.svelte b/svelte/src/user_home/dashboard/CardFSHome.svelte
index 24371a8..122da4d 100644
--- a/svelte/src/user_home/dashboard/CardFSHome.svelte
+++ b/svelte/src/user_home/dashboard/CardFSHome.svelte
@@ -1,21 +1,13 @@
 <script>
 import { onMount } from "svelte";
 import Navigator from "../../filesystem/Navigator.svelte";
-import ListView from "../../filesystem/filemanager/ListView.svelte";
-import { fs_encode_path } from "../../filesystem/FilesystemUtil";
+import { fs_encode_path, fs_node_icon } from "../../filesystem/FilesystemUtil";
 
 let nav;
 let state = {
 	children: [],
 };
 
-const node_click = e => {
-	window.location.href = "/d" + fs_encode_path(state.children[e.detail].path)
-}
-const node_share_click = e => {
-	window.location.href = "/d/" + state.children[e.detail].id
-}
-
 onMount(() => {
 	nav.navigate("/me", false)
 })
@@ -23,10 +15,82 @@ onMount(() => {
 
 <Navigator bind:this={nav} bind:state={state} history_enabled={false}/>
 
-<ListView
-	state={state}
-	on:node_click={node_click}
-	on:node_share_click={node_share_click}
-	hide_edit
-	hide_branding
-/>
+<div class="directory">
+	{#each state.children as child, index (child.path)}
+		<a
+			href={"/d"+fs_encode_path(child.path)}
+			class="node"
+			class:node_selected={child.fm_selected}
+			class:hidden={child.name.startsWith(".")}
+		>
+			<img src={fs_node_icon(child, 64, 64)} class="node_icon" alt="icon"/>
+
+			<div class="node_name">
+				{child.name}
+			</div>
+
+			{#if child.id}
+				<a href="/d/{child.id}" class="button action_button">
+					<i class="icon" title="This file / directory is shared. Click to open public link">share</i>
+				</a>
+			{/if}
+		</a>
+	{/each}
+</div>
+
+<style>
+
+.directory {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	margin-top: 8px;
+	gap: 8px;
+}
+.node {
+	display: flex;
+	flex: 1 1 auto;
+	flex-direction: row;
+	align-content: center;
+	align-items: center;
+	justify-content: center;
+	text-decoration: none;
+	color: var(--body_text-color);
+	gap: 2px;
+	padding: 2px;
+	border-radius: 8px;
+	width: 300px;
+	max-width: 100%;
+	border: 1px solid var(--input_background);
+}
+.node:hover {
+	background: var(--input_hover_background);
+	color: var(--input_text);
+	text-decoration: none;
+}
+.node > * {
+	flex: 0 0 auto;
+}
+.node_icon {
+	height: 32px;
+	width: 32px;
+	vertical-align: middle;
+	border-radius: 4px;
+}
+.node_name {
+	flex: 1 1 auto;
+	display: flex;
+	align-items: center;
+	word-break: break-all;
+	line-height: 1.2em;
+}
+.action_button {
+	margin: 0;
+	background: none;
+	color: var(--body_text_color);
+	box-shadow: none;
+}
+.hidden {
+	display: none;
+}
+</style>
diff --git a/svelte/src/user_home/dashboard/CardStatistics.svelte b/svelte/src/user_home/dashboard/CardStatistics.svelte
index c9a30ff..8402a97 100644
--- a/svelte/src/user_home/dashboard/CardStatistics.svelte
+++ b/svelte/src/user_home/dashboard/CardStatistics.svelte
@@ -4,8 +4,8 @@ import Chart from "../../util/Chart.svelte";
 import { color_by_name } from "../../util/Util.svelte";
 import { formatDataVolume, formatThousands } from "../../util/Formatting.svelte";
 
-export let expanded = false
-$: chart_height = expanded ? "250px" : "150px"
+export let card_size = 1
+$: chart_height = (100 + (card_size * 50)) + "px"
 let graph_views_downloads = null
 let graph_bandwidth = null
 
diff --git a/svelte/src/user_home/dashboard/Dashboard.svelte b/svelte/src/user_home/dashboard/Dashboard.svelte
index c7bf41c..c85166f 100644
--- a/svelte/src/user_home/dashboard/Dashboard.svelte
+++ b/svelte/src/user_home/dashboard/Dashboard.svelte
@@ -14,36 +14,54 @@ let cards = []
 
 const save = () => {
 	let storage = {
-		expanded: [],
-		hidden: [],
+		size: {},
 	}
 
 	for (const card of cards) {
-		if (card.expanded === true) {
-			storage.expanded.push(card.id)
-		}
-	}
-	for (const card of cards) {
-		if (card.hidden === true) {
-			storage.hidden.push(card.id)
+		if (card.size !== undefined && card.size !== 1) {
+			storage.size[card.id] = card.size
 		}
 	}
 
 	window.localStorage.setItem("dashboard_layout", JSON.stringify(storage))
 }
 
+const min_card_size = 0
+const def_card_size = 1
+const max_card_size = 3
+
+const expand = i => {
+	if (cards[i].size === undefined) {
+		cards[i].size = def_card_size
+	}
+	if (cards[i].size < max_card_size) {
+		cards[i].size++
+	}
+	save()
+}
+const shrink = i => {
+	if (cards[i].size === undefined) {
+		cards[i].size = def_card_size
+	}
+	if (cards[i].size > min_card_size) {
+		cards[i].size--
+	}
+	save()
+}
+
 onMount(() => {
 	cards = [
 		{
 			id: "upload",
 			elem: CardUpload,
 			title: "Quick upload",
+			link: "/",
 		}, {
 			id: "filesystem_home",
 			elem: CardFsHome,
 			title: "Filesystem home",
 			link: "/d/me",
-			hidden_default: window.user.subscription.filesystem_access === false,
+			hidden: window.user.subscription.filesystem_access === false,
 		}, {
 			id: "account",
 			elem: CardAccount,
@@ -59,7 +77,7 @@ onMount(() => {
 			elem: CardPrepaidTransactions,
 			title: "Prepaid transactions",
 			link: "/user/prepaid/transactions",
-			hidden_default: window.user.subscription.type !== "prepaid"
+			hidden: window.user.subscription.type !== "prepaid"
 		}, {
 			id: "usage",
 			elem: CardUsage,
@@ -78,19 +96,19 @@ onMount(() => {
 
 	// Apply the view settings from localstorage
 	try {
-		const storage = JSON.parse(window.localStorage.getItem("dashboard_layout"))
-		if (storage === null) {
+		const layout = JSON.parse(window.localStorage.getItem("dashboard_layout"))
+		if (layout === null) {
 			return
 		}
 
 		for (const card of cards) {
-			if (storage.expanded && storage.expanded.includes(card.id)) {
-				card.expanded = true
-			}
-			if (storage.hidden && storage.hidden.includes(card.id)) {
-				card.hidden = true
+			if (layout.size !== undefined && layout.size[card.id] !== undefined) {
+				card.size = layout.size[card.id]
+			} else {
+				card.size = 1
 			}
 		}
+		console.log(cards)
 	} catch (err) {
 		console.warn("Failed to load dashboard settings", err)
 		return
@@ -99,43 +117,47 @@ onMount(() => {
 </script>
 
 <div class="cards">
-	{#each cards as card (card.id)}{#if !card.hidden && !card.hidden_default}
-		<div class="card" class:card_wide={card.expanded}>
-			<div class="title_box">
-				<h2>{card.title}</h2>
-
-				{#if card.link}
-					<Button link_href={card.link} icon="link" flat/>
-				{/if}
-
-				<Button
-					click={() => {card.expanded = !card.expanded; save()}}
-					icon={card.expanded ? "fullscreen_exit" : "fullscreen"}
-					flat/>
-				<Button
-					click={() => {card.hidden = !card.hidden; save()}}
-					icon="visibility_off"
-					flat/>
-			</div>
-			<div class="card_component">
-				<svelte:component this={card.elem} expanded={card.expanded}/>
-			</div>
-		</div>
-	{/if}{/each}
-</div>
-
-<div class="cards">
-	{#each cards as card (card.id)}
-		{#if card.hidden}
-			<div class="card">
+	{#each cards as card, i (card.id)}
+		{#if !card.hidden && card.size > 0}
+			<div
+				class="card"
+				class:size_1={card.size === 1}
+				class:size_2={card.size === 2}
+				class:size_3={card.size === 3}
+			>
 				<div class="title_box">
-					<h2>{card.title}</h2>
-
 					{#if card.link}
 						<Button link_href={card.link} icon="link" flat/>
 					{/if}
 
-					<Button click={() => {card.hidden = !card.hidden; save()}} icon="visibility" flat/>
+					<h2>{card.title}</h2>
+
+					<Button click={() => shrink(i)} icon="zoom_out" flat/>
+					<span>
+						{card.size === undefined ? 1 : card.size}
+					</span>
+					<Button click={() => expand(i)} icon="zoom_in" flat/>
+				</div>
+				<div class="card_component">
+					<svelte:component this={card.elem} card_size={card.size}/>
+				</div>
+			</div>
+		{/if}
+	{/each}
+</div>
+
+<div class="cards">
+	{#each cards as card, i (card.id)}
+		{#if card.size === 0}
+			<div class="card">
+				<div class="title_box">
+					{#if card.link}
+						<Button link_href={card.link} icon="link" flat/>
+					{/if}
+
+					<h2>{card.title}</h2>
+
+					<Button click={() => expand(i)} icon="visibility" flat/>
 				</div>
 			</div>
 		{/if}
@@ -155,29 +177,28 @@ onMount(() => {
 	flex: 1 0 auto;
 	display: flex;
 	flex-direction: column;
-	width: 26em;
 	max-width: 100%;
 	background: var(--body_background);
 	border-radius: 8px;
 	padding: 8px;
 	text-align: initial;
-	max-height: 500px;
 }
 .card_component {
 	flex: 1 1 auto;
 	overflow: auto;
 }
-.card_wide {
-	flex-basis: auto;
-	width: 100%;
-	max-height: none;
-}
+.size_1 { width: 400px; }
+.size_1 > .card_component { max-height: 400px; }
+.size_2 { width: 800px; }
+.size_2 > .card_component { max-height: 500px; }
+.size_3 { width: 1200px; }
+.size_3 > .card_component { max-height: 600px; }
 
 .title_box {
 	flex: 0 0 auto;
 	display: flex;
 	flex-direction: row;
-	align-items: flex-start;
+	align-items: center;
 	border-bottom: 1px solid var(--separator);
 }
 .title_box > h2 {