diff --git a/dashboard/src/components/settings/DeveloperSettings.vue b/dashboard/src/components/settings/DeveloperSettings.vue
index 1ce66f5..aa60fce 100644
--- a/dashboard/src/components/settings/DeveloperSettings.vue
+++ b/dashboard/src/components/settings/DeveloperSettings.vue
@@ -7,9 +7,7 @@
 				<div class="flex items-center justify-between">
 					<div class="text-xl font-semibold">{{ $t('API Access') }}</div>
 					<Button @click="showCreateSecretDialog = true">{{
-						$team.pg?.user_info?.api_key
-							? $t('Regenerate API Key')
-							: $t('Create New API Key')
+						apiKeyButtonLabel
 					}}</Button>
 				</div>
 				<div v-if="$team.pg?.user_info?.api_key">
@@ -23,23 +21,7 @@
 				</div>
 				<Dialog
 					v-model="showCreateSecretDialog"
-					:options="{
-						title: $t('API Access'),
-						size: 'xl',
-						actions: [
-							{
-								label: $team.pg.user_info.api_key
-									? $t('Regenerate API Key')
-									: $t('Create New API Key'),
-								variant: 'solid',
-								disabled: createSecret.data,
-								loading: createSecret.loading,
-								onClick() {
-									createSecret.submit();
-								}
-							}
-						]
-					}"
+					:options="apiKeyDialogOptions"
 				>
 					<template #body-content>
 						<div v-if="createSecret.data">
@@ -468,6 +450,30 @@ webhookListResource.reload();
 	}
 };
 
+const apiKeyButtonLabel = computed(() => {
+	return $team.pg?.user_info?.api_key
+		? $t('Regenerate API Key')
+		: $t('Create New API Key');
+});
+
+const apiKeyDialogOptions = computed(() => ({
+	title: $t('API Access'),
+	size: 'xl',
+	actions: [
+		{
+			label: $team.pg.user_info.api_key
+				? $t('Regenerate API Key')
+				: $t('Create New API Key'),
+			variant: 'solid',
+			disabled: createSecret.data,
+			loading: createSecret.loading,
+			onClick() {
+				createSecret.submit();
+			}
+		}
+	]
+}));
+
 onMounted(() => {
 	if (session.hasWebhookConfigurationAccess) {
 		webhookListResource.fetch();