diff --git a/svelte/src/filesystem/filemanager/TrashBin.svelte b/svelte/src/filesystem/filemanager/TrashBin.svelte
index fd69acd..ec9be2e 100644
--- a/svelte/src/filesystem/filemanager/TrashBin.svelte
+++ b/svelte/src/filesystem/filemanager/TrashBin.svelte
@@ -1,28 +1,31 @@
 <script lang="ts">
 import { formatDataVolume, formatDate } from "util/Formatting";
 import { fs_check_response, fs_encode_path, fs_get_trash, fs_node_icon, fs_path_url, type TrashEntry } from "lib/FilesystemAPI.svelte";
-import { loading_finish, loading_start } from "lib/Loading";
+import { loading_finish, loading_run, loading_start, loading_store } from "lib/Loading";
 import { onMount } from "svelte";
+import { breadcrumbs_store } from "wrap/BreadcrumbStore";
+import { FSNavigator } from "filesystem/FSNavigator";
 
-let { root_path = "/me" }: { root_path?: string } = $props();
+let {
+	nav,
+	root_path = "/me",
+}: {
+	nav: FSNavigator
+	root_path?: string
+} = $props();
 
 let entries: TrashEntry[] = $state([]);
 let error: string = $state("");
-let loaded = $state(false);
 
 const load = async () => {
-	loaded = false;
-	entries = [];
-	try {
-		loading_start();
-		entries = await fs_get_trash(root_path)
-		error = "";
-	} catch (err: any) {
-		error = err?.message ?? JSON.stringify(err);
-	} finally {
-		loaded = true;
-		loading_finish();
-	}
+	loading_run(async () => {
+		try {
+			entries = await fs_get_trash(root_path)
+			error = "";
+		} catch (err: any) {
+			error = err?.message ?? JSON.stringify(err);
+		}
+	})
 };
 
 const delete_entry = async (entry: TrashEntry) => {
@@ -76,122 +79,112 @@ const empty_trash = async () => {
 	}
 };
 
-onMount(load);
+onMount(() => {
+	breadcrumbs_store.set(breadcrumbs)
+
+	load()
+});
 </script>
 
