diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 418beea..e73584f 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,22 +1,7 @@
 <script lang="ts">
-	import { converters } from "$lib/converters";
-	import type { Converter } from "$lib/converters/converter";
+	import Uploader from "$lib/components/visual/Uploader.svelte";
 
-	let file = $state<File>();
-	let to = "";
-
-	const convert = async (converter: Converter, file: File, to: string) => {
-		const buffer = await file.arrayBuffer();
-		const result = await converter.convert({
-			name: file.name.split(".").slice(0, -1).join("."),
-			buffer
-		}, to);
-		console.log(result);
-	}
+	let files = $state<FileList>();
 </script>
 
-<div class="flex flex-col">
-	<input type="file" onchange={e => file = (e.target as any).files[0]} />
-	<input type="text" placeholder="to" bind:value={to} />
-	<button onclick={() => convert(converters[0], file!, to)}>Go</button>
-</div>
\ No newline at end of file
+<Uploader bind:files />