diff --git a/Backend/src/main/java/com/gregor_lohaus/gtransfer/controller/DownloadController.java b/Backend/src/main/java/com/gregor_lohaus/gtransfer/controller/DownloadController.java
index 5bb678e..b33baed 100644
--- a/Backend/src/main/java/com/gregor_lohaus/gtransfer/controller/DownloadController.java
+++ b/Backend/src/main/java/com/gregor_lohaus/gtransfer/controller/DownloadController.java
@@ -10,7 +10,6 @@ import org.springframework.http.MediaType;
 import org.springframework.http.ResponseEntity;
 import org.springframework.stereotype.Controller;
 import org.springframework.transaction.annotation.Transactional;
-import org.springframework.ui.Model;
 import org.springframework.web.bind.annotation.GetMapping;
 import org.springframework.web.bind.annotation.PathVariable;
 import org.springframework.web.bind.annotation.ResponseBody;
@@ -28,10 +27,8 @@ public class DownloadController {
     @Autowired
     private AbstractStorageService storageService;
 
-    @GetMapping("/download/{id}")
-    public String page(@PathVariable String id, Model model) {
-        fileRepository.findById(id)
-                .ifPresent(f -> model.addAttribute("filename", f.getName()));
+    @GetMapping("/download")
+    public String page() {
         return "download/page";
     }
 
diff --git a/Backend/src/main/java/com/gregor_lohaus/gtransfer/controller/UploadController.java b/Backend/src/main/java/com/gregor_lohaus/gtransfer/controller/UploadController.java
index 4760da0..7eafe80 100644
--- a/Backend/src/main/java/com/gregor_lohaus/gtransfer/controller/UploadController.java
+++ b/Backend/src/main/java/com/gregor_lohaus/gtransfer/controller/UploadController.java
@@ -45,8 +45,7 @@ public class UploadController {
             @RequestParam("hash") String hash,
             @RequestParam("name") String name,
             @RequestParam(required = false) Integer expiryDays,
-            @RequestParam(required = false) Integer downloadLimit,
-            Model model) throws IOException {
+            @RequestParam(required = false) Integer downloadLimit) throws IOException {
 
         storageService.put(hash, file.getBytes());
 
@@ -57,7 +56,6 @@ public class UploadController {
         f.setDownloadLimit(limit);
         fileRepository.save(f);
 
-        model.addAttribute("id", hash);
         return "upload/result :: view";
     }
 }
diff --git a/Backend/src/main/resources/static/crypto.js b/Backend/src/main/resources/static/crypto.js
index 631b0ae..087c14a 100644
--- a/Backend/src/main/resources/static/crypto.js
+++ b/Backend/src/main/resources/static/crypto.js
@@ -16,13 +16,32 @@ async function encryptFile(arrayBuffer) {
 
     // SHA-256(rawKey) → file identifier sent to server; server never sees the key itself
     const rawKey = await crypto.subtle.exportKey('raw', key);
-    const hash = Array.from(new Uint8Array(await crypto.subtle.digest('SHA-256', rawKey)))
-        .map(b => b.toString(16).padStart(2, '0'))
-        .join('');
+    const hash = await hashKey(rawKey);
 
-    // Base64url-encode key for URL fragment
-    const base64urlKey = btoa(String.fromCharCode(...new Uint8Array(rawKey)))
-        .replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, '');
+    const base64urlKey = encodeKey(rawKey);
 
     return { payload, hash, base64urlKey };
 }
+
+async function hashKey(rawKey) {
+    return Array.from(new Uint8Array(await crypto.subtle.digest('SHA-256', rawKey)))
+        .map(b => b.toString(16).padStart(2, '0'))
+        .join('');
+}
+
+async function decryptFile(payload, key) {
+    const bytes = new Uint8Array(payload);
+    const iv = bytes.slice(0, 12);
+    const ciphertext = bytes.slice(12);
+    return crypto.subtle.decrypt({ name: 'AES-GCM', iv }, key, ciphertext);
+}
+
+function encodeKey(rawKey) {
+    return btoa(String.fromCharCode(...new Uint8Array(rawKey)))
+        .replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, '');
+}
+
+function decodeKey(base64url) {
+    const base64 = base64url.replace(/-/g, '+').replace(/_/g, '/');
+    return Uint8Array.from(atob(base64), c => c.charCodeAt(0));
+}
diff --git a/Backend/src/main/resources/static/download.js b/Backend/src/main/resources/static/download.js
index 759b3c0..e93be04 100644
--- a/Backend/src/main/resources/static/download.js
+++ b/Backend/src/main/resources/static/download.js
@@ -1,87 +1,69 @@
-(async function () {
-    const fragment = location.hash.slice(1);
-    if (!fragment) {
-        showError('No decryption key found in URL.');
-        return;
-    }
+const fragment = location.hash.slice(1);
+if (!fragment) {
+    showError('No decryption key found in URL.');
+} else try {
+    setStatus('Deriving key\u2026');
 
-    try {
-        setStatus('Deriving key\u2026');
+    const rawKeyBytes = decodeKey(fragment);
+    const id = await hashKey(rawKeyBytes);
 
-        // Decode base64url → raw key bytes
-        const base64 = fragment.replace(/-/g, '+').replace(/_/g, '/');
-        const rawKeyBytes = Uint8Array.from(atob(base64), c => c.charCodeAt(0));
+    const key = await crypto.subtle.importKey(
+        'raw', rawKeyBytes, { name: 'AES-GCM' }, false, ['decrypt']
+    );
 
-        // Import key
-        const key = await crypto.subtle.importKey(
-            'raw', rawKeyBytes, { name: 'AES-GCM' }, false, ['decrypt']
-        );
+    setStatus('Downloading\u2026');
+    const response = await fetch('/download/' + id + '/data');
 
-        // Derive hash → verify it matches the file ID in the URL
-        const hash = Array.from(new Uint8Array(await crypto.subtle.digest('SHA-256', rawKeyBytes)))
-            .map(b => b.toString(16).padStart(2, '0'))
-            .join('');
-
-        const pathId = location.pathname.split('/').pop();
-        if (hash !== pathId) {
-            showError('Invalid link — key does not match file.');
-            return;
-        }
-
-        setStatus('Downloading\u2026');
-        const response = await fetch(location.pathname + '/data');
-
-        if (response.status === 410) {
-            showError('This file has expired or reached its download limit.');
-            return;
-        }
-        if (!response.ok) {
-            showError(`Download failed (${response.status}).`);
-            return;
-        }
-
-        // Extract filename from Content-Disposition header
+    if (response.status === 410) {
+        showError('This file has expired or reached its download limit.');
+    } else if (!response.ok) {
+        showError(`Download failed (${response.status}).`);
+    } else {
         const disposition = response.headers.get('Content-Disposition') || '';
         const filename = disposition.match(/filename="?([^"]+)"?/)?.[1] || 'download';
 
         setStatus('Decrypting\u2026');
-        const encrypted = new Uint8Array(await response.arrayBuffer());
-        const iv         = encrypted.slice(0, 12);
-        const ciphertext = encrypted.slice(12);
+        const plaintext = await decryptFile(await response.arrayBuffer(), key);
 
-        const plaintext = await crypto.subtle.decrypt({ name: 'AES-GCM', iv }, key, ciphertext);
-
-        // Trigger browser download
         const url = URL.createObjectURL(new Blob([plaintext]));
         const a = document.createElement('a');
         a.href = url;
         a.download = filename;
-        a.click();
-        URL.revokeObjectURL(url);
 
-        showSuccess(filename);
+        htmx.swap(htmx.find('#download-state'), `
+            <div class="drop-zone-icon mb-3">&#x1F512;</div>
+            <div class="fw-medium mb-2">${filename}</div>
+            <button id="download-btn" class="btn btn-outline-success mt-2">Download</button>`,
+            { swapStyle: 'innerHTML' });
 
-    } catch (err) {
-        showError('Decryption failed: ' + err.message);
+        htmx.on(htmx.find('#download-btn'), 'click', () => {
+            a.click();
+            URL.revokeObjectURL(url);
+            showSuccess(filename);
+        });
     }
-})();
+} catch (err) {
+    showError('Decryption failed: ' + err.message);
+}
 
 function setStatus(msg) {
-    const el = document.getElementById('download-status');
+    const el = htmx.find('#download-status');
     if (el) el.textContent = msg;
 }
 
 function showSuccess(filename) {
-    document.getElementById('download-state').innerHTML = `
+    htmx.swap(htmx.find('#download-state'), `
         <div class="drop-zone-icon mb-3">&#x2705;</div>
         <div class="fw-medium mb-1">${filename}</div>
         <div class="drop-zone-text mb-3">Your download has started.</div>
-        <a href="/" class="btn btn-link drop-zone-text text-decoration-none">Send a file</a>`;
+        <a href="/" class="btn btn-link drop-zone-text text-decoration-none">Send a file</a>`,
+        { swapStyle: 'innerHTML' });
 }
 
 function showError(msg) {
-    document.getElementById('download-state').innerHTML = `
+    htmx.swap(htmx.find('#download-state'), `
         <div class="drop-zone-icon mb-3">&#x26A0;</div>
         <div class="drop-zone-text mb-3">${msg}</div>
-        <a href="/" class="btn btn-link drop-zone-text text-decoration-none">Go home</a>`;
+        <a href="/" class="btn btn-link drop-zone-text text-decoration-none">Go home</a>`,
+        { swapStyle: 'innerHTML' });
 }
