diff --git a/src/components/AdminSettings.vue b/src/components/AdminSettings.vue
index 333628f6..659f9c50 100644
--- a/src/components/AdminSettings.vue
+++ b/src/components/AdminSettings.vue
@@ -38,12 +38,14 @@
 						:show-trailing-button="!!state.url"
 						@update:model-value="onSensitiveInput(true)"
 						@trailing-button-click="state.url = '' ; onSensitiveInput(true)">
-						<EarthIcon />
+						<template #icon>
+							<EarthIcon :size="20" />
+						</template>
 					</NcTextField>
 					<NcButton variant="tertiary"
 						:title="t('integration_openai', 'Leave empty to use {openaiApiUrl}', { openaiApiUrl: 'https://api.openai.com/v1' })">
 						<template #icon>
-							<HelpCircleIcon />
+							<HelpCircleOutlineIcon />
 						</template>
 					</NcButton>
 				</div>
@@ -70,7 +72,7 @@
 					<NcButton variant="tertiary"
 						:title="t('integration_openai', 'This name will be displayed as provider name in the AI admin settings')">
 						<template #icon>
-							<HelpCircleIcon />
+							<HelpCircleOutlineIcon />
 						</template>
 					</NcButton>
 				</div>
@@ -85,7 +87,9 @@
 						:show-trailing-button="!!state.request_timeout"
 						@update:model-value="onInput()"
 						@trailing-button-click="state.request_timeout = '' ; onInput()">
-						<TimerAlertOutlineIcon />
+						<template #icon>
+							<TimerAlertOutlineIcon :size="20" />
+						</template>
 						<template #trailing-button-icon>
 							<CloseIcon :size="20" />
 						</template>
@@ -93,7 +97,7 @@
 					<NcButton variant="tertiary"
 						:title="t('integration_openai', 'Timeout for the request to the external API')">
 						<template #icon>
-							<HelpCircleIcon />
+							<HelpCircleOutlineIcon />
 						</template>
 					</NcButton>
 				</div>
@@ -139,7 +143,9 @@
 						@update:model-value="onSensitiveInput(true)"
 						@trailing-button-click="state.api_key = '' ; onSensitiveInput(true)"
 						@focus="readonly = false">
-						<KeyIcon />
+						<template #icon>
+							<KeyOutlineIcon :size="20" />
+						</template>
 					</NcTextField>
 				</div>
 				<NcNoteCard v-show="state.url === ''" type="info">
@@ -161,7 +167,9 @@
 							@update:model-value="onSensitiveInput(true)"
 							@trailing-button-click="state.basic_user = '' ; onSensitiveInput(true)"
 							@focus="readonly = false">
-							<AccountIcon />
+							<template #icon>
+								<AccountOutlineIcon :size="20" />
+							</template>
 						</NcTextField>
 					</div>
 					<div class="line">
@@ -176,7 +184,9 @@
 							@update:model-value="onSensitiveInput(true)"
 							@trailing-button-click="state.basic_password = '' ; onSensitiveInput(true)"
 							@focus="readonly = false">
-							<KeyIcon />
+							<template #icon>
+								<KeyOutlineIcon :size="20" />
+							</template>
 						</NcTextField>
 					</div>
 				</div>
@@ -233,7 +243,7 @@
 						target="_blank">
 						<NcButton variant="tertiary" aria-label="openai-info">
 							<template #icon>
-								<HelpCircleIcon />
+								<HelpCircleOutlineIcon />
 							</template>
 						</NcButton>
 					</a>
@@ -243,7 +253,7 @@
 						target="_blank">
 						<NcButton variant="tertiary" aria-label="localai-info">
 							<template #icon>
-								<HelpCircleIcon />
+								<HelpCircleOutlineIcon />
 							</template>
 						</NcButton>
 					</a>
@@ -260,7 +270,7 @@
 					<NcButton variant="tertiary"
 						:title="llmExtraParamHint">
 						<template #icon>
-							<HelpCircleIcon />
+							<HelpCircleOutlineIcon />
 						</template>
 					</NcButton>
 				</div>
@@ -282,7 +292,7 @@
 					<NcButton variant="tertiary"
 						:title="t('integration_openai', 'Split the prompt into chunks with each chunk being no more than the specified number of tokens (0 disables chunking)')">
 						<template #icon>
-							<HelpCircleIcon />
+							<HelpCircleOutlineIcon />
 						</template>
 					</NcButton>
 				</div>
@@ -308,7 +318,7 @@
 						target="_blank">
 						<NcButton variant="tertiary" aria-label="openai-info">
 							<template #icon>
