diff --git a/src/components/AdminSettings.vue b/src/components/AdminSettings.vue
index e35d6977..e26ed5dc 100644
--- a/src/components/AdminSettings.vue
+++ b/src/components/AdminSettings.vue
@@ -56,11 +56,13 @@
 					@input="onInput"
 					@focus="readonly = false">
 			</div>
-			<NcCheckboxRadioSwitch
-				v-model="state.use_popup"
-				@update:model-value="onUsePopupChanged">
-				{{ t('integration_google', 'Use a pop-up to authenticate') }}
-			</NcCheckboxRadioSwitch>
+			<div class="line">
+				<NcFormSwitch
+					v-model="state.use_popup"
+					@update:model-value="onUsePopupChanged">
+					{{ t('integration_google', 'Use a pop-up to authenticate') }}
+				</NcFormSwitch>
+			</div>
 		</div>
 	</div>
 </template>
@@ -76,7 +78,7 @@ import { generateUrl } from '@nextcloud/router'
 import axios from '@nextcloud/axios'
 import { delay } from '../utils.js'
 import { showSuccess, showError } from '@nextcloud/dialogs'
-import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwitch'
+import NcFormSwitch from '@nextcloud/vue/components/NcFormBoxSwitch'
 import { confirmPassword } from '@nextcloud/password-confirmation'
 
 export default {
@@ -84,7 +86,7 @@ export default {
 
 	components: {
 		GoogleIcon,
-		NcCheckboxRadioSwitch,
+		NcFormSwitch,
 		KeyOutlineIcon,
 		InformationOutlineIcon,
 	},
diff --git a/src/components/PersonalSettings.vue b/src/components/PersonalSettings.vue
index f2701fbe..1b16bfa4 100644
--- a/src/components/PersonalSettings.vue
+++ b/src/components/PersonalSettings.vue
@@ -32,11 +32,11 @@
 					id="google-contacts">
 					<h3>{{ t('integration_google', 'Contacts') }}</h3>
 					<div class="line">
-						<NcCheckboxRadioSwitch v-if="!importingContacts && state.user_scopes.can_access_other_contacts"
+						<NcFormSwitch v-if="!importingContacts && state.user_scopes.can_access_other_contacts"
 							:model-value="state.consider_other_contacts"
 							@update:model-value="onContactsConsiderOtherChange">
 							{{ t('integration_google', 'Include other contacts') }}
-						</NcCheckboxRadioSwitch>
+						</NcFormSwitch>
 					</div>
 					<div class="line">
 						<label>
@@ -84,11 +84,11 @@
 				</div>
 				<div v-if="calendars.length > 0">
 					<h3>{{ t('integration_google', 'Calendars') }}</h3>
-					<NcCheckboxRadioSwitch
+					<NcFormSwitch
 						:model-value="state.consider_all_events"
 						@update:model-value="onConsiderAllEventsChange">
 						{{ t('integration_google', 'Import all events including Birthdays') }}
-					</NcCheckboxRadioSwitch>
+					</NcFormSwitch>
 					<div v-for="cal in calendars" :key="cal.id" class="calendar-item">
 						<label>
 							<NcAppNavigationIconBullet :color="getCalendarColor(cal)" />
@@ -108,11 +108,11 @@
 				<div v-if="showDrive"
 					id="google-drive">
 					<h3>{{ t('integration_google', 'Drive') }}</h3>
-					<NcCheckboxRadioSwitch v-if="!importingDrive"
+					<NcFormSwitch v-if="!importingDrive"
 						:model-value="!state.consider_shared_files"
 						@update:model-value="onDriveConsiderSharedChange">
 						{{ t('integration_google', 'Ignore shared files') }}
-					</NcCheckboxRadioSwitch>
+					</NcFormSwitch>
 					<div v-if="!importingDrive" class="line">
 						<label for="document-format">
 							<FileDocumentOutlineIcon />
@@ -229,7 +229,7 @@ import axios from '@nextcloud/axios'
 import moment from '@nextcloud/moment'
 import { showSuccess, showError } from '@nextcloud/dialogs'
 import NcAppNavigationIconBullet from '@nextcloud/vue/components/NcAppNavigationIconBullet'
-import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwitch'
+import NcFormSwitch from '@nextcloud/vue/components/NcFormBoxSwitch'
 import NcButton from '@nextcloud/vue/components/NcButton'
 import { humanFileSize } from '../utils.js'
 import GoogleIconColor from './icons/GoogleIconColor.vue'
@@ -242,7 +242,7 @@ export default {
 		GoogleIcon,
 		NcAppNavigationIconBullet,
 		NcButton,
-		NcCheckboxRadioSwitch,
+		NcFormSwitch,
 		CloseIcon,
 		GoogleDriveIcon,
 		PencilOutlineIcon,