diff --git a/src/lib/settings/ServerSettings.svelte b/src/lib/settings/ServerSettings.svelte
index 9d301c6..a869e2d 100644
--- a/src/lib/settings/ServerSettings.svelte
+++ b/src/lib/settings/ServerSettings.svelte
@@ -68,7 +68,7 @@
 				</svg>
 			{/if}
 		</button>
-		<RolloverApi />
+		<RolloverApi {apiStatus} />
 	</div>
 	<p class="text-xs text-base-content text-italics mb-8">Generate an API key for your headscale instance and place it here.</p>
 	{#if apiStatus != 'succeeded'}
diff --git a/src/lib/settings/ServerSettings/RolloverAPI.svelte b/src/lib/settings/ServerSettings/RolloverAPI.svelte
index f8b113a..fd77633 100644
--- a/src/lib/settings/ServerSettings/RolloverAPI.svelte
+++ b/src/lib/settings/ServerSettings/RolloverAPI.svelte
@@ -4,6 +4,7 @@
 	import { alertStore, APIKeyStore } from '$lib/common/stores';
 	let keyList = [new APIKey()];
 	let currentKey = new APIKey();
+  export let apiStatus = '';
 
 	// get current API keys
 	// Match to current key
@@ -46,5 +47,5 @@
 		getAPIKeysAction();
 	}}
 	class="btn btn-sm btn-secondary capitalize ml-4"
-	type="button">Rollover API Key</button
+	type="button" disabled="{apiStatus != 'succeeded'}">Rollover API Key</button
 >