diff --git a/src/components/Navigation.svelte b/src/components/Navigation.svelte
index 760b302..e02f522 100644
--- a/src/components/Navigation.svelte
+++ b/src/components/Navigation.svelte
@@ -44,7 +44,7 @@
 		@apply btn-icon btn-icon-xl;
 	}
 	a:not(.active) {
-		@apply bg-transparent hover:bg-surface-100 hover:bg-opacity-30;
+		@apply bg-transparent hover:bg-opacity-30 hover:bg-surface-100 hover:dark:bg-surface-700;
 	}
 	a.active {
 		@apply variant-filled-primary;
@@ -54,7 +54,7 @@
 		@apply absolute -top-6 opacity-0 font-normal pointer-events-none;
 	}
 	a:hover p {
-		@apply -top-9 opacity-100;
+		@apply -top-10 opacity-100;
 	}
 
 	a svg {
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 2950a61..639ce91 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -5,6 +5,13 @@
 	import Onboarding from "../components/Onboarding.svelte";
 	import { page } from '$app/stores';
 
+	// persistent dark mode
+	import { modeUserPrefers } from '@skeletonlabs/skeleton';
+	import { setModeCurrent } from '@skeletonlabs/skeleton';
+	if ($modeUserPrefers == false) {
+		setModeCurrent(false);
+	}
+
 	import { Modal, getModalStore } from '@skeletonlabs/skeleton';
 	// import type { ModalSettings, ModalComponent, ModalStore } from '@skeletonlabs/skeleton';
 	import { Drawer, getDrawerStore } from '@skeletonlabs/skeleton';
@@ -26,7 +33,7 @@
 	<Navigation />
 	<Onboarding />
 </main>
-<Drawer position="right" bgDrawer="bg-surface-50">
+<Drawer position="right">
 	{#if $drawerStore.id === 'edit-device'}
 		<div class="w-full h-full flex justify-center items-center">
 			<div class="text-center space-y-2">
@@ -54,7 +61,7 @@
 	{:else}
 		<!-- (fallback contents) -->
 	{/if}
-	<button type="button" class="btn-icon variant-filled-surface absolute top-4 right-4 bg-surface-100" on:click={() => {drawerStore.close()}}>
+	<button type="button" class="btn-icon fill-dark-token bg-surface-200 dark:bg-surface-600 absolute top-4 right-4" on:click={() => {drawerStore.close()}}>
 		<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512">
 			<!--!Font Awesome Pro 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.-->
 			<path d="M41 39C31.6 29.7 16.4 29.7 7 39S-2.3 63.6 7 73l183 183L7 439c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l183-183L407 473c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-183-183L441 73c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-183 183L41 39z"/>
diff --git a/src/routes/devices/+page.svelte b/src/routes/devices/+page.svelte
index 998447e..e85fec1 100644
--- a/src/routes/devices/+page.svelte
+++ b/src/routes/devices/+page.svelte
@@ -12,7 +12,6 @@
 		$deviceSetupShow = true;
 	}
 
-
 	import { getDrawerStore } from "@skeletonlabs/skeleton";
 
 	const drawerStore = getDrawerStore();
@@ -28,12 +27,12 @@
 	Devices
 </h1>
 {#each devicesList as device}
-<article class="card mb-6 p-4 relative bg-surface-50 bg-opacity-50">
+<article class="card mb-6 p-4 relative">
 	<img class="mb-2 px-4 py-14" src="{deviceImage}" alt="Device preview">
 	<div class="flex justify-between items-center">
 		<h2 class="text-2xl">{device}</h2>
 		<div class="flex gap-2">
-			<button type="button" class="btn-icon variant-filled-surface bg-surface-50" on:click={openDeviceSettings}>
+			<button type="button" class="btn-icon fill-dark-token bg-surface-200 dark:bg-surface-600" on:click={openDeviceSettings}>
 				<svg xmlns="http://www.w3.org/2000/svg" height="16" width="4" viewBox="0 0 128 512">
 					<!--!Font Awesome Pro 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.-->
 					<path d="M64 368a48 48 0 1 0 0 96 48 48 0 1 0 0-96zm0-160a48 48 0 1 0 0 96 48 48 0 1 0 0-96zM112 96A48 48 0 1 0 16 96a48 48 0 1 0 96 0z"/>
@@ -42,7 +41,7 @@
 		</div>
 	</div>
 	{#if online}
-		<div class="badge variant-glass-surface absolute top-4 right-4">
+		<div class="badge variant-glass-surface dark:variant-filled-surface absolute top-4 right-4">
 			<div class="w-2 h-2 rounded-full bg-success-500"></div>
 			<span>Online</span>
 		</div>
diff --git a/src/routes/settings/+page.svelte b/src/routes/settings/+page.svelte
index 895c099..ce27737 100644
--- a/src/routes/settings/+page.svelte
+++ b/src/routes/settings/+page.svelte
@@ -24,7 +24,7 @@
 <div class="flex flex-col gap-4">
 	<div class="flex gap-2">
 		<p>Dark Mode</p>
-		<LightSwitch />
+		<LightSwitch bgDark="bg-surface-700" />
 	</div>
 
 	<button type="button" class="btn variant-filled-surface w-full" on:click={resetOnboarding}>Restart Onboarding</button>