diff --git a/src/lib/components/common/classes.svelte.ts b/src/lib/components/common/classes.svelte.ts
index dff065d..7a80d8d 100644
--- a/src/lib/components/common/classes.svelte.ts
+++ b/src/lib/components/common/classes.svelte.ts
@@ -17,7 +17,6 @@ export class AppSettingsObject {
     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
-    apiSecretHidden = true       // for hiding or showing the API key
     
     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 af32afb..18b21dd 100644
--- a/src/lib/components/settings/server-settings.svelte
+++ b/src/lib/components/settings/server-settings.svelte
@@ -3,6 +3,8 @@
 	import { testAPIConnectivity } from './server-settings.svelte.ts';
 	import { appSettings } from '$lib/components/common/state.svelte';
 	import { fly } from 'svelte/transition';
+
+	let apiSecretHidden = $state(true); // for hiding or showing the API key
 </script>
 
 <div class="form-control">
@@ -16,9 +18,9 @@
 		</label>
 		<label class="mb-2 block font-bold text-secondary" for="headscaleKey"> Headscale API Key </label>
 		<div class="relative flex">
-			<input id="headscaleKey" bind:value={persistentAppSettings.headscaleAPIKey} class="input input-sm input-bordered w-full" minlength="40" maxlength="40" type={appSettings.apiSecretHidden ? "password" : "text"} required placeholder="******************" />
-			<button class="ml-2" onclick={() => {appSettings.apiSecretHidden = !appSettings.apiSecretHidden }}
-				>{#if appSettings.apiSecretHidden}
+			<input id="headscaleKey" bind:value={persistentAppSettings.headscaleAPIKey} class="input input-sm input-bordered w-full" minlength="40" maxlength="40" type={apiSecretHidden ? "password" : "text"} required placeholder="******************" />
+			<button class="ml-2" onclick={() => {apiSecretHidden = !apiSecretHidden }}
+				>{#if apiSecretHidden}
 					<!-- eye off -->
 					<svg xmlns="http://www.w3.org/2000/svg" class="my-1.5 h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" /></svg>
 				{:else}