diff --git a/package.json b/package.json
index 376e914..69bb382 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
 		"@sveltejs/vite-plugin-svelte": "^4.0.0",
 		"@types/eslint": "^9.6.0",
 		"@types/js-cookie": "^3.0.6",
+		"@types/jsmediatags": "^3.9.6",
 		"autoprefixer": "^10.4.20",
 		"eslint": "^9.7.0",
 		"eslint-config-prettier": "^9.1.0",
@@ -42,8 +43,12 @@
 		"client-zip": "^2.4.5",
 		"clsx": "^2.1.1",
 		"js-cookie": "^3.0.5",
+		"jsmediatags": "^3.9.7",
 		"lucide-svelte": "^0.456.0",
 		"svelte-adapter-bun": "^0.5.2",
 		"wasm-vips": "^0.0.11"
+	},
+	"patchedDependencies": {
+		"jsmediatags@3.9.7": "patches/jsmediatags@3.9.7.patch"
 	}
 }
diff --git a/patches/jsmediatags@3.9.7.patch b/patches/jsmediatags@3.9.7.patch
new file mode 100644
index 0000000..b95dfd0
--- /dev/null
+++ b/patches/jsmediatags@3.9.7.patch
@@ -0,0 +1,15 @@
+diff --git a/package.json b/package.json
+index 1265c61a16be5dc94dea97e1a7bcd117b0b5c0fe..602a37452738d778bf705b7a2931a661e363e33c 100644
+--- a/package.json
++++ b/package.json
+@@ -18,8 +18,8 @@
+       "email": "jesse.ditson@gmail.com"
+     }
+   ],
+-  "main": "build2/jsmediatags.js",
+-  "browser": "dist/jsmediatags.js",
++  "main": "dist/jsmediatags.min.js",
++  "browser": "dist/jsmediatags.min.js",
+   "repository": {
+     "type": "git",
+     "url": "git+https://github.com/aadsm/jsmediatags.git"
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 5004409..8f37d00 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -6,6 +6,8 @@
 	import { files } from "$lib/store/index.svelte";
 	import { VertFile } from "$lib/types/file.svelte";
 	import { Check } from "lucide-svelte";
+	import jsmediatags from "jsmediatags";
+	import type { TagType } from "jsmediatags/types/index.js";
 
 	const { data } = $props();
 
@@ -59,7 +61,53 @@
 					};
 
 					img.onerror = async () => {
-						resolve(new VertFile(f, to, converter));
+						// resolve(new VertFile(f, to, converter));
+						const reader = new FileReader();
+						reader.onload = async (e) => {
+							try {
+								const tags = await new Promise<TagType>(
+									(resolve, reject) => {
+										jsmediatags.read(
+											new Blob([
+												new Uint8Array(
+													e.target
+														?.result as ArrayBuffer,
+												),
+											]),
+											{
+												onSuccess: (tag) =>
+													resolve(tag),
+												onError: (error) =>
+													reject(error),
+											},
+										);
+									},
+								);
+								console.log(tags);
+								const picture = tags.tags.picture;
+								if (!picture) {
+									resolve(new VertFile(f, to, converter));
+									return;
+								}
+								const blob = new Blob(
+									[new Uint8Array(picture.data)],
+									{
+										type: picture.format,
+									},
+								);
+								resolve(
+									new VertFile(
+										f,
+										to,
+										converter,
+										URL.createObjectURL(blob),
+									),
+								);
+							} catch {
+								resolve(new VertFile(f, to, converter));
+							}
+						};
+						reader.readAsArrayBuffer(f);
 					};
 				},
 			);
diff --git a/src/routes/convert/+page.svelte b/src/routes/convert/+page.svelte
index bb0b7df..a577bec 100644
--- a/src/routes/convert/+page.svelte
+++ b/src/routes/convert/+page.svelte
@@ -10,7 +10,7 @@
 	import { files } from "$lib/store/index.svelte";
 	import type { VertFile } from "$lib/types";
 	import clsx from "clsx";
-	import { ArrowRight, XIcon } from "lucide-svelte";
+	import { ArrowRight, Disc2Icon, FileAudioIcon, XIcon } from "lucide-svelte";
 	import { onMount } from "svelte";
 	import { quintOut } from "svelte/easing";
 
