diff --git a/src/lib/common/Stores.svelte b/src/lib/common/Stores.svelte
index e5c550d..936d6d5 100644
--- a/src/lib/common/Stores.svelte
+++ b/src/lib/common/Stores.svelte
@@ -13,11 +13,11 @@
 		headscaleURLStore.set(localStorage.getItem('headscaleURL') || '');
 		headscaleAPIKeyStore.set(localStorage.getItem('headscaleAPIKey') || '');
 
-		preAuthHideStore.set(localStorage.getItem('headscalePreAuthHide') || 'false');
+		preAuthHideStore.set((localStorage.getItem('headscalePreAuthHide') || 'false') == 'true');
 
 		// subscribe to store's state and update the local storage where needed
 		headscaleThemeStore.subscribe((val) => localStorage.setItem('headscaleTheme', val));
-		preAuthHideStore.subscribe((val) => localStorage.setItem('headscalePreAuthHide', val));
+		preAuthHideStore.subscribe((val) => localStorage.setItem('headscalePreAuthHide', val ? 'true' : 'false'));
 
 		headscaleURLStore.subscribe((val) => localStorage.setItem('headscaleURL', val));
 		headscaleAPIKeyStore.subscribe((val) => localStorage.setItem('headscaleAPIKey', val));
diff --git a/src/lib/common/apiFunctions.svelte b/src/lib/common/apiFunctions.svelte
index 269a941..b5f73da 100644
--- a/src/lib/common/apiFunctions.svelte
+++ b/src/lib/common/apiFunctions.svelte
@@ -207,6 +207,38 @@
 		return headscalePreAuthKey;
 	}
 
+	export async function newPreAuthKey(userName: string): Promise<any> {
+		// variables in local storage
+		let headscaleURL = localStorage.getItem('headscaleURL') || '';
+		let headscaleAPIKey = localStorage.getItem('headscaleAPIKey') || '';
+		
+		// endpoint url for editing users
+		let endpointURL = '/api/v1/preauthkey';
+
+		await fetch(headscaleURL + endpointURL, {
+			method: 'POST',
+			headers: {
+				Accept: 'application/json',
+				Authorization: `Bearer ${headscaleAPIKey}`
+			},
+			body: JSON.stringify({
+				namespace: userName
+			})
+		})
+			.then((response) => {
+				if (response.ok) {
+					return response;
+				} else {
+					return response.text().then((text) => {
+						throw JSON.parse(text).message;
+					});
+				}
+			})
+			.catch((error) => {
+				throw error;
+			});
+	}
+
 	export async function newDevice(key: string, userName: string): Promise<any> {
 		// variables in local storage
 		let headscaleURL = localStorage.getItem('headscaleURL') || '';
@@ -264,4 +296,6 @@
 				throw error;
 			});
 	}
+
+	
 </script>
diff --git a/src/lib/common/stores.js b/src/lib/common/stores.js
index 977b265..f4976e8 100644
--- a/src/lib/common/stores.js
+++ b/src/lib/common/stores.js
@@ -11,7 +11,7 @@ export const headscaleThemeStore = writable('');
 export const headscaleURLStore = writable('');
 export const headscaleAPIKeyStore = writable('');
 // stores preauth key preference
-export const preAuthHideStore = writable('');
+export const preAuthHideStore = writable(false);
 // stores user and device data
 export const headscaleUserStore = writable([new User()]);
 export const headscaleDeviceStore = writable([new Device()]);
\ No newline at end of file
diff --git a/src/lib/index/UserCard/PreAuthKeys.svelte b/src/lib/index/UserCard/PreAuthKeys.svelte
index 8546049..c0f7c39 100644
--- a/src/lib/index/UserCard/PreAuthKeys.svelte
+++ b/src/lib/index/UserCard/PreAuthKeys.svelte
@@ -1,21 +1,22 @@
 <script lang="ts">
-	import { getPreauthKeys } from '$lib/common/apiFunctions.svelte';
+	import { getPreauthKeys, newPreAuthKey } from '$lib/common/apiFunctions.svelte';
 	import { PreAuthKey, User } from '$lib/common/classes';
 	import { alertStore, preAuthHideStore } from '$lib/common/stores';
+	import NewPreAuthKey from './PreAuthKeys/NewPreAuthKey.svelte';
 
 	// function for refreshing users from parent
 	export let user = new User();
 	let keyList = [new PreAuthKey()];
-	let preAuthHide = ($preAuthHideStore == 'true');
+	let newPreAuthKeyShow = false;
 
