diff --git a/src/lib/components/ServiceCard.svelte b/src/lib/components/ServiceCard.svelte
index 3c45f95..cc05270 100644
--- a/src/lib/components/ServiceCard.svelte
+++ b/src/lib/components/ServiceCard.svelte
@@ -89,7 +89,7 @@
 			{:else}{/if}
 			<a
 				href={service.href}
-				class="font-bold text-accent {hover.title ? 'text-primary' : 'text-secondary'}"
+				class="font-bold {!hover.title || 'text-secondary'}"
 				>{service.name}</a
 			>
 			{#if hover.title}
@@ -98,7 +98,7 @@
 					class="grid items-center"
 				>
 					<OpenInNewWindow
-						color={hover.title ? 'hsl(var(--primary))' : 'hsl(var(--secondary)'}
+						color={hover.title ? 'hsl(var(--secondary))' : 'hsl(var(--primary)'}
 						class="self-center"
 					/>
 				</div>
@@ -138,11 +138,11 @@
 							: 'Loading'}
 		</h1>
 	</div>
-	<p class="text-wrap text-center text-sm text-accent">{service.desc}</p>
+	<p class="text-wrap text-center text-sm">{service.desc}</p>
 	<p class="text-center text-sm font-bold text-destructive">{service.warn}</p>
 	<div class="grid {service.extLink ? 'grid-cols-2' : 'grid-cols-1'} mt-auto justify-items-center">
 		<a
-			class="flex flex-row rounded-md border-x-2 px-2 text-sm text-accent hover:border-primary hover:text-primary"
+			class="flex flex-row rounded-md border-x-2 px-2 text-sm hover:border-secondary hover:text-secondary"
 			href={service.href}
 			on:mouseover={() => (hover.link = true)}
 			on:mouseleave={() => (hover.link = false)}
@@ -154,7 +154,7 @@
 					class="grid items-center pl-1 pr-0"
 				>
 					<OpenInNewWindow
-						color={hover.link ? 'hsl(var(--primary))' : 'hsl(var(--secondary)'}
+						color={hover.link ? 'hsl(var(--secondary))' : 'hsl(var(--primary)'}
 						class="self-center"
 					/>
 				</div>
@@ -162,7 +162,7 @@
 		</a>
 		{#if service.extLink}
 			<a
-				class="flex flex-row rounded-md border-x-2 px-2 text-sm text-accent hover:border-primary hover:text-primary"
+				class="flex flex-row rounded-md border-x-2 px-2 text-sm hover:border-secondary hover:text-secondary"
 				href={service.extLink}
 				on:mouseover={() => (hover.ext = true)}
 				on:mouseleave={() => (hover.ext = false)}
@@ -174,7 +174,7 @@
 						class="grid items-center pl-1 pr-0"
 					>
 						<OpenInNewWindow
-							color={hover.ext ? 'hsl(var(--primary))' : 'hsl(var(--secondary)'}
+							color={hover.ext ? 'hsl(var(--secondary))' : 'hsl(var(--primary)'}
 							class="self-center"
 						/>
 					</div>
diff --git a/src/routes/Header.svelte b/src/routes/Header.svelte
index eef3aa8..28c4887 100644
--- a/src/routes/Header.svelte
+++ b/src/routes/Header.svelte
@@ -2,7 +2,7 @@
 	import { page } from '$app/stores';
 	import { Button } from '$lib/components/ui/button';
 
-	const button = 'border-t-2 bg-black/55 hover:bg-black/70 hover:border-primary w-28';
+	const button = 'border-t-2 bg-black/55 hover:bg-black/70 hover:border-secondary w-28';
 </script>
 
 <ul
@@ -12,9 +12,8 @@
 		<Button
 			variant="ghost"
 			href="/"
-			class="{button} + {$page.url.pathname === '/'
-				? 'border-primary text-primary'
-				: 'text-accent'}"
+			class="{button} + {!($page.url.pathname === '/')
+				|| 'border-secondary text-secondary'}"
 		>
 			Home
 		</Button>
@@ -23,9 +22,8 @@
 		<Button
 			variant="ghost"
 			href="/servers"
-			class="{button} + {$page.url.pathname.startsWith('/servers')
-				? 'border-primary text-primary'
-				: 'text-accent'}"
+			class="{button} + {!$page.url.pathname.startsWith('/servers')
+				|| 'border-secondary text-secondary'}"
 		>
 			Servers
 		</Button>
@@ -34,9 +32,8 @@
 		<Button
 			variant="ghost"
 			href="/services"
-			class="{button} + {$page.url.pathname.startsWith('/services')
-				? 'border-primary text-primary'
-				: 'text-accent'}"
+			class="{button} + {!$page.url.pathname.startsWith('/services')
+				|| 'border-secondary text-secondary'}"
 		>
 			Services
 		</Button>
@@ -45,9 +42,8 @@
 		<Button
 			variant="ghost"
 			href="/about"
-			class="{button} + {$page.url.pathname.startsWith('/about')
-				? 'border-primary text-primary'
-				: 'text-accent'}"
+			class="{button} + {!$page.url.pathname.startsWith('/about')
+				|| 'border-secondary text-secondary'}"
 		>
 			About
 		</Button>