diff --git a/src/lib/components/layout/Navbar/Base.svelte b/src/lib/components/layout/Navbar/Base.svelte
index 515bae3..29a9416 100644
--- a/src/lib/components/layout/Navbar/Base.svelte
+++ b/src/lib/components/layout/Navbar/Base.svelte
@@ -21,6 +21,7 @@
 	import Panel from "../../visual/Panel.svelte";
 	import Logo from "../../visual/svg/Logo.svelte";
 	import { beforeNavigate } from "$app/navigation";
+	import Tooltip from "$lib/components/visual/Tooltip.svelte";
 
 	const items = $derived<
 		{
@@ -182,16 +183,18 @@
 			{@render link(item, i)}
 		{/each}
 		<div class="w-0.5 bg-separator h-full hidden md:flex"></div>
-		<button
-			onclick={() => {
-				const isDark =
-					document.documentElement.classList.contains("dark");
-				setTheme(isDark ? "light" : "dark");
-			}}
-			class="w-14 h-full items-center justify-center hidden md:flex"
-		>
-			<SunIcon class="dynadark:hidden block" />
-			<MoonIcon class="dynadark:block hidden" />
-		</button>
+		<Tooltip text="Toggle theme" position="right">
+			<button
+				onclick={() => {
+					const isDark =
+						document.documentElement.classList.contains("dark");
+					setTheme(isDark ? "light" : "dark");
+				}}
+				class="w-14 h-full items-center justify-center hidden md:flex"
+			>
+				<SunIcon class="dynadark:hidden block" />
+				<MoonIcon class="dynadark:block hidden" />
+			</button>
+		</Tooltip>
 	</Panel>
 </div>
diff --git a/src/lib/components/visual/Tooltip.svelte b/src/lib/components/visual/Tooltip.svelte
index 1855118..655f5fb 100644
--- a/src/lib/components/visual/Tooltip.svelte
+++ b/src/lib/components/visual/Tooltip.svelte
@@ -57,7 +57,13 @@
 	}
 
 	.tooltip-top::after {
-		@apply content-[""] absolute top-full left-1/2 -ml-2 border-x-transparent border-b-transparent border-t-inherit;
+		@apply content-[""] absolute top-full left-1/2 -translate-x-1/2 border-8 border-x-transparent border-b-transparent;
+	}
+
+	.tooltip-top::before {
+		border-width: calc(var(--border-size) + 8px);
+		margin-left: calc(-1 * (var(--border-size) + 8px));
+		@apply content-[""] absolute top-full left-1/2 border-x-transparent border-b-transparent border-t-inherit;
 	}
 
 	.tooltip-bottom {
diff --git a/src/routes/convert/+page.svelte b/src/routes/convert/+page.svelte
index 58fc205..9b21bab 100644
--- a/src/routes/convert/+page.svelte
+++ b/src/routes/convert/+page.svelte
@@ -14,7 +14,7 @@
 		vertdLoaded,
 	} from "$lib/store/index.svelte";
 	import { addToast } from "$lib/store/ToastProvider";
-	import { VertFile, type Categories } from "$lib/types";
+	import { VertFile } from "$lib/types";
 	import {
 		AudioLines,
 		BookText,
@@ -129,15 +129,25 @@
 	<Panel class="p-5 flex flex-col min-w-0 gap-4 relative">
 		<div class="flex-shrink-0 h-8 w-full flex items-center gap-2">
 			{#if !converters.length}
-				<FileQuestionIcon size="24" class="flex-shrink-0" />
+				<Tooltip text="Unknown file type" position="bottom">
+					<FileQuestionIcon size="24" class="flex-shrink-0" />
+				</Tooltip>
 			{:else if isAudio}
-				<AudioLines size="24" class="flex-shrink-0" />
+				<Tooltip text="Audio file" position="bottom">
+					<AudioLines size="24" class="flex-shrink-0" />
+				</Tooltip>
 			{:else if isVideo}
-				<FilmIcon size="24" class="flex-shrink-0" />
+				<Tooltip text="Video file" position="bottom">
+					<FilmIcon size="24" class="flex-shrink-0" />
+				</Tooltip>
 			{:else if isDocument}
-				<BookText size="24" class="flex-shrink-0" />
+				<Tooltip text="Document file" position="bottom">
+					<BookText size="24" class="flex-shrink-0" />
+				</Tooltip>
 			{:else}
-				<ImageIcon size="24" class="flex-shrink-0" />
+				<Tooltip text="Image file" position="bottom">
+					<ImageIcon size="24" class="flex-shrink-0" />
+				</Tooltip>
 			{/if}
 			<div class="flex-grow overflow-hidden">
 				{#if file.processing}