-	// If the key hasn't expired or key hasn't been used, flag as green, otherwise flag as red
-	function testExpiry(keyExpiry: string, keyUsed: boolean): string {
-		if (new Date(keyExpiry).getTime() > new Date().getTime()) {
-			if (!keyUsed) {
-				return 'text-success';
-			}
-		}
-		return 'text-error';
+	function NewPreAuthKeyAction() {
+		newPreAuthKey(user.name)
+			.then(() => {
+				getPreauthKeysAction();
+			})
+			.catch((error) => {
+				$alertStore = error;
+			});
 	}
 
 	function getPreauthKeysAction() {
@@ -34,23 +35,45 @@
 		<div>
 			Preauth Keys <button on:click={getPreauthKeysAction} class="ml-2">
 				<!-- refresh icon -->
-				<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+				<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline mr-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
 					<path stroke-linecap="round" stroke-linejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
 				</svg></button
 			>
-		</div>
-		<div class="border rounded p-1 -mx-2 w-fit">
-			<input type="checkbox" bind:checked="{preAuthHide}" on:change="{() => {preAuthHide ? $preAuthHideStore = 'true': $preAuthHideStore = 'false'}}" class="checkbox checkbox-xs text-base-content" /><span
+			<button
 				on:click={() => {
-					$preAuthHideStore == 'true' ? $preAuthHideStore = 'false' : $preAuthHideStore = 'true';
-					preAuthHide = ($preAuthHideStore == 'true');
+					newPreAuthKeyShow = !newPreAuthKeyShow;
+				}}
+			>
+				{#if !newPreAuthKeyShow}
+				<!-- plus icon -->
+				<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+					<path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
+				</svg>
+				{:else}
+				<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+					<path stroke-linecap="round" stroke-linejoin="round" d="M20 12H4" />
+				</svg>
+				<!-- minus icon -->
+				{/if}
+			</button>
+		</div>
+		<div class="border rounded p-1 -mx-2 mt-2 w-fit">
+			<input
+				type="checkbox"
+				bind:checked={($preAuthHideStore)}
+				class="checkbox checkbox-xs text-base-content"
+			/><span
+				on:click={() => {
+					$preAuthHideStore = !$preAuthHideStore
 				}}
 				class="font-normal ml-2">Hide Expired/Used Keys</span
 			>
 		</div>
-		<!-- plus icon -->
 	</th>
 	<td>
+		{#if newPreAuthKeyShow}
+			<NewPreAuthKey />
+		{/if}
 		<table class="table table-compact w-full">
 			<tbody>
 				{#each keyList as key}
@@ -58,17 +81,17 @@
 						<tr><td>Refresh to see contents</td></tr>
 					{:else}
 						<!-- hide if key is expired or used (and not reusable) and checkbox is checked -->
-						<tr class:hidden={preAuthHide && ((key.used && !key.reusable) || new Date(key.expiration).getTime() < new Date().getTime())}>
+						<tr class:hidden={$preAuthHideStore && ((key.used && !key.reusable) || new Date(key.expiration).getTime() < new Date().getTime())}>
 							<th>{key.id}</th>
 							<td
 								><code class="border p-1 rounded">{key.key}</code>
-								<div class="tooltip" data-tip="{new Date(key.expiration).toLocaleString()}">
-								{#if new Date(key.expiration).getTime() > new Date().getTime()}
-									<div class="btn btn-xs capitalize bg-success text-success-content mx-1">active</div>
-								{:else}
-									<div class="btn btn-xs capitalize bg-error text-error-content mx-1">expired</div>
-								{/if}
-							</div>
+								<div class="tooltip" data-tip={new Date(key.expiration).toLocaleString()}>
+									{#if new Date(key.expiration).getTime() > new Date().getTime()}
+										<div class="btn btn-xs capitalize bg-success text-success-content mx-1">active</div>
+									{:else}
+										<div class="btn btn-xs capitalize bg-error text-error-content mx-1">expired</div>
+									{/if}
+								</div>
 								{#if !key.used}
 									<div class="btn btn-xs capitalize bg-primary text-primary-content mx-1">unused</div>
 								{:else}
@@ -80,9 +103,11 @@
 							</td>
 							<td>
 								<!-- trash symbol -->
-								<button class="mr-2"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+								<button class="mr-2"
+									><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
 										<path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
-									</svg></button>
+									</svg></button
+								>
 							</td>
 						</tr>
 					{/if}
diff --git a/src/lib/index/UserCard/PreAuthKeys/NewPreAuthKey.svelte b/src/lib/index/UserCard/PreAuthKeys/NewPreAuthKey.svelte
new file mode 100644
index 0000000..f7c1505
--- /dev/null
+++ b/src/lib/index/UserCard/PreAuthKeys/NewPreAuthKey.svelte
@@ -0,0 +1 @@
+<div class=card-pending>test</div>
\ No newline at end of file
diff --git a/src/lib/index/UserCard/PreAuthKeys/RemovePreAuthKey.svelte b/src/lib/index/UserCard/PreAuthKeys/RemovePreAuthKey.svelte
deleted file mode 100644
index e69de29..0000000