diff --git a/bun.lockb b/bun.lockb
index 20c1b2c..9aeb251 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/package.json b/package.json
index f4311b2..733113e 100644
--- a/package.json
+++ b/package.json
@@ -35,6 +35,7 @@
 		"@fontsource/azeret-mono": "^5.1.0",
 		"@fontsource/lexend": "^5.1.1",
 		"@imagemagick/magick-wasm": "^0.0.31",
+		"clsx": "^2.1.1",
 		"lucide-svelte": "^0.456.0",
 		"svelte-adapter-bun": "^0.5.2",
 		"wasm-vips": "^0.0.11"
diff --git a/src/lib/components/visual/Uploader.svelte b/src/lib/components/visual/Uploader.svelte
index 9fb20fe..b01c040 100644
--- a/src/lib/components/visual/Uploader.svelte
+++ b/src/lib/components/visual/Uploader.svelte
@@ -1,10 +1,18 @@
 <script lang="ts">
 	import { Upload } from "lucide-svelte";
+	import clsx from "clsx";
+
+	let fileList = $state<FileList | undefined>();
 
 	interface Props {
-		files: FileList | undefined;
+		files: File[] | undefined;
 	}
 
+	$effect(() => {
+		if (!fileList) return;
+		files = Array.from(fileList);
+	});
+
 	let fileInput = $state<HTMLInputElement>();
 	let dragOver = $state(false);
 
@@ -14,14 +22,27 @@
 		if (!fileInput) return;
 		fileInput.click();
 	}
+
+	function drop(event: DragEvent) {
+		event.preventDefault();
+		dragOver = false;
+		if (!event.dataTransfer) return;
+		if (!files) files = Array.from(event.dataTransfer.files);
+		else files.push(...Array.from(event.dataTransfer.files));
+	}
 </script>
 
 <button
 	onclick={upload}
 	ondragover={() => (dragOver = true)}
 	ondragleave={() => (dragOver = false)}
-	class="file-uploader"
-	class:_drag-over={dragOver}
+	class={clsx(
+		"w-full h-80 max-w-screen-lg flex items-center justify-center cursor-pointer flex-col border-2 border-solid border-foreground-muted-alt rounded-2xl hover:scale-95 hover:opacity-70 transition-all duration-150 ease-out",
+		{
+			"scale-95 opacity-70": dragOver,
+		},
+	)}
+	ondrop={drop}
 >
 	<div
 		class="size-16 rounded-full text-background bg-foreground flex items-center justify-center"
@@ -34,16 +55,10 @@
 	</p>
 </button>
 
-<input type="file" class="hidden" bind:files bind:this={fileInput} multiple />
-
-<style>
-	.file-uploader {
-		@apply w-full h-80 max-w-screen-lg flex items-center justify-center cursor-pointer
-			flex-col border-2 border-solid border-foreground-muted-alt rounded-2xl
-			hover:scale-95 hover:opacity-70 transition-all duration-150 ease-out;
-	}
-
-	.file-uploader._drag-over {
-		@apply scale-95 opacity-70;
-	}
-</style>
+<input
+	type="file"
+	class="hidden"
+	bind:files={fileList}
+	bind:this={fileInput}
+	multiple
+/>