-								<HelpCircleIcon />
+								<HelpCircleOutlineIcon />
 							</template>
 						</NcButton>
 					</a>
@@ -318,7 +328,7 @@
 						target="_blank">
 						<NcButton variant="tertiary" aria-label="localai-info">
 							<template #icon>
-								<HelpCircleIcon />
+								<HelpCircleOutlineIcon />
 							</template>
 						</NcButton>
 					</a>
@@ -338,7 +348,7 @@
 					<NcButton variant="tertiary"
 						:title="defaultImageSizeParamHint">
 						<template #icon>
-							<HelpCircleIcon />
+							<HelpCircleOutlineIcon />
 						</template>
 					</NcButton>
 				</div>
@@ -369,7 +379,7 @@
 						target="_blank">
 						<NcButton variant="tertiary" aria-label="openai-info">
 							<template #icon>
-								<HelpCircleIcon />
+								<HelpCircleOutlineIcon />
 							</template>
 						</NcButton>
 					</a>
@@ -379,7 +389,7 @@
 						target="_blank">
 						<NcButton variant="tertiary" aria-label="localai-info">
 							<template #icon>
-								<HelpCircleIcon />
+								<HelpCircleOutlineIcon />
 							</template>
 						</NcButton>
 					</a>
@@ -408,7 +418,7 @@
 					target="_blank">
 					<NcButton variant="tertiary" aria-label="openai-info">
 						<template #icon>
-							<HelpCircleIcon />
+							<HelpCircleOutlineIcon />
 						</template>
 					</NcButton>
 				</a>
@@ -418,7 +428,7 @@
 					target="_blank">
 					<NcButton variant="tertiary" aria-label="localai-info">
 						<template #icon>
-							<HelpCircleIcon />
+							<HelpCircleOutlineIcon />
 						</template>
 					</NcButton>
 				</a>
@@ -433,7 +443,7 @@
 						variant="tertiary"
 						aria-label="voices-info">
 						<template #icon>
-							<HelpCircleIcon />
+							<HelpCircleOutlineIcon />
 						</template>
 					</NcButton>
 				</label>
@@ -529,7 +539,7 @@
 					<NcButton variant="tertiary"
 						:title="t('integration_openai', 'Maximum number of new tokens generated for a single text generation prompt')">
 						<template #icon>
-							<HelpCircleIcon />
+							<HelpCircleOutlineIcon />
 						</template>
 					</NcButton>
 				</div>
@@ -574,11 +584,11 @@
 </template>
 
 <script>
-import AccountIcon from 'vue-material-design-icons/Account.vue'
+import AccountOutlineIcon from 'vue-material-design-icons/AccountOutline.vue'
 import CloseIcon from 'vue-material-design-icons/Close.vue'
 import EarthIcon from 'vue-material-design-icons/Earth.vue'
-import HelpCircleIcon from 'vue-material-design-icons/HelpCircle.vue'
-import KeyIcon from 'vue-material-design-icons/Key.vue'
+import HelpCircleOutlineIcon from 'vue-material-design-icons/HelpCircleOutline.vue'
+import KeyOutlineIcon from 'vue-material-design-icons/KeyOutline.vue'
 import TimerAlertOutlineIcon from 'vue-material-design-icons/TimerAlertOutline.vue'
 
 import OpenAiIcon from './icons/OpenAiIcon.vue'
