diff --git a/src/components/layout/PageThumbnail.svelte b/src/components/layout/PageThumbnail.svelte
new file mode 100644
index 0000000..37507ba
--- /dev/null
+++ b/src/components/layout/PageThumbnail.svelte
@@ -0,0 +1,8 @@
+<script>
+	let { thumbnail = '' } = $props();
+</script>
+
+<svelte:head>
+	<meta property="og:image" content={thumbnail} />
+	<meta property="twitter:image" content={thumbnail} />
+</svelte:head>
diff --git a/src/components/layout/SeoMetaTags.svelte b/src/components/layout/SeoMetaTags.svelte
index d669f4e..4c70003 100644
--- a/src/components/layout/SeoMetaTags.svelte
+++ b/src/components/layout/SeoMetaTags.svelte
@@ -4,9 +4,6 @@
 		description = 'Meet the student council, get access to academic and technical resources, registration for events, and much more!',
 		canonical = 'https://ecsess.mcgilleus.ca'
 	} = $props();
-
-	let thumbnail =
-		'https://cdn.sanity.io/images/vmtsvpe2/production/5d68504038cc692805dc5e51af83adedfefde442-5304x3443.jpg?h=628&fm=webp';
 </script>
 
 <svelte:head>
@@ -22,12 +19,10 @@
 	<meta property="og:url" content={canonical} />
 	<meta property="og:title" content={title} />
 	<meta property="og:description" content={description} />
-	<meta property="og:image" content={thumbnail} />
 
 	<!-- X (Twitter) -->
 	<meta property="twitter:card" content="summary_large_image" />
 	<meta property="twitter:url" content={canonical} />
 	<meta property="twitter:title" content={title} />
 	<meta property="twitter:description" content={description} />
-	<meta property="twitter:image" content={thumbnail} />
 </svelte:head>
diff --git a/src/routes/+layout.server.ts b/src/routes/+layout.server.ts
new file mode 100644
index 0000000..061305f
--- /dev/null
+++ b/src/routes/+layout.server.ts
@@ -0,0 +1,9 @@
+import { getFromCMS } from '$lib/utils.js';
+
+const thumbnailQuery = `*[_type == "homepage"]{
+	"thumbnail": councilPhoto.asset->url+"?h=800&fm=webp",
+}[0]`;
+
+export const load = async () => {
+	return { thumbnail: (await getFromCMS(thumbnailQuery)).thumbnail };
+};
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 2781ad6..8008c05 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -4,9 +4,9 @@
 	import { onMount } from 'svelte';
 	import Navbar from 'components/layout/NavBar.svelte';
 	import Footer from 'components/layout/Footer.svelte';
+	import PageThumbnail from 'components/layout/PageThumbnail.svelte';
 
-	let { children } = $props();
-
+	let { children, data } = $props();
 	// Lazy load analytics only in production for faster dev startup
 	onMount(async () => {
 		if (!dev) {
@@ -17,5 +17,6 @@
 </script>
 
 <Navbar />
+<PageThumbnail thumbnail={data.thumbnail} />
 {@render children()}
 <Footer />