diff --git a/src/app.html b/src/app.html
index 77a5ff5..660c7e1 100644
--- a/src/app.html
+++ b/src/app.html
@@ -1,12 +1,15 @@
 <!doctype html>
 <html lang="en">
-	<head>
-		<meta charset="utf-8" />
-		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
-		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		%sveltekit.head%
-	</head>
-	<body data-sveltekit-preload-data="hover">
-		<div style="display: contents">%sveltekit.body%</div>
-	</body>
+
+<head>
+	<meta charset="utf-8" />
+	<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+	<meta name="viewport" content="width=device-width, initial-scale=1" />
+	%sveltekit.head%
+</head>
+
+<body data-sveltekit-preload-data="hover" class="dark:bg-zinc-950 dark:text-white">
+	<div style="display: contents">%sveltekit.body%</div>
+</body>
+
 </html>
diff --git a/src/lib/components/Attribute.svelte b/src/lib/components/Attribute.svelte
index 73f248b..fe8faa7 100644
--- a/src/lib/components/Attribute.svelte
+++ b/src/lib/components/Attribute.svelte
@@ -8,12 +8,14 @@
 </script>
 
 <dl class="flex gap-1 text-sm">
-	<dt class="w-1/3 sm:w-1/4 lg:w-1/3 shrink-0 min-w-0 truncate text-gray-700">
+	<dt
+		class="w-1/4 shrink-0 min-w-0 truncate text-gray-700 dark:text-gray-300"
+	>
 		{key}
 	</dt>
 	{#if copyable}
 		<button
-			class="focus:outline-none flex items-center gap-x-1 truncate hover:bg-gray-100 rounded-md"
+			class="focus:outline-none flex items-center gap-x-1 truncate hover:bg-zinc-100 dark:hover:bg-zinc-800 rounded-md"
 			on:click={() => {
 				navigator.clipboard.writeText(value);
 				toast.push("Copied " + key);
@@ -22,7 +24,11 @@
 			<dd class="min-w-0 truncate px-2 py-1">
 				{value}
 			</dd>
-			<IconCopy stroke={1} size={24} class="text-gray-600 pr-2" />
+			<IconCopy
+				stroke={1}
+				size={24}
+				class="text-gray-600 dark:text-gray-200 pr-2"
+			/>
 		</button>
 	{:else}
 		<dd class="min-w-0 truncate px-2 py-1">
diff --git a/src/routes/machines/+page.svelte b/src/routes/machines/+page.svelte
index 3e73dcb..368a354 100644
--- a/src/routes/machines/+page.svelte
+++ b/src/routes/machines/+page.svelte
@@ -32,23 +32,26 @@
 				<th>Last Seen</th>
 			</tr>
 		</thead>
-		<tbody class="divide-y divide-gray-200">
+		<tbody class="divide-y divide-zinc-200 dark:divide-zinc-700">
 			{#each $query.data as machine}
-				<tr class="hover:bg-gray-100">
+				<tr class="hover:bg-zinc-100 dark:hover:bg-zinc-800">
 					<td class="pt-2 pb-4 pl-4">
 						<a href={`machines/${machine.id}`}>
 							<h1>{machine.givenName}</h1>
-							<span class="text-sm font-mono text-gray-500"
+							<span
+								class="text-sm font-mono text-gray-500 dark:text-gray-400"
 								>{machine.name}</span
 							>
 						</a>
 					</td>
-					<td class="pt-2 pb-4 font-mono text-gray-600">
+					<td
+						class="pt-2 pb-4 font-mono text-gray-600 dark:text-gray-300"
+					>
 						{#each machine.ipAddresses as ip, i}
 							<span
 								class={clsx(
 									"flex items-center gap-x-1",
-									i > 0 && "text-sm text-gray-400",
+									i > 0 && "text-sm text-gray-500",
 								)}
 							>
 								{ip}
@@ -62,7 +65,7 @@
 									<IconCopy
 										stroke={1}
 										size={16}
-										class="text-gray-400"
+										class="text-gray-400 dark:text-gray-500"
 									/>
 								</button>
 							</span>
@@ -70,7 +73,7 @@
 					</td>
 					<td>
 						<span
-							class="flex items-center gap-x-1 text-sm text-gray-500"
+							class="flex items-center gap-x-1 text-sm text-gray-500 dark:text-gray-400"
 						>
 							<IconCircleFilled
 								stroke={1}
@@ -78,8 +81,8 @@
 								class={clsx(
 									"w-4 h-4",
 									machine.online
-										? "text-green-700"
-										: "text-gray-300",
+										? "text-green-700 dark:text-green-400"
+										: "text-gray-300 dark:text-gray-500",
 								)}
 							/>
 							<p>
diff --git a/src/routes/machines/[id]/+page.svelte b/src/routes/machines/[id]/+page.svelte
index 2cb32e8..4e46669 100644
--- a/src/routes/machines/[id]/+page.svelte
+++ b/src/routes/machines/[id]/+page.svelte
@@ -3,7 +3,7 @@
 	import { createQuery } from "@tanstack/svelte-query";
 	import { pull } from "$lib/api";
 	import type { Machine } from "$lib/types";
-	import { IconCircleFilled, IconCopy } from "@tabler/icons-svelte";
+	import { IconCircleFilled } from "@tabler/icons-svelte";
 	import Attribute from "$lib/components/Attribute.svelte";
 	import clsx from "clsx";
 
@@ -44,9 +44,7 @@
 				)}
 			/>
 		</span>
-		<div
-			class="p-4 md:p-6 border rounded-md grid grid-cols-1 lg:grid-cols-2 gap-y-2 sm:gap-x-12"
-		>
+		<div class="p-4 md:p-6 border dark:border-zinc-700 rounded-lg">
 			<Attribute key="Creator" value={$query.data.user.name} />
 			<Attribute key="Node ID" value={$query.data.id} />
 			<Attribute key="Node Name" value={$query.data.givenName} />