@@ -604,12 +614,12 @@ export default {
 
 	components: {
 		OpenAiIcon,
-		KeyIcon,
+		KeyOutlineIcon,
 		CloseIcon,
-		AccountIcon,
+		AccountOutlineIcon,
 		EarthIcon,
 		TimerAlertOutlineIcon,
-		HelpCircleIcon,
+		HelpCircleOutlineIcon,
 		NcButton,
 		NcSelect,
 		NcCheckboxRadioSwitch,
diff --git a/src/components/PersonalSettings.vue b/src/components/PersonalSettings.vue
index 3c295337..7f292bc4 100644
--- a/src/components/PersonalSettings.vue
+++ b/src/components/PersonalSettings.vue
@@ -29,7 +29,9 @@
 						@update:model-value="onSensitiveInput"
 						@trailing-button-click="state.api_key = '' ; onSensitiveInput()"
 						@focus="readonly = false">
-						<KeyIcon />
+						<template #icon>
+							<KeyOutlineIcon :size="20" />
+						</template>
 					</NcTextField>
 				</div>
 				<div v-if="!state.is_custom_service">
@@ -47,30 +49,37 @@
 					{{ t('integration_openai', 'Leave the username and password empty to use the ones defined by your administrator') }}
 				</NcNoteCard>
 				<div class="line">
-					<label for="basic-user">
-						<KeyIcon :size="20" class="icon" />
-						{{ t('integration_openai', 'Username') }}
-					</label>
-					<input id="openai-basic-user"
+					<NcTextField
+						id="openai-basic-user"
 						v-model="state.basic_user"
-						type="text"
+						class="input"
 						:readonly="readonly"
-						:placeholder="t('integration_openai', 'your Basic Auth user')"
-						@input="onSensitiveInput"
+						:label="t('integration_openai', 'Basic Auth user')"
+						:show-trailing-button="!!state.basic_user"
+						@update:model-value="onSensitiveInput()"
+						@trailing-button-click="state.basic_user = '' ; onSensitiveInput()"
 						@focus="readonly = false">
+						<template #icon>
+							<AccountOutlineIcon :size="20" />
+						</template>
+					</NcTextField>
 				</div>
 				<div class="line">
-					<label for="basic-password">
-						<KeyIcon :size="20" class="icon" />
-						{{ t('integration_openai', 'Password') }}
-					</label>
-					<input id="openai-basic-password"
+					<NcTextField
+						id="openai-basic-password"
 						v-model="state.basic_password"
+						class="input"
 						type="password"
 						:readonly="readonly"
-						:placeholder="t('integration_openai', 'your Basic Auth password')"
-						@input="onSensitiveInput"
+						:label="t('integration_openai', 'Basic Auth password')"
+						:show-trailing-button="!!state.basic_password"
+						@update:model-value="onSensitiveInput()"
+						@trailing-button-click="state.basic_password = '' ; onSensitiveInput()"
 						@focus="readonly = false">
+						<template #icon>
+							<KeyOutlineIcon :size="20" />
+						</template>
+					</NcTextField>
 				</div>
 			</div>
 			<div v-if="quotaInfo !== null">
@@ -111,27 +120,29 @@
 </template>
 
 <script>
+import AccountOutlineIcon from 'vue-material-design-icons/AccountOutline.vue'
 import InformationOutlineIcon from 'vue-material-design-icons/InformationOutline.vue'
-import KeyIcon from 'vue-material-design-icons/Key.vue'
+import KeyOutlineIcon from 'vue-material-design-icons/KeyOutline.vue'
 
 import OpenAiIcon from './icons/OpenAiIcon.vue'
 
-import NcTextField from '@nextcloud/vue/components/NcTextField'
 import NcNoteCard from '@nextcloud/vue/components/NcNoteCard'
+import NcTextField from '@nextcloud/vue/components/NcTextField'
 
-import { loadState } from '@nextcloud/initial-state'
-import { generateUrl } from '@nextcloud/router'
 import axios from '@nextcloud/axios'
-import { showSuccess, showError } from '@nextcloud/dialogs'
+import { showError, showSuccess } from '@nextcloud/dialogs'
+import { loadState } from '@nextcloud/initial-state'
 import { confirmPassword } from '@nextcloud/password-confirmation'
+import { generateUrl } from '@nextcloud/router'
 import debounce from 'debounce'
 
 export default {
 	name: 'PersonalSettings',
 
 	components: {
+		AccountOutlineIcon,
 		OpenAiIcon,
-		KeyIcon,
+		KeyOutlineIcon,
 		InformationOutlineIcon,
 		NcNoteCard,
 		NcTextField,
@@ -165,17 +176,17 @@ export default {
 			this.saveOptions({
 			})
 		}, 2000),
-		onSensitiveInput: debounce(function() {
+		onSensitiveInput: debounce(async function() {
 			const values = {
-				basic_user: this.state.basic_user,
+				basic_user: (this.state.basic_user ?? '').trim(),
 			}
 			if (this.state.api_key !== 'dummyApiKey') {
-				values.api_key = this.state.api_key
+				values.api_key = (this.state.api_key ?? '').trim()
 			}
 			if (this.state.basic_password !== 'dummyPassword') {
-				values.basic_password = this.state.basic_password
+				values.basic_password = (this.state.basic_password ?? '').trim()
 			}
-			this.saveOptions(values, true)
+			await this.saveOptions(values, true)
 		}, 2000),
 		async loadQuotaInfo() {
 			const url = generateUrl('/apps/integration_openai/quota-info')
@@ -226,10 +237,12 @@ export default {
 	#openai-content {
 		margin-left: 40px;
 	}
+
 	h2,
 	.line,
 	.settings-hint {
 		display: flex;
+		justify-content: start;
 		align-items: center;
 		margin-top: 12px;
 		.icon {