diff --git a/Backend/src/main/resources/static/upload.js b/Backend/src/main/resources/static/upload.js
index 8d77746..f70a771 100644
--- a/Backend/src/main/resources/static/upload.js
+++ b/Backend/src/main/resources/static/upload.js
@@ -1,54 +1,50 @@
-const dropZone = document.getElementById('drop-zone');
-const fileInput = document.getElementById('file-input');
+const dropZone = htmx.find('#drop-zone');
+const fileInput = htmx.find('#file-input');
 const promptHtml = dropZone.innerHTML;
 
 let selectedFile = null;
 
-// ── File selection ────────────────────────────────────────────────────────────
-
-dropZone.addEventListener('click', () => {
+htmx.on(dropZone, 'click', () => {
     if (selectedFile === null) fileInput.click();
 });
 
-fileInput.addEventListener('change', e => {
+htmx.on(fileInput, 'change', e => {
     if (e.target.files[0]) onFileSelected(e.target.files[0]);
 });
 
-dropZone.addEventListener('dragover', e => {
+htmx.on(dropZone, 'dragover', e => {
     e.preventDefault();
-    dropZone.classList.add('dragover');
+    htmx.addClass(dropZone, 'dragover');
 });
 
-dropZone.addEventListener('dragleave', () => dropZone.classList.remove('dragover'));
+htmx.on(dropZone, 'dragleave', () => htmx.removeClass(dropZone, 'dragover'));
 
-dropZone.addEventListener('drop', e => {
+htmx.on(dropZone, 'drop', e => {
     e.preventDefault();
-    dropZone.classList.remove('dragover');
+    htmx.removeClass(dropZone, 'dragover');
     if (e.dataTransfer.files[0] && selectedFile === null) onFileSelected(e.dataTransfer.files[0]);
 });
 
 function onFileSelected(file) {
     selectedFile = file;
-    // Use htmx to fetch the options form — server renders max values from config
     htmx.ajax('GET', '/upload/options?name=' + encodeURIComponent(file.name), {
         target: '#drop-zone',
         swap: 'innerHTML'
     });
 }
 
-// ── Upload (called from onclick in server-rendered options form) ──────────────
-
 async function startUpload() {
-    const expiryDays = document.getElementById('expiry-days')?.value;
-    const downloadLimit = document.getElementById('download-limit')?.value;
+    const expiryDays    = htmx.find('#expiry-days')?.value;
+    const downloadLimit = htmx.find('#download-limit')?.value;
 
-    dropZone.innerHTML = `
+    htmx.swap(dropZone, `
         <div class="mb-3">
             <div class="spinner-border text-success" role="status">
                 <span class="visually-hidden">Loading\u2026</span>
             </div>
         </div>
-        <div class="drop-zone-text" id="upload-status">Encrypting\u2026</div>`;
+        <div class="drop-zone-text" id="upload-status">Encrypting\u2026</div>`,
+        { swapStyle: 'innerHTML' });
 
     try {
         const { payload, hash, base64urlKey } = await encryptFile(await selectedFile.arrayBuffer());
@@ -65,38 +61,33 @@ async function startUpload() {
         const response = await fetch('/upload', { method: 'POST', body: formData });
         if (!response.ok) throw new Error(`Server error ${response.status}`);
 
-        // Server returns HTML fragment; prepend origin and append key fragment client-side
-        dropZone.innerHTML = await response.text();
+        htmx.swap(dropZone, await response.text(), { swapStyle: 'innerHTML' });
         htmx.process(dropZone);
-        const shareLink = document.getElementById('share-link');
-        shareLink.value = window.location.origin + shareLink.value + '#' + base64urlKey;
+        htmx.find('#share-link').value = window.location.origin + '/download#' + base64urlKey;
 
     } catch (err) {
-        dropZone.innerHTML = `
+        htmx.swap(dropZone, `
             <div class="drop-zone-icon mb-3">&#x26A0;</div>
             <div class="drop-zone-text mb-3">${err.message}</div>
-            <button class="btn btn-link drop-zone-text text-decoration-none" onclick="resetUpload()">Try again</button>`;
+            <button class="btn btn-link drop-zone-text text-decoration-none" onclick="resetUpload()">Try again</button>`,
+            { swapStyle: 'innerHTML' });
     }
 }
 
 function setStatus(msg) {
-    const el = document.getElementById('upload-status');
+    const el = htmx.find('#upload-status');
     if (el) el.textContent = msg;
 }
 
-// ── Reset (called from onclick in server-rendered fragments) ──────────────────
-
 function resetUpload() {
     selectedFile = null;
     fileInput.value = '';
-    dropZone.innerHTML = promptHtml;
+    htmx.swap(dropZone, promptHtml, { swapStyle: 'innerHTML' });
 }
 
-// ── Copy link (called from onclick in result fragment) ────────────────────────
-
 async function copyLink() {
-    await navigator.clipboard.writeText(document.getElementById('share-link').value);
-    const btn = document.getElementById('copy-btn');
+    await navigator.clipboard.writeText(htmx.find('#share-link').value);
+    const btn = htmx.find('#copy-btn');
     btn.textContent = 'Copied!';
     setTimeout(() => { btn.textContent = 'Copy'; }, 2000);
 }
diff --git a/Backend/src/main/resources/templates/download/page.html b/Backend/src/main/resources/templates/download/page.html
index 2ab594a..b42f137 100644
--- a/Backend/src/main/resources/templates/download/page.html
+++ b/Backend/src/main/resources/templates/download/page.html
@@ -3,10 +3,12 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title th:text="${filename != null ? filename + ' — GTransfer' : 'GTransfer'}">GTransfer</title>
+    <title>GTransfer</title>
     <link rel="stylesheet" th:href="@{/webjars/bootstrap/dist/css/bootstrap.min.css}">
     <link rel="stylesheet" th:href="@{/style.css}">
-    <script th:src="@{/download.js}" defer></script>
+    <script th:src="@{/webjars/htmx.org/dist/htmx.min.js}" defer></script>
+    <script th:src="@{/crypto.js}" defer></script>
+    <script th:src="@{/download.js}" type="module"></script>
 </head>
 <body class="d-flex flex-column min-vh-100">
 
@@ -18,8 +20,7 @@
     <main class="flex-grow-1 d-flex align-items-center justify-content-center py-5 px-3">
         <div id="download-state" class="drop-zone text-center py-5 px-4" style="max-width: 520px; width: 100%;">
             <div class="drop-zone-icon mb-3">&#x1F512;</div>
-            <div class="fw-medium mb-2" th:if="${filename != null}" th:text="${filename}"></div>
-            <div class="drop-zone-text" id="download-status">Preparing&hellip;</div>
+<div class="drop-zone-text" id="download-status">Preparing&hellip;</div>
         </div>
     </main>
 
diff --git a/Backend/src/main/resources/templates/upload/result.html b/Backend/src/main/resources/templates/upload/result.html
index f623ee4..77828b6 100644
--- a/Backend/src/main/resources/templates/upload/result.html
+++ b/Backend/src/main/resources/templates/upload/result.html
@@ -5,8 +5,7 @@
     <div class="drop-zone-icon mb-3">&#x2705;</div>
     <div class="drop-zone-text mb-3">Your file is ready to share</div>
     <div class="input-group mb-2">
-        <input type="text" id="share-link" class="form-control form-control-sm"
-               th:value="@{/download/{id}(id=${id})}" readonly>
+        <input type="text" id="share-link" class="form-control form-control-sm" readonly>
         <button id="copy-btn" class="btn btn-outline-success btn-sm" onclick="copyLink()">Copy</button>
     </div>
     <button class="btn btn-link drop-zone-text text-decoration-none small" onclick="resetUpload()">
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..35af569
--- /dev/null
+++ b/README.md
@@ -0,0 +1,45 @@
+# GTransfer
+
+A self-hosted, end-to-end encrypted file transfer service. The server stores only ciphertext and never has access to encryption keys or plaintext.
+
+## How encryption works
+
+### Upload
+
+1. **Key generation** — the browser generates a random 256-bit AES-GCM key using the [Web Crypto API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Crypto_API). The key never leaves the browser.
+
+2. **Encryption** — the file is encrypted with AES-GCM. A random 96-bit (12-byte) IV is generated for each upload. The IV is prepended to the ciphertext to produce the payload:
+   ```
+   payload = IV (12 bytes) || ciphertext
+   ```
+
+3. **File ID** — the server needs a way to identify the file without knowing the key. The client computes `SHA-256(rawKey)` and uses the hex digest as the file ID. This is a one-way operation — the server cannot reverse it to obtain the key.
+
+4. **Upload** — the encrypted payload and file ID are sent to the server. The server stores the ciphertext and records the file ID, name, expiry, and download limit in the database.
+
+5. **Share link** — the raw key is base64url-encoded and placed in the [URL fragment](https://developer.mozilla.org/en-US/docs/Web/API/URL/hash):
+   ```
+   https://example.com/download#<base64url(rawKey)>
+   ```
+   Browsers never include the fragment in HTTP requests, so the key is never transmitted to the server.
+
+### Download
+
+1. **Key extraction** — the browser reads the key from the URL fragment and decodes it from base64url.
+
+2. **File lookup** — the client computes `SHA-256(rawKey)` to derive the file ID and fetches the encrypted payload from `/download/<id>/data`.
+
+3. **Decryption** — the IV is read from the first 12 bytes of the payload, and the remainder is decrypted with AES-GCM. AES-GCM is authenticated encryption, so any tampering with the ciphertext causes decryption to fail with an authentication error.
+
+4. **Download** — the plaintext is written to a `Blob` and the browser is prompted to save it.
+
+### Security properties
+
+| Property | Detail |
+|---|---|
+| Encryption | AES-256-GCM |
+| IV | 96-bit random, unique per upload |
+| Key derivation | None — key is randomly generated |
+| File ID | SHA-256(rawKey) — server cannot reverse to key |
+| Key transport | URL fragment — never sent to server |
+| Server access | Ciphertext, file metadata, SHA-256 of key only |