diff --git a/src/lib/components/common/classes.svelte.ts b/src/lib/components/common/classes.svelte.ts
index 7a80d8d..dff065d 100644
--- a/src/lib/components/common/classes.svelte.ts
+++ b/src/lib/components/common/classes.svelte.ts
@@ -17,6 +17,7 @@ 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 f8f0b82..af32afb 100644
--- a/src/lib/components/settings/server-settings.svelte
+++ b/src/lib/components/settings/server-settings.svelte
@@ -15,7 +15,21 @@
 			<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="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="******************" />
+		<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}
+					<!-- 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}
+					<!-- eye on -->
+					<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="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+						<path stroke-linecap="round" stroke-linejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
+					</svg>
+				{/if}
+			</button>
+		</div>
 		<label for="headscaleKey" class="label">
 			<span class="label-text-alt">Generate an API key for your headscale instance and place it here.</span>
 		</label>
@@ -27,9 +41,9 @@
 				<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 in:fly|global={{ x: 10, duration: 600 }} 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>
+			<svg in:fly|global={{ x: 10, duration: 600 }} 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>