diff --git a/apps/dav/src/views/ExampleContentSettingsSection.vue b/apps/dav/src/views/ExampleContentSettingsSection.vue
index c97d59ed59b..fbf7371e22f 100644
--- a/apps/dav/src/views/ExampleContentSettingsSection.vue
+++ b/apps/dav/src/views/ExampleContentSettingsSection.vue
@@ -3,39 +3,23 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 
-<template>
-	<NcSettingsSection
-		id="example-content"
-		:name="$t('dav', 'Example content')"
-		class="example-content-setting"
-		:description="$t('dav', 'Example content serves to showcase the features of Nextcloud. Default content is shipped with Nextcloud, and can be replaced by custom content.')">
-		<ExampleContactSettings v-if="hasContactsApp" />
-		<ExampleEventSettings v-if="hasCalendarApp" />
-	</NcSettingsSection>
-</template>
-
-<script>
+<script setup lang="ts">
 import { loadState } from '@nextcloud/initial-state'
+import { t } from '@nextcloud/l10n'
 import { NcSettingsSection } from '@nextcloud/vue'
 import ExampleContactSettings from '../components/ExampleContactSettings.vue'
 import ExampleEventSettings from '../components/ExampleEventSettings.vue'
 
-export default {
-	name: 'ExampleContentSettingsSection',
-	components: {
-		NcSettingsSection,
-		ExampleContactSettings,
-		ExampleEventSettings,
-	},
-
-	computed: {
-		hasContactsApp() {
-			return loadState('dav', 'contactsEnabled')
-		},
-
-		hasCalendarApp() {
-			return loadState('dav', 'calendarEnabled')
-		},
-	},
-}
+const hasContactsApp = loadState('dav', 'contactsEnabled')
+const hasCalendarApp = loadState('dav', 'calendarEnabled')
 </script>
+
+<template>
+	<NcSettingsSection
+		id="example-content"
+		:name="t('dav', 'Example content')"
+		:description="t('dav', 'Example content serves to showcase the features of Nextcloud. Default content is shipped with Nextcloud, and can be replaced by custom content.')">
+		<ExampleContactSettings v-if="hasContactsApp" />
+		<ExampleEventSettings v-if="hasCalendarApp" />
+	</NcSettingsSection>
+</template>