diff --git a/src/lib/components/settings/server-settings.svelte b/src/lib/components/settings/server-settings.svelte
index 878e9ad..19f0bbf 100644
--- a/src/lib/components/settings/server-settings.svelte
+++ b/src/lib/components/settings/server-settings.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { persistentAppSettings } from '$lib/components/common/state.svelte';
 	import { testAPIConnectivity } from "./server-settings.svelte.ts";
 </script>
 
@@ -6,14 +7,14 @@
 	<h1 class="bold mb-4 text-xl text-primary">Server Settings</h1>
 
 	<form id="server-settings" onsubmit={testAPIConnectivity}>
-		<label class="mb-2 block font-bold text-secondary" for="url"> Headscale URL </label>
-		<input class="input input-sm input-bordered w-full" pattern={String.raw`https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)`} type="url" placeholder="https://hs.yourdomain.com.au" />
-		<label for="url" class="label">
+		<label class="mb-2 block font-bold text-secondary" for="headscaleURL"> Headscale URL </label>
+		<input id="headscaleURL" bind:value={persistentAppSettings.headscaleURL} class="input input-sm input-bordered w-full" type="url" placeholder="https://hs.yourdomain.com.au" />
+		<label for="headscaleURL" class="label">
 			<span class="label-text-alt">URL for your headscale server instance (does not need populating if it's on the same subdomain)</span>
 		</label>
-		<label class="mb-2 block font-bold text-secondary" for="password"> Headscale API Key </label>
-		<input class="input input-sm input-bordered w-full" minlength="54" maxlength="54" type="password" required placeholder="******************" />
-		<label for="url" class="label">
+		<label class="mb-2 block font-bold text-secondary" for="headscaleKey"> Headscale API Key </label>
+		<input id="headscaleKey" bind:value={persistentAppSettings.headscaleAPIKey} class="input input-sm input-bordered w-full" minlength="40" maxlength="40" type="password" required placeholder="******************" />
+		<label for="headscaleKey" class="label">
 			<span class="label-text-alt">Generate an API key for your headscale instance and place it here.</span>
 		</label>
 	</form>
diff --git a/src/lib/components/settings/server-settings.svelte.ts b/src/lib/components/settings/server-settings.svelte.ts
index 968b8e3..dfd5c2c 100644
--- a/src/lib/components/settings/server-settings.svelte.ts
+++ b/src/lib/components/settings/server-settings.svelte.ts
@@ -1,11 +1,23 @@
 import { toastAlert } from "../common/classes.svelte";
-import { appSettings } from "../common/state.svelte";
+import { persistentAppSettings } from "../common/state.svelte";
 
-export function testAPIConnectivity() {
-    let id = crypto.randomUUID() 
-    let toastObject = new toastAlert({
-        message: id,
-        id: id
-    });
-    appSettings.toastAlerts.set(toastObject.id, toastObject);
+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) {
+            throw new Error(`HTTP error! Status: ${response.status}`);
+        }
+        
+        const data = await response.json();
+        console.log('API Key Response:', data);
+    } catch (error) {
+        console.error('Error fetching API key:', error);
+    }
 }
\ No newline at end of file