diff --git a/changelog/unreleased/enhancement-add-notifications-setting b/changelog/unreleased/enhancement-add-notifications-setting
new file mode 100644
index 00000000000..9facef34ac7
--- /dev/null
+++ b/changelog/unreleased/enhancement-add-notifications-setting
@@ -0,0 +1,7 @@
+Enhancement: Add notification setting to account page
+
+We've added notification setting to the account page,
+where the user can turn on or off receiving emails for notifications.
+
+https://github.com/owncloud/web/pull/8911
+https://github.com/owncloud/web/issues/8904
diff --git a/packages/web-runtime/src/pages/account.vue b/packages/web-runtime/src/pages/account.vue
index f5eef9c6c42..d7d3c24e702 100644
--- a/packages/web-runtime/src/pages/account.vue
+++ b/packages/web-runtime/src/pages/account.vue
@@ -1,5 +1,6 @@
 <template>
-  <main id="account" class="oc-height-1-1 oc-m">
+  <app-loading-spinner v-if="isLoading" />
+  <main v-else id="account" class="oc-height-1-1 oc-m">
     <div class="oc-flex oc-flex-between oc-flex-bottom oc-width-1-1 oc-border-b oc-py">
       <h1 id="account-page-title" class="oc-page-title oc-m-rm">{{ pageTitle }}</h1>
       <div>
@@ -68,12 +69,15 @@
           />
         </dd>
       </div>
-      <div v-if="isLanguageSupported" class="account-page-info-language oc-mb oc-width-1-2@s">
+      <div
+        v-if="isSettingsServiceSupported"
+        class="account-page-info-language oc-mb oc-width-1-2@s"
+      >
         <dt class="oc-text-normal oc-text-muted" v-text="$gettext('Language')" />
         <dd data-testid="language">
           <oc-select
             v-if="languageOptions"
-            :model-value="selectedLanguageOption"
+            :model-value="selectedLanguageValue"
             :clearable="false"
             :options="languageOptions"
             @update:model-value="updateSelectedLanguage"
@@ -100,6 +104,18 @@
           <gdpr-export />
         </dd>
       </div>
+      <div v-if="isSettingsServiceSupported" class="account-page-notification oc-mb oc-width-1-2@s">
+        <dt class="oc-text-normal oc-text-muted" v-text="$gettext('Notifications')" />
+        <dd data-testid="notification-mails">
+          <oc-checkbox
+            :model-value="disableEmailNotificationsValue"
+            size="large"
+            :label="$gettext('Receive notification mails')"
+            data-testid="account-page-notification-mails-checkbox"
+            @update:model-value="updateDisableEmailNotifications"
+          />
+        </dd>
+      </div>
     </dl>
   </main>
 </template>
@@ -107,38 +123,41 @@
 <script lang="ts">
 import { mapActions } from 'vuex'
 import EditPasswordModal from '../components/EditPasswordModal.vue'
-import { computed, defineComponent, onMounted, unref } from 'vue'
+import { computed, defineComponent, onMounted, unref, ref } from 'vue'
 import {
-  useAccessToken,
   useCapabilityGraphPersonalDataExport,
   useCapabilitySpacesEnabled,
   useClientService,
   useStore
 } from 'web-pkg/src/composables'
 import { useTask } from 'vue-concurrency'
-import axios from 'axios'
-import { v4 as uuidV4 } from 'uuid'
 import { useGettext } from 'vue3-gettext'
 import { setCurrentLanguage } from 'web-runtime/src/helpers/language'
 import GdprExport from 'web-runtime/src/components/Account/GdprExport.vue'
 import { useConfigurationManager } from 'web-pkg/src/composables/configuration'
 import { isPersonalSpaceResource } from 'web-client/src/helpers'
