diff --git a/src/pages/homepage/components/SettingsButton.tsx b/src/pages/homepage/components/SettingsButton.tsx
index a04257a..6fca31a 100644
--- a/src/pages/homepage/components/SettingsButton.tsx
+++ b/src/pages/homepage/components/SettingsButton.tsx
@@ -110,7 +110,15 @@ function SettingsButton() {
 						<FiMenu />
 					</Button>
 				</Menu.Target>
-				<Menu.Dropdown>
+				<Menu.Dropdown
+					style={{
+						backgroundColor:
+							theme.backgroundImage.toLowerCase() !== 'none' &&
+							theme.backgroundImage !== undefined
+								? 'transparent'
+								: theme.backgroundColor,
+					}}
+				>
 					<Stack gap={0} display={'flex'} pb={'1rem'} pt={'2rem'} align='center'>
 						<Tooltip label='Settings' color={theme.primaryColor} withArrow>
 							<FiSettings
diff --git a/src/styles/Menu.module.css b/src/styles/Menu.module.css
index 151e2a3..e6ab6f2 100644
--- a/src/styles/Menu.module.css
+++ b/src/styles/Menu.module.css
@@ -1,6 +1,7 @@
 .dropdown {
 	color: var(--color-text-pri);
 	border-color: var(--color-text-pri) !important;
+	backdrop-filter: blur(10px) brightness(3) !important;
 }
 .item {
 	&:hover {