diff --git a/src/lib/components/Modal.svelte b/src/lib/components/Modal.svelte
index 99558c69..176e6117 100644
--- a/src/lib/components/Modal.svelte
+++ b/src/lib/components/Modal.svelte
@@ -2,13 +2,27 @@
   let {
     open = $bindable(false),
     children,
+    variant = 'default',
     class: className = ''
   }: {
     open: boolean;
     children: import('svelte').Snippet;
+    /**
+     * - `default` — DaisyUI's centred `modal`, paired with a `modal-box` child.
+     * - `fullscreen` — edge-to-edge sheet; the child owns the whole viewport.
+     */
+    variant?: 'default' | 'fullscreen';
+    /** Extra classes, appended to the variant's own. */
     class?: string;
   } = $props();
 
+  const variantClass = {
+    default: 'modal',
+    fullscreen: 'bg-base-100 fixed inset-0 z-40 size-full max-h-full max-w-full p-0'
+  } as const;
+
+  const dialogClass = $derived(`${variantClass[variant]} ${className}`.trim());
+
   let dialogEl = $state<HTMLDialogElement | undefined>(undefined);
 
   // Sync the `open` prop with the native <dialog> open/close state.
@@ -34,7 +48,12 @@
   }
 </script>
 
-<dialog bind:this={dialogEl} class={className} onclose={handleClose} onclick={handleBackdropClick}>
+<dialog
+  bind:this={dialogEl}
+  class={dialogClass}
+  onclose={handleClose}
+  onclick={handleBackdropClick}
+>
   {#if open}
     {@render children()}
   {/if}
diff --git a/src/lib/components/TabBar.svelte b/src/lib/components/TabBar.svelte
index d7f9e351..8c61e616 100644
--- a/src/lib/components/TabBar.svelte
+++ b/src/lib/components/TabBar.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
   import * as m from '$lib/paraglide/messages.js';
+  import IconClose from 'virtual:icons/material-symbols/close';
+  import IconAdd from 'virtual:icons/material-symbols/add';
 
   interface TabItem {
     id: string;
@@ -177,16 +179,7 @@
             aria-label={m.trino_tab_close({ name: item.label })}
             onclick={() => onClose?.(item.id)}
           >
-            <svg
-              class="h-3 w-3"
-              aria-hidden="true"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"><path d="M18 6 6 18" /><path d="m6 6 12 12" /></svg
-            >
+            <IconClose class="h-3 w-3" aria-hidden="true" />
           </button>
         {/if}
       </div>
@@ -203,16 +196,7 @@
         requestAnimationFrame(() => focusTab(activeId));
       }}
     >
-      <svg
-        class="h-4 w-4"
-        aria-hidden="true"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"><path d="M12 5v14" /><path d="M5 12h14" /></svg
-      >
+      <IconAdd class="h-4 w-4" aria-hidden="true" />
     </button>
   {/if}
 </div>
diff --git a/src/lib/components/catalog/CatalogBrowser.svelte b/src/lib/components/catalog/CatalogBrowser.svelte
index 4ce670a5..3eadf305 100644
--- a/src/lib/components/catalog/CatalogBrowser.svelte
+++ b/src/lib/components/catalog/CatalogBrowser.svelte
@@ -2,6 +2,7 @@
   import { untrack } from 'svelte';
   import { SvelteSet } from 'svelte/reactivity';
   import * as m from '$lib/paraglide/messages.js';
+  import IconRefresh from 'virtual:icons/material-symbols/refresh';
   import CatalogTree from './CatalogTree.svelte';
   import type { TreeNode } from './types.js';
 
@@ -267,19 +268,7 @@
       onclick={handleRefresh}
       disabled={catalogsLoading}
     >
-      <svg
-        class="h-3.5 w-3.5"
-        aria-hidden="true"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      >
-        <path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8" />
-        <path d="M21 3v5h-5" />
-      </svg>
+      <IconRefresh class="h-3.5 w-3.5" aria-hidden="true" />
     </button>
   </div>
   <div class="min-h-0 flex-1 overflow-auto p-2">
diff --git a/src/lib/components/catalog/CatalogTree.svelte b/src/lib/components/catalog/CatalogTree.svelte
index 68f05977..cf82a7fc 100644
--- a/src/lib/components/catalog/CatalogTree.svelte
+++ b/src/lib/components/catalog/CatalogTree.svelte
@@ -1,5 +1,12 @@
 <script lang="ts">
   import * as m from '$lib/paraglide/messages.js';
+  import IconChevronRight from 'virtual:icons/material-symbols/chevron-right';
+  import IconCatalog from 'virtual:icons/material-symbols/database-outline';
+  import IconSchema from 'virtual:icons/material-symbols/folder-outline';
+  import IconTable from 'virtual:icons/material-symbols/table-outline';
+  import IconView from 'virtual:icons/material-symbols/visibility-outline';
+  import IconMaterializedView from 'virtual:icons/material-symbols/preview-outline';
+  import IconColumn from 'virtual:icons/material-symbols/circle';
   import type { TreeNode } from './types.js';
   import CatalogTree from './CatalogTree.svelte';
 
