diff --git a/README.md b/README.md
index faaea30..fbf7b03 100644
--- a/README.md
+++ b/README.md
@@ -56,6 +56,7 @@ not planned, this client is built around the OpenSubsonic API and supporting oth
 - [Svelte](https://svelte.dev)'s maintainers for making such a wonderful framework to work with
 - [Vite](https://vite.dev)'s maintainers for making such a wonderful build tool to work with
 - [Virtua](https://github.com/inokawa/virtua) for the virtual scrolling implementation used in the library and queue
+- [Floating UI](https://floating-ui.com) for the floating things
 - [Color Thief](https://github.com/lokesh/color-thief) for the color extraction utility used for the "Dynamic Colors" feature
 - [Heroicons](https://heroicons.com), [Lucide](https://lucide.dev), and [famfamfam-silk-svg](https://github.com/Simandara/famfamfam-silk-svg) are used as selectable icon packs
 - [Strawberry Music Player](https://www.strawberrymusicplayer.org) was a major inspiration for this project's UX (if you want something non web-based, check it out!)
@@ -69,6 +70,8 @@ you can see everything else this project depends on in `package.json` :)
 - [`formPost`](https://opensubsonic.netlify.app/docs/extensions/formpost)
 - [`indexBasedQueue`](https://opensubsonic.netlify.app/docs/extensions/indexbasedqueue)
 - [`songLyrics`](https://opensubsonic.netlify.app/docs/extensions/songlyrics)
+- [`sonicSimilarity`](https://opensubsonic.netlify.app/docs/extensions/sonicsimilarity)
+- [`topSongsByArtistId`](https://opensubsonic.netlify.app/docs/extensions/topsongsbyartistid)
 - [`transcodeOffset`](https://opensubsonic.netlify.app/docs/extensions/transcodeoffset)
 
 ## AI/LLMs notice
diff --git a/src/app.css b/src/app.css
index bfb8033..2d4632e 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1,9 +1,10 @@
 :root {
 	color-scheme: light dark;
 
+	--bg: Canvas;
 	--bg-layer: light-dark(hsl(0 0% 0% / 0.05), hsl(0 0% 100% / 0.05));
+	--bg-surface: color-mix(var(--bg) 25%, transparent);
 	--bg-highlight: Highlight;
-	--bg: Canvas;
 
 	--border-subtle: 1px solid
 		light-dark(hsl(0 0% 0% / 0.1), hsl(0 0% 100% / 0.1));
@@ -188,6 +189,7 @@ html {
 html.transparent-borders {
 	--border: none;
 	--border-subtle: none;
+	--bg-surface: transparent;
 }
 
 @media (prefers-reduced-transparency: no-preference) {
@@ -256,11 +258,7 @@ body {
 
 #queue,
 #controls {
-	background-color: color-mix(var(--bg) 25%, transparent);
-}
-
-html.transparent-borders :is(#queue, #controls) {
-	background-color: transparent;
+	background-color: var(--bg-surface);
 }
 
 #sidebar {
@@ -272,6 +270,19 @@ html.transparent-borders :is(#queue, #controls) {
 }
 
 @media (width <= 32rem) {
+	body::after {
+		content: "";
+		position: fixed;
+		inset-inline: 0;
+		inset-block-end: 0;
+		block-size: var(--viewport-inset-bottom);
+		background-color: var(--bg-surface);
+		pointer-events: none;
+	}
+	html.animations.dynamic-colors body::after {
+		transition: background-color 300ms var(--ease-out-cubic);
+	}
+
 	#sidebar {
 		display: contents;
 	}
diff --git a/src/lib/CoverBackground.svelte b/src/lib/CoverBackground.svelte
index d258eab..70945bb 100644
--- a/src/lib/CoverBackground.svelte
+++ b/src/lib/CoverBackground.svelte
@@ -35,7 +35,10 @@ onMount(() => {
 </script>
 
 {#if settings.coverBackground !== "off" && !prefersReducedTransparency.current && !isResizing}
-	<div class={`cover-background ${className}`}>
+	<div
+		class={className}
+		style:opacity={settings.coverBackgroundOpacity}
+	>
 		{#key src}
 			<img
 				alt=""
@@ -49,9 +52,8 @@ onMount(() => {
 {/if}
 
 <style>
-	.cover-background {
+	div {
 		transform: scale(1.1);
-		opacity: 0.25;
 		pointer-events: none;
 
 		> img {
@@ -63,8 +65,4 @@ onMount(() => {
 		}
 
 	}
-
-	:global(html.dynamic-colors) .cover-background {
-		opacity: 0.5;
-	}
 </style>
diff --git a/src/lib/dialogs/SettingsModal.svelte b/src/lib/dialogs/SettingsModal.svelte
index 08655a7..aa34b66 100644
--- a/src/lib/dialogs/SettingsModal.svelte
+++ b/src/lib/dialogs/SettingsModal.svelte
@@ -243,6 +243,27 @@ const columnSettings = [
 						<option value="artist">{t("common.artist")}</option>
 					</select>
 				</div>
+				{#if settings.coverBackground !== "off"}
+					<div class="sub-group">
+						<div class="row">
+							<span
+								>{t("settings.opacity")} (<span class="num"
+									>{Math.round(settings.coverBackgroundOpacity * 100)}%</span
+								>)</span
+							>
+							<div class="control">
+								<input
+									type="range"
+									min="0.05"
+									max="1"
+									step="0.05"
+									disabled={prefersReducedTransparency.current}
+									bind:value={settings.coverBackgroundOpacity}
+								/>
+							</div>
+						</div>
+					</div>
+				{/if}
 				<div class="row">
 					<span>{t("settings.dynamic_colors")}</span>
 					<input type="checkbox" bind:checked={settings.dynamicColors} />
diff --git a/src/lib/settings.svelte.ts b/src/lib/settings.svelte.ts
index 7cf9ff1..36e6c93 100644
--- a/src/lib/settings.svelte.ts
+++ b/src/lib/settings.svelte.ts
@@ -35,6 +35,7 @@ const settingDefs = {
 		default: "album" as CoverBackgroundMode,
 		validate: oneOf("off", "album", "artist"),
 	},
+	coverBackgroundOpacity: { default: 0.25 },
 	dynamicColors: { default: false },
 	dynamicFavicon: { default: false },
 	downloads: { default: false },