diff --git a/dashboard/src/components/settings/InviteTeamMemberDialog.vue b/dashboard/src/components/settings/InviteTeamMemberDialog.vue
index 964ef95..f222be5 100644
--- a/dashboard/src/components/settings/InviteTeamMemberDialog.vue
+++ b/dashboard/src/components/settings/InviteTeamMemberDialog.vue
@@ -21,27 +21,28 @@
 				/>
 			</n-form-item>
 			<div v-if="$resources.roles.data?.length > 0" class="space-y-4">
-				<div class="flex items-end gap-2">
-					<n-form-item :label="$t('Select Role')" class="flex-1">
+				<div class="role-select-row">
+					<label class="role-select-label">{{ $t('Select Role') }}</label>
+					<div class="flex items-center gap-2">
 						<n-select
 							v-model:value="selectedRole"
 							:options="roleOptions"
-							:placeholder="$t('Select a role')"
+							placeholder=""
 							:size="inputSize"
-							class="w-full"
+							class="flex-1"
 						/>
-					</n-form-item>
-					<n-button
-						type="primary"
-						:disabled="!selectedRole"
-						@click="addRole"
-						:size="buttonSize"
-					>
-						<template #icon>
-							<n-icon><PlusIcon /></n-icon>
-						</template>
-						{{ $t('Add') }}
-					</n-button>
+						<n-button
+							type="primary"
+							:disabled="!selectedRole"
+							@click="addRole"
+							:size="buttonSize"
+						>
+							<template #icon>
+								<n-icon><PlusIcon /></n-icon>
+							</template>
+							{{ $t('Add') }}
+						</n-button>
+					</div>
 				</div>
 				<div v-if="selectedRoles.length > 0" class="space-y-2">
 					<div
@@ -64,9 +65,9 @@
 				</div>
 			</div>
 			<n-alert
-				v-if="$team.inviteTeamMember.error"
+				v-if="$team?.inviteTeamMember?.error"
 				type="error"
-				:title="getErrorMessage($team.inviteTeamMember.error)"
+				:title="getErrorMessage($team?.inviteTeamMember?.error)"
 			/>
 		</n-space>
 		<template #action>
@@ -76,7 +77,7 @@
 				</n-button>
 				<n-button
 					type="primary"
-					:loading="$team.inviteTeamMember.loading"
+					:loading="$team?.inviteTeamMember?.loading"
 					@click="inviteMember"
 					:block="isMobile"
 					:size="buttonSize"
@@ -153,7 +154,7 @@ export default {
 			return this.isMobile ? 'medium' : 'large';
 		},
 		buttonSize() {
-			return this.isMobile ? 'medium' : 'medium';
+			return this.isMobile ? 'medium' : 'large';
 		},
 		roleOptions() {
 			if (!this.$resources.roles.data) return [];
@@ -182,12 +183,18 @@ export default {
 		},
 		getErrorMessage(error) {
 			if (!error) return '';
-			if (typeof error === 'string') return error;
-			if (error.message) return error.message;
-			if (error.messages && Array.isArray(error.messages)) {
-				return error.messages.join('\n');
+			try {
+				if (typeof error === 'string') return error;
+				if (error && typeof error === 'object') {
+					if (error.message) return error.message;
+					if (error.messages && Array.isArray(error.messages)) {
+						return error.messages.join('\n');
+					}
+				}
+				return String(error);
+			} catch (e) {
+				return String(error || 'Unknown error');
 			}
-			return String(error);
 		},
 		addRole() {
 			if (this.selectedRole) {
@@ -206,25 +213,34 @@ export default {
 				(role) => role.value !== roleToRemove,
 			);
 		},
-		inviteMember() {
+		async inviteMember() {
 			if (!this.username) {
 				toast.error(this.$t('Username is required'));
 				return;
 			}
+			if (!this.$team?.inviteTeamMember) {
+				toast.error(this.$t('Team service is not available'));
+				return;
+			}
 			if (this.$team.inviteTeamMember.loading) return;
 			
-			toast.success(this.$t('Member added to team'), { duration: 2000 });
-			this.$team.inviteTeamMember.submit({
-				username: this.username,
-				roles: this.selectedRoles.map((role) => role.value),
-			});
-			this.hide();
-			setTimeout(() => {
-				if (this.$team?.getTeamMembers) {
-					this.$team.getTeamMembers.submit();
-				}
-				this.$emit('success');
-			}, 500);
+			try {
+				await this.$team.inviteTeamMember.submit({
+					username: this.username,
+					roles: this.selectedRoles.map((role) => role.value),
+				});
+				toast.success(this.$t('Member added to team'), { duration: 2000 });
+				this.hide();
+				setTimeout(() => {
+					if (this.$team?.getTeamMembers) {
+						this.$team.getTeamMembers.submit();
+					}
+					this.$emit('success');
+				}, 500);
+			} catch (error) {
+				// Error will be displayed in the alert component
+				console.error('Failed to invite team member:', error);
+			}
 		},
 		hide() {
 			this.showDialog = false;
@@ -266,6 +282,29 @@ export default {
 	width: 100%;
 }
 
+.role-select-row {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+}
+
+.role-select-label {
+	font-size: 14px;
+	font-weight: 500;
+	color: var(--n-text-color);
+	margin-bottom: 0;
+}
+
+.role-select-row .flex {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
+.role-select-row .n-select {
+	flex: 1;
+}
+
 :deep(.invite-member-modal .n-card__action) {
 	padding: 16px 24px;
 }