diff --git a/apps/settings/src/components/BasicSettings/BackgroundJob.vue b/apps/settings/src/components/BasicSettings/BackgroundJob.vue
index 1f14bf579d07c..f865869c77841 100644
--- a/apps/settings/src/components/BasicSettings/BackgroundJob.vue
+++ b/apps/settings/src/components/BasicSettings/BackgroundJob.vue
@@ -69,12 +69,12 @@
 import axios from '@nextcloud/axios'
 import { showError } from '@nextcloud/dialogs'
 import { loadState } from '@nextcloud/initial-state'
-import moment from '@nextcloud/moment'
 import { confirmPassword } from '@nextcloud/password-confirmation'
 import { generateOcsUrl } from '@nextcloud/router'
 import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwitch'
 import NcNoteCard from '@nextcloud/vue/components/NcNoteCard'
 import NcSettingsSection from '@nextcloud/vue/components/NcSettingsSection'
+import { useFormatRelativeTime } from '@nextcloud/vue/composables/useFormatDateTime'
 import logger from '../../logger.ts'
 
 const lastCron = loadState('settings', 'lastCron')
@@ -93,6 +93,13 @@ export default {
 		NcNoteCard,
 	},
 
+	setup() {
+		return {
+			relativeTime: useFormatRelativeTime(lastCron * 1000),
+			maxAgeRelativeTime: useFormatRelativeTime(cronMaxAge * 1000),
+		}
+	},
+
 	data() {
 		return {
 			lastCron,
@@ -101,8 +108,6 @@ export default {
 			cliBasedCronPossible,
 			cliBasedCronUser,
 			backgroundJobsDocUrl,
-			relativeTime: moment(lastCron * 1000).fromNow(),
-			maxAgeRelativeTime: moment(cronMaxAge * 1000).fromNow(),
 		}
 	},
 
diff --git a/apps/settings/src/components/PersonalInfo/LocaleSection/LocaleSectionEntry.vue b/apps/settings/src/components/PersonalInfo/LocaleSection/LocaleSectionEntry.vue
index 00a6cdec23e2f..11fe48a0fbaea 100644
--- a/apps/settings/src/components/PersonalInfo/LocaleSection/LocaleSectionEntry.vue
+++ b/apps/settings/src/components/PersonalInfo/LocaleSection/LocaleSectionEntry.vue
@@ -6,7 +6,8 @@
 <template>
 	<div class="locale">
 		<p class="locale__example">
-			{{ t('settings', 'Example: {example}', { example: `${example.date} ${example.time}` }) }}
+			{{ t('settings', 'Example: {example}', { example }) }}
+
 		</p>
 
 		<NcSelect
@@ -23,7 +24,8 @@
 </template>
 
 <script>
-import moment from '@nextcloud/moment'
+import { useNow } from '@vueuse/core'
+import { useFormatTime } from '@nextcloud/vue/composables/useFormatDateTime'
 import NcSelect from '@nextcloud/vue/components/NcSelect'
 import { ACCOUNT_SETTING_PROPERTY_ENUM } from '../../../constants/AccountPropertyConstants.js'
 import { savePrimaryAccountProperty } from '../../../service/PersonalInfo/PersonalInfoService.js'
@@ -58,14 +60,22 @@ export default {
 		},
 	},
 
+	setup() {
+		const now = useNow({ interval: 1000 })
+
+		return {
+			example: useFormatTime(now, {
+				format: {
+					dateStyle: 'short',
+					timeStyle: 'medium',
+				},
+			}),
+		}
+	},
+
 	data() {
 		return {
 			initialLocale: this.locale,
-			intervalId: 0,
-			example: {
-				date: moment().format('L'),
-				time: moment().format('LTS'),
-			},
 		}
 	},
 
@@ -80,14 +90,6 @@ export default {
 		},
 	},
 
-	mounted() {
-		this.intervalId = window.setInterval(this.refreshExample, 1000)
-	},
-
-	beforeDestroy() {
-		window.clearInterval(this.intervalId)
-	},
-
 	methods: {
 		async updateLocale(locale) {
 			try {
@@ -113,13 +115,6 @@ export default {
 				handleError(error, errorMessage)
 			}
 		},
-
-		refreshExample() {
-			this.example = {
-				date: moment().format('L'),
-				time: moment().format('LTS'),
-			}
-		},
 	},
 }
 </script>