diff --git a/frontend/src/components/home/ContentAuth.vue b/frontend/src/components/home/ContentAuth.vue
index a77749b65..baa14a551 100644
--- a/frontend/src/components/home/ContentAuth.vue
+++ b/frontend/src/components/home/ContentAuth.vue
@@ -15,7 +15,10 @@
 			<div
 				:class="{'is-visible': background}"
 				class="app-container-background background-fade-in d-print-none"
-				:style="{'background-image': background && `url(${background})`}"
+				:style="{
+					'background-image': background && `url(${background})`,
+					'filter': backgroundBrightness && `brightness(${backgroundBrightness}%)`
+				}"
 			/>
 			<Navigation class="d-print-none" />
 			<main
@@ -81,6 +84,12 @@ import {useProjectStore} from '@/stores/projects'
 
 import {useRouteWithModal} from '@/composables/useRouteWithModal'
 import {useRenewTokenOnFocus} from '@/composables/useRenewTokenOnFocus'
+import { useAuthStore } from '@/stores/auth'
+
+const authStore = useAuthStore()
+const backgroundBrightness = computed(() => 
+	authStore.settings?.frontendSettings?.backgroundBrightness,
+)
 
 const {routeWithModal, currentModal, closeModal} = useRouteWithModal()
 
diff --git a/frontend/src/i18n/lang/en.json b/frontend/src/i18n/lang/en.json
index 711d50778..cf3e3ff2f 100644
--- a/frontend/src/i18n/lang/en.json
+++ b/frontend/src/i18n/lang/en.json
@@ -181,6 +181,9 @@
           "dark": "Dark"
         }
       },
+      "backgroundBrightness": {
+        "title": "Background brightness"
+      },
       "apiTokens": {
         "title": "API Tokens",
         "general": "API tokens allow you to use Vikunja's API without user credentials.",
diff --git a/frontend/src/modelTypes/IUserSettings.ts b/frontend/src/modelTypes/IUserSettings.ts
index 84f7987a8..d43455366 100644
--- a/frontend/src/modelTypes/IUserSettings.ts
+++ b/frontend/src/modelTypes/IUserSettings.ts
@@ -21,6 +21,7 @@ export interface IFrontendSettings {
 	dateDisplay: DateDisplay
 	timeFormat: TimeFormat
 	defaultTaskRelationType: IRelationKind
+	backgroundBrightness: number | null
 }
 
 export interface IExtraSettingsLink {
diff --git a/frontend/src/stores/auth.ts b/frontend/src/stores/auth.ts
index 54a7e89a9..a15ed57bd 100644
--- a/frontend/src/stores/auth.ts
+++ b/frontend/src/stores/auth.ts
@@ -137,6 +137,7 @@ export const useAuthStore = defineStore('auth', () => {
 				dateDisplay: DATE_DISPLAY.RELATIVE,
 				timeFormat: TIME_FORMAT.HOURS_24,
 				defaultTaskRelationType: RELATION_KIND.RELATED,
+				backgroundBrightness: 100,
 				...newSettings.frontendSettings,
 			},
 		})
diff --git a/frontend/src/views/user/settings/General.vue b/frontend/src/views/user/settings/General.vue
index e405bc86a..c48d470e6 100644
--- a/frontend/src/views/user/settings/General.vue
+++ b/frontend/src/views/user/settings/General.vue
@@ -314,9 +314,24 @@
 					{{ $t('user.settings.general.allowIconChanges') }}
 				</label>
 			</div>
+			<div class="field">
+				<label class="two-col">
+					<span>
+						{{ $t('user.settings.backgroundBrightness.title') }}
+					</span>
+					<input 
+						v-model.number="settings.frontendSettings.backgroundBrightness"
+						class="input"
+						type="number"
+						min="0"
+						max="100"
+						@blur="enforceBackgroundBrightnessBounds"
+					>
+				</label>
+			</div>
 		</div>
 	</Card>
-	
+
 	<Card
 		:title="$t('user.settings.sections.privacy')"
 		class="general-settings section-block"
@@ -473,6 +488,18 @@ watch(
 	{deep: true},
 )
 
+function enforceBackgroundBrightnessBounds() {
+	const value = Number(settings.value.frontendSettings.backgroundBrightness)
+    
+	if (!value || isNaN(value)) {
+		settings.value.frontendSettings.backgroundBrightness = null
+	} else if (value < 0) {
+		settings.value.frontendSettings.backgroundBrightness = 0
+	} else if (value > 100) {
+		settings.value.frontendSettings.backgroundBrightness = 100
+	}
+}
+
 function useAvailableTimezones(settingsRef: Ref<IUserSettings>) {
 	const availableTimezones = ref<{value: string, label: string}[]>([])
 	const searchResults = ref<{value: string, label: string}[]>([])