@@ -51,110 +58,25 @@
 </script>
 
 {#snippet chevronIcon(isOpen: boolean)}
-  <svg
+  <IconChevronRight
     class="h-3.5 w-3.5 shrink-0 transition-transform duration-150 {isOpen ? 'rotate-90' : ''}"
     aria-hidden="true"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    stroke-width="2"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-  >
-    <path d="m9 5 7 7-7 7" />
-  </svg>
+  />
 {/snippet}
 
 {#snippet nodeIcon(type: string)}
   {#if type === 'catalog'}
-    <svg
-      class="text-base-content/50 h-4 w-4 shrink-0"
-      aria-hidden="true"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      stroke-width="1.5"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    >
-      <ellipse cx="12" cy="5" rx="9" ry="3" />
-      <path d="M3 5v14c0 1.66 4.03 3 9 3s9-1.34 9-3V5" />
-      <path d="M3 12c0 1.66 4.03 3 9 3s9-1.34 9-3" />
-    </svg>
+    <IconCatalog class="text-base-content/50 h-4 w-4 shrink-0" aria-hidden="true" />
   {:else if type === 'schema'}
-    <svg
-      class="text-base-content/50 h-4 w-4 shrink-0"
-      aria-hidden="true"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      stroke-width="1.5"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    >
-      <path
-        d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"
-      />
-    </svg>
+    <IconSchema class="text-base-content/50 h-4 w-4 shrink-0" aria-hidden="true" />
   {:else if type === 'table'}
-    <svg
-      class="text-base-content/50 h-4 w-4 shrink-0"
-      aria-hidden="true"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      stroke-width="1.5"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    >
-      <rect x="3" y="3" width="18" height="18" rx="2" />
-      <path d="M3 9h18" />
-      <path d="M3 15h18" />
-      <path d="M9 3v18" />
-    </svg>
+    <IconTable class="text-base-content/50 h-4 w-4 shrink-0" aria-hidden="true" />
   {:else if type === 'view'}
-    <svg
-      class="text-base-content/50 h-4 w-4 shrink-0"
-      aria-hidden="true"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      stroke-width="1.5"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    >
-      <path
-        d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"
-      />
-      <circle cx="12" cy="12" r="3" />
-    </svg>
+    <IconView class="text-base-content/50 h-4 w-4 shrink-0" aria-hidden="true" />
   {:else if type === 'materialized_view'}
-    <svg
-      class="text-base-content/50 h-4 w-4 shrink-0"
-      aria-hidden="true"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      stroke-width="1.5"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    >
-      <path
-        d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"
-      />
-      <circle cx="12" cy="12" r="3" />
-      <path d="M12 2v4" />
-      <path d="M12 18v4" />
-    </svg>
+    <IconMaterializedView class="text-base-content/50 h-4 w-4 shrink-0" aria-hidden="true" />
   {:else}
-    <svg
-      class="text-base-content/40 h-3 w-3 shrink-0"
-      aria-hidden="true"
-      viewBox="0 0 24 24"
-      fill="currentColor"
-    >
-      <circle cx="12" cy="12" r="4" />
-    </svg>
+    <IconColumn class="text-base-content/40 h-3 w-3 shrink-0" aria-hidden="true" />
   {/if}
 {/snippet}
 
diff --git a/src/lib/components/storage/DeleteConnectionModal.svelte b/src/lib/components/storage/DeleteConnectionModal.svelte
index 39d33390..cb12e98e 100644
--- a/src/lib/components/storage/DeleteConnectionModal.svelte
+++ b/src/lib/components/storage/DeleteConnectionModal.svelte
@@ -4,6 +4,7 @@
   import Modal from '$lib/components/Modal.svelte';
   import * as m from '$lib/paraglide/messages.js';
   import type { SavedConnection } from '$lib/storage/connection-storage.js';
+  import { connectionLabel } from '$lib/storage/display-helpers.js';
 
   interface Props {
     open: boolean;
@@ -16,11 +17,6 @@
 
   let copiedField: string | null = $state(null);
 
-  function connectionLabel(conn: SavedConnection): string {
-    if (conn.name) return conn.name;
-    return conn.port ? `${conn.host}:${conn.port}` : conn.host;
-  }
-
   function copyField(value: string, field: string) {
     navigator.clipboard.writeText(value);
     copiedField = field;
@@ -45,7 +41,7 @@
   }
 </script>
 
-<Modal bind:open class="modal">
+<Modal bind:open>
   <div class="modal-box max-w-lg">
     {#if connection}
       <p class="text-base-content mb-4 font-medium">
diff --git a/src/lib/components/storage/landing/RecentItems.svelte b/src/lib/components/storage/landing/RecentItems.svelte
index f86534a5..463cddf0 100644
--- a/src/lib/components/storage/landing/RecentItems.svelte
+++ b/src/lib/components/storage/landing/RecentItems.svelte
@@ -7,14 +7,13 @@
   import IconStorage from 'virtual:icons/material-symbols/storage';
   import IconFolderOutline from 'virtual:icons/material-symbols/folder-outline';
   import * as m from '$lib/paraglide/messages.js';
-  import { formatFileSize } from '$lib/storage/utils.js';
+  import { formatFileSize, keyToName } from '$lib/storage/utils.js';
   import { getStorageState } from '$lib/storage/context.js';
   import {
-    fileName,
     fileHref,
     fileLocation,
     locationHref,
-    locationName,
+    locationLabel,
     locationPath
   } from '$lib/storage/display-helpers.js';
   import PreviewModal from '$lib/components/storage/modals/PreviewModal.svelte';
@@ -63,7 +62,7 @@
           <td>
             <div class="flex items-center gap-2">
               <IconDescriptionOutline class="text-primary size-4 shrink-0" aria-hidden="true" />
-              <span class="font-medium">{fileName(file.key)}</span>
+              <span class="font-medium">{keyToName(file.key)}</span>
             </div>
           </td>
           <td>
@@ -88,7 +87,7 @@
               <div class="tooltip tooltip-left" data-tip={m.storage_recent_preview_file()}>
                 <button
                   class="btn btn-ghost btn-xs"
-                  aria-label="{m.storage_recent_preview_file()} — {fileName(file.key)}"
+                  aria-label="{m.storage_recent_preview_file()} — {keyToName(file.key)}"
                   onclick={() => openPreview(file.bucket, file.key)}
                 >
                   <IconPreviewOutline class="size-3.5" aria-hidden="true" />
@@ -100,7 +99,7 @@
                   href={fileHref(file)}
                   data-sveltekit-preload-data="off"
                   class="btn btn-ghost btn-xs"
-                  aria-label="{m.storage_recent_open_folder()} — {fileName(file.key)}"
+                  aria-label="{m.storage_recent_open_folder()} — {keyToName(file.key)}"
                 >
                   <!-- eslint-enable svelte/no-navigation-without-resolve -->
                   <IconFolderOpenOutline class="size-3.5" aria-hidden="true" />
@@ -138,7 +137,7 @@
               <a
                 href={locationHref(loc)}
                 data-sveltekit-preload-data="off"
-                class="hover:text-primary font-medium">{locationName(loc)}</a
+                class="hover:text-primary font-medium">{locationLabel(loc)}</a
               >
               <!-- eslint-enable svelte/no-navigation-without-resolve -->
             </div>
@@ -164,7 +163,7 @@
                 href={locationHref(loc)}
                 data-sveltekit-preload-data="off"
                 class="btn btn-ghost btn-xs"
-                aria-label="{m.storage_recent_go_to_location()} — {locationName(loc)}"
+                aria-label="{m.storage_recent_go_to_location()} — {locationLabel(loc)}"
               >
                 <!-- eslint-enable svelte/no-navigation-without-resolve -->
                 <IconArrowForward class="size-3.5" aria-hidden="true" />
diff --git a/src/lib/components/storage/modals/DeleteConfirmModal.svelte b/src/lib/components/storage/modals/DeleteConfirmModal.svelte
index 8e9a98ca..ccf1dd2c 100644
--- a/src/lib/components/storage/modals/DeleteConfirmModal.svelte
+++ b/src/lib/components/storage/modals/DeleteConfirmModal.svelte
@@ -3,6 +3,7 @@
   import IconDeleteForever from 'virtual:icons/material-symbols/delete-forever';
   import IconWarningRounded from 'virtual:icons/material-symbols/warning-rounded';
   import * as m from '$lib/paraglide/messages.js';
+  import { keyToName } from '$lib/storage/utils.js';
 
   interface Props {
     open: boolean;
@@ -14,11 +15,11 @@
   let { open = $bindable(), keys, onConfirm, onCancel }: Props = $props();
 
   const count = $derived(keys.length);
-  const firstName = $derived(keys[0]?.split('/').filter(Boolean).pop() ?? '');
+  const firstName = $derived(keys[0] ? keyToName(keys[0]) : '');
   const hasDirectories = $derived(keys.some((k) => k.endsWith('/')));
 </script>
 
-<Modal bind:open class="modal">
+<Modal bind:open>
   <div class="modal-box {hasDirectories ? 'max-w-md' : 'max-w-sm'}">
     <h3 class="text-error mb-3 flex items-center gap-2 text-lg font-bold">
       <IconDeleteForever class="size-5 shrink-0" aria-hidden="true" />
diff --git a/src/lib/components/storage/modals/PreviewModal.svelte b/src/lib/components/storage/modals/PreviewModal.svelte
index adcfb244..b0d818ef 100644
--- a/src/lib/components/storage/modals/PreviewModal.svelte
+++ b/src/lib/components/storage/modals/PreviewModal.svelte
@@ -293,7 +293,7 @@
   }
 </script>
 
-<Modal bind:open class="modal">
+<Modal bind:open>
   <div
     class="modal-box flex flex-col p-0 transition-none
       {maximized ? 'h-dvh max-h-dvh w-screen max-w-none rounded-none' : 'w-full max-w-5xl'}"
diff --git a/src/lib/components/storage/modals/upload/UploadConflictEntry.svelte b/src/lib/components/storage/modals/upload/UploadConflictEntry.svelte
index 68fc270a..0747f6aa 100644
--- a/src/lib/components/storage/modals/upload/UploadConflictEntry.svelte
+++ b/src/lib/components/storage/modals/upload/UploadConflictEntry.svelte
@@ -2,6 +2,7 @@
   import IconCheck from 'virtual:icons/material-symbols/check';
   import IconCheckCircle from 'virtual:icons/material-symbols/check-circle';
   import * as m from '$lib/paraglide/messages.js';
+  import { keyToName } from '$lib/storage/utils.js';
   import type { FileEntry, Resolution } from './types.js';
 
   interface Props {
@@ -17,7 +18,7 @@
 
   const uid = $props.id();
 
-  let nameOnly = $derived(entry.targetKey.split('/').at(-1) ?? entry.file.name);
+  let nameOnly = $derived(keyToName(entry.targetKey) || entry.file.name);
   let badRename = $derived(
     entry.resolution === 'rename' &&
       (entry.customName.trim() === '' || entry.customName.trim() === entry.file.name)
diff --git a/src/lib/components/storage/modals/upload/UploadEntryStatus.svelte b/src/lib/components/storage/modals/upload/UploadEntryStatus.svelte
index 16a6c88e..4d7f4cae 100644
--- a/src/lib/components/storage/modals/upload/UploadEntryStatus.svelte
+++ b/src/lib/components/storage/modals/upload/UploadEntryStatus.svelte
@@ -4,6 +4,7 @@
   import IconBlock from 'virtual:icons/material-symbols/block';
   import IconSchedule from 'virtual:icons/material-symbols/schedule';
   import * as m from '$lib/paraglide/messages.js';
+  import { keyToName } from '$lib/storage/utils.js';
   import type { FileEntry } from './types.js';
 
   interface Props {
@@ -15,7 +16,7 @@
   let nameOnly = $derived(
     entry.resolution === 'rename' && entry.customName.trim()
       ? entry.customName.trim()
-      : (entry.targetKey.split('/').at(-1) ?? entry.file.name)
+      : keyToName(entry.targetKey) || entry.file.name
   );
 </script>
 
diff --git a/src/lib/components/storage/modals/upload/UploadModal.svelte b/src/lib/components/storage/modals/upload/UploadModal.svelte
index baa67985..84df6cca 100644
--- a/src/lib/components/storage/modals/upload/UploadModal.svelte
+++ b/src/lib/components/storage/modals/upload/UploadModal.svelte
@@ -7,7 +7,7 @@
   import * as m from '$lib/paraglide/messages.js';
   import Modal from '$lib/components/Modal.svelte';
   import { checkObjectExists, uploadFile, UploadError } from '$lib/storage/upload.js';
-  import { formatFileSize } from '$lib/storage/utils.js';
+  import { formatFileSize, keyToName } from '$lib/storage/utils.js';
   import { loadConnectionLocally, getConnectionHeader } from '$lib/storage/connection-storage.js';
   import { uploadConcurrency } from '$lib/client/feature-flags.js';
   import UploadDropzone from './UploadDropzone.svelte';
@@ -326,7 +326,7 @@
   }
 </script>
 
-<Modal bind:open class="modal">
+<Modal bind:open>
   <div class="modal-box w-full max-w-lg">
     <!-- Header -->
     <div class="mb-4 flex items-center justify-between">
@@ -488,7 +488,7 @@
             {@const errName =
               entry.resolution === 'rename' && entry.customName.trim()
                 ? entry.customName.trim()
-                : (entry.targetKey.split('/').at(-1) ?? entry.file.name)}
+                : keyToName(entry.targetKey) || entry.file.name}
             <li class="text-error py-1 text-xs">
               {errName}: {entry.errorMessage}
             </li>
diff --git a/src/lib/components/storage/shared/StorageErrorPanel.svelte b/src/lib/components/storage/shared/StorageErrorPanel.svelte
new file mode 100644
index 00000000..a102bf17
--- /dev/null
+++ b/src/lib/components/storage/shared/StorageErrorPanel.svelte
@@ -0,0 +1,55 @@
+<script lang="ts">
+  import { resolve } from '$app/paths';
+  import IconWarning from 'virtual:icons/material-symbols/warning';
+  import * as m from '$lib/paraglide/messages.js';
+
+  interface Props {
+    /** HTTP status code shown as the panel heading. */
+    status: number;
+    /** Human-readable explanation rendered below the status code. */
+    message: string;
+  }
+
+  let { status, message }: Props = $props();
+</script>
+
+<div
+  class="
+    flex flex-1 flex-col items-center justify-center gap-6 p-8 text-center
+  "
+>
+  <div
+    class="
+      bg-error/10 text-error flex size-20 items-center justify-center
+      rounded-full
+    "
+    aria-hidden="true"
+  >
+    <IconWarning class="size-10" aria-hidden="true" />
+  </div>
+
+  <div>
+    <p
+      class="
+        text-base-content/50 mb-1 text-sm font-medium tracking-widest uppercase
+      "
+    >
+      {m.storage_error_title()}
+    </p>
+    <h1 class="text-base-content text-3xl font-bold">
+      {status}
+    </h1>
+    <p class="text-base-content/70 mt-2 max-w-sm text-sm">
+      {message}
+    </p>
+  </div>
+
+  <div class="flex flex-wrap items-center justify-center gap-3">
+    <a href={resolve('/storage')} class="btn btn-sm btn-primary">
+      {m.storage_error_back_to_storage()}
+    </a>
+    <button type="button" class="btn btn-ghost btn-sm" onclick={() => history.back()}>
+      {m.storage_error_go_back()}
+    </button>
+  </div>
+</div>
diff --git a/src/lib/components/storage/shared/StorageErrorPanel.svelte.spec.ts b/src/lib/components/storage/shared/StorageErrorPanel.svelte.spec.ts
new file mode 100644
index 00000000..f96158c5
--- /dev/null
+++ b/src/lib/components/storage/shared/StorageErrorPanel.svelte.spec.ts
@@ -0,0 +1,37 @@
+import { page } from 'vitest/browser';
+import { describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-svelte';
+import StorageErrorPanel from './StorageErrorPanel.svelte';
+
+describe('StorageErrorPanel', () => {
+  it('should render the status code as the heading', async () => {
+    render(StorageErrorPanel, { status: 403, message: 'Access denied' });
+
+    await expect.element(page.getByRole('heading', { name: '403' })).toBeInTheDocument();
+  });
+
+  it('should render the supplied message', async () => {
+    render(StorageErrorPanel, { status: 404, message: 'No such bucket: reports' });
+
+    await expect.element(page.getByText('No such bucket: reports')).toBeInTheDocument();
+  });
+
+  it('should tolerate an empty message', async () => {
+    render(StorageErrorPanel, { status: 500, message: '' });
+
+    await expect.element(page.getByRole('heading', { name: '500' })).toBeInTheDocument();
+  });
+
+  it('should offer a link back to storage', async () => {
+    render(StorageErrorPanel, { status: 403, message: 'Access denied' });
+
+    const link = page.getByRole('link', { name: /back to storage/i });
+    await expect.element(link).toHaveAttribute('href', '/storage');
+  });
+
+  it('should offer a go-back button', async () => {
+    render(StorageErrorPanel, { status: 403, message: 'Access denied' });
+
+    await expect.element(page.getByRole('button', { name: /go back/i })).toBeInTheDocument();
+  });
+});
diff --git a/src/lib/components/storage/sidebar/BucketList.svelte b/src/lib/components/storage/sidebar/BucketList.svelte
index 5a1de726..db2587be 100644
--- a/src/lib/components/storage/sidebar/BucketList.svelte
+++ b/src/lib/components/storage/sidebar/BucketList.svelte
@@ -13,7 +13,7 @@
   import * as m from '$lib/paraglide/messages.js';
   import { getStorageState } from '$lib/storage/context.js';
   import type { PinnedLocation, StorageLocation } from '$lib/storage/types.js';
-  import { pinnedLabel, pinnedHref } from '$lib/storage/display-helpers.js';
+  import { locationLabel, locationHref } from '$lib/storage/display-helpers.js';
   import { createResizablePanel } from './resizable-panel.svelte.js';
   import ResizeHandle from './ResizeHandle.svelte';
 
@@ -153,11 +153,11 @@
           <li role="none" class="group relative">
             <div
               class="tooltip tooltip-right relative z-150 w-full before:z-200"
-              data-tip={pinnedLabel(pin)}
+              data-tip={locationLabel(pin)}
             >
               <!-- eslint-disable svelte/no-navigation-without-resolve -->
               <a
-                href={pinnedHref(pin)}
+                href={locationHref(pin)}
                 data-sveltekit-preload-data="off"
                 class="
                 hover:bg-base-200 flex w-full min-w-0 items-center gap-2 px-3 py-1.5
@@ -171,7 +171,7 @@
                 {:else}
                   <IconFolderOutline class="size-3.5 shrink-0 opacity-60" aria-hidden="true" />
                 {/if}
-                <span class="truncate">{pinnedLabel(pin)}</span>
+                <span class="truncate">{locationLabel(pin)}</span>
               </a>
             </div>
             <button
@@ -263,7 +263,7 @@
   </div>
 
   <!-- Disconnect confirmation modal -->
-  <Modal bind:open={disconnectConfirmOpen} class="modal">
+  <Modal bind:open={disconnectConfirmOpen}>
     <div class="modal-box max-w-sm">
       <h3 class="mb-3 flex items-center gap-2 text-lg font-bold">
         <IconPowerOff class="text-error size-5 shrink-0" aria-hidden="true" />
diff --git a/src/lib/components/storage/sidebar/StorageConnectionSidebar.svelte b/src/lib/components/storage/sidebar/StorageConnectionSidebar.svelte
index 10080e85..645def1c 100644
--- a/src/lib/components/storage/sidebar/StorageConnectionSidebar.svelte
+++ b/src/lib/components/storage/sidebar/StorageConnectionSidebar.svelte
@@ -14,6 +14,7 @@
     removeConnectionLocally,
     type SavedConnection
   } from '$lib/storage/connection-storage.js';
+  import { connectionLabel } from '$lib/storage/display-helpers.js';
 
   interface Props {
     /** ID of the connection currently being acted on (highlighted in the list). */
@@ -54,11 +55,6 @@
     };
   });
 
-  function connectionLabel(conn: SavedConnection): string {
-    if (conn.name) return conn.name;
-    return conn.port ? `${conn.host}:${conn.port}` : conn.host;
-  }
-
   function openContextMenu(e: MouseEvent, conn: SavedConnection) {
     e.preventDefault();
     e.stopPropagation();
diff --git a/src/lib/components/trino/StatementResult.svelte b/src/lib/components/trino/StatementResult.svelte
index 5548e608..384581e7 100644
--- a/src/lib/components/trino/StatementResult.svelte
+++ b/src/lib/components/trino/StatementResult.svelte
@@ -1,6 +1,9 @@
 <script lang="ts">
   import { browser } from '$app/environment';
   import * as m from '$lib/paraglide/messages.js';
+  import IconExpandMore from 'virtual:icons/material-symbols/expand-more';
+  import IconOpenInNew from 'virtual:icons/material-symbols/open-in-new';
+  import IconDownload from 'virtual:icons/material-symbols/download';
   import type { QuerySnapshot } from '$lib/types/query';
   import { initPageSize, type PageSize } from '$lib/types/pagination.js';
   import Pagination from '$lib/components/Pagination.svelte';
@@ -144,13 +147,7 @@
           {collapsed ? '' : 'rotate-180'}"
         aria-hidden="true"
       >
-        <svg class="size-4" viewBox="0 0 20 20" fill="currentColor">
-          <path
-            fill-rule="evenodd"
-            d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
-            clip-rule="evenodd"
-          />
-        </svg>
+        <IconExpandMore class="size-4" />
       </span>
     </div>
   {/if}
@@ -169,20 +166,7 @@
             class="btn btn-ghost btn-xs"
           >
             {m.trino_view_in_trino()}
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              class="size-3.5"
-              viewBox="0 0 20 20"
-              fill="currentColor"
-              aria-hidden="true"
-            >
-              <path
-                d="M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z"
-              />
-              <path
-                d="M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z"
-              />
-            </svg>
+            <IconOpenInNew class="size-3.5" aria-hidden="true" />
           </a>
         {/if}
         {#if result.columns.length > 0}
@@ -190,19 +174,7 @@
             <div class="divider divider-horizontal mx-0"></div>
           {/if}
           <button class="btn btn-ghost btn-xs" onclick={downloadCsv}>
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              class="size-4"
-              viewBox="0 0 20 20"
-              fill="currentColor"
-              aria-hidden="true"
-            >
-              <path
-                fill-rule="evenodd"
-                d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z"
-                clip-rule="evenodd"
-              />
-            </svg>
+            <IconDownload class="size-4" aria-hidden="true" />
             {m.trino_export_csv()}
           </button>
           <label
diff --git a/src/lib/storage/display-helpers.ts b/src/lib/storage/display-helpers.ts
index d9e4874f..93351338 100644
--- a/src/lib/storage/display-helpers.ts
+++ b/src/lib/storage/display-helpers.ts
@@ -1,9 +1,14 @@
 import { resolve } from '$app/paths';
 import type { ResolvedPathname } from '$app/types';
-import type { PinnedLocation, RecentFile, RecentLocation } from './types.js';
+import type { SavedConnection } from './connection-storage.js';
+import type { RecentFile } from './types.js';
+import { keyToName } from './utils.js';
 
 const STORAGE_ROUTE = '/(app)/storage/[bucket]/[...prefix]' as const;
 
+/** Anything addressable as bucket + prefix — pinned and recent locations alike. */
+type StorageLocation = { bucket: string; prefix: string };
+
 // ── URL helpers ──────────────────────────────────────────────────────────────
 
 export function storageHref(bucket: string, prefix: string): ResolvedPathname {
@@ -14,55 +19,45 @@ export function storageHref(bucket: string, prefix: string): ResolvedPathname {
   return resolve(STORAGE_ROUTE, { bucket: encodedBucket, prefix: encodedPrefix });
 }
 
-// ── Pinned location helpers ──────────────────────────────────────────────────
+// ── Location helpers ─────────────────────────────────────────────────────────
+
+/** Last segment of the prefix, falling back to the bucket name at the root. */
+export function locationLabel(loc: StorageLocation): string {
+  return keyToName(loc.prefix) || loc.bucket;
+}
 
-export function pinnedLabel(pin: PinnedLocation): string {
-  if (!pin.prefix) return pin.bucket;
-  const parts = pin.prefix.split('/').filter(Boolean);
-  return parts[parts.length - 1] ?? pin.bucket;
+/** Full breadcrumb-style path, e.g. `bucket / dir / subdir`. */
+export function locationPath(loc: StorageLocation): string {
+  if (!loc.prefix) return loc.bucket;
+  const parts = loc.prefix.split('/').filter(Boolean);
+  return `${loc.bucket} / ${parts.join(' / ')}`;
 }
 
-export function pinnedHref(pin: PinnedLocation): ResolvedPathname {
-  return storageHref(pin.bucket, pin.prefix);
+export function locationHref(loc: StorageLocation): ResolvedPathname {
+  return storageHref(loc.bucket, loc.prefix);
 }
 
 // ── Recent file helpers ──────────────────────────────────────────────────────
 
-export function fileName(key: string): string {
+/** The directory an object key lives in, without the trailing file name. */
+function parentPrefix(key: string): string {
   const parts = key.split('/').filter(Boolean);
-  return parts[parts.length - 1] ?? key;
+  parts.pop();
+  return parts.join('/');
 }
 
 export function fileLocation(file: RecentFile): string {
-  const parts = file.key.split('/').filter(Boolean);
-  parts.pop();
-  return parts.length > 0 ? `${file.bucket} / ${parts.join(' / ')}` : file.bucket;
+  return locationPath({ bucket: file.bucket, prefix: parentPrefix(file.key) });
 }
 
 export function fileHref(file: RecentFile): ResolvedPathname {
-  const parts = file.key.split('/').filter(Boolean);
-  parts.pop();
-  const encodedPrefix = parts.map(encodeURIComponent).join('/');
-  return resolve(STORAGE_ROUTE, {
-    bucket: encodeURIComponent(file.bucket),
-    prefix: encodedPrefix
-  });
+  return storageHref(file.bucket, parentPrefix(file.key));
 }
 
-// ── Recent location helpers ──────────────────────────────────────────────────
+// ── Connection helpers ───────────────────────────────────────────────────────
 
-export function locationName(loc: RecentLocation): string {
-  if (!loc.prefix) return loc.bucket;
-  const parts = loc.prefix.split('/').filter(Boolean);
-  return parts[parts.length - 1] ?? loc.bucket;
-}
-
-export function locationPath(loc: RecentLocation): string {
-  if (!loc.prefix) return loc.bucket;
-  const parts = loc.prefix.split('/').filter(Boolean);
-  return `${loc.bucket} / ${parts.join(' / ')}`;
-}
-
-export function locationHref(loc: RecentLocation): ResolvedPathname {
-  return storageHref(loc.bucket, loc.prefix);
+/** Display name for a saved connection: its own name if set, else `host[:port]`. */
+export function connectionLabel(conn: SavedConnection): string {
+  if (conn.name) return conn.name;
+  return conn.port ? `${conn.host}:${conn.port}` : conn.host;
 }
diff --git a/src/lib/storage/download.ts b/src/lib/storage/download.ts
index 61ea9460..bbae2fbe 100644
--- a/src/lib/storage/download.ts
+++ b/src/lib/storage/download.ts
@@ -16,6 +16,7 @@
  */
 
 import { STORAGE_CONNECTION_HEADER } from '$lib/storage/connection-storage.js';
+import { keyToName } from '$lib/storage/utils.js';
 
 export type DownloadErrorCode =
   | 'not_connected'
@@ -73,8 +74,7 @@ export async function downloadObject(
   const blob = await response.blob();
   const blobUrl = URL.createObjectURL(blob);
 
-  // Derive filename from the key (last path segment).
-  const filename = key.split('/').filter(Boolean).pop() ?? key;
+  const filename = keyToName(key);
 
   const anchor = document.createElement('a');
   anchor.href = blobUrl;
diff --git a/src/routes/(app)/api/storage/download/+server.ts b/src/routes/(app)/api/storage/download/+server.ts
index d8e09bb8..5a128231 100644
--- a/src/routes/(app)/api/storage/download/+server.ts
+++ b/src/routes/(app)/api/storage/download/+server.ts
@@ -1,11 +1,7 @@
 import type { RequestHandler } from './$types';
 import { downloadObject, getObjectMetadata } from '$lib/server/storage/service.js';
 import { requireBucketKey } from '../params.js';
-
-/** Derive the bare filename from a (possibly path-prefixed) object key. */
-function filenameFromKey(key: string): string {
-  return key.split('/').filter(Boolean).pop() ?? key;
-}
+import { keyToName } from '$lib/storage/utils.js';
 
 /**
  * GET /storage/api/download?bucket=<bucket>&key=<object-key>
@@ -25,7 +21,7 @@ export const GET: RequestHandler = async ({ locals, url }) => {
 
   const download = await downloadObject(locals.storageConfig!, bucket, key);
 
-  const filename = filenameFromKey(key);
+  const filename = keyToName(key);
   // RFC 5987 encoding for non-ASCII filenames in Content-Disposition
   const encodedFilename = encodeURIComponent(filename);
   const contentDisposition = `attachment; filename="${filename}"; filename*=UTF-8''${encodedFilename}`;
diff --git a/src/routes/(app)/storage/+error.svelte b/src/routes/(app)/storage/+error.svelte
index bcc2ce6a..246655df 100644
--- a/src/routes/(app)/storage/+error.svelte
+++ b/src/routes/(app)/storage/+error.svelte
@@ -1,8 +1,7 @@
 <script lang="ts">
   import { page } from '$app/state';
-  import { resolve } from '$app/paths';
-  import IconWarning from 'virtual:icons/material-symbols/warning';
   import * as m from '$lib/paraglide/messages.js';
+  import StorageErrorPanel from '$lib/components/storage/shared/StorageErrorPanel.svelte';
 
   // page.params.bucket may be absent when a client-side universal load throws an
   // error (the error boundary sits at the parent /storage level, and SvelteKit
@@ -24,43 +23,4 @@
   const errorMessage = $derived(bucketErrorMessage(page.status, bucket));
 </script>
 
-<div
-  class="
-    flex flex-1 flex-col items-center justify-center gap-6 p-8 text-center
-  "
->
-  <div
-    class="
-      bg-error/10 text-error flex size-20 items-center justify-center
-      rounded-full
-    "
-    aria-hidden="true"
-  >
-    <IconWarning class="size-10" aria-hidden="true" />
-  </div>
-
-  <div>
-    <p
-      class="
-        text-base-content/50 mb-1 text-sm font-medium tracking-widest uppercase
-      "
-    >
-      {m.storage_error_title()}
-    </p>
-    <h1 class="text-base-content text-3xl font-bold">
-      {page.status}
-    </h1>
-    <p class="text-base-content/70 mt-2 max-w-sm text-sm">
-      {errorMessage ?? page.error?.message ?? ''}
-    </p>
-  </div>
-
-  <div class="flex flex-wrap items-center justify-center gap-3">
-    <a href={resolve('/storage')} class="btn btn-sm btn-primary">
-      {m.storage_error_back_to_storage()}
-    </a>
-    <button type="button" class="btn btn-ghost btn-sm" onclick={() => history.back()}>
-      {m.storage_error_go_back()}
-    </button>
-  </div>
-</div>
+<StorageErrorPanel status={page.status} message={errorMessage ?? page.error?.message ?? ''} />
diff --git a/src/routes/(app)/storage/[bucket]/[...prefix]/+page.svelte b/src/routes/(app)/storage/[bucket]/[...prefix]/+page.svelte
index 49c8f26b..fd08925e 100644
--- a/src/routes/(app)/storage/[bucket]/[...prefix]/+page.svelte
+++ b/src/routes/(app)/storage/[bucket]/[...prefix]/+page.svelte
@@ -3,7 +3,7 @@
   import { resolve } from '$app/paths';
   import { getStorageState } from '$lib/storage/context.js';
   import FileExplorer from '$lib/components/storage/explorer/FileExplorer.svelte';
-  import IconWarning from 'virtual:icons/material-symbols/warning';
+  import StorageErrorPanel from '$lib/components/storage/shared/StorageErrorPanel.svelte';
   import * as m from '$lib/paraglide/messages.js';
 
   let { data } = $props();
@@ -36,49 +36,15 @@
 
 {#if data.accessDenied}
   <!--
-    403 is rendered inline rather than via +error.svelte because throwing from a
+    403 is rendered in-page rather than via +error.svelte because throwing from a
     universal load during initial hydration (when data.connected=true causes
     BucketList to mount) can escape the storage error boundary and fall through
-    to the root fallback. Rendering inline keeps the sidebar visible.
+    to the root fallback. Rendering in-page keeps the sidebar visible.
   -->
-  <div
-    class="
-      flex flex-1 flex-col items-center justify-center gap-6 p-8 text-center
-    "
-  >
-    <div
-      class="
-        bg-error/10 text-error flex size-20 items-center justify-center
-        rounded-full
-      "
-      aria-hidden="true"
-    >
-      <IconWarning class="size-10" aria-hidden="true" />
-    </div>
-
-    <div>
-      <p
-        class="
-          text-base-content/50 mb-1 text-sm font-medium tracking-widest uppercase
-        "
-      >
-        {m.storage_error_title()}
-      </p>
-      <h1 class="text-base-content text-3xl font-bold">403</h1>
-      <p class="text-base-content/70 mt-2 max-w-sm text-sm">
-        {m.storage_error_access_denied({ bucket: data.bucket })}
-      </p>
-    </div>
-
-    <div class="flex flex-wrap items-center justify-center gap-3">
-      <a href={resolve('/storage')} class="btn btn-sm btn-primary">
-        {m.storage_error_back_to_storage()}
-      </a>
-      <button type="button" class="btn btn-ghost btn-sm" onclick={() => history.back()}>
-        {m.storage_error_go_back()}
-      </button>
-    </div>
-  </div>
+  <StorageErrorPanel
+    status={403}
+    message={m.storage_error_access_denied({ bucket: data.bucket })}
+  />
 {:else}
   <FileExplorer />
 {/if}
diff --git a/src/routes/(app)/storage/connections/+page.svelte b/src/routes/(app)/storage/connections/+page.svelte
index 7f5218b3..c58d6d6e 100644
--- a/src/routes/(app)/storage/connections/+page.svelte
+++ b/src/routes/(app)/storage/connections/+page.svelte
@@ -12,6 +12,7 @@
     removeConnectionById,
     type SavedConnection
   } from '$lib/storage/connection-storage.js';
+  import { connectionLabel } from '$lib/storage/display-helpers.js';
   import DeleteConnectionModal from '$lib/components/storage/DeleteConnectionModal.svelte';
 
   let connections = $state<SavedConnection[]>([]);
@@ -45,11 +46,6 @@
     loaded = true;
   });
 
-  function connectionLabel(conn: SavedConnection): string {
-    if (conn.name) return conn.name;
-    return conn.port ? `${conn.host}:${conn.port}` : conn.host;
-  }
-
   function openContextMenu(e: MouseEvent, conn: SavedConnection) {
     e.preventDefault();
     e.stopPropagation();
diff --git a/src/routes/(app)/storage/connections/[id]/edit/+page.svelte b/src/routes/(app)/storage/connections/[id]/edit/+page.svelte
index e09ebb98..dc50eb65 100644
--- a/src/routes/(app)/storage/connections/[id]/edit/+page.svelte
+++ b/src/routes/(app)/storage/connections/[id]/edit/+page.svelte
@@ -142,7 +142,7 @@
 
 <svelte:window onbeforeunload={handleBeforeUnload} />
 
-<Modal bind:open={confirmLeaveOpen} class="modal">
+<Modal bind:open={confirmLeaveOpen}>
   <div class="modal-box">
     <h3 class="text-lg font-semibold">{m.storage_connection_edit_unsaved_title()}</h3>
     <p class="text-base-content/70 mt-2 text-sm">{m.storage_connection_edit_unsaved_body()}</p>
diff --git a/src/routes/(app)/trino/+page.svelte b/src/routes/(app)/trino/+page.svelte
index 4241f9fb..70952aad 100644
--- a/src/routes/(app)/trino/+page.svelte
+++ b/src/routes/(app)/trino/+page.svelte
@@ -3,6 +3,12 @@
   import { SvelteMap } from 'svelte/reactivity';
   import { browser } from '$app/environment';
   import * as m from '$lib/paraglide/messages.js';
+  import IconClose from 'virtual:icons/material-symbols/close';
+  import IconMenu from 'virtual:icons/material-symbols/menu';
+  import IconPanelClose from 'virtual:icons/material-symbols/left-panel-close-outline';
+  import IconPanelOpen from 'virtual:icons/material-symbols/left-panel-open-outline';
+  import IconExpandMore from 'virtual:icons/material-symbols/expand-more';
+  import IconOpenInNew from 'virtual:icons/material-symbols/open-in-new';
   import MonacoEditor from '$lib/components/editor/MonacoEditor.svelte';
   import CatalogBrowser from '$lib/components/catalog/CatalogBrowser.svelte';
   import ResizeHandle from '$lib/components/storage/sidebar/ResizeHandle.svelte';
@@ -403,16 +409,7 @@
 <svelte:window onkeydown={handleKeydown} />
 
 {#snippet closeIcon()}
-  <svg
-    class="size-4"
-    aria-hidden="true"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    stroke-width="2"
-    stroke-linecap="round"
-    stroke-linejoin="round"><path d="M18 6 6 18" /><path d="m6 6 12 12" /></svg
-  >
+  <IconClose class="size-4" aria-hidden="true" />
 {/snippet}
 
 <div class="flex h-full gap-4">
@@ -448,13 +445,7 @@
   </div>
 
   <!-- Mobile catalog browser overlay -->
-  <Modal
-    bind:open={mobileCatalogOpen}
-    class="
-      bg-base-100 fixed inset-0 z-40 size-full max-h-full max-w-full p-0
-      lg:hidden
-    "
-  >
+  <Modal bind:open={mobileCatalogOpen} variant="fullscreen" class="lg:hidden">
     <div class="flex h-full flex-col">
       <div
         class="
@@ -667,49 +658,22 @@
               aria-label={m.trino_catalog_browser_toggle()}
             >
               {#if catalogBrowserOpen}
-                <svg
+                <IconPanelClose
                   class="
                     hidden size-4
                     lg:block
                   "
                   aria-hidden="true"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-width="1.5"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  ><rect x="3" y="3" width="18" height="18" rx="2" /><path d="M9 3v18" /><path
-                    d="m14 9-3 3 3 3"
-                  /></svg
-                >
-                <svg
+                />
+                <IconMenu
                   class="
                     size-4
                     lg:hidden
                   "
                   aria-hidden="true"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-width="1.5"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"><path d="M4 6h16M4 12h16M4 18h16" /></svg
-                >
+                />
               {:else}
-                <svg
-                  class="size-4"
-                  aria-hidden="true"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-width="1.5"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  ><rect x="3" y="3" width="18" height="18" rx="2" /><path d="M9 3v18" /><path
-                    d="m12 9 3 3-3 3"
-                  /></svg
-                >
+                <IconPanelOpen class="size-4" aria-hidden="true" />
               {/if}
             </button>
           </div>
@@ -781,13 +745,7 @@
                 aria-haspopup="true"
                 aria-label={m.trino_run_mode_select()}
               >
-                <svg class="size-3" aria-hidden="true" viewBox="0 0 20 20" fill="currentColor">
-                  <path
-                    fill-rule="evenodd"
-                    d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
-                    clip-rule="evenodd"
-                  />
-                </svg>
+                <IconExpandMore class="size-3" aria-hidden="true" />
               </button>
             </div>
             <div
@@ -897,20 +855,7 @@
               class="btn btn-ghost btn-xs"
             >
               {m.trino_view_in_trino()}
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                class="size-3.5"
-                viewBox="0 0 20 20"
-                fill="currentColor"
-                aria-hidden="true"
-              >
-                <path
-                  d="M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z"
-                />
-                <path
-                  d="M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z"
-                />
-              </svg>
+              <IconOpenInNew class="size-3.5" aria-hidden="true" />
             </a>
           {/if}
         </div>
diff --git a/src/routes/auth/login/+page.svelte b/src/routes/auth/login/+page.svelte
index 64bca586..99287695 100644
--- a/src/routes/auth/login/+page.svelte
+++ b/src/routes/auth/login/+page.svelte
@@ -2,6 +2,7 @@
   import * as m from '$lib/paraglide/messages.js';
   import { authClient } from '$lib/auth-client.js';
   import IconWarning from 'virtual:icons/material-symbols/warning';
+  import IconLock from 'virtual:icons/material-symbols/lock-outline';
 
   let { data } = $props();
 
@@ -36,19 +37,7 @@
   >
     <div class="card-body items-center text-center">
       <div class="mb-2">
-        <svg
-          class="text-primary mx-auto size-12"
-          aria-hidden="true"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="1.5"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        >
-          <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
-          <path d="M7 11V7a5 5 0 0 1 10 0v4" />
-        </svg>
+        <IconLock class="text-primary mx-auto size-12" aria-hidden="true" />
       </div>
 
       <h1 class="card-title text-2xl">{m.auth_login_title()}</h1>