diff --git a/src/lib/components/Button.svelte b/src/lib/components/Button.svelte
index a046d0b..72e5cc9 100644
--- a/src/lib/components/Button.svelte
+++ b/src/lib/components/Button.svelte
@@ -1,6 +1,12 @@
+<svelte:options runes={true} />
+
 <script lang="ts">
-	export let text: string;
-	export let action: any = () => {};
+	import UserSettingsStore from '$lib/stores/UserSettingsStore';
+	import { themes } from '$lib/types/themes';
+
+	let {children, onclick} = $props()
+
+	let themeId = $derived($UserSettingsStore.themeId)
 </script>
 
-<button class="btn px-4 py-2 mx-2 rounded-token variant-ringed-primary hover:variant-filled-primary active:variant-filled-primary" on:click={action}>{text}</button>
+<button {onclick} class="border-2 border-{themes[themeId].primaryAction} hover:border-{themes[themeId].secondaryAction}">{@render children()}</button>
diff --git a/src/lib/components/NavigationElement.svelte b/src/lib/components/NavigationElement.svelte
index e69de29..41e8e48 100644
--- a/src/lib/components/NavigationElement.svelte
+++ b/src/lib/components/NavigationElement.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+	let {href} = $props()
+	// {$page.url.pathname === '/'}
+</script>
+
+<li>
+	<a {href}><slot /></a>
+</li>
\ No newline at end of file
diff --git a/src/lib/stores/UserSettingsStore.ts b/src/lib/stores/UserSettingsStore.ts
index e69de29..b3cf208 100644
--- a/src/lib/stores/UserSettingsStore.ts
+++ b/src/lib/stores/UserSettingsStore.ts
@@ -0,0 +1,6 @@
+import { writable, type Writable } from "svelte/store";
+import { UserSettings } from '$lib/types/userSettings';
+
+const UserSettingsStore: Writable<UserSettings> = writable(new UserSettings());
+
+export default UserSettingsStore;
\ No newline at end of file
diff --git a/src/lib/types/themes.ts b/src/lib/types/themes.ts
index e69de29..8578112 100644
--- a/src/lib/types/themes.ts
+++ b/src/lib/types/themes.ts
@@ -0,0 +1,27 @@
+export type Theme = {
+	backgroundColor: string,
+	textColor: string,
+	primaryAction: string,
+	secondaryAction: string,
+}
+const lightTheme = {
+	backgroundColor: "slate-50",
+	textColor:  "slate-950",
+	primaryAction: "sky-300",
+	secondaryAction: "sky-600",
+}
+
+const darkTheme = {
+	backgroundColor: "slate-950",
+	textColor: "slate-50",
+	primaryAction: "sky-300",
+	secondaryAction: "sky-600",
+}
+
+export const themes = [
+	lightTheme,
+	darkTheme
+]
+
+
+
diff --git a/src/lib/types/userSettings.ts b/src/lib/types/userSettings.ts
index e69de29..0fa295e 100644
--- a/src/lib/types/userSettings.ts
+++ b/src/lib/types/userSettings.ts
@@ -0,0 +1,8 @@
+export class UserSettings {
+	themeId: number
+
+	constructor() {
+		this.themeId = 1 // DEBUG
+		return this
+	}
+}
\ No newline at end of file