diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
new file mode 100644
index 0000000..3728239
--- /dev/null
+++ b/.github/workflows/deploy.yml
@@ -0,0 +1,52 @@
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches:
+      - feat/sample-editor
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow one active deployment
+concurrency:
+  group: 'pages'
+  cancel-in-progress: true
+
+jobs:
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Set up Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 24
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Build
+        # For a custom domain (e.g., drum.dato.mu), keep BASE_PATH empty.
+        # For a default github.io subpath (e.g., username.github.io/drum-webapp),
+        # set BASE_PATH to /<repository-name> (e.g., /drum-webapp).
+        env:
+          BASE_PATH: ''
+        run: npm run build
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: 'build'
+
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4
diff --git a/src/lib/components/Footer.svelte b/src/lib/components/Footer.svelte
index 0703f36..6dd5535 100644
--- a/src/lib/components/Footer.svelte
+++ b/src/lib/components/Footer.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { _, locale } from "svelte-i18n";
-	import { midiState, disconnectDevice } from "$lib/stores/midi.svelte";
+	import { midiState } from "$lib/stores/midi.svelte";
 	import { audioInputState, selectDevice } from "$lib/stores/audioInput.svelte";
 
 	const showLanguageAndAudioInput = false;
@@ -100,24 +100,6 @@
 					{/if}
 				</div>
 			{/if}
-			{#if midiState.isConnected}
-				<button
-					class="flex items-center gap-2 text-sm hover:text-gray-800 transition-colors"
-					onclick={disconnectDevice}
-					title={$_("device_connected_status", {
-						values: {
-							deviceName: midiState.selectedOutput?.name || "Dato DRUM",
-						},
-					}) +
-						" - " +
-						$_("device_disconnect_button")}
-				>
-					<span class="hidden sm:inline">
-						{$_("connected")}{#if midiState.firmwareVersion}
-							({midiState.firmwareVersion}){/if}
-					</span>
-				</button>
-			{/if}
 		</div>
 	</div>
 </footer>
diff --git a/src/lib/components/SampleRecorder.svelte b/src/lib/components/SampleRecorder.svelte
index 1412cd8..5c99c6c 100644
--- a/src/lib/components/SampleRecorder.svelte
+++ b/src/lib/components/SampleRecorder.svelte
@@ -1,23 +1,27 @@
 <script lang="ts">
-  import { onDestroy } from 'svelte';
+  import { onDestroy, untrack } from 'svelte';
   import { _ } from 'svelte-i18n';
   import {
     audioInputState,
     initialize as initializeAudioInput,
-    requestPermission,
-    selectDevice
+    requestPermission
   } from '$lib/stores/audioInput.svelte';
   import { midiNoteState } from '$lib/stores/midi.svelte';
   import { sampleUploadStore } from '$lib/stores/sampleUpload';
+  import { downloadState, downloadSample, cancelDownload } from '$lib/stores/sampleDownload.svelte';
   import { SampleCapture } from '$lib/services/sampleCapture.svelte';
   import {
     computeEnvelope,
     findFirstTransient,
     findQuietEnd,
     resampleLinear,
-    floatTo16BitPcm
+    floatTo16BitPcm,
+    decodeToMono
   } from '$lib/services/audioAnalysis';
   import WaveformDisplay from './WaveformDisplay.svelte';
+  import { FACTORY_SAMPLES } from '$lib/config/factorySamples';
+  import { cacheDeviceSample, preloadFactorySamples } from '$lib/stores/sampleCache';
+  import { loadSlotSample } from '$lib/services/slotSampleLoader';
   import { createLogger } from '$lib/utils/logger';
 
   const logger = createLogger('SampleRecorder');
@@ -32,29 +36,50 @@
   let errorMessage = $state<string | null>(null);
   let isSaving = $state(false);
 
+  let isDownloading = $derived(downloadState.status === 'downloading');
+
+  // Track which slot we last loaded so we don't reload on every trigger
+  let lastLoadedSlot: number | null = null;
+
+  // Warm the cache so pad selection can show factory audio instantly
+  preloadFactorySamples();
+
   let recordedDurationMs = $derived(
     capture.recorded ? Math.floor((capture.recorded.length / capture.sampleRate) * 1000) : 0
   );
   let gainFactor = $derived(Math.pow(10, gainDb / 20));
 
-  async function startMonitoring() {
+  async function startMonitoring(): Promise<boolean> {
     errorMessage = null;
 
     const granted = await requestPermission();
     if (!granted) {
       errorMessage = audioInputState.error;
-      return;
+      return false;
     }
     await initializeAudioInput();
 
     try {
       await capture.open(audioInputState.selectedDeviceId ?? undefined);
+      return true;
     } catch (error) {
       errorMessage = error instanceof Error ? error.message : String(error);
       logger.error(`Failed to start monitoring: ${errorMessage}`);
+      return false;
     }
   }
 
+  async function onRecordClick() {
+    if (capture.status === 'recorded') {
+      capture.reset(); // falls back to idle when the mic was never opened
+    }
+    if (capture.status === 'idle') {
+      const opened = await startMonitoring();
+      if (!opened) return; // permission denied or open failed
+    }
+    await startRecording();
+  }
+
   async function startRecording() {
     const samples = await capture.record();
     gainDb = 0;
@@ -132,6 +157,8 @@
       });
 
       await sampleUploadStore.quickUpload(file, slot);
+      // The device now holds exactly this audio — no need to download it back
+      cacheDeviceSample(slot, selection, 44100);
       logger.info(`Saved recording to slot ${slot}`);
     } catch (error) {
       errorMessage = error instanceof Error ? error.message : String(error);
@@ -141,35 +168,166 @@
     }
   }
 
+  let fileInput: HTMLInputElement;
+
+  const MAX_LOAD_S = 5; // cap loaded files so the trim view stays usable
+
+  /**
+   * Decode an audio file (mono, capture sample rate), capping long files so
+   * the trim view stays usable, and load it into the editor with auto-trim.
+   */
+  async function loadFileIntoEditor(arrayBuffer: ArrayBuffer, name: string) {
+    errorMessage = null;
+    try {
+      let { samples, sampleRate } = await decodeToMono(arrayBuffer);
+      if (samples.length > MAX_LOAD_S * sampleRate) {
+        samples = samples.slice(0, MAX_LOAD_S * sampleRate);
+      }
+      loadIntoEditor(samples, sampleRate, 'auto');
+      logger.info(`Loaded ${name} into buffer (${samples.length} samples)`);
+    } catch (error) {
+      errorMessage = error instanceof Error ? error.message : String(error);
+      logger.error(`Failed to load ${name}: ${errorMessage}`);
+    }
+  }
+
+  async function handleFileSelect(event: Event) {
+    const input = event.currentTarget as HTMLInputElement;
+    const file = input.files?.[0];
+    if (file) await loadFileIntoEditor(await file.arrayBuffer(), file.name);
+    input.value = '';
+  }
+
+  async function resetToFactory() {
+    const slot = midiNoteState.selectedSample;
+    if (slot === null) return;
+
+    const filename = FACTORY_SAMPLES[slot];
+    if (!filename) {
+      errorMessage = $_('recorder_no_factory_sample');
+      return;
+    }
+
+    try {
+      const response = await fetch(`/factory_kit/${filename}`);
+      if (!response.ok) {
+        throw new Error(`Failed to load factory sample: ${response.statusText}`);
+      }
+      await loadFileIntoEditor(await response.arrayBuffer(), filename);
+    } catch (error) {
+      errorMessage = error instanceof Error ? error.message : String(error);
+      logger.error(`Factory sample load failed: ${errorMessage}`);
+    }
+  }
+
   function playSelection() {
     capture.play(getSelection());
   }
 
