diff --git a/src/components/ProjectListItem.tsx b/src/components/ProjectListItem.tsx
index e3649167..a88e8800 100644
--- a/src/components/ProjectListItem.tsx
+++ b/src/components/ProjectListItem.tsx
@@ -1,6 +1,6 @@
+import { Link } from "react-router-dom";
 import { cn } from "@/lib/utils";
 import type { ProjectMetadata } from "@/projects";
-import { Link } from "react-router-dom";
 
 export function ProjectListItem({
 	metadata,
@@ -16,10 +16,8 @@ export function ProjectListItem({
 		<Link
 			to={`/projects/${metadata.slug}`}
 			className={cn(
-				"group block flex flex-col justify-between rounded-md transition-colors duration-200 border-2 hover:border-accent",
-				isDevMode && metadata.hidden
-					? "border-dashed border-accent"
-					: "border-gutter-dim",
+				"group block flex flex-col justify-between transition-colors duration-200 border-2 hover:border-accent",
+				isDevMode && metadata.hidden && "border-dashed border-accent",
 			)}
 			data-tags={tags.join(",")}
 		>
@@ -32,7 +30,7 @@ export function ProjectListItem({
 							className="w-full h-full object-cover rounded"
 						/>
 					) : (
-						<div className="w-full h-full border border-gutter rounded" />
+						<div className="w-full h-full border rounded" />
 					)}
 				</div>
 				<div className="flex flex-col gap-2">
@@ -45,7 +43,7 @@ export function ProjectListItem({
 							{tags.map((tag) => (
 								<span
 									key={tag}
-									className="flex items-center text-fg font-500 rounded-md border border-gutter px-1.5 py-0.5"
+									className="flex items-center text-fg font-500 rounded-sm border px-1.5 py-0.5"
 								>
 									{tag}
 								</span>
@@ -55,9 +53,7 @@ export function ProjectListItem({
 				</div>
 			</div>
 			<div className="w-full flex justify-end p-2 pt-1">
-				<p className="text-xs text-gutter group-hover:text-accent">
-					{metadata.date}
-				</p>
+				<p className="text-xs group-hover:text-accent">{metadata.date}</p>
 			</div>
 		</Link>
 	);
diff --git a/src/components/theme-toggle.tsx b/src/components/theme-toggle.tsx
index 664d9f40..001d5aa7 100644
--- a/src/components/theme-toggle.tsx
+++ b/src/components/theme-toggle.tsx
@@ -1,6 +1,6 @@
+import { Moon, Sun } from "@nsmr/pixelart-react";
 import { useTheme } from "@/components/theme-provider";
 import { Button } from "@/components/ui/button";
-import { Moon, Sun } from "@nsmr/pixelart-react";
 
 export function ThemeToggle() {
 	const { resolvedTheme, setTheme } = useTheme();
diff --git a/src/index.css b/src/index.css
index 7b27a8f9..af751c4d 100644
--- a/src/index.css
+++ b/src/index.css
@@ -20,7 +20,7 @@
 	--primary-foreground: #f6efe3;
 	--secondary: #e5dccb;
 	--secondary-foreground: #3a3329;
-	--muted: #e0d7c7;
+	--muted: #dbd0bd;
 	--muted-foreground: #6e6457;
 	--accent: #df7126;
 	--accent-foreground: #5f361b;
diff --git a/src/projects/factor-e/index.tsx b/src/projects/factor-e/index.tsx
index cc95c312..520d7187 100644
--- a/src/projects/factor-e/index.tsx
+++ b/src/projects/factor-e/index.tsx
@@ -42,7 +42,7 @@ export function FactorEProject() {
 			</p>
 
 			<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-				<div className="bg-highlight p-4 rounded mt-4">
+				<div className="bg-muted p-4 rounded mt-4">
 					<h2 className="text-lg text-green-500 mb-2 text-balance">
 						Key features
 					</h2>
@@ -59,7 +59,7 @@ export function FactorEProject() {
 					</ul>
 				</div>
 
-				<div className="bg-highlight p-4 rounded mt-4">
+				<div className="bg-muted p-4 rounded mt-4">
 					<h2 className="text-lg text-green-500 mb-2 text-balance">
 						Technologies
 					</h2>
diff --git a/src/projects/flackie/index.tsx b/src/projects/flackie/index.tsx
index 51335b8a..8e2a4dec 100644
--- a/src/projects/flackie/index.tsx
+++ b/src/projects/flackie/index.tsx
@@ -34,7 +34,7 @@ export function FlackieProject() {
 			</p>
 
 			<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-				<div className="bg-highlight p-4 rounded mt-4">
+				<div className="bg-muted p-4 rounded mt-4">
 					<h2 className="text-lg text-green-500 mb-2 text-balance">
 						Key features
 					</h2>
@@ -47,7 +47,7 @@ export function FlackieProject() {
 					</ul>
 				</div>
 
-				<div className="bg-highlight p-4 rounded mt-4">
+				<div className="bg-muted p-4 rounded mt-4">
 					<h2 className="text-lg text-green-500 mb-2 text-balance">
 						Technologies
 					</h2>
diff --git a/src/projects/glimpse/index.tsx b/src/projects/glimpse/index.tsx
index 2bd3f7fc..232dce0f 100644
--- a/src/projects/glimpse/index.tsx
+++ b/src/projects/glimpse/index.tsx
@@ -34,7 +34,7 @@ export function GlimpseProject() {
 				enable push notifications for new posts, comments, and friend requests.
 			</p>
 			<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-				<div className="bg-highlight p-4 rounded">
+				<div className="bg-muted p-4 rounded">
 					<h2 className="text-lg text-green-500 mb-2 text-balance">
 						Key features
 					</h2>
@@ -48,7 +48,7 @@ export function GlimpseProject() {
 					</ul>
 				</div>
 
-				<div className="bg-highlight p-4 rounded">
+				<div className="bg-muted p-4 rounded">
 					<h2 className="text-lg text-green-500 mb-2 text-balance">
 						Technologies
 					</h2>
diff --git a/src/projects/good-morning/index.tsx b/src/projects/good-morning/index.tsx
index af1f7b26..16718589 100644
--- a/src/projects/good-morning/index.tsx
+++ b/src/projects/good-morning/index.tsx
@@ -8,7 +8,7 @@ export const metadata = {
 	date: "October 2025",
 	slug: "good-morning",
 	image: "/good-morning-icon.png",
-	url: "https://gm.ob248.com",
+	// url: "https://gm.ob248.com",
 	github: "https://github.com/hex248/good-morning",
 	hidden: false,
 	tags: [
@@ -38,7 +38,7 @@ export function GoodMorningProject() {
 			</p>
 
 			<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-				<div className="bg-highlight p-4 rounded mt-4">
+				<div className="bg-muted p-4 rounded mt-4">
 					<h2 className="text-lg text-green-500 mb-2 text-balance">
 						Key features
 					</h2>
@@ -49,7 +49,7 @@ export function GoodMorningProject() {
 					</ul>
 				</div>
 
-				<div className="bg-highlight p-4 rounded mt-4">
+				<div className="bg-muted p-4 rounded mt-4">
 					<h2 className="text-lg text-green-500 mb-2 text-balance">
 						Technologies
 					</h2>
diff --git a/src/projects/mizu/index.tsx b/src/projects/mizu/index.tsx
index 0fdc5778..47fd114d 100644
--- a/src/projects/mizu/index.tsx
+++ b/src/projects/mizu/index.tsx
@@ -34,7 +34,7 @@ export function MizuProject() {
 			</p>
 
 			<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-				<div className="bg-highlight p-4 rounded mt-4">
+				<div className="bg-muted p-4 rounded mt-4">
 					<h2 className="text-lg text-green-500 mb-2 text-balance">
 						Technologies
 					</h2>
diff --git a/src/projects/prayerbud/index.tsx b/src/projects/prayerbud/index.tsx
index 203f8809..5c3546a4 100644
--- a/src/projects/prayerbud/index.tsx
+++ b/src/projects/prayerbud/index.tsx
@@ -33,7 +33,7 @@ export function PrayerbudProject() {
 			</div>
 
 			<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-				<div className="bg-highlight p-4 rounded">
+				<div className="bg-muted p-4 rounded">
 					<h2 className="text-lg text-green-500 mb-2 text-balance">
 						Key features
 					</h2>
@@ -46,7 +46,7 @@ export function PrayerbudProject() {
 					</ul>
 				</div>
 
-				<div className="bg-highlight p-4 rounded">
+				<div className="bg-muted p-4 rounded">
 					<h2 className="text-lg text-green-500 mb-2 text-balance">
 						Technologies
 					</h2>
diff --git a/src/projects/shared/Demo.tsx b/src/projects/shared/Demo.tsx
index ac8a7189..522ecb0f 100644
--- a/src/projects/shared/Demo.tsx
+++ b/src/projects/shared/Demo.tsx
@@ -1,5 +1,5 @@
-import { cn } from "@/lib/utils";
 import type { ReactNode } from "react";
+import { cn } from "@/lib/utils";
 
 type DemoProps = {
 	image: string;
@@ -13,7 +13,7 @@ export function Demo({ image, title, type = "plain", children }: DemoProps) {
 		<figure
 			className={cn(
 				"w-full",
-				type === "boxed" && "border border-gutter rounded bg-highlight p-2",
+				type === "boxed" && "border rounded bg-muted p-2",
 			)}
 		>
 			<img
@@ -21,7 +21,7 @@ export function Demo({ image, title, type = "plain", children }: DemoProps) {
 				alt={title}
 				className={cn("w-full", type === "boxed" ? "rounded" : "rounded-md")}
 			/>
-			<figcaption className="mt-2 text-sm text-gutter text-pretty">
+			<figcaption className="mt-2 text-sm text-pretty">
 				{title}
 				{children}
 			</figcaption>
diff --git a/src/projects/shared/ProjectPage.tsx b/src/projects/shared/ProjectPage.tsx
index 02f23b50..40721c70 100644
--- a/src/projects/shared/ProjectPage.tsx
+++ b/src/projects/shared/ProjectPage.tsx
@@ -1,5 +1,6 @@
-import type { ProjectMetadata } from "@/projects";
 import type { ReactNode } from "react";
+import { Link } from "react-router-dom";
+import type { ProjectMetadata } from "@/projects";
 
 type ProjectPageProps = {
 	metadata: ProjectMetadata;
@@ -11,6 +12,12 @@ export function ProjectPage({ metadata, children }: ProjectPageProps) {
 
 	return (
 		<div className="mx-auto w-full max-w-4xl px-6 py-10 text-md">
+			<Link
+				to="/"
+				className="inline-flex items-center text-sm text-green-500 hover:underline mb-4"
+			>
+				Home
+			</Link>
 			<div className="flex flex-wrap items-start justify-between gap-6 mb-4">
 				<div className="flex flex-col gap-2">
 					<h1 className="text-2xl text-accent text-balance">
@@ -23,7 +30,7 @@ export function ProjectPage({ metadata, children }: ProjectPageProps) {
 							className="w-24 h-24 rounded mb-2"
 						/>
 					) : (
-						<div className="w-24 h-24 mb-2 border border-gutter rounded" />
+						<div className="w-24 h-24 mb-2 border rounded" />
 					)}
 				</div>
 				<div className="flex flex-col items-end gap-2">
@@ -40,7 +47,7 @@ export function ProjectPage({ metadata, children }: ProjectPageProps) {
 				</div>
 			</div>
 
-			<p className="text-sm text-gutter mb-2">
+			<p className="text-sm mb-2">
 				{metadata.date}
 				{metadata.github ? (
 					<>
@@ -63,7 +70,7 @@ export function ProjectPage({ metadata, children }: ProjectPageProps) {
 					{tags.map((tag: string) => (
 						<span
 							key={tag}
-							className="flex items-center text-gutter font-500 rounded-md border border-gutter px-1.5 py-1"
+							className="flex items-center font-500 rounded-sm border px-1.5 py-1"
 						>
 							{tag}
 						</span>
@@ -73,7 +80,7 @@ export function ProjectPage({ metadata, children }: ProjectPageProps) {
 
 			<div className="text-pretty">{children}</div>
 
-			<p className="text-center text-md text-gutter mt-8 mb-4">
+			<p className="text-center text-md mt-8 mb-4">
 				Oliver Bryan - {metadata.date}
 				{metadata.github ? (
 					<>
diff --git a/src/projects/shleep/index.tsx b/src/projects/shleep/index.tsx
index 1fbaee18..386f2f03 100644
--- a/src/projects/shleep/index.tsx
+++ b/src/projects/shleep/index.tsx
@@ -22,7 +22,7 @@ export function ShleepProject() {
 				help aid you and your party to protect a sleeping child from nightmares.
 			</p>
 
-			<div className="bg-highlight p-4 rounded mt-4">
+			<div className="bg-muted p-4 rounded mt-4">
 				<h2 className="text-lg text-green-500 mb-2 text-balance">
 					Technologies
 				</h2>
diff --git a/src/projects/sprint/index.tsx b/src/projects/sprint/index.tsx
index e44925b2..e4e7cca3 100644
--- a/src/projects/sprint/index.tsx
+++ b/src/projects/sprint/index.tsx
@@ -36,7 +36,7 @@ export function SprintProject() {
 			</p>
 
 			<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-				<div className="bg-highlight p-4 rounded">
+				<div className="bg-muted p-4 rounded">
 					<h2 className="text-lg text-green-500 mb-2 text-balance">
 						Key features
 					</h2>
@@ -54,7 +54,7 @@ export function SprintProject() {
 					</ul>
 				</div>
 
-				<div className="bg-highlight p-4 rounded">
+				<div className="bg-muted p-4 rounded">
 					<h2 className="text-lg text-green-500 mb-2 text-balance">
 						Technologies
 					</h2>
diff --git a/src/projects/watercooler/index.tsx b/src/projects/watercooler/index.tsx
index 1228bc51..3608674c 100644
--- a/src/projects/watercooler/index.tsx
+++ b/src/projects/watercooler/index.tsx
@@ -28,7 +28,7 @@ export function WatercoolerProject() {
 			<p className="text-pretty">watercooler description here</p>
 
 			<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-				<div className="bg-highlight p-4 rounded mt-4">
+				<div className="bg-muted p-4 rounded mt-4">
 					<h2 className="text-lg text-green-500 mb-2 text-balance">
 						Key features
 					</h2>
@@ -40,7 +40,7 @@ export function WatercoolerProject() {
 					</ul>
 				</div>
 
-				<div className="bg-highlight p-4 rounded mt-4">
+				<div className="bg-muted p-4 rounded mt-4">
 					<h2 className="text-lg text-green-500 mb-2 text-balance">
 						Technologies
 					</h2>
diff --git a/src/projects/wiskatron/index.tsx b/src/projects/wiskatron/index.tsx
index 715aca42..64664143 100644
--- a/src/projects/wiskatron/index.tsx
+++ b/src/projects/wiskatron/index.tsx
@@ -22,7 +22,7 @@ export function WiskatronProject() {
 			</p>
 
 			<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-				<div className="bg-highlight p-4 rounded">
+				<div className="bg-muted p-4 rounded">
 					<h2 className="text-lg text-green-500 mb-2 text-balance">
 						Key features
 					</h2>
@@ -34,7 +34,7 @@ export function WiskatronProject() {
 					</ul>
 				</div>
 
-				<div className="bg-highlight p-4 rounded">
+				<div className="bg-muted p-4 rounded">
 					<h2 className="text-lg text-green-500 mb-2 text-balance">
 						Technologies
 					</h2>