diff --git a/src/lib/components/common/classes.svelte.ts b/src/lib/components/common/classes.svelte.ts
index 6c4ded8..7a80d8d 100644
--- a/src/lib/components/common/classes.svelte.ts
+++ b/src/lib/components/common/classes.svelte.ts
@@ -16,6 +16,7 @@ export class AppSettingsObject {
     appLoaded = false               // for hiding the screen until hydration has completed
     sidebarDrawerOpen = false       // for determining if the sidebar is open when on a small screen
     toastAlerts = new SvelteMap<string, toastAlert>();  // for adding or removing alerts
+    apiTested = true               // used to hide the app if the api tests are failing
     
     public constructor(init?: Partial<AppSettingsObject>) {
         Object.assign(this, init);
diff --git a/src/lib/components/settings/server-settings.svelte b/src/lib/components/settings/server-settings.svelte
index 19f0bbf..14d5c34 100644
--- a/src/lib/components/settings/server-settings.svelte
+++ b/src/lib/components/settings/server-settings.svelte
@@ -1,6 +1,8 @@
 <script lang="ts">
 	import { persistentAppSettings } from '$lib/components/common/state.svelte';
-	import { testAPIConnectivity } from "./server-settings.svelte.ts";
+	import { testAPIConnectivity } from './server-settings.svelte.ts';
+	import { appSettings } from '$lib/components/common/state.svelte';
+	import { fly } from 'svelte/transition';
 </script>
 
 <div class="form-control">
@@ -18,5 +20,16 @@
 			<span class="label-text-alt">Generate an API key for your headscale instance and place it here.</span>
 		</label>
 	</form>
-	<button form="server-settings" class="btn btn-secondary btn-sm w-16">Save</button>
+	<span
+		><button form="server-settings" class="btn btn-secondary btn-sm w-24"> Test API</button>
+		{#if appSettings.apiTested}
+			<svg in:fly|global={{ x: 10, duration: 600 }} xmlns="http://www.w3.org/2000/svg" class="inline h-6 w-6 fill-none stroke-success" viewBox="0 0 24 24" stroke-width="2">
+				<path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+			</svg>
+		{:else}
+		<svg data-slot="icon" fill="none" stroke-width="1.5" class="inline h-6 w-6 fill-none stroke-error" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+			<path stroke-linecap="round" stroke-linejoin="round" d="m9.75 9.75 4.5 4.5m0-4.5-4.5 4.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"></path>
+		  </svg>
+		{/if}
+	</span>
 </div>
diff --git a/src/lib/components/settings/server-settings.svelte.ts b/src/lib/components/settings/server-settings.svelte.ts
index 4810dcc..06eebf8 100644
--- a/src/lib/components/settings/server-settings.svelte.ts
+++ b/src/lib/components/settings/server-settings.svelte.ts
@@ -1,26 +1,25 @@
 import { newToastAlert } from "../layout/toast.svelte.ts";
-import { persistentAppSettings } from "../common/state.svelte";
+import { appSettings, persistentAppSettings } from "../common/state.svelte";
 
 export async function testAPIConnectivity(submission: SubmitEvent) {
-    try {
-        const response = await fetch(`${persistentAppSettings.headscaleURL}/api/v1/apikey`, {
-            method: 'GET',
-            headers: {
-                'Authorization': `Bearer ${persistentAppSettings.headscaleAPIKey}`,
-                'Content-Type': 'application/json'
-            }
-        });
-        
-        if (!response.ok) {
-            newToastAlert(`HTTP error! Status: ${response.status}`);
+    const response = await fetch(`${persistentAppSettings.headscaleURL}/api/v1/apikey`, {
+        method: 'GET',
+        headers: {
+            'Authorization': `Bearer ${persistentAppSettings.headscaleAPIKey}`,
+            'Content-Type': 'application/json'
         }
-        
-        const data = await response.json();
-        newToastAlert('success!');
-        if (persistentAppSettings.debugLogging) {
-            newToastAlert(`API Response: ${JSON.stringify(data)}`);
-        }
-    } catch (error) {
-        newToastAlert(`Error fetching API key: ${error}`);
+    });
+
+    if (!response.ok) {
+        newToastAlert(`API error! Status: ${response.status}`);
+        appSettings.apiTested = false;
+    }
+
+    const data = await response.json();
+    newToastAlert('Successfully connected to headscale!');
+    appSettings.apiTested = true;
+
+    if (persistentAppSettings.debugLogging) {
+        newToastAlert(`API Response: ${JSON.stringify(data)}`);
     }
 }
\ No newline at end of file