diff --git a/src/app.css b/src/app.css
index d6c48cb..f2336b5 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1,5 +1,9 @@
 @import 'tailwindcss';
-@plugin "daisyui";
+@plugin "daisyui" {
+	themes:
+		light --default,
+		forest --prefersdark;
+}
 
 :root {
 	@apply font-[Roboto];
diff --git a/src/lib/components/Hero.svelte b/src/lib/components/Hero.svelte
index d09fbe6..a9c3bca 100644
--- a/src/lib/components/Hero.svelte
+++ b/src/lib/components/Hero.svelte
@@ -11,7 +11,7 @@
 	let [first, rest] = $derived([name.split(' ')[0], name.split(' ').slice(1).join(' ')]);
 </script>
 
-<div class="hero bg-base-200">
+<div class="hero">
 	<div class="hero-content">
 		<div class="flex flex-col items-center gap-12 lg:flex-row lg:items-start">
 			<div class="flex-0">
diff --git a/src/lib/components/Navbar.svelte b/src/lib/components/Navbar.svelte
index 9fa85d9..8315d09 100644
--- a/src/lib/components/Navbar.svelte
+++ b/src/lib/components/Navbar.svelte
@@ -34,8 +34,8 @@
 		{#each pages as page (page.slug)}
 			<a
 				href={page.slug}
-				class="link hover:link-accent transition-colors"
-				class:link-accent={route.id === page.slug}
+				class="link hover:link-secondary transition-colors"
+				class:link-secondary={route.id === page.slug}
 			>
 				{page.name}
 			</a>
diff --git a/src/routes/+layout.server.ts b/src/routes/+layout.server.ts
new file mode 100644
index 0000000..b441fad
--- /dev/null
+++ b/src/routes/+layout.server.ts
@@ -0,0 +1,21 @@
+import { logger } from '$lib/server/logger';
+import { error } from '@sveltejs/kit';
+import type { LayoutServerLoad } from './$types';
+
+export const load: LayoutServerLoad = async ({ locals }) => {
+	const { strapi } = locals;
+
+	try {
+		const result = await strapi.SiteBackground();
+		return {
+			background: {
+				url: result.data.Background.url
+			}
+		};
+	} catch (err) {
+		logger.error('Uh-oh!', err);
+		if (err instanceof Error) {
+			error(500, err);
+		}
+	}
+};
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index dc066f6..2938f74 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -3,8 +3,9 @@
 	import { navigating, page } from '$app/state';
 	import Navbar from '$lib/components/Navbar.svelte';
 	import '../app.css';
+	import type { LayoutProps } from './$types';
 
-	let { children } = $props();
+	let { children, data }: LayoutProps = $props();
 
 	let drawerOpen = $state(false);
 
@@ -29,19 +30,18 @@
 	let current = $derived(pages.find((p) => p.slug === page.route.id));
 </script>
 
-<div class="drawer drawer-end">
+<div class="drawer drawer-end bg-cover" style:background-image={`url(${data.background.url})`}>
 	<input id="navigation-drawer" type="checkbox" class="drawer-toggle" bind:checked={drawerOpen} />
-
-	<div class="drawer-content h-screen w-screen lg:p-12">
+	<div class="drawer-content h-screen w-screen overflow-y-scroll lg:p-12">
 		<div
-			class="bg-base-200 mx-auto grid min-h-full max-w-7xl grid-rows-[max-content_max-content_auto_max-content] overflow-hidden shadow-md lg:gap-4 lg:rounded-4xl"
+			class="bg-base-100 border-base-300 mx-auto grid min-h-full max-w-7xl grid-rows-[max-content_max-content_auto_max-content] overflow-hidden border-2 shadow-md lg:gap-4 lg:rounded-4xl"
 		>
 			<header class="lg:p-6">
 				<Navbar drawerId="navigation-drawer" title="Benjamin Palko" {pages} route={page.route} />
 			</header>
 			<div>
 				{#if current && current.slug !== '/'}
-					<div class="bg-base-300 w-full px-6 py-4 lg:px-12 lg:py-8">
+					<div class="bg-base-200 w-full px-6 py-4 lg:px-12 lg:py-8">
 						<h1 class="text-2xl font-light lg:text-4xl">{current.name}</h1>
 					</div>
 				{/if}
@@ -88,7 +88,7 @@
 					<span class="text-base-content font-semibold">Benjamin</span>
 					Palko
 				</h2>
-				<label for="navigation-drawer" class="btn btn-accent btn-outline btn-lg">Close</label>
+				<label for="navigation-drawer" class="btn btn-secondary btn-outline btn-lg">Close</label>
 			</div>
 		</div>
 	</div>
diff --git a/strapi/src/api/site-background/content-types/site-background/schema.json b/strapi/src/api/site-background/content-types/site-background/schema.json
new file mode 100644
index 0000000..15dabf0
--- /dev/null
+++ b/strapi/src/api/site-background/content-types/site-background/schema.json
@@ -0,0 +1,19 @@
+{
+	"kind": "singleType",
+	"collectionName": "site_backgrounds",
+	"info": {
+		"singularName": "site-background",
+		"pluralName": "site-backgrounds",
+		"displayName": "Site Background"
+	},
+	"options": {
+		"draftAndPublish": true
+	},
+	"attributes": {
+		"Background": {
+			"allowedTypes": ["images", "files", "videos", "audios"],
+			"type": "media",
+			"multiple": false
+		}
+	}
+}
diff --git a/strapi/src/api/site-background/controllers/site-background.ts b/strapi/src/api/site-background/controllers/site-background.ts
new file mode 100644
index 0000000..7284b59
--- /dev/null
+++ b/strapi/src/api/site-background/controllers/site-background.ts
@@ -0,0 +1,7 @@
+/**
+ * site-background controller
+ */
+
+import { factories } from '@strapi/strapi';
+
+export default factories.createCoreController('api::site-background.site-background');
diff --git a/strapi/src/api/site-background/routes/site-background.ts b/strapi/src/api/site-background/routes/site-background.ts
new file mode 100644
index 0000000..0bddb8d
--- /dev/null
+++ b/strapi/src/api/site-background/routes/site-background.ts
@@ -0,0 +1,7 @@
+/**
+ * site-background router
+ */
+
+import { factories } from '@strapi/strapi';
+
+export default factories.createCoreRouter('api::site-background.site-background');
diff --git a/strapi/src/api/site-background/services/site-background.ts b/strapi/src/api/site-background/services/site-background.ts
new file mode 100644
index 0000000..bfcc5a8
--- /dev/null
+++ b/strapi/src/api/site-background/services/site-background.ts
@@ -0,0 +1,7 @@
+/**
+ * site-background service
+ */
+
+import { factories } from '@strapi/strapi';
+
+export default factories.createCoreService('api::site-background.site-background');