diff --git a/src/lib/Library.svelte b/src/lib/Library.svelte
index da0be7b..623ed45 100644
--- a/src/lib/Library.svelte
+++ b/src/lib/Library.svelte
@@ -60,6 +60,7 @@ type SectionRow = {
 	label: string;
 	expanded: boolean;
 	toggle: () => void;
+	onAdd?: () => void;
 };
 
 type StatusRow = {
@@ -108,14 +109,8 @@ let menu = $state<{
 } | null>(null);
 let libraryElement = $state<HTMLElement>();
 let virtualizer = $state<VirtualizerHandle>();
-let headerHeight = $state(0);
-// HACK: masked ancestor prevents backdrop-filter from
-// sampling properly so just disabling it temporarily
-// when search help is visible appears to work fine
 const scrollFadeEnabled = $derived(
-	settings.transparentOutlines &&
-		!prefersReducedTransparency.current &&
-		!searchHelpVisible,
+	settings.transparentOutlines && !prefersReducedTransparency.current,
 );
 
 const albumTypeAliases: Record<string, AlbumListType> = {
@@ -376,6 +371,7 @@ function appendSection(
 	label: string,
 	items: ItemRow[],
 	section: SectionName,
+	onAdd?: () => void,
 ) {
 	const isExpanded = expanded[section];
 	rows.push({
@@ -392,6 +388,7 @@ function appendSection(
 				animateTreeExpansion(libraryElement, key, positions);
 			else if (lib.focusedId?.startsWith(`${key}/`)) lib.focusedId = key;
 		},
+		onAdd,
 	});
 	if (isExpanded) for (const item of items) appendItem(rows, item);
 }
@@ -458,6 +455,14 @@ function buildRows(): LibraryRow[] {
 				t(`common.${type}s` as const),
 				itemRows,
 				sectionKey,
+				type === "song"
+					? () => {
+							const songs = itemRows.flatMap(({ track }) =>
+								track && canPlayTrack(track) ? [track] : [],
+							);
+							if (songs.length) insertAt(queue.tracks.length, songs);
+						}
+					: undefined,
 			);
 		}
 		return rows;
@@ -737,11 +742,8 @@ function onKey(event: KeyboardEvent) {
 <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
 <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
 <nav
-	bind:this={libraryElement}
 	id="library"
-	class:scroll-fade={scrollFadeEnabled}
 	aria-label={t("common.library")}
-	use:scrollFade={scrollFadeEnabled}
 	onfocusin={() => (ui.activeContext = "library")}
 	onkeydown={onKey}
 	onclick={(e) => {
@@ -749,7 +751,7 @@ function onKey(event: KeyboardEvent) {
 	}}
 	tabindex="0"
 >
-	<div class="library-header" bind:clientHeight={headerHeight}>
+	<div class="library-header">
 		<div class="search-help-wrapper">
 			<input
 				id="search"
@@ -788,12 +790,17 @@ function onKey(event: KeyboardEvent) {
 			</button>
 		{/if}
 	</div>
-	<Virtualizer
+	<div
+		bind:this={libraryElement}
+		class="library-scroll"
+		class:scroll-fade={scrollFadeEnabled}
+		use:scrollFade={scrollFadeEnabled}
+	>
+		<Virtualizer
 		bind:this={virtualizer}
 		data={visibleRows}
 		getKey={(row) => row.key}
 		scrollRef={libraryElement}
-		startMargin={headerHeight}
 		as="ul"
 		item="li"
 	>
@@ -805,6 +812,7 @@ function onKey(event: KeyboardEvent) {
 					expanded={row.expanded}
 					focused={lib.focusedId === row.key}
 					ontoggle={row.toggle}
+					onAdd={row.onAdd}
 				/>
 			{:else if row.kind === "offline-status"}
 				<div class="status" role="status">
@@ -858,7 +866,8 @@ function onKey(event: KeyboardEvent) {
 				/>
 			{/if}
 		{/snippet}
-	</Virtualizer>
+		</Virtualizer>
+	</div>
 </nav>
 
 {#if menu}
@@ -874,14 +883,22 @@ function onKey(event: KeyboardEvent) {
 <style>
 	#library {
 		flex: 1;
-		overflow-y: auto;
+		min-block-size: 0;
+		display: flex;
+		flex-direction: column;
 		padding: 0 1rem 0.5rem;
 	}
 	.library-header {
 		padding-block-start: 0.5rem;
 	}
+	.library-scroll {
+		flex: 1;
+		min-block-size: 0;
+		overflow-y: auto;
+	}
 	.search-help-wrapper {
 		position: relative;
+		z-index: 1;
 	}
 	.search-help {
 		position: absolute;
@@ -915,7 +932,7 @@ function onKey(event: KeyboardEvent) {
 	input {
 		inline-size: 100%;
 	}
-	:global(#library > ul) {
+	:global(.library-scroll > ul) {
 		padding: 0;
 		margin: 0;
 		list-style: none;
diff --git a/src/lib/LibraryLabel.svelte b/src/lib/LibraryLabel.svelte
index 60e871a..a212517 100644
--- a/src/lib/LibraryLabel.svelte
+++ b/src/lib/LibraryLabel.svelte
@@ -1,46 +1,71 @@
 <script lang="ts">
+import Icon from "./icons/Icon.svelte";
+import { t } from "./languages/translate.svelte.js";
+
 let {
 	id,
 	label,
 	expanded,
 	focused = false,
 	ontoggle,
+	onAdd,
 } = $props<{
 	id: string;
 	label: string;
 	expanded: boolean;
 	focused?: boolean;
 	ontoggle: () => void;
+	onAdd?: () => void;
 }>();
 </script>
 
-<button
-	type="button"
-	tabindex="-1"
-	class="pressable pressable--gentle"
-	class:focused
-	data-id={id}
-	data-tree-key={id}
-	aria-expanded={expanded}
-	onclick={(event) => {
-		event.stopPropagation();
-		ontoggle();
-	}}
->
-	{label}
-</button>
+<div class="label-row" data-tree-key={id}>
+	<button
+		type="button"
+		tabindex="-1"
+		class="pressable pressable--gentle"
+		class:focused
+		data-id={id}
+		aria-expanded={expanded}
+		onclick={(event) => {
+			event.stopPropagation();
+			ontoggle();
+		}}
+	>
+		{label}
+	</button>
+	{#if onAdd}
+		<button
+			type="button"
+			tabindex="-1"
+			class="action pressable"
+			aria-label={t("action.add_to_queue")}
+			onclick={(event) => {
+				event.stopPropagation();
+				onAdd();
+			}}
+			title={t("action.add_to_queue")}
+		>
+			<Icon name="add" />
+		</button>
+	{/if}
+</div>
 
 <style>
-	button {
-		display: block;
-		inline-size: 100%;
+	.label-row {
+		display: flex;
+		align-items: center;
+		gap: 0.25rem;
+		border-block-end: var(--border-text);
+	}
+	.label-row > button:first-child {
+		flex: 1;
 		text-align: start;
 		font-weight: bold;
 		padding-block: 0.5rem 0.25rem;
 		padding-inline: 0;
 		background: none;
 		border: none;
-		border-block-end: var(--border-text);
 		color: inherit;
 		--button-transform-origin: 10% bottom;
 
@@ -49,6 +74,15 @@ let {
 			color: var(--text-highlight);
 		}
 	}
+	.action {
+		flex: none;
+		display: flex;
+		align-items: center;
+		padding: 0;
+		background: none;
+		border: none;
+		color: inherit;
+	}
 	:global(:dir(rtl)) button {
 		--button-transform-origin: 90% bottom;
 	}