-<div class="trash_container">
-	<div class="header">
-		<h2 class="title"><i class="icon">delete</i> Trash</h2>
-		<div class="actions">
-			<button onclick={load}>
-				<i class="icon">refresh</i>
-				<span>Refresh</span>
-			</button>
-			{#if entries.length > 0}
-				<button class="danger" onclick={empty_trash}>
-					<i class="icon">delete_forever</i>
-					<span>Empty trash</span>
-				</button>
+
+{#snippet breadcrumbs()}
+		<i class="icon">delete</i>
+		<div>
+			Trash bin
+			{#if $loading_store === 0 && entries.length === 0}
+				(empty)
+			{:else if entries.length !== 0}
+				({formatDataVolume(entries.reduce(
+					(acc, entry) => acc + entry.node.file_size, 0
+				), 3)})
 			{/if}
 		</div>
-	</div>
+		<div class="separator"></div>
+		<button onclick={() => window.history.back()} title="Back">
+			<i class="icon">arrow_back</i>
+		</button>
+		<button onclick={() => nav.navigate_up()} disabled={$nav.path.length <= 1} title="Up">
+			<i class="icon">north</i>
+		</button>
+		<button onclick={() => nav.reload()} title="Refresh directory listing">
+			<i class="icon">refresh</i>
+		</button>
+		{#if entries.length !== 0}
+			<button class="button button_red" onclick={empty_trash}>
+				<i class="icon">delete_forever</i>
+				<span>Delete all</span>
+			</button>
+		{/if}
+{/snippet}
 
-	{#if error}
-		<p class="error">{error}</p>
-	{:else if loaded && entries.length === 0}
-		<p class="empty">The trash is empty.</p>
-	{:else if entries.length > 0}
-		<table class="trash_table">
-			<thead>
-				<tr>
-					<td></td>
-					<td>Name</td>
-					<td class="hide_small">Original location</td>
-					<td class="hide_small">Deleted</td>
-					<td class="hide_small">Size</td>
-					<td></td>
+{#if error}
+	<p class="error">{error}</p>
+{:else if entries.length > 0}
+	<table class="trash_table">
+		<thead>
+			<tr>
+				<td></td>
+				<td>Name</td>
+				<td class="hide_small">Original location</td>
+				<td class="hide_small">Deleted at</td>
+				<td class="hide_small">Size</td>
+				<td></td>
+			</tr>
+		</thead>
+		<tbody>
+			{#each entries as entry (entry.node.id)}
+				<tr class="entry">
+					<td class="icon_cell">
+						<img
+							src={fs_node_icon(entry.node, 32, 32)}
+							class="node_icon"
+							alt="icon"
+						/>
+					</td>
+					<td class="name_cell">
+						<a class="entry_link" href={"/d" + fs_encode_path(entry.node.path)}>
+							{entry.node.name}
+						</a>
+					</td>
+					<td class="hide_small">
+						{entry.original_path ? entry.original_path.slice(0, -entry.node.name.length) : "—"}
+					</td>
+					<td class="hide_small">
+						{entry.deletion_date ? formatDate(entry.deletion_date) : "—"}
+					</td>
+					<td class="hide_small">
+						{#if entry.node.type === "file"}
+							{formatDataVolume(entry.node.file_size, 3)}
+						{/if}
+					</td>
+					<td>
+						<div class="row_actions">
+							<button title="Restore to original location" onclick={() => restore_entry(entry)}>
+								<i class="icon">restore_from_trash</i>
+							</button>
+							<button class="button button_red" title="Delete permanently" onclick={() => delete_entry(entry)}>
+								<i class="icon">delete_forever</i>
+							</button>
+						</div>
+					</td>
 				</tr>
-			</thead>
-			<tbody>
-				{#each entries as entry (entry.node.id)}
-					<tr class="entry">
-						<td class="icon_cell">
-							<img
-								src={fs_node_icon(entry.node, 32, 32)}
-								class="node_icon"
-								alt="icon"
-							/>
-						</td>
-						<td class="name_cell">
-							<a class="entry_link" href={"/d" + fs_encode_path(entry.node.path)}>
-								{entry.node.name}
-							</a>
-						</td>
-						<td class="hide_small original_path">
-							{entry.original_path || "—"}
-						</td>
-						<td class="hide_small date_cell">
-							{entry.deletion_date ? formatDate(entry.deletion_date) : "—"}
-						</td>
-						<td class="hide_small size_cell">
-							{#if entry.node.type === "file"}
-								{formatDataVolume(entry.node.file_size, 3)}
-							{/if}
-						</td>
-						<td class="button_cell">
-							<div class="row_actions">
-								<button title="Restore to original location" onclick={() => restore_entry(entry)}>
-									<i class="icon">restore_from_trash</i>
-								</button>
-								<button class="danger" title="Delete permanently" onclick={() => delete_entry(entry)}>
-									<i class="icon">delete_forever</i>
-								</button>
-							</div>
-						</td>
-					</tr>
-				{/each}
-			</tbody>
-		</table>
-	{/if}
-</div>
+			{/each}
+		</tbody>
+	</table>
+{/if}
 
 <style>
-.trash_container {
-	max-width: 1200px;
-	margin: auto;
-	padding: 1em;
-}
-.header {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	flex-wrap: wrap;
-	gap: 0.5em;
-	margin-bottom: 1em;
-}
-.title {
-	display: flex;
-	align-items: center;
-	gap: 0.3em;
-	margin: 0;
-	font-size: 1.2em;
-	border: none;
-}
-.actions {
-	display: flex;
-	gap: 0.5em;
+.separator {
+	flex: 1 1 auto;
 }
 .error {
 	color: var(--danger_color, #c0392b);
 }
-.empty {
-	color: var(--body_text_color);
-	opacity: 0.6;
-}
 .trash_table {
 	width: 100%;
 	border-collapse: collapse;
 	background: var(--body_background);
+	border-radius: 8px;
 }
 .trash_table td {
 	padding: 0;
@@ -205,7 +198,6 @@ onMount(load);
 }
 .icon_cell {
 	width: 2.5em;
-	padding: 0.3em 0.3em 0.3em 0.5em;
 }
 .node_icon {
 	display: block;
@@ -214,7 +206,6 @@ onMount(load);
 	object-fit: contain;
 }
 .name_cell {
-	padding: 0.3em 0.5em;
 	word-break: break-all;
 }
 .entry_link {
@@ -224,34 +215,10 @@ onMount(load);
 .entry_link:hover {
 	text-decoration: underline;
 }
-.original_path {
-	padding: 0.3em 0.5em;
-	color: var(--body_text_color);
-	opacity: 0.7;
-	font-size: 0.85em;
-	word-break: break-all;
-}
-.date_cell {
-	padding: 0.3em 0.5em;
-	white-space: nowrap;
-	font-size: 0.85em;
-}
-.size_cell {
-	padding: 0.3em 0.5em;
-	white-space: nowrap;
-	font-size: 0.85em;
-	text-align: right;
-}
-.button_cell {
-	padding: 0.3em 0.5em;
-}
 .row_actions {
 	display: flex;
 	gap: 0.25em;
 }
-.danger {
-	color: var(--danger_color, #c0392b);
-}
 @media (max-width: 600px) {
 	.hide_small {
 		display: none;
diff --git a/svelte/src/filesystem/viewers/FilePreview.svelte b/svelte/src/filesystem/viewers/FilePreview.svelte
index ba689ad..f4dbc6f 100644
--- a/svelte/src/filesystem/viewers/FilePreview.svelte
+++ b/svelte/src/filesystem/viewers/FilePreview.svelte
@@ -90,7 +90,7 @@ export const seek = (delta: number) => {
 		<Spinner/>
 	</div>
 {:else if viewer_type === "dir" && $nav.base.name === ".Trash"}
-	<TrashBin root_path={$nav.path[$nav.path.length - 2].path}/>
+	<TrashBin nav={nav} root_path={$nav.path[$nav.path.length - 2].path}/>
 {:else if viewer_type === "dir"}
 	<FileManager nav={nav} upload_widget={upload_widget} edit_window={edit_window} search_bar={search_bar}>
 		<CustomBanner path={$nav.path}/>