diff --git a/package-lock.json b/package-lock.json
index 02f7709..ddedd23 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2927,7 +2927,7 @@
 		"@tailwindcss/typography": {
 			"version": "git+ssh://git@github.com/tailwindcss/typography.git#f06117a58506a7f7f3fceb66bbc659af3776807b",
 			"dev": true,
-			"from": "@tailwindcss/typography@tailwindcss/typography",
+			"from": "@tailwindcss/typography@github:tailwindcss/typography",
 			"requires": {
 				"lodash.castarray": "^4.4.0",
 				"lodash.isplainobject": "^4.0.6",
diff --git a/src/lib/common/functions.svelte b/src/lib/common/functions.svelte
deleted file mode 100644
index 526e214..0000000
--- a/src/lib/common/functions.svelte
+++ /dev/null
@@ -1,22 +0,0 @@
-<script context="module" lang="ts">
-	export async function TestAPI(): Promise<boolean> {
-		let headscaleURL = localStorage.getItem('headscaleURL') || '';
-		let headscaleAPIKey = localStorage.getItem('headscaleAPIKey') || '';
-		let apiStatus = false;
-		// using /api/v1/machine until headscale provides an endpoint to test a key against
-		await fetch(headscaleURL + '/api/v1/machine', {
-			method: 'GET',
-			headers: {
-				Accept: 'application/json',
-				Authorization: `Bearer ${headscaleAPIKey}`
-			}
-		})
-			.then((response) => {
-				apiStatus = response.ok;
-			})
-			.catch((error) => {
-				apiStatus = false;
-			});
-		return apiStatus;
-	}
-</script>
diff --git a/src/lib/common/stores.js b/src/lib/common/stores.js
index ba56ada..71a45c7 100644
--- a/src/lib/common/stores.js
+++ b/src/lib/common/stores.js
@@ -1,3 +1,6 @@
 import { writable } from 'svelte/store';
 
-export const alert = writable('');
\ No newline at end of file
+// used to store the value of an alert across all components
+export const alert = writable('');
+// stores the theme
+export const headscaleThemeStore = writable('');
\ No newline at end of file
diff --git a/src/lib/settings/ThemeSettings.svelte b/src/lib/settings/ThemeSettings.svelte
new file mode 100644
index 0000000..6b5cbe0
--- /dev/null
+++ b/src/lib/settings/ThemeSettings.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { headscaleThemeStore } from '$lib/common/stores.js'
+	let themes = ['hsui', 'light', 'dark', 'cupcake', 'bumblebee', 'emerald', 'corporate', 'synthwave', 'retro', 'cyberpunk', 'valentine', 'halloween', 'garden', 'forest', 'aqua', 'lofi', 'pastel', 'fantasy', 'wireframe', 'black', 'luxury', 'dracula', 'cmyk', 'autumn', 'business', 'acid', 'lemonade', 'night', 'coffee', 'winter'];
+</script>
+
+<h1 class="text-2xl bold text-primary mb-4">Theme Settings</h1>
+<select bind:value={$headscaleThemeStore} class="select select-bordered w-full select-sm max-w-xs">
+	{#each themes as localTheme}
+		<option value={localTheme}>{localTheme}</option>
+	{/each}
+</select>
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
index 75b2300..ee6f7f3 100644
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@@ -1,16 +1,26 @@
-<script>
+<script lang="ts">
 	import '../app.css';
 	import Nav from '$lib/common/nav.svelte';
-	import Alert from '$lib/common/Alert.svelte'
+	import Alert from '$lib/common/Alert.svelte';
+	import { headscaleThemeStore } from '$lib/common/stores.js'
+	import { onMount } from 'svelte';
+
+	onMount(async () => {
+		headscaleThemeStore.set(localStorage.getItem('headscaleTheme') || 'hsui');
+		// subscribe to the navbar state and update the local storage where needed
+		headscaleThemeStore.subscribe((val) => localStorage.setItem('headscaleTheme', val));
+	});
+
+	// NOTE: the element that is using one of the theme attributes must be in the DOM on mount
 </script>
 
-<main class="flex flex-col" data-theme="hsui">
+<main data-theme={$headscaleThemeStore} class="flex flex-col">
 	<div class="flex h-screen">
 		<!-- sidebar -->
 		<Nav />
 		<!-- main window -->
 		<div class="flex flex-1 min-w-0 flex-col bg-base-100">
-			<Alert></Alert>
+			<Alert />
 			<!-- header -->
 			<!-- <div class="flex bg-gray-100 h-12 p-4">Header</div> -->
 			<!-- content -->
diff --git a/src/routes/settings.html.svelte b/src/routes/settings.html.svelte
index d2f7732..ea7d0b4 100644
--- a/src/routes/settings.html.svelte
+++ b/src/routes/settings.html.svelte
@@ -3,12 +3,13 @@
 	// Imports
 	//
 	import ServerSettings from '$lib/settings/ServerSettings.svelte';
+	import ThemeSettings from '$lib/settings/ThemeSettings.svelte';
 	import { onMount } from 'svelte';
 	import { fade } from 'svelte/transition';
 
 	// Set to true once component is initialized
 	let componentLoaded = false;
-	
+
 	onMount(async () => {
 		// Display component frontend
 		componentLoaded = true;
@@ -19,9 +20,9 @@
 <body>
 	{#if componentLoaded}
 		<div in:fade class="px-4 py-4 w-4/5">
-			<!-- Server Settings -->
 			<ServerSettings />
-			<!-- Server Settings End -->
+			<div class="p-4"></div>
+			<ThemeSettings />
 		</div>
 	{/if}
 </body>
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 3f6a60b..1bba43a 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -20,6 +20,7 @@ const config = {
 					"error": "#F87272",
 				},
 			},
+			"light", "dark", "cupcake", "bumblebee", "emerald", "corporate", "synthwave", "retro", "cyberpunk", "valentine", "halloween", "garden", "forest", "aqua", "lofi", "pastel", "fantasy", "wireframe", "black", "luxury", "dracula", "cmyk", "autumn", "business", "acid", "lemonade", "night", "coffee", "winter"
 		],
 	},