diff --git a/.gitignore b/.gitignore
index 4ce5750..614da9b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -14,7 +14,7 @@ dist/
 downloads/
 eggs/
 .eggs/
-lib/
+#lib/
 lib64/
 parts/
 sdist/
diff --git a/.gitmodules b/.gitmodules
deleted file mode 100644
index c34cc6f..0000000
--- a/.gitmodules
+++ /dev/null
@@ -1,3 +0,0 @@
-[submodule "frontend/extras"]
-	path = frontend/extras
-	url = https://git.neulandlabor.de/j3d1/vue-extras.git
diff --git a/deploy/dev/Dockerfile.frontend b/deploy/dev/Dockerfile.frontend
index 02b9e79..cdba36e 100644
--- a/deploy/dev/Dockerfile.frontend
+++ b/deploy/dev/Dockerfile.frontend
@@ -9,7 +9,7 @@ RUN mkdir /git
 # A wildcard is used to ensure both package.json AND package-lock.json are copied
 COPY package.json ./
 
-COPY extras/ ./extras/
+#COPY extras/ ./extras/
 RUN npm install
 
 CMD [ "npm", "run", "dev", "--", "--host"]
diff --git a/deploy/dev/instance_b/nginx-b.dev.conf b/deploy/dev/instance_b/nginx-b.dev.conf
index 4fda10c..8953a08 100644
--- a/deploy/dev/instance_b/nginx-b.dev.conf
+++ b/deploy/dev/instance_b/nginx-b.dev.conf
@@ -1,3 +1,10 @@
+# Worker stays unprivileged as the image's default "nginx" user, but gains the "root" group so
+# it can read /var/www/userfiles - backend-b (running as root) writes those with
+# FILE_UPLOAD_DIRECTORY_PERMISSIONS=0750, group-readable but not world-readable. Mirrors
+# deploy/prod/playbook.yml's "Allow nginx to read backend user files" (www-data joins the
+# backend's file-owning group instead of loosening the mode).
+user nginx root;
+
 events {}
 
 http {
diff --git a/deploy/prod/Dockerfile.frontend b/deploy/prod/Dockerfile.frontend
index 1def462..fb16084 100644
--- a/deploy/prod/Dockerfile.frontend
+++ b/deploy/prod/Dockerfile.frontend
@@ -15,7 +15,7 @@ ARG GIT_COMMIT=unknown
 ENV GIT_COMMIT=$GIT_COMMIT
 
 COPY package.json package-lock.json ./
-COPY extras/ ./extras/
+#COPY extras/ ./extras/
 RUN npm ci
 COPY . .
 RUN npm run build
diff --git a/docs/implementation.md b/docs/implementation.md
index 04adb81..700e20c 100644
--- a/docs/implementation.md
+++ b/docs/implementation.md
@@ -229,6 +229,9 @@ In `FotoFirstBulkImportWorkflow.vue`, `photos`' durable state is the `WorkflowIn
 
 Once a photo finishes uploading, the gallery switches it to the server-fetched thumbnail by re-looking it up by hash rather than mutating the closed-over `photo` object from the upload closure - that reference predates the `this.photos.push()` call, so it's the raw object, not the reactive proxy Vue tracks, and writing to it wouldn't trigger a re-render.
 
+### Bulk Label Print Workflow
+`BulkLabelPrintWorkflow.vue` implements the `bulk-label-print` workflow: step 1 collects a kind/owner/id range plus a label layout (reusing `LabelLayoutPreview.vue` for the template grid, previewed against the range's first id); step 2 connects a printer (or falls back to PNG downloads, same device-chip/PNG-Export pattern as `Print.vue`) and, on start, sequentially renders and prints/downloads one label per id in the range via `label.js`'s `drawLabel`, logging each id's outcome. `MAX_RANGE_SIZE` caps a single run so a mistyped range can't queue an unbounded number of labels.
+
 ### Foto First Bulk Import Workflow
 `FotoFirstBulkImportWorkflow2.vue` implements every step of the `foto-first-bulk-import` workflow (photo capture, image processing, item detail entry, import completion) in a single component. Keeping the whole workflow in one file avoids splitting closely related state (photos, processed images, completed items) across many small step components and their prop/emit boundaries.
 
@@ -271,3 +274,10 @@ An inventory item's properties are encoded into the `properties` CSV cell as a c
 
 ### Print Link Shape
 `printLinkFor` in `Inventory.vue` and `StorageLocation.vue` (and the print buttons in `InventoryDetail.vue`/`StorageLocationDetail.vue`) all route to `Print.vue` with the same `{kind, userHandle, id}` query shape - the thing's raw identity - rather than any pre-built link. `kind` is one of `CONTENT_KINDS`' ids (`"item"`/`"storage-location"`, see Content Kinds Registry above); `label.js`'s `buildLabelFields` reads it generically since every kind's prefill now shares this one shape. That lets the print page derive every representation it needs (qualified handle, owner handle, URL, short link, …) itself, instead of being tied to whichever one the calling button happened to construct. Group-owned items have no individual owner handle - `short-id.js`'s `group_item` kind resolves them via `owner_group` instead (see `shortIdLink`) - so there's no `{userHandle, id}` to build yet; `Inventory.vue`'s `printLinkFor` returns `null` for them until group print support exists. Storage locations are always individually owned (see `StorageLocationViewSet.get_queryset`), so `StorageLocation.vue`'s version never has that fallback to make.
+
+## Categories
+
+### Category Tree Reconstruction From Flat Path Strings
+`Category` (`backend/toolshed/models.py`) is a real parent/children tree (self-referencing FK), but `combined_info`'s `/api/v1/info/` response (`backend/toolshed/api/info.py`) flattens every category to `str(category)` - a `/`-joined ancestor path (`Category.__str__`) - with every ancestor and descendant listed as its own separate string, not nested. `Admin.vue`'s `categoryTree` computed rebuilds the hierarchy client-side by splitting each path on `/` and grouping nodes by shared prefixes, then renders it with `TreeView.vue` (`frontend/src/components/TreeView.vue`), a generic recursive collapsible tree component built for single-line slot content.
+
+`StorageLocation` (`backend/toolshed/models.py`) is the same self-referencing-FK shape, but its `StorageLocationSerializer` keeps `parent` as a real owner-scoped id rather than flattening it away, so `Admin.vue`'s `storageLocationTree` and `StorageLocation.vue`'s `locationTree` computeds group nodes by that id directly instead of parsing path strings - the same tree-from-flat-list pattern, one step simpler since the parent relation already survives serialization.
diff --git a/frontend/extras b/frontend/extras
deleted file mode 160000
index 21bf28a..0000000
--- a/frontend/extras
+++ /dev/null
@@ -1 +0,0 @@
-Subproject commit 21bf28a8b6293872f5f7a42c9ca0bc12ede5aaae
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 9a3cb1d..0a7dc29 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -887,9 +887,6 @@
       "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
       "dev": true
     },
-    "extras": {
-      "version": "file:extras"
-    },
     "fast-diff": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.3.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index bff1287..1fac118 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -17,7 +17,6 @@
     "vue-multiselect": "^2.1.7",
     "vue-router": "^4.1.6",
     "vuex": "^4.1.0",
-    "extras": "file:./extras",
     "jquery": "^3.6.0",
     "popper.js": "^1.16.1"
   },
diff --git a/frontend/src/components/BaseLayout.vue b/frontend/src/components/BaseLayout.vue
index 3ffe9a7..17b5ad0 100644
--- a/frontend/src/components/BaseLayout.vue
+++ b/frontend/src/components/BaseLayout.vue
@@ -9,7 +9,7 @@
                 <SearchBox/>
                 <div class="navbar-collapse collapse">
                     <ul class="navbar-nav navbar-align">
-                        <router-link to="/scan?navigate=immediate" class="nav-icon">
+                        <router-link :to="{name: 'scan', query: {navigate: 'immediate'}}" class="nav-icon">
                             <b-icon-qr-code-scan class="bi-valign-middle"></b-icon-qr-code-scan>
                         </router-link>
                         <Notifications :notifications="notifications"/>
diff --git a/frontend/src/components/CombinedFileField.vue b/frontend/src/components/CombinedFileField.vue
index d8d1aec..0dcb058 100644
--- a/frontend/src/components/CombinedFileField.vue
+++ b/frontend/src/components/CombinedFileField.vue
@@ -14,7 +14,7 @@
         <div style="position: relative;">
             <div class="image-list">
                 <deletable-wrapper v-for="file in only_images(item_files).filter(file => file.owner)" :key="file.id"
-                                   @delete="deleteFile(file)">
+                                   confirm-message="Delete this file? This cannot be undone." @delete="deleteFile(file)">
                     <authenticated-image :src="file.name" :owner="file.owner" class="img-thumbnail"/>
                 </deletable-wrapper>
                 <deletable-wrapper v-for="file in only_images(item_files).filter(file => file.data)" :key="file.id"
diff --git a/frontend/src/components/DeletableWrapper.vue b/frontend/src/components/DeletableWrapper.vue
index d357a01..c7aa4c6 100644
--- a/frontend/src/components/DeletableWrapper.vue
+++ b/frontend/src/components/DeletableWrapper.vue
@@ -1,9 +1,9 @@
 <template>
     <span style="position: relative; display: inline-block;">
         <div class="delete-button">
-            <button class="btn btn-danger btn-sm" @click="triggerDelete">
+            <guarded-button class="btn btn-danger btn-sm" :confirm-message="confirmMessage" @confirm="$emit('delete')">
                 <b-icon-trash></b-icon-trash>
-            </button>
+            </guarded-button>
         </div>
         <slot></slot>
     </span>
@@ -20,17 +20,21 @@
 
 <script>
 import * as BIcons from "bootstrap-icons-vue";