-  async function onDeviceChange(event: Event) {
-    const deviceId = (event.currentTarget as HTMLSelectElement).value;
-    selectDevice(deviceId);
-    if (capture.status === 'monitoring' || capture.status === 'recording') {
-      try {
-        await capture.open(deviceId);
-      } catch (error) {
-        errorMessage = error instanceof Error ? error.message : String(error);
-      }
+  /**
+   * Put a sample buffer into the editor and reset gain, then set the trim
+   * markers per `trim`: 'auto' snaps to the detected transient/decay,
+   * 'full' selects the whole (max 1s) sample.
+   */
+  function loadIntoEditor(samples: Float32Array, sampleRate: number, trim: 'auto' | 'full') {
+    capture.load(samples, sampleRate);
+    gainDb = 0;
+    const loaded = capture.recorded ?? samples;
+    if (trim === 'auto') {
+      autoTrim(loaded);
+    } else {
+      const durationMs = Math.floor((loaded.length / capture.sampleRate) * 1000);
+      trimStartMs = 0;
+      trimEndMs = Math.min(durationMs, MAX_SELECTION_S * 1000);
     }
   }
 
+  // Load the slot's sample into the editor when a new note is selected.
+  // Cached audio (device download, upload, or preloaded factory sample) is
+  // shown instantly; the ~1s device download only runs when the
+  // 'downloadOnSelect' feature flag is on and we don't already hold the
+  // device's audio for this slot.
+  $effect(() => {
+    const slot = midiNoteState.selectedSample;
+    if (slot === null) return;
+
+    // Only load when the slot actually changed
+    if (slot === lastLoadedSlot) return;
+
+    untrack(() => {
+      // Don't disturb an active recording or save; the slot stays unmarked so
+      // it loads on the next trigger once recording/saving has finished
+      if (capture.status === 'recording' || isSaving) return;
+      lastLoadedSlot = slot;
+
+      capture.reset();
+      errorMessage = null;
+
+      loadSlotSample(slot, {
+        isSlotStillSelected: (s) => midiNoteState.selectedSample === s,
+        onSamples: (samples, sampleRate) => loadIntoEditor(samples, sampleRate, 'full')
+      });
+    });
+  });
+
+  // Reopen the capture stream when the microphone selection changes (in the
+  // settings modal) while the stream is live
+  $effect(() => {
+    const deviceId = audioInputState.selectedDeviceId;
+    untrack(() => {
+      if (deviceId && (capture.status === 'monitoring' || capture.status === 'recording')) {
+        capture.open(deviceId).catch((error) => {
+          errorMessage = error instanceof Error ? error.message : String(error);
+        });
+      }
+    });
+  });
+
   onDestroy(() => {
+    cancelDownload();
     capture.close();
   });
 </script>
 
 <section class="mx-auto flex w-full max-w-2xl flex-col gap-4 p-4">
-  <h2 class="text-xl font-bold">{$_('recorder_title')}</h2>
 
   {#if errorMessage}
     <p class="rounded bg-red-100 p-2 text-red-800">{errorMessage}</p>
   {/if}
 
+  {#if downloadState.status === 'error' && downloadState.error}
+    <p class="rounded bg-red-100 p-2 text-red-800">{$_('download_failed')}: {downloadState.error}</p>
+  {/if}
+
   <div class="flex items-stretch gap-3">
+    <div class="flex flex-col justify-center gap-1 self-center">
+      <button
+        class="flex h-8 w-8 cursor-pointer items-center justify-center rounded bg-blue-500 text-white transition-colors hover:bg-blue-600 disabled:cursor-not-allowed disabled:opacity-50"
+        aria-label={$_('recorder_browse')}
+        onclick={() => fileInput?.click()}
+        disabled={capture.status === 'recording' || isSaving}
+        title={$_('recorder_browse')}
+      >
+        <img src="icon_browse.svg" alt="" />
+      </button>
+      <button
+        class="flex h-8 w-8 cursor-pointer items-center justify-center rounded bg-black text-white transition-colors hover:bg-green-600 disabled:cursor-not-allowed disabled:opacity-50"
+        aria-label={$_('recorder_reset')}
+        onclick={resetToFactory}
+        disabled={midiNoteState.selectedSample === null ||
+          capture.status === 'recording' ||
+          isSaving}
+        title={$_('recorder_reset')}
+      >
+        <img src="icon_reset.svg" alt="" />
+      </button>
+    </div>
+    <button
+      class="h-20 w-20 cursor-pointer self-center rounded-full bg-red-600 text-white transition-colors hover:bg-red-700 disabled:cursor-not-allowed disabled:opacity-50"
+      onclick={onRecordClick}
+      aria-label={$_('recorder_record')}
+      disabled={capture.status === 'recording' || isDownloading}
+    ></button>
     <WaveformDisplay
       {capture}
       {gainFactor}
@@ -177,6 +335,8 @@
       {trimEndMs}
       durationMs={recordedDurationMs}
       liveWindowS={MAX_SELECTION_S}
+      onTrimStartChange={onTrimStartInput}
+      onTrimEndChange={onTrimEndInput}
     />
     <div class="flex flex-col items-center gap-1">
       <input
@@ -190,90 +350,36 @@
         oninput={(e) => (gainDb = Number(e.currentTarget.value))}
         aria-label="{$_('recorder_quieter')} / {$_('recorder_louder')}"
       />
-      <span class="text-xs">{gainDb > 0 ? '+' : ''}{gainDb} dB</span>
     </div>
-  </div>
-
-  {#if capture.status === 'idle'}
-    <button
-      class="rounded-lg bg-teal-600 px-6 py-4 text-lg font-bold text-white"
-      onclick={startMonitoring}
-    >
-      {$_('recorder_start_mic')}
-    </button>
-  {:else}
-    {#if audioInputState.devices.length > 1}
-      <label class="flex flex-col gap-1 text-sm">
-        {$_('recorder_choose_mic')}
-        <select
-          class="rounded border p-2"
-          value={audioInputState.selectedDeviceId}
-          onchange={onDeviceChange}
-        >
-          {#each audioInputState.devices as device (device.deviceId)}
-            <option value={device.deviceId}>{device.label || $_('recorder_unknown_mic')}</option>
-          {/each}
-        </select>
-      </label>
-    {/if}
-
-    {#if capture.status === 'monitoring' || capture.status === 'recording'}
+    <div class="flex flex-col justify-center gap-2">
+      <button
+        class="flex h-14 w-14 cursor-pointer items-center justify-center rounded-full bg-green-600 transition-colors hover:bg-green-700 disabled:cursor-not-allowed disabled:opacity-50"
+        onclick={playSelection}
+        aria-label={$_('recorder_play')}
+        disabled={capture.status !== 'recorded'}
+      >
+        <span class="play-icon"></span>
+      </button>
       <button
-        class="rounded-lg bg-red-600 px-6 py-4 text-lg font-bold text-white disabled:opacity-50"
-        onclick={startRecording}
-        disabled={capture.status === 'recording'}
+        class="h-20 w-20 rounded-lg bg-yellow-400 text-lg font-bold disabled:opacity-50"
+        onclick={saveToDevice}
+        disabled={capture.status !== 'recorded' ||
+          midiNoteState.selectedSample === null ||
+          isSaving ||
+          isDownloading}
       >
-        {capture.status === 'recording' ? $_('recorder_recording') : $_('recorder_record')}
+        {isSaving ? $_('recorder_saving') : $_('recorder_save')}
       </button>
-    {/if}
-
-    {#if capture.status === 'recorded' && capture.recorded}
-      <div class="flex flex-col gap-2">
-        <label class="flex flex-col gap-1 text-sm">
-          {$_('recorder_trim_start')}
-          <input
-            type="range"
-            min="0"
-            max={recordedDurationMs}
-            value={trimStartMs}
-            oninput={(e) => onTrimStartInput(Number(e.currentTarget.value))}
-          />
-        </label>
-        <label class="flex flex-col gap-1 text-sm">
-          {$_('recorder_trim_end')}
-          <input
-            type="range"
-            min="0"
-            max={recordedDurationMs}
-            value={trimEndMs}
-            oninput={(e) => onTrimEndInput(Number(e.currentTarget.value))}
-          />
-        </label>
-      </div>
-
-      <div class="flex gap-2">
-        <button
-          class="flex-1 rounded-lg bg-teal-600 px-6 py-4 text-lg font-bold text-white"
-          onclick={playSelection}
-        >
-          {$_('recorder_play')}
-        </button>
-        <button
-          class="flex-1 rounded-lg bg-yellow-400 px-6 py-4 text-lg font-bold disabled:opacity-50"
-          onclick={saveToDevice}
-          disabled={midiNoteState.selectedSample === null || isSaving}
-        >
-          {isSaving ? $_('recorder_saving') : $_('recorder_save')}
-        </button>
-        <button
-          class="flex-1 rounded-lg bg-red-600 px-6 py-4 text-lg font-bold text-white"
-          onclick={() => capture.reset()}
-        >
-          {$_('recorder_again')}
-        </button>
-      </div>
-    {/if}
-  {/if}
+    </div>
+  </div>
+
+  <input
+    bind:this={fileInput}
+    type="file"
+    accept="audio/*,.wav,.mp3,.ogg,.flac,.m4a,.aac"
+    style="display: none;"
+    onchange={handleFileSelect}
+  />
 </section>
 
 <style>
@@ -287,4 +393,15 @@
   .gain-slider:disabled {
     opacity: 0.3;
   }
+
+  .play-icon {
+    display: block;
+    width: 0;
+    height: 0;
+    border-left: 16px solid white;
+    border-top: 10px solid transparent;
+    border-bottom: 10px solid transparent;
+    margin-left: 3px;
+    border-radius: 2px;
+  }
 </style>
diff --git a/src/lib/components/SettingsModal.svelte b/src/lib/components/SettingsModal.svelte
new file mode 100644
index 0000000..3c7af5b
--- /dev/null
+++ b/src/lib/components/SettingsModal.svelte
@@ -0,0 +1,112 @@
+<script lang="ts">
+  import { _ } from 'svelte-i18n';
+  import { midiState, disconnectDevice } from '$lib/stores/midi.svelte';
+  import { audioInputState, selectDevice } from '$lib/stores/audioInput.svelte';
+
+  let open = $state(false);
+
+  function onDeviceChange(event: Event) {
+    selectDevice((event.currentTarget as HTMLSelectElement).value);
+  }
+
+  function handleDisconnect() {
+    disconnectDevice();
+    open = false;
+  }
+
+  function onWindowKeydown(event: KeyboardEvent) {
+    if (open && event.key === 'Escape') {
+      open = false;
+    }
+  }
+
+  function onBackdropClick(event: MouseEvent) {
+    // Only close when the backdrop itself is clicked, not the panel
+    if (event.target === event.currentTarget) {
+      open = false;
+    }
+  }
+</script>
+
+<svelte:window onkeydown={onWindowKeydown} />
+
+<button
+  class="fixed top-4 right-4 z-40 flex h-10 w-10 cursor-pointer items-center justify-center rounded-full text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-800"
+  aria-label={$_('settings_title')}
+  title={$_('settings_title')}
+  onclick={() => (open = true)}
+>
+  <svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
+    />
+    <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+  </svg>
+</button>
+
+{#if open}
+  <div
+    class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4"
+    role="dialog"
+    aria-modal="true"
+    aria-labelledby="settings-title"
+    tabindex="-1"
+    onclick={onBackdropClick}
+    onkeydown={onWindowKeydown}
+  >
+    <div class="w-full max-w-md rounded-lg bg-white p-6 shadow-xl">
+      <h2 id="settings-title" class="text-xl font-bold text-gray-900">
+        {$_('settings_title')}
+      </h2>
+
+      <div class="mt-3 flex flex-col gap-4">
+        {#if midiState.isConnected}
+          <div class="flex items-center justify-between gap-2">
+            <p class="text-gray-700">
+              {$_('device_connected_status', {
+                values: { deviceName: midiState.selectedOutput?.name || 'Dato DRUM' }
+              })}{#if midiState.firmwareVersion}
+                ({midiState.firmwareVersion}){/if}
+            </p>
+            <button
+              class="rounded bg-gray-500 px-4 py-2 text-white hover:bg-gray-600"
+              onclick={handleDisconnect}
+            >
+              {$_('device_disconnect_button')}
+            </button>
+          </div>
+        {:else}
+          <p class="text-gray-700">{$_('settings_not_connected')}</p>
+        {/if}
+
+        {#if audioInputState.devices.length > 0}
+          <label class="flex flex-col gap-1 text-sm text-gray-700">
+            {$_('recorder_choose_mic')}
+            <select
+              class="rounded border p-2"
+              value={audioInputState.selectedDeviceId}
+              onchange={onDeviceChange}
+            >
+              {#each audioInputState.devices as device (device.deviceId)}
+                <option value={device.deviceId}>
+                  {device.label || $_('recorder_unknown_mic')}
+                </option>
+              {/each}
+            </select>
+          </label>
+        {/if}
+      </div>
+
+      <div class="mt-4 flex justify-end">
+        <button
+          class="rounded bg-gray-500 px-4 py-2 text-white hover:bg-gray-600"
+          onclick={() => (open = false)}
+        >
+          {$_('settings_close')}
+        </button>
+      </div>
+    </div>
+  </div>
+{/if}
diff --git a/src/lib/components/Track.svelte b/src/lib/components/Track.svelte
index 872f82e..5d65f65 100644
--- a/src/lib/components/Track.svelte
+++ b/src/lib/components/Track.svelte
@@ -20,6 +20,14 @@
     samples[selectedSampleIndex]?.midiNoteNumber,
   );
 
+  // Dim this track when a note on another track is selected
+  let isDimmed = $derived(
+    midiNoteState.selectedSample !== null &&
+      !samples.some(
+        (sample) => sample.midiNoteNumber === midiNoteState.selectedSample,
+      ),
+  );
+
   const voiceIcons = [
     "pad_kick.svg",
     "pad_snare.svg",
@@ -60,8 +68,9 @@
   });
 
   // Track previous values to distinguish sample-selection changes from resize changes
-  let prevSelectedSampleIndex = selectedSampleIndex;
-  let prevContainerWidthPx = 0;
+  // svelte-ignore state_referenced_locally -- intentional one-time snapshot, updated in the effect below
+  let prevSelectedSampleIndex = $state(selectedSampleIndex);
+  let prevContainerWidthPx = $state(0);
 
   // Reactive effect to update the translation when selectedSampleIndex or containerWidthPx changes
   $effect(() => {
@@ -85,7 +94,7 @@
   });
 </script>
 
-<div class="track" bind:clientWidth={containerWidthPx}>
+<div class="track" class:dimmed={isDimmed} bind:clientWidth={containerWidthPx}>
   <!-- Button strip: absolutely positioned so it can slide offscreen -->
   <div
     class="button-strip"
@@ -122,6 +131,11 @@
     grid-template-rows: auto;
     justify-items: center;
     margin-bottom: var(--track-gap);
+    transition: opacity 350ms ease-out;
+  }
+
+  .track.dimmed {
+    opacity: 0.35;
   }
 
   .button-strip {
diff --git a/src/lib/components/Voice.svelte b/src/lib/components/Voice.svelte
index 7547b67..2b7976c 100644
--- a/src/lib/components/Voice.svelte
+++ b/src/lib/components/Voice.svelte
@@ -3,6 +3,7 @@
   import { colorFilters } from "$lib/stores/colorFilters";
   import { isDraggingOverWindow } from "$lib/stores/dragDropStore";
   import { sampleUploadStore, uploadQueue } from "$lib/stores/sampleUpload";
+  import { isTransferActive } from "$lib/services/sdsProtocol";
   import { isAudioFile } from "$lib/services/audioProcessor";
   import {
     recordAudio,
@@ -17,42 +18,6 @@
 
   const logger = createLogger("Voice");
 
-  // Factory sample filename mapping
-  const FACTORY_SAMPLES: Record<number, string> = {
-    30: "30_kick_disco.wav",
-    31: "31_kick_pattern.wav",
-    32: "32_kick_big.wav",
-    33: "33_kick_cr78.wav",
-    34: "34_kick_808_long.wav",
-    35: "35_kick_gabber.wav",
-    36: "36_kick_808.wav",
-    37: "37_kick_deep.wav",
-    38: "38_snare_cr78.wav",
-    39: "39_snare_808.wav",
-    40: "40_snare_disco.wav",
-    41: "41_snare_straw.wav",
-    42: "42_snare_garage.wav",
-    43: "43_snare_heimzap.wav",
-    44: "44_snare_machine.wav",
-    45: "45_snare_backbone.wav",
-    46: "46_var_clap.wav",
-    47: "47_var_pop.wav",
-    48: "48_var_wood.wav",
-    49: "49_var_snap.wav",
-    50: "50_var_sepp.wav",
-    51: "51_var_pow.wav",
-    52: "52_var_ah.wav",
-    53: "53_var_rim.wav",
-    54: "54_hat_cr78.wav",
-    55: "55_hat_808.wav",
-    56: "56_hat_maraca.wav",
-    57: "57_hat_909_open.wav",
-    58: "58_hat_shaker.wav",
-    59: "59_hat_electro.wav",
-    60: "60_hat_second.wav",
-    61: "61_hat_backbone.wav",
-  };
-
   // Onset-trigger config disabled - using countdown instead
   const USE_ONSET_TRIGGER = false;
 
@@ -97,7 +62,7 @@
 
   // Visual feedback for MIDI note trigger
   let isNoteActive = $state(false);
-  let flashTimeout: number | undefined;
+  let flashTimeout: ReturnType<typeof setTimeout> | undefined;
 
   $effect(() => {
     // Depend on triggerId to catch every note event, even if repeated
@@ -232,87 +197,12 @@
       return;
     }
 
-    try {
-      uploadStatus = "uploading";
-      logger.info(`Uploading ${file.name} to slot ${midiNoteNumber}`);
-
-      // Use quick upload (add to queue and start immediately)
-      await sampleUploadStore.quickUpload(file, midiNoteNumber);
-
-      uploadStatus = "success";
-      logger.info(
-        `Successfully uploaded ${file.name} to slot ${midiNoteNumber}`,
-      );
-
-      // Reset success indicator after 2 seconds
-      setTimeout(() => {
-        uploadStatus = "idle";
-      }, 2000);
-    } catch (error) {
-      uploadStatus = "error";
-      uploadError = error instanceof Error ? error.message : "Upload failed";
-      logger.error(`Upload failed: ${uploadError}`);
-
-      // Reset error after 3 seconds
-      setTimeout(() => {
-        uploadStatus = "idle";
-        uploadError = null;
-      }, 3000);
-    }
-  }
-
-  // File input handler for browse button
-  let fileInput: HTMLInputElement;
-
-  function handleBrowseClick() {
-    fileInput?.click();
-  }
-
-  async function handleFileSelect(event: Event) {
-    const input = event.target as HTMLInputElement;
-    const files = input.files;
-    if (!files || files.length === 0) {
-      return;
-    }
-
-    // Simulate drop event
-    const file = files[0];
-    const dataTransfer = new DataTransfer();
-    dataTransfer.items.add(file);
-
-    await handleDrop({
-      preventDefault: () => {},
-      dataTransfer,
-    } as DragEvent);
-
-    // Reset input
-    input.value = "";
-  }
-
-  // Reset to factory sample
-  async function handleResetClick() {
-    // Check MIDI connection
-    if (!midiState.isConnected) {
-      uploadStatus = "error";
-      uploadError = "MIDI not connected";
-      logger.error("Cannot reset: MIDI device not connected");
-
-      // Reset error after 3 seconds
-      setTimeout(() => {
-        uploadStatus = "idle";
-        uploadError = null;
-      }, 3000);
-      return;
-    }
-
-    // Check if we have a factory sample for this note
-    const factorySampleFilename = FACTORY_SAMPLES[midiNoteNumber];
-    if (!factorySampleFilename) {
+    // Check for concurrent download
+    if (isTransferActive()) {
       uploadStatus = "error";
-      uploadError = "No factory sample";
-      logger.error(`No factory sample defined for MIDI note ${midiNoteNumber}`);
+      uploadError = "Transfer in progress";
+      logger.error("Cannot upload: another SDS transfer is active");
 
-      // Reset error after 3 seconds
       setTimeout(() => {
         uploadStatus = "idle";
         uploadError = null;
@@ -322,32 +212,14 @@
 
     try {
       uploadStatus = "uploading";
-      logger.info(`Loading factory sample for slot ${midiNoteNumber}`);
-
-      // Fetch factory sample
-      const response = await fetch(`/factory_kit/${factorySampleFilename}`);
-      if (!response.ok) {
-        throw new Error(
-          `Failed to load factory sample: ${response.statusText}`,
-        );
-      }
-
-      // Create File object from response
-      const blob = await response.blob();
-      const file = new File([blob], factorySampleFilename, {
-        type: "audio/wav",
-      });
-
-      logger.info(
-        `Uploading factory sample ${factorySampleFilename} to slot ${midiNoteNumber}`,
-      );
+      logger.info(`Uploading ${file.name} to slot ${midiNoteNumber}`);
 
-      // Upload via existing upload system
+      // Use quick upload (add to queue and start immediately)
       await sampleUploadStore.quickUpload(file, midiNoteNumber);
 
       uploadStatus = "success";
       logger.info(
-        `Successfully reset slot ${midiNoteNumber} to factory sample`,
+        `Successfully uploaded ${file.name} to slot ${midiNoteNumber}`,
       );
 
       // Reset success indicator after 2 seconds
@@ -356,8 +228,8 @@
       }, 2000);
     } catch (error) {
       uploadStatus = "error";
-      uploadError = error instanceof Error ? error.message : "Reset failed";
-      logger.error(`Factory reset failed: ${uploadError}`);
+      uploadError = error instanceof Error ? error.message : "Upload failed";
+      logger.error(`Upload failed: ${uploadError}`);
 
       // Reset error after 3 seconds
       setTimeout(() => {
@@ -578,46 +450,6 @@
     {/if}
   </button>
 
-  <div class="flex gap-1">
-    <button
-      class="w-8 h-8 bg-red-500 text-white rounded hover:bg-red-600 transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center cursor-pointer"
-      style="display: none"
-      aria-label="Record"
-      onclick={handleRecordClick}
-      disabled={recordingStatus !== "idle" || uploadStatus !== "idle"}
-      title={recordingStatus !== "idle"
-        ? "Recording..."
-        : "Record 1 second of audio"}
-    >
-      <img src="icon_record.svg" />
-    </button>
-    <button
-      class="w-8 h-8 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors flex items-center justify-center text-xs cursor-pointer"
-      aria-label="Browse"
-      onclick={handleBrowseClick}
-      title="Browse for audio file"
-    >
-      <img src="icon_browse.svg" />
-    </button>
-    <button
-      class="w-8 h-8 bg-black text-white rounded hover:bg-green-600 transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center cursor-pointer"
-      aria-label="Reset"
-      onclick={handleResetClick}
-      disabled={recordingStatus !== "idle" || uploadStatus !== "idle"}
-      title="Reset to factory sound"
-    >
-      <img src="icon_reset.svg" />
-    </button>
-  </div>
-
-  <!-- Hidden file input -->
-  <input
-    bind:this={fileInput}
-    type="file"
-    accept="audio/*,.wav,.mp3,.ogg,.flac,.m4a,.aac"
-    style="display: none;"
-    onchange={handleFileSelect}
-  />
 </div>
 
 <style>
diff --git a/src/lib/components/WaveformDisplay.svelte b/src/lib/components/WaveformDisplay.svelte
index 238c2f1..f16a6c9 100644
--- a/src/lib/components/WaveformDisplay.svelte
+++ b/src/lib/components/WaveformDisplay.svelte
@@ -10,6 +10,8 @@
     durationMs?: number;
     /** Length of the live scrolling view in seconds */
     liveWindowS?: number;
+    onTrimStartChange?: (ms: number) => void;
+    onTrimEndChange?: (ms: number) => void;
   }
 
   let {
@@ -18,10 +20,60 @@
     trimStartMs = 0,
     trimEndMs = 0,
     durationMs = 0,
-    liveWindowS = 1
+    liveWindowS = 1,
+    onTrimStartChange,
+    onTrimEndChange
   }: Props = $props();
 
   let canvasEl: HTMLCanvasElement;
+  let dragging: 'start' | 'end' | null = $state(null);
+  let hovering = $state(false);
+
+  const HANDLE_HIT_PX = 16;
+
+  function eventToMs(event: PointerEvent): number {
+    const rect = canvasEl.getBoundingClientRect();
+    const x = Math.max(0, Math.min(rect.width, event.clientX - rect.left));
+    return (x / rect.width) * durationMs;
+  }
+
+  function nearestHandle(event: PointerEvent): 'start' | 'end' | null {
+    const rect = canvasEl.getBoundingClientRect();
+    const x = event.clientX - rect.left;
+    const startX = (trimStartMs / durationMs) * rect.width;
+    const endX = (trimEndMs / durationMs) * rect.width;
+    const dStart = Math.abs(x - startX);
+    const dEnd = Math.abs(x - endX);
+    if (Math.min(dStart, dEnd) > HANDLE_HIT_PX) return null;
+    return dStart <= dEnd ? 'start' : 'end';
+  }
+
+  function onPointerDown(event: PointerEvent) {
+    if (capture.status !== 'recorded' || durationMs <= 0) return;
+    const handle = nearestHandle(event);
+    if (!handle) return;
+    dragging = handle;
+    canvasEl.setPointerCapture(event.pointerId);
+    event.preventDefault();
+  }
+
+  function onPointerMove(event: PointerEvent) {
+    if (capture.status !== 'recorded' || durationMs <= 0) return;
+    if (dragging) {
+      const ms = eventToMs(event);
+      if (dragging === 'start') onTrimStartChange?.(ms);
+      else onTrimEndChange?.(ms);
+    } else {
+      hovering = nearestHandle(event) !== null;
+    }
+  }
+
+  function onPointerUp(event: PointerEvent) {
+    if (dragging) {
+      canvasEl.releasePointerCapture(event.pointerId);
+      dragging = null;
+    }
+  }
 
   onMount(() => {
     let animationFrame = requestAnimationFrame(draw);
@@ -61,6 +113,11 @@
         ctx.fillStyle = '#ffd200';
         ctx.fillRect(startX - 2 * dpr, 0, 4 * dpr, height);
         ctx.fillRect(endX - 2 * dpr, 0, 4 * dpr, height);
+        ctx.beginPath();
+        ctx.arc(startX, midY, 8 * dpr, 0, Math.PI * 2);
+        ctx.moveTo(endX + 8 * dpr, midY);
+        ctx.arc(endX, midY, 8 * dpr, 0, Math.PI * 2);
+        ctx.fill();
       } else if (capture.status === 'monitoring' || capture.status === 'recording') {
         // Live scrolling view of the recent past
         drawWaveform(ctx, capture.readLiveWindow(liveWindowS), 1, width, height, dpr);
@@ -120,4 +177,12 @@
   }
 </script>
 
-<canvas bind:this={canvasEl} class="h-40 min-w-0 flex-1 rounded-lg"></canvas>
+<canvas
+  bind:this={canvasEl}
+  class="h-40 min-w-0 flex-1 touch-none rounded-lg"
+  class:cursor-ew-resize={dragging !== null || hovering}
+  onpointerdown={onPointerDown}
+  onpointermove={onPointerMove}
+  onpointerup={onPointerUp}
+  onpointercancel={onPointerUp}
+></canvas>
diff --git a/src/lib/config/factorySamples.ts b/src/lib/config/factorySamples.ts
new file mode 100644
index 0000000..ca85dcd
--- /dev/null
+++ b/src/lib/config/factorySamples.ts
@@ -0,0 +1,37 @@
+/**
+ * Factory sample filenames by MIDI note number, served from /factory_kit/.
+ */
+export const FACTORY_SAMPLES: Record<number, string> = {
+  30: '30_kick_disco.wav',
+  31: '31_kick_pattern.wav',
+  32: '32_kick_big.wav',
+  33: '33_kick_cr78.wav',
+  34: '34_kick_808_long.wav',
+  35: '35_kick_gabber.wav',
+  36: '36_kick_808.wav',
+  37: '37_kick_deep.wav',
+  38: '38_snare_cr78.wav',
+  39: '39_snare_808.wav',
+  40: '40_snare_disco.wav',
+  41: '41_snare_straw.wav',
+  42: '42_snare_garage.wav',
+  43: '43_snare_heimzap.wav',
+  44: '44_snare_machine.wav',
+  45: '45_snare_backbone.wav',
+  46: '46_var_clap.wav',
+  47: '47_var_pop.wav',
+  48: '48_var_wood.wav',
+  49: '49_var_snap.wav',
+  50: '50_var_sepp.wav',
+  51: '51_var_pow.wav',
+  52: '52_var_ah.wav',
+  53: '53_var_rim.wav',
+  54: '54_hat_cr78.wav',
+  55: '55_hat_808.wav',
+  56: '56_hat_maraca.wav',
+  57: '57_hat_909_open.wav',
+  58: '58_hat_shaker.wav',
+  59: '59_hat_electro.wav',
+  60: '60_hat_second.wav',
+  61: '61_hat_backbone.wav'
+};
diff --git a/src/lib/services/audioAnalysis.ts b/src/lib/services/audioAnalysis.ts
index 0f4c759..0e4dc04 100644
--- a/src/lib/services/audioAnalysis.ts
+++ b/src/lib/services/audioAnalysis.ts
@@ -127,6 +127,46 @@ export function resampleLinear(
   return output;
 }
 
+/**
+ * Decode an audio file to mono, optionally resampled to a target sample
+ * rate. Downmixes by averaging all channels (2-channel behavior matches
+ * the original stereo-to-mono average). Always closes the AudioContext it
+ * creates.
+ */
+export async function decodeToMono(
+  arrayBuffer: ArrayBuffer,
+  targetSampleRate?: number
+): Promise<{ samples: Float32Array; sampleRate: number }> {
+  const ctx = new AudioContext();
+  try {
+    const audioBuffer = await ctx.decodeAudioData(arrayBuffer);
+    let samples: Float32Array;
+    if (audioBuffer.numberOfChannels === 1) {
+      samples = audioBuffer.getChannelData(0);
+    } else {
+      const channels = Array.from({ length: audioBuffer.numberOfChannels }, (_, ch) =>
+        audioBuffer.getChannelData(ch)
+      );
+      samples = new Float32Array(audioBuffer.length);
+      for (let i = 0; i < samples.length; i++) {
+        let sum = 0;
+        for (const channel of channels) sum += channel[i];
+        samples[i] = sum / channels.length;
+      }
+    }
+
+    let sampleRate = audioBuffer.sampleRate;
+    if (targetSampleRate !== undefined && sampleRate !== targetSampleRate) {
+      samples = resampleLinear(samples, sampleRate, targetSampleRate);
+      sampleRate = targetSampleRate;
+    }
+
+    return { samples, sampleRate };
+  } finally {
+    await ctx.close();
+  }
+}
+
 /**
  * Convert float samples in [-1, 1] to 16-bit little-endian PCM,
  * clamping out-of-range values.
diff --git a/src/lib/services/sampleCapture.svelte.ts b/src/lib/services/sampleCapture.svelte.ts
index eb4127f..41d5b20 100644
--- a/src/lib/services/sampleCapture.svelte.ts
+++ b/src/lib/services/sampleCapture.svelte.ts
@@ -12,6 +12,7 @@
  */
 
 import { createLogger } from '$lib/utils/logger';
+import { resampleLinear } from '$lib/services/audioAnalysis';
 
 const logger = createLogger('SampleCapture');
 
@@ -28,6 +29,7 @@ export class SampleCapture {
   sampleRate = 44100;
 
   private audioContext: AudioContext | null = null;
+  private playbackContext: AudioContext | null = null;
   private mediaStream: MediaStream | null = null;
   private workletNode: AudioWorkletNode | null = null;
   private sourceNode: MediaStreamAudioSourceNode | null = null;
@@ -97,11 +99,28 @@ export class SampleCapture {
     });
   }
 
-  /** Discard the current recording and go back to live monitoring. */
+  /**
+   * Load an externally sourced buffer (browsed file, factory sample) as if it
+   * had been recorded, so it can be trimmed and played back. Works without an
+   * open microphone stream. Accepts samples at any sample rate and resamples
+   * to `this.sampleRate` when it differs from the incoming rate.
+   */
+  load(samples: Float32Array, sampleRate: number): void {
+    this.recorded =
+      sampleRate !== this.sampleRate
+        ? resampleLinear(samples, sampleRate, this.sampleRate)
+        : samples;
+    this.status = 'recorded';
+  }
+
+  /**
+   * Discard the current recording and go back to live monitoring, or to idle
+   * when no microphone stream is open.
+   */
   reset(): void {
     this.recorded = null;
     if (this.status === 'recorded') {
-      this.status = 'monitoring';
+      this.status = this.audioContext ? 'monitoring' : 'idle';
     }
   }
 
@@ -110,14 +129,18 @@ export class SampleCapture {
     return this.readRingTail(Math.floor(seconds * this.sampleRate));
   }
 
-  /** Play back a buffer of samples through the capture context. */
+  /**
+   * Play back a buffer of samples through the capture context, or a dedicated
+   * playback context when the microphone is not open.
+   */
   play(samples: Float32Array): void {
-    if (!this.audioContext || samples.length === 0) return;
-    const buffer = this.audioContext.createBuffer(1, samples.length, this.sampleRate);
+    if (samples.length === 0) return;
+    const ctx = this.audioContext ?? (this.playbackContext ??= new AudioContext());
+    const buffer = ctx.createBuffer(1, samples.length, this.sampleRate);
     buffer.copyToChannel(samples, 0);
-    const source = this.audioContext.createBufferSource();
+    const source = ctx.createBufferSource();
     source.buffer = buffer;
-    source.connect(this.audioContext.destination);
+    source.connect(ctx.destination);
     source.start();
   }
 
@@ -132,6 +155,8 @@ export class SampleCapture {
     this.mediaStream = null;
     this.audioContext?.close();
     this.audioContext = null;
+    this.playbackContext?.close();
+    this.playbackContext = null;
     this.onCaptureComplete = null;
     this.status = 'idle';
   }
diff --git a/src/lib/services/sdsProtocol.ts b/src/lib/services/sdsProtocol.ts
index 697b04f..141632e 100644
--- a/src/lib/services/sdsProtocol.ts
+++ b/src/lib/services/sdsProtocol.ts
@@ -2,11 +2,13 @@
  * MIDI Sample Dump Standard (SDS) Protocol Implementation
  *
  * This service implements the MIDI SDS protocol for reliable sample transfer
- * to the Dato DRUM device. It handles:
- * - Dump header creation
- * - Data packet encoding with checksum validation
+ * to and from the Dato DRUM device. It handles:
+ * - Dump header creation and parsing
+ * - Data packet encoding/decoding with checksum validation
  * - ACK/NAK handshaking with timeout fallback
  * - Progress monitoring
+ * - Dump Request (download) with incoming data packet reception
+ * - Transfer lock to prevent concurrent uploads/downloads
  */
 
 import { midiState } from '$lib/stores/midi.svelte';
@@ -23,14 +25,16 @@ const SYSEX_CHANNEL = 0x65; // DRUM device channel
 // SDS Message Types
 const SDS_DUMP_HEADER = 0x01;
 const SDS_DATA_PACKET = 0x02;
+const SDS_DUMP_REQUEST = 0x03;
 const SDS_ACK = 0x7F;
 const SDS_NAK = 0x7E;
 const SDS_CANCEL = 0x7D;
 const SDS_WAIT = 0x7C;
 
 // Timeouts
-const PACKET_TIMEOUT = 20;   // 20ms per packet as per SDS spec
-const HEADER_TIMEOUT = 2000; // 2 second timeout for dump header
+const PACKET_TIMEOUT = 20;    // 20ms per packet as per SDS spec
+const HEADER_TIMEOUT = 2000;  // 2 second timeout for dump header
+const DOWNLOAD_MSG_TIMEOUT = 2000; // 2 second per-message timeout for downloads
 
 // Response handling
 interface SdsResponse {
@@ -38,13 +42,59 @@ interface SdsResponse {
   packet: number;
 }
 
+// Incoming message for download (dump header or data packet from device)
+interface SdsIncomingMessage {
+  type: 'header' | 'data' | 'cancel' | 'nak' | 'timeout' | 'aborted';
+  raw?: Uint8Array;
+}
+
 let pendingResponse: {
   resolve: (response: SdsResponse) => void;
   timer: number;
 } | null = null;
 
+// Pending incoming message resolver for download flow
+let pendingIncoming: {
+  resolve: (msg: SdsIncomingMessage) => void;
+  timer: number;
+} | null = null;
+
+// Messages that arrive while no waitForIncoming() is armed (SDS packets can
+// arrive back-to-back faster than the receive loop re-arms) are queued here
+// so they are never dropped.
+let incomingQueue: SdsIncomingMessage[] = [];
+
 let messageHandler: ((this: MIDIInput, ev: MIDIMessageEvent) => any) | null = null;
 
+// Transfer lock: prevents concurrent SDS uploads/downloads
+let _activeTransfer: 'upload' | 'download' | null = null;
+
+/**
+ * Check whether an SDS transfer (upload or download) is currently active.
+ */
+export function isTransferActive(): boolean {
+  return _activeTransfer !== null;
+}
+
+/**
+ * Acquire the transfer lock. Throws if a transfer is already in progress.
+ */
+export function acquireTransferLock(direction: 'upload' | 'download'): void {
+  if (_activeTransfer) {
+    throw new Error(`Cannot start ${direction}: another SDS transfer is already active`);
+  }
+  _activeTransfer = direction;
+  logger.info(`Transfer lock acquired (${direction})`);
+}
+
+/**
+ * Release the transfer lock.
+ */
+export function releaseTransferLock(): void {
+  _activeTransfer = null;
+  logger.info('Transfer lock released');
+}
+
 /**
  * Check if a MIDI message is an SDS message
  */
@@ -70,7 +120,7 @@ function handleMidiMessage(this: MIDIInput, event: MIDIMessageEvent): void {
     const messageType = message[3];
     const packetNum = message.length > 4 ? message[4] : 0;
 
-    // Handle responses during handshaking
+    // Handle ACK/NAK/WAIT/CANCEL responses during upload handshaking
     if (pendingResponse && (messageType === SDS_ACK || messageType === SDS_NAK ||
                            messageType === SDS_WAIT || messageType === SDS_CANCEL)) {
       clearTimeout(pendingResponse.timer);
@@ -84,6 +134,32 @@ function handleMidiMessage(this: MIDIInput, event: MIDIMessageEvent): void {
       pendingResponse.resolve({ type, packet: packetNum });
       pendingResponse = null;
     }
+
+    // Handle incoming dump header/data/cancel during download
+    if (_activeTransfer === 'download') {
+      let incoming: SdsIncomingMessage | null = null;
+      if (messageType === SDS_DUMP_HEADER) {
+        incoming = { type: 'header', raw: new Uint8Array(message) };
+      } else if (messageType === SDS_DATA_PACKET) {
+        incoming = { type: 'data', raw: new Uint8Array(message) };
+      } else if (messageType === SDS_CANCEL) {
+        incoming = { type: 'cancel' };
+      } else if (messageType === SDS_NAK) {
+        incoming = { type: 'nak' };
+      }
+
+      if (incoming) {
+        if (pendingIncoming) {
+          clearTimeout(pendingIncoming.timer);
+          const { resolve } = pendingIncoming;
+          pendingIncoming = null;
+          resolve(incoming);
+        } else {
+          // Receive loop is busy processing the previous message — queue it
+          incomingQueue.push(incoming);
+        }
+      }
+    }
   }
 }
 
@@ -297,6 +373,8 @@ export async function transferSampleViaSds(
     throw new Error(`Sample number must be between 30-61, got: ${sampleNumber}`);
   }
 
+  acquireTransferLock('upload');
+
   logger.info(`Starting SDS transfer: slot ${sampleNumber}, ${pcmData.length} bytes, ${sampleRate}Hz`);
 
   const totalPackets = Math.ceil(pcmData.length / 80); // 40 samples * 2 bytes per packet
@@ -408,5 +486,309 @@ export async function transferSampleViaSds(
   } catch (error) {
     logger.error('SDS transfer failed: ' + (error instanceof Error ? error.message : String(error)));
     throw error;
+  } finally {
+    releaseTransferLock();
+  }
+}
+
+// ── Download (Dump Request) ─────────────────────────────────────────────
+
+/**
+ * Progress callback for sample download
+ */
+export interface SdsDownloadProgress {
+  stage: 'request' | 'header' | 'data' | 'complete';
+  packet?: number;
+  totalPackets?: number;
+  percentage: number;
+}
+
+/**
+ * Result of a successful sample download
+ */
+export interface SdsDownloadResult {
+  /** Decoded signed 16-bit samples as Float32Array (range -1..1) */
+  samples: Float32Array;
+  sampleRate: number;
+  /** Number of 16-bit words reported in the dump header */
+  lengthWords: number;
+}
+
+/**
+ * Wait for an incoming SDS message from the device (dump header or data
+ * packet). Returns a queued message immediately if one arrived while the
+ * receive loop was busy; resolves with 'aborted' when the signal fires.
+ */
+function waitForIncoming(timeout: number, abortSignal?: AbortSignal): Promise<SdsIncomingMessage> {
+  const queued = incomingQueue.shift();
+  if (queued) {
+    return Promise.resolve(queued);
+  }
+
+  if (abortSignal?.aborted) {
+    return Promise.resolve({ type: 'aborted' });
+  }
+
+  return new Promise((resolve) => {
+    // Cancel any existing pending incoming
+    if (pendingIncoming) {
+      clearTimeout(pendingIncoming.timer);
+      pendingIncoming.resolve({ type: 'timeout' });
+    }
+
+    const settle = (msg: SdsIncomingMessage) => {
+      abortSignal?.removeEventListener('abort', onAbort);
+      resolve(msg);
+    };
+
+    const onAbort = () => {
+      if (pendingIncoming?.resolve === settle) {
+        clearTimeout(pendingIncoming.timer);
+        pendingIncoming = null;
+      }
+      settle({ type: 'aborted' });
+    };
+
+    const timer = window.setTimeout(() => {
+      pendingIncoming = null;
+      settle({ type: 'timeout' });
+    }, timeout);
+
+    pendingIncoming = { resolve: settle, timer };
+    abortSignal?.addEventListener('abort', onAbort, { once: true });
+  });
+}
+
+/**
+ * Send ACK for a received packet
+ */
+function sendAck(packetNum: number): void {
+  sendSdsMessage([SDS_ACK, packetNum & 0x7F]);
+}
+
+/**
+ * Send NAK for a received packet (request retransmission)
+ */
+function sendNak(packetNum: number): void {
+  sendSdsMessage([SDS_NAK, packetNum & 0x7F]);
+}
+
+/**
+ * Send CANCEL to abort a transfer
+ */
+export function sendCancel(): void {
+  sendSdsMessage([SDS_CANCEL, 0x00]);
+  logger.info('Sent SDS CANCEL');
+}
+
+/**
+ * Decode a 21-bit value from 3 SDS 7-bit groups (LSB first)
+ */
+function decode21Bit(b0: number, b1: number, b2: number): number {
+  return (b0 & 0x7F) | ((b1 & 0x7F) << 7) | ((b2 & 0x7F) << 14);
+}
+
+/**
+ * Verify the checksum of an incoming SDS data packet.
+ * Checksum = XOR of bytes at positions [1] through [data.length-3], masked & 0x7F.
+ */
+function verifyPacketChecksum(raw: Uint8Array): boolean {
+  // raw layout: F0 7E 65 02 <pkt#> <120 data bytes> <checksum> F7
+  // checksum covers bytes [1..length-3] (i.e. 7E, 65, 02, pkt#, and 120 data bytes)
+  let xor = 0;
+  for (let i = 1; i <= raw.length - 3; i++) {
+    xor ^= raw[i];
+  }
+  xor &= 0x7F;
+  const expected = raw[raw.length - 2];
+  return xor === expected;
+}
+
+/**
+ * Unpack a single 16-bit sample from 3 SDS bytes (left-justified)
+ *
+ * value = ((b0 & 0x7F) << 9) | ((b1 & 0x7F) << 2) | ((b2 & 0x7F) >> 5)
+ * Then subtract 0x8000 to get signed 16-bit.
+ */
+function unpack16BitSample(b0: number, b1: number, b2: number): number {
+  const unsigned = ((b0 & 0x7F) << 9) | ((b1 & 0x7F) << 2) | ((b2 & 0x7F) >> 5);
+  return unsigned - 0x8000; // convert to signed
+}
+
+/**
+ * Download a sample from the Dato DRUM via SDS Dump Request.
+ *
+ * Sends a Dump Request, receives the Dump Header and Data Packets,
+ * and returns the decoded sample data.
+ *
+ * @param sampleNumber - Slot number (30-61)
+ * @param onProgress - Progress callback
+ * @param abortSignal - Optional AbortSignal to cancel the download
+ * @returns The downloaded sample data, or null if the slot is empty
+ */
+export async function receiveSampleViaSds(
+  sampleNumber: number,
+  onProgress?: (progress: SdsDownloadProgress) => void,
+  abortSignal?: AbortSignal
+): Promise<SdsDownloadResult | null> {
+  if (sampleNumber < 30 || sampleNumber > 61) {
+    throw new Error(`Sample number must be between 30-61, got: ${sampleNumber}`);
+  }
+
+  acquireTransferLock('download');
+
+  logger.info(`Starting SDS download: slot ${sampleNumber}`);
+
+  incomingQueue = [];
+
+  try {
+    // Step 1: Send Dump Request
+    // F0 7E 65 03 <slot LSB> <slot MSB> F7
+    const slotLsb = sampleNumber & 0x7F;
+    const slotMsb = (sampleNumber >> 7) & 0x7F;
+    sendSdsMessage([SDS_DUMP_REQUEST, slotLsb, slotMsb]);
+
+    onProgress?.({ stage: 'request', percentage: 0 });
+
+    // Step 2: Wait for Dump Header (or CANCEL if slot is empty)
+    const headerMsg = await waitForIncoming(DOWNLOAD_MSG_TIMEOUT, abortSignal);
+
+    if (headerMsg.type === 'aborted') {
+      sendCancel();
+      throw new Error('Download aborted');
+    }
+
+    if (headerMsg.type === 'cancel') {
+      logger.info(`Slot ${sampleNumber} is empty (device sent CANCEL)`);
+      return null; // Slot is empty — not an error
+    }
+
+    if (headerMsg.type === 'timeout') {
+      throw new Error('No response from device — firmware may not support SDS download');
+    }
+
+    if (headerMsg.type === 'nak') {
+      throw new Error('Device rejected dump request');
+    }
+
+    if (headerMsg.type !== 'header' || !headerMsg.raw) {
+      throw new Error(`Unexpected response type: ${headerMsg.type}`);
+    }
+
+    // Parse Dump Header
+    // Layout: F0 7E 65 01 sl sh ee p1 p2 p3 g1 g2 g3 ... F7
+    const hdr = headerMsg.raw;
+    const bitDepth = hdr[6];
+    const samplePeriodNs = decode21Bit(hdr[7], hdr[8], hdr[9]);
+    const lengthWords = decode21Bit(hdr[10], hdr[11], hdr[12]);
+
+    const sampleRate = samplePeriodNs > 0 ? Math.round(1000000000 / samplePeriodNs) : 44100;
+    const totalBytes = lengthWords * 2;
+    const totalPackets = Math.ceil(lengthWords / 40); // 40 samples per packet
+
+    logger.info(`Dump header: ${bitDepth}-bit, ${sampleRate}Hz, ${lengthWords} words (${totalPackets} packets)`);
+
+    onProgress?.({ stage: 'header', percentage: 0 });
+
+    // ACK the header
+    sendAck(0x00);
+
+    // Step 3: Receive Data Packets
+    const allSamples = new Int16Array(lengthWords);
+    let samplesReceived = 0;
+    let expectedPacketNum = 0;
+    let lastAckedPacket = -1;
+
+    while (samplesReceived < lengthWords) {
+      const dataMsg = await waitForIncoming(DOWNLOAD_MSG_TIMEOUT, abortSignal);
+
+      if (dataMsg.type === 'aborted') {
+        sendCancel();
+        throw new Error('Download aborted');
+      }
+
+      if (dataMsg.type === 'timeout') {
+        throw new Error('Device stopped responding during download');
+      }
+
+      if (dataMsg.type === 'cancel') {
+        throw new Error('Device cancelled download');
+      }
+
+      if (dataMsg.type !== 'data' || !dataMsg.raw) {
+        throw new Error(`Unexpected message during download: ${dataMsg.type}`);
+      }
+
+      const raw = dataMsg.raw;
+      const packetNum = raw[4] & 0x7F;
+
+      // Verify checksum
+      if (!verifyPacketChecksum(raw)) {
+        logger.warn(`Packet ${packetNum} checksum failed — sending NAK`);
+        sendNak(packetNum);
+        continue;
+      }
+
+      // Handle duplicate packets (our previous ACK may have been lost)
+      if (packetNum === lastAckedPacket) {
+        logger.debug(`Duplicate packet ${packetNum} — re-ACKing`);
+        sendAck(packetNum);
+        continue;
+      }
+
+      // Reject out-of-order packets — writing them into the buffer at the
+      // current offset would silently corrupt the sample
+      if (packetNum !== expectedPacketNum) {
+        logger.warn(`Out-of-order packet ${packetNum} (expected ${expectedPacketNum}) — sending NAK`);
+        sendNak(expectedPacketNum);
+        continue;
+      }
+
+      // Decode 40 samples from 120 data bytes (bytes [5..124])
+      const dataStart = 5;
+      for (let i = 0; i < 40 && samplesReceived < lengthWords; i++) {
+        const b0 = raw[dataStart + i * 3];
+        const b1 = raw[dataStart + i * 3 + 1];
+        const b2 = raw[dataStart + i * 3 + 2];
+        allSamples[samplesReceived] = unpack16BitSample(b0, b1, b2);
+        samplesReceived++;
+      }
+
+      // ACK this packet
+      sendAck(packetNum);
+      lastAckedPacket = packetNum;
+      expectedPacketNum = (packetNum + 1) & 0x7F;
+
+      // Progress update
+      const percentage = Math.min(100, (samplesReceived / lengthWords) * 100);
+      onProgress?.({
+        stage: 'data',
+        packet: Math.ceil(samplesReceived / 40),
+        totalPackets,
+        percentage
+      });
+    }
+
+    logger.info(`Download complete: ${samplesReceived} samples received`);
+
+    // Convert Int16Array to Float32Array (normalized -1..1)
+    const floatSamples = new Float32Array(lengthWords);
+    for (let i = 0; i < lengthWords; i++) {
+      floatSamples[i] = allSamples[i] / 32768;
+    }
+
+    onProgress?.({ stage: 'complete', percentage: 100 });
+
+    return {
+      samples: floatSamples,
+      sampleRate,
+      lengthWords
+    };
+  } catch (error) {
+    logger.error('SDS download failed: ' + (error instanceof Error ? error.message : String(error)));
+    throw error;
+  } finally {
+    incomingQueue = [];
+    releaseTransferLock();
   }
 }
diff --git a/src/lib/services/slotSampleLoader.ts b/src/lib/services/slotSampleLoader.ts
new file mode 100644
index 0000000..0f8f890
--- /dev/null
+++ b/src/lib/services/slotSampleLoader.ts
@@ -0,0 +1,54 @@
+/**
+ * Slot Sample Loader
+ *
+ * Orchestrates loading a pad's audio into the editor when its slot is
+ * selected: show cached audio (factory/device/upload) instantly, then — if
+ * the 'downloadOnSelect' feature flag is on and we don't already hold the
+ * device's own audio for this slot — download it and load that in too,
+ * provided the user hasn't since selected a different slot.
+ */
+
+import { getCachedSample, hasDeviceSample } from '$lib/stores/sampleCache';
+import { downloadState, downloadSample } from '$lib/stores/sampleDownload.svelte';
+import { featureFlags } from '$lib/stores/featureFlags.svelte';
+import { createLogger } from '$lib/utils/logger';
+
+const logger = createLogger('SlotSampleLoader');
+
+export interface LoadSlotSampleOptions {
+  /** Whether `slot` is still the selected slot (checked before applying a download result). */
+  isSlotStillSelected: (slot: number) => boolean;
+  /** Called with sample data to load into the editor. */
+  onSamples: (samples: Float32Array, sampleRate: number, source: string) => void;
+}
+
+/**
+ * Load the given slot's sample(s) into the editor: cache hit first, then an
+ * optional device download. Never throws — download errors are logged and
+ * swallowed (they're also already reflected in `downloadState`).
+ */
+export async function loadSlotSample(slot: number, opts: LoadSlotSampleOptions): Promise<void> {
+  const cached = getCachedSample(slot);
+  if (cached) {
+    opts.onSamples(cached.samples, cached.sampleRate, cached.source);
+    logger.info(`Loaded ${cached.source} sample for slot ${slot} from cache`);
+  }
+
+  if (!featureFlags.downloadOnSelect || hasDeviceSample(slot)) return;
+
+  try {
+    const result = await downloadSample(slot);
+    if (result && result.samples.length > 0) {
+      // Only load if the user hasn't moved on to another slot meanwhile
+      if (opts.isSlotStillSelected(slot)) {
+        opts.onSamples(result.samples, result.sampleRate, 'download');
+        logger.info(`Loaded downloaded sample for slot ${slot} into buffer`);
+      }
+    } else if (downloadState.status === 'empty') {
+      logger.info(`Slot ${slot} is empty on device`);
+    }
+  } catch (error) {
+    // Errors are already logged and stored in downloadState
+    logger.debug(`Download error for slot ${slot}: ${error}`);
+  }
+}
diff --git a/src/lib/stores/featureFlags.svelte.ts b/src/lib/stores/featureFlags.svelte.ts
index 56a11fc..a29ce85 100644
--- a/src/lib/stores/featureFlags.svelte.ts
+++ b/src/lib/stores/featureFlags.svelte.ts
@@ -10,12 +10,15 @@ interface FeatureFlags {
   sampleRecorder: boolean;
   legacyFirmwareUpgrade: boolean;
   sysexFirmwareUpgrade: boolean;
+  /** Download the slot's sample from the device on pad selection (slow: ~1s, freezes the sequencer). When off, only the cached/factory sample is shown. */
+  downloadOnSelect: boolean;
 }
 
 const defaults: FeatureFlags = {
   sampleRecorder: false,
   legacyFirmwareUpgrade: false,
-  sysexFirmwareUpgrade: false
+  sysexFirmwareUpgrade: false,
+  downloadOnSelect: false
 };
 
 function loadFlags(): FeatureFlags {
diff --git a/src/lib/stores/midi.svelte.ts b/src/lib/stores/midi.svelte.ts
index 0d7a70f..8dc1f3d 100644
--- a/src/lib/stores/midi.svelte.ts
+++ b/src/lib/stores/midi.svelte.ts
@@ -56,6 +56,7 @@ const DRUM_DEVICE_FILTERS_LOWER = DRUM_DEVICE_FILTERS.map((f) => f.toLowerCase()
 const NOTE_ON_VELOCITY = 127;
 const NOTE_OFF_VELOCITY = 0;
 const NOTE_DURATION_MS = 100;
+const MIN_VELOCITY_FOR_SELECTION = 120;
 const IDENTITY_RETRY_DELAY_MS = 1000;
 
 const logger = createLogger('MIDI');
@@ -150,8 +151,10 @@ function handleMidiNoteMessage(data: Uint8Array): void {
     const status = statusCode & MIDI_STATUS_MASK;
 
     if (status === MIDI_NOTE_ON && velocity > 0) {
+        if (velocity >= MIN_VELOCITY_FOR_SELECTION) {
+            midiNoteState.selectedSample = noteNumber;
+        }
         midiNoteState.active = noteNumber;
-        midiNoteState.selectedSample = noteNumber;
         midiNoteState.triggerId++;
         midiNoteState.lastTriggeredNote = noteNumber;
     } else if (status === MIDI_NOTE_OFF || (status === MIDI_NOTE_ON && velocity === 0)) {
diff --git a/src/lib/stores/sampleCache.ts b/src/lib/stores/sampleCache.ts
new file mode 100644
index 0000000..6837ccc
--- /dev/null
+++ b/src/lib/stores/sampleCache.ts
@@ -0,0 +1,84 @@
+/**
+ * Sample Cache
+ *
+ * In-memory cache of sample audio per slot so selecting a pad never has to
+ * wait for a device transfer twice. Two sources:
+ *
+ * - 'factory': preloaded from /factory_kit/ WAV files at app start
+ * - 'device': downloaded from the DRUM via SDS, or just uploaded by the user
+ *
+ * Device entries always take precedence over factory entries.
+ */
+
+import { FACTORY_SAMPLES } from '$lib/config/factorySamples';
+import { decodeToMono } from '$lib/services/audioAnalysis';
+import { createLogger } from '$lib/utils/logger';
+
+const logger = createLogger('SampleCache');
+
+export type SampleSource = 'factory' | 'device';
+
+export interface CachedSample {
+  samples: Float32Array;
+  sampleRate: number;
+  source: SampleSource;
+}
+
+const cache = new Map<number, CachedSample>();
+
+/** Get the cached sample for a slot; device entries win over factory ones. */
+export function getCachedSample(slot: number): CachedSample | null {
+  return cache.get(slot) ?? null;
+}
+
+/** True when we already hold the device's own audio for this slot. */
+export function hasDeviceSample(slot: number): boolean {
+  return cache.get(slot)?.source === 'device';
+}
+
+/**
+ * Store a device-sourced sample (SDS download, or audio the user just
+ * uploaded — after upload the device holds exactly this audio).
+ */
+export function cacheDeviceSample(slot: number, samples: Float32Array, sampleRate: number): void {
+  cache.set(slot, { samples, sampleRate, source: 'device' });
+}
+
+let preloadPromise: Promise<void> | null = null;
+
+/**
+ * Fetch and decode all factory samples into the cache. Safe to call multiple
+ * times; only runs once. Never overwrites device-sourced entries.
+ */
+export function preloadFactorySamples(): Promise<void> {
+  if (typeof window === 'undefined') return Promise.resolve();
+  preloadPromise ??= doPreload();
+  return preloadPromise;
+}
+
+async function doPreload(): Promise<void> {
+  let loaded = 0;
+
+  await Promise.all(
+    Object.entries(FACTORY_SAMPLES).map(async ([slotKey, filename]) => {
+      const slot = Number(slotKey);
+      try {
+        const response = await fetch(`/factory_kit/${filename}`);
+        if (!response.ok) {
+          throw new Error(response.statusText);
+        }
+        const { samples, sampleRate } = await decodeToMono(await response.arrayBuffer());
+        if (!cache.has(slot)) {
+          cache.set(slot, { samples, sampleRate, source: 'factory' });
+        }
+        loaded++;
+      } catch (error) {
+        logger.warn(
+          `Failed to preload factory sample ${filename}: ${error instanceof Error ? error.message : String(error)}`
+        );
+      }
+    })
+  );
+
+  logger.info(`Preloaded ${loaded}/${Object.keys(FACTORY_SAMPLES).length} factory samples`);
+}
diff --git a/src/lib/stores/sampleDownload.svelte.ts b/src/lib/stores/sampleDownload.svelte.ts
new file mode 100644
index 0000000..4a61b40
--- /dev/null
+++ b/src/lib/stores/sampleDownload.svelte.ts
@@ -0,0 +1,205 @@
+/**
+ * Sample Download Store
+ *
+ * Manages sample download state for reading samples from the Dato DRUM
+ * device via SDS Dump Request. Uses Svelte 5 runes for reactive state.
+ *
+ * The download is triggered when a note/slot is selected. Callers receive
+ * the downloaded sample data via the `downloadSample` promise; the store
+ * itself only tracks status/progress/error for the in-flight transfer.
+ */
+
+'use runes';
+
+import { midiState } from './midi.svelte';
+import {
+  receiveSampleViaSds,
+  initializeSdsListener,
+  cleanupSdsListener,
+  isTransferActive,
+  sendCancel,
+  type SdsDownloadProgress,
+  type SdsDownloadResult
+} from '$lib/services/sdsProtocol';
+import { createLogger } from '$lib/utils/logger';
+import { cacheDeviceSample } from '$lib/stores/sampleCache';
+
+const logger = createLogger('SampleDownload');
+
+export type DownloadStatus = 'idle' | 'downloading' | 'done' | 'empty' | 'error';
+
+interface DownloadState {
+  status: DownloadStatus;
+  /** The slot currently being downloaded (or last downloaded) */
+  slot: number | null;
+  /** Progress percentage 0-100 */
+  progress: number;
+  /** Error message if status is 'error' */
+  error: string | null;
+}
+
+const downloadState = $state<DownloadState>({
+  status: 'idle',
+  slot: null,
+  progress: 0,
+  error: null
+});
+
+let abortController: AbortController | null = null;
+
+/** In-flight download promise; awaited after an abort so the transfer lock is released before a new download starts. Never rejects. */
+let activeDownload: Promise<SdsDownloadResult | null> | null = null;
+
+/** Delay before requesting a dump so the device can finish playing the sample before the transfer freezes it. */
+const PRE_DUMP_DELAY_MS = 1000;
+
+/** Abortable delay; rejects with an AbortError when the signal fires. */
+function delay(ms: number, signal: AbortSignal): Promise<void> {
+  return new Promise((resolve, reject) => {
+    const timer = setTimeout(() => resolve(), ms);
+    signal.addEventListener(
+      'abort',
+      () => {
+        clearTimeout(timer);
+        reject(new DOMException('Aborted', 'AbortError'));
+      },
+      { once: true }
+    );
+  });
+}
+
+/**
+ * Download a sample from the device for the given slot.
+ *
+ * If another download is already running, it is aborted first.
+ * If an upload is active, the download is rejected (device doesn't allow
+ * concurrent transfers).
+ *
+ * @param slot - MIDI note number / slot (30-61)
+ * @returns The download result, or null if the slot is empty
+ */
+async function downloadSample(slot: number): Promise<SdsDownloadResult | null> {
+  // Abort any in-progress download and wait for it to wind down — the
+  // aborted transfer only releases the SDS transfer lock once its promise
+  // settles, and isTransferActive() below must see the released lock
+  if (abortController) {
+    abortController.abort();
+    abortController = null;
+  }
+  if (activeDownload) {
+    await activeDownload;
+    activeDownload = null;
+  }
+
+  // Check MIDI connection
+  if (!midiState.isConnected) {
+    logger.warn('Cannot download: MIDI device not connected');
+    return null;
+  }
+
+  // Check for concurrent upload
+  if (isTransferActive()) {
+    logger.warn('Cannot download: another SDS transfer is active');
+    return null;
+  }
+
+  // Reset state
+  downloadState.status = 'downloading';
+  downloadState.slot = slot;
+  downloadState.progress = 0;
+  downloadState.error = null;
+
+  abortController = new AbortController();
+  const signal = abortController.signal;
+
+  const promise = performDownload(slot, signal);
+  activeDownload = promise;
+  try {
+    return await promise;
+  } finally {
+    if (activeDownload === promise) {
+      activeDownload = null;
+    }
+  }
+}
+
+/** Run the actual SDS download for a slot. Never rejects; errors land in downloadState. */
+async function performDownload(slot: number, signal: AbortSignal): Promise<SdsDownloadResult | null> {
+  try {
+    // Let the device finish playing back the sample before the dump freezes it
+    await delay(PRE_DUMP_DELAY_MS, signal);
+
+    initializeSdsListener();
+
+    const result = await receiveSampleViaSds(
+      slot,
+      (progress: SdsDownloadProgress) => {
+        downloadState.progress = progress.percentage;
+      },
+      signal
+    );
+
+    if (result === null) {
+      // Slot is empty
+      downloadState.status = 'empty';
+      logger.info(`Slot ${slot} is empty`);
+      return null;
+    }
+
+    downloadState.status = 'done';
+    downloadState.progress = 100;
+    logger.info(`Downloaded ${result.samples.length} samples from slot ${slot}`);
+    cacheDeviceSample(slot, result.samples, result.sampleRate);
+
+    return result;
+  } catch (error) {
+    if (signal.aborted) {
+      // Aborted by a new download request — not a real error
+      logger.debug(`Download of slot ${slot} aborted`);
+      return null;
+    }
+
+    const message = error instanceof Error ? error.message : String(error);
+    downloadState.status = 'error';
+    downloadState.error = message;
+    logger.error(`Download failed for slot ${slot}: ${message}`);
+    return null;
+  } finally {
+    cleanupSdsListener();
+    if (abortController?.signal === signal) {
+      abortController = null;
+    }
+  }
+}
+
+/**
+ * Cancel any in-progress download and send SDS CANCEL to the device.
+ */
+function cancelDownload(): void {
+  if (abortController) {
+    abortController.abort();
+    abortController = null;
+  }
+  if (downloadState.status === 'downloading') {
+    try {
+      sendCancel();
+    } catch {
+      // Ignore send errors during cancel
+    }
+    downloadState.status = 'idle';
+    downloadState.progress = 0;
+  }
+}
+
+/**
+ * Reset download state to idle (e.g. when navigating away).
+ */
+function resetDownload(): void {
+  cancelDownload();
+  downloadState.status = 'idle';
+  downloadState.slot = null;
+  downloadState.progress = 0;
+  downloadState.error = null;
+}
+
+export { downloadState, downloadSample, cancelDownload, resetDownload };
diff --git a/src/locales/de.json b/src/locales/de.json
index 6288592..773ad65 100644
--- a/src/locales/de.json
+++ b/src/locales/de.json
@@ -41,17 +41,13 @@
   "recording_button_title": "1 Sekunde Audio aufnehmen",
   "recording_button_title_active": "Aufnahme läuft...",
   "recorder_title": "Nimm einen Klang auf",
-  "recorder_start_mic": "Mikrofon einschalten",
   "recorder_choose_mic": "Wähle dein Mikrofon:",
   "recorder_unknown_mic": "Mikrofon",
   "recorder_record": "Aufnehmen",
   "recorder_recording": "Aufnahme läuft...",
-  "recorder_trim_start": "Anfang",
-  "recorder_trim_end": "Ende",
   "recorder_quieter": "Leiser",
   "recorder_louder": "Lauter",
   "recorder_play": "Abspielen",
-  "recorder_again": "Nochmal aufnehmen",
   "recorder_save": "Auf DRUM speichern",
   "recorder_saving": "Speichert...",
   "legacy_fw_title": "Aktualisiere deine DRUM",
@@ -74,5 +70,13 @@
   "fw_upgrade_keep_connected": "Lass deine DRUM angeschlossen.",
   "fw_upgrade_rebooting": "Fast fertig! Deine DRUM startet neu...",
   "fw_upgrade_done_button": "Fertig",
-  "fw_upgrade_failed": "Das hat nicht geklappt. Prüfe deine DRUM und versuche es nochmal."
+  "fw_upgrade_failed": "Das hat nicht geklappt. Prüfe deine DRUM und versuche es nochmal.",
+  "recorder_no_factory_sample": "Kein Werksound für dieses Pad",
+  "recorder_browse": "Wähle eine Klangdatei",
+  "recorder_reset": "Werksound laden",
+  "download_reading": "Lesen...",
+  "download_failed": "Lesen fehlgeschlagen",
+  "settings_title": "Einstellungen",
+  "settings_close": "Schließen",
+  "settings_not_connected": "Kein DRUM verbunden"
 }
diff --git a/src/locales/en.json b/src/locales/en.json
index 0e2d1e7..e15933c 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -41,17 +41,13 @@
   "recording_button_title": "Record 1 second of audio",
   "recording_button_title_active": "Recording...",
   "recorder_title": "Record a sound",
-  "recorder_start_mic": "Turn on microphone",
   "recorder_choose_mic": "Choose your microphone:",
   "recorder_unknown_mic": "Microphone",
   "recorder_record": "Record",
   "recorder_recording": "Recording...",
-  "recorder_trim_start": "Start",
-  "recorder_trim_end": "End",
   "recorder_quieter": "Quieter",
   "recorder_louder": "Louder",
   "recorder_play": "Play",
-  "recorder_again": "Record again",
   "recorder_save": "Save to DRUM",
   "recorder_saving": "Saving...",
   "legacy_fw_title": "Update your DRUM",
@@ -74,5 +70,13 @@
   "fw_upgrade_keep_connected": "Keep your DRUM plugged in.",
   "fw_upgrade_rebooting": "Almost done! Your DRUM is restarting...",
   "fw_upgrade_done_button": "Done",
-  "fw_upgrade_failed": "That didn't work. Check your DRUM and try again."
+  "fw_upgrade_failed": "That didn't work. Check your DRUM and try again.",
+  "recorder_no_factory_sample": "No factory sound for this pad",
+  "recorder_browse": "Choose a sound file",
+  "recorder_reset": "Load the factory sound",
+  "download_reading": "Reading...",
+  "download_failed": "Read failed",
+  "settings_title": "Settings",
+  "settings_close": "Close",
+  "settings_not_connected": "No DRUM connected"
 }
diff --git a/src/locales/nl.json b/src/locales/nl.json
index b3d21be..71f409b 100644
--- a/src/locales/nl.json
+++ b/src/locales/nl.json
@@ -41,17 +41,13 @@
   "recording_button_title": "Neem 1 seconde audio op",
   "recording_button_title_active": "Opname bezig...",
   "recorder_title": "Neem een geluid op",
-  "recorder_start_mic": "Microfoon aanzetten",
   "recorder_choose_mic": "Kies je microfoon:",
   "recorder_unknown_mic": "Microfoon",
   "recorder_record": "Opnemen",
   "recorder_recording": "Opname loopt...",
-  "recorder_trim_start": "Begin",
-  "recorder_trim_end": "Einde",
   "recorder_quieter": "Zachter",
   "recorder_louder": "Harder",
   "recorder_play": "Afspelen",
-  "recorder_again": "Opnieuw opnemen",
   "recorder_save": "Opslaan op DRUM",
   "recorder_saving": "Opslaan...",
   "legacy_fw_title": "Update je DRUM",
@@ -74,5 +70,13 @@
   "fw_upgrade_keep_connected": "Houd je DRUM aangesloten.",
   "fw_upgrade_rebooting": "Bijna klaar! Je DRUM start opnieuw op...",
   "fw_upgrade_done_button": "Klaar",
-  "fw_upgrade_failed": "Dat lukte niet. Controleer je DRUM en probeer het nog eens."
+  "fw_upgrade_failed": "Dat lukte niet. Controleer je DRUM en probeer het nog eens.",
+  "recorder_no_factory_sample": "Geen fabrieksgeluid voor deze pad",
+  "recorder_browse": "Kies een geluidsbestand",
+  "recorder_reset": "Fabrieksgeluid laden",
+  "download_reading": "Lezen...",
+  "download_failed": "Lezen mislukt",
+  "settings_title": "Instellingen",
+  "settings_close": "Sluiten",
+  "settings_not_connected": "Geen DRUM verbonden"
 }
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 7505af6..2ac282d 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -9,6 +9,7 @@
 	import { onMount } from "svelte";
 	import { createLogger } from "$lib/utils/logger";
 	import Footer from "$lib/components/Footer.svelte";
+	import SettingsModal from "$lib/components/SettingsModal.svelte";
 
 	const logger = createLogger("Layout");
 
@@ -93,6 +94,8 @@
 
 	<Footer />
 
+	<SettingsModal />
+
 	{#if $isDraggingOverWindow}
 		<div class="fixed inset-0 bg-black opacity-50 z-[999]" aria-hidden="true">
 			<!-- This overlay covers the page -->
diff --git a/static/mask_clap.svg b/static/mask_clap.svg
new file mode 100644
index 0000000..e911ff2
--- /dev/null
+++ b/static/mask_clap.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" version="1.1" viewBox="0 0 72 72">
+  <!-- Generator: Adobe Illustrator 29.8.0, SVG Export Plug-In . SVG Version: 2.1.1 Build 160)  -->
+  <path d="M46.4348755,33.6181641l-1.2526855-.977478c-.9169922-.7162476-1.5198364-1.760376-1.6814575-2.9130249l-.2207642-1.5735474c-.2728271-1.9471436-2.3027344-3.1184082-4.1253052-2.382019l-1.4731445.5960693c-1.0786743.4364624-2.2843628.4364624-3.3630371,0l-1.4733276-.5960693c-1.8225708-.7363892-3.8522949.4348755-4.1253662,2.382019l-.2207031,1.5735474c-.1616211,1.1526489-.7642822,2.1967773-1.6814575,2.9130249l-1.2526855.977478c-1.5493164,1.2099609-1.5493164,3.5540161,0,4.7640381l1.2526855.977478c.9171753.7162476,1.5198364,1.760376,1.6814575,2.9130249l.2207031,1.5735474c.2730713,1.9471436,2.3027954,3.1191406,4.1253662,2.382019l1.4733276-.5961304c1.0786743-.4364014,2.2843628-.4364014,3.3630371,0l1.4731445.5961304c1.8225708.7371216,3.852478-.4348755,4.1253052-2.382019l.2207642-1.5735474c.1616211-1.1526489.7644653-2.1967773,1.6814575-2.9130249l1.2526855-.977478c1.5494995-1.210022,1.5494995-3.5540771,0-4.7640381ZM32.8982544,36.0056152c-.8327026,0-1.5075073-.6743774-1.5075073-1.5076904,0-.8325195.6748047-1.506897,1.5075073-1.506897s1.5074463.6743774,1.5074463,1.506897c0,.833313-.6747437,1.5076904-1.5074463,1.5076904ZM39.1015625,36.0056152c-.8325195,0-1.5072632-.6743774-1.5072632-1.5076904,0-.8325195.6747437-1.506897,1.5072632-1.506897.8327026,0,1.5076904.6743774,1.5076904,1.506897,0,.833313-.6749878,1.5076904-1.5076904,1.5076904Z"/>
+</svg>
diff --git a/static/mask_hat.svg b/static/mask_hat.svg
new file mode 100644
index 0000000..48ea562
--- /dev/null
+++ b/static/mask_hat.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" version="1.1" viewBox="0 0 72 72">
+  <!-- Generator: Adobe Illustrator 29.8.0, SVG Export Plug-In . SVG Version: 2.1.1 Build 160)  -->
+  <path d="M46.2803345,32.4916992l-8.3812256-7.1553955c-1.09375-.9332275-2.7042847-.9332275-3.7982178,0l-8.3812256,7.1553955c-2.067688,1.7650146-.819519,5.149292,1.8991089,5.149292h7.256897v4.3283691l-3.4711304,3.4726562c-.4402466.4387207-.4402466,1.1518555,0,1.5905762.2201538.2201538.506958.3302002.7952881.3302002.2883911,0,.5751953-.1100464.7953491-.3302002l3.0056152-3.0059814,3.0048218,3.0059814c.2185669.2201538.506958.3302002.7952881.3302002.2883911,0,.5751953-.1100464.7952881-.3302002.4387817-.4387207.4403076-1.1518555,0-1.5905762l-3.4695435-3.4710693v-4.3299561h7.2545776c2.7186279,0,3.9667969-3.3842773,1.8991089-5.149292ZM33.5734253,32.0227051c-.8327026,0-1.5076904-.6743774-1.5076904-1.5068359,0-.8325195.6749878-1.5076904,1.5076904-1.5076904.8325195,0,1.5072632.6751709,1.5072632,1.5076904,0,.8324585-.6747437,1.5068359-1.5072632,1.5068359ZM38.4265747,32.0227051c-.8325195,0-1.5072632-.6743774-1.5072632-1.5068359,0-.8325195.6747437-1.5076904,1.5072632-1.5076904.8327026,0,1.5076904.6751709,1.5076904,1.5076904,0,.8324585-.6749878,1.5068359-1.5076904,1.5068359Z"/>
+</svg>
diff --git a/static/mask_kick.svg b/static/mask_kick.svg
new file mode 100644
index 0000000..8ff8dac
--- /dev/null
+++ b/static/mask_kick.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" version="1.1" viewBox="0 0 72 72">
+  <!-- Generator: Adobe Illustrator 29.8.0, SVG Export Plug-In . SVG Version: 2.1.1 Build 160)  -->
+  <path d="M47.1373901,44.6181641l-2.5130005-2.5114746c1.2243042-1.7262573,1.9510498-3.8292236,1.9510498-6.1066284,0-5.8399048-4.7346191-10.5745239-10.5749512-10.5745239s-10.5749512,4.7346191-10.5749512,10.5745239c0,2.2766113.7263184,4.3803711,1.9503174,6.105835l-2.5130615,2.5122681c-.4387207.4387207-.4402466,1.1518555,0,1.5905762.2186279.2201538.506958.3302002.7952881.3302002.2883911,0,.5751953-.1100464.7953491-.3302002l2.4165039-2.4153442c1.8812866,1.7223511,4.3787842,2.7819824,7.1305542,2.7819824,2.7509766,0,5.2489014-1.0596313,7.130188-2.7819824l2.4161377,2.4153442c.2200928.2201538.506897.3302002.7952881.3302002.2883301,0,.5767212-.1100464.7952881-.3302002.4403076-.4387207.4387207-1.1518555,0-1.5905762ZM32.8987427,41.418335c-.8325195,0-1.5076904-.6743774-1.5076904-1.506897,0-.8324585.6751709-1.5076294,1.5076904-1.5076294s1.5072632.6751709,1.5072632,1.5076294c0,.8325195-.6747437,1.506897-1.5072632,1.506897ZM39.1022339,41.418335c-.8328857,0-1.5076904-.6743774-1.5076904-1.506897,0-.8324585.6748047-1.5076294,1.5076904-1.5076294.8325195,0,1.5072632.6751709,1.5072632,1.5076294,0,.8325195-.6747437,1.506897-1.5072632,1.506897Z"/>
+</svg>
diff --git a/static/mask_snare.svg b/static/mask_snare.svg
new file mode 100644
index 0000000..a685c7c
--- /dev/null
+++ b/static/mask_snare.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" version="1.1" viewBox="0 0 72 72">
+  <!-- Generator: Adobe Illustrator 29.8.0, SVG Export Plug-In . SVG Version: 2.1.1 Build 160)  -->
+  <path d="M43.6482544,28.1695557h-15.2965088c-1.616394,0-2.9267578,1.3099976-2.9267578,2.9262085v6.3654785c0,1.6169434,1.3103638,2.9269409,2.9267578,2.9269409h3.4210815v3.2183838c0,.6217041.5038452,1.1255493,1.1255493,1.1255493.6216431,0,1.1254883-.5038452,1.1254883-1.1255493v-3.2183838h3.9522705v3.2183838c0,.6217041.5038452,1.1255493,1.1254883,1.1255493.6217041,0,1.1255493-.5038452,1.1255493-1.1255493v-3.2183838h3.4210815c1.616394,0,2.9267578-1.3099976,2.9267578-2.9269409v-6.3654785c0-1.6162109-1.3103638-2.9262085-2.9267578-2.9262085ZM32.8983765,36.7697754c-.8327026,0-1.5075073-.6743774-1.5075073-1.5076294,0-.8325195.6748047-1.506897,1.5075073-1.506897.8324585,0,1.5074463.6743774,1.5074463,1.506897,0,.833252-.6749878,1.5076294-1.5074463,1.5076294ZM39.1016235,36.7697754c-.8324585,0-1.5074463-.6743774-1.5074463-1.5076294,0-.8325195.6749878-1.506897,1.5074463-1.506897.8325195,0,1.5076904.6743774,1.5076904,1.506897,0,.833252-.6751709,1.5076294-1.5076904,1.5076294Z"/>
+</svg>
diff --git a/svelte.config.js b/svelte.config.js
index e6eb29c..2a5216c 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -15,8 +15,10 @@ const config = {
 			fallback: undefined,
 			precompress: false,
 			strict: true
-		})
-		// No base path needed - serving from root domain drum.dato.mu
+		}),
+		paths: {
+			base: process.env.BASE_PATH || ''
+		}
 	}
 };