diff --git a/web/src/lib/components/shared-components/side-bar/side-bar-button.svelte b/web/src/lib/components/shared-components/side-bar/side-bar-button.svelte
index 7ce026a8c0..631b1ca134 100644
--- a/web/src/lib/components/shared-components/side-bar/side-bar-button.svelte
+++ b/web/src/lib/components/shared-components/side-bar/side-bar-button.svelte
@@ -7,6 +7,7 @@
 	export let title: string;
 	export let logo: typeof Icon;
 	export let isSelected: boolean;
+	export let flippedLogo = false;
 
 	let showMoreInformation = false;
 
@@ -25,7 +26,11 @@
   "
 >
 	<div class="flex gap-4 place-items-center w-full overflow-hidden truncate">
-		<svelte:component this={logo} size="1.5em" class="shrink-0" />
+		<svelte:component
+			this={logo}
+			size="1.5em"
+			class="shrink-0 {flippedLogo ? '-scale-x-100' : ''}"
+		/>
 		<p class="font-medium text-sm">{title}</p>
 	</div>
 
diff --git a/web/src/lib/components/shared-components/side-bar/side-bar.svelte b/web/src/lib/components/shared-components/side-bar/side-bar.svelte
index cbc6177cc2..db437ba9a0 100644
--- a/web/src/lib/components/shared-components/side-bar/side-bar.svelte
+++ b/web/src/lib/components/shared-components/side-bar/side-bar.svelte
@@ -151,6 +151,7 @@
 		<SideBarButton
 			title="Albums"
 			logo={ImageAlbum}
+			flippedLogo={true}
 			isSelected={$page.route.id === '/(user)/albums'}
 		>
 			<svelte:fragment slot="moreInformation">