+import GuardedButton from "@/components/GuardedButton.vue";
 
 export default {
     name: "DeletableWrapper",
     components: {
+        GuardedButton,
         ...BIcons
     },
-    emits: ["delete"],
-    methods: {
-        triggerDelete() {
-            this.$emit("delete");
+    props: {
+        // No confirmation when omitted - e.g. removing a not-yet-saved staged file, see CombinedFileField.vue's deleteTempFile.
+        confirmMessage: {
+            type: String,
+            default: null
         }
-    }
+    },
+    emits: ["delete"]
 }
 </script>
\ No newline at end of file
diff --git a/frontend/src/components/GuardedButton.vue b/frontend/src/components/GuardedButton.vue
new file mode 100644
index 0000000..a9af8fb
--- /dev/null
+++ b/frontend/src/components/GuardedButton.vue
@@ -0,0 +1,43 @@
+<template>
+    <component :is="tag" v-bind="rootProps" :class="{unguarded: shiftHeld}" @click="handleClick">
+        <slot></slot>
+    </component>
+</template>
+
+<script>
+import {reactive} from "vue"
+
+const shiftState = reactive({held: false})
+window.addEventListener("keydown", event => shiftState.held = event.shiftKey)
+window.addEventListener("keyup", event => shiftState.held = event.shiftKey)
+
+export default {
+    name: "GuardedButton",
+    props: {
+        confirmMessage: {
+            type: String,
+            default: null
+        },
+        tag: {
+            type: String,
+            default: "button"
+        }
+    },
+    emits: ["confirm"],
+    computed: {
+        rootProps() {
+            return this.tag === "a" ? {href: "#"} : {}
+        },
+        shiftHeld() {
+            return shiftState.held
+        }
+    },
+    methods: {
+        handleClick(event) {
+            if (this.tag === "a") event.preventDefault()
+            if (this.confirmMessage && !event.shiftKey && !confirm(this.confirmMessage)) return
+            this.$emit("confirm", event)
+        }
+    }
+}
+</script>
diff --git a/frontend/src/components/Sidebar.vue b/frontend/src/components/Sidebar.vue
index 3c8afc3..564e85a 100644
--- a/frontend/src/components/Sidebar.vue
+++ b/frontend/src/components/Sidebar.vue
@@ -1,7 +1,7 @@
 <template>
     <nav id="sidebar" class="sidebar">
         <div class="sidebar-content">
-            <router-link to="/" class="sidebar-brand">
+            <router-link :to="{name: 'dashboard'}" class="sidebar-brand">
                 <img src="/src/assets/icons/toolshed-48x48.png" alt="Toolshed Logo" class="align-middle logo mr-2 h-75">
                 <span class="align-middle">Toolshed</span>
             </router-link>
@@ -10,61 +10,61 @@
                     Tools & Components
                 </li>
                 <li class="sidebar-item">
-                    <router-link to="/inventory" class="sidebar-link">
+                    <router-link :to="{name: 'inventory'}" class="sidebar-link">
                         <b-icon-archive class="bi-valign-middle"></b-icon-archive>
                         <span class="align-middle">Inventory</span>
                     </router-link>
                 </li>
                 <li class="sidebar-item">
-                    <router-link to="/storage-location" class="sidebar-link">
+                    <router-link :to="{name: 'locations'}" class="sidebar-link">
                         <b-icon-boxes class="bi-valign-middle"></b-icon-boxes>
                         <span class="align-middle">Storage Locations</span>
                     </router-link>
                 </li>
                 <li class="sidebar-item">
-                    <router-link to="/workflows" class="sidebar-link">
+                    <router-link :to="{name: 'workflows'}" class="sidebar-link">
                         <b-icon-diagram3 class="bi-valign-middle"></b-icon-diagram3>
                         <span class="align-middle">Workflows</span>
                     </router-link>
                 </li>
                 <li class="sidebar-item">
-                    <router-link to="/friends" class="sidebar-link">
+                    <router-link :to="{name: 'friends'}" class="sidebar-link">
                         <b-icon-people class="bi-valign-middle"></b-icon-people>
                         <span class="align-middle">Friends</span>
                     </router-link>
                 </li>
                 <li class="sidebar-item">
-                    <router-link to="/groups" class="sidebar-link">
+                    <router-link :to="{name: 'groups'}" class="sidebar-link">
                         <b-icon-people-fill class="bi-valign-middle"></b-icon-people-fill>
                         <span class="align-middle">Groups</span>
                     </router-link>
                 </li>
                 <li class="sidebar-item">
-                    <router-link to="/files" class="sidebar-link">
+                    <router-link :to="{name: 'files'}" class="sidebar-link">
                         <b-icon-folder class="bi-valign-middle"></b-icon-folder>
                         <span class="align-middle">Files</span>
                     </router-link>
                 </li>
                 <li class="sidebar-item">
-                    <router-link to="/admin" class="sidebar-link">
+                    <router-link :to="{name: 'admin'}" class="sidebar-link">
                         <b-icon-gear class="bi-valign-middle"></b-icon-gear>
                         <span class="align-middle">Admin</span>
                     </router-link>
                 </li>
                 <li class="sidebar-item">
-                    <router-link to="/swatch" class="sidebar-link">
+                    <router-link :to="{name: 'swatch'}" class="sidebar-link">
                         <b-icon-gear class="bi-valign-middle"></b-icon-gear>
                         <span class="align-middle">Swatch</span>
                     </router-link>
                 </li>
                 <li class="sidebar-item">
-                    <router-link to="/print" class="sidebar-link">
+                    <router-link :to="{name: 'print'}" class="sidebar-link">
                         <b-icon-gear class="bi-valign-middle"></b-icon-gear>
                         <span class="align-middle">Print</span>
                     </router-link>
                 </li>
                 <li class="sidebar-item">
-                    <router-link to="/scan" class="sidebar-link">
+                    <router-link :to="{name: 'scan'}" class="sidebar-link">
                         <b-icon-qr-code-scan class="bi-valign-middle"></b-icon-qr-code-scan>
                         <span class="align-middle">Scan</span>
                     </router-link>
diff --git a/frontend/src/components/TreeView.vue b/frontend/src/components/TreeView.vue
new file mode 100644
index 0000000..0a78484
--- /dev/null
+++ b/frontend/src/components/TreeView.vue
@@ -0,0 +1,131 @@
+<template>
+    <ul class="tree-view" :class="{'tree-view-root': depth === 0}">
+        <li v-for="node in items" :key="node[itemKey]" class="tree-view-item">
+            <div class="tree-view-row">
+                <button v-if="hasChildren(node)" type="button" class="tree-view-toggle"
+                        :aria-expanded="isExpanded(node)" @click="toggleNode(node)">
+                    <b-icon-chevron-right v-if="!isExpanded(node)"></b-icon-chevron-right>
+                    <b-icon-chevron-down v-else></b-icon-chevron-down>
+                </button>
+                <span v-else class="tree-view-toggle-spacer"></span>
+                <div class="tree-view-content">
+                    <slot :item="node" :expanded="isExpanded(node)" :has-children="hasChildren(node)"
+                          :depth="depth" :toggle="() => toggleNode(node)"></slot>
+                </div>
+            </div>
+            <tree-view v-if="hasChildren(node) && isExpanded(node)" :items="node[childrenKey]"
+                       :item-key="itemKey" :children-key="childrenKey" :default-expanded="defaultExpanded"
+                       :depth="depth + 1" @toggle="(...args) => $emit('toggle', ...args)">
+                <template #default="slotProps">
+                    <slot v-bind="slotProps"></slot>
+                </template>
+            </tree-view>
+        </li>
+    </ul>
+</template>
+
+<style scoped>
+.tree-view {
+    list-style: none;
+    margin: 0;
+    padding-left: 0;
+}
+
+.tree-view .tree-view {
+    padding-left: 1.25rem;
+}
+
+.tree-view-row {
+    display: flex;
+    align-items: center;
+    min-height: 1.75rem;
+}
+
+.tree-view-toggle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex: 0 0 auto;
+    width: 1.25rem;
+    height: 1.25rem;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    color: inherit;
+    cursor: pointer;
+}
+
+.tree-view-toggle-spacer {
+    flex: 0 0 auto;
+    width: 1.25rem;
+    height: 1.25rem;
+}
+
+.tree-view-content {
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+</style>
+
+<script>
+import * as BIcons from "bootstrap-icons-vue";
+
+export default {
+    name: "TreeView",
+    components: {
+        ...BIcons
+    },
+    props: {
+        items: {
+            type: Array,
+            required: true
+        },
+        itemKey: {
+            type: String,
+            default: "id"
+        },
+        childrenKey: {
+            type: String,
+            default: "children"
+        },
+        // Whether nodes start out expanded. Only read once per rendered level, see expandedKeys below.
+        defaultExpanded: {
+            type: Boolean,
+            default: false
+        },
+        depth: {
+            type: Number,
+            default: 0
+        }
+    },
+    emits: ["toggle"],
+    data() {
+        return {
+            // Tracks which of this level's own nodes are expanded. Nested levels are separate
+            // TreeView instances with their own set, since they only exist while their parent
+            // node is expanded in the first place.
+            expandedKeys: new Set(this.defaultExpanded ? this.items.map(item => item[this.itemKey]) : [])
+        }
+    },
+    methods: {
+        hasChildren(node) {
+            return Array.isArray(node[this.childrenKey]) && node[this.childrenKey].length > 0
+        },
+        isExpanded(node) {
+            return this.expandedKeys.has(node[this.itemKey])
+        },
+        toggleNode(node) {
+            const key = node[this.itemKey]
+            if (this.expandedKeys.has(key)) {
+                this.expandedKeys.delete(key)
+            } else {
+                this.expandedKeys.add(key)
+            }
+            this.$emit("toggle", node, this.expandedKeys.has(key))
+        }
+    }
+}
+</script>
diff --git a/frontend/src/components/UserDropdown.vue b/frontend/src/components/UserDropdown.vue
index 60ba182..5305799 100644
--- a/frontend/src/components/UserDropdown.vue
+++ b/frontend/src/components/UserDropdown.vue
@@ -18,11 +18,11 @@
             </span>
             </div>
             <div class="dropdown-divider"></div>
-            <router-link to="/profile" class="dropdown-item">
+            <router-link :to="{name: 'profile'}" class="dropdown-item">
                 <b-icon-person class="bi-valign-middle mr-1"></b-icon-person>
                 Profile
             </router-link>
-            <router-link to="/settings" class="dropdown-item">
+            <router-link :to="{name: 'settings'}" class="dropdown-item">
                 <b-icon-sliders class="bi-valign-middle mr-1"></b-icon-sliders>
                 Settings &
                 Privacy
diff --git a/frontend/src/components/workflow/workflows/FotoFirstBulkImportWorkflow.vue b/frontend/src/components/workflow/workflows/FotoFirstBulkImportWorkflow.vue
index cc20c9c..8288f60 100644
--- a/frontend/src/components/workflow/workflows/FotoFirstBulkImportWorkflow.vue
+++ b/frontend/src/components/workflow/workflows/FotoFirstBulkImportWorkflow.vue
@@ -38,10 +38,12 @@
             <div v-if="photos.length > 0" class="photo-gallery mb-4">
                 <div class="d-flex justify-content-between align-items-center mb-3">
                     <h6 class="mb-0">Captured Photos ({{ photos.length }})</h6>
-                    <button class="btn btn-sm btn-outline-danger" @click="clearAllPhotos">
+                    <guarded-button class="btn btn-sm btn-outline-danger"
+                                    confirm-message="Are you sure you want to remove all photos?"
+                                    @confirm="clearAllPhotos">
                         <b-icon-trash class="me-1"></b-icon-trash>
                         Clear All
-                    </button>
+                    </guarded-button>
                 </div>
                 <div class="row">
                     <div v-for="(photo, index) in photos" :key="index" class="col-sm-6 col-md-4 col-lg-3 mb-3">
@@ -279,6 +281,7 @@
 import * as BIcons from "bootstrap-icons-vue";
 import {mapActions, mapState} from "vuex";
 import AuthenticatedImage from "@/components/AuthenticatedImage.vue";
+import GuardedButton from "@/components/GuardedButton.vue";
 import DragDropFileSource from "@/components/inputs/DragDropFileSource.vue";
 import CameraFileSource from "@/components/inputs/CameraFileSource.vue";
 import FsFileSource from "@/components/inputs/FsFileSource.vue";
@@ -350,6 +353,7 @@ export default {
     components: {
         WebcamFileSource,
         AuthenticatedImage,
+        GuardedButton,
         DragDropFileSource,
         CameraFileSource,
         FsFileSource,
@@ -500,14 +504,12 @@ export default {
         },
 
         async clearAllPhotos() {
-            if (confirm('Are you sure you want to remove all photos?')) {
-                const removed = this.photos;
-                this.photos = [];
-                await Promise.all(removed.map(photo =>
-                    this.unstageFile({lifetime_id: this.workflowInstance.id, file_hash: photo.hash})
-                        .catch(error => console.error('Failed to unstage photo:', error))
-                ));
-            }
+            const removed = this.photos;
+            this.photos = [];
+            await Promise.all(removed.map(photo =>
+                this.unstageFile({lifetime_id: this.workflowInstance.id, file_hash: photo.hash})
+                    .catch(error => console.error('Failed to unstage photo:', error))
+            ));
         },
 
         proceedFromStep1() {
diff --git a/frontend/src/short-id.js b/frontend/src/lib/short-id.js
similarity index 100%
rename from frontend/src/short-id.js
rename to frontend/src/lib/short-id.js
diff --git a/frontend/src/router.js b/frontend/src/router.js
index 393296b..f75a29f 100644
--- a/frontend/src/router.js
+++ b/frontend/src/router.js
@@ -30,7 +30,7 @@ import ShortId from '@/views/ShortId.vue';
 import {
     encodeShortId, serializeShortId, decodeShortId, deserializeShortId,
     isDomainQualifiedShortId, decodeDomainQualifiedShortId
-} from '@/short-id';
+} from '@/lib/short-id';
 
 import Account from '@/views/settings/Account.vue';
 import Password from '@/views/settings/Password.vue';
@@ -51,35 +51,39 @@ export function decodeHandleFromUrl(segment) {
 
 // See docs/implementation.md#owner-filtered-overview-routes-use-path-segments-not-query-strings.
 export function ownerOverviewRoute(item) {
-    return item.owner_group ? `/inventory/${encodeHandleForUrl(item.owner_group)}` : '/inventory';
+    return item.owner_group
+        ? {name: 'inventory', params: {owner: encodeHandleForUrl(item.owner_group)}}
+        : {name: 'inventory'};
 }
 
 export function ownerLocationOverviewRoute(location) {
-    return location.owner_group ? `/storage-location/${encodeHandleForUrl(location.owner_group)}` : '/storage-location';
+    return location.owner_group
+        ? {name: 'locations', params: {owner: encodeHandleForUrl(location.owner_group)}}
+        : {name: 'locations'};
 }
 
 const EXPANDED_ROUTE_BUILDERS = {
     item: ({owner_identity_id, item_local_id}) => {
         const handle = store.getters.identityHandleById[owner_identity_id];
-        return handle ? `/inventory/${encodeHandleForUrl(handle)}/${item_local_id}` : null;
+        return handle ? {name: 'inventory-detail', params: {handle: encodeHandleForUrl(handle), id: item_local_id}} : null;
     },
     group_item: ({owner_group_id, item_local_id}) => {
         const handle = store.getters.groupHandleById[owner_group_id];
-        return handle ? `/inventory/${encodeHandleForUrl(handle)}/${item_local_id}` : null;
+        return handle ? {name: 'inventory-detail', params: {handle: encodeHandleForUrl(handle), id: item_local_id}} : null;
     },
     group: ({group_id}) => {
         const handle = store.getters.groupHandleById[group_id];
-        return handle ? `/groups/${encodeHandleForUrl(handle)}` : null;
+        return handle ? {name: 'group-detail', params: {handle: encodeHandleForUrl(handle)}} : null;
     },
     storage_location: ({owner_identity_id, storage_location_id}) => {
         const handle = store.getters.identityHandleById[owner_identity_id];
-        return handle ? `/storage-locations/${encodeHandleForUrl(handle)}/${storage_location_id}` : null;
+        return handle ? {name: 'locations-detail', params: {handle: encodeHandleForUrl(handle), id: storage_location_id}} : null;
     },
     group_storage_location: ({owner_group_id, storage_location_id}) => {
         const handle = store.getters.groupHandleById[owner_group_id];
-        return handle ? `/storage-locations/${encodeHandleForUrl(handle)}/${storage_location_id}` : null;
+        return handle ? {name: 'locations-detail', params: {handle: encodeHandleForUrl(handle), id: storage_location_id}} : null;
     },
-    workflow: ({workflow_id}) => `/workflows/${workflow_id}`,
+    workflow: ({workflow_id}) => ({name: 'workflow-detail', params: {id: workflow_id}}),
 };
 
 // Kinds whose route needs identityHandleById/groupHandleById (from state.idmap); ShortId.vue only waits on an idmap fetch for these.
@@ -121,30 +125,33 @@ export async function domainQualifiedRoute(domain, ints) {
         return undefined;
     }
     return owned.isLocation
-        ? `/storage-locations/${encodeHandleForUrl(resolved.handle)}/${resolved.id}`
-        : `/inventory/${encodeHandleForUrl(resolved.handle)}/${resolved.id}`;
+        ? {name: 'locations-detail', params: {handle: encodeHandleForUrl(resolved.handle), id: resolved.id}}
+        : {name: 'inventory-detail', params: {handle: encodeHandleForUrl(resolved.handle), id: resolved.id}};
 }
 
-const routes = [{path: '/', component: Dashboard, meta: {requiresAuth: true}}, {
+const routes = [{path: '/', name: 'dashboard', component: Dashboard, meta: {requiresAuth: true}}, {
     // See docs/implementation.md#owner-filtered-overview-routes-use-path-segments-not-query-strings.
     path: '/inventory/:owner?',
+    name: 'inventory',
     component: Inventory,
     meta: {requiresAuth: true},
     props: true
 }, {
     path: '/inventory/:handle/:id',
+    name: 'inventory-detail',
     component: InventoryDetail,
     meta: {requiresAuth: true},
     props: true
 }, {
     path: '/inventory/:handle/:id/edit',
+    name: 'inventory-edit',
     component: InventoryEdit,
     meta: {requiresAuth: true},
     props: true
 }, {
     // Label/short-link entry point; alias of /inventory/:handle/:id. See docs/implementation.md#item-short-link-redirect-route.
     path: '/i/:handle/:id',
-    redirect: to => `/inventory/${to.params.handle}/${to.params.id}`
+    redirect: to => ({name: 'inventory-detail', params: to.params})
 }, {
     // beforeEnter, not redirect: falls through to ShortId.vue when the route can't resolve synchronously. See docs/implementation.md#beforeenter-guard-vs-redirect-for-short_id.
     path: '/:short_id',
@@ -160,28 +167,34 @@ const routes = [{path: '/', component: Dashboard, meta: {requiresAuth: true}}, {
 }, {
     // See docs/implementation.md#owner-filtered-overview-routes-use-path-segments-not-query-strings.
     path: '/inventory/new/:group?',
+    name: 'inventory-new',
     component: InventoryNew,
     meta: {requiresAuth: true},
     props: true
 }, {
     path: '/friends',
+    name: 'friends',
     component: Friends,
     meta: {requiresAuth: true}
 }, {
     path: '/groups',
+    name: 'groups',
     component: Groups,
     meta: {requiresAuth: true}
 }, {
     path: '/groups/new',
+    name: 'groups-new',
     component: GroupNew,
     meta: {requiresAuth: true}
 }, {
     path: '/groups/:handle',
+    name: 'group-detail',
     component: GroupDetail,
     meta: {requiresAuth: true},
     props: true
-}, {path: '/files', component: Files, meta: {requiresAuth: true}
+}, {path: '/files', name: 'files', component: Files, meta: {requiresAuth: true}
 }, {path: '/workflows',
+    name: 'workflows',
     component: Workflows,
     meta: {requiresAuth: true},
 }, {path: '/workflows/:id/:step?',
@@ -190,10 +203,12 @@ const routes = [{path: '/', component: Dashboard, meta: {requiresAuth: true}}, {
     meta: {requiresAuth: true},
     props: true
 }, {path: '/admin',
+    name: 'admin',
     component: Admin,
     meta: {requiresAuth: true}
-}, {path: '/swatch', component: Swatch, meta: {requiresAuth: true}}, {
+}, {path: '/swatch', name: 'swatch', component: Swatch, meta: {requiresAuth: true}}, {
     path: '/print',
+    name: 'print',
     component: Print,
     meta: {requiresAuth: true},
     props: route => {
@@ -204,23 +219,27 @@ const routes = [{path: '/', component: Dashboard, meta: {requiresAuth: true}}, {
     }
 }, {
     path: '/scan',
+    name: 'scan',
     component: Scan,
     meta: {requiresAuth: true},
 }, {
     path: '/search/:query',
+    name: 'search',
     component: Search,
     meta: {requiresAuth: true},
     props: true
-}, {path: '/login', component: Login, meta: {requiresAuth: false}}, {
+}, {path: '/login', name: 'login', component: Login, meta: {requiresAuth: false}}, {
     path: '/register',
+    name: 'register',
     component: Register,
     meta: {requiresAuth: false}
-}, {path: '/pairing', component: Pairing, meta: {requiresAuth: false}}, {
+}, {path: '/pairing', name: 'pairing', component: Pairing, meta: {requiresAuth: false}}, {
     path: '/profile',
+    name: 'profile',
     component: Profile,
     meta: {requiresAuth: true}
 }, {
-    path: '/settings', component: Settings, meta: {requiresAuth: true}, children: [{
+    path: '/settings', name: 'settings', component: Settings, meta: {requiresAuth: true}, children: [{
         path: '', name: 'account', component: Account, meta: {requiresAuth: true}
     },{
         path: 'password/', name: 'password', component: Password, meta: {requiresAuth: true}
@@ -237,27 +256,31 @@ const routes = [{path: '/', component: Dashboard, meta: {requiresAuth: true}}, {
     }]
 }, {
     // See docs/implementation.md#owner-filtered-overview-routes-use-path-segments-not-query-strings.
-    path: '/storage-location/:owner?',
+    path: '/locations/:owner?',
+    name: 'locations',
     component: StorageLocation,
     meta: {requiresAuth: true},
     props: true
 }, {
-    path: '/storage-locations/:handle/:id',
+    path: '/locations/:handle/:id',
+    name: 'locations-detail',
     component: StorageLocationDetail,
     meta: {requiresAuth: true},
     props: true
 }, {
-    path: '/storage-locations/:handle/:id/edit',
+    path: '/locations/:handle/:id/edit',
+    name: 'locations-edit',
     component: StorageLocationEdit,
     meta: {requiresAuth: true},
     props: true
 }, {
     // Label/short-link entry point for storage locations, the counterpart of /i/:handle/:id. See docs/implementation.md#item-short-link-redirect-route.
     path: '/s/:handle/:id',
-    redirect: to => `/storage-locations/${to.params.handle}/${to.params.id}`
+    redirect: to => ({name: 'locations-detail', params: to.params})
 }, {
     // See docs/implementation.md#owner-filtered-overview-routes-use-path-segments-not-query-strings.
-    path: '/storage-locations/new/:group?',
+    path: '/locations/new/:group?',
+    name: 'locations-new',
     component: StorageLocationNew,
     meta: {requiresAuth: true},
     props: true
diff --git a/frontend/src/scss/_breakpoints.scss b/frontend/src/scss/_breakpoints.scss
new file mode 100644
index 0000000..2911933
--- /dev/null
+++ b/frontend/src/scss/_breakpoints.scss
@@ -0,0 +1,24 @@
+// Single source of truth for the grid breakpoints, shared between toolshed.scss
+// (which feeds them into Bootstrap's own grid/container generation) and any
+// component's <style lang="scss"> block that needs a matching media query
+// via media-breakpoint-up()/-down()/-between() (see mixins/_breakpoints.scss).
+//
+// Bootstrap 4 stops at xl; xxl is faked here for grid sizing until the
+// Bootstrap 5 upgrade brings a real one.
+$grid-breakpoints: (
+        xs: 0,
+        sm: 576px,
+        md: 768px,
+        lg: 992px,
+        xl: 1200px,
+        xxl: 3000px
+);
+$container-max-widths: (
+        sm: 540px,
+        md: 720px,
+        lg: 960px,
+        xl: 1140px,
+        xxl: 2960px
+);
+
+@import "bootstrap/scss/mixins/breakpoints";
diff --git a/frontend/src/scss/toolshed.scss b/frontend/src/scss/toolshed.scss
index cb8219e..5a41d97 100644
--- a/frontend/src/scss/toolshed.scss
+++ b/frontend/src/scss/toolshed.scss
@@ -27,6 +27,8 @@ $h4-font-size: $font-size-base * 1.25;
 $h5-font-size: $font-size-base;
 $h6-font-size: $font-size-base;
 
+@import "breakpoints";
+
 @import "bootstrap/scss/functions";
 @import "bootstrap/scss/variables";
 
diff --git a/frontend/src/tests/Admin.js b/frontend/src/tests/Admin.js
new file mode 100644
index 0000000..d800280
--- /dev/null
+++ b/frontend/src/tests/Admin.js
@@ -0,0 +1,56 @@
+import Admin from '../views/Admin.vue'
+
+test('Admin categoryTree groups flat "/"-joined category paths into a tree', () => {
+    const categories = [
+        'Electronics',
+        'Electronics/Passives',
+        'Electronics/Passives/Resistors',
+        'Electronics/Actives',
+        'Tools',
+    ]
+
+    const categoryTree = Admin.computed.categoryTree.call({categories})
+
+    expect(categoryTree).toEqual([
+        {
+            id: 'Electronics', name: 'Electronics', children: [
+                {id: 'Electronics/Actives', name: 'Actives', children: []},
+                {
+                    id: 'Electronics/Passives', name: 'Passives', children: [
+                        {id: 'Electronics/Passives/Resistors', name: 'Resistors', children: []},
+                    ]
+                },
+            ]
+        },
+        {id: 'Tools', name: 'Tools', children: []},
+    ])
+})
+
+test('Admin storageLocationTree groups locations by their real parent id', () => {
+    const storage_locations = [
+        {id: 3, name: 'Shelf B', parent: 1},
+        {id: 1, name: 'Garage', parent: null},
+        {id: 5, name: 'Attic', parent: null},
+        {id: 2, name: 'Shelf A', parent: 1},
+        {id: 4, name: 'Drawer 1', parent: 3},
+        // A location whose parent was deleted/isn't in this owner's own list falls back to root.
+        {id: 6, name: 'Orphan Box', parent: 99},
+    ]
+
+    const storageLocationTree = Admin.computed.storageLocationTree.call({storage_locations})
+
+    expect(storageLocationTree).toEqual([
+        {id: 5, name: 'Attic', children: []},
+        {
+            id: 1, name: 'Garage', children: [
+                {id: 2, name: 'Shelf A', children: []},
+                {
+                    id: 3, name: 'Shelf B', children: [
+                        {id: 4, name: 'Drawer 1', children: []},
+                    ]
+                },
+            ]
+        },
+        {id: 6, name: 'Orphan Box', children: []},
+    ])
+})
diff --git a/frontend/src/tests/TreeView.js b/frontend/src/tests/TreeView.js
new file mode 100644
index 0000000..31d166a
--- /dev/null
+++ b/frontend/src/tests/TreeView.js
@@ -0,0 +1,58 @@
+import {mount} from '@vue/test-utils'
+import TreeView from '../components/TreeView.vue'
+
+const items = [
+    {
+        id: 1,
+        name: 'Garage',
+        children: [
+            {id: 2, name: 'Shelf A'},
+            {id: 3, name: 'Shelf B', children: [{id: 4, name: 'Drawer 1'}]},
+        ]
+    },
+    {id: 5, name: 'Attic'},
+]
+
+test('TreeView component', async () => {
+    expect(TreeView).toBeTruthy()
+
+    const wrapper = mount(TreeView, {
+        props: {items},
+        slots: {
+            default: '<span class="label">{{ params.item.name }}</span>',
+        },
+    })
+
+    // Children start collapsed - only the two top-level nodes are visible.
+    expect(wrapper.findAll('.tree-view-item').length).toBe(2)
+    expect(wrapper.text()).toContain('Garage')
+    expect(wrapper.text()).toContain('Attic')
+    expect(wrapper.text()).not.toContain('Shelf A')
+
+    // Nothing is expanded yet, so these are exactly the two top-level nodes.
+    const topLevelItems = wrapper.findAll('.tree-view-item')
+
+    // The leaf node ("Attic") has no toggle button, just a spacer.
+    expect(topLevelItems[1].find('.tree-view-toggle').exists()).toBe(false)
+    expect(topLevelItems[1].find('.tree-view-toggle-spacer').exists()).toBe(true)
+
+    // Expanding "Garage" reveals its two direct children, recursively rendered.
+    await topLevelItems[0].find('.tree-view-toggle').trigger('click')
+    expect(wrapper.text()).toContain('Shelf A')
+    expect(wrapper.text()).toContain('Shelf B')
+    expect(wrapper.text()).not.toContain('Drawer 1')
+    expect(wrapper.emitted('toggle')[0]).toEqual([items[0], true])
+
+    // Expanding the nested "Shelf B" reveals the grandchild. Match on the exact text of its own
+    // row (not just "contains"), since the ancestor "Garage" item's text also contains "Shelf B".
+    const shelfB = wrapper.findAll('.tree-view-item').find(item => item.text().trim() === 'Shelf B')
+    await shelfB.find('.tree-view-toggle').trigger('click')
+    expect(wrapper.text()).toContain('Drawer 1')
+
+    // Collapsing "Garage" again hides its whole subtree.
+    await topLevelItems[0].find('.tree-view-toggle').trigger('click')
+    expect(wrapper.text()).not.toContain('Shelf A')
+    expect(wrapper.text()).not.toContain('Drawer 1')
+
+    expect(wrapper.html()).toMatchSnapshot()
+})
diff --git a/frontend/src/tests/__snapshots__/TreeView.js.snap b/frontend/src/tests/__snapshots__/TreeView.js.snap
new file mode 100644
index 0000000..c5812d0
--- /dev/null
+++ b/frontend/src/tests/__snapshots__/TreeView.js.snap
@@ -0,0 +1,20 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`TreeView component 1`] = `
+"<ul data-v-4a3416e7=\\"\\" class=\\"tree-view tree-view-root\\">
+  <li data-v-4a3416e7=\\"\\" class=\\"tree-view-item\\">
+    <div data-v-4a3416e7=\\"\\" class=\\"tree-view-row\\"><button data-v-4a3416e7=\\"\\" type=\\"button\\" class=\\"tree-view-toggle\\" aria-expanded=\\"false\\"><svg data-v-4a3416e7=\\"\\" width=\\"1em\\" height=\\"1em\\" viewBox=\\"0 0 16 16\\" fill=\\"currentColor\\" role=\\"img\\" focusable=\\"false\\">
+          <path fill-rule=\\"evenodd\\" d=\\"M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708\\"></path>
+        </svg></button>
+      <div data-v-4a3416e7=\\"\\" class=\\"tree-view-content\\"><span class=\\"label\\">Garage</span></div>
+    </div>
+    <!--v-if-->
+  </li>
+  <li data-v-4a3416e7=\\"\\" class=\\"tree-view-item\\">
+    <div data-v-4a3416e7=\\"\\" class=\\"tree-view-row\\"><span data-v-4a3416e7=\\"\\" class=\\"tree-view-toggle-spacer\\"></span>
+      <div data-v-4a3416e7=\\"\\" class=\\"tree-view-content\\"><span class=\\"label\\">Attic</span></div>
+    </div>
+    <!--v-if-->
+  </li>
+</ul>"
+`;
diff --git a/frontend/src/tests/short-id.js b/frontend/src/tests/short-id.js
index 291358f..97a4f08 100644
--- a/frontend/src/tests/short-id.js
+++ b/frontend/src/tests/short-id.js
@@ -1,7 +1,7 @@
 import {
     encodeShortId, decodeShortId, deserializeShortId, serializeShortId,
     encodeDomainQualifiedShortId, decodeDomainQualifiedShortId, isDomainQualifiedShortId
-} from '../short-id.js'
+} from '../lib/short-id.js'
 
 test('encodes the worked example from docs/handles-and-shortids.md', () => {
     const token = encodeShortId([0, 7, 42])
diff --git a/frontend/src/views/Admin.vue b/frontend/src/views/Admin.vue
index e1751de..d424f6c 100644
--- a/frontend/src/views/Admin.vue
+++ b/frontend/src/views/Admin.vue
@@ -36,11 +36,9 @@
                                 <h5 class="card-title">Categories</h5>
                             </div>
                             <div class="card-body">
-                                <ul>
-                                    <li v-for="category in categories.sort()" :key="category.id">
-                                        {{ category }}
-                                    </li>
-                                </ul>
+                                <TreeView :items="categoryTree">
+                                    <template #default="{item}">{{ item.name }}</template>
+                                </TreeView>
                             </div>
                         </div>
                         <div class="card">
@@ -84,11 +82,9 @@
                                 <h5 class="card-title">Storage Locations</h5>
                             </div>
                             <div class="card-body">
-                                <ul>
-                                    <li v-for="location in storage_locations.sort()" :key="location.id">
-                                        {{ location.path }}
-                                    </li>
-                                </ul>
+                                <TreeView :items="storageLocationTree">
+                                    <template #default="{item}">{{ item.name }}</template>
+                                </TreeView>
                             </div>
                         </div>
                     </div>
@@ -102,15 +98,49 @@
 import {mapActions, mapState} from "vuex";
 import * as BIcons from "bootstrap-icons-vue";
 import BaseLayout from "@/components/BaseLayout.vue";
+import TreeView from "@/components/TreeView.vue";
 
 export default {
     name: "Admin",
     components: {
         BaseLayout,
+        TreeView,
         ...BIcons
     },
     computed: {
-        ...mapState(["tags", "properties", "categories", "availability_policies", "visibility_policies", "domains", "storage_locations"])
+        ...mapState(["tags", "properties", "categories", "availability_policies", "visibility_policies", "domains", "storage_locations"]),
+        // See docs/implementation.md#category-tree-reconstruction-from-flat-path-strings
+        categoryTree() {
+            const roots = []
+            const nodesByPath = {}
+            for (const path of [...this.categories].sort()) {
+                let siblings = roots
+                let currentPath = ""
+                for (const segment of path.split("/")) {
+                    currentPath = currentPath ? `${currentPath}/${segment}` : segment
+                    if (!nodesByPath[currentPath]) {
+                        nodesByPath[currentPath] = {id: currentPath, name: segment, children: []}
+                        siblings.push(nodesByPath[currentPath])
+                    }
+                    siblings = nodesByPath[currentPath].children
+                }
+            }
+            return roots
+        },
+        storageLocationTree() {
+            const nodesById = {}
+            for (const location of this.storage_locations) {
+                nodesById[location.id] = {id: location.id, name: location.name, children: []}
+            }
+            const roots = []
+            for (const location of [...this.storage_locations].sort((a, b) => a.name.localeCompare(b.name))) {
+                const node = nodesById[location.id]
+                // Falls back to root if the parent isn't in this owner's own location list.
+                const parent = location.parent != null ? nodesById[location.parent] : null
+                ;(parent ? parent.children : roots).push(node)
+            }
+            return roots
+        }
     },
     methods: {
         ...mapActions(["fetchInfo", "fetchStorageLocations"])
diff --git a/frontend/src/views/Dashboard.vue b/frontend/src/views/Dashboard.vue
index 1f23884..4b6ee8b 100644
--- a/frontend/src/views/Dashboard.vue
+++ b/frontend/src/views/Dashboard.vue
@@ -2,17 +2,130 @@
     <BaseLayout>
         <main class="content">
             <div class="container-fluid p-0">
-                <h1 class="h3 mb-3">Dashboard</h1>
+                <div class="d-flex justify-content-between align-items-center flex-wrap mb-3">
+                    <h1 class="h3 mb-0">Welcome back, {{ user }}</h1>
+                    <div class="btn-group">
+                        <router-link :to="{name: 'inventory-new'}" class="btn btn-primary">
+                            <b-icon-plus-lg></b-icon-plus-lg>
+                            Add item
+                        </router-link>
+                        <router-link :to="{name: 'locations-new'}" class="btn btn-outline-secondary">
+                            <b-icon-plus-lg></b-icon-plus-lg>
+                            Add storage location
+                        </router-link>
+                    </div>
+                </div>
+
                 <div class="row">
-                    <div class="col-12">
+                    <div class="col-6 col-md-3">
+                        <router-link :to="{name: 'inventory'}" class="text-decoration-none">
+                            <div class="card stat-card">
+                                <div class="card-body d-flex align-items-center">
+                                    <b-icon-boxes class="stat-icon me-3"></b-icon-boxes>
+                                    <div>
+                                        <div class="stat-value">{{ inventory_items.length }}</div>
+                                        <div class="stat-label">Items</div>
+                                    </div>
+                                </div>
+                            </div>
+                        </router-link>
+                    </div>
+                    <div class="col-6 col-md-3">
+                        <router-link :to="{name: 'locations'}" class="text-decoration-none">
+                            <div class="card stat-card">
+                                <div class="card-body d-flex align-items-center">
+                                    <b-icon-geo-alt class="stat-icon me-3"></b-icon-geo-alt>
+                                    <div>
+                                        <div class="stat-value">{{ storage_locations.length }}</div>
+                                        <div class="stat-label">Storage locations</div>
+                                    </div>
+                                </div>
+                            </div>
+                        </router-link>
+                    </div>
+                    <div class="col-6 col-md-3">
+                        <router-link :to="{name: 'friends'}" class="text-decoration-none">
+                            <div class="card stat-card">
+                                <div class="card-body d-flex align-items-center">
+                                    <b-icon-people class="stat-icon me-3"></b-icon-people>
+                                    <div>
+                                        <div class="stat-value">{{ friends.length }}</div>
+                                        <div class="stat-label">Friends</div>
+                                    </div>
+                                </div>
+                            </div>
+                        </router-link>
+                    </div>
+                    <div class="col-6 col-md-3">
+                        <router-link :to="{name: 'groups'}" class="text-decoration-none">
+                            <div class="card stat-card">
+                                <div class="card-body d-flex align-items-center">
+                                    <b-icon-diagram3 class="stat-icon me-3"></b-icon-diagram3>
+                                    <div>
+                                        <div class="stat-value">{{ ownerGroups.length }}</div>
+                                        <div class="stat-label">Groups</div>
+                                    </div>
+                                </div>
+                            </div>
+                        </router-link>
+                    </div>
+                </div>
+
+                <div class="row">
+                    <div class="col-12 col-lg-8">
                         <div class="card">
-                            <div class="card-header">
-                                <h5 class="card-title mb-0">Empty card</h5>
+                            <div class="card-header d-flex justify-content-between align-items-center">
+                                <h5 class="card-title mb-0">Recent items</h5>
+                                <router-link :to="{name: 'inventory'}" class="small">View all</router-link>
                             </div>
                             <div class="card-body">
-                                <div class="logo">
-                                    <img src="/src/assets/icons/toolshed-48x48.png" alt="Toolshed logo">
+                                <div class="row" v-if="recentItems.length > 0">
+                                    <div class="col-6 col-md-4 col-xl-3" v-for="item in recentItems" :key="item.id">
+                                        <router-link :to="itemRoute(item)" class="text-decoration-none">
+                                            <div class="card">
+                                                <authenticated-image v-if="only_images(item.files).length > 0"
+                                                                     :src="only_images(item.files)[0].name"
+                                                                     :owner="only_images(item.files)[0].owner"
+                                                                     class="card-img-top img-preview"/>
+                                                <div class="card-body">
+                                                    <h6 class="card-title mb-0 text-truncate">{{ item.name }}</h6>
+                                                    <span class="text-black-50">{{ item.owned_quantity }}</span>
+                                                </div>
+                                            </div>
+                                        </router-link>
+                                    </div>
                                 </div>
+                                <p class="text-muted mb-0" v-else>
+                                    No items yet.
+                                    <router-link :to="{name: 'inventory-new'}">Add your first one</router-link>.
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-12 col-lg-4">
+                        <div class="card">
+                            <div class="card-header">
+                                <h5 class="card-title mb-0">Needs your attention</h5>
+                            </div>
+                            <ul class="list-group list-group-flush" v-if="hasPendingItems">
+                                <router-link v-if="active_workflows.length > 0" :to="{name: 'workflows'}"
+                                             class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
+                                    Workflows in progress
+                                    <span class="badge bg-primary rounded-pill">{{ active_workflows.length }}</span>
+                                </router-link>
+                                <router-link v-if="friendRequests.length > 0" :to="{name: 'friends'}"
+                                             class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
+                                    Friend requests
+                                    <span class="badge bg-primary rounded-pill">{{ friendRequests.length }}</span>
+                                </router-link>
+                                <router-link v-if="groupInvites.length > 0" :to="{name: 'groups'}"
+                                             class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
+                                    Group invites
+                                    <span class="badge bg-primary rounded-pill">{{ groupInvites.length }}</span>
+                                </router-link>
+                            </ul>
+                            <div class="card-body" v-else>
+                                <p class="text-muted mb-0">You're all caught up.</p>
                             </div>
                         </div>
                     </div>
@@ -23,18 +136,92 @@
 </template>
 
 <script>
+import {mapActions, mapGetters, mapState} from 'vuex';
 import * as BIcons from "bootstrap-icons-vue";
 import BaseLayout from "@/components/BaseLayout.vue";
+import AuthenticatedImage from "@/components/AuthenticatedImage.vue";
+import {encodeHandleForUrl} from "@/router";
 
 export default {
     name: 'Dashboard',
     components: {
         ...BIcons,
-        BaseLayout
+        BaseLayout,
+        AuthenticatedImage
     },
+    data() {
+        return {
+            friendRequests: []
+        }
+    },
+    computed: {
+        ...mapState(['user', 'storage_locations', 'friends', 'groups', 'groupMemberships', 'groupInvites',
+            'active_workflows']),
+        ...mapGetters(['inventory_items']),
+        // Groups hosted here plus GroupMembership-only ones - see Inventory.vue's ownerGroups for the same merge/dedupe.
+        ownerGroups() {
+            const hostedHandles = new Set(this.groups.map(group => group.handle))
+            const foreign = this.groupMemberships.filter(m => !hostedHandles.has(m.handle))
+            return [...this.groups, ...foreign]
+        },
+        recentItems() {
+            return [...this.inventory_items].sort((a, b) => b.id - a.id).slice(0, 8)
+        },
+        hasPendingItems() {
+            return this.active_workflows.length > 0 || this.friendRequests.length > 0 || this.groupInvites.length > 0
+        }
+    },
+    methods: {
+        ...mapActions(['fetchInventoryItems', 'fetchStorageLocations', 'fetchFriends', 'fetchGroups',
+            'fetchGroupMemberships', 'fetchGroupInvites', 'fetchActiveWorkflows', 'fetchFriendRequests']),
+        itemRoute(item) {
+            return {name: 'inventory-detail', params: {handle: encodeHandleForUrl(item.owner_group || item.owner), id: item.id}}
+        },
+        only_images(files) {
+            return files.filter(file => file.mime_type.startsWith("image/"));
+        },
+    },
+    async mounted() {
+        await this.fetchInventoryItems()
+        await this.fetchStorageLocations()
+        await this.fetchFriends()
+        await this.fetchGroups()
+        await this.fetchGroupMemberships()
+        await this.fetchGroupInvites()
+        await this.fetchActiveWorkflows()
+        this.friendRequests = await this.fetchFriendRequests()
+    }
 }
 </script>
 
 <style scoped>
+.stat-card {
+    transition: transform .15s ease-in-out;
+}
 
-</style>
\ No newline at end of file
+.stat-card:hover {
+    transform: translateY(-2px);
+}
+
+.stat-icon {
+    font-size: 1.75rem;
+    color: var(--bs-primary);
+}
+
+.stat-value {
+    font-size: 1.25rem;
+    font-weight: 600;
+    line-height: 1.2;
+}
+
+.stat-label {
+    font-size: .8rem;
+    color: var(--bs-text-3);
+}
+
+.img-preview {
+    object-fit: cover;
+    height: 100px;
+    width: 100%;
+}
+</style>
diff --git a/frontend/src/views/Files.vue b/frontend/src/views/Files.vue
index 5e47f82..83ef4fc 100644
--- a/frontend/src/views/Files.vue
+++ b/frontend/src/views/Files.vue
@@ -9,7 +9,7 @@
                     </div>
                     <div class="card-body">
                         <span v-for="file in only_images(files)" :key="file.id">
-                            <deletable-wrapper @delete="deleteFile(file)">
+                            <deletable-wrapper confirm-message="Delete this file? This cannot be undone." @delete="deleteFile(file)">
                                 <authenticated-image :src="thumbnailPathForHash(file.hash)" :owner="file.owner"
                                                      class="img-thumbnail"/>
                             </deletable-wrapper>
diff --git a/frontend/src/views/Friends.vue b/frontend/src/views/Friends.vue
index 0449131..fb28ab1 100644
--- a/frontend/src/views/Friends.vue
+++ b/frontend/src/views/Friends.vue
@@ -46,10 +46,12 @@
                                             <b-icon-pencil-square></b-icon-pencil-square>
                                             Edit
                                         </a-->
-                                        <a href="#" class="align-middle" @click="tryDropFriend(friend)">
+                                        <guarded-button tag="a" class="align-middle"
+                                                         :confirm-message='`Are you sure you want to remove "${friend.handle}" as a friend?`'
+                                                         @confirm="tryDropFriend(friend)">
                                             <b-icon-trash></b-icon-trash>
                                             Delete
-                                        </a>
+                                        </guarded-button>
                                     </td>
                                 </tr>
                                 </tbody>
@@ -107,6 +109,7 @@ import * as BIcons from "bootstrap-icons-vue";
 import BaseLayout from "@/components/BaseLayout.vue";
 import AuthenticatedImage from "@/components/AuthenticatedImage.vue";
 import UserNameTag from "@/components/UserNameTag.vue";
+import GuardedButton from "@/components/GuardedButton.vue";
 
 export default {
     name: 'Inventory',
@@ -114,6 +117,7 @@ export default {
         BaseLayout,
         AuthenticatedImage,
         UserNameTag,
+        GuardedButton,
         ...BIcons
     },
     data() {
diff --git a/frontend/src/views/GroupDetail.vue b/frontend/src/views/GroupDetail.vue
index e50f6da..67562f0 100644
--- a/frontend/src/views/GroupDetail.vue
+++ b/frontend/src/views/GroupDetail.vue
@@ -40,10 +40,12 @@
                                         <user-name-tag :user="member"/>
                                     </td>
                                     <td class="table-action">
-                                        <a href="#" class="align-middle" @click.prevent="tryRemoveMember(member)">
+                                        <guarded-button tag="a" class="align-middle"
+                                                         :confirm-message='`Are you sure you want to remove "${member.handle}" from ${group.handle}?`'
+                                                         @confirm="tryRemoveMember(member)">
                                             <b-icon-trash></b-icon-trash>
                                             Remove
-                                        </a>
+                                        </guarded-button>
                                     </td>
                                 </tr>
                                 </tbody>
@@ -61,6 +63,7 @@ import {mapActions} from "vuex";
 import * as BIcons from "bootstrap-icons-vue";
 import BaseLayout from "@/components/BaseLayout.vue";
 import UserNameTag from "@/components/UserNameTag.vue";
+import GuardedButton from "@/components/GuardedButton.vue";
 import {decodeHandleFromUrl} from "@/router";
 
 export default {
@@ -68,6 +71,7 @@ export default {
     components: {
         BaseLayout,
         UserNameTag,
+        GuardedButton,
         ...BIcons
     },
     props: {
diff --git a/frontend/src/views/Groups.vue b/frontend/src/views/Groups.vue
index e2bd0d2..e5e3374 100644
--- a/frontend/src/views/Groups.vue
+++ b/frontend/src/views/Groups.vue
@@ -19,7 +19,7 @@
                                             <b-icon-arrow-clockwise></b-icon-arrow-clockwise>
                                             Refresh
                                         </a>
-                                        <router-link to="/groups/new" class="align-middle">
+                                        <router-link :to="{name: 'groups-new'}" class="align-middle">
                                             <b-icon-plus></b-icon-plus>
                                             New group
                                         </router-link>
@@ -29,7 +29,7 @@
                                 <tbody>
                                 <tr v-for="group in allGroups" :key="group.key">
                                     <td>
-                                        <router-link :to="`/groups/${encodeHandleForUrl(group.handle)}`">
+                                        <router-link :to="{name: 'group-detail', params: {handle: encodeHandleForUrl(group.handle)}}">
                                             {{ group.handle }}
                                         </router-link>
                                     </td>
diff --git a/frontend/src/views/Inventory.vue b/frontend/src/views/Inventory.vue
index 6ff5a6c..f8f35a7 100644
--- a/frontend/src/views/Inventory.vue
+++ b/frontend/src/views/Inventory.vue
@@ -23,7 +23,10 @@
                                     <div class="btn-group">
                                         <button class="btn" @click="fetchItemsForOwner">Refresh</button>
                                         <router-link v-if="canEdit" :to="addItemRoute" class="btn btn-primary">Add</router-link>
-                                        <button v-if="layout === 'grid'" @click="layout = 'table'" class="btn">
+                                        <button v-if="layout === 'grid'" @click="layout = 'masonry'" class="btn">
+                                            <b-icon-columns-gap></b-icon-columns-gap>
+                                        </button>
+                                        <button v-else-if="layout === 'masonry'" @click="layout = 'table'" class="btn">
                                             <b-icon-list></b-icon-list>
                                         </button>
                                         <button v-else @click="layout = 'grid'" class="btn">
@@ -55,32 +58,32 @@
                                     </td>
                                     <td class="d-none d-md-table-cell">{{ item.owned_quantity }}</td>
                                     <td class="table-action">
-                                        <router-link v-if="canEdit" :to="`${itemRoute(item)}/edit`">
+                                        <router-link v-if="canEdit" :to="itemEditRoute(item)" title="Edit">
                                             <b-icon-pencil-square></b-icon-pencil-square>
                                         </router-link>
-                                        <a v-if="canEdit" :href="`${itemRoute(item)}/delete`" @click.prevent="tryDeleteItem(item)">
+                                        <guarded-button v-if="canEdit" tag="a" title="Delete"
+                                                         :confirm-message='`Are you sure you want to delete "${item.name}"? This cannot be undone.`'
+                                                         @confirm="tryDeleteItem(item)">
                                             <b-icon-trash></b-icon-trash>
-                                        </a>
+                                        </guarded-button>
                                         <router-link v-if="shortIdLink(item)" :to="shortIdLink(item)">
                                             <b-icon-link></b-icon-link>
                                         </router-link>
-                                        <router-link v-if="printLinkFor(item)" :to="printLinkFor(item)">
+                                        <router-link v-if="printLinkFor(item)" :to="printLinkFor(item)" title="Print Label">
                                             <b-icon-qr-code></b-icon-qr-code>
                                         </router-link>
                                     </td>
                                 </tr>
                                 </tbody>
                             </table>
-                            <div class="card-body" v-else>
-                                <div class="row">
-                                    <div class="col-12 col-md-4 col-lg-3 col-xl-2" v-for="item in items"
-                                         :key="item.id">
+                            <div class="card-body" v-else-if="layout === 'masonry'">
+                                <div class="masonry-grid">
+                                    <div class="masonry-item" v-for="item in items" :key="item.id">
                                         <div class="card">
-                                            <img :src="item.image" class="" :alt="item.image">
                                             <authenticated-image v-if="only_images(item.files).length > 0"
                                                                  :src="only_images(item.files)[0].name"
                                                                  :owner="only_images(item.files)[0].owner"
-                                                                 class="card-img-top img-preview"/>
+                                                                 class="card-img-top img-preview-masonry"/>
                                             <div class="card-body">
                                                 <h5 class="card-title mb-0">
                                                     <router-link :to="itemRoute(item)">
@@ -92,18 +95,66 @@
                                                     <span class="float-right">{{ item.owned_quantity }}</span>
                                                 </div>
                                                 <div class="btn-group">
-                                                    <button v-if="canEdit" class="btn btn-danger btn-sm"
-                                                            @click="tryDeleteItem(item)">Delete
-                                                    </button>
-                                                    <router-link v-if="canEdit" :to="`${itemRoute(item)}/edit`"
-                                                                 class="btn btn-primary btn-sm">Edit
+                                                    <guarded-button v-if="canEdit" class="btn btn-danger btn-sm"
+                                                            title="Delete"
+                                                            :confirm-message='`Are you sure you want to delete "${item.name}"? This cannot be undone.`'
+                                                            @confirm="tryDeleteItem(item)">
+                                                        <b-icon-trash></b-icon-trash>
+                                                    </guarded-button>
+                                                    <router-link v-if="canEdit" :to="itemEditRoute(item)"
+                                                                 class="btn btn-primary btn-sm" title="Edit">
+                                                        <b-icon-pencil-square></b-icon-pencil-square>
                                                     </router-link>
                                                     <router-link v-if="shortIdLink(item)" :to="shortIdLink(item)"
                                                                  class="btn btn-secondary btn-sm">
                                                         <b-icon-link></b-icon-link>
                                                     </router-link>
                                                     <router-link v-if="printLinkFor(item)" :to="printLinkFor(item)"
+                                                                 class="btn btn-secondary btn-sm" title="Print Label">
+                                                        <b-icon-qr-code></b-icon-qr-code>
+                                                    </router-link>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="card-body" v-else>
+                                <div class="row">
+                                    <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2 col-xxl-1 d-flex" v-for="item in items"
+                                         :key="item.id">
+                                        <div class="card w-100 d-flex flex-column">
+                                            <authenticated-image v-if="only_images(item.files).length > 0"
+                                                                 :src="only_images(item.files)[0].name"
+                                                                 :owner="only_images(item.files)[0].owner"
+                                                                 class="card-img-top img-preview-grid"/>
+                                            <div class="card-body d-flex flex-column flex-grow-1">
+                                                <h5 class="card-title mb-0">
+                                                    <router-link :to="itemRoute(item)">
+                                                        {{ item.name }}
+                                                    </router-link></h5>
+                                                <div class="card-text text-black-50">
+                                                    <span class="badge bg-secondary text-white">{{ item.availability_policy }}</span>
+                                                    <span class="badge bg-secondary text-white">{{ item.visibility_policy }}</span>
+                                                    <span class="float-right">{{ item.owned_quantity }}</span>
+                                                </div>
+                                                <div class="btn-group mt-auto">
+                                                    <guarded-button v-if="canEdit" class="btn btn-danger btn-sm"
+                                                            title="Delete"
+                                                            :confirm-message='`Are you sure you want to delete "${item.name}"? This cannot be undone.`'
+                                                            @confirm="tryDeleteItem(item)">
+                                                        <b-icon-trash></b-icon-trash>
+                                                    </guarded-button>
+                                                    <router-link v-if="canEdit" :to="itemEditRoute(item)"
+                                                                 class="btn btn-primary btn-sm" title="Edit">
+                                                        <b-icon-pencil-square></b-icon-pencil-square>
+                                                    </router-link>
+                                                    <router-link v-if="shortIdLink(item)" :to="shortIdLink(item)"
                                                                  class="btn btn-secondary btn-sm">
+                                                        <b-icon-link></b-icon-link>
+                                                    </router-link>
+                                                    <router-link v-if="printLinkFor(item)" :to="printLinkFor(item)"
+                                                                 class="btn btn-secondary btn-sm" title="Print Label">
                                                         <b-icon-qr-code></b-icon-qr-code>
                                                     </router-link>
                                                 </div>
@@ -126,6 +177,7 @@ import {mapActions, mapGetters, mapMutations, mapState} from "vuex";
 import * as BIcons from "bootstrap-icons-vue";
 import BaseLayout from "@/components/BaseLayout.vue";
 import AuthenticatedImage from "../components/AuthenticatedImage.vue";
+import GuardedButton from "@/components/GuardedButton.vue";
 import {shortenedRoute, encodeHandleForUrl, decodeHandleFromUrl} from "@/router";
 
 export default {
@@ -140,6 +192,7 @@ export default {
     components: {
         AuthenticatedImage,
         BaseLayout,
+        GuardedButton,
         ...BIcons
     },
     computed: {
@@ -166,8 +219,8 @@ export default {
                 return this.owner ? decodeHandleFromUrl(this.owner) : this.user
             },
             set(value) {
-                const path = value === this.user ? '/inventory' : `/inventory/${encodeHandleForUrl(value)}`
-                this.$router.replace(path)
+                const params = value === this.user ? {} : {owner: encodeHandleForUrl(value)}
+                this.$router.replace({name: 'inventory', params})
             }
         },
         isGroupSelected() {
@@ -182,9 +235,8 @@ export default {
             return this.selectedOwner === this.user ? this.inventory_items : this.groupInventoryItems(this.selectedOwner)
         },
         addItemRoute() {
-            return this.selectedOwner === this.user
-                ? '/inventory/new'
-                : `/inventory/new/${encodeHandleForUrl(this.selectedOwner)}`
+            const params = this.selectedOwner === this.user ? {} : {group: encodeHandleForUrl(this.selectedOwner)}
+            return {name: 'inventory-new', params}
         }
     },
     methods: {
@@ -203,7 +255,10 @@ export default {
         },
         // Derived from the item's own owner, not the current selection, so the link stays correct if the dropdown changes underneath it.
         itemRoute(item) {
-            return `/inventory/${encodeHandleForUrl(item.owner_group || item.owner)}/${item.id}`
+            return {name: 'inventory-detail', params: {handle: encodeHandleForUrl(item.owner_group || item.owner), id: item.id}}
+        },
+        itemEditRoute(item) {
+            return {name: 'inventory-edit', params: {handle: encodeHandleForUrl(item.owner_group || item.owner), id: item.id}}
         },
         only_images(files) {
             return files.filter(file => file.mime_type.startsWith("image/"));
@@ -225,7 +280,7 @@ export default {
         printLinkFor(item) {
             const userHandle = item.owner || item.owner_group
             if (!userHandle) return null
-            return {path: '/print', query: {kind: 'item', userHandle, id: item.id}}
+            return {name: 'print', query: {kind: 'item', userHandle, id: item.id}}
         },
     },
     watch: {
@@ -244,8 +299,62 @@ export default {
 }
 </script>
 
-<style scoped>
-.img-preview {
+<style scoped lang="scss">
+@import "../scss/breakpoints";
+
+.img-preview-grid {
+    height: 160px;
     object-fit: cover;
 }
+
+.img-preview-masonry {
+    width: 100%;
+    height: auto;
+    object-fit: cover;
+}
+
+.table-action {
+    white-space: nowrap;
+}
+
+.masonry-grid {
+    column-count: 2;
+    column-gap: 1rem;
+}
+
+.masonry-item {
+    break-inside: avoid;
+    margin-bottom: 1rem;
+}
+
+@include media-breakpoint-up(md) {
+    .masonry-grid {
+        column-count: 3;
+    }
+}
+
+@include media-breakpoint-up(lg) {
+    .masonry-grid {
+        column-count: 4;
+    }
+}
+
+@include media-breakpoint-up(xl) {
+    .masonry-grid {
+        column-count: 6;
+    }
+}
+
+@include media-breakpoint-up(xxl) {
+    .masonry-grid {
+        column-count: 12;
+    }
+}
+
+.unguarded.btn-danger,
+.unguarded.btn-danger:hover,
+.unguarded.btn-danger:focus {
+    background-color: orange;
+    border-color: orange;
+}
 </style>
\ No newline at end of file
diff --git a/frontend/src/views/InventoryDetail.vue b/frontend/src/views/InventoryDetail.vue
index ef74770..142c032 100644
--- a/frontend/src/views/InventoryDetail.vue
+++ b/frontend/src/views/InventoryDetail.vue
@@ -41,17 +41,18 @@
                         </div>
                     </div>
                     <div class="card" v-if="canEdit">
-                        <button class="btn btn-primary" @click="$router.push(`/inventory/${handle}/${id}/edit`)">
+                        <button class="btn btn-primary" @click="$router.push({name: 'inventory-edit', params: {handle, id}})">
                             <b-icon-pencil-square></b-icon-pencil-square>
                             Edit
                         </button>
-                        <button type="submit" class="btn btn-danger"
-                                @click="deleteInventoryItem(item).then(() => $router.push(ownerOverviewRoute(item)))">
+                        <guarded-button class="btn btn-danger"
+                                        :confirm-message='`Are you sure you want to delete "${item.name}"? This cannot be undone.`'
+                                        @confirm="tryDeleteItem">
                             <b-icon-trash></b-icon-trash>
                             Delete
-                        </button>
+                        </guarded-button>
                         <button v-if="canPrint" class="btn btn-secondary"
-                                @click="$router.push({path: '/print', query: {kind: 'item', userHandle: decodedHandle, id: id}})">
+                                @click="$router.push({name: 'print', query: {kind: 'item', userHandle: decodedHandle, id: id}})">
                             <b-icon-printer></b-icon-printer>
                             Print label
                         </button>
@@ -68,6 +69,7 @@ import * as BIcons from "bootstrap-icons-vue";
 import BaseLayout from "@/components/BaseLayout.vue";
 import {mapActions, mapGetters, mapState} from "vuex";
 import AuthenticatedImage from "@/components/AuthenticatedImage.vue";
+import GuardedButton from "@/components/GuardedButton.vue";
 import {decodeHandleFromUrl, ownerOverviewRoute} from "@/router";
 
 export default {
@@ -75,6 +77,7 @@ export default {
     components: {
         AuthenticatedImage,
         BaseLayout,
+        GuardedButton,
         ...BIcons
     },
     props: {
@@ -116,6 +119,9 @@ export default {
         ...mapActions(["fetchItemByHandle", "deleteInventoryItem", "fetchGroupMemberships"]),
         async loadItem() {
             this.item = await this.fetchItemByHandle({handle: this.decodedHandle, id: this.id}) || {}
+        },
+        tryDeleteItem() {
+            this.deleteInventoryItem(this.item).then(() => this.$router.push(ownerOverviewRoute(this.item)))
         }
     },
     watch: {
diff --git a/frontend/src/views/Login.vue b/frontend/src/views/Login.vue
index 31bd515..b53830c 100644
--- a/frontend/src/views/Login.vue
+++ b/frontend/src/views/Login.vue
@@ -53,11 +53,11 @@
                                     <div class="text-center">
                                         <p class="mb-0 text-muted">
                                             Don’t have an account?
-                                            <router-link to="/register">Sign up</router-link>
+                                            <router-link :to="{name: 'register'}">Sign up</router-link>
                                         </p>
                                         <p class="mb-0 text-muted">
                                             Connect with existing account?
-                                            <router-link to="/pairing">Pairing</router-link>
+                                            <router-link :to="{name: 'pairing'}">Pairing</router-link>
                                         </p>
                                     </div>
                                 </div>
diff --git a/frontend/src/views/Pairing.vue b/frontend/src/views/Pairing.vue
index f57d2ce..8a88e36 100644
--- a/frontend/src/views/Pairing.vue
+++ b/frontend/src/views/Pairing.vue
@@ -97,11 +97,11 @@
                                     <div class="text-center">
                                         <p class="mb-0 text-muted">
                                             Already have an account?
-                                            <router-link to="/login">Login</router-link>
+                                            <router-link :to="{name: 'login'}">Login</router-link>
                                         </p>
                                         <p class="mb-0 text-muted">
                                             Don’t have an account?
-                                            <router-link to="/register">Sign up</router-link>
+                                            <router-link :to="{name: 'register'}">Sign up</router-link>
                                         </p>
                                     </div>
                                 </div>
diff --git a/frontend/src/views/Register.vue b/frontend/src/views/Register.vue
index ef4cfb2..cb8f164 100644
--- a/frontend/src/views/Register.vue
+++ b/frontend/src/views/Register.vue
@@ -77,11 +77,11 @@
                                     <div class="text-center">
                                         <p class="mb-0 text-muted">
                                             Already have an account?
-                                            <router-link to="/login">Login</router-link>
+                                            <router-link :to="{name: 'login'}">Login</router-link>
                                         </p>
                                         <p class="mb-0 text-muted">
                                             Connect with existing account?
-                                            <router-link to="/pairing">Pairing</router-link>
+                                            <router-link :to="{name: 'pairing'}">Pairing</router-link>
                                         </p>
                                     </div>
                                 </div>
diff --git a/frontend/src/views/Scan.vue b/frontend/src/views/Scan.vue
index 66d6a5f..67411a7 100644
--- a/frontend/src/views/Scan.vue
+++ b/frontend/src/views/Scan.vue
@@ -71,7 +71,7 @@ import {mapActions} from "vuex";
 import BaseLayout from "@/components/BaseLayout.vue";
 import CameraScanner from "@/components/CameraScanner.vue";
 import {encodeHandleForUrl, expandedRoute, OWNED_KIND_FIELDS} from "@/router";
-import {decodeShortId, deserializeShortId, isDomainQualifiedShortId, decodeDomainQualifiedShortId} from "@/short-id";
+import {decodeShortId, deserializeShortId, isDomainQualifiedShortId, decodeDomainQualifiedShortId} from "@/lib/short-id";
 
 const OWNER_QUALIFIED_ID_RE = /^(#?[^\s@:/#+~]+@[^\s@:/#+~]+):([is])(\d+)$/;
 
@@ -101,8 +101,8 @@ function classifyScanText(text) {
         const [, handle, kindLetter, id] = ownerMatch;
         const kind = kindLetter === "s" ? "storage_location" : "item";
         const to = kind === "storage_location"
-            ? `/storage-locations/${encodeHandleForUrl(handle)}/${id}`
-            : `/inventory/${encodeHandleForUrl(handle)}/${id}`;
+            ? {name: 'locations-detail', params: {handle: encodeHandleForUrl(handle), id}}
+            : {name: 'inventory-detail', params: {handle: encodeHandleForUrl(handle), id}};
         return {to, ownerQualifiedId: {handle, kind, id}};
     }
     return null;
diff --git a/frontend/src/views/Search.vue b/frontend/src/views/Search.vue
index 701b3d2..c922b5a 100644
--- a/frontend/src/views/Search.vue
+++ b/frontend/src/views/Search.vue
@@ -112,7 +112,7 @@ export default {
             // user handle - one route shape, no owner-is-me special case.
             this.fetchSearchResults({query: this.query}).then((results) => {
                 this.search_results = results.map(e => (
-                    {...e, route: `/inventory/${encodeHandleForUrl(e.owner)}/${e.id}`}))
+                    {...e, route: {name: 'inventory-detail', params: {handle: encodeHandleForUrl(e.owner), id: e.id}}}))
             });
         }
     },
diff --git a/frontend/src/views/Settings.vue b/frontend/src/views/Settings.vue
index 56b1b70..2402ada 100644
--- a/frontend/src/views/Settings.vue
+++ b/frontend/src/views/Settings.vue
@@ -35,10 +35,11 @@
                                 <router-link class="list-group-item list-group-item-action" :to="{name: 'data'}"
                                              active-class="active">Your data
                                 </router-link>
-                                <a class="list-group-item list-group-item-action delete" @click="deleteAccount"
-                                   href="#">
+                                <guarded-button tag="a" class="list-group-item list-group-item-action delete"
+                                                confirm-message="Are you sure you want to permanently delete your account? All your data will be deleted and you will not be able to log back in. This cannot be undone."
+                                                @confirm="deleteAccount">
                                     Delete account
-                                </a>
+                                </guarded-button>
                             </div>
                         </div>
                     </div>
@@ -55,11 +56,12 @@
 
 <script>
 import BaseLayout from "@/components/BaseLayout.vue";
+import GuardedButton from "@/components/GuardedButton.vue";
 import {mapActions, mapGetters, mapMutations} from "vuex";
 
 export default {
     name: 'Settings',
-    components: {BaseLayout},
+    components: {BaseLayout, GuardedButton},
     data() {
         return {
             deleteError: null,
@@ -74,10 +76,6 @@ export default {
         ...mapMutations(['logout']),
         async deleteAccount() {
             this.deleteError = null;
-            if (!confirm('Are you sure you want to permanently delete your account? ' +
-                'All your data will be deleted and you will not be able to log back in. This cannot be undone.')) {
-                return;
-            }
             try {
                 const servers = await this.getHomeServers();
                 const response = await servers.delete(this.signAuth, '/api/v1/account/');
diff --git a/frontend/src/views/ShortId.vue b/frontend/src/views/ShortId.vue
index 67ff089..f9c84db 100644
--- a/frontend/src/views/ShortId.vue
+++ b/frontend/src/views/ShortId.vue
@@ -71,7 +71,7 @@ import BaseLayout from '@/components/BaseLayout.vue';
 import {
     decodeShortId, deserializeShortId, encodeShortId, serializeShortId,
     isDomainQualifiedShortId, decodeDomainQualifiedShortId
-} from '@/short-id';
+} from '@/lib/short-id';
 import {expandedRoute as buildExpandedRoute, NEEDS_IDMAP, domainQualifiedRoute} from '@/router';
 
 const EXAMPLES = [
diff --git a/frontend/src/views/StorageLocation.vue b/frontend/src/views/StorageLocation.vue
index 27c98b2..3f95356 100644
--- a/frontend/src/views/StorageLocation.vue
+++ b/frontend/src/views/StorageLocation.vue
@@ -20,7 +20,10 @@
                                     <div class="btn-group">
                                         <button class="btn" @click="fetchLocationsForOwner">Refresh</button>
                                         <router-link :to="addLocationRoute" class="btn btn-primary">Add</router-link>
-                                        <button v-if="layout === 'grid'" @click="layout = 'table'" class="btn">
+                                        <button v-if="layout === 'grid'" @click="layout = 'tree'" class="btn">
+                                            <b-icon-list-nested></b-icon-list-nested>
+                                        </button>
+                                        <button v-else-if="layout === 'tree'" @click="layout = 'table'" class="btn">
                                             <b-icon-list></b-icon-list>
                                         </button>
                                         <button v-else @click="layout = 'grid'" class="btn">
@@ -55,28 +58,64 @@
                                         <span class="badge bg-secondary text-white">{{ location.visibility_policy }}</span>
                                     </td>
                                     <td class="table-action">
-                                        <router-link :to="`${locationRoute(location)}/edit`">
+                                        <router-link :to="locationEditRoute(location)" title="Edit">
                                             <b-icon-pencil-square></b-icon-pencil-square>
                                         </router-link>
-                                        <a :href="`${locationRoute(location)}/delete`" @click.prevent="tryDeleteLocation(location)">
+                                        <guarded-button tag="a" title="Delete"
+                                                         :confirm-message='`Are you sure you want to delete "${location.name}"? This cannot be undone.`'
+                                                         @confirm="tryDeleteLocation(location)">
                                             <b-icon-trash></b-icon-trash>
-                                        </a>
+                                        </guarded-button>
                                         <router-link v-if="shortIdLink(location)" :to="shortIdLink(location)">
                                             <b-icon-link></b-icon-link>
                                         </router-link>
-                                        <router-link v-if="printLinkFor(location)" :to="printLinkFor(location)">
+                                        <router-link v-if="printLinkFor(location)" :to="printLinkFor(location)" title="Print Label">
                                             <b-icon-qr-code></b-icon-qr-code>
                                         </router-link>
                                     </td>
                                 </tr>
                                 </tbody>
                             </table>
+                            <div class="card-body" v-else-if="layout === 'tree'">
+                                <TreeView :items="locationTree">
+                                    <template #default="{item: location}">
+                                        <div class="tree-location-row">
+                                            <router-link :to="locationRoute(location)" class="tree-location-name text-truncate">
+                                                {{ location.name }}
+                                            </router-link>
+                                            <span class="tree-location-category">
+                                                <span class="badge bg-info text-white" v-if="location.category">{{ location.category }}</span>
+                                                <span class="text-muted" v-else>-</span>
+                                            </span>
+                                            <span class="tree-location-visibility">
+                                                <span class="badge bg-secondary text-white">{{ location.visibility_policy }}</span>
+                                            </span>
+                                            <div class="tree-location-actions table-action">
+                                                <router-link :to="locationEditRoute(location)" class="me-1" title="Edit">
+                                                    <b-icon-pencil-square></b-icon-pencil-square>
+                                                </router-link>
+                                                <guarded-button tag="a" class="me-1" title="Delete"
+                                                                 :confirm-message='`Are you sure you want to delete "${location.name}"? This cannot be undone.`'
+                                                                 @confirm="tryDeleteLocation(location)">
+                                                    <b-icon-trash></b-icon-trash>
+                                                </guarded-button>
+                                                <router-link v-if="shortIdLink(location)" :to="shortIdLink(location)" class="me-1">
+                                                    <b-icon-link></b-icon-link>
+                                                </router-link>
+                                                <router-link v-if="printLinkFor(location)" :to="printLinkFor(location)" title="Print Label">
+                                                    <b-icon-qr-code></b-icon-qr-code>
+                                                </router-link>
+                                            </div>
+                                        </div>
+                                    </template>
+                                </TreeView>
+                            </div>
                             <div class="card-body" v-else>
                                 <div class="row">
-                                    <div class="col-12 col-md-4 col-lg-3 col-xl-2" v-for="location in locations"
+                                    <div class="col-12 col-md-4 col-lg-3 col-xl-2 col-xxl-1 d-flex" v-for="location in locations"
                                          :key="location.id">
-                                        <div class="card">
-                                            <div class="card-body">
+                                        <div class="card w-100 d-flex flex-column">
+                                            <div class="card-body d-flex flex-column flex-grow-1">
                                                 <h5 class="card-title mb-0">
                                                     <router-link :to="locationRoute(location)">
                                                         {{ location.name }}
@@ -90,19 +129,23 @@
                                                 <div class="card-text" v-if="location.description">
                                                     <small>{{ location.description }}</small>
                                                 </div>
-                                                <div class="btn-group mt-2">
-                                                    <button class="btn btn-danger btn-sm"
-                                                            @click="tryDeleteLocation(location)">Delete
-                                                    </button>
-                                                    <router-link :to="`${locationRoute(location)}/edit`"
-                                                                 class="btn btn-primary btn-sm">Edit
+                                                <div class="btn-group mt-auto">
+                                                    <guarded-button class="btn btn-danger btn-sm"
+                                                            title="Delete"
+                                                            :confirm-message='`Are you sure you want to delete "${location.name}"? This cannot be undone.`'
+                                                            @confirm="tryDeleteLocation(location)">
+                                                        <b-icon-trash></b-icon-trash>
+                                                    </guarded-button>
+                                                    <router-link :to="locationEditRoute(location)"
+                                                                 class="btn btn-primary btn-sm" title="Edit">
+                                                        <b-icon-pencil-square></b-icon-pencil-square>
                                                     </router-link>
                                                     <router-link v-if="shortIdLink(location)" :to="shortIdLink(location)"
                                                                  class="btn btn-secondary btn-sm">
                                                         <b-icon-link></b-icon-link>
                                                     </router-link>
                                                     <router-link v-if="printLinkFor(location)" :to="printLinkFor(location)"
-                                                                 class="btn btn-secondary btn-sm">
+                                                                 class="btn btn-secondary btn-sm" title="Print Label">
                                                         <b-icon-qr-code></b-icon-qr-code>
                                                     </router-link>
                                                 </div>
@@ -124,12 +167,14 @@
 import {mapActions, mapGetters, mapState} from "vuex";
 import * as BIcons from "bootstrap-icons-vue";
 import BaseLayout from "@/components/BaseLayout.vue";
+import GuardedButton from "@/components/GuardedButton.vue";
+import TreeView from "@/components/TreeView.vue";
 import {shortenedRoute, encodeHandleForUrl, decodeHandleFromUrl} from "@/router";
 
 export default {
     name: "StorageLocation",
     props: {
-        // Matches /storage-location/:owner; absent means "me". See docs/implementation.md#owner-filtered-overview-routes-use-path-segments-not-query-strings.
+        // Matches /locations/:owner; absent means "me". See docs/implementation.md#owner-filtered-overview-routes-use-path-segments-not-query-strings.
         owner: {
             type: String,
             default: null
@@ -137,6 +182,8 @@ export default {
     },
     components: {
         BaseLayout,
+        GuardedButton,
+        TreeView,
         ...BIcons
     },
     computed: {
@@ -163,17 +210,31 @@ export default {
                 return this.owner ? decodeHandleFromUrl(this.owner) : this.user
             },
             set(value) {
-                const path = value === this.user ? '/storage-location' : `/storage-location/${encodeHandleForUrl(value)}`
-                this.$router.replace(path)
+                const params = value === this.user ? {} : {owner: encodeHandleForUrl(value)}
+                this.$router.replace({name: 'locations', params})
             }
         },
         locations() {
             return this.selectedOwner === this.user ? this.storage_locations : this.groupStorageLocations(this.selectedOwner)
         },
+        // See docs/implementation.md#category-tree-reconstruction-from-flat-path-strings.
+        locationTree() {
+            const nodesById = {}
+            for (const location of this.locations) {
+                nodesById[location.id] = {...location, children: []}
+            }
+            const roots = []
+            for (const location of [...this.locations].sort((a, b) => a.name.localeCompare(b.name))) {
+                const node = nodesById[location.id]
+                // Falls back to root if the parent isn't in this owner's own location list.
+                const parent = location.parent != null ? nodesById[location.parent] : null
+                ;(parent ? parent.children : roots).push(node)
+            }
+            return roots
+        },
         addLocationRoute() {
-            return this.selectedOwner === this.user
-                ? '/storage-locations/new'
-                : `/storage-locations/new/${encodeHandleForUrl(this.selectedOwner)}`
+            const params = this.selectedOwner === this.user ? {} : {group: encodeHandleForUrl(this.selectedOwner)}
+            return {name: 'locations-new', params}
         }
     },
     methods: {
@@ -190,7 +251,10 @@ export default {
             })
         },
         locationRoute(location) {
-            return `/storage-locations/${encodeHandleForUrl(location.owner_group || location.owner)}/${location.id}`
+            return {name: 'locations-detail', params: {handle: encodeHandleForUrl(location.owner_group || location.owner), id: location.id}}
+        },
+        locationEditRoute(location) {
+            return {name: 'locations-edit', params: {handle: encodeHandleForUrl(location.owner_group || location.owner), id: location.id}}
         },
         shortIdLink(location) {
             if (location.owner_group) {
@@ -208,7 +272,7 @@ export default {
         // printLinkFor. See docs/implementation.md#print-link-shape.
         printLinkFor(location) {
             const userHandle = location.owner_group || location.owner
-            return {path: '/print', query: {kind: 'storage-location', userHandle, id: location.id}}
+            return {name: 'print', query: {kind: 'storage-location', userHandle, id: location.id}}
         },
     },
     watch: {
@@ -230,11 +294,41 @@ export default {
     font-size: 0.8rem;
 }
 
-.btn-group.mt-2 {
+.tree-location-row {
+    display: grid;
+    /* Category/Visibility match the table's 20% th widths; actions is max-content so it never wraps. */
+    grid-template-columns: minmax(0, 1fr) 20% 20% auto;
+    align-items: center;
+    column-gap: 0.5rem;
     width: 100%;
 }
 
-.btn-group.mt-2 .btn {
+.tree-location-name {
+    min-width: 0;
+}
+
+.tree-location-actions {
+    display: flex;
+    align-items: center;
+}
+
+/* The th widths above leave Actions only the leftover 5% - without this it wraps mid-icon. */
+.table-action {
+    white-space: nowrap;
+}
+
+.btn-group.mt-auto {
+    width: 100%;
+}
+
+.btn-group.mt-auto .btn {
     flex: 1;
 }
+
+.unguarded.btn-danger,
+.unguarded.btn-danger:hover,
+.unguarded.btn-danger:focus {
+    background-color: orange;
+    border-color: orange;
+}
 </style>
diff --git a/frontend/src/views/StorageLocationDetail.vue b/frontend/src/views/StorageLocationDetail.vue
index 9c7fb62..c33f834 100644
--- a/frontend/src/views/StorageLocationDetail.vue
+++ b/frontend/src/views/StorageLocationDetail.vue
@@ -34,17 +34,18 @@
                         </div>
                     </div>
                     <div class="card" v-if="canEdit">
-                        <button class="btn btn-primary" @click="$router.push(`/storage-locations/${handle}/${id}/edit`)">
+                        <button class="btn btn-primary" @click="$router.push({name: 'locations-edit', params: {handle, id}})">
                             <b-icon-pencil-square></b-icon-pencil-square>
                             Edit
                         </button>
-                        <button type="submit" class="btn btn-danger"
-                                @click="deleteStorageLocation(location).then(() => $router.push(ownerLocationOverviewRoute(location)))">
+                        <guarded-button class="btn btn-danger"
+                                        :confirm-message='`Are you sure you want to delete "${location.name}"? This cannot be undone.`'
+                                        @confirm="tryDeleteLocation">
                             <b-icon-trash></b-icon-trash>
                             Delete
-                        </button>
+                        </guarded-button>
                         <button class="btn btn-secondary"
-                                @click="$router.push({path: '/print', query: {kind: 'storage-location', userHandle: decodedHandle, id: id}})">
+                                @click="$router.push({name: 'print', query: {kind: 'storage-location', userHandle: decodedHandle, id: id}})">
                             <b-icon-printer></b-icon-printer>
                             Print label
                         </button>
@@ -58,6 +59,7 @@
 <script>
 import * as BIcons from "bootstrap-icons-vue";
 import BaseLayout from "@/components/BaseLayout.vue";
+import GuardedButton from "@/components/GuardedButton.vue";
 import {mapActions, mapGetters, mapState} from "vuex";
 import {decodeHandleFromUrl, ownerLocationOverviewRoute} from "@/router";
 
@@ -65,6 +67,7 @@ export default {
     name: "StorageLocationDetail",
     components: {
         BaseLayout,
+        GuardedButton,
         ...BIcons
     },
     props: {
@@ -103,6 +106,9 @@ export default {
         ...mapActions(["fetchStorageLocationByHandle", "deleteStorageLocation", "fetchGroupMemberships"]),
         async loadLocation() {
             this.location = await this.fetchStorageLocationByHandle({handle: this.decodedHandle, id: this.id}) || {}
+        },
+        tryDeleteLocation() {
+            this.deleteStorageLocation(this.location).then(() => this.$router.push(ownerLocationOverviewRoute(this.location)))
         }
     },
     watch: {
diff --git a/frontend/src/views/StorageLocationNew.vue b/frontend/src/views/StorageLocationNew.vue
index f004bb1..5c2f040 100644
--- a/frontend/src/views/StorageLocationNew.vue
+++ b/frontend/src/views/StorageLocationNew.vue
@@ -81,7 +81,7 @@ export default {
         ...BIcons
     },
     props: {
-        // Matches /storage-locations/new/:group?. See docs/implementation.md#owner-filtered-overview-routes-use-path-segments-not-query-strings.
+        // Matches /locations/new/:group?. See docs/implementation.md#owner-filtered-overview-routes-use-path-segments-not-query-strings.
         group: {
             type: String,
             default: null
diff --git a/frontend/src/views/WorkflowDetail.vue b/frontend/src/views/WorkflowDetail.vue
index c8b5a44..1d05ecf 100644
--- a/frontend/src/views/WorkflowDetail.vue
+++ b/frontend/src/views/WorkflowDetail.vue
@@ -8,7 +8,7 @@
                         <nav aria-label="breadcrumb">
                             <ol class="breadcrumb">
                                 <li class="breadcrumb-item">
-                                    <router-link to="/workflows" class="text-decoration-none">Workflows</router-link>
+                                    <router-link :to="{name: 'workflows'}" class="text-decoration-none">Workflows</router-link>
                                 </li>
                                 <li class="breadcrumb-item active" aria-current="page">{{ workflowDefinition?.title || workflowInstance?.title || 'Loading...' }}</li>
                             </ol>
@@ -19,10 +19,12 @@
                             <b-icon-arrow-left class="me-1"></b-icon-arrow-left>
                             Back
                         </button>
-                        <button v-if="canAbort" class="btn btn-outline-danger" @click="abortWorkflow" :disabled="loading">
+                        <guarded-button v-if="canAbort" class="btn btn-outline-danger"
+                                        :confirm-message='`Are you sure you want to abort "${getWorkflowDisplayName || workflowInstance.title}"?`'
+                                        @confirm="abortWorkflow" :disabled="loading">
                             <b-icon-x-circle class="me-1"></b-icon-x-circle>
                             Abort
-                        </button>
+                        </guarded-button>
                     </div>
                 </div>
 
@@ -199,6 +201,7 @@
 <script>
 import * as BIcons from "bootstrap-icons-vue";
 import BaseLayout from "@/components/BaseLayout.vue";
+import GuardedButton from "@/components/GuardedButton.vue";
 import { mapState, mapActions } from 'vuex';
 import { getWorkflow, getWorkflowComponent } from '@/workflows.js';
 
@@ -206,7 +209,8 @@ export default {
     name: 'WorkflowDetail',
     components: {
         ...BIcons,
-        BaseLayout
+        BaseLayout,
+        GuardedButton
     },
     props: {
         id: {
diff --git a/frontend/src/views/Workflows.vue b/frontend/src/views/Workflows.vue
index d2e8f06..2d53b21 100644
--- a/frontend/src/views/Workflows.vue
+++ b/frontend/src/views/Workflows.vue
@@ -54,11 +54,12 @@
                                                         :disabled="loading">
                                                     <b-icon-eye></b-icon-eye>
                                                 </button>
-                                                <button class="btn btn-sm btn-outline-danger"
-                                                        @click="abortWorkflowInstance(workflow)"
+                                                <guarded-button class="btn btn-sm btn-outline-danger"
+                                                        :confirm-message='`Are you sure you want to abort "${getWorkflowDisplayName(workflow)}"?`'
+                                                        @confirm="abortWorkflowInstance(workflow)"
                                                         :disabled="loading">
                                                     <b-icon-x-circle></b-icon-x-circle>
-                                                </button>
+                                                </guarded-button>
                                             </td>
                                         </tr>
                                         </tbody>
@@ -132,6 +133,7 @@
 <script>
 import * as BIcons from "bootstrap-icons-vue";
 import BaseLayout from "@/components/BaseLayout.vue";
+import GuardedButton from "@/components/GuardedButton.vue";
 import {mapState, mapActions} from 'vuex';
 import {getAllWorkflows, getWorkflow, buildWorkflowApiPayload} from '@/workflows.js';
 
@@ -139,7 +141,8 @@ export default {
     name: 'Workflows',
     components: {
         ...BIcons,
-        BaseLayout
+        BaseLayout,
+        GuardedButton
     },
     data() {
         return {
@@ -264,19 +267,17 @@ export default {
         },
         async abortWorkflowInstance(workflow) {
             const displayName = this.getWorkflowDisplayName(workflow);
-            if (confirm(`Are you sure you want to abort "${displayName}"?`)) {
-                try {
-                    this.loading = true;
-                    this.error = null;
-                    await this.deleteWorkflow(workflow.id);
-                    await this.loadActiveWorkflows();
-                    console.log('Workflow aborted successfully:', displayName);
-                } catch (error) {
-                    console.error('Error aborting workflow:', error);
-                    this.error = `Failed to abort ${displayName}`;
-                } finally {
-                    this.loading = false;
-                }
+            try {
+                this.loading = true;
+                this.error = null;
+                await this.deleteWorkflow(workflow.id);
+                await this.loadActiveWorkflows();
+                console.log('Workflow aborted successfully:', displayName);
+            } catch (error) {
+                console.error('Error aborting workflow:', error);
+                this.error = `Failed to abort ${displayName}`;
+            } finally {
+                this.loading = false;
             }
         }
     }
diff --git a/frontend/src/views/settings/Account.vue b/frontend/src/views/settings/Account.vue
index 36e39a0..d00f77c 100644
--- a/frontend/src/views/settings/Account.vue
+++ b/frontend/src/views/settings/Account.vue
@@ -32,9 +32,11 @@
                                     <fs-file-source @input="uploadPicture">
                                         <span class="btn btn-primary"><i class="fas fa-upload"></i> Upload</span>
                                     </fs-file-source>
-                                    <button class="btn btn-outline-secondary ml-2" type="button" @click="removePicture">
+                                    <guarded-button class="btn btn-outline-secondary ml-2" type="button"
+                                                    confirm-message="Are you sure you want to remove your profile picture?"
+                                                    @confirm="removePicture">
                                         Remove
-                                    </button>
+                                    </guarded-button>
                                 </div>
                                 <small>For best results, use an image at least 128px by
                                     128px in .jpg format</small>
@@ -107,10 +109,11 @@
 import {mapActions, mapState} from "vuex";
 import AuthenticatedImage from "@/components/AuthenticatedImage.vue";
 import FsFileSource from "@/components/inputs/FsFileSource.vue";
+import GuardedButton from "@/components/GuardedButton.vue";
 
 export default {
     name: 'Account',
-    components: {AuthenticatedImage, FsFileSource},
+    components: {AuthenticatedImage, FsFileSource, GuardedButton},
     computed: {
         ...mapState(['user', 'user_profile']),
         profilePictureSrc() {
diff --git a/frontend/src/views/settings/Data.vue b/frontend/src/views/settings/Data.vue
index aac829f..a6d251b 100644
--- a/frontend/src/views/settings/Data.vue
+++ b/frontend/src/views/settings/Data.vue
@@ -37,9 +37,11 @@
                     <div class="mb-3">
                         <label class="form-label
                                                     d-block">Delete your data</label>
-                        <button type="button" class="btn btn-danger" @click="deleteData">
+                        <guarded-button type="button" class="btn btn-danger"
+                                        confirm-message="Are you sure you want to permanently delete all your data (inventory, locations, settings, friends and files)? Your account itself will stay - this cannot be undone."
+                                        @confirm="deleteData">
                             Delete
-                        </button>
+                        </guarded-button>
                         <br>
                         <small>Delete all your data including photos, videos,
                             comments, profile information and more</small>
@@ -78,12 +80,15 @@
 <script>
 import {mapActions, mapGetters} from 'vuex';
 import router from "@/router";
+import GuardedButton from "@/components/GuardedButton.vue";
 
 //import VueQrcode from '@chenfengyuan/vue-qrcode';
 
 export default {
     name: 'Data',
-    components: {},
+    components: {
+        GuardedButton
+    },
     data: () => ({
         selectedFile: null,
         localUserIdentityRecord: null,
@@ -106,10 +111,6 @@ export default {
         async deleteData() {
             this.deleteError = null;
             this.deleteSuccess = null;
-            if (!confirm('Are you sure you want to permanently delete all your data (inventory, locations, ' +
-                'settings, friends and files)? Your account itself will stay - this cannot be undone.')) {
-                return;
-            }
             try {
                 const servers = await this.getHomeServers();
                 const response = await servers.delete(this.signAuth, '/api/v1/account_data/');
diff --git a/frontend/src/workflows.js b/frontend/src/workflows.js
index 0d392f8..3d40211 100644
--- a/frontend/src/workflows.js
+++ b/frontend/src/workflows.js
@@ -6,6 +6,7 @@ import StorageOptimizationWorkflow from '@/components/workflow/workflows/Storage
 import MaintenanceScheduleWorkflow from '@/components/workflow/workflows/MaintenanceScheduleWorkflow.vue';
 import ExpiryCheckWorkflow from '@/components/workflow/workflows/ExpiryCheckWorkflow.vue';
 import BackupRestoreWorkflow from '@/components/workflow/workflows/BackupRestoreWorkflow.vue';
+//import BulkLabelPrintWorkflow from '@/components/workflow/workflows/BulkLabelPrintWorkflow.vue';
 
 const workflows = [
     {...FotoFirstBulkImportWorkflow.meta, component: FotoFirstBulkImportWorkflow},
@@ -15,6 +16,7 @@ const workflows = [
     {...MaintenanceScheduleWorkflow.meta, component: MaintenanceScheduleWorkflow},
     {...ExpiryCheckWorkflow.meta, component: ExpiryCheckWorkflow},
     {...BackupRestoreWorkflow.meta, component: BackupRestoreWorkflow},
+ //   {...BulkLabelPrintWorkflow.meta, component: BulkLabelPrintWorkflow},
 ];
 
 export function getAllWorkflows() {
diff --git a/testdata/avatars/avatar-2.png b/testdata/avatars/avatar-2.png
new file mode 100644
index 0000000..9eb3ec9
Binary files /dev/null and b/testdata/avatars/avatar-2.png differ
diff --git a/testdata/avatars/avatar-3.png b/testdata/avatars/avatar-3.png
new file mode 100644
index 0000000..a0dbc96
Binary files /dev/null and b/testdata/avatars/avatar-3.png differ
diff --git a/testdata/avatars/avatar-4.png b/testdata/avatars/avatar-4.png
new file mode 100644
index 0000000..de75ef6
Binary files /dev/null and b/testdata/avatars/avatar-4.png differ
diff --git a/testdata/avatars/avatar-5.png b/testdata/avatars/avatar-5.png
new file mode 100644
index 0000000..40d595e
Binary files /dev/null and b/testdata/avatars/avatar-5.png differ
diff --git a/testdata/avatars/avatar-6.png b/testdata/avatars/avatar-6.png
new file mode 100644
index 0000000..bc8577c
Binary files /dev/null and b/testdata/avatars/avatar-6.png differ
diff --git a/testdata/avatars/avatar.png b/testdata/avatars/avatar.png
new file mode 100644
index 0000000..894246c
Binary files /dev/null and b/testdata/avatars/avatar.png differ
diff --git a/testdata/generate_testdata.py b/testdata/generate_testdata.py
index 05379fd..1191a26 100644
--- a/testdata/generate_testdata.py
+++ b/testdata/generate_testdata.py
@@ -8,6 +8,7 @@ who are friends with each other.
 import csv
 import io
 import json
+import mimetypes
 import os
 import random
 import zipfile
@@ -15,6 +16,10 @@ from hashlib import sha256
 from nacl.signing import SigningKey
 from nacl.encoding import HexEncoder
 
+IMGS_DIR = os.path.join(os.path.dirname(__file__), 'imgs')
+AVATARS_DIR = os.path.join(os.path.dirname(__file__), 'avatars')
+IMAGE_ATTACHMENT_PROBABILITY = 0.9
+
 
 # Realistic item database with shared_data category/tag references using fully qualified handles
 # Format: (name, category_handle, tags_handles, policy, description, qty, properties_list)
@@ -250,6 +255,31 @@ def load_shared_data():
     return all_tags, all_categories, all_properties
 
 
+def _load_images_from_dir(directory):
+    """Read every image file in the given directory and return a list of (data, mime_type) tuples."""
+    images = []
+    for filename in sorted(os.listdir(directory)):
+        filepath = os.path.join(directory, filename)
+        if not os.path.isfile(filepath):
+            continue
+        mime_type, _ = mimetypes.guess_type(filename)
+        if not mime_type:
+            continue
+        with open(filepath, 'rb') as f:
+            images.append((f.read(), mime_type))
+    return images
+
+
+def load_available_images():
+    """Read every file in imgs/ and return a list of (data, mime_type) tuples."""
+    return _load_images_from_dir(IMGS_DIR)
+
+
+def load_available_avatars():
+    """Read every file in avatars/ and return a list of (data, mime_type) tuples."""
+    return _load_images_from_dir(AVATARS_DIR)
+
+
 def generate_keypair():
     """Generate a signing key pair and return (hex_private_key, hex_public_key)."""
     signing_key = SigningKey.generate()
@@ -258,6 +288,18 @@ def generate_keypair():
     return private_hex, public_hex
 
 
+def load_or_generate_keypair(key_path):
+    """Return (hex_private_key, hex_public_key), reusing the key at key_path if it already
+    exists instead of generating (and thereby invalidating) a new identity."""
+    if os.path.exists(key_path):
+        with open(key_path, 'r') as f:
+            private_hex = f.read().strip()
+        signing_key = SigningKey(private_hex.encode('utf-8'), encoder=HexEncoder)
+        public_hex = signing_key.verify_key.encode(encoder=HexEncoder).decode('utf-8')
+        return private_hex, public_hex
+    return generate_keypair()
+
+
 def generate_locations_csv(count):
     """Generate a realistic locations.csv with varied storage locations and parent-child relationships."""
     locations = random.sample(LOCATIONS_DATABASE, min(count, len(LOCATIONS_DATABASE)))
@@ -341,7 +383,7 @@ def _quote_value_if_needed(value):
     return value
 
 
-def generate_inventory_csv(count, num_locations, location_id_map, item_range=None):
+def generate_inventory_csv(count, num_locations, location_id_map, item_range=None, available_images=None):
     """Generate a realistic inventory.csv with varied items using shared_data references and properties.
 
     Args:
@@ -349,6 +391,12 @@ def generate_inventory_csv(count, num_locations, location_id_map, item_range=Non
         num_locations: Number of locations
         location_id_map: Map of location names to IDs
         item_range: Tuple of (start_idx, end_idx) to partition the ITEMS_DATABASE, or None for all items
+        available_images: List of (data, mime_type) tuples to randomly attach to items, or None to skip
+
+    Returns:
+        Tuple of (inventory_csv_bytes, files) where files maps a zip arcname (matching
+        `toolshed.offlinedata.inventory_files()`'s 'files/<hash><ext>' convention) to file bytes,
+        for every image actually referenced by an item.
     """
     # Get location names from the map
     location_names = list(location_id_map.keys())
@@ -365,6 +413,7 @@ def generate_inventory_csv(count, num_locations, location_id_map, item_range=Non
     selected_items = random.sample(available_items, min(count, len(available_items)))
 
     rows = []
+    files = {}
     for i, item_tuple in enumerate(selected_items, 1):
         # Handle both old format (6 elements) and new format (7 elements with properties)
         if len(item_tuple) == 7:
@@ -382,6 +431,16 @@ def generate_inventory_csv(count, num_locations, location_id_map, item_range=Non
         properties_str = ', '.join(
             f"{prop_handle}={_quote_value_if_needed(value)}" for prop_handle, value in properties_list)
 
+        # Attach a random image to most items, matching `toolshed.offlinedata.inventory_files()`'s
+        # 'files/<hash><ext>' arcname convention so the import side resolves it as the same file.
+        files_str = ''
+        if available_images and random.random() < IMAGE_ATTACHMENT_PROBABILITY:
+            data, mime_type = random.choice(available_images)
+            extension = mimetypes.guess_extension(mime_type) or ''
+            arcname = f'files/{sha256(data).hexdigest()}{extension}'
+            files[arcname] = data
+            files_str = arcname
+
         rows.append({
             'id': str(i),
             'name': name,
@@ -393,7 +452,7 @@ def generate_inventory_csv(count, num_locations, location_id_map, item_range=Non
             'storage_location': location,
             'tags': ', '.join(tags_for_item),
             'properties': properties_str,
-            'files': '',
+            'files': files_str,
             'created_at': '2026-08-01T00:00:00+00:00',
         })
 
@@ -403,7 +462,25 @@ def generate_inventory_csv(count, num_locations, location_id_map, item_range=Non
     writer = csv.DictWriter(output, fieldnames=fieldnames)
     writer.writeheader()
     writer.writerows(rows)
-    return output.getvalue().encode('utf-8')
+    return output.getvalue().encode('utf-8'), files
+
+
+def generate_profile_data(username, domain, first_name, last_name, avatar_data, avatar_mime_type):
+    """Build profile.json content and the (arcname, data) for its picture, matching
+    `toolshed.offlinedata.profile_data()`/`profile_picture_files()`'s 'files/<hash><ext>' convention.
+    """
+    extension = mimetypes.guess_extension(avatar_mime_type) or ''
+    arcname = f'files/{sha256(avatar_data).hexdigest()}{extension}'
+
+    profile = {
+        'username': username,
+        'domain': domain,
+        'email': f'{username}@{domain}',
+        'first_name': first_name,
+        'last_name': last_name,
+        'profile_picture': arcname,
+    }
+    return json.dumps(profile, indent=2).encode('utf-8'), arcname
 
 
 def generate_sample_files():
@@ -422,7 +499,8 @@ def generate_sample_files():
 
 
 def generate_export_zip(username, domain, friend_username, friend_domain, friend_public_key,
-                       num_locations=10, num_items=150, item_range=None):
+                       num_locations=10, num_items=150, item_range=None,
+                       first_name='', last_name='', avatar=None):
     """Generate a zip file (bytes) like user_data() produces.
 
     Args:
@@ -434,6 +512,9 @@ def generate_export_zip(username, domain, friend_username, friend_domain, friend
         num_locations: Number of locations to generate
         num_items: Number of items to generate
         item_range: Tuple of (start_idx, end_idx) to partition the ITEMS_DATABASE, or None for all items
+        first_name: First name for profile.json
+        last_name: Last name for profile.json
+        avatar: (data, mime_type) tuple for the profile picture, or None to skip profile.json
     """
     num_locations = max(5, min(20, num_locations))
     num_items = max(100, min(200, num_items))
@@ -447,13 +528,25 @@ def generate_export_zip(username, domain, friend_username, friend_domain, friend
         friends_csv = generate_friends_csv(friend_username, friend_domain, friend_public_key)
         zip_file.writestr('friends.csv', friends_csv)
 
-        inventory_csv = generate_inventory_csv(num_items, num_locations, location_id_map, item_range)
+        available_images = load_available_images()
+        inventory_csv, item_files = generate_inventory_csv(
+            num_items, num_locations, location_id_map, item_range, available_images)
         zip_file.writestr('inventory.csv', inventory_csv)
 
+        for arcname, content in item_files.items():
+            zip_file.writestr(arcname, content)
+
         sample_files = generate_sample_files()
         for arcname, content in sample_files.items():
             zip_file.writestr(arcname, content)
 
+        if avatar:
+            avatar_data, avatar_mime_type = avatar
+            profile_json, avatar_arcname = generate_profile_data(
+                username, domain, first_name, last_name, avatar_data, avatar_mime_type)
+            zip_file.writestr('profile.json', profile_json)
+            zip_file.writestr(avatar_arcname, avatar_data)
+
     return zip_buffer.getvalue()
 
 
@@ -465,20 +558,30 @@ def main():
     all_tags, all_categories, all_properties = load_shared_data()
     print(f"  ✓ Loaded {len(all_tags)} tags, {len(all_categories)} categories, and {len(all_properties)} properties")
 
-    print("\nGenerating keypairs...")
-    user_a_private, user_a_public = generate_keypair()
-    user_b_private, user_b_public = generate_keypair()
+    print("\nLoading/generating keypairs...")
+    user_a_key_path = os.path.join(script_dir, 'user-a.key')
+    user_b_key_path = os.path.join(script_dir, 'user-b.key')
+    user_a_existed = os.path.exists(user_a_key_path)
+    user_b_existed = os.path.exists(user_b_key_path)
+    user_a_private, user_a_public = load_or_generate_keypair(user_a_key_path)
+    user_b_private, user_b_public = load_or_generate_keypair(user_b_key_path)
 
-    print(f"  user-a@a.localhost: {user_a_private[:16]}...{user_a_private[-16:]}")
-    print(f"  user-b@b.localhost: {user_b_private[:16]}...{user_b_private[-16:]}")
+    print(f"  test_a@a.localhost: {user_a_private[:16]}...{user_a_private[-16:]}")
+    print(f"  test_b@b.localhost: {user_b_private[:16]}...{user_b_private[-16:]}")
 
     print("\nWriting key files...")
-    with open(os.path.join(script_dir, 'user-a.key'), 'w') as f:
-        f.write(user_a_private)
-    with open(os.path.join(script_dir, 'user-b.key'), 'w') as f:
-        f.write(user_b_private)
-    print("  ✓ user-a.key")
-    print("  ✓ user-b.key")
+    if user_a_existed:
+        print("  ✓ user-a.key (reused existing)")
+    else:
+        with open(user_a_key_path, 'w') as f:
+            f.write(user_a_private)
+        print("  ✓ user-a.key (generated)")
+    if user_b_existed:
+        print("  ✓ user-b.key (reused existing)")
+    else:
+        with open(user_b_key_path, 'w') as f:
+            f.write(user_b_private)
+        print("  ✓ user-b.key (generated)")
 
     print("\nGenerating realistic export zips with partitioned items...")
     # Partition the ITEMS_DATABASE randomly
@@ -490,13 +593,21 @@ def main():
     print(f"  User A items: {user_a_item_range[0]}-{user_a_item_range[1]} ({user_a_item_range[1] - user_a_item_range[0] + 1} unique items)")
     print(f"  User B items: {user_b_item_range[0]}-{user_b_item_range[1]} ({user_b_item_range[1] - user_b_item_range[0] + 1} unique items)")
 
+    available_avatars = load_available_avatars()
+    if len(available_avatars) >= 2:
+        user_a_avatar, user_b_avatar = random.sample(available_avatars, 2)
+    else:
+        user_a_avatar = user_b_avatar = available_avatars[0] if available_avatars else None
+
     user_a_zip = generate_export_zip(
-        'user-a', 'a.localhost', 'user-b', 'b.localhost', user_b_public,
-        num_locations=12, num_items=175, item_range=user_a_item_range
+        'test_a', 'a.localhost', 'test_b', 'b.localhost', user_b_public,
+        num_locations=12, num_items=175, item_range=user_a_item_range,
+        first_name='Alice', last_name='Anderson', avatar=user_a_avatar
     )
     user_b_zip = generate_export_zip(
-        'user-b', 'b.localhost', 'user-a', 'a.localhost', user_a_public,
-        num_locations=8, num_items=140, item_range=user_b_item_range
+        'test_b', 'b.localhost', 'test_a', 'a.localhost', user_a_public,
+        num_locations=8, num_items=140, item_range=user_b_item_range,
+        first_name='Bob', last_name='Baker', avatar=user_b_avatar
     )
 
     with open(os.path.join(script_dir, 'user-a.zip'), 'wb') as f:
diff --git a/testdata/imgs/1-600x800.png b/testdata/imgs/1-600x800.png
new file mode 100644
index 0000000..7f9fabd
Binary files /dev/null and b/testdata/imgs/1-600x800.png differ
diff --git a/testdata/imgs/1-800x600.png b/testdata/imgs/1-800x600.png
new file mode 100644
index 0000000..b16a67b
Binary files /dev/null and b/testdata/imgs/1-800x600.png differ
diff --git a/testdata/imgs/1.png b/testdata/imgs/1.png
new file mode 100644
index 0000000..6973dc1
Binary files /dev/null and b/testdata/imgs/1.png differ
diff --git a/testdata/imgs/10-600x800.png b/testdata/imgs/10-600x800.png
new file mode 100644
index 0000000..c56d492
Binary files /dev/null and b/testdata/imgs/10-600x800.png differ
diff --git a/testdata/imgs/10-800x600.png b/testdata/imgs/10-800x600.png
new file mode 100644
index 0000000..c0a99a3
Binary files /dev/null and b/testdata/imgs/10-800x600.png differ
diff --git a/testdata/imgs/10.png b/testdata/imgs/10.png
new file mode 100644
index 0000000..b22748c
Binary files /dev/null and b/testdata/imgs/10.png differ
diff --git a/testdata/imgs/2-600x800.png b/testdata/imgs/2-600x800.png
new file mode 100644
index 0000000..cc9254b
Binary files /dev/null and b/testdata/imgs/2-600x800.png differ
diff --git a/testdata/imgs/2-800x600.png b/testdata/imgs/2-800x600.png
new file mode 100644
index 0000000..22ae907
Binary files /dev/null and b/testdata/imgs/2-800x600.png differ
diff --git a/testdata/imgs/2.png b/testdata/imgs/2.png
new file mode 100644
index 0000000..247906b
Binary files /dev/null and b/testdata/imgs/2.png differ
diff --git a/testdata/imgs/3-600x800.png b/testdata/imgs/3-600x800.png
new file mode 100644
index 0000000..6bb4679
Binary files /dev/null and b/testdata/imgs/3-600x800.png differ
diff --git a/testdata/imgs/3-800x600.png b/testdata/imgs/3-800x600.png
new file mode 100644
index 0000000..b6a4c0c
Binary files /dev/null and b/testdata/imgs/3-800x600.png differ
diff --git a/testdata/imgs/3.png b/testdata/imgs/3.png
new file mode 100644
index 0000000..b1c63eb
Binary files /dev/null and b/testdata/imgs/3.png differ
diff --git a/testdata/imgs/4-600x800.png b/testdata/imgs/4-600x800.png
new file mode 100644
index 0000000..e5092dd
Binary files /dev/null and b/testdata/imgs/4-600x800.png differ
diff --git a/testdata/imgs/4-800x600.png b/testdata/imgs/4-800x600.png
new file mode 100644
index 0000000..a13e6a0
Binary files /dev/null and b/testdata/imgs/4-800x600.png differ
diff --git a/testdata/imgs/4.png b/testdata/imgs/4.png
new file mode 100644
index 0000000..254b429
Binary files /dev/null and b/testdata/imgs/4.png differ
diff --git a/testdata/imgs/5-600x800.png b/testdata/imgs/5-600x800.png
new file mode 100644
index 0000000..6a79f21
Binary files /dev/null and b/testdata/imgs/5-600x800.png differ
diff --git a/testdata/imgs/5-800x600.png b/testdata/imgs/5-800x600.png
new file mode 100644
index 0000000..3c19632
Binary files /dev/null and b/testdata/imgs/5-800x600.png differ
diff --git a/testdata/imgs/5.png b/testdata/imgs/5.png
new file mode 100644
index 0000000..96c289b
Binary files /dev/null and b/testdata/imgs/5.png differ
diff --git a/testdata/imgs/6-600x800.png b/testdata/imgs/6-600x800.png
new file mode 100644
index 0000000..0097ef0
Binary files /dev/null and b/testdata/imgs/6-600x800.png differ
diff --git a/testdata/imgs/6-800x600.png b/testdata/imgs/6-800x600.png
new file mode 100644
index 0000000..dfa3d03
Binary files /dev/null and b/testdata/imgs/6-800x600.png differ
diff --git a/testdata/imgs/6.png b/testdata/imgs/6.png
new file mode 100644
index 0000000..9d5a320
Binary files /dev/null and b/testdata/imgs/6.png differ
diff --git a/testdata/imgs/7-600x800.png b/testdata/imgs/7-600x800.png
new file mode 100644
index 0000000..10d1355
Binary files /dev/null and b/testdata/imgs/7-600x800.png differ
diff --git a/testdata/imgs/7-800x600.png b/testdata/imgs/7-800x600.png
new file mode 100644
index 0000000..b96e0e7
Binary files /dev/null and b/testdata/imgs/7-800x600.png differ
diff --git a/testdata/imgs/7.png b/testdata/imgs/7.png
new file mode 100644
index 0000000..4ab1e72
Binary files /dev/null and b/testdata/imgs/7.png differ
diff --git a/testdata/imgs/8-600x800.png b/testdata/imgs/8-600x800.png
new file mode 100644
index 0000000..a9efac7
Binary files /dev/null and b/testdata/imgs/8-600x800.png differ
diff --git a/testdata/imgs/8-800x600.png b/testdata/imgs/8-800x600.png
new file mode 100644
index 0000000..d04f4d5
Binary files /dev/null and b/testdata/imgs/8-800x600.png differ
diff --git a/testdata/imgs/8.png b/testdata/imgs/8.png
new file mode 100644
index 0000000..06b1771
Binary files /dev/null and b/testdata/imgs/8.png differ
diff --git a/testdata/imgs/9-600x800.png b/testdata/imgs/9-600x800.png
new file mode 100644
index 0000000..381ed10
Binary files /dev/null and b/testdata/imgs/9-600x800.png differ
diff --git a/testdata/imgs/9-800x600.png b/testdata/imgs/9-800x600.png
new file mode 100644
index 0000000..5f2a60e
Binary files /dev/null and b/testdata/imgs/9-800x600.png differ
diff --git a/testdata/imgs/9.png b/testdata/imgs/9.png
new file mode 100644
index 0000000..f8fd0be
Binary files /dev/null and b/testdata/imgs/9.png differ
diff --git a/testdata/imgs/unsplash-1.jpg b/testdata/imgs/unsplash-1.jpg
new file mode 100644
index 0000000..ccc3963
Binary files /dev/null and b/testdata/imgs/unsplash-1.jpg differ
diff --git a/testdata/imgs/unsplash-2.jpg b/testdata/imgs/unsplash-2.jpg
new file mode 100644
index 0000000..3a33349
Binary files /dev/null and b/testdata/imgs/unsplash-2.jpg differ
diff --git a/testdata/imgs/unsplash-3.jpg b/testdata/imgs/unsplash-3.jpg
new file mode 100644
index 0000000..bc287e5
Binary files /dev/null and b/testdata/imgs/unsplash-3.jpg differ
diff --git a/testdata/user-a.key b/testdata/user-a.key
index 3e949af..af2a12d 100644
--- a/testdata/user-a.key
+++ b/testdata/user-a.key
@@ -1 +1 @@
-795e884532881938a1b03e37731443f4d1974327dafd5d508e0cb00cb0b161b6
\ No newline at end of file
+53da21dc8bf556e45b906bc9f1cd22688b29efb2e575c8fb8353199a93553d4b
\ No newline at end of file
diff --git a/testdata/user-a.zip b/testdata/user-a.zip
index 643c04b..7af8e6c 100644
Binary files a/testdata/user-a.zip and b/testdata/user-a.zip differ
diff --git a/testdata/user-b.key b/testdata/user-b.key
index 0c3cf94..aa0f0cc 100644
--- a/testdata/user-b.key
+++ b/testdata/user-b.key
@@ -1 +1 @@
-d011fedc3ba733baef6aa7550bbee47db66c2ad3dbfb0f6dcc14c984866df5eb
\ No newline at end of file
+8ed48f39bd054d88124d7b2ae4529a3da692b131194bd26da2bf5ede612baea9
\ No newline at end of file
diff --git a/testdata/user-b.zip b/testdata/user-b.zip
index 1dfe28f..8c1279c 100644
Binary files a/testdata/user-b.zip and b/testdata/user-b.zip differ