+import AppLoadingSpinner from 'web-pkg/src/components/AppLoadingSpinner.vue'
 
 export default defineComponent({
   name: 'Personal',
   components: {
+    AppLoadingSpinner,
     EditPasswordModal,
     GdprExport
   },
   setup() {
     const store = useStore()
-    const accessToken = useAccessToken({ store })
     const language = useGettext()
+    const { $gettext } = language
     const clientService = useClientService()
     const configurationManager = useConfigurationManager()
+    const valuesList = ref()
+    const bundlesList = ref()
+    const selectedLanguageValue = ref()
+    const disableEmailNotificationsValue = ref()
 
     // FIXME: Use graph capability when we have it
-    const isLanguageSupported = useCapabilitySpacesEnabled()
+    const isSettingsServiceSupported = useCapabilitySpacesEnabled()
     const isChangePasswordEnabled = useCapabilitySpacesEnabled()
     const isPersonalDataExportEnabled = useCapabilityGraphPersonalDataExport()
     const user = computed(() => {
@@ -152,113 +171,203 @@ export default defineComponent({
       )
     })
 
-    const loadAccountBundleTask = useTask(function* () {
+    const loadValuesListTask = useTask(function* () {
+      try {
+        const {
+          data: { values }
+        } = yield clientService.httpAuthenticated.post('/api/v0/settings/values-list', {
+          account_uuid: 'me'
+        })
+        valuesList.value = values || []
+      } catch (e) {
+        console.error(e)
+        store.dispatch('showMessage', {
+          title: $gettext('Unable to load account data…'),
+          status: 'danger'
+        })
+        valuesList.value = []
+      }
+    }).restartable()
+
+    const loadBundlesListTask = useTask(function* () {
       try {
         const {
           data: { bundles }
-        } = yield axios.post(
-          '/api/v0/settings/bundles-list',
-          {},
-          {
-            headers: {
-              authorization: `Bearer ${unref(accessToken)}`,
-              'X-Request-ID': uuidV4()
-            }
-          }
-        )
-        return bundles.find((b) => b.extension === 'ocis-accounts')
+        } = yield clientService.httpAuthenticated.post('/api/v0/settings/bundles-list', {})
+        bundlesList.value = bundles?.find((b) => b.extension === 'ocis-accounts')
       } catch (e) {
         console.error(e)
-        return []
+        store.dispatch('showMessage', {
+          title: $gettext('Unable to load account data…'),
+          status: 'danger'
+        })
+        bundlesList.value = []
       }
     }).restartable()
 
-    const accountSettingIdentifier = {
-      extension: 'ocis-accounts',
-      bundle: 'profile',
-      setting: 'language'
-    }
-    const languageSetting = computed(() => {
-      return store.getters.getSettingsValue(accountSettingIdentifier)
+    const isLoading = computed(() => {
+      if (!unref(isSettingsServiceSupported)) {
+        return false
+      }
+      return (
+        loadValuesListTask.isRunning ||
+        !loadValuesListTask.last ||
+        loadBundlesListTask.isRunning ||
+        !loadBundlesListTask.last
+      )
     })
+
     const languageOptions = computed(() => {
-      const languageOptions = loadAccountBundleTask.last?.value?.settings.find(
-        (s) => s.name === 'language'
-      )?.singleChoiceValue.options
+      const languageOptions = unref(bundlesList)?.settings?.find((s) => s.name === 'language')
+        ?.singleChoiceValue.options
       return languageOptions?.map((l) => ({
         label: l.displayValue,
         value: l.value.stringValue,
         default: l.default
       }))
     })
-    const selectedLanguageOption = computed(() => {
-      const current = unref(languageSetting)?.listValue.values[0].stringValue
-      if (!current) {
-        return unref(languageOptions).find((o) => o.default)
+
+    const groupNames = computed(() => {
+      if (unref(useCapabilitySpacesEnabled())) {
+        return unref(user)
+          .groups.map((group) => group.displayName)
+          .join(', ')
       }
-      return unref(languageOptions).find((o) => o.value === current)
+
+      return unref(user).groups.join(', ')
     })
-    const updateSelectedLanguage = (option) => {
-      const bundle = loadAccountBundleTask.last?.value
+
+    const saveValue = async ({
+      identifier,
+      valueOptions
+    }: {
+      identifier: string
+      valueOptions: Record<string, any>
+    }) => {
+      const valueId = unref(valuesList)?.find((cV) => cV.identifier.setting === identifier)?.value
+        ?.id
+
       const value = {
-        bundleId: bundle?.id,
-        settingId: bundle?.settings.find((s) => s.name === 'language')?.id,
+        bundleId: unref(bundlesList)?.id,
+        settingId: unref(bundlesList)?.settings?.find((s) => s.name === identifier)?.id,
         resource: { type: 'TYPE_USER' },
-        listValue: { values: [{ stringValue: option.value }] },
-        ...(unref(languageSetting) && { id: unref(languageSetting).id })
+        accountUuid: 'me',
+        ...valueOptions,
+        ...(valueId && { id: valueId })
       }
 
-      axios.post(
-        '/api/v0/settings/values-save',
-        { value: { ...value, accountUuid: 'me' } },
-        {
-          headers: {
-            authorization: `Bearer ${unref(accessToken)}`,
-            'X-Request-ID': uuidV4()
+      try {
+        await clientService.httpAuthenticated.post('/api/v0/settings/values-save', {
+          value: {
+            accountUuid: 'me',
+            ...value
           }
+        })
+
+        /**
+         * Edge case: we need to reload the values list to retrieve the valueId if not set,
+         * otherwise the backend saves multiple entries
+         */
+        if (!valueId) {
+          loadValuesListTask.perform()
         }
-      )
 
-      const newSetting = { identifier: accountSettingIdentifier, value }
-      store.commit('SET_SETTINGS_VALUE', newSetting)
-      setCurrentLanguage({ language, languageSetting: newSetting })
+        return value
+      } catch (e) {
+        throw e
+      }
     }
-    const accountEditLink = computed(() => {
-      return store.getters.configuration?.options?.accountEditLink
-    })
 
-    const groupNames = computed(() => {
-      if (unref(useCapabilitySpacesEnabled())) {
-        return unref(user)
-          .groups.map((group) => group.displayName)
-          .join(', ')
+    const updateSelectedLanguage = async (option) => {
+      try {
+        const value = await saveValue({
+          identifier: 'language',
+          valueOptions: { listValue: { values: [{ stringValue: option.value }] } }
+        })
+        selectedLanguageValue.value = option
+        setCurrentLanguage({
+          language,
+          languageSetting: {
+            identifier: {
+              extension: 'ocis-accounts',
+              bundle: 'profile',
+              setting: 'language'
+            },
+            value
+          }
+        })
+        store.dispatch('showMessage', {
+          title: $gettext('Language was saved successfully.')
+        })
+      } catch (e) {
+        console.error(e)
+        store.dispatch('showMessage', {
+          title: $gettext('Saving language failed…'),
+          status: 'danger'
+        })
       }
+    }
 
-      return unref(user).groups.join(', ')
-    })
+    const updateDisableEmailNotifications = async (option) => {
+      try {
+        await saveValue({
+          identifier: 'disable-email-notifications',
+          valueOptions: { boolValue: !option }
+        })
+        disableEmailNotificationsValue.value = option
+        store.dispatch('showMessage', {
+          title: $gettext('Email notifications preference saved successfully.')
+        })
+      } catch (e) {
+        console.error(e)
+        store.dispatch('showMessage', {
+          title: $gettext('Unable to save email notifications preference…'),
+          status: 'danger'
+        })
+      }
+    }
 
-    const logoutUrl = computed(() => {
-      return configurationManager.logoutUrl
-    })
+    onMounted(async () => {
+      if (unref(isSettingsServiceSupported)) {
+        await loadBundlesListTask.perform()
+        await loadValuesListTask.perform()
+
+        const languageConfiguration = unref(valuesList)?.find(
+          (cV) => cV.identifier.setting === 'language'
+        )
+        selectedLanguageValue.value = languageConfiguration
+          ? unref(languageOptions)?.find(
+              (lO) => lO.value === languageConfiguration.value?.listValue?.values?.[0]?.stringValue
+            )
+          : unref(languageOptions)?.find((o) => o.default)
+
+        const disableEmailNotificationsConfiguration = unref(valuesList)?.find(
+          (cV) => cV.identifier.setting === 'disable-email-notifications'
+        )
 
-    onMounted(() => {
-      if (unref(isLanguageSupported)) {
-        loadAccountBundleTask.perform()
+        disableEmailNotificationsValue.value = disableEmailNotificationsConfiguration
+          ? !disableEmailNotificationsConfiguration.value?.boolValue
+          : true
       }
     })
 
     return {
       clientService,
       languageOptions,
-      selectedLanguageOption,
+      selectedLanguageValue,
       updateSelectedLanguage,
-      accountEditLink,
+      updateDisableEmailNotifications,
+      accountEditLink: store.getters.configuration?.options?.accountEditLink,
       isChangePasswordEnabled,
       showGdprExport,
-      isLanguageSupported,
+      isSettingsServiceSupported,
       groupNames,
       user,
-      logoutUrl
+      logoutUrl: configurationManager.logoutUrl,
+      isLoading,
+      disableEmailNotificationsValue,
+      loadBundlesListTask,
+      loadValuesListTask
     }
   },
   data() {
diff --git a/packages/web-runtime/src/services/auth/userManager.ts b/packages/web-runtime/src/services/auth/userManager.ts
index 37918746e9b..ffbc4afb0a0 100644
--- a/packages/web-runtime/src/services/auth/userManager.ts
+++ b/packages/web-runtime/src/services/auth/userManager.ts
@@ -193,7 +193,6 @@ export class UserManager extends OidcUserManager {
       let roles
       ;[graphUser, roles] = await Promise.all([graphClient.users.getMe(), this.fetchRoles()])
       this.store.commit('SET_ROLES', roles)
-      this.store.commit('SET_SETTINGS_VALUES', settings)
 
       role = await this.fetchRole({ graphUser, roles })
     } else {
diff --git a/packages/web-runtime/src/store/index.ts b/packages/web-runtime/src/store/index.ts
index e6af3724669..89e6f35ef81 100644
--- a/packages/web-runtime/src/store/index.ts
+++ b/packages/web-runtime/src/store/index.ts
@@ -3,7 +3,6 @@ import apps from './apps'
 import auth from './auth'
 import config from './config'
 import user from './user'
-import settings from './settings'
 import modal from './modal'
 import navigation from './navigation'
 import spaces from './spaces'
@@ -24,7 +23,6 @@ export default {
     apps,
     user,
     config,
-    settings,
     modal,
     navigation,
     runtime
diff --git a/packages/web-runtime/src/store/settings.ts b/packages/web-runtime/src/store/settings.ts
deleted file mode 100644
index f1506bd1f6c..00000000000
--- a/packages/web-runtime/src/store/settings.ts
+++ /dev/null
@@ -1,72 +0,0 @@
-import keyBy from 'lodash-es/keyBy'
-import assign from 'lodash-es/assign'
-import findKey from 'lodash-es/findKey'
-import isNil from 'lodash-es/isNil'
-import isEqual from 'lodash-es/isEqual'
-
-const state = {
-  settingsValues: null
-}
-
-const actions = {
-  clearSettingsValues({ commit }) {
-    commit('SET_SETTINGS_VALUES', null)
-  }
-}
-
-const mutations = {
-  SET_SETTINGS_VALUES(state, settingsValues) {
-    if (settingsValues === null) {
-      state.settingsValues = null
-    } else {
-      state.settingsValues = keyBy(settingsValues, 'value.id')
-    }
-  },
-  SET_SETTINGS_VALUE(state, settingsValue) {
-    state.settingsValues = assign({}, state.settingsValues, {
-      [settingsValue.value.id]: settingsValue
-    })
-  }
-}
-
-const getters = {
-  settingsValuesLoaded: (state) => {
-    return state.settingsValues !== null
-  },
-  // calling this getter requires either having the `settingId` or all three other params
-  hasSettingsValue:
-    (state, getters) =>
-    ({ settingId, extension, bundle, setting }) => {
-      return getters.getSettingsValue({ settingId, extension, bundle, setting }) !== null
-    },
-  // calling this getter requires either having the `settingId` or all three other params
-  getSettingsValue:
-    (state, getters) =>
-    ({ settingId, extension, bundle, setting }) => {
-      if (!getters.settingsValuesLoaded) {
-        return null
-      }
-      if (settingId) {
-        const key = findKey(
-          state.settingsValues,
-          (settingsValue) => settingsValue.value.settingId === settingId
-        )
-        return isNil(key) ? null : state.settingsValues[key].value
-      }
-      const key = findKey(state.settingsValues, (settingsValue) =>
-        isEqual(settingsValue.identifier, {
-          extension,
-          bundle,
-          setting
-        })
-      )
-      return isNil(key) ? null : state.settingsValues[key].value
-    }
-}
-
-export default {
-  state,
-  actions,
-  mutations,
-  getters
-}
diff --git a/packages/web-runtime/tests/unit/pages/__snapshots__/account.spec.ts.snap b/packages/web-runtime/tests/unit/pages/__snapshots__/account.spec.ts.snap
index 9a4b5ad6c66..f8a7dd8628b 100644
--- a/packages/web-runtime/tests/unit/pages/__snapshots__/account.spec.ts.snap
+++ b/packages/web-runtime/tests/unit/pages/__snapshots__/account.spec.ts.snap
@@ -31,6 +31,7 @@ exports[`account page account information displays basic user information 1`] =
     </dd>
   </div>
   <!--v-if-->
+  <!--v-if-->
 </dl>
 `;
 
diff --git a/packages/web-runtime/tests/unit/pages/account.spec.ts b/packages/web-runtime/tests/unit/pages/account.spec.ts
index b33650423f3..7324ed6eb09 100644
--- a/packages/web-runtime/tests/unit/pages/account.spec.ts
+++ b/packages/web-runtime/tests/unit/pages/account.spec.ts
@@ -5,10 +5,13 @@ import {
   defaultPlugins,
   mockAxiosResolve,
   shallowMount,
-  defaultStoreMockOptions
+  defaultStoreMockOptions,
+  mockAxiosReject
 } from 'web-test-helpers'
-import { mock } from 'jest-mock-extended'
+import { mock, mockDeep } from 'jest-mock-extended'
 import { SpaceResource } from 'web-client/src/helpers'
+import { AxiosResponse } from 'axios'
+import { ClientService } from 'web-pkg'
 
 const $route = {
   meta: {
@@ -165,6 +168,156 @@ describe('account page', () => {
       expect(button.attributes('href')).toBe('https://account-manager/logout')
     })
   })
+  describe('Method "updateDisableEmailNotifications', () => {
+    it('should show a message on success', async () => {
+      const clientServiceMock = mockDeep<ClientService>()
+      clientServiceMock.httpAuthenticated.post.mockResolvedValueOnce(
+        mock<AxiosResponse>({
+          data: {
+            bundles: [
+              {
+                id: '2a506de7-99bd-4f0d-994e-c38e72c28fd9',
+                extension: 'ocis-accounts',
+                settings: [
+                  {
+                    id: 'aa8cfbe5-95d4-4f7e-a032-c3c01f5f062f',
+                    name: 'language',
+                    singleChoiceValue: {
+                      options: [
+                        { value: { stringValue: 'de' }, displayValue: 'Deutsch' },
+                        { value: { stringValue: 'en' }, default: true, displayValue: 'English' }
+                      ]
+                    }
+                  },
+                  {
+                    id: '33ffb5d6-cd07-4dc0-afb0-84f7559ae438',
+                    name: 'disable-email-notifications',
+                    boolValue: { label: 'disable notifications' }
+                  }
+                ]
+              }
+            ]
+          }
+        })
+      )
+      clientServiceMock.httpAuthenticated.post.mockResolvedValueOnce(
+        mock<AxiosResponse>({
+          data: {
+            values: [
+              {
+                identifier: { extension: 'ocis-accounts', bundle: 'profile', setting: 'language' },
+                value: {
+                  id: '2f411ff3-0040-4358-a537-1a3ceea228d8',
+                  listValue: { values: [{ stringValue: 'de' }] }
+                }
+              },
+              {
+                identifier: {
+                  extension: 'ocis-accounts',
+                  bundle: 'profile',
+                  setting: 'disable-email-notifications'
+                },
+                value: {
+                  id: '204d0e71-403c-42c5-b343-52a4021b32be',
+                  boolValue: false
+                }
+              }
+            ]
+          }
+        })
+      )
+
+      const { wrapper, mocks, storeOptions } = getWrapper({
+        clientServiceMock,
+        capabilities: { spaces: { enabled: true } }
+      })
+
+      await wrapper.vm.loadBundlesListTask.last
+      await wrapper.vm.loadValuesListTask.last
+
+      mocks.$clientService.httpAuthenticated.post.mockResolvedValueOnce(mockAxiosResolve({}))
+      await wrapper.vm.updateDisableEmailNotifications(true)
+      expect(storeOptions.actions.showMessage).toHaveBeenCalledWith(
+        expect.anything(),
+        expect.not.objectContaining({ status: 'danger' })
+      )
+    })
+    it('should show a message on error', async () => {
+      jest.spyOn(console, 'error').mockImplementation(() => undefined)
+
+      const clientServiceMock = mockDeep<ClientService>()
+      clientServiceMock.httpAuthenticated.post.mockResolvedValueOnce(
+        mock<AxiosResponse>({
+          data: {
+            bundles: [
+              {
+                id: '2a506de7-99bd-4f0d-994e-c38e72c28fd9',
+                extension: 'ocis-accounts',
+                settings: [
+                  {
+                    id: 'aa8cfbe5-95d4-4f7e-a032-c3c01f5f062f',
+                    name: 'language',
+                    singleChoiceValue: {
+                      options: [
+                        { value: { stringValue: 'de' }, displayValue: 'Deutsch' },
+                        { value: { stringValue: 'en' }, default: true, displayValue: 'English' }
+                      ]
+                    }
+                  },
+                  {
+                    id: '33ffb5d6-cd07-4dc0-afb0-84f7559ae438',
+                    name: 'disable-email-notifications',
+                    boolValue: { label: 'disable notifications' }
+                  }
+                ]
+              }
+            ]
+          }
+        })
+      )
+      clientServiceMock.httpAuthenticated.post.mockResolvedValueOnce(
+        mock<AxiosResponse>({
+          data: {
+            values: [
+              {
+                identifier: { extension: 'ocis-accounts', bundle: 'profile', setting: 'language' },
+                value: {
+                  id: '2f411ff3-0040-4358-a537-1a3ceea228d8',
+                  listValue: { values: [{ stringValue: 'de' }] }
+                }
+              },
+              {
+                identifier: {
+                  extension: 'ocis-accounts',
+                  bundle: 'profile',
+                  setting: 'disable-email-notifications'
+                },
+                value: {
+                  id: '204d0e71-403c-42c5-b343-52a4021b32be',
+                  boolValue: false
+                }
+              }
+            ]
+          }
+        })
+      )
+
+      const { wrapper, mocks, storeOptions } = getWrapper({
+        clientServiceMock,
+        capabilities: { spaces: { enabled: true } }
+      })
+
+      await wrapper.vm.loadBundlesListTask.last
+      await wrapper.vm.loadValuesListTask.last
+
+      mocks.$clientService.httpAuthenticated.post.mockImplementation(() => mockAxiosReject('err'))
+      await wrapper.vm.updateDisableEmailNotifications(true)
+      expect(storeOptions.actions.showMessage).toHaveBeenCalledWith(
+        expect.anything(),
+        expect.objectContaining({ status: 'danger' })
+      )
+    })
+  })
 })
 
 function getWrapper({
@@ -172,7 +325,8 @@ function getWrapper({
   user = {},
   capabilities = {},
   accountEditLink = undefined,
-  spaces = []
+  spaces = [],
+  clientServiceMock = mockDeep<ClientService>()
 } = {}) {
   const storeOptions = { ...defaultStoreMockOptions }
   storeOptions.modules.runtime.modules.spaces.getters.spaces.mockReturnValue(spaces)
@@ -188,7 +342,9 @@ function getWrapper({
     ...defaultComponentMocks(),
     $route
   }
+  mocks.$clientService = clientServiceMock
   return {
+    storeOptions,
     mocks,
     wrapper: shallowMount(account, {
       data: () => data,