diff --git a/src/lib/classes.svelte.ts b/src/lib/components/common/classes.svelte.ts
similarity index 80%
rename from src/lib/classes.svelte.ts
rename to src/lib/components/common/classes.svelte.ts
index c5039f8..2766885 100644
--- a/src/lib/classes.svelte.ts
+++ b/src/lib/components/common/classes.svelte.ts
@@ -1,5 +1,7 @@
 export class PersistentAppSettingsObject {
-    daisyUITheme = "" // for setting the UI theme. See https://daisyui.com/docs/themes/
+    daisyUITheme = ""       // for setting the UI theme. See https://daisyui.com/docs/themes/
+    headscaleAPIKey = ""    // sensitive, allows for administrative access to headscale
+    headscaleURL = ""       //url for headscale to use
 
     public constructor(init?: Partial<PersistentAppSettingsObject>) {
         Object.assign(this, init);
diff --git a/src/lib/state.svelte b/src/lib/components/common/state.svelte
similarity index 100%
rename from src/lib/state.svelte
rename to src/lib/components/common/state.svelte
diff --git a/src/lib/components/layout/navbar.svelte b/src/lib/components/layout/navbar.svelte
index f2bfd88..abfe8c3 100644
--- a/src/lib/components/layout/navbar.svelte
+++ b/src/lib/components/layout/navbar.svelte
@@ -1,6 +1,6 @@
 <!-- nav bar content here -->
 <script lang="ts">
-	import { appSettings } from '$lib/state.svelte';
+	import { appSettings } from '$lib/components/common/state.svelte';
 </script>
 
 <div class="flex-1">
diff --git a/src/lib/components/layout/sidebar.svelte b/src/lib/components/layout/sidebar.svelte
index 5e75ef2..933be00 100644
--- a/src/lib/components/layout/sidebar.svelte
+++ b/src/lib/components/layout/sidebar.svelte
@@ -15,8 +15,8 @@
 				>
 			</div>
 			<div class="cols-span-2">
-				<div class="text-primary">Guru</div>
-				<div class="ml-5 text-primary">Computing</div>
+				<div class="text-primary">Headscale</div>
+				<div class="ml-5 text-primary">UI</div>
 			</div>
 		</div>
 	</a>
diff --git a/src/lib/components/layout/toast.svelte b/src/lib/components/layout/toast.svelte
index 26fbeff..e24e0a0 100644
--- a/src/lib/components/layout/toast.svelte
+++ b/src/lib/components/layout/toast.svelte
@@ -1,6 +1,6 @@
 <!-- used to generate alerts or messages -->
 <script lang="ts">
-	import { appSettings } from '$lib/state.svelte';
+	import { appSettings } from '$lib/components/common/state.svelte';
 	let { toastAlert } = $props();
 
 	let progress = $state(100);
@@ -18,7 +18,6 @@
 		}
 	}, intervalTime);
 
-	// Removes alert early on button press
 	function removeAlert() {
 		clearInterval(interval); // Stop the interval at 0
 		appSettings.toastAlerts = appSettings.toastAlerts.filter(function (returnObj) {
diff --git a/src/lib/components/settings/server-settings.svelte b/src/lib/components/settings/server-settings.svelte
index 5c1fd6a..2823092 100644
--- a/src/lib/components/settings/server-settings.svelte
+++ b/src/lib/components/settings/server-settings.svelte
@@ -7,8 +7,9 @@
 		<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" type="password" placeholder="******************" />
+	<input class="input input-sm input-bordered w-full" minlength="54" maxlength="54" type="password" placeholder="******************" />
 	<label for="url" class="label">
 		<span class="label-text-alt">Generate an API key for your headscale instance and place it here.</span>
 	</label>
+	<button class="btn btn-sm btn-secondary w-16">save</button>
 </div>
diff --git a/src/lib/components/settings/server-settings.ts b/src/lib/components/settings/server-settings.ts
new file mode 100644
index 0000000..094fd0d
--- /dev/null
+++ b/src/lib/components/settings/server-settings.ts
@@ -0,0 +1,3 @@
+export function testAPIConnectivity() {
+    return true;
+}
\ No newline at end of file
diff --git a/src/lib/components/settings/theme-settings.svelte b/src/lib/components/settings/theme-settings.svelte
index 22c4144..563f5e7 100644
--- a/src/lib/components/settings/theme-settings.svelte
+++ b/src/lib/components/settings/theme-settings.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { persistentAppSettings } from '$lib/state.svelte';
+    import { persistentAppSettings } from '$lib/components/common/state.svelte';
 	import Svelecte from 'svelecte';
 </script>
 
diff --git a/src/lib/index.ts b/src/lib/index.ts
deleted file mode 100644
index 856f2b6..0000000
--- a/src/lib/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-// place files you want to import through the `$lib` alias in this folder.
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 3294935..4204cfa 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-	import { toastAlert, type PersistentAppSettingsObject } from '$lib/classes.svelte';
+	import { toastAlert, type PersistentAppSettingsObject } from '$lib/components/common/classes.svelte';
 	import Toast from '$lib/components/layout/toast.svelte';
 	import Navbar from '$lib/components/layout/navbar.svelte';
 	import Sidebar from '$lib/components/layout/sidebar.svelte';
-	import { appSettings, persistentAppSettings } from '$lib/state.svelte';
+	import { appSettings, persistentAppSettings } from '$lib/components/common/state.svelte';
 	import { onMount } from 'svelte';
 	import { fade } from 'svelte/transition';
 	import '../app.css';
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 8d041ab..e34f3c1 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -4,6 +4,6 @@
 	import { onMount } from 'svelte';
 
 	onMount(async () => {
-		// goto(`${base}/users.html`);
+		goto(`${base}/users.html`);
 	});
 </script>
diff --git a/src/routes/settings.html/+page.svelte b/src/routes/settings.html/+page.svelte
index ad5c41b..78219fc 100644
--- a/src/routes/settings.html/+page.svelte
+++ b/src/routes/settings.html/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import ServerSettings from '$lib/components/settings/server-settings.svelte';
 	import ThemeSettings from '$lib/components/settings/theme-settings.svelte';
-	import { appSettings } from '$lib/state.svelte';
+	import { appSettings } from '$lib/components/common/state.svelte';
 
 	appSettings.navbarTitle = 'Settings';
 	appSettings.sidebarDrawerOpen = false;
diff --git a/src/routes/users.html/+page.svelte b/src/routes/users.html/+page.svelte
index 5df54a4..8538d4a 100644
--- a/src/routes/users.html/+page.svelte
+++ b/src/routes/users.html/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { appSettings } from '$lib/state.svelte';
+	import { appSettings } from '$lib/components/common/state.svelte';
 
 	appSettings.navbarTitle = 'Users';
 	appSettings.sidebarDrawerOpen = false;