diff --git a/css/app-settings.scss b/css/app-settings.scss
index b1b514a4a..4473adbef 100644
--- a/css/app-settings.scss
+++ b/css/app-settings.scss
@@ -33,17 +33,6 @@
 			}
 		}
 
-		&__import-button {
-			display: block;
-			text-align: center;
-			background-position-x: 8px;
-			position: relative;
-
-			.material-design-icon {
-				position: absolute;
-			}
-		}
-
 		&--slotDuration,
 		&--defaultReminder {
 			display: table;
diff --git a/src/components/AppNavigation/Settings/SettingsImportSection.vue b/src/components/AppNavigation/Settings/SettingsImportSection.vue
index bded55a54..a8652a1b4 100644
--- a/src/components/AppNavigation/Settings/SettingsImportSection.vue
+++ b/src/components/AppNavigation/Settings/SettingsImportSection.vue
@@ -10,10 +10,14 @@
 			:max="total" />
 	</li>
 	<li v-else class="settings-fieldset-interior-item">
-		<label class="settings-fieldset-interior-item__import-button button icon" :for="inputUid">
-			<Upload :size="20" decorative />
+		<NcButton :disabled="disableImport"
+			:wide="true"
+			@click="$refs.importInput.click()">
+			<template #icon>
+				<Upload :size="20" />
+			</template>
 			{{ $n('calendar', 'Import calendar', 'Import calendars', 1) }}
-		</label>
+		</NcButton>
 		<input :id="inputUid"
 			ref="importInput"
 			class="hidden"
@@ -52,12 +56,14 @@ import useImportFilesStore from '../../../store/importFiles.js'
 import useCalendarsStore from '../../../store/calendars.js'
 import useCalendarObjectsStore from '../../../store/calendarObjects.js'
 import { mapStores, mapState } from 'pinia'
+import { NcButton } from '@nextcloud/vue'
 
 export default {
 	name: 'SettingsImportSection',
 	components: {
 		ImportScreen,
 		Upload,
+		NcButton,
 	},
 	props: {
 		isDisabled: {