@@ -254,7 +254,7 @@
 					>
 						<div
 							class={clsx(
-								"flex relative flex-shrink-0 items-center w-full rounded-xl h-32",
+								"flex relative flex-shrink-0 items-center w-full rounded-xl h-72",
 								{
 									"initial-fade": !finisheds[i],
 								},
@@ -270,17 +270,19 @@
 								<div class="w-full flex-shrink-0">
 									<div
 										class={clsx(
-											"py-3 px-4 w-full flex transition-colors duration-300 flex-shrink text-left border-b-2 border-solid border-foreground-muted-alt rounded-tl-[9.5px] rounded-tr-[10px] overflow-hidden",
+											"py-3 dynadark:[--transparency:50%] [--transparency:25%] px-4 w-full flex transition-colors duration-300 flex-shrink text-left border-b-2 border-solid border-foreground-muted-alt rounded-tl-[9.5px] rounded-tr-[10px] overflow-hidden",
 											{
-												"bg-accent-background text-accent-foreground":
+												"text-accent-foreground":
 													file.result,
-												"bg-background text-foreground":
-													!file.result,
+												"text-foreground": !file.result,
 											},
 										)}
+										style="background-color: color-mix(in srgb, var(--{file.result
+											? 'accent-bg'
+											: 'bg'}), transparent var(--transparency)); backdrop-filter: blur(18px);"
 									>
 										<div
-											class="w-full grid grid-cols-1 grid-rows-"
+											class="w-full grid grid-cols-1 grid-rows-1"
 										>
 											{#if processings[files.files.length - i - 1]}
 												<div
@@ -340,47 +342,53 @@
 									</div>
 								</div>
 								<div
-									class="flex items-center gap-3 justify-normal flex-grow w-full h-full"
+									class="flex gap-3 justify-normal flex-grow w-full h-full"
 								>
 									<div
-										class="flex flex-col items-center gap-3 w-full"
+										class="flex flex-col items-end gap-3 w-full"
 									>
 										<div
-											class="flex items-center gap-3 w-full h-full px-5"
+											class="flex items-end gap-3 w-full h-full px-5"
 										>
-											{#if converter && converter.supportedFormats.includes(file.from)}
-												<span>from</span>
-												<span
-													class="py-2 px-3 font-display bg-foreground text-background rounded-xl"
-													>{file.from}</span
-												>
-												<span>to</span>
-												<div class="inline-flex">
-													<Dropdown
-														options={converter.supportedFormats}
-														bind:selected={files
-															.files[
-															files.files.length -
-																i -
-																1
-														].to}
-														onselect={() => {
-															file.result = null;
-														}}
-													/>
-												</div>
-											{:else}
-												<span
-													class="py-2 px-3 font-display bg-foreground-failure text-white rounded-xl"
-													>{file.from}</span
-												>
+											<div
+												class="flex items-center justify-center gap-3 w-full pb-4"
+											>
+												{#if converter && converter.supportedFormats.includes(file.from)}
+													<span>from</span>
+													<span
+														class="py-2 px-3 font-display bg-foreground text-background rounded-xl"
+														>{file.from}</span
+													>
+													<span>to</span>
+													<div class="inline-flex">
+														<Dropdown
+															options={converter.supportedFormats}
+															bind:selected={files
+																.files[
+																files.files
+																	.length -
+																	i -
+																	1
+															].to}
+															onselect={() => {
+																file.result =
+																	null;
+															}}
+														/>
+													</div>
+												{:else}
+													<span
+														class="py-2 px-3 font-display bg-foreground-failure text-white rounded-xl"
+														>{file.from}</span
+													>
 
-												<span
-													class="text-foreground-failure"
-												>
-													is not supported!
-												</span>
-											{/if}
+													<span
+														class="text-foreground-failure"
+													>
+														is not supported!
+													</span>
+												{/if}
+											</div>
 										</div>
 										<!-- <div
 											class="hidden lg:flex gap-4 w-full"
@@ -405,22 +413,35 @@
 							{#if converter && converter.supportedFormats.includes(file.from)}
 								<!-- god knows why, but setting opacity > 0.98 causes a z-ordering issue in firefox ??? -->
 								<div
-									class="absolute top-0 -z-50 left-0 w-full h-full opacity-[0.98] rounded-[9px] overflow-hidden"
+									class="absolute top-[0px] -z-50 left-0 w-full h-full opacity-[0.98] rounded-xl overflow-hidden"
 								>
-									<div
-										class="bg-cover bg-center w-full h-full"
-										style="background-image: url({file.blobUrl});"
-									></div>
-									<div
-										class="absolute left-0 bottom-0 h-5/6 w-full"
-									>
-										<ProgressiveBlur
-											direction="left"
-											endIntensity={64}
-											iterations={6}
-											fadeTo="var(--bg-transparent)"
-										/>
-									</div>
+									{#if file.blobUrl}
+										<div
+											class="bg-cover bg-center w-full h-full"
+											style="background-image: url({file.blobUrl});"
+										></div>
+										<div
+											class="absolute left-0 top-0 pt-[50px] h-full w-full"
+										>
+											<ProgressiveBlur
+												direction="bottom"
+												endIntensity={64}
+												iterations={8}
+												fadeTo="var(--bg-transparent)"
+											/>
+										</div>
+									{:else}
+										<div
+											class="w-full h-full flex items-center justify-center"
+										>
+											<FileAudioIcon
+												size="96"
+												strokeWidth="1.5"
+												color="var(--fg)"
+												opacity="0.9"
+											/>
+										</div>
+									{/if}
 								</div>
 							{/if}
 						</div>