diff --git a/src/lib/common/Alert.svelte b/src/lib/common/Alert.svelte
index d5f8e5f..00cf9cd 100644
--- a/src/lib/common/Alert.svelte
+++ b/src/lib/common/Alert.svelte
@@ -1,66 +1,26 @@
 <script lang="ts">
-	import { writable } from 'svelte/store';
 	import { onDestroy } from 'svelte';
-	import { onMount } from 'svelte';
-	export const alert = writable('test');
+	import { slide } from 'svelte/transition';
+	import { alert } from '$lib/common/stores.js';
 	export let ms = 3000;
 	let visible = false;
 	let timeout: number;
-
-	onMount(async () => {
-		const onMessageChange = (message: string, ms: number) => {
-			clearTimeout(timeout);
-			if (!message) {
-				// hide Alert if message is empty
-				visible = false;
-			} else {
-				visible = true;
-				if (ms > 0) timeout = window.setTimeout(() => (visible = false), ms); // and hide it after ms milliseconds
-			}
-		};
-		$: onMessageChange($alert, ms); // whenever the alert store or the ms props changes run onMessageChange
-		onDestroy(() => clearTimeout(timeout)); // make sure we clean-up the timeout
-	});
+	const onMessageChange = (message: string, ms: number) => {
+		clearTimeout(timeout);
+		if (!message) {
+			// hide Alert if message is empty
+			visible = false;
+		} else {
+			visible = true;
+			if (ms > 0) timeout = window.setTimeout(() => {visible = false; $alert = ''}, ms); // and hide it after ms milliseconds
+		}
+	};
+	$: onMessageChange($alert, ms); // whenever the alert store or the ms props changes run onMessageChange
+	onDestroy(() => clearTimeout(timeout)); // make sure we clean-up the timeout
 </script>
 
 {#if visible}
-	<div on:click={() => (visible = false)}>
-		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
-			><path
-				d="M12.432 0c1.34 0 2.01.912 2.01 1.957 0 1.305-1.164 2.512-2.679 2.512-1.269 0-2.009-.75-1.974-1.99C9.789 1.436 10.67 0 12.432 0zM8.309 20c-1.058 0-1.833-.652-1.093-3.524l1.214-5.092c.211-.814.246-1.141 0-1.141-.317 0-1.689.562-2.502 1.117l-.528-.88c2.572-2.186 5.531-3.467 6.801-3.467 1.057 0 1.233 1.273.705 3.23l-1.391 5.352c-.246.945-.141 1.271.106 1.271.317 0 1.357-.392 2.379-1.207l.6.814C12.098 19.02 9.365 20 8.309 20z"
-			/></svg
-		>
+	<div transition:slide class="absolute top-0 left-1/2 transform -translate-x-1/2 p-4 text-lg text-center shadow-xl rounded-b-lg bg-gray-200 max-w-lg" on:click={() => (visible = false)}>
 		<p>{$alert}</p>
 	</div>
 {/if}
-
-<style>
-	div {
-		position: fixed;
-		cursor: pointer;
-		margin-right: 1.5rem;
-		margin-left: 1.5rem;
-		margin-top: 1rem;
-		right: 0;
-		display: flex;
-		align-items: center;
-		border-radius: 0.2rem;
-		background-color: #565656;
-		color: #fff;
-		font-size: 0.875rem;
-		font-weight: 700;
-		padding: 0.5rem 1.4rem;
-		font-size: 1.5rem;
-		z-index: 100;
-		opacity: 95%;
-	}
-	div p {
-		color: #fff;
-	}
-	div svg {
-		height: 1.6rem;
-		fill: currentcolor;
-		width: 1.4rem;
-		margin-right: 0.5rem;
-	}
-</style>
diff --git a/src/lib/common/stores.js b/src/lib/common/stores.js
new file mode 100644
index 0000000..ba56ada
--- /dev/null
+++ b/src/lib/common/stores.js
@@ -0,0 +1,3 @@
+import { writable } from 'svelte/store';
+
+export const alert = writable('');
\ No newline at end of file
diff --git a/src/lib/index/CreateUser.svelte b/src/lib/index/CreateUser.svelte
index 31d5671..c90ebd6 100644
--- a/src/lib/index/CreateUser.svelte
+++ b/src/lib/index/CreateUser.svelte
@@ -1,12 +1,13 @@
 <script lang="ts">
 	import { fade } from 'svelte/transition';
+	import { alert } from '$lib/common/stores.js';
+
 	// name for user creation
 	let userName = '';
 	// whether the new card html element is visible
 	let newUserCardVisible = false;
 	// The Form used for validating input
 	let newUserForm: HTMLFormElement;
-
 	function createUser(): void {
 		let headscaleURL = localStorage.getItem('headscaleURL') || '';
 		let headscaleAPIKey = localStorage.getItem('headscaleAPIKey') || '';
@@ -37,6 +38,7 @@
 					console.log(error);
 				});
 		} else {
+			$alert = "Use lower case letters, periods, or dashes only"
 		}
 	}
 </script>